@fluentui/react-theme-sass 0.0.0-nightly-20220609-0423.1

package/CHANGELOG.json

@@ -0,0 +1,20 @@
+{
+  "name": "@fluentui/react-theme-sass",
+  "entries": [
+    {
+      "date": "Thu, 09 Jun 2022 04:36:23 GMT",
+      "tag": "@fluentui/react-theme-sass_v0.0.0-nightly-20220609-0423.1",
+      "version": "0.0.0-nightly-20220609-0423.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-theme-sass",
+            "commit": "eeed967f604dc4f6a4b6b32b6347c0ed9360294c",
+            "comment": "Add SASS variables mapped to CSS variables provided by react-theme"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log - @fluentui/react-theme-sass
+
+This log was last generated on Thu, 09 Jun 2022 04:36:23 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20220609-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme-sass_v0.0.0-nightly-20220609-0423.1)
+
+Thu, 09 Jun 2022 04:36:23 GMT
+
+### Changes
+
+- Add SASS variables mapped to CSS variables provided by react-theme ([PR #22964](https://github.com/microsoft/fluentui/pull/22964) by miroslav.stastny@microsoft.com)

package/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

package/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(
+  <FluentProvider theme={teamsLightTheme}>
+    <App />
+  </FluentProvider>,
+  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.️

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

package/lib/index.js

@@ -0,0 +1,3 @@
+throw new Error('@fluentui/react-theme-sass package only contains SASS exports. It should never be imported in Javascript.');
+export {};
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,KAAK,CACb,2GAA2G,CAC5G,CAAC","sourcesContent":["throw new Error(\n  '@fluentui/react-theme-sass package only contains SASS exports. It should never be imported in Javascript.',\n);\n\nexport {};\n"]}

package/lib-commonjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+throw new Error('@fluentui/react-theme-sass package only contains SASS exports. It should never be imported in Javascript.');
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;AAAA,MAAM,IAAI,KAAJ,CACJ,2GADI,CAAN","sourcesContent":["throw new Error(\n  '@fluentui/react-theme-sass package only contains SASS exports. It should never be imported in Javascript.',\n);\n\nexport {};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@fluentui/react-theme-sass",
+  "version": "0.0.0-nightly-20220609-0423.1",
+  "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"
+    ]
+  }
+}

package/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);

package/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);

package/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);

package/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);

package/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);

package/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);

package/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);

package/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);

package/sass/strokeWidthTokens.scss

@@ -0,0 +1,4 @@
+$strokeWidthThin: var(--strokeWidthThin);
+$strokeWidthThick: var(--strokeWidthThick);
+$strokeWidthThicker: var(--strokeWidthThicker);
+$strokeWidthThickest: var(--strokeWidthThickest);

package/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';