@entur/tokens 3.12.0 → 3.13.0

package/README.md

@@ -1,6 +1,8 @@
 # Entur design tokens
 
-This package contains all design tokens used throughout the design system. You'l find all of them in the `src/tokens.ts` file.
+This package contains all design tokens and design variables used throughout the design system. We are currently in a process to migrate over to a new design variable system based on [Figma Variables](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma).
+
+Since not all values are available as a variable yet and to avoid breaking changes, all previous design tokens will be kept around for a while. These are built from the `src/legacy-tokens.ts` file.
 
 > 💡 Looking for the [documentation](https://design.entur.no/komponenter/resources/tokens)?
 
@@ -97,3 +99,23 @@ StyleSheet.create({
 #### px vs rem
 
 These values are mainly provided in pixels. If you need the values in rem instead, add a `.rem` after the token name, e.g. `space.rem.large` for rem value and `space.large` for pixel value.
+
+## [For maintainers] Updating design variables
+
+There are three steps needed to update the set of available designs variables in this repo:
+
+1. generate a JSON-export of the variable set from Figma
+2. Update the corresponding JSON-file in the `src` folder
+3. Build the new variables and commit the changes
+
+### 1. Generate a JSON export
+
+The JSON is exported from Figma using the [variabels2css-plugin](https://www.figma.com/community/plugin/1261234393153346915), download the plugin if you haven't already. Go to the Figma file containing the variables you want to export, eg. [Semantic Colors](https://www.figma.com/file/zFFjH3gKGON6vFJZQK5ltr/Tokens-Semantic-colors?type=design&mode=design&t=M9cT0w0kaaxyBHiq-1). In you menu bar, select 'Plugins' and choose 'variables2css' – this opens a modal. Under 'choose your collection' choose the variable set you want to export. Under 'type' choose 'JSON', and under 'color' and 'unit' choose 'hex' and 'rem'. Then click 'Generate' and copy the result.
+
+### 2. Update JSON file
+
+Back in this repo, find the JSON-variables file you want to update, eg. `semantic.json`, delete its content and paste the generated result you copied in step 1. Then save the file.
+
+### 3. Build variables
+
+When the JSON-file content is updated, run the script `yarn build` inside this package or `yarn build:packages` from root. This will generate new files with updated values in both this package and in all other packages where the component color value has been updated. Once the build is finished, commit all changes and push the commit.

package/dist/base.css

@@ -0,0 +1,133 @@
+@import '~@entur/tokens/dist/semantic.css';
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+[data-color-mode='light'],
+:root {
+  --basecolors-frame-contrast: var(--fill-background-contrast-light);
+  --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
+  --basecolors-frame-default: var(--fill-background-standard-light);
+  --basecolors-frame-elevated: var(--fill-background-standard-light);
+  --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
+  --basecolors-frame-subdued: var(--fill-background-subdued-light);
+  --basecolors-frame-tint: var(--fill-background-tint-light);
+  --basecolors-shape-accent: var(--shape-accent);
+  --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
+  --basecolors-shape-bicycle-default: var(--standard-bicycle);
+  --basecolors-shape-bus-contrast: var(--contrast-bus);
+  --basecolors-shape-bus-default: var(--standard-bus);
+  --basecolors-shape-cableway-contrast: var(--contrast-cableway);
+  --basecolors-shape-cableway-default: var(--standard-cableway);
+  --basecolors-shape-disabled: var(--shape-neutral);
+  --basecolors-shape-disabledalt: var(--shape-neutralalt);
+  --basecolors-shape-ferry-contrast: var(--contrast-ferry);
+  --basecolors-shape-ferry-default: var(--standard-ferry);
+  --basecolors-shape-funicular-contrast: var(--contrast-funicular);
+  --basecolors-shape-funicular-default: var(--standard-funicular);
+  --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
+  --basecolors-shape-helicopter-default: var(--standard-helicopter);
+  --basecolors-shape-highlight: var(--stroke-highlight);
+  --basecolors-shape-light: var(--shape-light);
+  --basecolors-shape-mask: var(--shape-light);
+  --basecolors-shape-maskalt: var(--shape-light);
+  --basecolors-shape-metro-contrast: var(--contrast-metro);
+  --basecolors-shape-metro-default: var(--standard-metro);
+  --basecolors-shape-mobility-contrast: var(--contrast-mobility);
+  --basecolors-shape-mobility-default: var(--standard-mobility);
+  --basecolors-shape-plane-contrast: var(--contrast-plane);
+  --basecolors-shape-plane-default: var(--standard-plane);
+  --basecolors-shape-subdued: var(--shape-subdued);
+  --basecolors-shape-subduedalt: var(--shape-subduedalt);
+  --basecolors-shape-taxi-contrast: var(--contrast-taxi);
+  --basecolors-shape-taxi-default: var(--standard-taxi);
+  --basecolors-shape-train-contrast: var(--contrast-train);
+  --basecolors-shape-train-default: var(--standard-train);
+  --basecolors-shape-tram-contrast: var(--contrast-tram);
+  --basecolors-shape-tram-default: var(--standard-tram);
+  --basecolors-shape-walk-contrast: var(--contrast-walk);
+  --basecolors-shape-walk-default: var(--standard-walk);
+  --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
+  --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
+  --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
+  --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
+  --basecolors-stroke-contrast: var(--stroke-contrast);
+  --basecolors-stroke-default: var(--stroke-accent);
+  --basecolors-stroke-disabled: var(--stroke-neutralalt);
+  --basecolors-stroke-focus-contrast: var(--stroke-contrast);
+  --basecolors-stroke-focus-standard: var(--stroke-accent);
+  --basecolors-stroke-highlight: var(--stroke-highlight);
+  --basecolors-stroke-light: var(--stroke-light);
+  --basecolors-stroke-subdued: var(--stroke-subdued);
+  --basecolors-stroke-subduedalt: var(--stroke-neutral);
+  --basecolors-text-accent: var(--text-accent);
+  --basecolors-text-disabled: var(--text-neutral);
+  --basecolors-text-disabledalt: var(--text-neutralalt);
+  --basecolors-text-highlight: var(--stroke-highlight);
+  --basecolors-text-light: var(--text-light);
+  --basecolors-text-subdued: var(--text-subdued);
+  --basecolors-text-subduedalt: var(--text-subduedalt);
+}
+
+[data-color-mode='dark'] {
+  --basecolors-frame-contrast: var(--fill-background-contrast-dark);
+  --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
+  --basecolors-frame-default: var(--fill-background-standard-dark);
+  --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
+  --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
+  --basecolors-frame-subdued: var(--fill-background-subdued-dark);
+  --basecolors-frame-tint: var(--fill-background-tint-dark);
+  --basecolors-shape-accent: var(--shape-lightalt);
+  --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
+  --basecolors-shape-bicycle-default: var(--dark-bicycle);
+  --basecolors-shape-bus-contrast: var(--dark-bus);
+  --basecolors-shape-bus-default: var(--dark-bus);
+  --basecolors-shape-cableway-contrast: var(--dark-cableway);
+  --basecolors-shape-cableway-default: var(--dark-cableway);
+  --basecolors-shape-disabled: var(--shape-neutralalt);
+  --basecolors-shape-disabledalt: var(--shape-darkalt);
+  --basecolors-shape-ferry-contrast: var(--dark-ferry);
+  --basecolors-shape-ferry-default: var(--dark-ferry);
+  --basecolors-shape-funicular-contrast: var(--dark-funicular);
+  --basecolors-shape-funicular-default: var(--dark-funicular);
+  --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
+  --basecolors-shape-helicopter-default: var(--dark-helicopter);
+  --basecolors-shape-highlight: var(--stroke-highlightalt);
+  --basecolors-shape-light: var(--shape-lightalt);
+  --basecolors-shape-mask: var(--fill-background-subdued-dark);
+  --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
+  --basecolors-shape-metro-contrast: var(--dark-metro);
+  --basecolors-shape-metro-default: var(--dark-metro);
+  --basecolors-shape-mobility-contrast: var(--dark-mobility);
+  --basecolors-shape-mobility-default: var(--dark-mobility);
+  --basecolors-shape-plane-contrast: var(--dark-plane);
+  --basecolors-shape-plane-default: var(--dark-plane);
+  --basecolors-shape-subdued: var(--shape-darkalt);
+  --basecolors-shape-subduedalt: var(--shape-darkalt);
+  --basecolors-shape-taxi-contrast: var(--dark-taxi);
+  --basecolors-shape-taxi-default: var(--dark-taxi);
+  --basecolors-shape-train-contrast: var(--dark-train);
+  --basecolors-shape-train-default: var(--dark-train);
+  --basecolors-shape-tram-contrast: var(--dark-tram);
+  --basecolors-shape-tram-default: var(--dark-tram);
+  --basecolors-shape-walk-contrast: var(--dark-walk);
+  --basecolors-shape-walk-default: var(--dark-walk);
+  --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
+  --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
+  --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
+  --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
+  --basecolors-stroke-contrast: var(--stroke-contrast);
+  --basecolors-stroke-default: var(--stroke-dark);
+  --basecolors-stroke-disabled: var(--stroke-neutral);
+  --basecolors-stroke-focus-contrast: var(--stroke-contrast);
+  --basecolors-stroke-focus-standard: var(--stroke-contrast);
+  --basecolors-stroke-highlight: var(--stroke-highlightalt);
+  --basecolors-stroke-light: var(--stroke-dark);
+  --basecolors-stroke-subdued: var(--stroke-darkalt);
+  --basecolors-stroke-subduedalt: var(--stroke-darkalt);
+  --basecolors-text-accent: var(--text-lightalt);
+  --basecolors-text-disabled: var(--text-neutralalt);
+  --basecolors-text-disabledalt: var(--text-neutralalt);
+  --basecolors-text-highlight: var(--stroke-highlightalt);
+  --basecolors-text-light: var(--text-lightalt);
+  --basecolors-text-subdued: var(--text-darkalt);
+  --basecolors-text-subduedalt: var(--text-darkalt);
+}

package/dist/base.d.ts

@@ -0,0 +1,150 @@
+export declare const base: {
+    light: {
+        baseColors: {
+            frame: {
+                contrast: string;
+                contrastalt: string;
+                default: string;
+                elevated: string;
+                elevatedalt: string;
+                subdued: string;
+                tint: string;
+            };
+            shape: {
+                accent: string;
+                bicycleContrast: string;
+                bicycleDefault: string;
+                busContrast: string;
+                busDefault: string;
+                cablewayContrast: string;
+                cablewayDefault: string;
+                disabled: string;
+                disabledalt: string;
+                ferryContrast: string;
+                ferryDefault: string;
+                funicularContrast: string;
+                funicularDefault: string;
+                helicopterContrast: string;
+                helicopterDefault: string;
+                highlight: string;
+                light: string;
+                mask: string;
+                maskalt: string;
+                metroContrast: string;
+                metroDefault: string;
+                mobilityContrast: string;
+                mobilityDefault: string;
+                planeContrast: string;
+                planeDefault: string;
+                subdued: string;
+                subduedalt: string;
+                taxiContrast: string;
+                taxiDefault: string;
+                trainContrast: string;
+                trainDefault: string;
+                tramContrast: string;
+                tramDefault: string;
+                walkContrast: string;
+                walkDefault: string;
+                airportlinkbusContrast: string;
+                airportlinkbusDefault: string;
+                airportlinkrailContrast: string;
+                airportlinkrailDefault: string;
+            };
+            stroke: {
+                contrast: string;
+                default: string;
+                disabled: string;
+                focusContrast: string;
+                focusStandard: string;
+                highlight: string;
+                light: string;
+                subdued: string;
+                subduedalt: string;
+            };
+            text: {
+                accent: string;
+                disabled: string;
+                disabledalt: string;
+                highlight: string;
+                light: string;
+                subdued: string;
+                subduedalt: string;
+            };
+        };
+    };
+    dark: {
+        baseColors: {
+            frame: {
+                contrast: string;
+                contrastalt: string;
+                default: string;
+                elevated: string;
+                elevatedalt: string;
+                subdued: string;
+                tint: string;
+            };
+            shape: {
+                accent: string;
+                bicycleContrast: string;
+                bicycleDefault: string;
+                busContrast: string;
+                busDefault: string;
+                cablewayContrast: string;
+                cablewayDefault: string;
+                disabled: string;
+                disabledalt: string;
+                ferryContrast: string;
+                ferryDefault: string;
+                funicularContrast: string;
+                funicularDefault: string;
+                helicopterContrast: string;
+                helicopterDefault: string;
+                highlight: string;
+                light: string;
+                mask: string;
+                maskalt: string;
+                metroContrast: string;
+                metroDefault: string;
+                mobilityContrast: string;
+                mobilityDefault: string;
+                planeContrast: string;
+                planeDefault: string;
+                subdued: string;
+                subduedalt: string;
+                taxiContrast: string;
+                taxiDefault: string;
+                trainContrast: string;
+                trainDefault: string;
+                tramContrast: string;
+                tramDefault: string;
+                walkContrast: string;
+                walkDefault: string;
+                airportlinkbusContrast: string;
+                airportlinkbusDefault: string;
+                airportlinkrailContrast: string;
+                airportlinkrailDefault: string;
+            };
+            stroke: {
+                contrast: string;
+                default: string;
+                disabled: string;
+                focusContrast: string;
+                focusStandard: string;
+                highlight: string;
+                light: string;
+                subdued: string;
+                subduedalt: string;
+            };
+            text: {
+                accent: string;
+                disabled: string;
+                disabledalt: string;
+                highlight: string;
+                light: string;
+                subdued: string;
+                subduedalt: string;
+            };
+        };
+    };
+};

package/dist/base.less

@@ -0,0 +1,133 @@
+@import '~@entur/tokens/dist/semantic.css';
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+[data-color-mode='light'],
+:root {
+  @basecolors-frame-contrast: @fill-background-contrast-light;
+  @basecolors-frame-contrastalt: @fill-background-contrast-lightalt;
+  @basecolors-frame-default: @fill-background-standard-light;
+  @basecolors-frame-elevated: @fill-background-standard-light;
+  @basecolors-frame-elevatedalt: @fill-background-tint-light;
+  @basecolors-frame-subdued: @fill-background-subdued-light;
+  @basecolors-frame-tint: @fill-background-tint-light;
+  @basecolors-shape-accent: @shape-accent;
+  @basecolors-shape-bicycle-contrast: @contrast-bicycle;
+  @basecolors-shape-bicycle-default: @standard-bicycle;
+  @basecolors-shape-bus-contrast: @contrast-bus;
+  @basecolors-shape-bus-default: @standard-bus;
+  @basecolors-shape-cableway-contrast: @contrast-cableway;
+  @basecolors-shape-cableway-default: @standard-cableway;
+  @basecolors-shape-disabled: @shape-neutral;
+  @basecolors-shape-disabledalt: @shape-neutralalt;
+  @basecolors-shape-ferry-contrast: @contrast-ferry;
+  @basecolors-shape-ferry-default: @standard-ferry;
+  @basecolors-shape-funicular-contrast: @contrast-funicular;
+  @basecolors-shape-funicular-default: @standard-funicular;
+  @basecolors-shape-helicopter-contrast: @contrast-helicopter;
+  @basecolors-shape-helicopter-default: @standard-helicopter;
+  @basecolors-shape-highlight: @stroke-highlight;
+  @basecolors-shape-light: @shape-light;
+  @basecolors-shape-mask: @shape-light;
+  @basecolors-shape-maskalt: @shape-light;
+  @basecolors-shape-metro-contrast: @contrast-metro;
+  @basecolors-shape-metro-default: @standard-metro;
+  @basecolors-shape-mobility-contrast: @contrast-mobility;
+  @basecolors-shape-mobility-default: @standard-mobility;
+  @basecolors-shape-plane-contrast: @contrast-plane;
+  @basecolors-shape-plane-default: @standard-plane;
+  @basecolors-shape-subdued: @shape-subdued;
+  @basecolors-shape-subduedalt: @shape-subduedalt;
+  @basecolors-shape-taxi-contrast: @contrast-taxi;
+  @basecolors-shape-taxi-default: @standard-taxi;
+  @basecolors-shape-train-contrast: @contrast-train;
+  @basecolors-shape-train-default: @standard-train;
+  @basecolors-shape-tram-contrast: @contrast-tram;
+  @basecolors-shape-tram-default: @standard-tram;
+  @basecolors-shape-walk-contrast: @contrast-walk;
+  @basecolors-shape-walk-default: @standard-walk;
+  @basecolors-shape-airportlinkbus-contrast: @contrast-airportlinkbus;
+  @basecolors-shape-airportlinkbus-default: @standard-airportlinkbus;
+  @basecolors-shape-airportlinkrail-contrast: @contrast-airportlinkrail;
+  @basecolors-shape-airportlinkrail-default: @standard-airportlinkrail;
+  @basecolors-stroke-contrast: @stroke-contrast;
+  @basecolors-stroke-default: @stroke-accent;
+  @basecolors-stroke-disabled: @stroke-neutralalt;
+  @basecolors-stroke-focus-contrast: @stroke-contrast;
+  @basecolors-stroke-focus-standard: @stroke-accent;
+  @basecolors-stroke-highlight: @stroke-highlight;
+  @basecolors-stroke-light: @stroke-light;
+  @basecolors-stroke-subdued: @stroke-subdued;
+  @basecolors-stroke-subduedalt: @stroke-neutral;
+  @basecolors-text-accent: @text-accent;
+  @basecolors-text-disabled: @text-neutral;
+  @basecolors-text-disabledalt: @text-neutralalt;
+  @basecolors-text-highlight: @stroke-highlight;
+  @basecolors-text-light: @text-light;
+  @basecolors-text-subdued: @text-subdued;
+  @basecolors-text-subduedalt: @text-subduedalt;
+}
+
+[data-color-mode='dark'] {
+  @basecolors-frame-contrast: @fill-background-contrast-dark;
+  @basecolors-frame-contrastalt: @fill-background-tint-dark;
+  @basecolors-frame-default: @fill-background-standard-dark;
+  @basecolors-frame-elevated: @fill-background-overlay-transparent;
+  @basecolors-frame-elevatedalt: @fill-background-overlay-solidalt;
+  @basecolors-frame-subdued: @fill-background-subdued-dark;
+  @basecolors-frame-tint: @fill-background-tint-dark;
+  @basecolors-shape-accent: @shape-lightalt;
+  @basecolors-shape-bicycle-contrast: @dark-bicycle;
+  @basecolors-shape-bicycle-default: @dark-bicycle;
+  @basecolors-shape-bus-contrast: @dark-bus;
+  @basecolors-shape-bus-default: @dark-bus;
+  @basecolors-shape-cableway-contrast: @dark-cableway;
+  @basecolors-shape-cableway-default: @dark-cableway;
+  @basecolors-shape-disabled: @shape-neutralalt;
+  @basecolors-shape-disabledalt: @shape-darkalt;
+  @basecolors-shape-ferry-contrast: @dark-ferry;
+  @basecolors-shape-ferry-default: @dark-ferry;
+  @basecolors-shape-funicular-contrast: @dark-funicular;
+  @basecolors-shape-funicular-default: @dark-funicular;
+  @basecolors-shape-helicopter-contrast: @dark-helicopter;
+  @basecolors-shape-helicopter-default: @dark-helicopter;
+  @basecolors-shape-highlight: @stroke-highlightalt;
+  @basecolors-shape-light: @shape-lightalt;
+  @basecolors-shape-mask: @fill-background-subdued-dark;
+  @basecolors-shape-maskalt: @fill-background-overlay-solid;
+  @basecolors-shape-metro-contrast: @dark-metro;
+  @basecolors-shape-metro-default: @dark-metro;
+  @basecolors-shape-mobility-contrast: @dark-mobility;
+  @basecolors-shape-mobility-default: @dark-mobility;
+  @basecolors-shape-plane-contrast: @dark-plane;
+  @basecolors-shape-plane-default: @dark-plane;
+  @basecolors-shape-subdued: @shape-darkalt;
+  @basecolors-shape-subduedalt: @shape-darkalt;
+  @basecolors-shape-taxi-contrast: @dark-taxi;
+  @basecolors-shape-taxi-default: @dark-taxi;
+  @basecolors-shape-train-contrast: @dark-train;
+  @basecolors-shape-train-default: @dark-train;
+  @basecolors-shape-tram-contrast: @dark-tram;
+  @basecolors-shape-tram-default: @dark-tram;
+  @basecolors-shape-walk-contrast: @dark-walk;
+  @basecolors-shape-walk-default: @dark-walk;
+  @basecolors-shape-airportlinkbus-contrast: @dark-airportlinkbus;
+  @basecolors-shape-airportlinkbus-default: @dark-airportlinkbus;
+  @basecolors-shape-airportlinkrail-contrast: @dark-airportlinkrail;
+  @basecolors-shape-airportlinkrail-default: @dark-airportlinkrail;
+  @basecolors-stroke-contrast: @stroke-contrast;
+  @basecolors-stroke-default: @stroke-dark;
+  @basecolors-stroke-disabled: @stroke-neutral;
+  @basecolors-stroke-focus-contrast: @stroke-contrast;
+  @basecolors-stroke-focus-standard: @stroke-contrast;
+  @basecolors-stroke-highlight: @stroke-highlightalt;
+  @basecolors-stroke-light: @stroke-dark;
+  @basecolors-stroke-subdued: @stroke-darkalt;
+  @basecolors-stroke-subduedalt: @stroke-darkalt;
+  @basecolors-text-accent: @text-lightalt;
+  @basecolors-text-disabled: @text-neutralalt;
+  @basecolors-text-disabledalt: @text-neutralalt;
+  @basecolors-text-highlight: @stroke-highlightalt;
+  @basecolors-text-light: @text-lightalt;
+  @basecolors-text-subdued: @text-darkalt;
+  @basecolors-text-subduedalt: @text-darkalt;
+}

package/dist/base.scss

@@ -0,0 +1,133 @@
+@use '~@entur/tokens/dist/semantic.css';
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+[data-color-mode='light'],
+:root {
+  $basecolors-frame-contrast: $fill-background-contrast-light;
+  $basecolors-frame-contrastalt: $fill-background-contrast-lightalt;
+  $basecolors-frame-default: $fill-background-standard-light;
+  $basecolors-frame-elevated: $fill-background-standard-light;
+  $basecolors-frame-elevatedalt: $fill-background-tint-light;
+  $basecolors-frame-subdued: $fill-background-subdued-light;
+  $basecolors-frame-tint: $fill-background-tint-light;
+  $basecolors-shape-accent: $shape-accent;
+  $basecolors-shape-bicycle-contrast: $contrast-bicycle;
+  $basecolors-shape-bicycle-default: $standard-bicycle;
+  $basecolors-shape-bus-contrast: $contrast-bus;
+  $basecolors-shape-bus-default: $standard-bus;
+  $basecolors-shape-cableway-contrast: $contrast-cableway;
+  $basecolors-shape-cableway-default: $standard-cableway;
+  $basecolors-shape-disabled: $shape-neutral;
+  $basecolors-shape-disabledalt: $shape-neutralalt;
+  $basecolors-shape-ferry-contrast: $contrast-ferry;
+  $basecolors-shape-ferry-default: $standard-ferry;
+  $basecolors-shape-funicular-contrast: $contrast-funicular;
+  $basecolors-shape-funicular-default: $standard-funicular;
+  $basecolors-shape-helicopter-contrast: $contrast-helicopter;
+  $basecolors-shape-helicopter-default: $standard-helicopter;
+  $basecolors-shape-highlight: $stroke-highlight;
+  $basecolors-shape-light: $shape-light;
+  $basecolors-shape-mask: $shape-light;
+  $basecolors-shape-maskalt: $shape-light;
+  $basecolors-shape-metro-contrast: $contrast-metro;
+  $basecolors-shape-metro-default: $standard-metro;
+  $basecolors-shape-mobility-contrast: $contrast-mobility;
+  $basecolors-shape-mobility-default: $standard-mobility;
+  $basecolors-shape-plane-contrast: $contrast-plane;
+  $basecolors-shape-plane-default: $standard-plane;
+  $basecolors-shape-subdued: $shape-subdued;
+  $basecolors-shape-subduedalt: $shape-subduedalt;
+  $basecolors-shape-taxi-contrast: $contrast-taxi;
+  $basecolors-shape-taxi-default: $standard-taxi;
+  $basecolors-shape-train-contrast: $contrast-train;
+  $basecolors-shape-train-default: $standard-train;
+  $basecolors-shape-tram-contrast: $contrast-tram;
+  $basecolors-shape-tram-default: $standard-tram;
+  $basecolors-shape-walk-contrast: $contrast-walk;
+  $basecolors-shape-walk-default: $standard-walk;
+  $basecolors-shape-airportlinkbus-contrast: $contrast-airportlinkbus;
+  $basecolors-shape-airportlinkbus-default: $standard-airportlinkbus;
+  $basecolors-shape-airportlinkrail-contrast: $contrast-airportlinkrail;
+  $basecolors-shape-airportlinkrail-default: $standard-airportlinkrail;
+  $basecolors-stroke-contrast: $stroke-contrast;
+  $basecolors-stroke-default: $stroke-accent;
+  $basecolors-stroke-disabled: $stroke-neutralalt;
+  $basecolors-stroke-focus-contrast: $stroke-contrast;
+  $basecolors-stroke-focus-standard: $stroke-accent;
+  $basecolors-stroke-highlight: $stroke-highlight;
+  $basecolors-stroke-light: $stroke-light;
+  $basecolors-stroke-subdued: $stroke-subdued;
+  $basecolors-stroke-subduedalt: $stroke-neutral;
+  $basecolors-text-accent: $text-accent;
+  $basecolors-text-disabled: $text-neutral;
+  $basecolors-text-disabledalt: $text-neutralalt;
+  $basecolors-text-highlight: $stroke-highlight;
+  $basecolors-text-light: $text-light;
+  $basecolors-text-subdued: $text-subdued;
+  $basecolors-text-subduedalt: $text-subduedalt;
+}
+
+[data-color-mode='dark'] {
+  $basecolors-frame-contrast: $fill-background-contrast-dark;
+  $basecolors-frame-contrastalt: $fill-background-tint-dark;
+  $basecolors-frame-default: $fill-background-standard-dark;
+  $basecolors-frame-elevated: $fill-background-overlay-transparent;
+  $basecolors-frame-elevatedalt: $fill-background-overlay-solidalt;
+  $basecolors-frame-subdued: $fill-background-subdued-dark;
+  $basecolors-frame-tint: $fill-background-tint-dark;
+  $basecolors-shape-accent: $shape-lightalt;
+  $basecolors-shape-bicycle-contrast: $dark-bicycle;
+  $basecolors-shape-bicycle-default: $dark-bicycle;
+  $basecolors-shape-bus-contrast: $dark-bus;
+  $basecolors-shape-bus-default: $dark-bus;
+  $basecolors-shape-cableway-contrast: $dark-cableway;
+  $basecolors-shape-cableway-default: $dark-cableway;
+  $basecolors-shape-disabled: $shape-neutralalt;
+  $basecolors-shape-disabledalt: $shape-darkalt;
+  $basecolors-shape-ferry-contrast: $dark-ferry;
+  $basecolors-shape-ferry-default: $dark-ferry;
+  $basecolors-shape-funicular-contrast: $dark-funicular;
+  $basecolors-shape-funicular-default: $dark-funicular;
+  $basecolors-shape-helicopter-contrast: $dark-helicopter;
+  $basecolors-shape-helicopter-default: $dark-helicopter;
+  $basecolors-shape-highlight: $stroke-highlightalt;
+  $basecolors-shape-light: $shape-lightalt;
+  $basecolors-shape-mask: $fill-background-subdued-dark;
+  $basecolors-shape-maskalt: $fill-background-overlay-solid;
+  $basecolors-shape-metro-contrast: $dark-metro;
+  $basecolors-shape-metro-default: $dark-metro;
+  $basecolors-shape-mobility-contrast: $dark-mobility;
+  $basecolors-shape-mobility-default: $dark-mobility;
+  $basecolors-shape-plane-contrast: $dark-plane;
+  $basecolors-shape-plane-default: $dark-plane;
+  $basecolors-shape-subdued: $shape-darkalt;
+  $basecolors-shape-subduedalt: $shape-darkalt;
+  $basecolors-shape-taxi-contrast: $dark-taxi;
+  $basecolors-shape-taxi-default: $dark-taxi;
+  $basecolors-shape-train-contrast: $dark-train;
+  $basecolors-shape-train-default: $dark-train;
+  $basecolors-shape-tram-contrast: $dark-tram;
+  $basecolors-shape-tram-default: $dark-tram;
+  $basecolors-shape-walk-contrast: $dark-walk;
+  $basecolors-shape-walk-default: $dark-walk;
+  $basecolors-shape-airportlinkbus-contrast: $dark-airportlinkbus;
+  $basecolors-shape-airportlinkbus-default: $dark-airportlinkbus;
+  $basecolors-shape-airportlinkrail-contrast: $dark-airportlinkrail;
+  $basecolors-shape-airportlinkrail-default: $dark-airportlinkrail;
+  $basecolors-stroke-contrast: $stroke-contrast;
+  $basecolors-stroke-default: $stroke-dark;
+  $basecolors-stroke-disabled: $stroke-neutral;
+  $basecolors-stroke-focus-contrast: $stroke-contrast;
+  $basecolors-stroke-focus-standard: $stroke-contrast;
+  $basecolors-stroke-highlight: $stroke-highlightalt;
+  $basecolors-stroke-light: $stroke-dark;
+  $basecolors-stroke-subdued: $stroke-darkalt;
+  $basecolors-stroke-subduedalt: $stroke-darkalt;
+  $basecolors-text-accent: $text-lightalt;
+  $basecolors-text-disabled: $text-neutralalt;
+  $basecolors-text-disabledalt: $text-neutralalt;
+  $basecolors-text-highlight: $stroke-highlightalt;
+  $basecolors-text-light: $text-lightalt;
+  $basecolors-text-subdued: $text-darkalt;
+  $basecolors-text-subduedalt: $text-darkalt;
+}