chore: Tokens package updates before release (#412)

Co-authored-by: Tomas Engebretsen <[email protected]>

.eslintignore

@@ -1,4 +1,6 @@
+node_modules
 **/*.d.ts*
 dist/
 coverage/
 storybook-static/
+packages/tokens/brand/**/*

.prettierignore

@@ -1 +1,2 @@
 **/*.module.css
+packages/tokens/brand/**/*

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import type { Preview } from '@storybook/react';
 import '@altinn/figma-design-tokens/dist/tokens.css';
-import '@digdir/design-system-tokens/dist/digdir/tokens.css';
+import '@digdir/design-system-tokens/brand/digdir/tokens.css';
 import './inter.css';
 import customTheme from './customTheme';
 import metadata from '../design-tokens/$metadata.json';

.stylelintignore

@@ -0,0 +1,2 @@
+**/dist/**/*.css
+packages/tokens/brand/**/*

.stylelintrc.js

@@ -5,7 +5,6 @@ module.exports = {
     'stylelint-config-prettier',
   ],
   plugins: ['stylelint-prettier'],
-  ignoreFiles: ['**/dist/**/**.css'],
   rules: {
     'prettier/prettier': true,
     'declaration-block-no-redundant-longhand-properties': null,

.vscode/settings.json

@@ -8,5 +8,8 @@
   "cssvar.files": [
     "node_modules/@altinn/figma-design-tokens/dist/tokens.css",
     "packages/tokens/dist/digdir/tokens.css"
-  ]
+  ],
+  "[ignore]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  }
 }

packages/tokens/README.md

@@ -5,7 +5,7 @@ Transformed design tokens from the Digdir Common Designsystem to work in code.
 ## Installation
 
 ```sh
-npm install @digdir/design-system-tokens
+npm|yarn|pnpm install @digdir/design-system-tokens
 ```
 
 If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
@@ -16,34 +16,57 @@ npm install typescript --save-dev
 
 ## Usage
 
