diff --git a/proprietary/tokens/build.js b/proprietary/tokens/build.js new file mode 100644 index 0000000000..6bdde28f66 --- /dev/null +++ b/proprietary/tokens/build.js @@ -0,0 +1,59 @@ +// TODO: build all currently built files using this setup + +const StyleDictionary = require('style-dictionary') + +const modes = ['compact'] + +console.log(`Building default mode...`) +StyleDictionary.extend({ + source: [ + // exclude non-default modes from source + `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`, + ], + + platforms: { + css: { + transformGroup: 'css', + buildPath: 'dist/', + files: [ + { + destination: `root.css`, + format: `css/variables`, + options: { + outputReferences: true, + }, + }, + ], + }, + + json: { + buildPath: 'dist/', + files: [ + { + destination: 'index.tokens.json', + format: 'json/nested', + }, + ], + }, + }, +}).buildAllPlatforms() + +console.log(`\n\n Building compact mode...`) +StyleDictionary.extend({ + source: [`./src/**/*.compact.tokens.json`], + platforms: { + css: { + transformGroup: `css`, + buildPath: 'dist/', + files: [ + { + destination: `compact.css`, + format: `css/variables`, + options: { + outputReferences: true, + }, + }, + ], + }, + }, +}).buildAllPlatforms() diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json index 916f0ec773..c80d675a04 100644 --- a/proprietary/tokens/package.json +++ b/proprietary/tokens/package.json @@ -19,7 +19,7 @@ "scripts": { "clean": "rimraf dist/", "build": "npm-run-all build:**", - "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.json", + "build:style-dictionary": "node build.js", "watch": "npm-run-all watch:**", "watch:style-dictionary": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\"" }, diff --git a/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json new file mode 100644 index 0000000000..964978fb4a --- /dev/null +++ b/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json @@ -0,0 +1,36 @@ +{ + "amsterdam": { + "typography": { + "text-level": { + "0": { + "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }, + "line-height": { "value": "1.15" } + }, + "1": { + "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" }, + "line-height": { "value": "1.2" } + }, + "2": { + "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" }, + "line-height": { "value": "1.25" } + }, + "3": { + "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" }, + "line-height": { "value": "1.3" } + }, + "4": { + "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" }, + "line-height": { "value": "1.5" } + }, + "5": { + "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" }, + "line-height": { "value": "1.6" } + }, + "6": { + "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" }, + "line-height": { "value": "1.6" } + } + } + } + } +} diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json index 59121f4704..3394e80de1 100644 --- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json +++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json @@ -6,68 +6,34 @@ "normal": { "value": 400 }, "bold": { "value": 800 } }, - "spacious": { - "text-level": { - "0": { - "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" }, - "line-height": { "value": "1.15" } - }, - "1": { - "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" }, - "line-height": { "value": "1.2" } - }, - "2": { - "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" }, - "line-height": { "value": "1.25" } - }, - "3": { - "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" }, - "line-height": { "value": "1.3" } - }, - "4": { - "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" }, - "line-height": { "value": "1.5" } - }, - "5": { - "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" }, - "line-height": { "value": "1.6" } - }, - "6": { - "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" }, - "line-height": { "value": "1.6" } - } - } - }, - "compact": { - "text-level": { - "0": { - "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }, - "line-height": { "value": "1.15" } - }, - "1": { - "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" }, - "line-height": { "value": "1.2" } - }, - "2": { - "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" }, - "line-height": { "value": "1.25" } - }, - "3": { - "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" }, - "line-height": { "value": "1.3" } - }, - "4": { - "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" }, - "line-height": { "value": "1.5" } - }, - "5": { - "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" }, - "line-height": { "value": "1.6" } - }, - "6": { - "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" }, - "line-height": { "value": "1.6" } - } + "text-level": { + "0": { + "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" }, + "line-height": { "value": "1.15" } + }, + "1": { + "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" }, + "line-height": { "value": "1.2" } + }, + "2": { + "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" }, + "line-height": { "value": "1.25" } + }, + "3": { + "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" }, + "line-height": { "value": "1.3" } + }, + "4": { + "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" }, + "line-height": { "value": "1.5" } + }, + "5": { + "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" }, + "line-height": { "value": "1.6" } + }, + "6": { + "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" }, + "line-height": { "value": "1.6" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json index 628f1e4acc..9dbf55d5a4 100644 --- a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json @@ -12,12 +12,12 @@ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}" } }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/alert.tokens.json b/proprietary/tokens/src/components/amsterdam/alert.tokens.json index db1dd174e3..5506185d64 100644 --- a/proprietary/tokens/src/components/amsterdam/alert.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/alert.tokens.json @@ -13,12 +13,12 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } }, "error": { diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json index 0a722c1226..a27408d47c 100644 --- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json @@ -5,12 +5,12 @@ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "padding-inline": { "value": "0.5rem" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "blue": { "background-color": { "value": "{amsterdam.color.blue}" }, diff --git a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json index 01b820ad4a..b294ff0038 100644 --- a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json @@ -6,12 +6,12 @@ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "inverse-color": { "value": "{amsterdam.color.primary-white}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index d006844a5c..2376eae017 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -20,12 +20,12 @@ } }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json index c07033be2a..e7d8a204c0 100644 --- a/proprietary/tokens/src/components/amsterdam/button.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json @@ -2,12 +2,12 @@ "amsterdam": { "button": { "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "secondary": { "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" }, diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json index b53da6b8ef..c88d0ad42a 100644 --- a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json @@ -63,12 +63,12 @@ }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json index 70d0940d8b..e6c328eabe 100644 --- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json @@ -9,12 +9,12 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } } }, "backdrop": { diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json index 4a42884769..125fc36913 100644 --- a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json @@ -5,12 +5,12 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json index e8fc70121e..cfed097a57 100644 --- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/heading.tokens.json @@ -7,54 +7,54 @@ "inverse-color": { "value": "{amsterdam.color.primary-white}" }, "spacious": { "level-1": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.1.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.1.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.1.font-size}" } }, "level-2": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.2.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.2.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.2.font-size}" } }, "level-3": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" } }, "level-4": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" } }, "level-5": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" } }, "level-6": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" } } }, "compact": { "level-1": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.1.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.1.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.1.font-size}" } }, "level-2": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.2.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.2.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.2.font-size}" } }, "level-3": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" } }, "level-4": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" } }, "level-5": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" } }, "level-6": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" } + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/icon.tokens.json b/proprietary/tokens/src/components/amsterdam/icon.tokens.json index dbaac0ef7f..89b7fa11c6 100644 --- a/proprietary/tokens/src/components/amsterdam/icon.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/icon.tokens.json @@ -3,38 +3,38 @@ "icon": { "spacious": { "size-3": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" } }, "size-4": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } }, "size-5": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "size-6": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } }, "compact": { "size-3": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" } }, "size-4": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } }, "size-5": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "size-6": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json b/proprietary/tokens/src/components/amsterdam/link-list.tokens.json index 8c41ccd8bd..31e0a04591 100644 --- a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link-list.tokens.json @@ -13,30 +13,30 @@ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "spacious": { "small": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "medium": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "large": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } }, "compact": { "small": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "medium": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "large": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } }, "hover": { diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 28d0635ac7..a4c597c01a 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -34,12 +34,12 @@ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } } }, "standalone": { @@ -53,12 +53,12 @@ "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" } }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } } }, "on-background-dark": { diff --git a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json index d566961b0b..1383f21e1f 100644 --- a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json @@ -7,12 +7,12 @@ "gap": { "value": "0.75rem" }, "list-style-type": { "value": "decimal" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "item": { "margin-inline-start": { diff --git a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json index cd8908e6c5..1c304dd81c 100644 --- a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json @@ -6,12 +6,12 @@ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "inverse-color": { "value": "{amsterdam.color.primary-white}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" } + "font-size": { "value": "{amsterdam.typography.text-level.0.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.0.font-size}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" } + "font-size": { "value": "{amsterdam.typography.text-level.0.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.0.font-size}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json index 6223d09a9a..c702c0e9fe 100644 --- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json @@ -13,12 +13,12 @@ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "hover": { "color": { "value": "{amsterdam.link-appearance.hover.color}" }, diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json index 6cca52f715..9c958e5a0b 100644 --- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json @@ -5,12 +5,12 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "button": { "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json index 3999df3bc5..d3118bd400 100644 --- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json @@ -7,30 +7,30 @@ "inverse-color": { "value": "{amsterdam.color.primary-white}" }, "spacious": { "small": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "medium": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "large": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } }, "compact": { "small": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "medium": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "large": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json b/proprietary/tokens/src/components/amsterdam/search-field.tokens.json index bb97585406..323ec53291 100644 --- a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/search-field.tokens.json @@ -22,8 +22,8 @@ "value": "url(\"data:image/svg+xml;utf8,\")" }, "color": { "value": "{amsterdam.color.primary-blue}" }, - "height": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "width": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" } + "height": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "width": { "value": "{amsterdam.typography.text-level.6.font-size}" } }, "hover": { "box-shadow": { @@ -34,12 +34,12 @@ "color": { "value": "{amsterdam.color.neutral-grey3}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json index 8e9f937c47..84f6d42fd0 100644 --- a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json @@ -5,12 +5,12 @@ "color": { "value": "{amsterdam.color.primary-white}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "hover": { "background-color": { "value": "{amsterdam.color.dark-blue}" } diff --git a/proprietary/tokens/src/components/amsterdam/table.tokens.json b/proprietary/tokens/src/components/amsterdam/table.tokens.json index d1d78cbd80..ad90451455 100644 --- a/proprietary/tokens/src/components/amsterdam/table.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/table.tokens.json @@ -4,8 +4,8 @@ "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "caption": { "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" } }, diff --git a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json b/proprietary/tokens/src/components/amsterdam/text-input.tokens.json index 9e842c62c0..ee92822b7c 100644 --- a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/text-input.tokens.json @@ -24,12 +24,12 @@ "color": { "value": "{amsterdam.color.neutral-grey3}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index f67a4e39e6..0ff91cc4e3 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -6,12 +6,12 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } }, "label": { @@ -26,12 +26,12 @@ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } diff --git a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json index aa33f763f0..c8d016c66c 100644 --- a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json @@ -7,12 +7,12 @@ "gap": { "value": "0.75rem" }, "list-style-type": { "value": "'\\2022'" }, "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "item": { "margin-inline-start": { diff --git a/storybook/storybook-react/config/preview.tsx b/storybook/storybook-react/config/preview.tsx index e142042e0e..aad489cfb9 100644 --- a/storybook/storybook-react/config/preview.tsx +++ b/storybook/storybook-react/config/preview.tsx @@ -1,4 +1,5 @@ import '@amsterdam/design-system-tokens/dist/root.css' +import '@amsterdam/design-system-tokens/dist/compact.css' import '@amsterdam/design-system-assets/font/index.css' import '@amsterdam/design-system-css/dist/index.css' import '../../storybook-overrides.css'