From 8eb1d43c8c398cfd761a65dee7bf42fa6c82f8ae Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 25 Jun 2024 15:43:44 +0200 Subject: [PATCH] Added theme and baseline layers --- packages/cli/src/tokens/configs.ts | 6 + .../cli/src/tokens/formats/css-classes.ts | 4 +- .../cli/src/tokens/formats/css-variables.ts | 4 +- packages/css/baseline/ds-reset.css | 30 ++-- packages/css/baseline/reset.css | 158 +++++++++--------- .../css/baseline/typography/error-message.css | 29 ++++ packages/css/baseline/typography/heading.css | 38 +++++ packages/css/baseline/typography/ingress.css | 26 +++ packages/css/baseline/typography/label.css | 12 ++ .../css/baseline/typography/paragraph.css | 26 +++ packages/css/baseline/utils.css | 38 +++++ packages/css/index.css | 16 +- packages/css/typography/error-message.css | 31 ---- packages/css/typography/heading.css | 40 ----- packages/css/typography/ingress.css | 28 ---- packages/css/typography/label.css | 14 -- packages/css/typography/paragraph.css | 28 ---- packages/css/utils.css | 42 ----- packages/theme/brand/altinn.css | 4 +- .../theme/brand/altinn/color-mode/dark.css | 5 +- .../theme/brand/altinn/color-mode/light.css | 5 +- packages/theme/brand/altinn/semantic.css | 3 + .../theme/brand/altinn/typography/primary.css | 2 +- .../brand/altinn/typography/secondary.css | 2 +- .../theme/brand/digdir/color-mode/dark.css | 5 +- .../theme/brand/digdir/color-mode/light.css | 5 +- packages/theme/brand/digdir/semantic.css | 3 + .../theme/brand/digdir/typography/primary.css | 2 +- .../brand/digdir/typography/secondary.css | 2 +- packages/theme/brand/portal.css | 4 +- .../theme/brand/portal/color-mode/dark.css | 5 +- .../theme/brand/portal/color-mode/light.css | 5 +- packages/theme/brand/portal/semantic.css | 3 + .../theme/brand/portal/typography/primary.css | 2 +- .../brand/portal/typography/secondary.css | 2 +- packages/theme/brand/uutilsynet.css | 4 +- .../brand/uutilsynet/color-mode/dark.css | 5 +- .../brand/uutilsynet/color-mode/light.css | 5 +- packages/theme/brand/uutilsynet/semantic.css | 3 + .../brand/uutilsynet/typography/primary.css | 2 +- .../brand/uutilsynet/typography/secondary.css | 2 +- 41 files changed, 337 insertions(+), 313 deletions(-) create mode 100644 packages/css/baseline/typography/error-message.css create mode 100644 packages/css/baseline/typography/heading.css create mode 100644 packages/css/baseline/typography/ingress.css create mode 100644 packages/css/baseline/typography/label.css create mode 100644 packages/css/baseline/typography/paragraph.css create mode 100644 packages/css/baseline/utils.css delete mode 100644 packages/css/typography/error-message.css delete mode 100644 packages/css/typography/heading.css delete mode 100644 packages/css/typography/ingress.css delete mode 100644 packages/css/typography/label.css delete mode 100644 packages/css/typography/paragraph.css delete mode 100644 packages/css/utils.css diff --git a/packages/cli/src/tokens/configs.ts b/packages/cli/src/tokens/configs.ts index 65b15b02cb..d3ce284e62 100644 --- a/packages/cli/src/tokens/configs.ts +++ b/packages/cli/src/tokens/configs.ts @@ -78,6 +78,7 @@ type GetConfig = (options: { export const colorModeVariables: GetConfig = ({ mode = 'light', outPath, theme }) => { const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`; + const layer = `ds.theme.color.${mode}`; return { log: { verbosity: 'silent' }, @@ -89,6 +90,7 @@ export const colorModeVariables: GetConfig = ({ mode = 'light', outPath, theme } mode, theme, selector, + layer, // prefix, buildPath: `${outPath}/${theme}/`, @@ -112,6 +114,7 @@ export const colorModeVariables: GetConfig = ({ mode = 'light', outPath, theme } export const semanticVariables: GetConfig = ({ outPath, theme }) => { const selector = `:root`; + const layer = `ds.theme.semantic`; /** * This is a workaround for our formatters to support transative transformers while retaining outputReference. @@ -134,6 +137,7 @@ export const semanticVariables: GetConfig = ({ outPath, theme }) => { basePxFontSize, isCalculatedToken, selector, + layer, // prefix, buildPath: `${outPath}/${theme}/`, @@ -198,6 +202,7 @@ export const typescriptTokens: GetConfig = ({ mode = 'unknown', outPath, theme } export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => { const selector = `${typography === 'primary' ? ':root, ' : ''}[data-ds-typography="${typography}"]`; + const layer = `ds.theme.typography.${typography}`; return { log: { verbosity: 'silent' }, @@ -207,6 +212,7 @@ export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => { prefix, typography, selector, + layer, buildPath: `${outPath}/${theme}/`, basePxFontSize, transforms: [nameKebab.name, 'ts/size/px', sizeRem.name, 'ts/size/lineheight', 'ts/typography/fontWeight'], diff --git a/packages/cli/src/tokens/formats/css-classes.ts b/packages/cli/src/tokens/formats/css-classes.ts index 5f8b53ac2f..51000d4063 100644 --- a/packages/cli/src/tokens/formats/css-classes.ts +++ b/packages/cli/src/tokens/formats/css-classes.ts @@ -49,7 +49,7 @@ export const cssClassesTypography: Format = { name: 'ds/css-classes-typography', format: async function ({ dictionary, file, options, platform }) { const { outputReferences } = options; - const { selector, typography } = platform; + const { selector, layer } = platform; const header = await fileHeader({ file }); @@ -124,6 +124,6 @@ export const cssClassesTypography: Format = { const variables = formattedTokens.variables.join('\n'); const content = selector ? `${selector} {\n${variables}\n${classes}\n}` : classes; - return header + `@layer ds.base.typography.${typography} {\n${content}\n}\n`; + return header + `@layer ${layer} {\n${content}\n}\n`; }, }; diff --git a/packages/cli/src/tokens/formats/css-variables.ts b/packages/cli/src/tokens/formats/css-variables.ts index 9995e27150..3a2c9e4831 100644 --- a/packages/cli/src/tokens/formats/css-variables.ts +++ b/packages/cli/src/tokens/formats/css-variables.ts @@ -19,7 +19,7 @@ export const cssVariables: Format = { format: async function ({ dictionary, file, options, platform }) { const { allTokens } = dictionary; const { outputReferences } = options; - const { selector, isCalculatedToken, mode } = platform; + const { selector, isCalculatedToken, mode, layer } = platform; const mode_ = mode as string; @@ -51,6 +51,6 @@ export const cssVariables: Format = { const content = `{\n${formattedVariables.join('\n')}\n}\n`; const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : ''; - return header + `${selector} ${content}` + autoSelectorContent; + return header + `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n`; }, }; diff --git a/packages/css/baseline/ds-reset.css b/packages/css/baseline/ds-reset.css index b4333720aa..d37db7fc3e 100644 --- a/packages/css/baseline/ds-reset.css +++ b/packages/css/baseline/ds-reset.css @@ -2,21 +2,19 @@ /* https://wiki.csswg.org/ideas/mistakes */ -@layer ds.reset { - [class^='ds-'], - [class^='ds-']::before, - [class^='ds-']::after { - box-sizing: border-box; - } +[class^='ds-'], +[class^='ds-']::before, +[class^='ds-']::after { + box-sizing: border-box; +} - /* Inherit fonts for inputs and buttons */ - input[class^='ds-'], - button[class^='ds-'], - textarea[class^='ds-'], - select[class^='ds-'] { - font-family: inherit; - font-size: inherit; - line-height: inherit; - font-weight: inherit; - } +/* Inherit fonts for inputs and buttons */ +input[class^='ds-'], +button[class^='ds-'], +textarea[class^='ds-'], +select[class^='ds-'] { + font-family: inherit; + font-size: inherit; + line-height: inherit; + font-weight: inherit; } diff --git a/packages/css/baseline/reset.css b/packages/css/baseline/reset.css index 6da25e500c..ddfe7284d1 100644 --- a/packages/css/baseline/reset.css +++ b/packages/css/baseline/reset.css @@ -2,95 +2,93 @@ /* https://wiki.csswg.org/ideas/mistakes */ -@layer ds.reset { - /* Box sizing rules */ - *, - *::before, - *::after { - box-sizing: border-box; - } +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} - /* Prevent font size inflation */ - html { - text-size-adjust: none; - } +/* Prevent font size inflation */ +html { + text-size-adjust: none; +} - /* Remove default margin in favour of better control in authored CSS */ - body, - h1, - h2, - h3, - h4, - p, - figure, - blockquote, - dl, - dd { - margin-block-end: 0; - } +/* Remove default margin in favour of better control in authored CSS */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin-block-end: 0; +} - /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ - ul[role='list'], - ol[role='list'] { - list-style: none; - } +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} - /* Set core body defaults */ - body { - min-height: 100vh; - line-height: 1.5; - } +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} - /* Set shorter line heights on headings and interactive elements */ - h1, - h2, - h3, - h4, - button, - input, - label { - line-height: 1.1; - } +/* Set shorter line heights on headings and interactive elements */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; +} - /* Balance text wrapping on headings */ - h1, - h2, - h3, - h4 { - text-wrap: balance; - } +/* Balance text wrapping on headings */ +h1, +h2, +h3, +h4 { + text-wrap: balance; +} - /* A elements that don't have a class get default styles */ - a:not([class]) { - text-decoration-skip-ink: auto; - /* stylelint-disable-next-line value-keyword-case */ - color: currentColor; - } +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + /* stylelint-disable-next-line value-keyword-case */ + color: currentColor; +} - /* Make images easier to work with */ - img, - picture { - max-width: 100%; - display: block; - } +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} - /* Inherit fonts for inputs and buttons */ - input, - button, - textarea, - select { - font-family: inherit; - font-size: inherit; - font-weight: inherit; - } +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font-family: inherit; + font-size: inherit; + font-weight: inherit; +} - /* Make sure textareas without a rows attribute are not tiny */ - textarea:not([rows]) { - min-height: 10em; - } +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} - /* Anything that has been anchored to should have extra scroll margin */ - :target { - scroll-margin-block: 5ex; - } +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; } diff --git a/packages/css/baseline/typography/error-message.css b/packages/css/baseline/typography/error-message.css new file mode 100644 index 0000000000..a1d85be1a3 --- /dev/null +++ b/packages/css/baseline/typography/error-message.css @@ -0,0 +1,29 @@ +.ds-error-message { + --dsc-bottom-spacing: var(--ds-spacing-5); + + margin: 0; +} + +.ds-error-message--error { + color: var(--ds-color-danger-text-subtle); +} + +.ds-error-message--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-error_message--lg { + --dsc-bottom-spacing: var(--ds-spacing-5); +} + +.ds-error_message--md { + --dsc-bottom-spacing: var(--ds-spacing-5); +} + +.ds-error_message--sm { + --dsc-bottom-spacing: var(--ds-spacing-4); +} + +.ds-error_message--xs { + --dsc-bottom-spacing: var(--ds-spacing-3); +} diff --git a/packages/css/baseline/typography/heading.css b/packages/css/baseline/typography/heading.css new file mode 100644 index 0000000000..00d4da0f07 --- /dev/null +++ b/packages/css/baseline/typography/heading.css @@ -0,0 +1,38 @@ +.ds-heading { + --dsc-bottom-spacing: var(--ds-spacing-6); + + margin: 0; + color: var(--ds-color-neutral-text-default); +} + +.ds-heading--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-heading--2xl { + --dsc-bottom-spacing: var(--ds-spacing-7); +} + +.ds-heading--xl { + --dsc-bottom-spacing: var(--ds-spacing-6); +} + +.ds-heading--lg { + --dsc-bottom-spacing: var(--ds-spacing-5); +} + +.ds-heading--md { + --dsc-bottom-spacing: var(--ds-spacing-4); +} + +.ds-heading--sm { + --dsc-bottom-spacing: var(--ds-spacing-3); +} + +.ds-heading--xs { + --dsc-bottom-spacing: var(--ds-spacing-2); +} + +.ds-heading--2xs { + --dsc-bottom-spacing: var(--ds-spacing-1); +} diff --git a/packages/css/baseline/typography/ingress.css b/packages/css/baseline/typography/ingress.css new file mode 100644 index 0000000000..a76cde76e4 --- /dev/null +++ b/packages/css/baseline/typography/ingress.css @@ -0,0 +1,26 @@ +.ds-ingress { + --dsc-bottom-spacing: var(--ds-spacing-5); + + margin: 0; + color: var(--ds-color-neutral-text-default); +} + +.ds-ingress--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-ingress--lg { + --dsc-bottom-spacing: var(--ds-spacing-6); +} + +.ds-ingress--md { + --dsc-bottom-spacing: var(--ds-spacing-5); +} + +.ds-ingress--sm { + --dsc-bottom-spacing: var(--ds-spacing-7); +} + +.ds-ingress--xs { + --dsc-bottom-spacing: var(--ds-spacing-8); +} diff --git a/packages/css/baseline/typography/label.css b/packages/css/baseline/typography/label.css new file mode 100644 index 0000000000..5dd5118316 --- /dev/null +++ b/packages/css/baseline/typography/label.css @@ -0,0 +1,12 @@ +.ds-label { + --dsc-bottom-spacing: var(--ds-spacing-1); + + display: inline-block; + margin: 0; + padding: 0; + color: var(--ds-color-neutral-text-default); +} + +.ds-label--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} diff --git a/packages/css/baseline/typography/paragraph.css b/packages/css/baseline/typography/paragraph.css new file mode 100644 index 0000000000..3620a57fd8 --- /dev/null +++ b/packages/css/baseline/typography/paragraph.css @@ -0,0 +1,26 @@ +.ds-paragraph { + --dsc-bottom-spacing: var(--ds-spacing-5); + + color: var(--ds-color-neutral-text-default); + margin: 0; +} + +.ds-paragraph--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-paragraph--lg { + --dsc-bottom-spacing: var(--ds-spacing-6); +} + +.ds-paragraph--md { + --dsc-bottom-spacing: var(--ds-spacing-5); +} + +.ds-paragraph--sm { + --dsc-bottom-spacing: var(--ds-spacing-4); +} + +.ds-paragraph--xs { + --dsc-bottom-spacing: var(--ds-spacing-3); +} diff --git a/packages/css/baseline/utils.css b/packages/css/baseline/utils.css new file mode 100644 index 0000000000..fbc674cc76 --- /dev/null +++ b/packages/css/baseline/utils.css @@ -0,0 +1,38 @@ +/** + * Visually hide an element, but leave it available for screen readers + */ +.ds-sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + +/** + * Apply a focus outline on an element when it is focused with keyboard + */ +.ds-focus:focus-visible { + --dsc-focus-border-width: 3px; + + outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer); + outline-offset: var(--dsc-focus-border-width); + box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner); +} + +.ds-animate-height--openingOrClosing, +.ds-animate-height--closed { + overflow: hidden; +} + +.ds-animate-height--open .ds-animate-height__content { + height: auto; +} + +.ds-animate-height--closed .ds-animate-height__content { + height: 0; + display: none; +} diff --git a/packages/css/index.css b/packages/css/index.css index a39b305a19..ffe3ecd68c 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -1,15 +1,15 @@ @charset "UTF-8"; -@layer ds.base, ds.box, ds.btn; +@layer ds.theme, ds.baseline, ds.box, ds.btn; /** Import order defines ordinal specificity for layers */ -@import url('./baseline/ds-reset.css') layer(ds.base); -@import url('./utils.css') layer(ds.base); -@import url('./typography/label.css') layer(ds.base); -@import url('./typography/heading.css') layer(ds.base); -@import url('./typography/paragraph.css') layer(ds.base); -@import url('./typography/ingress.css') layer(ds.base); -@import url('./typography/error-message.css') layer(ds.base); +@import url('./baseline/ds-reset.css') layer(ds.baseline.reset); +@import url('./baseline/utils.css') layer(ds.baseline.utils); +@import url('./baseline/typography/label.css') layer(ds.baseline.typography); +@import url('./baseline/typography/heading.css') layer(ds.baseline.typography); +@import url('./baseline/typography/paragraph.css') layer(ds.baseline.typography); +@import url('./baseline/typography/ingress.css') layer(ds.baseline.typography); +@import url('./baseline/typography/error-message.css') layer(ds.baseline.typography); @import url('./button.css'); @import url('./box.css'); @import url('./alert.css'); diff --git a/packages/css/typography/error-message.css b/packages/css/typography/error-message.css deleted file mode 100644 index a10865630f..0000000000 --- a/packages/css/typography/error-message.css +++ /dev/null @@ -1,31 +0,0 @@ -@layer ds.typography.error-message { - .ds-error-message { - --dsc-bottom-spacing: var(--ds-spacing-5); - - margin: 0; - } - - .ds-error-message--error { - color: var(--ds-color-danger-text-subtle); - } - - .ds-error-message--spacing { - margin-bottom: var(--dsc-bottom-spacing); - } - - .ds-error_message--lg { - --dsc-bottom-spacing: var(--ds-spacing-5); - } - - .ds-error_message--md { - --dsc-bottom-spacing: var(--ds-spacing-5); - } - - .ds-error_message--sm { - --dsc-bottom-spacing: var(--ds-spacing-4); - } - - .ds-error_message--xs { - --dsc-bottom-spacing: var(--ds-spacing-3); - } -} diff --git a/packages/css/typography/heading.css b/packages/css/typography/heading.css deleted file mode 100644 index 6fba9ec293..0000000000 --- a/packages/css/typography/heading.css +++ /dev/null @@ -1,40 +0,0 @@ -@layer ds.typography.heading { - .ds-heading { - --dsc-bottom-spacing: var(--ds-spacing-6); - - margin: 0; - color: var(--ds-color-neutral-text-default); - } - - .ds-heading--spacing { - margin-bottom: var(--dsc-bottom-spacing); - } - - .ds-heading--2xl { - --dsc-bottom-spacing: var(--ds-spacing-7); - } - - .ds-heading--xl { - --dsc-bottom-spacing: var(--ds-spacing-6); - } - - .ds-heading--lg { - --dsc-bottom-spacing: var(--ds-spacing-5); - } - - .ds-heading--md { - --dsc-bottom-spacing: var(--ds-spacing-4); - } - - .ds-heading--sm { - --dsc-bottom-spacing: var(--ds-spacing-3); - } - - .ds-heading--xs { - --dsc-bottom-spacing: var(--ds-spacing-2); - } - - .ds-heading--2xs { - --dsc-bottom-spacing: var(--ds-spacing-1); - } -} diff --git a/packages/css/typography/ingress.css b/packages/css/typography/ingress.css deleted file mode 100644 index a4be6a0b99..0000000000 --- a/packages/css/typography/ingress.css +++ /dev/null @@ -1,28 +0,0 @@ -@layer ds.typography.ingress { - .ds-ingress { - --dsc-bottom-spacing: var(--ds-spacing-5); - - margin: 0; - color: var(--ds-color-neutral-text-default); - } - - .ds-ingress--spacing { - margin-bottom: var(--dsc-bottom-spacing); - } - - .ds-ingress--lg { - --dsc-bottom-spacing: var(--ds-spacing-6); - } - - .ds-ingress--md { - --dsc-bottom-spacing: var(--ds-spacing-5); - } - - .ds-ingress--sm { - --dsc-bottom-spacing: var(--ds-spacing-7); - } - - .ds-ingress--xs { - --dsc-bottom-spacing: var(--ds-spacing-8); - } -} diff --git a/packages/css/typography/label.css b/packages/css/typography/label.css deleted file mode 100644 index eadfa8b375..0000000000 --- a/packages/css/typography/label.css +++ /dev/null @@ -1,14 +0,0 @@ -@layer ds.typography.label { - .ds-label { - --dsc-bottom-spacing: var(--ds-spacing-1); - - display: inline-block; - margin: 0; - padding: 0; - color: var(--ds-color-neutral-text-default); - } - - .ds-label--spacing { - margin-bottom: var(--dsc-bottom-spacing); - } -} diff --git a/packages/css/typography/paragraph.css b/packages/css/typography/paragraph.css deleted file mode 100644 index 033fedf382..0000000000 --- a/packages/css/typography/paragraph.css +++ /dev/null @@ -1,28 +0,0 @@ -@layer ds.typography.paragraph { - .ds-paragraph { - --dsc-bottom-spacing: var(--ds-spacing-5); - - color: var(--ds-color-neutral-text-default); - margin: 0; - } - - .ds-paragraph--spacing { - margin-bottom: var(--dsc-bottom-spacing); - } - - .ds-paragraph--lg { - --dsc-bottom-spacing: var(--ds-spacing-6); - } - - .ds-paragraph--md { - --dsc-bottom-spacing: var(--ds-spacing-5); - } - - .ds-paragraph--sm { - --dsc-bottom-spacing: var(--ds-spacing-4); - } - - .ds-paragraph--xs { - --dsc-bottom-spacing: var(--ds-spacing-3); - } -} diff --git a/packages/css/utils.css b/packages/css/utils.css deleted file mode 100644 index 6473b7e225..0000000000 --- a/packages/css/utils.css +++ /dev/null @@ -1,42 +0,0 @@ -@layer ds.utils { - /** - * Visually hide an element, but leave it available for screen readers - */ - .ds-sr-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - - /** - * Apply a focus outline on an element when it is focused with keyboard - */ - .ds-focus:focus-visible { - --dsc-focus-border-width: 3px; - - outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer); - outline-offset: var(--dsc-focus-border-width); - box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner); - } - - @layer animate-height { - .ds-animate-height--openingOrClosing, - .ds-animate-height--closed { - overflow: hidden; - } - - .ds-animate-height--open .ds-animate-height__content { - height: auto; - } - - .ds-animate-height--closed .ds-animate-height__content { - height: 0; - display: none; - } - } -} diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index a5fb47cd75..bc451724e5 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -1,5 +1,5 @@ @import url('./altinn/color-mode/light.css'); @import url('./altinn/typography/secondary.css'); @import url('./altinn/semantic.css'); -@import url('./altinn/color-mode/dark.css'); -@import url('./altinn/typography/primary.css'); \ No newline at end of file +@import url('./altinn/typography/primary.css'); +@import url('./altinn/color-mode/dark.css'); \ No newline at end of file diff --git a/packages/theme/brand/altinn/color-mode/dark.css b/packages/theme/brand/altinn/color-mode/dark.css index 6cad72f239..3ddb0c6cfd 100644 --- a/packages/theme/brand/altinn/color-mode/dark.css +++ b/packages/theme/brand/altinn/color-mode/dark.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.dark { [data-ds-color-mode="dark"] { --ds-global-blue-1: #031d30; --ds-global-blue-2: #032540; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #cee1f2; } - + @media (prefers-color-scheme: dark) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #031d30; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/altinn/color-mode/light.css b/packages/theme/brand/altinn/color-mode/light.css index 4f36fef481..f7f00b901b 100644 --- a/packages/theme/brand/altinn/color-mode/light.css +++ b/packages/theme/brand/altinn/color-mode/light.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.light { :root, [data-ds-color-mode="light"] { --ds-global-blue-1: #fefeff; --ds-global-blue-2: #edf5fa; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #00315c; } - + @media (prefers-color-scheme: light) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #fefeff; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/altinn/semantic.css b/packages/theme/brand/altinn/semantic.css index fe51395b28..168c6013b9 100644 --- a/packages/theme/brand/altinn/semantic.css +++ b/packages/theme/brand/altinn/semantic.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.semantic { :root { --ds-typography-heading-2xl: 500 3.75rem/1.3 'Helvetica Neue'; --ds-typography-heading-xl: 500 3rem/1.3 'Helvetica Neue'; @@ -94,3 +95,5 @@ --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); } + +} diff --git a/packages/theme/brand/altinn/typography/primary.css b/packages/theme/brand/altinn/typography/primary.css index 8c9d8ec9b7..8342325eae 100644 --- a/packages/theme/brand/altinn/typography/primary.css +++ b/packages/theme/brand/altinn/typography/primary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.primary { +@layer ds.theme.typography.primary { :root, [data-ds-typography="primary"] { --ds-font-family: Helvetica Neue; --ds-font-weight-medium: 500; diff --git a/packages/theme/brand/altinn/typography/secondary.css b/packages/theme/brand/altinn/typography/secondary.css index 329393c435..1dcfda62de 100644 --- a/packages/theme/brand/altinn/typography/secondary.css +++ b/packages/theme/brand/altinn/typography/secondary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.secondary { +@layer ds.theme.typography.secondary { [data-ds-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; diff --git a/packages/theme/brand/digdir/color-mode/dark.css b/packages/theme/brand/digdir/color-mode/dark.css index 27d60dc5d4..4525d22648 100644 --- a/packages/theme/brand/digdir/color-mode/dark.css +++ b/packages/theme/brand/digdir/color-mode/dark.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.dark { [data-ds-color-mode="dark"] { --ds-global-blue-1: #031d30; --ds-global-blue-2: #032540; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #b0cfea; } - + @media (prefers-color-scheme: dark) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #031d30; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/digdir/color-mode/light.css b/packages/theme/brand/digdir/color-mode/light.css index c1a4af144a..7d43337803 100644 --- a/packages/theme/brand/digdir/color-mode/light.css +++ b/packages/theme/brand/digdir/color-mode/light.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.light { :root, [data-ds-color-mode="light"] { --ds-global-blue-1: #fefeff; --ds-global-blue-2: #edf5fa; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #00315c; } - + @media (prefers-color-scheme: light) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #fefeff; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/digdir/semantic.css b/packages/theme/brand/digdir/semantic.css index c39b920f3f..69b2981818 100644 --- a/packages/theme/brand/digdir/semantic.css +++ b/packages/theme/brand/digdir/semantic.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.semantic { :root { --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; @@ -94,3 +95,5 @@ --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); } + +} diff --git a/packages/theme/brand/digdir/typography/primary.css b/packages/theme/brand/digdir/typography/primary.css index 3c4cc5995d..2798de2a59 100644 --- a/packages/theme/brand/digdir/typography/primary.css +++ b/packages/theme/brand/digdir/typography/primary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.primary { +@layer ds.theme.typography.primary { :root, [data-ds-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; diff --git a/packages/theme/brand/digdir/typography/secondary.css b/packages/theme/brand/digdir/typography/secondary.css index 30499b1d89..7b5e64a4a6 100644 --- a/packages/theme/brand/digdir/typography/secondary.css +++ b/packages/theme/brand/digdir/typography/secondary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.secondary { +@layer ds.theme.typography.secondary { [data-ds-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 500; diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index f655323598..d31609c90c 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -1,5 +1,5 @@ @import url('./portal/color-mode/light.css'); @import url('./portal/typography/secondary.css'); @import url('./portal/semantic.css'); -@import url('./portal/color-mode/dark.css'); -@import url('./portal/typography/primary.css'); \ No newline at end of file +@import url('./portal/typography/primary.css'); +@import url('./portal/color-mode/dark.css'); \ No newline at end of file diff --git a/packages/theme/brand/portal/color-mode/dark.css b/packages/theme/brand/portal/color-mode/dark.css index 15fe8e3dba..27feed4ea0 100644 --- a/packages/theme/brand/portal/color-mode/dark.css +++ b/packages/theme/brand/portal/color-mode/dark.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.dark { [data-ds-color-mode="dark"] { --ds-global-blue-1: #031d30; --ds-global-blue-2: #032540; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #ebdcdb; } - + @media (prefers-color-scheme: dark) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #031d30; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/portal/color-mode/light.css b/packages/theme/brand/portal/color-mode/light.css index 0968904dcd..abc1dbdfb1 100644 --- a/packages/theme/brand/portal/color-mode/light.css +++ b/packages/theme/brand/portal/color-mode/light.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.light { :root, [data-ds-color-mode="light"] { --ds-global-blue-1: #fefeff; --ds-global-blue-2: #edf5fa; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #561e19; } - + @media (prefers-color-scheme: light) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #fefeff; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/portal/semantic.css b/packages/theme/brand/portal/semantic.css index c39b920f3f..69b2981818 100644 --- a/packages/theme/brand/portal/semantic.css +++ b/packages/theme/brand/portal/semantic.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.semantic { :root { --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; @@ -94,3 +95,5 @@ --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); } + +} diff --git a/packages/theme/brand/portal/typography/primary.css b/packages/theme/brand/portal/typography/primary.css index 3c4cc5995d..2798de2a59 100644 --- a/packages/theme/brand/portal/typography/primary.css +++ b/packages/theme/brand/portal/typography/primary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.primary { +@layer ds.theme.typography.primary { :root, [data-ds-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; diff --git a/packages/theme/brand/portal/typography/secondary.css b/packages/theme/brand/portal/typography/secondary.css index 329393c435..1dcfda62de 100644 --- a/packages/theme/brand/portal/typography/secondary.css +++ b/packages/theme/brand/portal/typography/secondary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.secondary { +@layer ds.theme.typography.secondary { [data-ds-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index 471f3df779..ed3eb354c2 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -1,5 +1,5 @@ @import url('./uutilsynet/color-mode/light.css'); @import url('./uutilsynet/typography/secondary.css'); @import url('./uutilsynet/semantic.css'); -@import url('./uutilsynet/typography/primary.css'); -@import url('./uutilsynet/color-mode/dark.css'); \ No newline at end of file +@import url('./uutilsynet/color-mode/dark.css'); +@import url('./uutilsynet/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet/color-mode/dark.css b/packages/theme/brand/uutilsynet/color-mode/dark.css index 00d2f7d8f3..8eec4324f2 100644 --- a/packages/theme/brand/uutilsynet/color-mode/dark.css +++ b/packages/theme/brand/uutilsynet/color-mode/dark.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.dark { [data-ds-color-mode="dark"] { --ds-global-blue-1: #031d30; --ds-global-blue-2: #032540; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #cee1f2; } - + @media (prefers-color-scheme: dark) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #031d30; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/uutilsynet/color-mode/light.css b/packages/theme/brand/uutilsynet/color-mode/light.css index b2dcefa7eb..e2e4172bda 100644 --- a/packages/theme/brand/uutilsynet/color-mode/light.css +++ b/packages/theme/brand/uutilsynet/color-mode/light.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.color.light { :root, [data-ds-color-mode="light"] { --ds-global-blue-1: #fefeff; --ds-global-blue-2: #edf5fa; @@ -306,7 +307,7 @@ --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #00315c; } - + @media (prefers-color-scheme: light) { [data-ds-color-mode="auto"] { --ds-global-blue-1: #fefeff; @@ -614,3 +615,5 @@ } } + +} diff --git a/packages/theme/brand/uutilsynet/semantic.css b/packages/theme/brand/uutilsynet/semantic.css index c39b920f3f..69b2981818 100644 --- a/packages/theme/brand/uutilsynet/semantic.css +++ b/packages/theme/brand/uutilsynet/semantic.css @@ -2,6 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ +@layer ds.theme.semantic { :root { --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; @@ -94,3 +95,5 @@ --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); } + +} diff --git a/packages/theme/brand/uutilsynet/typography/primary.css b/packages/theme/brand/uutilsynet/typography/primary.css index 3c4cc5995d..2798de2a59 100644 --- a/packages/theme/brand/uutilsynet/typography/primary.css +++ b/packages/theme/brand/uutilsynet/typography/primary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.primary { +@layer ds.theme.typography.primary { :root, [data-ds-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; diff --git a/packages/theme/brand/uutilsynet/typography/secondary.css b/packages/theme/brand/uutilsynet/typography/secondary.css index 329393c435..1dcfda62de 100644 --- a/packages/theme/brand/uutilsynet/typography/secondary.css +++ b/packages/theme/brand/uutilsynet/typography/secondary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.base.typography.secondary { +@layer ds.theme.typography.secondary { [data-ds-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400;