From bf5b60e9971a457d537c14b54480a0dfff9a81ec Mon Sep 17 00:00:00 2001 From: Jiro Ghianni <118177951+jiromaykin@users.noreply.github.com> Date: Tue, 3 Feb 2026 10:40:08 +0100 Subject: [PATCH 1/2] PR#35 Update to W3C DTCG format + add experimental Basis tokens --- README.md | 29 +- bin/check_token_nesting.py | 2 +- package-lock.json | 903 ++---------------- package.json | 6 +- packages/basis/basis.tokens.json | 390 ++++++++ src/brand/openinwoner/color.tokens.json | 255 ++--- src/brand/openinwoner/layout.tokens.json | 16 - src/brand/openinwoner/typography.tokens.json | 27 - src/common/openinwoner/basis.tokens.json | 10 + src/common/openinwoner/layout.tokens.json | 16 + src/common/openinwoner/typography.tokens.json | 27 + src/community/denhaag/action.tokens.json | 46 +- src/community/denhaag/file.tokens.json | 36 +- .../denhaag/side-navigation.tokens.json | 42 +- src/community/nl/number-badge.tokens.json | 26 +- src/community/nl/paragraph.tokens.json | 24 +- src/community/utrecht/button.tokens.json | 94 +- src/community/utrecht/fieldset.tokens.json | 22 +- src/community/utrecht/form-label.tokens.json | 6 +- src/community/utrecht/heading.tokens.json | 68 +- src/community/utrecht/linklist.tokens.json | 14 +- src/community/utrecht/listbox.tokens.json | 76 +- src/community/utrecht/orderedlist.tokens.json | 18 +- src/community/utrecht/paragraph.tokens.json | 28 +- src/community/utrecht/select.tokens.json | 32 +- src/community/utrecht/skiplink.tokens.json | 32 +- src/community/utrecht/table.tokens.json | 96 +- src/community/utrecht/textbox.tokens.json | 40 +- src/community/utrecht/typography.tokens.json | 40 +- .../utrecht/unorderedlist.tokens.json | 20 +- src/components/accordion.tokens.json | 44 +- src/components/combobox.tokens.json | 90 +- .../external-link-plugin.tokens.json | 174 ++-- src/components/fieldset-modifiers.tokens.json | 8 +- src/components/filters.tokens.json | 136 +-- .../paragraph-modifiers.tokens.json | 12 +- src/components/plugin-card.tokens.json | 86 +- src/components/plugin-grid.tokens.json | 70 +- .../unorderedlist-modifiers.tokens.json | 6 +- style-dictionary.config.json | 17 +- 40 files changed, 1403 insertions(+), 1681 deletions(-) create mode 100644 packages/basis/basis.tokens.json delete mode 100644 src/brand/openinwoner/layout.tokens.json delete mode 100644 src/brand/openinwoner/typography.tokens.json create mode 100644 src/common/openinwoner/basis.tokens.json create mode 100644 src/common/openinwoner/layout.tokens.json create mode 100644 src/common/openinwoner/typography.tokens.json diff --git a/README.md b/README.md index dbbf24d..5d12e67 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Design Tokens -The Open Inwoner Platform (OIP) project has the goal to follow the [NL Design System](https://github.com/nl-design-system). We organize the design tokens in JSON files and use them within the Open Inwoner -backend project. +The Open Inwoner Platform (OIP) project has the goal to follow the [NL Design System](https://github.com/nl-design-system). We +organize the design tokens in JSON files and use them within the Open Inwoner backend project. For any component that OIP has that corresponds with a community component, we use the community classes. But for any component that OIP has that does not have an NLDS equivalent, we use our own @@ -15,9 +15,13 @@ and then simply switch themes in OIP. The design tokens are specified in JSON files, which are picked up and merged using the [style-dictionary](https://www.npmjs.com/package/style-dictionary) library. The resulting packages -include various build targets, such as CSS variables files, SASS vars... to be consumed in downstream projects. +include various build targets, such as CSS variables files, SASS vars... to be consumed in +downstream projects. -The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the structure of these design tokens. +The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the +structure of these design tokens. We are currently using the updated W3C DTCG format (sets a Dollar +sign in its specified properties, like `$type`, `$value`, `$description`, `$deprecated`, +`$extensions`). Token and group names MUST NOT begin with the `$` character. **Using tokens** @@ -27,7 +31,8 @@ NPM-package in your own project. ## Add this package to your project This package can be added to your project as an NPM node module: after building the node, you will -only need to work with its rendered CSS. The easiest integration path is adding the NPM package as dependency to your project: +only need to work with its rendered CSS. The easiest integration path is adding the NPM package as +dependency to your project: ```bash npm install --save-dev @open-inwoner/design-tokens @@ -64,9 +69,13 @@ Import the CSS in your own CSS files by using our theme class in your Master HTM ## Developing and using tokens -In case you do not just wish to consume, but add completely new tokens or adjust their values, we recommend installing the package locally and using npm workspaces or `npm link` for the least-friction experience. You can include the package as a git-submodule and leverage npm workspaces with instructions in the downstream projects. +In case you do not just wish to consume, but add completely new tokens or adjust their values, we +recommend installing the package locally and using npm workspaces or `npm link` for the least- +friction experience. You can include the package as a git-submodule and leverage npm workspaces with +instructions in the downstream projects. -This allows you to create atomic PRs with design token changes, while being able to develop against the newest changes. +This allows you to create atomic PRs with design token changes, while being able to develop against +the newest changes. Run: @@ -94,7 +103,7 @@ tokens. E.g. if you have two tokens definition files like: "oip": { "color": { "fg": { - "value": "#000000" + "$value": "#000000" } } } @@ -107,7 +116,7 @@ tokens. E.g. if you have two tokens definition files like: "color": { "fg": { "muted": { - "value": "#000000" + "$value": "#000000" } } } @@ -134,7 +143,7 @@ e.g.: "oip": { "color": { "fg-muted": { - "value": "#000000" + "$value": "#000000" } } } diff --git a/bin/check_token_nesting.py b/bin/check_token_nesting.py index 677713c..f5cef85 100755 --- a/bin/check_token_nesting.py +++ b/bin/check_token_nesting.py @@ -40,7 +40,7 @@ def get_emitted_var_count(file_path: str) -> int: def count_leaf_nodes(data: dict) -> int: num_leaf_nodes = 0 for key, value in data.items(): - if key in "value": + if key in "$value": if isinstance(value, (dict, list)): raise TypeError("The 'value' key value must be a scalar") num_leaf_nodes += 1 diff --git a/package-lock.json b/package-lock.json index 67807e9..5e4405b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,18 @@ { "name": "@open-inwoner/design-tokens", - "version": "0.0.30", + "version": "0.1.00", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@open-inwoner/design-tokens", - "version": "0.0.30", + "version": "0.1.00", "license": "EUPL-1.2", "devDependencies": { "chokidar": "^4.0.3", "chokidar-cli": "^3.0.0", "prettier": "^2.8.0", - "style-dictionary": "^5.1.1" + "style-dictionary": "^5.2.0" } }, "node_modules/@bundled-es-modules/deepmerge": { @@ -26,19 +26,19 @@ } }, "node_modules/@bundled-es-modules/glob": { - "version": "11.0.3", - "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-11.0.3.tgz", - "integrity": "sha512-rt+1650YhlwRkkj67YMZQj5LXWZiavpHQg8K6jDcZBPbrBIooHbKOQvvxKJsKM80H1oHengEbIymfw3mn4FkUw==", + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-13.0.6.tgz", + "integrity": "sha512-x9nR2e1pt8LF0yLPC6yz/aUoiN7qJJwZ1znLxIXCxGyH+8BI+yO/sklBdn1+QbUyWXQBM+CjfZz3IhqtgIoDVg==", "dev": true, - "license": "ISC", + "license": "MIT", "dependencies": { "buffer": "^6.0.3", "events": "^3.3.0", - "glob": "^11.0.3", + "glob": "^13.0.6", "path": "^0.12.7", "stream": "^0.0.3", "string_decoder": "^1.3.0", - "url": "^0.11.3" + "url": "^0.11.4" } }, "node_modules/@bundled-es-modules/memfs": { @@ -57,109 +57,6 @@ "util": "^0.12.5" } }, - "node_modules/@isaacs/cliui": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", - "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", - "dev": true, - "license": "ISC", - "dependencies": { - "string-width": "^5.1.2", - "string-width-cjs": "npm:string-width@^4.2.0", - "strip-ansi": "^7.0.1", - "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", - "wrap-ansi": "^8.1.0", - "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@isaacs/cliui/node_modules/ansi-regex": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", - "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, - "node_modules/@isaacs/cliui/node_modules/ansi-styles": { - "version": "6.2.3", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", - "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@isaacs/cliui/node_modules/emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true, - "license": "MIT" - }, - "node_modules/@isaacs/cliui/node_modules/string-width": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", - "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", - "dev": true, - "license": "MIT", - "dependencies": { - "eastasianwidth": "^0.2.0", - "emoji-regex": "^9.2.2", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@isaacs/cliui/node_modules/strip-ansi": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", - "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, - "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", - "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^6.1.0", - "string-width": "^5.0.1", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, "node_modules/@jsonjoy.com/base64": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz", @@ -301,22 +198,6 @@ "node": ">=6" } }, - "node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -406,9 +287,9 @@ } }, "node_modules/brace-expansion": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz", - "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz", + "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==", "dev": true, "license": "MIT", "dependencies": { @@ -618,23 +499,10 @@ "wrap-ansi": "^5.1.0" } }, - "node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "node_modules/colorjs.io": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz", + "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==", "dev": true, "license": "MIT" }, @@ -661,21 +529,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/cross-spawn": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", - "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", - "dev": true, - "license": "MIT", - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/decamelize": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", @@ -746,13 +599,6 @@ "node": ">= 0.4" } }, - "node_modules/eastasianwidth": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "dev": true, - "license": "MIT" - }, "node_modules/emoji-regex": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", @@ -843,23 +689,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/foreground-child": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", - "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", - "dev": true, - "license": "ISC", - "dependencies": { - "cross-spawn": "^7.0.6", - "signal-exit": "^4.0.1" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -944,24 +773,18 @@ } }, "node_modules/glob": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz", - "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==", + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz", + "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==", "dev": true, "license": "BlueOak-1.0.0", "dependencies": { - "foreground-child": "^3.3.1", - "jackspeak": "^4.1.1", - "minimatch": "^10.1.1", - "minipass": "^7.1.2", - "package-json-from-dist": "^1.0.0", - "path-scurry": "^2.0.0" - }, - "bin": { - "glob": "dist/esm/bin.mjs" + "minimatch": "^10.2.2", + "minipass": "^7.1.3", + "path-scurry": "^2.0.2" }, "engines": { - "node": "20 || >=22" + "node": "18 || 20 || >=22" }, "funding": { "url": "https://github.com/sponsors/isaacs" @@ -1273,29 +1096,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "dev": true, - "license": "ISC" - }, - "node_modules/jackspeak": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz", - "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==", - "dev": true, - "license": "BlueOak-1.0.0", - "dependencies": { - "@isaacs/cliui": "^8.0.2" - }, - "engines": { - "node": "20 || >=22" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -1334,11 +1134,11 @@ "dev": true }, "node_modules/lru-cache": { - "version": "11.2.2", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz", - "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==", + "version": "11.3.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz", + "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==", "dev": true, - "license": "ISC", + "license": "BlueOak-1.0.0", "engines": { "node": "20 || >=22" } @@ -1373,13 +1173,13 @@ } }, "node_modules/minimatch": { - "version": "10.2.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz", - "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==", + "version": "10.2.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz", + "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==", "dev": true, "license": "BlueOak-1.0.0", "dependencies": { - "brace-expansion": "^5.0.2" + "brace-expansion": "^5.0.5" }, "engines": { "node": "18 || 20 || >=22" @@ -1389,11 +1189,11 @@ } }, "node_modules/minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz", + "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==", "dev": true, - "license": "ISC", + "license": "BlueOak-1.0.0", "engines": { "node": ">=16 || 14 >=14.17" } @@ -1505,13 +1305,6 @@ "node": ">=6" } }, - "node_modules/package-json-from-dist": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", - "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true, - "license": "BlueOak-1.0.0" - }, "node_modules/path": { "version": "0.12.7", "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", @@ -1532,20 +1325,10 @@ "node": ">=4" } }, - "node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/path-scurry": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz", - "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz", + "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==", "dev": true, "license": "BlueOak-1.0.0", "dependencies": { @@ -1553,7 +1336,7 @@ "minipass": "^7.1.2" }, "engines": { - "node": "20 || >=22" + "node": "18 || 20 || >=22" }, "funding": { "url": "https://github.com/sponsors/isaacs" @@ -1584,9 +1367,9 @@ } }, "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", "dev": true, "license": "MIT", "engines": { @@ -1639,9 +1422,9 @@ "license": "MIT" }, "node_modules/qs": { - "version": "6.15.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz", - "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==", + "version": "6.15.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz", + "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==", "dev": true, "license": "BSD-3-Clause", "dependencies": { @@ -1746,29 +1529,6 @@ "node": ">= 0.4" } }, - "node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "license": "MIT", - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/side-channel": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", @@ -1790,14 +1550,14 @@ } }, "node_modules/side-channel-list": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", - "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" }, "engines": { "node": ">= 0.4" @@ -1845,19 +1605,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true, - "license": "ISC", - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/stream": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz", @@ -1892,62 +1639,6 @@ "node": ">=6" } }, - "node_modules/string-width-cjs": { - "name": "string-width", - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "license": "MIT", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width-cjs/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width-cjs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true, - "license": "MIT" - }, - "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width-cjs/node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -1960,43 +1651,20 @@ "node": ">=6" } }, - "node_modules/strip-ansi-cjs": { - "name": "strip-ansi", - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-ansi-cjs/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/style-dictionary": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.1.1.tgz", - "integrity": "sha512-scRFwr2VrerXy6BzO2Ym8AI0dRGkAIoS2YhooagytxCFkoXPYCLhvIxg3VO/yD2i4VeU4aGmHG80+ZLdPDb0uw==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.4.0.tgz", + "integrity": "sha512-6BzO0DV19t6KUEXYfvHJ73d3y8bBDcd0wNLfoZRX817obJ8YX5Vev8Xh3+k9601tHE8qRJ/586iLt0byuY2THw==", "dev": true, "license": "Apache-2.0", "dependencies": { "@bundled-es-modules/deepmerge": "^4.3.1", - "@bundled-es-modules/glob": "^11.0.3", - "@bundled-es-modules/memfs": "^4.9.4", + "@bundled-es-modules/glob": "^13.0.6", + "@bundled-es-modules/memfs": "^4.17.0", "@zip.js/zip.js": "^2.7.44", "chalk": "^5.3.0", "change-case": "^5.3.0", + "colorjs.io": "^0.5.2", "commander": "^12.1.0", "is-plain-obj": "^4.1.0", "json5": "^2.2.2", @@ -2117,22 +1785,6 @@ "which-typed-array": "^1.1.2" } }, - "node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "license": "ISC", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", @@ -2175,80 +1827,6 @@ "node": ">=6" } }, - "node_modules/wrap-ansi-cjs": { - "name": "wrap-ansi", - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true, - "license": "MIT" - }, - "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "license": "MIT", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/wrap-ansi/node_modules/ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -2322,18 +1900,18 @@ } }, "@bundled-es-modules/glob": { - "version": "11.0.3", - "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-11.0.3.tgz", - "integrity": "sha512-rt+1650YhlwRkkj67YMZQj5LXWZiavpHQg8K6jDcZBPbrBIooHbKOQvvxKJsKM80H1oHengEbIymfw3mn4FkUw==", + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-13.0.6.tgz", + "integrity": "sha512-x9nR2e1pt8LF0yLPC6yz/aUoiN7qJJwZ1znLxIXCxGyH+8BI+yO/sklBdn1+QbUyWXQBM+CjfZz3IhqtgIoDVg==", "dev": true, "requires": { "buffer": "^6.0.3", "events": "^3.3.0", - "glob": "^11.0.3", + "glob": "^13.0.6", "path": "^0.12.7", "stream": "^0.0.3", "string_decoder": "^1.3.0", - "url": "^0.11.3" + "url": "^0.11.4" } }, "@bundled-es-modules/memfs": { @@ -2351,71 +1929,6 @@ "util": "^0.12.5" } }, - "@isaacs/cliui": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", - "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", - "dev": true, - "requires": { - "string-width": "^5.1.2", - "string-width-cjs": "npm:string-width@^4.2.0", - "strip-ansi": "^7.0.1", - "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", - "wrap-ansi": "^8.1.0", - "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", - "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", - "dev": true - }, - "ansi-styles": { - "version": "6.2.3", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", - "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", - "dev": true - }, - "emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true - }, - "string-width": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", - "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", - "dev": true, - "requires": { - "eastasianwidth": "^0.2.0", - "emoji-regex": "^9.2.2", - "strip-ansi": "^7.0.1" - } - }, - "strip-ansi": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", - "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", - "dev": true, - "requires": { - "ansi-regex": "^6.0.1" - } - }, - "wrap-ansi": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", - "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", - "dev": true, - "requires": { - "ansi-styles": "^6.1.0", - "string-width": "^5.0.1", - "strip-ansi": "^7.0.1" - } - } - } - }, "@jsonjoy.com/base64": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz", @@ -2485,15 +1998,6 @@ "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==", "dev": true }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, "anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -2545,9 +2049,9 @@ "dev": true }, "brace-expansion": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz", - "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz", + "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==", "dev": true, "requires": { "balanced-match": "^4.0.2" @@ -2681,19 +2185,10 @@ "wrap-ansi": "^5.1.0" } }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "colorjs.io": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz", + "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==", "dev": true }, "commander": { @@ -2708,17 +2203,6 @@ "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==", "dev": true }, - "cross-spawn": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", - "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", - "dev": true, - "requires": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - } - }, "decamelize": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", @@ -2764,12 +2248,6 @@ "gopd": "^1.2.0" } }, - "eastasianwidth": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "dev": true - }, "emoji-regex": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", @@ -2830,16 +2308,6 @@ "is-callable": "^1.2.7" } }, - "foreground-child": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", - "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", - "dev": true, - "requires": { - "cross-spawn": "^7.0.6", - "signal-exit": "^4.0.1" - } - }, "fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2894,17 +2362,14 @@ } }, "glob": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz", - "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==", + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz", + "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==", "dev": true, "requires": { - "foreground-child": "^3.3.1", - "jackspeak": "^4.1.1", - "minimatch": "^10.1.1", - "minipass": "^7.1.2", - "package-json-from-dist": "^1.0.0", - "path-scurry": "^2.0.0" + "minimatch": "^10.2.2", + "minipass": "^7.1.3", + "path-scurry": "^2.0.2" } }, "glob-parent": { @@ -3082,21 +2547,6 @@ "which-typed-array": "^1.1.16" } }, - "isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "dev": true - }, - "jackspeak": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz", - "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==", - "dev": true, - "requires": { - "@isaacs/cliui": "^8.0.2" - } - }, "json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -3126,9 +2576,9 @@ "dev": true }, "lru-cache": { - "version": "11.2.2", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz", - "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==", + "version": "11.3.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz", + "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==", "dev": true }, "math-intrinsics": { @@ -3152,18 +2602,18 @@ } }, "minimatch": { - "version": "10.2.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz", - "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==", + "version": "10.2.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz", + "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==", "dev": true, "requires": { - "brace-expansion": "^5.0.2" + "brace-expansion": "^5.0.5" } }, "minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz", + "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==", "dev": true }, "normalize-path": { @@ -3232,12 +2682,6 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, - "package-json-from-dist": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", - "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true - }, "path": { "version": "0.12.7", "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", @@ -3271,16 +2715,10 @@ "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", "dev": true }, - "path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true - }, "path-scurry": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz", - "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz", + "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==", "dev": true, "requires": { "lru-cache": "^11.0.0", @@ -3294,9 +2732,9 @@ "dev": true }, "picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", "dev": true }, "possible-typed-array-names": { @@ -3324,9 +2762,9 @@ "dev": true }, "qs": { - "version": "6.15.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz", - "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==", + "version": "6.15.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz", + "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==", "dev": true, "requires": { "side-channel": "^1.1.0" @@ -3387,21 +2825,6 @@ "has-property-descriptors": "^1.0.2" } }, - "shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "requires": { - "shebang-regex": "^3.0.0" - } - }, - "shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true - }, "side-channel": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", @@ -3416,13 +2839,13 @@ } }, "side-channel-list": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", - "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", "dev": true, "requires": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" } }, "side-channel-map": { @@ -3450,12 +2873,6 @@ "side-channel-map": "^1.0.1" } }, - "signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true - }, "stream": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz", @@ -3485,46 +2902,6 @@ "strip-ansi": "^5.1.0" } }, - "string-width-cjs": { - "version": "npm:string-width@4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.1" - } - } - } - }, "strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -3534,35 +2911,19 @@ "ansi-regex": "^4.1.0" } }, - "strip-ansi-cjs": { - "version": "npm:strip-ansi@6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true - } - } - }, "style-dictionary": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.1.1.tgz", - "integrity": "sha512-scRFwr2VrerXy6BzO2Ym8AI0dRGkAIoS2YhooagytxCFkoXPYCLhvIxg3VO/yD2i4VeU4aGmHG80+ZLdPDb0uw==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.4.0.tgz", + "integrity": "sha512-6BzO0DV19t6KUEXYfvHJ73d3y8bBDcd0wNLfoZRX817obJ8YX5Vev8Xh3+k9601tHE8qRJ/586iLt0byuY2THw==", "dev": true, "requires": { "@bundled-es-modules/deepmerge": "^4.3.1", - "@bundled-es-modules/glob": "^11.0.3", - "@bundled-es-modules/memfs": "^4.9.4", + "@bundled-es-modules/glob": "^13.0.6", + "@bundled-es-modules/memfs": "^4.17.0", "@zip.js/zip.js": "^2.7.44", "chalk": "^5.3.0", "change-case": "^5.3.0", + "colorjs.io": "^0.5.2", "commander": "^12.1.0", "is-plain-obj": "^4.1.0", "json5": "^2.2.2", @@ -3638,15 +2999,6 @@ "which-typed-array": "^1.1.2" } }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - }, "which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", @@ -3705,57 +3057,6 @@ } } }, - "wrap-ansi-cjs": { - "version": "npm:wrap-ansi@7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true - }, - "string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - } - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.1" - } - } - } - }, "y18n": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", diff --git a/package.json b/package.json index d38b0f9..3c1d3e0 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "@open-inwoner/design-tokens", - "version": "0.0.30", + "version": "0.1.00", "description": "Design tokens for Open Inwoner", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "style-dictionary build -c style-dictionary.config.json", + "build": "style-dictionary build -c style-dictionary.config.json --verbose", "start": "chokidar --initial --command 'npm run build' 'src/**/*.tokens.json' 'src/**/tokens.json'", "format": "prettier --write 'src/**/*'", "checkformat": "prettier --check 'src/**/*'" @@ -38,6 +38,6 @@ "chokidar": "^4.0.3", "chokidar-cli": "^3.0.0", "prettier": "^2.8.0", - "style-dictionary": "^5.1.1" + "style-dictionary": "^5.2.0" } } diff --git a/packages/basis/basis.tokens.json b/packages/basis/basis.tokens.json new file mode 100644 index 0000000..bd17a2c --- /dev/null +++ b/packages/basis/basis.tokens.json @@ -0,0 +1,390 @@ +{ + "basis": { + "document": { + "color": { + "$value": "#4b4b4b", + "$description": "Experimental setup as import for Figma for future Basis tokens colors, only for use with the NLDS Theme Wizard." + } + }, + "color": { + "secondary": { + "bg-1": { + "$value": "#fcfcfc" + }, + "bg-2": { + "$value": "#f9f9f9" + }, + "interactive-1": { + "$value": "#f0f0f0" + }, + "interactive-2": { + "$value": "#e8e8e8" + }, + "interactive-3": { + "$value": "#e1e1e1" + }, + "border-1": { + "$value": "#d8d8d8" + }, + "border-2": { + "$value": "#cdcdcd" + }, + "border-3": { + "$value": "#bababa" + }, + "fill-1": { + "$value": "#8c8c8c" + }, + "fill-2": { + "$value": "#7f7f7f" + }, + "text-1": { + "$value": "#646464" + }, + "text-2": { + "$value": "#212121" + } + }, + "text": { + "bg-1": { + "$value": "#fcfdff" + }, + "bg-2": { + "$value": "#f5faff" + }, + "interactive-1": { + "$value": "#e9f2ff" + }, + "interactive-2": { + "$value": "#d8eaff" + }, + "interactive-3": { + "$value": "#c9dfff" + }, + "border-1": { + "$value": "#b5d2ff" + }, + "border-2": { + "$value": "#99bfff" + }, + "border-3": { + "$value": "#73a4ff" + }, + "fill-1": { + "$value": "#00f" + }, + "fill-2": { + "$value": "#0500e2" + }, + "text-1": { + "$value": "#0744ff" + }, + "text-2": { + "$value": "#0a2775" + } + }, + "primary": { + "bg-1": { + "$value": "#fcfdff" + }, + "bg-2": { + "$value": "#f6f9ff" + }, + "interactive-1": { + "$value": "#ebf2fe" + }, + "interactive-2": { + "$value": "#deebff" + }, + "interactive-3": { + "$value": "#cee1ff" + }, + "border-1": { + "$value": "#bcd4fa" + }, + "border-2": { + "$value": "#a4c2f3" + }, + "border-3": { + "$value": "#82aaeb" + }, + "fill-1": { + "$value": "#4a86e8" + }, + "fill-2": { + "$value": "#3e79da" + }, + "text-1": { + "$value": "#3570d0" + }, + "text-2": { + "$value": "#18335e" + } + }, + "disabled": { + "bg-1": { + "$value": "#fffcfb" + }, + "bg-2": { + "$value": "#fff7f6" + }, + "interactive-1": { + "$value": "#ffe9e5" + }, + "interactive-2": { + "$value": "#ffd9d0" + }, + "interactive-3": { + "$value": "#ffc9be" + }, + "border-1": { + "$value": "#ffb6a9" + }, + "border-2": { + "$value": "#ffa090" + }, + "border-3": { + "$value": "#fe8170" + }, + "fill-1": { + "$value": "#f00" + }, + "fill-2": { + "$value": "#f00000" + }, + "text-1": { + "$value": "#e50000" + }, + "text-2": { + "$value": "#681710" + } + }, + "error": { + "bg-1": { + "$value": "#fefdfb" + }, + "bg-2": { + "$value": "#fff7eb" + }, + "interactive-1": { + "$value": "#ffedd0" + }, + "interactive-2": { + "$value": "#ffe1b9" + }, + "interactive-3": { + "$value": "#ffd5a1" + }, + "border-1": { + "$value": "#ffc580" + }, + "border-2": { + "$value": "#fbb36c" + }, + "border-3": { + "$value": "#ec9a41" + }, + "fill-1": { + "$value": "#f90" + }, + "fill-2": { + "$value": "#e6953b" + }, + "text-1": { + "$value": "#b46100" + }, + "text-2": { + "$value": "#4f3419" + } + }, + "warning": { + "bg-1": { + "$value": "#f7fffe" + }, + "bg-2": { + "$value": "#eefcfc" + }, + "interactive-1": { + "$value": "#d1fcfb" + }, + "interactive-2": { + "$value": "#b3f8f7" + }, + "interactive-3": { + "$value": "#94f1f0" + }, + "border-1": { + "$value": "#72e6e5" + }, + "border-2": { + "$value": "#3bd6d6" + }, + "border-3": { + "$value": "#00c0c1" + }, + "fill-1": { + "$value": "#00f2f2" + }, + "fill-2": { + "$value": "#00e8e8" + }, + "text-1": { + "$value": "#007a7a" + }, + "text-2": { + "$value": "#004646" + } + }, + "info": { + "bg-1": { + "$value": "#fafefa" + }, + "bg-2": { + "$value": "#f3fcf2" + }, + "interactive-1": { + "$value": "#d8fed4" + }, + "interactive-2": { + "$value": "#bffcb9" + }, + "interactive-3": { + "$value": "#a7f4a0" + }, + "border-1": { + "$value": "#8fe888" + }, + "border-2": { + "$value": "#73d76c" + }, + "border-3": { + "$value": "#3fc539" + }, + "fill-1": { + "$value": "#0f0" + }, + "fill-2": { + "$value": "#00f400" + }, + "text-1": { + "$value": "#168713" + }, + "text-2": { + "$value": "#1a4718" + } + }, + "success": { + "bg-1": { + "$value": "#fdfdf9" + }, + "bg-2": { + "$value": "#fcfdea" + }, + "interactive-1": { + "$value": "#fafcb9" + }, + "interactive-2": { + "$value": "#f4f797" + }, + "interactive-3": { + "$value": "#ecee77" + }, + "border-1": { + "$value": "#dedf6f" + }, + "border-2": { + "$value": "#ced06e" + }, + "border-3": { + "$value": "#b9ba44" + }, + "fill-1": { + "$value": "#f1f100" + }, + "fill-2": { + "$value": "#e6e729" + }, + "text-1": { + "$value": "#7f7e00" + }, + "text-2": { + "$value": "#3e3f21" + } + }, + "highlight": { + "bg-1": { + "$value": "#fffcfb" + }, + "bg-2": { + "$value": "#fff6f4" + }, + "interactive-1": { + "$value": "#ffe9e4" + }, + "interactive-2": { + "$value": "#ffd9d1" + }, + "interactive-3": { + "$value": "#ffcabf" + }, + "border-1": { + "$value": "#ffb7aa" + }, + "border-2": { + "$value": "#ff9d8d" + }, + "border-3": { + "$value": "#ff7967" + }, + "fill-1": { + "$value": "#980000" + }, + "fill-2": { + "$value": "#830000" + }, + "text-1": { + "$value": "#c8392c" + }, + "text-2": { + "$value": "#750000" + } + } + }, + "typography": { + "font-size": { + "size-5": { + "$value": "16px" + }, + "size-6": { + "$value": "12px" + }, + "size-4": { + "$value": "22px" + } + }, + "font-family": { + "default": { + "$value": "Lato" + } + } + }, + "heading": { + "font-family": { + "$value": "Ubuntu" + } + }, + "border-radius": { + "sm": { + "$value": "3px" + }, + "md": { + "$value": "6px" + } + }, + "form-control": { + "border-radius": { + "$value": "3px" + } + } + } +} diff --git a/src/brand/openinwoner/color.tokens.json b/src/brand/openinwoner/color.tokens.json index 128a9d5..d1d69b4 100644 --- a/src/brand/openinwoner/color.tokens.json +++ b/src/brand/openinwoner/color.tokens.json @@ -1,216 +1,217 @@ { "oip": { "color": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Globally tweak commonly used colors." - } - }, + "$type": "group", + "$description": "Globally tweak commonly used colors.", "primary": { - "value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l))", - "comment": "The primary color #0065BD makes up a large part of the theme, it is used in buttons for example.", - "$extensions": { - "dte.metadata": { - "isCurated": true, - "category": "color" - } - } + "$type": "color", + "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l))", + "$description": "The primary color #0065BD makes up a large part of the theme, it is used in buttons for example." }, "primary-h": { - "value": "210", - "comment": "Primary color hue value" + "$type": "dimension", + "$value": "210", + "$description": "Primary color hue value" }, "primary-s": { - "value": "100%", - "comment": "Primary color saturation value" + "$type": "dimension", + "$value": "100%", + "$description": "Primary color saturation value" }, "primary-l": { - "value": "37%", - "comment": "Primary color lightness value" + "$type": "dimension", + "$value": "37%", + "$description": "Primary color lightness value" }, "primary-lighter": { - "value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%))", - "comment": "Lighter version of primary color" + "$type": "color", + "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%))", + "$description": "Lighter version of primary color" }, "primary-darker": { - "value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%))", - "comment": "Darker version of primary color" + "$type": "color", + "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%))", + "$description": "Darker version of primary color" }, "secondary": { - "value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l))", - "comment": "The secondary color #006A0F compliments the primary color and serves as the default for text-links.", - "$extensions": { - "dte.metadata": { - "isCurated": true, - "category": "color" - } - } + "$type": "color", + "$value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l))", + "$description": "The secondary color #006A0F compliments the primary color and serves as the default for text-links." }, "secondary-h": { - "value": "207", - "comment": "Secondary color hue value" + "$type": "dimension", + "$value": "207", + "$description": "Secondary color hue value" }, "secondary-s": { - "value": "80%", - "comment": "Secondary color saturation value" + "$type": "dimension", + "$value": "80%", + "$description": "Secondary color saturation value" }, "secondary-l": { - "value": "35%", - "comment": "Secondary color lightness value" + "$type": "dimension", + "$value": "35%", + "$description": "Secondary color lightness value" }, "secondary-darker": { - "value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%))", - "comment": "Darker version of secondary color" + "$type": "color", + "$value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%))", + "$description": "Darker version of secondary color" }, "accent": { - "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l))", - "comment": "The accent color #E10019 is usually the main identity color for a municipality", - "$extensions": { - "dte.metadata": { - "isCurated": true, - "category": "color" - } - } + "$type": "color", + "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l))", + "$description": "The accent color #E10019 is usually the main identity color for a municipality" }, "accent-h": { - "value": "50", - "comment": "Accent color hue value" + "$type": "dimension", + "$value": "50", + "$description": "Accent color hue value" }, "accent-s": { - "value": "94%", - "comment": "Accent color saturation value" + "$type": "dimension", + "$value": "94%", + "$description": "Accent color saturation value" }, "accent-l": { - "value": "57%", - "comment": "Accent color lightness value" + "$type": "dimension", + "$value": "57%", + "$description": "Accent color lightness value" }, "accent-darker": { - "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%))", - "comment": "Darker version of accent color" + "$type": "color", + "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%))", + "$description": "Darker version of accent color" }, "accent-lighter": { - "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%))", - "comment": "Lighter version of accent color" + "$type": "color", + "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%))", + "$description": "Lighter version of accent color" }, "info": { - "value": "#2566A7", - "comment": "The dark blue text color for informational states and/or messages.", - "$extensions": { - "dte.metadata": { - "isCurated": true, - "category": "color" - } - } + "$type": "color", + "$value": "#2566A7", + "$description": "The dark blue text color for informational states and/or messages." }, "info-light": { - "value": "#D5E6F6", - "comment": "The light blue background color for informational states and/or messages.", - "$extensions": { - "dte.metadata": { - "isCurated": true, - "category": "color" - } - } + "$type": "color", + "$value": "#D5E6F6", + "$description": "The light blue background color for informational states and/or messages." }, "success": { - "value": "#4A7746", - "comment": "The dark green text color for success states and/or messages." + "$type": "color", + "$value": "#4A7746", + "$description": "The dark green text color for success states and/or messages." }, "success-light": { - "value": "#ecf4ec", - "comment": "The light green background color for success states and/or messages." + "$type": "color", + "$value": "#ecf4ec", + "$description": "The light green background color for success states and/or messages." }, "warning": { - "value": "#704000", - "comment": "The dark orange text color for warning states and/or messages." + "$type": "color", + "$value": "#704000", + "$description": "The dark orange text color for warning states and/or messages." }, "warning-light": { - "value": "#ffdcad", - "comment": "The light orange background color for warning states and/or messages." + "$type": "color", + "$value": "#ffdcad", + "$description": "The light orange background color for warning states and/or messages." }, "danger": { - "value": "#5c000f", - "comment": "The dark red text color for error/critical states and/or messages." + "$type": "color", + "$value": "#5c000f", + "$description": "The dark red text color for error/critical states and/or messages." }, "danger-h": { - "value": "34", - "comment": "Danger color hue value" + "$type": "dimension", + "$value": "34", + "$description": "Danger color hue value" }, "danger-s": { - "value": "100%", - "comment": "Danger color saturation value" + "$type": "dimension", + "$value": "100%", + "$description": "Danger color saturation value" }, "danger-l": { - "value": "27%", - "comment": "Danger color lightness value" + "$type": "dimension", + "$value": "27%", + "$description": "Danger color lightness value" }, "danger-light": { - "value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%))", - "comment": "The light red background color for error/critical states and/or messages." + "$type": "color", + "$value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%))", + "$description": "The light red background color for error/critical states and/or messages." }, "danger-lightest": { - "value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%))", - "comment": "Lightest version of danger color" + "$type": "color", + "$value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%))", + "$description": "Lightest version of danger color" }, "bg": { - "value": "#ffffff", - "comment": "Background color for the (main) user interface." + "$type": "color", + "$value": "#ffffff", + "$description": "Background color for the (main) user interface." }, "fg": { - "value": "#4b4b4b", - "comment": "Blackish/gray-dark foreground color for the (main) user interface." + "$type": "color", + "$value": "#4b4b4b", + "$description": "Blackish/gray-dark foreground color for the (main) user interface." }, "fg-font-primary": { - "value": "#ffffff", - "comment": "White font color for texts inside primary buttons." + "$type": "color", + "$value": "#ffffff", + "$description": "White font color for texts inside primary buttons." }, "fg-font-secondary": { - "value": "#ffffff", - "comment": "White font color for texts inside secondary buttons." + "$type": "color", + "$value": "#ffffff", + "$description": "White font color for texts inside secondary buttons." }, "fg-font-accent": { - "value": "#4b4b4b", - "comment": "Dark gray font color for texts inside areas with a very light accent color as a light background-color." + "$type": "color", + "$value": "#4b4b4b", + "$description": "Dark gray font color for texts inside areas with a very light accent color as a light background-color." }, "fg-lighter": { - "value": "#676767", - "comment": "Blackish 90% gray foreground color for lighter text elements (eg date)." + "$type": "color", + "$value": "#676767", + "$description": "Blackish 90% gray foreground color for lighter text elements (eg date)." }, "fg-muted": { - "value": "#949494", - "comment": "Font/foreground color for non-actionable or less-important content." + "$type": "color", + "$value": "#949494", + "$description": "Font/foreground color for non-actionable or less-important content." }, "fg-heading": { - "value": "#000000", - "comment": "Black foreground color for fully black elements, like headings." + "$type": "color", + "$value": "#000000", + "$description": "Black foreground color for fully black elements, like headings." }, "border": { - "value": "#d2d2d2", - "comment": "Default color for borders." + "$type": "color", + "$value": "#d2d2d2", + "$description": "Default color for borders." }, "gray": { - "value": "#d2d2d2", - "comment": "Default 80% gray for borders." + "$type": "color", + "$value": "#d2d2d2", + "$description": "Default 80% gray for borders." }, "gray-lighter": { - "value": "#7a7a7a", - "comment": "Default light-gray for table text." + "$type": "color", + "$value": "#7a7a7a", + "$description": "Default light-gray for table text." }, "gray-lightest": { - "value": "#f3f3f3", - "comment": "Very lightest gray for hover styles." - }, - "focus": { - "$extensions": { - "dte.metadata": { - "stateType": "userAction" - } - }, - "border": {} + "$type": "color", + "$value": "#f3f3f3", + "$description": "Very lightest gray for hover styles." }, "red-notification": { - "value": "#e50026", - "comment": "The bright red color for notification badges and texts." + "$type": "color", + "$value": "#e50026", + "$description": "The bright red color for notification badges and texts." } } } diff --git a/src/brand/openinwoner/layout.tokens.json b/src/brand/openinwoner/layout.tokens.json deleted file mode 100644 index 3fff1ce..0000000 --- a/src/brand/openinwoner/layout.tokens.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "oip": { - "layout": { - "bg": {"value": "#FFFFFF"} - }, - "spacing": { - "tiny": {"value": "2px"}, - "small": {"value": "4px"}, - "medium": {"value": "8px"}, - "large": {"value": "16px"}, - "extraLarge": {"value": "24px"}, - "giant": {"value": "32px"}, - "mega": {"value": "80px"} - } - } -} diff --git a/src/brand/openinwoner/typography.tokens.json b/src/brand/openinwoner/typography.tokens.json deleted file mode 100644 index 087276c..0000000 --- a/src/brand/openinwoner/typography.tokens.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "oip": { - "heading": { - "fg": {"value": "{oip.color.fg}"}, - "font-family": {"value": "\"Heading\", \"Arial\", sans-serif"} - }, - "text": { - "margin": {"value": "20px"}, - "font-size": {"value": "16px"}, - "big": { - "font-size": {"value": "24px"} - }, - "small": { - "font-size": {"value": "0.875rem"} - }, - "line-height": {"value": "24px"} - }, - "typography": { - "sans-serif": { - "font-family": {"value": "\"Body\", \"Arial\", sans-serif"} - }, - "heading": { - "font-family": {"value": "\"Heading\", \"Arial\", sans-serif"} - } - } - } -} diff --git a/src/common/openinwoner/basis.tokens.json b/src/common/openinwoner/basis.tokens.json new file mode 100644 index 0000000..e28d250 --- /dev/null +++ b/src/common/openinwoner/basis.tokens.json @@ -0,0 +1,10 @@ +{ + "basis": { + "document": { + "color": { + "$value": "#4b4b4b", + "$description": "Experimental setup for future Basis tokens colors, only for use with the NLDS Theme Wizard." + } + } + } +} diff --git a/src/common/openinwoner/layout.tokens.json b/src/common/openinwoner/layout.tokens.json new file mode 100644 index 0000000..1db04f0 --- /dev/null +++ b/src/common/openinwoner/layout.tokens.json @@ -0,0 +1,16 @@ +{ + "oip": { + "layout": { + "bg": {"$value": "#FFFFFF"} + }, + "spacing": { + "tiny": {"$value": "2px"}, + "small": {"$value": "4px"}, + "medium": {"$value": "8px"}, + "large": {"$value": "16px"}, + "extraLarge": {"$value": "24px"}, + "giant": {"$value": "32px"}, + "mega": {"$value": "80px"} + } + } +} diff --git a/src/common/openinwoner/typography.tokens.json b/src/common/openinwoner/typography.tokens.json new file mode 100644 index 0000000..985197b --- /dev/null +++ b/src/common/openinwoner/typography.tokens.json @@ -0,0 +1,27 @@ +{ + "oip": { + "heading": { + "fg": {"$value": "{oip.color.fg}"}, + "font-family": {"$value": "\"Heading\", \"Arial\", sans-serif"} + }, + "text": { + "margin": {"$value": "20px"}, + "font-size": {"$value": "16px"}, + "big": { + "font-size": {"$value": "24px"} + }, + "small": { + "font-size": {"$value": "0.875rem"} + }, + "line-height": {"$value": "24px"} + }, + "typography": { + "sans-serif": { + "font-family": {"$value": "\"Body\", \"Arial\", sans-serif"} + }, + "heading": { + "font-family": {"$value": "\"Heading\", \"Arial\", sans-serif"} + } + } + } +} diff --git a/src/community/denhaag/action.tokens.json b/src/community/denhaag/action.tokens.json index baef8de..d20ff43 100644 --- a/src/community/denhaag/action.tokens.json +++ b/src/community/denhaag/action.tokens.json @@ -1,41 +1,41 @@ { "denhaag": { "action": { - "background-color": {"value": "{oip.color.bg}"}, - "color": {"value": "{oip.color.fg}"}, - "border-color": {"value": "{oip.color.border}"}, - "border-style": {"value": "solid"}, - "border-width": {"value": "1px"}, - "padding-block-start": {"value": "12px"}, - "padding-block-end": {"value": "12px"}, + "background-color": {"$value": "{oip.color.bg}"}, + "color": {"$value": "{oip.color.fg}"}, + "border-color": {"$value": "{oip.color.border}"}, + "border-style": {"$value": "solid"}, + "border-width": {"$value": "1px"}, + "padding-block-start": {"$value": "12px"}, + "padding-block-end": {"$value": "12px"}, "lg": { - "padding-block-start": {"value": "16px"}, - "padding-block-end": {"value": "16px"} + "padding-block-start": {"$value": "16px"}, + "padding-block-end": {"$value": "16px"} }, "single": { - "padding-block-start": {"value": "{denhaag.action.padding-block-start}"}, - "padding-block-end": {"value": "{denhaag.action.padding-block-end}"}, - "hover": {"background-color": {"value": "{oip.color.gray-lightest}"}} + "padding-block-start": {"$value": "{denhaag.action.padding-block-start}"}, + "padding-block-end": {"$value": "{denhaag.action.padding-block-end}"}, + "hover": {"background-color": {"$value": "{oip.color.gray-lightest}"}} }, "lg-single": { - "padding-block-start": {"value": "{denhaag.action.lg.padding-block-start}"}, - "padding-block-end": {"value": "{denhaag.action.lg.padding-block-end}"} + "padding-block-start": {"$value": "{denhaag.action.lg.padding-block-start}"}, + "padding-block-end": {"$value": "{denhaag.action.lg.padding-block-end}"} }, "multi": { - "padding-block-start": {"value": "{denhaag.action.padding-block-start}"}, - "padding-block-end": {"value": "{denhaag.action.padding-block-end}"} + "padding-block-start": {"$value": "{denhaag.action.padding-block-start}"}, + "padding-block-end": {"$value": "{denhaag.action.padding-block-end}"} }, "lg-multi": { - "padding-block-start": {"value": "{denhaag.action.lg.padding-block-start}"}, - "padding-block-end": {"value": "{denhaag.action.lg.padding-block-end}"} + "padding-block-start": {"$value": "{denhaag.action.lg.padding-block-start}"}, + "padding-block-end": {"$value": "{denhaag.action.lg.padding-block-end}"} }, - "gap": {"value": "8px"}, - "lg-gap": {"value": "16px"}, - "actions-gap": {"value": "16px"}, + "gap": {"$value": "8px"}, + "lg-gap": {"$value": "16px"}, + "actions-gap": {"$value": "16px"}, "link": { "icon": { - "color": {"value": "{oip.color.primary}"}, - "width": {"value": "16px"} + "color": {"$value": "{oip.color.primary}"}, + "width": {"$value": "16px"} } } } diff --git a/src/community/denhaag/file.tokens.json b/src/community/denhaag/file.tokens.json index 8b4230b..4dc97eb 100644 --- a/src/community/denhaag/file.tokens.json +++ b/src/community/denhaag/file.tokens.json @@ -1,34 +1,34 @@ { "denhaag": { "file": { - "border-width": {"value": "1px"}, - "border-color": {"value": "{oip.color.border}"}, - "border-style": {"value": "solid"}, + "border-width": {"$value": "1px"}, + "border-color": {"$value": "{oip.color.border}"}, + "border-style": {"$value": "solid"}, "hover": { - "color": {"value": "{oip.color.primary-darker}"} + "color": {"$value": "{oip.color.primary-darker}"} }, "focus": { - "outline-color": {"value": "{oip.color.border}"}, - "outline-width": {"value": "1px"}, - "outline-style": {"value": "solid"} + "outline-color": {"$value": "{oip.color.border}"}, + "outline-width": {"$value": "1px"}, + "outline-style": {"$value": "solid"} }, "left": { - "padding-inline-start": {"value": "{oip.spacing.large}"}, - "padding-inline-end": {"value": "{oip.spacing.large}"}, - "background-color": {"value": "{oip.color.gray-lightest}"} + "padding-inline-start": {"$value": "{oip.spacing.large}"}, + "padding-inline-end": {"$value": "{oip.spacing.large}"}, + "background-color": {"$value": "{oip.color.gray-lightest}"} }, "right": { - "gap": {"value": "{oip.spacing.tiny}"}, - "padding-block-start": {"value": "{oip.spacing.large}"}, - "padding-block-end": {"value": "{oip.spacing.large}"}, - "padding-inline-start": {"value": "{oip.spacing.large}"}, - "padding-inline-end": {"value": "{oip.spacing.large}"} + "gap": {"$value": "{oip.spacing.tiny}"}, + "padding-block-start": {"$value": "{oip.spacing.large}"}, + "padding-block-end": {"$value": "{oip.spacing.large}"}, + "padding-inline-start": {"$value": "{oip.spacing.large}"}, + "padding-inline-end": {"$value": "{oip.spacing.large}"} }, "link": { - "color": {"value": "{oip.color.primary}"}, - "gap": {"value": "{oip.spacing.small}"}, + "color": {"$value": "{oip.color.primary}"}, + "gap": {"$value": "{oip.spacing.small}"}, "icon": { - "width": {"value": "20px"} + "width": {"$value": "20px"} } } } diff --git a/src/community/denhaag/side-navigation.tokens.json b/src/community/denhaag/side-navigation.tokens.json index b76cb6a..e89b341 100644 --- a/src/community/denhaag/side-navigation.tokens.json +++ b/src/community/denhaag/side-navigation.tokens.json @@ -1,37 +1,37 @@ { "denhaag": { "side-navigation": { - "display": {"value": "flex"}, - "flex-direction": {"value": "column"}, - "min-width": {"value": "14.5rem"}, - "row-gap": {"value": "30px"}, + "display": {"$value": "flex"}, + "flex-direction": {"$value": "column"}, + "min-width": {"$value": "14.5rem"}, + "row-gap": {"$value": "30px"}, "mobile": { - "display": {"value": "none"} + "display": {"$value": "none"} }, "item": { - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "normal"}, - "height": {"value": "48px"}, - "line-height": {"value": "1.5"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"} + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "normal"}, + "height": {"$value": "48px"}, + "line-height": {"$value": "1.5"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"} }, "link": { "label": { - "gap": {"value": "30px"} + "gap": {"$value": "30px"} }, - "padding-block-start": {"value": "12px"}, - "padding-block-end": {"value": "12px"}, - "color": {"value": "{oip.color.fg}"}, + "padding-block-start": {"$value": "12px"}, + "padding-block-end": {"$value": "12px"}, + "color": {"$value": "{oip.color.fg}"}, "hover": { - "color": {"value": "{oip.color.primary}"} + "color": {"$value": "{oip.color.primary}"} }, "active": { - "color": {"value": "{oip.color.primary}"}, - "font-weight": {"value": "bold"} + "color": {"$value": "{oip.color.primary}"}, + "font-weight": {"$value": "bold"} } } } diff --git a/src/community/nl/number-badge.tokens.json b/src/community/nl/number-badge.tokens.json index 0344ac0..bed7330 100644 --- a/src/community/nl/number-badge.tokens.json +++ b/src/community/nl/number-badge.tokens.json @@ -1,19 +1,19 @@ { "nl": { "number-badge": { - "background-color": {"value": "#f3f3f3"}, - "border-color": {"value": "#f3f3f3"}, - "border-radius": {"value": "3px"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oip.color.fg}"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "bold"}, - "min-size": {"value": "1em"}, - "min-block-size": {"value": "1em"}, - "min-inline-size": {"value": "max-content"}, - "padding-block": {"value": "0.5em"}, - "padding-inline": {"value": "0.5em"} + "background-color": {"$value": "#f3f3f3"}, + "border-color": {"$value": "#f3f3f3"}, + "border-radius": {"$value": "3px"}, + "border-width": {"$value": "1px"}, + "color": {"$value": "{oip.color.fg}"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "bold"}, + "min-size": {"$value": "1em"}, + "min-block-size": {"$value": "1em"}, + "min-inline-size": {"$value": "max-content"}, + "padding-block": {"$value": "0.5em"}, + "padding-inline": {"$value": "0.5em"} } } } diff --git a/src/community/nl/paragraph.tokens.json b/src/community/nl/paragraph.tokens.json index ce7b1a9..fc8d68f 100644 --- a/src/community/nl/paragraph.tokens.json +++ b/src/community/nl/paragraph.tokens.json @@ -2,41 +2,41 @@ "nl": { "paragraph": { "color": { - "value": "{oip.color.fg}" + "$value": "{oip.color.fg}" }, "font-family": { - "value": "{oip.typography.sans-serif.font-family}" + "$value": "{oip.typography.sans-serif.font-family}" }, "font-size": { - "value": "{oip.text.font-size}" + "$value": "{oip.text.font-size}" }, "font-weight": { - "value": "normal" + "$value": "normal" }, "line-height": { - "value": "1.5" + "$value": "1.5" }, "margin-block-end": { - "value": "0" + "$value": "0" }, "margin-block-start": { - "value": "0" + "$value": "0" }, "lead": { "font-size": { - "value": "1.25rem" + "$value": "1.25rem" }, "font-weight": { - "value": "normal" + "$value": "normal" }, "line-height": { - "value": "1.4286" + "$value": "1.4286" }, "margin-block-end": { - "value": "0" + "$value": "0" }, "margin-block-start": { - "value": "0" + "$value": "0" } } } diff --git a/src/community/utrecht/button.tokens.json b/src/community/utrecht/button.tokens.json index e99a3db..4be07d4 100644 --- a/src/community/utrecht/button.tokens.json +++ b/src/community/utrecht/button.tokens.json @@ -1,92 +1,92 @@ { "utrecht": { "button": { - "background-color": {"value": "transparent"}, - "border-color": {"value": "transparent"}, - "border-radius": {"value": "3px"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oip.color.secondary}"}, - "cursor": {"value": "pointer"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "line-height": {"value": "{oip.text.line-height}"}, - "min-block-size": {"value": "0"}, - "min-inline-size": {"value": "0"}, - "padding-block-start": {"value": "16px"}, - "padding-block-end": {"value": "16px"}, - "padding-inline-start": {"value": "32px"}, - "padding-inline-end": {"value": "32px"}, + "background-color": {"$value": "transparent"}, + "border-color": {"$value": "transparent"}, + "border-radius": {"$value": "3px"}, + "border-width": {"$value": "1px"}, + "color": {"$value": "{oip.color.secondary}"}, + "cursor": {"$value": "pointer"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "line-height": {"$value": "{oip.text.line-height}"}, + "min-block-size": {"$value": "0"}, + "min-inline-size": {"$value": "0"}, + "padding-block-start": {"$value": "16px"}, + "padding-block-end": {"$value": "16px"}, + "padding-inline-start": {"$value": "32px"}, + "padding-inline-end": {"$value": "32px"}, "focus": { - "border-color": {"value": "transparent"}, - "color": {"value": "{oip.color.secondary}"} + "border-color": {"$value": "transparent"}, + "color": {"$value": "{oip.color.secondary}"} }, "hover": { - "background-color": {"value": "transparent"}, - "border-color": {"value": "transparent"}, - "color": {"value": "{oip.color.secondary}"} + "background-color": {"$value": "transparent"}, + "border-color": {"$value": "transparent"}, + "color": {"$value": "{oip.color.secondary}"} }, "primary-action": { - "background-color": {"value": "{oip.color.primary}"}, + "background-color": {"$value": "{oip.color.primary}"}, "border-color": { - "value": "{oip.color.primary}", + "$value": "{oip.color.primary}", "comment": "The primary button-background color determined by the configuration." }, - "color": {"value": "#ffffff"}, + "color": {"$value": "#ffffff"}, "hover": { - "background-color": {"value": "{oip.color.primary-darker}"}, - "border-color": {"value": "{oip.color.primary-darker}"}, - "color": {"value": "#ffffff"} + "background-color": {"$value": "{oip.color.primary-darker}"}, + "border-color": {"$value": "{oip.color.primary-darker}"}, + "color": {"$value": "#ffffff"} }, "focus": { - "background-color": {"value": "{oip.color.primary-darker}"}, - "border-color": {"value": "{oip.color.primary-darker}"}, - "color": {"value": "#ffffff"} + "background-color": {"$value": "{oip.color.primary-darker}"}, + "border-color": {"$value": "{oip.color.primary-darker}"}, + "color": {"$value": "#ffffff"} }, "warning": { - "background-color": {"value": "{oip.color.danger-lightest}"}, - "border-color": {"value": "{oip.color.danger-lightest}"}, - "color": {"value": "{oip.color.danger}"}, + "background-color": {"$value": "{oip.color.danger-lightest}"}, + "border-color": {"$value": "{oip.color.danger-lightest}"}, + "color": {"$value": "{oip.color.danger}"}, "hover": { - "background-color": {"value": "{oip.color.danger}"}, - "border-color": {"value": "{oip.color.danger}"}, - "color": {"value": "{oip.color.danger-lightest}"} + "background-color": {"$value": "{oip.color.danger}"}, + "border-color": {"$value": "{oip.color.danger}"}, + "color": {"$value": "{oip.color.danger-lightest}"} } } }, "secondary-action": { - "background-color": {"value": "{oip.color.secondary}"}, + "background-color": {"$value": "{oip.color.secondary}"}, "border-color": { - "value": "{oip.color.secondary}", + "$value": "{oip.color.secondary}", "comment": "The secondary button-background color determined by the configuration." }, - "color": {"value": "#ffffff"}, + "color": {"$value": "#ffffff"}, "hover": { - "background-color": {"value": "{oip.color.secondary-darker}"}, - "border-color": {"value": "{oip.color.secondary-darker}"}, - "color": {"value": "#ffffff"} + "background-color": {"$value": "{oip.color.secondary-darker}"}, + "border-color": {"$value": "{oip.color.secondary-darker}"}, + "color": {"$value": "#ffffff"} }, "focus": { - "background-color": {"value": "{oip.color.secondary-darker}"}, - "border-color": {"value": "{oip.color.secondary-darker}"}, - "color": {"value": "#ffffff"} + "background-color": {"$value": "{oip.color.secondary-darker}"}, + "border-color": {"$value": "{oip.color.secondary-darker}"}, + "color": {"$value": "#ffffff"} } }, "disabled": { - "background-color": {"value": "{oip.color.gray}"}, + "background-color": {"$value": "{oip.color.gray}"}, "border-color": { - "value": "{oip.color.gray}", + "$value": "{oip.color.gray}", "comment": "Default gray for disabled elements" }, - "color": {"value": "#ffffff"} + "color": {"$value": "#ffffff"} } } } diff --git a/src/community/utrecht/fieldset.tokens.json b/src/community/utrecht/fieldset.tokens.json index a8bd12d..d19c014 100644 --- a/src/community/utrecht/fieldset.tokens.json +++ b/src/community/utrecht/fieldset.tokens.json @@ -1,21 +1,21 @@ { "utrecht": { "form-fieldset": { - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"}, "section": { - "background-color": {"value": "#FFFFFF"}, - "color": {"value": "{oip.color.fg-lighter}"} + "background-color": {"$value": "#FFFFFF"}, + "color": {"$value": "{oip.color.fg-lighter}"} }, "legend": { - "color": {"value": "{oip.color.fg-lighter}"}, + "color": {"$value": "{oip.color.fg-lighter}"}, "comment": "Utrecht paragraph--small will become deprecated and smaller texts should point to 'basis.text.font-size.sm' when Basis tokens become available.", - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.small.font-size}"}, - "font-weight": {"value": "normal"}, - "line-height": {"value": "21px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"} + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.small.font-size}"}, + "font-weight": {"$value": "normal"}, + "line-height": {"$value": "21px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"} } } } diff --git a/src/community/utrecht/form-label.tokens.json b/src/community/utrecht/form-label.tokens.json index ebefad0..3baccac 100644 --- a/src/community/utrecht/form-label.tokens.json +++ b/src/community/utrecht/form-label.tokens.json @@ -1,9 +1,9 @@ { "utrecht": { "form-label": { - "color": {"value": "{oip.color.fg}"}, - "font-weight": {"value": "normal"}, - "font-size": {"value": "16px"} + "color": {"$value": "{oip.color.fg}"}, + "font-weight": {"$value": "normal"}, + "font-size": {"$value": "16px"} } } } diff --git a/src/community/utrecht/heading.tokens.json b/src/community/utrecht/heading.tokens.json index 990d591..9a7e96d 100644 --- a/src/community/utrecht/heading.tokens.json +++ b/src/community/utrecht/heading.tokens.json @@ -1,48 +1,48 @@ { "utrecht": { "heading": { - "color": {"value": "{oip.color.fg-heading}"}, - "font-family": {"value": "{oip.typography.heading.font-family}"}, - "font-weight": {"value": "bold"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"} + "color": {"$value": "{oip.color.fg-heading}"}, + "font-family": {"$value": "{oip.typography.heading.font-family}"}, + "font-weight": {"$value": "bold"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"} }, "heading-1": { - "color": {"value": "{oip.color.fg-heading}"}, - "font-family": {"value": "{oip.typography.heading.font-family}"}, - "font-size": {"value": "32px"}, - "font-weight": {"value": "bold"}, - "line-height": {"value": "41px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "40px"} + "color": {"$value": "{oip.color.fg-heading}"}, + "font-family": {"$value": "{oip.typography.heading.font-family}"}, + "font-size": {"$value": "32px"}, + "font-weight": {"$value": "bold"}, + "line-height": {"$value": "41px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "40px"} }, "heading-2": { - "color": {"value": "{oip.color.fg-heading}"}, - "font-family": {"value": "{oip.typography.heading.font-family}"}, - "font-size": {"value": "24px"}, - "font-weight": {"value": "bold"}, - "letter-spacing": {"value": "normal"}, - "line-height": {"value": "34px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"} + "color": {"$value": "{oip.color.fg-heading}"}, + "font-family": {"$value": "{oip.typography.heading.font-family}"}, + "font-size": {"$value": "24px"}, + "font-weight": {"$value": "bold"}, + "letter-spacing": {"$value": "normal"}, + "line-height": {"$value": "34px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"} }, "heading-3": { - "color": {"value": "{oip.color.fg-heading}"}, - "font-family": {"value": "{oip.typography.heading.font-family}"}, - "font-size": {"value": "20px"}, - "font-weight": {"value": "bold"}, - "line-height": {"value": "30px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"} + "color": {"$value": "{oip.color.fg-heading}"}, + "font-family": {"$value": "{oip.typography.heading.font-family}"}, + "font-size": {"$value": "20px"}, + "font-weight": {"$value": "bold"}, + "line-height": {"$value": "30px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"} }, "heading-4": { - "color": {"value": "{oip.color.fg-heading}"}, - "font-family": {"value": "{oip.typography.heading.font-family}"}, - "font-size": {"value": "16px"}, - "font-weight": {"value": "bold"}, - "line-height": {"value": "26px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"} + "color": {"$value": "{oip.color.fg-heading}"}, + "font-family": {"$value": "{oip.typography.heading.font-family}"}, + "font-size": {"$value": "16px"}, + "font-weight": {"$value": "bold"}, + "line-height": {"$value": "26px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"} } } } diff --git a/src/community/utrecht/linklist.tokens.json b/src/community/utrecht/linklist.tokens.json index 8ad28f3..b7fc772 100644 --- a/src/community/utrecht/linklist.tokens.json +++ b/src/community/utrecht/linklist.tokens.json @@ -1,16 +1,16 @@ { "utrecht": { "link-list": { - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "row-gap": {"value": "8px"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "row-gap": {"$value": "8px"}, "link": { - "column-gap": {"value": "8px"}, - "font-weight": {"value": "bold"}, - "text-decoration": {"value": "none"} + "column-gap": {"$value": "8px"}, + "font-weight": {"$value": "bold"}, + "text-decoration": {"$value": "none"} }, "icon": { - "size": {"value": "14px"} + "size": {"$value": "14px"} } } } diff --git a/src/community/utrecht/listbox.tokens.json b/src/community/utrecht/listbox.tokens.json index f9dc740..086b250 100644 --- a/src/community/utrecht/listbox.tokens.json +++ b/src/community/utrecht/listbox.tokens.json @@ -1,62 +1,62 @@ { "utrecht": { "listbox": { - "background-color": {"value": "transparent"}, - "border-color": {"value": "transparent"}, - "border-radius": {"value": "3px"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oip.color.gray}"}, - "font-weight": {"value": "16px"}, - "inline-size": {"value": "fit-content"}, - "max-block-size": {"value": "550px"}, - "padding-block-end": {"value": "8px"}, - "padding-block-start": {"value": "8px"}, - "padding-inline-end": {"value": "12px"}, - "padding-inline-start": {"value": "0"}, + "background-color": {"$value": "transparent"}, + "border-color": {"$value": "transparent"}, + "border-radius": {"$value": "3px"}, + "border-width": {"$value": "1px"}, + "color": {"$value": "{oip.color.gray}"}, + "font-weight": {"$value": "16px"}, + "inline-size": {"$value": "fit-content"}, + "max-block-size": {"$value": "550px"}, + "padding-block-end": {"$value": "8px"}, + "padding-block-start": {"$value": "8px"}, + "padding-inline-end": {"$value": "12px"}, + "padding-inline-start": {"$value": "0"}, "group": { - "margin-block-end": {"value": "0"} + "margin-block-end": {"$value": "0"} }, "group-label": { - "color": {"value": "{oip.color.fg}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "normal"}, - "margin-inline-start": {"value": "8px"} + "color": {"$value": "{oip.color.fg}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "normal"}, + "margin-inline-start": {"$value": "8px"} }, "option": { - "background-color": {"value": "#ffffff"}, - "color": {"value": "{oip.color.fg}"}, - "min-block-size": {"value": "100px"}, - "padding-block-end": {"value": "16px"}, - "padding-block-start": {"value": "16px"}, - "padding-inline-end": {"value": "16px"}, - "padding-inline-start": {"value": "16px"}, + "background-color": {"$value": "#ffffff"}, + "color": {"$value": "{oip.color.fg}"}, + "min-block-size": {"$value": "100px"}, + "padding-block-end": {"$value": "16px"}, + "padding-block-start": {"$value": "16px"}, + "padding-inline-end": {"$value": "16px"}, + "padding-inline-start": {"$value": "16px"}, "active": { - "background-color": {"value": "{oip.color.gray-lightest}"}, - "color": {"value": "{oip.color.fg}"} + "background-color": {"$value": "{oip.color.gray-lightest}"}, + "color": {"$value": "{oip.color.fg}"} }, "disabled": { - "background-color": {"value": "#eeeeee"}, - "color": {"value": "#ffffff"} + "background-color": {"$value": "#eeeeee"}, + "color": {"$value": "#ffffff"} }, "hover": { - "background-color": {"value": "{oip.color.gray-lightest}"}, - "color": {"value": "{oip.color.fg}"} + "background-color": {"$value": "{oip.color.gray-lightest}"}, + "color": {"$value": "{oip.color.fg}"} }, "selected": { - "background-color": {"value": "#ffffff"}, - "color": {"value": "{oip.color.fg}"}, + "background-color": {"$value": "#ffffff"}, + "color": {"$value": "{oip.color.fg}"}, "disabled": { - "background-color": {"value": "#eeeeee"}, - "color": {"value": "{oip.color.fg-muted}"} + "background-color": {"$value": "#eeeeee"}, + "color": {"$value": "{oip.color.fg-muted}"} }, "hover": { - "background-color": {"value": "{oip.color.info-light}"}, - "color": {"value": "{oip.color.fg}"} + "background-color": {"$value": "{oip.color.info-light}"}, + "color": {"$value": "{oip.color.fg}"} } }, "icon": { - "color": {"value": "{oip.color.fg}"}, - "size": {"value": "16px"} + "color": {"$value": "{oip.color.fg}"}, + "size": {"$value": "16px"} } } } diff --git a/src/community/utrecht/orderedlist.tokens.json b/src/community/utrecht/orderedlist.tokens.json index d47a889..6d87dfe 100644 --- a/src/community/utrecht/orderedlist.tokens.json +++ b/src/community/utrecht/orderedlist.tokens.json @@ -1,16 +1,16 @@ { "utrecht": { "ordered-list": { - "font-size": {"value": "{oip.text.font-size}"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "line-height": {"value": "{oip.text.line-height}"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "padding-inline-start": {"value": "16px"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "line-height": {"$value": "{oip.text.line-height}"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "16px"}, "item": { - "margin-block-start": {"value": "4px"}, - "margin-block-end": {"value": "4px"}, - "padding-inline-start": {"value": "0"} + "margin-block-start": {"$value": "4px"}, + "margin-block-end": {"$value": "4px"}, + "padding-inline-start": {"$value": "0"} } } } diff --git a/src/community/utrecht/paragraph.tokens.json b/src/community/utrecht/paragraph.tokens.json index f84af6c..5d9c8a2 100644 --- a/src/community/utrecht/paragraph.tokens.json +++ b/src/community/utrecht/paragraph.tokens.json @@ -1,23 +1,23 @@ { "utrecht": { "paragraph": { - "color": {"value": "{oip.color.fg}"}, + "color": {"$value": "{oip.color.fg}"}, "comment": "TODO: remove these Utrecht paragraph community legacy tokens when Candidate is implemented.", - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "normal"}, - "line-height": {"value": "24px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "normal"}, + "line-height": {"$value": "24px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"}, "small": { - "color": {"value": "rgba(75,75,75,0.9)"}, + "color": {"$value": "rgba(75,75,75,0.9)"}, "comment": "Utrecht paragraph--small will become deprecated and should point to 'basis.text.font-size.sm' when Basis tokens become available.", - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-weight": {"value": "normal"}, - "font-size": {"value": "14px"}, - "line-height": {"value": "20px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"} + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-weight": {"$value": "normal"}, + "font-size": {"$value": "14px"}, + "line-height": {"$value": "20px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"} } } } diff --git a/src/community/utrecht/select.tokens.json b/src/community/utrecht/select.tokens.json index a44522a..dc45b1d 100644 --- a/src/community/utrecht/select.tokens.json +++ b/src/community/utrecht/select.tokens.json @@ -1,22 +1,22 @@ { "utrecht": { "select": { - "background-color": {"value": "#ffffff"}, - "border-bottom-width": {"value": "1px"}, - "border-color": {"value": "{oip.color.fg}"}, - "border-radius": {"value": "3px"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oip.color.fg}"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "normal"}, - "line-height": {"value": "initial"}, - "min-block-size": {"value": "36px"}, - "max-inline-size": {"value": "500px"}, - "padding-block-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "padding-inline-end": {"value": "0"}, - "padding-inline-start": {"value": "0"} + "background-color": {"$value": "#ffffff"}, + "border-bottom-width": {"$value": "1px"}, + "border-color": {"$value": "{oip.color.fg}"}, + "border-radius": {"$value": "3px"}, + "border-width": {"$value": "1px"}, + "color": {"$value": "{oip.color.fg}"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "normal"}, + "line-height": {"$value": "initial"}, + "min-block-size": {"$value": "36px"}, + "max-inline-size": {"$value": "500px"}, + "padding-block-end": {"$value": "0"}, + "padding-block-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"} } } } diff --git a/src/community/utrecht/skiplink.tokens.json b/src/community/utrecht/skiplink.tokens.json index d64d7b6..8032e7a 100644 --- a/src/community/utrecht/skiplink.tokens.json +++ b/src/community/utrecht/skiplink.tokens.json @@ -2,55 +2,55 @@ "utrecht": { "skip-link": { "background-color": { - "value": "{oip.color.accent}" + "$value": "{oip.color.accent}" }, "color": { - "value": "#fff" + "$value": "#fff" }, "min-block-size": { - "value": "0" + "$value": "0" }, "min-inline-size": { - "value": "0" + "$value": "0" }, "padding-block-start": { - "value": "24px" + "$value": "24px" }, "padding-block-end": { - "value": "24px" + "$value": "24px" }, "padding-inline-start": { - "value": "16px" + "$value": "16px" }, "padding-inline-end": { - "value": "16px" + "$value": "16px" }, "text-decoration": { - "value": "underline" + "$value": "underline" }, "z-index": { - "value": "5000" + "$value": "5000" }, "focus": { "background-color": { - "value": "{oip.color.accent}" + "$value": "{oip.color.accent}" }, "color": { - "value": "#fff" + "$value": "#fff" }, "text-decoration": { - "value": "underline" + "$value": "underline" } }, "focus-visible": { "background-color": { - "value": "{oip.color.accent}" + "$value": "{oip.color.accent}" }, "color": { - "value": "#fff" + "$value": "#fff" }, "text-decoration": { - "value": "underline" + "$value": "underline" } } } diff --git a/src/community/utrecht/table.tokens.json b/src/community/utrecht/table.tokens.json index a8e2537..fd45d7a 100644 --- a/src/community/utrecht/table.tokens.json +++ b/src/community/utrecht/table.tokens.json @@ -1,76 +1,76 @@ { "utrecht": { "table": { - "border-color": {"value": "transparent"}, - "border-width": {"value": "0"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "16px"}, - "line-height": {"value": "24px"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"}, + "border-color": {"$value": "transparent"}, + "border-width": {"$value": "0"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "16px"}, + "line-height": {"$value": "24px"}, + "margin-block-end": {"$value": "0"}, + "margin-block-start": {"$value": "0"}, "caption": { - "font-weight": {"value": "700"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "16px"}, - "color": {"value": "#000000"}, - "line-height": {"value": "130%"}, - "text-align": {"value": "left"}, - "margin-block-end": {"value": "0"} + "font-weight": {"$value": "700"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "16px"}, + "color": {"$value": "#000000"}, + "line-height": {"$value": "130%"}, + "text-align": {"$value": "left"}, + "margin-block-end": {"$value": "0"} }, "header": { - "font-weight": {"value": "bold"}, - "background-color": {"value": "transparent"}, - "color": {"value": "#000000"}, - "text-transform": {"value": "none"}, - "border-block-end-color": {"value": "{oip.color.gray}"}, - "border-block-end-width": {"value": "2px"}, + "font-weight": {"$value": "bold"}, + "background-color": {"$value": "transparent"}, + "color": {"$value": "#000000"}, + "text-transform": {"$value": "none"}, + "border-block-end-color": {"$value": "{oip.color.gray}"}, + "border-block-end-width": {"$value": "2px"}, "sticky": { - "background-color": {"value": "transparent"}, - "color": {"value": "#000000"}, - "border-block-end-color": {"value": "{oip.color.gray}"}, - "border-block-end-width": {"value": "2px"} + "background-color": {"$value": "transparent"}, + "color": {"$value": "#000000"}, + "border-block-end-color": {"$value": "{oip.color.gray}"}, + "border-block-end-width": {"$value": "2px"} } }, "footer": { - "background-color": {"value": "#ffffff"}, - "color": {"value": "#000000"}, + "background-color": {"$value": "#ffffff"}, + "color": {"$value": "#000000"}, "sticky": { - "background-color": {"value": "{oip.color.gray}"}, - "color": {"value": "#000000"} + "background-color": {"$value": "{oip.color.gray}"}, + "color": {"$value": "#000000"} } }, "header-cell": { - "font-size": {"value": "16px"}, - "font-weight": {"value": "bold"}, - "color": {"value": "#000000"}, - "text-transform": {"value": "none"} + "font-size": {"$value": "16px"}, + "font-weight": {"$value": "bold"}, + "color": {"$value": "#000000"}, + "text-transform": {"$value": "none"} }, "cell": { - "line-height": {"value": "24px"}, - "padding-block-end": {"value": "12px"}, - "padding-block-start": {"value": "12px"}, - "padding-inline-end": {"value": "8px"}, - "padding-inline-start": {"value": "8px"}, + "line-height": {"$value": "24px"}, + "padding-block-end": {"$value": "12px"}, + "padding-block-start": {"$value": "12px"}, + "padding-inline-end": {"$value": "8px"}, + "padding-inline-start": {"$value": "8px"}, "selected": { - "background-color": {"value": "{oip.color.gray}"}, - "color": {"value": "#000000"} + "background-color": {"$value": "{oip.color.gray}"}, + "color": {"$value": "#000000"} }, "icon": { - "size": {"value": "16px"} + "size": {"$value": "16px"} } }, "row": { - "border-block-end-color": {"value": "{oip.color.gray}"}, - "border-block-end-width": {"value": "1px"}, - "padding-inline-end": {"value": "8px"}, - "padding-inline-start": {"value": "8px"}, + "border-block-end-color": {"$value": "{oip.color.gray}"}, + "border-block-end-width": {"$value": "1px"}, + "padding-inline-end": {"$value": "8px"}, + "padding-inline-start": {"$value": "8px"}, "alternate-odd": { - "background-color": {"value": "#FFFFFF"}, - "color": {"value": "{oip.color.fg}"} + "background-color": {"$value": "#FFFFFF"}, + "color": {"$value": "{oip.color.fg}"} }, "alternate-even": { - "background-color": {"value": "{oip.color.gray-lightest}"}, - "color": {"value": "{oip.color.fg}"} + "background-color": {"$value": "{oip.color.gray-lightest}"}, + "color": {"$value": "{oip.color.fg}"} } } } diff --git a/src/community/utrecht/textbox.tokens.json b/src/community/utrecht/textbox.tokens.json index 18c9417..f2cbda8 100644 --- a/src/community/utrecht/textbox.tokens.json +++ b/src/community/utrecht/textbox.tokens.json @@ -1,29 +1,29 @@ { "utrecht": { "textbox": { - "background-color": {"value": "transparent"}, - "border-block-end-width": {"value": "1px"}, - "border-bottom-width": {"value": "1px"}, - "border-color": {"value": "transparent"}, - "border-radius": {"value": "3px"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oip.color.fg}"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "normal"}, - "line-height": {"value": "initial"}, - "max-inline-size": {"value": "fit-content"}, - "padding-block-end": {"value": "8px"}, - "padding-block-start": {"value": "8px"}, - "padding-inline-end": {"value": "16px"}, - "padding-inline-start": {"value": "16px"}, + "background-color": {"$value": "transparent"}, + "border-block-end-width": {"$value": "1px"}, + "border-bottom-width": {"$value": "1px"}, + "border-color": {"$value": "transparent"}, + "border-radius": {"$value": "3px"}, + "border-width": {"$value": "1px"}, + "color": {"$value": "{oip.color.fg}"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "normal"}, + "line-height": {"$value": "initial"}, + "max-inline-size": {"$value": "fit-content"}, + "padding-block-end": {"$value": "8px"}, + "padding-block-start": {"$value": "8px"}, + "padding-inline-end": {"$value": "16px"}, + "padding-inline-start": {"$value": "16px"}, "placeholder": { - "color": {"value": "{oip.color.fg-muted}"} + "color": {"$value": "{oip.color.fg-muted}"} }, "focus": { - "background-color": {"value": "#ffffff"}, - "border-color": {"value": "{oip.color.secondary}"}, - "color": {"value": "{oip.color.fg}"} + "background-color": {"$value": "#ffffff"}, + "border-color": {"$value": "{oip.color.secondary}"}, + "color": {"$value": "{oip.color.fg}"} } } } diff --git a/src/community/utrecht/typography.tokens.json b/src/community/utrecht/typography.tokens.json index 406d84d..619be10 100644 --- a/src/community/utrecht/typography.tokens.json +++ b/src/community/utrecht/typography.tokens.json @@ -2,50 +2,50 @@ "utrecht": { "document": { "font-family": { - "value": "{oip.typography.sans-serif.font-family}", + "$value": "{oip.typography.sans-serif.font-family}", "comment": "The body font-style for the theme." }, "font-size": { - "value": "16px", + "$value": "16px", "comment": "The body font-size for the theme." }, "font-weight": { - "value": "normal", + "$value": "normal", "comment": "The body font-weight for the theme." }, "color": { - "value": "#4b4b4b" + "$value": "#4b4b4b" }, "line-height": { - "value": "24px", + "$value": "24px", "comment": "Default body line-height." } }, "typography": { "sans-serif": { - "font-family": {"value": "\"Body\", \"Arial\", sans-serif"} + "font-family": {"$value": "\"Body\", \"Arial\", sans-serif"} }, "scale": { - "sm": {"font-size": {"value": "14px"}}, - "md": {"font-size": {"value": "16px"}}, - "lg": {"font-size": {"value": "24px"}}, - "xl": {"font-size": {"value": "20px"}}, - "2xl": {"font-size": {"value": "32px"}}, - "3xl": {"font-size": {"value": "40px"}} + "sm": {"font-size": {"$value": "14px"}}, + "md": {"font-size": {"$value": "16px"}}, + "lg": {"font-size": {"$value": "24px"}}, + "xl": {"font-size": {"$value": "20px"}}, + "2xl": {"font-size": {"$value": "32px"}}, + "3xl": {"font-size": {"$value": "40px"}} }, "weight-scale": { - "bold": {"font-weight": {"value": "bold"}}, - "normal": {"font-weight": {"value": "normal"}} + "bold": {"font-weight": {"$value": "bold"}}, + "normal": {"font-weight": {"$value": "normal"}} }, "font-style": { - "normal": {"value": "normal"}, - "inherit": {"value": "inherit"} + "normal": {"$value": "normal"}, + "inherit": {"$value": "inherit"} }, "line-height": { - "xs": {"value": "16px"}, - "sm": {"value": "22px"}, - "md": {"value": "24px"}, - "lg": {"value": "32px"} + "xs": {"$value": "16px"}, + "sm": {"$value": "22px"}, + "md": {"$value": "24px"}, + "lg": {"$value": "32px"} } } } diff --git a/src/community/utrecht/unorderedlist.tokens.json b/src/community/utrecht/unorderedlist.tokens.json index 52bd338..4a7eeb2 100644 --- a/src/community/utrecht/unorderedlist.tokens.json +++ b/src/community/utrecht/unorderedlist.tokens.json @@ -1,19 +1,19 @@ { "utrecht": { "unordered-list": { - "font-size": {"value": "{oip.text.font-size}"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "line-height": {"value": "{oip.text.line-height}"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "line-height": {"$value": "{oip.text.line-height}"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, "item": { - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"} + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"} }, "marker": { - "color": {"value": "transparent"} + "color": {"$value": "transparent"} } } } diff --git a/src/components/accordion.tokens.json b/src/components/accordion.tokens.json index 6a0ce0a..c5069a5 100644 --- a/src/components/accordion.tokens.json +++ b/src/components/accordion.tokens.json @@ -1,34 +1,34 @@ { "oip": { "accordion": { - "margin-block-start": {"value": "40px"}, - "margin-block-end": {"value": "0"}, + "margin-block-start": {"$value": "40px"}, + "margin-block-end": {"$value": "0"}, "heading": { - "color": {"value": "{oip.color.fg}"}, - "font-family": {"value": "{oip.typography.heading.font-family}"}, - "font-size": {"value": "20px"}, - "font-weight": {"value": "bold"}, - "line-height": {"value": "initial"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"} + "color": {"$value": "{oip.color.fg}"}, + "font-family": {"$value": "{oip.typography.heading.font-family}"}, + "font-size": {"$value": "20px"}, + "font-weight": {"$value": "bold"}, + "line-height": {"$value": "initial"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"} }, "summary": { - "border-bottom-width": {"value": "1px"}, - "border-bottom-style": {"value": "solid"}, - "border-bottom-color": {"value": "{oip.color.gray}"}, - "color": {"value": "{oip.color.fg}"}, + "border-bottom-width": {"$value": "1px"}, + "border-bottom-style": {"$value": "solid"}, + "border-bottom-color": {"$value": "{oip.color.gray}"}, + "color": {"$value": "{oip.color.fg}"}, "font-family": { - "value": "{oip.typography.sans-serif.font-family}", + "$value": "{oip.typography.sans-serif.font-family}", "comment": "If summary is not a true heading, the body font is used." }, - "font-size": {"value": "16px"}, - "font-weight": {"value": "normal"}, - "line-height": {"value": "initial"}, - "margin-block-end": {"value": "8px"}, - "padding-block-start": {"value": "16px"}, - "padding-block-end": {"value": "8px"} + "font-size": {"$value": "16px"}, + "font-weight": {"$value": "normal"}, + "line-height": {"$value": "initial"}, + "margin-block-end": {"$value": "8px"}, + "padding-block-start": {"$value": "16px"}, + "padding-block-end": {"$value": "8px"} } } } diff --git a/src/components/combobox.tokens.json b/src/components/combobox.tokens.json index d8fc177..8946e44 100644 --- a/src/components/combobox.tokens.json +++ b/src/components/combobox.tokens.json @@ -1,66 +1,66 @@ { "oip": { "combobox": { - "border-color": {"value": "{oip.color.fg}"}, - "border-radius": {"value": "3px"}, - "border-style": {"value": "solid"}, - "border-width": {"value": "1px"}, - "display": {"value": "inline-block"}, - "inline-size": {"value": "100%"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "normal"}, - "line-height": {"value": "initial"}, - "max-inline-size": {"value": "550px"}, - "position": {"value": "relative"}, + "border-color": {"$value": "{oip.color.fg}"}, + "border-radius": {"$value": "3px"}, + "border-style": {"$value": "solid"}, + "border-width": {"$value": "1px"}, + "display": {"$value": "inline-block"}, + "inline-size": {"$value": "100%"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "normal"}, + "line-height": {"$value": "initial"}, + "max-inline-size": {"$value": "550px"}, + "position": {"$value": "relative"}, "popover": { - "border-color": {"value": "{oip.color.fg}"}, - "border-style": {"value": "solid"}, - "border-width": {"value": "1px"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"}, - "padding-block-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "padding-inline-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, - "background-color": {"value": "#FFFFFF"}, - "block-size": {"value": "fit-content"}, - "color": {"value": "{oip.color.fg}"}, - "inline-size": {"value": "fit-content"}, - "inset": {"value": "0"}, - "overflow": {"value": "auto"}, - "position": {"value": "static"}, - "z-index": {"value": "1"}, + "border-color": {"$value": "{oip.color.fg}"}, + "border-style": {"$value": "solid"}, + "border-width": {"$value": "1px"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"}, + "padding-block-end": {"$value": "0"}, + "padding-block-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, + "background-color": {"$value": "#FFFFFF"}, + "block-size": {"$value": "fit-content"}, + "color": {"$value": "{oip.color.fg}"}, + "inline-size": {"$value": "fit-content"}, + "inset": {"$value": "0"}, + "overflow": {"$value": "auto"}, + "position": {"$value": "static"}, + "z-index": {"$value": "1"}, "block-end": { - "inset-block-start": {"value": "100%"} + "inset-block-start": {"$value": "100%"} }, "hidden": { - "display": {"value": "none !important"} + "display": {"$value": "none !important"} }, "listbox-list": { - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"}, - "padding-block-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "padding-inline-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"}, + "padding-block-end": {"$value": "0"}, + "padding-block-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, "option": { "selected": { "icon": { - "color": {"value": "{oip.color.fg}"}, - "size": {"value": "16px"} + "color": {"$value": "{oip.color.fg}"}, + "size": {"$value": "16px"} } } } } }, "icon": { - "color": {"value": "{oip.color.fg}"}, - "size": {"value": "16px"} + "color": {"$value": "{oip.color.fg}"}, + "size": {"$value": "16px"} } } } diff --git a/src/components/external-link-plugin.tokens.json b/src/components/external-link-plugin.tokens.json index 93f32ca..fd4948f 100644 --- a/src/components/external-link-plugin.tokens.json +++ b/src/components/external-link-plugin.tokens.json @@ -1,111 +1,111 @@ { "oip": { "external-link": { - "background-color": {"value": "#ffffff"}, - "color": {"value": "#000000"}, - "border-color": {"value": "{oip.color.border}"}, - "border-radius": {"value": "3px"}, - "border-style": {"value": "solid"}, - "border-width": {"value": "1px"}, - "box-shadow": {"value": "none"}, - "display": {"value": "flex"}, - "flex-direction": {"value": "row"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-weight": {"value": "bold"}, - "align-items": {"value": "center"}, - "row-gap": {"value": "8px"}, - "column-gap": {"value": "32px"}, - "text-decoration": {"value": "none"}, + "background-color": {"$value": "#ffffff"}, + "color": {"$value": "#000000"}, + "border-color": {"$value": "{oip.color.border}"}, + "border-radius": {"$value": "3px"}, + "border-style": {"$value": "solid"}, + "border-width": {"$value": "1px"}, + "box-shadow": {"$value": "none"}, + "display": {"$value": "flex"}, + "flex-direction": {"$value": "row"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-weight": {"$value": "bold"}, + "align-items": {"$value": "center"}, + "row-gap": {"$value": "8px"}, + "column-gap": {"$value": "32px"}, + "text-decoration": {"$value": "none"}, "hover": { - "background-color": {"value": "#ffffff"}, - "text-decoration-thickness": {"value": "bold"}, - "border-color": {"value": "{oip.color.primary}"}, - "border-style": {"value": "solid"}, - "border-width-block-start": {"value": "1px"}, - "border-width-block-end": {"value": "1px"}, - "border-width-inline-start": {"value": "3px"}, - "border-width-inline-end": {"value": "1px"}, - "border-radius": {"value": "3px"}, - "margin-inline-start": {"value": "-2px"} + "background-color": {"$value": "#ffffff"}, + "text-decoration-thickness": {"$value": "bold"}, + "border-color": {"$value": "{oip.color.primary}"}, + "border-style": {"$value": "solid"}, + "border-width-block-start": {"$value": "1px"}, + "border-width-block-end": {"$value": "1px"}, + "border-width-inline-start": {"$value": "3px"}, + "border-width-inline-end": {"$value": "1px"}, + "border-radius": {"$value": "3px"}, + "margin-inline-start": {"$value": "-2px"} }, "focus-visible": { - "background-color": {"value": "#f3f3f3"}, - "text-decoration-thickness": {"value": "bold"} + "background-color": {"$value": "#f3f3f3"}, + "text-decoration-thickness": {"$value": "bold"} }, "body": { - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"}, - "padding-block-start": {"value": "24px"}, - "padding-block-end": {"value": "24px"}, - "padding-inline-start": {"value": "16px"}, - "padding-inline-end": {"value": "16px"} + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"}, + "padding-block-start": {"$value": "24px"}, + "padding-block-end": {"$value": "24px"}, + "padding-inline-start": {"$value": "16px"}, + "padding-inline-end": {"$value": "16px"} }, "list": { - "margin-block-start": {"value": "24px"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "padding-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, - "padding-inline-end": {"value": "0"}, + "margin-block-start": {"$value": "24px"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"}, + "padding-block-start": {"$value": "0"}, + "padding-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"}, "item": { - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "padding-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, - "padding-inline-end": {"value": "0"}, - "border-color": {"value": "{oip.color.border}"}, - "border-radius": {"value": "3px"}, - "border-style": {"value": "solid"}, - "border-width": {"value": "1px"} + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"}, + "padding-block-start": {"$value": "0"}, + "padding-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"}, + "border-color": {"$value": "{oip.color.border}"}, + "border-radius": {"$value": "3px"}, + "border-style": {"$value": "solid"}, + "border-width": {"$value": "1px"} } }, "custom-icon": { - "color": {"value": "#000000"}, - "display": {"value": "inline-block"}, - "font-size": {"value": "24px"}, - "margin-block-start": {"value": "4px"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "8px"}, - "padding-block-start": {"value": "0"}, - "padding-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, - "padding-inline-end": {"value": "0"} + "color": {"$value": "#000000"}, + "display": {"$value": "inline-block"}, + "font-size": {"$value": "24px"}, + "margin-block-start": {"$value": "4px"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "8px"}, + "padding-block-start": {"$value": "0"}, + "padding-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"} }, "content": { - "color": {"value": "#000000"}, - "font-family": {"value": "{oip.typography.heading.font-family}"}, - "font-size": {"value": "20px"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "margin-inline-start": {"value": "0"}, - "margin-inline-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "padding-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, - "padding-inline-end": {"value": "0"} + "color": {"$value": "#000000"}, + "font-family": {"$value": "{oip.typography.heading.font-family}"}, + "font-size": {"$value": "20px"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "margin-inline-start": {"$value": "0"}, + "margin-inline-end": {"$value": "0"}, + "padding-block-start": {"$value": "0"}, + "padding-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"} }, "arrow-icon": { - "color": {"value": "{oip.color.primary}"}, - "font-size": {"value": "16px"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, + "color": {"$value": "{oip.color.primary}"}, + "font-size": {"$value": "16px"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, "margin-inline-start": { - "value": "auto", + "$value": "auto", "comment": "Make icon align to the relative end inside a flex-box." }, - "margin-inline-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "padding-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, - "padding-inline-end": {"value": "0"} + "margin-inline-end": {"$value": "0"}, + "padding-block-start": {"$value": "0"}, + "padding-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, + "padding-inline-end": {"$value": "0"} } } } diff --git a/src/components/fieldset-modifiers.tokens.json b/src/components/fieldset-modifiers.tokens.json index f994ca9..1a984fd 100644 --- a/src/components/fieldset-modifiers.tokens.json +++ b/src/components/fieldset-modifiers.tokens.json @@ -3,16 +3,16 @@ "fieldset": { "horizontal": { "display": { - "value": "flex" + "$value": "flex" }, "flex-direction": { - "value": "row" + "$value": "row" }, "gap": { - "value": "7px" + "$value": "7px" }, "margin-block-end": { - "value": "20px" + "$value": "20px" } } } diff --git a/src/components/filters.tokens.json b/src/components/filters.tokens.json index 060a712..505b949 100644 --- a/src/components/filters.tokens.json +++ b/src/components/filters.tokens.json @@ -2,102 +2,102 @@ "oip": { "filter": { "wrapper": { - "gap": {"value": "{oip.spacing.large}"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"} + "gap": {"$value": "{oip.spacing.large}"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"} }, "button": { - "background-color": {"value": "{oip.color.bg}"}, - "color": {"value": "{oip.color.fg}"}, - "border-color": {"value": "{oip.color.gray}"}, - "border-radius": {"value": "3px"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "400"}, - "padding": {"value": "10px 12px"}, - "gap": {"value": "{oip.spacing.large}"}, - "min-width": {"value": "204px"}, - "max-width": {"value": "220px"}, - "icon": {"size": {"value": "20px"}}, - "hover": {"background-color": {"value": "{oip.color.gray-lightest}"}}, + "background-color": {"$value": "{oip.color.bg}"}, + "color": {"$value": "{oip.color.fg}"}, + "border-color": {"$value": "{oip.color.gray}"}, + "border-radius": {"$value": "3px"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"}, + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "400"}, + "padding": {"$value": "10px 12px"}, + "gap": {"$value": "{oip.spacing.large}"}, + "min-width": {"$value": "204px"}, + "max-width": {"$value": "220px"}, + "icon": {"size": {"$value": "20px"}}, + "hover": {"background-color": {"$value": "{oip.color.gray-lightest}"}}, "active": { - "color": {"value": "{oip.color.primary}"}, - "border-color": {"value": "{oip.color.primary}"}, - "active": {"value": "600"} + "color": {"$value": "{oip.color.primary}"}, + "border-color": {"$value": "{oip.color.primary}"}, + "active": {"$value": "600"} } }, "choices": { - "background-color": {"value": "{oip.color.bg}"}, - "color": {"value": "{oip.color.fg}"}, - "border-color": {"value": "{oip.color.gray}"}, - "border-radius": {"value": "3px"}, - "box-shadow": {"value": "0 4px 12px rgba(0, 0, 0, 0.15)"}, - "gap": {"value": "{oip.spacing.small}"} + "background-color": {"$value": "{oip.color.bg}"}, + "color": {"$value": "{oip.color.fg}"}, + "border-color": {"$value": "{oip.color.gray}"}, + "border-radius": {"$value": "3px"}, + "box-shadow": {"$value": "0 4px 12px rgba(0, 0, 0, 0.15)"}, + "gap": {"$value": "{oip.spacing.small}"} }, - "dropdown": {"min-width": {"value": "200px"}}, - "mobile": {"gap": {"value": "{oip.spacing.medium}"}}, + "dropdown": {"min-width": {"$value": "200px"}}, + "mobile": {"gap": {"$value": "{oip.spacing.medium}"}}, "title": { - "font-size": {"value": "{oip.text.font-size}"}, - "font-weight": {"value": "400"}, - "color": {"value": "{oip.color.fg}"} + "font-size": {"$value": "{oip.text.font-size}"}, + "font-weight": {"$value": "400"}, + "color": {"$value": "{oip.color.fg}"} }, "option": { - "background-color": {"value": "{oip.color.bg}"}, - "color": {"value": "{oip.color.fg}"}, - "border-color": {"value": "transparent"}, - "border-radius": {"value": "3px"}, - "padding-inline": {"value": "12px"}, - "padding-block": {"value": "8px"}, - "gap": {"value": "8px"}, - "hover": {"background-color": {"value": "{oip.color.gray-lightest}"}}, + "background-color": {"$value": "{oip.color.bg}"}, + "color": {"$value": "{oip.color.fg}"}, + "border-color": {"$value": "transparent"}, + "border-radius": {"$value": "3px"}, + "padding-inline": {"$value": "12px"}, + "padding-block": {"$value": "8px"}, + "gap": {"$value": "8px"}, + "hover": {"background-color": {"$value": "{oip.color.gray-lightest}"}}, "checked": { - "border-color": {"value": "{oip.color.secondary}"}, - "icon-color": {"value": "{oip.color.secondary}"} + "border-color": {"$value": "{oip.color.secondary}"}, + "icon-color": {"$value": "{oip.color.secondary}"} }, "icon": { - "size": {"value": "24px"}, - "color": {"value": "{oip.color.fg}"} + "size": {"$value": "24px"}, + "color": {"$value": "{oip.color.fg}"} }, - "label-color": {"value": "{oip.color.fg}"}, - "label-gap": {"value": "{oip.spacing.small}"} + "label-color": {"$value": "{oip.color.fg}"}, + "label-gap": {"$value": "{oip.spacing.small}"} }, "chips": { - "gap": {"value": "{oip.spacing.medium}"}, - "clear-button-font-weight": {"value": "400"} + "gap": {"$value": "{oip.spacing.medium}"}, + "clear-button-font-weight": {"$value": "400"} }, "modal": { - "padding": {"value": "1rem"}, - "gap": {"value": "2rem"}, - "border-radius": {"value": "8px"}, - "background-color": {"value": "{oip.color.gray-lightest}"}, - "header": {"gap": {"value": "2rem"}}, + "padding": {"$value": "1rem"}, + "gap": {"$value": "2rem"}, + "border-radius": {"$value": "8px"}, + "background-color": {"$value": "{oip.color.gray-lightest}"}, + "header": {"gap": {"$value": "2rem"}}, "heading": { - "color": {"value": "{oip.color.fg-heading}"}, - "font-size": {"value": "18px"}, - "font-weight": {"value": "500"} + "color": {"$value": "{oip.color.fg-heading}"}, + "font-size": {"$value": "18px"}, + "font-weight": {"$value": "500"} }, - "close-button-size": {"value": "32px"}, - "content-gap": {"value": "32px"}, - "footer-padding-bottom": {"value": "32px"}, - "backdrop-background-color": {"value": "rgb(0 0 0 / 0.4)"} + "close-button-size": {"$value": "32px"}, + "content-gap": {"$value": "32px"}, + "footer-padding-bottom": {"$value": "32px"}, + "backdrop-background-color": {"$value": "rgb(0 0 0 / 0.4)"} }, "bar": { - "background-color": {"value": "transparent"}, - "border-radius": {"value": "3px"}, - "gap": {"value": "1rem"}, + "background-color": {"$value": "transparent"}, + "border-radius": {"$value": "3px"}, + "gap": {"$value": "1rem"}, "padding": { - "block": {"start": {"value": "1rem"}, "end": {"value": "1rem"}}, - "inline": {"start": {"value": "1rem"}, "end": {"value": "1rem"}} + "block": {"start": {"$value": "1rem"}, "end": {"$value": "1rem"}}, + "inline": {"start": {"$value": "1rem"}, "end": {"$value": "1rem"}} }, "label": { - "color": {"value": "#000"}, - "font-weight": {"value": "400"}, - "font-family": {"value": "{oip.typography.sans-serif.font-family}"} + "color": {"$value": "#000"}, + "font-weight": {"$value": "400"}, + "font-family": {"$value": "{oip.typography.sans-serif.font-family}"} } }, "chip": { - "background-color": {"value": "transparent"}, - "border-color": {"value": "{oip.color.primary}"}, - "border-radius": {"value": "3px"}, + "background-color": {"$value": "transparent"}, + "border-color": {"$value": "{oip.color.primary}"}, + "border-radius": {"$value": "3px"}, "color": {"value": "{oip.color.fg}"}, "font-size": {"value": "14px"}, "gap": {"value": "8px"}, diff --git a/src/components/paragraph-modifiers.tokens.json b/src/components/paragraph-modifiers.tokens.json index 6df6d10..0e1b4b7 100644 --- a/src/components/paragraph-modifiers.tokens.json +++ b/src/components/paragraph-modifiers.tokens.json @@ -2,25 +2,25 @@ "oip": { "utrecht-paragraph": { "muted": { - "color": {"value": "{oip.color.fg-muted}"} + "color": {"$value": "{oip.color.fg-muted}"} }, "centered": { "comment": "TODO: modifier may be removed in future, or added to the shadow DOM.", - "text-align": {"value": "center"} + "text-align": {"$value": "center"} }, "compact": { "comment": "TODO: modifier may be removed in future, or added to the shadow DOM.", - "margin-block-end": {"value": "0 !important"}, - "margin-block-start": {"value": "0 !important"} + "margin-block-end": {"$value": "0 !important"}, + "margin-block-start": {"$value": "0 !important"} } }, "nl-paragraph": { "muted": { - "color": {"value": "{oip.color.fg-muted}"} + "color": {"$value": "{oip.color.fg-muted}"} }, "small": { "comment": "TODO: When Basis tokens become available, this should point to 'basis.text.font-size.sm'.", - "font-size": {"value": "{oip.text.small.font-size}"} + "font-size": {"$value": "{oip.text.small.font-size}"} } } } diff --git a/src/components/plugin-card.tokens.json b/src/components/plugin-card.tokens.json index 46393ec..7179b1a 100644 --- a/src/components/plugin-card.tokens.json +++ b/src/components/plugin-card.tokens.json @@ -1,62 +1,62 @@ { "oip": { "plugin-card": { - "background-color": {"value": "#ffffff"}, - "color": {"value": "#4b4b4b"}, - "max-inline-size": {"value": "100%"}, - "border-color": {"value": "{oip.color.border}"}, - "border-style": {"value": "solid"}, - "border-width": {"value": "1px"}, - "border-radius": {"value": "3px"}, - "box-shadow": {"value": "none"}, - "inline-size": {"value": "100%"}, - "row-gap": {"value": "24px"}, + "background-color": {"$value": "#ffffff"}, + "color": {"$value": "#4b4b4b"}, + "max-inline-size": {"$value": "100%"}, + "border-color": {"$value": "{oip.color.border}"}, + "border-style": {"$value": "solid"}, + "border-width": {"$value": "1px"}, + "border-radius": {"$value": "3px"}, + "box-shadow": {"$value": "none"}, + "inline-size": {"$value": "100%"}, + "row-gap": {"$value": "24px"}, "heading": { - "color": {"value": "{oip.color.fg-heading}"}, - "padding-inline-start": {"value": "16px"}, - "padding-inline-end": {"value": "16px"} + "color": {"$value": "{oip.color.fg-heading}"}, + "padding-inline-start": {"$value": "16px"}, + "padding-inline-end": {"$value": "16px"} }, "hover": { - "background-color": {"value": "#ffffff"}, - "color": {"value": "#4b4b4b"}, - "border-color": {"value": "{oip.color.primary}"}, - "border-style": {"value": "solid"}, - "border-width-block-start": {"value": "1px"}, - "border-width-block-end": {"value": "1px"}, - "border-width-inline-start": {"value": "3px"}, - "border-width-inline-end": {"value": "1px"}, - "border-radius": {"value": "3px"}, - "box-shadow": {"value": "none"}, - "margin-inline-start": {"value": "-2px"} + "background-color": {"$value": "#ffffff"}, + "color": {"$value": "#4b4b4b"}, + "border-color": {"$value": "{oip.color.primary}"}, + "border-style": {"$value": "solid"}, + "border-width-block-start": {"$value": "1px"}, + "border-width-block-end": {"$value": "1px"}, + "border-width-inline-start": {"$value": "3px"}, + "border-width-inline-end": {"$value": "1px"}, + "border-radius": {"$value": "3px"}, + "box-shadow": {"$value": "none"}, + "margin-inline-start": {"$value": "-2px"} }, "link": { - "padding": {"value": "0"} + "padding": {"$value": "0"} }, "link-hover": { - "text-decoration-thickness": {"value": "1px"}, - "text-decoration-line": {"value": "underline"}, - "text-underline-offset": {"value": "auto"} + "text-decoration-thickness": {"$value": "1px"}, + "text-decoration-line": {"$value": "underline"}, + "text-underline-offset": {"$value": "auto"} }, "content": { - "gap": {"value": "24px"}, - "padding-block-start": {"value": "24px"}, - "padding-block-end": {"value": "24px"}, - "padding-inline-start": {"value": "16px"}, - "padding-inline-end": {"value": "16px"} + "gap": {"$value": "24px"}, + "padding-block-start": {"$value": "24px"}, + "padding-block-end": {"$value": "24px"}, + "padding-inline-start": {"$value": "16px"}, + "padding-inline-end": {"$value": "16px"} }, "body": { - "padding-inline-start": {"value": "16px"}, - "padding-inline-end": {"value": "16px"} + "padding-inline-start": {"$value": "16px"}, + "padding-inline-end": {"$value": "16px"} }, "list": { - "grid-template-columns": {"value": "repeat(1, 1fr)"}, - "grid-template-columns-desktop": {"value": "repeat(2, 1fr)"}, - "list-style-type": {"value": "none"}, - "margin-block-start": {"value": "0"}, - "margin-block-end": {"value": "0"}, - "padding-inline-start": {"value": "0"}, - "grid-row-gap": {"value": "8px"}, - "grid-column-gap": {"value": "32px"} + "grid-template-columns": {"$value": "repeat(1, 1fr)"}, + "grid-template-columns-desktop": {"$value": "repeat(2, 1fr)"}, + "list-style-type": {"$value": "none"}, + "margin-block-start": {"$value": "0"}, + "margin-block-end": {"$value": "0"}, + "padding-inline-start": {"$value": "0"}, + "grid-row-gap": {"$value": "8px"}, + "grid-column-gap": {"$value": "32px"} } } } diff --git a/src/components/plugin-grid.tokens.json b/src/components/plugin-grid.tokens.json index 01f0aa9..1a4bacf 100644 --- a/src/components/plugin-grid.tokens.json +++ b/src/components/plugin-grid.tokens.json @@ -3,115 +3,115 @@ "plugin": { "header": { "margin-block-start": { - "value": "0" + "$value": "0" }, "margin-block-end": { - "value": "0" + "$value": "0" }, "margin-inline-start": { - "value": "0" + "$value": "0" }, "margin-inline-end": { - "value": "0" + "$value": "0" }, "padding-block-start": { - "value": "0" + "$value": "0" }, "padding-block-end": { - "value": "0" + "$value": "0" }, "padding-inline-start": { - "value": "0" + "$value": "0" }, "padding-inline-end": { - "value": "24px" + "$value": "24px" }, "font-family": { - "value": "{oip.typography.heading.font-family}" + "$value": "{oip.typography.heading.font-family}" }, "align-items": { - "value": "center" + "$value": "center" }, "word-break-mobile": { - "value": "normal" + "$value": "normal" }, "overflow-wrap-mobile": { - "value": "break-word" + "$value": "break-word" }, "indicator": { "notification-indicator-color": { - "value": "{oip.color.red-notification}" + "$value": "{oip.color.red-notification}" }, "notification-indicator-font-size": { - "value": "12px" + "$value": "12px" }, "notification-indicator-vertical-align": { - "value": "super" + "$value": "super" }, "display-inline": { - "value": "inline-block" + "$value": "inline-block" }, "overflow": { - "value": "visible" + "$value": "visible" }, "position": { - "value": "relative" + "$value": "relative" } }, "heading": { "color": { - "value": "{oip.color.fg-heading}" + "$value": "{oip.color.fg-heading}" }, "font-family": { - "value": "{oip.typography.heading.font-family}" + "$value": "{oip.typography.heading.font-family}" }, "margin-block-start": { - "value": "0" + "$value": "0" }, "margin-block-end": { - "value": "0" + "$value": "0" }, "margin-inline-start": { - "value": "0" + "$value": "0" }, "margin-inline-end": { - "value": "0" + "$value": "0" }, "padding-block-start": { - "value": "0" + "$value": "0" }, "padding-block-end": { - "value": "0" + "$value": "0" }, "padding-inline-start": { - "value": "0" + "$value": "0" }, "padding-inline-end": { - "value": "0" + "$value": "0" } } }, "grid": { "list-style-type": { - "value": "none" + "$value": "none" }, "margin-block-start": { - "value": "0" + "$value": "0" }, "margin-block-end": { - "value": "0" + "$value": "0" }, "padding-inline-start": { - "value": "0" + "$value": "0" }, "padding-inline-end": { - "value": "0" + "$value": "0" }, "row-gap": { - "value": "16px" + "$value": "16px" }, "column-gap": { - "value": "32px" + "$value": "32px" } } } diff --git a/src/components/unorderedlist-modifiers.tokens.json b/src/components/unorderedlist-modifiers.tokens.json index 4d895b0..f78b59b 100644 --- a/src/components/unorderedlist-modifiers.tokens.json +++ b/src/components/unorderedlist-modifiers.tokens.json @@ -4,12 +4,12 @@ "unordered-list": { "marker": { "content": { - "value": "none" + "$value": "none" } }, "nested": { - "margin-inline-start": {"value": "0"}, - "padding-inline-start": {"value": "16px"} + "margin-inline-start": {"$value": "0"}, + "padding-inline-start": {"$value": "16px"} } } } diff --git a/style-dictionary.config.json b/style-dictionary.config.json index 3c2a771..3404472 100644 --- a/style-dictionary.config.json +++ b/style-dictionary.config.json @@ -1,8 +1,15 @@ { - "source": ["./src/**/tokens.json", "./src/**/*.tokens.json"], + "source": [ + "./src/**/tokens.json", + "./src/**/*.tokens.json" + ], "platforms": { "css": { - "transforms": ["attribute/cti", "name/kebab", "color/hsl-4"], + "transforms": [ + "attribute/cti", + "name/kebab", + "color/hsl-4" + ], "buildPath": "dist/css/", "files": [ { @@ -16,7 +23,11 @@ ] }, "scss": { - "transforms": ["attribute/cti", "name/kebab", "color/hsl-4"], + "transforms": [ + "attribute/cti", + "name/kebab", + "color/hsl-4" + ], "buildPath": "dist/", "files": [ { From 6590cbdb525d496225324418e99893026f1dda29 Mon Sep 17 00:00:00 2001 From: Jiro Ghianni <118177951+jiromaykin@users.noreply.github.com> Date: Tue, 28 Apr 2026 18:00:35 +0200 Subject: [PATCH 2/2] PR#35 base new basis tokens on Figma export --- src/brand/openinwoner/color.tokens.json | 262 ++++++++---------- src/common/openinwoner/basis.tokens.json | 10 - src/common/openinwoner/color.tokens.json | 155 +++++++++++ src/common/openinwoner/layout.tokens.json | 95 ++++++- src/common/openinwoner/typography.tokens.json | 118 ++++++-- 5 files changed, 461 insertions(+), 179 deletions(-) delete mode 100644 src/common/openinwoner/basis.tokens.json create mode 100644 src/common/openinwoner/color.tokens.json diff --git a/src/brand/openinwoner/color.tokens.json b/src/brand/openinwoner/color.tokens.json index d1d69b4..aab838b 100644 --- a/src/brand/openinwoner/color.tokens.json +++ b/src/brand/openinwoner/color.tokens.json @@ -1,152 +1,128 @@ { "oip": { "color": { - "$type": "group", - "$description": "Globally tweak commonly used colors.", "primary": { - "$type": "color", - "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l))", - "$description": "The primary color #0065BD makes up a large part of the theme, it is used in buttons for example." - }, - "primary-h": { - "$type": "dimension", - "$value": "210", - "$description": "Primary color hue value" - }, - "primary-s": { - "$type": "dimension", - "$value": "100%", - "$description": "Primary color saturation value" - }, - "primary-l": { - "$type": "dimension", - "$value": "37%", - "$description": "Primary color lightness value" - }, - "primary-lighter": { - "$type": "color", - "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%))", - "$description": "Lighter version of primary color" - }, - "primary-darker": { - "$type": "color", - "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%))", - "$description": "Darker version of primary color" + "default": { + "$type": "color", + "$value": "#50388F", + "$description": "The primary color makes up a large part of the theme, it is used in buttons for example." + }, + "hover": { + "$type": "color", + "$value": "#3C296A", + "$description": "Darker version of primary color" + }, + "h": { "$type": "number", "$value": 258, "$description": "Primary color hue value" }, + "s": { "$type": "string", "$value": "43%", "$description": "Primary color saturation value" }, + "l": { "$type": "string", "$value": "38%", "$description": "Primary color lightness value" }, + "lighter": { + "$type": "color", + "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%))", + "$description": "Lighter version of primary color" + }, + "darker": { + "$type": "color", + "$value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%))", + "$description": "Darker version of primary color" + } }, "secondary": { - "$type": "color", - "$value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l))", - "$description": "The secondary color #006A0F compliments the primary color and serves as the default for text-links." - }, - "secondary-h": { - "$type": "dimension", - "$value": "207", - "$description": "Secondary color hue value" - }, - "secondary-s": { - "$type": "dimension", - "$value": "80%", - "$description": "Secondary color saturation value" - }, - "secondary-l": { - "$type": "dimension", - "$value": "35%", - "$description": "Secondary color lightness value" - }, - "secondary-darker": { - "$type": "color", - "$value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%))", - "$description": "Darker version of secondary color" + "default": { + "$type": "color", + "$value": "#8D5825", + "$description": "The secondary color compliments the primary color and serves as the default for text-links." + }, + "darker": { + "$type": "color", + "$value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%))", + "$description": "Darker version of secondary color" + }, + "h": { "$type": "number", "$value": 30, "$description": "Secondary color hue value" }, + "s": { "$type": "string", "$value": "60%", "$description": "Secondary color saturation value" }, + "l": { "$type": "string", "$value": "35%", "$description": "Secondary color lightness value" } }, "accent": { - "$type": "color", - "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l))", - "$description": "The accent color #E10019 is usually the main identity color for a municipality" - }, - "accent-h": { - "$type": "dimension", - "$value": "50", - "$description": "Accent color hue value" - }, - "accent-s": { - "$type": "dimension", - "$value": "94%", - "$description": "Accent color saturation value" - }, - "accent-l": { - "$type": "dimension", - "$value": "57%", - "$description": "Accent color lightness value" - }, - "accent-darker": { - "$type": "color", - "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%))", - "$description": "Darker version of accent color" - }, - "accent-lighter": { - "$type": "color", - "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%))", - "$description": "Lighter version of accent color" - }, - "info": { - "$type": "color", - "$value": "#2566A7", - "$description": "The dark blue text color for informational states and/or messages." - }, - "info-light": { - "$type": "color", - "$value": "#D5E6F6", - "$description": "The light blue background color for informational states and/or messages." - }, - "success": { - "$type": "color", - "$value": "#4A7746", - "$description": "The dark green text color for success states and/or messages." - }, - "success-light": { - "$type": "color", - "$value": "#ecf4ec", - "$description": "The light green background color for success states and/or messages." - }, - "warning": { - "$type": "color", - "$value": "#704000", - "$description": "The dark orange text color for warning states and/or messages." - }, - "warning-light": { - "$type": "color", - "$value": "#ffdcad", - "$description": "The light orange background color for warning states and/or messages." - }, - "danger": { - "$type": "color", - "$value": "#5c000f", - "$description": "The dark red text color for error/critical states and/or messages." - }, - "danger-h": { - "$type": "dimension", - "$value": "34", - "$description": "Danger color hue value" - }, - "danger-s": { - "$type": "dimension", - "$value": "100%", - "$description": "Danger color saturation value" - }, - "danger-l": { - "$type": "dimension", - "$value": "27%", - "$description": "Danger color lightness value" - }, - "danger-light": { - "$type": "color", - "$value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%))", - "$description": "The light red background color for error/critical states and/or messages." - }, - "danger-lightest": { - "$type": "color", - "$value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%))", - "$description": "Lightest version of danger color" + "default": { + "$type": "color", + "$value": "#00BECC", + "$description": "The accent color is usually the main identity color for a municipality." + }, + "darker": { + "$type": "color", + "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%))", + "$description": "Darker version of accent color" + }, + "lighter": { + "$type": "color", + "$value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%))", + "$description": "Lighter version of accent color" + }, + "h": { "$type": "number", "$value": 184, "$description": "Accent color hue value" }, + "s": { "$type": "string", "$value": "100%", "$description": "Accent color saturation value" }, + "l": { "$type": "string", "$value": "40%", "$description": "Accent color lightness value" } + }, + "alerts": { + "danger": { + "background": { + "$type": "color", + "$value": "#FFDCAD", + "$description": "The light orange background color for warning states and/or messages." + }, + "text": { + "$type": "color", + "$value": "#704000", + "$description": "The dark orange text color for warning states and/or messages." + } + }, + "success": { + "background": { + "$type": "color", + "$value": "#ECF4EC", + "$description": "The light green background color for success states and/or messages." + }, + "text": { + "$type": "color", + "$value": "#4A7746", + "$description": "The dark green text color for success states and/or messages." + } + }, + "error": { + "background": { + "$type": "color", + "$value": "#FFDBE1", + "$description": "The light red background color for error/critical states and/or messages." + }, + "text": { + "$type": "color", + "$value": "#5C000F", + "$description": "The dark red text color for error/critical states and/or messages." + }, + "h": { "$type": "number", "$value": 34, "$description": "Error color hue value" }, + "s": { "$type": "string", "$value": "100%", "$description": "Error color saturation value" }, + "l": { "$type": "string", "$value": "27%", "$description": "Error color lightness value" }, + "light": { + "$type": "color", + "$value": "hsl(var(--oip-color-alerts-error-h), var(--oip-color-alerts-error-s), calc(var(--oip-color-alerts-error-l) + 13%))", + "$description": "The light red background color for error/critical states and/or messages." + }, + "lightest": { + "$type": "color", + "$value": "hsl(var(--oip-color-alerts-error-h), var(--oip-color-alerts-error-s), calc(var(--oip-color-alerts-error-l) + 57%))", + "$description": "Lightest version of error color" + } + }, + "info": { + "background": { + "$type": "color", + "$value": "#EEF5FC", + "$description": "The light blue background color for informational states and/or messages." + }, + "text": { + "$type": "color", + "$value": "#2566A7", + "$description": "The dark blue text color for informational states and/or messages." + } + } }, "bg": { "$type": "color", @@ -212,6 +188,10 @@ "$type": "color", "$value": "#e50026", "$description": "The bright red color for notification badges and texts." + }, + "white": { + "$type": "color", + "$value": "#ffffff" } } } diff --git a/src/common/openinwoner/basis.tokens.json b/src/common/openinwoner/basis.tokens.json deleted file mode 100644 index e28d250..0000000 --- a/src/common/openinwoner/basis.tokens.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "basis": { - "document": { - "color": { - "$value": "#4b4b4b", - "$description": "Experimental setup for future Basis tokens colors, only for use with the NLDS Theme Wizard." - } - } - } -} diff --git a/src/common/openinwoner/color.tokens.json b/src/common/openinwoner/color.tokens.json new file mode 100644 index 0000000..4b6c6e2 --- /dev/null +++ b/src/common/openinwoner/color.tokens.json @@ -0,0 +1,155 @@ +{ + "basis": { + "color": { + "primary": { + "$type": "color", + "$value": "{oip.color.primary.default}", + "$description": "The primary brand color." + }, + "primary-hover": { + "$type": "color", + "$value": "{oip.color.primary.hover}", + "$description": "The primary brand color on hover." + }, + "secondary": { + "$type": "color", + "$value": "{oip.color.secondary.default}", + "$description": "The secondary brand color." + }, + "accent": { + "$type": "color", + "$value": "{oip.color.accent.default}", + "$description": "The accent brand color." + }, + "white": { + "$type": "color", + "$value": "{oip.color.white}" + }, + "bg": { + "$type": "color", + "$value": "{oip.color.bg}", + "$description": "Background color for the (main) user interface." + }, + "fg": { + "$type": "color", + "$value": "{oip.color.fg}", + "$description": "Blackish/gray-dark foreground color for the (main) user interface." + }, + "fg-lighter": { + "$type": "color", + "$value": "{oip.color.fg-lighter}", + "$description": "Blackish 90% gray foreground color for lighter text elements (eg date)." + }, + "fg-muted": { + "$type": "color", + "$value": "{oip.color.fg-muted}", + "$description": "Font/foreground color for non-actionable or less-important content." + }, + "fg-heading": { + "$type": "color", + "$value": "{oip.color.fg-heading}", + "$description": "Black foreground color for fully black elements, like headings." + }, + "fg-font-primary": { + "$type": "color", + "$value": "{oip.color.fg-font-primary}", + "$description": "White font color for texts inside primary buttons." + }, + "fg-font-secondary": { + "$type": "color", + "$value": "{oip.color.fg-font-secondary}", + "$description": "White font color for texts inside secondary buttons." + }, + "fg-font-accent": { + "$type": "color", + "$value": "{oip.color.fg-font-accent}", + "$description": "Dark gray font color for texts inside areas with a very light accent color as a light background-color." + }, + "border": { + "$type": "color", + "$value": "{oip.color.border}", + "$description": "Default color for borders." + }, + "gray": { + "$type": "color", + "$value": "{oip.color.gray}", + "$description": "Default 80% gray for borders." + }, + "gray-lighter": { + "$type": "color", + "$value": "{oip.color.gray-lighter}", + "$description": "Default light-gray for table text." + }, + "gray-lightest": { + "$type": "color", + "$value": "{oip.color.gray-lightest}", + "$description": "Very lightest gray for hover styles." + }, + "red-notification": { + "$type": "color", + "$value": "{oip.color.red-notification}", + "$description": "The bright red color for notification badges and texts." + }, + "alerts": { + "info": { + "background": { + "$type": "color", + "$value": "{oip.color.alerts.info.background}", + "$description": "The light blue background color for informational states and/or messages." + }, + "text": { + "$type": "color", + "$value": "{oip.color.alerts.info.text}", + "$description": "The dark blue text color for informational states and/or messages." + } + }, + "success": { + "background": { + "$type": "color", + "$value": "{oip.color.alerts.success.background}", + "$description": "The light green background color for success states and/or messages." + }, + "text": { + "$type": "color", + "$value": "{oip.color.alerts.success.text}", + "$description": "The dark green text color for success states and/or messages." + } + }, + "danger": { + "background": { + "$type": "color", + "$value": "{oip.color.alerts.danger.background}", + "$description": "The light orange background color for warning states and/or messages." + }, + "text": { + "$type": "color", + "$value": "{oip.color.alerts.danger.text}", + "$description": "The dark orange text color for warning states and/or messages." + } + }, + "error": { + "background": { + "$type": "color", + "$value": "{oip.color.alerts.error.background}", + "$description": "The light red background color for error/critical states and/or messages." + }, + "text": { + "$type": "color", + "$value": "{oip.color.alerts.error.text}", + "$description": "The dark red text color for error/critical states and/or messages." + }, + "light": { + "$type": "color", + "$value": "{oip.color.alerts.error.light}", + "$description": "The light red background color for error/critical states and/or messages." + }, + "lightest": { + "$type": "color", + "$value": "{oip.color.alerts.error.lightest}", + "$description": "Lightest version of error color." + } + } + } + } + } +} diff --git a/src/common/openinwoner/layout.tokens.json b/src/common/openinwoner/layout.tokens.json index 1db04f0..b07fac8 100644 --- a/src/common/openinwoner/layout.tokens.json +++ b/src/common/openinwoner/layout.tokens.json @@ -1,16 +1,89 @@ { - "oip": { - "layout": { - "bg": {"$value": "#FFFFFF"} + "basis": { + "space": { + "inline": { + "2xs": {"$type": "dimension", "$value": "1px"}, + "xs": {"$type": "dimension", "$value": "2px", "$description": "Formerly: tiny"}, + "sm": {"$type": "dimension", "$value": "4px", "$description": "Formerly: small"}, + "md": {"$type": "dimension", "$value": "8px", "$description": "Formerly: medium"}, + "lg": {"$type": "dimension", "$value": "12px"}, + "xl": {"$type": "dimension", "$value": "16px", "$description": "Formerly: large"}, + "2xl": {"$type": "dimension", "$value": "20px"}, + "3xl": {"$type": "dimension", "$value": "24px", "$description": "Formerly: extraLarge"}, + "4xl": {"$type": "dimension", "$value": "32px", "$description": "Formerly: giant"}, + "5xl": {"$type": "dimension", "$value": "48px"}, + "6xl": {"$type": "dimension", "$value": "64px"} + }, + "block": { + "2xs": {"$type": "dimension", "$value": "1px"}, + "xs": {"$type": "dimension", "$value": "2px", "$description": "Formerly: tiny"}, + "sm": {"$type": "dimension", "$value": "4px", "$description": "Formerly: small"}, + "md": {"$type": "dimension", "$value": "8px", "$description": "Formerly: medium"}, + "lg": {"$type": "dimension", "$value": "12px"}, + "xl": {"$type": "dimension", "$value": "16px", "$description": "Formerly: large"}, + "2xl": {"$type": "dimension", "$value": "20px"}, + "3xl": {"$type": "dimension", "$value": "24px", "$description": "Formerly: extraLarge"}, + "4xl": {"$type": "dimension", "$value": "32px", "$description": "Formerly: giant"}, + "5xl": {"$type": "dimension", "$value": "48px"}, + "6xl": {"$type": "dimension", "$value": "64px"} + }, + "column": { + "2xs": {"$type": "dimension", "$value": "1px"}, + "xs": {"$type": "dimension", "$value": "2px", "$description": "Formerly: tiny"}, + "sm": {"$type": "dimension", "$value": "4px", "$description": "Formerly: small"}, + "md": {"$type": "dimension", "$value": "8px", "$description": "Formerly: medium"}, + "lg": {"$type": "dimension", "$value": "12px"}, + "xl": {"$type": "dimension", "$value": "16px", "$description": "Formerly: large"}, + "2xl": {"$type": "dimension", "$value": "20px"}, + "3xl": {"$type": "dimension", "$value": "24px", "$description": "Formerly: extraLarge"}, + "4xl": {"$type": "dimension", "$value": "32px", "$description": "Formerly: giant"}, + "5xl": {"$type": "dimension", "$value": "64px"}, + "6xl": {"$type": "dimension", "$value": "160px"} + }, + "row": { + "2xs": {"$type": "dimension", "$value": "1px"}, + "xs": {"$type": "dimension", "$value": "2px", "$description": "Formerly: tiny"}, + "sm": {"$type": "dimension", "$value": "4px", "$description": "Formerly: small"}, + "md": {"$type": "dimension", "$value": "8px", "$description": "Formerly: medium"}, + "lg": {"$type": "dimension", "$value": "12px"}, + "xl": {"$type": "dimension", "$value": "16px", "$description": "Formerly: large"}, + "2xl": {"$type": "dimension", "$value": "20px"}, + "3xl": {"$type": "dimension", "$value": "24px", "$description": "Formerly: extraLarge"}, + "4xl": {"$type": "dimension", "$value": "32px", "$description": "Formerly: giant"}, + "5xl": {"$type": "dimension", "$value": "64px"}, + "6xl": {"$type": "dimension", "$value": "160px"} + } }, - "spacing": { - "tiny": {"$value": "2px"}, - "small": {"$value": "4px"}, - "medium": {"$value": "8px"}, - "large": {"$value": "16px"}, - "extraLarge": {"$value": "24px"}, - "giant": {"$value": "32px"}, - "mega": {"$value": "80px"} + "size": { + "5xs": {"$type": "dimension", "$value": "2px", "$description": "Formerly: tiny"}, + "4xs": {"$type": "dimension", "$value": "4px", "$description": "Formerly: small"}, + "3xs": {"$type": "dimension", "$value": "8px", "$description": "Formerly: medium"}, + "2xs": {"$type": "dimension", "$value": "16px", "$description": "Formerly: large"}, + "xs": {"$type": "dimension", "$value": "24px", "$description": "Formerly: extraLarge"}, + "sm": {"$type": "dimension", "$value": "32px", "$description": "Formerly: giant"}, + "md": {"$type": "dimension", "$value": "48px"}, + "lg": {"$type": "dimension", "$value": "64px"}, + "xl": {"$type": "dimension", "$value": "96px"}, + "2xl": {"$type": "dimension", "$value": "160px"}, + "5xl": {"$type": "dimension", "$value": "40px"} + }, + "border-radius": { + "sm": {"$type": "dimension", "$value": "0px"}, + "md": {"$type": "dimension", "$value": "3px"}, + "lg": {"$type": "dimension", "$value": "8px"}, + "round": {"$type": "dimension", "$value": "999px"} + }, + "border-width": { + "sm": {"$type": "dimension", "$value": "0.0625rem"}, + "md": {"$type": "dimension", "$value": "0.125rem"}, + "lg": {"$type": "dimension", "$value": "0.25rem"} + }, + "page": { + "max-inline-size": {"$type": "dimension", "$value": "1140px"} + }, + "pointer-target": { + "min-block-size": {"$type": "dimension", "$value": "3rem"}, + "min-inline-size": {"$type": "dimension", "$value": "3rem"} } } } diff --git a/src/common/openinwoner/typography.tokens.json b/src/common/openinwoner/typography.tokens.json index 985197b..f47db2f 100644 --- a/src/common/openinwoner/typography.tokens.json +++ b/src/common/openinwoner/typography.tokens.json @@ -1,26 +1,110 @@ { - "oip": { - "heading": { - "fg": {"$value": "{oip.color.fg}"}, - "font-family": {"$value": "\"Heading\", \"Arial\", sans-serif"} - }, + "basis": { "text": { - "margin": {"$value": "20px"}, - "font-size": {"$value": "16px"}, - "big": { - "font-size": {"$value": "24px"} + "font-family": { + "default": { + "$type": "fontFamilies", + "$value": "\"Body\", \"Arial\", sans-serif", + "$description": "Formerly: typography.sans-serif.font-family" + }, + "monospace": { + "$type": "fontFamilies", + "$value": "\"Body\", \"Arial\", sans-serif" + } + }, + "font-weight": { + "default": { + "$type": "fontWeights", + "$value": "Regular" + }, + "medium": { + "$type": "fontWeights", + "$value": "Medium" + }, + "bold": { + "$type": "fontWeights", + "$value": "Bold" + } }, - "small": { - "font-size": {"$value": "0.875rem"} + "font-size": { + "sm": { + "$type": "fontSizes", + "$value": "0.875rem", + "$description": "Formerly: text.small.font-size" + }, + "md": { + "$type": "fontSizes", + "$value": "1rem", + "$description": "Formerly: text.font-size (16px). Default body text size." + }, + "lg": { + "$type": "fontSizes", + "$value": "1.25rem" + }, + "xl": { + "$type": "fontSizes", + "$value": "1.5rem", + "$description": "Formerly: text.big.font-size (24px)" + }, + "2xl": { + "$type": "fontSizes", + "$value": "2rem" + }, + "3xl": { + "$type": "fontSizes", + "$value": "2.5rem" + }, + "4xl": { + "$type": "fontSizes", + "$value": "3rem" + } }, - "line-height": {"$value": "24px"} + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "150%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%", + "$description": "Formerly: text.line-height (24px). Default body line-height." + }, + "lg": { + "$type": "lineHeights", + "$value": "125%" + }, + "xl": { + "$type": "lineHeights", + "$value": "125%" + }, + "2xl": { + "$type": "lineHeights", + "$value": "125%" + }, + "3xl": { + "$type": "lineHeights", + "$value": "125%" + }, + "4xl": { + "$type": "lineHeights", + "$value": "110%" + } + } }, - "typography": { - "sans-serif": { - "font-family": {"$value": "\"Body\", \"Arial\", sans-serif"} + "heading": { + "color": { + "$type": "color", + "$value": "{oip.color.fg}", + "$description": "Formerly: heading.fg" + }, + "font-family": { + "$type": "fontFamilies", + "$value": "\"Heading\", \"Arial\", sans-serif", + "$description": "Formerly: typography.heading.font-family / heading.font-family" }, - "heading": { - "font-family": {"$value": "\"Heading\", \"Arial\", sans-serif"} + "font-weight": { + "$type": "fontWeights", + "$value": "Bold" } } }