feat(plasma-tokens-utils): Update formatting tokens name from camelCase to kebab-case #971

neretin-trike · 2024-01-16T13:12:30Z

Tokens naming

изменена нотация с camelCase на kebab-case для старых токенов цветов и типографики

Было:

Стало:

What/why changed

Библиотека styled-component в 5 версии автоматически переименовывала токены в kebab-case нотацию. Но новая 6 версия, а также другая css-in-js библиотека Linaria этого не делает. Поэтому для их поддержки это было сделано на нашей стороне

🐤 Download canary assets:

borderRadius

borderRadius_default_react-native--canary.971.7542106012.ts
borderRadius_plasma_b2c_react-native--canary.971.7542106012.ts
borderRadius_plasma_web_react-native--canary.971.7542106012.ts
borderRadius_sberHealth_react-native--canary.971.7542106012.ts
borderRadius_sbermarket_business_react-native--canary.971.7542106012.ts
borderRadius_sbermarket_metro_react-native--canary.971.7542106012.ts
borderRadius_sbermarket_react-native--canary.971.7542106012.ts
borderRadius_sbermarket_selgros_react-native--canary.971.7542106012.ts
borderRadius_sbermarket_wlbusiness_react-native--canary.971.7542106012.ts
borderRadius_sberonline_react-native--canary.971.7542106012.ts
borderRadius_sberprime_react-native--canary.971.7542106012.ts
borderRadius_stylesSalute_react-native--canary.971.7542106012.ts

color

color_default_ios-swift--canary.971.7542106012.swift
color_default_kotlin--canary.971.7542106012.kt
color_default_react-native--canary.971.7542106012.ts
color_default_xml--canary.971.7542106012.xml
color_plasma_b2c_ios-swift--canary.971.7542106012.swift
color_plasma_b2c_kotlin--canary.971.7542106012.kt
color_plasma_b2c_react-native--canary.971.7542106012.ts
color_plasma_b2c_xml--canary.971.7542106012.xml
color_plasma_web_ios-swift--canary.971.7542106012.swift
color_plasma_web_kotlin--canary.971.7542106012.kt
color_plasma_web_react-native--canary.971.7542106012.ts
color_plasma_web_xml--canary.971.7542106012.xml
color_sberHealth_ios-swift--canary.971.7542106012.swift
color_sberHealth_kotlin--canary.971.7542106012.kt
color_sberHealth_react-native--canary.971.7542106012.ts
color_sberHealth_xml--canary.971.7542106012.xml
color_sbermarket_business_ios-swift--canary.971.7542106012.swift
color_sbermarket_business_kotlin--canary.971.7542106012.kt
color_sbermarket_business_react-native--canary.971.7542106012.ts
color_sbermarket_business_xml--canary.971.7542106012.xml
color_sbermarket_ios-swift--canary.971.7542106012.swift
color_sbermarket_kotlin--canary.971.7542106012.kt
color_sbermarket_metro_ios-swift--canary.971.7542106012.swift
color_sbermarket_metro_kotlin--canary.971.7542106012.kt
color_sbermarket_metro_react-native--canary.971.7542106012.ts
color_sbermarket_metro_xml--canary.971.7542106012.xml
color_sbermarket_react-native--canary.971.7542106012.ts
color_sbermarket_selgros_ios-swift--canary.971.7542106012.swift
color_sbermarket_selgros_kotlin--canary.971.7542106012.kt
color_sbermarket_selgros_react-native--canary.971.7542106012.ts
color_sbermarket_selgros_xml--canary.971.7542106012.xml
color_sbermarket_wlbusiness_ios-swift--canary.971.7542106012.swift
color_sbermarket_wlbusiness_kotlin--canary.971.7542106012.kt
color_sbermarket_wlbusiness_react-native--canary.971.7542106012.ts
color_sbermarket_wlbusiness_xml--canary.971.7542106012.xml
color_sbermarket_xml--canary.971.7542106012.xml
color_sberonline_ios-swift--canary.971.7542106012.swift
color_sberonline_kotlin--canary.971.7542106012.kt
color_sberonline_react-native--canary.971.7542106012.ts
color_sberonline_xml--canary.971.7542106012.xml
color_sberprime_ios-swift--canary.971.7542106012.swift
color_sberprime_kotlin--canary.971.7542106012.kt
color_sberprime_react-native--canary.971.7542106012.ts
color_sberprime_xml--canary.971.7542106012.xml
color_stylesSalute_ios-swift--canary.971.7542106012.swift
color_stylesSalute_kotlin--canary.971.7542106012.kt
color_stylesSalute_react-native--canary.971.7542106012.ts
color_stylesSalute_xml--canary.971.7542106012.xml

