From 15a406f286e9e064bdf62af018e92a8aa82da522 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] BREAKING CHANGE(design-tokens): Introduce new design tokens structure #DS-1430 --- packages/design-tokens/README.md | 266 ++--- 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 | 26 +- .../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 | 1003 +++++++++++++++++ .../src/scss/{generated => global}/index.scss | 3 +- packages/design-tokens/src/scss/index.scss | 1 - .../themes/theme-light-inverted/_colors.scss | 278 +++++ .../themes/theme-light-inverted/index.scss | 1 + .../src/scss/themes/theme-light/_colors.scss | 320 ++++++ .../src/scss/themes/theme-light/index.scss | 1 + 25 files changed, 1855 insertions(+), 758 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 (70%) 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-inverted/_colors.scss create mode 100644 packages/design-tokens/src/scss/themes/theme-light-inverted/index.scss create mode 100644 packages/design-tokens/src/scss/themes/theme-light/_colors.scss create mode 100644 packages/design-tokens/src/scss/themes/theme-light/index.scss diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index bd2e454023..47c1caa26a 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -2,142 +2,94 @@ > 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 theme tokens are specific to a particular theme. -## Install +They are managed in Figma and exported to 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: +In `scss` directory are files `@global.scss` and `@themes.scss` which contain links to all available tokens. -```shell -yarn add @lmc-eu/spirit-design-tokens -``` +### Global Tokens -or +The category consist of these groups: -```shell -npm install --save @lmc-eu/spirit-design-tokens -``` +- Borders +- Gradients +- Other +- Radii +- Shadows +- Typography -## Basic Usage +These tokens does not depend on any theme and are shared across all 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 themes in the `src/themes` directory. Each theme has +its own directory and set of design tokens. -This makes it easier to [migrate your code to Spirit][migrate-to-spirit] in the -future. +The category currently consist only of this group: -
-Optional: import by categories +- Colors -You can also import individual design token files by categories, e.g.: +Each theme consists of the same set of tokens, but with different values. -```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. -### 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 +121,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 +211,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 +233,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 +243,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 +267,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.
@@ -275,15 +288,4 @@ them via your custom [`@tokens` API](#tokens-api). See the [LICENSE](LICENSE.md) file for information. [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 873cb1867b..f995ab4afd 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..da68d8cb45 --- /dev/null +++ b/packages/design-tokens/src/scss/@themes.scss @@ -0,0 +1,13 @@ +@use 'themes/theme-light/index' as theme-light; +@use 'themes/theme-light-inverted/index' as theme-light-inverted; + +$themes: ( + // The first theme is the default theme, as the left column in the Figma table. + theme-light: + ( + colors: theme-light.$colors, + ), + theme-light-inverted: ( + colors: theme-light-inverted.$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..8512e17df1 --- /dev/null +++ b/packages/design-tokens/src/scss/global/_gradients.scss @@ -0,0 +1,10 @@ +// Copied from last version +$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 70% rename from packages/design-tokens/src/scss/generated/_other.scss rename to packages/design-tokens/src/scss/global/_other.scss index 4f68fcf173..0ca853fa5d 100644 --- a/packages/design-tokens/src/scss/generated/_other.scss +++ b/packages/design-tokens/src/scss/global/_other.scss @@ -1,15 +1,19 @@ -// 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, @@ -31,8 +35,8 @@ $container-paddings: ( desktop: $container-padding-desktop, ) !default; -$grid-gutters: ( - mobile: $grid-gutter-mobile, - tablet: $grid-gutter-tablet, - desktop: $grid-gutter-desktop, +$grid-spacings: ( + mobile: $grid-spacing-mobile, + tablet: $grid-spacing-tablet, + desktop: $grid-spacing-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..bfc838da9b --- /dev/null +++ b/packages/design-tokens/src/scss/global/_shadows.scss @@ -0,0 +1,15 @@ +// Copied from last version +$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-basic-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..142175ac9f --- /dev/null +++ b/packages/design-tokens/src/scss/global/_typography.scss @@ -0,0 +1,1003 @@ +// Manually created from Figma +$headline-1-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; + +$headline-1-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; + +$headline-1-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; + +$headline-1-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; + +$headline-2-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; + +$headline-2-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; + +$headline-2-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; + +$headline-2-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; + +$headline-3-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + 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; + +$headline-3-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + 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; + +$headline-3-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + 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; + +$headline-3-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + 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; + +$headline-4-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: 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; + +$headline-4-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: 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; + +$headline-4-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: 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; + +$headline-4-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: 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; + +$headline-5-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; + +$headline-5-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; + +$headline-5-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; + +$headline-5-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-1-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.6, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.6, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 400, + line-height: 1.6, + ), +) !default; + +$body-1-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.6, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.6, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 600, + line-height: 1.6, + ), +) !default; + +$body-1-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.6, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.6, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: normal, + font-weight: 700, + line-height: 1.6, + ), +) !default; + +$body-1-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.6, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.6, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 24px, + font-style: italic, + font-weight: 400, + line-height: 1.6, + ), +) !default; + +$body-2-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.55, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.55, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 400, + line-height: 1.55, + ), +) !default; + +$body-2-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.55, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.55, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 600, + line-height: 1.55, + ), +) !default; + +$body-2-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.55, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.55, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 700, + line-height: 1.55, + ), +) !default; + +$body-2-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.55, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.55, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 400, + line-height: 1.55, + ), +) !default; + +$body-3-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-3-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-3-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-3-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-4-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 400, + line-height: 1.42, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 400, + line-height: 1.42, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 400, + line-height: 1.42, + ), +) !default; + +$body-4-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 600, + line-height: 1.42, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 600, + line-height: 1.42, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 600, + line-height: 1.42, + ), +) !default; + +$body-4-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 700, + line-height: 1.42, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 700, + line-height: 1.42, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 700, + line-height: 1.42, + ), +) !default; + +$body-4-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 400, + line-height: 1.42, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 400, + line-height: 1.42, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 400, + line-height: 1.42, + ), +) !default; + +$body-5-regular: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 400, + line-height: 1.32, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 400, + line-height: 1.32, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 400, + line-height: 1.32, + ), +) !default; + +$body-5-semibold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 600, + line-height: 1.32, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 600, + line-height: 1.32, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 600, + line-height: 1.32, + ), +) !default; + +$body-5-bold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 700, + line-height: 1.32, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 700, + line-height: 1.32, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 700, + line-height: 1.32, + ), +) !default; + +$body-5-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 400, + line-height: 1.32, + ), + tablet: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 400, + line-height: 1.32, + ), + desktop: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 400, + line-height: 1.32, + ), +) !default; + +$styles: ( + headline-1-regular: $headline-1-regular, + headline-1-semibold: $headline-1-semibold, + headline-1-bold: $headline-1-bold, + headline-1-italic: $headline-1-italic, + headline-2-regular: $headline-2-regular, + headline-2-semibold: $headline-2-semibold, + headline-2-bold: $headline-2-bold, + headline-2-italic: $headline-2-italic, + headline-3-regular: $headline-3-regular, + headline-3-semibold: $headline-3-semibold, + headline-3-bold: $headline-3-bold, + headline-3-italic: $headline-3-italic, + headline-4-regular: $headline-4-regular, + headline-4-semibold: $headline-4-semibold, + headline-4-bold: $headline-4-bold, + headline-4-italic: $headline-4-italic, + headline-5-regular: $headline-5-regular, + headline-5-semibold: $headline-5-semibold, + headline-5-bold: $headline-5-bold, + headline-5-italic: $headline-5-italic, + body-1-regular: $body-1-regular, + body-1-semibold: $body-1-semibold, + body-1-bold: $body-1-bold, + body-1-italic: $body-1-italic, + body-2-regular: $body-2-regular, + body-2-semibold: $body-2-semibold, + body-2-bold: $body-2-bold, + body-2-italic: $body-2-italic, + body-3-regular: $body-3-regular, + body-3-semibold: $body-3-semibold, + body-3-bold: $body-3-bold, + body-3-italic: $body-3-italic, + body-4-regular: $body-4-regular, + body-4-semibold: $body-4-semibold, + body-4-bold: $body-4-bold, + body-4-italic: $body-4-italic, + body-5-regular: $body-5-regular, + body-5-semibold: $body-5-semibold, + body-5-bold: $body-5-bold, + body-5-italic: $body-5-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-inverted/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-inverted/_colors.scss new file mode 100644 index 0000000000..e4b617e38f --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-inverted/_colors.scss @@ -0,0 +1,278 @@ +// Manually created from Figma +$text-primary: #fff !default; +$text-secondary: #e9e9e9 !default; +$text-tertiary: #d6d6d6 !default; + +$emotion-danger-active: #fff !default; +$emotion-danger-background: #ba3e5a !default; +$emotion-danger-border: #fff !default; +$emotion-danger-content: #e84b6f !default; +$emotion-danger-default: #fff !default; +$emotion-danger-hover: #fff !default; + +$emotion-informative-active: #fff !default; +$emotion-informative-background: #3b6bab !default; +$emotion-informative-border: #fff !default; +$emotion-informative-content: #fff !default; +$emotion-informative-default: #fff !default; +$emotion-informative-hover: #fff !default; + +$emotion-success-active: #fff !default; +$emotion-success-background: #607c13 !default; +$emotion-success-border: #fff !default; +$emotion-success-content: #88b412 !default; +$emotion-success-default: #fff !default; +$emotion-success-hover: #fff !default; + +$emotion-warning-active: #fff !default; +$emotion-warning-background: #a98300 !default; +$emotion-warning-border: #fff !default; +$emotion-warning-content: #d1a200 !default; +$emotion-warning-default: #fff !default; +$emotion-warning-hover: #fff !default; + +$custom-01-active: #fff !default; +$custom-01-background: #fff !default; +$custom-01-content: #fff !default; +$custom-01-default: #fff !default; +$custom-01-hover: #fff !default; + +$custom-02-active: #fff !default; +$custom-02-background: #fff !default; +$custom-02-content: #fff !default; +$custom-02-default: #fff !default; +$custom-02-hover: #fff !default; + +$disabled-background: #ffffff1a !default; +$disabled-border: #fff3 !default; +$disabled-foreground: #fff !default; +$disabled-text: #ffffff80 !default; + +$border-interactive-active: #fff !default; +$border-interactive-default: #fff !default; +$border-interactive-error: #e84b6f !default; +$border-interactive-hover: #fff !default; + +$border-interactive-informative: #fff !default; +$border-interactive-selected: #fff !default; +$border-interactive-success: #fff !default; +$border-interactive-warning: #d1a200 !default; + +$border-secondary-default: #fff !default; + +$border-focus-default: #fff !default; + +$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: #ffffffbf !default; +$action-button-primary-border: #0617ac80 !default; +$action-button-primary-content: #0617ac !default; +$action-button-primary-default: #fff !default; +$action-button-primary-hover: #ffffffe5 !default; + +$action-button-secondary-active: #ffffff1a !default; +$action-button-secondary-border: #fff6 !default; +$action-button-secondary-content: #fff !default; +$action-button-secondary-default: #fff3 !default; +$action-button-secondary-hover: #ffffff26 !default; + +$action-button-tertiary-active: #00000026 !default; +$action-button-tertiary-border: #fff6 !default; +$action-button-tertiary-content: #fff !default; +$action-button-tertiary-default: #fff0 !default; +$action-button-tertiary-hover: #0000001a !default; + +$action-link-primary-active: #9d9d9d !default; +$action-link-primary-default: #ededed !default; +$action-link-primary-hover: #ededed !default; + +$action-link-secondary-active: #fff !default; +$action-link-secondary-default: #9d9d9d !default; +$action-link-secondary-hover: #ededed !default; + +$action-link-tertiary-active: #fff !default; +$action-link-tertiary-default: #b6efec !default; +$action-link-tertiary-hover: #ededed !default; + +$action-link-visited-default: #cfe161 !default; + +$background-form-field-active: #ffffff1a !default; +$background-form-field-default: #fff0 !default; +$background-form-field-hover: #ffffff1a !default; + +$background-brand-primary: #fff !default; +$background-brand-secondary: #fff !default; + +$background-interactive-active: #fff3 !default; +$background-interactive-default: #fff0 !default; +$background-interactive-hover: #ffffff1a !default; + +$background-backdrop: #0b1c2199 !default; + +$background-primary: #0617ac !default; +$background-secondary: #07181e !default; +$background-tertiary: #fff !default; + +$text-colors: ( + primary: $text-primary, + secondary: $text-secondary, + tertiary: $text-tertiary, +) !default; + +$emotion-colors: ( + danger: ( + hover: $emotion-danger-hover, + active: $emotion-danger-active, + background: $emotion-danger-background, + content: $emotion-danger-content, + border: $emotion-danger-border, + ), + informative: ( + hover: $emotion-informative-hover, + active: $emotion-informative-active, + background: $emotion-informative-background, + content: $emotion-informative-content, + border: $emotion-informative-border, + ), + success: ( + hover: $emotion-success-hover, + active: $emotion-success-active, + background: $emotion-success-background, + content: $emotion-success-content, + border: $emotion-success-border, + ), + warning: ( + hover: $emotion-warning-hover, + active: $emotion-warning-active, + background: $emotion-warning-background, + content: $emotion-warning-content, + border: $emotion-warning-border, + ), +) !default; + +$custom-colors: ( + 01: ( + default: $custom-01-default, + hover: $custom-01-hover, + active: $custom-01-active, + background: $custom-01-background, + content: $custom-01-content, + ), + 02: ( + default: $custom-02-default, + hover: $custom-02-hover, + active: $custom-02-active, + background: $custom-02-background, + content: $custom-02-content, + ), +) !default; + +$disabled-colors: ( + border: $disabled-border, + background: $disabled-background, + foreground: $disabled-foreground, + text: $disabled-text, +) !default; + +$border-colors: ( + interactive: ( + default: $border-interactive-default, + hover: $border-interactive-hover, + active: $border-interactive-active, + selected: $border-interactive-selected, + ), + secondary: ( + default: $border-secondary-default, + ), + focus: ( + default: $border-focus-default, + ), +) !default; + +$action-colors: ( + button: ( + primary: ( + default: $action-button-primary-default, + hover: $action-button-primary-hover, + active: $action-button-primary-active, + content: $action-button-primary-content, + border: $action-button-primary-border, + ), + secondary: ( + default: $action-button-secondary-default, + hover: $action-button-secondary-hover, + active: $action-button-secondary-active, + content: $action-button-secondary-content, + border: $action-button-secondary-border, + ), + tertiary: ( + default: $action-button-tertiary-default, + hover: $action-button-tertiary-hover, + active: $action-button-tertiary-active, + content: $action-button-tertiary-content, + border: $action-button-tertiary-border, + ), + plain: ( + default: $action-button-plain-default, + hover: $action-button-plain-hover, + active: $action-button-plain-active, + content: $action-button-plain-content, + border: $action-button-plain-border, + ), + ), + link: ( + primary: ( + default: $action-link-primary-default, + hover: $action-link-primary-hover, + active: $action-link-primary-active, + ), + secondary: ( + default: $action-link-secondary-default, + hover: $action-link-secondary-hover, + active: $action-link-secondary-active, + ), + tertiary: ( + default: $action-link-tertiary-default, + hover: $action-link-tertiary-hover, + active: $action-link-tertiary-active, + ), + visited: ( + default: $action-link-visited-default, + ), + ), +) !default; + +$background-colors: ( + form-field: ( + default: $background-form-field-default, + hover: $background-form-field-hover, + active: $background-form-field-active, + ), + brand: ( + primary: $background-brand-primary, + secondary: $background-brand-secondary, + ), + interactive: ( + default: $background-interactive-default, + hover: $background-interactive-hover, + active: $background-interactive-active, + ), + primary: $background-primary, + secondary: $background-secondary, + tertiary: $background-tertiary, + backdrop: $background-backdrop, +) !default; + +$colors: ( + text: $text-colors, + emotion: $emotion-colors, + custom: $custom-colors, + disabled: $disabled-colors, + border: $border-colors, + action: $action-colors, + background: $background-colors, +) !default; diff --git a/packages/design-tokens/src/scss/themes/theme-light-inverted/index.scss b/packages/design-tokens/src/scss/themes/theme-light-inverted/index.scss new file mode 100644 index 0000000000..7011938362 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light-inverted/index.scss @@ -0,0 +1 @@ +@forward 'colors'; diff --git a/packages/design-tokens/src/scss/themes/theme-light/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light/_colors.scss new file mode 100644 index 0000000000..a626dcd888 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light/_colors.scss @@ -0,0 +1,320 @@ +// 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; + +$background-backdrop: #0b1c2199 !default; + +$background-brand-primary: #0b1c21 !default; +$background-brand-secondary: #30588c !default; + +$background-form-field-active: #fff !default; +$background-form-field-default: #fff !default; +$background-form-field-hover: #fff !default; + +$background-interactive-active: #f1f1f1 !default; +$background-interactive-default: #fff0 !default; +$background-interactive-hover: #f5f5f5 !default; + +$background-primary: #fff !default; +$background-secondary: #f0f0f0 !default; +$background-tertiary: #000 !default; + +$border-focus-default: #4666ae !default; + +$border-interactive-active: #b1b1b1 !default; +$border-interactive-default: #d8d8d8 !default; +$border-interactive-hover: #c5c5c5 !default; +$border-interactive-selected: #29616f !default; + +$border-interactive-danger: #ba3e5a !default; +$border-interactive-informative: #3b6bab !default; +$border-interactive-success: #607c13 !default; +$border-interactive-warning: #a98300 !default; + +$border-secondary-default: #e9e9e9 !default; + +$custom-01-active: #cca22f !default; +$custom-01-background: #fff !default; +$custom-01-content: #fff !default; +$custom-01-default: #ffcb3b !default; +$custom-01-hover: #e6b735 !default; + +$custom-02-active: #0aa085 !default; +$custom-02-background: #fff !default; +$custom-02-content: #fff !default; +$custom-02-default: #0cc8a6 !default; +$custom-02-hover: #0bb496 !default; + +$disabled-background: #f5f5f5 !default; +$disabled-border: #e3e3e3 !default; +$disabled-foreground: #a6a6a6 !default; +$disabled-text: #a6a6a6 !default; + +$emotion-danger-active: #6f2535 !default; +$emotion-danger-background: #fbeef1 !default; +$emotion-danger-border: #ba3e5a !default; +$emotion-danger-content: #ba3e5a !default; +$emotion-danger-default: #ba3e5a !default; +$emotion-danger-hover: #953248 !default; + +$emotion-informative-active: #26456e !default; +$emotion-informative-background: #e8eff7 !default; +$emotion-informative-border: #3b6bab !default; +$emotion-informative-content: #3b6bab !default; +$emotion-informative-default: #3b6bab !default; +$emotion-informative-hover: #30588c !default; + +$emotion-success-active: #33420a !default; +$emotion-success-background: #f6fbe9 !default; +$emotion-success-border: #607c13 !default; +$emotion-success-content: #607c13 !default; +$emotion-success-default: #607c13 !default; +$emotion-success-hover: #485d0e !default; + +$emotion-warning-active: #423400 !default; +$emotion-warning-background: #f8f2e4 !default; +$emotion-warning-border: #a98300 !default; +$emotion-warning-content: #a98300 !default; +$emotion-warning-default: #a98300 !default; +$emotion-warning-hover: #755b00 !default; + +$focus-basic-color-01: #d2c2ffb3 !default; + +$gradients-basic-overlay-color-01: #fff !default; +$gradients-basic-overlay-color-02: #fff0 !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: ( + default: $action-button-primary-default, + hover: $action-button-primary-hover, + active: $action-button-primary-active, + content: $action-button-primary-content, + border: $action-button-primary-border, + ), + secondary: ( + default: $action-button-secondary-default, + hover: $action-button-secondary-hover, + active: $action-button-secondary-active, + content: $action-button-secondary-content, + border: $action-button-secondary-border, + ), + tertiary: ( + default: $action-button-tertiary-default, + hover: $action-button-tertiary-hover, + active: $action-button-tertiary-active, + content: $action-button-tertiary-content, + border: $action-button-tertiary-border, + ), + plain: ( + default: $action-button-plain-default, + hover: $action-button-plain-hover, + active: $action-button-plain-active, + content: $action-button-plain-content, + border: $action-button-plain-border, + ), + ), + link: ( + primary: ( + default: $action-link-primary-default, + hover: $action-link-primary-hover, + active: $action-link-primary-active, + ), + secondary: ( + default: $action-link-secondary-default, + hover: $action-link-secondary-hover, + active: $action-link-secondary-active, + ), + tertiary: ( + default: $action-link-tertiary-default, + hover: $action-link-tertiary-hover, + active: $action-link-tertiary-active, + ), + visited: ( + default: $action-link-visited-default, + ), + ), +) !default; + +$background-colors: ( + form-field: ( + default: $background-form-field-default, + hover: $background-form-field-hover, + active: $background-form-field-active, + ), + brand: ( + primary: $background-brand-primary, + secondary: $background-brand-secondary, + ), + interactive: ( + default: $background-interactive-default, + hover: $background-interactive-hover, + active: $background-interactive-active, + ), + primary: $background-primary, + secondary: $background-secondary, + tertiary: $background-tertiary, + backdrop: $background-backdrop, +) !default; + +$border-colors: ( + interactive: ( + default: $border-interactive-default, + hover: $border-interactive-hover, + active: $border-interactive-active, + selected: $border-interactive-selected, + ), + secondary: ( + default: $border-secondary-default, + ), + focus: ( + default: $border-focus-default, + ), +) !default; + +$custom-colors: ( + 01: ( + default: $custom-01-default, + hover: $custom-01-hover, + active: $custom-01-active, + background: $custom-01-background, + content: $custom-01-content, + ), + 02: ( + default: $custom-02-default, + hover: $custom-02-hover, + active: $custom-02-active, + background: $custom-02-background, + content: $custom-02-content, + ), +) !default; + +$disabled-colors: ( + border: $disabled-border, + background: $disabled-background, + foreground: $disabled-foreground, + text: $disabled-text, +) !default; + +$emotion-colors: ( + danger: ( + hover: $emotion-danger-hover, + active: $emotion-danger-active, + background: $emotion-danger-background, + content: $emotion-danger-content, + border: $emotion-danger-border, + ), + informative: ( + hover: $emotion-informative-hover, + active: $emotion-informative-active, + background: $emotion-informative-background, + content: $emotion-informative-content, + border: $emotion-informative-border, + ), + success: ( + hover: $emotion-success-hover, + active: $emotion-success-active, + background: $emotion-success-background, + content: $emotion-success-content, + border: $emotion-success-border, + ), + warning: ( + hover: $emotion-warning-hover, + active: $emotion-warning-active, + background: $emotion-warning-background, + content: $emotion-warning-content, + border: $emotion-warning-border, + ), +) !default; + +$focus-colors: ( + basic: ( + color-01: $focus-basic-color-01, + ), +) !default; + +$gradient-colors: ( + basic-overlay: ( + color-01: $gradients-basic-overlay-color-01, + color-02: $gradients-basic-overlay-color-02, + ), +) !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, + gradient: $gradient-colors, + shadow: $shadow-colors, + text: $text-colors, +) !default; diff --git a/packages/design-tokens/src/scss/themes/theme-light/index.scss b/packages/design-tokens/src/scss/themes/theme-light/index.scss new file mode 100644 index 0000000000..7011938362 --- /dev/null +++ b/packages/design-tokens/src/scss/themes/theme-light/index.scss @@ -0,0 +1 @@ +@forward 'colors';