From 28d6177cf1741aa3a07e1ad5e6566b02da2d3da1 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 01/88] BREAKING CHANGE(design-tokens): Introduce new design tokens structure #DS-1430 --- packages/design-tokens/README.md | 269 +++---- packages/design-tokens/package.json | 2 +- packages/design-tokens/src/scss/@global.scss | 1 + packages/design-tokens/src/scss/@themes.scss | 13 + packages/design-tokens/src/scss/@tokens.scss | 1 - .../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/_borders.scss | 4 + .../src/scss/global/_gradients.scss | 10 + .../scss/{generated => global}/_other.scss | 40 +- .../design-tokens/src/scss/global/_radii.scss | 18 + .../src/scss/global/_shadows.scss | 15 + .../src/scss/global/_spacing.scss | 40 + .../src/scss/global/_typography.scss | 723 ++++++++++++++++++ .../src/scss/{generated => global}/index.scss | 3 +- packages/design-tokens/src/scss/index.scss | 1 - .../themes/theme-light-default/_colors.scss | 444 +++++++++++ .../themes/theme-light-default/index.scss | 1 + .../themes/theme-light-on-brand/_colors.scss | 444 +++++++++++ .../themes/theme-light-on-brand/index.scss | 1 + 25 files changed, 1874 insertions(+), 766 deletions(-) create mode 100644 packages/design-tokens/src/scss/@global.scss create mode 100644 packages/design-tokens/src/scss/@themes.scss delete mode 100644 packages/design-tokens/src/scss/@tokens.scss 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/_borders.scss create mode 100644 packages/design-tokens/src/scss/global/_gradients.scss rename packages/design-tokens/src/scss/{generated => global}/_other.scss (53%) create mode 100644 packages/design-tokens/src/scss/global/_radii.scss create mode 100644 packages/design-tokens/src/scss/global/_shadows.scss create mode 100644 packages/design-tokens/src/scss/global/_spacing.scss create mode 100644 packages/design-tokens/src/scss/global/_typography.scss rename packages/design-tokens/src/scss/{generated => global}/index.scss (75%) delete mode 100644 packages/design-tokens/src/scss/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/README.md b/packages/design-tokens/README.md index bd2e454023..204076cba8 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -2,142 +2,95 @@ > 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) + 1. [Global Tokens](#global-tokens) + 2. [Theme Tokens](#theme-tokens) 2. [Install](#install) 3. [Basic Usage](#basic-usage) -4. [`@tokens` API](#tokens-api) + 1. [In JavaScript](#in-javascript) +4. [Rebranding Spirit](#rebranding-spirit) 5. [FAQ](#faq) +6. [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`] | +Tokens are split into two categories: Global and Themes. Global tokens are +shared across all themes, while the theme tokens are specific to a particular theme. -## Install +They are 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 `@global.scss` and `@themes.scss` files linking all available 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; -} -``` +You can find the list of the themes in the `src/themes` directory. Each theme has +its own directory with the same set of design tokens, but with different values. -This makes it easier to [migrate your code to Spirit][migrate-to-spirit] in the -future. +Each theme consists of the same set of tokens, but with different values. -
-Optional: import by categories +The category currently consists only of this group: -You can also import individual design token files by categories, e.g.: +- 🎨 Colors -```scss -@use 'sass:map'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/colors'; -@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/typography'; - -.MyComponent { - font-family: map.get(typography.$body-medium-text-regular, font-family); - color: colors.$text-primary-default; -} -``` +We currently support two themes: -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. +- Light +- Light Inverted -
+Where the former is the default and both of them can be used on the same page. -### 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` - -#### a) via full path - -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**. - -#### b) via load path - -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: - -```scss -@use 'sass:map'; -@use '@tokens' as tokens; +or -.MyComponentThatIsReadyForSpirit { - font-family: map.get(tokens.$body-medium-text-regular, font-family); - color: tokens.$text-primary-default; -} +```shell +npm install --save @lmc-eu/spirit-design-tokens ``` -##### Configuring Load Path +## Basic Usage + +SCSS is the primary language for styling Spirit components. -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. +The best way to use the design tokens is to load their path in SASS: ```shell sass --load-path=node_modules/@lmc-eu/spirit-design-tokens/scss my-styles.scss ``` +Or integrate them into your build system: +
-Or with Webpack and sass-loader: +Webpack example with sass-loader: ```javascript // webpack.config.js @@ -169,39 +122,88 @@ module: {
-### Exposing Your Custom Design Tokens +
+Vite example: + +```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')], + }, + }, + }, +}); +// … +``` + +
+ +This way the [`spirit-web`][web-docs] package or your own components can simply reach token values like this: + +```scss +@use 'sass:map'; +@use '@global' as global-tokens; + +.MyComponentThatMightGoToSpiritInFuture { + font-family: map.get(global-tokens.$body-1-regular, font-family); + margin-bottom: global-tokens.$space-300; +} +``` -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/@global' as global-tokens; +``` + +As mentioned, all themes contain the same set of tokens, so to use them you need to either +choose which theme you want to use and load it directly or use the `@themes` file to +generate CSS variables and use them in your components. The [`spirit-web`][web-docs] package does +this for you. + +### 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 the SASS. + +## Rebranding Spirit + +The system is designed to be easily rebranded. To do so, you need to provide +your own design tokens and use `@global` and `@themes` files. Then forward your tokens +to these files and set the correct load path 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
-Why do I need to rename @tokens to tokens when @using? +Why do I need to rename @global to global-tokens when @using? -Because @using the `@tokens` module without renaming would produce an error: +Because @using the `@global` module without renaming would produce an error: ```log -Error: Invalid Sass identifier "@tokens" +Error: Invalid Sass identifier "@global" β•· -1 β”‚ @use '@tokens'; +1 β”‚ @use '@global'; β”‚ ^^^^^^^^^^^^^^ ``` @@ -210,18 +212,18 @@ Error: Invalid Sass identifier "@tokens"
Why is there the @ prefix? -We prefix the `@tokens.scss` file with `@` to differentiate it from other Sass +We prefix the `@global.scss` file with `@` to differentiate it from other Sass files in the directory. In order for developers to know the file behaves differently than usual Sass partials, a `@` prefix is added to mark this behavior both in filesystem and inside Sass files. As a result, it's clear why e.g. `@use 'tools'` refers to -a local file and `@use '@tokens'` does not. However, **it's only a naming +a local file and `@use '@global'` does not. However, **it's only a naming convention,** there is no special tooling or configuration for Sass partials starting with `@`. Imported module **needs to be renamed to be compatible with SCSS** syntax -when it's used later on. That's why `@use '@tokens' as tokens`. +when it's used later on. That's why `@use '@global' as global-tokens`. Look at the following snippets and compare which one offers better comprehensibility. @@ -232,7 +234,7 @@ Without `@` prefix: // _Button.scss @use 'tools'; // Calls './_tools.scss'. You don't have to explain this to me. -@use 'tokens'; // Wait, this file doesn't exist… What's going on here? Is it +@use 'global'; // Wait, this file doesn't exist… What's going on here? Is it // an error? ``` @@ -242,7 +244,7 @@ With `@` prefix: // _Button.scss @use 'tools'; // Calls './_tools.scss'. -@use '@tokens' as tokens; // OK, './_@tokens.scss' is not here, but the at-sign +@use '@global' as global-tokens; // OK, './_@global.scss' is not here, but the at-sign // prefix suggests a special behavior. Maybe I'll learn more in the docs? ``` @@ -266,7 +268,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.
@@ -274,16 +288,7 @@ 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 diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 128f57bb16..0e454666d5 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": "stylelint ./src/**/*.scss", "test": "yarn lint", diff --git a/packages/design-tokens/src/scss/@global.scss b/packages/design-tokens/src/scss/@global.scss new file mode 100644 index 0000000000..7a30094c95 --- /dev/null +++ b/packages/design-tokens/src/scss/@global.scss @@ -0,0 +1 @@ +@forward 'global'; diff --git a/packages/design-tokens/src/scss/@themes.scss b/packages/design-tokens/src/scss/@themes.scss new file mode 100644 index 0000000000..1fd08e4703 --- /dev/null +++ b/packages/design-tokens/src/scss/@themes.scss @@ -0,0 +1,13 @@ +@use 'themes/theme-light-default'; +@use 'themes/theme-light-on-brand'; + +$themes: ( + // The first theme is the default theme, as the left column in the Figma table. + theme-light-default: + ( + colors: theme-light-default.$colors, + ), + theme-light-on-brand: ( + colors: theme-light-on-brand.$colors, + ) +); diff --git a/packages/design-tokens/src/scss/@tokens.scss b/packages/design-tokens/src/scss/@tokens.scss deleted file mode 100644 index 8405855b32..0000000000 --- a/packages/design-tokens/src/scss/@tokens.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'index'; 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/_borders.scss b/packages/design-tokens/src/scss/global/_borders.scss new file mode 100644 index 0000000000..e1ecab722f --- /dev/null +++ b/packages/design-tokens/src/scss/global/_borders.scss @@ -0,0 +1,4 @@ +// Manually created from Figma +$border-width-0: 0 !default; +$border-width-100: 1px !default; +$border-width-200: 2px !default; diff --git a/packages/design-tokens/src/scss/global/_gradients.scss b/packages/design-tokens/src/scss/global/_gradients.scss new file mode 100644 index 0000000000..86ce441a58 --- /dev/null +++ b/packages/design-tokens/src/scss/global/_gradients.scss @@ -0,0 +1,10 @@ +// Manually created from Figma +$gradient-basic-overlay: linear-gradient( + var(--gradient-angle, 90deg), + var(--spirit-color-gradient-basic-overlay-color-01) 0%, + var(--spirit-color-gradient-basic-overlay-color-02) 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/_other.scss similarity index 53% rename from packages/design-tokens/src/scss/generated/_other.scss rename to packages/design-tokens/src/scss/global/_other.scss index 4f68fcf173..6cf100b569 100644 --- a/packages/design-tokens/src/scss/generated/_other.scss +++ b/packages/design-tokens/src/scss/global/_other.scss @@ -1,22 +1,36 @@ -// Generated Generic Tokens (Other) from Supernova. Do not edit manually. +// Manually created from Figma $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-mobile: 16px !default; +$container-padding-tablet: 32px !default; $container-padding-desktop: 32px !default; -$grid-gutter-desktop: 32px !default; + +$grid-columns: 12 !default; + +$grid-spacing-mobile: 16px !default; +$grid-spacing-tablet: 32px !default; +$grid-spacing-desktop: 32px !default; $containers: ( max-width: $container-max-width, + padding: ( + mobile: $container-padding-mobile, + tablet: $container-padding-tablet, + desktop: $container-padding-desktop, + ), ) !default; $grids: ( columns: $grid-columns, + spacing: ( + mobile: $grid-spacing-mobile, + tablet: $grid-spacing-tablet, + desktop: $grid-spacing-desktop, + ), ) !default; $breakpoints: ( @@ -24,15 +38,3 @@ $breakpoints: ( 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, -) !default; diff --git a/packages/design-tokens/src/scss/global/_radii.scss b/packages/design-tokens/src/scss/global/_radii.scss new file mode 100644 index 0000000000..29975c9d9f --- /dev/null +++ b/packages/design-tokens/src/scss/global/_radii.scss @@ -0,0 +1,18 @@ +// Manually created from Figma +$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/_shadows.scss b/packages/design-tokens/src/scss/global/_shadows.scss new file mode 100644 index 0000000000..c6730ec2d4 --- /dev/null +++ b/packages/design-tokens/src/scss/global/_shadows.scss @@ -0,0 +1,15 @@ +// Manually created from Figma +$shadow-100: 0 2px 8px 0 var(--spirit-color-shadow-shadow-100-color-01) !default; +$shadow-200: 0 4px 12px 0 var(--spirit-color-shadow-shadow-200-color-01) !default; +$shadow-300: 0 8px 24px 0 var(--spirit-color-shadow-shadow-300-color-01) !default; +$shadow-400: 0 12px 32px 0 var(--spirit-color-shadow-shadow-400-color-01) !default; + +$focus: 0 0 0 2px var(--spirit-color-focus-focus-ring-color-01) !default; + +$shadows: ( + 100: $shadow-100, + 200: $shadow-200, + 300: $shadow-300, + 400: $shadow-400, + focus: $focus, +) !default; diff --git a/packages/design-tokens/src/scss/global/_spacing.scss b/packages/design-tokens/src/scss/global/_spacing.scss new file mode 100644 index 0000000000..c79c1a7acb --- /dev/null +++ b/packages/design-tokens/src/scss/global/_spacing.scss @@ -0,0 +1,40 @@ +// Manually created from Figma +$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/_typography.scss b/packages/design-tokens/src/scss/global/_typography.scss new file mode 100644 index 0000000000..30397fc7c7 --- /dev/null +++ b/packages/design-tokens/src/scss/global/_typography.scss @@ -0,0 +1,723 @@ +// Manually created from Figma +$heading-xlarge-regular: ( + mobile: ( + 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: 64px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 64px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-semibold: ( + mobile: ( + 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: 64px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 64px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-bold: ( + mobile: ( + 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: 64px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 64px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-xlarge-italic: ( + mobile: ( + 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: 64px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 64px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-large-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + 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, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-large-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + 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, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-large-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + 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, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-large-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + 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, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 48px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-medium-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-medium-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-medium-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 32px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-small-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-small-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-small-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-small-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-xsmall-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$heading-xsmall-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.2, + ), +) !default; + +$heading-xsmall-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.2, + ), +) !default; + +$heading-xsmall-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.2, + ), +) !default; + +$body-xlarge-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.6, + ), +) !default; + +$body-xlarge-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.6, + ), +) !default; + +$body-xlarge-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.6, + ), +) !default; + +$body-xlarge-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.6, + ), +) !default; + +$body-large-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.55, + ), +) !default; + +$body-large-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.55, + ), +) !default; + +$body-large-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.55, + ), +) !default; + +$body-large-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.55, + ), +) !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.42, + ), +) !default; + +$body-small-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 600, + line-height: 1.42, + ), +) !default; + +$body-small-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 700, + line-height: 1.42, + ), +) !default; + +$body-small-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 400, + line-height: 1.42, + ), +) !default; + +$body-xsmall-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 400, + line-height: 1.32, + ), +) !default; + +$body-xsmall-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 600, + line-height: 1.32, + ), +) !default; + +$body-xsmall-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 700, + line-height: 1.32, + ), +) !default; + +$body-xsmall-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 400, + line-height: 1.32, + ), +) !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/index.scss similarity index 75% rename from packages/design-tokens/src/scss/generated/index.scss rename to packages/design-tokens/src/scss/global/index.scss index 09d09db0f5..2b65192ccc 100644 --- a/packages/design-tokens/src/scss/generated/index.scss +++ b/packages/design-tokens/src/scss/global/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/theme-light-default/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss new file mode 100644 index 0000000000..a9edb8d354 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss @@ -0,0 +1,444 @@ +// Manually created from Figma +$action-button-plain-active: #e7e7e7 !default; +$action-button-plain-border: #fff !default; +$action-button-plain-content: #132930 !default; +$action-button-plain-default: #fff !default; +$action-button-plain-hover: #f1f1f1 !default; + +$action-button-primary-active: #0b3a46 !default; +$action-button-primary-border: #0b3a46 !default; +$action-button-primary-content: #fff !default; +$action-button-primary-default: #29616f !default; +$action-button-primary-hover: #1b5260 !default; + +$action-button-secondary-active: #e5e5e5 !default; +$action-button-secondary-border: #ddd !default; +$action-button-secondary-content: #132930 !default; +$action-button-secondary-default: #fff !default; +$action-button-secondary-hover: #efefef !default; + +$action-button-tertiary-active: #dbdbdb !default; +$action-button-tertiary-border: #ececec !default; +$action-button-tertiary-content: #132930 !default; +$action-button-tertiary-default: #f1f1f1 !default; +$action-button-tertiary-hover: #e7e7e7 !default; + +$action-link-primary-active: #0b3a46 !default; +$action-link-primary-default: #29616f !default; +$action-link-primary-hover: #1b5260 !default; + +$action-link-secondary-active: #454b4e !default; +$action-link-secondary-default: #758185 !default; +$action-link-secondary-hover: #5b6568 !default; + +$action-link-tertiary-active: #969696 !default; +$action-link-tertiary-default: #bdbdbd !default; +$action-link-tertiary-hover: #ababab !default; + +$action-link-visited-default: #835ea1 !default; + +$action-toggle-selected-border: #ffa53b !default; +$action-toggle-selected-content: #fff !default; +$action-toggle-selected-default: #ffb951 !default; +$action-toggle-selected-hover: #ffca7b !default; +$action-toggle-unselected-border: #898989 !default; +$action-toggle-unselected-content: #fff !default; +$action-toggle-unselected-default: #1c1c1c !default; +$action-toggle-unselected-hover: #4b4b4b !default; + +$background-backdrop: #0b1c2199 !default; + +$background-brand-primary: #0b1c21 !default; +$background-brand-secondary: #30588c !default; + +$background-interactive-active: #f1f1f1 !default; +$background-interactive-default: #fff0 !default; +$background-interactive-hover: #f5f5f5 !default; +$background-interactive-selected: #29616f !default; + +$background-primary: #fff !default; +$background-secondary: #f0f0f0 !default; +$background-tertiary: #000 !default; + +$border-basic: #e9e9e9 !default; +$border-focus: #4666ae !default; + +$border-interactive-active: #b1b1b1 !default; +$border-interactive-danger: #ba3e5a !default; +$border-interactive-default: #d8d8d8 !default; +$border-interactive-hover: #c5c5c5 !default; +$border-interactive-informative: #3b6bab !default; +$border-interactive-selected: #5314da !default; +$border-interactive-success: #009824 !default; +$border-interactive-warning: #a98300 !default; + +$custom-01-active: #cca22f !default; +$custom-01-background-basic: #fff !default; +$custom-01-background-subtle: #fff !default; +$custom-01-border-basic: #c610b3 !default; +$custom-01-border-subtle: #c610b3 !default; +$custom-01-content-basic: #d311c0 !default; +$custom-01-content-subtle: #fff !default; +$custom-01-default: #ffcb3b !default; +$custom-01-hover: #e6b735 !default; + +$custom-02-active: #fff !default; +$custom-02-background-basic: #fff !default; +$custom-02-background-subtle: #fff !default; +$custom-02-border-basic: #fff !default; +$custom-02-border-subtle: #fff !default; +$custom-02-content-basic: #000 !default; +$custom-02-content-subtle: #fff !default; +$custom-02-default: #fff !default; +$custom-02-hover: #fff !default; + +$disabled-background: #f5f5f5 !default; +$disabled-border: #e3e3e3 !default; +$disabled-content: #a6a6a6 !default; +$disabled-foreground: #a6a6a6 !default; + +$emotion-danger-active: #6f2535 !default; +$emotion-danger-background-subtle: #fbeef1 !default; +$emotion-danger-background-basic: #ba3e5a !default; +$emotion-danger-border-subtle: #fff !default; +$emotion-danger-border-basic: #ba3e5a !default; +$emotion-danger-content-basic: #ba3e5a !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-default: #ba3e5a !default; +$emotion-danger-hover: #953248 !default; + +$emotion-informative-active: #26456e !default; +$emotion-informative-background-basic: #3b6bab !default; +$emotion-informative-background-subtle: #e8eff7 !default; +$emotion-informative-border-basic: #3b6bab !default; +$emotion-informative-border-subtle: #fff !default; +$emotion-informative-content-basic: #3b6bab !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-default: #3b6bab !default; +$emotion-informative-hover: #30588c !default; + +$emotion-success-active: #33420a !default; +$emotion-success-background-basic: #607c13 !default; +$emotion-success-background-subtle: #f6fbe9 !default; +$emotion-success-border-basic: #607c13 !default; +$emotion-success-border-subtle: #fff !default; +$emotion-success-content-basic: #607c13 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-default: #607c13 !default; +$emotion-success-hover: #485d0e !default; + +$emotion-warning-active: #423400 !default; +$emotion-warning-background-basic: #a98300 !default; +$emotion-warning-background-subtle: #f8f2e4 !default; +$emotion-warning-border-basic: #a98300 !default; +$emotion-warning-border-subtle: #fff !default; +$emotion-warning-content-basic: #a98300 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-default: #a98300 !default; +$emotion-warning-hover: #755b00 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-active: #fff !default; +$form-field-border-active: #b1b1b1 !default; +$form-field-border-default: #d8d8d8 !default; +$form-field-border-hover: #c5c5c5 !default; +$form-field-border-selected: #5314da !default; +$form-field-content: #132930 !default; +$form-field-danger: #ba3e5a !default; +$form-field-default: #fff !default; +$form-field-helper-text: #666 !default; +$form-field-hover: #fafafa !default; +$form-field-label: #132930 !default; +$form-field-placeholder: #666 !default; +$form-field-success: #009824 !default; +$form-field-warning: #a98300 !default; + +$gradients-basic-overlay-color-01: #fff !default; +$gradients-basic-overlay-color-02: #fff0 !default; + +$neutral-active: #344448 !default; +$neutral-background-basic: #132930 !default; +$neutral-background-subtle: #f7f7f7 !default; +$neutral-border-basic: #d8d8d8 !default; +$neutral-border-subtle: #fff !default; +$neutral-content-basic: #132930 !default; +$neutral-content-subtle: #f2f2f2 !default; +$neutral-default: #0e2025 !default; +$neutral-hover: #223439 !default; + +$selected-active: #7e4fe3 !default; +$selected-content-basic: #5314da !default; +$selected-content-subtle: #fff !default; +$selected-default: #5314da !default; +$selected-hover: #7543e1 !default; + +$shadows-shadow-100-color-01: #00000026 !default; +$shadows-shadow-200-color-01: #0003 !default; +$shadows-shadow-300-color-01: #00000040 !default; +$shadows-shadow-400-color-01: #00000040 !default; + +$text-primary: #132930 !default; +$text-secondary: #5c747b !default; +$text-tertiary: #e4e4e4 !default; + +$action-colors: ( + button: ( + primary: ( + active: $action-button-primary-active, + border: $action-button-primary-border, + content: $action-button-primary-content, + default: $action-button-primary-default, + hover: $action-button-primary-hover, + ), + secondary: ( + active: $action-button-secondary-active, + border: $action-button-secondary-border, + content: $action-button-secondary-content, + default: $action-button-secondary-default, + hover: $action-button-secondary-hover, + ), + tertiary: ( + active: $action-button-tertiary-active, + border: $action-button-tertiary-border, + content: $action-button-tertiary-content, + default: $action-button-tertiary-default, + hover: $action-button-tertiary-hover, + ), + plain: ( + active: $action-button-plain-active, + border: $action-button-plain-border, + content: $action-button-plain-content, + default: $action-button-plain-default, + hover: $action-button-plain-hover, + ), + ), + link: ( + primary: ( + active: $action-link-primary-active, + default: $action-link-primary-default, + hover: $action-link-primary-hover, + ), + secondary: ( + active: $action-link-secondary-active, + default: $action-link-secondary-default, + hover: $action-link-secondary-hover, + ), + tertiary: ( + active: $action-link-tertiary-active, + default: $action-link-tertiary-default, + hover: $action-link-tertiary-hover, + ), + visited: ( + default: $action-link-visited-default, + ), + ), + toggle: ( + selected-border: $action-toggle-selected-border, + selected-content: $action-toggle-selected-content, + selected-default: $action-toggle-selected-default, + selected-hover: $action-toggle-selected-hover, + unselected-border: $action-toggle-unselected-border, + unselected-content: $action-toggle-unselected-content, + unselected-default: $action-toggle-unselected-default, + unselected-hover: $action-toggle-unselected-hover, + ), +) !default; + +$background-colors: ( + backdrop: $background-backdrop, + brand: ( + primary: $background-brand-primary, + secondary: $background-brand-secondary, + ), + interactive: ( + active: $background-interactive-active, + default: $background-interactive-default, + hover: $background-interactive-hover, + selected: $background-interactive-selected, + ), + primary: $background-primary, + secondary: $background-secondary, + tertiary: $background-tertiary, +) !default; + +$border-colors: ( + basic: $border-basic, + focus: $border-focus, + interactive: ( + active: $border-interactive-active, + danger: $border-interactive-danger, + default: $border-interactive-default, + hover: $border-interactive-hover, + informative: $border-interactive-informative, + selected: $border-interactive-selected, + success: $border-interactive-success, + warning: $border-interactive-warning, + ), +) !default; + +$custom-colors: ( + 01: ( + active: $custom-01-active, + background-basic: $custom-01-background-basic, + background-subtle: $custom-01-background-subtle, + border-basic: $custom-01-border-basic, + border-subtle: $custom-01-border-subtle, + content-basic: $custom-01-content-basic, + content-subtle: $custom-01-content-subtle, + default: $custom-01-default, + hover: $custom-01-hover, + ), + 02: ( + active: $custom-02-active, + background-basic: $custom-02-background-basic, + background-subtle: $custom-02-background-subtle, + border-basic: $custom-02-border-basic, + border-subtle: $custom-02-border-subtle, + content-basic: $custom-02-content-basic, + content-subtle: $custom-02-content-subtle, + default: $custom-02-default, + hover: $custom-02-hover, + ), +) !default; + +$disabled-colors: ( + background: $disabled-background, + border: $disabled-border, + content: $disabled-content, + foreground: $disabled-foreground, +) !default; + +$emotion-colors: ( + danger: ( + active: $emotion-danger-active, + 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, + default: $emotion-danger-default, + hover: $emotion-danger-hover, + ), + informative: ( + active: $emotion-informative-active, + 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, + default: $emotion-informative-default, + hover: $emotion-informative-hover, + ), + success: ( + active: $emotion-success-active, + 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, + default: $emotion-success-default, + hover: $emotion-success-hover, + ), + warning: ( + active: $emotion-warning-active, + 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, + default: $emotion-warning-default, + hover: $emotion-warning-hover, + ), +) !default; + +$focus-colors: ( + focus-ring: ( + color-01: $focus-focus-ring-color-01, + ), +) !default; + +$form-field-colors: ( + active: $form-field-active, + border-active: $form-field-border-active, + border-default: $form-field-border-default, + border-hover: $form-field-border-hover, + border-selected: $form-field-border-selected, + content: $form-field-content, + danger: $form-field-danger, + default: $form-field-default, + helper-text: $form-field-helper-text, + hover: $form-field-hover, + label: $form-field-label, + placeholder: $form-field-placeholder, + success: $form-field-success, + warning: $form-field-warning, +) !default; + +$gradient-colors: ( + basic-overlay: ( + color-01: $gradients-basic-overlay-color-01, + color-02: $gradients-basic-overlay-color-02, + ), +) !default; + +$neutral-colors: ( + active: $neutral-active, + 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, + default: $neutral-default, + hover: $neutral-hover, +) !default; + +$selected-colors: ( + active: $selected-active, + content-basic: $selected-content-basic, + content-subtle: $selected-content-subtle, + default: $selected-default, + hover: $selected-hover, +) !default; + +$shadow-colors: ( + shadow-100: ( + color-01: $shadows-shadow-100-color-01, + ), + shadow-200: ( + color-01: $shadows-shadow-200-color-01, + ), + shadow-300: ( + color-01: $shadows-shadow-300-color-01, + ), + shadow-400: ( + color-01: $shadows-shadow-400-color-01, + ), +) !default; + +$text-colors: ( + primary: $text-primary, + secondary: $text-secondary, + tertiary: $text-tertiary, +) !default; + +$colors: ( + action: $action-colors, + background: $background-colors, + border: $border-colors, + custom: $custom-colors, + disabled: $disabled-colors, + emotion: $emotion-colors, + focus: $focus-colors, + form-field: $form-field-colors, + gradient: $gradient-colors, + neutral: $neutral-colors, + selected: $selected-colors, + shadow: $shadow-colors, + text: $text-colors, +) !default; 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..55e8437e39 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss @@ -0,0 +1,444 @@ +// Manually created from Figma +$action-button-plain-active: #fff !default; +$action-button-plain-border: #fff !default; +$action-button-plain-content: #fff !default; +$action-button-plain-default: #fff !default; +$action-button-plain-hover: #fff !default; + +$action-button-primary-active: #0b3a46 !default; +$action-button-primary-border: #0b3a4680 !default; +$action-button-primary-content: #fff !default; +$action-button-primary-default: #29616f !default; +$action-button-primary-hover: #1b5260 !default; + +$action-button-secondary-active: #fedb7a !default; +$action-button-secondary-border: #edbb2f !default; +$action-button-secondary-content: #132930 !default; +$action-button-secondary-default: #fff !default; +$action-button-secondary-hover: #ffe9ac !default; + +$action-button-tertiary-active: #fee59e !default; +$action-button-tertiary-border: #fff6 !default; +$action-button-tertiary-content: #132930 !default; +$action-button-tertiary-default: #ffd358 !default; +$action-button-tertiary-hover: #ffde83 !default; + +$action-link-primary-active: #565656 !default; +$action-link-primary-default: #1d1d1d !default; +$action-link-primary-hover: #3c3c3c !default; + +$action-link-secondary-active: #454b4e !default; +$action-link-secondary-default: #758185 !default; +$action-link-secondary-hover: #5b6568 !default; + +$action-link-tertiary-active: #969696 !default; +$action-link-tertiary-default: #bdbdbd !default; +$action-link-tertiary-hover: #ababab !default; + +$action-link-visited-default: #835ea1 !default; + +$action-toggle-selected-border: #ffa53b !default; +$action-toggle-selected-content: #fff !default; +$action-toggle-selected-default: #f90 !default; +$action-toggle-selected-hover: #ffc165 !default; +$action-toggle-unselected-border: #898989 !default; +$action-toggle-unselected-content: #fff !default; +$action-toggle-unselected-default: #1c1c1c !default; +$action-toggle-unselected-hover: #4b4b4b !default; + +$background-backdrop: #0b1c2199 !default; + +$background-brand-primary: #fff !default; +$background-brand-secondary: #fff !default; + +$background-interactive-active: #ffe9ac !default; +$background-interactive-default: #fff0 !default; +$background-interactive-hover: #ffda73 !default; +$background-interactive-selected: #fff !default; + +$background-primary: #ffcb3b !default; +$background-secondary: #07181e !default; +$background-tertiary: #fff !default; + +$border-basic: #ffffff80 !default; +$border-focus: #fff !default; + +$border-interactive-active: #fff !default; +$border-interactive-danger: #942300 !default; +$border-interactive-default: #1d1d1d !default; +$border-interactive-hover: #fff !default; +$border-interactive-informative: #fff !default; +$border-interactive-selected: #1d1d1d !default; +$border-interactive-success: #597900 !default; +$border-interactive-warning: #ee3900 !default; + +$custom-01-active: #ffecb8 !default; +$custom-01-background-basic: #fff !default; +$custom-01-background-subtle: #fff !default; +$custom-01-border-basic: #fff !default; +$custom-01-border-subtle: #fff !default; +$custom-01-content-basic: #000 !default; +$custom-01-content-subtle: #fff !default; +$custom-01-default: #fff !default; +$custom-01-hover: #fff4d6 !default; + +$custom-02-active: #fff !default; +$custom-02-background-basic: #fff !default; +$custom-02-background-subtle: #fff !default; +$custom-02-border-basic: #fff !default; +$custom-02-border-subtle: #fff !default; +$custom-02-content-basic: #fff !default; +$custom-02-content-subtle: #fff !default; +$custom-02-default: #fff !default; +$custom-02-hover: #fff !default; + +$disabled-background: #fff3 !default; +$disabled-border: #1329304d !default; +$disabled-content: #13293066 !default; +$disabled-foreground: #d3a832 !default; + +$emotion-danger-active: #6f2535 !default; +$emotion-danger-background-subtle: #fbeef1 !default; +$emotion-danger-background-basic: #942300 !default; +$emotion-danger-border-subtle: #fff !default; +$emotion-danger-border-basic: #ba3e5a !default; +$emotion-danger-content-basic: #ba3e5a !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-default: #ba3e5a !default; +$emotion-danger-hover: #953248 !default; + +$emotion-informative-active: #26456e !default; +$emotion-informative-background-basic: #3b6bab !default; +$emotion-informative-background-subtle: #e8eff7 !default; +$emotion-informative-border-basic: #3b6bab !default; +$emotion-informative-border-subtle: #fff !default; +$emotion-informative-content-basic: #3b6bab !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-default: #3b6bab !default; +$emotion-informative-hover: #30588c !default; + +$emotion-success-active: #33420a !default; +$emotion-success-background-basic: #607c13 !default; +$emotion-success-background-subtle: #f6fbe9 !default; +$emotion-success-border-basic: #607c13 !default; +$emotion-success-border-subtle: #fff !default; +$emotion-success-content-basic: #607c13 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-default: #607c13 !default; +$emotion-success-hover: #485d0e !default; + +$emotion-warning-active: #423400 !default; +$emotion-warning-background-basic: #a98300 !default; +$emotion-warning-background-subtle: #f8f2e4 !default; +$emotion-warning-border-basic: #765b00 !default; +$emotion-warning-border-subtle: #fff !default; +$emotion-warning-content-basic: #765b00 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-default: #a98300 !default; +$emotion-warning-hover: #755b00 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-active: #fff !default; +$form-field-border-active: #b1b1b1 !default; +$form-field-border-default: #d8d8d8 !default; +$form-field-border-hover: #c5c5c5 !default; +$form-field-border-selected: #5314da !default; +$form-field-content: #132930 !default; +$form-field-danger: #ba3e5a !default; +$form-field-default: #fff !default; +$form-field-helper-text: #666 !default; +$form-field-hover: #00000005 !default; +$form-field-label: #132930 !default; +$form-field-placeholder: #666 !default; +$form-field-success: #009824 !default; +$form-field-warning: #a98300 !default; + +$gradients-basic-overlay-color-01: #606060 !default; +$gradients-basic-overlay-color-02: #60606000 !default; + +$neutral-active: #344448 !default; +$neutral-background-basic: #132930 !default; +$neutral-background-subtle: #132930 !default; +$neutral-border-basic: #d8d8d8 !default; +$neutral-border-subtle: #fff !default; +$neutral-content-basic: #132930 !default; +$neutral-content-subtle: #f2f2f2 !default; +$neutral-default: #0e2025 !default; +$neutral-hover: #223439 !default; + +$selected-active: #fff !default; +$selected-content-basic: #1d1d1d !default; +$selected-content-subtle: #fff !default; +$selected-default: #1d1d1d !default; +$selected-hover: #fff !default; + +$shadows-shadow-100-color-01: #00000026 !default; +$shadows-shadow-200-color-01: #0003 !default; +$shadows-shadow-300-color-01: #00000040 !default; +$shadows-shadow-400-color-01: #00000040 !default; + +$text-primary: #132930 !default; +$text-secondary: #4a5254 !default; +$text-tertiary: #d6d6d6 !default; + +$action-colors: ( + button: ( + primary: ( + active: $action-button-primary-active, + border: $action-button-primary-border, + content: $action-button-primary-content, + default: $action-button-primary-default, + hover: $action-button-primary-hover, + ), + secondary: ( + active: $action-button-secondary-active, + border: $action-button-secondary-border, + content: $action-button-secondary-content, + default: $action-button-secondary-default, + hover: $action-button-secondary-hover, + ), + tertiary: ( + active: $action-button-tertiary-active, + border: $action-button-tertiary-border, + content: $action-button-tertiary-content, + default: $action-button-tertiary-default, + hover: $action-button-tertiary-hover, + ), + plain: ( + active: $action-button-plain-active, + border: $action-button-plain-border, + content: $action-button-plain-content, + default: $action-button-plain-default, + hover: $action-button-plain-hover, + ), + ), + link: ( + primary: ( + active: $action-link-primary-active, + default: $action-link-primary-default, + hover: $action-link-primary-hover, + ), + secondary: ( + active: $action-link-secondary-active, + default: $action-link-secondary-default, + hover: $action-link-secondary-hover, + ), + tertiary: ( + active: $action-link-tertiary-active, + default: $action-link-tertiary-default, + hover: $action-link-tertiary-hover, + ), + visited: ( + default: $action-link-visited-default, + ), + ), + toggle: ( + selected-border: $action-toggle-selected-border, + selected-content: $action-toggle-selected-content, + selected-default: $action-toggle-selected-default, + selected-hover: $action-toggle-selected-hover, + unselected-border: $action-toggle-unselected-border, + unselected-content: $action-toggle-unselected-content, + unselected-default: $action-toggle-unselected-default, + unselected-hover: $action-toggle-unselected-hover, + ), +) !default; + +$background-colors: ( + backdrop: $background-backdrop, + brand: ( + primary: $background-brand-primary, + secondary: $background-brand-secondary, + ), + interactive: ( + active: $background-interactive-active, + default: $background-interactive-default, + hover: $background-interactive-hover, + selected: $background-interactive-selected, + ), + primary: $background-primary, + secondary: $background-secondary, + tertiary: $background-tertiary, +) !default; + +$border-colors: ( + basic: $border-basic, + focus: $border-focus, + interactive: ( + active: $border-interactive-active, + danger: $border-interactive-danger, + default: $border-interactive-default, + hover: $border-interactive-hover, + informative: $border-interactive-informative, + selected: $border-interactive-selected, + success: $border-interactive-success, + warning: $border-interactive-warning, + ), +) !default; + +$custom-colors: ( + 01: ( + active: $custom-01-active, + background-basic: $custom-01-background-basic, + background-subtle: $custom-01-background-subtle, + border-basic: $custom-01-border-basic, + border-subtle: $custom-01-border-subtle, + content-basic: $custom-01-content-basic, + content-subtle: $custom-01-content-subtle, + default: $custom-01-default, + hover: $custom-01-hover, + ), + 02: ( + active: $custom-02-active, + background-basic: $custom-02-background-basic, + background-subtle: $custom-02-background-subtle, + border-basic: $custom-02-border-basic, + border-subtle: $custom-02-border-subtle, + content-basic: $custom-02-content-basic, + content-subtle: $custom-02-content-subtle, + default: $custom-02-default, + hover: $custom-02-hover, + ), +) !default; + +$disabled-colors: ( + background: $disabled-background, + border: $disabled-border, + content: $disabled-content, + foreground: $disabled-foreground, +) !default; + +$emotion-colors: ( + danger: ( + active: $emotion-danger-active, + 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, + default: $emotion-danger-default, + hover: $emotion-danger-hover, + ), + informative: ( + active: $emotion-informative-active, + 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, + default: $emotion-informative-default, + hover: $emotion-informative-hover, + ), + success: ( + active: $emotion-success-active, + 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, + default: $emotion-success-default, + hover: $emotion-success-hover, + ), + warning: ( + active: $emotion-warning-active, + 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, + default: $emotion-warning-default, + hover: $emotion-warning-hover, + ), +) !default; + +$focus-colors: ( + focus-ring: ( + color-01: $focus-focus-ring-color-01, + ), +) !default; + +$form-field-colors: ( + active: $form-field-active, + border-active: $form-field-border-active, + border-default: $form-field-border-default, + border-hover: $form-field-border-hover, + border-selected: $form-field-border-selected, + content: $form-field-content, + danger: $form-field-danger, + default: $form-field-default, + helper-text: $form-field-helper-text, + hover: $form-field-hover, + label: $form-field-label, + placeholder: $form-field-placeholder, + success: $form-field-success, + warning: $form-field-warning, +) !default; + +$gradient-colors: ( + basic-overlay: ( + color-01: $gradients-basic-overlay-color-01, + color-02: $gradients-basic-overlay-color-02, + ), +) !default; + +$neutral-colors: ( + active: $neutral-active, + 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, + default: $neutral-default, + hover: $neutral-hover, +) !default; + +$selected-colors: ( + active: $selected-active, + content-basic: $selected-content-basic, + content-subtle: $selected-content-subtle, + default: $selected-default, + hover: $selected-hover, +) !default; + +$shadow-colors: ( + shadow-100: ( + color-01: $shadows-shadow-100-color-01, + ), + shadow-200: ( + color-01: $shadows-shadow-200-color-01, + ), + shadow-300: ( + color-01: $shadows-shadow-300-color-01, + ), + shadow-400: ( + color-01: $shadows-shadow-400-color-01, + ), +) !default; + +$text-colors: ( + primary: $text-primary, + secondary: $text-secondary, + tertiary: $text-tertiary, +) !default; + +$colors: ( + action: $action-colors, + background: $background-colors, + border: $border-colors, + custom: $custom-colors, + disabled: $disabled-colors, + emotion: $emotion-colors, + focus: $focus-colors, + form-field: $form-field-colors, + gradient: $gradient-colors, + neutral: $neutral-colors, + selected: $selected-colors, + shadow: $shadow-colors, + text: $text-colors, +) !default; 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 0c34b540807896c29a6821d458b8642d9b28c92e 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 02/88] 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 91ef2a6f8682ee9616782f0067c9eacaf5ced68f 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 03/88] BREAKING CHANGE(web): Introduce themes and use new design tokens for foundations #DS-1431 --- packages/web/src/scss/foundation/_shared.scss | 4 +- packages/web/src/scss/foundation/_tokens.scss | 117 +++--------------- .../web/src/scss/foundation/_typography.scss | 6 +- packages/web/src/scss/foundation/index.scss | 19 ++- .../src/scss/helpers/breakout/_breakout.scss | 6 +- 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 - packages/web/src/scss/settings/_globals.scss | 1 + .../web/src/scss/settings/_transitions.scss | 4 +- .../web/src/scss/settings/_utilities.scss | 52 ++++---- packages/web/src/scss/themes/index.scss | 4 + .../scss/tools/__tests__/_string.test.scss | 8 ++ .../scss/tools/__tests__/_themes.test.scss | 68 ++++++++++ .../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 | 35 ++++++ packages/web/src/scss/tools/_tokens.scss | 11 ++ packages/web/src/scss/tools/_typography.scss | 4 +- .../web/src/scss/utilities/_utilities.scss | 4 +- packages/web/src/scss/utilities/index.scss | 3 +- 24 files changed, 269 insertions(+), 185 deletions(-) create mode 100644 packages/web/src/scss/settings/_globals.scss 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/src/scss/foundation/_shared.scss b/packages/web/src/scss/foundation/_shared.scss index 95dfa89236..71f6fda001 100644 --- a/packages/web/src/scss/foundation/_shared.scss +++ b/packages/web/src/scss/foundation/_shared.scss @@ -1,6 +1,6 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; // 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: global-tokens.$space-700; } diff --git a/packages/web/src/scss/foundation/_tokens.scss b/packages/web/src/scss/foundation/_tokens.scss index 8b849cc99e..47225fc0bd 100644 --- a/packages/web/src/scss/foundation/_tokens.scss +++ b/packages/web/src/scss/foundation/_tokens.scss @@ -1,103 +1,26 @@ -@use '@tokens' as tokens; +@use 'sass:meta'; +@use '@global' as global-tokens; +@use '../settings/globals'; +@use '../tools/tokens'; + +$tokens: ( + gradient: global-tokens.$gradients, + space: global-tokens.$spaces, + container: global-tokens.$containers, + grid: global-tokens.$grids, + breakpoint: global-tokens.$breakpoints, + radius: global-tokens.$radii, + shadow: global-tokens.$shadows, + typography: global-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}; + --spirit-border-width-0: #{global-tokens.$border-width-0}; + --spirit-border-width-100: #{global-tokens.$border-width-100}; + --spirit-border-width-200: #{global-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.generate-css-variables($value, globals.$prefix + $key); } } diff --git a/packages/web/src/scss/foundation/_typography.scss b/packages/web/src/scss/foundation/_typography.scss index 02ea6850cb..1f35855307 100644 --- a/packages/web/src/scss/foundation/_typography.scss +++ b/packages/web/src/scss/foundation/_typography.scss @@ -1,6 +1,6 @@ // 1. We are able to handle our text sizing ourselves, disable any auto adjustments. -@use '@tokens' as tokens; +@use '@global' as global-tokens; @use '../tools/typography'; :where(html) { @@ -8,7 +8,5 @@ } :where(body) { - @include typography.generate(tokens.$body-medium-text-regular); - - color: tokens.$text-primary-default; + @include typography.generate(global-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/breakout/_breakout.scss b/packages/web/src/scss/helpers/breakout/_breakout.scss index 9644949ef9..79a5602cbb 100644 --- a/packages/web/src/scss/helpers/breakout/_breakout.scss +++ b/packages/web/src/scss/helpers/breakout/_breakout.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '@tokens' as tokens; +@use '@global' as global-tokens; @use '../../tools/breakpoint'; -@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints { +@each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints { $suffix: breakpoint.get-modifier('suffix', $breakpoint-name, $breakpoint-value); @include breakpoint.up($breakpoint-value) { @@ -17,7 +17,7 @@ $previous-breakpoint: ( value: 0, ); -@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints { +@each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints { @if map.get($previous-breakpoint, name) != '' { @include breakpoint.up(map.get($previous-breakpoint, value)) { @include breakpoint.down($breakpoint-value) { 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/_globals.scss b/packages/web/src/scss/settings/_globals.scss new file mode 100644 index 0000000000..92f4d59d5e --- /dev/null +++ b/packages/web/src/scss/settings/_globals.scss @@ -0,0 +1 @@ +$prefix: 'spirit-'; diff --git a/packages/web/src/scss/settings/_transitions.scss b/packages/web/src/scss/settings/_transitions.scss index 5a89450d24..3027d5e1d3 100644 --- a/packages/web/src/scss/settings/_transitions.scss +++ b/packages/web/src/scss/settings/_transitions.scss @@ -1,4 +1,4 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; $_coefficient: 1; // Tweak this to adjust the duration of all transitions during development. @@ -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: global-tokens.$space-700; diff --git a/packages/web/src/scss/settings/_utilities.scss b/packages/web/src/scss/settings/_utilities.scss index de01d52197..ad8a17f17a 100644 --- a/packages/web/src/scss/settings/_utilities.scss +++ b/packages/web/src/scss/settings/_utilities.scss @@ -1,5 +1,6 @@ @use 'sass:map'; -@use '@tokens' as tokens; +@use '@global' as global-tokens; +@use 'globals'; $utilities: ( 'display': ( @@ -22,7 +23,7 @@ $utilities: ( class: mt, values: map.merge( - tokens.$spaces, + global-tokens.$spaces, ( auto: auto, ) @@ -34,7 +35,7 @@ $utilities: ( class: mr, values: map.merge( - tokens.$spaces, + global-tokens.$spaces, ( auto: auto, ) @@ -46,7 +47,7 @@ $utilities: ( class: mb, values: map.merge( - tokens.$spaces, + global-tokens.$spaces, ( auto: auto, ) @@ -58,7 +59,7 @@ $utilities: ( class: ml, values: map.merge( - tokens.$spaces, + global-tokens.$spaces, ( auto: auto, ) @@ -70,7 +71,7 @@ $utilities: ( class: mx, values: map.merge( - tokens.$spaces, + global-tokens.$spaces, ( auto: auto, ) @@ -82,7 +83,7 @@ $utilities: ( class: my, values: map.merge( - tokens.$spaces, + global-tokens.$spaces, ( auto: auto, ) @@ -92,37 +93,37 @@ $utilities: ( responsive: true, property: padding-top, class: pt, - values: tokens.$spaces, + values: global-tokens.$spaces, ), 'padding-right': ( responsive: true, property: padding-right, class: pr, - values: tokens.$spaces, + values: global-tokens.$spaces, ), 'padding-bottom': ( responsive: true, property: padding-bottom, class: pb, - values: tokens.$spaces, + values: global-tokens.$spaces, ), 'padding-left': ( responsive: true, property: padding-left, class: pl, - values: tokens.$spaces, + values: global-tokens.$spaces, ), 'padding-x': ( responsive: true, property: padding-inline, class: px, - values: tokens.$spaces, + values: global-tokens.$spaces, ), 'padding-y': ( responsive: true, property: padding-block, class: py, - values: tokens.$spaces, + values: global-tokens.$spaces, ), 'text-align': ( responsive: true, @@ -134,31 +135,28 @@ $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: var(--#{globals.$prefix}color-text-primary), + secondary: var(--#{globals.$prefix}color-text-secondary), + tertiary: var(--#{globals.$prefix}color-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: var(--#{globals.$prefix}color-background-primary), + secondary: var(--#{globals.$prefix}color-background-secondary), + tertiary: var(--#{globals.$prefix}color-background-tertiary), + brand-primary: var(--#{globals.$prefix}color-background-brand-primary), + brand-secondary: var(--#{globals.$prefix}color-background-brand-secondary), ), ), 'border-radius': ( responsive: false, property: border-radius, class: rounded, - values: tokens.$radii, + values: global-tokens.$radii, ), ); diff --git a/packages/web/src/scss/themes/index.scss b/packages/web/src/scss/themes/index.scss new file mode 100644 index 0000000000..ac88a60162 --- /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); 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..484b7349ef --- /dev/null +++ b/packages/web/src/scss/tools/__tests__/_themes.test.scss @@ -0,0 +1,68 @@ +@use 'true' as test; +@use '../themes'; + +$test-theme-light: ( + action: ( + button: ( + active: #fff, + ), + ), +); + +$test-theme-light-inverted: ( + action: ( + button: ( + active: #000, + ), + ), +); + +$test-themes: ( + theme-light: ( + colors: $test-theme-light, + ), + theme-light-inverted: ( + colors: $test-theme-light, + ), +); + +@include test.describe('generate mixin') { + @include test.it('should generate default and other themes') { + @include test.assert() { + @include test.output() { + :root { + @include themes.generate($test-themes); + } + } + + @include test.expect() { + :root, + .spirit-theme-light { + --spirit-color-action-button-active: #fff; + } + + .spirit-theme-light-inverted { + --spirit-color-action-button-active: #000; + } + } + } + } +} + +@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 themes.generate-css-variables($test-theme-light, 'test-'); + } + } + + @include test.expect() { + :root { + --test-action-button-active: #fff; + } + } + } + } +} 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..6e4787113d --- /dev/null +++ b/packages/web/src/scss/tools/_themes.scss @@ -0,0 +1,35 @@ +// 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 '../settings/globals'; +@use 'string' as string-tools; +@use 'svg'; +@use 'tokens' as tokens-tools; + +@mixin generate($themes) { + // 1. + $is-default-theme: true; + + @each $key, $value in $themes { + $selector: if($is-default-theme, ':root, .#{globals.$prefix}#{$key}', '.#{globals.$prefix}#{$key}'); + + #{$selector} { + @each $token-type-key, $token-type-value in $value { + $token-type-name: string-tools.singularize($token-type-key); + + @include tokens-tools.generate-css-variables( + $token-type-value, + '#{globals.$prefix}#{$token-type-name}' + ); + } + } + + // 2. + :where(#{$selector}) { + color: var(--#{globals.$prefix}color-text-primary); + } + + $is-default-theme: false; + } +} 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/_utilities.scss b/packages/web/src/scss/utilities/_utilities.scss index c9b7f20ef8..75f9fae8a6 100644 --- a/packages/web/src/scss/utilities/_utilities.scss +++ b/packages/web/src/scss/utilities/_utilities.scss @@ -1,11 +1,11 @@ @use 'sass:map'; @use 'sass:meta'; -@use '@tokens' as tokens; +@use '@global' as global-tokens; @use '../settings/utilities' as utilities-settings; @use '../tools/breakpoint'; @use '../tools/utilities'; -@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints { +@each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints { @include breakpoint.up($breakpoint-value) { $infix: if($breakpoint-value == 0, '', '-#{$breakpoint-name}'); 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 625679365c76631bae5fa1a811111338ae1d948a 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 04/88] 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 @@ -