From 841616a063d2349e5ff14dc1706dc33e9f4cd739 Mon Sep 17 00:00:00 2001 From: AlineNap <59806622+AlineNap@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:27:29 +0200 Subject: [PATCH] feat(design-tokens): Nieuw build script / Tokens voor NLdoc en Logius Blauw (#114) - Nieuwe build scripts voor Tokens naar CSS (en meer) - Bouwt correcte LUX-tokens-structuur-combinaties - Updated Tokens en -structuur - Logius Blauw toegevoegd --------- Co-authored-by: Remy Parzinski Co-authored-by: Jaap-Hein Wester Co-authored-by: Jaap-Hein Wester Co-authored-by: Remy Parzinski --- .gitignore | 4 + .prettierignore | 3 + packages/storybook/config/preview.tsx | 4 +- packages/storybook/src/styles/theme.css | 1 + .../button-login/button-login-themes.mdx | 14 +- .../button-login/button-login.mdx | 6 +- .../components/button-login/button-login.scss | 4 +- proprietary/design-tokens/build-tokens.mjs | 108 --- .../{ => build}/add-media-dependent-files.mjs | 0 .../design-tokens/build/build-tokens.mjs | 244 +++++ proprietary/design-tokens/build/constants.mjs | 5 + .../{ => build}/json-list-formatter.mjs | 0 proprietary/design-tokens/build/run-build.mjs | 11 + proprietary/design-tokens/package.json | 2 +- .../design-tokens/src/imported/$metadata.json | 53 +- .../design-tokens/src/imported/$themes.json | 885 ++++++++++++++++-- .../src/imported/NLdoc/Ridderkerk.json | 45 + .../src/imported/NLdoc/Rijksoverheid.json | 45 + .../NLdoc/Waterschap Hollandse Delta.json | 45 + .../src/imported/NLdoc/default.json | 45 + .../src/imported/common/default.json | 24 +- .../src/imported/common/viewport/lg.json | 144 +++ .../src/imported/common/viewport/md.json | 144 +++ .../src/imported/common/viewport/sm.json | 144 +++ .../src/imported/common/viewport/xl.json | 138 +++ .../src/imported/common/viewport/xs.json | 144 +++ .../src/imported/component/alert.json | 100 ++ .../component/alert/closable/false.json | 18 - .../component/alert/closable/true.json | 18 - .../src/imported/component/alert/default.json | 60 -- .../component/alert/variant/error.json | 18 - .../component/alert/variant/info.json | 18 - .../component/alert/variant/success.json | 18 - .../component/alert/variant/warning.json | 18 - .../src/imported/component/button login.json | 144 +++ .../component/button-login/default.json | 88 -- .../src/imported/component/button.json | 241 +++++ .../imported/component/button/default.json | 62 -- .../imported/component/button/icon/end.json | 28 - .../imported/component/button/icon/none.json | 28 - .../imported/component/button/icon/start.json | 28 - .../component/button/variant/primary.json | 46 - .../component/button/variant/secondary.json | 46 - .../component/button/variant/tertairy.json | 46 - .../src/imported/component/icon-logo.json | 42 + .../src/imported/component/link.json | 54 ++ .../src/imported/component/link/default.json | 38 - .../src/imported/core/default.json | 735 +++++++++------ .../mode/{dark (beta).json => dark.json} | 236 ++--- .../src/imported/mode/light.json | 296 +++--- .../src/imported/nl/utrecht-alert.json | 132 +++ .../src/imported/nl/utrecht-button.json | 460 +++++++++ .../src/imported/nl/utrecht-link.json | 82 ++ .../src/imported/product/DigiD.json | 113 ++- .../src/imported/product/Elia.json | 154 +++ .../src/imported/product/Logius Blauw.json | 266 ++++++ .../src/imported/product/Logius.json | 162 +++- .../src/imported/product/MijnOverheid.json | 175 +++- .../imported/product/NLdoc - Ridderkerk.json | 106 --- .../product/NLdoc - Rijksoverheid.json | 106 --- .../src/imported/product/NLdoc - WHD.json | 106 --- .../src/imported/product/NLdoc - default.json | 106 --- .../src/imported/product/NLdoc-mapping.json | 216 +++++ .../src/imported/viewport (beta)/lg.json | 66 -- .../src/imported/viewport (beta)/md.json | 66 -- .../src/imported/viewport (beta)/sm.json | 66 -- .../src/imported/viewport (beta)/xl.json | 66 -- .../src/imported/viewport (beta)/xs.json | 66 -- .../src/manual/missingTokens.dark.json | 50 +- .../src/manual/missingTokens.json | 82 +- .../src/manual/missingTokens.light.json | 50 +- proprietary/font/src/index.scss | 8 +- 72 files changed, 4995 insertions(+), 2397 deletions(-) delete mode 100644 proprietary/design-tokens/build-tokens.mjs rename proprietary/design-tokens/{ => build}/add-media-dependent-files.mjs (100%) create mode 100644 proprietary/design-tokens/build/build-tokens.mjs create mode 100644 proprietary/design-tokens/build/constants.mjs rename proprietary/design-tokens/{ => build}/json-list-formatter.mjs (100%) create mode 100644 proprietary/design-tokens/build/run-build.mjs create mode 100644 proprietary/design-tokens/src/imported/NLdoc/Ridderkerk.json create mode 100644 proprietary/design-tokens/src/imported/NLdoc/Rijksoverheid.json create mode 100644 proprietary/design-tokens/src/imported/NLdoc/Waterschap Hollandse Delta.json create mode 100644 proprietary/design-tokens/src/imported/NLdoc/default.json create mode 100644 proprietary/design-tokens/src/imported/common/viewport/lg.json create mode 100644 proprietary/design-tokens/src/imported/common/viewport/md.json create mode 100644 proprietary/design-tokens/src/imported/common/viewport/sm.json create mode 100644 proprietary/design-tokens/src/imported/common/viewport/xl.json create mode 100644 proprietary/design-tokens/src/imported/common/viewport/xs.json create mode 100644 proprietary/design-tokens/src/imported/component/alert.json delete mode 100644 proprietary/design-tokens/src/imported/component/alert/closable/false.json delete mode 100644 proprietary/design-tokens/src/imported/component/alert/closable/true.json delete mode 100644 proprietary/design-tokens/src/imported/component/alert/default.json delete mode 100644 proprietary/design-tokens/src/imported/component/alert/variant/error.json delete mode 100644 proprietary/design-tokens/src/imported/component/alert/variant/info.json delete mode 100644 proprietary/design-tokens/src/imported/component/alert/variant/success.json delete mode 100644 proprietary/design-tokens/src/imported/component/alert/variant/warning.json create mode 100644 proprietary/design-tokens/src/imported/component/button login.json delete mode 100644 proprietary/design-tokens/src/imported/component/button-login/default.json create mode 100644 proprietary/design-tokens/src/imported/component/button.json delete mode 100644 proprietary/design-tokens/src/imported/component/button/default.json delete mode 100644 proprietary/design-tokens/src/imported/component/button/icon/end.json delete mode 100644 proprietary/design-tokens/src/imported/component/button/icon/none.json delete mode 100644 proprietary/design-tokens/src/imported/component/button/icon/start.json delete mode 100644 proprietary/design-tokens/src/imported/component/button/variant/primary.json delete mode 100644 proprietary/design-tokens/src/imported/component/button/variant/secondary.json delete mode 100644 proprietary/design-tokens/src/imported/component/button/variant/tertairy.json create mode 100644 proprietary/design-tokens/src/imported/component/icon-logo.json create mode 100644 proprietary/design-tokens/src/imported/component/link.json delete mode 100644 proprietary/design-tokens/src/imported/component/link/default.json rename proprietary/design-tokens/src/imported/mode/{dark (beta).json => dark.json} (77%) create mode 100644 proprietary/design-tokens/src/imported/nl/utrecht-alert.json create mode 100644 proprietary/design-tokens/src/imported/nl/utrecht-button.json create mode 100644 proprietary/design-tokens/src/imported/nl/utrecht-link.json create mode 100644 proprietary/design-tokens/src/imported/product/Elia.json create mode 100644 proprietary/design-tokens/src/imported/product/Logius Blauw.json delete mode 100644 proprietary/design-tokens/src/imported/product/NLdoc - Ridderkerk.json delete mode 100644 proprietary/design-tokens/src/imported/product/NLdoc - Rijksoverheid.json delete mode 100644 proprietary/design-tokens/src/imported/product/NLdoc - WHD.json delete mode 100644 proprietary/design-tokens/src/imported/product/NLdoc - default.json create mode 100644 proprietary/design-tokens/src/imported/product/NLdoc-mapping.json delete mode 100644 proprietary/design-tokens/src/imported/viewport (beta)/lg.json delete mode 100644 proprietary/design-tokens/src/imported/viewport (beta)/md.json delete mode 100644 proprietary/design-tokens/src/imported/viewport (beta)/sm.json delete mode 100644 proprietary/design-tokens/src/imported/viewport (beta)/xl.json delete mode 100644 proprietary/design-tokens/src/imported/viewport (beta)/xs.json diff --git a/.gitignore b/.gitignore index c1f7a3a3..ac3a2660 100644 --- a/.gitignore +++ b/.gitignore @@ -60,3 +60,7 @@ package-lock.json # Ignore generated files from Stencil components.d.ts + +# Do not ignore our build scripts +# (This leaves other build/ folders ignored, see line #9) +!/proprietary/design-tokens/build diff --git a/.prettierignore b/.prettierignore index 4472642c..f563b0e5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -23,3 +23,6 @@ components/components.d.ts packages/web-components-stencil/loader packages/web-components-react/src/react-component-lib/ packages/web-components-react/src/components.ts + +# Ignore imported files +imported/ diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx index 68ce1dcf..0a63f6d0 100644 --- a/packages/storybook/config/preview.tsx +++ b/packages/storybook/config/preview.tsx @@ -19,8 +19,8 @@ const preview: Preview = { 'Logius dark': 'lux-theme--logius-dark', 'Mijn Overheid light': 'lux-theme--mijnoverheid-light', 'Mijn Overheid dark': 'lux-theme--mijnoverheid-dark', - 'NLdoc light': 'lux-theme--nldoc-default-light', - 'NLdoc dark': 'lux-theme--nldoc-default-dark', + 'NLdoc light': 'lux-theme--nldoc-light', + 'NLdoc dark': 'lux-theme--nldoc-dark', }, defaultTheme: 'Logius light', }), diff --git a/packages/storybook/src/styles/theme.css b/packages/storybook/src/styles/theme.css index 90afac81..7bbb01a5 100644 --- a/packages/storybook/src/styles/theme.css +++ b/packages/storybook/src/styles/theme.css @@ -12,6 +12,7 @@ display: flex; flex-direction: column; border: solid 1px #a7a7a7; + background-color: var(--lux-color-background-default); padding: 0 !important; list-style: none; } diff --git a/packages/storybook/src/web-components/button-login/button-login-themes.mdx b/packages/storybook/src/web-components/button-login/button-login-themes.mdx index 5a02fb82..82973763 100644 --- a/packages/storybook/src/web-components/button-login/button-login-themes.mdx +++ b/packages/storybook/src/web-components/button-login/button-login-themes.mdx @@ -15,18 +15,8 @@ import * as ButtonLoginStories from "./button-login.stories"; ## NLdoc Light Theme - + ## NLdoc Dark Theme - + diff --git a/packages/storybook/src/web-components/button-login/button-login.mdx b/packages/storybook/src/web-components/button-login/button-login.mdx index 0e34cb49..7dcf9f47 100644 --- a/packages/storybook/src/web-components/button-login/button-login.mdx +++ b/packages/storybook/src/web-components/button-login/button-login.mdx @@ -98,15 +98,15 @@ Schaal het icoon mee met de hoogte van de button. Houd de button minimaal 48px h Default
  • - + Hover
  • - + Active
  • - + Focus
    • diff --git a/packages/web-components-stencil/src/components/button-login/button-login.scss b/packages/web-components-stencil/src/components/button-login/button-login.scss index d7b9f1a1..cfe2c31c 100644 --- a/packages/web-components-stencil/src/components/button-login/button-login.scss +++ b/packages/web-components-stencil/src/components/button-login/button-login.scss @@ -11,9 +11,9 @@ .lux-button-login { display: flex; + column-gap: var(--lux-button-login-column-gap); justify-content: flex-start; align-items: center; - gap: var(--lux-button-login-margin-inline); appearance: button; margin-inline: 0; margin-block: 0; @@ -49,7 +49,7 @@ :host(.force-state--focus) .lux-button-login, .lux-button-login:focus-visible { - outline-color: var(--lux-focus-outline-color); + outline-color: var(--lux-color-focus-outline); outline-style: var(--lux-focus-outline-style); outline-width: var(--lux-focus-outline-width); outline-offset: var(--lux-focus-outline-offset); diff --git a/proprietary/design-tokens/build-tokens.mjs b/proprietary/design-tokens/build-tokens.mjs deleted file mode 100644 index af9249fc..00000000 --- a/proprietary/design-tokens/build-tokens.mjs +++ /dev/null @@ -1,108 +0,0 @@ -import { transform } from '@divriots/style-dictionary-to-figma'; -import { permutateThemes, registerTransforms } from '@tokens-studio/sd-transforms'; -import { readFile } from 'node:fs/promises'; -import StyleDictionary from 'style-dictionary'; -import jsonListFormat from './json-list-formatter.mjs'; -import { addMediaDependentFiles } from './add-media-dependent-files.mjs'; - -registerTransforms(StyleDictionary); - -const DELIMITER = '/'; -const SRC_FOLDER = './src'; -const IMPORTED_SRC_FOLDER = `${SRC_FOLDER}/imported`; -const MANUAL_SRC_FOLDER = `${SRC_FOLDER}/manual`; -const DIST_FOLDER = './dist/'; -const COPY_FOLDER = './src/templates/'; - -const stripWords = (name) => name.replaceAll(/(_?default_?|\s\(beta\))/g, ''); -const fixNLdoc = (name, postfix = '') => name.replace(/(nldoc)(\s-\s)?/, `nldoc${postfix}`); -const normalizeFileName = (name) => - fixNLdoc(stripWords(name.toLowerCase().replaceAll(new RegExp(`${DELIMITER}{2,}`, 'g'), '')), '/'); - -const prepareTokensFile = async () => { - const $themes = JSON.parse(await readFile(`${IMPORTED_SRC_FOLDER}/$themes.json`, 'utf-8')); - const themes = permutateThemes($themes, { separator: DELIMITER }); - return themes; -}; - -const isFigmaToken = (name) => name.startsWith('figma'); -const isModeIndicatorToken = (name) => name === 'mode-on'; -const excludeSystemTokens = ({ name }) => ![isFigmaToken, isModeIndicatorToken].some((fn) => fn(name)); - -const extractModeFromName = (name) => ['light', 'dark'].find((mode) => name.indexOf(mode) >= 0); -const extractProductFromName = (name) => { - return fixNLdoc(name.split(DELIMITER)[2].toLowerCase(), '-'); -}; - -async function run() { - const $themes = await prepareTokensFile(); - - const configs = Object.entries($themes).map(([name, tokensets]) => ({ - source: [ - ...tokensets.map((tokenset) => `./**/${tokenset}.json`), - `${MANUAL_SRC_FOLDER}/missingTokens.json`, - `${MANUAL_SRC_FOLDER}/missingTokens.${extractModeFromName(name)}.json`, - ], - format: { - ...jsonListFormat, - figmaTokensPlugin: ({ dictionary }) => { - const transformedTokens = transform(dictionary.tokens); - return JSON.stringify(transformedTokens, null, 2); - }, - }, - platforms: { - jsonx: { - transformGroup: 'js', - files: [ - { - filter: excludeSystemTokens, - destination: `${DIST_FOLDER}figma-tokens.json`, - format: 'figmaTokensPlugin', - }, - ], - }, - json: { - files: [ - { - filter: excludeSystemTokens, - destination: `${DIST_FOLDER}index.json`, - format: 'json/list', - }, - ], - }, - css: { - buildPath: DIST_FOLDER, - transformGroup: 'tokens-studio', - transforms: ['name/cti/kebab'], - files: [ - { - destination: `${normalizeFileName(name)}.css`, - filter: excludeSystemTokens, - format: 'css/variables', - options: { - outputReferences: true, - }, - }, - { - destination: `${normalizeFileName(name)}-theme.css`, - format: 'css/variables', - options: { - outputReferences: true, - selector: `.lux-theme--${extractProductFromName(name)}-${extractModeFromName(name)}`, - }, - }, - ], - }, - }, - })); - - configs.forEach((cfg) => { - const sd = StyleDictionary.extend(cfg); - sd.cleanAllPlatforms(); - sd.buildAllPlatforms(); - }); - - await addMediaDependentFiles(DIST_FOLDER, COPY_FOLDER); -} - -run(); diff --git a/proprietary/design-tokens/add-media-dependent-files.mjs b/proprietary/design-tokens/build/add-media-dependent-files.mjs similarity index 100% rename from proprietary/design-tokens/add-media-dependent-files.mjs rename to proprietary/design-tokens/build/add-media-dependent-files.mjs diff --git a/proprietary/design-tokens/build/build-tokens.mjs b/proprietary/design-tokens/build/build-tokens.mjs new file mode 100644 index 00000000..e37d7851 --- /dev/null +++ b/proprietary/design-tokens/build/build-tokens.mjs @@ -0,0 +1,244 @@ +import { registerTransforms } from '@tokens-studio/sd-transforms'; +import { transform } from '@divriots/style-dictionary-to-figma'; +import { readFile } from 'node:fs/promises'; +import StyleDictionary from 'style-dictionary'; +import { IMPORTED_SRC_FOLDER, MANUAL_SRC_FOLDER, DIST_FOLDER } from './constants.mjs'; +import jsonListFormat from './json-list-formatter.mjs'; + +/** + * Transforms spacing tokens with math symbols to css calc()-values + * NOTE: because the way references work in StyleDictionary/TokenStudio it will not transform e.g. `5 * {space.cowboy}` + */ +StyleDictionary.registerTransform({ + name: 'spacing/calc', + type: 'value', + transitive: true, + matcher: function(token) { + const {type, value, isSource} = token + return type === 'spacing' && isSource && value.match(/[\+\-\*\/]/g); + }, + transformer: function(token) { + return `calc(${token.original.value})`; + } +}) + +// Register the custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio +registerTransforms(StyleDictionary); + +const cleanName = (n) => n.toLowerCase().replaceAll(/\/?(default|\s\(.+\))/g, '').replaceAll(' ', '-'); +const isFigmaToken = (name) => name.startsWith('figma'); +const excludeSystemTokens = ({ name }) => ![isFigmaToken].some((fn) => fn(name)); +const extractProductFromName = (name) => name.split('/').slice(0, -2).join('-'); +const extractModeFromName = (name) => name.split('/').slice(-2, -1).toString(); + +/** + * Gets the different groups from the themes object and groups them. + * @param {*} themes + * @returns {Object} Object with groups + */ +const getThemeGroupObjects = (themes) => { + // Sort themes by groups + const groups = {}; + themes.forEach(theme => { + if (theme.group) { + groups[cleanName(theme.group)] = [...(groups[cleanName(theme.group)] ?? []), theme]; + } else { + throw new Error( + `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`, + ); + } + }); + + return Object.entries(groups) + .reduce((_sortedObj, [k,v]) => ({ + ..._sortedObj, + [k]: v + }), {}); +}; + +/** + * Copied from \@tokens-studio/sd-transforms; + * @see https://github.com/tokens-studio/sd-transforms/blob/main/src/permutateThemes.ts#L55 + * @param {object} tokensets Object containing tokensets + * @returns {string[]} Array containing filtered tokensets + */ +const filterTokenSets = (tokensets) => { + return ( + Object.entries(tokensets) + .filter(([, val]) => val !== 'disabled') + // ensure source type sets are always ordered before enabled type sets + .sort((a, b) => { + if (a[1] === 'source' && b[1] === 'enabled') { + return -1; + } else if (a[1] === 'enabled' && b[1] === 'source') { + return 1; + } + return 0; + }) + .map(entry => entry[0]) + ); +} + +/** + * Returns Products combined with Modes and Viewports + * @param {string} name + * @param {Array.<[mode: string, viewports: Array.]>} combined Array with mode and viewports + * @returns {Array.<{name: string, mode: string, viewport: string}>} Array of objects with name, mode and viewport + */ +const getProductCombinations = (name, combined) => combined.flatMap((combo) => { + const [mode, viewports] = combo; + return viewports.map((viewport) => ({name: cleanName(name), mode, viewport})); +}); + +const getTokensByMode = (groups, mode) => filterTokenSets(groups.mode.find(({name}) => name.includes(mode)).selectedTokenSets); +const getTokensByViewport = (groups, viewport) => filterTokenSets(groups['viewport'].find(({name}) => name.includes(viewport)).selectedTokenSets); + +/** + * Creates product combinations from groups of tokens + * Product tokens combined with Mode tokens and Viewport tokens + * @param {object} groups + * @returns {Object.>} Object with path as key and a array of combined tokensets + */ +const createProducts = (groups) => { + const viewports = groups['viewport'].map(({name}) => cleanName(name)); + const modes = groups['mode'].map(({name}) => cleanName(name)); + const combined = modes.map((mode) => [mode, [...viewports]]); + const mappings = groups['nl-mapping'].map(({name}) => name); + + const logiusProducts = groups['product'] + .filter(({name}) => cleanName(name) !== 'nldoc') + .flatMap(({name, selectedTokenSets}) => { + const productCombinations = getProductCombinations(name, combined); + + selectedTokenSets = filterTokenSets(selectedTokenSets); + + return productCombinations.map(({name, mode, viewport}) => { + const modeTokens = getTokensByMode(groups, mode); + const viewportTokens = getTokensByViewport(groups, viewport); + + return [`${name}/${mode}/${viewport}`, [...selectedTokenSets, ...modeTokens, ...viewportTokens]]; + }); + } + ); + + const nldocProducts = groups['nldoc'] + .flatMap(({name, selectedTokenSets}) => { + const productCombinations = getProductCombinations(name, combined); + + const nlDocTokenSets = filterTokenSets(groups['product'].find(({name}) => cleanName(name) === 'nldoc').selectedTokenSets); + selectedTokenSets = filterTokenSets(selectedTokenSets); + + return productCombinations.map(({name, mode, viewport}) => { + const modeTokens = getTokensByMode(groups, mode); + const viewportTokens = getTokensByViewport(groups, viewport); + + return [`nldoc/${name ? name + '/' : ''}${mode}/${viewport}`, [...nlDocTokenSets, ...selectedTokenSets, ...modeTokens, ...viewportTokens]]; + }); + } + ); + + return { + ...Object.fromEntries(logiusProducts), + ...Object.fromEntries(nldocProducts), + }; +} + +/** + * Our version of permutateThemes + * @param {object} themes parsed JSON object from $themes.json + * @returns Object with path as key and a array of combined tokensets + */ +const permutateThemes = (themes) => { + const themeGroups = getThemeGroupObjects(themes); + + return createProducts(themeGroups); +}; + +/** + * Builds tokens + * + * @async + * @returns + */ +export const buildTokens = async () => { + console.info('Building Tokens'); + + const $themes = JSON.parse(await readFile(`${IMPORTED_SRC_FOLDER}/$themes.json`, 'utf-8')); + const themes = permutateThemes($themes); + + const configs = Object.entries(themes).map(([name, tokenSets]) => ({ + source: [ + `${MANUAL_SRC_FOLDER}/missingTokens.json`, + `${MANUAL_SRC_FOLDER}/missingTokens.${extractModeFromName(name)}.json`, + ...tokenSets.map((tokenSet) => `./**/${tokenSet}.json`), + ], + include: [ + './**/core/*.json', + './**/common/**/*.json', + './**/component/*.json', + './**/nl/*.json', // For now, later this will be handled different. + ], + preprocessors: ['tokens-studio'], + format: { + ...jsonListFormat, + figmaTokensPlugin: ({ dictionary }) => { + const transformedTokens = transform(dictionary.tokens); + return JSON.stringify(transformedTokens, null, 2); + }, + }, + platforms: { + jsonx: { + transformGroup: 'js', + files: [ + { + filter: excludeSystemTokens, + destination: `${DIST_FOLDER}/figma-tokens.json`, + format: 'figmaTokensPlugin', + }, + ], + }, + json: { + files: [ + { + filter: excludeSystemTokens, + destination: `${DIST_FOLDER}/index.json`, + format: 'json/list', + }, + ], + }, + css: { + buildPath: `${DIST_FOLDER}/`, + transformGroup: 'tokens-studio', + transforms: ['spacing/calc', 'name/cti/kebab', 'ts/descriptionToComment', 'ts/typography/css/fontFamily' ], + files: [ + { + destination: `${name}.css`, + filter: excludeSystemTokens, + format: 'css/variables', + options: { + outputReferences: true, + outputReferenceFallbacks: true, + }, + }, + { + destination: `${name}-theme.css`, + format: 'css/variables', + options: { + outputReferences: true, + selector: `.lux-theme--${extractProductFromName(name)}-${extractModeFromName(name)}`, + }, + } + ], + }, + }, + })); + + configs.forEach((cfg) => { + const sd = StyleDictionary.extend(cfg); + console.info(`\n🔧 Building files ${cfg.platforms.css.files.map(({destination}) => destination).join(', ')}`); + console.info(` Files used: \n${[...cfg.include, ...cfg.source].join('\n')}`); + + sd.cleanAllPlatforms(); + sd.buildAllPlatforms(); + }); +}; diff --git a/proprietary/design-tokens/build/constants.mjs b/proprietary/design-tokens/build/constants.mjs new file mode 100644 index 00000000..82354b40 --- /dev/null +++ b/proprietary/design-tokens/build/constants.mjs @@ -0,0 +1,5 @@ +export const SRC_FOLDER = './src'; +export const DIST_FOLDER = './dist'; +export const IMPORTED_SRC_FOLDER = `${SRC_FOLDER}/imported`; +export const MANUAL_SRC_FOLDER = `${SRC_FOLDER}/manual`; +export const COPY_FOLDER = `${SRC_FOLDER}/templates`; diff --git a/proprietary/design-tokens/json-list-formatter.mjs b/proprietary/design-tokens/build/json-list-formatter.mjs similarity index 100% rename from proprietary/design-tokens/json-list-formatter.mjs rename to proprietary/design-tokens/build/json-list-formatter.mjs diff --git a/proprietary/design-tokens/build/run-build.mjs b/proprietary/design-tokens/build/run-build.mjs new file mode 100644 index 00000000..5946a294 --- /dev/null +++ b/proprietary/design-tokens/build/run-build.mjs @@ -0,0 +1,11 @@ +import { DIST_FOLDER, COPY_FOLDER } from "./constants.mjs"; +import { buildTokens } from "./build-tokens.mjs"; +import { addMediaDependentFiles } from './add-media-dependent-files.mjs'; + +const run = async () => { + await buildTokens(); + // TODO: LUX-318: Toevoegen van Media-dependent-files met Style Dictionary actions oplossen. + await addMediaDependentFiles(DIST_FOLDER, COPY_FOLDER); +}; + +run(); diff --git a/proprietary/design-tokens/package.json b/proprietary/design-tokens/package.json index 007f9a24..56afb26e 100644 --- a/proprietary/design-tokens/package.json +++ b/proprietary/design-tokens/package.json @@ -20,7 +20,7 @@ "clean:dist": "rimraf dist/", "prebuild": "npm run clean", "build": "npm-run-all clean build:tokens-studio", - "build:tokens-studio": "node build-tokens.mjs", + "build:tokens-studio": "node ./build/run-build.mjs", "watch": "npm-run-all watch:**", "watch:tokens-studio": "chokidar --follow-symlinks --initial --command 'npm run build' 'src/**/*.json'" }, diff --git a/proprietary/design-tokens/src/imported/$metadata.json b/proprietary/design-tokens/src/imported/$metadata.json index 298b4b73..626147d6 100644 --- a/proprietary/design-tokens/src/imported/$metadata.json +++ b/proprietary/design-tokens/src/imported/$metadata.json @@ -1,36 +1,31 @@ { "tokenSetOrder": [ "core/default", - "mode/light", - "mode/dark (beta)", + "common/default", + "common/viewport/xl", + "common/viewport/lg", + "common/viewport/md", + "common/viewport/sm", + "common/viewport/xs", "product/Logius", + "product/Logius Blauw", "product/MijnOverheid", + "product/Elia", "product/DigiD", - "product/NLdoc - default", - "product/NLdoc - Ridderkerk", - "product/NLdoc - WHD", - "product/NLdoc - Rijksoverheid", - "viewport (beta)/xl", - "viewport (beta)/lg", - "viewport (beta)/md", - "viewport (beta)/sm", - "viewport (beta)/xs", - "common/default", - "component/button-login/default", - "component/button/default", - "component/button/variant/primary", - "component/button/variant/secondary", - "component/button/variant/tertairy", - "component/button/icon/none", - "component/button/icon/start", - "component/button/icon/end", - "component/alert/default", - "component/alert/variant/info", - "component/alert/variant/success", - "component/alert/variant/error", - "component/alert/variant/warning", - "component/alert/closable/false", - "component/alert/closable/true", - "component/link/default" + "product/NLdoc-mapping", + "mode/light", + "mode/dark", + "NLdoc/default", + "NLdoc/Ridderkerk", + "NLdoc/Waterschap Hollandse Delta", + "NLdoc/Rijksoverheid", + "component/button login", + "component/button", + "component/alert", + "component/link", + "component/icon-logo", + "nl/utrecht-button", + "nl/utrecht-alert", + "nl/utrecht-link" ] -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/$themes.json b/proprietary/design-tokens/src/imported/$themes.json index 9b5a1281..82b5a152 100644 --- a/proprietary/design-tokens/src/imported/$themes.json +++ b/proprietary/design-tokens/src/imported/$themes.json @@ -1,166 +1,915 @@ [ { - "id": "931f38d91d781b4146b648c963312ceb6eb74a1f", + "id": "50419a475e60b42568cdefda1869f4437ea01ca0", "name": "default", "$figmaStyleReferences": {}, "selectedTokenSets": { "core/default": "enabled" }, + "$figmaCollectionId": "VariableCollectionId:7:1003", + "$figmaModeId": "7:30", + "$figmaVariableReferences": { + "lux.color.grijs.100": "3acd5363f9a9158f7bae790f7823b185768b098d", + "lux.color.grijs.200": "09905477b683905108039ca2794836060c62d0a4", + "lux.color.grijs.300": "f5488bd54442662838e93f35e2ff24f459f9fc34", + "lux.color.grijs.400": "6dba33d8f18e44860166d998f2e86ad520dcf87b", + "lux.color.grijs.500": "851ea112483c089a011803fb05e91516e6133cd4", + "lux.color.grijs.600": "356e8b289c7942a3ce2d96e77a122bba6cb6f0fd", + "lux.color.grijs.700": "5d2ba55dde03b3be7bd4a8079f9bef37bc34c617", + "lux.color.grijs.800": "00f8cad10232fa92dd68858bbb8977293c069101", + "lux.color.grijs.900": "ad87fc39249abd3b085958f9aeda255806358037", + "lux.color.zwart": "e7dee49dc54f7b87db523a3a89b37ea52037b948", + "lux.color.wit": "e448db24e05fa698a538421f6f0dcbf01a005240", + "lux.color.none": "7fd54fc502acd8b77252160eeff10c394579c170", + "lux.color.lichtblauw.50": "1729b4982a96a5c8a438cf4f9fe40d39e144d9b0", + "lux.color.lichtblauw.100": "24f366140cf7a1c2b915b20d4292075ad1961c8f", + "lux.color.lichtblauw.200": "3db3ce468ef15baf016cbade7e889522d171e435", + "lux.color.lichtblauw.300": "6882becab3c586c28c9d8e6e1d14596bc59dcc2f", + "lux.color.lichtblauw.400": "3bb44ebed953edb3d6bc0f398f40595b633bdebd", + "lux.color.lichtblauw.500": "aecbccd1b7173c287bbea2f83feb7858600be29a", + "lux.color.violet.50": "50872e6c4aaa48a31d832888f2d9ab6b85f04622", + "lux.color.violet.100": "777c42099ff845cb9c6f944b8d695971d4328ef0", + "lux.color.violet.200": "c239207032571eebceedd15e0446a84f96fb5604", + "lux.color.violet.300": "def8175c93789462dc6779b624f74e26a56a6246", + "lux.color.violet.400": "2a55fdef5d52591101e3def053b1c6b31aa164e3", + "lux.color.violet.500": "bdab39df69543ea5b76ba2eaca0a77440faf441d", + "lux.color.violet.700": "562afd78d086ff273aa5b4b7957769a840766e48", + "lux.color.paars.50": "32f6f451e78eb46d21eb65ce52c40a5c6807d565", + "lux.color.paars.100": "87b6772de3bba6ef51d9b4546c8f8a6e71380ed5", + "lux.color.paars.200": "85f1847806efbbe17ffbf69afb8f82dbea7eb3ba", + "lux.color.paars.300": "1505c9fb8c78f257dc47825914306785c5c7aa69", + "lux.color.paars.400": "f51b1344e70436271af590d16ca815841a3c5851", + "lux.color.paars.500": "b59404c6077f829862e675c963dbc152c5817916", + "lux.color.hemelblauw.50": "6acafc52b76c5bcddf971323edcf14030f532c5a", + "lux.color.hemelblauw.100": "1e435a8bd2073fa9eb0956a7962fd09e41b0e0cb", + "lux.color.hemelblauw.200": "08dbe4cc54e7a8cf9e2c1ec2d69f26d1ec346042", + "lux.color.hemelblauw.300": "d03474340548105cb69223e10a422d34111f08ce", + "lux.color.hemelblauw.400": "5609d856bef93714a28fb5bdc9fcbeeba0518886", + "lux.color.hemelblauw.500": "386e2e3617048e3ee7f5c5257e72cfc33c0fb7a8", + "lux.color.hemelblauw.700": "34547fc20864c6fae6157b4b395552c3d51f7fc7", + "lux.color.donkerblauw.50": "2fa29473ad04830c41dc8f568ab3c5d7428c2b7e", + "lux.color.donkerblauw.100": "2733ee90a61bf181263aaf7fda9fe9a36fdce99b", + "lux.color.donkerblauw.200": "fc884a7f4a97193b161f43a813a57dc217d2c7a5", + "lux.color.donkerblauw.300": "244e8d72078ad1f03e901c95ffb44bdc1dd905bb", + "lux.color.donkerblauw.400": "b8efe96127483258c01627d86ba34d17e7aa5b08", + "lux.color.donkerblauw.500": "2fec4f2ff1871b97c9501bac9ac6af26caaf8aaa", + "lux.color.donkerblauw.700": "dbfe2a72a7391913cd6f089933f50bb09229ae4b", + "lux.color.mintgroen.50": "245298d0d501351f0a77a0a49eed4fadcf1a4629", + "lux.color.mintgroen.100": "5e24c565d1f5ab6142ba8f2a42fd268f0ae0eafb", + "lux.color.mintgroen.200": "ce9d0953c1a32050465b5f61d5313575ac64c81d", + "lux.color.mintgroen.300": "176f8c9d1c48461e08e23acef9bea5bc2f1e5d42", + "lux.color.mintgroen.400": "ecd1c751fd1a13765eb5fe58f9fbfb720b29de6a", + "lux.color.mintgroen.500": "7199ba6983e1cc9829f80419e61272c75df24e9e", + "lux.color.mosgroen.50": "f4f2939c62640db2f70c6b6fae1535b54959fa8b", + "lux.color.mosgroen.100": "7cfc67f6b6fa862b6ec5cf1bdbf98d22890a80c1", + "lux.color.mosgroen.200": "63fa9e353ddfd64a7602f09fb4d24b54e2060c2a", + "lux.color.mosgroen.300": "addcfc6401af8e2169f5d019c56d45abe9b407af", + "lux.color.mosgroen.400": "b35d2bf40f56d3e155de2c1a710c33492dc39b49", + "lux.color.mosgroen.500": "9707fee7493bd43d758ca0fa4502995eeb723436", + "lux.color.groen.50": "0d27615e47f657b6d9be695ee3db6e53fe662587", + "lux.color.groen.100": "4cdd88c80f46ed70b6019e7f25c6122ce634c3d3", + "lux.color.groen.200": "04af7723c4e1be1999e65cc789c06f1062ab2419", + "lux.color.groen.300": "692a2623fd5622aa9cbc63f7ce99a3ac3279e730", + "lux.color.groen.400": "d7757bd8dbe00522fda466abad7e075b4b3ef683", + "lux.color.groen.500": "7b231566b86bbba40eae3ef378217c3a1b749604", + "lux.color.groen.700": "5881ab233595edd1ae77ca148417cc7420ae51c7", + "lux.color.donkergroen.50": "2a704e6c266f38c094985a80ae4b74a6267ea77d", + "lux.color.donkergroen.100": "36f13a1a159126d81e528f3a6d9df9c1a9220023", + "lux.color.donkergroen.200": "e65b36f22c032df77e50f0c62ad7234755f95779", + "lux.color.donkergroen.300": "4164af74a4172cb234132cbf81e5a21c093cd729", + "lux.color.donkergroen.400": "e8a525c8580a87f7287fe3f94514e2f6a23c6dee", + "lux.color.bruin.50": "c15c311574aafc593a1fea38a2deebb153303beb", + "lux.color.bruin.100": "12848031f22710815f69118b918ca9a23707b802", + "lux.color.bruin.200": "baedac91f3e7f1044289eb571fe95e433060b044", + "lux.color.bruin.300": "ddd1137e5b4418ab000065f63b346b01367ad4a0", + "lux.color.bruin.400": "b351a9b1a965e2d22b3ad72f711fa17a714adb4c", + "lux.color.bruin.500": "3f86e58b98fd9a8882f09b4878db146e6fba0269", + "lux.color.donkerbruin.50": "a7a33417894a8a977e7c757c1da1c355c53f1921", + "lux.color.donkerbruin.100": "7f05e453b540a4aa9f18226c2b4fa725952caf39", + "lux.color.donkerbruin.200": "2c04417ca9d99dbb2d1eec5fc5e04bdba5db34d3", + "lux.color.donkerbruin.300": "80c89ebf6d564966baf5811da6d0e31cbee63b90", + "lux.color.donkerbruin.400": "0a2af7bca12c6aa5cda00c440a4a91132155b45e", + "lux.color.donkerbruin.500": "7f40fbb292d1414abbfa2b7d034747ab0cb0392e", + "lux.color.geel.50": "95ec3f65428318e7f4c1edb4990dae5dd4e19af2", + "lux.color.geel.100": "6af4678d323fdfe5a0d34e1cf1a126ccc98649b5", + "lux.color.geel.200": "6465dc0052057aa4dd15ea7e370c48d3ec0c6cb7", + "lux.color.geel.300": "37152bb90eea5ee31b1e627497c978c74fd27b41", + "lux.color.geel.400": "aa6ea055e5891901810d7917f89a7ec0a9ac3d8d", + "lux.color.geel.500": "8d1b92ff0e07679acad8b8635ad7f6c1fcccae82", + "lux.color.donkergeel.50": "b990327d86f2cc93569fed186106946897d85645", + "lux.color.donkergeel.100": "185431af3597630f3667c791df054d23e5aa4ad3", + "lux.color.donkergeel.200": "20845103c0ea597d21c750cb07e87c9ac0c9a1a6", + "lux.color.donkergeel.300": "3bc5ee6e35d55cf2ed3722f0c9ce823cd62a92cb", + "lux.color.donkergeel.400": "ead22efb3554165627792e5280bdf830ec1b39c5", + "lux.color.donkergeel.500": "d2d91e338f8bd86a4183c530a426a6d6e198f1c9", + "lux.color.donkergeel.700": "f4ad743a00eaaed42608a73ce4fc6d45bafa67e4", + "lux.color.oranje.50": "97cac9420a1cdfb4dcf4b75ae682277a379331c1", + "lux.color.oranje.100": "e808ab19cf3790bd8093d45ef8ca4cf33e3a937d", + "lux.color.oranje.200": "7dea0f20c779968729f03fa62be3f54f38497751", + "lux.color.oranje.300": "b43e2e25419adf0deced403b948768a31aca5fe4", + "lux.color.oranje.400": "c05ddcb3ba70a57abde24cf9e250938f2aafec97", + "lux.color.oranje.500": "1c380fb4e71fe7edc3c23e9a6437e9beb668cfd9", + "lux.color.oranje.700": "77b257ff4b11c1cebbdf92101bedd0bf852cc8ec", + "lux.color.rood.50": "8db3a384db91c09185f41db5e13e852d991378d0", + "lux.color.rood.100": "e5e25ac4bc8ad5bda50c24a9341dca3f3c246a04", + "lux.color.rood.200": "cc3b9ddc863a30a0eb49257fd5726e7ddd9c79ac", + "lux.color.rood.300": "e0e81cb67ea098dc0746dfa3951996463a209479", + "lux.color.rood.400": "fcb7e2baff30b4d2437887984342c276ffc09b17", + "lux.color.rood.500": "7845d2727e630d7727c410c57a58879710f33a1e", + "lux.color.rood.700": "4a54a5587515220a40504ac98982d3914c7fcbab", + "lux.color.roze.50": "1e70ed74f024786a97f7da44df4ef7bc0632e544", + "lux.color.roze.100": "31a8574827d374523447062f55fb816ead8b31af", + "lux.color.roze.200": "e00a41dff0169d03b08875f43e36ac37613f5088", + "lux.color.roze.300": "9ff16c9ffde4672bce2fb62c8c6c4bee0baecac8", + "lux.color.roze.400": "fb4f957372e70578100774b73a1be9a9f0b0651a", + "lux.color.roze.500": "edc6ce5ac527890c6ed3bc8f9c074a0eaf3984bb", + "lux.color.robijnrood.50": "334eff75e47060e73e68b981200540007fe490b8", + "lux.color.robijnrood.100": "9ecd4c1ac60d480e432153d5f947a6cd7bff7072", + "lux.color.robijnrood.200": "25ef4a5505782c660af05dbeb408170cc427abf2", + "lux.color.robijnrood.300": "61f36815f0363e51929319fa65f35cf470ddafd7", + "lux.color.robijnrood.400": "7e3c15394bb64bd8db4272d86604e228d2e1a328", + "lux.color.robijnrood.500": "d2bcdbf6c61f1903460bd6ff1db3ee8c9cf193e4", + "lux.color.lintblauw.50": "85d1f5ec2ab338d9057f8c1d70ff6188436c7fa1", + "lux.color.lintblauw.100": "7ee1ec352e678623a0441e34e24573d0001fdcef", + "lux.color.lintblauw.200": "59e2c53afb10b4a420e78fb37d7c0a885671b463", + "lux.color.lintblauw.300": "4321191d649eacc95c126cad70aa95de82d86636", + "lux.color.lintblauw.400": "bd9f98c8120abd16c856aed0412f637c9f096852", + "lux.color.lintblauw.500": "6957f755d942aa22fbd7ab8f9e5fd1d886f1bbe5", + "lux.color.donkergroen.500": "c399adb532caed1f0ed6c147e6be18fd2f65c5d0" + }, "group": "core" }, { - "id": "d85910f43f2a886285b3474bc9142a39beb710ad", + "id": "3bfca503d4cf6e808cede84ac1aa8ac3c8905f54", "name": "default", "$figmaStyleReferences": {}, "selectedTokenSets": { - "component/button-login/default": "enabled", - "component/button/default": "enabled", - "component/button/variant/primary": "enabled", - "component/button/variant/secondary": "enabled", - "component/button/variant/tertairy": "enabled", - "component/button/icon/none": "enabled", - "component/button/icon/end": "enabled", - "component/button/icon/start": "enabled", - "component/alert/default": "enabled", - "component/alert/variant/info": "enabled", - "component/alert/variant/success": "enabled", - "component/alert/variant/error": "enabled", - "component/alert/variant/warning": "enabled", - "component/alert/closable/false": "enabled", - "component/alert/closable/true": "enabled", - "component/link/default": "enabled" + "common/default": "enabled" + }, + "$figmaCollectionId": "VariableCollectionId:46:7", + "$figmaModeId": "46:0", + "$figmaVariableReferences": { + "lux.focus.outline-offset": "c56e3f5cd7a6ef8cc90fc3e59cfc06021f59de08", + "lux.size.icon": "a3c95921a6a2913b21bb14a0b67255ae7db101ca", + "lux.grid.max-inline": "5bb1f77e522415bef3624175933ccdb23c2f8593" }, - "group": "components" + "group": "common" }, { - "id": "3284297cf94eb80c30de9e0fae554d3e67dab93a", + "id": "bee06213af94fc1649253b1c921cdaff63bc1cbe", "name": "Logius", "$figmaStyleReferences": {}, "selectedTokenSets": { - "product/Logius": "enabled" + "product/Logius": "enabled", + "core/default": "source" + }, + "$figmaCollectionId": "VariableCollectionId:1:2", + "$figmaModeId": "1:0", + "$figmaVariableReferences": { + "lux.color.brand.default": "83157ab11bdba1943e590ad79ea2225dda0ad58f", + "lux.color.brand.subdued": "01da129adda02738bfac20e8e1d102c4081102f0", + "lux.color.brand.hover": "9c1838d9a820b37f1f9653b314f3790ef6f89aa1", + "lux.border-radius.default": "64b2ef7d77250ea0baf36a3bf871e9722afe0270", + "lux.focus.outline-width": "f5a4a57f5903a4b25c23bdbf214560fd3e56083f", + "lux.font-family.primary": "6ca41422b4800497ec7ad853c83135355adb2435", + "lux.size.target": "4ea055b586b578a6c700046888aa99d660d1bafc", + "lux.line-height.s": "2619c094136954bb145674fa4efc4a4d2ff5ce9a", + "lux.line-height.m": "fc7b0d711005fd3ef0bcec985dddc059afaf665a", + "lux.line-height.l": "17edc5cda06d4c6a665326c1b6a541c3e81aa308", + "lux.line-height.xl": "d52cfac2d8816aee5b6474ee19606543295c1ebd", + "lux.line-height.2xl": "79384e6f1f37e8176cc56ce7bf2e8a138eeff29a", + "lux.font-size.s": "d37fc0499696a0f71358879fb3b4cf46b8069f4b", + "lux.font-size.m": "9f043845ef7e00361630954eafdd0a7d3855fa6b", + "lux.font-size.l": "6e16652aee7872150e29c42a57688fa3d39f05be", + "lux.font-size.xl": "0786642f99e321f1ff532a1305766c90ac18b735", + "lux.font-size.2xl": "9135fe45995dce093f2f44116431fded977dbd50", + "product.button.secondary.background-color": "467c8346bb98fd26172ff6535d4047f4e7a7368f", + "product.button.secondary.border-color": "4f64fa12c59b87d66a2b3e4a769e0b7fa93d206a", + "product.button.secondary.color": "c86bfa8fb14d9a0baeea896141a00c05a00c0895", + "product.button.secondary.hover.border-color": "861211bc78f2ad6fd36c78ce2c87b90750b8f49b", + "product.button.secondary.hover.color": "39d3a00ed9fa091949c5559deeeb143c36665fa1", + "product.button.secondary.hover.background-color": "0967172519a43ace30023ae950424d569fa46d3e", + "product.button.tertiary.color": "9a7b4ba4ac20971ae8b32e7e9f1964192e2105af", + "product.button.tertiary.hover.color": "824c190bc51af04fa7deb3e78b7f9d4ce9866ee5", + "product.button.tertiary.hover.background-color": "8bf076fce339bc2db2b1e546937c198a9775a7f1", + "product.button.font-size": "51343e03bcc4e8f5f37dedbfcccee27bde12e85a", + "product.button.primary.font-size": "d0b6c6d3831059cd1da47de5a0a81e4405238568", + "figma.size.icon.wrapper-height": "73ddfa6479edcfd7f028cf491accf299e34cad52", + "figma.focus.outline-radius": "6ff2aa7a455af6da2186616eb91e4b961d65c85d" }, "group": "product" }, { - "id": "57af11441eb1cede5559de27f3318f16a184ba76", + "id": "c3cc38eafef6c27a3303aecfffc4678a0ffb2683", + "name": "Logius Blauw", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "product/Logius Blauw": "enabled", + "core/default": "source" + }, + "$figmaCollectionId": "VariableCollectionId:1:2", + "$figmaModeId": "2641:0", + "$figmaVariableReferences": { + "lux.color.brand.default": "83157ab11bdba1943e590ad79ea2225dda0ad58f", + "lux.color.brand.subdued": "01da129adda02738bfac20e8e1d102c4081102f0", + "lux.color.brand.hover": "9c1838d9a820b37f1f9653b314f3790ef6f89aa1", + "lux.border-radius.default": "64b2ef7d77250ea0baf36a3bf871e9722afe0270", + "lux.focus.outline-width": "f5a4a57f5903a4b25c23bdbf214560fd3e56083f", + "lux.font-family.primary": "6ca41422b4800497ec7ad853c83135355adb2435", + "lux.line-height.s": "2619c094136954bb145674fa4efc4a4d2ff5ce9a", + "lux.line-height.m": "fc7b0d711005fd3ef0bcec985dddc059afaf665a", + "lux.line-height.l": "17edc5cda06d4c6a665326c1b6a541c3e81aa308", + "lux.line-height.xl": "d52cfac2d8816aee5b6474ee19606543295c1ebd", + "lux.line-height.2xl": "79384e6f1f37e8176cc56ce7bf2e8a138eeff29a", + "lux.font-size.s": "d37fc0499696a0f71358879fb3b4cf46b8069f4b", + "lux.font-size.m": "9f043845ef7e00361630954eafdd0a7d3855fa6b", + "lux.font-size.l": "6e16652aee7872150e29c42a57688fa3d39f05be", + "lux.font-size.xl": "0786642f99e321f1ff532a1305766c90ac18b735", + "lux.font-size.2xl": "9135fe45995dce093f2f44116431fded977dbd50", + "product.button.secondary.background-color": "467c8346bb98fd26172ff6535d4047f4e7a7368f", + "product.button.secondary.border-color": "4f64fa12c59b87d66a2b3e4a769e0b7fa93d206a", + "product.button.secondary.color": "c86bfa8fb14d9a0baeea896141a00c05a00c0895", + "product.button.secondary.hover.border-color": "861211bc78f2ad6fd36c78ce2c87b90750b8f49b", + "product.button.secondary.hover.color": "39d3a00ed9fa091949c5559deeeb143c36665fa1", + "product.button.secondary.hover.background-color": "0967172519a43ace30023ae950424d569fa46d3e", + "product.button.tertiary.color": "9a7b4ba4ac20971ae8b32e7e9f1964192e2105af", + "product.button.tertiary.hover.color": "824c190bc51af04fa7deb3e78b7f9d4ce9866ee5", + "product.button.tertiary.hover.background-color": "8bf076fce339bc2db2b1e546937c198a9775a7f1", + "product.button.font-size": "51343e03bcc4e8f5f37dedbfcccee27bde12e85a", + "product.button.primary.font-size": "d0b6c6d3831059cd1da47de5a0a81e4405238568", + "lux.size.target": "4ea055b586b578a6c700046888aa99d660d1bafc", + "figma.size.icon.wrapper-height": "73ddfa6479edcfd7f028cf491accf299e34cad52", + "figma.focus.outline-radius": "6ff2aa7a455af6da2186616eb91e4b961d65c85d" + }, + "group": "product" + }, + { + "id": "ed4f3512183afbe186567d3bd66bd514ed5757e0", "name": "MijnOverheid", "$figmaStyleReferences": {}, "selectedTokenSets": { - "product/MijnOverheid": "enabled" + "product/MijnOverheid": "enabled", + "core/default": "source" + }, + "$figmaCollectionId": "VariableCollectionId:1:2", + "$figmaModeId": "1:3", + "$figmaVariableReferences": { + "lux.color.brand.default": "83157ab11bdba1943e590ad79ea2225dda0ad58f", + "lux.color.brand.subdued": "01da129adda02738bfac20e8e1d102c4081102f0", + "lux.color.brand.hover": "9c1838d9a820b37f1f9653b314f3790ef6f89aa1", + "lux.border-radius.default": "64b2ef7d77250ea0baf36a3bf871e9722afe0270", + "lux.focus.outline-width": "f5a4a57f5903a4b25c23bdbf214560fd3e56083f", + "lux.font-family.primary": "6ca41422b4800497ec7ad853c83135355adb2435", + "lux.line-height.s": "2619c094136954bb145674fa4efc4a4d2ff5ce9a", + "lux.line-height.m": "fc7b0d711005fd3ef0bcec985dddc059afaf665a", + "lux.line-height.l": "17edc5cda06d4c6a665326c1b6a541c3e81aa308", + "lux.line-height.xl": "d52cfac2d8816aee5b6474ee19606543295c1ebd", + "lux.line-height.2xl": "79384e6f1f37e8176cc56ce7bf2e8a138eeff29a", + "lux.font-size.s": "d37fc0499696a0f71358879fb3b4cf46b8069f4b", + "lux.font-size.m": "9f043845ef7e00361630954eafdd0a7d3855fa6b", + "lux.font-size.l": "6e16652aee7872150e29c42a57688fa3d39f05be", + "lux.font-size.xl": "0786642f99e321f1ff532a1305766c90ac18b735", + "lux.font-size.2xl": "9135fe45995dce093f2f44116431fded977dbd50", + "lux.size.target": "4ea055b586b578a6c700046888aa99d660d1bafc", + "product.button.secondary.background-color": "467c8346bb98fd26172ff6535d4047f4e7a7368f", + "product.button.secondary.border-color": "4f64fa12c59b87d66a2b3e4a769e0b7fa93d206a", + "product.button.secondary.color": "c86bfa8fb14d9a0baeea896141a00c05a00c0895", + "product.button.secondary.hover.border-color": "861211bc78f2ad6fd36c78ce2c87b90750b8f49b", + "product.button.secondary.hover.color": "39d3a00ed9fa091949c5559deeeb143c36665fa1", + "product.button.secondary.hover.background-color": "0967172519a43ace30023ae950424d569fa46d3e", + "product.button.tertiary.color": "9a7b4ba4ac20971ae8b32e7e9f1964192e2105af", + "product.button.tertiary.hover.color": "824c190bc51af04fa7deb3e78b7f9d4ce9866ee5", + "product.button.tertiary.hover.background-color": "8bf076fce339bc2db2b1e546937c198a9775a7f1", + "product.button.font-size": "51343e03bcc4e8f5f37dedbfcccee27bde12e85a", + "product.button.primary.font-size": "d0b6c6d3831059cd1da47de5a0a81e4405238568", + "figma.focus.outline-radius": "6ff2aa7a455af6da2186616eb91e4b961d65c85d" }, "group": "product" }, { - "id": "78967fbf397f5124663684577db1269441d85d09", + "id": "0bbe1088f1390f81b89bd2ee5077eb3c7c88eb72", "name": "DigiD", "$figmaStyleReferences": {}, "selectedTokenSets": { - "product/DigiD": "enabled" + "product/DigiD": "enabled", + "core/default": "source", + "product/Logius": "source" + }, + "$figmaCollectionId": "VariableCollectionId:1:2", + "$figmaModeId": "1:4", + "$figmaVariableReferences": { + "lux.color.brand.default": "83157ab11bdba1943e590ad79ea2225dda0ad58f", + "lux.color.brand.subdued": "01da129adda02738bfac20e8e1d102c4081102f0", + "lux.color.brand.hover": "9c1838d9a820b37f1f9653b314f3790ef6f89aa1", + "lux.border-radius.default": "64b2ef7d77250ea0baf36a3bf871e9722afe0270", + "lux.focus.outline-width": "f5a4a57f5903a4b25c23bdbf214560fd3e56083f", + "lux.font-family.primary": "6ca41422b4800497ec7ad853c83135355adb2435", + "lux.size.target": "4ea055b586b578a6c700046888aa99d660d1bafc", + "product.button.secondary.background-color": "467c8346bb98fd26172ff6535d4047f4e7a7368f", + "product.button.secondary.border-color": "4f64fa12c59b87d66a2b3e4a769e0b7fa93d206a", + "product.button.secondary.color": "c86bfa8fb14d9a0baeea896141a00c05a00c0895", + "product.button.secondary.hover.border-color": "861211bc78f2ad6fd36c78ce2c87b90750b8f49b", + "product.button.secondary.hover.color": "39d3a00ed9fa091949c5559deeeb143c36665fa1", + "product.button.secondary.hover.background-color": "0967172519a43ace30023ae950424d569fa46d3e", + "product.button.tertiary.color": "9a7b4ba4ac20971ae8b32e7e9f1964192e2105af", + "product.button.tertiary.hover.color": "824c190bc51af04fa7deb3e78b7f9d4ce9866ee5", + "product.button.tertiary.hover.background-color": "8bf076fce339bc2db2b1e546937c198a9775a7f1", + "product.button.font-size": "51343e03bcc4e8f5f37dedbfcccee27bde12e85a", + "product.button.primary.font-size": "d0b6c6d3831059cd1da47de5a0a81e4405238568", + "figma.focus.outline-radius": "6ff2aa7a455af6da2186616eb91e4b961d65c85d" }, "group": "product" }, { - "id": "1768c551ca723179d433b97865cfbe0d90bcb4a8", - "name": "NLdoc - default", + "id": "8ddf21785e276d93558bc32a652cabba5ab5f656", + "name": "NLdoc", "$figmaStyleReferences": {}, "selectedTokenSets": { - "product/NLdoc - default": "enabled" + "core/default": "source", + "product/NLdoc-mapping": "enabled" + }, + "$figmaCollectionId": "VariableCollectionId:1:2", + "$figmaModeId": "123:0", + "$figmaVariableReferences": { + "lux.color.brand.default": "83157ab11bdba1943e590ad79ea2225dda0ad58f", + "lux.color.brand.subdued": "01da129adda02738bfac20e8e1d102c4081102f0", + "lux.color.brand.hover": "9c1838d9a820b37f1f9653b314f3790ef6f89aa1", + "lux.border-radius.default": "64b2ef7d77250ea0baf36a3bf871e9722afe0270", + "lux.focus.outline-width": "f5a4a57f5903a4b25c23bdbf214560fd3e56083f", + "lux.font-family.primary": "6ca41422b4800497ec7ad853c83135355adb2435", + "lux.line-height.s": "2619c094136954bb145674fa4efc4a4d2ff5ce9a", + "lux.line-height.m": "fc7b0d711005fd3ef0bcec985dddc059afaf665a", + "lux.line-height.l": "17edc5cda06d4c6a665326c1b6a541c3e81aa308", + "lux.line-height.xl": "d52cfac2d8816aee5b6474ee19606543295c1ebd", + "lux.line-height.2xl": "79384e6f1f37e8176cc56ce7bf2e8a138eeff29a", + "lux.font-size.s": "d37fc0499696a0f71358879fb3b4cf46b8069f4b", + "lux.font-size.m": "9f043845ef7e00361630954eafdd0a7d3855fa6b", + "lux.font-size.l": "6e16652aee7872150e29c42a57688fa3d39f05be", + "lux.font-size.xl": "0786642f99e321f1ff532a1305766c90ac18b735", + "lux.font-size.2xl": "9135fe45995dce093f2f44116431fded977dbd50", + "product.button.secondary.background-color": "467c8346bb98fd26172ff6535d4047f4e7a7368f", + "product.button.secondary.border-color": "4f64fa12c59b87d66a2b3e4a769e0b7fa93d206a", + "product.button.secondary.color": "c86bfa8fb14d9a0baeea896141a00c05a00c0895", + "product.button.secondary.hover.border-color": "861211bc78f2ad6fd36c78ce2c87b90750b8f49b", + "product.button.secondary.hover.color": "39d3a00ed9fa091949c5559deeeb143c36665fa1", + "product.button.secondary.hover.background-color": "0967172519a43ace30023ae950424d569fa46d3e", + "product.button.tertiary.color": "9a7b4ba4ac20971ae8b32e7e9f1964192e2105af", + "product.button.tertiary.hover.color": "824c190bc51af04fa7deb3e78b7f9d4ce9866ee5", + "product.button.tertiary.hover.background-color": "8bf076fce339bc2db2b1e546937c198a9775a7f1", + "product.button.font-size": "51343e03bcc4e8f5f37dedbfcccee27bde12e85a", + "product.button.primary.font-size": "d0b6c6d3831059cd1da47de5a0a81e4405238568", + "figma.focus.outline-radius": "6ff2aa7a455af6da2186616eb91e4b961d65c85d" }, "group": "product" }, { - "id": "b5537d136e2b4795c141adb2710d2f6fab6f6203", - "name": "NLdoc - Ridderkerk", + "id": "773e4852cfcc71ef32dbd36c8904bc54519ed1cf", + "name": "Elia", "$figmaStyleReferences": {}, "selectedTokenSets": { - "product/NLdoc - Ridderkerk": "enabled" + "product/Elia": "enabled", + "core/default": "source", + "product/Logius": "source" + }, + "$figmaCollectionId": "VariableCollectionId:1:2", + "$figmaModeId": "2418:0", + "$figmaVariableReferences": { + "lux.color.brand.default": "83157ab11bdba1943e590ad79ea2225dda0ad58f", + "lux.color.brand.subdued": "01da129adda02738bfac20e8e1d102c4081102f0", + "lux.color.brand.hover": "9c1838d9a820b37f1f9653b314f3790ef6f89aa1", + "lux.border-radius.default": "64b2ef7d77250ea0baf36a3bf871e9722afe0270", + "lux.focus.outline-width": "f5a4a57f5903a4b25c23bdbf214560fd3e56083f", + "lux.font-family.primary": "6ca41422b4800497ec7ad853c83135355adb2435", + "product.button.secondary.background-color": "467c8346bb98fd26172ff6535d4047f4e7a7368f", + "product.button.secondary.border-color": "4f64fa12c59b87d66a2b3e4a769e0b7fa93d206a", + "product.button.secondary.color": "c86bfa8fb14d9a0baeea896141a00c05a00c0895", + "product.button.secondary.hover.border-color": "861211bc78f2ad6fd36c78ce2c87b90750b8f49b", + "product.button.secondary.hover.color": "39d3a00ed9fa091949c5559deeeb143c36665fa1", + "product.button.secondary.hover.background-color": "0967172519a43ace30023ae950424d569fa46d3e", + "product.button.tertiary.color": "9a7b4ba4ac20971ae8b32e7e9f1964192e2105af", + "product.button.tertiary.hover.color": "824c190bc51af04fa7deb3e78b7f9d4ce9866ee5", + "product.button.tertiary.hover.background-color": "8bf076fce339bc2db2b1e546937c198a9775a7f1", + "product.button.font-size": "51343e03bcc4e8f5f37dedbfcccee27bde12e85a", + "product.button.primary.font-size": "d0b6c6d3831059cd1da47de5a0a81e4405238568", + "figma.focus.outline-radius": "6ff2aa7a455af6da2186616eb91e4b961d65c85d" }, "group": "product" }, { - "id": "757c18c67c7cbf5b4677a294fca831c39f8a3e62", - "name": "NLdoc - Rijksoverheid", + "id": "ca7232dbc42b4ec7cd28e5feccdd2d66961aacdb", + "name": "xl", "$figmaStyleReferences": {}, "selectedTokenSets": { - "product/NLdoc - Rijksoverheid": "enabled" + "common/viewport/xl": "enabled" }, - "group": "product" + "$figmaCollectionId": "VariableCollectionId:7:318", + "$figmaModeId": "7:1", + "$figmaVariableReferences": { + "figma.screen-size": "bd0f39c7c8c9102a0b039d307c83b865a9397bc4", + "lux.grid.gutter": "fb62d65a5e23361346244bc73f4dfcaae9ba7b93", + "lux.grid.margin": "54f0a94e363bd74617e3cd548fa8f620d094c276", + "lux.size.target [oud]": "7af716f3d3c7762410466abac2ca5b406f36d187", + "figma.viewport.size.icon.wrapper-height": "2ba54b791c9e25156587576bce4d200b6a981f1a", + "viewport.font-size.s": "9b5432916c6a4f69c307613b4aea0693acaf2071", + "viewport.font-size.m": "0fe7684dffb3bb48b63e9154326789ecc8f9b6fa", + "viewport.font-size.l": "1d24e0ee7c507a4505150718df32b67a29fcfbeb", + "viewport.font-size.xl": "9cdf244ae7a4a82fafc1479d18fa618cf97c812d", + "viewport.font-size.2xl": "0e26c1015df14ef3a881ca6e444598c57f537a2b", + "viewport.line-height.s": "d306b39bf721cbdf7fa1e19bac91ade214e227ac", + "viewport.line-height.m": "d3d94c308fe81462caeff342fb387da44d1928aa", + "viewport.line-height.l": "6f1746627185b21ccd561b3db60c939e88b8d954", + "viewport.line-height.xl": "f9fef75f0b0db9b25f5536c3cac53f34705e715b", + "viewport.line-height.2xl": "f96bef2e356970b4f17662d9f9a0834a79a7c1dd", + "viewport.rijkslint.wordmark.75%.padding-block-start": "9c8f0b8f28c1aa8075b44cc141c5fde9039dfa1a", + "viewport.rijkslint.wordmark.default.padding-block-start": "f6f65e2e69561099f6a3e7261feba19f3cd5948d" + }, + "group": "viewport (beta)" }, { - "id": "7873d754073eb55055cb4e1c67a71c9847f08bf5", - "name": "NLdoc - WHD", + "id": "5c25614014de1b8f22d535fa3c2b9fa71ea34b86", + "name": "lg", "$figmaStyleReferences": {}, "selectedTokenSets": { - "product/NLdoc - WHD": "enabled" + "common/viewport/lg": "enabled" }, - "group": "product" + "$figmaCollectionId": "VariableCollectionId:7:318", + "$figmaModeId": "9:0", + "$figmaVariableReferences": { + "figma.screen-size": "bd0f39c7c8c9102a0b039d307c83b865a9397bc4", + "lux.grid.gutter": "fb62d65a5e23361346244bc73f4dfcaae9ba7b93", + "lux.grid.margin": "54f0a94e363bd74617e3cd548fa8f620d094c276", + "lux.size.target [oud]": "7af716f3d3c7762410466abac2ca5b406f36d187", + "figma.viewport.size.icon.wrapper-height": "2ba54b791c9e25156587576bce4d200b6a981f1a", + "viewport.font-size.s": "9b5432916c6a4f69c307613b4aea0693acaf2071", + "viewport.font-size.m": "0fe7684dffb3bb48b63e9154326789ecc8f9b6fa", + "viewport.font-size.l": "1d24e0ee7c507a4505150718df32b67a29fcfbeb", + "viewport.font-size.xl": "9cdf244ae7a4a82fafc1479d18fa618cf97c812d", + "viewport.font-size.2xl": "0e26c1015df14ef3a881ca6e444598c57f537a2b", + "viewport.line-height.s": "d306b39bf721cbdf7fa1e19bac91ade214e227ac", + "viewport.line-height.m": "d3d94c308fe81462caeff342fb387da44d1928aa", + "viewport.line-height.l": "6f1746627185b21ccd561b3db60c939e88b8d954", + "viewport.line-height.xl": "f9fef75f0b0db9b25f5536c3cac53f34705e715b", + "viewport.line-height.2xl": "f96bef2e356970b4f17662d9f9a0834a79a7c1dd", + "viewport.rijkslint.wordmark.75%.padding-block-start": "9c8f0b8f28c1aa8075b44cc141c5fde9039dfa1a", + "viewport.rijkslint.wordmark.default.padding-block-start": "f6f65e2e69561099f6a3e7261feba19f3cd5948d" + }, + "group": "viewport (beta)" + }, + { + "id": "73f5712ab978f45d84412a318fe7bb6062bbaffd", + "name": "md", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "common/viewport/md": "enabled" + }, + "$figmaCollectionId": "VariableCollectionId:7:318", + "$figmaModeId": "9:1", + "$figmaVariableReferences": { + "figma.screen-size": "bd0f39c7c8c9102a0b039d307c83b865a9397bc4", + "lux.grid.gutter": "fb62d65a5e23361346244bc73f4dfcaae9ba7b93", + "lux.grid.margin": "54f0a94e363bd74617e3cd548fa8f620d094c276", + "lux.size.target [oud]": "7af716f3d3c7762410466abac2ca5b406f36d187", + "figma.viewport.size.icon.wrapper-height": "2ba54b791c9e25156587576bce4d200b6a981f1a", + "viewport.font-size.s": "9b5432916c6a4f69c307613b4aea0693acaf2071", + "viewport.font-size.m": "0fe7684dffb3bb48b63e9154326789ecc8f9b6fa", + "viewport.font-size.l": "1d24e0ee7c507a4505150718df32b67a29fcfbeb", + "viewport.font-size.xl": "9cdf244ae7a4a82fafc1479d18fa618cf97c812d", + "viewport.font-size.2xl": "0e26c1015df14ef3a881ca6e444598c57f537a2b", + "viewport.line-height.s": "d306b39bf721cbdf7fa1e19bac91ade214e227ac", + "viewport.line-height.m": "d3d94c308fe81462caeff342fb387da44d1928aa", + "viewport.line-height.l": "6f1746627185b21ccd561b3db60c939e88b8d954", + "viewport.line-height.xl": "f9fef75f0b0db9b25f5536c3cac53f34705e715b", + "viewport.line-height.2xl": "f96bef2e356970b4f17662d9f9a0834a79a7c1dd", + "viewport.rijkslint.wordmark.75%.padding-block-start": "9c8f0b8f28c1aa8075b44cc141c5fde9039dfa1a", + "viewport.rijkslint.wordmark.default.padding-block-start": "f6f65e2e69561099f6a3e7261feba19f3cd5948d" + }, + "group": "viewport (beta)" + }, + { + "id": "154d7bdc05b20136b496736e2deba6b0a295253f", + "name": "sm", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "common/viewport/sm": "enabled" + }, + "$figmaCollectionId": "VariableCollectionId:7:318", + "$figmaModeId": "9:2", + "$figmaVariableReferences": { + "figma.screen-size": "bd0f39c7c8c9102a0b039d307c83b865a9397bc4", + "lux.grid.gutter": "fb62d65a5e23361346244bc73f4dfcaae9ba7b93", + "lux.grid.margin": "54f0a94e363bd74617e3cd548fa8f620d094c276", + "lux.size.target [oud]": "7af716f3d3c7762410466abac2ca5b406f36d187", + "viewport.font-size.s": "9b5432916c6a4f69c307613b4aea0693acaf2071", + "viewport.font-size.m": "0fe7684dffb3bb48b63e9154326789ecc8f9b6fa", + "viewport.font-size.l": "1d24e0ee7c507a4505150718df32b67a29fcfbeb", + "viewport.font-size.xl": "9cdf244ae7a4a82fafc1479d18fa618cf97c812d", + "viewport.font-size.2xl": "0e26c1015df14ef3a881ca6e444598c57f537a2b", + "figma.viewport.size.icon.wrapper-height": "2ba54b791c9e25156587576bce4d200b6a981f1a", + "viewport.line-height.s": "d306b39bf721cbdf7fa1e19bac91ade214e227ac", + "viewport.line-height.m": "d3d94c308fe81462caeff342fb387da44d1928aa", + "viewport.line-height.l": "6f1746627185b21ccd561b3db60c939e88b8d954", + "viewport.line-height.xl": "f9fef75f0b0db9b25f5536c3cac53f34705e715b", + "viewport.line-height.2xl": "f96bef2e356970b4f17662d9f9a0834a79a7c1dd", + "viewport.rijkslint.wordmark.75%.padding-block-start": "9c8f0b8f28c1aa8075b44cc141c5fde9039dfa1a", + "viewport.rijkslint.wordmark.default.padding-block-start": "f6f65e2e69561099f6a3e7261feba19f3cd5948d" + }, + "group": "viewport (beta)" + }, + { + "id": "2d26412db53d018f238e08009acddbb6c5708ec6", + "name": "xs", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "common/viewport/xs": "enabled" + }, + "$figmaCollectionId": "VariableCollectionId:7:318", + "$figmaModeId": "54:0", + "$figmaVariableReferences": { + "figma.screen-size": "bd0f39c7c8c9102a0b039d307c83b865a9397bc4", + "lux.grid.gutter": "fb62d65a5e23361346244bc73f4dfcaae9ba7b93", + "lux.grid.margin": "54f0a94e363bd74617e3cd548fa8f620d094c276", + "lux.size.target [oud]": "7af716f3d3c7762410466abac2ca5b406f36d187", + "figma.viewport.size.icon.wrapper-height": "2ba54b791c9e25156587576bce4d200b6a981f1a", + "viewport.font-size.s": "9b5432916c6a4f69c307613b4aea0693acaf2071", + "viewport.font-size.m": "0fe7684dffb3bb48b63e9154326789ecc8f9b6fa", + "viewport.font-size.l": "1d24e0ee7c507a4505150718df32b67a29fcfbeb", + "viewport.font-size.xl": "9cdf244ae7a4a82fafc1479d18fa618cf97c812d", + "viewport.font-size.2xl": "0e26c1015df14ef3a881ca6e444598c57f537a2b", + "viewport.line-height.s": "d306b39bf721cbdf7fa1e19bac91ade214e227ac", + "viewport.line-height.m": "d3d94c308fe81462caeff342fb387da44d1928aa", + "viewport.line-height.l": "6f1746627185b21ccd561b3db60c939e88b8d954", + "viewport.line-height.xl": "f9fef75f0b0db9b25f5536c3cac53f34705e715b", + "viewport.line-height.2xl": "f96bef2e356970b4f17662d9f9a0834a79a7c1dd", + "viewport.rijkslint.wordmark.75%.padding-block-start": "9c8f0b8f28c1aa8075b44cc141c5fde9039dfa1a", + "viewport.rijkslint.wordmark.default.padding-block-start": "f6f65e2e69561099f6a3e7261feba19f3cd5948d" + }, + "group": "viewport (beta)" }, { - "id": "7121b8b2014e14d081ccf1faf75a797585926a9e", + "id": "b522b8289e8e8b4c813abd3b946888d01b04ad35", "name": "light", "$figmaStyleReferences": {}, "selectedTokenSets": { "mode/light": "enabled" }, + "$figmaCollectionId": "VariableCollectionId:1:3", + "$figmaModeId": "1:1", + "$figmaVariableReferences": { + "lux.color.foreground.default": "0dbc56d9819e593d6a8cd54014fc7a03d6454b70", + "lux.color.foreground.subdued": "496be6acb62bd4ceb2450e344165342ab50db412", + "lux.color.foreground.onEmphasis": "1a7695f2e9efafc401716bdff36aaf4316967b4f", + "lux.color.foreground.link": "37ce3486dc0539f44db4fb313e200fbb8145a87b", + "lux.color.background.default": "1231868b384fb39d4527670ae7f28a5c3ce1b53b", + "lux.color.background.subdued": "7a8b1f9d1e8c7231107074f12f606b2f461bbf83", + "lux.color.background.hover": "075eb68616dc21ea861df47367d163ee4b312dcf", + "lux.color.border.default": "8e76379ac4e551ae0801ade8c58adca7feb2781d", + "lux.color.border.subdued": "50c27cec537f93bc936ce94394a38d07f6b2ee90", + "lux.color.border.strong": "4a98c05549785c912efa1c994c3dcc1f6355afe1", + "lux.color.canvas": "6c95ed2c3b2295d0951e2eba8377ca9d97d2fef3", + "lux.color.feedback.success.default": "12dac3e6a1a250b31300d9482590bb7f381540da", + "lux.color.feedback.success.subdued": "510b3f49f1876ce65f172ea74ec59b9ca9e15c22", + "lux.color.feedback.info.default": "13c3510f84de2842120ad86081eb51d70638d46c", + "lux.color.feedback.info.subdued": "d35bde1edd973c8bf4dd506651713e0059cab064", + "lux.color.feedback.error.default": "3463d7e9b353cfbb8cce21dcc3b6e12c32add87b", + "lux.color.feedback.error.subdued": "6e61bb6e59b35cd980ff62839edfda4b7f39b204", + "lux.color.feedback.warning.default": "4d3fe61e687e78dc20849672d2f7949da22bf893", + "lux.color.feedback.warning.subdued": "39afe39830634962745813dd28bea39189519047", + "lux.color.focus.outline": "abc33ce6d7d40c634df64f49aa15b5d872de54b7", + "mode.link.color": "a7da784e62cafb79406997feac3d85e953be27b6", + "mode.link.visited.color": "e9ce184c570b2b135680a8a0424dbd566607aeb1", + "mode.link.hover.color": "13ed7f99f37a7eb4a3de1cd3c646d6d9e295fd83", + "mode.link.active.color": "d9baabd0c5bdd5ddcc8214732f1c4a7ebf50a913", + "mode.button.tertiary.color": "8a7434c1692865f363775de7f7902e6ade0e0b05", + "mode.button.tertiary.hover.background-color": "f0fc6e04f341c42b2775e539a0b7a796a6fbbfd5", + "mode.button.tertiary.hover.color": "70e47f68ae877e255fbf469830f9b6aebd93c1ab", + "mode.button.secondary.color": "45df64aa92a7923aff5479a196ffb4d6c8a81f26", + "mode.button.secondary.hover.background-color": "059c972bc3d7562f587510e76fff490b2ea7c32b", + "mode.button.secondary.hover.color": "cf6894e6b896202ac9d791ab853e07077b84862d", + "mode.button.secondary.hover.border-color": "dd3a76e05833371f51e9a53aef935e3ca0972a1e", + "mode.button.secondary.border-color": "47a53061fda91caef7c83681c0184f263b96b4bc", + "mode.button.secondary.background-color": "1d24decf1b11459ecf7153031d6c29d30a579bd7", + "mode.icon-logo.eherkenning.e-color": "66d2df5b1b42fc0228995b26fdb99cb410781e76", + "mode.icon-logo.eidas.stars-color": "565ce9e1af338590415be1fc301423318a8f0e8b", + "mode.icon-logo.eidas.lock-color": "9e2d8a67e3a0d58bf00da6cae3dfc17a9e37ee30", + "mode.icon-logo.eidas.lines-color": "d73d7dc4288090388b3889ea71d52f4db58551ad", + "mode.icon-logo.eidas.background-color": "be2b3fc21b1c80c5e79a974479cec74a68e6350a", + "mode.icon-logo.digid.border-color": "97bf18af9fd607640c7c38d4c238d3831dfecba0", + "mode.button-login.active.background-color": "2e92e7e17069b7ae8a2079b175b8fdb523e41b5c", + "mode.rijkslogo.color": "8db46088673a3466fa55d450f79489d79ca330cc" + }, "group": "mode" }, { - "id": "0f448e32ff095387ed2b3053db5b1f420196e6bc", + "id": "446ae027a82447a160271e3488c26e2913e31776", "name": "dark (beta)", "$figmaStyleReferences": {}, "selectedTokenSets": { - "mode/dark (beta)": "enabled" + "mode/dark": "enabled" + }, + "$figmaCollectionId": "VariableCollectionId:1:3", + "$figmaModeId": "1:2", + "$figmaVariableReferences": { + "lux.color.foreground.default": "0dbc56d9819e593d6a8cd54014fc7a03d6454b70", + "lux.color.foreground.subdued": "496be6acb62bd4ceb2450e344165342ab50db412", + "lux.color.foreground.onEmphasis": "1a7695f2e9efafc401716bdff36aaf4316967b4f", + "lux.color.foreground.link": "37ce3486dc0539f44db4fb313e200fbb8145a87b", + "lux.color.background.default": "1231868b384fb39d4527670ae7f28a5c3ce1b53b", + "lux.color.background.subdued": "7a8b1f9d1e8c7231107074f12f606b2f461bbf83", + "lux.color.background.hover": "075eb68616dc21ea861df47367d163ee4b312dcf", + "lux.color.border.default": "8e76379ac4e551ae0801ade8c58adca7feb2781d", + "lux.color.border.subdued": "50c27cec537f93bc936ce94394a38d07f6b2ee90", + "lux.color.border.strong": "4a98c05549785c912efa1c994c3dcc1f6355afe1", + "lux.color.canvas": "6c95ed2c3b2295d0951e2eba8377ca9d97d2fef3", + "lux.color.feedback.success.default": "12dac3e6a1a250b31300d9482590bb7f381540da", + "lux.color.feedback.success.subdued": "510b3f49f1876ce65f172ea74ec59b9ca9e15c22", + "lux.color.feedback.info.default": "13c3510f84de2842120ad86081eb51d70638d46c", + "lux.color.feedback.info.subdued": "d35bde1edd973c8bf4dd506651713e0059cab064", + "lux.color.feedback.error.default": "3463d7e9b353cfbb8cce21dcc3b6e12c32add87b", + "lux.color.feedback.error.subdued": "6e61bb6e59b35cd980ff62839edfda4b7f39b204", + "lux.color.feedback.warning.default": "4d3fe61e687e78dc20849672d2f7949da22bf893", + "lux.color.feedback.warning.subdued": "39afe39830634962745813dd28bea39189519047", + "lux.color.focus.outline": "abc33ce6d7d40c634df64f49aa15b5d872de54b7", + "mode.link.color": "a7da784e62cafb79406997feac3d85e953be27b6", + "mode.link.visited.color": "e9ce184c570b2b135680a8a0424dbd566607aeb1", + "mode.link.hover.color": "13ed7f99f37a7eb4a3de1cd3c646d6d9e295fd83", + "mode.link.active.color": "d9baabd0c5bdd5ddcc8214732f1c4a7ebf50a913", + "mode.button.tertiary.color": "8a7434c1692865f363775de7f7902e6ade0e0b05", + "mode.button.tertiary.hover.background-color": "f0fc6e04f341c42b2775e539a0b7a796a6fbbfd5", + "mode.button.tertiary.hover.color": "70e47f68ae877e255fbf469830f9b6aebd93c1ab", + "mode.button.secondary.color": "45df64aa92a7923aff5479a196ffb4d6c8a81f26", + "mode.button.secondary.hover.background-color": "059c972bc3d7562f587510e76fff490b2ea7c32b", + "mode.button.secondary.hover.color": "cf6894e6b896202ac9d791ab853e07077b84862d", + "mode.button.secondary.hover.border-color": "dd3a76e05833371f51e9a53aef935e3ca0972a1e", + "mode.button.secondary.border-color": "47a53061fda91caef7c83681c0184f263b96b4bc", + "mode.button.secondary.background-color": "1d24decf1b11459ecf7153031d6c29d30a579bd7", + "mode.icon-logo.eherkenning.e-color": "66d2df5b1b42fc0228995b26fdb99cb410781e76", + "mode.icon-logo.eidas.stars-color": "565ce9e1af338590415be1fc301423318a8f0e8b", + "mode.icon-logo.eidas.lock-color": "9e2d8a67e3a0d58bf00da6cae3dfc17a9e37ee30", + "mode.icon-logo.eidas.lines-color": "d73d7dc4288090388b3889ea71d52f4db58551ad", + "mode.icon-logo.eidas.background-color": "be2b3fc21b1c80c5e79a974479cec74a68e6350a", + "mode.icon-logo.digid.border-color": "97bf18af9fd607640c7c38d4c238d3831dfecba0", + "mode.button-login.active.background-color": "2e92e7e17069b7ae8a2079b175b8fdb523e41b5c", + "mode.rijkslogo.color": "8db46088673a3466fa55d450f79489d79ca330cc" }, "group": "mode" }, { - "id": "3a2037c6ec1c739897764dfa5bbb68851baa925b", - "name": "xl", + "id": "deb6aaa5948a1678638d1324a2b9c42fe26779d1", + "name": "default", "$figmaStyleReferences": {}, "selectedTokenSets": { - "viewport (beta)/xl": "enabled", - "common/default": "enabled" + "component/link": "enabled", + "component/alert": "enabled", + "component/button": "enabled", + "component/button login": "enabled" }, - "group": "viewport (beta)" + "$figmaCollectionId": "VariableCollectionId:1503:3470", + "$figmaModeId": "1503:2", + "$figmaVariableReferences": { + "lux.link.color": "45cc69f7b5b073038e64950dd0bcf57fd941c1b4", + "lux.link.column-gap": "38f5f79657a4396e434073957e70cbc73acb0925", + "lux.link.icon.size": "a69dad391c15651d33379ca64d9c9d54ece48203", + "lux.link.hover.color": "f4356f81c57003ad4b6d7b6641835897cc697dbe", + "lux.link.active.color": "4e72f55b1759e0f5c97763c8e64ea2e5d6a4ed7f", + "lux.link.visited.color": "4ffc2ebcbfc49a7ea37e48d44a3b20bdc30db3ee", + "lux.link.font-family": "cfedbda2e3229460aea64ab00488246816461774", + "lux.link.font-weight": "a513a24d25c1e242d77462b0011600e33f5ccf3c", + "lux.link.line-height": "15fb941fddcbbc9981287551691edd93f24554ce", + "lux.link.font-size": "665116bc3f3903bdb9be58e7f45017001fd8a001", + "lux.alert.color": "306476604ea442a65dbc938d22b37bbb0e29483c", + "lux.alert.border-color": "a23d2e0117359a296e7aab9c6577f40d7bb7bc66", + "lux.alert.border-radius": "0c595d3d861046c13c5c31d5ca23f3766762af72", + "lux.alert.border-width": "7d5dc4f4dd694bbcdd99fdc5434c84df6409e278", + "lux.alert.column-gap": "1de2c918296b27359cba803a250fe3e2344d672d", + "lux.alert.padding-block-end": "e5b60561c75ef218c24784484443fc0b18a44247", + "lux.alert.padding-block-start": "34e1d62491bdcd700d224ffa439c4eaf8033aaab", + "lux.alert.padding-inline-end": "007c0393cde00ccbc05b8dec4644e02db1d472b5", + "lux.alert.padding-inline-start": "39240aa9255fe65a3664330a89bfed71397cee8e", + "lux.alert.icon-start-size": "d2a4831492e260ecd5376ede736bd53d92ca8de4", + "lux.alert.min-inline-size": "26ab25ebe5dd72d7918f33b1fba3d8f5d9813956", + "lux.alert.close-button-size": "35eb243da7d0bb2f0226fe36df0ffaa912664b64", + "lux.alert.content.row-gap": "54e9112131b776917517bd28db964371da1cf6a1", + "lux.alert.info.background-color": "ff0e35224db7acfeb5fe9db0dc5402ff10168f45", + "lux.alert.success.background-color": "a72d617bb89ea1faae36c8a4d7ae7195e7cd9aab", + "lux.alert.error.background-color": "8d7a261e4c14099e343f50d55face55cedc3eff5", + "lux.alert.warning.background-color": "e8d91c51438fe3cee0eb2afedf24c19f5371d1e3", + "lux.alert.line-height": "f3f93f53a2ed74542f52c06392bfb0ac9f96f6c0", + "lux.alert.font-size": "864524ba1aeed4a4ff58429d59d7deb2fe83d69f", + "lux.alert.font-family": "f16a11e7c0aae69a6dcffeb3440cb892bedba620", + "lux.alert.font-weight": "f15a7d26f5139ee2a1310329ecb0d321897ea9b6", + "lux.button.font-size": "16bb521c0d42906d90df38472f8c192ddc785a38", + "lux.button.primary.font-size": "d1ad27ecaa2c8da1f0ec015650b5197d379a008d", + "lux.button.primary.background-color": "569171da06f76f7d27cfb516e6b7a46bd3994a71", + "lux.button.primary.border-color": "c5eadea65aa2d0f61b375f9c49f1d6e863b88eae", + "lux.button.primary.color": "e947b80b23413324371674c68b1eca28e57fa60e", + "lux.button.primary.hover.background-color": "fffc0c42ba5695a3eef58f0c4cac6df38f948ba1", + "lux.button.primary.hover.border-color": "de43873653fe2e0a2295b90cb20e0831b397a728", + "lux.button.primary.hover.color": "9bb64935ec2ebdc444c4e550675cbfafe7fe5c13", + "lux.button.primary.active.background-color": "f6415bae467287fa6c5025a28c4b308523728516", + "lux.button.primary.active.border-color": "0405d48c14950e1d9aed5ac37bd6e177f1c03a20", + "lux.button.primary.active.color": "04ef6b341307ba1bf7a1cb6d337438c0d3acaff4", + "lux.button.primary.disabled.background-color": "3a53096500db4f450b8ef26c092dcbcc43a1a3f6", + "lux.button.primary.disabled.border-color": "76306297b7b377d971253e9c33ebd163a6dbe478", + "lux.button.primary.disabled.color": "b045aa021820ff9bc622c6239e0991825502517e", + "lux.button.line-height": "1f0ca2d64c5e950d1c58c87f2015aaa1fd24f51e", + "lux.button.padding-inline-start": "a5b7ab5bd480561eff942d2284d1b3d07f8ac156", + "lux.button.padding-block-start": "16d752da1792d39e113c2303896334fce38332ad", + "lux.button.padding-inline-end": "e2c01ad2f2951109f581d5cf57569719758f0d00", + "lux.button.padding-block-end": "ce35ee8f5482682ac7627540f5a3f70dca3cbb54", + "lux.button.column-gap": "51d91ffb876ff5cff8efcd9ee36ee8514eb5742d", + "lux.button.min-inline-size": "595e42830676f55c43a45d72ec0fae862ddbe704", + "lux.button.min-block-size": "13f835d1eb827dfa55118a50f97bf6b7c93c1785", + "lux.button.border-radius": "bd1c529f671d43f35560df8b38d0492534f1444c", + "lux.button.border-width": "db73ff380c8ee1081de5860bf145202da2f439c0", + "lux.button.icon.size": "ea208b74061eb5f7bae1373be813e86ca5f7e028", + "lux.button.secondary.background-color": "b23003afab0b742a36839600f6ea62ed0a6acd87", + "lux.button.secondary.border-color": "693bcb37a4c9fa88d6482dd73dd7260911ca1a69", + "lux.button.secondary.color": "1d06f9d7ce114d2af2030e53e3f1c1d38a71cecc", + "lux.button.secondary.hover.background-color": "5f7e667c7ea8c5454e0ef142b23b6807e4e354b1", + "lux.button.secondary.hover.border-color": "ba26655347f4ce0e924b92de81eadb6f7c09720d", + "lux.button.secondary.hover.color": "d78933b0eed2ed108519285a03556ca049c0d311", + "lux.button.secondary.active.background-color": "9c235f3120877e49ae1935be0ca11c9d91b6e7a0", + "lux.button.secondary.active.border-color": "8416a4cb088081de8d3f9747833bc77d7dee41a6", + "lux.button.secondary.active.color": "f430ae09c97d4d6a3cffa22879e967b504acbf68", + "lux.button.secondary.disabled.background-color": "adc91429a981a33e7600a81c52a897cc71c59c75", + "lux.button.secondary.disabled.border-color": "71b1c5997dc4ba6312096dbdd35a91b7e40d3fe0", + "lux.button.secondary.disabled.color": "4b4d241c88472a821385042faffa0842a5487149", + "lux.button.tertairy.background-color": "d1bacb8a381a690a827ffb3085766792a686943a", + "lux.button.tertairy.border-color": "c0561639c55cf380b5129481296d48390bd4922c", + "lux.button.tertairy.color": "f05f4da8c75ce3041e682e0984c27f4fe68b17d3", + "lux.button.tertairy.hover.background-color": "60e4e96b9ca29a95e2e722f42a4e9eb1fcc35dfe", + "lux.button.tertairy.hover.border-color": "07133ae152779af548d4cc2f9aa57dda25ee8cf2", + "lux.button.tertairy.hover.color": "4b8a0cf348d400d61e7234d81b39d3dcf77c0041", + "lux.button.tertairy.active.background-color": "4b5a4234fdb88d535cc73eb8d2ebf294e43e5c84", + "lux.button.tertairy.active.border-color": "0d2ce49a02e4176f9b8050446009a55b6345de52", + "lux.button.tertairy.active.color": "a5f1bbe0adb8f8b6c469f17f277c332b375f197d", + "lux.button.tertairy.disabled.background-color": "5eab3db789144e0b103561ad2cf659261a8d47ab", + "lux.button.tertairy.disabled.border-color": "ba17cb39ef3b20f4cc14764f98d2f572e3a05d1b", + "lux.button.tertairy.disabled.color": "30b4302d299f6677b6421fabe00b985c40394b32", + "lux.button.font-weight": "49a29653c80116686ebb3e6ee296d4111da81993", + "lux.button.font-family": "d4db75a2dc917391698e07da47098eb8f5663a46", + "lux.button-login.color": "35c630c7b9966056fa082a42be59e92cd9dc712a", + "lux.button-login.background-color": "4b27c39811d138f87bd747f2441d228f8599a138", + "lux.button-login.border-color": "4148bab934a88efa42f2d0b614d61dc05800f32b", + "lux.button-login.hover.color": "77dfc3f29a9e408ffc4df91f4b4d63738bd422c8", + "lux.button-login.hover.background-color": "edefd785190d8e9674367de9aeb0d00b46c88305", + "lux.button-login.hover.border-color": "d99a3b2cb2ba1bdc2beda6001497d0c5f7c7a557", + "lux.button-login.active.color": "bca61093eb928eb4d74c0de4b717ac1163c1eeb5", + "lux.button-login.active.background-color": "07a26c6942a789f5bf35f311bf6e4fbbc573d9d3", + "lux.button-login.active.border-color": "4efd163d1fe0a7bc6464d9f88eaa3b252263675b", + "lux.button-login.padding-block-start": "2457e3249877f92aa271da1760f98931a05320b5", + "lux.button-login.padding-block-end": "fc9be351a21d02e8d5c4f42972cf5550c66a600b", + "lux.button-login.font-size": "f4d56e0e32cf4d6fe049d7bb0f6348f091b9a065", + "lux.button-login.padding-inline-start": "7d40f24f29e0e0e36c3528f637d3f9e22c5f9e54", + "lux.button-login.padding-inline-end": "ffdfeec3b2b83fb9e27c5c8fce9720b3bc044b99", + "lux.button-login.min-inline-size": "9699cf1a232e171424345b840011c2d4ead4f3c1", + "lux.button-login.min-block-size": "970cbc652b3c10d2c3a880610fe24e9f647b0db8", + "lux.button-login.column-gap": "90b77b87e8de82242a8df50861ce135d76715c12", + "lux.button-login.border-radius": "73f6acde0366c442b217a4ff811c27a6a0cfd57f", + "lux.button-login.border-width": "8a8dce464cf6f57863d7a380390019acfd00a6cd", + "lux.button-login.icon.size": "8a31fc23473c6e137de315550ecfd83f6472237a", + "lux.button-login.line-height": "51a8ad5b695755c6b3c0c0b760ececbbeb320c0d", + "lux.button-login.font-weight": "a1643e472c52569a9beb8b15368579e2fe09ae75", + "lux.button-login.font-family": "4f871538e4cec521a825f5826c51f6fbd70c95bb" + }, + "group": "component" }, { - "id": "e4b67a14247b40034ec3e8fc022e1e7296b84574", - "name": "lg", + "id": "a1cd2c8a749def15791df638cbc27a1d91ff8e93", + "name": "default", "$figmaStyleReferences": {}, "selectedTokenSets": { - "viewport (beta)/lg": "enabled", - "common/default": "enabled" + "nl/utrecht-button": "enabled" }, - "group": "viewport (beta)" + "$figmaCollectionId": "VariableCollectionId:2536:6472", + "$figmaModeId": "2536:0", + "$figmaVariableReferences": { + "utrecht.button.background-color": "21615c4048cc04350bcac43198a9b248094b3f3b", + "utrecht.button.border-color": "59aa28eb39ca274b3b9634b0f3cdce8db588d8ff", + "utrecht.button.border-radius": "edc4f25b815997e67eada8b6bc89e1437ae7d682", + "utrecht.button.border-width": "b7a93be753e1f97f958320923fd2b1f0e3b19512", + "utrecht.button.color": "64092efe16de1430c7a59feaf3f0045533c32f54", + "utrecht.button.font-family": "60cacae22ddc75ca5677bb5781bbb7f5a6018be7", + "utrecht.button.font-size": "afeffb74e919d026ba3072b8ceb3f42650f4c93a", + "utrecht.button.inline-size": "cb6de835401ed4b8b564f5f4958b2d254fa9d365", + "utrecht.button.line-height": "336c6f0887ef9ab2f3634188fd882a996c589861", + "utrecht.button.min-block-size": "a2822410b977d7f372df4ce4a422c22729c36c98", + "utrecht.button.min-inline-size": "783046558c23d9b2e73df70a014f3b4ca58cd65a", + "utrecht.button.padding-block-start": "3bc8ce809eef3de4b16acae4c0dc223976b8be96", + "utrecht.button.padding-block-end": "527825f60b1a5db188df45e429af5d0e0f88a139", + "utrecht.button.padding-inline-start": "f5528a49b4483e062002cfd84023d45c503ae58f", + "utrecht.button.padding-inline-end": "61ab3d45824f507b91db41e7f38560bfb52c75ac", + "utrecht.button.active.background-color": "9c90a5e2bf2122f9c8ce4fb479b8b91fa5e439ef", + "utrecht.button.active.border-color": "4947e98b2dd674c88bcab7a471b6ff83b7cb4f53", + "utrecht.button.active.color": "afa89d11c40064c563927e2876c76bdbad985a07", + "utrecht.button.icon.gap": "3e27feb784fa3a532d3a81a8ee83566ce831e913", + "utrecht.button.icon.size": "51847213f16ab1bdd29eb817c903a15d54e2ff9d", + "utrecht.button.disabled.background-color": "02c3556602f557c085ffb77605d67c70e5facacc", + "utrecht.button.disabled.border-color": "7f7457b7ed97806f469d091982bada38d4ade60a", + "utrecht.button.disabled.color": "f4d86458c724af2cfb546444ec3f9d2b1c3e0e74", + "utrecht.button.focus.background-color": "3f8b25624ed1ae46b2257805c00ff40a3ab579a6", + "utrecht.button.focus.border-color": "a40c6a9eba34b88328bbb904c6c525bc61652849", + "utrecht.button.focus.color": "c0916ec158ae1570c4a76d6f5cbe6a9d2477fe9e", + "utrecht.button.hover.background-color": "09c82e99178506491c0182705a76b2cb944fc110", + "utrecht.button.hover.border-color": "c09154188ea906015a900d04e5bb8ee8a573bf80", + "utrecht.button.hover.color": "eed509095b79b0f754e6a34465abd0d77f3b2ec3", + "utrecht.button.pressed.background-color": "eb1a210c0e4bc651a3e34f9ac8c4412b8ea34369", + "utrecht.button.pressed.border-color": "0685b11411f9b6aa50eda3ec20488d006c263073", + "utrecht.button.pressed.color": "880b737305c92ca9989325177cd82377105b9048", + "utrecht.button.primary-action.background-color": "57666b5b23c0cd7f833bd88dfce6fb7fd821f3c7", + "utrecht.button.primary-action.border-color": "9148eae969c40598e7786bcb724ce98d1fd84ed7", + "utrecht.button.primary-action.border-width": "6c5c99847cfdd2a67b4354c454a95c8b9bf5c9bc", + "utrecht.button.primary-action.color": "847a28468ea35158319b62a797f0f59f956baf81", + "utrecht.button.primary-action.active.background-color": "6cd6837d3b9e38cbaffc5d4d9806aef0c38c747f", + "utrecht.button.primary-action.active.border-color": "6879f7007697a8d6f698f0f612c19a8bc6f5e378", + "utrecht.button.primary-action.active.color": "53252e412a705494b6e1ca52f7cb65620b9e29b7", + "utrecht.button.primary-action.disabled.background-color": "baaf03709289453b7aecfa034b29af594cd7baf8", + "utrecht.button.primary-action.disabled.border-color": "9492b37db42f92ec5591a7db85687141adfedca1", + "utrecht.button.primary-action.disabled.color": "ac3c2ff3b920e22953655d03bd8046bcefe3959a", + "utrecht.button.primary-action.hover.background-color": "bcd4630b8fd2399327a27700c43356a1b416c284", + "utrecht.button.primary-action.hover.border-color": "d2a8569522f98ab11f78d5ecbb91bf911536cd0f", + "utrecht.button.primary-action.hover.color": "2a62986fc30a230dd570248a8051763fa01aba06", + "utrecht.button.primary-action.focus.background-color": "3e275fb4b522553d50e89098b40ebbf2e0fb9f26", + "utrecht.button.primary-action.focus.border-color": "160a55ac3386ae4e2e2ad8c464b5a9b835509eb1", + "utrecht.button.primary-action.focus.color": "251968ca299dc0bfc61db7b944da56fac32c4ae3", + "utrecht.button.primary-action.pressed.background-color": "68ec60e234afd5bc4095954866bd86734ada56cf", + "utrecht.button.primary-action.pressed.border-color": "56a620d470427d307ca9160de0414fbc9a49f582", + "utrecht.button.primary-action.pressed.color": "e5894a94f5d822146710547c4423a6cee3bcefe0", + "utrecht.button.secondary-action.background-color": "d7561e1e01a4554ea7ac72db2696dbde12c9cba7", + "utrecht.button.secondary-action.border-color": "cb0583339fff0457d93b93bfafd52be22474069b", + "utrecht.button.secondary-action.border-width": "1a27f49139ab7f5de35269e6c572be09b4a29400", + "utrecht.button.secondary-action.color": "251362a685f8c764d1a40b4c71094e77774d4cd6", + "utrecht.button.secondary-action.active.background-color": "e58dd48b330788bd9f04b0cb0b12bc1e1f187227", + "utrecht.button.secondary-action.active.border-color": "a280fae6cbe8b5c22ac498ea08b30c682158f257", + "utrecht.button.secondary-action.active.color": "e4addcf20531431e3b06f43113ab92ee0212d302", + "utrecht.button.secondary-action.disabled.background-color": "ad1e46221b25ff260ebed13f4ba1cde03487681a", + "utrecht.button.secondary-action.disabled.border-color": "9d0a56b4c1af8ac2cca81adcbaadedca0677bd56", + "utrecht.button.secondary-action.disabled.color": "4fbae7c633fb3a802cfea088757b3e5c4825e0cc", + "utrecht.button.secondary-action.hover.background-color": "42664994a8fc70dc571e697db5e4feea1e5af060", + "utrecht.button.secondary-action.hover.border-color": "2df2218a0026e0650afafc3c12f4da915fe76252", + "utrecht.button.secondary-action.hover.color": "ed460bbcdbe5c59b0acc613f3314661f6d92a1fb", + "utrecht.button.secondary-action.focus.background-color": "34efdc53a5ec76ddfcd5dd9bb426b96164fd73ab", + "utrecht.button.secondary-action.focus.border-color": "98af1ba9965c74f78561548e549e0363a51c1a7f", + "utrecht.button.secondary-action.focus.color": "bbc447fa426bed6357299195bdf72d9af23f8205", + "utrecht.button.secondary-action.pressed.background-color": "eed5de65fb83839c7676e54c6c2fadc04002f4f2", + "utrecht.button.secondary-action.pressed.border-color": "207fc7fba28414c6bfb892c80b753ac40261a689", + "utrecht.button.secondary-action.pressed.color": "df057dafaf1aadc56243c185348b0ee273730bb1", + "utrecht.button.subtle.background-color": "a45e4db2610adf203cc5f756379dfbdbc3af493e", + "utrecht.button.subtle.border-color": "6bd61d73763fab17668bea1b2102604c9352f456", + "utrecht.button.subtle.border-width": "0c45ecef5ae0e1d6db86f04122456b98cca848cb", + "utrecht.button.subtle.color": "e2c40ebc3144e0c11e744fa0eee320e23ad24913", + "utrecht.button.subtle.active.background-color": "e16dd11504acee44332c1151a2e96c72c2bf2d73", + "utrecht.button.subtle.active.border-color": "4e589513c7ffe9fa97d31da2b487e3a94b2db519", + "utrecht.button.subtle.active.color": "bba7343c2443df42bc0535db6c2f0d22a3dadd3c", + "utrecht.button.subtle.disabled.background-color": "0e5e1b449ec646b6eb35943727fbfdccfd57ab50", + "utrecht.button.subtle.disabled.border-color": "13b25196048ee6692e653ed9b1d23800331b601b", + "utrecht.button.subtle.disabled.color": "4a9cefdc8210ebfeb2f781361dc80d898a29af59", + "utrecht.button.subtle.hover.background-color": "b31b3ad40ffc9c286d6af58376a338ed3318627f", + "utrecht.button.subtle.hover.border-color": "fb1741845669c299577ca63e5d6b5cc156abdce8", + "utrecht.button.subtle.hover.color": "68ce55bb0f73221c65e5c8dcaaa6093234bd17ec", + "utrecht.button.subtle.focus.background-color": "61b04a05a3afb91fbfbd5358d9975f7da9f13dd8", + "utrecht.button.subtle.focus.border-color": "aefbc1d5ea76ceb4d4fee9e2c1a60e0cf9ee2a89", + "utrecht.button.subtle.focus.color": "b690ee5198f34f690435177035c5ceec33ba9c7d", + "utrecht.button.subtle.pressed.background-color": "21d78cba42fa98a3b53166b849e347ea53b94a87", + "utrecht.button.subtle.pressed.border-color": "2fc009b9e4414a2a3f8a2f6f70c3c98315d67f30", + "utrecht.button.subtle.pressed.color": "4edf38d92170628f21417b4b211f036492c722cc" + }, + "group": "nl mapping" }, { - "id": "bfcd473261c5c34a231166f120246309b1228d78", - "name": "md", + "id": "2120213fe8364168ccf7688188e19a87e9bde39f", + "name": "default", "$figmaStyleReferences": {}, "selectedTokenSets": { - "viewport (beta)/md": "enabled", - "common/default": "enabled" + "NLdoc/default": "enabled" }, - "group": "viewport (beta)" + "group": "NLdoc" }, { - "id": "8fe3d7a9ca3de27b5b989f2903bcff7cbe1e28e0", - "name": "sm", + "id": "5a579e9a45428a1c218461931b7d72ff86cf798f", + "name": "Rijksoverheid", "$figmaStyleReferences": {}, "selectedTokenSets": { - "viewport (beta)/sm": "enabled", - "common/default": "enabled" + "NLdoc/Rijksoverheid": "enabled" }, - "group": "viewport (beta)" + "group": "NLdoc" }, { - "id": "3f718b094125230529a11e785104999f9c77705d", - "name": "xs", + "id": "5252df7c6782827fd088a497c11f04326060cffe", + "name": "Ridderkerk", "$figmaStyleReferences": {}, "selectedTokenSets": { - "viewport (beta)/xs": "enabled", - "common/default": "enabled" + "NLdoc/Ridderkerk": "enabled" }, - "group": "viewport (beta)" + "group": "NLdoc" + }, + { + "id": "636f384651b16ba46aca2cc94d071476e0d716b2", + "name": "Waterschap Hollandse Delta", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "NLdoc/Waterschap Hollandse Delta": "enabled" + }, + "group": "NLdoc" } -] +] \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/NLdoc/Ridderkerk.json b/proprietary/design-tokens/src/imported/NLdoc/Ridderkerk.json new file mode 100644 index 00000000..87ca8819 --- /dev/null +++ b/proprietary/design-tokens/src/imported/NLdoc/Ridderkerk.json @@ -0,0 +1,45 @@ +{ + "nldoc": { + "color": { + "brand": { + "default": { + "parent": "NLdoc / Organisatie/Ridderkerk", + "type": "color", + "value": "#028532", + "description": "" + }, + "subdued": { + "parent": "NLdoc / Organisatie/Ridderkerk", + "type": "color", + "value": "#d9ede0", + "description": "" + }, + "hover": { + "parent": "NLdoc / Organisatie/Ridderkerk", + "type": "color", + "value": "#026732", + "description": "" + } + } + }, + "button": { + "color": { + "parent": "NLdoc / Organisatie/Ridderkerk", + "type": "color", + "value": "{lux.color.grijs.700}", + "description": "" + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "Lato, Arial" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/NLdoc/Rijksoverheid.json b/proprietary/design-tokens/src/imported/NLdoc/Rijksoverheid.json new file mode 100644 index 00000000..f41c0201 --- /dev/null +++ b/proprietary/design-tokens/src/imported/NLdoc/Rijksoverheid.json @@ -0,0 +1,45 @@ +{ + "nldoc": { + "color": { + "brand": { + "default": { + "parent": "NLdoc / Organisatie/Rijksoverheid", + "type": "color", + "value": "{lux.color.donkerblauw.500}", + "description": "" + }, + "subdued": { + "parent": "NLdoc / Organisatie/Rijksoverheid", + "type": "color", + "value": "{lux.color.donkerblauw.50}", + "description": "" + }, + "hover": { + "parent": "NLdoc / Organisatie/Rijksoverheid", + "type": "color", + "value": "{lux.color.donkerblauw.700}", + "description": "" + } + } + }, + "button": { + "color": { + "parent": "NLdoc / Organisatie/Rijksoverheid", + "type": "color", + "value": "{nldoc.color.brand.default}", + "description": "" + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "{rh.font-family.sans}" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/NLdoc/Waterschap Hollandse Delta.json b/proprietary/design-tokens/src/imported/NLdoc/Waterschap Hollandse Delta.json new file mode 100644 index 00000000..d742c38f --- /dev/null +++ b/proprietary/design-tokens/src/imported/NLdoc/Waterschap Hollandse Delta.json @@ -0,0 +1,45 @@ +{ + "nldoc": { + "color": { + "brand": { + "default": { + "parent": "NLdoc / Organisatie/Waterschap Hollandse Delta", + "type": "color", + "value": "#462e87", + "description": "" + }, + "subdued": { + "parent": "NLdoc / Organisatie/Waterschap Hollandse Delta", + "type": "color", + "value": "#e3e0ed", + "description": "" + }, + "hover": { + "parent": "NLdoc / Organisatie/Waterschap Hollandse Delta", + "type": "color", + "value": "#2c1d54", + "description": "" + } + } + }, + "button": { + "color": { + "parent": "NLdoc / Organisatie/Waterschap Hollandse Delta", + "type": "color", + "value": "{nldoc.color.brand.default}", + "description": "" + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "Verdana, Arial" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/NLdoc/default.json b/proprietary/design-tokens/src/imported/NLdoc/default.json new file mode 100644 index 00000000..7acf2b5c --- /dev/null +++ b/proprietary/design-tokens/src/imported/NLdoc/default.json @@ -0,0 +1,45 @@ +{ + "nldoc": { + "color": { + "brand": { + "default": { + "parent": "NLdoc / Organisatie/NLdoc", + "type": "color", + "value": "{lux.color.violet.500}", + "description": "" + }, + "subdued": { + "parent": "NLdoc / Organisatie/NLdoc", + "type": "color", + "value": "{lux.color.violet.50}", + "description": "" + }, + "hover": { + "parent": "NLdoc / Organisatie/NLdoc", + "type": "color", + "value": "{lux.color.violet.700}", + "description": "" + } + } + }, + "button": { + "color": { + "parent": "NLdoc / Organisatie/NLdoc", + "type": "color", + "value": "{nldoc.color.brand.default}", + "description": "" + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "{rh.font-family.sans}" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/common/default.json b/proprietary/design-tokens/src/imported/common/default.json index 65b9086f..08da2427 100644 --- a/proprietary/design-tokens/src/imported/common/default.json +++ b/proprietary/design-tokens/src/imported/common/default.json @@ -1,34 +1,26 @@ { "lux": { "focus": { - "border-width [oud]": { - "value": "{lux.border-width.m}", - "type": "dimension", - "parent": "common/Mode 1", - "description": "vervangen met product collectie" + "outline-offset": { + "type": "spacing", + "value": "{lux.space.025-x}" } }, "size": { - "target": { - "value": "3rem", - "type": "dimension", - "parent": "common/Mode 1", - "description": "" - }, "icon": { + "parent": "common/default", + "type": "sizing", "value": "1rem", - "type": "dimension", - "parent": "common/Mode 1", "description": "" } }, "grid": { "max-inline": { + "parent": "common/default", + "type": "sizing", "value": "77.5rem", - "type": "dimension", - "parent": "common/Mode 1", "description": "" } } } -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/common/viewport/lg.json b/proprietary/design-tokens/src/imported/common/viewport/lg.json new file mode 100644 index 00000000..2d473c08 --- /dev/null +++ b/proprietary/design-tokens/src/imported/common/viewport/lg.json @@ -0,0 +1,144 @@ +{ + "figma": { + "rijkslint": { + "variant": { + "parent": "viewport (beta)/lg", + "type": "text", + "value": "default", + "description": "" + } + }, + "screen-size": { + "parent": "viewport (beta)/lg", + "type": "sizing", + "value": "64rem", + "description": "" + }, + "viewport": { + "size": { + "icon": { + "wrapper-height": { + "parent": "viewport (beta)/lg", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "sizing", + "value": "1.75rem" + } + } + } + } + }, + "lux": { + "grid": { + "gutter": { + "parent": "viewport (beta)/lg", + "type": "spacing", + "value": "2rem", + "description": "" + }, + "margin": { + "parent": "viewport (beta)/lg", + "type": "spacing", + "value": "2.5rem", + "description": "" + } + }, + "size": { + "target [oud]": { + "parent": "viewport (beta)/lg", + "type": "sizing", + "value": "3rem", + "description": "" + } + } + }, + "viewport": { + "font-size": { + "s": { + "parent": "viewport (beta)/lg", + "type": "fontSizes", + "value": "1rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/lg", + "type": "fontSizes", + "value": "1.125rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/lg", + "type": "fontSizes", + "value": "1.375rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/lg", + "type": "fontSizes", + "value": "1.625rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/lg", + "type": "fontSizes", + "value": "2.5rem", + "description": "" + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/lg", + "type": "lineHeights", + "value": "1.5rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/lg", + "type": "lineHeights", + "value": "1.75rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/lg", + "type": "lineHeights", + "value": "2rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/lg", + "type": "lineHeights", + "value": "2.25rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/lg", + "type": "lineHeights", + "value": "3.5rem", + "description": "" + } + }, + "rijkslint": { + "wordmark": { + "75%": { + "padding-block-start": { + "parent": "viewport (beta)/lg", + "type": "spacing", + "value": "2.5rem", + "description": "" + } + }, + "default": { + "padding-block-start": { + "parent": "viewport (beta)/lg", + "type": "spacing", + "value": "3.125rem", + "description": "" + } + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/common/viewport/md.json b/proprietary/design-tokens/src/imported/common/viewport/md.json new file mode 100644 index 00000000..53287606 --- /dev/null +++ b/proprietary/design-tokens/src/imported/common/viewport/md.json @@ -0,0 +1,144 @@ +{ + "figma": { + "rijkslint": { + "variant": { + "parent": "viewport (beta)/md", + "type": "text", + "value": "default", + "description": "" + } + }, + "screen-size": { + "parent": "viewport (beta)/md", + "type": "sizing", + "value": "48rem", + "description": "" + }, + "viewport": { + "size": { + "icon": { + "wrapper-height": { + "parent": "viewport (beta)/md", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "sizing", + "value": "1.75rem" + } + } + } + } + }, + "lux": { + "grid": { + "gutter": { + "parent": "viewport (beta)/md", + "type": "spacing", + "value": "1.5rem", + "description": "" + }, + "margin": { + "parent": "viewport (beta)/md", + "type": "spacing", + "value": "2rem", + "description": "" + } + }, + "size": { + "target [oud]": { + "parent": "viewport (beta)/md", + "type": "sizing", + "value": "3rem", + "description": "" + } + } + }, + "viewport": { + "font-size": { + "s": { + "parent": "viewport (beta)/md", + "type": "fontSizes", + "value": "1rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/md", + "type": "fontSizes", + "value": "1.125rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/md", + "type": "fontSizes", + "value": "1.375rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/md", + "type": "fontSizes", + "value": "1.625rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/md", + "type": "fontSizes", + "value": "2.5rem", + "description": "" + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/md", + "type": "lineHeights", + "value": "1.5rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/md", + "type": "lineHeights", + "value": "1.75rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/md", + "type": "lineHeights", + "value": "2rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/md", + "type": "lineHeights", + "value": "2.25rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/md", + "type": "lineHeights", + "value": "3.5rem", + "description": "" + } + }, + "rijkslint": { + "wordmark": { + "75%": { + "padding-block-start": { + "parent": "viewport (beta)/md", + "type": "spacing", + "value": "2.5rem", + "description": "" + } + }, + "default": { + "padding-block-start": { + "parent": "viewport (beta)/md", + "type": "spacing", + "value": "3.125rem", + "description": "" + } + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/common/viewport/sm.json b/proprietary/design-tokens/src/imported/common/viewport/sm.json new file mode 100644 index 00000000..bf2e493b --- /dev/null +++ b/proprietary/design-tokens/src/imported/common/viewport/sm.json @@ -0,0 +1,144 @@ +{ + "figma": { + "rijkslint": { + "variant": { + "parent": "viewport (beta)/sm", + "type": "text", + "value": "default", + "description": "" + } + }, + "screen-size": { + "parent": "viewport (beta)/sm", + "type": "sizing", + "value": "36rem", + "description": "" + }, + "viewport": { + "size": { + "icon": { + "wrapper-height": { + "parent": "viewport (beta)/sm", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "sizing", + "value": "1.75rem" + } + } + } + } + }, + "lux": { + "grid": { + "gutter": { + "parent": "viewport (beta)/sm", + "type": "spacing", + "value": "1.5rem", + "description": "" + }, + "margin": { + "parent": "viewport (beta)/sm", + "type": "spacing", + "value": "1.5rem", + "description": "" + } + }, + "size": { + "target [oud]": { + "parent": "viewport (beta)/sm", + "type": "sizing", + "value": "3rem", + "description": "" + } + } + }, + "viewport": { + "font-size": { + "s": { + "parent": "viewport (beta)/sm", + "type": "fontSizes", + "value": "1rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/sm", + "type": "fontSizes", + "value": "1.125rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/sm", + "type": "fontSizes", + "value": "1.375rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/sm", + "type": "fontSizes", + "value": "1.625rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/sm", + "type": "fontSizes", + "value": "2.5rem", + "description": "" + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/sm", + "type": "lineHeights", + "value": "1.5rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/sm", + "type": "lineHeights", + "value": "1.75rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/sm", + "type": "lineHeights", + "value": "2rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/sm", + "type": "lineHeights", + "value": "2.25rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/sm", + "type": "lineHeights", + "value": "3.5rem", + "description": "" + } + }, + "rijkslint": { + "wordmark": { + "75%": { + "padding-block-start": { + "parent": "viewport (beta)/sm", + "type": "spacing", + "value": "2.5rem", + "description": "" + } + }, + "default": { + "padding-block-start": { + "parent": "viewport (beta)/sm", + "type": "spacing", + "value": "3.125rem", + "description": "" + } + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/common/viewport/xl.json b/proprietary/design-tokens/src/imported/common/viewport/xl.json new file mode 100644 index 00000000..5e76f9a4 --- /dev/null +++ b/proprietary/design-tokens/src/imported/common/viewport/xl.json @@ -0,0 +1,138 @@ +{ + "figma": { + "rijkslint": { + "variant": { + "parent": "viewport (beta)/xl", + "type": "text", + "value": "default", + "description": "" + } + }, + "screen-size": { + "parent": "viewport (beta)/xl", + "type": "sizing", + "value": "90rem", + "description": "" + }, + "viewport": { + "size": { + "icon": { + "wrapper-height": { + "parent": "viewport (beta)/xl", + "type": "sizing", + "value": "1.75rem" + } + } + } + } + }, + "lux": { + "grid": { + "gutter": { + "parent": "viewport (beta)/xl", + "type": "spacing", + "value": "2rem", + "description": "" + }, + "margin": { + "parent": "viewport (beta)/xl", + "type": "spacing", + "value": "2.5rem", + "description": "" + } + }, + "size": { + "target [oud]": { + "parent": "viewport (beta)/xl", + "type": "sizing", + "value": "3rem", + "description": "" + } + } + }, + "viewport": { + "font-size": { + "s": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "1rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "1.125rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "1.375rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "1.625rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "2.5rem", + "description": "" + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "1.5rem" + }, + "m": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "1.75rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "2rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "2.25rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "3.5rem", + "description": "" + } + }, + "rijkslint": { + "wordmark": { + "75%": { + "padding-block-start": { + "parent": "viewport (beta)/xl", + "type": "spacing", + "value": "2.5rem", + "description": "" + } + }, + "default": { + "padding-block-start": { + "parent": "viewport (beta)/xl", + "type": "spacing", + "value": "3.125rem", + "description": "" + } + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/common/viewport/xs.json b/proprietary/design-tokens/src/imported/common/viewport/xs.json new file mode 100644 index 00000000..448c7fbc --- /dev/null +++ b/proprietary/design-tokens/src/imported/common/viewport/xs.json @@ -0,0 +1,144 @@ +{ + "figma": { + "rijkslint": { + "variant": { + "parent": "viewport (beta)/xs", + "type": "text", + "value": "small", + "description": "" + } + }, + "screen-size": { + "parent": "viewport (beta)/xs", + "type": "sizing", + "value": "23.4375rem", + "description": "" + }, + "viewport": { + "size": { + "icon": { + "wrapper-height": { + "parent": "viewport (beta)/xs", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "sizing", + "value": "1.5rem" + } + } + } + } + }, + "lux": { + "grid": { + "gutter": { + "parent": "viewport (beta)/xs", + "type": "spacing", + "value": "0rem", + "description": "" + }, + "margin": { + "parent": "viewport (beta)/xs", + "type": "spacing", + "value": "1rem", + "description": "" + } + }, + "size": { + "target [oud]": { + "parent": "viewport (beta)/xs", + "type": "sizing", + "value": "3rem", + "description": "" + } + } + }, + "viewport": { + "font-size": { + "s": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "0.875rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1.25rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1.5rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "2rem", + "description": "" + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "1.5rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "1.5rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "1.75rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "2rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "3rem", + "description": "" + } + }, + "rijkslint": { + "wordmark": { + "75%": { + "padding-block-start": { + "parent": "viewport (beta)/xs", + "type": "spacing", + "value": "1.25rem", + "description": "" + } + }, + "default": { + "padding-block-start": { + "parent": "viewport (beta)/xs", + "type": "spacing", + "value": "1.25rem", + "description": "" + } + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/component/alert.json b/proprietary/design-tokens/src/imported/component/alert.json new file mode 100644 index 00000000..e75b8756 --- /dev/null +++ b/proprietary/design-tokens/src/imported/component/alert.json @@ -0,0 +1,100 @@ +{ + "lux": { + "alert": { + "color": { + "type": "color", + "value": "{lux.color.grijs.700}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "border-radius": { + "type": "borderRadius", + "value": "{lux.border-radius.default}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.border-width.default}" + }, + "column-gap": { + "type": "spacing", + "value": "{lux.space.1-x}" + }, + "padding-block-end": { + "type": "spacing", + "value": "{lux.space.105-x}" + }, + "padding-block-start": { + "type": "spacing", + "value": "{lux.space.105-x}" + }, + "padding-inline-end": { + "type": "spacing", + "value": "{lux.space.105-x}" + }, + "padding-inline-start": { + "type": "spacing", + "value": "{lux.space.105-x}" + }, + "icon-start-size": { + "type": "sizing", + "value": "24px" + }, + "min-inline-size": { + "type": "sizing", + "value": "160px" + }, + "close-button-size": { + "type": "sizing", + "value": "{lux.size.icon}" + }, + "content": { + "row-gap": { + "type": "spacing", + "value": "{lux.space.0-x}" + } + }, + "info": { + "background-color": { + "type": "color", + "value": "{lux.color.feedback.info.subdued}" + } + }, + "success": { + "background-color": { + "type": "color", + "value": "{lux.color.feedback.success.subdued}" + } + }, + "error": { + "background-color": { + "type": "color", + "value": "{lux.color.feedback.error.subdued}" + } + }, + "warning": { + "background-color": { + "type": "color", + "value": "{lux.color.feedback.warning.subdued}" + } + }, + "line-height": { + "type": "lineHeights", + "value": "{lux.line-height.m}" + }, + "font-size": { + "type": "fontSizes", + "value": "{lux.font-size.m}" + }, + "font-family": { + "type": "fontFamilies", + "value": "{lux.font-family.primary}" + }, + "font-weight": { + "type": "fontWeights", + "value": "{lux.font-weight.regular}" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/component/alert/closable/false.json b/proprietary/design-tokens/src/imported/component/alert/closable/false.json deleted file mode 100644 index ca0d0559..00000000 --- a/proprietary/design-tokens/src/imported/component/alert/closable/false.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "figma": { - "alert": { - "close-button": { - "value": "false", - "type": "boolean" - } - } - }, - "lux": { - "alert": { - "padding-inline-end": { - "value": "{lux.space.2-x}", - "type": "dimension" - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/alert/closable/true.json b/proprietary/design-tokens/src/imported/component/alert/closable/true.json deleted file mode 100644 index 4521a498..00000000 --- a/proprietary/design-tokens/src/imported/component/alert/closable/true.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "figma": { - "alert": { - "close-button": { - "value": "true", - "type": "boolean" - } - } - }, - "lux": { - "alert": { - "padding-inline-end": { - "value": "{lux.space.105-x}", - "type": "dimension" - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/alert/default.json b/proprietary/design-tokens/src/imported/component/alert/default.json deleted file mode 100644 index f2fa12e8..00000000 --- a/proprietary/design-tokens/src/imported/component/alert/default.json +++ /dev/null @@ -1,60 +0,0 @@ -{ - "lux": { - "alert": { - "color": { - "value": "{lux.color.grijs.700}", - "type": "color" - }, - "border-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "border-radius": { - "value": "{lux.border-radius.default}", - "type": "dimension" - }, - "border-width": { - "value": "{lux.border-width.default}", - "type": "dimension" - }, - "column-gap": { - "value": "{lux.space.1-x}", - "type": "dimension" - }, - "padding-block-end": { - "value": "{lux.space.105-x}", - "type": "dimension" - }, - "padding-block-start": { - "value": "{lux.space.105-x}", - "type": "dimension" - }, - "padding-inline-end": { - "value": "{lux.space.105-x}", - "type": "dimension" - }, - "padding-inline-start": { - "value": "{lux.space.105-x}", - "type": "dimension" - }, - "icon-start-size": { - "value": "24px", - "type": "dimension" - }, - "min-inline-size": { - "value": "160px", - "type": "dimension" - }, - "close-button-size": { - "value": "{lux.size.icon}", - "type": "dimension" - }, - "content": { - "row-gap": { - "value": "{lux.space.0-x}", - "type": "dimension" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/alert/variant/error.json b/proprietary/design-tokens/src/imported/component/alert/variant/error.json deleted file mode 100644 index 7e4eba99..00000000 --- a/proprietary/design-tokens/src/imported/component/alert/variant/error.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "figma": { - "icon": { - "variant": { - "value": "error", - "type": "text" - } - } - }, - "lux": { - "alert": { - "background-color": { - "value": "{lux.color.feedback.error.subdued}", - "type": "color" - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/alert/variant/info.json b/proprietary/design-tokens/src/imported/component/alert/variant/info.json deleted file mode 100644 index 45634e10..00000000 --- a/proprietary/design-tokens/src/imported/component/alert/variant/info.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "figma": { - "icon": { - "variant": { - "value": "info", - "type": "text" - } - } - }, - "lux": { - "alert": { - "background-color": { - "value": "{lux.color.feedback.info.subdued}", - "type": "color" - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/alert/variant/success.json b/proprietary/design-tokens/src/imported/component/alert/variant/success.json deleted file mode 100644 index da831bcd..00000000 --- a/proprietary/design-tokens/src/imported/component/alert/variant/success.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "figma": { - "icon": { - "variant": { - "value": "success", - "type": "text" - } - } - }, - "lux": { - "alert": { - "background-color": { - "value": "{lux.color.feedback.success.subdued}", - "type": "color" - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/alert/variant/warning.json b/proprietary/design-tokens/src/imported/component/alert/variant/warning.json deleted file mode 100644 index 81970a0f..00000000 --- a/proprietary/design-tokens/src/imported/component/alert/variant/warning.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "figma": { - "icon": { - "variant": { - "value": "warning", - "type": "text" - } - } - }, - "lux": { - "alert": { - "background-color": { - "value": "{lux.color.feedback.warning.subdued}", - "type": "color" - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button login.json b/proprietary/design-tokens/src/imported/component/button login.json new file mode 100644 index 00000000..cec6a03c --- /dev/null +++ b/proprietary/design-tokens/src/imported/component/button login.json @@ -0,0 +1,144 @@ +{ + "lux": { + "button-login": { + "color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.foreground.default}" + }, + "background-color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.background.default}", + "description": "" + }, + "border-color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.border.default}", + "description": "" + }, + "hover": { + "color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.foreground.default}", + "description": "" + }, + "background-color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.background.hover}", + "description": "" + }, + "border-color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.border.default}", + "description": "" + } + }, + "active": { + "color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.foreground.default}", + "description": "" + }, + "background-color": { + "parent": "button login/default", + "type": "color", + "value": "{mode.button-login.active.background-color}", + "description": "" + }, + "border-color": { + "parent": "button login/default", + "type": "color", + "value": "{lux.color.border.strong}", + "description": "" + } + }, + "padding-block-start": { + "parent": "button login/default", + "type": "spacing", + "value": "{lux.space.05-x}", + "description": "" + }, + "padding-block-end": { + "parent": "button login/default", + "type": "spacing", + "value": "{lux.space.05-x}", + "description": "" + }, + "font-size": { + "parent": "button login/default", + "type": "fontSizes", + "value": "1.125rem" + }, + "padding-inline-start": { + "parent": "button login/default", + "type": "spacing", + "value": "{lux.space.05-x}" + }, + "padding-inline-end": { + "parent": "button login/default", + "type": "spacing", + "value": "{lux.space.2-x}" + }, + "min-inline-size": { + "parent": "button login/default", + "type": "sizing", + "value": "48px" + }, + "min-block-size": { + "parent": "button login/default", + "type": "sizing", + "value": "48px" + }, + "column-gap": { + "parent": "button login/default", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "spacing", + "value": "{lux.space.1-x}" + }, + "border-radius": { + "parent": "button login/default", + "type": "borderRadius", + "value": "{lux.border-radius.default}" + }, + "border-width": { + "parent": "button login/default", + "type": "borderWidth", + "value": "{lux.border-width.default}" + }, + "icon": { + "size": { + "parent": "button login/default", + "type": "sizing", + "value": "2.5rem", + "description": "" + } + }, + "line-height": { + "type": "lineHeights", + "value": "1.75rem" + }, + "font-weight": { + "type": "fontWeights", + "value": "{lux.font-weight.regular}" + }, + "font-family": { + "type": "fontFamilies", + "value": "{lux.font-family.primary}" + }, + "border-style": { + "type": "other", + "value": "solid" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/component/button-login/default.json b/proprietary/design-tokens/src/imported/component/button-login/default.json deleted file mode 100644 index 8e5de338..00000000 --- a/proprietary/design-tokens/src/imported/component/button-login/default.json +++ /dev/null @@ -1,88 +0,0 @@ -{ - "lux": { - "button-login": { - "active": { - "background-color": { - "type": "color", - "value": "{mode.button-login.active.background-color}" - }, - "border-color": { - "type": "color", - "value": "{lux.color.border.strong}" - }, - "color": { - "type": "color", - "value": "{lux.color.foreground.default}" - } - }, - "background-color": { - "type": "color", - "value": "{lux.color.background.default}" - }, - "border-color": { - "type": "color", - "value": "{lux.color.border.default}" - }, - "border-radius": { - "type": "dimension", - "value": "{lux.border-radius.default}" - }, - "border-width": { - "type": "dimension", - "value": "{lux.border-width.default}" - }, - "color": { - "type": "color", - "value": "{lux.color.foreground.default}" - }, - "hover": { - "background-color": { - "type": "color", - "value": "{lux.color.background.hover}" - }, - "border-color": { - "type": "color", - "value": "{lux.color.border.default}" - }, - "color": { - "type": "color", - "value": "{lux.color.foreground.default}" - } - }, - "icon": { - "size": { - "type": "dimension", - "value": "40px" - } - }, - "margin-inline": { - "type": "dimension", - "value": "{lux.space.1-x}" - }, - "min-block-size": { - "type": "dimension", - "value": "{lux.size.target}" - }, - "min-inline-size": { - "type": "dimension", - "value": "{lux.size.target}" - }, - "padding-block-end": { - "type": "dimension", - "value": "{lux.space.05-x}" - }, - "padding-block-start": { - "type": "dimension", - "value": "{lux.space.05-x}" - }, - "padding-inline-end": { - "type": "dimension", - "value": "{lux.space.2-x}" - }, - "padding-inline-start": { - "type": "dimension", - "value": "{lux.space.05-x}" - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button.json b/proprietary/design-tokens/src/imported/component/button.json new file mode 100644 index 00000000..fcafef9f --- /dev/null +++ b/proprietary/design-tokens/src/imported/component/button.json @@ -0,0 +1,241 @@ +{ + "lux": { + "button": { + "font-size": { + "type": "fontSizes", + "value": "{product.button.font-size}" + }, + "primary": { + "font-size": { + "type": "fontSizes", + "value": "{product.button.primary.font-size}" + }, + "background-color": { + "type": "color", + "value": "{lux.color.brand.default}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{lux.color.foreground.onEmphasis}" + }, + "hover": { + "background-color": { + "type": "color", + "value": "{lux.color.brand.hover}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{lux.color.foreground.onEmphasis}" + } + }, + "active": { + "background-color": { + "type": "color", + "value": "{lux.color.brand.default}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{lux.color.foreground.onEmphasis}" + } + }, + "disabled": { + "background-color": { + "type": "color", + "value": "{lux.color.background.subdued}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{lux.color.foreground.subdued}" + } + } + }, + "line-height": { + "type": "lineHeights", + "value": "{lux.line-height.m}" + }, + "padding-inline-start": { + "type": "spacing", + "value": "{lux.space.2-x}" + }, + "padding-block-start": { + "type": "spacing", + "value": "{lux.space.1-x}" + }, + "padding-inline-end": { + "type": "spacing", + "value": "{lux.space.2-x}" + }, + "padding-block-end": { + "type": "spacing", + "value": "{lux.space.1-x}" + }, + "column-gap": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "spacing", + "value": "{lux.space.1-x}" + }, + "min-inline-size": { + "type": "sizing", + "value": "48px" + }, + "min-block-size": { + "type": "sizing", + "value": "48px" + }, + "border-radius": { + "type": "borderRadius", + "value": "{lux.border-radius.default}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.border-width.default}" + }, + "icon": { + "size": { + "type": "sizing", + "value": "{lux.size.icon}" + } + }, + "secondary": { + "background-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "border-color": { + "type": "color", + "value": "{mode.button.secondary.border-color}" + }, + "color": { + "type": "color", + "value": "{mode.button.secondary.color}" + }, + "hover": { + "background-color": { + "type": "color", + "value": "{mode.button.secondary.hover.background-color}" + }, + "border-color": { + "type": "color", + "value": "{mode.button.secondary.hover.border-color}" + }, + "color": { + "type": "color", + "value": "{mode.button.secondary.hover.color}" + } + }, + "active": { + "background-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "border-color": { + "type": "color", + "value": "{mode.button.secondary.border-color}" + }, + "color": { + "type": "color", + "value": "{mode.button.secondary.color}" + } + }, + "disabled": { + "background-color": { + "type": "color", + "value": "{lux.color.background.subdued}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{lux.color.foreground.subdued}" + } + } + }, + "tertairy": { + "background-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{mode.button.tertiary.color}" + }, + "hover": { + "background-color": { + "type": "color", + "value": "{mode.button.tertiary.hover.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{mode.button.tertiary.hover.color}" + } + }, + "active": { + "background-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{mode.button.tertiary.color}" + } + }, + "disabled": { + "background-color": { + "type": "color", + "value": "{lux.color.background.subdued}" + }, + "border-color": { + "type": "color", + "value": "{lux.color.none}" + }, + "color": { + "type": "color", + "value": "{lux.color.foreground.subdued}" + } + } + }, + "font-weight": { + "type": "fontWeights", + "value": "{lux.font-weight.bold}" + }, + "font-family": { + "type": "fontFamilies", + "value": "{lux.font-family.primary}" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/component/button/default.json b/proprietary/design-tokens/src/imported/component/button/default.json deleted file mode 100644 index 4302a555..00000000 --- a/proprietary/design-tokens/src/imported/component/button/default.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "lux": { - "button": { - "disabled": { - "background-color": { - "value": "{lux.color.background.subdued}", - "type": "color" - }, - "border-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "color": { - "value": "{lux.color.foreground.subdued}", - "type": "color" - } - }, - "padding-inline-start": { - "value": "{lux.space.2-x}", - "type": "dimension" - }, - "padding-block-start": { - "value": "{lux.space.1-x}", - "type": "dimension" - }, - "padding-inline-end": { - "value": "{lux.space.2-x}", - "type": "dimension" - }, - "padding-block-end": { - "value": "{lux.space.1-x}", - "type": "dimension" - }, - "margin-inline": { - "value": "{lux.space.1-x}", - "type": "dimension" - }, - "min-inline-size": { - "type": "dimension", - "value": "{lux.size.target}" - }, - "min-block-size": { - "type": "dimension", - "value": "{lux.size.target}" - }, - "border-radius": { - "type": "dimension", - "value": "{lux.border-radius.default}" - }, - "border-width": { - "type": "dimension", - "value": "{lux.border-width.default}" - }, - "icon": { - "size": { - "type": "dimension", - "value": "{lux.size.icon}" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button/icon/end.json b/proprietary/design-tokens/src/imported/component/button/icon/end.json deleted file mode 100644 index 7ddf2ae2..00000000 --- a/proprietary/design-tokens/src/imported/component/button/icon/end.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "lux": { - "button": { - "padding-inline-start": { - "value": "{lux.space.105-x}", - "type": "dimension" - }, - "padding-inline-end": { - "value": "{lux.space.2-x}", - "type": "dimension" - } - } - }, - "figma": { - "button": { - "show-icon": { - "start": { - "value": "true", - "type": "boolean" - }, - "end": { - "value": "false", - "type": "boolean" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button/icon/none.json b/proprietary/design-tokens/src/imported/component/button/icon/none.json deleted file mode 100644 index 0536d486..00000000 --- a/proprietary/design-tokens/src/imported/component/button/icon/none.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "lux": { - "button": { - "padding-inline-start": { - "value": "{lux.space.2-x}", - "type": "dimension" - }, - "padding-inline-end": { - "value": "{lux.space.2-x}", - "type": "dimension" - } - } - }, - "figma": { - "button": { - "show-icon": { - "start": { - "value": "false", - "type": "boolean" - }, - "end": { - "value": "false", - "type": "boolean" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button/icon/start.json b/proprietary/design-tokens/src/imported/component/button/icon/start.json deleted file mode 100644 index e07b5c9e..00000000 --- a/proprietary/design-tokens/src/imported/component/button/icon/start.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "lux": { - "button": { - "padding-inline-start": { - "value": "{lux.space.2-x}", - "type": "dimension" - }, - "padding-inline-end": { - "value": "{lux.space.105-x}", - "type": "dimension" - } - } - }, - "figma": { - "button": { - "show-icon": { - "start": { - "value": "false", - "type": "boolean" - }, - "end": { - "value": "true", - "type": "boolean" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button/variant/primary.json b/proprietary/design-tokens/src/imported/component/button/variant/primary.json deleted file mode 100644 index c4ce6527..00000000 --- a/proprietary/design-tokens/src/imported/component/button/variant/primary.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "lux": { - "button": { - "background-color": { - "type": "color", - "value": "{lux.color.brand.default}" - }, - "border-color": { - "type": "color", - "value": "{lux.color.none}" - }, - "color": { - "type": "color", - "value": "{lux.color.foreground.onEmphasis}" - }, - "hover": { - "background-color": { - "type": "color", - "value": "{lux.color.brand.hover}" - }, - "border-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "color": { - "type": "color", - "value": "{lux.color.foreground.onEmphasis}" - } - }, - "active": { - "background-color": { - "value": "{lux.color.brand.default}", - "type": "color" - }, - "border-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "color": { - "value": "{lux.color.foreground.onEmphasis}", - "type": "color" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button/variant/secondary.json b/proprietary/design-tokens/src/imported/component/button/variant/secondary.json deleted file mode 100644 index 5a73c8fe..00000000 --- a/proprietary/design-tokens/src/imported/component/button/variant/secondary.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "lux": { - "button": { - "background-color": { - "type": "color", - "value": "{lux.color.none}" - }, - "border-color": { - "type": "color", - "value": "{mode.button.secondary.border-color}" - }, - "color": { - "type": "color", - "value": "{lux.color.brand.default}" - }, - "hover": { - "background-color": { - "type": "color", - "value": "{lux.color.brand.subdued}" - }, - "border-color": { - "value": "{lux.color.brand.hover}", - "type": "color" - }, - "color": { - "type": "color", - "value": "{lux.color.brand.hover}" - } - }, - "active": { - "background-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "border-color": { - "value": "{mode.button.secondary.border-color}", - "type": "color" - }, - "color": { - "value": "{mode.button.secondary.color}", - "type": "color" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/button/variant/tertairy.json b/proprietary/design-tokens/src/imported/component/button/variant/tertairy.json deleted file mode 100644 index 0321360f..00000000 --- a/proprietary/design-tokens/src/imported/component/button/variant/tertairy.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "lux": { - "button": { - "background-color": { - "type": "color", - "value": "{lux.color.none}" - }, - "border-color": { - "type": "color", - "value": "{lux.color.none}" - }, - "color": { - "type": "color", - "value": "{mode.button.tertiary.color}" - }, - "hover": { - "background-color": { - "type": "color", - "value": "{mode.button.tertiary.hover.background-color}" - }, - "border-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "color": { - "type": "color", - "value": "{mode.button.tertiary.hover.color}" - } - }, - "active": { - "background-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "border-color": { - "value": "{lux.color.none}", - "type": "color" - }, - "color": { - "value": "{mode.button.tertiary.color}", - "type": "color" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/component/icon-logo.json b/proprietary/design-tokens/src/imported/component/icon-logo.json new file mode 100644 index 00000000..e57c9b41 --- /dev/null +++ b/proprietary/design-tokens/src/imported/component/icon-logo.json @@ -0,0 +1,42 @@ +{ + "lux": { + "icon-logo": { + "eherkenning": { + "e-color": { + "parent": "mode/light", + "type": "color", + "value": "{mode.icon-logo.eherkenning.e-color}" + } + }, + "eidas": { + "stars-color": { + "parent": "mode/light", + "type": "color", + "value": "{mode.icon-logo.eidas.stars-color}" + }, + "lock-color": { + "parent": "mode/light", + "type": "color", + "value": "{mode.icon-logo.eidas.lock-color}" + }, + "lines-color": { + "parent": "mode/light", + "type": "color", + "value": "{mode.icon-logo.eidas.lines-color}" + }, + "background-color": { + "parent": "mode/light", + "type": "color", + "value": "{mode.icon-logo.eidas.background-color}" + } + }, + "digid": { + "border-color": { + "parent": "mode/light", + "type": "color", + "value": "{mode.icon-logo.digid.border-color}" + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/component/link.json b/proprietary/design-tokens/src/imported/component/link.json new file mode 100644 index 00000000..c08b320f --- /dev/null +++ b/proprietary/design-tokens/src/imported/component/link.json @@ -0,0 +1,54 @@ +{ + "lux": { + "link": { + "color": { + "type": "color", + "value": "{mode.link.color}" + }, + "column-gap": { + "type": "spacing", + "value": "{lux.space.05-x}" + }, + "icon": { + "size": { + "type": "sizing", + "value": "{lux.size.icon}" + } + }, + "hover": { + "color": { + "type": "color", + "value": "{mode.link.hover.color}" + } + }, + "active": { + "color": { + "type": "color", + "value": "{mode.link.active.color}" + } + }, + "visited": { + "color": { + "type": "color", + "value": "{mode.link.visited.color}" + } + }, + "font-family": { + "type": "fontFamilies", + "value": "{lux.font-family.primary}" + }, + "font-weight": { + "type": "fontWeights", + "value": "{lux.font-weight.regular}" + }, + "line-height": { + "type": "lineHeights", + "value": "{lux.line-height.m}" + }, + "font-size": { + "type": "fontSizes", + "value": "{lux.font-size.m}" + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/component/link/default.json b/proprietary/design-tokens/src/imported/component/link/default.json deleted file mode 100644 index b5be80c5..00000000 --- a/proprietary/design-tokens/src/imported/component/link/default.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "lux": { - "link": { - "color": { - "value": "{lux.color.donkerblauw.300}", - "type": "color" - }, - "margin-inline": { - "value": "{lux.space.05-x}", - "type": "dimension" - }, - "icon": { - "size": { - "value": "{lux.button.icon.size}", - "type": "dimension" - } - }, - "hover": { - "color": { - "value": "{lux.color.donkerblauw.400}", - "type": "color" - } - }, - "active": { - "color": { - "value": "{lux.color.paars.300}", - "type": "color" - } - }, - "visited": { - "color": { - "value": "{lux.color.paars.300}", - "type": "color" - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/core/default.json b/proprietary/design-tokens/src/imported/core/default.json index 845acf72..76726c00 100644 --- a/proprietary/design-tokens/src/imported/core/default.json +++ b/proprietary/design-tokens/src/imported/core/default.json @@ -3,582 +3,763 @@ "color": { "grijs": { "100": { - "value": "#fbfbfb", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#fbfbfb", "description": "" }, "200": { - "value": "#f3f3f3", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#f3f3f3", "description": "" }, "300": { - "value": "#e6e6e6", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#e6e6e6", "description": "" }, "400": { - "value": "#a7a7a7", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#a7a7a7", "description": "" }, "500": { - "value": "#696969", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#696969", "description": "" }, "600": { - "value": "#383838", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#383838", "description": "" }, "700": { - "value": "#282828", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#282828", "description": "" }, "800": { - "value": "#1d1d1d", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#1d1d1d", "description": "" }, "900": { - "value": "#171717", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#171717", "description": "" } }, "zwart": { - "value": "#000000", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#000000", "description": "" }, "wit": { - "value": "#ffffff", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#ffffff", "description": "" }, "none": { - "value": "#ffffff00", - "type": "color", "parent": "core/default", + "type": "color", + "value": "#ffffff00", "description": "" }, "lichtblauw": { - "100": { - "value": "#eef7fb", + "50": { + "parent": "core/default", "type": "color", + "value": "#eef7fb" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#ddeff8" }, "200": { - "value": "#ddeff8", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#CCE7F4", + "type": "color" }, "300": { - "value": "#8fcae7", - "type": "color", + "value": "#BCDFF0", + "type": "color" + }, + "400": { + "value": "#ABD7ED", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#8fcae7" } }, "violet": { - "100": { - "value": "#f2d9e7", + "50": { + "parent": "core/default", "type": "color", + "value": "#f2d9e7" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#e5b3d0" }, "200": { - "value": "#e5b3d0", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#D88CB7", + "type": "color" }, "300": { - "value": "#a90061", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#CB66A0", + "type": "color" }, "400": { - "value": "#52002f", + "value": "#BE4088", + "type": "color" + }, + "500": { + "parent": "core/default", "type": "color", + "value": "#a90061" + }, + "700": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#52002f" } }, "paars": { - "100": { - "value": "#e3dce7", + "50": { + "parent": "core/default", "type": "color", + "value": "#e3dce7" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#c6b9cf" }, "200": { - "value": "#c6b9cf", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#A995B7", + "type": "color" }, "300": { - "value": "#42145f", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#8D729F", + "type": "color" }, "400": { - "value": "#3b1255", + "parent": "core/default", "type": "color", + "value": "#714f87" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#42145f" } }, "hemelblauw": { - "100": { - "value": "#d9ebf7", + "50": { + "parent": "core/default", "type": "color", + "value": "#d9ebf7" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#b3d7ee" }, "200": { - "value": "#b3d7ee", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#8CC3E6", + "type": "color" }, "300": { - "value": "#007bc7", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#66AFDD", + "type": "color" }, "400": { - "value": "#00436c", + "value": "#409CD5", + "type": "color" + }, + "500": { + "parent": "core/default", "type": "color", + "value": "#007bc7" + }, + "700": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#00436c" } }, "donkerblauw": { - "100": { - "value": "#d9e8f0", + "50": { + "parent": "core/default", "type": "color", + "value": "#d9e8f0" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#b3d2e1" }, "200": { - "value": "#b3d2e1", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#8CBBD2", + "type": "color" }, "300": { - "value": "#01689b", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#66A4C3", + "type": "color" }, "400": { - "value": "#013f5e", + "value": "#408EB4", + "type": "color" + }, + "500": { + "parent": "core/default", "type": "color", + "value": "#01689b" + }, + "700": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#013f5e" } }, "mintgroen": { - "100": { - "value": "#eaf8f4", + "50": { + "parent": "core/default", "type": "color", + "value": "#eaf8f4" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#d6f2e9" }, "200": { - "value": "#d6f2e9", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#C1EBDE", + "type": "color" }, "300": { - "value": "#76d2b6", - "type": "color", + "value": "#ACE4D3", + "type": "color" + }, + "400": { + "value": "#98DDC8", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#76d2b6" } }, "mosgroen": { - "100": { - "value": "#ebebd9", + "50": { + "parent": "core/default", "type": "color", + "value": "#ebebd9" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#d6d7b3" }, "200": { - "value": "#d6d7b3", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#C1C38C", + "type": "color" }, "300": { - "value": "#777b00", - "type": "color", + "value": "#ADAF66", + "type": "color" + }, + "400": { + "value": "#999C40", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#777b00" } }, "groen": { - "100": { - "value": "#e1eddb", + "50": { + "parent": "core/default", "type": "color", + "value": "#e1eddb" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#c4dbb6" }, "200": { - "value": "#c4dbb6", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#A5C991", + "type": "color" }, "300": { - "value": "#39870c", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#88B76D", + "type": "color" }, "400": { - "value": "#004b17", + "value": "#6AA549", + "type": "color" + }, + "500": { + "parent": "core/default", "type": "color", + "value": "#39870c" + }, + "700": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#004b17" } }, "donkergroen": { - "100": { - "value": "#dfe6e1", + "50": { + "parent": "core/default", "type": "color", + "value": "#dfe6e1" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#becdc3" }, "200": { - "value": "#becdc3", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#9DB4A4", + "type": "color" }, "300": { - "value": "#275937", - "type": "color", + "value": "#7D9B87", + "type": "color" + }, + "400": { + "value": "#5D8269", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#275937" } }, "bruin": { - "100": { - "value": "#efeada", + "50": { + "parent": "core/default", "type": "color", + "value": "#efeada" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#dfd4b6" }, "200": { - "value": "#dfd4b6", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#CFBF90", + "type": "color" }, "300": { - "value": "#94710a", - "type": "color", + "value": "#BFA96C", + "type": "color" + }, + "400": { + "value": "#AF9447", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#94710a" } }, "donkerbruin": { - "100": { - "value": "#e8e0df", + "50": { + "parent": "core/default", "type": "color", + "value": "#e8e0df" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#d1c2be" }, "200": { - "value": "#d1c2be", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#BAA39D", + "type": "color" }, "300": { - "value": "#673327", - "type": "color", + "value": "#A3847D", + "type": "color" + }, + "400": { + "value": "#8D665D", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#673327" } }, "geel": { - "100": { - "value": "#fefbdd", + "50": { + "parent": "core/default", "type": "color", + "value": "#fefbdd" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#fdf6bc" }, "200": { - "value": "#fdf6bc", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#FCF199", + "type": "color" }, "300": { - "value": "#f9e11e", - "type": "color", + "value": "#FBED78", + "type": "color" + }, + "400": { + "value": "#FAE856", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#f9e11e" } }, "donkergeel": { - "100": { - "value": "#fff4db", + "50": { + "parent": "core/default", "type": "color", + "value": "#fff4db" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#ffe9b8" }, "200": { - "value": "#ffe9b8", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#FDDE94", + "type": "color" }, "300": { - "value": "#ffb612", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#FDD370", + "type": "color" }, "400": { - "value": "#bf880d", + "value": "#FDC84D", + "type": "color" + }, + "500": { + "parent": "core/default", "type": "color", + "value": "#ffb612" + }, + "700": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#bf880d" } }, "oranje": { - "100": { - "value": "#fbead9", + "50": { + "parent": "core/default", "type": "color", + "value": "#fbead9" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#f6d4b3" }, "200": { - "value": "#f6d4b3", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#F1BE8C", + "type": "color" }, "300": { - "value": "#e17000", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#EDA966", + "type": "color" }, "400": { - "value": "#b35900", + "value": "#E89440", + "type": "color" + }, + "500": { + "parent": "core/default", "type": "color", + "value": "#e17000" + }, + "700": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#b35900" } }, "rood": { - "100": { - "value": "#f9dfdd", + "50": { + "parent": "core/default", "type": "color", + "value": "#f9dfdd" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#f2bfbc" }, "200": { - "value": "#f2bfbc", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#EC9F99", + "type": "color" }, "300": { - "value": "#d52b1e", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#E67F78", + "type": "color" }, "400": { - "value": "#542621", + "value": "#DF6056", + "type": "color" + }, + "500": { + "parent": "core/default", "type": "color", + "value": "#d52b1e" + }, + "700": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#542621" } }, "roze": { - "100": { - "value": "#fdeff8", + "50": { + "parent": "core/default", "type": "color", + "value": "#fdeff8" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#fbdef0" }, "200": { - "value": "#fbdef0", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#F8CEE8", + "type": "color" }, "300": { - "value": "#f092cd", - "type": "color", + "value": "#F6BDE1", + "type": "color" + }, + "400": { + "value": "#F4ADD9", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#f092cd" } }, "robijnrood": { - "100": { - "value": "#f7d9e7", + "50": { + "parent": "core/default", "type": "color", + "value": "#f7d9e7" + }, + "100": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#efb3ce" }, "200": { - "value": "#efb3ce", - "type": "color", - "parent": "core/default", - "description": "" + "value": "#E78CB6", + "type": "color" }, "300": { - "value": "#ca005d", - "type": "color", + "value": "#DF669D", + "type": "color" + }, + "400": { + "value": "#D74085", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#ca005d" } }, - "logoblauw": { + "lintblauw": { + "50": { + "value": "#dce3ea", + "type": "color" + }, + "100": { + "value": "#b8c6d5", + "type": "color" + }, + "200": { + "value": "#95a9c0", + "type": "color" + }, "300": { - "value": "#154273", - "type": "color", + "value": "#738eab", + "type": "color" + }, + "400": { + "value": "#4f7196", + "type": "color" + }, + "500": { "parent": "core/default", - "description": "" + "type": "color", + "value": "#154273" } } }, "border-radius": { - "default": { - "value": "0.25rem", - "type": "dimension", - "parent": "core/default", - "description": "" - }, "circle": { - "value": "62.4375rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "borderRadius", + "value": "999px" }, "none": { - "value": "0rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "borderRadius", + "value": "0px" } }, "border-width": { "default": { - "value": "0.0625rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "borderWidth", + "value": "1px" }, "m": { - "value": "0.125rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "borderWidth", + "value": "2px" }, "none": { - "value": "0rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "borderWidth", + "value": "0px" } }, "space": { "0-x": { - "value": "0rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "0" }, "025-x": { - "value": "0.125rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "0.25 * 0.5rem", + "description": "0.25 x => 025..." }, "05-x": { - "value": "0.25rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "0.5 * 0.5rem", + "description": "0.5 x => 05..." }, "1-x": { - "value": "0.5rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "0.5rem", + "description": "Base spacing. Bij wijziging, ook anderen wijzigen" }, "105-x": { - "value": "0.75rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "1.5 * 0.5rem", + "description": "1 + 0.5 x => 105..." }, "2-x": { - "value": "1rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "2 * 0.5rem" }, "3-x": { - "value": "1.5rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "3 * 0.5rem" }, "4-x": { - "value": "2rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "4 * 0.5rem" }, "5-x": { - "value": "2.5rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "5 * 0.5rem" }, "6-x": { - "value": "3rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "6 * 0.5rem" }, "7-x": { - "value": "3.5rem", - "type": "dimension", "parent": "core/default", - "description": "" + "type": "spacing", + "value": "7 * 0.5rem" + } + }, + "font-weight": { + "regular": { + "type": "fontWeights", + "value": "Regular" + }, + "bold": { + "type": "fontWeights", + "value": "Bold" + } + } + }, + "oud": { + "lux": { + "border-radius": { + "default": { + "parent": "core/default", + "type": "borderRadius", + "value": "4px" + } + } + } + }, + "rh": { + "font-family": { + "sans": { + "type": "fontFamilies", + "value": "RijksoverheidSansWebText, Arial, Verdana, sans-serif" + }, + "serif": { + "type": "fontFamilies", + "value": "RijksoverheidSerifWebText, 'Times New Roman', serif", + "description": "TODO: fonts toevoegen in assets en css" } } + }, + "no-token": { + "type": "other", + "value": "/* */", + "description": "Discussie nodig" } -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/mode/dark (beta).json b/proprietary/design-tokens/src/imported/mode/dark.json similarity index 77% rename from proprietary/design-tokens/src/imported/mode/dark (beta).json rename to proprietary/design-tokens/src/imported/mode/dark.json index 5df34f2e..b61bec5e 100644 --- a/proprietary/design-tokens/src/imported/mode/dark (beta).json +++ b/proprietary/design-tokens/src/imported/mode/dark.json @@ -3,294 +3,298 @@ "color": { "foreground": { "default": { - "value": "{lux.color.grijs.100}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.grijs.100}", "description": "Standaard kleur voor teksten en iconen. Gebruik deze voor body content, titels en labels." }, "subdued": { - "value": "{lux.color.grijs.400}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.grijs.400}", "description": "Gebruik voor content die extra context biedt, maar niet essentieel is om de interface te begrijpen." }, "onEmphasis": { - "value": "{lux.color.wit}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.wit}", "description": "Tekst en iconen die op een sterke achtergrond staan. Zoals het label in de primaire button of links in de footer." + }, + "link": { + "value": "{lux.color.lichtblauw.100}", + "type": "color" } }, "background": { "default": { - "value": "{lux.color.grijs.700}", - "type": "color", "parent": "mode/dark (beta)", - "description": "Achtergrond kleur" + "type": "color", + "value": "{lux.color.grijs.700}", + "description": "Gebruik deze kleur voor de achtergrond van de website, hierbovenop komen de background kleuren." }, "subdued": { - "value": "{lux.color.grijs.800}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.grijs.800}", "description": "Subtiele achtergrond kleur" }, "hover": { - "value": "{lux.color.grijs.600}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.grijs.600}", "description": "Kleur van elementen als je eroverheen gaat met je muis" } }, "border": { "default": { - "value": "{lux.color.grijs.500}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.grijs.500}", "description": "Border kleur" }, "subdued": { - "value": "{lux.color.grijs.600}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.grijs.600}", "description": "Subtiele border" }, "strong": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" } }, "canvas": { - "value": "{lux.color.zwart}", - "type": "color", "parent": "mode/dark (beta)", - "description": "Achtergrond kleur van de website" + "type": "color", + "value": "{lux.color.zwart}", + "description": "Gebruik deze kleur voor de achtergrond van de website, hierbovenop komen de background kleuren." }, "feedback": { "success": { "default": { - "value": "{lux.color.groen.300}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.groen.500}", "description": "Gebruik deze kleur om een positieve boodschap te benadrukken." }, "subdued": { - "value": "{lux.color.groen.100}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.groen.50}", "description": "Gebruik deze kleur om een positieve boodschap te highlighten." } }, "info": { "default": { - "value": "{lux.color.hemelblauw.300}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.hemelblauw.500}", "description": "Gebruik deze kleur om een informatieve boodschap te benadrukken." }, "subdued": { - "value": "{lux.color.hemelblauw.100}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.hemelblauw.50}", "description": "Gebruik deze kleur om een informatieve boodschap te highlighten." } }, "error": { "default": { - "value": "{lux.color.rood.300}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.rood.500}", "description": "Gebruik deze kleur om een negatieve boodschap te benadrukken." }, "subdued": { - "value": "{lux.color.rood.100}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.rood.50}", "description": "Gebruik deze kleur om een negatieve boodschap te highlighten." } }, "warning": { "default": { - "value": "{lux.color.donkergeel.300}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.donkergeel.500}", "description": "Gebruik deze kleur om een waarschuwing te benadrukken." }, "subdued": { - "value": "{lux.color.donkergeel.100}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.donkergeel.50}", "description": "Gebruik deze kleur om een waarschuwing te highlighten." } } }, "focus": { "outline": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.border.strong}", "description": "Outline kleur voor de focus state." } } - }, + } + }, + "mode": { "link": { "color": { - "value": "{lux.color.lichtblauw.200}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.lichtblauw.100}", "description": "Gebruik deze kleur voor link tekst" }, "visited": { "color": { - "value": "{lux.color.paars.200}", - "type": "color", "parent": "mode/dark (beta)", - "description": "" + "type": "color", + "value": "{lux.color.paars.100}" } }, "hover": { "color": { - "value": "{lux.color.lichtblauw.300}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.lichtblauw.500}", "description": "Gebruik deze kleur voor de hover van link tekst" } }, "active": { "color": { - "value": "{lux.color.paars.200}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.paars.100}", "description": "" } } - } - }, - "mode": { + }, "button": { "tertiary": { "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" }, "hover": { "background-color": { - "value": "{lux.color.background.hover}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.background.hover}", "description": "" }, "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" } } }, "secondary": { "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" }, "hover": { "background-color": { - "value": "{lux.color.background.hover}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.background.hover}", "description": "" }, "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" }, "border-color": { - "value": "{lux.color.border.default}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.border.default}", "description": "" } }, "border-color": { + "parent": "mode/dark (beta)", + "type": "color", "value": "{lux.color.border.default}", + "description": "" + }, + "background-color": { + "parent": "mode/dark (beta)", "type": "color", + "value": "{lux.color.none}", + "description": "" + } + } + }, + "icon-logo": { + "eherkenning": { + "e-color": { "parent": "mode/dark (beta)", + "type": "color", + "value": "#ffffff", + "description": "" + } + }, + "eidas": { + "stars-color": { + "parent": "mode/dark (beta)", + "type": "color", + "value": "#ffffff", + "description": "" + }, + "lock-color": { + "parent": "mode/dark (beta)", + "type": "color", + "value": "#ffffff", + "description": "" + }, + "lines-color": { + "parent": "mode/dark (beta)", + "type": "color", + "value": "#ffffff", "description": "" }, "background-color": { - "value": "{lux.color.none}", + "parent": "mode/dark (beta)", "type": "color", + "value": "#ffffff00", + "description": "" + } + }, + "digid": { + "border-color": { "parent": "mode/dark (beta)", + "type": "color", + "value": "#d1d1d1", "description": "" } } }, "button-login": { - "icon": { - "eherkenning": { - "e-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - } - }, - "eidas": { - "stars-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - }, - "lock-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - }, - "lines-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - }, - "background-color": { - "value": "#ffffff00", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - } - } - }, "active": { "background-color": { - "value": "{lux.color.grijs.500}", - "type": "color", "parent": "mode/dark (beta)", - "description": "" + "type": "color", + "value": "{lux.color.grijs.500}" } } }, "rijkslogo": { "color": { - "value": "{lux.color.wit}", - "type": "color", "parent": "mode/dark (beta)", + "type": "color", + "value": "{lux.color.wit}", "description": "" } - }, - "on": { - "value": "dark", - "type": "text", - "parent": "mode/dark (beta)", - "description": "" } } -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/mode/light.json b/proprietary/design-tokens/src/imported/mode/light.json index 981d3c56..52b5ee9a 100644 --- a/proprietary/design-tokens/src/imported/mode/light.json +++ b/proprietary/design-tokens/src/imported/mode/light.json @@ -3,293 +3,299 @@ "color": { "foreground": { "default": { - "value": "{lux.color.grijs.700}", + "parent": "mode/light", "type": "color", - "description": "Standaard kleur voor teksten en iconen. Gebruik deze voor body content, titels en labels.", - "parent": "mode/light" + "value": "{lux.color.grijs.700}", + "description": "Standaard kleur voor teksten en iconen. Gebruik deze voor body content, titels en labels." }, "subdued": { - "value": "{lux.color.grijs.500}", + "parent": "mode/light", "type": "color", - "description": "Gebruik voor content die extra context biedt, maar niet essentieel is om de interface te begrijpen.", - "parent": "mode/light" + "value": "{lux.color.grijs.500}", + "description": "Gebruik voor content die extra context biedt, maar niet essentieel is om de interface te begrijpen." }, "onEmphasis": { - "value": "{lux.color.wit}", + "parent": "mode/light", "type": "color", - "description": "Tekst en iconen die op een sterke achtergrond staan. Zoals het label in de primaire button of links in de footer.", - "parent": "mode/light" + "value": "{lux.color.wit}", + "description": "Tekst en iconen die op een sterke achtergrond staan. Zoals het label in de primaire button of links in de footer." + }, + "link": { + "value": "{lux.color.donkerblauw.500}", + "type": "color" } }, "background": { "default": { - "value": "{lux.color.wit}", + "parent": "mode/light", "type": "color", - "description": "Achtergrond kleur", - "parent": "mode/light" + "value": "{lux.color.wit}", + "description": "Achtergrond kleur" }, "subdued": { - "value": "{lux.color.grijs.200}", + "parent": "mode/light", "type": "color", - "description": "Subtiele achtergrond kleur", - "parent": "mode/light" + "value": "{lux.color.grijs.200}", + "description": "Subtiele achtergrond kleur" }, "hover": { - "value": "{lux.color.grijs.300}", + "parent": "mode/light", "type": "color", - "description": "Kleur van elementen als je eroverheen gaat met je muis", - "parent": "mode/light" + "value": "{lux.color.grijs.300}", + "description": "Kleur van elementen als je eroverheen gaat met je muis" } }, "border": { "default": { - "value": "{lux.color.grijs.500}", + "parent": "mode/light", "type": "color", - "description": "Border kleur", - "parent": "mode/light" + "value": "{lux.color.grijs.500}", + "description": "Border kleur" }, "subdued": { - "value": "{lux.color.grijs.400}", + "parent": "mode/light", "type": "color", - "description": "Subtiele border", - "parent": "mode/light" + "value": "{lux.color.grijs.400}", + "description": "Subtiele border" }, "strong": { - "value": "{lux.color.foreground.default}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{lux.color.foreground.default}", + "description": "" } }, "canvas": { - "value": "{lux.color.grijs.200}", + "parent": "mode/light", "type": "color", - "description": "Achtergrond kleur van de website", - "parent": "mode/light" + "value": "{lux.color.grijs.200}", + "description": "Gebruik deze kleur voor de achtergrond van de website, hierbovenop komen de background kleuren." }, "feedback": { "success": { "default": { - "value": "{lux.color.groen.300}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een positieve boodschap te benadrukken.", - "parent": "mode/light" + "value": "{lux.color.groen.500}", + "description": "Gebruik deze kleur om een positieve boodschap te benadrukken." }, "subdued": { - "value": "{lux.color.groen.100}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een positieve boodschap te highlighten.", - "parent": "mode/light" + "value": "{lux.color.groen.50}", + "description": "Gebruik deze kleur om een positieve boodschap te highlighten." } }, "info": { "default": { - "value": "{lux.color.hemelblauw.300}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een informatieve boodschap te benadrukken.", - "parent": "mode/light" + "value": "{lux.color.hemelblauw.500}", + "description": "Gebruik deze kleur om een informatieve boodschap te benadrukken." }, "subdued": { - "value": "{lux.color.hemelblauw.100}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een informatieve boodschap te highlighten.", - "parent": "mode/light" + "value": "{lux.color.hemelblauw.50}", + "description": "Gebruik deze kleur om een informatieve boodschap te highlighten." } }, "error": { "default": { - "value": "{lux.color.rood.300}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een negatieve boodschap te benadrukken.", - "parent": "mode/light" + "value": "{lux.color.rood.500}", + "description": "Gebruik deze kleur om een negatieve boodschap te benadrukken." }, "subdued": { - "value": "{lux.color.rood.100}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een negatieve boodschap te highlighten.", - "parent": "mode/light" + "value": "{lux.color.rood.50}", + "description": "Gebruik deze kleur om een negatieve boodschap te highlighten." } }, "warning": { "default": { - "value": "{lux.color.donkergeel.300}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een waarschuwing te benadrukken.", - "parent": "mode/light" + "value": "{lux.color.donkergeel.500}", + "description": "Gebruik deze kleur om een waarschuwing te benadrukken." }, "subdued": { - "value": "{lux.color.donkergeel.100}", + "parent": "mode/light", "type": "color", - "description": "Gebruik deze kleur om een waarschuwing te highlighten.", - "parent": "mode/light" + "value": "{lux.color.donkergeel.50}", + "description": "Gebruik deze kleur om een waarschuwing te highlighten." } } }, "focus": { "outline": { - "value": "{lux.color.foreground.default}", + "parent": "mode/light", "type": "color", - "description": "Outline kleur voor de focus state.", - "parent": "mode/light" + "value": "{lux.color.border.strong}", + "description": "Outline kleur voor de focus state." } } - }, + } + }, + "mode": { "link": { "color": { - "value": "{lux.color.donkerblauw.300}", + "parent": "mode/dark (beta)", "type": "color", - "parent": "mode/light", + "value": "{lux.color.donkerblauw.500}", "description": "Gebruik deze kleur voor link tekst" }, "visited": { "color": { - "value": "{lux.color.paars.300}", + "parent": "mode/dark (beta)", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{lux.color.paars.500}" } }, "hover": { "color": { - "value": "{lux.color.donkerblauw.400}", + "parent": "mode/dark (beta)", "type": "color", - "description": "Gebruik deze kleur voor de hover van link tekst", - "parent": "mode/light" + "value": "{lux.color.donkerblauw.700}", + "description": "Gebruik deze kleur voor de hover van link tekst" } }, "active": { "color": { - "value": "{lux.color.paars.300}", + "parent": "mode/dark (beta)", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{lux.color.paars.500}" } } - } - }, - "mode": { + }, "button": { "tertiary": { "color": { - "value": "{product.button.tertiary.color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.tertiary.color}", + "description": "" }, "hover": { "background-color": { - "value": "{product.button.tertiary.hover.background-color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.tertiary.hover.background-color}", + "description": "" }, "color": { - "value": "{product.button.tertiary.hover.color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.tertiary.hover.color}", + "description": "" } } }, "secondary": { "color": { - "value": "{product.button.secondary.color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.secondary.color}", + "description": "" }, "hover": { "background-color": { - "value": "{product.button.secondary.hover.background-color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.secondary.hover.background-color}", + "description": "" }, "color": { - "value": "{product.button.secondary.hover.color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.secondary.hover.color}", + "description": "" }, "border-color": { - "value": "{product.button.secondary.hover.border-color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.secondary.hover.border-color}", + "description": "" } }, "border-color": { - "value": "{product.button.secondary.border-color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.secondary.border-color}", + "description": "" }, "background-color": { - "value": "{product.button.secondary.background-color}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{product.button.secondary.background-color}", + "description": "" } } }, - "button-login": { - "icon": { - "eherkenning": { - "e-color": { - "value": "#203a70", - "type": "color", - "description": "", - "parent": "mode/light" - } + "icon-logo": { + "eherkenning": { + "e-color": { + "parent": "mode/light", + "type": "color", + "value": "#203a70", + "description": "" + } + }, + "eidas": { + "stars-color": { + "parent": "mode/light", + "type": "color", + "value": "#f1cc49", + "description": "" }, - "eidas": { - "stars-color": { - "value": "#f1cc49", - "type": "color", - "description": "", - "parent": "mode/light" - }, - "lock-color": { - "value": "#ffffff", - "type": "color", - "description": "", - "parent": "mode/light" - }, - "lines-color": { - "value": "#6ba6f1", - "type": "color", - "description": "", - "parent": "mode/light" - }, - "background-color": { - "value": "#1d336a", - "type": "color", - "description": "", - "parent": "mode/light" - } + "lock-color": { + "parent": "mode/light", + "type": "color", + "value": "#ffffff", + "description": "" + }, + "lines-color": { + "parent": "mode/light", + "type": "color", + "value": "#6ba6f1", + "description": "" + }, + "background-color": { + "parent": "mode/light", + "type": "color", + "value": "#1d336a", + "description": "" } }, + "digid": { + "border-color": { + "parent": "mode/light", + "type": "color", + "value": "{lux.color.none}", + "description": "" + } + } + }, + "button-login": { "active": { "background-color": { - "value": "{lux.color.grijs.400}", + "parent": "mode/light", + "oldValue": "{lux.color.grijs.400}", "type": "color", - "parent": "mode/light" + "value": "{lux.color.grijs.400}", + "description": "" } } }, "rijkslogo": { "color": { - "value": "{lux.color.zwart}", + "parent": "mode/light", "type": "color", - "description": "", - "parent": "mode/light" + "value": "{lux.color.zwart}", + "description": "" } - }, - "on": { - "value": "light", - "type": "text", - "description": "", - "parent": "mode/light" } } -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/nl/utrecht-alert.json b/proprietary/design-tokens/src/imported/nl/utrecht-alert.json new file mode 100644 index 00000000..d3c2d352 --- /dev/null +++ b/proprietary/design-tokens/src/imported/nl/utrecht-alert.json @@ -0,0 +1,132 @@ +{ + "utrecht": { + "alert": { + "background-color": { + "type": "color", + "value": "{lux.color.feedback.info.subdued}" + }, + "border-color": { + "type": "color", + "value": "{lux.alert.border-color}" + }, + "border-radius": { + "type": "borderRadius", + "value": "{lux.alert.border-radius}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.alert.border-width}" + }, + "color": { + "type": "color", + "value": "{lux.alert.color}" + }, + "padding-block-start": { + "type": "spacing", + "value": "{lux.alert.padding-block-start}" + }, + "padding-block-end": { + "type": "spacing", + "value": "{lux.alert.padding-block-end}" + }, + "padding-inline-start": { + "type": "spacing", + "value": "{lux.alert.padding-inline-start}" + }, + "padding-inline-end": { + "type": "spacing", + "value": "{lux.alert.padding-inline-end}" + }, + "margin-block-start": { + "type": "spacing", + "value": "{no-token}" + }, + "margin-block-end": { + "type": "spacing", + "value": "{no-token}" + }, + "warning": { + "background-color": { + "type": "color", + "value": "{lux.alert.warning.background-color}" + }, + "color": { + "type": "color", + "value": "{lux.alert.color}" + }, + "border-color": { + "type": "color", + "value": "{lux.alert.border-color}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.alert.border-width}" + } + }, + "error": { + "background-color": { + "type": "color", + "value": "{lux.alert.error.background-color}" + }, + "color": { + "type": "color", + "value": "{lux.alert.color}" + }, + "border-color": { + "type": "color", + "value": "{lux.alert.border-color}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.alert.border-width}" + } + }, + "ok": { + "background-color": { + "type": "color", + "value": "{lux.alert.success.background-color}" + }, + "color": { + "type": "color", + "value": "{lux.alert.color}" + }, + "border-color": { + "type": "color", + "value": "{lux.alert.border-color}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.alert.border-width}" + } + }, + "icon": { + "color": { + "type": "color", + "value": "{no-token}" + }, + "gap": { + "type": "spacing", + "value": "{lux.alert.column-gap}" + }, + "error": { + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "warning": { + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "ok": { + "color": { + "type": "color", + "value": "{no-token}" + } + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/nl/utrecht-button.json b/proprietary/design-tokens/src/imported/nl/utrecht-button.json new file mode 100644 index 00000000..1a415e47 --- /dev/null +++ b/proprietary/design-tokens/src/imported/nl/utrecht-button.json @@ -0,0 +1,460 @@ +{ + "utrecht": { + "button": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "border-radius": { + "type": "borderRadius", + "value": "{lux.button.border-radius}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.button.border-width}" + }, + "color": { + "type": "color", + "value": "{no-token}" + }, + "font-family": { + "type": "fontFamilies", + "value": "{lux.button.font-family}" + }, + "font-size": { + "type": "fontSizes", + "value": "{lux.button.font-size}" + }, + "font-weight": { + "type": "fontWeight", + "value": "{lux.button.font-weight}" + }, + "inline-size": { + "type": "sizing", + "value": "{no-token}", + "description": "Wat is dit voor token? Waarom zit deze in de button? " + }, + "line-height": { + "type": "lineHeights", + "value": "{lux.button.line-height}" + }, + "min-block-size": { + "type": "sizing", + "value": "{lux.button.min-block-size}" + }, + "min-inline-size": { + "type": "sizing", + "value": "{lux.button.min-inline-size}" + }, + "column-gap": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "spacing", + "value": "{lux.button.column-gap}" + }, + "padding-block-start": { + "type": "spacing", + "value": "{lux.button.padding-block-start}" + }, + "padding-block-end": { + "type": "spacing", + "value": "{lux.button.padding-block-end}" + }, + "padding-inline-start": { + "type": "spacing", + "value": "{lux.button.padding-inline-start}" + }, + "padding-inline-end": { + "type": "spacing", + "value": "{lux.button.padding-inline-end}" + }, + "text-transform": { + "type": "other", + "value": "{no-token}" + }, + "active": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "icon": { + "gap": { + "type": "spacing", + "value": "{utrecht.button.column-gap}" + }, + "size": { + "type": "sizing", + "value": "{lux.button.icon.size}" + } + }, + "disabled": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "focus": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + }, + "scale": { + "type": "other", + "value": "{no-token}" + } + }, + "hover": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + }, + "scale": { + "type": "other", + "value": "{no-token}" + } + }, + "pressed": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "primary-action": { + "background-color": { + "type": "color", + "value": "{lux.button.primary.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.primary.border-color}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.button.border-width}" + }, + "color": { + "type": "color", + "value": "{lux.button.primary.color}" + }, + "font-weight": { + "type": "fontWeight", + "value": "{lux.button.font-weight}" + }, + "active": { + "background-color": { + "type": "color", + "value": "{lux.button.primary.active.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.primary.active.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.primary.active.color}" + } + }, + "disabled": { + "background-color": { + "type": "color", + "value": "{lux.button.primary.disabled.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.primary.disabled.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.primary.disabled.color}" + } + }, + "hover": { + "background-color": { + "type": "color", + "value": "{lux.button.primary.hover.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.primary.hover.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.primary.hover.color}" + }, + "scale": { + "type": "other", + "value": "{no-token}" + } + }, + "focus": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "pressed": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + } + }, + "secondary-action": { + "background-color": { + "type": "color", + "value": "{lux.button.secondary.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.secondary.border-color}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.button.border-width}" + }, + "color": { + "type": "color", + "value": "{lux.button.secondary.color}" + }, + "font-weight": { + "type": "fontWeight", + "value": "{lux.button.font-weight}" + }, + "active": { + "background-color": { + "type": "color", + "value": "{lux.button.secondary.active.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.secondary.active.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.secondary.active.color}" + } + }, + "disabled": { + "background-color": { + "type": "color", + "value": "{lux.button.secondary.disabled.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.secondary.disabled.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.secondary.disabled.color}" + } + }, + "hover": { + "background-color": { + "type": "color", + "value": "{lux.button.secondary.hover.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.secondary.hover.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.secondary.hover.color}" + }, + "scale": { + "type": "other", + "value": "{no-token}" + } + }, + "focus": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "pressed": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + } + }, + "subtle": { + "background-color": { + "type": "color", + "value": "{lux.button.tertairy.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.tertairy.border-color}" + }, + "border-width": { + "type": "borderWidth", + "value": "{lux.button.border-width}" + }, + "color": { + "type": "color", + "value": "{lux.button.tertairy.color}" + }, + "font-weight": { + "type": "fontWeight", + "value": "{lux.button.font-weight}" + }, + "active": { + "background-color": { + "type": "color", + "value": "{lux.button.tertairy.active.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.tertairy.active.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.tertairy.active.color}" + } + }, + "disabled": { + "background-color": { + "type": "color", + "value": "{lux.button.tertairy.disabled.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.tertairy.disabled.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.tertairy.disabled.color}" + } + }, + "hover": { + "background-color": { + "type": "color", + "value": "{lux.button.tertairy.hover.background-color}" + }, + "border-color": { + "type": "color", + "value": "{lux.button.tertairy.hover.border-color}" + }, + "color": { + "type": "color", + "value": "{lux.button.tertairy.hover.color}" + }, + "scale": { + "type": "other", + "value": "{no-token}" + } + }, + "focus": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + }, + "pressed": { + "background-color": { + "type": "color", + "value": "{no-token}" + }, + "border-color": { + "type": "color", + "value": "{no-token}" + }, + "color": { + "type": "color", + "value": "{no-token}" + } + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/nl/utrecht-link.json b/proprietary/design-tokens/src/imported/nl/utrecht-link.json new file mode 100644 index 00000000..e65c2831 --- /dev/null +++ b/proprietary/design-tokens/src/imported/nl/utrecht-link.json @@ -0,0 +1,82 @@ +{ + "utrecht": { + "link": { + "color": { + "type": "color", + "value": "{lux.link.color}" + }, + "text-decoration": { + "type": "other", + "value": "{no-token}" + }, + "text-decoration-color": { + "type": "color", + "value": "{lux.link.color}" + }, + "text-decoration-thickness": { + "type": "other", + "value": "{no-token}" + }, + "text-underline-offset": { + "type": "other", + "value": "{no-token}" + }, + "active": { + "color": { + "type": "color", + "value": "{lux.link.active.color}" + } + }, + "focus": { + "color": { + "type": "color", + "value": "{no-token}" + }, + "text-decoration": { + "type": "other", + "value": "{no-token}" + }, + "text-decoration-thickness": { + "type": "other", + "value": "{no-token}" + } + }, + "hover": { + "color": { + "type": "color", + "value": "{lux.link.hover.color}" + }, + "text-decoration": { + "type": "other", + "value": "{no-token}" + }, + "text-decoration-thickness": { + "type": "other", + "value": "{no-token}" + } + }, + "placeholder": { + "color": { + "type": "color", + "value": "{no-token}" + }, + "font-weight": { + "type": "fontWeight", + "value": "{no-token}" + } + }, + "visited": { + "color": { + "type": "color", + "value": "{lux.link.visited.color}" + } + }, + "icon": { + "size": { + "type": "color", + "value": "{lux.link.icon.size}" + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/product/DigiD.json b/proprietary/design-tokens/src/imported/product/DigiD.json index afd27507..9d91b2b8 100644 --- a/proprietary/design-tokens/src/imported/product/DigiD.json +++ b/proprietary/design-tokens/src/imported/product/DigiD.json @@ -3,45 +3,78 @@ "color": { "brand": { "default": { - "value": "{lux.color.oranje.300}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.oranje.500}", "description": "kleur van het product" }, "subdued": { - "value": "{lux.color.oranje.100}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.oranje.50}", "description": "Subtiele kleur van het product" }, "hover": { - "value": "{lux.color.oranje.400}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.oranje.700}", "description": "Hover kleur van het product" } } }, "border-radius": { "default": { - "value": "0.25rem", - "type": "dimension", "parent": "product/DigiD", - "description": "" + "type": "borderRadius", + "value": "4px" } }, "focus": { "outline-width": { - "value": "0.125rem", - "type": "dimension", "parent": "product/DigiD", - "description": "" + "type": "borderWidth", + "value": "2px" }, - "border-radius": { - "value": "0.375rem", - "type": "dimension", + "outline": { + "style": { + "type": "other", + "value": "solid" + } + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "{rh.font-family.sans}" + } + }, + "size": { + "target": { + "type": "sizing", + "value": "3rem", + "description": "Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. " + } + } + }, + "figma": { + "focus": { + "outline-radius": { "parent": "product/DigiD", - "description": "" + "type": "borderRadius", + "value": "6px" + } + }, + "size": { + "icon": { + "wrapper-height": { + "value": "{figma.viewport.size.icon.wrapper-height}", + "type": "sizing" + } } } }, @@ -49,66 +82,76 @@ "button": { "secondary": { "background-color": { - "value": "{lux.color.none}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.none}", "description": "" }, "border-color": { - "value": "{lux.color.border.default}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.border.default}", "description": "" }, "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" }, "hover": { "border-color": { - "value": "{lux.color.border.default}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.border.default}", "description": "" }, "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" }, "background-color": { - "value": "{lux.color.background.hover}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.background.hover}", "description": "" } } }, "tertiary": { "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" }, "hover": { "color": { - "value": "{lux.color.foreground.default}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.foreground.default}", "description": "" }, "background-color": { - "value": "{lux.color.background.hover}", - "type": "color", "parent": "product/DigiD", + "type": "color", + "value": "{lux.color.background.hover}", "description": "" } } + }, + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + }, + "primary": { + "font-size": { + "type": "fontSizes", + "value": "1.1875rem" + } } } } -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/product/Elia.json b/proprietary/design-tokens/src/imported/product/Elia.json new file mode 100644 index 00000000..43ec5897 --- /dev/null +++ b/proprietary/design-tokens/src/imported/product/Elia.json @@ -0,0 +1,154 @@ +{ + "lux": { + "color": { + "brand": { + "default": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.paars.500}", + "description": "kleur van het product" + }, + "subdued": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.paars.100}", + "description": "Subtiele kleur van het product" + }, + "hover": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.paars.400}", + "description": "Hover kleur van het product" + } + } + }, + "border-radius": { + "default": { + "parent": "product/Eila", + "type": "borderRadius", + "value": "4px" + } + }, + "focus": { + "outline-width": { + "parent": "product/Eila", + "type": "borderWidth", + "value": "2px" + }, + "outline": { + "style": { + "type": "other", + "value": "solid" + } + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "{rh.font-family.sans}" + } + }, + "size": { + "target": { + "type": "sizing", + "value": "3rem", + "description": "Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. " + } + } + }, + "figma": { + "focus": { + "outline-radius": { + "parent": "product/Eila", + "type": "borderRadius", + "value": "6px" + } + }, + "size": { + "icon": { + "wrapper-height": { + "value": "{figma.viewport.size.icon.wrapper-height}", + "type": "sizing" + } + } + } + }, + "product": { + "button": { + "secondary": { + "background-color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.none}", + "description": "" + }, + "border-color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.default}", + "description": "" + }, + "color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.default}", + "description": "" + }, + "hover": { + "border-color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.default}" + }, + "color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.default}" + }, + "background-color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.subdued}", + "description": "" + } + } + }, + "tertiary": { + "color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.default}", + "description": "" + }, + "hover": { + "color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.default}" + }, + "background-color": { + "parent": "product/Eila", + "type": "color", + "value": "{lux.color.brand.subdued}", + "description": "" + } + } + }, + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + }, + "primary": { + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/product/Logius Blauw.json b/proprietary/design-tokens/src/imported/product/Logius Blauw.json new file mode 100644 index 00000000..45c28f28 --- /dev/null +++ b/proprietary/design-tokens/src/imported/product/Logius Blauw.json @@ -0,0 +1,266 @@ +{ + "lux": { + "color": { + "brand": { + "default": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.hemelblauw.500}", + "description": "kleur van het product" + }, + "subdued": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.hemelblauw.50}", + "description": "Subtiele kleur van het product" + }, + "hover": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.hemelblauw.700}", + "description": "Hover kleur van het product" + } + } + }, + "border-radius": { + "default": { + "parent": "product/Logius", + "type": "borderRadius", + "value": "4px" + } + }, + "focus": { + "outline-width": { + "parent": "product/Logius", + "type": "borderWidth", + "value": "2px" + }, + "outline": { + "style": { + "type": "other", + "value": "solid" + } + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "{rh.font-family.sans}" + } + }, + "size": { + "target": { + "type": "sizing", + "value": "3rem", + "description": "Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. " + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "lineHeights", + "value": "{viewport.line-height.s}" + }, + "m": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "lineHeights", + "value": "{viewport.line-height.m}" + }, + "l": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "lineHeights", + "value": "{viewport.line-height.l}" + }, + "xl": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "lineHeights", + "value": "{viewport.line-height.xl}" + }, + "2xl": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "lineHeights", + "value": "{viewport.line-height.2xl}" + } + }, + "font-size": { + "s": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontSizes", + "value": "{viewport.font-size.s}" + }, + "m": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontSizes", + "value": "{viewport.font-size.m}" + }, + "l": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontSizes", + "value": "{viewport.font-size.l}" + }, + "xl": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontSizes", + "value": "{viewport.font-size.xl}" + }, + "2xl": { + "parent": "viewport (beta)/xl", + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontSizes", + "value": "{viewport.font-size.2xl}" + } + } + }, + "figma": { + "focus": { + "outline-radius": { + "parent": "product/Logius", + "type": "borderRadius", + "value": "6px" + } + }, + "size": { + "icon": { + "wrapper-height": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "sizing", + "value": "{figma.viewport.size.icon.wrapper-height}" + } + } + } + }, + "product": { + "button": { + "secondary": { + "background-color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.none}", + "description": "" + }, + "border-color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.default}", + "description": "" + }, + "color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.default}", + "description": "" + }, + "hover": { + "border-color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.hover}", + "description": "" + }, + "color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.hover}", + "description": "" + }, + "background-color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.subdued}", + "description": "" + } + } + }, + "tertiary": { + "color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.default}", + "description": "" + }, + "hover": { + "color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.hover}", + "description": "" + }, + "background-color": { + "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.subdued}", + "description": "" + } + } + }, + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + }, + "primary": { + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + } + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/product/Logius.json b/proprietary/design-tokens/src/imported/product/Logius.json index 8edbae72..08dba20f 100644 --- a/proprietary/design-tokens/src/imported/product/Logius.json +++ b/proprietary/design-tokens/src/imported/product/Logius.json @@ -3,45 +3,127 @@ "color": { "brand": { "default": { - "value": "{lux.color.groen.300}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.groen.500}", "description": "kleur van het product" }, "subdued": { - "value": "{lux.color.groen.100}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.groen.50}", "description": "Subtiele kleur van het product" }, "hover": { - "value": "{lux.color.groen.400}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.groen.700}", "description": "Hover kleur van het product" } } }, "border-radius": { "default": { - "value": "0.25rem", - "type": "dimension", "parent": "product/Logius", - "description": "" + "type": "borderRadius", + "value": "4px" } }, "focus": { "outline-width": { - "value": "0.125rem", - "type": "dimension", "parent": "product/Logius", - "description": "" + "type": "borderWidth", + "value": "2px" + }, + "outline": { + "style": { + "type": "other", + "value": "solid" + } + } + }, + "font-family": { + "primary": { + "type": "fontFamilies", + "value": "{rh.font-family.sans}" + } + }, + "size": { + "target": { + "type": "sizing", + "value": "3rem", + "description": "Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. " + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "{viewport.line-height.s}" }, - "border-radius": { - "value": "0.375rem", - "type": "dimension", + "m": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "{viewport.line-height.m}" + }, + "l": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "{viewport.line-height.l}" + }, + "xl": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "{viewport.line-height.xl}" + }, + "2xl": { + "parent": "viewport (beta)/xl", + "type": "lineHeights", + "value": "{viewport.line-height.2xl}" + } + }, + "font-size": { + "s": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "{viewport.font-size.s}" + }, + "m": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "{viewport.font-size.m}" + }, + "l": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "{viewport.font-size.l}" + }, + "xl": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "{viewport.font-size.xl}" + }, + "2xl": { + "parent": "viewport (beta)/xl", + "type": "fontSizes", + "value": "{viewport.font-size.2xl}" + } + } + }, + "figma": { + "focus": { + "outline-radius": { "parent": "product/Logius", - "description": "" + "type": "borderRadius", + "value": "6px" + } + }, + "size": { + "icon": { + "wrapper-height": { + "type": "sizing", + "value": "{figma.viewport.size.icon.wrapper-height}" + } } } }, @@ -49,66 +131,76 @@ "button": { "secondary": { "background-color": { - "value": "{lux.color.none}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.none}", "description": "" }, "border-color": { - "value": "{lux.color.brand.default}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.default}", "description": "" }, "color": { - "value": "{lux.color.brand.default}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.default}", "description": "" }, "hover": { "border-color": { - "value": "{lux.color.brand.hover}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.hover}", "description": "" }, "color": { - "value": "{lux.color.brand.hover}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.hover}", "description": "" }, "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.subdued}", "description": "" } } }, "tertiary": { "color": { - "value": "{lux.color.brand.default}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.default}", "description": "" }, "hover": { "color": { - "value": "{lux.color.brand.hover}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.hover}", "description": "" }, "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", "parent": "product/Logius", + "type": "color", + "value": "{lux.color.brand.subdued}", "description": "" } } + }, + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + }, + "primary": { + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + } } } } -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/product/MijnOverheid.json b/proprietary/design-tokens/src/imported/product/MijnOverheid.json index 0b2b4ae8..600c7525 100644 --- a/proprietary/design-tokens/src/imported/product/MijnOverheid.json +++ b/proprietary/design-tokens/src/imported/product/MijnOverheid.json @@ -3,45 +3,142 @@ "color": { "brand": { "default": { - "value": "{lux.color.hemelblauw.300}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.hemelblauw.500}", "description": "kleur van het product" }, "subdued": { - "value": "{lux.color.hemelblauw.100}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.hemelblauw.50}", "description": "Subtiele kleur van het product" }, "hover": { - "value": "{lux.color.hemelblauw.400}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.hemelblauw.700}", "description": "Hover kleur van het product" } } }, "border-radius": { "default": { - "value": "0.25rem", - "type": "dimension", "parent": "product/MijnOverheid", - "description": "" + "type": "borderRadius", + "value": "4px" } }, "focus": { "outline-width": { - "value": "0.125rem", - "type": "dimension", "parent": "product/MijnOverheid", + "type": "borderWidth", + "value": "2px" + }, + "outline": { + "style": { + "type": "other", + "value": "solid" + } + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "{rh.font-family.sans}" + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "1.5rem", "description": "" }, - "border-radius": { - "value": "0.375rem", - "type": "dimension", - "parent": "product/MijnOverheid", + "m": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "1.5rem", "description": "" + }, + "l": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "1.75rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "2rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "3rem", + "description": "" + } + }, + "font-size": { + "s": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "0.875rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1.25rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1.5rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "2rem", + "description": "" + } + }, + "size": { + "target": { + "type": "sizing", + "value": "3rem", + "description": "Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. " + } + } + }, + "figma": { + "focus": { + "outline-radius": { + "parent": "product/MijnOverheid", + "type": "borderRadius", + "value": "6px" + } + }, + "size": { + "icon": { + "wrapper-height": { + "value": "1.5rem", + "type": "sizing" + } } } }, @@ -49,66 +146,76 @@ "button": { "secondary": { "background-color": { - "value": "{lux.color.none}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.none}", "description": "" }, "border-color": { - "value": "{lux.color.brand.default}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.default}", "description": "" }, "color": { - "value": "{lux.color.brand.default}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.default}", "description": "" }, "hover": { "border-color": { - "value": "{lux.color.brand.hover}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.hover}", "description": "" }, "color": { - "value": "{lux.color.brand.hover}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.hover}", "description": "" }, "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.subdued}", "description": "" } } }, "tertiary": { "color": { - "value": "{lux.color.brand.default}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.default}", "description": "" }, "hover": { "color": { - "value": "{lux.color.brand.hover}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.hover}", "description": "" }, "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", "parent": "product/MijnOverheid", + "type": "color", + "value": "{lux.color.brand.subdued}", "description": "" } } + }, + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + }, + "primary": { + "font-size": { + "type": "fontSizes", + "value": "1.125rem" + } } } } -} +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/product/NLdoc - Ridderkerk.json b/proprietary/design-tokens/src/imported/product/NLdoc - Ridderkerk.json deleted file mode 100644 index 1168eeff..00000000 --- a/proprietary/design-tokens/src/imported/product/NLdoc - Ridderkerk.json +++ /dev/null @@ -1,106 +0,0 @@ -{ - "lux": { - "color": { - "brand": { - "default": { - "value": "#028532", - "type": "color", - "parent": "product/NLdoc", - "description": "kleur van het product" - }, - "subdued": { - "value": "#d9ede0", - "type": "color", - "parent": "product/NLdoc", - "description": "Subtiele kleur van het product" - }, - "hover": { - "value": "#026732", - "type": "color", - "parent": "product/NLdoc", - "description": "Hover kleur van het product" - } - } - }, - "border-radius": { - "default": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - }, - "focus": { - "outline-width": { - "value": "0.0625rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - }, - "border-radius": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - } - }, - "product": { - "button": { - "secondary": { - "background-color": { - "value": "{lux.color.none}", - "type": "color", - "parent": "product/NLdoc", - "description": "" - }, - "border-color": { - "value": "{lux.color.grijs.700}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.grijs.700}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "border-color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.grijs.700}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - }, - "tertiary": { - "color": { - "value": "{lux.color.grijs.700}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "color": { - "value": "{lux.color.grijs.700}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/product/NLdoc - Rijksoverheid.json b/proprietary/design-tokens/src/imported/product/NLdoc - Rijksoverheid.json deleted file mode 100644 index 18cb445a..00000000 --- a/proprietary/design-tokens/src/imported/product/NLdoc - Rijksoverheid.json +++ /dev/null @@ -1,106 +0,0 @@ -{ - "lux": { - "color": { - "brand": { - "default": { - "value": "{lux.color.donkerblauw.300}", - "type": "color", - "parent": "product/NLdoc", - "description": "kleur van het product" - }, - "subdued": { - "value": "{lux.color.donkerblauw.100}", - "type": "color", - "parent": "product/NLdoc", - "description": "Subtiele kleur van het product" - }, - "hover": { - "value": "{lux.color.donkerblauw.400}", - "type": "color", - "parent": "product/NLdoc", - "description": "Hover kleur van het product" - } - } - }, - "border-radius": { - "default": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - }, - "focus": { - "outline-width": { - "value": "0.0625rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - }, - "border-radius": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - } - }, - "product": { - "button": { - "secondary": { - "background-color": { - "value": "{lux.color.none}", - "type": "color", - "parent": "product/NLdoc", - "description": "" - }, - "border-color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "border-color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - }, - "tertiary": { - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/product/NLdoc - WHD.json b/proprietary/design-tokens/src/imported/product/NLdoc - WHD.json deleted file mode 100644 index 75cd0e68..00000000 --- a/proprietary/design-tokens/src/imported/product/NLdoc - WHD.json +++ /dev/null @@ -1,106 +0,0 @@ -{ - "lux": { - "color": { - "brand": { - "default": { - "value": "#462e87", - "type": "color", - "parent": "product/NLdoc", - "description": "kleur van het product" - }, - "subdued": { - "value": "#e3e0ed", - "type": "color", - "parent": "product/NLdoc", - "description": "Subtiele kleur van het product" - }, - "hover": { - "value": "#2c1d54", - "type": "color", - "parent": "product/NLdoc", - "description": "Hover kleur van het product" - } - } - }, - "border-radius": { - "default": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - }, - "focus": { - "outline-width": { - "value": "0.0625rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - }, - "border-radius": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - } - }, - "product": { - "button": { - "secondary": { - "background-color": { - "value": "{lux.color.none}", - "type": "color", - "parent": "product/NLdoc", - "description": "" - }, - "border-color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "border-color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - }, - "tertiary": { - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/product/NLdoc - default.json b/proprietary/design-tokens/src/imported/product/NLdoc - default.json deleted file mode 100644 index 97c88ddc..00000000 --- a/proprietary/design-tokens/src/imported/product/NLdoc - default.json +++ /dev/null @@ -1,106 +0,0 @@ -{ - "lux": { - "color": { - "brand": { - "default": { - "value": "{lux.color.violet.300}", - "type": "color", - "parent": "product/NLdoc", - "description": "kleur van het product" - }, - "subdued": { - "value": "{lux.color.violet.100}", - "type": "color", - "parent": "product/NLdoc", - "description": "Subtiele kleur van het product" - }, - "hover": { - "value": "{lux.color.violet.400}", - "type": "color", - "parent": "product/NLdoc", - "description": "Hover kleur van het product" - } - } - }, - "border-radius": { - "default": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - }, - "focus": { - "outline-width": { - "value": "0.0625rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - }, - "border-radius": { - "value": "0rem", - "type": "dimension", - "parent": "product/NLdoc", - "description": "" - } - } - }, - "product": { - "button": { - "secondary": { - "background-color": { - "value": "{lux.color.none}", - "type": "color", - "parent": "product/NLdoc", - "description": "" - }, - "border-color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "border-color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - }, - "tertiary": { - "color": { - "value": "{lux.color.brand.default}", - "type": "color", - "parent": "product/NLdoc" - }, - "hover": { - "color": { - "value": "{lux.color.brand.hover}", - "type": "color", - "parent": "product/NLdoc" - }, - "background-color": { - "value": "{lux.color.brand.subdued}", - "type": "color", - "parent": "product/NLdoc" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/product/NLdoc-mapping.json b/proprietary/design-tokens/src/imported/product/NLdoc-mapping.json new file mode 100644 index 00000000..b605cf5f --- /dev/null +++ b/proprietary/design-tokens/src/imported/product/NLdoc-mapping.json @@ -0,0 +1,216 @@ +{ + "lux": { + "color": { + "brand": { + "default": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.color.brand.default}", + "description": "kleur van het product" + }, + "subdued": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.color.brand.subdued}", + "description": "Subtiele kleur van het product" + }, + "hover": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.color.brand.hover}", + "description": "Hover kleur van het product" + } + } + }, + "border-radius": { + "default": { + "parent": "product/NLdoc", + "type": "borderRadius", + "value": "0px" + } + }, + "focus": { + "outline-width": { + "parent": "product/NLdoc", + "type": "borderWidth", + "value": "1px" + }, + "outline": { + "style": { + "type": "other", + "value": "dotted" + } + } + }, + "font-family": { + "primary": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "type": "fontFamilies", + "value": "{nldoc.font-family.primary}" + } + }, + "line-height": { + "s": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "{viewport.font-size.s}*1.5" + }, + "m": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "{viewport.font-size.m}*1.5" + }, + "l": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "{viewport.font-size.l}*1.5" + }, + "xl": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "{viewport.font-size.xl}*1.5" + }, + "2xl": { + "parent": "viewport (beta)/xs", + "type": "lineHeights", + "value": "{viewport.font-size.2xl}*1.5" + } + }, + "font-size": { + "s": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "0.875rem", + "description": "" + }, + "m": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1rem", + "description": "" + }, + "l": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1.25rem", + "description": "" + }, + "xl": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "1.5rem", + "description": "" + }, + "2xl": { + "parent": "viewport (beta)/xs", + "type": "fontSizes", + "value": "2rem", + "description": "" + } + } + }, + "figma": { + "focus": { + "outline-radius": { + "parent": "product/NLdoc", + "type": "borderRadius", + "value": "0px" + } + }, + "size": { + "icon": { + "wrapper-height": { + "value": "1.5rem", + "type": "sizing" + } + } + } + }, + "product": { + "button": { + "secondary": { + "background-color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{lux.color.none}", + "description": "" + }, + "border-color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.button.color}", + "description": "" + }, + "color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.button.color}", + "description": "" + }, + "hover": { + "border-color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.color.brand.hover}", + "description": "" + }, + "color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.button.color}", + "description": "" + }, + "background-color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.color.brand.subdued}", + "description": "" + } + } + }, + "tertiary": { + "color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.button.color}", + "description": "" + }, + "hover": { + "color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.button.color}", + "description": "" + }, + "background-color": { + "parent": "product/NLdoc", + "type": "color", + "value": "{nldoc.color.brand.subdued}", + "description": "" + } + } + }, + "font-size": { + "type": "fontSizes", + "value": "1rem" + }, + "primary": { + "font-size": { + "type": "fontSizes", + "value": "1rem" + } + } + }, + "size": { + "target": { + "type": "sizing", + "value": "2.5rem", + "description": "Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. " + } + } + } +} \ No newline at end of file diff --git a/proprietary/design-tokens/src/imported/viewport (beta)/lg.json b/proprietary/design-tokens/src/imported/viewport (beta)/lg.json deleted file mode 100644 index 9e797702..00000000 --- a/proprietary/design-tokens/src/imported/viewport (beta)/lg.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "figma": { - "rijkslint": { - "variant": { - "value": "default", - "type": "text", - "parent": "viewport (beta)/lg", - "description": "" - } - }, - "screen-size": { - "value": "64rem", - "type": "dimension", - "parent": "viewport (beta)/lg", - "description": "" - } - }, - "lux": { - "grid": { - "gutter": { - "value": "2rem", - "type": "dimension", - "parent": "viewport (beta)/lg", - "description": "" - }, - "margin": { - "value": "2.5rem", - "type": "dimension", - "parent": "viewport (beta)/lg", - "description": "" - } - }, - "size": { - "icon": { - "wrapper-height": { - "value": "1.75rem", - "type": "dimension", - "parent": "viewport (beta)/lg", - "description": "" - } - } - } - }, - "viewport": { - "rijkslint": { - "wordmark": { - "75%": { - "padding-block-start": { - "value": "2.5rem", - "type": "dimension", - "parent": "viewport (beta)/lg", - "description": "" - } - }, - "default": { - "padding-block-start": { - "value": "3.125rem", - "type": "dimension", - "parent": "viewport (beta)/lg", - "description": "" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/viewport (beta)/md.json b/proprietary/design-tokens/src/imported/viewport (beta)/md.json deleted file mode 100644 index 3925cda2..00000000 --- a/proprietary/design-tokens/src/imported/viewport (beta)/md.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "figma": { - "rijkslint": { - "variant": { - "value": "default", - "type": "text", - "parent": "viewport (beta)/md", - "description": "" - } - }, - "screen-size": { - "value": "48rem", - "type": "dimension", - "parent": "viewport (beta)/md", - "description": "" - } - }, - "lux": { - "grid": { - "gutter": { - "value": "1.5rem", - "type": "dimension", - "parent": "viewport (beta)/md", - "description": "" - }, - "margin": { - "value": "2rem", - "type": "dimension", - "parent": "viewport (beta)/md", - "description": "" - } - }, - "size": { - "icon": { - "wrapper-height": { - "value": "1.75rem", - "type": "dimension", - "parent": "viewport (beta)/md", - "description": "" - } - } - } - }, - "viewport": { - "rijkslint": { - "wordmark": { - "75%": { - "padding-block-start": { - "value": "2.5rem", - "type": "dimension", - "parent": "viewport (beta)/md", - "description": "" - } - }, - "default": { - "padding-block-start": { - "value": "3.125rem", - "type": "dimension", - "parent": "viewport (beta)/md", - "description": "" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/viewport (beta)/sm.json b/proprietary/design-tokens/src/imported/viewport (beta)/sm.json deleted file mode 100644 index 70f6a4c8..00000000 --- a/proprietary/design-tokens/src/imported/viewport (beta)/sm.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "figma": { - "rijkslint": { - "variant": { - "value": "default", - "type": "text", - "parent": "viewport (beta)/sm", - "description": "" - } - }, - "screen-size": { - "value": "36rem", - "type": "dimension", - "parent": "viewport (beta)/sm", - "description": "" - } - }, - "lux": { - "grid": { - "gutter": { - "value": "1.5rem", - "type": "dimension", - "parent": "viewport (beta)/sm", - "description": "" - }, - "margin": { - "value": "1.5rem", - "type": "dimension", - "parent": "viewport (beta)/sm", - "description": "" - } - }, - "size": { - "icon": { - "wrapper-height": { - "value": "1.75rem", - "type": "dimension", - "parent": "viewport (beta)/sm", - "description": "" - } - } - } - }, - "viewport": { - "rijkslint": { - "wordmark": { - "75%": { - "padding-block-start": { - "value": "2.5rem", - "type": "dimension", - "parent": "viewport (beta)/sm", - "description": "" - } - }, - "default": { - "padding-block-start": { - "value": "3.125rem", - "type": "dimension", - "parent": "viewport (beta)/sm", - "description": "" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/viewport (beta)/xl.json b/proprietary/design-tokens/src/imported/viewport (beta)/xl.json deleted file mode 100644 index 19976138..00000000 --- a/proprietary/design-tokens/src/imported/viewport (beta)/xl.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "figma": { - "rijkslint": { - "variant": { - "value": "default", - "type": "text", - "parent": "viewport (beta)/xl", - "description": "" - } - }, - "screen-size": { - "value": "90rem", - "type": "dimension", - "parent": "viewport (beta)/xl", - "description": "" - } - }, - "lux": { - "grid": { - "gutter": { - "value": "2rem", - "type": "dimension", - "parent": "viewport (beta)/xl", - "description": "" - }, - "margin": { - "value": "2.5rem", - "type": "dimension", - "parent": "viewport (beta)/xl", - "description": "" - } - }, - "size": { - "icon": { - "wrapper-height": { - "value": "1.75rem", - "type": "dimension", - "parent": "viewport (beta)/xl", - "description": "" - } - } - } - }, - "viewport": { - "rijkslint": { - "wordmark": { - "75%": { - "padding-block-start": { - "value": "2.5rem", - "type": "dimension", - "parent": "viewport (beta)/xl", - "description": "" - } - }, - "default": { - "padding-block-start": { - "value": "3.125rem", - "type": "dimension", - "parent": "viewport (beta)/xl", - "description": "" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/imported/viewport (beta)/xs.json b/proprietary/design-tokens/src/imported/viewport (beta)/xs.json deleted file mode 100644 index 1712c893..00000000 --- a/proprietary/design-tokens/src/imported/viewport (beta)/xs.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "figma": { - "rijkslint": { - "variant": { - "value": "small", - "type": "text", - "parent": "viewport (beta)/xs", - "description": "" - } - }, - "screen-size": { - "value": "23.4375rem", - "type": "dimension", - "parent": "viewport (beta)/xs", - "description": "" - } - }, - "lux": { - "grid": { - "gutter": { - "value": "0rem", - "type": "dimension", - "parent": "viewport (beta)/xs", - "description": "" - }, - "margin": { - "value": "1rem", - "type": "dimension", - "parent": "viewport (beta)/xs", - "description": "" - } - }, - "size": { - "icon": { - "wrapper-height": { - "value": "1.5rem", - "type": "dimension", - "parent": "viewport (beta)/xs", - "description": "" - } - } - } - }, - "viewport": { - "rijkslint": { - "wordmark": { - "75%": { - "padding-block-start": { - "value": "1.25rem", - "type": "dimension", - "parent": "viewport (beta)/xs", - "description": "" - } - }, - "default": { - "padding-block-start": { - "value": "1.25rem", - "type": "dimension", - "parent": "viewport (beta)/xs", - "description": "" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/manual/missingTokens.dark.json b/proprietary/design-tokens/src/manual/missingTokens.dark.json index 5017eef3..0967ef42 100644 --- a/proprietary/design-tokens/src/manual/missingTokens.dark.json +++ b/proprietary/design-tokens/src/manual/missingTokens.dark.json @@ -1,49 +1 @@ -{ - "lux": { - "icon-logo": { - "eherkenning": { - "e-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - } - }, - "eidas": { - "stars-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - }, - "lock-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - }, - "lines-color": { - "value": "#ffffff", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - }, - "background-color": { - "value": "#ffffff00", - "type": "color", - "parent": "mode/dark (beta)", - "description": "" - } - } - } - }, - "logius": { - "color": { - "outline": { - "default": { - "value": "{lux.color.grijs.100}" - } - } - } - } -} +{} diff --git a/proprietary/design-tokens/src/manual/missingTokens.json b/proprietary/design-tokens/src/manual/missingTokens.json index 9e6efd29..0967ef42 100644 --- a/proprietary/design-tokens/src/manual/missingTokens.json +++ b/proprietary/design-tokens/src/manual/missingTokens.json @@ -1,81 +1 @@ -{ - "lux": { - "button-login": { - "border-style": { - "category": "borderWidth", - "value": "{logius.border-style.solid}" - }, - "font-family": { - "value": "{logius.font-family.default}" - }, - "font-size": { - "value": "{logius.font-size.m}" - }, - "font-weight": { - "value": "{logius.font-weight.default}" - }, - "line-height": { - "value": "{logius.font.line-height.s}" - } - }, - "focus": { - "outline-color": { - "value": "{logius.color.outline.default}" - }, - "outline-offset": { - "value": "{lux.space.025-x}" - }, - "outline-style": { - "value": "{logius.border-style.default}" - } - } - }, - "logius": { - "border-style": { - "default": { - "value": "{logius.border-style.solid}" - }, - "solid": { - "value": "solid" - } - }, - "color": { - "outline": { - "default": { - "value": "{lux.color.grijs.700}" - } - } - }, - "font": { - "line-height": { - "s": { - "type": "lineHeights", - "value": "24px" - } - } - }, - "font-family": { - "default": { - "type": "fontFamilies", - "value": "Rijksoverheid, Arial" - } - }, - "font-size": { - "m": { - "type": "fontSizes", - "value": "18px" - } - }, - "font-weight": { - "default": { - "value": "{logius.font-weight.normal}" - }, - "normal": { - "value": "normal" - }, - "regular": { - "value": "{logius.font-weight.normal}" - } - } - } -} +{} diff --git a/proprietary/design-tokens/src/manual/missingTokens.light.json b/proprietary/design-tokens/src/manual/missingTokens.light.json index 9bfcec8c..0967ef42 100644 --- a/proprietary/design-tokens/src/manual/missingTokens.light.json +++ b/proprietary/design-tokens/src/manual/missingTokens.light.json @@ -1,49 +1 @@ -{ - "lux": { - "icon-logo": { - "eherkenning": { - "e-color": { - "value": "#203a70", - "type": "color", - "description": "", - "parent": "mode/light" - } - }, - "eidas": { - "stars-color": { - "value": "#f1cc49", - "type": "color", - "description": "", - "parent": "mode/light" - }, - "lock-color": { - "value": "#ffffff", - "type": "color", - "description": "", - "parent": "mode/light" - }, - "lines-color": { - "value": "#6ba6f1", - "type": "color", - "description": "", - "parent": "mode/light" - }, - "background-color": { - "value": "#1d336a", - "type": "color", - "description": "", - "parent": "mode/light" - } - } - } - }, - "logius": { - "color": { - "outline": { - "default": { - "value": "{lux.color.grijs.700}" - } - } - } - } -} +{} diff --git a/proprietary/font/src/index.scss b/proprietary/font/src/index.scss index 96fe6df6..0c77f74f 100644 --- a/proprietary/font/src/index.scss +++ b/proprietary/font/src/index.scss @@ -6,7 +6,7 @@ url("ROsanswebtextregular.woff") format("woff"), url("ROsanswebtextregular.eot") format("embedded-opentype"), url("ROsanswebtextregular.ttf") format("truetype"); - font-family: "Rijksoverheid"; + font-family: "RijksoverheidSansWebText"; } @font-face { @@ -17,7 +17,7 @@ url("ROsanswebtextbold.woff") format("woff"), url("ROsanswebtextbold.eot") format("embedded-opentype"), url("ROsanswebtextbold.ttf") format("truetype"); - font-family: "Rijksoverheid"; + font-family: "RijksoverheidSansWebText"; } @font-face { @@ -28,5 +28,7 @@ url("ROsanswebtextitalic.woff") format("woff"), url("ROsanswebtextitalic.eot") format("embedded-opentype"), url("ROsanswebtextitalic.ttf") format("truetype"); - font-family: "Rijksoverheid"; + font-family: "RijksoverheidSansWebText"; } + +/* TODO: Serif toevoegen */