-You can use CSS variables:
+This package provides tokens for each of our supported brands.
+
+Currently supported brands:
+
+- `altinn`
+- `digdir`
+- `tilsynet`
+
+When importing the package make sure to specify which brand tokens you want to import. By default the `digdir` is imported if you don't specify a brand.
+
+```tsx
+import '@digdir/design-system-tokens/brand/<brand>/tokens';
+
+// This imports Digdir brand css tokens
+import '@digdir/design-system-tokens';
+
+//  This imports Altinn css tokens
+import '@digdir/design-system-tokens/brand/altinn/tokens.css';
+```
+
+## File formats
+
+All tokens files have the same name, `tokens`, separated by file extension for desired format.
+
+Currently supported token formats are `css` and `js`.
+
+### CSS
+
+When importing css tokens a set of [css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are added to your `:root {}`.
+You only need to import this once in your application, preferably somewhere in your "root" html.
+
+All variables are prefixed with `fds` as to not polute your namespace.
 
 ```js
-import '@altinn/figma-design-tokens/dist/tokens.css';
+import '@digdir/design-system-tokens/brand/altinn/tokens.css';
 ```
 
 ```css
 div {
-  padding: var(--space-standard);
+  padding: var(--fds-spacing-1);
 }
 ```
 
-Or use the tokens as a module:
+### Javascript
 
-```jsx
-import tokens from '@altinn/figma-design-tokens';
-
-const Foo = () => <div style={{ padding: tokens.SpaceStandard }}>Hi</div>;
-```
+When importing tokens as javascript/typescript you can omit the file extension as your module resolves should be able to pick the correct one. We also provide a `d.ts` file for typescript types.
 
-Or as JSON:
+It's important to know that the values from javascript tokens are css values, as they are intended to be used with either `style` or other CSS-in-JS libraries.
 
 ```jsx
-import tokens from '@altinn/figma-design-tokens/dist/tokens.json';
+import tokens from '@digdir/design-system-tokens/brand/altinn/tokens';
 
-const Foo = () => (
-  <div style={{ padding: tokens.space.standard.value }}>Hi</div>
-);
+const Foo = () => <div style={{ padding: tokens.spacing_1 }}>Hi</div>;
 ```
-
-(Note that in TypeScript you'll want to set `resolveJsonModule: true` for the above to work.)

packages/tokens/brand/altinn/tokens.cjs.js

@@ -0,0 +1,195 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 16 May 2023 07:26:48 GMT
+ */
+
+module.exports = {
+  "brand_primary_100": "#E6EFF8",
+  "brand_primary_200": "#B3D0EA",
+  "brand_primary_300": "#80B1DD",
+  "brand_primary_400": "#66A1D6",
+  "brand_primary_500": "#3381C8",
+  "brand_primary_600": "#1A72C1",
+  "brand_primary_700": "#0062BA",
+  "brand_primary_800": "#004E95",
+  "brand_primary_900": "#00315D",
+  "brand_secondary_100": "#DCD6EA",
+  "brand_secondary_200": "#C5BBDD",
+  "brand_secondary_300": "#A392C8",
+  "brand_secondary_400": "#806AB4",
+  "brand_secondary_500": "#6A52A3",
+  "brand_secondary_600": "#594488",
+  "brand_secondary_700": "#3F3161",
+  "brand_secondary_800": "#352951",
+  "brand_secondary_900": "#231B36",
+  "brand_tertiary_100": "#F9D5DB",
+  "brand_tertiary_200": "#F3ABB6",
+  "brand_tertiary_300": "#EC8292",
+  "brand_tertiary_400": "#E6586D",
+  "brand_tertiary_500": "#E02E49",
+  "brand_tertiary_600": "#B3253A",
+  "brand_tertiary_700": "#861C2C",
+  "brand_tertiary_800": "#5A121D",
+  "brand_tertiary_900": "#480e17",
+  "semantic_background_default": "#ffffff",
+  "semantic_background_subtle": "#f4f5f6",
+  "semantic_surface_neutral_default": "#ffffff",
+  "semantic_surface_neutral_subtle": "#f4f5f6",
+  "semantic_surface_neutral_subtle_hover": "#e9eaec",
+  "semantic_surface_neutral_selected": "#e6eff8",
+  "semantic_surface_neutral_inverted": "#1e2b3c",
+  "semantic_surface_action_subtle": "#e6eff8",
+  "semantic_surface_action_subtle_hover": "#b3d0ea",
+  "semantic_surface_action_default": "#0062ba",
+  "semantic_surface_action_hover": "#004e95",
+  "semantic_surface_action_active": "#00315d",
+  "semantic_surface_action_no_fill": "#ffffff",
+  "semantic_surface_action_no_fill_hover": "#e6eff8",
+  "semantic_surface_action_no_fill_active": "#b3d0ea",
+  "semantic_surface_success_subtle": "#d1f4e1",
+  "semantic_surface_success_subtle_hover": "#8be4b5",
+  "semantic_surface_success_default": "#118849",
+  "semantic_surface_success_hover": "#0c6536",
+  "semantic_surface_success_active": "#084826",
+  "semantic_surface_success_no_fill": "#ffffff",
+  "semantic_surface_success_no_fill_hover": "#d1f4e1",
+  "semantic_surface_success_no_fill_active": "#8be4b5",
+  "semantic_surface_warning_subtle": "#fffbe6",
+  "semantic_surface_warning_subtle_hover": "#fff4b4",
+  "semantic_surface_danger_subtle": "#f9d5db",
+  "semantic_surface_danger_subtle_hover": "#f3abb6",
+  "semantic_surface_danger_default": "#e02e49",
+  "semantic_surface_danger_hover": "#b3253a",
+  "semantic_surface_danger_active": "#861c2c",
+  "semantic_surface_danger_no_fill": "#ffffff",
+  "semantic_surface_danger_no_fill_hover": "#f9d5db",
+  "semantic_surface_danger_no_fill_action": "#f3abb6",
+  "semantic_surface_info_subtle": "#e6eff8",
+  "semantic_surface_info_subtle_hover": "#b3d0ea",
+  "semantic_surface_primary_primary": "#80B1DD",
+  "semantic_surface_primary_primary_hover": "#66A1D6",
+  "semantic_surface_primary_primary_active": "#3381C8",
+  "semantic_surface_secondary_secondary": "#A392C8",
+  "semantic_surface_secondary_secondary_hover": "#806AB4",
+  "semantic_surface_secondary_secondary_active": "#6A52A3",
+  "semantic_surface_tertiary_tertiary": "#EC8292",
+  "semantic_surface_tertiary_tertiary_hover": "#E6586D",
+  "semantic_surface_tertiary_tertiary_active": "#E02E49",
+  "semantic_surface_on_inverted_default": "#ffffff",
+  "semantic_surface_on_inverted_hover": "#ffffffe6",
+  "semantic_surface_on_inverted_active": "#ffffffcc",
+  "semantic_surface_on_inverted_no_fill": "#ffffff00",
+  "semantic_surface_on_inverted_no_fill_hover": "#ffffff1a",
+  "semantic_surface_on_inverted_no_fill_active": "#ffffff33",
+  "semantic_border_info_default": "#004e95",
+  "semantic_border_action_subtle": "#e6eff8",
+  "semantic_border_action_default": "#0062ba",
+  "semantic_border_action_hover": "#004e95",
+  "semantic_border_action_active": "#00315d",
+  "semantic_border_neutral_default": "#68707c",
+  "semantic_border_neutral_subtle": "#d2d5d8",
+  "semantic_border_neutral_strong": "#1e2b3c",
+  "semantic_border_neutral_divider": "#bcbfc5",
+  "semantic_border_success_default": "#118849",
+  "semantic_border_success_hover": "#0c6536",
+  "semantic_border_success_active": "#084826",
+  "semantic_border_warning_default": "#cc7005",
+  "semantic_border_warning_hover": "#995404",
+  "semantic_border_warning_active": "#663802",
+  "semantic_border_danger_default": "#e02e49",
+  "semantic_border_danger_hover": "#b3253a",
+  "semantic_border_danger_active": "#861c2c",
+  "semantic_border_focus_outline": "#ffda06",
+  "semantic_border_focus_boxshadow": "#1e2b3c",
+  "semantic_border_primary_default": "#1A72C1",
+  "semantic_border_primary_hover": "#0062BA",
+  "semantic_border_primary_active": "#004E95",
+  "semantic_border_secondary_default": "#594488",
+  "semantic_border_secondary_hover": "#3F3161",
+  "semantic_border_secondary_active": "#352951",
+  "semantic_border_tertiary_default": "#B3253A",
+  "semantic_border_tertiary_hover": "#861C2C",
+  "semantic_border_tertiary_active": "#5A121D",
+  "semantic_border_action_dark_default": "#00315d",
+  "semantic_border_on_inverted_default": "#ffffff",
+  "semantic_text_success_default": "#0c6536",
+  "semantic_text_success_hover": "#084826",
+  "semantic_text_success_active": "#084826",
+  "semantic_text_success_on_success": "#ffffff",
+  "semantic_text_success_on_success_subtle": "#1e2b3c",
+  "semantic_text_neutral_default": "#1e2b3c",
+  "semantic_text_neutral_subtle": "#68707c",
+  "semantic_text_neutral_on_inverted": "#ffffff",
+  "semantic_text_action_default": "#0062ba",
+  "semantic_text_action_hover": "#004e95",
+  "semantic_text_action_active": "#00315d",
+  "semantic_text_action_on_action": "#ffffff",
+  "semantic_text_warning_default": "#995404",
+  "semantic_text_warning_icon_warning": "#cc7005",
+  "semantic_text_warning_on_warning": "#663802",
+  "semantic_text_danger_default": "#b3253a",
+  "semantic_text_danger_hover": "#861c2c",
+  "semantic_text_danger_active": "#5a121d",
+  "semantic_text_danger_on_danger": "#ffffff",
+  "semantic_text_danger_on_danger_subtle": "#1e2b3c",
+  "semantic_text_visited_default": "#7a1265",
+  "semantic_text_action_dark_default": "#00315d",
+  "typography_heading_xlarge": "500 clamp(1.91rem, calc(1.58vw + 1.53rem), 2.88rem)/1.3 'Inter'",
+  "typography_heading_large": "500 clamp(1.75rem, calc(1.33vw + 1.43rem), 2.56rem)/1.3 'Inter'",
+  "typography_heading_medium": "500 clamp(1.63rem, calc(1.07vw + 1.37rem), 2.28rem)/1.3 'Inter'",
+  "typography_heading_small": "500 clamp(1.50rem, calc(0.87vw + 1.29rem), 2.03rem)/1.3 'Inter'",
+  "typography_heading_xsmall": "500 clamp(1.38rem, calc(0.71vw + 1.21rem), 1.81rem)/1.3 'Inter'",
+  "typography_heading_xxsmall": "500 clamp(1.28rem, calc(0.51vw + 1.16rem), 1.59rem)/1.3 'Inter'",
+  "typography_ingress_large": "400 clamp(1.19rem, calc(0.41vw + 1.09rem), 1.44rem)/1.7 'Inter'",
+  "typography_ingress_medium": "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.6 'Inter'",
+  "typography_paragraph_large": "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.5 'Inter'",
+  "typography_paragraph_medium": "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.5 'Inter'",
+  "typography_paragraph_small": "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.5 'Inter'",
+  "typography_paragraph_xsmall": "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.5 'Inter'",
+  "typography_paragraph_short_large": "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'",
+  "typography_paragraph_short_medium": "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'",
+  "typography_paragraph_short_small": "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'",
+  "typography_paragraph_short_xsmall": "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'",
+  "typography_label_large": "500 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'",
+  "typography_label_medium": "500 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'",
+  "typography_label_small": "500 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'",
+  "typography_label_xsmall": "500 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'",
+  "typography_error_message_medium": "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'",
+  "typography_error_message_small": "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'",
+  "typography_interactive_large": "400 1.5rem/1.3 'Inter'",
+  "typography_interactive_medium": "400 1.125rem/1.3 'Inter'",
+  "typography_interactive_small": "400 1rem/1.3 'Inter'",
+  "opacity_disabled": "30%",
+  "border_radius_interactive": "4px",
+  "spacing_1": "0.25rem",
+  "spacing_2": "0.5rem",
+  "spacing_3": "0.75rem",
+  "spacing_4": "1rem",
+  "spacing_5": "1.25rem",
+  "spacing_6": "1.5rem",
+  "spacing_8": "2rem",
+  "spacing_10": "2.5rem",
+  "spacing_12": "3rem",
+  "spacing_14": "3.5rem",
+  "sizing_1": "0.25rem",
+  "sizing_2": "0.5rem",
+  "sizing_3": "0.75rem",
+  "sizing_4": "1rem",
+  "sizing_5": "1.25rem",
+  "sizing_6": "1.5rem",
+  "sizing_8": "2rem",
+  "sizing_10": "2.5rem",
+  "sizing_12": "3rem",
+  "sizing_14": "3.5rem",
+  "component_mode_height_small": "2.5rem",
+  "component_mode_height_medium": "3rem",
+  "component_mode_height_large": "3.5rem",
+  "border_width_default": "1px",
+  "border_width_active": "2px",
+  "border_width_tab_focus": "2px",
+  "shadow_xsmall": "0 1px 2px 0 #0000001f",
+  "shadow_small": "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a",
+  "shadow_medium": "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a",
+  "shadow_large": "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a",
+  "shadow_xlarge": "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a"
+};