@atlaskit/tokens 0.2.0 → 0.4.1

package/dist/types/types.d.ts

@@ -1,24 +1,57 @@
-export interface Token<TValue, Group extends string> {
+import { ActiveTokens } from './artifacts/types';
+export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette';
+export declare type ActiveTokenStates = 'active';
+export declare type ReplacedTokenStates = 'deprecated' | 'deleted';
+export declare type TokenState = ActiveTokenStates | ReplacedTokenStates;
+export declare type Replacement = ActiveTokens[];
+export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {
-        group?: Group;
+        group: Group;
         description?: string;
+        state?: TokenState;
+        replacement?: Replacement;
     };
 }
-export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
-export declare type PaintToken<Value extends string = ColorPalette> = Token<Value, 'paint'>;
-export declare type PaletteToken = Token<string, 'paint'> & {
+/**
+ * Base tokens define the raw values consumed by Design Tokens. They are a context-agnostic
+ * name:value pairing (for example, the base token N0 represents the value #FFFFFF ).
+ */
+export interface BaseToken<TValue, Group extends Groups> extends Token<TValue, Group> {
     attributes: {
-        isPalette: true;
+        group: Group;
     };
+}
+/**
+ * Design tokens represent single sources of truth to name and store semantic design decisions.
+ * They map a semantic name (color.background.default) to a base token (N0).
+ */
+export interface DesignToken<TValue, Group extends Groups> extends Token<TValue, Group> {
+    attributes: {
+        group: Group;
+        description: string;
+        state: ActiveTokenStates;
+        replacement?: undefined;
+    } | {
+        group: Group;
+        description: string;
+        state: ReplacedTokenStates;
+        replacement?: Replacement;
+    };
+}
+declare type OmitDistributive<T, K extends PropertyKey> = T extends any ? T extends object ? Id<DeepOmit<T, K>> : T : never;
+declare type Id<T> = {} & {
+    [P in keyof T]: T[P];
 };
-export declare type ValueSchema<Schema extends object> = {
-    [Key in keyof Schema]: ValueSchema<Omit<Schema[Key], 'attributes'>>;
-};
-export declare type AttributeSchema<Schema extends object> = {
-    [Key in keyof Schema]: AttributeSchema<Omit<Schema[Key], 'value'>>;
-};
-export declare type ShadowToken<Value extends string = ColorPalette> = Token<Array<{
+declare type DeepOmit<T extends any, K extends PropertyKey> = Omit<{
+    [P in keyof T]: OmitDistributive<T[P], K>;
+}, K>;
+export declare type ValueSchema<Schema extends object> = DeepOmit<Schema, 'attributes'>;
+export declare type AttributeSchema<Schema extends object> = DeepOmit<Schema, 'value'>;
+export declare type PaletteToken = BaseToken<string, 'palette'>;
+export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
+export declare type PaintToken<Value extends string = ColorPalette> = DesignToken<Value, 'paint'>;
+export declare type ShadowToken<Value extends string = ColorPalette> = DesignToken<Array<{
     color: Value;
     opacity: number;
     offset: {
@@ -29,7 +62,7 @@ export declare type ShadowToken<Value extends string = ColorPalette> = Token<Arr
     spread?: number;
     inset?: boolean;
 }>, 'shadow'>;
-export declare type RawToken = Token<string, 'raw'>;
+export declare type RawToken = DesignToken<string, 'raw'>;
 export interface PaletteColorTokenSchema {
     color: {
         palette: {
@@ -313,7 +346,9 @@ export interface ShadowTokenSchema {
 export interface UtilTokenSchema {
     UNSAFE_util: {
         transparent: RawToken;
+        MISSING_TOKEN: RawToken;
     };
 }
 export declare type ColorTokenSchema = BackgroundColorTokenSchema & BorderColorTokenSchema & IconBorderColorTokenSchema & TextColorTokenSchema & AccentColorTokenSchema & UtilTokenSchema;
 export declare type TokenSchema = PaletteColorTokenSchema & ColorTokenSchema & ShadowTokenSchema;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",
@@ -21,8 +21,8 @@
   "af:exports": {
     ".": "./src/index.tsx",
     "./token-names": "./src/entry-points/token-names.tsx",
-    "./token-default-values": "./src/entry-points/token-default-values.tsx",
-    "./rename-mapping": "./src/entry-points/rename-mapping.tsx"
+    "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
+    "./babel-plugin": "./src/entry-points/babel-plugin.tsx"
   },
   "scripts": {
     "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git",
@@ -30,12 +30,20 @@
     "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0"
+    "@babel/runtime": "^7.0.0",
+    "@babel/traverse": "^7.15.0",
+    "@babel/types": "^7.15.0"
   },
   "devDependencies": {
+    "@atlaskit/code": "*",
+    "@atlaskit/lozenge": "*",
+    "@atlaskit/tabs": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "lodash": "^4.17.15",
+    "@babel/core": "^7.12.3",
+    "@emotion/core": "^10.0.9",
+    "lodash": "^4.17.21",
     "prettier": "^2.1.1",
+    "react": "^16.8.0",
     "style-dictionary": "^3.0.0",
     "ts-node": "^10.0.0",
     "typescript": "3.9.6"
@@ -48,7 +56,10 @@
     "@repo/internal": {
       "design-system": "v1",
       "ui-components": "lite-mode",
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/tokens-browser-extension/README.md

@@ -0,0 +1,28 @@
+Atlaskit Tokens Browser Extension
+===
+
+This extension was made to help development of different themes using `@atlaskit/tokens`
+
+Installation
+===
+The extension currently is not available on any extension store and can only be installed in its unpacked form
+
+
+Chrome
+ * Open [chrome://extensions](chrome://extensions)
+ * Enable 'Developer Mode' checkbox
+ * Click 'Load unpacked extensions...'
+ * Select the `packages/design-system/tokens/tokens-browser-extension` folder
+
+Firefox
+* You can also install the extension in Firefox:
+* Unzip the extension and follow the instructions at [Temporary installation in Firefox](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/).
+
+Note: When you quit the browser it will remove the extension so you will have to follow the guide above to install it again. We can look at packaging the extension up properly if there is enough demand ;)
+
+Usage
+===
+
+While on any page, launch the devtools, you should see a new tab called 'Tokens theming controls'.
+
+You can toggle between the themes or disable the theme to see the legacy appearance

package/tokens-browser-extension/atlassian-theme.css

@@ -0,0 +1,449 @@
+/**
+* These styles have been copy-pasted from the output
+* in packages/design-system/tokens/css
+* this now includes namespaced tokens only
+*/
+
+html[data-theme='light'] {
+  --ds-text-accent-blue: #0055CC;
+  --ds-text-accent-red: #AE2A19;
+  --ds-text-accent-orange: #974F0C;
+  --ds-text-accent-yellow: #7F5F01;
+  --ds-text-accent-green: #216E4E;
+  --ds-text-accent-purple: #5E4DB2;
+  --ds-text-accent-teal: #206B74;
+  --ds-text-accent-magenta: #943D73;
+  --ds-text: #172B4D;
+  --ds-text-subtle: #44546F;
+  --ds-text-subtlest: #626F86;
+  --ds-text-disabled: #8993A5;
+  --ds-text-inverse: #FFFFFF;
+  --ds-text-brand: #0C66E4;
+  --ds-text-danger: #AE2A19;
+  --ds-text-warning: #974F0C;
+  --ds-text-warning-inverse: #172B4D;
+  --ds-text-success: #216E4E;
+  --ds-text-discovery: #5E4DB2;
+  --ds-text-information: #0055CC;
+  --ds-text-highEmphasis: #172B4D;
+  --ds-text-link-pressed: #0055CC;
+  --ds-text-link-resting: #0C66E4;
+  --ds-text-lowEmphasis: #626F86;
+  --ds-text-mediumEmphasis: #44546F;
+  --ds-text-onBold: #FFFFFF;
+  --ds-text-onBoldWarning: #172B4D;
+  --ds-text-selected: #0C66E4;
+  --ds-icon-accent-blue: #1D7AFC;
+  --ds-icon-accent-red: #E34935;
+  --ds-icon-accent-orange: #D97008;
+  --ds-icon-accent-yellow: #B38600;
+  --ds-icon-accent-green: #22A06B;
+  --ds-icon-accent-purple: #8270DB;
+  --ds-icon-accent-teal: #1D9AAA;
+  --ds-icon-accent-magenta: #CD519D;
+  --ds-icon: #44546F;
+  --ds-icon-subtle: #626F86;
+  --ds-icon-inverse: #FFFFFF;
+  --ds-icon-disabled: #8993A5;
+  --ds-icon-brand: #0C66E4;
+  --ds-icon-danger: #E34935;
+  --ds-icon-warning: #D97008;
+  --ds-icon-warning-inverse: #172B4D;
+  --ds-icon-success: #22A06B;
+  --ds-icon-discovery: #8270DB;
+  --ds-icon-information: #1D7AFC;
+  --ds-border-accent-blue: #1D7AFC;
+  --ds-border-accent-red: #E34935;
+  --ds-border-accent-orange: #D97008;
+  --ds-border-accent-yellow: #B38600;
+  --ds-border-accent-green: #22A06B;
+  --ds-border-accent-purple: #8270DB;
+  --ds-border-accent-teal: #1D9AAA;
+  --ds-border-accent-magenta: #CD519D;
+  --ds-border: #091E4224;
+  --ds-border-focused: #388BFF;
+  --ds-border-input: #091E4224;
+  --ds-border-disabled: #091E420F;
+  --ds-border-brand: #0C66E4;
+  --ds-border-danger: #E34935;
+  --ds-border-warning: #D97008;
+  --ds-border-success: #22A06B;
+  --ds-border-discovery: #8270DB;
+  --ds-border-information: #1D7AFC;
+  --ds-border-focus: #388BFF;
+  --ds-border-neutral: #091E4224;
+  --ds-background-accent-blue: #CCE0FF;
+  --ds-background-accent-blue-bold: #579DFF;
+  --ds-background-accent-red: #FFD2CC;
+  --ds-background-accent-red-bold: #F87462;
+  --ds-background-accent-orange: #FFE2BD;
+  --ds-background-accent-orange-bold: #FAA53D;
+  --ds-background-accent-yellow: #F8E6A0;
+  --ds-background-accent-yellow-bold: #E2B203;
+  --ds-background-accent-green: #BAF3DB;
+  --ds-background-accent-green-bold: #4BCE97;
+  --ds-background-accent-teal: #C1F0F5;
+  --ds-background-accent-teal-bold: #60C6D2;
+  --ds-background-accent-purple: #DFD8FD;
+  --ds-background-accent-purple-bold: #9F8FEF;
+  --ds-background-accent-magenta: #FDD0EC;
+  --ds-background-accent-magenta-bold: #E774BB;
+  --ds-background-disabled: #091E420F;
+  --ds-background-inverse: #00000029;
+  --ds-background-input: #091E4208;
+  --ds-background-input-hovered: #FFFFFF;
+  --ds-background-input-pressed: #091E420F;
+  --ds-background-neutral: #091E420F;
+  --ds-background-neutral-hovered: #091E4224;
+  --ds-background-neutral-pressed: #091E424F;
+  --ds-background-neutral-subtle: #00000000;
+  --ds-background-neutral-subtle-hovered: #091E420F;
+  --ds-background-neutral-subtle-pressed: #091E4224;
+  --ds-background-neutral-bold: #44546F;
+  --ds-background-neutral-bold-hovered: #2C3E5D;
+  --ds-background-neutral-bold-pressed: #172B4D;
+  --ds-background-brand: #E9F2FF;
+  --ds-background-brand-hovered: #CCE0FF;
+  --ds-background-brand-pressed: #85B8FF;
+  --ds-background-brand-bold: #0C66E4;
+  --ds-background-brand-bold-hovered: #0055CC;
+  --ds-background-brand-bold-pressed: #09326C;
+  --ds-background-danger: #FFEDEB;
+  --ds-background-danger-hovered: #FFD2CC;
+  --ds-background-danger-pressed: #FF9C8F;
+  --ds-background-danger-bold: #CA3521;
+  --ds-background-danger-bold-hovered: #AE2A19;
+  --ds-background-danger-bold-pressed: #601E16;
+  --ds-background-warning: #FFF7D6;
+  --ds-background-warning-hovered: #F8E6A0;
+  --ds-background-warning-pressed: #F5CD47;
+  --ds-background-warning-bold: #E2B203;
+  --ds-background-warning-bold-hovered: #CF9F02;
+  --ds-background-warning-bold-pressed: #B38600;
+  --ds-background-success: #DFFCF0;
+  --ds-background-success-hovered: #BAF3DB;
+  --ds-background-success-pressed: #7EE2B8;
+  --ds-background-success-bold: #1F845A;
+  --ds-background-success-bold-hovered: #216E4E;
+  --ds-background-success-bold-pressed: #164B35;
+  --ds-background-discovery: #F3F0FF;
+  --ds-background-discovery-hovered: #DFD8FD;
+  --ds-background-discovery-pressed: #B8ACF6;
+  --ds-background-discovery-bold: #6E5DC6;
+  --ds-background-discovery-bold-hovered: #5E4DB2;
+  --ds-background-discovery-bold-pressed: #352C63;
+  --ds-background-information: #E9F2FF;
+  --ds-background-information-hovered: #CCE0FF;
+  --ds-background-information-pressed: #85B8FF;
+  --ds-background-information-bold: #0C66E4;
+  --ds-background-information-bold-hovered: #0055CC;
+  --ds-background-information-bold-pressed: #09326C;
+  --ds-background-blanket: #091E427A;
+  --ds-background-boldBrand-hover: #0055CC;
+  --ds-background-boldBrand-pressed: #09326C;
+  --ds-background-boldBrand-resting: #0C66E4;
+  --ds-background-boldDanger-hover: #AE2A19;
+  --ds-background-boldDanger-pressed: #601E16;
+  --ds-background-boldDanger-resting: #CA3521;
+  --ds-background-boldDiscovery-hover: #5E4DB2;
+  --ds-background-boldDiscovery-pressed: #352C63;
+  --ds-background-boldDiscovery-resting: #6E5DC6;
+  --ds-background-boldNeutral-hover: #2C3E5D;
+  --ds-background-boldNeutral-pressed: #172B4D;
+  --ds-background-boldNeutral-resting: #44546F;
+  --ds-background-boldSuccess-hover: #216E4E;
+  --ds-background-boldSuccess-pressed: #164B35;
+  --ds-background-boldSuccess-resting: #1F845A;
+  --ds-background-boldWarning-hover: #CF9F02;
+  --ds-background-boldWarning-pressed: #B38600;
+  --ds-background-boldWarning-resting: #E2B203;
+  --ds-background-card: #FFFFFF;
+  --ds-background-default: #FFFFFF;
+  --ds-background-overlay: #FFFFFF;
+  --ds-background-selected-resting: #E9F2FF;
+  --ds-background-selected-hover: #CCE0FF;
+  --ds-background-selected-pressed: #85B8FF;
+  --ds-background-subtleBorderedNeutral-pressed: #091E420F;
+  --ds-background-subtleBorderedNeutral-resting: #091E4208;
+  --ds-background-subtleBrand-hover: #CCE0FF;
+  --ds-background-subtleBrand-pressed: #85B8FF;
+  --ds-background-subtleBrand-resting: #E9F2FF;
+  --ds-background-subtleDanger-hover: #FFD2CC;
+  --ds-background-subtleDanger-pressed: #FF9C8F;
+  --ds-background-subtleDanger-resting: #FFEDEB;
+  --ds-background-subtleDiscovery-hover: #DFD8FD;
+  --ds-background-subtleDiscovery-pressed: #B8ACF6;
+  --ds-background-subtleDiscovery-resting: #F3F0FF;
+  --ds-background-subtleNeutral-hover: #091E4224;
+  --ds-background-subtleNeutral-pressed: #091E424F;
+  --ds-background-subtleNeutral-resting: #091E420F;
+  --ds-background-subtleSuccess-hover: #BAF3DB;
+  --ds-background-subtleSuccess-pressed: #7EE2B8;
+  --ds-background-subtleSuccess-resting: #DFFCF0;
+  --ds-background-subtleWarning-hover: #F8E6A0;
+  --ds-background-subtleWarning-pressed: #F5CD47;
+  --ds-background-subtleWarning-resting: #FFF7D6;
+  --ds-background-sunken: #091E4208;
+  --ds-background-transparentNeutral-hover: #091E420F;
+  --ds-background-transparentNeutral-pressed: #091E4224;
+  --ds-blanket: #091E427A;
+  --ds-interaction-hovered: #ffffff33;
+  --ds-interaction-pressed: #ffffff5c;
+  --ds-interaction-inverse-hovered: #00000029;
+  --ds-interaction-inverse-pressed: #00000052;
+  --ds-link: #0C66E4;
+  --ds-link-pressed: #0055CC;
+  --ds-accent-boldBlue: #579DFF;
+  --ds-accent-boldGreen: #4BCE97;
+  --ds-accent-boldOrange: #FAA53D;
+  --ds-accent-boldPurple: #9F8FEF;
+  --ds-accent-boldRed: #F87462;
+  --ds-accent-boldTeal: #60C6D2;
+  --ds-accent-subtleBlue: #CCE0FF;
+  --ds-accent-subtleGreen: #BAF3DB;
+  --ds-accent-subtleMagenta: #FDD0EC;
+  --ds-accent-subtleOrange: #FFE2BD;
+  --ds-accent-subtlePurple: #DFD8FD;
+  --ds-accent-subtleRed: #FFD2CC;
+  --ds-accent-subtleTeal: #C1F0F5;
+  --ds-iconBorder-brand: #1D7AFC;
+  --ds-iconBorder-danger: #E34935;
+  --ds-iconBorder-discovery: #8270DB;
+  --ds-iconBorder-success: #22A06B;
+  --ds-iconBorder-warning: #D97008;
+  --ds-overlay-hover: #091E424F;
+  --ds-overlay-pressed: #091E427A;
+  --ds-card: 0px 1px 1px #091E4240, 0px 0px 1px #091E424F;
+  --ds-overlay: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
+  --ds-shadow-raised: 0px 1px 1px #091E4240, 0px 0px 1px #091E424F;
+  --ds-shadow-overlay: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
+  --ds-surface: #FFFFFF;
+  --ds-surface-sunken: #091E4208;
+  --ds-surface-raised: #FFFFFF;
+  --ds-surface-overlay: #FFFFFF;
+  --ds-UNSAFE_util-transparent: transparent;
+  --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
+
+}
+
+html[data-theme='dark'] {
+  --ds-text-accent-blue: #85B8FF;
+  --ds-text-accent-red: #FF9C8F;
+  --ds-text-accent-orange: #FEC57B;
+  --ds-text-accent-yellow: #F5CD47;
+  --ds-text-accent-green: #7EE2B8;
+  --ds-text-accent-purple: #B8ACF6;
+  --ds-text-accent-teal: #8BDBE5;
+  --ds-text-accent-magenta: #F797D2;
+  --ds-text: #C7D1DB;
+  --ds-text-subtle: #9FADBC;
+  --ds-text-subtlest: #8696A7;
+  --ds-text-disabled: #5C6C7A;
+  --ds-text-inverse: #161A1D;
+  --ds-text-brand: #579DFF;
+  --ds-text-danger: #FF9C8F;
+  --ds-text-warning: #F5CD47;
+  --ds-text-warning-inverse: #161A1D;
+  --ds-text-success: #7EE2B8;
+  --ds-text-discovery: #B8ACF6;
+  --ds-text-information: #85B8FF;
+  --ds-text-highEmphasis: #C7D1DB;
+  --ds-text-link-pressed: #85B8FF;
+  --ds-text-link-resting: #579DFF;
+  --ds-text-lowEmphasis: #8696A7;
+  --ds-text-mediumEmphasis: #9FADBC;
+  --ds-text-onBold: #161A1D;
+  --ds-text-onBoldWarning: #161A1D;
+  --ds-text-selected: #579DFF;
+  --ds-icon-accent-blue: #388BFF;
+  --ds-icon-accent-red: #EF5C48;
+  --ds-icon-accent-orange: #F18D13;
+  --ds-icon-accent-yellow: #CF9F02;
+  --ds-icon-accent-green: #2ABB7F;
+  --ds-icon-accent-purple: #8F7EE7;
+  --ds-icon-accent-teal: #37B4C3;
+  --ds-icon-accent-magenta: #DA62AC;
+  --ds-icon: #9FADBC;
+  --ds-icon-subtle: #8696A7;
+  --ds-icon-inverse: #161A1D;
+  --ds-icon-disabled: #5C6C7A;
+  --ds-icon-brand: #579DFF;
+  --ds-icon-danger: #EF5C48;
+  --ds-icon-warning: #CF9F02;
+  --ds-icon-warning-inverse: #161A1D;
+  --ds-icon-success: #2ABB7F;
+  --ds-icon-discovery: #8F7EE7;
+  --ds-icon-information: #388BFF;
+  --ds-border-accent-blue: #388BFF;
+  --ds-border-accent-red: #EF5C48;
+  --ds-border-accent-orange: #F18D13;
+  --ds-border-accent-yellow: #CF9F02;
+  --ds-border-accent-green: #2ABB7F;
+  --ds-border-accent-purple: #8F7EE7;
+  --ds-border-accent-teal: #37B4C3;
+  --ds-border-accent-magenta: #DA62AC;
+  --ds-border: #A6C5E229;
+  --ds-border-focused: #85B8FF;
+  --ds-border-input: #A6C5E229;
+  --ds-border-disabled: #A1BDD914;
+  --ds-border-brand: #579DFF;
+  --ds-border-danger: #EF5C48;
+  --ds-border-warning: #CF9F02;
+  --ds-border-success: #2ABB7F;
+  --ds-border-discovery: #8F7EE7;
+  --ds-border-information: #388BFF;
+  --ds-border-focus: #85B8FF;
+  --ds-border-neutral: #A6C5E229;
+  --ds-background-accent-blue: #09326C;
+  --ds-background-accent-blue-bold: #0C66E4;
+  --ds-background-accent-red: #601E16;
+  --ds-background-accent-red-bold: #CA3521;
+  --ds-background-accent-orange: #5F3811;
+  --ds-background-accent-orange-bold: #B65C02;
+  --ds-background-accent-yellow: #533F04;
+  --ds-background-accent-yellow-bold: #946F00;
+  --ds-background-accent-green: #164B35;
+  --ds-background-accent-green-bold: #1F845A;
+  --ds-background-accent-teal: #1D474C;
+  --ds-background-accent-teal-bold: #1D7F8C;
+  --ds-background-accent-purple: #352C63;
+  --ds-background-accent-purple-bold: #6E5DC6;
+  --ds-background-accent-magenta: #50253F;
+  --ds-background-accent-magenta-bold: #AE4787;
+  --ds-background-disabled: #A1BDD914;
+  --ds-background-inverse: #ffffff33;
+  --ds-background-input: #BCD6F00A;
+  --ds-background-input-hovered: #161A1D;
+  --ds-background-input-pressed: #A1BDD914;
+  --ds-background-neutral: #A1BDD914;
+  --ds-background-neutral-hovered: #A6C5E229;
+  --ds-background-neutral-pressed: #BFDBF847;
+  --ds-background-neutral-subtle: #00000000;
+  --ds-background-neutral-subtle-hovered: #A1BDD914;
+  --ds-background-neutral-subtle-pressed: #A6C5E229;
+  --ds-background-neutral-bold: #9FADBC;
+  --ds-background-neutral-bold-hovered: #B6C2CF;
+  --ds-background-neutral-bold-pressed: #C7D1DB;
+  --ds-background-brand: #A1BDD914;
+  --ds-background-brand-hovered: #A6C5E229;
+  --ds-background-brand-pressed: #BFDBF847;
+  --ds-background-brand-bold: #579DFF;
+  --ds-background-brand-bold-hovered: #85B8FF;
+  --ds-background-brand-bold-pressed: #CCE0FF;
+  --ds-background-danger: #391813;
+  --ds-background-danger-hovered: #601E16;
+  --ds-background-danger-pressed: #AE2A19;
+  --ds-background-danger-bold: #F87462;
+  --ds-background-danger-bold-hovered: #FF9C8F;
+  --ds-background-danger-bold-pressed: #FFD2CC;
+  --ds-background-warning: #3D2E00;
+  --ds-background-warning-hovered: #533F04;
+  --ds-background-warning-pressed: #7F5F01;
+  --ds-background-warning-bold: #E2B203;
+  --ds-background-warning-bold-hovered: #F5CD47;
+  --ds-background-warning-bold-pressed: #F8E6A0;
+  --ds-background-success: #133527;
+  --ds-background-success-hovered: #164B35;
+  --ds-background-success-pressed: #216E4E;
+  --ds-background-success-bold: #4BCE97;
+  --ds-background-success-bold-hovered: #7EE2B8;
+  --ds-background-success-bold-pressed: #BAF3DB;
+  --ds-background-discovery: #231C3F;
+  --ds-background-discovery-hovered: #352C63;
+  --ds-background-discovery-pressed: #5E4DB2;
+  --ds-background-discovery-bold: #9F8FEF;
+  --ds-background-discovery-bold-hovered: #B8ACF6;
+  --ds-background-discovery-bold-pressed: #DFD8FD;
+  --ds-background-information: #082145;
+  --ds-background-information-hovered: #09326C;
+  --ds-background-information-pressed: #0055CC;
+  --ds-background-information-bold: #579DFF;
+  --ds-background-information-bold-hovered: #85B8FF;
+  --ds-background-information-bold-pressed: #CCE0FF;
+  --ds-background-blanket: #03040442;
+  --ds-background-boldBrand-hover: #85B8FF;
+  --ds-background-boldBrand-pressed: #CCE0FF;
+  --ds-background-boldBrand-resting: #579DFF;
+  --ds-background-boldDanger-hover: #FF9C8F;
+  --ds-background-boldDanger-pressed: #FFD2CC;
+  --ds-background-boldDanger-resting: #F87462;
+  --ds-background-boldDiscovery-hover: #B8ACF6;
+  --ds-background-boldDiscovery-pressed: #DFD8FD;
+  --ds-background-boldDiscovery-resting: #9F8FEF;
+  --ds-background-boldNeutral-hover: #B6C2CF;
+  --ds-background-boldNeutral-pressed: #C7D1DB;
+  --ds-background-boldNeutral-resting: #9FADBC;
+  --ds-background-boldSuccess-hover: #7EE2B8;
+  --ds-background-boldSuccess-pressed: #BAF3DB;
+  --ds-background-boldSuccess-resting: #4BCE97;
+  --ds-background-boldWarning-hover: #F5CD47;
+  --ds-background-boldWarning-pressed: #F8E6A0;
+  --ds-background-boldWarning-resting: #E2B203;
+  --ds-background-card: #1D2125;
+  --ds-background-default: #161A1D;
+  --ds-background-overlay: #22272B;
+  --ds-background-selected-resting: #A1BDD914;
+  --ds-background-selected-hover: #A6C5E229;
+  --ds-background-selected-pressed: #BFDBF847;
+  --ds-background-subtleBorderedNeutral-pressed: #A1BDD914;
+  --ds-background-subtleBorderedNeutral-resting: #BCD6F00A;
+  --ds-background-subtleBrand-hover: #09326C;
+  --ds-background-subtleBrand-pressed: #0055CC;
+  --ds-background-subtleBrand-resting: #082145;
+  --ds-background-subtleDanger-hover: #601E16;
+  --ds-background-subtleDanger-pressed: #AE2A19;
+  --ds-background-subtleDanger-resting: #391813;
+  --ds-background-subtleDiscovery-hover: #352C63;
+  --ds-background-subtleDiscovery-pressed: #5E4DB2;
+  --ds-background-subtleDiscovery-resting: #231C3F;
+  --ds-background-subtleNeutral-hover: #A6C5E229;
+  --ds-background-subtleNeutral-pressed: #BFDBF847;
+  --ds-background-subtleNeutral-resting: #A1BDD914;
+  --ds-background-subtleSuccess-hover: #164B35;
+  --ds-background-subtleSuccess-pressed: #216E4E;
+  --ds-background-subtleSuccess-resting: #133527;
+  --ds-background-subtleWarning-hover: #533F04;
+  --ds-background-subtleWarning-pressed: #7F5F01;
+  --ds-background-subtleWarning-resting: #3D2E00;
+  --ds-background-sunken: #03040442;
+  --ds-background-transparentNeutral-hover: #A1BDD914;
+  --ds-background-transparentNeutral-pressed: #A6C5E229;
+  --ds-blanket: #03040442;
+  --ds-interaction-hovered: #00000029;
+  --ds-interaction-pressed: #00000052;
+  --ds-interaction-inverse-hovered: #ffffff33;
+  --ds-interaction-inverse-pressed: #ffffff5c;
+  --ds-link: #579DFF;
+  --ds-link-pressed: #85B8FF;
+  --ds-accent-boldBlue: #0C66E4;
+  --ds-accent-boldGreen: #1F845A;
+  --ds-accent-boldOrange: #B65C02;
+  --ds-accent-boldPurple: #6E5DC6;
+  --ds-accent-boldRed: #CA3521;
+  --ds-accent-boldTeal: #1D7F8C;
+  --ds-accent-subtleBlue: #09326C;
+  --ds-accent-subtleGreen: #164B35;
+  --ds-accent-subtleMagenta: #50253F;
+  --ds-accent-subtleOrange: #5F3811;
+  --ds-accent-subtlePurple: #352C63;
+  --ds-accent-subtleRed: #601E16;
+  --ds-accent-subtleTeal: #1D474C;
+  --ds-iconBorder-brand: #388BFF;
+  --ds-iconBorder-danger: #EF5C48;
+  --ds-iconBorder-discovery: #8F7EE7;
+  --ds-iconBorder-success: #2ABB7F;
+  --ds-iconBorder-warning: #CF9F02;
+  --ds-overlay-hover: #BFDBF847;
+  --ds-overlay-pressed: #A9C5DF7A;
+  --ds-card: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
+  --ds-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
+  --ds-shadow-raised: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
+  --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
+  --ds-surface: #161A1D;
+  --ds-surface-sunken: #03040442;
+  --ds-surface-raised: #1D2125;
+  --ds-surface-overlay: #22272B;
+  --ds-UNSAFE_util-transparent: transparent;
+  --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
+
+}