shadow

shadow_default_react-native--canary.971.7542106012.ts
shadow_plasma_b2c_react-native--canary.971.7542106012.ts
shadow_plasma_web_react-native--canary.971.7542106012.ts
shadow_sberHealth_react-native--canary.971.7542106012.ts
shadow_sbermarket_business_react-native--canary.971.7542106012.ts
shadow_sbermarket_metro_react-native--canary.971.7542106012.ts
shadow_sbermarket_react-native--canary.971.7542106012.ts
shadow_sbermarket_selgros_react-native--canary.971.7542106012.ts
shadow_sbermarket_wlbusiness_react-native--canary.971.7542106012.ts
shadow_sberonline_react-native--canary.971.7542106012.ts
shadow_sberprime_react-native--canary.971.7542106012.ts
shadow_stylesSalute_react-native--canary.971.7542106012.ts

spacing

spacing_default_react-native--canary.971.7542106012.ts
spacing_plasma_b2c_react-native--canary.971.7542106012.ts
spacing_plasma_web_react-native--canary.971.7542106012.ts
spacing_sberHealth_react-native--canary.971.7542106012.ts
spacing_sbermarket_business_react-native--canary.971.7542106012.ts
spacing_sbermarket_metro_react-native--canary.971.7542106012.ts
spacing_sbermarket_react-native--canary.971.7542106012.ts
spacing_sbermarket_selgros_react-native--canary.971.7542106012.ts
spacing_sbermarket_wlbusiness_react-native--canary.971.7542106012.ts
spacing_sberonline_react-native--canary.971.7542106012.ts
spacing_sberprime_react-native--canary.971.7542106012.ts
spacing_stylesSalute_react-native--canary.971.7542106012.ts

typo

typo_mage_ios-swift--canary.971.7542106012.swift
typo_mage_kotlin--canary.971.7542106012.kt
typo_mage_react-native--canary.971.7542106012.ts
typo_plasma_ios-swift--canary.971.7542106012.swift
typo_plasma_kotlin--canary.971.7542106012.kt
typo_plasma_react-native--canary.971.7542106012.ts
typo_ruler_ios-swift--canary.971.7542106012.swift
typo_ruler_kotlin--canary.971.7542106012.kt
typo_ruler_react-native--canary.971.7542106012.ts
typo_sage_ios-swift--canary.971.7542106012.swift
typo_sage_kotlin--canary.971.7542106012.kt
typo_sage_react-native--canary.971.7542106012.ts
typo_sbermarket_ios-swift--canary.971.7542106012.swift
typo_sbermarket_kotlin--canary.971.7542106012.kt
typo_sbermarket_react-native--canary.971.7542106012.ts
typo_soulmate_ios-swift--canary.971.7542106012.swift
typo_soulmate_kotlin--canary.971.7542106012.kt
typo_soulmate_react-native--canary.971.7542106012.ts

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

Salute-Eva · 2024-01-16T13:15:40Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-971/

utils/plasma-tokens-utils/src/utils/objectToCSSVariables.ts

Yakutoc · 2024-01-16T13:21:38Z

packages/plasma-tokens/src/typo/sberPortal.ts

