@entur/tokens 3.12.0 → 3.12.1-alpha.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,73 @@
+@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-disabled: var(--shape-neutral);
+  --basecolors-shape-disabledalt: var(--shape-neutralalt);
+  --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-subdued: var(--shape-subdued);
+  --basecolors-shape-subduedalt: var(--shape-subduedalt);
+  --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-disabled: var(--shape-neutralalt);
+  --basecolors-shape-disabledalt: var(--shape-darkalt);
+  --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-subdued: var(--shape-darkalt);
+  --basecolors-shape-subduedalt: var(--shape-darkalt);
+  --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,90 @@
+export declare const base: {
+    light: {
+        baseColors: {
+            frame: {
+                contrast: string;
+                contrastalt: string;
+                default: string;
+                elevated: string;
+                elevatedalt: string;
+                subdued: string;
+                tint: string;
+            };
+            shape: {
+                accent: string;
+                disabled: string;
+                disabledalt: string;
+                highlight: string;
+                light: string;
+                mask: string;
+                maskalt: string;
+                subdued: string;
+                subduedalt: 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;
+                disabled: string;
+                disabledalt: string;
+                highlight: string;
+                light: string;
+                mask: string;
+                maskalt: string;
+                subdued: string;
+                subduedalt: 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,73 @@
+@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-disabled: @shape-neutral;
+  @basecolors-shape-disabledalt: @shape-neutralalt;
+  @basecolors-shape-highlight: @stroke-highlight;
+  @basecolors-shape-light: @shape-light;
+  @basecolors-shape-mask: @shape-light;
+  @basecolors-shape-maskalt: @shape-light;
+  @basecolors-shape-subdued: @shape-subdued;
+  @basecolors-shape-subduedalt: @shape-subduedalt;
+  @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-disabled: @shape-neutralalt;
+  @basecolors-shape-disabledalt: @shape-darkalt;
+  @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-subdued: @shape-darkalt;
+  @basecolors-shape-subduedalt: @shape-darkalt;
+  @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,73 @@
+@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-disabled: $shape-neutral;
+  $basecolors-shape-disabledalt: $shape-neutralalt;
+  $basecolors-shape-highlight: $stroke-highlight;
+  $basecolors-shape-light: $shape-light;
+  $basecolors-shape-mask: $shape-light;
+  $basecolors-shape-maskalt: $shape-light;
+  $basecolors-shape-subdued: $shape-subdued;
+  $basecolors-shape-subduedalt: $shape-subduedalt;
+  $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-disabled: $shape-neutralalt;
+  $basecolors-shape-disabledalt: $shape-darkalt;
+  $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-subdued: $shape-darkalt;
+  $basecolors-shape-subduedalt: $shape-darkalt;
+  $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;
+}