From 5499e8492769455a576b7d0e9eb7610c8c7a96f9 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Thu, 18 Jan 2024 18:58:29 +0600 Subject: [PATCH] feat(plasma-tokens): Add new theme - `Caldera` --- .../plasma-tokens/data/themes/caldera.json | 1125 +++++++++++++++++ .../plasma-tokens/src/brands/caldera/index.ts | 451 +++++++ .../plasma-tokens/src/themes/caldera__dark.ts | 159 +++ .../src/themes/caldera__light.ts | 159 +++ packages/plasma-tokens/src/themes/index.ts | 2 + 5 files changed, 1896 insertions(+) create mode 100644 packages/plasma-tokens/data/themes/caldera.json create mode 100644 packages/plasma-tokens/src/brands/caldera/index.ts create mode 100644 packages/plasma-tokens/src/themes/caldera__dark.ts create mode 100644 packages/plasma-tokens/src/themes/caldera__light.ts diff --git a/packages/plasma-tokens/data/themes/caldera.json b/packages/plasma-tokens/data/themes/caldera.json new file mode 100644 index 0000000000..19f8e813fd --- /dev/null +++ b/packages/plasma-tokens/data/themes/caldera.json @@ -0,0 +1,1125 @@ +{ + "config": { + "name": "caldera", + "accentColor": { + "light": "#21A038", + "dark": "#21A038" + }, + "grayscale": { + "light": "gray", + "dark": "gray" + }, + "opacity": { + "textIcons": true, + "surfaces": true + } + }, + "dark": { + "overlay": { + "default": { + "overlaySoft": { + "value": "#0808088F", + "comment": "Цвет фона паранжи светлый" + }, + "overlayHard": { + "value": "#080808f5", + "comment": "Цвет фона паранжи темный" + } + }, + "onDark": { + "overlaySoft": { + "value": "#0808088f", + "comment": "Цвет фона паранжи светлый на темном фоне" + }, + "overlayHard": { + "value": "#080808f5", + "comment": "Цвет фона паранжи темный на темном фоне" + } + }, + "onLight": { + "overlaySoft": { + "value": "#f9f9f98f", + "comment": "Цвет фона паранжи светлый на светлом фоне" + }, + "overlayHard": { + "value": "#f9f9f9f5", + "comment": "Цвет фона паранжи темный на светлом фоне" + } + }, + "inverse": { + "overlaySoft": { + "value": "#f9f9f98F", + "comment": "Инвертированный цвет фона паранжи светлый" + }, + "overlayHard": { + "value": "#f9f9f9f5", + "comment": "Инвертированный цвет фона паранжи темный" + } + } + }, + "text": { + "default": { + "textPrimary": { + "value": "#f5f5f5F5", + "comment": "Основной цвет текста" + }, + "textSecondary": { + "value": "#F5f5f58F", + "comment": "Вторичный цвет текста" + }, + "textTertiary": { + "value": "#F5f5f548", + "comment": "Третичный цвет текста" + }, + "textParagraph": { + "value": "#f5f5f5cc", + "comment": "Сплошной наборный текст" + }, + "textAccent": { + "value": "[general.green.400]", + "comment": "Акцентный цвет" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный цвет с градиентом" + }, + "textPositive": { + "value": "[general.green.400]", + "comment": "Цвет успеха" + }, + "textWarning": { + "value": "[general.orange.400]", + "comment": "Цвет предупреждения" + }, + "textNegative": { + "value": "[general.red.400]", + "comment": "Цвет ошибки" + } + }, + "onDark": { + "textPrimary": { + "value": "#f5f5f5F5", + "comment": "Основной цвет текста на темном фоне" + }, + "textSecondary": { + "value": "#F5f5f58F", + "comment": "Вторичный цвет текста на темном фоне" + }, + "textTertiary": { + "value": "#F5f5f548", + "comment": "Третичный цвет текста на темном фоне" + }, + "textParagraph": { + "value": "#f5f5f5CC", + "comment": "Сплошной наборный текст на темном фоне" + }, + "textAccent": { + "value": "[general.green.400]", + "comment": "Акцентный цвет на темном фоне" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный цвет с градиентом на темном фоне" + }, + "textPositive": { + "value": "[general.green.400]", + "comment": "Цвет успеха на темном фоне" + }, + "textWarning": { + "value": "[general.orange.400]", + "comment": "Цвет предупреждения на темном фоне" + }, + "textNegative": { + "value": "[general.red.400]", + "comment": "Цвет ошибки на темном фоне" + } + }, + "onLight": { + "textPrimary": { + "value": "#171717F5", + "comment": "Основной цвет текста на светлом фоне" + }, + "textSecondary": { + "value": "#1717178F", + "comment": "Вторичный цвет текста на светлом фоне" + }, + "textTertiary": { + "value": "#17171748", + "comment": "Третичный цвет текста на светлом фоне" + }, + "textParagraph": { + "value": "#171717CC", + "comment": "Сплошной наборный текст на светлом фоне" + }, + "textAccent": { + "value": "[general.green.600]", + "comment": "Акцентный цвет на светлом фоне" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)", + "comment": "Акцентный цвет с градиентом на светлом фоне" + }, + "textPositive": { + "value": "[general.green.600]", + "comment": "Цвет успеха на светлом фоне" + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Цвет предупреждения на светлом фоне" + }, + "textNegative": { + "value": "[general.red.600]", + "comment": "Цвет ошибки на светлом фоне" + } + }, + "inverse": { + "textPrimary": { + "value": "#171717F5", + "comment": "Инвертированный основной цвет текста" + }, + "textSecondary": { + "value": "#1717178F", + "comment": "Инвертированный вторичный цвет текста" + }, + "textTertiary": { + "value": "#17171748", + "comment": "Инвертированный третичный цвет текста" + }, + "textParagraph": { + "value": "#171717CC", + "comment": "Инвертированный cплошной наборный текст" + }, + "textAccent": { + "value": "[general.green.600]", + "comment": "Инвертированный акцентный цвет" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)", + "comment": "Инвертированный акцентный цвет с градиентом" + }, + "textPositive": { + "value": "[general.green.600]", + "comment": "Инвертированный цвет успеха" + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Инвертированный цвет предупреждения" + }, + "textNegative": { + "value": "[general.red.600]", + "comment": "Инвертированный цвет ошибки" + } + } + }, + "surface": { + "default": { + "surfaceSolidDefault": { + "value": "#FFFFFFFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.950]", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.900]", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.850]", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidCard": { + "value": "[general.gray.950]", + "comment": "Основной фон для карточек", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "#FFFFFF0F", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(255, 255, 255, 0.12)", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(255, 255, 255, 0.2)", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "#FFFFFF0F", + "comment": "Прозрачный фон для карточек", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Акцентный фон поверхности/контрола", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет фона поверхности/контрола успех", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности предупреждение", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Фон поверхности/контрола без заливки", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#FFFFFFA3", + "comment": "Прозрачный фон поверхности/контрола по умолчанию", + "enabled": true + } + }, + "onDark": { + "surfaceSolidDefault": { + "value": "#FFFFFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.950]", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.900]", + "comment": "Вторичный непрозрачный фон поверхности на темном фоне", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.850]", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceSolidCard": { + "value": "[general.gray.950]", + "comment": "Основной фон для карточек на темном фоне", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "rgba(255, 255, 255, 0.06)", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(255, 255, 255, 0.12)", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(255, 255, 255, 0.2)", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "#FFFFFF0F", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет фона поверхности/контрола успех на темном фоне", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности предупреждение на темном фоне", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#FFFFFFA3", + "comment": "Прозрачный фон поверхности по умолчанию на темном фоне", + "enabled": true + } + }, + "onLight": { + "surfaceSolidDefault": { + "value": "[general.gray.1000]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.100]", + "comment": "Основной непрозрачный фон поверхности на светлом фоне", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.150]", + "comment": "Вторичный непрозрачный фон поверхности на светлом фоне", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.200]", + "comment": "Третичный непрозрачный фон поверхности на светлом фоне", + "enabled": true + }, + "surfaceSolidCard": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "rgba(8, 8, 8, 0.02)", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(8, 8, 8, 0.06)", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(8, 8, 8, 0.12)", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "rgba(8, 8, 8, 0.06)", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет фона поверхности/контрола успех на светлом фоне", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности / предупреждение на светлом фоне", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#080808A3", + "comment": "Прозрачный фон поверхности по умолчанию на светлом фоне", + "enabled": true + } + }, + "inverse": { + "surfaceSolidDefault": { + "value": "[general.gray.1000]", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.100]", + "comment": "Инвертированный основной непрозрачный фон поверхности", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.150]", + "comment": "Инвертированный вторичный непрозрачный фон поверхности", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.200]", + "comment": "Инвертированный третичный непрозрачный фон поверхности", + "enabled": true + }, + "surfaceSolidCard": { + "value": "#FFFFFFFF", + "comment": "Инвертированный основной фон для карточек", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "rgba(8, 8, 8, 0.02)", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(8, 8, 8, 0.06)", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(8, 8, 8, 0.12)", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Инвертированный цвет фона поверхности/контрола успех", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Инвертированный цвет фона поверхности / предупреждение", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#080808A3", + "comment": "Инвертированный прозрачный фон поверхности по умолчанию", + "enabled": true + } + } + }, + "background": { + "default": { + "backgroundPrimary": { + "value": "[general.gray.1000]", + "comment": "Основной фон" + } + }, + "dark": { + "backgroundPrimary": { + "value": "[general.gray.1000]", + "comment": "Основной фон на темном фоне" + } + }, + "light": { + "backgroundPrimary": { + "value": "[general.gray.50]", + "comment": "Основной фон на светлом фоне" + } + }, + "inverse": { + "backgroundPrimary": { + "value": "[general.gray.50]", + "comment": "Инвертированный основной фон" + } + } + } + }, + "light": { + "overlay": { + "default": { + "overlaySoft": { + "value": "#F9F9F98F", + "comment": "Цвет фона паранжи светлый" + }, + "overlayHard": { + "value": "#F9F9F9F5", + "comment": "Цвет фона паранжи темный" + } + }, + "onDark": { + "overlaySoft": { + "value": "#0808088F", + "comment": "Цвет фона паранжи светлый на темном фоне" + }, + "overlayHard": { + "value": "#080808F5", + "comment": "Цвет фона паранжи темный на темном фоне" + } + }, + "onLight": { + "overlaySoft": { + "value": "#F9F9F98F", + "comment": "Цвет фона паранжи светлый на светлом фоне" + }, + "overlayHard": { + "value": "#F9F9F9F5", + "comment": "Цвет фона паранжи темный на светлом фоне" + } + }, + "inverse": { + "overlaySoft": { + "value": "#0808088F", + "comment": "Инвертированный цвет фона паранжи светлый" + }, + "overlayHard": { + "value": "#080808F5", + "comment": "Инвертированный цвет фона паранжи темный" + } + } + }, + "text": { + "default": { + "textPrimary": { + "value": "#171717F5", + "comment": "Основной цвет текста" + }, + "textSecondary": { + "value": "#1717178F", + "comment": "Вторичный цвет текста" + }, + "textTertiary": { + "value": "#17171748", + "comment": "Третичный цвет текста" + }, + "textParagraph": { + "value": "#171717CC", + "comment": "Сплошной наборный текст" + }, + "textAccent": { + "value": "[general.green.600]", + "comment": "Акцентный цвет" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)", + "comment": "Акцентный цвет с градиентом" + }, + "textPositive": { + "value": "[general.green.600]", + "comment": "Цвет успеха" + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Цвет предупреждения" + }, + "textNegative": { + "value": "[general.red.600]", + "comment": "Цвет ошибки" + } + }, + "onDark": { + "textPrimary": { + "value": "#F5F5F5F5", + "comment": "Основной цвет текста на темном фоне" + }, + "textSecondary": { + "value": "#F5F5F58F", + "comment": "Вторичный цвет текста на темном фоне" + }, + "textTertiary": { + "value": "#F5F5F548", + "comment": "Третичный цвет текста на темном фоне" + }, + "textParagraph": { + "value": "#F5F5F5CC", + "comment": "Сплошной наборный текст на темном фоне" + }, + "textAccent": { + "value": "[general.green.400]", + "comment": "Акцентный цвет на темном фоне" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный цвет с градиентом на темном фоне" + }, + "textPositive": { + "value": "[general.green.400]", + "comment": "Цвет успеха на темном фоне" + }, + "textWarning": { + "value": "[general.orange.400]", + "comment": "Цвет предупреждения на темном фоне" + }, + "textNegative": { + "value": "[general.red.400]", + "comment": "Цвет ошибки на темном фоне" + } + }, + "onLight": { + "textPrimary": { + "value": "#171717F5", + "comment": "Основной цвет текста на светлом фоне" + }, + "textSecondary": { + "value": "#1717178F", + "comment": "Вторичный цвет текста на светлом фоне" + }, + "textTertiary": { + "value": "#17171748", + "comment": "Третичный цвет текста на светлом фоне" + }, + "textParagraph": { + "value": "#171717CC", + "comment": "Сплошной наборный текст на светлом фоне" + }, + "textAccent": { + "value": "[general.green.600]", + "comment": "Акцентный цвет на светлом фоне" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)", + "comment": "Акцентный цвет с градиентом на светлом фоне" + }, + "textPositive": { + "value": "[general.green.600]", + "comment": "Цвет успеха на светлом фоне" + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Цвет предупреждения на светлом фоне" + }, + "textNegative": { + "value": "[general.red.600]", + "comment": "Цвет ошибки на светлом фоне" + } + }, + "inverse": { + "textPrimary": { + "value": "#F5F5F5F5", + "comment": "Инвертированный основной цвет текста" + }, + "textSecondary": { + "value": "#F5F5F58F", + "comment": "Инвертированный вторичный цвет текста" + }, + "textTertiary": { + "value": "#F5F5F548", + "comment": "Инвертированный третичный цвет текста" + }, + "textParagraph": { + "value": "#F5F5F5CC", + "comment": "Инвертированный cплошной наборный текст" + }, + "textAccent": { + "value": "[general.green.400]", + "comment": "Инвертированный акцентный цвет" + }, + "textAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Инвертированный акцентный цвет с градиентом" + }, + "textPositive": { + "value": "[general.green.400]", + "comment": "Инвертированный цвет успеха" + }, + "textWarning": { + "value": "[general.orange.400]", + "comment": "Инвертированный цвет предупреждения" + }, + "textNegative": { + "value": "[general.red.400]", + "comment": "Инвертированный цвет ошибки" + } + } + }, + "surface": { + "default": { + "surfaceSolidDefault": { + "value": "[general.gray.1000]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.100]", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.150]", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.200]", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidCard": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "rgba(8, 8, 8, 0.02)", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(8, 8, 8, 0.06)", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(8, 8, 8, 0.12)", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "#FFFFFFFF", + "comment": "Прозрачный фон для карточек", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Акцентный фон поверхности/контрола", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет успеха", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности/контрола предупреждение", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Фон поверхности/контрола без заливки", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#080808A3", + "comment": "Прозрачный фон поверхности/контрола по умолчанию", + "enabled": true + } + }, + "onDark": { + "surfaceSolidDefault": { + "value": "#FFFFFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.950]", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.900]", + "comment": "Вторичный непрозрачный фон поверхности на темном фоне", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.850]", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceSolidCard": { + "value": "[general.gray.950]", + "comment": "Основной фон для карточек на темном фоне", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "rgba(255, 255, 255, 0.06)", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(255, 255, 255, 0.12)", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(255, 255, 255, 0.2)", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "#FFFFFF0F", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет успеха на темном фоне", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности предупреждение на темном фоне", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#FFFFFFA3", + "comment": "Прозрачный фон поверхности по умолчанию на темном фоне", + "enabled": true + } + }, + "onLight": { + "surfaceSolidDefault": { + "value": "[general.gray.1000]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.100]", + "comment": "Основной непрозрачный фон поверхности на светлом фоне", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.150]", + "comment": "Вторичный непрозрачный фон поверхности на светлом фоне", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.200]", + "comment": "Третичный непрозрачный фон поверхности на светлом фоне", + "enabled": true + }, + "surfaceSolidCard": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "rgba(8, 8, 8, 0.02)", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(8, 8, 8, 0.06)", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(8, 8, 8, 0.12)", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "#FFFFFFFF", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет успеха на светлом фоне", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности предупреждение на светлом фоне", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#080808A3", + "comment": "Прозрачный фон поверхности по умолчанию на светлом фоне", + "enabled": true + } + }, + "inverse": { + "surfaceSolidDefault": { + "value": "#FFFFFF", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceSolidPrimary": { + "value": "[general.gray.950]", + "comment": "Инвертированный основной непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidSecondary": { + "value": "[general.gray.900]", + "comment": "Инвертированный вторичный непрозрачный фон поверхности", + "enabled": true + }, + "surfaceSolidTertiary": { + "value": "[general.gray.850]", + "comment": "Инвертированный третичный непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidCard": { + "value": "[general.gray.950]", + "comment": "Инвертированный основной фон для карточек", + "enabled": true + }, + "surfaceTransparentPrimary": { + "value": "rgba(255, 255, 255, 0.06)", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentSecondary": { + "value": "rgba(255, 255, 255, 0.12)", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentTertiary": { + "value": "rgba(255, 255, 255, 0.2)", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceTransparentCard": { + "value": "#FFFFFF0F", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.green.500]", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": true + }, + "surfaceAccentGradient": { + "value": "linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": true + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Инвертированный цвет успеха", + "enabled": true + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Инвертированный цвет фона поверхности предупреждение", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceClear": { + "value": "rgba(0, 0, 0, 0)", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": true + }, + "surfaceTransparentDeep": { + "value": "#FFFFFFA3", + "comment": "Инвертированный прозрачный фон поверхности по умолчанию", + "enabled": true + } + } + }, + "background": { + "default": { + "backgroundPrimary": { + "value": "[general.gray.50]", + "comment": "Основной фон" + } + }, + "dark": { + "backgroundPrimary": { + "value": "[general.gray.1000]", + "comment": "Основной фон на темном фоне" + } + }, + "light": { + "backgroundPrimary": { + "value": "[general.gray.50]", + "comment": "Основной фон на светлом фоне" + } + }, + "inverse": { + "backgroundPrimary": { + "value": "[general.gray.1000]", + "comment": "Инвертированный основной фон" + } + } + } + } +} diff --git a/packages/plasma-tokens/src/brands/caldera/index.ts b/packages/plasma-tokens/src/brands/caldera/index.ts new file mode 100644 index 0000000000..0f9620145b --- /dev/null +++ b/packages/plasma-tokens/src/brands/caldera/index.ts @@ -0,0 +1,451 @@ +// Generated by robots, do not change this manually! + +/** Цвет фона паранжи светлый */ +export const overlaySoft = 'var(--overlay-soft, #0808088F)'; + +/** Цвет фона паранжи темный */ +export const overlayHard = 'var(--overlay-hard, #080808f5)'; + +/** Цвет фона паранжи светлый на темном фоне */ +export const onDarkOverlaySoft = 'var(--on-dark-overlay-soft, #0808088f)'; + +/** Цвет фона паранжи темный на темном фоне */ +export const onDarkOverlayHard = 'var(--on-dark-overlay-hard, #080808f5)'; + +/** Цвет фона паранжи светлый на светлом фоне */ +export const onLightOverlaySoft = 'var(--on-light-overlay-soft, #f9f9f98f)'; + +/** Цвет фона паранжи темный на светлом фоне */ +export const onLightOverlayHard = 'var(--on-light-overlay-hard, #f9f9f9f5)'; + +/** Инвертированный цвет фона паранжи светлый */ +export const inverseOverlaySoft = 'var(--inverse-overlay-soft, #f9f9f98F)'; + +/** Инвертированный цвет фона паранжи темный */ +export const inverseOverlayHard = 'var(--inverse-overlay-hard, #f9f9f9f5)'; + +/** Основной цвет текста */ +export const textPrimary = 'var(--text-primary, #f5f5f5F5)'; + +/** Вторичный цвет текста */ +export const textSecondary = 'var(--text-secondary, #F5f5f58F)'; + +/** Третичный цвет текста */ +export const textTertiary = 'var(--text-tertiary, #F5f5f548)'; + +/** Сплошной наборный текст */ +export const textParagraph = 'var(--text-paragraph, #f5f5f5cc)'; + +/** Акцентный цвет */ +export const textAccent = 'var(--text-accent, #24B23E)'; + +/** Акцентный цвет с градиентом */ +export const textAccentGradient = 'var(--text-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; + +/** Цвет успеха */ +export const textPositive = 'var(--text-positive, #24B23E)'; + +/** Цвет предупреждения */ +export const textWarning = 'var(--text-warning, #FF7024)'; + +/** Цвет ошибки */ +export const textNegative = 'var(--text-negative, #FF3D51)'; + +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimary = 'var(--on-dark-text-primary, #f5f5f5F5)'; + +/** Вторичный цвет текста на темном фоне */ +export const onDarkTextSecondary = 'var(--on-dark-text-secondary, #F5f5f58F)'; + +/** Третичный цвет текста на темном фоне */ +export const onDarkTextTertiary = 'var(--on-dark-text-tertiary, #F5f5f548)'; + +/** Сплошной наборный текст на темном фоне */ +export const onDarkTextParagraph = 'var(--on-dark-text-paragraph, #f5f5f5CC)'; + +/** Акцентный цвет на темном фоне */ +export const onDarkTextAccent = 'var(--on-dark-text-accent, #24B23E)'; + +/** Акцентный цвет с градиентом на темном фоне */ +export const onDarkTextAccentGradient = + 'var(--on-dark-text-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; + +/** Цвет успеха на темном фоне */ +export const onDarkTextPositive = 'var(--on-dark-text-positive, #24B23E)'; + +/** Цвет предупреждения на темном фоне */ +export const onDarkTextWarning = 'var(--on-dark-text-warning, #FF7024)'; + +/** Цвет ошибки на темном фоне */ +export const onDarkTextNegative = 'var(--on-dark-text-negative, #FF3D51)'; + +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimary = 'var(--on-light-text-primary, #171717F5)'; + +/** Вторичный цвет текста на светлом фоне */ +export const onLightTextSecondary = 'var(--on-light-text-secondary, #1717178F)'; + +/** Третичный цвет текста на светлом фоне */ +export const onLightTextTertiary = 'var(--on-light-text-tertiary, #17171748)'; + +/** Сплошной наборный текст на светлом фоне */ +export const onLightTextParagraph = 'var(--on-light-text-paragraph, #171717CC)'; + +/** Акцентный цвет на светлом фоне */ +export const onLightTextAccent = 'var(--on-light-text-accent, #108E26)'; + +/** Акцентный цвет с градиентом на светлом фоне */ +export const onLightTextAccentGradient = + 'var(--on-light-text-accent-gradient, linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%))'; + +/** Цвет успеха на светлом фоне */ +export const onLightTextPositive = 'var(--on-light-text-positive, #108E26)'; + +/** Цвет предупреждения на светлом фоне */ +export const onLightTextWarning = 'var(--on-light-text-warning, #E85702)'; + +/** Цвет ошибки на светлом фоне */ +export const onLightTextNegative = 'var(--on-light-text-negative, #F31B31)'; + +/** Инвертированный основной цвет текста */ +export const inverseTextPrimary = 'var(--inverse-text-primary, #171717F5)'; + +/** Инвертированный вторичный цвет текста */ +export const inverseTextSecondary = 'var(--inverse-text-secondary, #1717178F)'; + +/** Инвертированный третичный цвет текста */ +export const inverseTextTertiary = 'var(--inverse-text-tertiary, #17171748)'; + +/** Инвертированный cплошной наборный текст */ +export const inverseTextParagraph = 'var(--inverse-text-paragraph, #171717CC)'; + +/** Инвертированный акцентный цвет */ +export const inverseTextAccent = 'var(--inverse-text-accent, #108E26)'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradient = + 'var(--inverse-text-accent-gradient, linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%))'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositive = 'var(--inverse-text-positive, #108E26)'; + +/** Инвертированный цвет предупреждения */ +export const inverseTextWarning = 'var(--inverse-text-warning, #E85702)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegative = 'var(--inverse-text-negative, #F31B31)'; + +/** Непрозрачный фон поверхности/контрола по умолчанию */ +export const surfaceSolidDefault = 'var(--surface-solid-default, #FFFFFFFF)'; + +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; + +/** Вторичный непрозрачный фон поверхности/контрола */ +export const surfaceSolidSecondary = 'var(--surface-solid-secondary, #262626)'; + +/** Третичный непрозрачный фон поверхности/контрола */ +export const surfaceSolidTertiary = 'var(--surface-solid-tertiary, #363636)'; + +/** Основной фон для карточек */ +export const surfaceSolidCard = 'var(--surface-solid-card, #171717)'; + +/** Основной прозрачный фон поверхности/контрола */ +export const surfaceTransparentPrimary = 'var(--surface-transparent-primary, #FFFFFF0F)'; + +/** Вторичный прозрачный фон поверхности/контрола */ +export const surfaceTransparentSecondary = 'var(--surface-transparent-secondary, rgba(255, 255, 255, 0.12))'; + +/** Третичный прозрачный фон поверхности/контрола */ +export const surfaceTransparentTertiary = 'var(--surface-transparent-tertiary, rgba(255, 255, 255, 0.2))'; + +/** Прозрачный фон для карточек */ +export const surfaceTransparentCard = 'var(--surface-transparent-card, #FFFFFF0F)'; + +/** Акцентный фон поверхности/контрола */ +export const surfaceAccent = 'var(--surface-accent, #1A9E32)'; + +/** Акцентный фон поверхности/контрола с градиентом */ +export const surfaceAccentGradient = 'var(--surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; + +/** Цвет фона поверхности/контрола успех */ +export const surfacePositive = 'var(--surface-positive, #1A9E32)'; + +/** Цвет фона поверхности предупреждение */ +export const surfaceWarning = 'var(--surface-warning, #FA5F05)'; + +/** Цвет фона поверхности/контрола ошибка */ +export const surfaceNegative = 'var(--surface-negative, #FF293E)'; + +/** Фон поверхности/контрола без заливки */ +export const surfaceClear = 'var(--surface-clear, rgba(0, 0, 0, 0))'; + +/** Прозрачный фон поверхности/контрола по умолчанию */ +export const surfaceTransparentDeep = 'var(--surface-transparent-deep, #FFFFFFA3)'; + +/** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ +export const onDarkSurfaceSolidDefault = 'var(--on-dark-surface-solid-default, #FFFFFF)'; + +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; + +/** Вторичный непрозрачный фон поверхности на темном фоне */ +export const onDarkSurfaceSolidSecondary = 'var(--on-dark-surface-solid-secondary, #262626)'; + +/** Третичный непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidTertiary = 'var(--on-dark-surface-solid-tertiary, #363636)'; + +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #171717)'; + +/** Основной прозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceTransparentPrimary = 'var(--on-dark-surface-transparent-primary, rgba(255, 255, 255, 0.06))'; + +/** Вторичный прозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceTransparentSecondary = + 'var(--on-dark-surface-transparent-secondary, rgba(255, 255, 255, 0.12))'; + +/** Третичный прозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceTransparentTertiary = 'var(--on-dark-surface-transparent-tertiary, rgba(255, 255, 255, 0.2))'; + +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF0F)'; + +/** Акцентный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceAccent = 'var(--on-dark-surface-accent, #1A9E32)'; + +/** Акцентный фон поверхности/контрола с градиентом на темном фоне */ +export const onDarkSurfaceAccentGradient = + 'var(--on-dark-surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; + +/** Цвет фона поверхности/контрола успех на темном фоне */ +export const onDarkSurfacePositive = 'var(--on-dark-surface-positive, #1A9E32)'; + +/** Цвет фона поверхности предупреждение на темном фоне */ +export const onDarkSurfaceWarning = 'var(--on-dark-surface-warning, #FA5F05)'; + +/** Цвет фона поверхности/контрола ошибка на темном фоне */ +export const onDarkSurfaceNegative = 'var(--on-dark-surface-negative, #FF293E)'; + +/** Фон поверхности/контрола без заливки на темном фоне */ +export const onDarkSurfaceClear = 'var(--on-dark-surface-clear, rgba(0, 0, 0, 0))'; + +/** Прозрачный фон поверхности по умолчанию на темном фоне */ +export const onDarkSurfaceTransparentDeep = 'var(--on-dark-surface-transparent-deep, #FFFFFFA3)'; + +/** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ +export const onLightSurfaceSolidDefault = 'var(--on-light-surface-solid-default, #080808)'; + +/** Основной непрозрачный фон поверхности на светлом фоне */ +export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; + +/** Вторичный непрозрачный фон поверхности на светлом фоне */ +export const onLightSurfaceSolidSecondary = 'var(--on-light-surface-solid-secondary, #ECECEC)'; + +/** Третичный непрозрачный фон поверхности на светлом фоне */ +export const onLightSurfaceSolidTertiary = 'var(--on-light-surface-solid-tertiary, #DDDDDD)'; + +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; + +/** Основной прозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceTransparentPrimary = 'var(--on-light-surface-transparent-primary, rgba(8, 8, 8, 0.02))'; + +/** Вторичный прозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceTransparentSecondary = 'var(--on-light-surface-transparent-secondary, rgba(8, 8, 8, 0.06))'; + +/** Третичный прозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceTransparentTertiary = 'var(--on-light-surface-transparent-tertiary, rgba(8, 8, 8, 0.12))'; + +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, rgba(8, 8, 8, 0.06))'; + +/** Акцентный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceAccent = 'var(--on-light-surface-accent, #1A9E32)'; + +/** Акцентный фон поверхности/контрола с градиентом на светлом фоне */ +export const onLightSurfaceAccentGradient = + 'var(--on-light-surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; + +/** Цвет фона поверхности/контрола успех на светлом фоне */ +export const onLightSurfacePositive = 'var(--on-light-surface-positive, #1A9E32)'; + +/** Цвет фона поверхности / предупреждение на светлом фоне */ +export const onLightSurfaceWarning = 'var(--on-light-surface-warning, #FA5F05)'; + +/** Цвет фона поверхности/контрола ошибка на светлом фоне */ +export const onLightSurfaceNegative = 'var(--on-light-surface-negative, #FF293E)'; + +/** Фон поверхности/контрола без заливки на светлом фоне */ +export const onLightSurfaceClear = 'var(--on-light-surface-clear, rgba(0, 0, 0, 0))'; + +/** Прозрачный фон поверхности по умолчанию на светлом фоне */ +export const onLightSurfaceTransparentDeep = 'var(--on-light-surface-transparent-deep, #080808A3)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, #080808)'; + +/** Инвертированный основной непрозрачный фон поверхности */ +export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F5F5F5)'; + +/** Инвертированный вторичный непрозрачный фон поверхности */ +export const inverseSurfaceSolidSecondary = 'var(--inverse-surface-solid-secondary, #ECECEC)'; + +/** Инвертированный третичный непрозрачный фон поверхности */ +export const inverseSurfaceSolidTertiary = 'var(--inverse-surface-solid-tertiary, #DDDDDD)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFFFF)'; + +/** Инвертированный основной прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary, rgba(8, 8, 8, 0.02))'; + +/** Инвертированный вторичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentSecondary = 'var(--inverse-surface-transparent-secondary, rgba(8, 8, 8, 0.06))'; + +/** Инвертированный третичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentTertiary = 'var(--inverse-surface-transparent-tertiary, rgba(8, 8, 8, 0.12))'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccent = 'var(--inverse-surface-accent, #1A9E32)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradient = + 'var(--inverse-surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; + +/** Инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositive = 'var(--inverse-surface-positive, #1A9E32)'; + +/** Инвертированный цвет фона поверхности / предупреждение */ +export const inverseSurfaceWarning = 'var(--inverse-surface-warning, #FA5F05)'; + +/** Инвертированный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #FF293E)'; + +/** Инвертированный фон поверхности/контрола без заливки */ +export const inverseSurfaceClear = 'var(--inverse-surface-clear, rgba(0, 0, 0, 0))'; + +/** Инвертированный прозрачный фон поверхности по умолчанию */ +export const inverseSurfaceTransparentDeep = 'var(--inverse-surface-transparent-deep, #080808A3)'; + +/** Основной фон */ +export const backgroundPrimary = 'var(--background-primary, #080808)'; + +/** Основной фон на темном фоне */ +export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; + +/** Основной фон на светлом фоне */ +export const lightBackgroundPrimary = 'var(--light-background-primary, #F9F9F9)'; + +/** Инвертированный основной фон */ +export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F9F9F9)'; + +export const skeletonGradient = + 'var(--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% ))'; + +export const skeletonGradientLighter = + 'var(--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% ))'; + +/** @deprecated instead use onDarkTextPrimary */ +export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; + +/** @deprecated instead use onDarkTextSecondary */ +export const whiteSecondary = 'var(--plasma-colors-white-secondary, var(--on-dark-text-secondary))'; + +/** @deprecated instead use onDarkTextTertiary */ +export const whiteTertiary = 'var(--plasma-colors-white-tertiary, var(--on-dark-text-tertiary))'; + +/** @deprecated instead use onLightTextPrimary */ +export const blackPrimary = 'var(--plasma-colors-black-primary, var(--on-light-text-primary))'; + +/** @deprecated instead use onLightTextSecondary */ +export const blackSecondary = 'var(--plasma-colors-black-secondary, var(--on-light-text-secondary))'; + +/** @deprecated instead use onLightTextTertiary */ +export const blackTertiary = 'var(--plasma-colors-black-tertiary, var(--on-light-text-tertiary))'; + +/** @deprecated instead use onLightSurfaceSolidDefault */ +export const buttonBlack = 'var(--plasma-colors-button-black, var(--on-light-surface-solid-default))'; + +/** @deprecated instead use onLightSurfaceTransparentSecondary */ +export const buttonBlackSecondary = + 'var(--plasma-colors-button-black-secondary, var(--on-light-surface-transparent-secondary))'; + +/** @deprecated instead use onDarkSurfaceSolidDefault */ +export const buttonWhite = 'var(--plasma-colors-button-white, var(--on-dark-surface-solid-default))'; + +/** @deprecated instead use onDarkSurfaceTransparentSecondary */ +export const buttonWhiteSecondary = + 'var(--plasma-colors-button-white-secondary, var(--on-dark-surface-transparent-secondary))'; + +/** @deprecated instead use textPrimary */ +export const text = 'var(--plasma-colors-text, var(--text-primary))'; + +/** @deprecated instead use textPrimary */ +export const primary = 'var(--plasma-colors-primary, var(--text-primary))'; + +/** @deprecated instead use textSecondary */ +export const secondary = 'var(--plasma-colors-secondary, var(--text-secondary))'; + +/** @deprecated instead use textTertiary */ +export const tertiary = 'var(--plasma-colors-tertiary, var(--text-tertiary))'; + +/** @deprecated instead use textParagraph */ +export const paragraph = 'var(--plasma-colors-paragraph, var(--text-paragraph))'; + +/** @deprecated instead use backgroundPrimary */ +export const background = 'var(--plasma-colors-background, var(--background-primary))'; + +/** @deprecated instead use textAccent */ +export const accent = 'var(--plasma-colors-accent, var(--text-accent))'; + +/** @deprecated instead use textPositive */ +export const success = 'var(--plasma-colors-success, var(--text-positive))'; + +/** @deprecated instead use textWarning */ +export const warning = 'var(--plasma-colors-warning, var(--text-warning))'; + +/** @deprecated instead use textNegative */ +export const critical = 'var(--plasma-colors-critical, var(--text-negative))'; + +/** @deprecated instead use overlaySoft */ +export const overlay = 'var(--plasma-colors-overlay, var(--overlay-soft))'; + +/** @deprecated instead use surfaceTransparentPrimary */ +export const surfaceLiquid01 = 'var(--plasma-colors-surface-liquid01, var(--surface-transparent-primary))'; + +/** @deprecated instead use surfaceTransparentSecondary */ +export const surfaceLiquid02 = 'var(--plasma-colors-surface-liquid02, var(--surface-transparent-secondary))'; + +/** @deprecated instead use surfaceTransparentTertiary */ +export const surfaceLiquid03 = 'var(--plasma-colors-surface-liquid03, var(--surface-transparent-tertiary))'; + +/** @deprecated instead use surfaceSolidPrimary */ +export const surfaceSolid01 = 'var(--plasma-colors-surface-solid01, var(--surface-solid-primary))'; + +/** @deprecated instead use surfaceSolidSecondary */ +export const surfaceSolid02 = 'var(--plasma-colors-surface-solid02, var(--surface-solid-secondary))'; + +/** @deprecated instead use surfaceSolidTertiary */ +export const surfaceSolid03 = 'var(--plasma-colors-surface-solid03, var(--surface-solid-tertiary))'; + +/** @deprecated instead use surfaceTransparentCard */ +export const surfaceCard = 'var(--plasma-colors-surface-card, var(--surface-transparent-card))'; + +/** @deprecated instead use surfaceTransparentSecondary */ +export const buttonSecondary = 'var(--plasma-colors-button-secondary, var(--surface-transparent-secondary))'; + +/** @deprecated instead use textAccent */ +export const buttonAccent = 'var(--plasma-colors-button-accent, var(--text-accent))'; + +/** @deprecated instead use surfacePositive */ +export const buttonSuccess = 'var(--plasma-colors-button-success, var(--surface-positive))'; + +/** @deprecated instead use surfaceWarning */ +export const buttonWarning = 'var(--plasma-colors-button-warning, var(--surface-warning))'; + +/** @deprecated instead use surfaceNegative */ +export const buttonCritical = 'var(--plasma-colors-button-critical, var(--surface-negative))'; diff --git a/packages/plasma-tokens/src/themes/caldera__dark.ts b/packages/plasma-tokens/src/themes/caldera__dark.ts new file mode 100644 index 0000000000..bff4c87079 --- /dev/null +++ b/packages/plasma-tokens/src/themes/caldera__dark.ts @@ -0,0 +1,159 @@ +// Generated by robots, do not change this manually! + +export const caldera__dark = { + ':root': { + '--overlay-soft': '#0808088F', + '--overlay-hard': '#080808f5', + '--on-dark-overlay-soft': '#0808088f', + '--on-dark-overlay-hard': '#080808f5', + '--on-light-overlay-soft': '#f9f9f98f', + '--on-light-overlay-hard': '#f9f9f9f5', + '--inverse-overlay-soft': '#f9f9f98F', + '--inverse-overlay-hard': '#f9f9f9f5', + '--text-primary': '#f5f5f5F5', + '--text-secondary': '#F5f5f58F', + '--text-tertiary': '#F5f5f548', + '--text-paragraph': '#f5f5f5cc', + '--text-accent': '#24B23E', + '--text-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--text-positive': '#24B23E', + '--text-warning': '#FF7024', + '--text-negative': '#FF3D51', + '--on-dark-text-primary': '#f5f5f5F5', + '--on-dark-text-secondary': '#F5f5f58F', + '--on-dark-text-tertiary': '#F5f5f548', + '--on-dark-text-paragraph': '#f5f5f5CC', + '--on-dark-text-accent': '#24B23E', + '--on-dark-text-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--on-dark-text-positive': '#24B23E', + '--on-dark-text-warning': '#FF7024', + '--on-dark-text-negative': '#FF3D51', + '--on-light-text-primary': '#171717F5', + '--on-light-text-secondary': '#1717178F', + '--on-light-text-tertiary': '#17171748', + '--on-light-text-paragraph': '#171717CC', + '--on-light-text-accent': '#108E26', + '--on-light-text-accent-gradient': 'linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)', + '--on-light-text-positive': '#108E26', + '--on-light-text-warning': '#E85702', + '--on-light-text-negative': '#F31B31', + '--inverse-text-primary': '#171717F5', + '--inverse-text-secondary': '#1717178F', + '--inverse-text-tertiary': '#17171748', + '--inverse-text-paragraph': '#171717CC', + '--inverse-text-accent': '#108E26', + '--inverse-text-accent-gradient': 'linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)', + '--inverse-text-positive': '#108E26', + '--inverse-text-warning': '#E85702', + '--inverse-text-negative': '#F31B31', + '--surface-solid-default': '#FFFFFFFF', + '--surface-solid-primary': '#171717', + '--surface-solid-secondary': '#262626', + '--surface-solid-tertiary': '#363636', + '--surface-solid-card': '#171717', + '--surface-transparent-primary': '#FFFFFF0F', + '--surface-transparent-secondary': 'rgba(255, 255, 255, 0.12)', + '--surface-transparent-tertiary': 'rgba(255, 255, 255, 0.2)', + '--surface-transparent-card': '#FFFFFF0F', + '--surface-accent': '#1A9E32', + '--surface-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--surface-positive': '#1A9E32', + '--surface-warning': '#FA5F05', + '--surface-negative': '#FF293E', + '--surface-clear': 'rgba(0, 0, 0, 0)', + '--surface-transparent-deep': '#FFFFFFA3', + '--on-dark-surface-solid-default': '#FFFFFF', + '--on-dark-surface-solid-primary': '#171717', + '--on-dark-surface-solid-secondary': '#262626', + '--on-dark-surface-solid-tertiary': '#363636', + '--on-dark-surface-solid-card': '#171717', + '--on-dark-surface-transparent-primary': 'rgba(255, 255, 255, 0.06)', + '--on-dark-surface-transparent-secondary': 'rgba(255, 255, 255, 0.12)', + '--on-dark-surface-transparent-tertiary': 'rgba(255, 255, 255, 0.2)', + '--on-dark-surface-transparent-card': '#FFFFFF0F', + '--on-dark-surface-accent': '#1A9E32', + '--on-dark-surface-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--on-dark-surface-positive': '#1A9E32', + '--on-dark-surface-warning': '#FA5F05', + '--on-dark-surface-negative': '#FF293E', + '--on-dark-surface-clear': 'rgba(0, 0, 0, 0)', + '--on-dark-surface-transparent-deep': '#FFFFFFA3', + '--on-light-surface-solid-default': '#080808', + '--on-light-surface-solid-primary': '#F5F5F5', + '--on-light-surface-solid-secondary': '#ECECEC', + '--on-light-surface-solid-tertiary': '#DDDDDD', + '--on-light-surface-solid-card': '#FFFFFFFF', + '--on-light-surface-transparent-primary': 'rgba(8, 8, 8, 0.02)', + '--on-light-surface-transparent-secondary': 'rgba(8, 8, 8, 0.06)', + '--on-light-surface-transparent-tertiary': 'rgba(8, 8, 8, 0.12)', + '--on-light-surface-transparent-card': 'rgba(8, 8, 8, 0.06)', + '--on-light-surface-accent': '#1A9E32', + '--on-light-surface-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--on-light-surface-positive': '#1A9E32', + '--on-light-surface-warning': '#FA5F05', + '--on-light-surface-negative': '#FF293E', + '--on-light-surface-clear': 'rgba(0, 0, 0, 0)', + '--on-light-surface-transparent-deep': '#080808A3', + '--inverse-surface-solid-default': '#080808', + '--inverse-surface-solid-primary': '#F5F5F5', + '--inverse-surface-solid-secondary': '#ECECEC', + '--inverse-surface-solid-tertiary': '#DDDDDD', + '--inverse-surface-solid-card': '#FFFFFFFF', + '--inverse-surface-transparent-primary': 'rgba(8, 8, 8, 0.02)', + '--inverse-surface-transparent-secondary': 'rgba(8, 8, 8, 0.06)', + '--inverse-surface-transparent-tertiary': 'rgba(8, 8, 8, 0.12)', + '--inverse-surface-transparent-card': '#FFFFFFFF', + '--inverse-surface-accent': '#1A9E32', + '--inverse-surface-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--inverse-surface-positive': '#1A9E32', + '--inverse-surface-warning': '#FA5F05', + '--inverse-surface-negative': '#FF293E', + '--inverse-surface-clear': 'rgba(0, 0, 0, 0)', + '--inverse-surface-transparent-deep': '#080808A3', + '--background-primary': '#080808', + '--dark-background-primary': '#080808', + '--light-background-primary': '#F9F9F9', + '--inverse-background-primary': '#F9F9F9', + '--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% )', + '--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-white-primary': 'var(--on-dark-text-primary)', + '--plasma-colors-white-secondary': 'var(--on-dark-text-secondary)', + '--plasma-colors-white-tertiary': 'var(--on-dark-text-tertiary)', + '--plasma-colors-black-primary': 'var(--on-light-text-primary)', + '--plasma-colors-black-secondary': 'var(--on-light-text-secondary)', + '--plasma-colors-black-tertiary': 'var(--on-light-text-tertiary)', + '--plasma-colors-button-black': 'var(--on-light-surface-solid-default)', + '--plasma-colors-button-black-secondary': 'var(--on-light-surface-transparent-secondary)', + '--plasma-colors-button-white': 'var(--on-dark-surface-solid-default)', + '--plasma-colors-button-white-secondary': 'var(--on-dark-surface-transparent-secondary)', + '--plasma-colors-text': 'var(--text-primary)', + '--plasma-colors-primary': 'var(--text-primary)', + '--plasma-colors-secondary': 'var(--text-secondary)', + '--plasma-colors-tertiary': 'var(--text-tertiary)', + '--plasma-colors-paragraph': 'var(--text-paragraph)', + '--plasma-colors-background': 'var(--background-primary)', + '--plasma-colors-accent': 'var(--text-accent)', + '--plasma-colors-success': 'var(--text-positive)', + '--plasma-colors-warning': 'var(--text-warning)', + '--plasma-colors-critical': 'var(--text-negative)', + '--plasma-colors-overlay': 'var(--overlay-soft)', + '--plasma-colors-surface-liquid01': 'var(--surface-transparent-primary)', + '--plasma-colors-surface-liquid02': 'var(--surface-transparent-secondary)', + '--plasma-colors-surface-liquid03': 'var(--surface-transparent-tertiary)', + '--plasma-colors-surface-solid01': 'var(--surface-solid-primary)', + '--plasma-colors-surface-solid02': 'var(--surface-solid-secondary)', + '--plasma-colors-surface-solid03': 'var(--surface-solid-tertiary)', + '--plasma-colors-surface-card': 'var(--surface-transparent-card)', + '--plasma-colors-button-secondary': 'var(--surface-transparent-secondary)', + '--plasma-colors-button-accent': 'var(--text-accent)', + '--plasma-colors-button-success': 'var(--surface-positive)', + '--plasma-colors-button-warning': 'var(--surface-warning)', + '--plasma-colors-button-critical': 'var(--surface-negative)', + color: 'var(--text-primary)', + 'background-color': 'var(--background-primary)', + }, +}; +/** @deprecated использовать вместо этого caldera__dark */ +export const darkCaldera = caldera__dark; diff --git a/packages/plasma-tokens/src/themes/caldera__light.ts b/packages/plasma-tokens/src/themes/caldera__light.ts new file mode 100644 index 0000000000..ec7b3fd60a --- /dev/null +++ b/packages/plasma-tokens/src/themes/caldera__light.ts @@ -0,0 +1,159 @@ +// Generated by robots, do not change this manually! + +export const caldera__light = { + ':root': { + '--overlay-soft': '#F9F9F98F', + '--overlay-hard': '#F9F9F9F5', + '--on-dark-overlay-soft': '#0808088F', + '--on-dark-overlay-hard': '#080808F5', + '--on-light-overlay-soft': '#F9F9F98F', + '--on-light-overlay-hard': '#F9F9F9F5', + '--inverse-overlay-soft': '#0808088F', + '--inverse-overlay-hard': '#080808F5', + '--text-primary': '#171717F5', + '--text-secondary': '#1717178F', + '--text-tertiary': '#17171748', + '--text-paragraph': '#171717CC', + '--text-accent': '#108E26', + '--text-accent-gradient': 'linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)', + '--text-positive': '#108E26', + '--text-warning': '#E85702', + '--text-negative': '#F31B31', + '--on-dark-text-primary': '#F5F5F5F5', + '--on-dark-text-secondary': '#F5F5F58F', + '--on-dark-text-tertiary': '#F5F5F548', + '--on-dark-text-paragraph': '#F5F5F5CC', + '--on-dark-text-accent': '#24B23E', + '--on-dark-text-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--on-dark-text-positive': '#24B23E', + '--on-dark-text-warning': '#FF7024', + '--on-dark-text-negative': '#FF3D51', + '--on-light-text-primary': '#171717F5', + '--on-light-text-secondary': '#1717178F', + '--on-light-text-tertiary': '#17171748', + '--on-light-text-paragraph': '#171717CC', + '--on-light-text-accent': '#108E26', + '--on-light-text-accent-gradient': 'linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)', + '--on-light-text-positive': '#108E26', + '--on-light-text-warning': '#E85702', + '--on-light-text-negative': '#F31B31', + '--inverse-text-primary': '#F5F5F5F5', + '--inverse-text-secondary': '#F5F5F58F', + '--inverse-text-tertiary': '#F5F5F548', + '--inverse-text-paragraph': '#F5F5F5CC', + '--inverse-text-accent': '#24B23E', + '--inverse-text-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--inverse-text-positive': '#24B23E', + '--inverse-text-warning': '#FF7024', + '--inverse-text-negative': '#FF3D51', + '--surface-solid-default': '#080808', + '--surface-solid-primary': '#F5F5F5', + '--surface-solid-secondary': '#ECECEC', + '--surface-solid-tertiary': '#DDDDDD', + '--surface-solid-card': '#FFFFFFFF', + '--surface-transparent-primary': 'rgba(8, 8, 8, 0.02)', + '--surface-transparent-secondary': 'rgba(8, 8, 8, 0.06)', + '--surface-transparent-tertiary': 'rgba(8, 8, 8, 0.12)', + '--surface-transparent-card': '#FFFFFFFF', + '--surface-accent': '#1A9E32', + '--surface-accent-gradient': 'linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%)', + '--surface-positive': '#1A9E32', + '--surface-warning': '#FA5F05', + '--surface-negative': '#FF293E', + '--surface-clear': 'rgba(0, 0, 0, 0)', + '--surface-transparent-deep': '#080808A3', + '--on-dark-surface-solid-default': '#FFFFFF', + '--on-dark-surface-solid-primary': '#171717', + '--on-dark-surface-solid-secondary': '#262626', + '--on-dark-surface-solid-tertiary': '#363636', + '--on-dark-surface-solid-card': '#171717', + '--on-dark-surface-transparent-primary': 'rgba(255, 255, 255, 0.06)', + '--on-dark-surface-transparent-secondary': 'rgba(255, 255, 255, 0.12)', + '--on-dark-surface-transparent-tertiary': 'rgba(255, 255, 255, 0.2)', + '--on-dark-surface-transparent-card': '#FFFFFF0F', + '--on-dark-surface-accent': '#1A9E32', + '--on-dark-surface-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--on-dark-surface-positive': '#1A9E32', + '--on-dark-surface-warning': '#FA5F05', + '--on-dark-surface-negative': '#FF293E', + '--on-dark-surface-clear': 'rgba(0, 0, 0, 0)', + '--on-dark-surface-transparent-deep': '#FFFFFFA3', + '--on-light-surface-solid-default': '#080808', + '--on-light-surface-solid-primary': '#F5F5F5', + '--on-light-surface-solid-secondary': '#ECECEC', + '--on-light-surface-solid-tertiary': '#DDDDDD', + '--on-light-surface-solid-card': '#FFFFFFFF', + '--on-light-surface-transparent-primary': 'rgba(8, 8, 8, 0.02)', + '--on-light-surface-transparent-secondary': 'rgba(8, 8, 8, 0.06)', + '--on-light-surface-transparent-tertiary': 'rgba(8, 8, 8, 0.12)', + '--on-light-surface-transparent-card': '#FFFFFFFF', + '--on-light-surface-accent': '#1A9E32', + '--on-light-surface-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--on-light-surface-positive': '#1A9E32', + '--on-light-surface-warning': '#FA5F05', + '--on-light-surface-negative': '#FF293E', + '--on-light-surface-clear': 'rgba(0, 0, 0, 0)', + '--on-light-surface-transparent-deep': '#080808A3', + '--inverse-surface-solid-default': '#FFFFFF', + '--inverse-surface-solid-primary': '#171717', + '--inverse-surface-solid-secondary': '#262626', + '--inverse-surface-solid-tertiary': '#363636', + '--inverse-surface-solid-card': '#171717', + '--inverse-surface-transparent-primary': 'rgba(255, 255, 255, 0.06)', + '--inverse-surface-transparent-secondary': 'rgba(255, 255, 255, 0.12)', + '--inverse-surface-transparent-tertiary': 'rgba(255, 255, 255, 0.2)', + '--inverse-surface-transparent-card': '#FFFFFF0F', + '--inverse-surface-accent': '#1A9E32', + '--inverse-surface-accent-gradient': 'linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%)', + '--inverse-surface-positive': '#1A9E32', + '--inverse-surface-warning': '#FA5F05', + '--inverse-surface-negative': '#FF293E', + '--inverse-surface-clear': 'rgba(0, 0, 0, 0)', + '--inverse-surface-transparent-deep': '#FFFFFFA3', + '--background-primary': '#F9F9F9', + '--dark-background-primary': '#080808', + '--light-background-primary': '#F9F9F9', + '--inverse-background-primary': '#080808', + '--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% )', + '--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-white-primary': 'var(--on-dark-text-primary)', + '--plasma-colors-white-secondary': 'var(--on-dark-text-secondary)', + '--plasma-colors-white-tertiary': 'var(--on-dark-text-tertiary)', + '--plasma-colors-black-primary': 'var(--on-light-text-primary)', + '--plasma-colors-black-secondary': 'var(--on-light-text-secondary)', + '--plasma-colors-black-tertiary': 'var(--on-light-text-tertiary)', + '--plasma-colors-button-black': 'var(--on-light-surface-solid-default)', + '--plasma-colors-button-black-secondary': 'var(--on-light-surface-transparent-secondary)', + '--plasma-colors-button-white': 'var(--on-dark-surface-solid-default)', + '--plasma-colors-button-white-secondary': 'var(--on-dark-surface-transparent-secondary)', + '--plasma-colors-text': 'var(--text-primary)', + '--plasma-colors-primary': 'var(--text-primary)', + '--plasma-colors-secondary': 'var(--text-secondary)', + '--plasma-colors-tertiary': 'var(--text-tertiary)', + '--plasma-colors-paragraph': 'var(--text-paragraph)', + '--plasma-colors-background': 'var(--background-primary)', + '--plasma-colors-accent': 'var(--text-accent)', + '--plasma-colors-success': 'var(--text-positive)', + '--plasma-colors-warning': 'var(--text-warning)', + '--plasma-colors-critical': 'var(--text-negative)', + '--plasma-colors-overlay': 'var(--overlay-soft)', + '--plasma-colors-surface-liquid01': 'var(--surface-transparent-primary)', + '--plasma-colors-surface-liquid02': 'var(--surface-transparent-secondary)', + '--plasma-colors-surface-liquid03': 'var(--surface-transparent-tertiary)', + '--plasma-colors-surface-solid01': 'var(--surface-solid-primary)', + '--plasma-colors-surface-solid02': 'var(--surface-solid-secondary)', + '--plasma-colors-surface-solid03': 'var(--surface-solid-tertiary)', + '--plasma-colors-surface-card': 'var(--surface-transparent-card)', + '--plasma-colors-button-secondary': 'var(--surface-transparent-secondary)', + '--plasma-colors-button-accent': 'var(--text-accent)', + '--plasma-colors-button-success': 'var(--surface-positive)', + '--plasma-colors-button-warning': 'var(--surface-warning)', + '--plasma-colors-button-critical': 'var(--surface-negative)', + color: 'var(--text-primary)', + 'background-color': 'var(--background-primary)', + }, +}; +/** @deprecated использовать вместо этого caldera__light */ +export const lightCaldera = caldera__light; diff --git a/packages/plasma-tokens/src/themes/index.ts b/packages/plasma-tokens/src/themes/index.ts index 8b5d1ad247..20aec315f7 100644 --- a/packages/plasma-tokens/src/themes/index.ts +++ b/packages/plasma-tokens/src/themes/index.ts @@ -1,5 +1,7 @@ // Generated by robots, do not change this manually! +export { caldera__dark, darkCaldera } from './caldera__dark'; +export { caldera__light, lightCaldera } from './caldera__light'; export { plasma_b2c__dark, darkPlasma_b2c } from './plasma_b2c__dark'; export { plasma_b2c__light, lightPlasma_b2c } from './plasma_b2c__light'; export { plasma_web__dark, darkPlasma_web } from './plasma_web__dark';