+        '--plasma-typo-headline2-font-size': '1.5rem',
+        '--plasma-typo-headline2-letter-spacing': '-0.0220em',
+        '--plasma-typo-headline2-line-height': '1.75rem',
+        '--plasma-typo-headline3-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif',


@neretin-trike
А напомни пожалуйста на что влияет нейминг?

в описании как раз есть это :) Линария и другие библиотеки (даже тот же styled-component 6) внутри себя не превращают токены в эту нотацию. А это в свою очередь будет ломаться, т.к. у нас везде используется kebab-case

Salute-Eva · 2024-01-16T13:52:26Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-971/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-971/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-971/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-971/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-971/temple-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-971/new-hope-storybook/
asdk storybook: http://plasma.sberdevices.ru/pr/pr-971/asdk-storybook/

Salute-Eva · 2024-01-17T16:10:14Z

Salute-Eva · 2024-01-17T16:10:17Z

Salute-Eva · 2024-01-18T13:14:50Z

neretin-trike added 3 commits January 16, 2024 19:02

feat(plasma-tokens-utils): Add kebab case fot typoe and color tokens

325709c

feat(plasma-tokens): Update color tokens for legacy themes

9d04918

feat(plasma-tokens): Update typo tokens for legacy themes

74013f1

neretin-trike added the plasma-tokens label Jan 16, 2024

neretin-trike requested review from Yeti-or, Yakutoc and kayman233 as code owners January 16, 2024 13:12

neretin-trike temporarily deployed to internal January 16, 2024 13:12 — with GitHub Actions Inactive

Yakutoc reviewed Jan 16, 2024

View reviewed changes

utils/plasma-tokens-utils/src/utils/objectToCSSVariables.ts Show resolved Hide resolved

Yakutoc reviewed Jan 16, 2024

View reviewed changes

Yakutoc approved these changes Jan 16, 2024

View reviewed changes

kayman233 approved these changes Jan 17, 2024

View reviewed changes

neretin-trike added this pull request to the merge queue Jan 17, 2024

Merged via the queue into dev with commit 8b454fa Jan 17, 2024
27 checks passed

neretin-trike deleted the neretinaa/add-kebab-formatting-for-tokens branch January 17, 2024 15:17

Salute-Eva added the prerelease label Jan 17, 2024

This was referenced Jan 18, 2024

Release by 18.01.2024 #972

Closed

Release by 18.01.2024 #976

Closed

Release by 18.01.2024 #977

Closed

Yakutoc mentioned this pull request Jan 18, 2024

Release by 18.01.2024 #981

Merged

Salute-Eva added the released label Jan 18, 2024

Salute-Eva removed the prerelease label Jan 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(plasma-tokens-utils): Update formatting tokens name from camelCase to kebab-case #971

feat(plasma-tokens-utils): Update formatting tokens name from camelCase to kebab-case #971

neretin-trike commented Jan 16, 2024 •

edited by Yakutoc

Loading

Salute-Eva commented Jan 16, 2024

Yakutoc Jan 16, 2024

neretin-trike Jan 16, 2024

Salute-Eva commented Jan 16, 2024

Salute-Eva commented Jan 17, 2024

Salute-Eva commented Jan 17, 2024

Salute-Eva commented Jan 18, 2024

feat(plasma-tokens-utils): Update formatting tokens name from camelCase to kebab-case #971

feat(plasma-tokens-utils): Update formatting tokens name from camelCase to kebab-case #971

Conversation

neretin-trike commented Jan 16, 2024 • edited by Yakutoc Loading

Tokens naming

What/why changed

Salute-Eva commented Jan 16, 2024

Yakutoc Jan 16, 2024

Choose a reason for hiding this comment

neretin-trike Jan 16, 2024

Choose a reason for hiding this comment

Salute-Eva commented Jan 16, 2024

Salute-Eva commented Jan 17, 2024

Salute-Eva commented Jan 17, 2024

Salute-Eva commented Jan 18, 2024

neretin-trike commented Jan 16, 2024 •

edited by Yakutoc

Loading