diff --git a/.eslintignore b/.eslintignore index fb768bb3a5..72d9c75bfa 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,6 @@ +node_modules **/*.d.ts* dist/ coverage/ storybook-static/ +packages/tokens/brand/**/* diff --git a/.prettierignore b/.prettierignore index 631bc69f99..dff2a4a905 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ **/*.module.css +packages/tokens/brand/**/* diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 752ee10883..96cbc8129a 100644 --- a/.storybook/preview.tsx +++ b/.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'; diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000..a40be97558 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,2 @@ +**/dist/**/*.css +packages/tokens/brand/**/* diff --git a/.stylelintrc.js b/.stylelintrc.js index 19032896ee..c13982a5b2 100644 --- a/.stylelintrc.js +++ b/.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, diff --git a/.vscode/settings.json b/.vscode/settings.json index 0c810d30de..f168e8a636 100644 --- a/.vscode/settings.json +++ b/.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" + } } diff --git a/packages/tokens/README.md b/packages/tokens/README.md index 55cc5df102..8da5ff0949 100644 --- a/packages/tokens/README.md +++ b/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//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 = () =>
Hi
; -``` +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 = () => ( -
Hi
-); +const Foo = () =>
Hi
; ``` - -(Note that in TypeScript you'll want to set `resolveJsonModule: true` for the above to work.) diff --git a/packages/tokens/brand/altinn/tokens.cjs.js b/packages/tokens/brand/altinn/tokens.cjs.js new file mode 100644 index 0000000000..2879defab4 --- /dev/null +++ b/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" +}; \ No newline at end of file diff --git a/packages/tokens/brand/altinn/tokens.css b/packages/tokens/brand/altinn/tokens.css new file mode 100644 index 0000000000..4de046194a --- /dev/null +++ b/packages/tokens/brand/altinn/tokens.css @@ -0,0 +1,195 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:48 GMT + */ + +:root { + --fds-brand-primary-100: #E6EFF8; + --fds-brand-primary-200: #B3D0EA; + --fds-brand-primary-300: #80B1DD; + --fds-brand-primary-400: #66A1D6; + --fds-brand-primary-500: #3381C8; + --fds-brand-primary-600: #1A72C1; + --fds-brand-primary-700: #0062BA; + --fds-brand-primary-800: #004E95; + --fds-brand-primary-900: #00315D; + --fds-brand-secondary-100: #DCD6EA; + --fds-brand-secondary-200: #C5BBDD; + --fds-brand-secondary-300: #A392C8; + --fds-brand-secondary-400: #806AB4; + --fds-brand-secondary-500: #6A52A3; + --fds-brand-secondary-600: #594488; + --fds-brand-secondary-700: #3F3161; + --fds-brand-secondary-800: #352951; + --fds-brand-secondary-900: #231B36; + --fds-brand-tertiary-100: #F9D5DB; + --fds-brand-tertiary-200: #F3ABB6; + --fds-brand-tertiary-300: #EC8292; + --fds-brand-tertiary-400: #E6586D; + --fds-brand-tertiary-500: #E02E49; + --fds-brand-tertiary-600: #B3253A; + --fds-brand-tertiary-700: #861C2C; + --fds-brand-tertiary-800: #5A121D; + --fds-brand-tertiary-900: #480e17; + --fds-semantic-background-default: #ffffff; + --fds-semantic-background-subtle: #f4f5f6; + --fds-semantic-surface-neutral-default: #ffffff; + --fds-semantic-surface-neutral-subtle: #f4f5f6; + --fds-semantic-surface-neutral-subtle-hover: #e9eaec; + --fds-semantic-surface-neutral-selected: #e6eff8; + --fds-semantic-surface-neutral-inverted: #1e2b3c; + --fds-semantic-surface-action-subtle: #e6eff8; + --fds-semantic-surface-action-subtle-hover: #b3d0ea; + --fds-semantic-surface-action-default: #0062ba; + --fds-semantic-surface-action-hover: #004e95; + --fds-semantic-surface-action-active: #00315d; + --fds-semantic-surface-action-no_fill: #ffffff; + --fds-semantic-surface-action-no_fill-hover: #e6eff8; + --fds-semantic-surface-action-no_fill-active: #b3d0ea; + --fds-semantic-surface-success-subtle: #d1f4e1; + --fds-semantic-surface-success-subtle-hover: #8be4b5; + --fds-semantic-surface-success-default: #118849; + --fds-semantic-surface-success-hover: #0c6536; + --fds-semantic-surface-success-active: #084826; + --fds-semantic-surface-success-no_fill: #ffffff; + --fds-semantic-surface-success-no_fill-hover: #d1f4e1; + --fds-semantic-surface-success-no_fill-active: #8be4b5; + --fds-semantic-surface-warning-subtle: #fffbe6; + --fds-semantic-surface-warning-subtle-hover: #fff4b4; + --fds-semantic-surface-danger-subtle: #f9d5db; + --fds-semantic-surface-danger-subtle-hover: #f3abb6; + --fds-semantic-surface-danger-default: #e02e49; + --fds-semantic-surface-danger-hover: #b3253a; + --fds-semantic-surface-danger-active: #861c2c; + --fds-semantic-surface-danger-no_fill: #ffffff; + --fds-semantic-surface-danger-no_fill-hover: #f9d5db; + --fds-semantic-surface-danger-no_fill-action: #f3abb6; + --fds-semantic-surface-info-subtle: #e6eff8; + --fds-semantic-surface-info-subtle-hover: #b3d0ea; + --fds-semantic-surface-primary-primary: #80B1DD; + --fds-semantic-surface-primary-primary-hover: #66A1D6; + --fds-semantic-surface-primary-primary-active: #3381C8; + --fds-semantic-surface-secondary-secondary: #A392C8; + --fds-semantic-surface-secondary-secondary-hover: #806AB4; + --fds-semantic-surface-secondary-secondary-active: #6A52A3; + --fds-semantic-surface-tertiary-tertiary: #EC8292; + --fds-semantic-surface-tertiary-tertiary-hover: #E6586D; + --fds-semantic-surface-tertiary-tertiary-active: #E02E49; + --fds-semantic-surface-on_inverted-default: #ffffff; + --fds-semantic-surface-on_inverted-hover: #ffffffe6; + --fds-semantic-surface-on_inverted-active: #ffffffcc; + --fds-semantic-surface-on_inverted-no_fill: #ffffff00; + --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a; + --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33; + --fds-semantic-border-info-default: #004e95; + --fds-semantic-border-action-subtle: #e6eff8; + --fds-semantic-border-action-default: #0062ba; + --fds-semantic-border-action-hover: #004e95; + --fds-semantic-border-action-active: #00315d; + --fds-semantic-border-neutral-default: #68707c; + --fds-semantic-border-neutral-subtle: #d2d5d8; + --fds-semantic-border-neutral-strong: #1e2b3c; + --fds-semantic-border-neutral-divider: #bcbfc5; + --fds-semantic-border-success-default: #118849; + --fds-semantic-border-success-hover: #0c6536; + --fds-semantic-border-success-active: #084826; + --fds-semantic-border-warning-default: #cc7005; + --fds-semantic-border-warning-hover: #995404; + --fds-semantic-border-warning-active: #663802; + --fds-semantic-border-danger-default: #e02e49; + --fds-semantic-border-danger-hover: #b3253a; + --fds-semantic-border-danger-active: #861c2c; + --fds-semantic-border-focus-outline: #ffda06; + --fds-semantic-border-focus-boxshadow: #1e2b3c; + --fds-semantic-border-primary-default: #1A72C1; + --fds-semantic-border-primary-hover: #0062BA; + --fds-semantic-border-primary-active: #004E95; + --fds-semantic-border-secondary-default: #594488; + --fds-semantic-border-secondary-hover: #3F3161; + --fds-semantic-border-secondary-active: #352951; + --fds-semantic-border-tertiary-default: #B3253A; + --fds-semantic-border-tertiary-hover: #861C2C; + --fds-semantic-border-tertiary-active: #5A121D; + --fds-semantic-border-action_dark-default: #00315d; + --fds-semantic-border-on_inverted-default: #ffffff; + --fds-semantic-text-success-default: #0c6536; + --fds-semantic-text-success-hover: #084826; + --fds-semantic-text-success-active: #084826; + --fds-semantic-text-success-on_success: #ffffff; + --fds-semantic-text-success-on_success_subtle: #1e2b3c; + --fds-semantic-text-neutral-default: #1e2b3c; + --fds-semantic-text-neutral-subtle: #68707c; + --fds-semantic-text-neutral-on_inverted: #ffffff; + --fds-semantic-text-action-default: #0062ba; + --fds-semantic-text-action-hover: #004e95; + --fds-semantic-text-action-active: #00315d; + --fds-semantic-text-action-on_action: #ffffff; + --fds-semantic-text-warning-default: #995404; + --fds-semantic-text-warning-icon_warning: #cc7005; + --fds-semantic-text-warning-on_warning: #663802; + --fds-semantic-text-danger-default: #b3253a; + --fds-semantic-text-danger-hover: #861c2c; + --fds-semantic-text-danger-active: #5a121d; + --fds-semantic-text-danger-on_danger: #ffffff; + --fds-semantic-text-danger-on_danger_subtle: #1e2b3c; + --fds-semantic-text-visited-default: #7a1265; + --fds-semantic-text-action_dark-default: #00315d; + --fds-typography-heading-xlarge: 500 clamp(1.91rem, calc(1.58vw + 1.53rem), 2.88rem)/1.3 'Inter'; + --fds-typography-heading-large: 500 clamp(1.75rem, calc(1.33vw + 1.43rem), 2.56rem)/1.3 'Inter'; + --fds-typography-heading-medium: 500 clamp(1.63rem, calc(1.07vw + 1.37rem), 2.28rem)/1.3 'Inter'; + --fds-typography-heading-small: 500 clamp(1.50rem, calc(0.87vw + 1.29rem), 2.03rem)/1.3 'Inter'; + --fds-typography-heading-xsmall: 500 clamp(1.38rem, calc(0.71vw + 1.21rem), 1.81rem)/1.3 'Inter'; + --fds-typography-heading-xxsmall: 500 clamp(1.28rem, calc(0.51vw + 1.16rem), 1.59rem)/1.3 'Inter'; + --fds-typography-ingress-large: 400 clamp(1.19rem, calc(0.41vw + 1.09rem), 1.44rem)/1.7 'Inter'; + --fds-typography-ingress-medium: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.6 'Inter'; + --fds-typography-paragraph-large: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.5 'Inter'; + --fds-typography-paragraph-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.5 'Inter'; + --fds-typography-paragraph-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.5 'Inter'; + --fds-typography-paragraph-xsmall: 400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.5 'Inter'; + --fds-typography-paragraph-short-large: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'; + --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-paragraph-short-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-paragraph-short-xsmall: 400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'; + --fds-typography-label-large: 500 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'; + --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-label-small: 500 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-label-xsmall: 500 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'; + --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-error_message-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-interactive-large: 400 1.5rem/1.3 'Inter'; + --fds-typography-interactive-medium: 400 1.125rem/1.3 'Inter'; + --fds-typography-interactive-small: 400 1rem/1.3 'Inter'; + --fds-opacity-disabled: 30%; + --fds-border_radius-interactive: 4px; + --fds-spacing-1: 0.25rem; + --fds-spacing-2: 0.5rem; + --fds-spacing-3: 0.75rem; + --fds-spacing-4: 1rem; + --fds-spacing-5: 1.25rem; + --fds-spacing-6: 1.5rem; + --fds-spacing-8: 2rem; + --fds-spacing-10: 2.5rem; + --fds-spacing-12: 3rem; + --fds-spacing-14: 3.5rem; + --fds-sizing-1: 0.25rem; + --fds-sizing-2: 0.5rem; + --fds-sizing-3: 0.75rem; + --fds-sizing-4: 1rem; + --fds-sizing-5: 1.25rem; + --fds-sizing-6: 1.5rem; + --fds-sizing-8: 2rem; + --fds-sizing-10: 2.5rem; + --fds-sizing-12: 3rem; + --fds-sizing-14: 3.5rem; + --fds-component-mode-height-small: 2.5rem; + --fds-component-mode-height-medium: 3rem; + --fds-component-mode-height-large: 3.5rem; + --fds-border_width-default: 1px; + --fds-border_width-active: 2px; + --fds-border_width-tab_focus: 2px; + --fds-shadow-xsmall: 0 1px 2px 0 #0000001f; + --fds-shadow-small: 0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a; + --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a; + --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a; + --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a; +} diff --git a/packages/tokens/brand/altinn/tokens.d.ts b/packages/tokens/brand/altinn/tokens.d.ts new file mode 100644 index 0000000000..8f2bc91de2 --- /dev/null +++ b/packages/tokens/brand/altinn/tokens.d.ts @@ -0,0 +1,193 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:48 GMT + */ + +export const brand_primary_100 : string; +export const brand_primary_200 : string; +export const brand_primary_300 : string; +export const brand_primary_400 : string; +export const brand_primary_500 : string; +export const brand_primary_600 : string; +export const brand_primary_700 : string; +export const brand_primary_800 : string; +export const brand_primary_900 : string; +export const brand_secondary_100 : string; +export const brand_secondary_200 : string; +export const brand_secondary_300 : string; +export const brand_secondary_400 : string; +export const brand_secondary_500 : string; +export const brand_secondary_600 : string; +export const brand_secondary_700 : string; +export const brand_secondary_800 : string; +export const brand_secondary_900 : string; +export const brand_tertiary_100 : string; +export const brand_tertiary_200 : string; +export const brand_tertiary_300 : string; +export const brand_tertiary_400 : string; +export const brand_tertiary_500 : string; +export const brand_tertiary_600 : string; +export const brand_tertiary_700 : string; +export const brand_tertiary_800 : string; +export const brand_tertiary_900 : string; +export const semantic_background_default : string; +export const semantic_background_subtle : string; +export const semantic_surface_neutral_default : string; +export const semantic_surface_neutral_subtle : string; +export const semantic_surface_neutral_subtle_hover : string; +export const semantic_surface_neutral_selected : string; +export const semantic_surface_neutral_inverted : string; +export const semantic_surface_action_subtle : string; +export const semantic_surface_action_subtle_hover : string; +export const semantic_surface_action_default : string; +export const semantic_surface_action_hover : string; +export const semantic_surface_action_active : string; +export const semantic_surface_action_no_fill : string; +export const semantic_surface_action_no_fill_hover : string; +export const semantic_surface_action_no_fill_active : string; +export const semantic_surface_success_subtle : string; +export const semantic_surface_success_subtle_hover : string; +export const semantic_surface_success_default : string; +export const semantic_surface_success_hover : string; +export const semantic_surface_success_active : string; +export const semantic_surface_success_no_fill : string; +export const semantic_surface_success_no_fill_hover : string; +export const semantic_surface_success_no_fill_active : string; +export const semantic_surface_warning_subtle : string; +export const semantic_surface_warning_subtle_hover : string; +export const semantic_surface_danger_subtle : string; +export const semantic_surface_danger_subtle_hover : string; +export const semantic_surface_danger_default : string; +export const semantic_surface_danger_hover : string; +export const semantic_surface_danger_active : string; +export const semantic_surface_danger_no_fill : string; +export const semantic_surface_danger_no_fill_hover : string; +export const semantic_surface_danger_no_fill_action : string; +export const semantic_surface_info_subtle : string; +export const semantic_surface_info_subtle_hover : string; +export const semantic_surface_primary_primary : string; +export const semantic_surface_primary_primary_hover : string; +export const semantic_surface_primary_primary_active : string; +export const semantic_surface_secondary_secondary : string; +export const semantic_surface_secondary_secondary_hover : string; +export const semantic_surface_secondary_secondary_active : string; +export const semantic_surface_tertiary_tertiary : string; +export const semantic_surface_tertiary_tertiary_hover : string; +export const semantic_surface_tertiary_tertiary_active : string; +export const semantic_surface_on_inverted_default : string; +export const semantic_surface_on_inverted_hover : string; +export const semantic_surface_on_inverted_active : string; +export const semantic_surface_on_inverted_no_fill : string; +export const semantic_surface_on_inverted_no_fill_hover : string; +export const semantic_surface_on_inverted_no_fill_active : string; +export const semantic_border_info_default : string; +export const semantic_border_action_subtle : string; +export const semantic_border_action_default : string; +export const semantic_border_action_hover : string; +export const semantic_border_action_active : string; +export const semantic_border_neutral_default : string; +export const semantic_border_neutral_subtle : string; +export const semantic_border_neutral_strong : string; +export const semantic_border_neutral_divider : string; +export const semantic_border_success_default : string; +export const semantic_border_success_hover : string; +export const semantic_border_success_active : string; +export const semantic_border_warning_default : string; +export const semantic_border_warning_hover : string; +export const semantic_border_warning_active : string; +export const semantic_border_danger_default : string; +export const semantic_border_danger_hover : string; +export const semantic_border_danger_active : string; +export const semantic_border_focus_outline : string; +export const semantic_border_focus_boxshadow : string; +export const semantic_border_primary_default : string; +export const semantic_border_primary_hover : string; +export const semantic_border_primary_active : string; +export const semantic_border_secondary_default : string; +export const semantic_border_secondary_hover : string; +export const semantic_border_secondary_active : string; +export const semantic_border_tertiary_default : string; +export const semantic_border_tertiary_hover : string; +export const semantic_border_tertiary_active : string; +export const semantic_border_action_dark_default : string; +export const semantic_border_on_inverted_default : string; +export const semantic_text_success_default : string; +export const semantic_text_success_hover : string; +export const semantic_text_success_active : string; +export const semantic_text_success_on_success : string; +export const semantic_text_success_on_success_subtle : string; +export const semantic_text_neutral_default : string; +export const semantic_text_neutral_subtle : string; +export const semantic_text_neutral_on_inverted : string; +export const semantic_text_action_default : string; +export const semantic_text_action_hover : string; +export const semantic_text_action_active : string; +export const semantic_text_action_on_action : string; +export const semantic_text_warning_default : string; +export const semantic_text_warning_icon_warning : string; +export const semantic_text_warning_on_warning : string; +export const semantic_text_danger_default : string; +export const semantic_text_danger_hover : string; +export const semantic_text_danger_active : string; +export const semantic_text_danger_on_danger : string; +export const semantic_text_danger_on_danger_subtle : string; +export const semantic_text_visited_default : string; +export const semantic_text_action_dark_default : string; +export const typography_heading_xlarge : string; +export const typography_heading_large : string; +export const typography_heading_medium : string; +export const typography_heading_small : string; +export const typography_heading_xsmall : string; +export const typography_heading_xxsmall : string; +export const typography_ingress_large : string; +export const typography_ingress_medium : string; +export const typography_paragraph_large : string; +export const typography_paragraph_medium : string; +export const typography_paragraph_small : string; +export const typography_paragraph_xsmall : string; +export const typography_paragraph_short_large : string; +export const typography_paragraph_short_medium : string; +export const typography_paragraph_short_small : string; +export const typography_paragraph_short_xsmall : string; +export const typography_label_large : string; +export const typography_label_medium : string; +export const typography_label_small : string; +export const typography_label_xsmall : string; +export const typography_error_message_medium : string; +export const typography_error_message_small : string; +export const typography_interactive_large : string; +export const typography_interactive_medium : string; +export const typography_interactive_small : string; +export const opacity_disabled : string; +export const border_radius_interactive : string; +export const spacing_1 : string; +export const spacing_2 : string; +export const spacing_3 : string; +export const spacing_4 : string; +export const spacing_5 : string; +export const spacing_6 : string; +export const spacing_8 : string; +export const spacing_10 : string; +export const spacing_12 : string; +export const spacing_14 : string; +export const sizing_1 : string; +export const sizing_2 : string; +export const sizing_3 : string; +export const sizing_4 : string; +export const sizing_5 : string; +export const sizing_6 : string; +export const sizing_8 : string; +export const sizing_10 : string; +export const sizing_12 : string; +export const sizing_14 : string; +export const component_mode_height_small : string; +export const component_mode_height_medium : string; +export const component_mode_height_large : string; +export const border_width_default : string; +export const border_width_active : string; +export const border_width_tab_focus : string; +export const shadow_xsmall : string; +export const shadow_small : string; +export const shadow_medium : string; +export const shadow_large : string; +export const shadow_xlarge : string; \ No newline at end of file diff --git a/packages/tokens/brand/altinn/tokens.esm.js b/packages/tokens/brand/altinn/tokens.esm.js new file mode 100644 index 0000000000..2728a8ddf8 --- /dev/null +++ b/packages/tokens/brand/altinn/tokens.esm.js @@ -0,0 +1,193 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:48 GMT + */ + +export const brand_primary_100 = "#E6EFF8"; +export const brand_primary_200 = "#B3D0EA"; +export const brand_primary_300 = "#80B1DD"; +export const brand_primary_400 = "#66A1D6"; +export const brand_primary_500 = "#3381C8"; +export const brand_primary_600 = "#1A72C1"; +export const brand_primary_700 = "#0062BA"; +export const brand_primary_800 = "#004E95"; +export const brand_primary_900 = "#00315D"; +export const brand_secondary_100 = "#DCD6EA"; +export const brand_secondary_200 = "#C5BBDD"; +export const brand_secondary_300 = "#A392C8"; +export const brand_secondary_400 = "#806AB4"; +export const brand_secondary_500 = "#6A52A3"; +export const brand_secondary_600 = "#594488"; +export const brand_secondary_700 = "#3F3161"; +export const brand_secondary_800 = "#352951"; +export const brand_secondary_900 = "#231B36"; +export const brand_tertiary_100 = "#F9D5DB"; +export const brand_tertiary_200 = "#F3ABB6"; +export const brand_tertiary_300 = "#EC8292"; +export const brand_tertiary_400 = "#E6586D"; +export const brand_tertiary_500 = "#E02E49"; +export const brand_tertiary_600 = "#B3253A"; +export const brand_tertiary_700 = "#861C2C"; +export const brand_tertiary_800 = "#5A121D"; +export const brand_tertiary_900 = "#480e17"; +export const semantic_background_default = "#ffffff"; +export const semantic_background_subtle = "#f4f5f6"; +export const semantic_surface_neutral_default = "#ffffff"; +export const semantic_surface_neutral_subtle = "#f4f5f6"; +export const semantic_surface_neutral_subtle_hover = "#e9eaec"; +export const semantic_surface_neutral_selected = "#e6eff8"; +export const semantic_surface_neutral_inverted = "#1e2b3c"; +export const semantic_surface_action_subtle = "#e6eff8"; +export const semantic_surface_action_subtle_hover = "#b3d0ea"; +export const semantic_surface_action_default = "#0062ba"; +export const semantic_surface_action_hover = "#004e95"; +export const semantic_surface_action_active = "#00315d"; +export const semantic_surface_action_no_fill = "#ffffff"; +export const semantic_surface_action_no_fill_hover = "#e6eff8"; +export const semantic_surface_action_no_fill_active = "#b3d0ea"; +export const semantic_surface_success_subtle = "#d1f4e1"; +export const semantic_surface_success_subtle_hover = "#8be4b5"; +export const semantic_surface_success_default = "#118849"; +export const semantic_surface_success_hover = "#0c6536"; +export const semantic_surface_success_active = "#084826"; +export const semantic_surface_success_no_fill = "#ffffff"; +export const semantic_surface_success_no_fill_hover = "#d1f4e1"; +export const semantic_surface_success_no_fill_active = "#8be4b5"; +export const semantic_surface_warning_subtle = "#fffbe6"; +export const semantic_surface_warning_subtle_hover = "#fff4b4"; +export const semantic_surface_danger_subtle = "#f9d5db"; +export const semantic_surface_danger_subtle_hover = "#f3abb6"; +export const semantic_surface_danger_default = "#e02e49"; +export const semantic_surface_danger_hover = "#b3253a"; +export const semantic_surface_danger_active = "#861c2c"; +export const semantic_surface_danger_no_fill = "#ffffff"; +export const semantic_surface_danger_no_fill_hover = "#f9d5db"; +export const semantic_surface_danger_no_fill_action = "#f3abb6"; +export const semantic_surface_info_subtle = "#e6eff8"; +export const semantic_surface_info_subtle_hover = "#b3d0ea"; +export const semantic_surface_primary_primary = "#80B1DD"; +export const semantic_surface_primary_primary_hover = "#66A1D6"; +export const semantic_surface_primary_primary_active = "#3381C8"; +export const semantic_surface_secondary_secondary = "#A392C8"; +export const semantic_surface_secondary_secondary_hover = "#806AB4"; +export const semantic_surface_secondary_secondary_active = "#6A52A3"; +export const semantic_surface_tertiary_tertiary = "#EC8292"; +export const semantic_surface_tertiary_tertiary_hover = "#E6586D"; +export const semantic_surface_tertiary_tertiary_active = "#E02E49"; +export const semantic_surface_on_inverted_default = "#ffffff"; +export const semantic_surface_on_inverted_hover = "#ffffffe6"; +export const semantic_surface_on_inverted_active = "#ffffffcc"; +export const semantic_surface_on_inverted_no_fill = "#ffffff00"; +export const semantic_surface_on_inverted_no_fill_hover = "#ffffff1a"; +export const semantic_surface_on_inverted_no_fill_active = "#ffffff33"; +export const semantic_border_info_default = "#004e95"; +export const semantic_border_action_subtle = "#e6eff8"; +export const semantic_border_action_default = "#0062ba"; +export const semantic_border_action_hover = "#004e95"; +export const semantic_border_action_active = "#00315d"; +export const semantic_border_neutral_default = "#68707c"; +export const semantic_border_neutral_subtle = "#d2d5d8"; +export const semantic_border_neutral_strong = "#1e2b3c"; +export const semantic_border_neutral_divider = "#bcbfc5"; +export const semantic_border_success_default = "#118849"; +export const semantic_border_success_hover = "#0c6536"; +export const semantic_border_success_active = "#084826"; +export const semantic_border_warning_default = "#cc7005"; +export const semantic_border_warning_hover = "#995404"; +export const semantic_border_warning_active = "#663802"; +export const semantic_border_danger_default = "#e02e49"; +export const semantic_border_danger_hover = "#b3253a"; +export const semantic_border_danger_active = "#861c2c"; +export const semantic_border_focus_outline = "#ffda06"; +export const semantic_border_focus_boxshadow = "#1e2b3c"; +export const semantic_border_primary_default = "#1A72C1"; +export const semantic_border_primary_hover = "#0062BA"; +export const semantic_border_primary_active = "#004E95"; +export const semantic_border_secondary_default = "#594488"; +export const semantic_border_secondary_hover = "#3F3161"; +export const semantic_border_secondary_active = "#352951"; +export const semantic_border_tertiary_default = "#B3253A"; +export const semantic_border_tertiary_hover = "#861C2C"; +export const semantic_border_tertiary_active = "#5A121D"; +export const semantic_border_action_dark_default = "#00315d"; +export const semantic_border_on_inverted_default = "#ffffff"; +export const semantic_text_success_default = "#0c6536"; +export const semantic_text_success_hover = "#084826"; +export const semantic_text_success_active = "#084826"; +export const semantic_text_success_on_success = "#ffffff"; +export const semantic_text_success_on_success_subtle = "#1e2b3c"; +export const semantic_text_neutral_default = "#1e2b3c"; +export const semantic_text_neutral_subtle = "#68707c"; +export const semantic_text_neutral_on_inverted = "#ffffff"; +export const semantic_text_action_default = "#0062ba"; +export const semantic_text_action_hover = "#004e95"; +export const semantic_text_action_active = "#00315d"; +export const semantic_text_action_on_action = "#ffffff"; +export const semantic_text_warning_default = "#995404"; +export const semantic_text_warning_icon_warning = "#cc7005"; +export const semantic_text_warning_on_warning = "#663802"; +export const semantic_text_danger_default = "#b3253a"; +export const semantic_text_danger_hover = "#861c2c"; +export const semantic_text_danger_active = "#5a121d"; +export const semantic_text_danger_on_danger = "#ffffff"; +export const semantic_text_danger_on_danger_subtle = "#1e2b3c"; +export const semantic_text_visited_default = "#7a1265"; +export const semantic_text_action_dark_default = "#00315d"; +export const typography_heading_xlarge = "500 clamp(1.91rem, calc(1.58vw + 1.53rem), 2.88rem)/1.3 'Inter'"; +export const typography_heading_large = "500 clamp(1.75rem, calc(1.33vw + 1.43rem), 2.56rem)/1.3 'Inter'"; +export const typography_heading_medium = "500 clamp(1.63rem, calc(1.07vw + 1.37rem), 2.28rem)/1.3 'Inter'"; +export const typography_heading_small = "500 clamp(1.50rem, calc(0.87vw + 1.29rem), 2.03rem)/1.3 'Inter'"; +export const typography_heading_xsmall = "500 clamp(1.38rem, calc(0.71vw + 1.21rem), 1.81rem)/1.3 'Inter'"; +export const typography_heading_xxsmall = "500 clamp(1.28rem, calc(0.51vw + 1.16rem), 1.59rem)/1.3 'Inter'"; +export const typography_ingress_large = "400 clamp(1.19rem, calc(0.41vw + 1.09rem), 1.44rem)/1.7 'Inter'"; +export const typography_ingress_medium = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.6 'Inter'"; +export const typography_paragraph_large = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.5 'Inter'"; +export const typography_paragraph_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.5 'Inter'"; +export const typography_paragraph_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.5 'Inter'"; +export const typography_paragraph_xsmall = "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.5 'Inter'"; +export const typography_paragraph_short_large = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'"; +export const typography_paragraph_short_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_paragraph_short_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_paragraph_short_xsmall = "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'"; +export const typography_label_large = "500 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'"; +export const typography_label_medium = "500 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_label_small = "500 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_label_xsmall = "500 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'"; +export const typography_error_message_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_error_message_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_interactive_large = "400 1.5rem/1.3 'Inter'"; +export const typography_interactive_medium = "400 1.125rem/1.3 'Inter'"; +export const typography_interactive_small = "400 1rem/1.3 'Inter'"; +export const opacity_disabled = "30%"; +export const border_radius_interactive = "4px"; +export const spacing_1 = "0.25rem"; +export const spacing_2 = "0.5rem"; +export const spacing_3 = "0.75rem"; +export const spacing_4 = "1rem"; +export const spacing_5 = "1.25rem"; +export const spacing_6 = "1.5rem"; +export const spacing_8 = "2rem"; +export const spacing_10 = "2.5rem"; +export const spacing_12 = "3rem"; +export const spacing_14 = "3.5rem"; +export const sizing_1 = "0.25rem"; +export const sizing_2 = "0.5rem"; +export const sizing_3 = "0.75rem"; +export const sizing_4 = "1rem"; +export const sizing_5 = "1.25rem"; +export const sizing_6 = "1.5rem"; +export const sizing_8 = "2rem"; +export const sizing_10 = "2.5rem"; +export const sizing_12 = "3rem"; +export const sizing_14 = "3.5rem"; +export const component_mode_height_small = "2.5rem"; +export const component_mode_height_medium = "3rem"; +export const component_mode_height_large = "3.5rem"; +export const border_width_default = "1px"; +export const border_width_active = "2px"; +export const border_width_tab_focus = "2px"; +export const shadow_xsmall = "0 1px 2px 0 #0000001f"; +export const shadow_small = "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a"; +export const shadow_medium = "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a"; +export const shadow_large = "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a"; +export const shadow_xlarge = "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a"; \ No newline at end of file diff --git a/packages/tokens/brand/digdir/tokens.cjs.js b/packages/tokens/brand/digdir/tokens.cjs.js new file mode 100644 index 0000000000..77fa4c4918 --- /dev/null +++ b/packages/tokens/brand/digdir/tokens.cjs.js @@ -0,0 +1,192 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:47 GMT + */ + +module.exports = { + "brand_primary_100": "#feefef", + "brand_primary_200": "#fddfe0", + "brand_primary_300": "#fbbfc1", + "brand_primary_400": "#f89fa1", + "brand_primary_500": "#f67f82", + "brand_primary_600": "#f45f63", + "brand_primary_700": "#dc5659", + "brand_primary_800": "#c34c4f", + "brand_secondary_100": "#fcf7e9", + "brand_secondary_200": "#faeec2", + "brand_secondary_300": "#f5dda6", + "brand_secondary_400": "#efcc79", + "brand_secondary_500": "#eabb4d", + "brand_secondary_600": "#e5aa20", + "brand_secondary_700": "#ce991d", + "brand_secondary_800": "#b7881a", + "brand_tertiary_100": "#e9f5ff", + "brand_tertiary_200": "#d2eafd", + "brand_tertiary_300": "#a5d6fb", + "brand_tertiary_400": "#78c1f9", + "brand_tertiary_500": "#4badf7", + "brand_tertiary_600": "#1e98f5", + "brand_tertiary_700": "#1b88dd", + "brand_tertiary_800": "#156aac", + "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": "#fbbfc1", + "semantic_surface_primary_primary_hover": "#f89fa1", + "semantic_surface_primary_primary_active": "#f67f82", + "semantic_surface_secondary_secondary": "#f5dda6", + "semantic_surface_secondary_secondary_hover": "#efcc79", + "semantic_surface_secondary_secondary_active": "#eabb4d", + "semantic_surface_tertiary_tertiary": "#a5d6fb", + "semantic_surface_tertiary_tertiary_hover": "#78c1f9", + "semantic_surface_tertiary_tertiary_active": "#4badf7", + "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": "#f45f63", + "semantic_border_primary_hover": "#dc5659", + "semantic_border_primary_active": "#c34c4f", + "semantic_border_secondary_default": "#e5aa20", + "semantic_border_secondary_hover": "#ce991d", + "semantic_border_secondary_active": "#b7881a", + "semantic_border_tertiary_default": "#1e98f5", + "semantic_border_tertiary_hover": "#1b88dd", + "semantic_border_tertiary_active": "#156aac", + "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" +}; \ No newline at end of file diff --git a/packages/tokens/brand/digdir/tokens.css b/packages/tokens/brand/digdir/tokens.css new file mode 100644 index 0000000000..9e5616a575 --- /dev/null +++ b/packages/tokens/brand/digdir/tokens.css @@ -0,0 +1,192 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:47 GMT + */ + +:root { + --fds-brand-primary-100: #feefef; + --fds-brand-primary-200: #fddfe0; + --fds-brand-primary-300: #fbbfc1; + --fds-brand-primary-400: #f89fa1; + --fds-brand-primary-500: #f67f82; + --fds-brand-primary-600: #f45f63; + --fds-brand-primary-700: #dc5659; + --fds-brand-primary-800: #c34c4f; + --fds-brand-secondary-100: #fcf7e9; + --fds-brand-secondary-200: #faeec2; + --fds-brand-secondary-300: #f5dda6; + --fds-brand-secondary-400: #efcc79; + --fds-brand-secondary-500: #eabb4d; + --fds-brand-secondary-600: #e5aa20; + --fds-brand-secondary-700: #ce991d; + --fds-brand-secondary-800: #b7881a; + --fds-brand-tertiary-100: #e9f5ff; + --fds-brand-tertiary-200: #d2eafd; + --fds-brand-tertiary-300: #a5d6fb; + --fds-brand-tertiary-400: #78c1f9; + --fds-brand-tertiary-500: #4badf7; + --fds-brand-tertiary-600: #1e98f5; + --fds-brand-tertiary-700: #1b88dd; + --fds-brand-tertiary-800: #156aac; + --fds-semantic-background-default: #ffffff; + --fds-semantic-background-subtle: #f4f5f6; + --fds-semantic-surface-neutral-default: #ffffff; + --fds-semantic-surface-neutral-subtle: #f4f5f6; + --fds-semantic-surface-neutral-subtle-hover: #e9eaec; + --fds-semantic-surface-neutral-selected: #e6eff8; + --fds-semantic-surface-neutral-inverted: #1e2b3c; + --fds-semantic-surface-action-subtle: #e6eff8; + --fds-semantic-surface-action-subtle-hover: #b3d0ea; + --fds-semantic-surface-action-default: #0062ba; + --fds-semantic-surface-action-hover: #004e95; + --fds-semantic-surface-action-active: #00315d; + --fds-semantic-surface-action-no_fill: #ffffff; + --fds-semantic-surface-action-no_fill-hover: #e6eff8; + --fds-semantic-surface-action-no_fill-active: #b3d0ea; + --fds-semantic-surface-success-subtle: #d1f4e1; + --fds-semantic-surface-success-subtle-hover: #8be4b5; + --fds-semantic-surface-success-default: #118849; + --fds-semantic-surface-success-hover: #0c6536; + --fds-semantic-surface-success-active: #084826; + --fds-semantic-surface-success-no_fill: #ffffff; + --fds-semantic-surface-success-no_fill-hover: #d1f4e1; + --fds-semantic-surface-success-no_fill-active: #8be4b5; + --fds-semantic-surface-warning-subtle: #fffbe6; + --fds-semantic-surface-warning-subtle-hover: #fff4b4; + --fds-semantic-surface-danger-subtle: #f9d5db; + --fds-semantic-surface-danger-subtle-hover: #f3abb6; + --fds-semantic-surface-danger-default: #e02e49; + --fds-semantic-surface-danger-hover: #b3253a; + --fds-semantic-surface-danger-active: #861c2c; + --fds-semantic-surface-danger-no_fill: #ffffff; + --fds-semantic-surface-danger-no_fill-hover: #f9d5db; + --fds-semantic-surface-danger-no_fill-action: #f3abb6; + --fds-semantic-surface-info-subtle: #e6eff8; + --fds-semantic-surface-info-subtle-hover: #b3d0ea; + --fds-semantic-surface-primary-primary: #fbbfc1; + --fds-semantic-surface-primary-primary-hover: #f89fa1; + --fds-semantic-surface-primary-primary-active: #f67f82; + --fds-semantic-surface-secondary-secondary: #f5dda6; + --fds-semantic-surface-secondary-secondary-hover: #efcc79; + --fds-semantic-surface-secondary-secondary-active: #eabb4d; + --fds-semantic-surface-tertiary-tertiary: #a5d6fb; + --fds-semantic-surface-tertiary-tertiary-hover: #78c1f9; + --fds-semantic-surface-tertiary-tertiary-active: #4badf7; + --fds-semantic-surface-on_inverted-default: #ffffff; + --fds-semantic-surface-on_inverted-hover: #ffffffe6; + --fds-semantic-surface-on_inverted-active: #ffffffcc; + --fds-semantic-surface-on_inverted-no_fill: #ffffff00; + --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a; + --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33; + --fds-semantic-border-info-default: #004e95; + --fds-semantic-border-action-subtle: #e6eff8; + --fds-semantic-border-action-default: #0062ba; + --fds-semantic-border-action-hover: #004e95; + --fds-semantic-border-action-active: #00315d; + --fds-semantic-border-neutral-default: #68707c; + --fds-semantic-border-neutral-subtle: #d2d5d8; + --fds-semantic-border-neutral-strong: #1e2b3c; + --fds-semantic-border-neutral-divider: #bcbfc5; + --fds-semantic-border-success-default: #118849; + --fds-semantic-border-success-hover: #0c6536; + --fds-semantic-border-success-active: #084826; + --fds-semantic-border-warning-default: #cc7005; + --fds-semantic-border-warning-hover: #995404; + --fds-semantic-border-warning-active: #663802; + --fds-semantic-border-danger-default: #e02e49; + --fds-semantic-border-danger-hover: #b3253a; + --fds-semantic-border-danger-active: #861c2c; + --fds-semantic-border-focus-outline: #ffda06; + --fds-semantic-border-focus-boxshadow: #1e2b3c; + --fds-semantic-border-primary-default: #f45f63; + --fds-semantic-border-primary-hover: #dc5659; + --fds-semantic-border-primary-active: #c34c4f; + --fds-semantic-border-secondary-default: #e5aa20; + --fds-semantic-border-secondary-hover: #ce991d; + --fds-semantic-border-secondary-active: #b7881a; + --fds-semantic-border-tertiary-default: #1e98f5; + --fds-semantic-border-tertiary-hover: #1b88dd; + --fds-semantic-border-tertiary-active: #156aac; + --fds-semantic-border-action_dark-default: #00315d; + --fds-semantic-border-on_inverted-default: #ffffff; + --fds-semantic-text-success-default: #0c6536; + --fds-semantic-text-success-hover: #084826; + --fds-semantic-text-success-active: #084826; + --fds-semantic-text-success-on_success: #ffffff; + --fds-semantic-text-success-on_success_subtle: #1e2b3c; + --fds-semantic-text-neutral-default: #1e2b3c; + --fds-semantic-text-neutral-subtle: #68707c; + --fds-semantic-text-neutral-on_inverted: #ffffff; + --fds-semantic-text-action-default: #0062ba; + --fds-semantic-text-action-hover: #004e95; + --fds-semantic-text-action-active: #00315d; + --fds-semantic-text-action-on_action: #ffffff; + --fds-semantic-text-warning-default: #995404; + --fds-semantic-text-warning-icon_warning: #cc7005; + --fds-semantic-text-warning-on_warning: #663802; + --fds-semantic-text-danger-default: #b3253a; + --fds-semantic-text-danger-hover: #861c2c; + --fds-semantic-text-danger-active: #5a121d; + --fds-semantic-text-danger-on_danger: #ffffff; + --fds-semantic-text-danger-on_danger_subtle: #1e2b3c; + --fds-semantic-text-visited-default: #7a1265; + --fds-semantic-text-action_dark-default: #00315d; + --fds-typography-heading-xlarge: 500 clamp(1.91rem, calc(1.58vw + 1.53rem), 2.88rem)/1.3 'Inter'; + --fds-typography-heading-large: 500 clamp(1.75rem, calc(1.33vw + 1.43rem), 2.56rem)/1.3 'Inter'; + --fds-typography-heading-medium: 500 clamp(1.63rem, calc(1.07vw + 1.37rem), 2.28rem)/1.3 'Inter'; + --fds-typography-heading-small: 500 clamp(1.50rem, calc(0.87vw + 1.29rem), 2.03rem)/1.3 'Inter'; + --fds-typography-heading-xsmall: 500 clamp(1.38rem, calc(0.71vw + 1.21rem), 1.81rem)/1.3 'Inter'; + --fds-typography-heading-xxsmall: 500 clamp(1.28rem, calc(0.51vw + 1.16rem), 1.59rem)/1.3 'Inter'; + --fds-typography-ingress-large: 400 clamp(1.19rem, calc(0.41vw + 1.09rem), 1.44rem)/1.7 'Inter'; + --fds-typography-ingress-medium: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.6 'Inter'; + --fds-typography-paragraph-large: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.5 'Inter'; + --fds-typography-paragraph-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.5 'Inter'; + --fds-typography-paragraph-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.5 'Inter'; + --fds-typography-paragraph-xsmall: 400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.5 'Inter'; + --fds-typography-paragraph-short-large: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'; + --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-paragraph-short-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-paragraph-short-xsmall: 400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'; + --fds-typography-label-large: 500 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'; + --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-label-small: 500 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-label-xsmall: 500 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'; + --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-error_message-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-interactive-large: 400 1.5rem/1.3 'Inter'; + --fds-typography-interactive-medium: 400 1.125rem/1.3 'Inter'; + --fds-typography-interactive-small: 400 1rem/1.3 'Inter'; + --fds-opacity-disabled: 30%; + --fds-border_radius-interactive: 4px; + --fds-spacing-1: 0.25rem; + --fds-spacing-2: 0.5rem; + --fds-spacing-3: 0.75rem; + --fds-spacing-4: 1rem; + --fds-spacing-5: 1.25rem; + --fds-spacing-6: 1.5rem; + --fds-spacing-8: 2rem; + --fds-spacing-10: 2.5rem; + --fds-spacing-12: 3rem; + --fds-spacing-14: 3.5rem; + --fds-sizing-1: 0.25rem; + --fds-sizing-2: 0.5rem; + --fds-sizing-3: 0.75rem; + --fds-sizing-4: 1rem; + --fds-sizing-5: 1.25rem; + --fds-sizing-6: 1.5rem; + --fds-sizing-8: 2rem; + --fds-sizing-10: 2.5rem; + --fds-sizing-12: 3rem; + --fds-sizing-14: 3.5rem; + --fds-component-mode-height-small: 2.5rem; + --fds-component-mode-height-medium: 3rem; + --fds-component-mode-height-large: 3.5rem; + --fds-border_width-default: 1px; + --fds-border_width-active: 2px; + --fds-border_width-tab_focus: 2px; + --fds-shadow-xsmall: 0 1px 2px 0 #0000001f; + --fds-shadow-small: 0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a; + --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a; + --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a; + --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a; +} diff --git a/packages/tokens/brand/digdir/tokens.d.ts b/packages/tokens/brand/digdir/tokens.d.ts new file mode 100644 index 0000000000..db92dccdf2 --- /dev/null +++ b/packages/tokens/brand/digdir/tokens.d.ts @@ -0,0 +1,190 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:47 GMT + */ + +export const brand_primary_100 : string; +export const brand_primary_200 : string; +export const brand_primary_300 : string; +export const brand_primary_400 : string; +export const brand_primary_500 : string; +export const brand_primary_600 : string; +export const brand_primary_700 : string; +export const brand_primary_800 : string; +export const brand_secondary_100 : string; +export const brand_secondary_200 : string; +export const brand_secondary_300 : string; +export const brand_secondary_400 : string; +export const brand_secondary_500 : string; +export const brand_secondary_600 : string; +export const brand_secondary_700 : string; +export const brand_secondary_800 : string; +export const brand_tertiary_100 : string; +export const brand_tertiary_200 : string; +export const brand_tertiary_300 : string; +export const brand_tertiary_400 : string; +export const brand_tertiary_500 : string; +export const brand_tertiary_600 : string; +export const brand_tertiary_700 : string; +export const brand_tertiary_800 : string; +export const semantic_background_default : string; +export const semantic_background_subtle : string; +export const semantic_surface_neutral_default : string; +export const semantic_surface_neutral_subtle : string; +export const semantic_surface_neutral_subtle_hover : string; +export const semantic_surface_neutral_selected : string; +export const semantic_surface_neutral_inverted : string; +export const semantic_surface_action_subtle : string; +export const semantic_surface_action_subtle_hover : string; +export const semantic_surface_action_default : string; +export const semantic_surface_action_hover : string; +export const semantic_surface_action_active : string; +export const semantic_surface_action_no_fill : string; +export const semantic_surface_action_no_fill_hover : string; +export const semantic_surface_action_no_fill_active : string; +export const semantic_surface_success_subtle : string; +export const semantic_surface_success_subtle_hover : string; +export const semantic_surface_success_default : string; +export const semantic_surface_success_hover : string; +export const semantic_surface_success_active : string; +export const semantic_surface_success_no_fill : string; +export const semantic_surface_success_no_fill_hover : string; +export const semantic_surface_success_no_fill_active : string; +export const semantic_surface_warning_subtle : string; +export const semantic_surface_warning_subtle_hover : string; +export const semantic_surface_danger_subtle : string; +export const semantic_surface_danger_subtle_hover : string; +export const semantic_surface_danger_default : string; +export const semantic_surface_danger_hover : string; +export const semantic_surface_danger_active : string; +export const semantic_surface_danger_no_fill : string; +export const semantic_surface_danger_no_fill_hover : string; +export const semantic_surface_danger_no_fill_action : string; +export const semantic_surface_info_subtle : string; +export const semantic_surface_info_subtle_hover : string; +export const semantic_surface_primary_primary : string; +export const semantic_surface_primary_primary_hover : string; +export const semantic_surface_primary_primary_active : string; +export const semantic_surface_secondary_secondary : string; +export const semantic_surface_secondary_secondary_hover : string; +export const semantic_surface_secondary_secondary_active : string; +export const semantic_surface_tertiary_tertiary : string; +export const semantic_surface_tertiary_tertiary_hover : string; +export const semantic_surface_tertiary_tertiary_active : string; +export const semantic_surface_on_inverted_default : string; +export const semantic_surface_on_inverted_hover : string; +export const semantic_surface_on_inverted_active : string; +export const semantic_surface_on_inverted_no_fill : string; +export const semantic_surface_on_inverted_no_fill_hover : string; +export const semantic_surface_on_inverted_no_fill_active : string; +export const semantic_border_info_default : string; +export const semantic_border_action_subtle : string; +export const semantic_border_action_default : string; +export const semantic_border_action_hover : string; +export const semantic_border_action_active : string; +export const semantic_border_neutral_default : string; +export const semantic_border_neutral_subtle : string; +export const semantic_border_neutral_strong : string; +export const semantic_border_neutral_divider : string; +export const semantic_border_success_default : string; +export const semantic_border_success_hover : string; +export const semantic_border_success_active : string; +export const semantic_border_warning_default : string; +export const semantic_border_warning_hover : string; +export const semantic_border_warning_active : string; +export const semantic_border_danger_default : string; +export const semantic_border_danger_hover : string; +export const semantic_border_danger_active : string; +export const semantic_border_focus_outline : string; +export const semantic_border_focus_boxshadow : string; +export const semantic_border_primary_default : string; +export const semantic_border_primary_hover : string; +export const semantic_border_primary_active : string; +export const semantic_border_secondary_default : string; +export const semantic_border_secondary_hover : string; +export const semantic_border_secondary_active : string; +export const semantic_border_tertiary_default : string; +export const semantic_border_tertiary_hover : string; +export const semantic_border_tertiary_active : string; +export const semantic_border_action_dark_default : string; +export const semantic_border_on_inverted_default : string; +export const semantic_text_success_default : string; +export const semantic_text_success_hover : string; +export const semantic_text_success_active : string; +export const semantic_text_success_on_success : string; +export const semantic_text_success_on_success_subtle : string; +export const semantic_text_neutral_default : string; +export const semantic_text_neutral_subtle : string; +export const semantic_text_neutral_on_inverted : string; +export const semantic_text_action_default : string; +export const semantic_text_action_hover : string; +export const semantic_text_action_active : string; +export const semantic_text_action_on_action : string; +export const semantic_text_warning_default : string; +export const semantic_text_warning_icon_warning : string; +export const semantic_text_warning_on_warning : string; +export const semantic_text_danger_default : string; +export const semantic_text_danger_hover : string; +export const semantic_text_danger_active : string; +export const semantic_text_danger_on_danger : string; +export const semantic_text_danger_on_danger_subtle : string; +export const semantic_text_visited_default : string; +export const semantic_text_action_dark_default : string; +export const typography_heading_xlarge : string; +export const typography_heading_large : string; +export const typography_heading_medium : string; +export const typography_heading_small : string; +export const typography_heading_xsmall : string; +export const typography_heading_xxsmall : string; +export const typography_ingress_large : string; +export const typography_ingress_medium : string; +export const typography_paragraph_large : string; +export const typography_paragraph_medium : string; +export const typography_paragraph_small : string; +export const typography_paragraph_xsmall : string; +export const typography_paragraph_short_large : string; +export const typography_paragraph_short_medium : string; +export const typography_paragraph_short_small : string; +export const typography_paragraph_short_xsmall : string; +export const typography_label_large : string; +export const typography_label_medium : string; +export const typography_label_small : string; +export const typography_label_xsmall : string; +export const typography_error_message_medium : string; +export const typography_error_message_small : string; +export const typography_interactive_large : string; +export const typography_interactive_medium : string; +export const typography_interactive_small : string; +export const opacity_disabled : string; +export const border_radius_interactive : string; +export const spacing_1 : string; +export const spacing_2 : string; +export const spacing_3 : string; +export const spacing_4 : string; +export const spacing_5 : string; +export const spacing_6 : string; +export const spacing_8 : string; +export const spacing_10 : string; +export const spacing_12 : string; +export const spacing_14 : string; +export const sizing_1 : string; +export const sizing_2 : string; +export const sizing_3 : string; +export const sizing_4 : string; +export const sizing_5 : string; +export const sizing_6 : string; +export const sizing_8 : string; +export const sizing_10 : string; +export const sizing_12 : string; +export const sizing_14 : string; +export const component_mode_height_small : string; +export const component_mode_height_medium : string; +export const component_mode_height_large : string; +export const border_width_default : string; +export const border_width_active : string; +export const border_width_tab_focus : string; +export const shadow_xsmall : string; +export const shadow_small : string; +export const shadow_medium : string; +export const shadow_large : string; +export const shadow_xlarge : string; \ No newline at end of file diff --git a/packages/tokens/brand/digdir/tokens.esm.js b/packages/tokens/brand/digdir/tokens.esm.js new file mode 100644 index 0000000000..4d17a9688c --- /dev/null +++ b/packages/tokens/brand/digdir/tokens.esm.js @@ -0,0 +1,190 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:47 GMT + */ + +export const brand_primary_100 = "#feefef"; +export const brand_primary_200 = "#fddfe0"; +export const brand_primary_300 = "#fbbfc1"; +export const brand_primary_400 = "#f89fa1"; +export const brand_primary_500 = "#f67f82"; +export const brand_primary_600 = "#f45f63"; +export const brand_primary_700 = "#dc5659"; +export const brand_primary_800 = "#c34c4f"; +export const brand_secondary_100 = "#fcf7e9"; +export const brand_secondary_200 = "#faeec2"; +export const brand_secondary_300 = "#f5dda6"; +export const brand_secondary_400 = "#efcc79"; +export const brand_secondary_500 = "#eabb4d"; +export const brand_secondary_600 = "#e5aa20"; +export const brand_secondary_700 = "#ce991d"; +export const brand_secondary_800 = "#b7881a"; +export const brand_tertiary_100 = "#e9f5ff"; +export const brand_tertiary_200 = "#d2eafd"; +export const brand_tertiary_300 = "#a5d6fb"; +export const brand_tertiary_400 = "#78c1f9"; +export const brand_tertiary_500 = "#4badf7"; +export const brand_tertiary_600 = "#1e98f5"; +export const brand_tertiary_700 = "#1b88dd"; +export const brand_tertiary_800 = "#156aac"; +export const semantic_background_default = "#ffffff"; +export const semantic_background_subtle = "#f4f5f6"; +export const semantic_surface_neutral_default = "#ffffff"; +export const semantic_surface_neutral_subtle = "#f4f5f6"; +export const semantic_surface_neutral_subtle_hover = "#e9eaec"; +export const semantic_surface_neutral_selected = "#e6eff8"; +export const semantic_surface_neutral_inverted = "#1e2b3c"; +export const semantic_surface_action_subtle = "#e6eff8"; +export const semantic_surface_action_subtle_hover = "#b3d0ea"; +export const semantic_surface_action_default = "#0062ba"; +export const semantic_surface_action_hover = "#004e95"; +export const semantic_surface_action_active = "#00315d"; +export const semantic_surface_action_no_fill = "#ffffff"; +export const semantic_surface_action_no_fill_hover = "#e6eff8"; +export const semantic_surface_action_no_fill_active = "#b3d0ea"; +export const semantic_surface_success_subtle = "#d1f4e1"; +export const semantic_surface_success_subtle_hover = "#8be4b5"; +export const semantic_surface_success_default = "#118849"; +export const semantic_surface_success_hover = "#0c6536"; +export const semantic_surface_success_active = "#084826"; +export const semantic_surface_success_no_fill = "#ffffff"; +export const semantic_surface_success_no_fill_hover = "#d1f4e1"; +export const semantic_surface_success_no_fill_active = "#8be4b5"; +export const semantic_surface_warning_subtle = "#fffbe6"; +export const semantic_surface_warning_subtle_hover = "#fff4b4"; +export const semantic_surface_danger_subtle = "#f9d5db"; +export const semantic_surface_danger_subtle_hover = "#f3abb6"; +export const semantic_surface_danger_default = "#e02e49"; +export const semantic_surface_danger_hover = "#b3253a"; +export const semantic_surface_danger_active = "#861c2c"; +export const semantic_surface_danger_no_fill = "#ffffff"; +export const semantic_surface_danger_no_fill_hover = "#f9d5db"; +export const semantic_surface_danger_no_fill_action = "#f3abb6"; +export const semantic_surface_info_subtle = "#e6eff8"; +export const semantic_surface_info_subtle_hover = "#b3d0ea"; +export const semantic_surface_primary_primary = "#fbbfc1"; +export const semantic_surface_primary_primary_hover = "#f89fa1"; +export const semantic_surface_primary_primary_active = "#f67f82"; +export const semantic_surface_secondary_secondary = "#f5dda6"; +export const semantic_surface_secondary_secondary_hover = "#efcc79"; +export const semantic_surface_secondary_secondary_active = "#eabb4d"; +export const semantic_surface_tertiary_tertiary = "#a5d6fb"; +export const semantic_surface_tertiary_tertiary_hover = "#78c1f9"; +export const semantic_surface_tertiary_tertiary_active = "#4badf7"; +export const semantic_surface_on_inverted_default = "#ffffff"; +export const semantic_surface_on_inverted_hover = "#ffffffe6"; +export const semantic_surface_on_inverted_active = "#ffffffcc"; +export const semantic_surface_on_inverted_no_fill = "#ffffff00"; +export const semantic_surface_on_inverted_no_fill_hover = "#ffffff1a"; +export const semantic_surface_on_inverted_no_fill_active = "#ffffff33"; +export const semantic_border_info_default = "#004e95"; +export const semantic_border_action_subtle = "#e6eff8"; +export const semantic_border_action_default = "#0062ba"; +export const semantic_border_action_hover = "#004e95"; +export const semantic_border_action_active = "#00315d"; +export const semantic_border_neutral_default = "#68707c"; +export const semantic_border_neutral_subtle = "#d2d5d8"; +export const semantic_border_neutral_strong = "#1e2b3c"; +export const semantic_border_neutral_divider = "#bcbfc5"; +export const semantic_border_success_default = "#118849"; +export const semantic_border_success_hover = "#0c6536"; +export const semantic_border_success_active = "#084826"; +export const semantic_border_warning_default = "#cc7005"; +export const semantic_border_warning_hover = "#995404"; +export const semantic_border_warning_active = "#663802"; +export const semantic_border_danger_default = "#e02e49"; +export const semantic_border_danger_hover = "#b3253a"; +export const semantic_border_danger_active = "#861c2c"; +export const semantic_border_focus_outline = "#ffda06"; +export const semantic_border_focus_boxshadow = "#1e2b3c"; +export const semantic_border_primary_default = "#f45f63"; +export const semantic_border_primary_hover = "#dc5659"; +export const semantic_border_primary_active = "#c34c4f"; +export const semantic_border_secondary_default = "#e5aa20"; +export const semantic_border_secondary_hover = "#ce991d"; +export const semantic_border_secondary_active = "#b7881a"; +export const semantic_border_tertiary_default = "#1e98f5"; +export const semantic_border_tertiary_hover = "#1b88dd"; +export const semantic_border_tertiary_active = "#156aac"; +export const semantic_border_action_dark_default = "#00315d"; +export const semantic_border_on_inverted_default = "#ffffff"; +export const semantic_text_success_default = "#0c6536"; +export const semantic_text_success_hover = "#084826"; +export const semantic_text_success_active = "#084826"; +export const semantic_text_success_on_success = "#ffffff"; +export const semantic_text_success_on_success_subtle = "#1e2b3c"; +export const semantic_text_neutral_default = "#1e2b3c"; +export const semantic_text_neutral_subtle = "#68707c"; +export const semantic_text_neutral_on_inverted = "#ffffff"; +export const semantic_text_action_default = "#0062ba"; +export const semantic_text_action_hover = "#004e95"; +export const semantic_text_action_active = "#00315d"; +export const semantic_text_action_on_action = "#ffffff"; +export const semantic_text_warning_default = "#995404"; +export const semantic_text_warning_icon_warning = "#cc7005"; +export const semantic_text_warning_on_warning = "#663802"; +export const semantic_text_danger_default = "#b3253a"; +export const semantic_text_danger_hover = "#861c2c"; +export const semantic_text_danger_active = "#5a121d"; +export const semantic_text_danger_on_danger = "#ffffff"; +export const semantic_text_danger_on_danger_subtle = "#1e2b3c"; +export const semantic_text_visited_default = "#7a1265"; +export const semantic_text_action_dark_default = "#00315d"; +export const typography_heading_xlarge = "500 clamp(1.91rem, calc(1.58vw + 1.53rem), 2.88rem)/1.3 'Inter'"; +export const typography_heading_large = "500 clamp(1.75rem, calc(1.33vw + 1.43rem), 2.56rem)/1.3 'Inter'"; +export const typography_heading_medium = "500 clamp(1.63rem, calc(1.07vw + 1.37rem), 2.28rem)/1.3 'Inter'"; +export const typography_heading_small = "500 clamp(1.50rem, calc(0.87vw + 1.29rem), 2.03rem)/1.3 'Inter'"; +export const typography_heading_xsmall = "500 clamp(1.38rem, calc(0.71vw + 1.21rem), 1.81rem)/1.3 'Inter'"; +export const typography_heading_xxsmall = "500 clamp(1.28rem, calc(0.51vw + 1.16rem), 1.59rem)/1.3 'Inter'"; +export const typography_ingress_large = "400 clamp(1.19rem, calc(0.41vw + 1.09rem), 1.44rem)/1.7 'Inter'"; +export const typography_ingress_medium = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.6 'Inter'"; +export const typography_paragraph_large = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.5 'Inter'"; +export const typography_paragraph_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.5 'Inter'"; +export const typography_paragraph_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.5 'Inter'"; +export const typography_paragraph_xsmall = "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.5 'Inter'"; +export const typography_paragraph_short_large = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'"; +export const typography_paragraph_short_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_paragraph_short_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_paragraph_short_xsmall = "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'"; +export const typography_label_large = "500 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'"; +export const typography_label_medium = "500 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_label_small = "500 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_label_xsmall = "500 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'"; +export const typography_error_message_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_error_message_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_interactive_large = "400 1.5rem/1.3 'Inter'"; +export const typography_interactive_medium = "400 1.125rem/1.3 'Inter'"; +export const typography_interactive_small = "400 1rem/1.3 'Inter'"; +export const opacity_disabled = "30%"; +export const border_radius_interactive = "4px"; +export const spacing_1 = "0.25rem"; +export const spacing_2 = "0.5rem"; +export const spacing_3 = "0.75rem"; +export const spacing_4 = "1rem"; +export const spacing_5 = "1.25rem"; +export const spacing_6 = "1.5rem"; +export const spacing_8 = "2rem"; +export const spacing_10 = "2.5rem"; +export const spacing_12 = "3rem"; +export const spacing_14 = "3.5rem"; +export const sizing_1 = "0.25rem"; +export const sizing_2 = "0.5rem"; +export const sizing_3 = "0.75rem"; +export const sizing_4 = "1rem"; +export const sizing_5 = "1.25rem"; +export const sizing_6 = "1.5rem"; +export const sizing_8 = "2rem"; +export const sizing_10 = "2.5rem"; +export const sizing_12 = "3rem"; +export const sizing_14 = "3.5rem"; +export const component_mode_height_small = "2.5rem"; +export const component_mode_height_medium = "3rem"; +export const component_mode_height_large = "3.5rem"; +export const border_width_default = "1px"; +export const border_width_active = "2px"; +export const border_width_tab_focus = "2px"; +export const shadow_xsmall = "0 1px 2px 0 #0000001f"; +export const shadow_small = "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a"; +export const shadow_medium = "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a"; +export const shadow_large = "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a"; +export const shadow_xlarge = "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a"; \ No newline at end of file diff --git a/packages/tokens/brand/tilsynet/tokens.cjs.js b/packages/tokens/brand/tilsynet/tokens.cjs.js new file mode 100644 index 0000000000..daa43b149c --- /dev/null +++ b/packages/tokens/brand/tilsynet/tokens.cjs.js @@ -0,0 +1,192 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:48 GMT + */ + +module.exports = { + "brand_primary_100": "#efeffb", + "brand_primary_200": "#dedff6", + "brand_primary_300": "#bec0ed", + "brand_primary_400": "#9da0e4", + "brand_primary_500": "#7d81db", + "brand_primary_600": "#5c61d2", + "brand_primary_700": "#3339c6", + "brand_primary_800": "#0008b8", + "brand_secondary_100": "#ffeee1", + "brand_secondary_200": "#ffdcc3", + "brand_secondary_300": "#fdd4b7", + "brand_secondary_400": "#ffc296", + "brand_secondary_500": "#ffb178", + "brand_secondary_600": "#ffa869", + "brand_secondary_700": "#e6975f", + "brand_secondary_800": "#b3764a", + "brand_tertiary_100": "#eff6f4", + "brand_tertiary_200": "#deece9", + "brand_tertiary_300": "#bedad2", + "brand_tertiary_400": "#9dc7bc", + "brand_tertiary_500": "#7db5a5", + "brand_tertiary_600": "#5ca28f", + "brand_tertiary_700": "#4c907e", + "brand_tertiary_800": "#407d6d", + "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": "#bec0ed", + "semantic_surface_primary_primary_hover": "#9da0e4", + "semantic_surface_primary_primary_active": "#7d81db", + "semantic_surface_secondary_secondary": "#fdd4b7", + "semantic_surface_secondary_secondary_hover": "#ffc296", + "semantic_surface_secondary_secondary_active": "#ffb178", + "semantic_surface_tertiary_tertiary": "#bedad2", + "semantic_surface_tertiary_tertiary_hover": "#9dc7bc", + "semantic_surface_tertiary_tertiary_active": "#7db5a5", + "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": "#5c61d2", + "semantic_border_primary_hover": "#3339c6", + "semantic_border_primary_active": "#0008b8", + "semantic_border_secondary_default": "#ffa869", + "semantic_border_secondary_hover": "#e6975f", + "semantic_border_secondary_active": "#b3764a", + "semantic_border_tertiary_default": "#5ca28f", + "semantic_border_tertiary_hover": "#4c907e", + "semantic_border_tertiary_active": "#407d6d", + "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" +}; \ No newline at end of file diff --git a/packages/tokens/brand/tilsynet/tokens.css b/packages/tokens/brand/tilsynet/tokens.css new file mode 100644 index 0000000000..60f0cef4f3 --- /dev/null +++ b/packages/tokens/brand/tilsynet/tokens.css @@ -0,0 +1,192 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:48 GMT + */ + +:root { + --fds-brand-primary-100: #efeffb; + --fds-brand-primary-200: #dedff6; + --fds-brand-primary-300: #bec0ed; + --fds-brand-primary-400: #9da0e4; + --fds-brand-primary-500: #7d81db; + --fds-brand-primary-600: #5c61d2; + --fds-brand-primary-700: #3339c6; + --fds-brand-primary-800: #0008b8; + --fds-brand-secondary-100: #ffeee1; + --fds-brand-secondary-200: #ffdcc3; + --fds-brand-secondary-300: #fdd4b7; + --fds-brand-secondary-400: #ffc296; + --fds-brand-secondary-500: #ffb178; + --fds-brand-secondary-600: #ffa869; + --fds-brand-secondary-700: #e6975f; + --fds-brand-secondary-800: #b3764a; + --fds-brand-tertiary-100: #eff6f4; + --fds-brand-tertiary-200: #deece9; + --fds-brand-tertiary-300: #bedad2; + --fds-brand-tertiary-400: #9dc7bc; + --fds-brand-tertiary-500: #7db5a5; + --fds-brand-tertiary-600: #5ca28f; + --fds-brand-tertiary-700: #4c907e; + --fds-brand-tertiary-800: #407d6d; + --fds-semantic-background-default: #ffffff; + --fds-semantic-background-subtle: #f4f5f6; + --fds-semantic-surface-neutral-default: #ffffff; + --fds-semantic-surface-neutral-subtle: #f4f5f6; + --fds-semantic-surface-neutral-subtle-hover: #e9eaec; + --fds-semantic-surface-neutral-selected: #e6eff8; + --fds-semantic-surface-neutral-inverted: #1e2b3c; + --fds-semantic-surface-action-subtle: #e6eff8; + --fds-semantic-surface-action-subtle-hover: #b3d0ea; + --fds-semantic-surface-action-default: #0062ba; + --fds-semantic-surface-action-hover: #004e95; + --fds-semantic-surface-action-active: #00315d; + --fds-semantic-surface-action-no_fill: #ffffff; + --fds-semantic-surface-action-no_fill-hover: #e6eff8; + --fds-semantic-surface-action-no_fill-active: #b3d0ea; + --fds-semantic-surface-success-subtle: #d1f4e1; + --fds-semantic-surface-success-subtle-hover: #8be4b5; + --fds-semantic-surface-success-default: #118849; + --fds-semantic-surface-success-hover: #0c6536; + --fds-semantic-surface-success-active: #084826; + --fds-semantic-surface-success-no_fill: #ffffff; + --fds-semantic-surface-success-no_fill-hover: #d1f4e1; + --fds-semantic-surface-success-no_fill-active: #8be4b5; + --fds-semantic-surface-warning-subtle: #fffbe6; + --fds-semantic-surface-warning-subtle-hover: #fff4b4; + --fds-semantic-surface-danger-subtle: #f9d5db; + --fds-semantic-surface-danger-subtle-hover: #f3abb6; + --fds-semantic-surface-danger-default: #e02e49; + --fds-semantic-surface-danger-hover: #b3253a; + --fds-semantic-surface-danger-active: #861c2c; + --fds-semantic-surface-danger-no_fill: #ffffff; + --fds-semantic-surface-danger-no_fill-hover: #f9d5db; + --fds-semantic-surface-danger-no_fill-action: #f3abb6; + --fds-semantic-surface-info-subtle: #e6eff8; + --fds-semantic-surface-info-subtle-hover: #b3d0ea; + --fds-semantic-surface-primary-primary: #bec0ed; + --fds-semantic-surface-primary-primary-hover: #9da0e4; + --fds-semantic-surface-primary-primary-active: #7d81db; + --fds-semantic-surface-secondary-secondary: #fdd4b7; + --fds-semantic-surface-secondary-secondary-hover: #ffc296; + --fds-semantic-surface-secondary-secondary-active: #ffb178; + --fds-semantic-surface-tertiary-tertiary: #bedad2; + --fds-semantic-surface-tertiary-tertiary-hover: #9dc7bc; + --fds-semantic-surface-tertiary-tertiary-active: #7db5a5; + --fds-semantic-surface-on_inverted-default: #ffffff; + --fds-semantic-surface-on_inverted-hover: #ffffffe6; + --fds-semantic-surface-on_inverted-active: #ffffffcc; + --fds-semantic-surface-on_inverted-no_fill: #ffffff00; + --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a; + --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33; + --fds-semantic-border-info-default: #004e95; + --fds-semantic-border-action-subtle: #e6eff8; + --fds-semantic-border-action-default: #0062ba; + --fds-semantic-border-action-hover: #004e95; + --fds-semantic-border-action-active: #00315d; + --fds-semantic-border-neutral-default: #68707c; + --fds-semantic-border-neutral-subtle: #d2d5d8; + --fds-semantic-border-neutral-strong: #1e2b3c; + --fds-semantic-border-neutral-divider: #bcbfc5; + --fds-semantic-border-success-default: #118849; + --fds-semantic-border-success-hover: #0c6536; + --fds-semantic-border-success-active: #084826; + --fds-semantic-border-warning-default: #cc7005; + --fds-semantic-border-warning-hover: #995404; + --fds-semantic-border-warning-active: #663802; + --fds-semantic-border-danger-default: #e02e49; + --fds-semantic-border-danger-hover: #b3253a; + --fds-semantic-border-danger-active: #861c2c; + --fds-semantic-border-focus-outline: #ffda06; + --fds-semantic-border-focus-boxshadow: #1e2b3c; + --fds-semantic-border-primary-default: #5c61d2; + --fds-semantic-border-primary-hover: #3339c6; + --fds-semantic-border-primary-active: #0008b8; + --fds-semantic-border-secondary-default: #ffa869; + --fds-semantic-border-secondary-hover: #e6975f; + --fds-semantic-border-secondary-active: #b3764a; + --fds-semantic-border-tertiary-default: #5ca28f; + --fds-semantic-border-tertiary-hover: #4c907e; + --fds-semantic-border-tertiary-active: #407d6d; + --fds-semantic-border-action_dark-default: #00315d; + --fds-semantic-border-on_inverted-default: #ffffff; + --fds-semantic-text-success-default: #0c6536; + --fds-semantic-text-success-hover: #084826; + --fds-semantic-text-success-active: #084826; + --fds-semantic-text-success-on_success: #ffffff; + --fds-semantic-text-success-on_success_subtle: #1e2b3c; + --fds-semantic-text-neutral-default: #1e2b3c; + --fds-semantic-text-neutral-subtle: #68707c; + --fds-semantic-text-neutral-on_inverted: #ffffff; + --fds-semantic-text-action-default: #0062ba; + --fds-semantic-text-action-hover: #004e95; + --fds-semantic-text-action-active: #00315d; + --fds-semantic-text-action-on_action: #ffffff; + --fds-semantic-text-warning-default: #995404; + --fds-semantic-text-warning-icon_warning: #cc7005; + --fds-semantic-text-warning-on_warning: #663802; + --fds-semantic-text-danger-default: #b3253a; + --fds-semantic-text-danger-hover: #861c2c; + --fds-semantic-text-danger-active: #5a121d; + --fds-semantic-text-danger-on_danger: #ffffff; + --fds-semantic-text-danger-on_danger_subtle: #1e2b3c; + --fds-semantic-text-visited-default: #7a1265; + --fds-semantic-text-action_dark-default: #00315d; + --fds-typography-heading-xlarge: 500 clamp(1.91rem, calc(1.58vw + 1.53rem), 2.88rem)/1.3 'Inter'; + --fds-typography-heading-large: 500 clamp(1.75rem, calc(1.33vw + 1.43rem), 2.56rem)/1.3 'Inter'; + --fds-typography-heading-medium: 500 clamp(1.63rem, calc(1.07vw + 1.37rem), 2.28rem)/1.3 'Inter'; + --fds-typography-heading-small: 500 clamp(1.50rem, calc(0.87vw + 1.29rem), 2.03rem)/1.3 'Inter'; + --fds-typography-heading-xsmall: 500 clamp(1.38rem, calc(0.71vw + 1.21rem), 1.81rem)/1.3 'Inter'; + --fds-typography-heading-xxsmall: 500 clamp(1.28rem, calc(0.51vw + 1.16rem), 1.59rem)/1.3 'Inter'; + --fds-typography-ingress-large: 400 clamp(1.19rem, calc(0.41vw + 1.09rem), 1.44rem)/1.7 'Inter'; + --fds-typography-ingress-medium: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.6 'Inter'; + --fds-typography-paragraph-large: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.5 'Inter'; + --fds-typography-paragraph-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.5 'Inter'; + --fds-typography-paragraph-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.5 'Inter'; + --fds-typography-paragraph-xsmall: 400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.5 'Inter'; + --fds-typography-paragraph-short-large: 400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'; + --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-paragraph-short-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-paragraph-short-xsmall: 400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'; + --fds-typography-label-large: 500 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'; + --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-label-small: 500 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-label-xsmall: 500 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'; + --fds-typography-error_message-medium: 400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'; + --fds-typography-error_message-small: 400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'; + --fds-typography-interactive-large: 400 1.5rem/1.3 'Inter'; + --fds-typography-interactive-medium: 400 1.125rem/1.3 'Inter'; + --fds-typography-interactive-small: 400 1rem/1.3 'Inter'; + --fds-opacity-disabled: 30%; + --fds-border_radius-interactive: 4px; + --fds-spacing-1: 0.25rem; + --fds-spacing-2: 0.5rem; + --fds-spacing-3: 0.75rem; + --fds-spacing-4: 1rem; + --fds-spacing-5: 1.25rem; + --fds-spacing-6: 1.5rem; + --fds-spacing-8: 2rem; + --fds-spacing-10: 2.5rem; + --fds-spacing-12: 3rem; + --fds-spacing-14: 3.5rem; + --fds-sizing-1: 0.25rem; + --fds-sizing-2: 0.5rem; + --fds-sizing-3: 0.75rem; + --fds-sizing-4: 1rem; + --fds-sizing-5: 1.25rem; + --fds-sizing-6: 1.5rem; + --fds-sizing-8: 2rem; + --fds-sizing-10: 2.5rem; + --fds-sizing-12: 3rem; + --fds-sizing-14: 3.5rem; + --fds-component-mode-height-small: 2.5rem; + --fds-component-mode-height-medium: 3rem; + --fds-component-mode-height-large: 3.5rem; + --fds-border_width-default: 1px; + --fds-border_width-active: 2px; + --fds-border_width-tab_focus: 2px; + --fds-shadow-xsmall: 0 1px 2px 0 #0000001f; + --fds-shadow-small: 0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a; + --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a; + --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a; + --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a; +} diff --git a/packages/tokens/brand/tilsynet/tokens.d.ts b/packages/tokens/brand/tilsynet/tokens.d.ts new file mode 100644 index 0000000000..45fa61e8b1 --- /dev/null +++ b/packages/tokens/brand/tilsynet/tokens.d.ts @@ -0,0 +1,190 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:48 GMT + */ + +export const brand_primary_100 : string; +export const brand_primary_200 : string; +export const brand_primary_300 : string; +export const brand_primary_400 : string; +export const brand_primary_500 : string; +export const brand_primary_600 : string; +export const brand_primary_700 : string; +export const brand_primary_800 : string; +export const brand_secondary_100 : string; +export const brand_secondary_200 : string; +export const brand_secondary_300 : string; +export const brand_secondary_400 : string; +export const brand_secondary_500 : string; +export const brand_secondary_600 : string; +export const brand_secondary_700 : string; +export const brand_secondary_800 : string; +export const brand_tertiary_100 : string; +export const brand_tertiary_200 : string; +export const brand_tertiary_300 : string; +export const brand_tertiary_400 : string; +export const brand_tertiary_500 : string; +export const brand_tertiary_600 : string; +export const brand_tertiary_700 : string; +export const brand_tertiary_800 : string; +export const semantic_background_default : string; +export const semantic_background_subtle : string; +export const semantic_surface_neutral_default : string; +export const semantic_surface_neutral_subtle : string; +export const semantic_surface_neutral_subtle_hover : string; +export const semantic_surface_neutral_selected : string; +export const semantic_surface_neutral_inverted : string; +export const semantic_surface_action_subtle : string; +export const semantic_surface_action_subtle_hover : string; +export const semantic_surface_action_default : string; +export const semantic_surface_action_hover : string; +export const semantic_surface_action_active : string; +export const semantic_surface_action_no_fill : string; +export const semantic_surface_action_no_fill_hover : string; +export const semantic_surface_action_no_fill_active : string; +export const semantic_surface_success_subtle : string; +export const semantic_surface_success_subtle_hover : string; +export const semantic_surface_success_default : string; +export const semantic_surface_success_hover : string; +export const semantic_surface_success_active : string; +export const semantic_surface_success_no_fill : string; +export const semantic_surface_success_no_fill_hover : string; +export const semantic_surface_success_no_fill_active : string; +export const semantic_surface_warning_subtle : string; +export const semantic_surface_warning_subtle_hover : string; +export const semantic_surface_danger_subtle : string; +export const semantic_surface_danger_subtle_hover : string; +export const semantic_surface_danger_default : string; +export const semantic_surface_danger_hover : string; +export const semantic_surface_danger_active : string; +export const semantic_surface_danger_no_fill : string; +export const semantic_surface_danger_no_fill_hover : string; +export const semantic_surface_danger_no_fill_action : string; +export const semantic_surface_info_subtle : string; +export const semantic_surface_info_subtle_hover : string; +export const semantic_surface_primary_primary : string; +export const semantic_surface_primary_primary_hover : string; +export const semantic_surface_primary_primary_active : string; +export const semantic_surface_secondary_secondary : string; +export const semantic_surface_secondary_secondary_hover : string; +export const semantic_surface_secondary_secondary_active : string; +export const semantic_surface_tertiary_tertiary : string; +export const semantic_surface_tertiary_tertiary_hover : string; +export const semantic_surface_tertiary_tertiary_active : string; +export const semantic_surface_on_inverted_default : string; +export const semantic_surface_on_inverted_hover : string; +export const semantic_surface_on_inverted_active : string; +export const semantic_surface_on_inverted_no_fill : string; +export const semantic_surface_on_inverted_no_fill_hover : string; +export const semantic_surface_on_inverted_no_fill_active : string; +export const semantic_border_info_default : string; +export const semantic_border_action_subtle : string; +export const semantic_border_action_default : string; +export const semantic_border_action_hover : string; +export const semantic_border_action_active : string; +export const semantic_border_neutral_default : string; +export const semantic_border_neutral_subtle : string; +export const semantic_border_neutral_strong : string; +export const semantic_border_neutral_divider : string; +export const semantic_border_success_default : string; +export const semantic_border_success_hover : string; +export const semantic_border_success_active : string; +export const semantic_border_warning_default : string; +export const semantic_border_warning_hover : string; +export const semantic_border_warning_active : string; +export const semantic_border_danger_default : string; +export const semantic_border_danger_hover : string; +export const semantic_border_danger_active : string; +export const semantic_border_focus_outline : string; +export const semantic_border_focus_boxshadow : string; +export const semantic_border_primary_default : string; +export const semantic_border_primary_hover : string; +export const semantic_border_primary_active : string; +export const semantic_border_secondary_default : string; +export const semantic_border_secondary_hover : string; +export const semantic_border_secondary_active : string; +export const semantic_border_tertiary_default : string; +export const semantic_border_tertiary_hover : string; +export const semantic_border_tertiary_active : string; +export const semantic_border_action_dark_default : string; +export const semantic_border_on_inverted_default : string; +export const semantic_text_success_default : string; +export const semantic_text_success_hover : string; +export const semantic_text_success_active : string; +export const semantic_text_success_on_success : string; +export const semantic_text_success_on_success_subtle : string; +export const semantic_text_neutral_default : string; +export const semantic_text_neutral_subtle : string; +export const semantic_text_neutral_on_inverted : string; +export const semantic_text_action_default : string; +export const semantic_text_action_hover : string; +export const semantic_text_action_active : string; +export const semantic_text_action_on_action : string; +export const semantic_text_warning_default : string; +export const semantic_text_warning_icon_warning : string; +export const semantic_text_warning_on_warning : string; +export const semantic_text_danger_default : string; +export const semantic_text_danger_hover : string; +export const semantic_text_danger_active : string; +export const semantic_text_danger_on_danger : string; +export const semantic_text_danger_on_danger_subtle : string; +export const semantic_text_visited_default : string; +export const semantic_text_action_dark_default : string; +export const typography_heading_xlarge : string; +export const typography_heading_large : string; +export const typography_heading_medium : string; +export const typography_heading_small : string; +export const typography_heading_xsmall : string; +export const typography_heading_xxsmall : string; +export const typography_ingress_large : string; +export const typography_ingress_medium : string; +export const typography_paragraph_large : string; +export const typography_paragraph_medium : string; +export const typography_paragraph_small : string; +export const typography_paragraph_xsmall : string; +export const typography_paragraph_short_large : string; +export const typography_paragraph_short_medium : string; +export const typography_paragraph_short_small : string; +export const typography_paragraph_short_xsmall : string; +export const typography_label_large : string; +export const typography_label_medium : string; +export const typography_label_small : string; +export const typography_label_xsmall : string; +export const typography_error_message_medium : string; +export const typography_error_message_small : string; +export const typography_interactive_large : string; +export const typography_interactive_medium : string; +export const typography_interactive_small : string; +export const opacity_disabled : string; +export const border_radius_interactive : string; +export const spacing_1 : string; +export const spacing_2 : string; +export const spacing_3 : string; +export const spacing_4 : string; +export const spacing_5 : string; +export const spacing_6 : string; +export const spacing_8 : string; +export const spacing_10 : string; +export const spacing_12 : string; +export const spacing_14 : string; +export const sizing_1 : string; +export const sizing_2 : string; +export const sizing_3 : string; +export const sizing_4 : string; +export const sizing_5 : string; +export const sizing_6 : string; +export const sizing_8 : string; +export const sizing_10 : string; +export const sizing_12 : string; +export const sizing_14 : string; +export const component_mode_height_small : string; +export const component_mode_height_medium : string; +export const component_mode_height_large : string; +export const border_width_default : string; +export const border_width_active : string; +export const border_width_tab_focus : string; +export const shadow_xsmall : string; +export const shadow_small : string; +export const shadow_medium : string; +export const shadow_large : string; +export const shadow_xlarge : string; \ No newline at end of file diff --git a/packages/tokens/brand/tilsynet/tokens.esm.js b/packages/tokens/brand/tilsynet/tokens.esm.js new file mode 100644 index 0000000000..8e8fd7ca37 --- /dev/null +++ b/packages/tokens/brand/tilsynet/tokens.esm.js @@ -0,0 +1,190 @@ +/** + * Do not edit directly + * Generated on Tue, 16 May 2023 07:26:48 GMT + */ + +export const brand_primary_100 = "#efeffb"; +export const brand_primary_200 = "#dedff6"; +export const brand_primary_300 = "#bec0ed"; +export const brand_primary_400 = "#9da0e4"; +export const brand_primary_500 = "#7d81db"; +export const brand_primary_600 = "#5c61d2"; +export const brand_primary_700 = "#3339c6"; +export const brand_primary_800 = "#0008b8"; +export const brand_secondary_100 = "#ffeee1"; +export const brand_secondary_200 = "#ffdcc3"; +export const brand_secondary_300 = "#fdd4b7"; +export const brand_secondary_400 = "#ffc296"; +export const brand_secondary_500 = "#ffb178"; +export const brand_secondary_600 = "#ffa869"; +export const brand_secondary_700 = "#e6975f"; +export const brand_secondary_800 = "#b3764a"; +export const brand_tertiary_100 = "#eff6f4"; +export const brand_tertiary_200 = "#deece9"; +export const brand_tertiary_300 = "#bedad2"; +export const brand_tertiary_400 = "#9dc7bc"; +export const brand_tertiary_500 = "#7db5a5"; +export const brand_tertiary_600 = "#5ca28f"; +export const brand_tertiary_700 = "#4c907e"; +export const brand_tertiary_800 = "#407d6d"; +export const semantic_background_default = "#ffffff"; +export const semantic_background_subtle = "#f4f5f6"; +export const semantic_surface_neutral_default = "#ffffff"; +export const semantic_surface_neutral_subtle = "#f4f5f6"; +export const semantic_surface_neutral_subtle_hover = "#e9eaec"; +export const semantic_surface_neutral_selected = "#e6eff8"; +export const semantic_surface_neutral_inverted = "#1e2b3c"; +export const semantic_surface_action_subtle = "#e6eff8"; +export const semantic_surface_action_subtle_hover = "#b3d0ea"; +export const semantic_surface_action_default = "#0062ba"; +export const semantic_surface_action_hover = "#004e95"; +export const semantic_surface_action_active = "#00315d"; +export const semantic_surface_action_no_fill = "#ffffff"; +export const semantic_surface_action_no_fill_hover = "#e6eff8"; +export const semantic_surface_action_no_fill_active = "#b3d0ea"; +export const semantic_surface_success_subtle = "#d1f4e1"; +export const semantic_surface_success_subtle_hover = "#8be4b5"; +export const semantic_surface_success_default = "#118849"; +export const semantic_surface_success_hover = "#0c6536"; +export const semantic_surface_success_active = "#084826"; +export const semantic_surface_success_no_fill = "#ffffff"; +export const semantic_surface_success_no_fill_hover = "#d1f4e1"; +export const semantic_surface_success_no_fill_active = "#8be4b5"; +export const semantic_surface_warning_subtle = "#fffbe6"; +export const semantic_surface_warning_subtle_hover = "#fff4b4"; +export const semantic_surface_danger_subtle = "#f9d5db"; +export const semantic_surface_danger_subtle_hover = "#f3abb6"; +export const semantic_surface_danger_default = "#e02e49"; +export const semantic_surface_danger_hover = "#b3253a"; +export const semantic_surface_danger_active = "#861c2c"; +export const semantic_surface_danger_no_fill = "#ffffff"; +export const semantic_surface_danger_no_fill_hover = "#f9d5db"; +export const semantic_surface_danger_no_fill_action = "#f3abb6"; +export const semantic_surface_info_subtle = "#e6eff8"; +export const semantic_surface_info_subtle_hover = "#b3d0ea"; +export const semantic_surface_primary_primary = "#bec0ed"; +export const semantic_surface_primary_primary_hover = "#9da0e4"; +export const semantic_surface_primary_primary_active = "#7d81db"; +export const semantic_surface_secondary_secondary = "#fdd4b7"; +export const semantic_surface_secondary_secondary_hover = "#ffc296"; +export const semantic_surface_secondary_secondary_active = "#ffb178"; +export const semantic_surface_tertiary_tertiary = "#bedad2"; +export const semantic_surface_tertiary_tertiary_hover = "#9dc7bc"; +export const semantic_surface_tertiary_tertiary_active = "#7db5a5"; +export const semantic_surface_on_inverted_default = "#ffffff"; +export const semantic_surface_on_inverted_hover = "#ffffffe6"; +export const semantic_surface_on_inverted_active = "#ffffffcc"; +export const semantic_surface_on_inverted_no_fill = "#ffffff00"; +export const semantic_surface_on_inverted_no_fill_hover = "#ffffff1a"; +export const semantic_surface_on_inverted_no_fill_active = "#ffffff33"; +export const semantic_border_info_default = "#004e95"; +export const semantic_border_action_subtle = "#e6eff8"; +export const semantic_border_action_default = "#0062ba"; +export const semantic_border_action_hover = "#004e95"; +export const semantic_border_action_active = "#00315d"; +export const semantic_border_neutral_default = "#68707c"; +export const semantic_border_neutral_subtle = "#d2d5d8"; +export const semantic_border_neutral_strong = "#1e2b3c"; +export const semantic_border_neutral_divider = "#bcbfc5"; +export const semantic_border_success_default = "#118849"; +export const semantic_border_success_hover = "#0c6536"; +export const semantic_border_success_active = "#084826"; +export const semantic_border_warning_default = "#cc7005"; +export const semantic_border_warning_hover = "#995404"; +export const semantic_border_warning_active = "#663802"; +export const semantic_border_danger_default = "#e02e49"; +export const semantic_border_danger_hover = "#b3253a"; +export const semantic_border_danger_active = "#861c2c"; +export const semantic_border_focus_outline = "#ffda06"; +export const semantic_border_focus_boxshadow = "#1e2b3c"; +export const semantic_border_primary_default = "#5c61d2"; +export const semantic_border_primary_hover = "#3339c6"; +export const semantic_border_primary_active = "#0008b8"; +export const semantic_border_secondary_default = "#ffa869"; +export const semantic_border_secondary_hover = "#e6975f"; +export const semantic_border_secondary_active = "#b3764a"; +export const semantic_border_tertiary_default = "#5ca28f"; +export const semantic_border_tertiary_hover = "#4c907e"; +export const semantic_border_tertiary_active = "#407d6d"; +export const semantic_border_action_dark_default = "#00315d"; +export const semantic_border_on_inverted_default = "#ffffff"; +export const semantic_text_success_default = "#0c6536"; +export const semantic_text_success_hover = "#084826"; +export const semantic_text_success_active = "#084826"; +export const semantic_text_success_on_success = "#ffffff"; +export const semantic_text_success_on_success_subtle = "#1e2b3c"; +export const semantic_text_neutral_default = "#1e2b3c"; +export const semantic_text_neutral_subtle = "#68707c"; +export const semantic_text_neutral_on_inverted = "#ffffff"; +export const semantic_text_action_default = "#0062ba"; +export const semantic_text_action_hover = "#004e95"; +export const semantic_text_action_active = "#00315d"; +export const semantic_text_action_on_action = "#ffffff"; +export const semantic_text_warning_default = "#995404"; +export const semantic_text_warning_icon_warning = "#cc7005"; +export const semantic_text_warning_on_warning = "#663802"; +export const semantic_text_danger_default = "#b3253a"; +export const semantic_text_danger_hover = "#861c2c"; +export const semantic_text_danger_active = "#5a121d"; +export const semantic_text_danger_on_danger = "#ffffff"; +export const semantic_text_danger_on_danger_subtle = "#1e2b3c"; +export const semantic_text_visited_default = "#7a1265"; +export const semantic_text_action_dark_default = "#00315d"; +export const typography_heading_xlarge = "500 clamp(1.91rem, calc(1.58vw + 1.53rem), 2.88rem)/1.3 'Inter'"; +export const typography_heading_large = "500 clamp(1.75rem, calc(1.33vw + 1.43rem), 2.56rem)/1.3 'Inter'"; +export const typography_heading_medium = "500 clamp(1.63rem, calc(1.07vw + 1.37rem), 2.28rem)/1.3 'Inter'"; +export const typography_heading_small = "500 clamp(1.50rem, calc(0.87vw + 1.29rem), 2.03rem)/1.3 'Inter'"; +export const typography_heading_xsmall = "500 clamp(1.38rem, calc(0.71vw + 1.21rem), 1.81rem)/1.3 'Inter'"; +export const typography_heading_xxsmall = "500 clamp(1.28rem, calc(0.51vw + 1.16rem), 1.59rem)/1.3 'Inter'"; +export const typography_ingress_large = "400 clamp(1.19rem, calc(0.41vw + 1.09rem), 1.44rem)/1.7 'Inter'"; +export const typography_ingress_medium = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.6 'Inter'"; +export const typography_paragraph_large = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.5 'Inter'"; +export const typography_paragraph_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.5 'Inter'"; +export const typography_paragraph_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.5 'Inter'"; +export const typography_paragraph_xsmall = "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.5 'Inter'"; +export const typography_paragraph_short_large = "400 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'"; +export const typography_paragraph_short_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_paragraph_short_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_paragraph_short_xsmall = "400 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'"; +export const typography_label_large = "500 clamp(1.09rem, calc(0.26vw + 1.03rem), 1.25rem)/1.3 'Inter'"; +export const typography_label_medium = "500 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_label_small = "500 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_label_xsmall = "500 clamp(0.84rem, calc(0.05vw + 0.83rem), 0.88rem)/1.3 'Inter'"; +export const typography_error_message_medium = "400 clamp(1.00rem, calc(0.20vw + 0.95rem), 1.13rem)/1.3 'Inter'"; +export const typography_error_message_small = "400 clamp(0.94rem, calc(0.10vw + 0.91rem), 1.00rem)/1.3 'Inter'"; +export const typography_interactive_large = "400 1.5rem/1.3 'Inter'"; +export const typography_interactive_medium = "400 1.125rem/1.3 'Inter'"; +export const typography_interactive_small = "400 1rem/1.3 'Inter'"; +export const opacity_disabled = "30%"; +export const border_radius_interactive = "4px"; +export const spacing_1 = "0.25rem"; +export const spacing_2 = "0.5rem"; +export const spacing_3 = "0.75rem"; +export const spacing_4 = "1rem"; +export const spacing_5 = "1.25rem"; +export const spacing_6 = "1.5rem"; +export const spacing_8 = "2rem"; +export const spacing_10 = "2.5rem"; +export const spacing_12 = "3rem"; +export const spacing_14 = "3.5rem"; +export const sizing_1 = "0.25rem"; +export const sizing_2 = "0.5rem"; +export const sizing_3 = "0.75rem"; +export const sizing_4 = "1rem"; +export const sizing_5 = "1.25rem"; +export const sizing_6 = "1.5rem"; +export const sizing_8 = "2rem"; +export const sizing_10 = "2.5rem"; +export const sizing_12 = "3rem"; +export const sizing_14 = "3.5rem"; +export const component_mode_height_small = "2.5rem"; +export const component_mode_height_medium = "3rem"; +export const component_mode_height_large = "3.5rem"; +export const border_width_default = "1px"; +export const border_width_active = "2px"; +export const border_width_tab_focus = "2px"; +export const shadow_xsmall = "0 1px 2px 0 #0000001f"; +export const shadow_small = "0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a"; +export const shadow_medium = "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a"; +export const shadow_large = "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a"; +export const shadow_xlarge = "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a"; \ No newline at end of file diff --git a/packages/tokens/build.ts b/packages/tokens/build.ts index d313c528f3..76806d683e 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/build.ts @@ -112,10 +112,7 @@ StyleDictionary.registerFormat({ const excludeSource = (token: TransformedToken) => !token.filePath.includes('Core.json'); -const getStyleDictionaryConfig = ( - brand: Brands, - targetFolder = 'dist', -): Config => { +const getStyleDictionaryConfig = (brand: Brands, targetFolder = ''): Config => { const tokensPath = '../../design-tokens'; const destinationPath = `${targetFolder}/${brand.toLowerCase()}`; @@ -202,7 +199,7 @@ brands.map((brand) => { console.log(`\nProcessing: ${brand}`); const extendedStyleDictionary = StyleDictionary.extend( - getStyleDictionaryConfig(brand, 'dist'), + getStyleDictionaryConfig(brand, 'brand'), ); extendedStyleDictionary.buildAllPlatforms(); diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 3d77b5d804..ba4ac5330a 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -5,15 +5,15 @@ "private": true, "repository": "https://github.com/digdir/designsystem", "license": "MIT", - "main": "dist/digdir/tokens.cjs.js", - "module": "dist/digdir/tokens.esm.js", - "types": "dist/digdir/tokens.d.ts", + "main": "brand/digdir/tokens.cjs.js", + "module": "brand/digdir/tokens.esm.js", + "types": "brand/digdir/tokens.d.ts", "files": [ - "dist" + "brand" ], "scripts": { "build": "yarn run clean && ts-node ./build.ts", - "clean": "rimraf dist" + "clean": "rimraf brand" }, "devDependencies": { "@tokens-studio/sd-transforms": "^0.8.5",