From 2014a4445f4247e40c4142d3129555b908f4a932 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 8 Jun 2022 09:51:00 +0200 Subject: [PATCH] feat(react-theme-sass): Add Sass variables mapped to CSS variables provided by react-theme (#22964) * add react-theme-sass package * add SASS variables * Change file * remove spec template * update yarn.lock after merge * update yarn.lock after merge * Replace node-sass with dart-sass, remove unused dependencies * Update .github/CODEOWNERS Co-authored-by: Justin Slone <40304143+JustSlone@users.noreply.github.com> Co-authored-by: Justin Slone <40304143+JustSlone@users.noreply.github.com> --- .github/CODEOWNERS | 1 + ...-2b6d8ee9-5f41-4727-b1b6-c04d8339e80c.json | 7 + package.json | 1 + .../react-theme-sass/.babelrc.json | 3 + .../react-theme-sass/.eslintrc.json | 4 + .../react-theme-sass/.npmignore | 29 ++ .../react-components/react-theme-sass/LICENSE | 15 + .../react-theme-sass/README.md | 35 ++ .../config/api-extractor.json | 5 + .../config/api-extractor.local.json | 5 + .../react-theme-sass/config/tests.js | 1 + .../etc/react-theme-sass.api.md | 9 + .../react-theme-sass/jest.config.js | 22 + .../react-theme-sass/just.config.ts | 3 + .../react-theme-sass/package.json | 39 ++ .../react-theme-sass/sass/Sass.test.ts | 14 + .../sass/borderRadiusTokens.scss | 6 + .../sass/colorPaletteTokens.scss | 489 ++++++++++++++++++ .../react-theme-sass/sass/colorTokens.scss | 142 +++++ .../react-theme-sass/sass/curveTokens.scss | 9 + .../react-theme-sass/sass/durationTokens.scss | 7 + .../react-theme-sass/sass/fontTokens.scss | 29 ++ .../react-theme-sass/sass/shadowTokens.scss | 13 + .../react-theme-sass/sass/spacingTokens.scss | 22 + .../sass/strokeWidthTokens.scss | 4 + .../react-theme-sass/sass/tokens.scss | 9 + .../react-theme-sass/src/index.ts | 5 + .../react-theme-sass/tsconfig.json | 22 + .../react-theme-sass/tsconfig.lib.json | 14 + .../react-theme-sass/tsconfig.spec.json | 9 + .../theme-designer/src/ThemeDesigner.types.ts | 3 +- tsconfig.base.json | 1 + workspace.json | 7 + yarn.lock | 9 +- 34 files changed, 990 insertions(+), 3 deletions(-) create mode 100644 change/@fluentui-react-theme-sass-2b6d8ee9-5f41-4727-b1b6-c04d8339e80c.json create mode 100644 packages/react-components/react-theme-sass/.babelrc.json create mode 100644 packages/react-components/react-theme-sass/.eslintrc.json create mode 100644 packages/react-components/react-theme-sass/.npmignore create mode 100644 packages/react-components/react-theme-sass/LICENSE create mode 100644 packages/react-components/react-theme-sass/README.md create mode 100644 packages/react-components/react-theme-sass/config/api-extractor.json create mode 100644 packages/react-components/react-theme-sass/config/api-extractor.local.json create mode 100644 packages/react-components/react-theme-sass/config/tests.js create mode 100644 packages/react-components/react-theme-sass/etc/react-theme-sass.api.md create mode 100644 packages/react-components/react-theme-sass/jest.config.js create mode 100644 packages/react-components/react-theme-sass/just.config.ts create mode 100644 packages/react-components/react-theme-sass/package.json create mode 100644 packages/react-components/react-theme-sass/sass/Sass.test.ts create mode 100644 packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/colorTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/curveTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/durationTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/fontTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/shadowTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/spacingTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss create mode 100644 packages/react-components/react-theme-sass/sass/tokens.scss create mode 100644 packages/react-components/react-theme-sass/src/index.ts create mode 100644 packages/react-components/react-theme-sass/tsconfig.json create mode 100644 packages/react-components/react-theme-sass/tsconfig.lib.json create mode 100644 packages/react-components/react-theme-sass/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6e45e6d84f4474..01f1542d58a5d2 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -165,6 +165,7 @@ packages/react-components/react-toolbar @microsoft/teams-prg @chpalac @ling1726 packages/react-components/react-portal-compat @microsoft/teams-prg packages/react-components/react-alert @microsoft/teams-prg packages/react-components/react-portal-compat-context @microsoft/teams-prg +packages/react-components/react-theme-sass @microsoft/teams-prg packages/react-components/theme-designer @microsoft/cxe-coastal packages/react-components/global-context @microsoft/teams-prg packages/react-components/babel-preset-global-context @microsoft/teams-prg diff --git a/change/@fluentui-react-theme-sass-2b6d8ee9-5f41-4727-b1b6-c04d8339e80c.json b/change/@fluentui-react-theme-sass-2b6d8ee9-5f41-4727-b1b6-c04d8339e80c.json new file mode 100644 index 00000000000000..5f89a6a9274fec --- /dev/null +++ b/change/@fluentui-react-theme-sass-2b6d8ee9-5f41-4727-b1b6-c04d8339e80c.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add SASS variables mapped to CSS variables provided by react-theme", + "packageName": "@fluentui/react-theme-sass", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/package.json b/package.json index f88ddb47ecc281..bdb9299f76f89d 100644 --- a/package.json +++ b/package.json @@ -205,6 +205,7 @@ "jest-axe": "5.0.1", "jest-cli": "26.6.3", "jest-environment-jsdom": "26.6.2", + "jest-environment-node-single-context": "26.2.0", "jest-snapshot": "26.6.2", "jest-watch-typeahead": "0.6.5", "jju": "1.4.0", diff --git a/packages/react-components/react-theme-sass/.babelrc.json b/packages/react-components/react-theme-sass/.babelrc.json new file mode 100644 index 00000000000000..38bf1f7a945cf8 --- /dev/null +++ b/packages/react-components/react-theme-sass/.babelrc.json @@ -0,0 +1,3 @@ +{ + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-components/react-theme-sass/.eslintrc.json b/packages/react-components/react-theme-sass/.eslintrc.json new file mode 100644 index 00000000000000..24ece4e08168be --- /dev/null +++ b/packages/react-components/react-theme-sass/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/node"], + "root": true +} diff --git a/packages/react-components/react-theme-sass/.npmignore b/packages/react-components/react-theme-sass/.npmignore new file mode 100644 index 00000000000000..52d2a7273a151d --- /dev/null +++ b/packages/react-components/react-theme-sass/.npmignore @@ -0,0 +1,29 @@ +.storybook/ +.vscode/ +bundle-size/ +config/ +coverage/ +e2e/ +etc/ +node_modules/ +src/ +dist/types/ +temp/ +__fixtures__ +__mocks__ +__tests__ + +*.api.json +*.log +*.spec.* +*.stories.* +*.test.* +*.yml + +# config files +*config.* +*rc.* +.editorconfig +.eslint* +.git* +.prettierignore diff --git a/packages/react-components/react-theme-sass/LICENSE b/packages/react-components/react-theme-sass/LICENSE new file mode 100644 index 00000000000000..9fc57dc0edead2 --- /dev/null +++ b/packages/react-components/react-theme-sass/LICENSE @@ -0,0 +1,15 @@ +@fluentui/react-theme-sass + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components/react-theme-sass/README.md b/packages/react-components/react-theme-sass/README.md new file mode 100644 index 00000000000000..7567e49c083ec9 --- /dev/null +++ b/packages/react-components/react-theme-sass/README.md @@ -0,0 +1,35 @@ +# @fluentui/react-theme-sass + +**React Theme Sass for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** + +SASS variables referencing react-theme design tokens injected to DOM by react-provider. + +## Usage + +1. Instantiate a `FluentProvider` to inject a Fluent theme into a DOM: + +```jsx +import React from 'react'; +import ReactDOM from 'react-dom'; +import { FluentProvider, teamsLightTheme } from '@fluentui/react-components'; +import App from './App'; +ReactDOM.render( + + + , + document.getElementById('root'), +); +``` + +2. In SCSS styles you can import SCSS variables from `@fluentui/react-theme-sass` and use them in the styles: + +```scss +@import '~@fluentui/react-theme-sass'; +.brandedElement { + color: $colorBrandForeground1; + background: $colorBrandBackground; + border-radius: $borderRadiusLarge; +} +``` + +⚠ This package does not export any Javascript code.️ diff --git a/packages/react-components/react-theme-sass/config/api-extractor.json b/packages/react-components/react-theme-sass/config/api-extractor.json new file mode 100644 index 00000000000000..eee94ff6de902d --- /dev/null +++ b/packages/react-components/react-theme-sass/config/api-extractor.json @@ -0,0 +1,5 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", + "mainEntryPointFilePath": "/dist/types/index.d.ts" +} diff --git a/packages/react-components/react-theme-sass/config/api-extractor.local.json b/packages/react-components/react-theme-sass/config/api-extractor.local.json new file mode 100644 index 00000000000000..69e764bce3a592 --- /dev/null +++ b/packages/react-components/react-theme-sass/config/api-extractor.local.json @@ -0,0 +1,5 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "./api-extractor.json", + "mainEntryPointFilePath": "/dist/types/packages/react-components//src/index.d.ts" +} diff --git a/packages/react-components/react-theme-sass/config/tests.js b/packages/react-components/react-theme-sass/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/react-components/react-theme-sass/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/react-components/react-theme-sass/etc/react-theme-sass.api.md b/packages/react-components/react-theme-sass/etc/react-theme-sass.api.md new file mode 100644 index 00000000000000..fa84dd9a529b30 --- /dev/null +++ b/packages/react-components/react-theme-sass/etc/react-theme-sass.api.md @@ -0,0 +1,9 @@ +## API Report File for "@fluentui/react-theme-sass" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/react-components/react-theme-sass/jest.config.js b/packages/react-components/react-theme-sass/jest.config.js new file mode 100644 index 00000000000000..46f285b0868dc1 --- /dev/null +++ b/packages/react-components/react-theme-sass/jest.config.js @@ -0,0 +1,22 @@ +// @ts-check + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'react-theme-sass', + preset: '../../../jest.preset.js', + globals: { + 'ts-jest': { + tsConfig: '/tsconfig.spec.json', + diagnostics: false, + }, + }, + testEnvironment: 'jest-environment-node-single-context', + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@griffel/jest-serializer'], +}; diff --git a/packages/react-components/react-theme-sass/just.config.ts b/packages/react-components/react-theme-sass/just.config.ts new file mode 100644 index 00000000000000..bcc7d9d264037c --- /dev/null +++ b/packages/react-components/react-theme-sass/just.config.ts @@ -0,0 +1,3 @@ +import { preset } from '@fluentui/scripts'; + +preset(); diff --git a/packages/react-components/react-theme-sass/package.json b/packages/react-components/react-theme-sass/package.json new file mode 100644 index 00000000000000..87c2cbd1a4ac18 --- /dev/null +++ b/packages/react-components/react-theme-sass/package.json @@ -0,0 +1,39 @@ +{ + "name": "@fluentui/react-theme-sass", + "version": "9.0.0-alpha.0", + "description": "SASS variables referencing react-theme design tokens injected to DOM by react-provider.", + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "dist/index.d.ts", + "style": "sass/tokens.scss", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "scripts": { + "build": "just-scripts build", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "lint": "just-scripts lint", + "start": "yarn storybook", + "test": "jest --passWithNoTests", + "docs": "api-extractor run --config=config/api-extractor.local.json --local", + "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-theme-sass/src && yarn docs", + "storybook": "node ../../../scripts/storybook/runner", + "type-check": "tsc -b tsconfig.json" + }, + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/scripts": "^1.0.0" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "minor", + "patch" + ] + } +} diff --git a/packages/react-components/react-theme-sass/sass/Sass.test.ts b/packages/react-components/react-theme-sass/sass/Sass.test.ts new file mode 100644 index 00000000000000..0ba6bdbfd626bc --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/Sass.test.ts @@ -0,0 +1,14 @@ +import { compileString } from 'sass'; +import { webLightTheme } from '@fluentui/react-theme'; + +describe('Sass tokens', () => { + // by referencing all react-theme tokens as SCSS variables, verifies that all the variables are exported + it('exist for all theme tokens', () => { + const data = [ + '@import "sass/tokens.scss";', + ...Object.keys(webLightTheme).map(tokenName => `$expected__${tokenName}: $${tokenName};`), + ].join('\n'); + + compileString(data, { loadPaths: ['.'] }); + }); +}); diff --git a/packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss b/packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss new file mode 100644 index 00000000000000..8c7b4a8d46a1e1 --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss @@ -0,0 +1,6 @@ +$borderRadiusNone: var(--borderRadiusNone); +$borderRadiusSmall: var(--borderRadiusSmall); +$borderRadiusMedium: var(--borderRadiusMedium); +$borderRadiusLarge: var(--borderRadiusLarge); +$borderRadiusXLarge: var(--borderRadiusXLarge); +$borderRadiusCircular: var(--borderRadiusCircular); diff --git a/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss b/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss new file mode 100644 index 00000000000000..ac9bf61b8714d6 --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss @@ -0,0 +1,489 @@ +$colorPaletteDarkRedBackground1: var(--colorPaletteDarkRedBackground1); +$colorPaletteDarkRedBackground2: var(--colorPaletteDarkRedBackground2); +$colorPaletteDarkRedBackground3: var(--colorPaletteDarkRedBackground3); +$colorPaletteDarkRedForeground1: var(--colorPaletteDarkRedForeground1); +$colorPaletteDarkRedForeground2: var(--colorPaletteDarkRedForeground2); +$colorPaletteDarkRedForeground3: var(--colorPaletteDarkRedForeground3); +$colorPaletteDarkRedBorderActive: var(--colorPaletteDarkRedBorderActive); +$colorPaletteDarkRedBorder1: var(--colorPaletteDarkRedBorder1); +$colorPaletteDarkRedBorder2: var(--colorPaletteDarkRedBorder2); + +$colorPaletteBurgundyBackground1: var(--colorPaletteBurgundyBackground1); +$colorPaletteBurgundyBackground2: var(--colorPaletteBurgundyBackground2); +$colorPaletteBurgundyBackground3: var(--colorPaletteBurgundyBackground3); +$colorPaletteBurgundyForeground1: var(--colorPaletteBurgundyForeground1); +$colorPaletteBurgundyForeground2: var(--colorPaletteBurgundyForeground2); +$colorPaletteBurgundyForeground3: var(--colorPaletteBurgundyForeground3); +$colorPaletteBurgundyBorderActive: var(--colorPaletteBurgundyBorderActive); +$colorPaletteBurgundyBorder1: var(--colorPaletteBurgundyBorder1); +$colorPaletteBurgundyBorder2: var(--colorPaletteBurgundyBorder2); + +$colorPaletteCranberryBackground1: var(--colorPaletteCranberryBackground1); +$colorPaletteCranberryBackground2: var(--colorPaletteCranberryBackground2); +$colorPaletteCranberryBackground3: var(--colorPaletteCranberryBackground3); +$colorPaletteCranberryForeground1: var(--colorPaletteCranberryForeground1); +$colorPaletteCranberryForeground2: var(--colorPaletteCranberryForeground2); +$colorPaletteCranberryForeground3: var(--colorPaletteCranberryForeground3); +$colorPaletteCranberryBorderActive: var(--colorPaletteCranberryBorderActive); +$colorPaletteCranberryBorder1: var(--colorPaletteCranberryBorder1); +$colorPaletteCranberryBorder2: var(--colorPaletteCranberryBorder2); + +$colorPaletteRedBackground1: var(--colorPaletteRedBackground1); +$colorPaletteRedBackground2: var(--colorPaletteRedBackground2); +$colorPaletteRedBackground3: var(--colorPaletteRedBackground3); +$colorPaletteRedForeground1: var(--colorPaletteRedForeground1); +$colorPaletteRedForeground2: var(--colorPaletteRedForeground2); +$colorPaletteRedForeground3: var(--colorPaletteRedForeground3); +$colorPaletteRedBorderActive: var(--colorPaletteRedBorderActive); +$colorPaletteRedBorder1: var(--colorPaletteRedBorder1); +$colorPaletteRedBorder2: var(--colorPaletteRedBorder2); + +$colorPaletteDarkOrangeBackground1: var(--colorPaletteDarkOrangeBackground1); +$colorPaletteDarkOrangeBackground2: var(--colorPaletteDarkOrangeBackground2); +$colorPaletteDarkOrangeBackground3: var(--colorPaletteDarkOrangeBackground3); +$colorPaletteDarkOrangeForeground1: var(--colorPaletteDarkOrangeForeground1); +$colorPaletteDarkOrangeForeground2: var(--colorPaletteDarkOrangeForeground2); +$colorPaletteDarkOrangeForeground3: var(--colorPaletteDarkOrangeForeground3); +$colorPaletteDarkOrangeBorderActive: var(--colorPaletteDarkOrangeBorderActive); +$colorPaletteDarkOrangeBorder1: var(--colorPaletteDarkOrangeBorder1); +$colorPaletteDarkOrangeBorder2: var(--colorPaletteDarkOrangeBorder2); + +$colorPaletteBronzeBackground1: var(--colorPaletteBronzeBackground1); +$colorPaletteBronzeBackground2: var(--colorPaletteBronzeBackground2); +$colorPaletteBronzeBackground3: var(--colorPaletteBronzeBackground3); +$colorPaletteBronzeForeground1: var(--colorPaletteBronzeForeground1); +$colorPaletteBronzeForeground2: var(--colorPaletteBronzeForeground2); +$colorPaletteBronzeForeground3: var(--colorPaletteBronzeForeground3); +$colorPaletteBronzeBorderActive: var(--colorPaletteBronzeBorderActive); +$colorPaletteBronzeBorder1: var(--colorPaletteBronzeBorder1); +$colorPaletteBronzeBorder2: var(--colorPaletteBronzeBorder2); + +$colorPalettePumpkinBackground1: var(--colorPalettePumpkinBackground1); +$colorPalettePumpkinBackground2: var(--colorPalettePumpkinBackground2); +$colorPalettePumpkinBackground3: var(--colorPalettePumpkinBackground3); +$colorPalettePumpkinForeground1: var(--colorPalettePumpkinForeground1); +$colorPalettePumpkinForeground2: var(--colorPalettePumpkinForeground2); +$colorPalettePumpkinForeground3: var(--colorPalettePumpkinForeground3); +$colorPalettePumpkinBorderActive: var(--colorPalettePumpkinBorderActive); +$colorPalettePumpkinBorder1: var(--colorPalettePumpkinBorder1); +$colorPalettePumpkinBorder2: var(--colorPalettePumpkinBorder2); + +$colorPaletteOrangeBackground1: var(--colorPaletteOrangeBackground1); +$colorPaletteOrangeBackground2: var(--colorPaletteOrangeBackground2); +$colorPaletteOrangeBackground3: var(--colorPaletteOrangeBackground3); +$colorPaletteOrangeForeground1: var(--colorPaletteOrangeForeground1); +$colorPaletteOrangeForeground2: var(--colorPaletteOrangeForeground2); +$colorPaletteOrangeForeground3: var(--colorPaletteOrangeForeground3); +$colorPaletteOrangeBorderActive: var(--colorPaletteOrangeBorderActive); +$colorPaletteOrangeBorder1: var(--colorPaletteOrangeBorder1); +$colorPaletteOrangeBorder2: var(--colorPaletteOrangeBorder2); + +$colorPalettePeachBackground1: var(--colorPalettePeachBackground1); +$colorPalettePeachBackground2: var(--colorPalettePeachBackground2); +$colorPalettePeachBackground3: var(--colorPalettePeachBackground3); +$colorPalettePeachForeground1: var(--colorPalettePeachForeground1); +$colorPalettePeachForeground2: var(--colorPalettePeachForeground2); +$colorPalettePeachForeground3: var(--colorPalettePeachForeground3); +$colorPalettePeachBorderActive: var(--colorPalettePeachBorderActive); +$colorPalettePeachBorder1: var(--colorPalettePeachBorder1); +$colorPalettePeachBorder2: var(--colorPalettePeachBorder2); + +$colorPaletteMarigoldBackground1: var(--colorPaletteMarigoldBackground1); +$colorPaletteMarigoldBackground2: var(--colorPaletteMarigoldBackground2); +$colorPaletteMarigoldBackground3: var(--colorPaletteMarigoldBackground3); +$colorPaletteMarigoldForeground1: var(--colorPaletteMarigoldForeground1); +$colorPaletteMarigoldForeground2: var(--colorPaletteMarigoldForeground2); +$colorPaletteMarigoldForeground3: var(--colorPaletteMarigoldForeground3); +$colorPaletteMarigoldBorderActive: var(--colorPaletteMarigoldBorderActive); +$colorPaletteMarigoldBorder1: var(--colorPaletteMarigoldBorder1); +$colorPaletteMarigoldBorder2: var(--colorPaletteMarigoldBorder2); + +$colorPaletteYellowBackground1: var(--colorPaletteYellowBackground1); +$colorPaletteYellowBackground2: var(--colorPaletteYellowBackground2); +$colorPaletteYellowBackground3: var(--colorPaletteYellowBackground3); +$colorPaletteYellowForeground1: var(--colorPaletteYellowForeground1); +$colorPaletteYellowForeground2: var(--colorPaletteYellowForeground2); +$colorPaletteYellowForeground3: var(--colorPaletteYellowForeground3); +$colorPaletteYellowBorderActive: var(--colorPaletteYellowBorderActive); +$colorPaletteYellowBorder1: var(--colorPaletteYellowBorder1); +$colorPaletteYellowBorder2: var(--colorPaletteYellowBorder2); + +$colorPaletteGoldBackground1: var(--colorPaletteGoldBackground1); +$colorPaletteGoldBackground2: var(--colorPaletteGoldBackground2); +$colorPaletteGoldBackground3: var(--colorPaletteGoldBackground3); +$colorPaletteGoldForeground1: var(--colorPaletteGoldForeground1); +$colorPaletteGoldForeground2: var(--colorPaletteGoldForeground2); +$colorPaletteGoldForeground3: var(--colorPaletteGoldForeground3); +$colorPaletteGoldBorderActive: var(--colorPaletteGoldBorderActive); +$colorPaletteGoldBorder1: var(--colorPaletteGoldBorder1); +$colorPaletteGoldBorder2: var(--colorPaletteGoldBorder2); + +$colorPaletteBrassBackground1: var(--colorPaletteBrassBackground1); +$colorPaletteBrassBackground2: var(--colorPaletteBrassBackground2); +$colorPaletteBrassBackground3: var(--colorPaletteBrassBackground3); +$colorPaletteBrassForeground1: var(--colorPaletteBrassForeground1); +$colorPaletteBrassForeground2: var(--colorPaletteBrassForeground2); +$colorPaletteBrassForeground3: var(--colorPaletteBrassForeground3); +$colorPaletteBrassBorderActive: var(--colorPaletteBrassBorderActive); +$colorPaletteBrassBorder1: var(--colorPaletteBrassBorder1); +$colorPaletteBrassBorder2: var(--colorPaletteBrassBorder2); + +$colorPaletteBrownBackground1: var(--colorPaletteBrownBackground1); +$colorPaletteBrownBackground2: var(--colorPaletteBrownBackground2); +$colorPaletteBrownBackground3: var(--colorPaletteBrownBackground3); +$colorPaletteBrownForeground1: var(--colorPaletteBrownForeground1); +$colorPaletteBrownForeground2: var(--colorPaletteBrownForeground2); +$colorPaletteBrownForeground3: var(--colorPaletteBrownForeground3); +$colorPaletteBrownBorderActive: var(--colorPaletteBrownBorderActive); +$colorPaletteBrownBorder1: var(--colorPaletteBrownBorder1); +$colorPaletteBrownBorder2: var(--colorPaletteBrownBorder2); + +$colorPaletteDarkBrownBackground1: var(--colorPaletteDarkBrownBackground1); +$colorPaletteDarkBrownBackground2: var(--colorPaletteDarkBrownBackground2); +$colorPaletteDarkBrownBackground3: var(--colorPaletteDarkBrownBackground3); +$colorPaletteDarkBrownForeground1: var(--colorPaletteDarkBrownForeground1); +$colorPaletteDarkBrownForeground2: var(--colorPaletteDarkBrownForeground2); +$colorPaletteDarkBrownForeground3: var(--colorPaletteDarkBrownForeground3); +$colorPaletteDarkBrownBorderActive: var(--colorPaletteDarkBrownBorderActive); +$colorPaletteDarkBrownBorder1: var(--colorPaletteDarkBrownBorder1); +$colorPaletteDarkBrownBorder2: var(--colorPaletteDarkBrownBorder2); + +$colorPaletteLimeBackground1: var(--colorPaletteLimeBackground1); +$colorPaletteLimeBackground2: var(--colorPaletteLimeBackground2); +$colorPaletteLimeBackground3: var(--colorPaletteLimeBackground3); +$colorPaletteLimeForeground1: var(--colorPaletteLimeForeground1); +$colorPaletteLimeForeground2: var(--colorPaletteLimeForeground2); +$colorPaletteLimeForeground3: var(--colorPaletteLimeForeground3); +$colorPaletteLimeBorderActive: var(--colorPaletteLimeBorderActive); +$colorPaletteLimeBorder1: var(--colorPaletteLimeBorder1); +$colorPaletteLimeBorder2: var(--colorPaletteLimeBorder2); + +$colorPaletteForestBackground1: var(--colorPaletteForestBackground1); +$colorPaletteForestBackground2: var(--colorPaletteForestBackground2); +$colorPaletteForestBackground3: var(--colorPaletteForestBackground3); +$colorPaletteForestForeground1: var(--colorPaletteForestForeground1); +$colorPaletteForestForeground2: var(--colorPaletteForestForeground2); +$colorPaletteForestForeground3: var(--colorPaletteForestForeground3); +$colorPaletteForestBorderActive: var(--colorPaletteForestBorderActive); +$colorPaletteForestBorder1: var(--colorPaletteForestBorder1); +$colorPaletteForestBorder2: var(--colorPaletteForestBorder2); + +$colorPaletteSeafoamBackground1: var(--colorPaletteSeafoamBackground1); +$colorPaletteSeafoamBackground2: var(--colorPaletteSeafoamBackground2); +$colorPaletteSeafoamBackground3: var(--colorPaletteSeafoamBackground3); +$colorPaletteSeafoamForeground1: var(--colorPaletteSeafoamForeground1); +$colorPaletteSeafoamForeground2: var(--colorPaletteSeafoamForeground2); +$colorPaletteSeafoamForeground3: var(--colorPaletteSeafoamForeground3); +$colorPaletteSeafoamBorderActive: var(--colorPaletteSeafoamBorderActive); +$colorPaletteSeafoamBorder1: var(--colorPaletteSeafoamBorder1); +$colorPaletteSeafoamBorder2: var(--colorPaletteSeafoamBorder2); + +$colorPaletteLightGreenBackground1: var(--colorPaletteLightGreenBackground1); +$colorPaletteLightGreenBackground2: var(--colorPaletteLightGreenBackground2); +$colorPaletteLightGreenBackground3: var(--colorPaletteLightGreenBackground3); +$colorPaletteLightGreenForeground1: var(--colorPaletteLightGreenForeground1); +$colorPaletteLightGreenForeground2: var(--colorPaletteLightGreenForeground2); +$colorPaletteLightGreenForeground3: var(--colorPaletteLightGreenForeground3); +$colorPaletteLightGreenBorderActive: var(--colorPaletteLightGreenBorderActive); +$colorPaletteLightGreenBorder1: var(--colorPaletteLightGreenBorder1); +$colorPaletteLightGreenBorder2: var(--colorPaletteLightGreenBorder2); + +$colorPaletteGreenBackground1: var(--colorPaletteGreenBackground1); +$colorPaletteGreenBackground2: var(--colorPaletteGreenBackground2); +$colorPaletteGreenBackground3: var(--colorPaletteGreenBackground3); +$colorPaletteGreenForeground1: var(--colorPaletteGreenForeground1); +$colorPaletteGreenForeground2: var(--colorPaletteGreenForeground2); +$colorPaletteGreenForeground3: var(--colorPaletteGreenForeground3); +$colorPaletteGreenBorderActive: var(--colorPaletteGreenBorderActive); +$colorPaletteGreenBorder1: var(--colorPaletteGreenBorder1); +$colorPaletteGreenBorder2: var(--colorPaletteGreenBorder2); + +$colorPaletteDarkGreenBackground1: var(--colorPaletteDarkGreenBackground1); +$colorPaletteDarkGreenBackground2: var(--colorPaletteDarkGreenBackground2); +$colorPaletteDarkGreenBackground3: var(--colorPaletteDarkGreenBackground3); +$colorPaletteDarkGreenForeground1: var(--colorPaletteDarkGreenForeground1); +$colorPaletteDarkGreenForeground2: var(--colorPaletteDarkGreenForeground2); +$colorPaletteDarkGreenForeground3: var(--colorPaletteDarkGreenForeground3); +$colorPaletteDarkGreenBorderActive: var(--colorPaletteDarkGreenBorderActive); +$colorPaletteDarkGreenBorder1: var(--colorPaletteDarkGreenBorder1); +$colorPaletteDarkGreenBorder2: var(--colorPaletteDarkGreenBorder2); + +$colorPaletteLightTealBackground1: var(--colorPaletteLightTealBackground1); +$colorPaletteLightTealBackground2: var(--colorPaletteLightTealBackground2); +$colorPaletteLightTealBackground3: var(--colorPaletteLightTealBackground3); +$colorPaletteLightTealForeground1: var(--colorPaletteLightTealForeground1); +$colorPaletteLightTealForeground2: var(--colorPaletteLightTealForeground2); +$colorPaletteLightTealForeground3: var(--colorPaletteLightTealForeground3); +$colorPaletteLightTealBorderActive: var(--colorPaletteLightTealBorderActive); +$colorPaletteLightTealBorder1: var(--colorPaletteLightTealBorder1); +$colorPaletteLightTealBorder2: var(--colorPaletteLightTealBorder2); + +$colorPaletteTealBackground1: var(--colorPaletteTealBackground1); +$colorPaletteTealBackground2: var(--colorPaletteTealBackground2); +$colorPaletteTealBackground3: var(--colorPaletteTealBackground3); +$colorPaletteTealForeground1: var(--colorPaletteTealForeground1); +$colorPaletteTealForeground2: var(--colorPaletteTealForeground2); +$colorPaletteTealForeground3: var(--colorPaletteTealForeground3); +$colorPaletteTealBorderActive: var(--colorPaletteTealBorderActive); +$colorPaletteTealBorder1: var(--colorPaletteTealBorder1); +$colorPaletteTealBorder2: var(--colorPaletteTealBorder2); + +$colorPaletteDarkTealBackground1: var(--colorPaletteDarkTealBackground1); +$colorPaletteDarkTealBackground2: var(--colorPaletteDarkTealBackground2); +$colorPaletteDarkTealBackground3: var(--colorPaletteDarkTealBackground3); +$colorPaletteDarkTealForeground1: var(--colorPaletteDarkTealForeground1); +$colorPaletteDarkTealForeground2: var(--colorPaletteDarkTealForeground2); +$colorPaletteDarkTealForeground3: var(--colorPaletteDarkTealForeground3); +$colorPaletteDarkTealBorderActive: var(--colorPaletteDarkTealBorderActive); +$colorPaletteDarkTealBorder1: var(--colorPaletteDarkTealBorder1); +$colorPaletteDarkTealBorder2: var(--colorPaletteDarkTealBorder2); + +$colorPaletteCyanBackground1: var(--colorPaletteCyanBackground1); +$colorPaletteCyanBackground2: var(--colorPaletteCyanBackground2); +$colorPaletteCyanBackground3: var(--colorPaletteCyanBackground3); +$colorPaletteCyanForeground1: var(--colorPaletteCyanForeground1); +$colorPaletteCyanForeground2: var(--colorPaletteCyanForeground2); +$colorPaletteCyanForeground3: var(--colorPaletteCyanForeground3); +$colorPaletteCyanBorderActive: var(--colorPaletteCyanBorderActive); +$colorPaletteCyanBorder1: var(--colorPaletteCyanBorder1); +$colorPaletteCyanBorder2: var(--colorPaletteCyanBorder2); + +$colorPaletteSteelBackground1: var(--colorPaletteSteelBackground1); +$colorPaletteSteelBackground2: var(--colorPaletteSteelBackground2); +$colorPaletteSteelBackground3: var(--colorPaletteSteelBackground3); +$colorPaletteSteelForeground1: var(--colorPaletteSteelForeground1); +$colorPaletteSteelForeground2: var(--colorPaletteSteelForeground2); +$colorPaletteSteelForeground3: var(--colorPaletteSteelForeground3); +$colorPaletteSteelBorderActive: var(--colorPaletteSteelBorderActive); +$colorPaletteSteelBorder1: var(--colorPaletteSteelBorder1); +$colorPaletteSteelBorder2: var(--colorPaletteSteelBorder2); + +$colorPaletteLightBlueBackground1: var(--colorPaletteLightBlueBackground1); +$colorPaletteLightBlueBackground2: var(--colorPaletteLightBlueBackground2); +$colorPaletteLightBlueBackground3: var(--colorPaletteLightBlueBackground3); +$colorPaletteLightBlueForeground1: var(--colorPaletteLightBlueForeground1); +$colorPaletteLightBlueForeground2: var(--colorPaletteLightBlueForeground2); +$colorPaletteLightBlueForeground3: var(--colorPaletteLightBlueForeground3); +$colorPaletteLightBlueBorderActive: var(--colorPaletteLightBlueBorderActive); +$colorPaletteLightBlueBorder1: var(--colorPaletteLightBlueBorder1); +$colorPaletteLightBlueBorder2: var(--colorPaletteLightBlueBorder2); + +$colorPaletteBlueBackground1: var(--colorPaletteBlueBackground1); +$colorPaletteBlueBackground2: var(--colorPaletteBlueBackground2); +$colorPaletteBlueBackground3: var(--colorPaletteBlueBackground3); +$colorPaletteBlueForeground1: var(--colorPaletteBlueForeground1); +$colorPaletteBlueForeground2: var(--colorPaletteBlueForeground2); +$colorPaletteBlueForeground3: var(--colorPaletteBlueForeground3); +$colorPaletteBlueBorderActive: var(--colorPaletteBlueBorderActive); +$colorPaletteBlueBorder1: var(--colorPaletteBlueBorder1); +$colorPaletteBlueBorder2: var(--colorPaletteBlueBorder2); + +$colorPaletteRoyalBlueBackground1: var(--colorPaletteRoyalBlueBackground1); +$colorPaletteRoyalBlueBackground2: var(--colorPaletteRoyalBlueBackground2); +$colorPaletteRoyalBlueBackground3: var(--colorPaletteRoyalBlueBackground3); +$colorPaletteRoyalBlueForeground1: var(--colorPaletteRoyalBlueForeground1); +$colorPaletteRoyalBlueForeground2: var(--colorPaletteRoyalBlueForeground2); +$colorPaletteRoyalBlueForeground3: var(--colorPaletteRoyalBlueForeground3); +$colorPaletteRoyalBlueBorderActive: var(--colorPaletteRoyalBlueBorderActive); +$colorPaletteRoyalBlueBorder1: var(--colorPaletteRoyalBlueBorder1); +$colorPaletteRoyalBlueBorder2: var(--colorPaletteRoyalBlueBorder2); + +$colorPaletteDarkBlueBackground1: var(--colorPaletteDarkBlueBackground1); +$colorPaletteDarkBlueBackground2: var(--colorPaletteDarkBlueBackground2); +$colorPaletteDarkBlueBackground3: var(--colorPaletteDarkBlueBackground3); +$colorPaletteDarkBlueForeground1: var(--colorPaletteDarkBlueForeground1); +$colorPaletteDarkBlueForeground2: var(--colorPaletteDarkBlueForeground2); +$colorPaletteDarkBlueForeground3: var(--colorPaletteDarkBlueForeground3); +$colorPaletteDarkBlueBorderActive: var(--colorPaletteDarkBlueBorderActive); +$colorPaletteDarkBlueBorder1: var(--colorPaletteDarkBlueBorder1); +$colorPaletteDarkBlueBorder2: var(--colorPaletteDarkBlueBorder2); + +$colorPaletteCornflowerBackground1: var(--colorPaletteCornflowerBackground1); +$colorPaletteCornflowerBackground2: var(--colorPaletteCornflowerBackground2); +$colorPaletteCornflowerBackground3: var(--colorPaletteCornflowerBackground3); +$colorPaletteCornflowerForeground1: var(--colorPaletteCornflowerForeground1); +$colorPaletteCornflowerForeground2: var(--colorPaletteCornflowerForeground2); +$colorPaletteCornflowerForeground3: var(--colorPaletteCornflowerForeground3); +$colorPaletteCornflowerBorderActive: var(--colorPaletteCornflowerBorderActive); +$colorPaletteCornflowerBorder1: var(--colorPaletteCornflowerBorder1); +$colorPaletteCornflowerBorder2: var(--colorPaletteCornflowerBorder2); + +$colorPaletteNavyBackground1: var(--colorPaletteNavyBackground1); +$colorPaletteNavyBackground2: var(--colorPaletteNavyBackground2); +$colorPaletteNavyBackground3: var(--colorPaletteNavyBackground3); +$colorPaletteNavyForeground1: var(--colorPaletteNavyForeground1); +$colorPaletteNavyForeground2: var(--colorPaletteNavyForeground2); +$colorPaletteNavyForeground3: var(--colorPaletteNavyForeground3); +$colorPaletteNavyBorderActive: var(--colorPaletteNavyBorderActive); +$colorPaletteNavyBorder1: var(--colorPaletteNavyBorder1); +$colorPaletteNavyBorder2: var(--colorPaletteNavyBorder2); + +$colorPaletteLavenderBackground1: var(--colorPaletteLavenderBackground1); +$colorPaletteLavenderBackground2: var(--colorPaletteLavenderBackground2); +$colorPaletteLavenderBackground3: var(--colorPaletteLavenderBackground3); +$colorPaletteLavenderForeground1: var(--colorPaletteLavenderForeground1); +$colorPaletteLavenderForeground2: var(--colorPaletteLavenderForeground2); +$colorPaletteLavenderForeground3: var(--colorPaletteLavenderForeground3); +$colorPaletteLavenderBorderActive: var(--colorPaletteLavenderBorderActive); +$colorPaletteLavenderBorder1: var(--colorPaletteLavenderBorder1); +$colorPaletteLavenderBorder2: var(--colorPaletteLavenderBorder2); + +$colorPalettePurpleBackground1: var(--colorPalettePurpleBackground1); +$colorPalettePurpleBackground2: var(--colorPalettePurpleBackground2); +$colorPalettePurpleBackground3: var(--colorPalettePurpleBackground3); +$colorPalettePurpleForeground1: var(--colorPalettePurpleForeground1); +$colorPalettePurpleForeground2: var(--colorPalettePurpleForeground2); +$colorPalettePurpleForeground3: var(--colorPalettePurpleForeground3); +$colorPalettePurpleBorderActive: var(--colorPalettePurpleBorderActive); +$colorPalettePurpleBorder1: var(--colorPalettePurpleBorder1); +$colorPalettePurpleBorder2: var(--colorPalettePurpleBorder2); + +$colorPaletteDarkPurpleBackground1: var(--colorPaletteDarkPurpleBackground1); +$colorPaletteDarkPurpleBackground2: var(--colorPaletteDarkPurpleBackground2); +$colorPaletteDarkPurpleBackground3: var(--colorPaletteDarkPurpleBackground3); +$colorPaletteDarkPurpleForeground1: var(--colorPaletteDarkPurpleForeground1); +$colorPaletteDarkPurpleForeground2: var(--colorPaletteDarkPurpleForeground2); +$colorPaletteDarkPurpleForeground3: var(--colorPaletteDarkPurpleForeground3); +$colorPaletteDarkPurpleBorderActive: var(--colorPaletteDarkPurpleBorderActive); +$colorPaletteDarkPurpleBorder1: var(--colorPaletteDarkPurpleBorder1); +$colorPaletteDarkPurpleBorder2: var(--colorPaletteDarkPurpleBorder2); + +$colorPaletteOrchidBackground1: var(--colorPaletteOrchidBackground1); +$colorPaletteOrchidBackground2: var(--colorPaletteOrchidBackground2); +$colorPaletteOrchidBackground3: var(--colorPaletteOrchidBackground3); +$colorPaletteOrchidForeground1: var(--colorPaletteOrchidForeground1); +$colorPaletteOrchidForeground2: var(--colorPaletteOrchidForeground2); +$colorPaletteOrchidForeground3: var(--colorPaletteOrchidForeground3); +$colorPaletteOrchidBorderActive: var(--colorPaletteOrchidBorderActive); +$colorPaletteOrchidBorder1: var(--colorPaletteOrchidBorder1); +$colorPaletteOrchidBorder2: var(--colorPaletteOrchidBorder2); + +$colorPaletteGrapeBackground1: var(--colorPaletteGrapeBackground1); +$colorPaletteGrapeBackground2: var(--colorPaletteGrapeBackground2); +$colorPaletteGrapeBackground3: var(--colorPaletteGrapeBackground3); +$colorPaletteGrapeForeground1: var(--colorPaletteGrapeForeground1); +$colorPaletteGrapeForeground2: var(--colorPaletteGrapeForeground2); +$colorPaletteGrapeForeground3: var(--colorPaletteGrapeForeground3); +$colorPaletteGrapeBorderActive: var(--colorPaletteGrapeBorderActive); +$colorPaletteGrapeBorder1: var(--colorPaletteGrapeBorder1); +$colorPaletteGrapeBorder2: var(--colorPaletteGrapeBorder2); + +$colorPaletteBerryBackground1: var(--colorPaletteBerryBackground1); +$colorPaletteBerryBackground2: var(--colorPaletteBerryBackground2); +$colorPaletteBerryBackground3: var(--colorPaletteBerryBackground3); +$colorPaletteBerryForeground1: var(--colorPaletteBerryForeground1); +$colorPaletteBerryForeground2: var(--colorPaletteBerryForeground2); +$colorPaletteBerryForeground3: var(--colorPaletteBerryForeground3); +$colorPaletteBerryBorderActive: var(--colorPaletteBerryBorderActive); +$colorPaletteBerryBorder1: var(--colorPaletteBerryBorder1); +$colorPaletteBerryBorder2: var(--colorPaletteBerryBorder2); + +$colorPaletteLilacBackground1: var(--colorPaletteLilacBackground1); +$colorPaletteLilacBackground2: var(--colorPaletteLilacBackground2); +$colorPaletteLilacBackground3: var(--colorPaletteLilacBackground3); +$colorPaletteLilacForeground1: var(--colorPaletteLilacForeground1); +$colorPaletteLilacForeground2: var(--colorPaletteLilacForeground2); +$colorPaletteLilacForeground3: var(--colorPaletteLilacForeground3); +$colorPaletteLilacBorderActive: var(--colorPaletteLilacBorderActive); +$colorPaletteLilacBorder1: var(--colorPaletteLilacBorder1); +$colorPaletteLilacBorder2: var(--colorPaletteLilacBorder2); + +$colorPalettePinkBackground1: var(--colorPalettePinkBackground1); +$colorPalettePinkBackground2: var(--colorPalettePinkBackground2); +$colorPalettePinkBackground3: var(--colorPalettePinkBackground3); +$colorPalettePinkForeground1: var(--colorPalettePinkForeground1); +$colorPalettePinkForeground2: var(--colorPalettePinkForeground2); +$colorPalettePinkForeground3: var(--colorPalettePinkForeground3); +$colorPalettePinkBorderActive: var(--colorPalettePinkBorderActive); +$colorPalettePinkBorder1: var(--colorPalettePinkBorder1); +$colorPalettePinkBorder2: var(--colorPalettePinkBorder2); + +$colorPaletteHotPinkBackground1: var(--colorPaletteHotPinkBackground1); +$colorPaletteHotPinkBackground2: var(--colorPaletteHotPinkBackground2); +$colorPaletteHotPinkBackground3: var(--colorPaletteHotPinkBackground3); +$colorPaletteHotPinkForeground1: var(--colorPaletteHotPinkForeground1); +$colorPaletteHotPinkForeground2: var(--colorPaletteHotPinkForeground2); +$colorPaletteHotPinkForeground3: var(--colorPaletteHotPinkForeground3); +$colorPaletteHotPinkBorderActive: var(--colorPaletteHotPinkBorderActive); +$colorPaletteHotPinkBorder1: var(--colorPaletteHotPinkBorder1); +$colorPaletteHotPinkBorder2: var(--colorPaletteHotPinkBorder2); + +$colorPaletteMagentaBackground1: var(--colorPaletteMagentaBackground1); +$colorPaletteMagentaBackground2: var(--colorPaletteMagentaBackground2); +$colorPaletteMagentaBackground3: var(--colorPaletteMagentaBackground3); +$colorPaletteMagentaForeground1: var(--colorPaletteMagentaForeground1); +$colorPaletteMagentaForeground2: var(--colorPaletteMagentaForeground2); +$colorPaletteMagentaForeground3: var(--colorPaletteMagentaForeground3); +$colorPaletteMagentaBorderActive: var(--colorPaletteMagentaBorderActive); +$colorPaletteMagentaBorder1: var(--colorPaletteMagentaBorder1); +$colorPaletteMagentaBorder2: var(--colorPaletteMagentaBorder2); + +$colorPalettePlumBackground1: var(--colorPalettePlumBackground1); +$colorPalettePlumBackground2: var(--colorPalettePlumBackground2); +$colorPalettePlumBackground3: var(--colorPalettePlumBackground3); +$colorPalettePlumForeground1: var(--colorPalettePlumForeground1); +$colorPalettePlumForeground2: var(--colorPalettePlumForeground2); +$colorPalettePlumForeground3: var(--colorPalettePlumForeground3); +$colorPalettePlumBorderActive: var(--colorPalettePlumBorderActive); +$colorPalettePlumBorder1: var(--colorPalettePlumBorder1); +$colorPalettePlumBorder2: var(--colorPalettePlumBorder2); + +$colorPaletteBeigeBackground1: var(--colorPaletteBeigeBackground1); +$colorPaletteBeigeBackground2: var(--colorPaletteBeigeBackground2); +$colorPaletteBeigeBackground3: var(--colorPaletteBeigeBackground3); +$colorPaletteBeigeForeground1: var(--colorPaletteBeigeForeground1); +$colorPaletteBeigeForeground2: var(--colorPaletteBeigeForeground2); +$colorPaletteBeigeForeground3: var(--colorPaletteBeigeForeground3); +$colorPaletteBeigeBorderActive: var(--colorPaletteBeigeBorderActive); +$colorPaletteBeigeBorder1: var(--colorPaletteBeigeBorder1); +$colorPaletteBeigeBorder2: var(--colorPaletteBeigeBorder2); + +$colorPaletteMinkBackground1: var(--colorPaletteMinkBackground1); +$colorPaletteMinkBackground2: var(--colorPaletteMinkBackground2); +$colorPaletteMinkBackground3: var(--colorPaletteMinkBackground3); +$colorPaletteMinkForeground1: var(--colorPaletteMinkForeground1); +$colorPaletteMinkForeground2: var(--colorPaletteMinkForeground2); +$colorPaletteMinkForeground3: var(--colorPaletteMinkForeground3); +$colorPaletteMinkBorderActive: var(--colorPaletteMinkBorderActive); +$colorPaletteMinkBorder1: var(--colorPaletteMinkBorder1); +$colorPaletteMinkBorder2: var(--colorPaletteMinkBorder2); + +$colorPaletteSilverBackground1: var(--colorPaletteSilverBackground1); +$colorPaletteSilverBackground2: var(--colorPaletteSilverBackground2); +$colorPaletteSilverBackground3: var(--colorPaletteSilverBackground3); +$colorPaletteSilverForeground1: var(--colorPaletteSilverForeground1); +$colorPaletteSilverForeground2: var(--colorPaletteSilverForeground2); +$colorPaletteSilverForeground3: var(--colorPaletteSilverForeground3); +$colorPaletteSilverBorderActive: var(--colorPaletteSilverBorderActive); +$colorPaletteSilverBorder1: var(--colorPaletteSilverBorder1); +$colorPaletteSilverBorder2: var(--colorPaletteSilverBorder2); + +$colorPalettePlatinumBackground1: var(--colorPalettePlatinumBackground1); +$colorPalettePlatinumBackground2: var(--colorPalettePlatinumBackground2); +$colorPalettePlatinumBackground3: var(--colorPalettePlatinumBackground3); +$colorPalettePlatinumForeground1: var(--colorPalettePlatinumForeground1); +$colorPalettePlatinumForeground2: var(--colorPalettePlatinumForeground2); +$colorPalettePlatinumForeground3: var(--colorPalettePlatinumForeground3); +$colorPalettePlatinumBorderActive: var(--colorPalettePlatinumBorderActive); +$colorPalettePlatinumBorder1: var(--colorPalettePlatinumBorder1); +$colorPalettePlatinumBorder2: var(--colorPalettePlatinumBorder2); + +$colorPaletteAnchorBackground1: var(--colorPaletteAnchorBackground1); +$colorPaletteAnchorBackground2: var(--colorPaletteAnchorBackground2); +$colorPaletteAnchorBackground3: var(--colorPaletteAnchorBackground3); +$colorPaletteAnchorForeground1: var(--colorPaletteAnchorForeground1); +$colorPaletteAnchorForeground2: var(--colorPaletteAnchorForeground2); +$colorPaletteAnchorForeground3: var(--colorPaletteAnchorForeground3); +$colorPaletteAnchorBorderActive: var(--colorPaletteAnchorBorderActive); +$colorPaletteAnchorBorder1: var(--colorPaletteAnchorBorder1); +$colorPaletteAnchorBorder2: var(--colorPaletteAnchorBorder2); + +$colorPaletteCharcoalBackground1: var(--colorPaletteCharcoalBackground1); +$colorPaletteCharcoalBackground2: var(--colorPaletteCharcoalBackground2); +$colorPaletteCharcoalBackground3: var(--colorPaletteCharcoalBackground3); +$colorPaletteCharcoalForeground1: var(--colorPaletteCharcoalForeground1); +$colorPaletteCharcoalForeground2: var(--colorPaletteCharcoalForeground2); +$colorPaletteCharcoalForeground3: var(--colorPaletteCharcoalForeground3); +$colorPaletteCharcoalBorderActive: var(--colorPaletteCharcoalBorderActive); +$colorPaletteCharcoalBorder1: var(--colorPaletteCharcoalBorder1); +$colorPaletteCharcoalBorder2: var(--colorPaletteCharcoalBorder2); diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss new file mode 100644 index 00000000000000..7cc8f32db26f39 --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -0,0 +1,142 @@ +$colorNeutralForeground1: var(--colorNeutralForeground1); +$colorNeutralForeground1Hover: var(--colorNeutralForeground1Hover); +$colorNeutralForeground1Pressed: var(--colorNeutralForeground1Pressed); +$colorNeutralForeground1Selected: var(--colorNeutralForeground1Selected); +$colorNeutralForeground2: var(--colorNeutralForeground2); +$colorNeutralForeground2Hover: var(--colorNeutralForeground2Hover); +$colorNeutralForeground2Pressed: var(--colorNeutralForeground2Pressed); +$colorNeutralForeground2Selected: var(--colorNeutralForeground2Selected); +$colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover); +$colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed); +$colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected); +$colorNeutralForeground3: var(--colorNeutralForeground3); +$colorNeutralForeground3Hover: var(--colorNeutralForeground3Hover); +$colorNeutralForeground3Pressed: var(--colorNeutralForeground3Pressed); +$colorNeutralForeground3Selected: var(--colorNeutralForeground3Selected); +$colorNeutralForeground3BrandHover: var(--colorNeutralForeground3BrandHover); +$colorNeutralForeground3BrandPressed: var(--colorNeutralForeground3BrandPressed); +$colorNeutralForeground3BrandSelected: var(--colorNeutralForeground3BrandSelected); +$colorNeutralForeground4: var(--colorNeutralForeground4); +$colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled); +$colorNeutralForegroundInvertedDisabled: var(--colorNeutralForegroundInvertedDisabled); +$colorBrandForegroundLink: var(--colorBrandForegroundLink); +$colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover); +$colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed); +$colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected); +$colorNeutralForeground2Link: var(--colorNeutralForeground2Link); +$colorNeutralForeground2LinkHover: var(--colorNeutralForeground2LinkHover); +$colorNeutralForeground2LinkPressed: var(--colorNeutralForeground2LinkPressed); +$colorNeutralForeground2LinkSelected: var(--colorNeutralForeground2LinkSelected); +$colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1); +$colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover); +$colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed); +$colorBrandForeground1: var(--colorBrandForeground1); +$colorBrandForeground2: var(--colorBrandForeground2); +$colorNeutralForeground1Static: var(--colorNeutralForeground1Static); +$colorNeutralForegroundInverted: var(--colorNeutralForegroundInverted); +$colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover); +$colorNeutralForegroundInvertedPressed: var(--colorNeutralForegroundInvertedPressed); +$colorNeutralForegroundInvertedSelected: var(--colorNeutralForegroundInvertedSelected); +$colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand); +$colorNeutralForegroundInvertedLink: var(--colorNeutralForegroundInvertedLink); +$colorNeutralForegroundInvertedLinkHover: var(--colorNeutralForegroundInvertedLinkHover); +$colorNeutralForegroundInvertedLinkPressed: var(--colorNeutralForegroundInvertedLinkPressed); +$colorNeutralForegroundInvertedLinkSelected: var(--colorNeutralForegroundInvertedLinkSelected); +$colorBrandForegroundInverted: var(--colorBrandForegroundInverted); +$colorBrandForegroundInvertedHover: var(--colorBrandForegroundInvertedHover); +$colorBrandForegroundInvertedPressed: var(--colorBrandForegroundInvertedPressed); +$colorBrandForegroundOnLight: var(--colorBrandForegroundOnLight); +$colorBrandForegroundOnLightHover: var(--colorBrandForegroundOnLightHover); +$colorBrandForegroundOnLightPressed: var(--colorBrandForegroundOnLightPressed); +$colorBrandForegroundOnLightSelected: var(--colorBrandForegroundOnLightSelected); +$colorNeutralBackground1: var(--colorNeutralBackground1); +$colorNeutralBackground1Hover: var(--colorNeutralBackground1Hover); +$colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed); +$colorNeutralBackground1Selected: var(--colorNeutralBackground1Selected); +$colorNeutralBackground2: var(--colorNeutralBackground2); +$colorNeutralBackground2Hover: var(--colorNeutralBackground2Hover); +$colorNeutralBackground2Pressed: var(--colorNeutralBackground2Pressed); +$colorNeutralBackground2Selected: var(--colorNeutralBackground2Selected); +$colorNeutralBackground3: var(--colorNeutralBackground3); +$colorNeutralBackground3Hover: var(--colorNeutralBackground3Hover); +$colorNeutralBackground3Pressed: var(--colorNeutralBackground3Pressed); +$colorNeutralBackground3Selected: var(--colorNeutralBackground3Selected); +$colorNeutralBackground4: var(--colorNeutralBackground4); +$colorNeutralBackground4Hover: var(--colorNeutralBackground4Hover); +$colorNeutralBackground4Pressed: var(--colorNeutralBackground4Pressed); +$colorNeutralBackground4Selected: var(--colorNeutralBackground4Selected); +$colorNeutralBackground5: var(--colorNeutralBackground5); +$colorNeutralBackground5Hover: var(--colorNeutralBackground5Hover); +$colorNeutralBackground5Pressed: var(--colorNeutralBackground5Pressed); +$colorNeutralBackground5Selected: var(--colorNeutralBackground5Selected); +$colorNeutralBackground6: var(--colorNeutralBackground6); +$colorNeutralBackgroundInverted: var(--colorNeutralBackgroundInverted); +$colorSubtleBackground: var(--colorSubtleBackground); +$colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover); +$colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed); +$colorSubtleBackgroundSelected: var(--colorSubtleBackgroundSelected); +$colorSubtleBackgroundLightAlphaHover: var(--colorSubtleBackgroundLightAlphaHover); +$colorSubtleBackgroundLightAlphaPressed: var(--colorSubtleBackgroundLightAlphaPressed); +$colorSubtleBackgroundLightAlphaSelected: var(--colorSubtleBackgroundLightAlphaSelected); +$colorSubtleBackgroundInverted: var(--colorSubtleBackgroundInverted); +$colorSubtleBackgroundInvertedHover: var(--colorSubtleBackgroundInvertedHover); +$colorSubtleBackgroundInvertedPressed: var(--colorSubtleBackgroundInvertedPressed); +$colorSubtleBackgroundInvertedSelected: var(--colorSubtleBackgroundInvertedSelected); +$colorTransparentBackground: var(--colorTransparentBackground); +$colorTransparentBackgroundHover: var(--colorTransparentBackgroundHover); +$colorTransparentBackgroundPressed: var(--colorTransparentBackgroundPressed); +$colorTransparentBackgroundSelected: var(--colorTransparentBackgroundSelected); +$colorNeutralBackgroundDisabled: var(--colorNeutralBackgroundDisabled); +$colorNeutralBackgroundInvertedDisabled: var(--colorNeutralBackgroundInvertedDisabled); +$colorNeutralStencil1: var(--colorNeutralStencil1); +$colorNeutralStencil2: var(--colorNeutralStencil2); +$colorBackgroundOverlay: var(--colorBackgroundOverlay); +$colorScrollbarOverlay: var(--colorScrollbarOverlay); +$colorBrandBackground: var(--colorBrandBackground); +$colorBrandBackgroundHover: var(--colorBrandBackgroundHover); +$colorBrandBackgroundPressed: var(--colorBrandBackgroundPressed); +$colorBrandBackgroundSelected: var(--colorBrandBackgroundSelected); +$colorCompoundBrandBackground: var(--colorCompoundBrandBackground); +$colorCompoundBrandBackgroundHover: var(--colorCompoundBrandBackgroundHover); +$colorCompoundBrandBackgroundPressed: var(--colorCompoundBrandBackgroundPressed); +$colorBrandBackgroundStatic: var(--colorBrandBackgroundStatic); +$colorBrandBackground2: var(--colorBrandBackground2); +$colorBrandBackgroundInverted: var(--colorBrandBackgroundInverted); +$colorBrandBackgroundInvertedHover: var(--colorBrandBackgroundInvertedHover); +$colorBrandBackgroundInvertedPressed: var(--colorBrandBackgroundInvertedPressed); +$colorBrandBackgroundInvertedSelected: var(--colorBrandBackgroundInvertedSelected); +$colorNeutralStrokeAccessible: var(--colorNeutralStrokeAccessible); +$colorNeutralStrokeAccessibleHover: var(--colorNeutralStrokeAccessibleHover); +$colorNeutralStrokeAccessiblePressed: var(--colorNeutralStrokeAccessiblePressed); +$colorNeutralStrokeAccessibleSelected: var(--colorNeutralStrokeAccessibleSelected); +$colorNeutralStroke1: var(--colorNeutralStroke1); +$colorNeutralStroke1Hover: var(--colorNeutralStroke1Hover); +$colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed); +$colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected); +$colorNeutralStroke2: var(--colorNeutralStroke2); +$colorNeutralStroke3: var(--colorNeutralStroke3); +$colorNeutralStrokeOnBrand: var(--colorNeutralStrokeOnBrand); +$colorNeutralStrokeOnBrand2: var(--colorNeutralStrokeOnBrand2); +$colorNeutralStrokeOnBrand2Hover: var(--colorNeutralStrokeOnBrand2Hover); +$colorNeutralStrokeOnBrand2Pressed: var(--colorNeutralStrokeOnBrand2Pressed); +$colorNeutralStrokeOnBrand2Selected: var(--colorNeutralStrokeOnBrand2Selected); +$colorBrandStroke1: var(--colorBrandStroke1); +$colorBrandStroke2: var(--colorBrandStroke2); +$colorCompoundBrandStroke: var(--colorCompoundBrandStroke); +$colorCompoundBrandStrokeHover: var(--colorCompoundBrandStrokeHover); +$colorCompoundBrandStrokePressed: var(--colorCompoundBrandStrokePressed); +$colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled); +$colorNeutralStrokeInvertedDisabled: var(--colorNeutralStrokeInvertedDisabled); +$colorTransparentStroke: var(--colorTransparentStroke); +$colorTransparentStrokeInteractive: var(--colorTransparentStrokeInteractive); +$colorTransparentStrokeDisabled: var(--colorTransparentStrokeDisabled); +$colorStrokeFocus1: var(--colorStrokeFocus1); +$colorStrokeFocus2: var(--colorStrokeFocus2); +$colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient); +$colorNeutralShadowKey: var(--colorNeutralShadowKey); +$colorNeutralShadowAmbientLighter: var(--colorNeutralShadowAmbientLighter); +$colorNeutralShadowKeyLighter: var(--colorNeutralShadowKeyLighter); +$colorNeutralShadowAmbientDarker: var(--colorNeutralShadowAmbientDarker); +$colorNeutralShadowKeyDarker: var(--colorNeutralShadowKeyDarker); +$colorBrandShadowAmbient: var(--colorBrandShadowAmbient); +$colorBrandShadowKey: var(--colorBrandShadowKey); diff --git a/packages/react-components/react-theme-sass/sass/curveTokens.scss b/packages/react-components/react-theme-sass/sass/curveTokens.scss new file mode 100644 index 00000000000000..f6b8ce81e63a72 --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/curveTokens.scss @@ -0,0 +1,9 @@ +$curveAccelerateMax: var(--curveAccelerateMax); +$curveAccelerateMid: var(--curveAccelerateMid); +$curveAccelerateMin: var(--curveAccelerateMin); +$curveDecelerateMax: var(--curveDecelerateMax); +$curveDecelerateMid: var(--curveDecelerateMid); +$curveDecelerateMin: var(--curveDecelerateMin); +$curveEasyEaseMax: var(--curveEasyEaseMax); +$curveEasyEase: var(--curveEasyEase); +$curveLinear: var(--curveLinear); diff --git a/packages/react-components/react-theme-sass/sass/durationTokens.scss b/packages/react-components/react-theme-sass/sass/durationTokens.scss new file mode 100644 index 00000000000000..d7cfbb3490f3fa --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/durationTokens.scss @@ -0,0 +1,7 @@ +$durationUltraFast: var(--durationUltraFast); +$durationFaster: var(--durationFaster); +$durationFast: var(--durationFast); +$durationNormal: var(--durationNormal); +$durationSlow: var(--durationSlow); +$durationSlower: var(--durationSlower); +$durationUltraSlow: var(--durationUltraSlow); diff --git a/packages/react-components/react-theme-sass/sass/fontTokens.scss b/packages/react-components/react-theme-sass/sass/fontTokens.scss new file mode 100644 index 00000000000000..24ef4713ae8af4 --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/fontTokens.scss @@ -0,0 +1,29 @@ +$fontSizeBase100: var(--fontSizeBase100); +$fontSizeBase200: var(--fontSizeBase200); +$fontSizeBase300: var(--fontSizeBase300); +$fontSizeBase400: var(--fontSizeBase400); +$fontSizeBase500: var(--fontSizeBase500); +$fontSizeBase600: var(--fontSizeBase600); +$fontSizeHero700: var(--fontSizeHero700); +$fontSizeHero800: var(--fontSizeHero800); +$fontSizeHero900: var(--fontSizeHero900); +$fontSizeHero1000: var(--fontSizeHero1000); + +$lineHeightBase100: var(--lineHeightBase100); +$lineHeightBase200: var(--lineHeightBase200); +$lineHeightBase300: var(--lineHeightBase300); +$lineHeightBase400: var(--lineHeightBase400); +$lineHeightBase500: var(--lineHeightBase500); +$lineHeightBase600: var(--lineHeightBase600); +$lineHeightHero700: var(--lineHeightHero700); +$lineHeightHero800: var(--lineHeightHero800); +$lineHeightHero900: var(--lineHeightHero900); +$lineHeightHero1000: var(--lineHeightHero1000); + +$fontWeightRegular: var(--fontWeightRegular); +$fontWeightMedium: var(--fontWeightMedium); +$fontWeightSemibold: var(--fontWeightSemibold); + +$fontFamilyBase: var(--fontFamilyBase); +$fontFamilyMonospace: var(--fontFamilyMonospace); +$fontFamilyNumeric: var(--fontFamilyNumeric); diff --git a/packages/react-components/react-theme-sass/sass/shadowTokens.scss b/packages/react-components/react-theme-sass/sass/shadowTokens.scss new file mode 100644 index 00000000000000..c559b622316471 --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/shadowTokens.scss @@ -0,0 +1,13 @@ +$shadow2: var(--shadow2); +$shadow4: var(--shadow4); +$shadow8: var(--shadow8); +$shadow16: var(--shadow16); +$shadow28: var(--shadow28); +$shadow64: var(--shadow64); + +$shadow2Brand: var(--shadow2Brand); +$shadow4Brand: var(--shadow4Brand); +$shadow8Brand: var(--shadow8Brand); +$shadow16Brand: var(--shadow16Brand); +$shadow28Brand: var(--shadow28Brand); +$shadow64Brand: var(--shadow64Brand); diff --git a/packages/react-components/react-theme-sass/sass/spacingTokens.scss b/packages/react-components/react-theme-sass/sass/spacingTokens.scss new file mode 100644 index 00000000000000..f986efa0583e3a --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/spacingTokens.scss @@ -0,0 +1,22 @@ +$spacingHorizontalNone: var(--spacingHorizontalNone); +$spacingHorizontalXXS: var(--spacingHorizontalXXS); +$spacingHorizontalXS: var(--spacingHorizontalXS); +$spacingHorizontalSNudge: var(--spacingHorizontalSNudge); +$spacingHorizontalS: var(--spacingHorizontalS); +$spacingHorizontalMNudge: var(--spacingHorizontalMNudge); +$spacingHorizontalM: var(--spacingHorizontalM); +$spacingHorizontalL: var(--spacingHorizontalL); +$spacingHorizontalXL: var(--spacingHorizontalXL); +$spacingHorizontalXXL: var(--spacingHorizontalXXL); +$spacingHorizontalXXXL: var(--spacingHorizontalXXXL); +$spacingVerticalNone: var(--spacingVerticalNone); +$spacingVerticalXXS: var(--spacingVerticalXXS); +$spacingVerticalXS: var(--spacingVerticalXS); +$spacingVerticalSNudge: var(--spacingVerticalSNudge); +$spacingVerticalS: var(--spacingVerticalS); +$spacingVerticalMNudge: var(--spacingVerticalMNudge); +$spacingVerticalM: var(--spacingVerticalM); +$spacingVerticalL: var(--spacingVerticalL); +$spacingVerticalXL: var(--spacingVerticalXL); +$spacingVerticalXXL: var(--spacingVerticalXXL); +$spacingVerticalXXXL: var(--spacingVerticalXXXL); diff --git a/packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss b/packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss new file mode 100644 index 00000000000000..38f4f686a916ba --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss @@ -0,0 +1,4 @@ +$strokeWidthThin: var(--strokeWidthThin); +$strokeWidthThick: var(--strokeWidthThick); +$strokeWidthThicker: var(--strokeWidthThicker); +$strokeWidthThickest: var(--strokeWidthThickest); diff --git a/packages/react-components/react-theme-sass/sass/tokens.scss b/packages/react-components/react-theme-sass/sass/tokens.scss new file mode 100644 index 00000000000000..24e655da70dbcc --- /dev/null +++ b/packages/react-components/react-theme-sass/sass/tokens.scss @@ -0,0 +1,9 @@ +@import 'borderRadiusTokens'; +@import 'colorPaletteTokens'; +@import 'colorTokens'; +@import 'curveTokens'; +@import 'durationTokens'; +@import 'fontTokens'; +@import 'shadowTokens'; +@import 'spacingTokens'; +@import 'strokeWidthTokens'; diff --git a/packages/react-components/react-theme-sass/src/index.ts b/packages/react-components/react-theme-sass/src/index.ts new file mode 100644 index 00000000000000..8d8aa665c225ad --- /dev/null +++ b/packages/react-components/react-theme-sass/src/index.ts @@ -0,0 +1,5 @@ +throw new Error( + '@fluentui/react-theme-sass package only contains SASS exports. It should never be imported in Javascript.', +); + +export {}; diff --git a/packages/react-components/react-theme-sass/tsconfig.json b/packages/react-components/react-theme-sass/tsconfig.json new file mode 100644 index 00000000000000..12ca516af1c5b2 --- /dev/null +++ b/packages/react-components/react-theme-sass/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/react-components/react-theme-sass/tsconfig.lib.json b/packages/react-components/react-theme-sass/tsconfig.lib.json new file mode 100644 index 00000000000000..7763b7fe82bad3 --- /dev/null +++ b/packages/react-components/react-theme-sass/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "outDir": "dist", + "declaration": true, + "declarationDir": "dist/types", + "inlineSources": true, + "types": ["static-assets", "environment"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/react-components/react-theme-sass/tsconfig.spec.json b/packages/react-components/react-theme-sass/tsconfig.spec.json new file mode 100644 index 00000000000000..469fcba4d7ba75 --- /dev/null +++ b/packages/react-components/react-theme-sass/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] +} diff --git a/packages/react-components/theme-designer/src/ThemeDesigner.types.ts b/packages/react-components/theme-designer/src/ThemeDesigner.types.ts index 6b4f79aec9482b..705132168f50c1 100644 --- a/packages/react-components/theme-designer/src/ThemeDesigner.types.ts +++ b/packages/react-components/theme-designer/src/ThemeDesigner.types.ts @@ -1,5 +1,4 @@ /** * ThemeDesigner Props */ -export type ThemeDesignerProps = { -}; +export type ThemeDesignerProps = {}; diff --git a/tsconfig.base.json b/tsconfig.base.json index 6fe6c14b89a23c..afd9a15848565f 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -61,6 +61,7 @@ "@fluentui/react-text": ["packages/react-components/react-text/src/index.ts"], "@fluentui/react-textarea": ["packages/react-components/react-textarea/src/index.ts"], "@fluentui/react-theme": ["packages/react-components/react-theme/src/index.ts"], + "@fluentui/react-theme-sass": ["packages/react-components/react-theme-sass/src/index.ts"], "@fluentui/react-toolbar": ["packages/react-components/react-toolbar/src/index.ts"], "@fluentui/react-tooltip": ["packages/react-components/react-tooltip/src/index.ts"], "@fluentui/react-utilities": ["packages/react-components/react-utilities/src/index.ts"], diff --git a/workspace.json b/workspace.json index 650e016c962e33..0be45dd7e27391 100644 --- a/workspace.json +++ b/workspace.json @@ -673,6 +673,13 @@ "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, + "@fluentui/react-theme-sass": { + "root": "packages/react-components/react-theme-sass", + "projectType": "library", + "implicitDependencies": [], + "sourceRoot": "packages/react-components/react-theme-sass/src", + "tags": ["vNext", "platform:web"] + }, "@fluentui/react-toolbar": { "root": "packages/react-components/react-toolbar", "projectType": "library", diff --git a/yarn.lock b/yarn.lock index e43b18adc34c9d..42ada4b5525523 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16306,7 +16306,14 @@ jest-environment-jsdom@^27.2.2, jest-environment-jsdom@^27.4.6: jest-util "^27.4.2" jsdom "^16.6.0" -jest-environment-node@^26.6.2: +jest-environment-node-single-context@26.2.0: + version "26.2.0" + resolved "https://registry.yarnpkg.com/jest-environment-node-single-context/-/jest-environment-node-single-context-26.2.0.tgz#98bfc3ee0491ca87a19f209d41b6613eeee7d208" + integrity sha512-mc+zpmzZPemmyY5LYVMlK6RSPpCYxnUrPmt0Sy/+cfDdyR/x4bL116Wvfq8AANm4aLioY8Pz+5qytJG+HGlrOw== + dependencies: + jest-environment-node "^26.2.0" + +jest-environment-node@^26.2.0, jest-environment-node@^26.6.2: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c" integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==