diff --git a/packages/plasma-tokens/src/themes/salutejs_B2E__dark.ts b/packages/plasma-tokens/src/themes/salutejs_B2E__dark.ts index 5326a2fb28..03cbca93c9 100644 --- a/packages/plasma-tokens/src/themes/salutejs_B2E__dark.ts +++ b/packages/plasma-tokens/src/themes/salutejs_B2E__dark.ts @@ -3,23 +3,23 @@ export const salutejs_B2E__dark = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-primary': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-secondary': 'rgba(255, 255, 255, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_B2E__dark = { '--plasma-colors-paragraph': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-inverse': '#080808', '--plasma-colors-background': '#080808', - '--plasma-colors-backgroundPrimary': '#171717', - '--plasma-colors-backgroundSecondary': '#232323', - '--plasma-colors-backgroundTertiary': '#363636', + '--plasma-colors-background-primary': '#171717', + '--plasma-colors-background-secondary': '#232323', + '--plasma-colors-background-tertiary': '#363636', '--plasma-colors-success': '#24B23E', '--plasma-colors-warning': '#FA6D20', '--plasma-colors-critical': '#FF4D5F', - '--plasma-colors-surfaceLiquid01': 'rgba(255, 255, 255, 0.06)', - '--plasma-colors-surfaceLiquid02': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-surfaceLiquid03': 'rgba(255, 255, 255, 0.2)', - '--plasma-colors-surfaceSolid01': '#171717', - '--plasma-colors-surfaceSolid02': '#232323', - '--plasma-colors-surfaceSolid03': '#363636', - '--plasma-colors-surfaceCard': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonPrimary': '#FFFFFF', - '--plasma-colors-buttonSecondary': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonSuccess': '#21A038', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#FF2E43', - '--plasma-colors-buttonChecked': '#FFFFFF', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(255, 255, 255, 0.06)', + '--plasma-colors-surface-liquid02': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-surface-liquid03': 'rgba(255, 255, 255, 0.2)', + '--plasma-colors-surface-solid01': '#171717', + '--plasma-colors-surface-solid02': '#232323', + '--plasma-colors-surface-solid03': '#363636', + '--plasma-colors-surface-card': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-primary': '#FFFFFF', + '--plasma-colors-button-secondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-success': '#21A038', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#FF2E43', + '--plasma-colors-button-checked': '#FFFFFF', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(0, 0, 0, 0.28)', - '--plasma-colors-speechBubbleReceived': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-speech-bubble-sent': 'rgba(0, 0, 0, 0.28)', + '--plasma-colors-speech-bubble-received': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(23, 23, 23, 0.28)', '--plasma-colors-accent': '#24B23E', - '--plasma-colors-buttonAccent': '#21A038', - '--plasma-colors-buttonFocused': '#21A038', + '--plasma-colors-button-accent': '#21A038', + '--plasma-colors-button-focused': '#21A038', '--plasma-colors-gradient': 'linear-gradient(336.84deg, rgba(20, 116, 70, 0.6) 0%, rgba(8, 8, 8, 0) 64.88%), radial-gradient(100% 100% at 75.89% 100%, rgba(0, 133, 255, 0.24) 0%, rgba(0, 71, 255, 0.03) 100%), linear-gradient(180deg, rgba(8, 8, 8, 0) 50%, rgba(7, 71, 33, 0.3) 100%), linear-gradient(270deg, #061621 0%, rgba(8, 8, 8, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(15, 153, 24, 0.28) 0%, rgba(8, 8, 8, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(0, 170, 255, 0.24) 0%, rgba(8, 8, 8, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(0, 102, 255, 0.6) 0%, rgba(8, 8, 8, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(130, 75.63025210084032%, 46.666666666666664%, 1) 0%, hsla(189.78947368421052, 78.51239669421487%, 52.54901960784314%, 1) 100%)', color: 'rgba(255, 255, 255, 0.96)', backgroundColor: '#080808', diff --git a/packages/plasma-tokens/src/themes/salutejs_B2E__light.ts b/packages/plasma-tokens/src/themes/salutejs_B2E__light.ts index ba61b9b156..8408bd9e1e 100644 --- a/packages/plasma-tokens/src/themes/salutejs_B2E__light.ts +++ b/packages/plasma-tokens/src/themes/salutejs_B2E__light.ts @@ -3,23 +3,23 @@ export const salutejs_B2E__light = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': '#080808', '--plasma-colors-primary': '#080808', '--plasma-colors-secondary': 'rgba(8, 8, 8, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_B2E__light = { '--plasma-colors-paragraph': 'rgba(8, 8, 8, 0.8)', '--plasma-colors-inverse': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-background': '#FFFFFF', - '--plasma-colors-backgroundPrimary': '#FFFFFF', - '--plasma-colors-backgroundSecondary': '#FFFFFF', - '--plasma-colors-backgroundTertiary': '#FFFFFF', + '--plasma-colors-background-primary': '#FFFFFF', + '--plasma-colors-background-secondary': '#FFFFFF', + '--plasma-colors-background-tertiary': '#FFFFFF', '--plasma-colors-success': '#0D8523', '--plasma-colors-warning': '#D14D00', '--plasma-colors-critical': '#E31227', - '--plasma-colors-surfaceLiquid01': 'rgba(8, 8, 8, 0.02)', - '--plasma-colors-surfaceLiquid02': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-surfaceLiquid03': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-surfaceSolid01': '#FAFAFA', - '--plasma-colors-surfaceSolid02': '#F0F0F0', - '--plasma-colors-surfaceSolid03': '#E1E1E1', - '--plasma-colors-surfaceCard': '#FFFFFF', - '--plasma-colors-buttonPrimary': '#080808', - '--plasma-colors-buttonSecondary': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-buttonSuccess': '#148F2B', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#F31B30', - '--plasma-colors-buttonChecked': '#080808', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(8, 8, 8, 0.02)', + '--plasma-colors-surface-liquid02': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-surface-liquid03': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-surface-solid01': '#FAFAFA', + '--plasma-colors-surface-solid02': '#F0F0F0', + '--plasma-colors-surface-solid03': '#E1E1E1', + '--plasma-colors-surface-card': '#FFFFFF', + '--plasma-colors-button-primary': '#080808', + '--plasma-colors-button-secondary': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-button-success': '#148F2B', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#F31B30', + '--plasma-colors-button-checked': '#080808', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(8, 8, 8, 0.4)', - '--plasma-colors-speechBubbleReceived': 'rgba(0, 0, 0, 0.02)', + '--plasma-colors-speech-bubble-sent': 'rgba(8, 8, 8, 0.4)', + '--plasma-colors-speech-bubble-received': 'rgba(0, 0, 0, 0.02)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(35, 35, 35, 0.2)', '--plasma-colors-accent': '#0D8523', - '--plasma-colors-buttonAccent': '#148F2B', - '--plasma-colors-buttonFocused': '#148F2B', + '--plasma-colors-button-accent': '#148F2B', + '--plasma-colors-button-focused': '#148F2B', '--plasma-colors-gradient': 'linear-gradient(336.9deg, rgba(4, 255, 44, 0.02) 0%, rgba(255, 255, 255, 0) 64.95%), radial-gradient(66.53% 100% at 73.33% 100%, rgba(0, 179, 255, 0.06) 0%, rgba(0, 209, 255, 0.01) 99.69%), linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 251, 59, 0.05) 100%), linear-gradient(270deg, rgba(6, 195, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(24, 242, 61, 0.06) 0%, rgba(255, 255, 255, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(0, 170, 255, 0.04) 0%, rgba(255, 255, 255, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(0, 170, 255, 0.12) 0%, rgba(255, 255, 255, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(130, 85.26315789473684%, 37.254901960784316%, 1) 0%, hsla(189.94974874371857, 100%, 39.01960784313726%, 1) 100%)', color: '#080808', backgroundColor: '#FFFFFF', diff --git a/packages/plasma-tokens/src/themes/salutejs_eva__dark.ts b/packages/plasma-tokens/src/themes/salutejs_eva__dark.ts index 0c567dbaef..0f5aef2363 100644 --- a/packages/plasma-tokens/src/themes/salutejs_eva__dark.ts +++ b/packages/plasma-tokens/src/themes/salutejs_eva__dark.ts @@ -3,23 +3,23 @@ export const salutejs_eva__dark = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-primary': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-secondary': 'rgba(255, 255, 255, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_eva__dark = { '--plasma-colors-paragraph': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-inverse': '#080808', '--plasma-colors-background': '#080808', - '--plasma-colors-backgroundPrimary': '#171717', - '--plasma-colors-backgroundSecondary': '#232323', - '--plasma-colors-backgroundTertiary': '#363636', + '--plasma-colors-background-primary': '#171717', + '--plasma-colors-background-secondary': '#232323', + '--plasma-colors-background-tertiary': '#363636', '--plasma-colors-success': '#24B23E', '--plasma-colors-warning': '#FA6D20', '--plasma-colors-critical': '#FF4D5F', - '--plasma-colors-surfaceLiquid01': 'rgba(255, 255, 255, 0.06)', - '--plasma-colors-surfaceLiquid02': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-surfaceLiquid03': 'rgba(255, 255, 255, 0.2)', - '--plasma-colors-surfaceSolid01': '#171717', - '--plasma-colors-surfaceSolid02': '#232323', - '--plasma-colors-surfaceSolid03': '#363636', - '--plasma-colors-surfaceCard': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonPrimary': '#FFFFFF', - '--plasma-colors-buttonSecondary': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonSuccess': '#21A038', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#FF2E43', - '--plasma-colors-buttonChecked': '#FFFFFF', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(255, 255, 255, 0.06)', + '--plasma-colors-surface-liquid02': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-surface-liquid03': 'rgba(255, 255, 255, 0.2)', + '--plasma-colors-surface-solid01': '#171717', + '--plasma-colors-surface-solid02': '#232323', + '--plasma-colors-surface-solid03': '#363636', + '--plasma-colors-surface-card': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-primary': '#FFFFFF', + '--plasma-colors-button-secondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-success': '#21A038', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#FF2E43', + '--plasma-colors-button-checked': '#FFFFFF', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(0, 0, 0, 0.28)', - '--plasma-colors-speechBubbleReceived': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-speech-bubble-sent': 'rgba(0, 0, 0, 0.28)', + '--plasma-colors-speech-bubble-received': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(23, 23, 23, 0.28)', '--plasma-colors-accent': '#129DFA', - '--plasma-colors-buttonAccent': '#078CE4', - '--plasma-colors-buttonFocused': 'rgba(255, 255, 255, 0.96)', + '--plasma-colors-button-accent': '#078CE4', + '--plasma-colors-button-focused': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-gradient': 'linear-gradient(336.9deg, #143787 0%, rgba(8, 8, 8, 0) 64.95%), radial-gradient(66.53% 100% at 73.33% 100%, rgba(110, 5, 193, 0.44) 0%, rgba(53, 19, 149, 0.1) 99.69%), linear-gradient(180.03deg, rgba(8, 8, 8, 0) 50%, rgba(25, 63, 152, 0.41) 99.97%), linear-gradient(270deg, rgba(39, 15, 107, 0.3) 0%, rgba(8, 8, 8, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(26, 140, 255, 0.16) 0%, rgba(8, 8, 8, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(0, 85, 255, 0.28) 0%, rgba(8, 8, 8, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(128, 0, 255, 0.48) 0%, rgba(8, 8, 8, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(200.11764705882354, 94.44444444444446%, 64.70588235294117%, 1) 0%, hsla(240, 100%, 83.92156862745098%, 1) 100%)', color: 'rgba(255, 255, 255, 0.96)', backgroundColor: '#080808', diff --git a/packages/plasma-tokens/src/themes/salutejs_eva__light.ts b/packages/plasma-tokens/src/themes/salutejs_eva__light.ts index bfbbf06941..88b7d0d5d0 100644 --- a/packages/plasma-tokens/src/themes/salutejs_eva__light.ts +++ b/packages/plasma-tokens/src/themes/salutejs_eva__light.ts @@ -3,23 +3,23 @@ export const salutejs_eva__light = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': '#080808', '--plasma-colors-primary': '#080808', '--plasma-colors-secondary': 'rgba(8, 8, 8, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_eva__light = { '--plasma-colors-paragraph': 'rgba(8, 8, 8, 0.8)', '--plasma-colors-inverse': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-background': '#FFFFFF', - '--plasma-colors-backgroundPrimary': '#FFFFFF', - '--plasma-colors-backgroundSecondary': '#FFFFFF', - '--plasma-colors-backgroundTertiary': '#FFFFFF', + '--plasma-colors-background-primary': '#FFFFFF', + '--plasma-colors-background-secondary': '#FFFFFF', + '--plasma-colors-background-tertiary': '#FFFFFF', '--plasma-colors-success': '#0D8523', '--plasma-colors-warning': '#D14D00', '--plasma-colors-critical': '#E31227', - '--plasma-colors-surfaceLiquid01': 'rgba(8, 8, 8, 0.02)', - '--plasma-colors-surfaceLiquid02': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-surfaceLiquid03': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-surfaceSolid01': '#FAFAFA', - '--plasma-colors-surfaceSolid02': '#F0F0F0', - '--plasma-colors-surfaceSolid03': '#E1E1E1', - '--plasma-colors-surfaceCard': '#FFFFFF', - '--plasma-colors-buttonPrimary': '#080808', - '--plasma-colors-buttonSecondary': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-buttonSuccess': '#148F2B', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#F31B30', - '--plasma-colors-buttonChecked': '#080808', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(8, 8, 8, 0.02)', + '--plasma-colors-surface-liquid02': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-surface-liquid03': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-surface-solid01': '#FAFAFA', + '--plasma-colors-surface-solid02': '#F0F0F0', + '--plasma-colors-surface-solid03': '#E1E1E1', + '--plasma-colors-surface-card': '#FFFFFF', + '--plasma-colors-button-primary': '#080808', + '--plasma-colors-button-secondary': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-button-success': '#148F2B', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#F31B30', + '--plasma-colors-button-checked': '#080808', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(8, 8, 8, 0.4)', - '--plasma-colors-speechBubbleReceived': 'rgba(0, 0, 0, 0.02)', + '--plasma-colors-speech-bubble-sent': 'rgba(8, 8, 8, 0.4)', + '--plasma-colors-speech-bubble-received': 'rgba(0, 0, 0, 0.02)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(35, 35, 35, 0.2)', '--plasma-colors-accent': '#1274B5', - '--plasma-colors-buttonAccent': '#067DCC', - '--plasma-colors-buttonFocused': '#080808', + '--plasma-colors-button-accent': '#067DCC', + '--plasma-colors-button-focused': '#080808', '--plasma-colors-gradient': 'linear-gradient(336.9deg, rgba(0, 224, 255, 0.06) 0%, rgba(255, 255, 255, 0) 64.95%), radial-gradient(66.53% 100% at 73.33% 100%, rgba(0, 87, 255, 0.04) 0%, rgba(87, 8, 255, 0.01) 99.69%), linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 224, 255, 0.06) 100%), linear-gradient(270deg, rgba(0, 71, 253, 0.02) 0%, rgba(255, 255, 255, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(26, 178, 255, 0.08) 0%, rgba(255, 255, 255, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(0, 170, 255, 0.04) 0%, rgba(255, 255, 255, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(128, 0, 255, 0.08) 0%, rgba(255, 255, 255, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(200.1, 78.74015748031496%, 49.803921568627445%, 1) 0%, hsla(240, 100%, 73.92156862745098%, 1) 100%)', color: '#080808', backgroundColor: '#FFFFFF', diff --git a/packages/plasma-tokens/src/themes/salutejs_joy__dark.ts b/packages/plasma-tokens/src/themes/salutejs_joy__dark.ts index 30a8226963..a145601a1e 100644 --- a/packages/plasma-tokens/src/themes/salutejs_joy__dark.ts +++ b/packages/plasma-tokens/src/themes/salutejs_joy__dark.ts @@ -3,23 +3,23 @@ export const salutejs_joy__dark = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-primary': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-secondary': 'rgba(255, 255, 255, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_joy__dark = { '--plasma-colors-paragraph': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-inverse': '#080808', '--plasma-colors-background': '#080808', - '--plasma-colors-backgroundPrimary': '#171717', - '--plasma-colors-backgroundSecondary': '#232323', - '--plasma-colors-backgroundTertiary': '#363636', + '--plasma-colors-background-primary': '#171717', + '--plasma-colors-background-secondary': '#232323', + '--plasma-colors-background-tertiary': '#363636', '--plasma-colors-success': '#24B23E', '--plasma-colors-warning': '#FA6D20', '--plasma-colors-critical': '#FF4D5F', - '--plasma-colors-surfaceLiquid01': 'rgba(255, 255, 255, 0.06)', - '--plasma-colors-surfaceLiquid02': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-surfaceLiquid03': 'rgba(255, 255, 255, 0.2)', - '--plasma-colors-surfaceSolid01': '#171717', - '--plasma-colors-surfaceSolid02': '#232323', - '--plasma-colors-surfaceSolid03': '#363636', - '--plasma-colors-surfaceCard': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonPrimary': '#FFFFFF', - '--plasma-colors-buttonSecondary': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonSuccess': '#21A038', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#FF2E43', - '--plasma-colors-buttonChecked': '#FFFFFF', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(255, 255, 255, 0.06)', + '--plasma-colors-surface-liquid02': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-surface-liquid03': 'rgba(255, 255, 255, 0.2)', + '--plasma-colors-surface-solid01': '#171717', + '--plasma-colors-surface-solid02': '#232323', + '--plasma-colors-surface-solid03': '#363636', + '--plasma-colors-surface-card': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-primary': '#FFFFFF', + '--plasma-colors-button-secondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-success': '#21A038', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#FF2E43', + '--plasma-colors-button-checked': '#FFFFFF', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(0, 0, 0, 0.28)', - '--plasma-colors-speechBubbleReceived': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-speech-bubble-sent': 'rgba(0, 0, 0, 0.28)', + '--plasma-colors-speech-bubble-received': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(23, 23, 23, 0.28)', '--plasma-colors-accent': '#C370FA', - '--plasma-colors-buttonAccent': '#B559F3', - '--plasma-colors-buttonFocused': 'rgba(255, 255, 255, 0.96)', + '--plasma-colors-button-accent': '#B559F3', + '--plasma-colors-button-focused': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-gradient': 'linear-gradient(336.9deg, rgba(255, 156, 101, 0.24) 0%, rgba(8, 8, 8, 0) 64.95%), radial-gradient(66.53% 100% at 73.33% 100%, rgba(61, 19, 149, 0.34) 0%, rgba(19, 24, 149, 0.1) 99.69%), linear-gradient(180.03deg, rgba(8, 8, 8, 0) 50%, rgba(255, 215, 179, 0.15) 99.97%), linear-gradient(270deg, rgba(107, 15, 87, 0.2) 0%, rgba(8, 8, 8, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(26, 140, 255, 0.16) 0%, rgba(8, 8, 8, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(0, 85, 255, 0.28) 0%, rgba(8, 8, 8, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(128, 0, 255, 0.48) 0%, rgba(8, 8, 8, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(19.862068965517242, 100%, 71.56862745098039%, 1) 0%, hsla(319.8058252427184, 94.49541284403672%, 78.62745098039217%, 1) 100%)', color: 'rgba(255, 255, 255, 0.96)', backgroundColor: '#080808', diff --git a/packages/plasma-tokens/src/themes/salutejs_joy__light.ts b/packages/plasma-tokens/src/themes/salutejs_joy__light.ts index e75efd6a36..e7c6228447 100644 --- a/packages/plasma-tokens/src/themes/salutejs_joy__light.ts +++ b/packages/plasma-tokens/src/themes/salutejs_joy__light.ts @@ -3,23 +3,23 @@ export const salutejs_joy__light = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': '#080808', '--plasma-colors-primary': '#080808', '--plasma-colors-secondary': 'rgba(8, 8, 8, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_joy__light = { '--plasma-colors-paragraph': 'rgba(8, 8, 8, 0.8)', '--plasma-colors-inverse': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-background': '#FFFFFF', - '--plasma-colors-backgroundPrimary': '#FFFFFF', - '--plasma-colors-backgroundSecondary': '#FFFFFF', - '--plasma-colors-backgroundTertiary': '#FFFFFF', + '--plasma-colors-background-primary': '#FFFFFF', + '--plasma-colors-background-secondary': '#FFFFFF', + '--plasma-colors-background-tertiary': '#FFFFFF', '--plasma-colors-success': '#0D8523', '--plasma-colors-warning': '#D14D00', '--plasma-colors-critical': '#E31227', - '--plasma-colors-surfaceLiquid01': 'rgba(8, 8, 8, 0.02)', - '--plasma-colors-surfaceLiquid02': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-surfaceLiquid03': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-surfaceSolid01': '#FAFAFA', - '--plasma-colors-surfaceSolid02': '#F0F0F0', - '--plasma-colors-surfaceSolid03': '#E1E1E1', - '--plasma-colors-surfaceCard': '#FFFFFF', - '--plasma-colors-buttonPrimary': '#080808', - '--plasma-colors-buttonSecondary': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-buttonSuccess': '#148F2B', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#F31B30', - '--plasma-colors-buttonChecked': '#080808', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(8, 8, 8, 0.02)', + '--plasma-colors-surface-liquid02': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-surface-liquid03': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-surface-solid01': '#FAFAFA', + '--plasma-colors-surface-solid02': '#F0F0F0', + '--plasma-colors-surface-solid03': '#E1E1E1', + '--plasma-colors-surface-card': '#FFFFFF', + '--plasma-colors-button-primary': '#080808', + '--plasma-colors-button-secondary': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-button-success': '#148F2B', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#F31B30', + '--plasma-colors-button-checked': '#080808', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(8, 8, 8, 0.4)', - '--plasma-colors-speechBubbleReceived': 'rgba(0, 0, 0, 0.02)', + '--plasma-colors-speech-bubble-sent': 'rgba(8, 8, 8, 0.4)', + '--plasma-colors-speech-bubble-received': 'rgba(0, 0, 0, 0.02)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(35, 35, 35, 0.2)', '--plasma-colors-accent': '#A039E5', - '--plasma-colors-buttonAccent': '#AD42F5', - '--plasma-colors-buttonFocused': '#080808', + '--plasma-colors-button-accent': '#AD42F5', + '--plasma-colors-button-focused': '#080808', '--plasma-colors-gradient': 'linear-gradient(336.9deg, rgba(255, 200, 3, 0.05) 0%, rgba(255, 255, 255, 0) 64.95%), radial-gradient(66.53% 100% at 73.33% 100%, rgba(148, 0, 238, 0.02) 0%, rgba(160, 4, 255, 0.01) 99.69%), linear-gradient(180.03deg, rgba(255, 255, 255, 0) 50%, rgba(255, 184, 0, 0.04) 99.97%), linear-gradient(270deg, rgba(240, 0, 187, 0.03) 0%, rgba(255, 255, 255, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(255, 219, 77, 0.1) 0%, rgba(255, 255, 255, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(163, 71, 255, 0.04) 0%, rgba(255, 255, 255, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(140, 26, 255, 0.1) 0%, rgba(255, 255, 255, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(30.167597765363123, 96.75675675675677%, 63.725490196078425%, 1) 0%, hsla(320.11560693641616, 100%, 66.07843137254902%, 1) 100%)', color: '#080808', backgroundColor: '#FFFFFF', diff --git a/packages/plasma-tokens/src/themes/salutejs_sber__dark.ts b/packages/plasma-tokens/src/themes/salutejs_sber__dark.ts index 121366e1e3..b15d3938b7 100644 --- a/packages/plasma-tokens/src/themes/salutejs_sber__dark.ts +++ b/packages/plasma-tokens/src/themes/salutejs_sber__dark.ts @@ -3,23 +3,23 @@ export const salutejs_sber__dark = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-primary': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-secondary': 'rgba(255, 255, 255, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_sber__dark = { '--plasma-colors-paragraph': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-inverse': '#080808', '--plasma-colors-background': '#080808', - '--plasma-colors-backgroundPrimary': '#171717', - '--plasma-colors-backgroundSecondary': '#232323', - '--plasma-colors-backgroundTertiary': '#363636', + '--plasma-colors-background-primary': '#171717', + '--plasma-colors-background-secondary': '#232323', + '--plasma-colors-background-tertiary': '#363636', '--plasma-colors-success': '#24B23E', '--plasma-colors-warning': '#FA6D20', '--plasma-colors-critical': '#FF4D5F', - '--plasma-colors-surfaceLiquid01': 'rgba(255, 255, 255, 0.06)', - '--plasma-colors-surfaceLiquid02': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-surfaceLiquid03': 'rgba(255, 255, 255, 0.2)', - '--plasma-colors-surfaceSolid01': '#171717', - '--plasma-colors-surfaceSolid02': '#232323', - '--plasma-colors-surfaceSolid03': '#363636', - '--plasma-colors-surfaceCard': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonPrimary': '#FFFFFF', - '--plasma-colors-buttonSecondary': 'rgba(255, 255, 255, 0.12)', - '--plasma-colors-buttonSuccess': '#21A038', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#FF2E43', - '--plasma-colors-buttonChecked': '#FFFFFF', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(255, 255, 255, 0.06)', + '--plasma-colors-surface-liquid02': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-surface-liquid03': 'rgba(255, 255, 255, 0.2)', + '--plasma-colors-surface-solid01': '#171717', + '--plasma-colors-surface-solid02': '#232323', + '--plasma-colors-surface-solid03': '#363636', + '--plasma-colors-surface-card': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-primary': '#FFFFFF', + '--plasma-colors-button-secondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-success': '#21A038', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#FF2E43', + '--plasma-colors-button-checked': '#FFFFFF', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(0, 0, 0, 0.28)', - '--plasma-colors-speechBubbleReceived': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-speech-bubble-sent': 'rgba(0, 0, 0, 0.28)', + '--plasma-colors-speech-bubble-received': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(23, 23, 23, 0.28)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(23, 23, 23, 0.28)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(23, 23, 23, 0.28)', '--plasma-colors-accent': '#24B23E', - '--plasma-colors-buttonAccent': '#21A038', - '--plasma-colors-buttonFocused': 'rgba(255, 255, 255, 0.96)', + '--plasma-colors-button-accent': '#21A038', + '--plasma-colors-button-focused': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-gradient': 'linear-gradient(336.84deg, rgba(20, 116, 70, 0.6) 0%, rgba(8, 8, 8, 0) 64.88%), radial-gradient(100% 100% at 75.89% 100%, rgba(0, 133, 255, 0.24) 0%, rgba(0, 71, 255, 0.03) 100%), linear-gradient(180deg, rgba(8, 8, 8, 0) 50%, rgba(7, 71, 33, 0.3) 100%), linear-gradient(270deg, #061621 0%, rgba(8, 8, 8, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(15, 153, 24, 0.28) 0%, rgba(8, 8, 8, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(0, 170, 255, 0.24) 0%, rgba(8, 8, 8, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(0, 102, 255, 0.6) 0%, rgba(8, 8, 8, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(130, 75.63025210084032%, 46.666666666666664%, 1) 0%, hsla(189.78947368421052, 78.51239669421487%, 52.54901960784314%, 1) 100%)', color: 'rgba(255, 255, 255, 0.96)', backgroundColor: '#080808', diff --git a/packages/plasma-tokens/src/themes/salutejs_sber__light.ts b/packages/plasma-tokens/src/themes/salutejs_sber__light.ts index a54a966c3d..a6ab72c44e 100644 --- a/packages/plasma-tokens/src/themes/salutejs_sber__light.ts +++ b/packages/plasma-tokens/src/themes/salutejs_sber__light.ts @@ -3,23 +3,23 @@ export const salutejs_sber__light = { ':root': { '--plasma-colors-white': '#FFFFFF', - '--plasma-colors-whitePrimary': '#FFFFFF', - '--plasma-colors-whiteSecondary': 'rgba(255, 255, 255, 0.56)', - '--plasma-colors-whiteTertiary': 'rgba(255, 255, 255, 0.28)', + '--plasma-colors-white-primary': '#FFFFFF', + '--plasma-colors-white-secondary': 'rgba(255, 255, 255, 0.56)', + '--plasma-colors-white-tertiary': 'rgba(255, 255, 255, 0.28)', '--plasma-colors-black': '#080808', - '--plasma-colors-blackPrimary': '#080808', - '--plasma-colors-blackSecondary': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-blackTertiary': 'rgba(8, 8, 8, 0.28)', + '--plasma-colors-black-primary': '#080808', + '--plasma-colors-black-secondary': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-black-tertiary': 'rgba(8, 8, 8, 0.28)', '--plasma-colors-dark01': '#171717', '--plasma-colors-dark02': '#232323', '--plasma-colors-dark03': '#363636', '--plasma-colors-transparent': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonClear': 'rgba(0, 0, 0, 0)', - '--plasma-colors-buttonBlack': '#080808', - '--plasma-colors-buttonBlackSecondary': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-buttonBlackTransparent': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-buttonWhite': '#FFFFFF', - '--plasma-colors-buttonWhiteSecondary': 'rgba(255, 255, 255, 0.12)', + '--plasma-colors-button-clear': 'rgba(0, 0, 0, 0)', + '--plasma-colors-button-black': '#080808', + '--plasma-colors-button-black-secondary': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-button-black-transparent': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-button-white': '#FFFFFF', + '--plasma-colors-button-white-secondary': 'rgba(255, 255, 255, 0.12)', '--plasma-colors-text': '#080808', '--plasma-colors-primary': '#080808', '--plasma-colors-secondary': 'rgba(8, 8, 8, 0.56)', @@ -27,52 +27,52 @@ export const salutejs_sber__light = { '--plasma-colors-paragraph': 'rgba(8, 8, 8, 0.8)', '--plasma-colors-inverse': 'rgba(255, 255, 255, 0.96)', '--plasma-colors-background': '#FFFFFF', - '--plasma-colors-backgroundPrimary': '#FFFFFF', - '--plasma-colors-backgroundSecondary': '#FFFFFF', - '--plasma-colors-backgroundTertiary': '#FFFFFF', + '--plasma-colors-background-primary': '#FFFFFF', + '--plasma-colors-background-secondary': '#FFFFFF', + '--plasma-colors-background-tertiary': '#FFFFFF', '--plasma-colors-success': '#0D8523', '--plasma-colors-warning': '#D14D00', '--plasma-colors-critical': '#E31227', - '--plasma-colors-surfaceLiquid01': 'rgba(8, 8, 8, 0.02)', - '--plasma-colors-surfaceLiquid02': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-surfaceLiquid03': 'rgba(8, 8, 8, 0.12)', - '--plasma-colors-surfaceSolid01': '#FAFAFA', - '--plasma-colors-surfaceSolid02': '#F0F0F0', - '--plasma-colors-surfaceSolid03': '#E1E1E1', - '--plasma-colors-surfaceCard': '#FFFFFF', - '--plasma-colors-buttonPrimary': '#080808', - '--plasma-colors-buttonSecondary': 'rgba(8, 8, 8, 0.06)', - '--plasma-colors-buttonSuccess': '#148F2B', - '--plasma-colors-buttonWarning': '#E35502', - '--plasma-colors-buttonCritical': '#F31B30', - '--plasma-colors-buttonChecked': '#080808', - '--plasma-colors-skeletonGradient': + '--plasma-colors-surface-liquid01': 'rgba(8, 8, 8, 0.02)', + '--plasma-colors-surface-liquid02': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-surface-liquid03': 'rgba(8, 8, 8, 0.12)', + '--plasma-colors-surface-solid01': '#FAFAFA', + '--plasma-colors-surface-solid02': '#F0F0F0', + '--plasma-colors-surface-solid03': '#E1E1E1', + '--plasma-colors-surface-card': '#FFFFFF', + '--plasma-colors-button-primary': '#080808', + '--plasma-colors-button-secondary': 'rgba(8, 8, 8, 0.06)', + '--plasma-colors-button-success': '#148F2B', + '--plasma-colors-button-warning': '#E35502', + '--plasma-colors-button-critical': '#F31B30', + '--plasma-colors-button-checked': '#080808', + '--plasma-colors-skeleton-gradient': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% )', - '--plasma-colors-skeletonGradientLighter': + '--plasma-colors-skeleton-gradient-lighter': 'linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% )', - '--plasma-colors-speechBubbleSent': 'rgba(8, 8, 8, 0.4)', - '--plasma-colors-speechBubbleReceived': 'rgba(0, 0, 0, 0.02)', + '--plasma-colors-speech-bubble-sent': 'rgba(8, 8, 8, 0.4)', + '--plasma-colors-speech-bubble-received': 'rgba(0, 0, 0, 0.02)', '--plasma-colors-overlay': 'rgba(0, 0, 0, 0.8)', - '--plasma-colors-overlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-overlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-overlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-darkOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-darkOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-darkOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-lightOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-lightOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-lightOverlayBlur': 'rgba(35, 35, 35, 0.2)', - '--plasma-colors-inverseOverlaySoft': 'rgba(8, 8, 8, 0.56)', - '--plasma-colors-inverseOverlayHard': 'rgba(8, 8, 8, 0.9)', - '--plasma-colors-inverseOverlayBlur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-dark-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-dark-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-dark-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-light-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-light-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-light-overlay-blur': 'rgba(35, 35, 35, 0.2)', + '--plasma-colors-inverse-overlay-soft': 'rgba(8, 8, 8, 0.56)', + '--plasma-colors-inverse-overlay-hard': 'rgba(8, 8, 8, 0.9)', + '--plasma-colors-inverse-overlay-blur': 'rgba(35, 35, 35, 0.2)', '--plasma-colors-accent': '#0D8523', - '--plasma-colors-buttonAccent': '#148F2B', - '--plasma-colors-buttonFocused': '#080808', + '--plasma-colors-button-accent': '#148F2B', + '--plasma-colors-button-focused': '#080808', '--plasma-colors-gradient': 'linear-gradient(336.9deg, rgba(4, 255, 44, 0.02) 0%, rgba(255, 255, 255, 0) 64.95%), radial-gradient(66.53% 100% at 73.33% 100%, rgba(0, 179, 255, 0.06) 0%, rgba(0, 209, 255, 0.01) 99.69%), linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 251, 59, 0.05) 100%), linear-gradient(270deg, rgba(6, 195, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%)', - '--plasma-colors-gradientDevice': + '--plasma-colors-gradient-device': 'linear-gradient(26.05deg, rgba(24, 242, 61, 0.06) 0%, rgba(255, 255, 255, 0) 72.24%), radial-gradient(100% 100% at 0% 100%, rgba(0, 170, 255, 0.04) 0%, rgba(255, 255, 255, 0) 99.69%), radial-gradient(74.68% 149.35% at 50% 149.35%, rgba(0, 170, 255, 0.12) 0%, rgba(255, 255, 255, 0) 99.69%)', - '--plasma-colors-voicePhraseGradient': + '--plasma-colors-voice-phrase-gradient': 'linear-gradient(45deg, hsla(130, 85.26315789473684%, 37.254901960784316%, 1) 0%, hsla(189.94974874371857, 100%, 39.01960784313726%, 1) 100%)', color: '#080808', backgroundColor: '#FFFFFF', diff --git a/packages/plasma-tokens/src/typo/mobile.ts b/packages/plasma-tokens/src/typo/mobile.ts index 2a4c180c80..b920ad8eb5 100644 --- a/packages/plasma-tokens/src/typo/mobile.ts +++ b/packages/plasma-tokens/src/typo/mobile.ts @@ -2,114 +2,114 @@ export const mobile = { ':root': { - '--plasma-typo-display1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display1-fontWeight': '500', - '--plasma-typo-display1-fontStyle': 'normal', - '--plasma-typo-display1-fontSize': '6rem', - '--plasma-typo-display1-letterSpacing': '-0.0190em', - '--plasma-typo-display1-lineHeight': '6rem', - '--plasma-typo-display2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display2-fontWeight': '500', - '--plasma-typo-display2-fontStyle': 'normal', - '--plasma-typo-display2-fontSize': '3.75rem', - '--plasma-typo-display2-letterSpacing': '-0.0190em', - '--plasma-typo-display2-lineHeight': '4rem', - '--plasma-typo-display3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display3-fontWeight': '500', - '--plasma-typo-display3-fontStyle': 'normal', - '--plasma-typo-display3-fontSize': '3rem', - '--plasma-typo-display3-letterSpacing': 'normal', - '--plasma-typo-display3-lineHeight': '3.25rem', - '--plasma-typo-headline1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline1-fontWeight': '700', - '--plasma-typo-headline1-fontStyle': 'normal', - '--plasma-typo-headline1-fontSize': '2rem', - '--plasma-typo-headline1-letterSpacing': '-0.0110em', - '--plasma-typo-headline1-lineHeight': '2.25rem', - '--plasma-typo-headline2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline2-fontWeight': '600', - '--plasma-typo-headline2-fontStyle': 'normal', - '--plasma-typo-headline2-fontSize': '1.5rem', - '--plasma-typo-headline2-letterSpacing': '-0.0220em', - '--plasma-typo-headline2-lineHeight': '1.75rem', - '--plasma-typo-headline3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline3-fontWeight': '600', - '--plasma-typo-headline3-fontStyle': 'normal', - '--plasma-typo-headline3-fontSize': '1.25rem', - '--plasma-typo-headline3-letterSpacing': '-0.0250em', - '--plasma-typo-headline3-lineHeight': '1.5rem', - '--plasma-typo-headline4-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline4-fontWeight': '700', - '--plasma-typo-headline4-fontStyle': 'normal', - '--plasma-typo-headline4-fontSize': '1.25rem', - '--plasma-typo-headline4-letterSpacing': '-0.0250em', - '--plasma-typo-headline4-lineHeight': '1.5rem', - '--plasma-typo-body1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body1-fontWeight': '500', - '--plasma-typo-body1-fontStyle': 'normal', - '--plasma-typo-body1-fontSize': '1rem', - '--plasma-typo-body1-letterSpacing': '-0.0190em', - '--plasma-typo-body1-lineHeight': '1.25rem', - '--plasma-typo-body2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body2-fontWeight': '600', - '--plasma-typo-body2-fontStyle': 'normal', - '--plasma-typo-body2-fontSize': '1rem', - '--plasma-typo-body2-letterSpacing': '-0.0190em', - '--plasma-typo-body2-lineHeight': '1.25rem', - '--plasma-typo-body3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body3-fontWeight': '700', - '--plasma-typo-body3-fontStyle': 'normal', - '--plasma-typo-body3-fontSize': '1rem', - '--plasma-typo-body3-letterSpacing': '-0.0190em', - '--plasma-typo-body3-lineHeight': '1.25rem', - '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-paragraph1-fontWeight': '400', - '--plasma-typo-paragraph1-fontStyle': 'normal', - '--plasma-typo-paragraph1-fontSize': '1rem', - '--plasma-typo-paragraph1-letterSpacing': '-0.0190em', - '--plasma-typo-paragraph1-lineHeight': '1.375rem', - '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-paragraph2-fontWeight': '600', - '--plasma-typo-paragraph2-fontStyle': 'normal', - '--plasma-typo-paragraph2-fontSize': '1rem', - '--plasma-typo-paragraph2-letterSpacing': '-0.0190em', - '--plasma-typo-paragraph2-lineHeight': '1.375rem', - '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-footnote1-fontWeight': '500', - '--plasma-typo-footnote1-fontStyle': 'normal', - '--plasma-typo-footnote1-fontSize': '0.875rem', - '--plasma-typo-footnote1-letterSpacing': '-0.0190em', - '--plasma-typo-footnote1-lineHeight': '1.125rem', - '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-footnote2-fontWeight': '600', - '--plasma-typo-footnote2-fontStyle': 'normal', - '--plasma-typo-footnote2-fontSize': '0.875rem', - '--plasma-typo-footnote2-letterSpacing': '-0.0190em', - '--plasma-typo-footnote2-lineHeight': '1.125rem', - '--plasma-typo-button1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-button1-fontWeight': '600', - '--plasma-typo-button1-fontStyle': 'normal', - '--plasma-typo-button1-fontSize': '1rem', - '--plasma-typo-button1-letterSpacing': 'normal', - '--plasma-typo-button1-lineHeight': '1.25rem', - '--plasma-typo-button2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-button2-fontWeight': '600', - '--plasma-typo-button2-fontStyle': 'normal', - '--plasma-typo-button2-fontSize': '0.875rem', - '--plasma-typo-button2-letterSpacing': 'normal', - '--plasma-typo-button2-lineHeight': '1rem', - '--plasma-typo-caption-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-caption-fontWeight': '500', - '--plasma-typo-caption-fontStyle': 'normal', - '--plasma-typo-caption-fontSize': '0.75rem', - '--plasma-typo-caption-letterSpacing': '-0.0220em', - '--plasma-typo-caption-lineHeight': '1rem', - '--plasma-typo-underline-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-underline-fontWeight': '500', - '--plasma-typo-underline-fontStyle': 'normal', - '--plasma-typo-underline-fontSize': '0.625rem', - '--plasma-typo-underline-letterSpacing': '0.0125em', - '--plasma-typo-underline-lineHeight': '0.75rem', + '--plasma-typo-display1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display1-font-weight': '500', + '--plasma-typo-display1-font-style': 'normal', + '--plasma-typo-display1-font-size': '6rem', + '--plasma-typo-display1-letter-spacing': '-0.0190em', + '--plasma-typo-display1-line-height': '6rem', + '--plasma-typo-display2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display2-font-weight': '500', + '--plasma-typo-display2-font-style': 'normal', + '--plasma-typo-display2-font-size': '3.75rem', + '--plasma-typo-display2-letter-spacing': '-0.0190em', + '--plasma-typo-display2-line-height': '4rem', + '--plasma-typo-display3-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display3-font-weight': '500', + '--plasma-typo-display3-font-style': 'normal', + '--plasma-typo-display3-font-size': '3rem', + '--plasma-typo-display3-letter-spacing': 'normal', + '--plasma-typo-display3-line-height': '3.25rem', + '--plasma-typo-headline1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline1-font-weight': '700', + '--plasma-typo-headline1-font-style': 'normal', + '--plasma-typo-headline1-font-size': '2rem', + '--plasma-typo-headline1-letter-spacing': '-0.0110em', + '--plasma-typo-headline1-line-height': '2.25rem', + '--plasma-typo-headline2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline2-font-weight': '600', + '--plasma-typo-headline2-font-style': 'normal', + '--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', + '--plasma-typo-headline3-font-weight': '600', + '--plasma-typo-headline3-font-style': 'normal', + '--plasma-typo-headline3-font-size': '1.25rem', + '--plasma-typo-headline3-letter-spacing': '-0.0250em', + '--plasma-typo-headline3-line-height': '1.5rem', + '--plasma-typo-headline4-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline4-font-weight': '700', + '--plasma-typo-headline4-font-style': 'normal', + '--plasma-typo-headline4-font-size': '1.25rem', + '--plasma-typo-headline4-letter-spacing': '-0.0250em', + '--plasma-typo-headline4-line-height': '1.5rem', + '--plasma-typo-body1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body1-font-weight': '500', + '--plasma-typo-body1-font-style': 'normal', + '--plasma-typo-body1-font-size': '1rem', + '--plasma-typo-body1-letter-spacing': '-0.0190em', + '--plasma-typo-body1-line-height': '1.25rem', + '--plasma-typo-body2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body2-font-weight': '600', + '--plasma-typo-body2-font-style': 'normal', + '--plasma-typo-body2-font-size': '1rem', + '--plasma-typo-body2-letter-spacing': '-0.0190em', + '--plasma-typo-body2-line-height': '1.25rem', + '--plasma-typo-body3-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body3-font-weight': '700', + '--plasma-typo-body3-font-style': 'normal', + '--plasma-typo-body3-font-size': '1rem', + '--plasma-typo-body3-letter-spacing': '-0.0190em', + '--plasma-typo-body3-line-height': '1.25rem', + '--plasma-typo-paragraph1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph1-font-weight': '400', + '--plasma-typo-paragraph1-font-style': 'normal', + '--plasma-typo-paragraph1-font-size': '1rem', + '--plasma-typo-paragraph1-letter-spacing': '-0.0190em', + '--plasma-typo-paragraph1-line-height': '1.375rem', + '--plasma-typo-paragraph2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph2-font-weight': '600', + '--plasma-typo-paragraph2-font-style': 'normal', + '--plasma-typo-paragraph2-font-size': '1rem', + '--plasma-typo-paragraph2-letter-spacing': '-0.0190em', + '--plasma-typo-paragraph2-line-height': '1.375rem', + '--plasma-typo-footnote1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote1-font-weight': '500', + '--plasma-typo-footnote1-font-style': 'normal', + '--plasma-typo-footnote1-font-size': '0.875rem', + '--plasma-typo-footnote1-letter-spacing': '-0.0190em', + '--plasma-typo-footnote1-line-height': '1.125rem', + '--plasma-typo-footnote2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote2-font-weight': '600', + '--plasma-typo-footnote2-font-style': 'normal', + '--plasma-typo-footnote2-font-size': '0.875rem', + '--plasma-typo-footnote2-letter-spacing': '-0.0190em', + '--plasma-typo-footnote2-line-height': '1.125rem', + '--plasma-typo-button1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-button1-font-weight': '600', + '--plasma-typo-button1-font-style': 'normal', + '--plasma-typo-button1-font-size': '1rem', + '--plasma-typo-button1-letter-spacing': 'normal', + '--plasma-typo-button1-line-height': '1.25rem', + '--plasma-typo-button2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-button2-font-weight': '600', + '--plasma-typo-button2-font-style': 'normal', + '--plasma-typo-button2-font-size': '0.875rem', + '--plasma-typo-button2-letter-spacing': 'normal', + '--plasma-typo-button2-line-height': '1rem', + '--plasma-typo-caption-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-caption-font-weight': '500', + '--plasma-typo-caption-font-style': 'normal', + '--plasma-typo-caption-font-size': '0.75rem', + '--plasma-typo-caption-letter-spacing': '-0.0220em', + '--plasma-typo-caption-line-height': '1rem', + '--plasma-typo-underline-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-underline-font-weight': '500', + '--plasma-typo-underline-font-style': 'normal', + '--plasma-typo-underline-font-size': '0.625rem', + '--plasma-typo-underline-letter-spacing': '0.0125em', + '--plasma-typo-underline-line-height': '0.75rem', '--plasma-typo-overflow-wrap': 'break-word', '--plasma-typo-hyphens': 'auto', fontSize: '16px', diff --git a/packages/plasma-tokens/src/typo/sberBox.ts b/packages/plasma-tokens/src/typo/sberBox.ts index 7f03ee7818..4b734eaef0 100644 --- a/packages/plasma-tokens/src/typo/sberBox.ts +++ b/packages/plasma-tokens/src/typo/sberBox.ts @@ -2,114 +2,114 @@ export const sberBox = { ':root': { - '--plasma-typo-display1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display1-fontWeight': '500', - '--plasma-typo-display1-fontStyle': 'normal', - '--plasma-typo-display1-fontSize': '6rem', - '--plasma-typo-display1-letterSpacing': '-0.0190em', - '--plasma-typo-display1-lineHeight': '6rem', - '--plasma-typo-display2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display2-fontWeight': '500', - '--plasma-typo-display2-fontStyle': 'normal', - '--plasma-typo-display2-fontSize': '3.75rem', - '--plasma-typo-display2-letterSpacing': '-0.0190em', - '--plasma-typo-display2-lineHeight': '4rem', - '--plasma-typo-display3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display3-fontWeight': '500', - '--plasma-typo-display3-fontStyle': 'normal', - '--plasma-typo-display3-fontSize': '3rem', - '--plasma-typo-display3-letterSpacing': 'normal', - '--plasma-typo-display3-lineHeight': '3.25rem', - '--plasma-typo-headline1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline1-fontWeight': '700', - '--plasma-typo-headline1-fontStyle': 'normal', - '--plasma-typo-headline1-fontSize': '2rem', - '--plasma-typo-headline1-letterSpacing': '-0.0110em', - '--plasma-typo-headline1-lineHeight': '2.25rem', - '--plasma-typo-headline2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline2-fontWeight': '600', - '--plasma-typo-headline2-fontStyle': 'normal', - '--plasma-typo-headline2-fontSize': '1.5rem', - '--plasma-typo-headline2-letterSpacing': '-0.0220em', - '--plasma-typo-headline2-lineHeight': '1.75rem', - '--plasma-typo-headline3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline3-fontWeight': '600', - '--plasma-typo-headline3-fontStyle': 'normal', - '--plasma-typo-headline3-fontSize': '1.25rem', - '--plasma-typo-headline3-letterSpacing': '-0.0250em', - '--plasma-typo-headline3-lineHeight': '1.5rem', - '--plasma-typo-headline4-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline4-fontWeight': '700', - '--plasma-typo-headline4-fontStyle': 'normal', - '--plasma-typo-headline4-fontSize': '1.25rem', - '--plasma-typo-headline4-letterSpacing': '-0.0250em', - '--plasma-typo-headline4-lineHeight': '1.5rem', - '--plasma-typo-body1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body1-fontWeight': '500', - '--plasma-typo-body1-fontStyle': 'normal', - '--plasma-typo-body1-fontSize': '1rem', - '--plasma-typo-body1-letterSpacing': '-0.0190em', - '--plasma-typo-body1-lineHeight': '1.25rem', - '--plasma-typo-body2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body2-fontWeight': '600', - '--plasma-typo-body2-fontStyle': 'normal', - '--plasma-typo-body2-fontSize': '1rem', - '--plasma-typo-body2-letterSpacing': '-0.0190em', - '--plasma-typo-body2-lineHeight': '1.25rem', - '--plasma-typo-body3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body3-fontWeight': '700', - '--plasma-typo-body3-fontStyle': 'normal', - '--plasma-typo-body3-fontSize': '1rem', - '--plasma-typo-body3-letterSpacing': '-0.0190em', - '--plasma-typo-body3-lineHeight': '1.25rem', - '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-paragraph1-fontWeight': '400', - '--plasma-typo-paragraph1-fontStyle': 'normal', - '--plasma-typo-paragraph1-fontSize': '1rem', - '--plasma-typo-paragraph1-letterSpacing': '-0.0190em', - '--plasma-typo-paragraph1-lineHeight': '1.375rem', - '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-paragraph2-fontWeight': '600', - '--plasma-typo-paragraph2-fontStyle': 'normal', - '--plasma-typo-paragraph2-fontSize': '1rem', - '--plasma-typo-paragraph2-letterSpacing': '-0.0190em', - '--plasma-typo-paragraph2-lineHeight': '1.375rem', - '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-footnote1-fontWeight': '500', - '--plasma-typo-footnote1-fontStyle': 'normal', - '--plasma-typo-footnote1-fontSize': '0.875rem', - '--plasma-typo-footnote1-letterSpacing': '-0.0190em', - '--plasma-typo-footnote1-lineHeight': '1.125rem', - '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-footnote2-fontWeight': '600', - '--plasma-typo-footnote2-fontStyle': 'normal', - '--plasma-typo-footnote2-fontSize': '0.875rem', - '--plasma-typo-footnote2-letterSpacing': '-0.0190em', - '--plasma-typo-footnote2-lineHeight': '1.125rem', - '--plasma-typo-button1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-button1-fontWeight': '600', - '--plasma-typo-button1-fontStyle': 'normal', - '--plasma-typo-button1-fontSize': '1rem', - '--plasma-typo-button1-letterSpacing': 'normal', - '--plasma-typo-button1-lineHeight': '1.25rem', - '--plasma-typo-button2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-button2-fontWeight': '600', - '--plasma-typo-button2-fontStyle': 'normal', - '--plasma-typo-button2-fontSize': '0.875rem', - '--plasma-typo-button2-letterSpacing': 'normal', - '--plasma-typo-button2-lineHeight': '1rem', - '--plasma-typo-caption-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-caption-fontWeight': '500', - '--plasma-typo-caption-fontStyle': 'normal', - '--plasma-typo-caption-fontSize': '0.75rem', - '--plasma-typo-caption-letterSpacing': '-0.0220em', - '--plasma-typo-caption-lineHeight': '1rem', - '--plasma-typo-underline-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-underline-fontWeight': '500', - '--plasma-typo-underline-fontStyle': 'normal', - '--plasma-typo-underline-fontSize': '0.625rem', - '--plasma-typo-underline-letterSpacing': '0.0125em', - '--plasma-typo-underline-lineHeight': '0.75rem', + '--plasma-typo-display1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display1-font-weight': '500', + '--plasma-typo-display1-font-style': 'normal', + '--plasma-typo-display1-font-size': '6rem', + '--plasma-typo-display1-letter-spacing': '-0.0190em', + '--plasma-typo-display1-line-height': '6rem', + '--plasma-typo-display2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display2-font-weight': '500', + '--plasma-typo-display2-font-style': 'normal', + '--plasma-typo-display2-font-size': '3.75rem', + '--plasma-typo-display2-letter-spacing': '-0.0190em', + '--plasma-typo-display2-line-height': '4rem', + '--plasma-typo-display3-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display3-font-weight': '500', + '--plasma-typo-display3-font-style': 'normal', + '--plasma-typo-display3-font-size': '3rem', + '--plasma-typo-display3-letter-spacing': 'normal', + '--plasma-typo-display3-line-height': '3.25rem', + '--plasma-typo-headline1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline1-font-weight': '700', + '--plasma-typo-headline1-font-style': 'normal', + '--plasma-typo-headline1-font-size': '2rem', + '--plasma-typo-headline1-letter-spacing': '-0.0110em', + '--plasma-typo-headline1-line-height': '2.25rem', + '--plasma-typo-headline2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline2-font-weight': '600', + '--plasma-typo-headline2-font-style': 'normal', + '--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', + '--plasma-typo-headline3-font-weight': '600', + '--plasma-typo-headline3-font-style': 'normal', + '--plasma-typo-headline3-font-size': '1.25rem', + '--plasma-typo-headline3-letter-spacing': '-0.0250em', + '--plasma-typo-headline3-line-height': '1.5rem', + '--plasma-typo-headline4-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline4-font-weight': '700', + '--plasma-typo-headline4-font-style': 'normal', + '--plasma-typo-headline4-font-size': '1.25rem', + '--plasma-typo-headline4-letter-spacing': '-0.0250em', + '--plasma-typo-headline4-line-height': '1.5rem', + '--plasma-typo-body1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body1-font-weight': '500', + '--plasma-typo-body1-font-style': 'normal', + '--plasma-typo-body1-font-size': '1rem', + '--plasma-typo-body1-letter-spacing': '-0.0190em', + '--plasma-typo-body1-line-height': '1.25rem', + '--plasma-typo-body2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body2-font-weight': '600', + '--plasma-typo-body2-font-style': 'normal', + '--plasma-typo-body2-font-size': '1rem', + '--plasma-typo-body2-letter-spacing': '-0.0190em', + '--plasma-typo-body2-line-height': '1.25rem', + '--plasma-typo-body3-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body3-font-weight': '700', + '--plasma-typo-body3-font-style': 'normal', + '--plasma-typo-body3-font-size': '1rem', + '--plasma-typo-body3-letter-spacing': '-0.0190em', + '--plasma-typo-body3-line-height': '1.25rem', + '--plasma-typo-paragraph1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph1-font-weight': '400', + '--plasma-typo-paragraph1-font-style': 'normal', + '--plasma-typo-paragraph1-font-size': '1rem', + '--plasma-typo-paragraph1-letter-spacing': '-0.0190em', + '--plasma-typo-paragraph1-line-height': '1.375rem', + '--plasma-typo-paragraph2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph2-font-weight': '600', + '--plasma-typo-paragraph2-font-style': 'normal', + '--plasma-typo-paragraph2-font-size': '1rem', + '--plasma-typo-paragraph2-letter-spacing': '-0.0190em', + '--plasma-typo-paragraph2-line-height': '1.375rem', + '--plasma-typo-footnote1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote1-font-weight': '500', + '--plasma-typo-footnote1-font-style': 'normal', + '--plasma-typo-footnote1-font-size': '0.875rem', + '--plasma-typo-footnote1-letter-spacing': '-0.0190em', + '--plasma-typo-footnote1-line-height': '1.125rem', + '--plasma-typo-footnote2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote2-font-weight': '600', + '--plasma-typo-footnote2-font-style': 'normal', + '--plasma-typo-footnote2-font-size': '0.875rem', + '--plasma-typo-footnote2-letter-spacing': '-0.0190em', + '--plasma-typo-footnote2-line-height': '1.125rem', + '--plasma-typo-button1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-button1-font-weight': '600', + '--plasma-typo-button1-font-style': 'normal', + '--plasma-typo-button1-font-size': '1rem', + '--plasma-typo-button1-letter-spacing': 'normal', + '--plasma-typo-button1-line-height': '1.25rem', + '--plasma-typo-button2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-button2-font-weight': '600', + '--plasma-typo-button2-font-style': 'normal', + '--plasma-typo-button2-font-size': '0.875rem', + '--plasma-typo-button2-letter-spacing': 'normal', + '--plasma-typo-button2-line-height': '1rem', + '--plasma-typo-caption-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-caption-font-weight': '500', + '--plasma-typo-caption-font-style': 'normal', + '--plasma-typo-caption-font-size': '0.75rem', + '--plasma-typo-caption-letter-spacing': '-0.0220em', + '--plasma-typo-caption-line-height': '1rem', + '--plasma-typo-underline-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-underline-font-weight': '500', + '--plasma-typo-underline-font-style': 'normal', + '--plasma-typo-underline-font-size': '0.625rem', + '--plasma-typo-underline-letter-spacing': '0.0125em', + '--plasma-typo-underline-line-height': '0.75rem', '--plasma-typo-overflow-wrap': 'break-word', '--plasma-typo-hyphens': 'auto', fontSize: '32px', diff --git a/packages/plasma-tokens/src/typo/sberPortal.ts b/packages/plasma-tokens/src/typo/sberPortal.ts index 7ff237bc9e..d05e8e3bab 100644 --- a/packages/plasma-tokens/src/typo/sberPortal.ts +++ b/packages/plasma-tokens/src/typo/sberPortal.ts @@ -2,114 +2,114 @@ export const sberPortal = { ':root': { - '--plasma-typo-display1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display1-fontWeight': '500', - '--plasma-typo-display1-fontStyle': 'normal', - '--plasma-typo-display1-fontSize': '6rem', - '--plasma-typo-display1-letterSpacing': '-0.0190em', - '--plasma-typo-display1-lineHeight': '6rem', - '--plasma-typo-display2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display2-fontWeight': '500', - '--plasma-typo-display2-fontStyle': 'normal', - '--plasma-typo-display2-fontSize': '3.75rem', - '--plasma-typo-display2-letterSpacing': '-0.0190em', - '--plasma-typo-display2-lineHeight': '4rem', - '--plasma-typo-display3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-display3-fontWeight': '500', - '--plasma-typo-display3-fontStyle': 'normal', - '--plasma-typo-display3-fontSize': '3rem', - '--plasma-typo-display3-letterSpacing': 'normal', - '--plasma-typo-display3-lineHeight': '3.25rem', - '--plasma-typo-headline1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline1-fontWeight': '700', - '--plasma-typo-headline1-fontStyle': 'normal', - '--plasma-typo-headline1-fontSize': '2rem', - '--plasma-typo-headline1-letterSpacing': '-0.0110em', - '--plasma-typo-headline1-lineHeight': '2.25rem', - '--plasma-typo-headline2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline2-fontWeight': '600', - '--plasma-typo-headline2-fontStyle': 'normal', - '--plasma-typo-headline2-fontSize': '1.5rem', - '--plasma-typo-headline2-letterSpacing': '-0.0220em', - '--plasma-typo-headline2-lineHeight': '1.75rem', - '--plasma-typo-headline3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline3-fontWeight': '600', - '--plasma-typo-headline3-fontStyle': 'normal', - '--plasma-typo-headline3-fontSize': '1.25rem', - '--plasma-typo-headline3-letterSpacing': '-0.0250em', - '--plasma-typo-headline3-lineHeight': '1.5rem', - '--plasma-typo-headline4-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-headline4-fontWeight': '700', - '--plasma-typo-headline4-fontStyle': 'normal', - '--plasma-typo-headline4-fontSize': '1.25rem', - '--plasma-typo-headline4-letterSpacing': '-0.0250em', - '--plasma-typo-headline4-lineHeight': '1.5rem', - '--plasma-typo-body1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body1-fontWeight': '500', - '--plasma-typo-body1-fontStyle': 'normal', - '--plasma-typo-body1-fontSize': '1rem', - '--plasma-typo-body1-letterSpacing': '-0.0190em', - '--plasma-typo-body1-lineHeight': '1.25rem', - '--plasma-typo-body2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body2-fontWeight': '600', - '--plasma-typo-body2-fontStyle': 'normal', - '--plasma-typo-body2-fontSize': '1rem', - '--plasma-typo-body2-letterSpacing': '-0.0190em', - '--plasma-typo-body2-lineHeight': '1.25rem', - '--plasma-typo-body3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-body3-fontWeight': '700', - '--plasma-typo-body3-fontStyle': 'normal', - '--plasma-typo-body3-fontSize': '1rem', - '--plasma-typo-body3-letterSpacing': '-0.0190em', - '--plasma-typo-body3-lineHeight': '1.25rem', - '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-paragraph1-fontWeight': '400', - '--plasma-typo-paragraph1-fontStyle': 'normal', - '--plasma-typo-paragraph1-fontSize': '1rem', - '--plasma-typo-paragraph1-letterSpacing': '-0.0190em', - '--plasma-typo-paragraph1-lineHeight': '1.375rem', - '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-paragraph2-fontWeight': '600', - '--plasma-typo-paragraph2-fontStyle': 'normal', - '--plasma-typo-paragraph2-fontSize': '1rem', - '--plasma-typo-paragraph2-letterSpacing': '-0.0190em', - '--plasma-typo-paragraph2-lineHeight': '1.375rem', - '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-footnote1-fontWeight': '500', - '--plasma-typo-footnote1-fontStyle': 'normal', - '--plasma-typo-footnote1-fontSize': '0.875rem', - '--plasma-typo-footnote1-letterSpacing': '-0.0190em', - '--plasma-typo-footnote1-lineHeight': '1.125rem', - '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-footnote2-fontWeight': '600', - '--plasma-typo-footnote2-fontStyle': 'normal', - '--plasma-typo-footnote2-fontSize': '0.875rem', - '--plasma-typo-footnote2-letterSpacing': '-0.0190em', - '--plasma-typo-footnote2-lineHeight': '1.125rem', - '--plasma-typo-button1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-button1-fontWeight': '600', - '--plasma-typo-button1-fontStyle': 'normal', - '--plasma-typo-button1-fontSize': '1rem', - '--plasma-typo-button1-letterSpacing': 'normal', - '--plasma-typo-button1-lineHeight': '1.25rem', - '--plasma-typo-button2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-button2-fontWeight': '600', - '--plasma-typo-button2-fontStyle': 'normal', - '--plasma-typo-button2-fontSize': '0.875rem', - '--plasma-typo-button2-letterSpacing': 'normal', - '--plasma-typo-button2-lineHeight': '1rem', - '--plasma-typo-caption-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-caption-fontWeight': '500', - '--plasma-typo-caption-fontStyle': 'normal', - '--plasma-typo-caption-fontSize': '0.75rem', - '--plasma-typo-caption-letterSpacing': '-0.0220em', - '--plasma-typo-caption-lineHeight': '1rem', - '--plasma-typo-underline-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', - '--plasma-typo-underline-fontWeight': '500', - '--plasma-typo-underline-fontStyle': 'normal', - '--plasma-typo-underline-fontSize': '0.625rem', - '--plasma-typo-underline-letterSpacing': '0.0125em', - '--plasma-typo-underline-lineHeight': '0.75rem', + '--plasma-typo-display1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display1-font-weight': '500', + '--plasma-typo-display1-font-style': 'normal', + '--plasma-typo-display1-font-size': '6rem', + '--plasma-typo-display1-letter-spacing': '-0.0190em', + '--plasma-typo-display1-line-height': '6rem', + '--plasma-typo-display2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display2-font-weight': '500', + '--plasma-typo-display2-font-style': 'normal', + '--plasma-typo-display2-font-size': '3.75rem', + '--plasma-typo-display2-letter-spacing': '-0.0190em', + '--plasma-typo-display2-line-height': '4rem', + '--plasma-typo-display3-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-display3-font-weight': '500', + '--plasma-typo-display3-font-style': 'normal', + '--plasma-typo-display3-font-size': '3rem', + '--plasma-typo-display3-letter-spacing': 'normal', + '--plasma-typo-display3-line-height': '3.25rem', + '--plasma-typo-headline1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline1-font-weight': '700', + '--plasma-typo-headline1-font-style': 'normal', + '--plasma-typo-headline1-font-size': '2rem', + '--plasma-typo-headline1-letter-spacing': '-0.0110em', + '--plasma-typo-headline1-line-height': '2.25rem', + '--plasma-typo-headline2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline2-font-weight': '600', + '--plasma-typo-headline2-font-style': 'normal', + '--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', + '--plasma-typo-headline3-font-weight': '600', + '--plasma-typo-headline3-font-style': 'normal', + '--plasma-typo-headline3-font-size': '1.25rem', + '--plasma-typo-headline3-letter-spacing': '-0.0250em', + '--plasma-typo-headline3-line-height': '1.5rem', + '--plasma-typo-headline4-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-headline4-font-weight': '700', + '--plasma-typo-headline4-font-style': 'normal', + '--plasma-typo-headline4-font-size': '1.25rem', + '--plasma-typo-headline4-letter-spacing': '-0.0250em', + '--plasma-typo-headline4-line-height': '1.5rem', + '--plasma-typo-body1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body1-font-weight': '500', + '--plasma-typo-body1-font-style': 'normal', + '--plasma-typo-body1-font-size': '1rem', + '--plasma-typo-body1-letter-spacing': '-0.0190em', + '--plasma-typo-body1-line-height': '1.25rem', + '--plasma-typo-body2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body2-font-weight': '600', + '--plasma-typo-body2-font-style': 'normal', + '--plasma-typo-body2-font-size': '1rem', + '--plasma-typo-body2-letter-spacing': '-0.0190em', + '--plasma-typo-body2-line-height': '1.25rem', + '--plasma-typo-body3-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-body3-font-weight': '700', + '--plasma-typo-body3-font-style': 'normal', + '--plasma-typo-body3-font-size': '1rem', + '--plasma-typo-body3-letter-spacing': '-0.0190em', + '--plasma-typo-body3-line-height': '1.25rem', + '--plasma-typo-paragraph1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph1-font-weight': '400', + '--plasma-typo-paragraph1-font-style': 'normal', + '--plasma-typo-paragraph1-font-size': '1rem', + '--plasma-typo-paragraph1-letter-spacing': '-0.0190em', + '--plasma-typo-paragraph1-line-height': '1.375rem', + '--plasma-typo-paragraph2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph2-font-weight': '600', + '--plasma-typo-paragraph2-font-style': 'normal', + '--plasma-typo-paragraph2-font-size': '1rem', + '--plasma-typo-paragraph2-letter-spacing': '-0.0190em', + '--plasma-typo-paragraph2-line-height': '1.375rem', + '--plasma-typo-footnote1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote1-font-weight': '500', + '--plasma-typo-footnote1-font-style': 'normal', + '--plasma-typo-footnote1-font-size': '0.875rem', + '--plasma-typo-footnote1-letter-spacing': '-0.0190em', + '--plasma-typo-footnote1-line-height': '1.125rem', + '--plasma-typo-footnote2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote2-font-weight': '600', + '--plasma-typo-footnote2-font-style': 'normal', + '--plasma-typo-footnote2-font-size': '0.875rem', + '--plasma-typo-footnote2-letter-spacing': '-0.0190em', + '--plasma-typo-footnote2-line-height': '1.125rem', + '--plasma-typo-button1-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-button1-font-weight': '600', + '--plasma-typo-button1-font-style': 'normal', + '--plasma-typo-button1-font-size': '1rem', + '--plasma-typo-button1-letter-spacing': 'normal', + '--plasma-typo-button1-line-height': '1.25rem', + '--plasma-typo-button2-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-button2-font-weight': '600', + '--plasma-typo-button2-font-style': 'normal', + '--plasma-typo-button2-font-size': '0.875rem', + '--plasma-typo-button2-letter-spacing': 'normal', + '--plasma-typo-button2-line-height': '1rem', + '--plasma-typo-caption-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-caption-font-weight': '500', + '--plasma-typo-caption-font-style': 'normal', + '--plasma-typo-caption-font-size': '0.75rem', + '--plasma-typo-caption-letter-spacing': '-0.0220em', + '--plasma-typo-caption-line-height': '1rem', + '--plasma-typo-underline-font-family': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', + '--plasma-typo-underline-font-weight': '500', + '--plasma-typo-underline-font-style': 'normal', + '--plasma-typo-underline-font-size': '0.625rem', + '--plasma-typo-underline-letter-spacing': '0.0125em', + '--plasma-typo-underline-line-height': '0.75rem', '--plasma-typo-overflow-wrap': 'break-word', '--plasma-typo-hyphens': 'auto', fontSize: '32px', diff --git a/utils/plasma-tokens-utils/src/generators/generateColorThemes.ts b/utils/plasma-tokens-utils/src/generators/generateColorThemes.ts index 22cf8d5d84..4102090e81 100644 --- a/utils/plasma-tokens-utils/src/generators/generateColorThemes.ts +++ b/utils/plasma-tokens-utils/src/generators/generateColorThemes.ts @@ -18,6 +18,7 @@ export const generateColorThemes = ( ) => { const files: GeneratedFiles = []; let indexContent = ''; + const withKebabCase = true; for (const [fileName, themeItem] of Object.entries(colorThemes)) { const themeData = extractTokenData(themeItem); @@ -35,9 +36,9 @@ export const generateColorThemes = ( generateFile( fileName, attachToRoot({ - ...objectToCSSVariables(themeData, 'colors'), - ...objectToCSSVariables(mixin), - ...objectToCSSVariables(fallbackThemeData, '', false, true), + ...objectToCSSVariables(themeData, 'colors', true, withKebabCase), + ...objectToCSSVariables(mixin, '', true, withKebabCase), + ...objectToCSSVariables(fallbackThemeData, '', false, withKebabCase), color: themeData.text, backgroundColor: themeData.background, }), diff --git a/utils/plasma-tokens-utils/src/generators/generateTypoSystem.ts b/utils/plasma-tokens-utils/src/generators/generateTypoSystem.ts index feae05f717..9162e63c71 100644 --- a/utils/plasma-tokens-utils/src/generators/generateTypoSystem.ts +++ b/utils/plasma-tokens-utils/src/generators/generateTypoSystem.ts @@ -14,6 +14,8 @@ export const generateTypoSystem = ( mixin: DataObject = {}, ) => { const files: GeneratedFiles = []; + const withPrefixDesign = true; + const withKebabCase = true; let indexContent = ''; for (const [fileName, { theme, scale = 1 }] of Object.entries(typoThemes)) { @@ -23,8 +25,8 @@ export const generateTypoSystem = ( generateFile( fileName, attachToRoot({ - ...objectToCSSVariables(theme, 'typo'), - ...objectToCSSVariables(mixin), + ...objectToCSSVariables(theme, 'typo', withPrefixDesign, withKebabCase), + ...objectToCSSVariables(mixin, '', withPrefixDesign, withKebabCase), ...{ '--plasma-typo-overflow-wrap': 'break-word', '--plasma-typo-hyphens': 'auto', diff --git a/utils/plasma-tokens-utils/src/utils/objectToCSSVariables.ts b/utils/plasma-tokens-utils/src/utils/objectToCSSVariables.ts index 1f687391b0..fa187be7ee 100644 --- a/utils/plasma-tokens-utils/src/utils/objectToCSSVariables.ts +++ b/utils/plasma-tokens-utils/src/utils/objectToCSSVariables.ts @@ -45,7 +45,7 @@ export const objectToCSSVariables = ( vars = { ...vars, - ...objectToCSSVariables(value, name, withPrefixDesign), + ...objectToCSSVariables(value, name, withPrefixDesign, withKebabCase), }; return vars;