From 0662a8b8fd5c1aabe461ac511304d80c97dd1b32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Fri, 16 Aug 2024 16:42:06 +0200 Subject: [PATCH 001/129] BREAKING CHANGE(design-tokens): Introduce new design tokens structure #DS-1430 --- packages/design-tokens/.gitignore | 10 +- packages/design-tokens/README.md | 253 +++--- packages/design-tokens/package.json | 2 +- .../design-tokens/src/js/generated/borders.ts | 24 - .../design-tokens/src/js/generated/colors.ts | 301 -------- .../src/js/generated/gradients.ts | 5 - .../src/js/generated/measures.ts | 33 - .../design-tokens/src/js/generated/radii.ts | 15 - .../design-tokens/src/js/generated/shadows.ts | 18 - .../src/js/generated/typography.ts | 374 --------- .../src/js/global-tokens/borders.ts | 4 + .../src/js/global-tokens/gradients.ts | 7 + .../js/{generated => global-tokens}/index.ts | 3 +- .../js/{generated => global-tokens}/other.ts | 55 +- .../src/js/global-tokens/radii.ts | 18 + .../src/js/global-tokens/shadows.ts | 18 + .../src/js/global-tokens/spacing.ts | 40 + .../src/js/global-tokens/typography.ts | 723 ++++++++++++++++++ packages/design-tokens/src/js/index.ts | 3 +- packages/design-tokens/src/js/themes/index.ts | 12 + .../js/themes/theme-light-default/colors.ts | 174 +++++ .../js/themes/theme-light-default/index.ts | 1 + .../js/themes/theme-light-on-brand/colors.ts | 174 +++++ .../js/themes/theme-light-on-brand/index.ts | 1 + packages/design-tokens/src/scss/@themes.scss | 15 + packages/design-tokens/src/scss/@tokens.scss | 3 +- packages/design-tokens/src/scss/README.md | 5 + .../src/scss/generated/_borders.scss | 7 - .../src/scss/generated/_colors.scss | 194 ----- .../src/scss/generated/_gradients.scss | 6 - .../src/scss/generated/_measures.scss | 30 - .../src/scss/generated/_radii.scss | 12 - .../src/scss/generated/_shadows.scss | 13 - .../src/scss/generated/_typography.scss | 348 --------- .../src/scss/global-tokens/_borders.scss | 4 + .../src/scss/global-tokens/_gradients.scss | 10 + .../{generated => global-tokens}/_other.scss | 48 +- .../src/scss/global-tokens/_radii.scss | 18 + .../src/scss/global-tokens/_shadows.scss | 18 + .../src/scss/global-tokens/_spacing.scss | 40 + .../src/scss/global-tokens/_typography.scss | 723 ++++++++++++++++++ .../{generated => global-tokens}/index.scss | 3 +- packages/design-tokens/src/scss/index.scss | 1 - .../src/scss/themes/_color-tokens.scss | 417 ++++++++++ .../design-tokens/src/scss/themes/index.scss | 1 + .../themes/theme-light-default/_colors.scss | 318 ++++++++ .../themes/theme-light-default/index.scss | 1 + .../themes/theme-light-on-brand/_colors.scss | 318 ++++++++ .../themes/theme-light-on-brand/index.scss | 1 + 49 files changed, 3255 insertions(+), 1567 deletions(-) delete mode 100644 packages/design-tokens/src/js/generated/borders.ts delete mode 100644 packages/design-tokens/src/js/generated/colors.ts delete mode 100644 packages/design-tokens/src/js/generated/gradients.ts delete mode 100644 packages/design-tokens/src/js/generated/measures.ts delete mode 100644 packages/design-tokens/src/js/generated/radii.ts delete mode 100644 packages/design-tokens/src/js/generated/shadows.ts delete mode 100644 packages/design-tokens/src/js/generated/typography.ts create mode 100644 packages/design-tokens/src/js/global-tokens/borders.ts create mode 100644 packages/design-tokens/src/js/global-tokens/gradients.ts rename packages/design-tokens/src/js/{generated => global-tokens}/index.ts (75%) rename packages/design-tokens/src/js/{generated => global-tokens}/other.ts (51%) create mode 100644 packages/design-tokens/src/js/global-tokens/radii.ts create mode 100644 packages/design-tokens/src/js/global-tokens/shadows.ts create mode 100644 packages/design-tokens/src/js/global-tokens/spacing.ts create mode 100644 packages/design-tokens/src/js/global-tokens/typography.ts create mode 100644 packages/design-tokens/src/js/themes/index.ts create mode 100644 packages/design-tokens/src/js/themes/theme-light-default/colors.ts create mode 100644 packages/design-tokens/src/js/themes/theme-light-default/index.ts create mode 100644 packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts create mode 100644 packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts create mode 100644 packages/design-tokens/src/scss/@themes.scss create mode 100644 packages/design-tokens/src/scss/README.md delete mode 100644 packages/design-tokens/src/scss/generated/_borders.scss delete mode 100644 packages/design-tokens/src/scss/generated/_colors.scss delete mode 100644 packages/design-tokens/src/scss/generated/_gradients.scss delete mode 100644 packages/design-tokens/src/scss/generated/_measures.scss delete mode 100644 packages/design-tokens/src/scss/generated/_radii.scss delete mode 100644 packages/design-tokens/src/scss/generated/_shadows.scss delete mode 100644 packages/design-tokens/src/scss/generated/_typography.scss create mode 100644 packages/design-tokens/src/scss/global-tokens/_borders.scss create mode 100644 packages/design-tokens/src/scss/global-tokens/_gradients.scss rename packages/design-tokens/src/scss/{generated => global-tokens}/_other.scss (51%) create mode 100644 packages/design-tokens/src/scss/global-tokens/_radii.scss create mode 100644 packages/design-tokens/src/scss/global-tokens/_shadows.scss create mode 100644 packages/design-tokens/src/scss/global-tokens/_spacing.scss create mode 100644 packages/design-tokens/src/scss/global-tokens/_typography.scss rename packages/design-tokens/src/scss/{generated => global-tokens}/index.scss (75%) delete mode 100644 packages/design-tokens/src/scss/index.scss create mode 100644 packages/design-tokens/src/scss/themes/_color-tokens.scss create mode 100644 packages/design-tokens/src/scss/themes/index.scss create mode 100644 packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss create mode 100644 packages/design-tokens/src/scss/themes/theme-light-default/index.scss create mode 100644 packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss create mode 100644 packages/design-tokens/src/scss/themes/theme-light-on-brand/index.scss diff --git a/packages/design-tokens/.gitignore b/packages/design-tokens/.gitignore index 5ef5e94def..671facd69d 100644 --- a/packages/design-tokens/.gitignore +++ b/packages/design-tokens/.gitignore @@ -1,5 +1,5 @@ -esm -scss -cjs -umd -types +/esm +/scss +/cjs +/umd +/types diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index e06fa45335..9c63d2f51e 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -2,142 +2,126 @@ > Design tokens for Spirit Design System. -⚠️ Spirit design tokens are managed with and generated by [Supernova]. DO NOT EDIT MANUALLY! +⚠️ Spirit design tokens are managed with and generated by [Supernova][supernova]. DO NOT EDIT MANUALLY! ## Table of Contents 1. [Available Design Tokens](#available-design-tokens) -2. [Install](#install) -3. [Basic Usage](#basic-usage) -4. [`@tokens` API](#tokens-api) -5. [FAQ](#faq) + 1. [Global Tokens](#global-tokens) + 2. [Theme Tokens](#theme-tokens) +2. [Themes](#themes) +3. [Install](#install) +4. [Basic Usage](#basic-usage) + 1. [In Sass](#in-sass) + 2. [In JavaScript](#in-javascript) +5. [Rebranding Spirit](#rebranding-spirit) +6. [FAQ](#faq) +7. [License](#license) ## Available Design Tokens -| Category | Supernova | Figma | Sass | -| ------------- | --------- | ----- | -------------------- | -| 🖼 Borders | ✅ | ❌ | [`_borders.sass`] | -| 🎨 Colors | ✅ | ✅ | [`_colors.sass`] | -| 🖌️ Gradients | ✅ | ✅ | [`_gradients.sass`] | -| 📏️ Measures | ✅ | ❌ | [`_measures.sass`] | -| ⚙️ Other | ✅ | ❌ | [`_other.sass`] | -| 🎱 Radii | ✅ | ❌ | [`_radii.sass`] | -| ⛱ Shadows | ✅ | ✅ | [`_shadows.sass`] | -| 🔠 Typography | ✅ | ✅ | [`_typography.sass`] | +Technically, design tokens are split into two categories: Global tokens and Theme tokens. +Global tokens are shared independently on themes, while the theme tokens are specific to a particular theme. -## Install +They are all managed in our [Figma][spirit-figma] and exported to our [Supernova workspace][spirit-supernova]. -🙋🏻‍♂️ **Hold on! Do you already use [`spirit-web`]?** Then you don't need to -install this package because `spirit-design-tokens` is installed automatically -as a dependency of [`spirit-web`]. +⚠️ All content in `src` is generated by Supernova and should not be edited manually. -If you want to use just `spirit-design-tokens` alone in your project, run: +The `scss` directory contains `@tokens.scss` linking all available tokens (including both global and theme tokens). -```shell -yarn add @lmc-eu/spirit-design-tokens -``` +### Global Tokens -or +The category consists of these groups: -```shell -npm install --save @lmc-eu/spirit-design-tokens -``` +- 🖼 Borders +- 🖌️ Gradients +- ⚙️ Other +- 🎱 Radii +- 🏖️ Shadows +- 📏️ Spacing +- 🔡 Typography -## Basic Usage +These tokens are shared globally and independently on themes. -The recommended approach in Sass is to import all Spirit design tokens at once -via the [`@tokens` API](#tokens-api): +### Theme Tokens -```scss -@use 'sass:map'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/@tokens' as tokens; - -.MyComponentThatMightGoToSpiritInFuture { - font-family: map.get(tokens.$body-medium-text-regular, font-family); - color: tokens.$text-primary-default; -} -``` +Currently, only tokens in the 🎨 Colors group are themeable. -This makes it easier to [migrate your code to Spirit][migrate-to-spirit] in the -future. +## Themes -
-Optional: import by categories +You can find the list of the themes in the `@themes` file and in the `scss/themes` directory. +Each theme has its own directory with the same set of design tokens, but with different values. -You can also import individual design token files by categories, e.g.: +As of now, we support two light-mode color themes: -```scss -@use 'sass:map'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/colors'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/typography'; +- Light Default (listed first in `@themes`, i.e. the default theme) +- Light on Brand -.MyComponent { - font-family: map.get(typography.$body-medium-text-regular, font-family); - color: colors.$text-primary-default; -} -``` +Both themes can be used anywhere on the same page and combined as needed. -This approach is a bit more descriptive and thus provides slightly better -developer experience. You may find it more convenient in situations you -**don't** suppose your code will make its way to Spirit as this approach is -incompatible with `@tokens` API that makes rebranding possible. +### Using Themes -
+The `scss` directory contains `@themes.scss` linking all available themes as Sass variables. +From the technical point of view, the theming is based on CSS variables. **However, this package +does not provide the CSS variables directly at the moment.** Instead, they are generated from +the `@themes` file in the [`spirit-web`][web-docs] package. -### In JavaScript +## Install -Additionally the design tokens are also provided as a JavaScript object. +🙋🏻‍♂️ **Hold on! Do you already use [`spirit-web`][web-docs]?** Then you don't need to +install this package because `spirit-design-tokens` is installed automatically +as a dependency of `spirit-web`. -```js -import * as SpiritDesignTokens from '@lmc-eu/spirit-design-tokens'; +If you want to use just `spirit-design-tokens` alone in your project, run: -const desktopBreakpoint = SpiritDesignTokens.breakpoints.desktop; +```shell +yarn add @lmc-eu/spirit-design-tokens ``` -The structure is the same as in the SASS. - -## `@tokens` API - -`@tokens` API enables quick and easy rebranding of Spirit Sass styles by -[replacing the path](#b-via-load-path) to design tokens. You need to be familiar -with it if you are building your custom design system based on Spirit or you are -going to contribute to Spirit. - -### Accessing `@tokens` +or -#### a) via full path +```shell +npm install --save @lmc-eu/spirit-design-tokens +``` -Access Spirit design tokens via the `@tokens` API without having to configure -load path, just like shown in the [basic example](#basic-usage). This is a good -choice for starting off quickly. However, it **doesn't enable rebranding**. +## Basic Usage -#### b) via load path +### In Sass -To get ready for rebranding, access Spirit design tokens via the `@tokens` API -while keeping them open to be replaced by another set of design tokens: +Sass (with the SCSS syntax) is the primary language for styling Spirit components. -```scss -@use 'sass:map'; -@use '@tokens' as tokens; +The best way to use the design tokens is to load their path in Sass: -.MyComponentThatIsReadyForSpirit { - font-family: map.get(tokens.$body-medium-text-regular, font-family); - color: tokens.$text-primary-default; -} +```shell +sass --load-path=node_modules/@lmc-eu/spirit-design-tokens/scss my-styles.scss ``` -##### Configuring Load Path +Or integrate them into your build system: -Because the `@tokens` file doesn't exist locally, tell Sass where it should -look for unreachable files. This is also a required step if you are importing -Spirit components from their Sass source. +
+Vite example: -```shell -sass --load-path=node_modules/@lmc-eu/spirit-design-tokens/scss my-styles.scss +```javascript +// vite.config.js + +// … +import { defineConfig } from 'vite'; + +export default defineConfig({ + css: { + preprocessorOptions: { + scss: { + includePaths: [path.resolve(__dirname, 'node_modules/@lmc-eu/spirit-design-tokens/scss')], + }, + }, + }, +}); +// … ``` +
-Or with Webpack and sass-loader: +Webpack example with sass-loader: ```javascript // webpack.config.js @@ -212,26 +196,48 @@ module: {
-### Exposing Your Custom Design Tokens +The [`spirit-web`][web-docs] package or your own components can simply reach token values like this: + +```scss +@use 'sass:map'; +@use '@tokens' as tokens; + +.MyComponentThatMightGoToSpiritInFuture { + margin-bottom: tokens.$space-300; + font-family: map.get(tokens.$body-medium-regular, mobile, font-family); + color: tokens.$text-primary; +} +``` -In Spirit, the [`@tokens.scss`] file simply @forwards all design tokens exposed -by [`index.scss`] which in turn @forwards all design token categories. To make -your design tokens compatible with Spirit, just create a `@tokens.scss` file and -@forward all your design tokens through it, e.g.: +For your components you can also load the token files directly: ```scss -// @tokens.scss - -@forward 'borders'; -@forward 'colors'; -@forward 'gradients'; -@forward 'measures'; -@forward 'other'; -@forward 'radii'; -@forward 'shadows'; -@forward 'typography'; +@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/@tokens' as tokens; +``` + +### In JavaScript + +Additionally, the design tokens are also provided as a JavaScript object. + +```js +import * as SpiritDesignTokens from '@lmc-eu/spirit-design-tokens'; + +const desktopBreakpoint = SpiritDesignTokens.breakpoints.desktop; ``` +The structure is the same as in Sass. + +## Rebranding Spirit + +The system is designed to be easily rebranded. To do so, you need to provide +your own design tokens and use `@tokens` and `@themes` files. Then forward your tokens +to these files and set the [correct load path](#basic-usage) for your project. + +Your tokens should contain the same structure as the Spirit tokens. The simplest +way to do this is to have the same structure in your Figma file and export it +using Supernova. If that's not possible, you can copy our tokens and adjust their values +to your needs. You can also add new tokens required by your design system. + ## FAQ
@@ -309,7 +315,19 @@ Simply put, if you are going to build a design system based on Spirit: 4. use your design tokens in your code (and compile Spirit with them). To make your Sass design tokens compatible with Spirit, don't forget to expose -them via your custom [`@tokens` API](#tokens-api). +them via Sass load path. + +
+ +
+Do I need themes? And if so, how many? + +You need at least one theme to define the default values for your design tokens. +If you want to support multiple themes, you can add more. The number of themes +is up to you and your design system requirements. + +But remember, each theme should contain the same set of tokens, just with different +values. This way, you can switch between themes without changing your components.
@@ -317,17 +335,8 @@ them via your custom [`@tokens` API](#tokens-api). See the [LICENSE](LICENSE.md) file for information. +[spirit-figma]: https://www.figma.com/design/w9Ca4hvkuYLshsrHu1bYwT/ +[spirit-supernova]: https://spirit.design/ [supernova]: https://spirit.supernova-docs.io -[`@tokens.scss`]: src/scss/@tokens.scss -[`index.scss`]: src/scss/index.scss -[`_borders.sass`]: src/scss/generated/_borders.scss -[`_colors.sass`]: src/scss/generated/_colors.scss -[`_gradients.sass`]: src/scss/generated/_gradients.scss -[`_measures.sass`]: src/scss/generated/_measures.scss -[`_other.sass`]: src/scss/generated/_other.scss -[`_radii.sass`]: src/scss/generated/_radii.scss -[`_shadows.sass`]: src/scss/generated/_shadows.scss -[`_typography.sass`]: src/scss/generated/_typography.scss -[`spirit-web`]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web -[migrate-to-spirit]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/CONTRIBUTING.md#migrating-your-components-to-spirit +[web-docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#readme [sass-embedded]: https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#bundlers diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 82caead9e5..5daea2bdb5 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -28,7 +28,7 @@ "build": "npm-run-all --serial build:prepare build:scss build:js", "build:prepare": "yarn clean", "build:js": "vite build", - "build:scss": "shx mkdir -p scss && shx cp -r src/scss/generated/* src/scss/@tokens.scss scss/", + "build:scss": "shx mkdir -p scss && shx cp -r src/scss/* scss/", "clean": "rimraf esm cjs umd scss types", "lint": "npm-run-all --serial lint:scripts lint:styles", "lint:scripts": "eslint ./src/**/*.ts", diff --git a/packages/design-tokens/src/js/generated/borders.ts b/packages/design-tokens/src/js/generated/borders.ts deleted file mode 100644 index 4bc1e06ab3..0000000000 --- a/packages/design-tokens/src/js/generated/borders.ts +++ /dev/null @@ -1,24 +0,0 @@ -export const borderStyle0 = 'none'; -export const borderStyle100 = 'solid'; -export const borderStyle200 = 'dashed'; -export const borderStyle = { - 0: borderStyle0, - 100: borderStyle100, - 200: borderStyle200, -}; - -export const borderWidth0 = 0; -export const borderWidth100 = '1px'; -export const borderWidth200 = '2px'; -export const borderWidth = { - 0: borderWidth0, - 100: borderWidth100, - 200: borderWidth200, -}; - -export const borders = { - borderStyle, - borderWidth, - style: borderStyle, - width: borderWidth, -}; diff --git a/packages/design-tokens/src/js/generated/colors.ts b/packages/design-tokens/src/js/generated/colors.ts deleted file mode 100644 index 2e1990f241..0000000000 --- a/packages/design-tokens/src/js/generated/colors.ts +++ /dev/null @@ -1,301 +0,0 @@ -export const actionInvertedActive = '#d4d4d4'; -export const actionInvertedDefault = '#e9e9e9'; -export const actionInvertedDisabled = '#c4c4c4'; -export const actionInvertedHover = '#dbdbdb'; -export const actionInverted = { - active: actionInvertedActive, - default: actionInvertedDefault, - disabled: actionInvertedDisabled, - hover: actionInvertedHover, -}; - -export const actionLinkInvertedActive = '#d4d4d4'; -export const actionLinkInvertedDefault = '#e9e9e9'; -export const actionLinkInvertedDisabled = '#c4c4c4'; -export const actionLinkInvertedHover = '#dbdbdb'; -export const actionLinkInvertedVisited = '#a7bcc2'; -export const actionLinkInverted = { - active: actionLinkInvertedActive, - default: actionLinkInvertedDefault, - disabled: actionLinkInvertedDisabled, - hover: actionLinkInvertedHover, - visited: actionLinkInvertedVisited, -}; - -export const actionLinkPrimaryActive = '#0b3a46'; -export const actionLinkPrimaryDefault = '#29616f'; -export const actionLinkPrimaryDisabled = '#979797'; -export const actionLinkPrimaryHover = '#1b5260'; -export const actionLinkPrimaryVisited = '#835ea1'; -export const actionLinkPrimary = { - active: actionLinkPrimaryActive, - default: actionLinkPrimaryDefault, - disabled: actionLinkPrimaryDisabled, - hover: actionLinkPrimaryHover, - visited: actionLinkPrimaryVisited, -}; - -export const actionLinkSecondaryActive = '#454b4e'; -export const actionLinkSecondaryDefault = '#758185'; -export const actionLinkSecondaryDisabled = '#979797'; -export const actionLinkSecondaryHover = '#5b6568'; -export const actionLinkSecondaryVisited = '#835ea1'; -export const actionLinkSecondary = { - active: actionLinkSecondaryActive, - default: actionLinkSecondaryDefault, - disabled: actionLinkSecondaryDisabled, - hover: actionLinkSecondaryHover, - visited: actionLinkSecondaryVisited, -}; - -export const actionLink = { - primary: actionLinkPrimary, - secondary: actionLinkSecondary, - inverted: actionLinkInverted, -}; - -export const actionPrimaryActive = '#0b3a46'; -export const actionPrimaryDefault = '#29616f'; -export const actionPrimaryDisabled = '#f5f5f5'; -export const actionPrimaryHover = '#1b5260'; -export const actionPrimary = { - active: actionPrimaryActive, - default: actionPrimaryDefault, - disabled: actionPrimaryDisabled, - hover: actionPrimaryHover, -}; - -export const actionSecondaryActive = '#c4c4c4'; -export const actionSecondaryDefault = '#a0a0a0'; -export const actionSecondaryDisabled = '#f5f5f5'; -export const actionSecondaryHover = '#737373'; -export const actionSecondary = { - active: actionSecondaryActive, - default: actionSecondaryDefault, - disabled: actionSecondaryDisabled, - hover: actionSecondaryHover, -}; - -export const actionSelectedActive = '#0b3a46'; -export const actionSelectedDefault = '#29616f'; -export const actionSelectedDisabled = '#a6a6a6'; -export const actionSelectedHover = '#1b5260'; -export const actionSelected = { - active: actionSelectedActive, - default: actionSelectedDefault, - disabled: actionSelectedDisabled, - hover: actionSelectedHover, -}; - -export const actionTertiaryActive = '#d4d4d4'; -export const actionTertiaryDefault = '#e9e9e9'; -export const actionTertiaryDisabled = '#f5f5f5'; -export const actionTertiaryHover = '#dbdbdb'; -export const actionTertiary = { - active: actionTertiaryActive, - default: actionTertiaryDefault, - disabled: actionTertiaryDisabled, - hover: actionTertiaryHover, -}; - -export const actionUnselectedActive = '#091417'; -export const actionUnselectedDefault = '#132930'; -export const actionUnselectedDisabled = '#a6a6a6'; -export const actionUnselectedHover = '#0b1c21'; -export const actionUnselected = { - active: actionUnselectedActive, - default: actionUnselectedDefault, - disabled: actionUnselectedDisabled, - hover: actionUnselectedHover, -}; - -export const action = { - inverted: actionInverted, - link: { - inverted: actionLinkInverted, - primary: actionLinkPrimary, - secondary: actionLinkSecondary, - }, - primary: actionPrimary, - secondary: actionSecondary, - selected: actionSelected, - tertiary: actionTertiary, - unselected: actionUnselected, -}; - -export const backgroundColorBackdrop = '#0b1c2199'; -export const backgroundColorBasic = '#fff'; -export const backgroundColorCover = '#f0f0f0'; -export const backgroundColor = { - backdrop: backgroundColorBackdrop, - basic: backgroundColorBasic, - cover: backgroundColorCover, -}; - -export const backgroundInteractiveActive = '#a4a4a44d'; -export const backgroundInteractiveDefault = '#fff0'; -export const backgroundInteractiveHover = '#b0b0b033'; -export const backgroundInteractive = { - active: backgroundInteractiveActive, - default: backgroundInteractiveDefault, - hover: backgroundInteractiveHover, -}; - -export const backgroundInteractiveInvertedActive = '#9f9f9fcc'; -export const backgroundInteractiveInvertedDefault = '#fff0'; -export const backgroundInteractiveInvertedHover = '#bbb6'; -export const backgroundInteractiveInverted = { - active: backgroundInteractiveInvertedActive, - default: backgroundInteractiveInvertedDefault, - hover: backgroundInteractiveInvertedHover, -}; - -export const backgroundInverted = '#132930'; - -export const background = { - ...backgroundColor, - interactive: { - ...backgroundInteractive, - inverted: backgroundInteractiveInverted, - }, - inverted: backgroundInverted, -}; - -export const borderPrimaryActive = '#b1b1b1'; -export const borderPrimaryDefault = '#d8d8d8'; -export const borderPrimaryDisabled = '#dfdfe0'; -export const borderPrimaryHover = '#c5c5c5'; -export const borderPrimarySelected = '#29616f'; -export const borderPrimary = { - active: borderPrimaryActive, - default: borderPrimaryDefault, - disabled: borderPrimaryDisabled, - hover: borderPrimaryHover, - selected: borderPrimarySelected, -}; - -export const borderSecondaryDefault = '#e9e9e9'; - -export const border = { - primary: borderPrimary, - secondary: { - default: borderSecondaryDefault, - }, -}; - -export const brandPrimary = '#0b1c21'; -export const brandSecondary = '#30588c'; -export const brand = { - primary: brandPrimary, - secondary: brandSecondary, -}; - -export const emotionDangerActive = '#6f2535'; -export const emotionDangerBackground = '#fbeef1'; -export const emotionDangerDefault = '#ba3e5a'; -export const emotionDangerDisabled = '#f5f5f5'; -export const emotionDangerHover = '#953248'; -export const emotionDanger = { - active: emotionDangerActive, - background: emotionDangerBackground, - default: emotionDangerDefault, - disabled: emotionDangerDisabled, - hover: emotionDangerHover, -}; - -export const emotionInformativeActive = '#26456e'; -export const emotionInformativeBackground = '#e8eff7'; -export const emotionInformativeDefault = '#3b6bab'; -export const emotionInformativeDisabled = '#f5f5f5'; -export const emotionInformativeHover = '#30588c'; -export const emotionInformative = { - active: emotionInformativeActive, - background: emotionInformativeBackground, - default: emotionInformativeDefault, - disabled: emotionInformativeDisabled, - hover: emotionInformativeHover, -}; - -export const emotionSuccessActive = '#33420a'; -export const emotionSuccessBackground = '#f6fbe9'; -export const emotionSuccessDefault = '#607c13'; -export const emotionSuccessDisabled = '#f5f5f5'; -export const emotionSuccessHover = '#485d0e'; -export const emotionSuccess = { - active: emotionSuccessActive, - background: emotionSuccessBackground, - default: emotionSuccessDefault, - disabled: emotionSuccessDisabled, - hover: emotionSuccessHover, -}; - -export const emotionWarningActive = '#423400'; -export const emotionWarningBackground = '#f8f2e4'; -export const emotionWarningDefault = '#a98300'; -export const emotionWarningDisabled = '#f5f5f5'; -export const emotionWarningHover = '#755b00'; -export const emotionWarning = { - active: emotionWarningActive, - background: emotionWarningBackground, - default: emotionWarningDefault, - disabled: emotionWarningDisabled, - hover: emotionWarningHover, -}; - -export const emotion = { - danger: emotionDanger, - informative: emotionInformative, - success: emotionSuccess, - warning: emotionWarning, -}; - -export const focusDefault = '#4666ae'; - -export const textPrimaryDefault = '#132930'; -export const textPrimaryDisabled = '#a6a6a6'; -export const textPrimary = { - default: textPrimaryDefault, - disabled: textPrimaryDisabled, -}; - -export const textPrimaryInvertedDefault = '#fff'; -export const textPrimaryInvertedDisabled = '#a6a6a6'; -export const textPrimaryInverted = { - default: textPrimaryInvertedDefault, - disabled: textPrimaryInvertedDisabled, -}; - -export const textSecondaryDefault = '#5c747b'; -export const textSecondaryDisabled = '#a6a6a6'; -export const textSecondary = { - default: textSecondaryDefault, - disabled: textSecondaryDisabled, -}; - -export const textSecondaryInvertedDefault = '#e9e9e9'; -export const textSecondaryInvertedDisabled = '#737373'; -export const textSecondaryInverted = { - default: textSecondaryInvertedDefault, - disabled: textSecondaryInvertedDisabled, -}; - -export const text = { - primary: textPrimary, - secondary: textSecondary, - inverted: { - primary: textPrimaryInverted, - secondary: textSecondaryInverted, - }, -}; - -export const colors = { - action, - background, - border, - brand, - emotion, - focus: { - default: focusDefault, - }, - text, -}; diff --git a/packages/design-tokens/src/js/generated/gradients.ts b/packages/design-tokens/src/js/generated/gradients.ts deleted file mode 100644 index 74479be532..0000000000 --- a/packages/design-tokens/src/js/generated/gradients.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const gradientBackgroundBasicOverlay = 'linear-gradient(var(--gradient-angle, 90deg), #fff 0%, #fff0 100%)'; - -export const gradients = { - backgroundBasicOverlay: gradientBackgroundBasicOverlay, -}; diff --git a/packages/design-tokens/src/js/generated/measures.ts b/packages/design-tokens/src/js/generated/measures.ts deleted file mode 100644 index e4d9e2d431..0000000000 --- a/packages/design-tokens/src/js/generated/measures.ts +++ /dev/null @@ -1,33 +0,0 @@ -export const space0 = 0; -export const space100 = '1px'; -export const space200 = '2px'; -export const space300 = '4px'; -export const space400 = '8px'; -export const space500 = '12px'; -export const space600 = '16px'; -export const space700 = '24px'; -export const space800 = '32px'; -export const space900 = '40px'; -export const space1000 = '48px'; -export const space1100 = '64px'; -export const space1200 = '80px'; - -export const space = { - 0: space0, - 100: space100, - 200: space200, - 300: space300, - 400: space400, - 500: space500, - 600: space600, - 700: space700, - 800: space800, - 900: space900, - 1000: space1000, - 1100: space1100, - 1200: space1200, -}; - -export const spaces = { - space, -}; diff --git a/packages/design-tokens/src/js/generated/radii.ts b/packages/design-tokens/src/js/generated/radii.ts deleted file mode 100644 index fe313f0c7b..0000000000 --- a/packages/design-tokens/src/js/generated/radii.ts +++ /dev/null @@ -1,15 +0,0 @@ -export const radius0 = 0; -export const radius100 = '4px'; -export const radius200 = '8px'; -export const radius300 = '12px'; - -export const radius = { - 0: radius0, - 100: radius100, - 200: radius200, - 300: radius300, -}; - -export const radii = { - radius, -}; diff --git a/packages/design-tokens/src/js/generated/shadows.ts b/packages/design-tokens/src/js/generated/shadows.ts deleted file mode 100644 index f9ea3fab2a..0000000000 --- a/packages/design-tokens/src/js/generated/shadows.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const focus = '0 0 0 2px #d2c2ff99'; - -export const shadow100 = '0 2px 8px 0 #00000026'; -export const shadow200 = '0 4px 12px 0 #0003'; -export const shadow300 = '0 8px 24px 0 #00000040'; -export const shadow400 = '0 12px 32px 0 #00000040'; - -export const shadow = { - 100: shadow100, - 200: shadow200, - 300: shadow300, - 400: shadow400, -}; - -export const shadows = { - focus, - shadow, -}; diff --git a/packages/design-tokens/src/js/generated/typography.ts b/packages/design-tokens/src/js/generated/typography.ts deleted file mode 100644 index bc3c366177..0000000000 --- a/packages/design-tokens/src/js/generated/typography.ts +++ /dev/null @@ -1,374 +0,0 @@ -export const bodyLargeTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.55, - }, -}; - -export const bodyLargeTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.55, - }, -}; - -export const bodyLargeTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.55, - }, -}; - -export const bodyLargeTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.55, - }, -}; - -export const bodyLarge = { - bold: bodyLargeTextBold, - italic: bodyLargeTextItalic, - regular: bodyLargeTextRegular, - semibold: bodyLargeTextSemibold, -}; - -export const bodyMediumTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.5, - }, -}; - -export const bodyMediumTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.5, - }, -}; - -export const bodyMediumTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.5, - }, -}; - -export const bodyMediumTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.5, - }, -}; - -export const bodyMedium = { - bold: bodyMediumTextBold, - italic: bodyMediumTextItalic, - regular: bodyMediumTextRegular, - semibold: bodyMediumTextSemibold, -}; - -export const bodySmallTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.42, - }, -}; - -export const bodySmallTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.42, - }, -}; - -export const bodySmallTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.42, - }, -}; - -export const bodySmallTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.875rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.42, - }, -}; - -export const bodySmall = { - bold: bodySmallTextBold, - italic: bodySmallTextItalic, - regular: bodySmallTextRegular, - semibold: bodySmallTextSemibold, -}; - -export const bodyXLargeTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.6, - }, -}; - -export const bodyXLargeTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.6, - }, -}; - -export const bodyXLargeTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.6, - }, -}; - -export const bodyXLargeTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.6, - }, -}; - -export const bodyXLarge = { - bold: bodyXLargeTextBold, - italic: bodyXLargeTextItalic, - regular: bodyXLargeTextRegular, - semibold: bodyXLargeTextSemibold, -}; - -export const bodyXSmallTextBold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'normal', - fontWeight: 600, - lineHeight: 1.32, - }, -}; - -export const bodyXSmallTextItalic = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'italic', - fontWeight: 400, - lineHeight: 1.32, - }, -}; - -export const bodyXSmallTextRegular = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: 1.32, - }, -}; - -export const bodyXSmallTextSemibold = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '0.75rem', - fontStyle: 'normal', - fontWeight: 500, - lineHeight: 1.32, - }, -}; - -export const bodyXSmall = { - bold: bodyXSmallTextBold, - italic: bodyXSmallTextItalic, - regular: bodyXSmallTextRegular, - semibold: bodyXSmallTextSemibold, -}; - -export const body = { - large: bodyLarge, - medium: bodyMedium, - small: bodySmall, - xlarge: bodyXLarge, - xsmall: bodyXSmall, -}; - -export const headingLargeText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '2rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '3rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '3rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingMediumText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '2rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '2rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingSmallText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.125rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.5rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.5rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingXLargeText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '3rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '4rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '4rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; - -export const headingXSmallText = { - mobile: { - fontFamily: "'Inter', sans-serif", - fontSize: '1rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - tablet: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, - desktop: { - fontFamily: "'Inter', sans-serif", - fontSize: '1.25rem', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: 1.2, - }, -}; -export const heading = { - large: headingLargeText, - medium: headingMediumText, - small: headingSmallText, - xlarge: headingXLargeText, - xsmall: headingXSmallText, -}; - -export const styles = { - body, - heading, -}; diff --git a/packages/design-tokens/src/js/global-tokens/borders.ts b/packages/design-tokens/src/js/global-tokens/borders.ts new file mode 100644 index 0000000000..081a896e7e --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/borders.ts @@ -0,0 +1,4 @@ +/* This file was generated by Supernova, don't change manually */ +export const borderWidth0 = 0; +export const borderWidth100 = '1px'; +export const borderWidth200 = '2px'; diff --git a/packages/design-tokens/src/js/global-tokens/gradients.ts b/packages/design-tokens/src/js/global-tokens/gradients.ts new file mode 100644 index 0000000000..938884ef91 --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/gradients.ts @@ -0,0 +1,7 @@ +/* This file was generated by Supernova, don't change manually */ +export const gradientBasicOverlay = + 'linear-gradient(var(--gradient-angle, 90deg), var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100%)'; + +export const gradients = { + basicOverlay: gradientBasicOverlay, +}; diff --git a/packages/design-tokens/src/js/generated/index.ts b/packages/design-tokens/src/js/global-tokens/index.ts similarity index 75% rename from packages/design-tokens/src/js/generated/index.ts rename to packages/design-tokens/src/js/global-tokens/index.ts index c3bd7c48cc..a147e4dfd0 100644 --- a/packages/design-tokens/src/js/generated/index.ts +++ b/packages/design-tokens/src/js/global-tokens/index.ts @@ -1,8 +1,7 @@ export * from './borders'; -export * from './colors'; export * from './gradients'; -export * from './measures'; export * from './other'; export * from './radii'; export * from './shadows'; +export * from './spacing'; export * from './typography'; diff --git a/packages/design-tokens/src/js/generated/other.ts b/packages/design-tokens/src/js/global-tokens/other.ts similarity index 51% rename from packages/design-tokens/src/js/generated/other.ts rename to packages/design-tokens/src/js/global-tokens/other.ts index b9bb992016..7e61c83b6b 100644 --- a/packages/design-tokens/src/js/generated/other.ts +++ b/packages/design-tokens/src/js/global-tokens/other.ts @@ -1,47 +1,42 @@ -export const containerMaxWidth = '1280px'; +/* This file was generated by Supernova, don't change manually */ +export const containerPaddingMobile = '16px'; +export const containerPaddingTablet = '32px'; +export const containerPaddingDesktop = '32px'; -export const gridColumns = 12; +export const containerMaxWidth = '1280px'; export const breakpointMobile = 0; -export const containerPaddingMobile = '16px'; -export const gridGutterMobile = '16px'; - export const breakpointTablet = '768px'; -export const containerPaddingTablet = '32px'; -export const gridGutterTablet = '32px'; - export const breakpointDesktop = '1280px'; -export const containerPaddingDesktop = '32px'; -export const gridGutterDesktop = '32px'; + +export const gridSpacingMobile = '16px'; +export const gridSpacingDesktop = '32px'; +export const gridSpacingTablet = '32px'; + +export const gridColumns = '12'; + +export const cssVariablePrefix = 'spirit-'; export const containers = { + padding: { + mobile: containerPaddingMobile, + tablet: containerPaddingTablet, + desktop: containerPaddingDesktop, + }, maxWidth: containerMaxWidth, }; -export const grids = { - columns: gridColumns, -}; - export const breakpoints = { mobile: breakpointMobile, tablet: breakpointTablet, desktop: breakpointDesktop, }; -export const containerPaddings = { - mobile: containerPaddingMobile, - tablet: containerPaddingTablet, - desktop: containerPaddingDesktop, -}; - -export const gridGutters = { - mobile: gridGutterMobile, - tablet: gridGutterTablet, - desktop: gridGutterDesktop, -}; - -export const others = { - breakpoints, - containerPaddings, - gridGutters, +export const grids = { + spacing: { + mobile: gridSpacingMobile, + desktop: gridSpacingDesktop, + tablet: gridSpacingTablet, + }, + columns: gridColumns, }; diff --git a/packages/design-tokens/src/js/global-tokens/radii.ts b/packages/design-tokens/src/js/global-tokens/radii.ts new file mode 100644 index 0000000000..530dd226a1 --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/radii.ts @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +export const radius0 = 0; +export const radius100 = '2px'; +export const radius200 = '4px'; +export const radius300 = '8px'; +export const radius400 = '12px'; +export const radius500 = '16px'; +export const radiusFull = '9999px'; + +export const radii = { + 0: radius0, + 100: radius100, + 200: radius200, + 300: radius300, + 400: radius400, + 500: radius500, + full: radiusFull, +}; diff --git a/packages/design-tokens/src/js/global-tokens/shadows.ts b/packages/design-tokens/src/js/global-tokens/shadows.ts new file mode 100644 index 0000000000..1e61e6976c --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/shadows.ts @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +export const focusRing = '0 0 0 2px var(--spirit-color-focus-focus-ring-color-01, #d2c2ffb2)'; + +export const shadow100 = '0 2px 8px 0 var(--spirit-color-shadow-shadow-100-color-01, #00000026)'; +export const shadow200 = '0 4px 12px 0 var(--spirit-color-shadow-shadow-200-color-01, #0003)'; +export const shadow300 = '0 8px 24px 0 var(--spirit-color-shadow-shadow-300-color-01, #00000040)'; +export const shadow400 = '0 12px 32px 0 var(--spirit-color-shadow-shadow-400-color-01, #00000040)'; + +export const focus = { + focusRing, +}; + +export const shadows = { + 100: shadow100, + 200: shadow200, + 300: shadow300, + 400: shadow400, +}; diff --git a/packages/design-tokens/src/js/global-tokens/spacing.ts b/packages/design-tokens/src/js/global-tokens/spacing.ts new file mode 100644 index 0000000000..4e2d7c792a --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/spacing.ts @@ -0,0 +1,40 @@ +/* This file was generated by Supernova, don't change manually */ +export const space0 = 0; +export const space100 = '1px'; +export const space200 = '2px'; +export const space300 = '4px'; +export const space400 = '6px'; +export const space500 = '8px'; +export const space600 = '12px'; +export const space700 = '16px'; +export const space800 = '20px'; +export const space900 = '24px'; +export const space1000 = '32px'; +export const space1100 = '40px'; +export const space1200 = '48px'; +export const space1300 = '56px'; +export const space1400 = '64px'; +export const space1500 = '72px'; +export const space1600 = '80px'; +export const space1700 = '96px'; + +export const spaces = { + 0: space0, + 100: space100, + 200: space200, + 300: space300, + 400: space400, + 500: space500, + 600: space600, + 700: space700, + 800: space800, + 900: space900, + 1000: space1000, + 1100: space1100, + 1200: space1200, + 1300: space1300, + 1400: space1400, + 1500: space1500, + 1600: space1600, + 1700: space1700, +}; diff --git a/packages/design-tokens/src/js/global-tokens/typography.ts b/packages/design-tokens/src/js/global-tokens/typography.ts new file mode 100644 index 0000000000..51cdbf566f --- /dev/null +++ b/packages/design-tokens/src/js/global-tokens/typography.ts @@ -0,0 +1,723 @@ +/* This file was generated by Supernova, don't change manually */ +export const headingXlargeRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingXlargeSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, +}; + +export const headingXlargeBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, +}; + +export const headingXlargeItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '48px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '36px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingLargeRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingLargeSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.2, + }, +}; + +export const headingLargeBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.2, + }, +}; + +export const headingLargeItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '40px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.2, + }, +}; + +export const headingMediumRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingMediumSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, +}; + +export const headingMediumBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, +}; + +export const headingMediumItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.3, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '32px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.3, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingSmallRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingSmallSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, +}; + +export const headingSmallBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, +}; + +export const headingSmallItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '24px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingXsmallRegular = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const headingXsmallSemibold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.4, + }, +}; + +export const headingXsmallBold = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.4, + }, +}; + +export const headingXsmallItalic = { + desktop: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + tablet: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.4, + }, +}; + +export const bodyXlargeRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyLargeRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyLargeSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyLargeBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyLargeItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyMediumRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyMediumSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyMediumBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyMediumItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodySmallRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodySmallSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodySmallBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodySmallItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallRegular = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallSemibold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallBold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const styles = { + headingXlargeRegular, + headingXlargeSemibold, + headingXlargeBold, + headingXlargeItalic, + headingLargeRegular, + headingLargeSemibold, + headingLargeBold, + headingLargeItalic, + headingMediumRegular, + headingMediumSemibold, + headingMediumBold, + headingMediumItalic, + headingSmallRegular, + headingSmallSemibold, + headingSmallBold, + headingSmallItalic, + headingXsmallRegular, + headingXsmallSemibold, + headingXsmallBold, + headingXsmallItalic, + bodyXlargeRegular, + bodyXlargeSemibold, + bodyXlargeBold, + bodyXlargeItalic, + bodyLargeRegular, + bodyLargeSemibold, + bodyLargeBold, + bodyLargeItalic, + bodyMediumRegular, + bodyMediumSemibold, + bodyMediumBold, + bodyMediumItalic, + bodySmallRegular, + bodySmallSemibold, + bodySmallBold, + bodySmallItalic, + bodyXsmallRegular, + bodyXsmallSemibold, + bodyXsmallBold, + bodyXsmallItalic, +}; diff --git a/packages/design-tokens/src/js/index.ts b/packages/design-tokens/src/js/index.ts index 69e4e4eb8b..03b1cf9db3 100644 --- a/packages/design-tokens/src/js/index.ts +++ b/packages/design-tokens/src/js/index.ts @@ -1 +1,2 @@ -export * from './generated'; +export * from './global-tokens'; +export * from './themes'; diff --git a/packages/design-tokens/src/js/themes/index.ts b/packages/design-tokens/src/js/themes/index.ts new file mode 100644 index 0000000000..d524a98c68 --- /dev/null +++ b/packages/design-tokens/src/js/themes/index.ts @@ -0,0 +1,12 @@ +import * as themeLightDefault from './theme-light-default'; +import * as themeLightOnBrand from './theme-light-on-brand'; + +// The first theme is the default theme, as the left column in the Figma table. +export const themes = { + themeLightDefault: { + tokens: themeLightDefault, + }, + themeLightOnBrand: { + tokens: themeLightOnBrand, + }, +}; diff --git a/packages/design-tokens/src/js/themes/theme-light-default/colors.ts b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts new file mode 100644 index 0000000000..3241c0db6a --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts @@ -0,0 +1,174 @@ +/* This file was generated by Supernova, don't change manually */ +export const backgroundBackdrop = '#1a1b1b80'; + +export const backgroundInteractiveStateActive = '#f1edff'; +export const backgroundInteractiveStateDefault = '#fff0'; +export const backgroundInteractiveStateHover = '#f8f6ff'; + +export const backgroundPrimary = '#fff'; +export const backgroundSecondary = '#f2f2f2'; +export const backgroundTertiary = '#f1edff'; + +export const borderBasic = '#d9d9d9'; +export const borderFocus = '#7847ff'; + +export const borderInteractiveStateActive = '#a5a5a5'; +export const borderInteractiveStateDefault = '#bfbfbf'; +export const borderInteractiveStateHover = '#b2b2b2'; +export const borderInteractiveStateSelected = '#7847ff'; + +export const componentButtonPlainBorder = '#fff0'; +export const componentButtonPlainContent = '#6039cc'; +export const componentButtonPlainStateActive = '#e4daff'; +export const componentButtonPlainStateDefault = '#fff0'; +export const componentButtonPlainStateHover = '#f1edff'; + +export const componentButtonPrimaryBorder = '#4e2ea6'; +export const componentButtonPrimaryContent = '#fff'; +export const componentButtonPrimaryStateActive = '#6039cc'; +export const componentButtonPrimaryStateDefault = '#7847ff'; +export const componentButtonPrimaryStateHover = '#6c40e5'; + +export const componentButtonSecondaryBorder = '#7847ff'; +export const componentButtonSecondaryContent = '#6039cc'; +export const componentButtonSecondaryStateActive = '#e4daff'; +export const componentButtonSecondaryStateDefault = '#fff'; +export const componentButtonSecondaryStateHover = '#f1edff'; + +export const componentButtonTertiaryBorder = '#e5e5e5'; +export const componentButtonTertiaryContent = '#202020'; +export const componentButtonTertiaryStateActive = '#d9d9d9'; +export const componentButtonTertiaryStateDefault = '#f2f2f2'; +export const componentButtonTertiaryStateHover = '#e5e5e5'; + +export const componentHeaderBackground = '#fff'; +export const componentHeaderItemBackgroundStateActive = '#f1edff'; +export const componentHeaderItemBackgroundStateDefault = '#fff0'; +export const componentHeaderItemBackgroundStateHover = '#f8f6ff'; +export const componentHeaderItemBackgroundStateSelected = '#fff0'; +export const componentHeaderItemStateActive = '#4e2ea6'; +export const componentHeaderItemStateDefault = '#404040'; +export const componentHeaderItemStateHover = '#6039cc'; +export const componentHeaderItemStateSelected = '#6039cc'; +export const componentHeaderStripeStateSelected = '#ffbe00'; +export const componentHeaderStripeStateUnselected = '#e4daff'; + +export const componentToggleSelectedBorder = '#327c3f'; +export const componentToggleSelectedContent = '#fff'; +export const componentToggleSelectedStateActive = '#3e9b4f'; +export const componentToggleSelectedStateDefault = '#327c3f'; +export const componentToggleSelectedStateHover = '#388b47'; +export const componentToggleUnselectedBorder = '#a5a5a5'; +export const componentToggleUnselectedContent = '#404040'; +export const componentToggleUnselectedStateActive = '#f2f2f2'; +export const componentToggleUnselectedStateDefault = '#fff'; +export const componentToggleUnselectedStateHover = '#f9f9f9'; + +export const disabledBackground = '#f9f9f9'; +export const disabledBorder = '#e5e5e5'; +export const disabledContent = '#a5a5a5'; +export const disabledForeground = '#d9d9d9'; + +export const emotionDangerBackgroundBasic = '#b60000'; +export const emotionDangerBackgroundSubtle = '#fef2f2'; +export const emotionDangerBorderBasic = '#b60000'; +export const emotionDangerBorderSubtle = '#f18080'; +export const emotionDangerContentBasic = '#940000'; +export const emotionDangerContentSubtle = '#fff'; +export const emotionDangerStateActive = '#e40000'; +export const emotionDangerStateDefault = '#b60000'; +export const emotionDangerStateHover = '#cd0000'; + +export const emotionInformativeBackgroundBasic = '#0052ad'; +export const emotionInformativeBackgroundSubtle = '#f2f7fd'; +export const emotionInformativeBorderBasic = '#0052ad'; +export const emotionInformativeBorderSubtle = '#80b2eb'; +export const emotionInformativeContentBasic = '#00428c'; +export const emotionInformativeContentSubtle = '#fff'; +export const emotionInformativeStateActive = '#0066d8'; +export const emotionInformativeStateDefault = '#0052ad'; +export const emotionInformativeStateHover = '#005cc2'; + +export const emotionSuccessBackgroundBasic = '#327c3f'; +export const emotionSuccessBackgroundSubtle = '#f5faf6'; +export const emotionSuccessBorderBasic = '#327c3f'; +export const emotionSuccessBorderSubtle = '#9ecda7'; +export const emotionSuccessContentBasic = '#286533'; +export const emotionSuccessContentSubtle = '#fff'; +export const emotionSuccessStateActive = '#3e9b4f'; +export const emotionSuccessStateDefault = '#327c3f'; +export const emotionSuccessStateHover = '#388b47'; + +export const emotionWarningBackgroundBasic = '#c26400'; +export const emotionWarningBackgroundSubtle = '#fef8f2'; +export const emotionWarningBorderBasic = '#c26400'; +export const emotionWarningBorderSubtle = '#f9be80'; +export const emotionWarningContentBasic = '#9d5100'; +export const emotionWarningContentSubtle = '#fff'; +export const emotionWarningStateActive = '#f27d00'; +export const emotionWarningStateDefault = '#c26400'; +export const emotionWarningStateHover = '#da7100'; + +export const focusFocusRingColor01 = '#d2c2ffb2'; + +export const formFieldDanger = '#b60000'; + +export const formFieldFilledBackgroundStateActive = '#fff'; +export const formFieldFilledBackgroundStateDefault = '#fff'; +export const formFieldFilledBackgroundStateHover = '#f9f9f9'; +export const formFieldFilledBorderStateActive = '#7f7f7f'; +export const formFieldFilledBorderStateDefault = '#a5a5a5'; +export const formFieldFilledBorderStateHover = '#999'; +export const formFieldFilledBorderStateSelected = '#7847ff'; +export const formFieldFilledContent = '#202020'; +export const formFieldFilledPlaceholder = '#666'; + +export const formFieldHelperText = '#7f7f7f'; +export const formFieldLabel = '#202020'; +export const formFieldSuccess = '#327c3f'; +export const formFieldWarning = '#c26400'; + +export const gradientBasicOverlayColor01 = '#fff'; +export const gradientBasicOverlayColor02 = '#fff0'; + +export const linkPrimaryStateActive = '#3c2480'; +export const linkPrimaryStateDefault = '#6039cc'; +export const linkPrimaryStateHover = '#4e2ea6'; + +export const linkSecondaryStateActive = '#3c2480'; +export const linkSecondaryStateDefault = '#535353'; +export const linkSecondaryStateHover = '#4e2ea6'; + +export const linkStateVisited = '#3c2480'; + +export const linkTertiaryStateActive = '#3c2480'; +export const linkTertiaryStateDefault = '#7f7f7f'; +export const linkTertiaryStateHover = '#4e2ea6'; + +export const neutralBackgroundBasic = '#202020'; +export const neutralBackgroundSubtle = '#f2f2f2'; +export const neutralBorderBasic = '#202020'; +export const neutralBorderSubtle = '#bfbfbf'; +export const neutralContentBasic = '#202020'; +export const neutralContentSubtle = '#fff'; +export const neutralStateActive = '#535353'; +export const neutralStateDefault = '#202020'; +export const neutralStateHover = '#404040'; + +export const selectedContentBasic = '#4e2ea6'; +export const selectedContentSubtle = '#fff'; +export const selectedStateActive = '#6039cc'; +export const selectedStateDefault = '#7847ff'; +export const selectedStateHover = '#6c40e5'; + +export const shadowShadow100Color01 = '#00000026'; + +export const shadowShadow200Color01 = '#0003'; + +export const shadowShadow300Color01 = '#00000040'; + +export const shadowShadow400Color01 = '#00000040'; + +export const textPrimary = '#202020'; +export const textSecondary = '#535353'; +export const textTertiary = '#7f7f7f'; diff --git a/packages/design-tokens/src/js/themes/theme-light-default/index.ts b/packages/design-tokens/src/js/themes/theme-light-default/index.ts new file mode 100644 index 0000000000..1bae1c0e49 --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-default/index.ts @@ -0,0 +1 @@ +export * from './colors'; diff --git a/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts new file mode 100644 index 0000000000..4aa065a9f7 --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts @@ -0,0 +1,174 @@ +/* This file was generated by Supernova, don't change manually */ +export const backgroundBackdrop = '#1a1b1b80'; + +export const backgroundInteractiveStateActive = '#ffffff1a'; +export const backgroundInteractiveStateDefault = '#fff0'; +export const backgroundInteractiveStateHover = '#ffffff0d'; + +export const backgroundPrimary = '#6039cc'; +export const backgroundSecondary = '#3c2480'; +export const backgroundTertiary = '#1e1240'; + +export const borderBasic = '#a07eff'; +export const borderFocus = '#1e1240'; + +export const borderInteractiveStateActive = '#bba3ff'; +export const borderInteractiveStateDefault = '#a07eff'; +export const borderInteractiveStateHover = '#ae91ff'; +export const borderInteractiveStateSelected = '#ffbe00'; + +export const componentButtonPlainBorder = '#fff0'; +export const componentButtonPlainContent = '#fff'; +export const componentButtonPlainStateActive = '#ffffff26'; +export const componentButtonPlainStateDefault = '#fff0'; +export const componentButtonPlainStateHover = '#ffffff1a'; + +export const componentButtonPrimaryBorder = '#1e1240'; +export const componentButtonPrimaryContent = '#3c2480'; +export const componentButtonPrimaryStateActive = '#e4daff'; +export const componentButtonPrimaryStateDefault = '#fff'; +export const componentButtonPrimaryStateHover = '#f1edff'; + +export const componentButtonSecondaryBorder = '#f8f6ff'; +export const componentButtonSecondaryContent = '#fff'; +export const componentButtonSecondaryStateActive = '#1a1b1b26'; +export const componentButtonSecondaryStateDefault = '#1a1b1b00'; +export const componentButtonSecondaryStateHover = '#1a1b1b1a'; + +export const componentButtonTertiaryBorder = '#1a1b1b00'; +export const componentButtonTertiaryContent = '#fff'; +export const componentButtonTertiaryStateActive = '#1a1b1b4d'; +export const componentButtonTertiaryStateDefault = '#1a1b1b33'; +export const componentButtonTertiaryStateHover = '#1a1b1b40'; + +export const componentHeaderBackground = '#6039cc'; +export const componentHeaderItemBackgroundStateActive = '#1a1b1b26'; +export const componentHeaderItemBackgroundStateDefault = '#fff0'; +export const componentHeaderItemBackgroundStateHover = '#1a1b1b1a'; +export const componentHeaderItemBackgroundStateSelected = '#fff0'; +export const componentHeaderItemStateActive = '#e5e5e5'; +export const componentHeaderItemStateDefault = '#fff'; +export const componentHeaderItemStateHover = '#f2f2f2'; +export const componentHeaderItemStateSelected = '#ffbe00'; +export const componentHeaderStripeStateSelected = '#fff'; +export const componentHeaderStripeStateUnselected = '#ffffff40'; + +export const componentToggleSelectedBorder = '#a07eff'; +export const componentToggleSelectedContent = '#fff'; +export const componentToggleSelectedStateActive = '#3e9b4f'; +export const componentToggleSelectedStateDefault = '#327c3f'; +export const componentToggleSelectedStateHover = '#388b47'; +export const componentToggleUnselectedBorder = '#a07eff'; +export const componentToggleUnselectedContent = '#4e2ea6'; +export const componentToggleUnselectedStateActive = '#e4daff'; +export const componentToggleUnselectedStateDefault = '#fff'; +export const componentToggleUnselectedStateHover = '#f1edff'; + +export const disabledBackground = '#ffffff1a'; +export const disabledBorder = '#fff3'; +export const disabledContent = '#ffffff80'; +export const disabledForeground = '#fff3'; + +export const emotionDangerBackgroundBasic = '#e40000'; +export const emotionDangerBackgroundSubtle = '#fce5e5'; +export const emotionDangerBorderBasic = '#e93333'; +export const emotionDangerBorderSubtle = '#ef6666'; +export const emotionDangerContentBasic = '#720000'; +export const emotionDangerContentSubtle = '#fff'; +export const emotionDangerStateActive = '#ec4d4d'; +export const emotionDangerStateDefault = '#e40000'; +export const emotionDangerStateHover = '#e93333'; + +export const emotionInformativeBackgroundBasic = '#0066d8'; +export const emotionInformativeBackgroundSubtle = '#e5f0fb'; +export const emotionInformativeBorderBasic = '#3385e0'; +export const emotionInformativeBorderSubtle = '#66a3e8'; +export const emotionInformativeContentBasic = '#00336c'; +export const emotionInformativeContentSubtle = '#fff'; +export const emotionInformativeStateActive = '#4d94e4'; +export const emotionInformativeStateDefault = '#0066d8'; +export const emotionInformativeStateHover = '#3385e0'; + +export const emotionSuccessBackgroundBasic = '#3e9b4f'; +export const emotionSuccessBackgroundSubtle = '#ecf5ed'; +export const emotionSuccessBorderBasic = '#65af72'; +export const emotionSuccessBorderSubtle = '#8bc395'; +export const emotionSuccessContentBasic = '#1f4e28'; +export const emotionSuccessContentSubtle = '#fff'; +export const emotionSuccessStateActive = '#78b984'; +export const emotionSuccessStateDefault = '#3e9b4f'; +export const emotionSuccessStateHover = '#65af72'; + +export const emotionWarningBackgroundBasic = '#f27d00'; +export const emotionWarningBackgroundSubtle = '#fef2e5'; +export const emotionWarningBorderBasic = '#f59733'; +export const emotionWarningBorderSubtle = '#f7b166'; +export const emotionWarningContentBasic = '#793f00'; +export const emotionWarningContentSubtle = '#fff'; +export const emotionWarningStateActive = '#f6a44d'; +export const emotionWarningStateDefault = '#f27d00'; +export const emotionWarningStateHover = '#f59733'; + +export const focusFocusRingColor01 = '#d2c2ffb2'; + +export const formFieldDanger = '#ec4d4d'; + +export const formFieldFilledBackgroundStateActive = '#fff'; +export const formFieldFilledBackgroundStateDefault = '#f9f9f9'; +export const formFieldFilledBackgroundStateHover = '#f1edff'; +export const formFieldFilledBorderStateActive = '#936cff'; +export const formFieldFilledBorderStateDefault = '#ae91ff'; +export const formFieldFilledBorderStateHover = '#a07eff'; +export const formFieldFilledBorderStateSelected = '#ffbe00'; +export const formFieldFilledContent = '#202020'; +export const formFieldFilledPlaceholder = '#666'; + +export const formFieldHelperText = '#c9b5ff'; +export const formFieldLabel = '#fff'; +export const formFieldSuccess = '#78b984'; +export const formFieldWarning = '#f6a44d'; + +export const gradientBasicOverlayColor01 = '#606060'; +export const gradientBasicOverlayColor02 = '#60606000'; + +export const linkPrimaryStateActive = '#e5e5e5'; +export const linkPrimaryStateDefault = '#fff'; +export const linkPrimaryStateHover = '#f2f2f2'; + +export const linkSecondaryStateActive = '#e5e5e5'; +export const linkSecondaryStateDefault = '#d6c8ff'; +export const linkSecondaryStateHover = '#f2f2f2'; + +export const linkStateVisited = '#ffbe00'; + +export const linkTertiaryStateActive = '#e5e5e5'; +export const linkTertiaryStateDefault = '#bba3ff'; +export const linkTertiaryStateHover = '#f2f2f2'; + +export const neutralBackgroundBasic = '#202020'; +export const neutralBackgroundSubtle = '#f2f2f2'; +export const neutralBorderBasic = '#202020'; +export const neutralBorderSubtle = '#bfbfbf'; +export const neutralContentBasic = '#202020'; +export const neutralContentSubtle = '#fff'; +export const neutralStateActive = '#535353'; +export const neutralStateDefault = '#202020'; +export const neutralStateHover = '#404040'; + +export const selectedContentBasic = '#fff'; +export const selectedContentSubtle = '#3c2480'; +export const selectedStateActive = '#ffd24d'; +export const selectedStateDefault = '#ffbe00'; +export const selectedStateHover = '#ffcb33'; + +export const shadowShadow100Color01 = '#00000026'; + +export const shadowShadow200Color01 = '#0003'; + +export const shadowShadow300Color01 = '#00000040'; + +export const shadowShadow400Color01 = '#00000040'; + +export const textPrimary = '#f9f9f9'; +export const textSecondary = '#d9d9d9'; +export const textTertiary = '#b2b2b2'; diff --git a/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts b/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts new file mode 100644 index 0000000000..1bae1c0e49 --- /dev/null +++ b/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts @@ -0,0 +1 @@ +export * from './colors'; diff --git a/packages/design-tokens/src/scss/@themes.scss b/packages/design-tokens/src/scss/@themes.scss new file mode 100644 index 0000000000..0951b387c6 --- /dev/null +++ b/packages/design-tokens/src/scss/@themes.scss @@ -0,0 +1,15 @@ +@use 'sass:meta'; +@use 'themes/theme-light-default'; +@use 'themes/theme-light-on-brand'; + +// The first theme is the default theme, as the left column in the Figma table. +$themes: ( + theme-light-default: ( + variables: meta.module-variables(theme-light-default), + mixins: meta.module-mixins(theme-light-default), + ), + theme-light-on-brand: ( + variables: meta.module-variables(theme-light-on-brand), + mixins: meta.module-mixins(theme-light-on-brand), + ), +); diff --git a/packages/design-tokens/src/scss/@tokens.scss b/packages/design-tokens/src/scss/@tokens.scss index 8405855b32..adc51194b1 100644 --- a/packages/design-tokens/src/scss/@tokens.scss +++ b/packages/design-tokens/src/scss/@tokens.scss @@ -1 +1,2 @@ -@forward 'index'; +@forward 'global-tokens'; +@forward 'themes'; diff --git a/packages/design-tokens/src/scss/README.md b/packages/design-tokens/src/scss/README.md new file mode 100644 index 0000000000..140eab6934 --- /dev/null +++ b/packages/design-tokens/src/scss/README.md @@ -0,0 +1,5 @@ +# ⚠️ **DO NOT EDIT MANUALLY!** + +The content of this directory is generated by [Supernova][supernova]. + +[supernova]: https://spirit.supernova-docs.io diff --git a/packages/design-tokens/src/scss/generated/_borders.scss b/packages/design-tokens/src/scss/generated/_borders.scss deleted file mode 100644 index c00c8b02e4..0000000000 --- a/packages/design-tokens/src/scss/generated/_borders.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Generated Borders from Supernova. Do not edit manually. -$border-style-0: none !default; -$border-style-100: solid !default; -$border-style-200: dashed !default; -$border-width-0: 0 !default; -$border-width-100: 1px !default; -$border-width-200: 2px !default; diff --git a/packages/design-tokens/src/scss/generated/_colors.scss b/packages/design-tokens/src/scss/generated/_colors.scss deleted file mode 100644 index 826dd32ed2..0000000000 --- a/packages/design-tokens/src/scss/generated/_colors.scss +++ /dev/null @@ -1,194 +0,0 @@ -// Generated Colors from Supernova. Do not edit manually. -$action-inverted-active: #d4d4d4 !default; -$action-inverted-default: #e9e9e9 !default; -$action-inverted-disabled: #c4c4c4 !default; -$action-inverted-hover: #dbdbdb !default; -$action-link-inverted-active: #d4d4d4 !default; -$action-link-inverted-default: #e9e9e9 !default; -$action-link-inverted-disabled: #c4c4c4 !default; -$action-link-inverted-hover: #dbdbdb !default; -$action-link-inverted-visited: #a7bcc2 !default; -$action-link-primary-active: #0b3a46 !default; -$action-link-primary-default: #29616f !default; -$action-link-primary-disabled: #979797 !default; -$action-link-primary-hover: #1b5260 !default; -$action-link-primary-visited: #835ea1 !default; -$action-link-secondary-active: #454b4e !default; -$action-link-secondary-default: #758185 !default; -$action-link-secondary-disabled: #979797 !default; -$action-link-secondary-hover: #5b6568 !default; -$action-link-secondary-visited: #835ea1 !default; -$action-primary-active: #0b3a46 !default; -$action-primary-default: #29616f !default; -$action-primary-disabled: #f5f5f5 !default; -$action-primary-hover: #1b5260 !default; -$action-secondary-active: #c4c4c4 !default; -$action-secondary-default: #a0a0a0 !default; -$action-secondary-disabled: #f5f5f5 !default; -$action-secondary-hover: #737373 !default; -$action-selected-active: #0b3a46 !default; -$action-selected-default: #29616f !default; -$action-selected-disabled: #a6a6a6 !default; -$action-selected-hover: #1b5260 !default; -$action-tertiary-active: #d4d4d4 !default; -$action-tertiary-default: #e9e9e9 !default; -$action-tertiary-disabled: #f5f5f5 !default; -$action-tertiary-hover: #dbdbdb !default; -$action-unselected-active: #091417 !default; -$action-unselected-default: #132930 !default; -$action-unselected-disabled: #a6a6a6 !default; -$action-unselected-hover: #0b1c21 !default; -$background-backdrop: #0b1c2199 !default; -$background-basic: #fff !default; -$background-cover: #f0f0f0 !default; -$background-interactive-active: #a4a4a44d !default; -$background-interactive-default: #fff0 !default; -$background-interactive-hover: #b0b0b033 !default; -$background-interactive-inverted-active: #9f9f9fcc !default; -$background-interactive-inverted-default: #fff0 !default; -$background-interactive-inverted-hover: #bbb6 !default; -$background-inverted: #132930 !default; -$border-primary-active: #b1b1b1 !default; -$border-primary-default: #d8d8d8 !default; -$border-primary-disabled: #dfdfe0 !default; -$border-primary-hover: #c5c5c5 !default; -$border-primary-selected: #29616f !default; -$border-secondary-default: #e9e9e9 !default; -$brand-primary: #0b1c21 !default; -$brand-secondary: #30588c !default; -$emotion-danger-active: #6f2535 !default; -$emotion-danger-background: #fbeef1 !default; -$emotion-danger-default: #ba3e5a !default; -$emotion-danger-disabled: #f5f5f5 !default; -$emotion-danger-hover: #953248 !default; -$emotion-informative-active: #26456e !default; -$emotion-informative-background: #e8eff7 !default; -$emotion-informative-default: #3b6bab !default; -$emotion-informative-disabled: #f5f5f5 !default; -$emotion-informative-hover: #30588c !default; -$emotion-success-active: #33420a !default; -$emotion-success-background: #f6fbe9 !default; -$emotion-success-default: #607c13 !default; -$emotion-success-disabled: #f5f5f5 !default; -$emotion-success-hover: #485d0e !default; -$emotion-warning-active: #423400 !default; -$emotion-warning-background: #f8f2e4 !default; -$emotion-warning-default: #a98300 !default; -$emotion-warning-disabled: #f5f5f5 !default; -$emotion-warning-hover: #755b00 !default; -$focus-default: #4666ae !default; -$text-primary-default: #132930 !default; -$text-primary-disabled: #a6a6a6 !default; -$text-primary-inverted-default: #fff !default; -$text-primary-inverted-disabled: #a6a6a6 !default; -$text-secondary-default: #5c747b !default; -$text-secondary-disabled: #a6a6a6 !default; -$text-secondary-inverted-default: #e9e9e9 !default; -$text-secondary-inverted-disabled: #737373 !default; - -$action-colors: ( - inverted-active: $action-inverted-active, - inverted-default: $action-inverted-default, - inverted-disabled: $action-inverted-disabled, - inverted-hover: $action-inverted-hover, - link-inverted-active: $action-link-inverted-active, - link-inverted-default: $action-link-inverted-default, - link-inverted-disabled: $action-link-inverted-disabled, - link-inverted-hover: $action-link-inverted-hover, - link-inverted-visited: $action-link-inverted-visited, - link-primary-active: $action-link-primary-active, - link-primary-default: $action-link-primary-default, - link-primary-disabled: $action-link-primary-disabled, - link-primary-hover: $action-link-primary-hover, - link-primary-visited: $action-link-primary-visited, - link-secondary-active: $action-link-secondary-active, - link-secondary-default: $action-link-secondary-default, - link-secondary-disabled: $action-link-secondary-disabled, - link-secondary-hover: $action-link-secondary-hover, - link-secondary-visited: $action-link-secondary-visited, - primary-active: $action-primary-active, - primary-default: $action-primary-default, - primary-disabled: $action-primary-disabled, - primary-hover: $action-primary-hover, - secondary-active: $action-secondary-active, - secondary-default: $action-secondary-default, - secondary-disabled: $action-secondary-disabled, - secondary-hover: $action-secondary-hover, - selected-active: $action-selected-active, - selected-default: $action-selected-default, - selected-disabled: $action-selected-disabled, - selected-hover: $action-selected-hover, - tertiary-active: $action-tertiary-active, - tertiary-default: $action-tertiary-default, - tertiary-disabled: $action-tertiary-disabled, - tertiary-hover: $action-tertiary-hover, - unselected-active: $action-unselected-active, - unselected-default: $action-unselected-default, - unselected-disabled: $action-unselected-disabled, - unselected-hover: $action-unselected-hover, -) !default; - -$background-colors: ( - backdrop: $background-backdrop, - basic: $background-basic, - cover: $background-cover, - interactive-active: $background-interactive-active, - interactive-default: $background-interactive-default, - interactive-hover: $background-interactive-hover, - interactive-inverted-active: $background-interactive-inverted-active, - interactive-inverted-default: $background-interactive-inverted-default, - interactive-inverted-hover: $background-interactive-inverted-hover, - inverted: $background-inverted, -) !default; - -$border-colors: ( - primary-active: $border-primary-active, - primary-default: $border-primary-default, - primary-disabled: $border-primary-disabled, - primary-hover: $border-primary-hover, - primary-selected: $border-primary-selected, - secondary-default: $border-secondary-default, -) !default; - -$brand-colors: ( - primary: $brand-primary, - secondary: $brand-secondary, -) !default; - -$emotion-colors: ( - danger-active: $emotion-danger-active, - danger-background: $emotion-danger-background, - danger-default: $emotion-danger-default, - danger-disabled: $emotion-danger-disabled, - danger-hover: $emotion-danger-hover, - informative-active: $emotion-informative-active, - informative-background: $emotion-informative-background, - informative-default: $emotion-informative-default, - informative-disabled: $emotion-informative-disabled, - informative-hover: $emotion-informative-hover, - success-active: $emotion-success-active, - success-background: $emotion-success-background, - success-default: $emotion-success-default, - success-disabled: $emotion-success-disabled, - success-hover: $emotion-success-hover, - warning-active: $emotion-warning-active, - warning-background: $emotion-warning-background, - warning-default: $emotion-warning-default, - warning-disabled: $emotion-warning-disabled, - warning-hover: $emotion-warning-hover, -) !default; - -$focus-colors: ( - default: $focus-default, -) !default; - -$text-colors: ( - primary-default: $text-primary-default, - primary-disabled: $text-primary-disabled, - primary-inverted-default: $text-primary-inverted-default, - primary-inverted-disabled: $text-primary-inverted-disabled, - secondary-default: $text-secondary-default, - secondary-disabled: $text-secondary-disabled, - secondary-inverted-default: $text-secondary-inverted-default, - secondary-inverted-disabled: $text-secondary-inverted-disabled, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_gradients.scss b/packages/design-tokens/src/scss/generated/_gradients.scss deleted file mode 100644 index 29e74463ea..0000000000 --- a/packages/design-tokens/src/scss/generated/_gradients.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Generated Gradients from Supernova. Do not edit manually. -$gradient-background-basic-overlay: linear-gradient(var(--gradient-angle, 90deg), #fff 0%, #fff0 100%) !default; - -$gradients: ( - background-basic-overlay: $gradient-background-basic-overlay, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_measures.scss b/packages/design-tokens/src/scss/generated/_measures.scss deleted file mode 100644 index d981908ed4..0000000000 --- a/packages/design-tokens/src/scss/generated/_measures.scss +++ /dev/null @@ -1,30 +0,0 @@ -// Generated Measures from Supernova. Do not edit manually. -$space-0: 0 !default; -$space-100: 1px !default; -$space-200: 2px !default; -$space-300: 4px !default; -$space-400: 8px !default; -$space-500: 12px !default; -$space-600: 16px !default; -$space-700: 24px !default; -$space-800: 32px !default; -$space-900: 40px !default; -$space-1000: 48px !default; -$space-1100: 64px !default; -$space-1200: 80px !default; - -$spaces: ( - 0: $space-0, - 100: $space-100, - 200: $space-200, - 300: $space-300, - 400: $space-400, - 500: $space-500, - 600: $space-600, - 700: $space-700, - 800: $space-800, - 900: $space-900, - 1000: $space-1000, - 1100: $space-1100, - 1200: $space-1200, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_radii.scss b/packages/design-tokens/src/scss/generated/_radii.scss deleted file mode 100644 index d3cc05286e..0000000000 --- a/packages/design-tokens/src/scss/generated/_radii.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Generated Radii from Supernova. Do not edit manually. -$radius-0: 0 !default; -$radius-100: 4px !default; -$radius-200: 8px !default; -$radius-300: 12px !default; - -$radii: ( - 0: $radius-0, - 100: $radius-100, - 200: $radius-200, - 300: $radius-300, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_shadows.scss b/packages/design-tokens/src/scss/generated/_shadows.scss deleted file mode 100644 index f33b8e4113..0000000000 --- a/packages/design-tokens/src/scss/generated/_shadows.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Generated Shadows from Supernova. Do not edit manually. -$focus: 0 0 0 2px #d2c2ff99 !default; -$shadow-100: 0 2px 8px 0 #00000026 !default; -$shadow-200: 0 4px 12px 0 #0003 !default; -$shadow-300: 0 8px 24px 0 #00000040 !default; -$shadow-400: 0 12px 32px 0 #00000040 !default; - -$shadows: ( - 100: $shadow-100, - 200: $shadow-200, - 300: $shadow-300, - 400: $shadow-400, -) !default; diff --git a/packages/design-tokens/src/scss/generated/_typography.scss b/packages/design-tokens/src/scss/generated/_typography.scss deleted file mode 100644 index de61243496..0000000000 --- a/packages/design-tokens/src/scss/generated/_typography.scss +++ /dev/null @@ -1,348 +0,0 @@ -// Generated Typography from Supernova. Do not edit manually. -$body-large-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 600, - line-height: 1.55, - ), -) !default; - -$body-large-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: italic, - font-weight: 400, - line-height: 1.55, - ), -) !default; - -$body-large-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 400, - line-height: 1.55, - ), -) !default; - -$body-large-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 500, - line-height: 1.55, - ), -) !default; - -$body-medium-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 600, - line-height: 1.5, - ), -) !default; - -$body-medium-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: italic, - font-weight: 400, - line-height: 1.5, - ), -) !default; - -$body-medium-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 400, - line-height: 1.5, - ), -) !default; - -$body-medium-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 500, - line-height: 1.5, - ), -) !default; - -$body-small-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: normal, - font-weight: 600, - line-height: 1.42, - ), -) !default; - -$body-small-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: italic, - font-weight: 400, - line-height: 1.42, - ), -) !default; - -$body-small-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: normal, - font-weight: 400, - line-height: 1.42, - ), -) !default; - -$body-small-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.875rem, - font-style: normal, - font-weight: 500, - line-height: 1.42, - ), -) !default; - -$body-xlarge-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.6, - ), -) !default; - -$body-xlarge-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: italic, - font-weight: 400, - line-height: 1.6, - ), -) !default; - -$body-xlarge-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 400, - line-height: 1.6, - ), -) !default; - -$body-xlarge-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 500, - line-height: 1.6, - ), -) !default; - -$body-xsmall-text-bold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: normal, - font-weight: 600, - line-height: 1.32, - ), -) !default; - -$body-xsmall-text-italic: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: italic, - font-weight: 400, - line-height: 1.32, - ), -) !default; - -$body-xsmall-text-regular: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: normal, - font-weight: 400, - line-height: 1.32, - ), -) !default; - -$body-xsmall-text-semibold: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 0.75rem, - font-style: normal, - font-weight: 500, - line-height: 1.32, - ), -) !default; - -$heading-large-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 2rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 3rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 3rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-medium-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 2rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 2rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-small-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1.125rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 1.5rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 1.5rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-xlarge-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 3rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 4rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 4rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$heading-xsmall-text: ( - mobile: ( - font-family: "'Inter', sans-serif", - font-size: 1rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - tablet: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), - desktop: ( - font-family: "'Inter', sans-serif", - font-size: 1.25rem, - font-style: normal, - font-weight: 700, - line-height: 1.2, - ), -) !default; - -$styles: ( - body-large-text-bold: $body-large-text-bold, - body-large-text-italic: $body-large-text-italic, - body-large-text-regular: $body-large-text-regular, - body-large-text-semibold: $body-large-text-semibold, - body-medium-text-bold: $body-medium-text-bold, - body-medium-text-italic: $body-medium-text-italic, - body-medium-text-regular: $body-medium-text-regular, - body-medium-text-semibold: $body-medium-text-semibold, - body-small-text-bold: $body-small-text-bold, - body-small-text-italic: $body-small-text-italic, - body-small-text-regular: $body-small-text-regular, - body-small-text-semibold: $body-small-text-semibold, - body-xlarge-text-bold: $body-xlarge-text-bold, - body-xlarge-text-italic: $body-xlarge-text-italic, - body-xlarge-text-regular: $body-xlarge-text-regular, - body-xlarge-text-semibold: $body-xlarge-text-semibold, - body-xsmall-text-bold: $body-xsmall-text-bold, - body-xsmall-text-italic: $body-xsmall-text-italic, - body-xsmall-text-regular: $body-xsmall-text-regular, - body-xsmall-text-semibold: $body-xsmall-text-semibold, - heading-large-text: $heading-large-text, - heading-medium-text: $heading-medium-text, - heading-small-text: $heading-small-text, - heading-xlarge-text: $heading-xlarge-text, - heading-xsmall-text: $heading-xsmall-text, -) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_borders.scss b/packages/design-tokens/src/scss/global-tokens/_borders.scss new file mode 100644 index 0000000000..45779987f6 --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_borders.scss @@ -0,0 +1,4 @@ +/* This file was generated by Supernova, don't change manually */ +$border-width-0: 0 !default; +$border-width-100: 1px !default; +$border-width-200: 2px !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_gradients.scss b/packages/design-tokens/src/scss/global-tokens/_gradients.scss new file mode 100644 index 0000000000..9ebdd85b8e --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_gradients.scss @@ -0,0 +1,10 @@ +/* This file was generated by Supernova, don't change manually */ +$gradient-basic-overlay: linear-gradient( + var(--gradient-angle, 90deg), + var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, + var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100% +) !default; + +$gradients: ( + basic-overlay: $gradient-basic-overlay, +) !default; diff --git a/packages/design-tokens/src/scss/generated/_other.scss b/packages/design-tokens/src/scss/global-tokens/_other.scss similarity index 51% rename from packages/design-tokens/src/scss/generated/_other.scss rename to packages/design-tokens/src/scss/global-tokens/_other.scss index 4f68fcf173..8021c3dc58 100644 --- a/packages/design-tokens/src/scss/generated/_other.scss +++ b/packages/design-tokens/src/scss/global-tokens/_other.scss @@ -1,38 +1,42 @@ -// Generated Generic Tokens (Other) from Supernova. Do not edit manually. +/* This file was generated by Supernova, don't change manually */ +$container-padding-mobile: 16px !default; +$container-padding-tablet: 32px !default; +$container-padding-desktop: 32px !default; + $container-max-width: 1280px !default; -$grid-columns: 12 !default; + $breakpoint-mobile: 0 !default; -$container-padding-mobile: 16px !default; -$grid-gutter-mobile: 16px !default; $breakpoint-tablet: 768px !default; -$container-padding-tablet: 32px !default; -$grid-gutter-tablet: 32px !default; $breakpoint-desktop: 1280px !default; -$container-padding-desktop: 32px !default; -$grid-gutter-desktop: 32px !default; + +$grid-spacing-mobile: 16px !default; +$grid-spacing-desktop: 32px !default; +$grid-spacing-tablet: 32px !default; + +$grid-columns: 12 !default; + +$css-variable-prefix: spirit- !default; $containers: ( + padding: ( + mobile: $container-padding-mobile, + tablet: $container-padding-tablet, + desktop: $container-padding-desktop, + ), max-width: $container-max-width, ) !default; -$grids: ( - columns: $grid-columns, -) !default; - $breakpoints: ( mobile: $breakpoint-mobile, tablet: $breakpoint-tablet, desktop: $breakpoint-desktop, ) !default; -$container-paddings: ( - mobile: $container-padding-mobile, - tablet: $container-padding-tablet, - desktop: $container-padding-desktop, -) !default; - -$grid-gutters: ( - mobile: $grid-gutter-mobile, - tablet: $grid-gutter-tablet, - desktop: $grid-gutter-desktop, +$grids: ( + spacing: ( + mobile: $grid-spacing-mobile, + desktop: $grid-spacing-desktop, + tablet: $grid-spacing-tablet, + ), + columns: $grid-columns, ) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_radii.scss b/packages/design-tokens/src/scss/global-tokens/_radii.scss new file mode 100644 index 0000000000..4aa5c8619a --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_radii.scss @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +$radius-0: 0 !default; +$radius-100: 2px !default; +$radius-200: 4px !default; +$radius-300: 8px !default; +$radius-400: 12px !default; +$radius-500: 16px !default; +$radius-full: 9999px !default; + +$radii: ( + 0: $radius-0, + 100: $radius-100, + 200: $radius-200, + 300: $radius-300, + 400: $radius-400, + 500: $radius-500, + full: $radius-full, +) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_shadows.scss b/packages/design-tokens/src/scss/global-tokens/_shadows.scss new file mode 100644 index 0000000000..fedec905b0 --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_shadows.scss @@ -0,0 +1,18 @@ +/* This file was generated by Supernova, don't change manually */ +$focus-ring: 0 0 0 2px var(--spirit-color-focus-focus-ring-color-01, #d2c2ffb2) !default; + +$shadow-100: 0 2px 8px 0 var(--spirit-color-shadow-shadow-100-color-01, #00000026) !default; +$shadow-200: 0 4px 12px 0 var(--spirit-color-shadow-shadow-200-color-01, #0003) !default; +$shadow-300: 0 8px 24px 0 var(--spirit-color-shadow-shadow-300-color-01, #00000040) !default; +$shadow-400: 0 12px 32px 0 var(--spirit-color-shadow-shadow-400-color-01, #00000040) !default; + +$focus: ( + focus-ring: $focus-ring, +) !default; + +$shadows: ( + 100: $shadow-100, + 200: $shadow-200, + 300: $shadow-300, + 400: $shadow-400, +) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_spacing.scss b/packages/design-tokens/src/scss/global-tokens/_spacing.scss new file mode 100644 index 0000000000..942edf2eea --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_spacing.scss @@ -0,0 +1,40 @@ +/* This file was generated by Supernova, don't change manually */ +$space-0: 0 !default; +$space-100: 1px !default; +$space-200: 2px !default; +$space-300: 4px !default; +$space-400: 6px !default; +$space-500: 8px !default; +$space-600: 12px !default; +$space-700: 16px !default; +$space-800: 20px !default; +$space-900: 24px !default; +$space-1000: 32px !default; +$space-1100: 40px !default; +$space-1200: 48px !default; +$space-1300: 56px !default; +$space-1400: 64px !default; +$space-1500: 72px !default; +$space-1600: 80px !default; +$space-1700: 96px !default; + +$spaces: ( + 0: $space-0, + 100: $space-100, + 200: $space-200, + 300: $space-300, + 400: $space-400, + 500: $space-500, + 600: $space-600, + 700: $space-700, + 800: $space-800, + 900: $space-900, + 1000: $space-1000, + 1100: $space-1100, + 1200: $space-1200, + 1300: $space-1300, + 1400: $space-1400, + 1500: $space-1500, + 1600: $space-1600, + 1700: $space-1700, +) !default; diff --git a/packages/design-tokens/src/scss/global-tokens/_typography.scss b/packages/design-tokens/src/scss/global-tokens/_typography.scss new file mode 100644 index 0000000000..26c0b6e5f5 --- /dev/null +++ b/packages/design-tokens/src/scss/global-tokens/_typography.scss @@ -0,0 +1,723 @@ +/* This file was generated by Supernova, don't change manually */ +$heading-xlarge-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 36px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-large-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-large-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-large-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-large-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 40px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-medium-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-medium-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), +) !default; + +$heading-medium-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), +) !default; + +$heading-medium-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.3, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.3, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-small-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-small-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), +) !default; + +$heading-small-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), +) !default; + +$heading-small-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-regular: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-semibold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-bold: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.4, + ), +) !default; + +$heading-xsmall-italic: ( + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.4, + ), +) !default; + +$body-xlarge-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-xlarge-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-xlarge-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-xlarge-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-large-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-large-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-large-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-large-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-medium-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-medium-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-medium-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-small-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-small-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-small-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-small-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-xsmall-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-xsmall-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-xsmall-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-xsmall-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$styles: ( + heading-xlarge-regular: $heading-xlarge-regular, + heading-xlarge-semibold: $heading-xlarge-semibold, + heading-xlarge-bold: $heading-xlarge-bold, + heading-xlarge-italic: $heading-xlarge-italic, + heading-large-regular: $heading-large-regular, + heading-large-semibold: $heading-large-semibold, + heading-large-bold: $heading-large-bold, + heading-large-italic: $heading-large-italic, + heading-medium-regular: $heading-medium-regular, + heading-medium-semibold: $heading-medium-semibold, + heading-medium-bold: $heading-medium-bold, + heading-medium-italic: $heading-medium-italic, + heading-small-regular: $heading-small-regular, + heading-small-semibold: $heading-small-semibold, + heading-small-bold: $heading-small-bold, + heading-small-italic: $heading-small-italic, + heading-xsmall-regular: $heading-xsmall-regular, + heading-xsmall-semibold: $heading-xsmall-semibold, + heading-xsmall-bold: $heading-xsmall-bold, + heading-xsmall-italic: $heading-xsmall-italic, + body-xlarge-regular: $body-xlarge-regular, + body-xlarge-semibold: $body-xlarge-semibold, + body-xlarge-bold: $body-xlarge-bold, + body-xlarge-italic: $body-xlarge-italic, + body-large-regular: $body-large-regular, + body-large-semibold: $body-large-semibold, + body-large-bold: $body-large-bold, + body-large-italic: $body-large-italic, + body-medium-regular: $body-medium-regular, + body-medium-semibold: $body-medium-semibold, + body-medium-bold: $body-medium-bold, + body-medium-italic: $body-medium-italic, + body-small-regular: $body-small-regular, + body-small-semibold: $body-small-semibold, + body-small-bold: $body-small-bold, + body-small-italic: $body-small-italic, + body-xsmall-regular: $body-xsmall-regular, + body-xsmall-semibold: $body-xsmall-semibold, + body-xsmall-bold: $body-xsmall-bold, + body-xsmall-italic: $body-xsmall-italic, +) !default; diff --git a/packages/design-tokens/src/scss/generated/index.scss b/packages/design-tokens/src/scss/global-tokens/index.scss similarity index 75% rename from packages/design-tokens/src/scss/generated/index.scss rename to packages/design-tokens/src/scss/global-tokens/index.scss index 09d09db0f5..2b65192ccc 100644 --- a/packages/design-tokens/src/scss/generated/index.scss +++ b/packages/design-tokens/src/scss/global-tokens/index.scss @@ -1,8 +1,7 @@ @forward 'borders'; -@forward 'colors'; @forward 'gradients'; -@forward 'measures'; @forward 'other'; @forward 'radii'; @forward 'shadows'; +@forward 'spacing'; @forward 'typography'; diff --git a/packages/design-tokens/src/scss/index.scss b/packages/design-tokens/src/scss/index.scss deleted file mode 100644 index 9b5c0af68a..0000000000 --- a/packages/design-tokens/src/scss/index.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'generated'; diff --git a/packages/design-tokens/src/scss/themes/_color-tokens.scss b/packages/design-tokens/src/scss/themes/_color-tokens.scss new file mode 100644 index 0000000000..776e985669 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/_color-tokens.scss @@ -0,0 +1,417 @@ +/* This file was generated by Supernova, don't change manually */ +$background-backdrop: var(--spirit-color-background-backdrop); + +$background-interactive-state-active: var(--spirit-color-background-interactive-state-active); +$background-interactive-state-default: var(--spirit-color-background-interactive-state-default); +$background-interactive-state-hover: var(--spirit-color-background-interactive-state-hover); + +$background-primary: var(--spirit-color-background-primary); +$background-secondary: var(--spirit-color-background-secondary); +$background-tertiary: var(--spirit-color-background-tertiary); + +$border-basic: var(--spirit-color-border-basic); +$border-focus: var(--spirit-color-border-focus); + +$border-interactive-state-active: var(--spirit-color-border-interactive-state-active); +$border-interactive-state-default: var(--spirit-color-border-interactive-state-default); +$border-interactive-state-hover: var(--spirit-color-border-interactive-state-hover); +$border-interactive-state-selected: var(--spirit-color-border-interactive-state-selected); + +$component-button-plain-border: var(--spirit-color-component-button-plain-border); +$component-button-plain-content: var(--spirit-color-component-button-plain-content); +$component-button-plain-state-active: var(--spirit-color-component-button-plain-state-active); +$component-button-plain-state-default: var(--spirit-color-component-button-plain-state-default); +$component-button-plain-state-hover: var(--spirit-color-component-button-plain-state-hover); + +$component-button-primary-border: var(--spirit-color-component-button-primary-border); +$component-button-primary-content: var(--spirit-color-component-button-primary-content); +$component-button-primary-state-active: var(--spirit-color-component-button-primary-state-active); +$component-button-primary-state-default: var(--spirit-color-component-button-primary-state-default); +$component-button-primary-state-hover: var(--spirit-color-component-button-primary-state-hover); + +$component-button-secondary-border: var(--spirit-color-component-button-secondary-border); +$component-button-secondary-content: var(--spirit-color-component-button-secondary-content); +$component-button-secondary-state-active: var(--spirit-color-component-button-secondary-state-active); +$component-button-secondary-state-default: var(--spirit-color-component-button-secondary-state-default); +$component-button-secondary-state-hover: var(--spirit-color-component-button-secondary-state-hover); + +$component-button-tertiary-border: var(--spirit-color-component-button-tertiary-border); +$component-button-tertiary-content: var(--spirit-color-component-button-tertiary-content); +$component-button-tertiary-state-active: var(--spirit-color-component-button-tertiary-state-active); +$component-button-tertiary-state-default: var(--spirit-color-component-button-tertiary-state-default); +$component-button-tertiary-state-hover: var(--spirit-color-component-button-tertiary-state-hover); + +$component-header-background: var(--spirit-color-component-header-background); +$component-header-item-background-state-active: var(--spirit-color-component-header-item-background-state-active); +$component-header-item-background-state-default: var(--spirit-color-component-header-item-background-state-default); +$component-header-item-background-state-hover: var(--spirit-color-component-header-item-background-state-hover); +$component-header-item-background-state-selected: var(--spirit-color-component-header-item-background-state-selected); +$component-header-item-state-active: var(--spirit-color-component-header-item-state-active); +$component-header-item-state-default: var(--spirit-color-component-header-item-state-default); +$component-header-item-state-hover: var(--spirit-color-component-header-item-state-hover); +$component-header-item-state-selected: var(--spirit-color-component-header-item-state-selected); +$component-header-stripe-state-selected: var(--spirit-color-component-header-stripe-state-selected); +$component-header-stripe-state-unselected: var(--spirit-color-component-header-stripe-state-unselected); + +$component-toggle-selected-border: var(--spirit-color-component-toggle-selected-border); +$component-toggle-selected-content: var(--spirit-color-component-toggle-selected-content); +$component-toggle-selected-state-active: var(--spirit-color-component-toggle-selected-state-active); +$component-toggle-selected-state-default: var(--spirit-color-component-toggle-selected-state-default); +$component-toggle-selected-state-hover: var(--spirit-color-component-toggle-selected-state-hover); +$component-toggle-unselected-border: var(--spirit-color-component-toggle-unselected-border); +$component-toggle-unselected-content: var(--spirit-color-component-toggle-unselected-content); +$component-toggle-unselected-state-active: var(--spirit-color-component-toggle-unselected-state-active); +$component-toggle-unselected-state-default: var(--spirit-color-component-toggle-unselected-state-default); +$component-toggle-unselected-state-hover: var(--spirit-color-component-toggle-unselected-state-hover); + +$disabled-background: var(--spirit-color-disabled-background); +$disabled-border: var(--spirit-color-disabled-border); +$disabled-content: var(--spirit-color-disabled-content); +$disabled-foreground: var(--spirit-color-disabled-foreground); + +$emotion-danger-background-basic: var(--spirit-color-emotion-danger-background-basic); +$emotion-danger-background-subtle: var(--spirit-color-emotion-danger-background-subtle); +$emotion-danger-border-basic: var(--spirit-color-emotion-danger-border-basic); +$emotion-danger-border-subtle: var(--spirit-color-emotion-danger-border-subtle); +$emotion-danger-content-basic: var(--spirit-color-emotion-danger-content-basic); +$emotion-danger-content-subtle: var(--spirit-color-emotion-danger-content-subtle); +$emotion-danger-state-active: var(--spirit-color-emotion-danger-state-active); +$emotion-danger-state-default: var(--spirit-color-emotion-danger-state-default); +$emotion-danger-state-hover: var(--spirit-color-emotion-danger-state-hover); + +$emotion-informative-background-basic: var(--spirit-color-emotion-informative-background-basic); +$emotion-informative-background-subtle: var(--spirit-color-emotion-informative-background-subtle); +$emotion-informative-border-basic: var(--spirit-color-emotion-informative-border-basic); +$emotion-informative-border-subtle: var(--spirit-color-emotion-informative-border-subtle); +$emotion-informative-content-basic: var(--spirit-color-emotion-informative-content-basic); +$emotion-informative-content-subtle: var(--spirit-color-emotion-informative-content-subtle); +$emotion-informative-state-active: var(--spirit-color-emotion-informative-state-active); +$emotion-informative-state-default: var(--spirit-color-emotion-informative-state-default); +$emotion-informative-state-hover: var(--spirit-color-emotion-informative-state-hover); + +$emotion-success-background-basic: var(--spirit-color-emotion-success-background-basic); +$emotion-success-background-subtle: var(--spirit-color-emotion-success-background-subtle); +$emotion-success-border-basic: var(--spirit-color-emotion-success-border-basic); +$emotion-success-border-subtle: var(--spirit-color-emotion-success-border-subtle); +$emotion-success-content-basic: var(--spirit-color-emotion-success-content-basic); +$emotion-success-content-subtle: var(--spirit-color-emotion-success-content-subtle); +$emotion-success-state-active: var(--spirit-color-emotion-success-state-active); +$emotion-success-state-default: var(--spirit-color-emotion-success-state-default); +$emotion-success-state-hover: var(--spirit-color-emotion-success-state-hover); + +$emotion-warning-background-basic: var(--spirit-color-emotion-warning-background-basic); +$emotion-warning-background-subtle: var(--spirit-color-emotion-warning-background-subtle); +$emotion-warning-border-basic: var(--spirit-color-emotion-warning-border-basic); +$emotion-warning-border-subtle: var(--spirit-color-emotion-warning-border-subtle); +$emotion-warning-content-basic: var(--spirit-color-emotion-warning-content-basic); +$emotion-warning-content-subtle: var(--spirit-color-emotion-warning-content-subtle); +$emotion-warning-state-active: var(--spirit-color-emotion-warning-state-active); +$emotion-warning-state-default: var(--spirit-color-emotion-warning-state-default); +$emotion-warning-state-hover: var(--spirit-color-emotion-warning-state-hover); + +$focus-focus-ring-color-01: var(--spirit-color-focus-focus-ring-color-01); + +$form-field-danger: var(--spirit-color-form-field-danger); + +$form-field-filled-background-state-active: var(--spirit-color-form-field-filled-background-state-active); +$form-field-filled-background-state-default: var(--spirit-color-form-field-filled-background-state-default); +$form-field-filled-background-state-hover: var(--spirit-color-form-field-filled-background-state-hover); +$form-field-filled-border-state-active: var(--spirit-color-form-field-filled-border-state-active); +$form-field-filled-border-state-default: var(--spirit-color-form-field-filled-border-state-default); +$form-field-filled-border-state-hover: var(--spirit-color-form-field-filled-border-state-hover); +$form-field-filled-border-state-selected: var(--spirit-color-form-field-filled-border-state-selected); +$form-field-filled-content: var(--spirit-color-form-field-filled-content); +$form-field-filled-placeholder: var(--spirit-color-form-field-filled-placeholder); + +$form-field-helper-text: var(--spirit-color-form-field-helper-text); +$form-field-label: var(--spirit-color-form-field-label); +$form-field-success: var(--spirit-color-form-field-success); +$form-field-warning: var(--spirit-color-form-field-warning); + +$gradient-basic-overlay-color-01: var(--spirit-color-gradient-basic-overlay-color-01); +$gradient-basic-overlay-color-02: var(--spirit-color-gradient-basic-overlay-color-02); + +$link-primary-state-active: var(--spirit-color-link-primary-state-active); +$link-primary-state-default: var(--spirit-color-link-primary-state-default); +$link-primary-state-hover: var(--spirit-color-link-primary-state-hover); + +$link-secondary-state-active: var(--spirit-color-link-secondary-state-active); +$link-secondary-state-default: var(--spirit-color-link-secondary-state-default); +$link-secondary-state-hover: var(--spirit-color-link-secondary-state-hover); + +$link-state-visited: var(--spirit-color-link-state-visited); + +$link-tertiary-state-active: var(--spirit-color-link-tertiary-state-active); +$link-tertiary-state-default: var(--spirit-color-link-tertiary-state-default); +$link-tertiary-state-hover: var(--spirit-color-link-tertiary-state-hover); + +$neutral-background-basic: var(--spirit-color-neutral-background-basic); +$neutral-background-subtle: var(--spirit-color-neutral-background-subtle); +$neutral-border-basic: var(--spirit-color-neutral-border-basic); +$neutral-border-subtle: var(--spirit-color-neutral-border-subtle); +$neutral-content-basic: var(--spirit-color-neutral-content-basic); +$neutral-content-subtle: var(--spirit-color-neutral-content-subtle); +$neutral-state-active: var(--spirit-color-neutral-state-active); +$neutral-state-default: var(--spirit-color-neutral-state-default); +$neutral-state-hover: var(--spirit-color-neutral-state-hover); + +$selected-content-basic: var(--spirit-color-selected-content-basic); +$selected-content-subtle: var(--spirit-color-selected-content-subtle); +$selected-state-active: var(--spirit-color-selected-state-active); +$selected-state-default: var(--spirit-color-selected-state-default); +$selected-state-hover: var(--spirit-color-selected-state-hover); + +$shadow-shadow-100-color-01: var(--spirit-color-shadow-shadow-100-color-01); + +$shadow-shadow-200-color-01: var(--spirit-color-shadow-shadow-200-color-01); + +$shadow-shadow-300-color-01: var(--spirit-color-shadow-shadow-300-color-01); + +$shadow-shadow-400-color-01: var(--spirit-color-shadow-shadow-400-color-01); + +$text-primary: var(--spirit-color-text-primary); +$text-secondary: var(--spirit-color-text-secondary); +$text-tertiary: var(--spirit-color-text-tertiary); + +$background-colors: ( + backdrop: $background-backdrop, + interactive: ( + state-active: $background-interactive-state-active, + state-default: $background-interactive-state-default, + state-hover: $background-interactive-state-hover, + ), + primary: $background-primary, + secondary: $background-secondary, + tertiary: $background-tertiary, +) !default; + +$border-colors: ( + basic: $border-basic, + focus: $border-focus, + interactive: ( + state-active: $border-interactive-state-active, + state-default: $border-interactive-state-default, + state-hover: $border-interactive-state-hover, + state-selected: $border-interactive-state-selected, + ), +) !default; + +$component-colors: ( + button: ( + plain: ( + border: $component-button-plain-border, + content: $component-button-plain-content, + state-active: $component-button-plain-state-active, + state-default: $component-button-plain-state-default, + state-hover: $component-button-plain-state-hover, + ), + primary: ( + border: $component-button-primary-border, + content: $component-button-primary-content, + state-active: $component-button-primary-state-active, + state-default: $component-button-primary-state-default, + state-hover: $component-button-primary-state-hover, + ), + secondary: ( + border: $component-button-secondary-border, + content: $component-button-secondary-content, + state-active: $component-button-secondary-state-active, + state-default: $component-button-secondary-state-default, + state-hover: $component-button-secondary-state-hover, + ), + tertiary: ( + border: $component-button-tertiary-border, + content: $component-button-tertiary-content, + state-active: $component-button-tertiary-state-active, + state-default: $component-button-tertiary-state-default, + state-hover: $component-button-tertiary-state-hover, + ), + ), + header: ( + background: $component-header-background, + item-background-state-active: $component-header-item-background-state-active, + item-background-state-default: $component-header-item-background-state-default, + item-background-state-hover: $component-header-item-background-state-hover, + item-background-state-selected: $component-header-item-background-state-selected, + item-state-active: $component-header-item-state-active, + item-state-default: $component-header-item-state-default, + item-state-hover: $component-header-item-state-hover, + item-state-selected: $component-header-item-state-selected, + stripe-state-selected: $component-header-stripe-state-selected, + stripe-state-unselected: $component-header-stripe-state-unselected, + ), + toggle: ( + selected-border: $component-toggle-selected-border, + selected-content: $component-toggle-selected-content, + selected-state-active: $component-toggle-selected-state-active, + selected-state-default: $component-toggle-selected-state-default, + selected-state-hover: $component-toggle-selected-state-hover, + unselected-border: $component-toggle-unselected-border, + unselected-content: $component-toggle-unselected-content, + unselected-state-active: $component-toggle-unselected-state-active, + unselected-state-default: $component-toggle-unselected-state-default, + unselected-state-hover: $component-toggle-unselected-state-hover, + ), +) !default; + +$disabled-colors: ( + background: $disabled-background, + border: $disabled-border, + content: $disabled-content, + foreground: $disabled-foreground, +) !default; + +$emotion-colors: ( + danger: ( + background-basic: $emotion-danger-background-basic, + background-subtle: $emotion-danger-background-subtle, + border-basic: $emotion-danger-border-basic, + border-subtle: $emotion-danger-border-subtle, + content-basic: $emotion-danger-content-basic, + content-subtle: $emotion-danger-content-subtle, + state-active: $emotion-danger-state-active, + state-default: $emotion-danger-state-default, + state-hover: $emotion-danger-state-hover, + ), + informative: ( + background-basic: $emotion-informative-background-basic, + background-subtle: $emotion-informative-background-subtle, + border-basic: $emotion-informative-border-basic, + border-subtle: $emotion-informative-border-subtle, + content-basic: $emotion-informative-content-basic, + content-subtle: $emotion-informative-content-subtle, + state-active: $emotion-informative-state-active, + state-default: $emotion-informative-state-default, + state-hover: $emotion-informative-state-hover, + ), + success: ( + background-basic: $emotion-success-background-basic, + background-subtle: $emotion-success-background-subtle, + border-basic: $emotion-success-border-basic, + border-subtle: $emotion-success-border-subtle, + content-basic: $emotion-success-content-basic, + content-subtle: $emotion-success-content-subtle, + state-active: $emotion-success-state-active, + state-default: $emotion-success-state-default, + state-hover: $emotion-success-state-hover, + ), + warning: ( + background-basic: $emotion-warning-background-basic, + background-subtle: $emotion-warning-background-subtle, + border-basic: $emotion-warning-border-basic, + border-subtle: $emotion-warning-border-subtle, + content-basic: $emotion-warning-content-basic, + content-subtle: $emotion-warning-content-subtle, + state-active: $emotion-warning-state-active, + state-default: $emotion-warning-state-default, + state-hover: $emotion-warning-state-hover, + ), +) !default; + +$focus-colors: ( + focus-ring: ( + color-01: $focus-focus-ring-color-01, + ), +) !default; + +$form-field-colors: ( + danger: $form-field-danger, + filled: ( + background-state-active: $form-field-filled-background-state-active, + background-state-default: $form-field-filled-background-state-default, + background-state-hover: $form-field-filled-background-state-hover, + border-state-active: $form-field-filled-border-state-active, + border-state-default: $form-field-filled-border-state-default, + border-state-hover: $form-field-filled-border-state-hover, + border-state-selected: $form-field-filled-border-state-selected, + content: $form-field-filled-content, + placeholder: $form-field-filled-placeholder, + ), + helper-text: $form-field-helper-text, + label: $form-field-label, + success: $form-field-success, + warning: $form-field-warning, +) !default; + +$gradient-colors: ( + basic-overlay: ( + color-01: $gradient-basic-overlay-color-01, + color-02: $gradient-basic-overlay-color-02, + ), +) !default; + +$link-colors: ( + primary: ( + state-active: $link-primary-state-active, + state-default: $link-primary-state-default, + state-hover: $link-primary-state-hover, + ), + secondary: ( + state-active: $link-secondary-state-active, + state-default: $link-secondary-state-default, + state-hover: $link-secondary-state-hover, + ), + state-visited: $link-state-visited, + tertiary: ( + state-active: $link-tertiary-state-active, + state-default: $link-tertiary-state-default, + state-hover: $link-tertiary-state-hover, + ), +) !default; + +$neutral-colors: ( + background-basic: $neutral-background-basic, + background-subtle: $neutral-background-subtle, + border-basic: $neutral-border-basic, + border-subtle: $neutral-border-subtle, + content-basic: $neutral-content-basic, + content-subtle: $neutral-content-subtle, + state-active: $neutral-state-active, + state-default: $neutral-state-default, + state-hover: $neutral-state-hover, +) !default; + +$selected-colors: ( + content-basic: $selected-content-basic, + content-subtle: $selected-content-subtle, + state-active: $selected-state-active, + state-default: $selected-state-default, + state-hover: $selected-state-hover, +) !default; + +$shadow-colors: ( + shadow-100: ( + color-01: $shadow-shadow-100-color-01, + ), + shadow-200: ( + color-01: $shadow-shadow-200-color-01, + ), + shadow-300: ( + color-01: $shadow-shadow-300-color-01, + ), + shadow-400: ( + color-01: $shadow-shadow-400-color-01, + ), +) !default; + +$text-colors: ( + primary: $text-primary, + secondary: $text-secondary, + tertiary: $text-tertiary, +) !default; + +$colors: ( + background: $background-colors, + border: $border-colors, + component: $component-colors, + disabled: $disabled-colors, + emotion: $emotion-colors, + focus: $focus-colors, + form-field: $form-field-colors, + gradient: $gradient-colors, + link: $link-colors, + neutral: $neutral-colors, + selected: $selected-colors, + shadow: $shadow-colors, + text: $text-colors, +) !default; diff --git a/packages/design-tokens/src/scss/themes/index.scss b/packages/design-tokens/src/scss/themes/index.scss new file mode 100644 index 0000000000..87f5c5395c --- /dev/null +++ b/packages/design-tokens/src/scss/themes/index.scss @@ -0,0 +1 @@ +@forward 'color-tokens'; diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss new file mode 100644 index 0000000000..98f5f6ebe4 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss @@ -0,0 +1,318 @@ +/* This file was generated by Supernova, don't change manually */ +$background-backdrop: #1a1b1b80 !default; + +$background-interactive-state-active: #f1edff !default; +$background-interactive-state-default: #fff0 !default; +$background-interactive-state-hover: #f8f6ff !default; + +$background-primary: #fff !default; +$background-secondary: #f2f2f2 !default; +$background-tertiary: #f1edff !default; + +$border-basic: #d9d9d9 !default; +$border-focus: #7847ff !default; + +$border-interactive-state-active: #a5a5a5 !default; +$border-interactive-state-default: #bfbfbf !default; +$border-interactive-state-hover: #b2b2b2 !default; +$border-interactive-state-selected: #7847ff !default; + +$component-button-plain-border: #fff0 !default; +$component-button-plain-content: #6039cc !default; +$component-button-plain-state-active: #e4daff !default; +$component-button-plain-state-default: #fff0 !default; +$component-button-plain-state-hover: #f1edff !default; + +$component-button-primary-border: #4e2ea6 !default; +$component-button-primary-content: #fff !default; +$component-button-primary-state-active: #6039cc !default; +$component-button-primary-state-default: #7847ff !default; +$component-button-primary-state-hover: #6c40e5 !default; + +$component-button-secondary-border: #7847ff !default; +$component-button-secondary-content: #6039cc !default; +$component-button-secondary-state-active: #e4daff !default; +$component-button-secondary-state-default: #fff !default; +$component-button-secondary-state-hover: #f1edff !default; + +$component-button-tertiary-border: #e5e5e5 !default; +$component-button-tertiary-content: #202020 !default; +$component-button-tertiary-state-active: #d9d9d9 !default; +$component-button-tertiary-state-default: #f2f2f2 !default; +$component-button-tertiary-state-hover: #e5e5e5 !default; + +$component-header-background: #fff !default; +$component-header-item-background-state-active: #f1edff !default; +$component-header-item-background-state-default: #fff0 !default; +$component-header-item-background-state-hover: #f8f6ff !default; +$component-header-item-background-state-selected: #fff0 !default; +$component-header-item-state-active: #4e2ea6 !default; +$component-header-item-state-default: #404040 !default; +$component-header-item-state-hover: #6039cc !default; +$component-header-item-state-selected: #6039cc !default; +$component-header-stripe-state-selected: #ffbe00 !default; +$component-header-stripe-state-unselected: #e4daff !default; + +$component-toggle-selected-border: #327c3f !default; +$component-toggle-selected-content: #fff !default; +$component-toggle-selected-state-active: #3e9b4f !default; +$component-toggle-selected-state-default: #327c3f !default; +$component-toggle-selected-state-hover: #388b47 !default; +$component-toggle-unselected-border: #a5a5a5 !default; +$component-toggle-unselected-content: #404040 !default; +$component-toggle-unselected-state-active: #f2f2f2 !default; +$component-toggle-unselected-state-default: #fff !default; +$component-toggle-unselected-state-hover: #f9f9f9 !default; + +$disabled-background: #f9f9f9 !default; +$disabled-border: #e5e5e5 !default; +$disabled-content: #a5a5a5 !default; +$disabled-foreground: #d9d9d9 !default; + +$emotion-danger-background-basic: #b60000 !default; +$emotion-danger-background-subtle: #fef2f2 !default; +$emotion-danger-border-basic: #b60000 !default; +$emotion-danger-border-subtle: #f18080 !default; +$emotion-danger-content-basic: #940000 !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-state-active: #e40000 !default; +$emotion-danger-state-default: #b60000 !default; +$emotion-danger-state-hover: #cd0000 !default; + +$emotion-informative-background-basic: #0052ad !default; +$emotion-informative-background-subtle: #f2f7fd !default; +$emotion-informative-border-basic: #0052ad !default; +$emotion-informative-border-subtle: #80b2eb !default; +$emotion-informative-content-basic: #00428c !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-state-active: #0066d8 !default; +$emotion-informative-state-default: #0052ad !default; +$emotion-informative-state-hover: #005cc2 !default; + +$emotion-success-background-basic: #327c3f !default; +$emotion-success-background-subtle: #f5faf6 !default; +$emotion-success-border-basic: #327c3f !default; +$emotion-success-border-subtle: #9ecda7 !default; +$emotion-success-content-basic: #286533 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-state-active: #3e9b4f !default; +$emotion-success-state-default: #327c3f !default; +$emotion-success-state-hover: #388b47 !default; + +$emotion-warning-background-basic: #c26400 !default; +$emotion-warning-background-subtle: #fef8f2 !default; +$emotion-warning-border-basic: #c26400 !default; +$emotion-warning-border-subtle: #f9be80 !default; +$emotion-warning-content-basic: #9d5100 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-state-active: #f27d00 !default; +$emotion-warning-state-default: #c26400 !default; +$emotion-warning-state-hover: #da7100 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-danger: #b60000 !default; + +$form-field-filled-background-state-active: #fff !default; +$form-field-filled-background-state-default: #fff !default; +$form-field-filled-background-state-hover: #f9f9f9 !default; +$form-field-filled-border-state-active: #7f7f7f !default; +$form-field-filled-border-state-default: #a5a5a5 !default; +$form-field-filled-border-state-hover: #999 !default; +$form-field-filled-border-state-selected: #7847ff !default; +$form-field-filled-content: #202020 !default; +$form-field-filled-placeholder: #666 !default; + +$form-field-helper-text: #7f7f7f !default; +$form-field-label: #202020 !default; +$form-field-success: #327c3f !default; +$form-field-warning: #c26400 !default; + +$gradient-basic-overlay-color-01: #fff !default; +$gradient-basic-overlay-color-02: #fff0 !default; + +$link-primary-state-active: #3c2480 !default; +$link-primary-state-default: #6039cc !default; +$link-primary-state-hover: #4e2ea6 !default; + +$link-secondary-state-active: #3c2480 !default; +$link-secondary-state-default: #535353 !default; +$link-secondary-state-hover: #4e2ea6 !default; + +$link-state-visited: #3c2480 !default; + +$link-tertiary-state-active: #3c2480 !default; +$link-tertiary-state-default: #7f7f7f !default; +$link-tertiary-state-hover: #4e2ea6 !default; + +$neutral-background-basic: #202020 !default; +$neutral-background-subtle: #f2f2f2 !default; +$neutral-border-basic: #202020 !default; +$neutral-border-subtle: #bfbfbf !default; +$neutral-content-basic: #202020 !default; +$neutral-content-subtle: #fff !default; +$neutral-state-active: #535353 !default; +$neutral-state-default: #202020 !default; +$neutral-state-hover: #404040 !default; + +$selected-content-basic: #4e2ea6 !default; +$selected-content-subtle: #fff !default; +$selected-state-active: #6039cc !default; +$selected-state-default: #7847ff !default; +$selected-state-hover: #6c40e5 !default; + +$shadow-shadow-100-color-01: #00000026 !default; + +$shadow-shadow-200-color-01: #0003 !default; + +$shadow-shadow-300-color-01: #00000040 !default; + +$shadow-shadow-400-color-01: #00000040 !default; + +$text-primary: #202020 !default; +$text-secondary: #535353 !default; +$text-tertiary: #7f7f7f !default; + +@mixin color-css-variables { + --spirit-color-background-backdrop: #{$background-backdrop}; + --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; + --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; + --spirit-color-background-interactive-state-hover: #{$background-interactive-state-hover}; + --spirit-color-background-primary: #{$background-primary}; + --spirit-color-background-secondary: #{$background-secondary}; + --spirit-color-background-tertiary: #{$background-tertiary}; + --spirit-color-border-basic: #{$border-basic}; + --spirit-color-border-focus: #{$border-focus}; + --spirit-color-border-interactive-state-active: #{$border-interactive-state-active}; + --spirit-color-border-interactive-state-default: #{$border-interactive-state-default}; + --spirit-color-border-interactive-state-hover: #{$border-interactive-state-hover}; + --spirit-color-border-interactive-state-selected: #{$border-interactive-state-selected}; + --spirit-color-component-button-plain-border: #{$component-button-plain-border}; + --spirit-color-component-button-plain-content: #{$component-button-plain-content}; + --spirit-color-component-button-plain-state-active: #{$component-button-plain-state-active}; + --spirit-color-component-button-plain-state-default: #{$component-button-plain-state-default}; + --spirit-color-component-button-plain-state-hover: #{$component-button-plain-state-hover}; + --spirit-color-component-button-primary-border: #{$component-button-primary-border}; + --spirit-color-component-button-primary-content: #{$component-button-primary-content}; + --spirit-color-component-button-primary-state-active: #{$component-button-primary-state-active}; + --spirit-color-component-button-primary-state-default: #{$component-button-primary-state-default}; + --spirit-color-component-button-primary-state-hover: #{$component-button-primary-state-hover}; + --spirit-color-component-button-secondary-border: #{$component-button-secondary-border}; + --spirit-color-component-button-secondary-content: #{$component-button-secondary-content}; + --spirit-color-component-button-secondary-state-active: #{$component-button-secondary-state-active}; + --spirit-color-component-button-secondary-state-default: #{$component-button-secondary-state-default}; + --spirit-color-component-button-secondary-state-hover: #{$component-button-secondary-state-hover}; + --spirit-color-component-button-tertiary-border: #{$component-button-tertiary-border}; + --spirit-color-component-button-tertiary-content: #{$component-button-tertiary-content}; + --spirit-color-component-button-tertiary-state-active: #{$component-button-tertiary-state-active}; + --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default}; + --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover}; + --spirit-color-component-header-background: #{$component-header-background}; + --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default}; + --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover}; + --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected}; + --spirit-color-component-header-item-state-active: #{$component-header-item-state-active}; + --spirit-color-component-header-item-state-default: #{$component-header-item-state-default}; + --spirit-color-component-header-item-state-hover: #{$component-header-item-state-hover}; + --spirit-color-component-header-item-state-selected: #{$component-header-item-state-selected}; + --spirit-color-component-header-stripe-state-selected: #{$component-header-stripe-state-selected}; + --spirit-color-component-header-stripe-state-unselected: #{$component-header-stripe-state-unselected}; + --spirit-color-component-toggle-selected-border: #{$component-toggle-selected-border}; + --spirit-color-component-toggle-selected-content: #{$component-toggle-selected-content}; + --spirit-color-component-toggle-selected-state-active: #{$component-toggle-selected-state-active}; + --spirit-color-component-toggle-selected-state-default: #{$component-toggle-selected-state-default}; + --spirit-color-component-toggle-selected-state-hover: #{$component-toggle-selected-state-hover}; + --spirit-color-component-toggle-unselected-border: #{$component-toggle-unselected-border}; + --spirit-color-component-toggle-unselected-content: #{$component-toggle-unselected-content}; + --spirit-color-component-toggle-unselected-state-active: #{$component-toggle-unselected-state-active}; + --spirit-color-component-toggle-unselected-state-default: #{$component-toggle-unselected-state-default}; + --spirit-color-component-toggle-unselected-state-hover: #{$component-toggle-unselected-state-hover}; + --spirit-color-disabled-background: #{$disabled-background}; + --spirit-color-disabled-border: #{$disabled-border}; + --spirit-color-disabled-content: #{$disabled-content}; + --spirit-color-disabled-foreground: #{$disabled-foreground}; + --spirit-color-emotion-danger-background-basic: #{$emotion-danger-background-basic}; + --spirit-color-emotion-danger-background-subtle: #{$emotion-danger-background-subtle}; + --spirit-color-emotion-danger-border-basic: #{$emotion-danger-border-basic}; + --spirit-color-emotion-danger-border-subtle: #{$emotion-danger-border-subtle}; + --spirit-color-emotion-danger-content-basic: #{$emotion-danger-content-basic}; + --spirit-color-emotion-danger-content-subtle: #{$emotion-danger-content-subtle}; + --spirit-color-emotion-danger-state-active: #{$emotion-danger-state-active}; + --spirit-color-emotion-danger-state-default: #{$emotion-danger-state-default}; + --spirit-color-emotion-danger-state-hover: #{$emotion-danger-state-hover}; + --spirit-color-emotion-informative-background-basic: #{$emotion-informative-background-basic}; + --spirit-color-emotion-informative-background-subtle: #{$emotion-informative-background-subtle}; + --spirit-color-emotion-informative-border-basic: #{$emotion-informative-border-basic}; + --spirit-color-emotion-informative-border-subtle: #{$emotion-informative-border-subtle}; + --spirit-color-emotion-informative-content-basic: #{$emotion-informative-content-basic}; + --spirit-color-emotion-informative-content-subtle: #{$emotion-informative-content-subtle}; + --spirit-color-emotion-informative-state-active: #{$emotion-informative-state-active}; + --spirit-color-emotion-informative-state-default: #{$emotion-informative-state-default}; + --spirit-color-emotion-informative-state-hover: #{$emotion-informative-state-hover}; + --spirit-color-emotion-success-background-basic: #{$emotion-success-background-basic}; + --spirit-color-emotion-success-background-subtle: #{$emotion-success-background-subtle}; + --spirit-color-emotion-success-border-basic: #{$emotion-success-border-basic}; + --spirit-color-emotion-success-border-subtle: #{$emotion-success-border-subtle}; + --spirit-color-emotion-success-content-basic: #{$emotion-success-content-basic}; + --spirit-color-emotion-success-content-subtle: #{$emotion-success-content-subtle}; + --spirit-color-emotion-success-state-active: #{$emotion-success-state-active}; + --spirit-color-emotion-success-state-default: #{$emotion-success-state-default}; + --spirit-color-emotion-success-state-hover: #{$emotion-success-state-hover}; + --spirit-color-emotion-warning-background-basic: #{$emotion-warning-background-basic}; + --spirit-color-emotion-warning-background-subtle: #{$emotion-warning-background-subtle}; + --spirit-color-emotion-warning-border-basic: #{$emotion-warning-border-basic}; + --spirit-color-emotion-warning-border-subtle: #{$emotion-warning-border-subtle}; + --spirit-color-emotion-warning-content-basic: #{$emotion-warning-content-basic}; + --spirit-color-emotion-warning-content-subtle: #{$emotion-warning-content-subtle}; + --spirit-color-emotion-warning-state-active: #{$emotion-warning-state-active}; + --spirit-color-emotion-warning-state-default: #{$emotion-warning-state-default}; + --spirit-color-emotion-warning-state-hover: #{$emotion-warning-state-hover}; + --spirit-color-focus-focus-ring-color-01: #{$focus-focus-ring-color-01}; + --spirit-color-form-field-danger: #{$form-field-danger}; + --spirit-color-form-field-filled-background-state-active: #{$form-field-filled-background-state-active}; + --spirit-color-form-field-filled-background-state-default: #{$form-field-filled-background-state-default}; + --spirit-color-form-field-filled-background-state-hover: #{$form-field-filled-background-state-hover}; + --spirit-color-form-field-filled-border-state-active: #{$form-field-filled-border-state-active}; + --spirit-color-form-field-filled-border-state-default: #{$form-field-filled-border-state-default}; + --spirit-color-form-field-filled-border-state-hover: #{$form-field-filled-border-state-hover}; + --spirit-color-form-field-filled-border-state-selected: #{$form-field-filled-border-state-selected}; + --spirit-color-form-field-filled-content: #{$form-field-filled-content}; + --spirit-color-form-field-filled-placeholder: #{$form-field-filled-placeholder}; + --spirit-color-form-field-helper-text: #{$form-field-helper-text}; + --spirit-color-form-field-label: #{$form-field-label}; + --spirit-color-form-field-success: #{$form-field-success}; + --spirit-color-form-field-warning: #{$form-field-warning}; + --spirit-color-gradient-basic-overlay-color-01: #{$gradient-basic-overlay-color-01}; + --spirit-color-gradient-basic-overlay-color-02: #{$gradient-basic-overlay-color-02}; + --spirit-color-link-primary-state-active: #{$link-primary-state-active}; + --spirit-color-link-primary-state-default: #{$link-primary-state-default}; + --spirit-color-link-primary-state-hover: #{$link-primary-state-hover}; + --spirit-color-link-secondary-state-active: #{$link-secondary-state-active}; + --spirit-color-link-secondary-state-default: #{$link-secondary-state-default}; + --spirit-color-link-secondary-state-hover: #{$link-secondary-state-hover}; + --spirit-color-link-state-visited: #{$link-state-visited}; + --spirit-color-link-tertiary-state-active: #{$link-tertiary-state-active}; + --spirit-color-link-tertiary-state-default: #{$link-tertiary-state-default}; + --spirit-color-link-tertiary-state-hover: #{$link-tertiary-state-hover}; + --spirit-color-neutral-background-basic: #{$neutral-background-basic}; + --spirit-color-neutral-background-subtle: #{$neutral-background-subtle}; + --spirit-color-neutral-border-basic: #{$neutral-border-basic}; + --spirit-color-neutral-border-subtle: #{$neutral-border-subtle}; + --spirit-color-neutral-content-basic: #{$neutral-content-basic}; + --spirit-color-neutral-content-subtle: #{$neutral-content-subtle}; + --spirit-color-neutral-state-active: #{$neutral-state-active}; + --spirit-color-neutral-state-default: #{$neutral-state-default}; + --spirit-color-neutral-state-hover: #{$neutral-state-hover}; + --spirit-color-selected-content-basic: #{$selected-content-basic}; + --spirit-color-selected-content-subtle: #{$selected-content-subtle}; + --spirit-color-selected-state-active: #{$selected-state-active}; + --spirit-color-selected-state-default: #{$selected-state-default}; + --spirit-color-selected-state-hover: #{$selected-state-hover}; + --spirit-color-shadow-shadow-100-color-01: #{$shadow-shadow-100-color-01}; + --spirit-color-shadow-shadow-200-color-01: #{$shadow-shadow-200-color-01}; + --spirit-color-shadow-shadow-300-color-01: #{$shadow-shadow-300-color-01}; + --spirit-color-shadow-shadow-400-color-01: #{$shadow-shadow-400-color-01}; + --spirit-color-text-primary: #{$text-primary}; + --spirit-color-text-secondary: #{$text-secondary}; + --spirit-color-text-tertiary: #{$text-tertiary}; +} diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/index.scss b/packages/design-tokens/src/scss/themes/theme-light-default/index.scss new file mode 100644 index 0000000000..7011938362 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-default/index.scss @@ -0,0 +1 @@ +@forward 'colors'; diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss new file mode 100644 index 0000000000..1bb0bbc19d --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss @@ -0,0 +1,318 @@ +/* This file was generated by Supernova, don't change manually */ +$background-backdrop: #1a1b1b80 !default; + +$background-interactive-state-active: #ffffff1a !default; +$background-interactive-state-default: #fff0 !default; +$background-interactive-state-hover: #ffffff0d !default; + +$background-primary: #6039cc !default; +$background-secondary: #3c2480 !default; +$background-tertiary: #1e1240 !default; + +$border-basic: #a07eff !default; +$border-focus: #1e1240 !default; + +$border-interactive-state-active: #bba3ff !default; +$border-interactive-state-default: #a07eff !default; +$border-interactive-state-hover: #ae91ff !default; +$border-interactive-state-selected: #ffbe00 !default; + +$component-button-plain-border: #fff0 !default; +$component-button-plain-content: #fff !default; +$component-button-plain-state-active: #ffffff26 !default; +$component-button-plain-state-default: #fff0 !default; +$component-button-plain-state-hover: #ffffff1a !default; + +$component-button-primary-border: #1e1240 !default; +$component-button-primary-content: #3c2480 !default; +$component-button-primary-state-active: #e4daff !default; +$component-button-primary-state-default: #fff !default; +$component-button-primary-state-hover: #f1edff !default; + +$component-button-secondary-border: #f8f6ff !default; +$component-button-secondary-content: #fff !default; +$component-button-secondary-state-active: #1a1b1b26 !default; +$component-button-secondary-state-default: #1a1b1b00 !default; +$component-button-secondary-state-hover: #1a1b1b1a !default; + +$component-button-tertiary-border: #1a1b1b00 !default; +$component-button-tertiary-content: #fff !default; +$component-button-tertiary-state-active: #1a1b1b4d !default; +$component-button-tertiary-state-default: #1a1b1b33 !default; +$component-button-tertiary-state-hover: #1a1b1b40 !default; + +$component-header-background: #6039cc !default; +$component-header-item-background-state-active: #1a1b1b26 !default; +$component-header-item-background-state-default: #fff0 !default; +$component-header-item-background-state-hover: #1a1b1b1a !default; +$component-header-item-background-state-selected: #fff0 !default; +$component-header-item-state-active: #e5e5e5 !default; +$component-header-item-state-default: #fff !default; +$component-header-item-state-hover: #f2f2f2 !default; +$component-header-item-state-selected: #ffbe00 !default; +$component-header-stripe-state-selected: #fff !default; +$component-header-stripe-state-unselected: #ffffff40 !default; + +$component-toggle-selected-border: #a07eff !default; +$component-toggle-selected-content: #fff !default; +$component-toggle-selected-state-active: #3e9b4f !default; +$component-toggle-selected-state-default: #327c3f !default; +$component-toggle-selected-state-hover: #388b47 !default; +$component-toggle-unselected-border: #a07eff !default; +$component-toggle-unselected-content: #4e2ea6 !default; +$component-toggle-unselected-state-active: #e4daff !default; +$component-toggle-unselected-state-default: #fff !default; +$component-toggle-unselected-state-hover: #f1edff !default; + +$disabled-background: #ffffff1a !default; +$disabled-border: #fff3 !default; +$disabled-content: #ffffff80 !default; +$disabled-foreground: #fff3 !default; + +$emotion-danger-background-basic: #e40000 !default; +$emotion-danger-background-subtle: #fce5e5 !default; +$emotion-danger-border-basic: #e93333 !default; +$emotion-danger-border-subtle: #ef6666 !default; +$emotion-danger-content-basic: #720000 !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-state-active: #ec4d4d !default; +$emotion-danger-state-default: #e40000 !default; +$emotion-danger-state-hover: #e93333 !default; + +$emotion-informative-background-basic: #0066d8 !default; +$emotion-informative-background-subtle: #e5f0fb !default; +$emotion-informative-border-basic: #3385e0 !default; +$emotion-informative-border-subtle: #66a3e8 !default; +$emotion-informative-content-basic: #00336c !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-state-active: #4d94e4 !default; +$emotion-informative-state-default: #0066d8 !default; +$emotion-informative-state-hover: #3385e0 !default; + +$emotion-success-background-basic: #3e9b4f !default; +$emotion-success-background-subtle: #ecf5ed !default; +$emotion-success-border-basic: #65af72 !default; +$emotion-success-border-subtle: #8bc395 !default; +$emotion-success-content-basic: #1f4e28 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-state-active: #78b984 !default; +$emotion-success-state-default: #3e9b4f !default; +$emotion-success-state-hover: #65af72 !default; + +$emotion-warning-background-basic: #f27d00 !default; +$emotion-warning-background-subtle: #fef2e5 !default; +$emotion-warning-border-basic: #f59733 !default; +$emotion-warning-border-subtle: #f7b166 !default; +$emotion-warning-content-basic: #793f00 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-state-active: #f6a44d !default; +$emotion-warning-state-default: #f27d00 !default; +$emotion-warning-state-hover: #f59733 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-danger: #ec4d4d !default; + +$form-field-filled-background-state-active: #fff !default; +$form-field-filled-background-state-default: #f9f9f9 !default; +$form-field-filled-background-state-hover: #f1edff !default; +$form-field-filled-border-state-active: #936cff !default; +$form-field-filled-border-state-default: #ae91ff !default; +$form-field-filled-border-state-hover: #a07eff !default; +$form-field-filled-border-state-selected: #ffbe00 !default; +$form-field-filled-content: #202020 !default; +$form-field-filled-placeholder: #666 !default; + +$form-field-helper-text: #c9b5ff !default; +$form-field-label: #fff !default; +$form-field-success: #78b984 !default; +$form-field-warning: #f6a44d !default; + +$gradient-basic-overlay-color-01: #606060 !default; +$gradient-basic-overlay-color-02: #60606000 !default; + +$link-primary-state-active: #e5e5e5 !default; +$link-primary-state-default: #fff !default; +$link-primary-state-hover: #f2f2f2 !default; + +$link-secondary-state-active: #e5e5e5 !default; +$link-secondary-state-default: #d6c8ff !default; +$link-secondary-state-hover: #f2f2f2 !default; + +$link-state-visited: #ffbe00 !default; + +$link-tertiary-state-active: #e5e5e5 !default; +$link-tertiary-state-default: #bba3ff !default; +$link-tertiary-state-hover: #f2f2f2 !default; + +$neutral-background-basic: #202020 !default; +$neutral-background-subtle: #f2f2f2 !default; +$neutral-border-basic: #202020 !default; +$neutral-border-subtle: #bfbfbf !default; +$neutral-content-basic: #202020 !default; +$neutral-content-subtle: #fff !default; +$neutral-state-active: #535353 !default; +$neutral-state-default: #202020 !default; +$neutral-state-hover: #404040 !default; + +$selected-content-basic: #fff !default; +$selected-content-subtle: #3c2480 !default; +$selected-state-active: #ffd24d !default; +$selected-state-default: #ffbe00 !default; +$selected-state-hover: #ffcb33 !default; + +$shadow-shadow-100-color-01: #00000026 !default; + +$shadow-shadow-200-color-01: #0003 !default; + +$shadow-shadow-300-color-01: #00000040 !default; + +$shadow-shadow-400-color-01: #00000040 !default; + +$text-primary: #f9f9f9 !default; +$text-secondary: #d9d9d9 !default; +$text-tertiary: #b2b2b2 !default; + +@mixin color-css-variables { + --spirit-color-background-backdrop: #{$background-backdrop}; + --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; + --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; + --spirit-color-background-interactive-state-hover: #{$background-interactive-state-hover}; + --spirit-color-background-primary: #{$background-primary}; + --spirit-color-background-secondary: #{$background-secondary}; + --spirit-color-background-tertiary: #{$background-tertiary}; + --spirit-color-border-basic: #{$border-basic}; + --spirit-color-border-focus: #{$border-focus}; + --spirit-color-border-interactive-state-active: #{$border-interactive-state-active}; + --spirit-color-border-interactive-state-default: #{$border-interactive-state-default}; + --spirit-color-border-interactive-state-hover: #{$border-interactive-state-hover}; + --spirit-color-border-interactive-state-selected: #{$border-interactive-state-selected}; + --spirit-color-component-button-plain-border: #{$component-button-plain-border}; + --spirit-color-component-button-plain-content: #{$component-button-plain-content}; + --spirit-color-component-button-plain-state-active: #{$component-button-plain-state-active}; + --spirit-color-component-button-plain-state-default: #{$component-button-plain-state-default}; + --spirit-color-component-button-plain-state-hover: #{$component-button-plain-state-hover}; + --spirit-color-component-button-primary-border: #{$component-button-primary-border}; + --spirit-color-component-button-primary-content: #{$component-button-primary-content}; + --spirit-color-component-button-primary-state-active: #{$component-button-primary-state-active}; + --spirit-color-component-button-primary-state-default: #{$component-button-primary-state-default}; + --spirit-color-component-button-primary-state-hover: #{$component-button-primary-state-hover}; + --spirit-color-component-button-secondary-border: #{$component-button-secondary-border}; + --spirit-color-component-button-secondary-content: #{$component-button-secondary-content}; + --spirit-color-component-button-secondary-state-active: #{$component-button-secondary-state-active}; + --spirit-color-component-button-secondary-state-default: #{$component-button-secondary-state-default}; + --spirit-color-component-button-secondary-state-hover: #{$component-button-secondary-state-hover}; + --spirit-color-component-button-tertiary-border: #{$component-button-tertiary-border}; + --spirit-color-component-button-tertiary-content: #{$component-button-tertiary-content}; + --spirit-color-component-button-tertiary-state-active: #{$component-button-tertiary-state-active}; + --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default}; + --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover}; + --spirit-color-component-header-background: #{$component-header-background}; + --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default}; + --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover}; + --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected}; + --spirit-color-component-header-item-state-active: #{$component-header-item-state-active}; + --spirit-color-component-header-item-state-default: #{$component-header-item-state-default}; + --spirit-color-component-header-item-state-hover: #{$component-header-item-state-hover}; + --spirit-color-component-header-item-state-selected: #{$component-header-item-state-selected}; + --spirit-color-component-header-stripe-state-selected: #{$component-header-stripe-state-selected}; + --spirit-color-component-header-stripe-state-unselected: #{$component-header-stripe-state-unselected}; + --spirit-color-component-toggle-selected-border: #{$component-toggle-selected-border}; + --spirit-color-component-toggle-selected-content: #{$component-toggle-selected-content}; + --spirit-color-component-toggle-selected-state-active: #{$component-toggle-selected-state-active}; + --spirit-color-component-toggle-selected-state-default: #{$component-toggle-selected-state-default}; + --spirit-color-component-toggle-selected-state-hover: #{$component-toggle-selected-state-hover}; + --spirit-color-component-toggle-unselected-border: #{$component-toggle-unselected-border}; + --spirit-color-component-toggle-unselected-content: #{$component-toggle-unselected-content}; + --spirit-color-component-toggle-unselected-state-active: #{$component-toggle-unselected-state-active}; + --spirit-color-component-toggle-unselected-state-default: #{$component-toggle-unselected-state-default}; + --spirit-color-component-toggle-unselected-state-hover: #{$component-toggle-unselected-state-hover}; + --spirit-color-disabled-background: #{$disabled-background}; + --spirit-color-disabled-border: #{$disabled-border}; + --spirit-color-disabled-content: #{$disabled-content}; + --spirit-color-disabled-foreground: #{$disabled-foreground}; + --spirit-color-emotion-danger-background-basic: #{$emotion-danger-background-basic}; + --spirit-color-emotion-danger-background-subtle: #{$emotion-danger-background-subtle}; + --spirit-color-emotion-danger-border-basic: #{$emotion-danger-border-basic}; + --spirit-color-emotion-danger-border-subtle: #{$emotion-danger-border-subtle}; + --spirit-color-emotion-danger-content-basic: #{$emotion-danger-content-basic}; + --spirit-color-emotion-danger-content-subtle: #{$emotion-danger-content-subtle}; + --spirit-color-emotion-danger-state-active: #{$emotion-danger-state-active}; + --spirit-color-emotion-danger-state-default: #{$emotion-danger-state-default}; + --spirit-color-emotion-danger-state-hover: #{$emotion-danger-state-hover}; + --spirit-color-emotion-informative-background-basic: #{$emotion-informative-background-basic}; + --spirit-color-emotion-informative-background-subtle: #{$emotion-informative-background-subtle}; + --spirit-color-emotion-informative-border-basic: #{$emotion-informative-border-basic}; + --spirit-color-emotion-informative-border-subtle: #{$emotion-informative-border-subtle}; + --spirit-color-emotion-informative-content-basic: #{$emotion-informative-content-basic}; + --spirit-color-emotion-informative-content-subtle: #{$emotion-informative-content-subtle}; + --spirit-color-emotion-informative-state-active: #{$emotion-informative-state-active}; + --spirit-color-emotion-informative-state-default: #{$emotion-informative-state-default}; + --spirit-color-emotion-informative-state-hover: #{$emotion-informative-state-hover}; + --spirit-color-emotion-success-background-basic: #{$emotion-success-background-basic}; + --spirit-color-emotion-success-background-subtle: #{$emotion-success-background-subtle}; + --spirit-color-emotion-success-border-basic: #{$emotion-success-border-basic}; + --spirit-color-emotion-success-border-subtle: #{$emotion-success-border-subtle}; + --spirit-color-emotion-success-content-basic: #{$emotion-success-content-basic}; + --spirit-color-emotion-success-content-subtle: #{$emotion-success-content-subtle}; + --spirit-color-emotion-success-state-active: #{$emotion-success-state-active}; + --spirit-color-emotion-success-state-default: #{$emotion-success-state-default}; + --spirit-color-emotion-success-state-hover: #{$emotion-success-state-hover}; + --spirit-color-emotion-warning-background-basic: #{$emotion-warning-background-basic}; + --spirit-color-emotion-warning-background-subtle: #{$emotion-warning-background-subtle}; + --spirit-color-emotion-warning-border-basic: #{$emotion-warning-border-basic}; + --spirit-color-emotion-warning-border-subtle: #{$emotion-warning-border-subtle}; + --spirit-color-emotion-warning-content-basic: #{$emotion-warning-content-basic}; + --spirit-color-emotion-warning-content-subtle: #{$emotion-warning-content-subtle}; + --spirit-color-emotion-warning-state-active: #{$emotion-warning-state-active}; + --spirit-color-emotion-warning-state-default: #{$emotion-warning-state-default}; + --spirit-color-emotion-warning-state-hover: #{$emotion-warning-state-hover}; + --spirit-color-focus-focus-ring-color-01: #{$focus-focus-ring-color-01}; + --spirit-color-form-field-danger: #{$form-field-danger}; + --spirit-color-form-field-filled-background-state-active: #{$form-field-filled-background-state-active}; + --spirit-color-form-field-filled-background-state-default: #{$form-field-filled-background-state-default}; + --spirit-color-form-field-filled-background-state-hover: #{$form-field-filled-background-state-hover}; + --spirit-color-form-field-filled-border-state-active: #{$form-field-filled-border-state-active}; + --spirit-color-form-field-filled-border-state-default: #{$form-field-filled-border-state-default}; + --spirit-color-form-field-filled-border-state-hover: #{$form-field-filled-border-state-hover}; + --spirit-color-form-field-filled-border-state-selected: #{$form-field-filled-border-state-selected}; + --spirit-color-form-field-filled-content: #{$form-field-filled-content}; + --spirit-color-form-field-filled-placeholder: #{$form-field-filled-placeholder}; + --spirit-color-form-field-helper-text: #{$form-field-helper-text}; + --spirit-color-form-field-label: #{$form-field-label}; + --spirit-color-form-field-success: #{$form-field-success}; + --spirit-color-form-field-warning: #{$form-field-warning}; + --spirit-color-gradient-basic-overlay-color-01: #{$gradient-basic-overlay-color-01}; + --spirit-color-gradient-basic-overlay-color-02: #{$gradient-basic-overlay-color-02}; + --spirit-color-link-primary-state-active: #{$link-primary-state-active}; + --spirit-color-link-primary-state-default: #{$link-primary-state-default}; + --spirit-color-link-primary-state-hover: #{$link-primary-state-hover}; + --spirit-color-link-secondary-state-active: #{$link-secondary-state-active}; + --spirit-color-link-secondary-state-default: #{$link-secondary-state-default}; + --spirit-color-link-secondary-state-hover: #{$link-secondary-state-hover}; + --spirit-color-link-state-visited: #{$link-state-visited}; + --spirit-color-link-tertiary-state-active: #{$link-tertiary-state-active}; + --spirit-color-link-tertiary-state-default: #{$link-tertiary-state-default}; + --spirit-color-link-tertiary-state-hover: #{$link-tertiary-state-hover}; + --spirit-color-neutral-background-basic: #{$neutral-background-basic}; + --spirit-color-neutral-background-subtle: #{$neutral-background-subtle}; + --spirit-color-neutral-border-basic: #{$neutral-border-basic}; + --spirit-color-neutral-border-subtle: #{$neutral-border-subtle}; + --spirit-color-neutral-content-basic: #{$neutral-content-basic}; + --spirit-color-neutral-content-subtle: #{$neutral-content-subtle}; + --spirit-color-neutral-state-active: #{$neutral-state-active}; + --spirit-color-neutral-state-default: #{$neutral-state-default}; + --spirit-color-neutral-state-hover: #{$neutral-state-hover}; + --spirit-color-selected-content-basic: #{$selected-content-basic}; + --spirit-color-selected-content-subtle: #{$selected-content-subtle}; + --spirit-color-selected-state-active: #{$selected-state-active}; + --spirit-color-selected-state-default: #{$selected-state-default}; + --spirit-color-selected-state-hover: #{$selected-state-hover}; + --spirit-color-shadow-shadow-100-color-01: #{$shadow-shadow-100-color-01}; + --spirit-color-shadow-shadow-200-color-01: #{$shadow-shadow-200-color-01}; + --spirit-color-shadow-shadow-300-color-01: #{$shadow-shadow-300-color-01}; + --spirit-color-shadow-shadow-400-color-01: #{$shadow-shadow-400-color-01}; + --spirit-color-text-primary: #{$text-primary}; + --spirit-color-text-secondary: #{$text-secondary}; + --spirit-color-text-tertiary: #{$text-tertiary}; +} diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/index.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/index.scss new file mode 100644 index 0000000000..7011938362 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/index.scss @@ -0,0 +1 @@ +@forward 'colors'; From 4484ba8aecb9b89e73221945badc2f968e76d6ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 12 Nov 2024 13:53:17 +0100 Subject: [PATCH 002/129] Style(design-tokens): Disable `operator-linebreak` to comply with exporter output and prettier --- packages/design-tokens/.eslintrc.cjs | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/design-tokens/.eslintrc.cjs b/packages/design-tokens/.eslintrc.cjs index 983c0137d9..29a5ad7346 100644 --- a/packages/design-tokens/.eslintrc.cjs +++ b/packages/design-tokens/.eslintrc.cjs @@ -8,5 +8,6 @@ module.exports = { rules: { 'prettier/prettier': 'off', + 'operator-linebreak': 'off', }, }; From 97647698b059cfaecc80f5679b58a5e90a76df9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Thu, 31 Oct 2024 16:34:43 +0100 Subject: [PATCH 003/129] Feat(web-react): Rename spaces token object --- packages/web-react/src/types/shared/tokens.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-react/src/types/shared/tokens.ts b/packages/web-react/src/types/shared/tokens.ts index 25a776b4c0..b48edd8365 100644 --- a/packages/web-react/src/types/shared/tokens.ts +++ b/packages/web-react/src/types/shared/tokens.ts @@ -1,6 +1,6 @@ -import { breakpoints, space } from '@lmc-eu/spirit-design-tokens'; +import { breakpoints, spaces } from '@lmc-eu/spirit-design-tokens'; export const BREAKPOINT_MOBILE = 'mobile'; export type BreakpointToken = keyof typeof breakpoints | string; -export type SpaceToken = `${'space-'}${Extract}` | `${'space-'}${number}`; +export type SpaceToken = `${'space-'}${Extract}` | `${'space-'}${number}`; From 96a37c0b73a5fa76b7894ecb98d1852a375a95c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Fri, 16 Aug 2024 17:04:12 +0200 Subject: [PATCH 004/129] Test: Temporarily disable all visual tests and SCSS loading --- packages/web/src/scss/components/index.scss | 73 ++++++++++--------- packages/web/src/scss/foundation/index.scss | 19 ++--- packages/web/src/scss/helpers/index.scss | 19 ++--- packages/web/src/scss/utilities/index.scss | 3 +- .../{scss.test.ts => scss.test-disabled.ts} | 0 .../e2e/components/demo-modal-compare.spec.ts | 33 +++++---- tests/e2e/demo-components-compare.spec.ts | 46 +++++++++++- tests/e2e/demo-homepages.spec.ts | 23 +++--- 8 files changed, 135 insertions(+), 81 deletions(-) rename packages/web/tests/{scss.test.ts => scss.test-disabled.ts} (100%) diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 75616b3ae2..1fd566fec0 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -1,36 +1,37 @@ -@forward 'Accordion'; -@forward 'Alert'; -@forward 'Breadcrumbs'; -@forward 'Button'; -@forward 'Checkbox'; -@forward 'Collapse'; -@forward 'Container'; -@forward 'Divider'; -@forward 'Dropdown'; -@forward 'FieldGroup'; -@forward 'FileUploader'; -@forward 'Flex'; -@forward 'Grid'; -@forward 'Header'; -@forward 'Item'; -@forward 'Modal'; -@forward 'Pagination'; -@forward 'Pill'; -@forward 'Radio'; -@forward 'ScrollView'; -@forward 'Select'; -@forward 'Stack'; -@forward 'Tabs'; -@forward 'Tag'; -@forward 'TextArea'; -@forward 'TextField'; -@forward 'Toast'; -@forward 'Tooltip'; -@forward 'UNSTABLE_ActionLayout'; -@forward 'UNSTABLE_Avatar'; -@forward 'UNSTABLE_EmptyState'; -@forward 'UNSTABLE_PartnerLogo'; -@forward 'UNSTABLE_ProductLogo'; -@forward 'UNSTABLE_Section'; -@forward 'UNSTABLE_Slider'; -@forward 'UNSTABLE_Toggle'; +// This code is commented out until we switch it to the new token system +// @forward 'Accordion'; +// @forward 'Alert'; +// @forward 'Breadcrumbs'; +// @forward 'Button'; +// @forward 'Checkbox'; +// @forward 'Collapse'; +// @forward 'Container'; +// @forward 'Divider'; +// @forward 'Dropdown'; +// @forward 'FieldGroup'; +// @forward 'FileUploader'; +// @forward 'Flex'; +// @forward 'Grid'; +// @forward 'Header'; +// @forward 'Item'; +// @forward 'Modal'; +// @forward 'Pagination'; +// @forward 'Pill'; +// @forward 'Radio'; +// @forward 'ScrollView'; +// @forward 'Select'; +// @forward 'Stack'; +// @forward 'Tabs'; +// @forward 'Tag'; +// @forward 'TextArea'; +// @forward 'TextField'; +// @forward 'Toast'; +// @forward 'Tooltip'; +// @forward 'UNSTABLE_ActionLayout'; +// @forward 'UNSTABLE_Avatar'; +// @forward 'UNSTABLE_EmptyState'; +// @forward 'UNSTABLE_PartnerLogo'; +// @forward 'UNSTABLE_ProductLogo'; +// @forward 'UNSTABLE_Section'; +// @forward 'UNSTABLE_Slider'; +// @forward 'UNSTABLE_Toggle'; diff --git a/packages/web/src/scss/foundation/index.scss b/packages/web/src/scss/foundation/index.scss index 0b5e4da6e7..a7f8e0c1df 100644 --- a/packages/web/src/scss/foundation/index.scss +++ b/packages/web/src/scss/foundation/index.scss @@ -1,9 +1,10 @@ -@forward '@csstools/normalize.css/normalize.css'; -@forward 'box-sizing'; -@forward 'images'; -@forward 'interactions'; -@forward 'links'; -@forward 'reset'; -@forward 'shared'; -@forward 'tokens'; -@forward 'typography'; +// This code is commented out until we switch it to the new token system +// @forward '@csstools/normalize.css/normalize.css'; +// @forward 'box-sizing'; +// @forward 'images'; +// @forward 'interactions'; +// @forward 'links'; +// @forward 'reset'; +// @forward 'shared'; +// @forward 'tokens'; +// @forward 'typography'; diff --git a/packages/web/src/scss/helpers/index.scss b/packages/web/src/scss/helpers/index.scss index 79b48fcc8a..1963035cf7 100644 --- a/packages/web/src/scss/helpers/index.scss +++ b/packages/web/src/scss/helpers/index.scss @@ -1,9 +1,10 @@ -@forward 'accessibility'; -@forward 'animations'; -@forward 'breakout'; -@forward 'images'; -@forward 'links'; -@forward 'lists'; -@forward 'scroll-control'; -@forward 'text'; -@forward 'typography'; +// This code is commented out until we switch it to the new token system +// @forward 'accessibility'; +// @forward 'animations'; +// @forward 'breakout'; +// @forward 'images'; +// @forward 'links'; +// @forward 'lists'; +// @forward 'scroll-control'; +// @forward 'text'; +// @forward 'typography'; diff --git a/packages/web/src/scss/utilities/index.scss b/packages/web/src/scss/utilities/index.scss index e611d65b2b..bbb4d31f80 100644 --- a/packages/web/src/scss/utilities/index.scss +++ b/packages/web/src/scss/utilities/index.scss @@ -1 +1,2 @@ -@forward 'utilities'; +// This code is commented out until we switch it to the new token system +// @forward 'utilities'; diff --git a/packages/web/tests/scss.test.ts b/packages/web/tests/scss.test-disabled.ts similarity index 100% rename from packages/web/tests/scss.test.ts rename to packages/web/tests/scss.test-disabled.ts diff --git a/tests/e2e/components/demo-modal-compare.spec.ts b/tests/e2e/components/demo-modal-compare.spec.ts index 9f98616449..9f959940d1 100644 --- a/tests/e2e/components/demo-modal-compare.spec.ts +++ b/tests/e2e/components/demo-modal-compare.spec.ts @@ -99,25 +99,28 @@ const modalTestConfigs: ModalTestConfig[] = [ const componentName = 'Modal'; const testConfigs: TestConfig[] = [ - { - componentName, - componentsDir: '/src/scss/components', - packageName: 'web', - }, - { - componentName, - componentsDir: '/src/components', - packageName: 'web-react', - }, + // Commented out because we changed tokens and broke utilities, helper and styles used in the demos. + // Should be uncommented in DS-1452 ticket. + // Jan Kryšpín 2024-08-27 + // { + // componentName, + // componentsDir: '/src/scss/components', + // packageName: 'web', + // }, + // { + // componentName, + // componentsDir: '/src/components', + // packageName: 'web-react', + // }, ]; // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet. if (!isTestingEnvironment()) { - testConfigs.push({ - componentName, - componentsDir: '/components', - packageName: 'web-twig', - }); + // testConfigs.push({ + // componentName, + // componentsDir: '/components', + // packageName: 'web-twig', + // }); } testConfigs.forEach(runComponentCompareTests); diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts index 577f1ccaa4..a1fbca7631 100644 --- a/tests/e2e/demo-components-compare.spec.ts +++ b/tests/e2e/demo-components-compare.spec.ts @@ -5,7 +5,51 @@ import { readdirSync } from 'fs'; import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from '../helpers'; // Tests that are intentionally broken, but will be fixed in the future -const IGNORED_TESTS: string[] = []; +const IGNORED_TESTS: string[] = [ + 'Accordion', + 'Alert', + 'Breadcrumbs', + 'Button', + 'ButtonLink', + 'Checkbox', + 'Collapse', + 'Container', + 'Divider', + 'Dropdown', + 'FieldGroup', + 'FileUploader', + 'Flex', + 'Grid', + 'Header', + 'Heading', + 'Icon', + 'Item', + 'Link', + 'Modal', + 'Pagination', + 'Pill', + 'Radio', + 'ScrollView', + 'Select', + 'Spinner', + 'Stack', + 'Tabs', + 'Tag', + 'Text', + 'TextArea', + 'TextField', + 'Toast', + 'Tooltip', + 'UNSTABLE_ActionLayout', + 'UNSTABLE_Avatar', + 'UNSTABLE_EmptyState', + 'UNSTABLE_PartnerLogo', + 'UNSTABLE_ProductLogo', + 'UNSTABLE_Section', + 'UNSTABLE_Slider', + 'UNSTABLE_Toggle', + 'UNSTABLE_Truncate', +]; interface TestConfig { packageDir: string; diff --git a/tests/e2e/demo-homepages.spec.ts b/tests/e2e/demo-homepages.spec.ts index 46bada1754..5d105c0955 100644 --- a/tests/e2e/demo-homepages.spec.ts +++ b/tests/e2e/demo-homepages.spec.ts @@ -1,18 +1,21 @@ -import { isTesting } from '@lmc-eu/spirit-common/constants/environments'; -import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers'; +// import { isTesting } from '@lmc-eu/spirit-common/constants/environments'; +// import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers'; import { test } from '@playwright/test'; import { takeScreenshot, waitForPageLoad } from '../helpers'; test.describe('Demo Homepages', () => { const demos = [ - { - url: isTesting() ? SERVERS.TESTING.web : getDevelopmentEndpointUri('web', { isDocker: true }), - package: 'web', - }, - { - url: isTesting() ? SERVERS.TESTING['web-react'] : getDevelopmentEndpointUri('web-react', { isDocker: true }), - package: 'web-react', - }, + // Commented out because we changed tokens and broke utilities, helper and styles used in the demos. + // Can be enabled when new styles are applied to the demos. Or in the DS-1455 ticket. + // Jan Kryšpín 2024-08-27 + // { + // url: isTesting() ? SERVERS.TESTING.web : getDevelopmentEndpointUri('web', { isDocker: true }), + // package: 'web', + // }, + // { + // url: isTesting() ? SERVERS.TESTING['web-react'] : getDevelopmentEndpointUri('web-react', { isDocker: true }), + // package: 'web-react', + // }, ]; for (const demo of demos) { From 52431f49143844d3c5d49339c81e1e70b924a5aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Sun, 18 Aug 2024 22:28:56 +0200 Subject: [PATCH 005/129] BREAKING CHANGE(web): Introduce themes and use new design tokens for foundations #DS-1431 --- packages/web/README.md | 11 +- packages/web/package.json | 3 +- packages/web/src/scss/foundation/_shared.scss | 2 +- packages/web/src/scss/foundation/_tokens.scss | 108 +++--------------- .../web/src/scss/foundation/_typography.scss | 4 +- packages/web/src/scss/foundation/index.scss | 19 ++- packages/web/src/scss/helpers/index.scss | 19 ++- .../web/src/scss/helpers/links/_links.scss | 40 ++++--- .../scss/helpers/typography/_typography.scss | 4 +- packages/web/src/scss/index.scss | 1 + .../web/src/scss/settings/_dictionaries.scss | 1 - .../web/src/scss/settings/_transitions.scss | 2 +- .../web/src/scss/settings/_utilities.scss | 21 ++-- packages/web/src/scss/themes/index.scss | 4 + .../scss/tools/__tests__/_string.test.scss | 8 ++ .../scss/tools/__tests__/_themes.test.scss | 74 ++++++++++++ .../scss/tools/__tests__/_tokens.test.scss | 28 +++++ packages/web/src/scss/tools/_links.scss | 9 +- packages/web/src/scss/tools/_string.scss | 6 + packages/web/src/scss/tools/_themes.scss | 79 +++++++++++++ packages/web/src/scss/tools/_tokens.scss | 11 ++ packages/web/src/scss/tools/_typography.scss | 4 +- packages/web/src/scss/utilities/index.scss | 3 +- 23 files changed, 297 insertions(+), 164 deletions(-) create mode 100644 packages/web/src/scss/themes/index.scss create mode 100644 packages/web/src/scss/tools/__tests__/_themes.test.scss create mode 100644 packages/web/src/scss/tools/__tests__/_tokens.test.scss create mode 100644 packages/web/src/scss/tools/_themes.scss create mode 100644 packages/web/src/scss/tools/_tokens.scss diff --git a/packages/web/README.md b/packages/web/README.md index efe624791e..8f787da526 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -23,15 +23,17 @@ npm install --save @lmc-eu/spirit-web ### Quick Start with CSS -The pre-built Spirit CSS is a great choice for small one-off projects, -prototypes and documentations. +The pre-built Spirit CSS is a great choice for small one-off projects, prototypes and documentations. -Link the full, vendor-prefixed and minimised CSS with default Spirit branding -in your HTML template: +Link the complete, vendor-prefixed and minimised CSS with default Spirit branding in your HTML template: ```html + + + + ``` 👉 Alternatively, you can use [CDN](#cdn) links when you don't want to install any npm packages. @@ -160,6 +162,7 @@ Spirit Design System is also available on CDN: | CSS: Foundation | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/foundation.min.css | | CSS: Components | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/components.min.css | | CSS: Helpers | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/helpers.min.css | +| CSS: Themes | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/themes.min.css | | CSS: Utilities | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/css/utilities.min.css | | JavaScript | https://cdn.jsdelivr.net/npm/@lmc-eu/spirit-web@latest/js/bundle/spirit-web.bundle.min.js | diff --git a/packages/web/package.json b/packages/web/package.json index 459d02c3a6..bf3d7567a4 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -28,8 +28,9 @@ "css:compile:components": "sass --load-path=../design-tokens/scss src/scss/components/index.scss dist/css/components.css", "css:compile:foundation": "sass --load-path=../design-tokens/scss --load-path=../../node_modules src/scss/foundation/index.scss dist/css/foundation.css", "css:compile:helpers": "sass --load-path=../design-tokens/scss src/scss/helpers/index.scss dist/css/helpers.css", + "css:compile:themes": "sass --load-path=../design-tokens/scss src/scss/themes/index.scss dist/css/themes.css", "css:compile:utilities": "sass --load-path=../design-tokens/scss src/scss/utilities/index.scss dist/css/utilities.css", - "css:compile": "yarn css:compile:components && yarn css:compile:foundation && yarn css:compile:helpers && yarn css:compile:utilities", + "css:compile": "yarn css:compile:components && yarn css:compile:foundation && yarn css:compile:helpers && yarn css:compile:themes && yarn css:compile:utilities", "css:prefix": "postcss --config ./config/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"", "css:minify": "cleancss --format breaksWith=lf --source-map-inline-sources --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"", "js": "npm-run-all js:compile", diff --git a/packages/web/src/scss/foundation/_shared.scss b/packages/web/src/scss/foundation/_shared.scss index 95dfa89236..46cd2f88fa 100644 --- a/packages/web/src/scss/foundation/_shared.scss +++ b/packages/web/src/scss/foundation/_shared.scss @@ -2,5 +2,5 @@ // Always declare margins in the same direction. :where(address, blockquote, h1, h2, h3, h4, h5, h6, p, pre, dl, ol, ul, figure, hr, table, fieldset):not(:last-child) { - margin-bottom: tokens.$space-600; + margin-bottom: tokens.$space-700; } diff --git a/packages/web/src/scss/foundation/_tokens.scss b/packages/web/src/scss/foundation/_tokens.scss index 8b849cc99e..b6a6a16d90 100644 --- a/packages/web/src/scss/foundation/_tokens.scss +++ b/packages/web/src/scss/foundation/_tokens.scss @@ -1,103 +1,25 @@ +@use 'sass:meta'; @use '@tokens' as tokens; +@use '../tools/tokens' as tokens-tools; + +$tokens: ( + gradient: tokens.$gradients, + space: tokens.$spaces, + container: tokens.$containers, + grid: tokens.$grids, + breakpoint: tokens.$breakpoints, + radius: tokens.$radii, + shadow: tokens.$shadows, + typography: tokens.$styles, +); :root { // Print all token values as CSS variables - // Borders - --spirit-border-style-0: #{tokens.$border-style-0}; - --spirit-border-style-100: #{tokens.$border-style-100}; - --spirit-border-style-200: #{tokens.$border-style-200}; --spirit-border-width-0: #{tokens.$border-width-0}; --spirit-border-width-100: #{tokens.$border-width-100}; --spirit-border-width-200: #{tokens.$border-width-200}; - // Colors - /// Action colors - @each $color-name, $color-value in tokens.$action-colors { - --spirit-color-action-#{$color-name}: #{$color-value}; - } - - /// Background colors - @each $color-name, $color-value in tokens.$background-colors { - --spirit-color-background-#{$color-name}: #{$color-value}; - } - - /// Border colors - @each $color-name, $color-value in tokens.$border-colors { - --spirit-color-border-#{$color-name}: #{$color-value}; - } - - /// Brand colors - @each $color-name, $color-value in tokens.$brand-colors { - --spirit-color-brand-#{$color-name}: #{$color-value}; - } - - /// Emotion - @each $color-name, $color-value in tokens.$emotion-colors { - --spirit-color-emotion-#{$color-name}: #{$color-value}; - } - - /// Focus colors - @each $color-name, $color-value in tokens.$focus-colors { - --spirit-color-focus-#{$color-name}: #{$color-value}; - } - - /// Text colors - @each $color-name, $color-value in tokens.$text-colors { - --spirit-color-text-#{$color-name}: #{$color-value}; - } - - // Gradients - @each $gradient-name, $gradient-value in tokens.$gradients { - --spirit-gradient-#{$gradient-name}: #{$gradient-value}; - } - - // Measures - @each $space-name, $space-value in tokens.$spaces { - --spirit-space-#{$space-name}: #{$space-value}; - } - - // Other - /// Containers - @each $container-name, $container-value in tokens.$containers { - --spirit-container-#{$container-name}: #{$container-value}; - } - - /// Grids - @each $grid-name, $grid-value in tokens.$grids { - --spirit-grid-#{$grid-name}: #{$grid-value}; - } - - /// Container paddings - @each $container-padding-name, $container-padding-value in tokens.$container-paddings { - --spirit-container-padding-#{$container-padding-name}: #{$container-padding-value}; - } - - /// Grid gutters - @each $grid-gutter-name, $grid-gutter-value in tokens.$grid-gutters { - --spirit-grid-gutter-#{$grid-gutter-name}: #{$grid-gutter-value}; - } - - /// Breakpoints - @each $breakpoint-name, $breakpoint-value in tokens.$breakpoints { - --spirit-breakpoint-#{$breakpoint-name}: #{$breakpoint-value}; - } - - // Radii - @each $radius-name, $radius-value in tokens.$radii { - --spirit-radius-#{$radius-name}: #{$radius-value}; - } - - // Shadows - @each $shadow-name, $shadow-value in tokens.$shadows { - --spirit-shadow-#{$shadow-name}: #{$shadow-value}; - } - - // Typography - @each $style-name, $style-value in tokens.$styles { - @each $breakpoint-name, $breakpoint-value in $style-value { - @each $property-name, $property-value in $breakpoint-value { - --spirit-typography-#{$style-name}-#{$breakpoint-name}-#{$property-name}: #{$property-value}; - } - } + @each $key, $value in $tokens { + @include tokens-tools.generate-css-variables($map: $value, $prefix: 'spirit-#{$key}'); } } diff --git a/packages/web/src/scss/foundation/_typography.scss b/packages/web/src/scss/foundation/_typography.scss index 02ea6850cb..29ba7a21bf 100644 --- a/packages/web/src/scss/foundation/_typography.scss +++ b/packages/web/src/scss/foundation/_typography.scss @@ -8,7 +8,5 @@ } :where(body) { - @include typography.generate(tokens.$body-medium-text-regular); - - color: tokens.$text-primary-default; + @include typography.generate(tokens.$body-medium-regular); } diff --git a/packages/web/src/scss/foundation/index.scss b/packages/web/src/scss/foundation/index.scss index a7f8e0c1df..0b5e4da6e7 100644 --- a/packages/web/src/scss/foundation/index.scss +++ b/packages/web/src/scss/foundation/index.scss @@ -1,10 +1,9 @@ -// This code is commented out until we switch it to the new token system -// @forward '@csstools/normalize.css/normalize.css'; -// @forward 'box-sizing'; -// @forward 'images'; -// @forward 'interactions'; -// @forward 'links'; -// @forward 'reset'; -// @forward 'shared'; -// @forward 'tokens'; -// @forward 'typography'; +@forward '@csstools/normalize.css/normalize.css'; +@forward 'box-sizing'; +@forward 'images'; +@forward 'interactions'; +@forward 'links'; +@forward 'reset'; +@forward 'shared'; +@forward 'tokens'; +@forward 'typography'; diff --git a/packages/web/src/scss/helpers/index.scss b/packages/web/src/scss/helpers/index.scss index 1963035cf7..79b48fcc8a 100644 --- a/packages/web/src/scss/helpers/index.scss +++ b/packages/web/src/scss/helpers/index.scss @@ -1,10 +1,9 @@ -// This code is commented out until we switch it to the new token system -// @forward 'accessibility'; -// @forward 'animations'; -// @forward 'breakout'; -// @forward 'images'; -// @forward 'links'; -// @forward 'lists'; -// @forward 'scroll-control'; -// @forward 'text'; -// @forward 'typography'; +@forward 'accessibility'; +@forward 'animations'; +@forward 'breakout'; +@forward 'images'; +@forward 'links'; +@forward 'lists'; +@forward 'scroll-control'; +@forward 'text'; +@forward 'typography'; diff --git a/packages/web/src/scss/helpers/links/_links.scss b/packages/web/src/scss/helpers/links/_links.scss index d305ae2bcc..3afad6d021 100644 --- a/packages/web/src/scss/helpers/links/_links.scss +++ b/packages/web/src/scss/helpers/links/_links.scss @@ -8,23 +8,28 @@ // 8. Disable link underline everywhere. @use 'sass:map'; -@use '@tokens' as tokens; +@use '@global' as global-tokens; @use '../../settings/cursors'; -@use '../../settings/dictionaries' as dictionaries-settings; +@use '../../settings/globals'; + +// @use '../../settings/dictionaries' as dictionaries-settings; @use '../../settings/links' as links-settings; -@use '../../tools/dictionaries'; + +// @use '../../tools/dictionaries'; @use '../../tools/links' as links-tools; +// TODO // 1. -@include dictionaries.prepare-button-links(dictionaries-settings.$action-link-colors); +// @include dictionaries.prepare-button-links(dictionaries-settings.$action-link-colors); +// TODO // 2. -@include dictionaries.generate-link-colors( - '.link', - dictionaries-settings.$action-link-colors, - tokens.$action-colors, - (default, hover, active, disabled) -); +// @include dictionaries.generate-link-colors( +// '.link', +// dictionaries-settings.$action-link-colors, +// tokens.$action-colors, +// (default, hover, active, disabled) +// ); // 3. [class*='typography-heading'] a { @@ -59,16 +64,17 @@ button.link-disabled:not(.link-underlined) { // 7. [class*='typography-heading'] :visited { - color: map.get(tokens.$action-colors, link-primary-visited); + color: var(--#{globals.$prefix}color-action-link-visited-default); } +// TODO // 7. -@include dictionaries.generate-link-colors( - '[class*="typography-heading"] .link', - dictionaries-settings.$text-colors, - tokens.$action-colors, - visited -); +// @include dictionaries.generate-link-colors( +// '[class*="typography-heading"] .link', +// dictionaries-settings.$text-colors, +// tokens.$action-colors, +// visited +// ); // 8. // stylelint-disable selector-no-qualifying-type -- Increase specificity to override button variant styles. diff --git a/packages/web/src/scss/helpers/typography/_typography.scss b/packages/web/src/scss/helpers/typography/_typography.scss index e9a4c846f6..1b38f70c0f 100644 --- a/packages/web/src/scss/helpers/typography/_typography.scss +++ b/packages/web/src/scss/helpers/typography/_typography.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '@tokens' as tokens; +@use '@global' as global-tokens; @use '../../tools/typography'; -@each $style-name, $style-value in tokens.$styles { +@each $style-name, $style-value in global-tokens.$styles { .typography-#{$style-name} { @include typography.generate($style-value); } diff --git a/packages/web/src/scss/index.scss b/packages/web/src/scss/index.scss index b2b504992c..8da891cb4c 100644 --- a/packages/web/src/scss/index.scss +++ b/packages/web/src/scss/index.scss @@ -1,6 +1,7 @@ // ⚠️ Order matters! // Layers are ordered by specificity, from the most generic rules to components to high-specificity overrides. +@forward 'themes'; @forward 'foundation'; @forward 'components'; @forward 'helpers'; diff --git a/packages/web/src/scss/settings/_dictionaries.scss b/packages/web/src/scss/settings/_dictionaries.scss index 7bf3a1f97b..be476659f4 100644 --- a/packages/web/src/scss/settings/_dictionaries.scss +++ b/packages/web/src/scss/settings/_dictionaries.scss @@ -1,5 +1,4 @@ @use 'sass:list'; -@use '@tokens' as tokens; $_alignments-x-extended: stretch; $_alignments-y-extended: stretch; diff --git a/packages/web/src/scss/settings/_transitions.scss b/packages/web/src/scss/settings/_transitions.scss index 5a89450d24..be1c5208b0 100644 --- a/packages/web/src/scss/settings/_transitions.scss +++ b/packages/web/src/scss/settings/_transitions.scss @@ -16,4 +16,4 @@ $timing-eased-in-out-fast: cubic-bezier(0.4, 0, 0.2, 1); $scale-ratio-small-objects: 0.95; $scale-ratio-large-objects: 0.975; -$shift-distance-medium: tokens.$space-600; +$shift-distance-medium: tokens.$space-700; diff --git a/packages/web/src/scss/settings/_utilities.scss b/packages/web/src/scss/settings/_utilities.scss index de01d52197..18618905a6 100644 --- a/packages/web/src/scss/settings/_utilities.scss +++ b/packages/web/src/scss/settings/_utilities.scss @@ -134,25 +134,20 @@ $utilities: ( responsive: false, property: color, class: text, - values: - map.merge( - tokens.$text-colors, - ( - brand-primary: tokens.$brand-primary, - brand-secondary: tokens.$brand-secondary, - ) - ), + values: ( + primary: tokens.$text-primary, + secondary: tokens.$text-secondary, + tertiary: tokens.$text-tertiary, + ), ), 'background-color': ( responsive: false, property: background-color, class: bg, values: ( - basic: tokens.$background-basic, - brand-primary: tokens.$brand-primary, - brand-secondary: tokens.$brand-secondary, - cover: tokens.$background-cover, - inverted: tokens.$background-inverted, + primary: tokens.$background-primary, + secondary: tokens.$background-secondary, + tertiary: tokens.$background-tertiary, ), ), 'border-radius': ( diff --git a/packages/web/src/scss/themes/index.scss b/packages/web/src/scss/themes/index.scss new file mode 100644 index 0000000000..cb5527706f --- /dev/null +++ b/packages/web/src/scss/themes/index.scss @@ -0,0 +1,4 @@ +@use '@themes' as themes; +@use '../tools/themes' as themes-tools; + +@include themes-tools.generate($themes: themes.$themes); diff --git a/packages/web/src/scss/tools/__tests__/_string.test.scss b/packages/web/src/scss/tools/__tests__/_string.test.scss index 52dee35549..f30bc2c9e9 100644 --- a/packages/web/src/scss/tools/__tests__/_string.test.scss +++ b/packages/web/src/scss/tools/__tests__/_string.test.scss @@ -28,3 +28,11 @@ @include test.assert-equal(string.replace('no-replacement-here', 'z', 'y'), 'no-replacement-here'); } } + +@include test.describe('singularize function') { + @include test.it('should singularize a string') { + @include test.assert-equal(string.singularize('gradients'), 'gradient'); + @include test.assert-equal(string.singularize('variables'), 'variable'); + @include test.assert-equal(string.singularize('colors'), 'color'); + } +} diff --git a/packages/web/src/scss/tools/__tests__/_themes.test.scss b/packages/web/src/scss/tools/__tests__/_themes.test.scss new file mode 100644 index 0000000000..463300bb5d --- /dev/null +++ b/packages/web/src/scss/tools/__tests__/_themes.test.scss @@ -0,0 +1,74 @@ +@use 'sass:meta'; +@use 'true' as test; +@use '../themes'; + +$test-action-button-active-light-default: #fff; +$test-action-button-active-light-on-brand: #000; + +$test-theme-light-default: ( + action: ( + button: ( + active: $test-action-button-active-light-default, + ), + ), +); + +$test-theme-light-on-brand: ( + action: ( + button: ( + active: $test-action-button-active-light-on-brand, + ), + ), +); + +@mixin css-variables-light-default { + --spirit-color-action-button-active: #{$test-action-button-active-light-default}; +} + +@mixin css-variables-light-on-brand { + --spirit-color-action-button-active: #{$test-action-button-active-light-on-brand}; +} + +$test-themes: ( + theme-light-default: ( + variables: $test-theme-light-default, + mixins: ( + css-variables: meta.get-mixin('css-variables-light-default'), + ), + ), + theme-light-on-brand: ( + variables: $test-theme-light-on-brand, + mixins: ( + css-variables: meta.get-mixin('css-variables-light-on-brand'), + ), + ), +); + +@include test.describe('generate mixin') { + @include test.it('should generate default and other themes') { + @include test.assert() { + @include test.output() { + @include themes.generate($themes: $test-themes, $add-background-image-urls: false); + } + + @include test.expect() { + :root, + .theme-light-default { + --spirit-color-action-button-active: #fff; + } + + :where(:root, .theme-light-default) { + color: var(--spirit-color-text-primary); + } + + .theme-light-on-brand { + --spirit-color-action-button-active: #000; + } + + :where(.theme-light-on-brand) { + color: var(--spirit-color-text-primary); + } + } + } + } +} diff --git a/packages/web/src/scss/tools/__tests__/_tokens.test.scss b/packages/web/src/scss/tools/__tests__/_tokens.test.scss new file mode 100644 index 0000000000..2458ec9199 --- /dev/null +++ b/packages/web/src/scss/tools/__tests__/_tokens.test.scss @@ -0,0 +1,28 @@ +@use 'true' as test; +@use '../tokens'; + +$test-theme: ( + action: ( + button: ( + active: #fff, + ), + ), +); + +@include test.describe('generate-css-variables mixin') { + @include test.it('should generate CSS variables based on the provided map') { + @include test.assert() { + @include test.output() { + :root { + @include tokens.generate-css-variables($test-theme, 'test-'); + } + } + + @include test.expect() { + :root { + --test-action-button-active: #fff; + } + } + } + } +} diff --git a/packages/web/src/scss/tools/_links.scss b/packages/web/src/scss/tools/_links.scss index db1d3e59ff..c0f6120bfd 100644 --- a/packages/web/src/scss/tools/_links.scss +++ b/packages/web/src/scss/tools/_links.scss @@ -1,4 +1,5 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; +@use '../settings/globals'; @use '../settings/links'; @mixin base($set-color: false) { @@ -6,7 +7,7 @@ text-underline-offset: links.$text-underline-offset; @if $set-color { - color: tokens.$action-link-primary-default; + color: var(--#{globals.$prefix}color-action-link-primary-default); } @media (hover: hover) { @@ -14,7 +15,7 @@ text-decoration: links.$text-decoration-hover; @if $set-color { - color: tokens.$action-link-primary-hover; + color: var(--#{globals.$prefix}color-action-link-primary-hover); } } } @@ -23,7 +24,7 @@ text-decoration: links.$text-decoration-hover; @if $set-color { - color: tokens.$action-link-primary-active; + color: var(--#{globals.$prefix}color-action-link-primary-active); } } } diff --git a/packages/web/src/scss/tools/_string.scss b/packages/web/src/scss/tools/_string.scss index c8fa445a5d..cea6cd6da1 100644 --- a/packages/web/src/scss/tools/_string.scss +++ b/packages/web/src/scss/tools/_string.scss @@ -54,3 +54,9 @@ @return $string; } + +// Singularize a string +// Example: singularize('gradients') will return 'gradient' +@function singularize($string) { + @return string.slice($string, 1, string.length($string) - 1); +} diff --git a/packages/web/src/scss/tools/_themes.scss b/packages/web/src/scss/tools/_themes.scss new file mode 100644 index 0000000000..40d46fa0c2 --- /dev/null +++ b/packages/web/src/scss/tools/_themes.scss @@ -0,0 +1,79 @@ +// 1.The default theme will be applied to the :root element. +// As in Figma we make the first theme the default one. +// 2. Set the default text color in each theme. + +@use 'sass:map'; +@use 'sass:meta'; +@use '@tokens' as tokens; +@use 'svg'; + +@mixin generate($themes, $add-background-image-urls: true) { + // 1. + $is-default-theme: true; + + @each $theme-name, $theme-token-types in $themes { + $selector: if($is-default-theme, ':root, .#{$theme-name}', '.#{$theme-name}'); + $theme-variables: map.get($theme-token-types, variables); + $theme-mixins: map.get($theme-token-types, mixins); + + #{$selector} { + @each $theme-mixin-name, $theme-mixin in $theme-mixins { + @include meta.apply($theme-mixin); + } + + @if $add-background-image-urls { + @include generate-background-image-urls($themed-tokens: $theme-variables); + } + } + + // 2. + :where(#{$selector}) { + color: tokens.$text-primary; + } + + $is-default-theme: false; + } +} + +@mixin generate-background-image-urls($themed-tokens) { + // Checkbox + --#{tokens.$css-variable-prefix}checkbox-input-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + --#{tokens.$css-variable-prefix}checkbox-input-disabled-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + --#{tokens.$css-variable-prefix}checkbox-input-indeterminate-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + --#{tokens.$css-variable-prefix}checkbox-input-indeterminate-disabled-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + + // Slider + --#{tokens.$css-variable-prefix}slider-thumb-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + --#{tokens.$css-variable-prefix}slider-thumb-disabled-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + + // Toggle + --#{tokens.$css-variable-prefix}toggle-input-mark-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + --#{tokens.$css-variable-prefix}toggle-input-mark-disabled-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + --#{tokens.$css-variable-prefix}toggle-input-mark-checked-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + --#{tokens.$css-variable-prefix}toggle-input-mark-checked-disabled-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; + + // Tooltip + --#{tokens.$css-variable-prefix}tooltip-arrow-background-image-url: #{svg.escape( + url('data:image/svg+xml,') + )}; +} diff --git a/packages/web/src/scss/tools/_tokens.scss b/packages/web/src/scss/tools/_tokens.scss new file mode 100644 index 0000000000..bfede3c912 --- /dev/null +++ b/packages/web/src/scss/tools/_tokens.scss @@ -0,0 +1,11 @@ +@use 'sass:meta'; + +@mixin generate-css-variables($map, $prefix: '') { + @each $key, $value in $map { + @if meta.type-of($value) == map { + @include generate-css-variables($value, $prefix + '-' + $key); + } @else { + --#{$prefix + '-' + $key}: #{$value}; + } + } +} diff --git a/packages/web/src/scss/tools/_typography.scss b/packages/web/src/scss/tools/_typography.scss index 541b1e6cb8..b5f7305a36 100644 --- a/packages/web/src/scss/tools/_typography.scss +++ b/packages/web/src/scss/tools/_typography.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use 'sass:string'; @use 'breakpoint'; -@use '@tokens' as tokens; +@use '@global' as global-tokens; @mixin generate($token) { - @each $breakpoint-name, $breakpoint-value in tokens.$breakpoints { + @each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints { @include breakpoint.up($breakpoint-value) { @if map.has-key($token, $breakpoint-name, font-style) { font-style: map.get($token, $breakpoint-name, font-style); diff --git a/packages/web/src/scss/utilities/index.scss b/packages/web/src/scss/utilities/index.scss index bbb4d31f80..e611d65b2b 100644 --- a/packages/web/src/scss/utilities/index.scss +++ b/packages/web/src/scss/utilities/index.scss @@ -1,2 +1 @@ -// This code is commented out until we switch it to the new token system -// @forward 'utilities'; +@forward 'utilities'; From 61d0cc62768b76405c891dd436fffee0b7e6498f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Mon, 19 Aug 2024 09:06:00 +0200 Subject: [PATCH 006/129] Feat(web): Switch Demo styles to v3 design tokens structure #DS-1430 --- apps/demo/partials/header.hbs | 6 +++--- apps/demo/partials/layout/default.hbs | 2 +- apps/demo/partials/layout/plain.hbs | 2 +- apps/demo/partials/section.hbs | 2 +- apps/demo/partials/web-react/layout/default.hbs | 2 +- apps/demo/partials/web-react/tabs.hbs | 2 +- apps/demo/partials/web/icons.hbs | 4 ++-- apps/demo/partials/web/layout/default.hbs | 2 +- apps/demo/partials/web/tabs.hbs | 2 +- packages/demo/scss/index.scss | 4 ++-- 10 files changed, 14 insertions(+), 14 deletions(-) diff --git a/apps/demo/partials/header.hbs b/apps/demo/partials/header.hbs index a5c8b9f3fe..cddf1586f4 100644 --- a/apps/demo/partials/header.hbs +++ b/apps/demo/partials/header.hbs @@ -1,8 +1,8 @@ -
+
-

Spirit Design System

-

{{#if package}}{{package}} - {{/if}}Development Preview

+

Spirit Design System

+

{{#if package}}{{package}} - {{/if}}Development Preview

header package=""}} {{/with}} -
+
{{> @partial-block}} diff --git a/apps/demo/partials/layout/plain.hbs b/apps/demo/partials/layout/plain.hbs index c5b819609a..8d6e483985 100644 --- a/apps/demo/partials/layout/plain.hbs +++ b/apps/demo/partials/layout/plain.hbs @@ -1,6 +1,6 @@ {{#> layout/base}} -
+
{{> @partial-block}} diff --git a/apps/demo/partials/section.hbs b/apps/demo/partials/section.hbs index d342e9b9bf..92ce85719f 100644 --- a/apps/demo/partials/section.hbs +++ b/apps/demo/partials/section.hbs @@ -1,6 +1,6 @@
-

{{title}}

+

{{title}}

{{> @partial-block}} diff --git a/apps/demo/partials/web-react/layout/default.hbs b/apps/demo/partials/web-react/layout/default.hbs index b122af3178..4398a328e2 100644 --- a/apps/demo/partials/web-react/layout/default.hbs +++ b/apps/demo/partials/web-react/layout/default.hbs @@ -6,7 +6,7 @@ {{> header package="Web React" }} -
+
{{> web-react/tabs }} diff --git a/apps/demo/partials/web-react/tabs.hbs b/apps/demo/partials/web-react/tabs.hbs index 8015b06460..776dd42fda 100644 --- a/apps/demo/partials/web-react/tabs.hbs +++ b/apps/demo/partials/web-react/tabs.hbs @@ -1,4 +1,4 @@ -