From f5a94272f6cdfc50f9d6d918e68aa9b829eca68e Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 1 Oct 2024 10:57:35 +0100 Subject: [PATCH 01/41] added `build:watch` script to `tokens` package added missing dependency `nodemon` --- packages/tokens/package.json | 4 +- yarn.lock | 1803 ++++++++++++++++++++++++++++++++-- 2 files changed, 1703 insertions(+), 104 deletions(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index b8482488e33..a8bdf0f89f3 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -20,7 +20,8 @@ "scripts": { "typecheck": "yarn tsc --noEmit", "lint": "yarn eslint --quiet --ext .js,.ts", - "build": "tsx ./scripts/build" + "build": "tsx ./scripts/build", + "build:watch": "nodemon --watch './src/*' --ext 'json' --exec 'tsx ./scripts/build'" }, "devDependencies": { "@types/fs-extra": "^11.0.3", @@ -33,6 +34,7 @@ "eslint": "^8.57.0", "fs-extra": "^11.1.1", "lodash-es": "^4.17.21", + "nodemon": "^3.1.7", "path": "^0.12.7", "prettier": "^3.3.2", "style-dictionary": "^4.2.0", diff --git a/yarn.lock b/yarn.lock index 20e9533d12a..1fa3c72646a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -73,6 +73,13 @@ __metadata: languageName: node linkType: hard +"@algolia/cache-common@npm:4.22.1": + version: 4.22.1 + resolution: "@algolia/cache-common@npm:4.22.1" + checksum: 10/b57b195fdf75ca53417541fd03b48fa2351c18261f21ddc462ca4e76adef4750a35df9db707e9acc9f7a67fb465757d7f254423b4f8b0661056e4d2ec07392c1 + languageName: node + linkType: hard + "@algolia/cache-common@npm:4.24.0": version: 4.24.0 resolution: "@algolia/cache-common@npm:4.24.0" @@ -112,6 +119,16 @@ __metadata: languageName: node linkType: hard +"@algolia/client-common@npm:4.22.1": + version: 4.22.1 + resolution: "@algolia/client-common@npm:4.22.1" + dependencies: + "@algolia/requester-common": "npm:4.22.1" + "@algolia/transporter": "npm:4.22.1" + checksum: 10/aac4af2a11e6cda26b57c81c666712a08175eb2b76fdaf50d5767b74f5e8c95ba667007fd4a8de908665af36636fc01546ff13ad4bdb9c44bdf50feef15f541a + languageName: node + linkType: hard + "@algolia/client-common@npm:4.24.0": version: 4.24.0 resolution: "@algolia/client-common@npm:4.24.0" @@ -133,7 +150,7 @@ __metadata: languageName: node linkType: hard -"@algolia/client-search@npm:4.24.0, @algolia/client-search@npm:^4.22.0": +"@algolia/client-search@npm:4.24.0": version: 4.24.0 resolution: "@algolia/client-search@npm:4.24.0" dependencies: @@ -144,6 +161,24 @@ __metadata: languageName: node linkType: hard +"@algolia/client-search@npm:^4.22.0": + version: 4.22.1 + resolution: "@algolia/client-search@npm:4.22.1" + dependencies: + "@algolia/client-common": "npm:4.22.1" + "@algolia/requester-common": "npm:4.22.1" + "@algolia/transporter": "npm:4.22.1" + checksum: 10/d67fae7e53f1c6515a3fc6cdf64d59e690f12e2bdbff4e44b074cd8e8f180c63a267a5f30eceecfe5d5c451871bcdafb8e82760f9af1a17a506d228a686e3112 + languageName: node + linkType: hard + +"@algolia/logger-common@npm:4.22.1": + version: 4.22.1 + resolution: "@algolia/logger-common@npm:4.22.1" + checksum: 10/3ac5430f73e8eabb4e7561b271d38151fb7f128491437c202dac3d54f7c3a83ebc96818532746422ea4abdf9d68a6ccb716dc8b97f69101ff642afaff12057e5 + languageName: node + linkType: hard + "@algolia/logger-common@npm:4.24.0": version: 4.24.0 resolution: "@algolia/logger-common@npm:4.24.0" @@ -188,6 +223,13 @@ __metadata: languageName: node linkType: hard +"@algolia/requester-common@npm:4.22.1": + version: 4.22.1 + resolution: "@algolia/requester-common@npm:4.22.1" + checksum: 10/115ebd0e7507c0f20bdd362eacf291b501c991d704158cf21825c733950064fc7f88b83f25b866e17137af1991d59453e92253408834d1b6ae0817cba4755b0d + languageName: node + linkType: hard + "@algolia/requester-common@npm:4.24.0": version: 4.24.0 resolution: "@algolia/requester-common@npm:4.24.0" @@ -204,6 +246,17 @@ __metadata: languageName: node linkType: hard +"@algolia/transporter@npm:4.22.1": + version: 4.22.1 + resolution: "@algolia/transporter@npm:4.22.1" + dependencies: + "@algolia/cache-common": "npm:4.22.1" + "@algolia/logger-common": "npm:4.22.1" + "@algolia/requester-common": "npm:4.22.1" + checksum: 10/cdf43c7f4dc8447da47b30dee28b26e7871ec995606877bcbc20cc867a616c1856e78ed0a004c49ccbc752a5e5cf4df06f66f6e960f8823b7373bf5d276c756c + languageName: node + linkType: hard + "@algolia/transporter@npm:4.24.0": version: 4.24.0 resolution: "@algolia/transporter@npm:4.24.0" @@ -236,6 +289,26 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/code-frame@npm:7.24.2" + dependencies: + "@babel/highlight": "npm:^7.24.2" + picocolors: "npm:^1.0.0" + checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590 + languageName: node + linkType: hard + +"@babel/code-frame@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/code-frame@npm:7.24.7" + dependencies: + "@babel/highlight": "npm:^7.24.7" + picocolors: "npm:^1.0.0" + checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.9, @babel/compat-data@npm:^7.26.0": version: 7.26.2 resolution: "@babel/compat-data@npm:7.26.2" @@ -243,7 +316,74 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:>=7.2.2, @babel/core@npm:^7.0.0, @babel/core@npm:^7.1.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.10, @babel/core@npm:^7.14.5, @babel/core@npm:^7.16.10, @babel/core@npm:^7.16.7, @babel/core@npm:^7.23.6, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.7, @babel/core@npm:^7.26.0, @babel/core@npm:^7.3.4": +"@babel/compat-data@npm:^7.23.5": + version: 7.23.5 + resolution: "@babel/compat-data@npm:7.23.5" + checksum: 10/088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736 + languageName: node + linkType: hard + +"@babel/compat-data@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/compat-data@npm:7.24.7" + checksum: 10/6edc09152ca51a22c33741c441f33f9475598fa59edc53369edb74b49f4ea4bef1281f5b0ed2b9b67fb66faef2da2069e21c4eef83405d8326e524b301f4e7e2 + languageName: node + linkType: hard + +"@babel/compat-data@npm:^7.25.2": + version: 7.25.4 + resolution: "@babel/compat-data@npm:7.25.4" + checksum: 10/d37a8936cc355a9ca3050102e03d179bdae26bd2e5c99a977637376c192b23637a039795f153c849437a086727628c9860e2c6af92d7151396e2362c09176337 + languageName: node + linkType: hard + +"@babel/core@npm:>=7.2.2, @babel/core@npm:^7.0.0, @babel/core@npm:^7.1.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.10, @babel/core@npm:^7.14.5, @babel/core@npm:^7.16.10, @babel/core@npm:^7.16.7, @babel/core@npm:^7.3.4": + version: 7.24.5 + resolution: "@babel/core@npm:7.24.5" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.2" + "@babel/generator": "npm:^7.24.5" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.24.5" + "@babel/helpers": "npm:^7.24.5" + "@babel/parser": "npm:^7.24.5" + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.5" + "@babel/types": "npm:^7.24.5" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/b0d02c51f39cc4c6f8fcaab7052d17dea63aab36d7e2567bfbad074e5a027df737ebcaf3029c3a659bc719bbac806311c2e8786be1d686abd093c48a6068395c + languageName: node + linkType: hard + +"@babel/core@npm:^7.23.6": + version: 7.25.2 + resolution: "@babel/core@npm:7.25.2" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.7" + "@babel/generator": "npm:^7.25.0" + "@babel/helper-compilation-targets": "npm:^7.25.2" + "@babel/helper-module-transforms": "npm:^7.25.2" + "@babel/helpers": "npm:^7.25.0" + "@babel/parser": "npm:^7.25.0" + "@babel/template": "npm:^7.25.0" + "@babel/traverse": "npm:^7.25.2" + "@babel/types": "npm:^7.25.2" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/0d6ec10ff430df66f654c089d6f7ef1d9bed0c318ac257ad5f0dfa0caa45666011828ae75f998bcdb279763e892b091b2925d0bc483299e61649d2c7a2245e33 + languageName: node + linkType: hard + +"@babel/core@npm:^7.23.9, @babel/core@npm:^7.26.0": version: 7.26.0 resolution: "@babel/core@npm:7.26.0" dependencies: @@ -266,7 +406,30 @@ __metadata: languageName: node linkType: hard -"@babel/eslint-parser@npm:^7.23.10, @babel/eslint-parser@npm:^7.24.7": +"@babel/core@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/core@npm:7.24.7" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.7" + "@babel/generator": "npm:^7.24.7" + "@babel/helper-compilation-targets": "npm:^7.24.7" + "@babel/helper-module-transforms": "npm:^7.24.7" + "@babel/helpers": "npm:^7.24.7" + "@babel/parser": "npm:^7.24.7" + "@babel/template": "npm:^7.24.7" + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/ef8cc1afa3ccecee6d1f5660c487ccc2a3f25106830ea9040e80ef4b2092e053607ee4ddd03493e4f7ef2f9967a956ca53b830d54c5bee738eeb58cce679dd4a + languageName: node + linkType: hard + +"@babel/eslint-parser@npm:^7.23.10": version: 7.25.9 resolution: "@babel/eslint-parser@npm:7.25.9" dependencies: @@ -280,6 +443,56 @@ __metadata: languageName: node linkType: hard +"@babel/eslint-parser@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/eslint-parser@npm:7.24.7" + dependencies: + "@nicolo-ribaudo/eslint-scope-5-internals": "npm:5.1.1-v1" + eslint-visitor-keys: "npm:^2.1.0" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.11.0 + eslint: ^7.5.0 || ^8.0.0 || ^9.0.0 + checksum: 10/4d7f1704cf3cb868404375298ff066603f1b27bb92a9011452d7eadcdc79c97ccd5f2202eca66d811d84e5d4466a1fb1cc7ceebed51fb0c71fb911050359b02b + languageName: node + linkType: hard + +"@babel/generator@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/generator@npm:7.24.5" + dependencies: + "@babel/types": "npm:^7.24.5" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/7a3782f1d2f824025a538444a0fce44f5b30a7b013984279561bcb3450eec91a41526533fd0b25b1a6fde627bebd0e645c0ea2aa907cc15c7f3da2d9eb71f069 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/generator@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/c71d24a4b41b19c10d2f2eb819f27d4cf94220e2322f7c8fed8bfbbb115b2bebbdd6dc1f27dac78a175e90604def58d763af87e0fa81ce4ab1582858162cf768 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.25.0, @babel/generator@npm:^7.25.6": + version: 7.25.6 + resolution: "@babel/generator@npm:7.25.6" + dependencies: + "@babel/types": "npm:^7.25.6" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/541e4fbb6ea7806f44232d70f25bf09dee9a57fe43d559e375536870ca5261ebb4647fec3af40dcbb3325ea2a49aff040e12a4e6f88609eaa88f10c4e27e31f8 + languageName: node + linkType: hard + "@babel/generator@npm:^7.25.9, @babel/generator@npm:^7.26.0, @babel/generator@npm:^7.7.2": version: 7.26.2 resolution: "@babel/generator@npm:7.26.2" @@ -302,6 +515,24 @@ __metadata: languageName: node linkType: hard +"@babel/helper-annotate-as-pure@npm:^7.22.5": + version: 7.22.5 + resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" + dependencies: + "@babel/types": "npm:^7.22.5" + checksum: 10/53da330f1835c46f26b7bf4da31f7a496dee9fd8696cca12366b94ba19d97421ce519a74a837f687749318f94d1a37f8d1abcbf35e8ed22c32d16373b2f6198d + languageName: node + linkType: hard + +"@babel/helper-annotate-as-pure@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-annotate-as-pure@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/a9017bfc1c4e9f2225b967fbf818004703de7cf29686468b54002ffe8d6b56e0808afa20d636819fcf3a34b89ba72f52c11bdf1d69f303928ee10d92752cad95 + languageName: node + linkType: hard + "@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.25.9" @@ -325,6 +556,45 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/helper-compilation-targets@npm:7.23.6" + dependencies: + "@babel/compat-data": "npm:^7.23.5" + "@babel/helper-validator-option": "npm:^7.23.5" + browserslist: "npm:^4.22.2" + lru-cache: "npm:^5.1.1" + semver: "npm:^6.3.1" + checksum: 10/05595cd73087ddcd81b82d2f3297aac0c0422858dfdded43d304786cf680ec33e846e2317e6992d2c964ee61d93945cbf1fa8ec80b55aee5bfb159227fb02cb9 + languageName: node + linkType: hard + +"@babel/helper-compilation-targets@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-compilation-targets@npm:7.24.7" + dependencies: + "@babel/compat-data": "npm:^7.24.7" + "@babel/helper-validator-option": "npm:^7.24.7" + browserslist: "npm:^4.22.2" + lru-cache: "npm:^5.1.1" + semver: "npm:^6.3.1" + checksum: 10/8f8bc89af70a606ccb208513aa25d83e19b88f91b64a33174f7701a9479e67ddbb0a9c89033265070375cd24e690b93380b3a3ea11e4b3a711d742f0f4699ee7 + languageName: node + linkType: hard + +"@babel/helper-compilation-targets@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/helper-compilation-targets@npm:7.25.2" + dependencies: + "@babel/compat-data": "npm:^7.25.2" + "@babel/helper-validator-option": "npm:^7.24.8" + browserslist: "npm:^4.23.1" + lru-cache: "npm:^5.1.1" + semver: "npm:^6.3.1" + checksum: 10/eccb2d75923d2d4d596f9ff64716e8664047c4192f1b44c7d5c07701d4a3498ac2587a72ddae1046e65a501bc630eb7df4557958b08ec2dcf5b4a264a052f111 + languageName: node + linkType: hard + "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.25.9, @babel/helper-create-class-features-plugin@npm:^7.5.5": version: 7.25.9 resolution: "@babel/helper-create-class-features-plugin@npm:7.25.9" @@ -342,6 +612,44 @@ __metadata: languageName: node linkType: hard +"@babel/helper-create-class-features-plugin@npm:^7.24.1": + version: 7.24.5 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.5" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-member-expression-to-functions": "npm:^7.24.5" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + "@babel/helper-replace-supers": "npm:^7.24.1" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.24.5" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/9f65cf44ff838dae2a51ba7fdca1a27cc6eb7c0589e2446e807f7e8dc18e9866775f6e7a209d4f1d25bfed265e450ea338ca6c3570bc11a77fbfe683694130f3 + languageName: node + linkType: hard + +"@babel/helper-create-class-features-plugin@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.7" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.24.7" + "@babel/helper-environment-visitor": "npm:^7.24.7" + "@babel/helper-function-name": "npm:^7.24.7" + "@babel/helper-member-expression-to-functions": "npm:^7.24.7" + "@babel/helper-optimise-call-expression": "npm:^7.24.7" + "@babel/helper-replace-supers": "npm:^7.24.7" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.24.7" + "@babel/helper-split-export-declaration": "npm:^7.24.7" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/8ecb1c2acc808e1e0c21dccc7ea6899de9a140cb1856946800176b4784de6fccd575661fbff7744bb895d01aa6956ce963446b8577c4c2334293ba5579d5cdb9 + languageName: node + linkType: hard + "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.25.9" @@ -370,6 +678,88 @@ __metadata: languageName: node linkType: hard +"@babel/helper-environment-visitor@npm:^7.22.20": + version: 7.22.20 + resolution: "@babel/helper-environment-visitor@npm:7.22.20" + checksum: 10/d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69 + languageName: node + linkType: hard + +"@babel/helper-environment-visitor@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-environment-visitor@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/079d86e65701b29ebc10baf6ed548d17c19b808a07aa6885cc141b690a78581b180ee92b580d755361dc3b16adf975b2d2058b8ce6c86675fcaf43cf22f2f7c6 + languageName: node + linkType: hard + +"@babel/helper-function-name@npm:^7.23.0": + version: 7.23.0 + resolution: "@babel/helper-function-name@npm:7.23.0" + dependencies: + "@babel/template": "npm:^7.22.15" + "@babel/types": "npm:^7.23.0" + checksum: 10/7b2ae024cd7a09f19817daf99e0153b3bf2bc4ab344e197e8d13623d5e36117ed0b110914bc248faa64e8ccd3e97971ec7b41cc6fd6163a2b980220c58dcdf6d + languageName: node + linkType: hard + +"@babel/helper-function-name@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-function-name@npm:7.24.7" + dependencies: + "@babel/template": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/2ceb3d9b2b35a0fc4100fc06ed7be3bc38f03ff0bf128ff0edbc0cc7dd842967b1496fc70b5c616c747d7711c2b87e7d025c8888f48740631d6148a9d3614f85 + languageName: node + linkType: hard + +"@babel/helper-hoist-variables@npm:^7.22.5": + version: 7.22.5 + resolution: "@babel/helper-hoist-variables@npm:7.22.5" + dependencies: + "@babel/types": "npm:^7.22.5" + checksum: 10/394ca191b4ac908a76e7c50ab52102669efe3a1c277033e49467913c7ed6f7c64d7eacbeabf3bed39ea1f41731e22993f763b1edce0f74ff8563fd1f380d92cc + languageName: node + linkType: hard + +"@babel/helper-hoist-variables@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-hoist-variables@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/6cfdcf2289cd12185dcdbdf2435fa8d3447b797ac75851166de9fc8503e2fd0021db6baf8dfbecad3753e582c08e6a3f805c8d00cbed756060a877d705bd8d8d + languageName: node + linkType: hard + +"@babel/helper-member-expression-to-functions@npm:^7.23.0": + version: 7.23.0 + resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0" + dependencies: + "@babel/types": "npm:^7.23.0" + checksum: 10/325feb6e200478c8cd6e10433fabe993a7d3315cc1a2a457e45514a5f95a73dff4c69bea04cc2daea0ffe72d8ed85d504b3f00b2e0767b7d4f5ae25fec9b35b2 + languageName: node + linkType: hard + +"@babel/helper-member-expression-to-functions@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/helper-member-expression-to-functions@npm:7.24.5" + dependencies: + "@babel/types": "npm:^7.24.5" + checksum: 10/4d0e0cab8af96fc22ce78ea4013fcbe130b98292d4357590a3f113cb0d830b360ebdc5a156bd0edce151e90eddfee39a106c501c88d1b6f48efc7396cacd038d + languageName: node + linkType: hard + +"@babel/helper-member-expression-to-functions@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-member-expression-to-functions@npm:7.24.7" + dependencies: + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/d990752aaff311aba0ca61539e1776c5ba2818836403f9bafac849deb4cd24c082cbde5f23e490b7f3614c95ff67f8d75fa5e2f14cb00586a72c96c158e1127b + languageName: node + linkType: hard + "@babel/helper-member-expression-to-functions@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-member-expression-to-functions@npm:7.25.9" @@ -390,6 +780,69 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/helper-module-imports@npm:7.24.3" + dependencies: + "@babel/types": "npm:^7.24.0" + checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499 + languageName: node + linkType: hard + +"@babel/helper-module-imports@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-module-imports@npm:7.24.7" + dependencies: + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770 + languageName: node + linkType: hard + +"@babel/helper-module-transforms@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/helper-module-transforms@npm:7.24.5" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-module-imports": "npm:^7.24.3" + "@babel/helper-simple-access": "npm:^7.24.5" + "@babel/helper-split-export-declaration": "npm:^7.24.5" + "@babel/helper-validator-identifier": "npm:^7.24.5" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/1a91e8abc2f427f8273ce3b99ef7b9c013eb3628221428553e0d4bc9c6db2e73bc4fc1b8535bd258544936accab9380e0d095f2449f913cad650ddee744b2124 + languageName: node + linkType: hard + +"@babel/helper-module-transforms@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-module-transforms@npm:7.24.7" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.24.7" + "@babel/helper-module-imports": "npm:^7.24.7" + "@babel/helper-simple-access": "npm:^7.24.7" + "@babel/helper-split-export-declaration": "npm:^7.24.7" + "@babel/helper-validator-identifier": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/4f2b232bf6d1be8d3a72b084a2a7ac1b0b93ea85717411a11ae1fb6375d4392019e781d8cc155789e649a2caa7eec378dd1404210603d6d4230f042c5feacffb + languageName: node + linkType: hard + +"@babel/helper-module-transforms@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/helper-module-transforms@npm:7.25.2" + dependencies: + "@babel/helper-module-imports": "npm:^7.24.7" + "@babel/helper-simple-access": "npm:^7.24.7" + "@babel/helper-validator-identifier": "npm:^7.24.7" + "@babel/traverse": "npm:^7.25.2" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/a3bcf7815f3e9d8b205e0af4a8d92603d685868e45d119b621357e274996bf916216bb95ab5c6a60fde3775b91941555bf129d608e3d025b04f8aac84589f300 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.25.9, @babel/helper-module-transforms@npm:^7.26.0": version: 7.26.0 resolution: "@babel/helper-module-transforms@npm:7.26.0" @@ -403,6 +856,24 @@ __metadata: languageName: node linkType: hard +"@babel/helper-optimise-call-expression@npm:^7.22.5": + version: 7.22.5 + resolution: "@babel/helper-optimise-call-expression@npm:7.22.5" + dependencies: + "@babel/types": "npm:^7.22.5" + checksum: 10/c70ef6cc6b6ed32eeeec4482127e8be5451d0e5282d5495d5d569d39eb04d7f1d66ec99b327f45d1d5842a9ad8c22d48567e93fc502003a47de78d122e355f7c + languageName: node + linkType: hard + +"@babel/helper-optimise-call-expression@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-optimise-call-expression@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/da7a7f2d1bb1be4cffd5fa820bd605bc075c7dd014e0458f608bb6f34f450fe9412c8cea93e788227ab396e0e02c162d7b1db3fbcb755a6360e354c485d61df0 + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-optimise-call-expression@npm:7.25.9" @@ -412,7 +883,28 @@ __metadata: languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.8.0": +"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0": + version: 7.22.5 + resolution: "@babel/helper-plugin-utils@npm:7.22.5" + checksum: 10/ab220db218089a2aadd0582f5833fd17fa300245999f5f8784b10f5a75267c4e808592284a29438a0da365e702f05acb369f99e1c915c02f9f9210ec60eab8ea + languageName: node + linkType: hard + +"@babel/helper-plugin-utils@npm:^7.24.0": + version: 7.24.5 + resolution: "@babel/helper-plugin-utils@npm:7.24.5" + checksum: 10/6e11ca5da73e6bd366848236568c311ac10e433fc2034a6fe6243af28419b07c93b4386f87bbc940aa058b7c83f370ef58f3b0fd598106be040d21a3d1c14276 + languageName: node + linkType: hard + +"@babel/helper-plugin-utils@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-plugin-utils@npm:7.24.7" + checksum: 10/dad51622f0123fdba4e2d40a81a6b7d6ef4b1491b2f92fd9749447a36bde809106cf117358705057a2adc8fd73d5dc090222e0561b1213dae8601c8367f5aac8 + languageName: node + linkType: hard + +"@babel/helper-plugin-utils@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-plugin-utils@npm:7.25.9" checksum: 10/e347d87728b1ab10b6976d46403941c8f9008c045ea6d99997a7ffca7b852dc34b6171380f7b17edf94410e0857ff26f3a53d8618f11d73744db86e8ca9b8c64 @@ -432,6 +924,32 @@ __metadata: languageName: node linkType: hard +"@babel/helper-replace-supers@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/helper-replace-supers@npm:7.24.1" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1 + languageName: node + linkType: hard + +"@babel/helper-replace-supers@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-replace-supers@npm:7.24.7" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.24.7" + "@babel/helper-member-expression-to-functions": "npm:^7.24.7" + "@babel/helper-optimise-call-expression": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/18b7c3709819d008a14953e885748f3e197537f131d8f7ae095fec245506d854ff40b236edb1754afb6467f795aa90ae42a1d961a89557702249bacfc3fdad19 + languageName: node + linkType: hard + "@babel/helper-replace-supers@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-replace-supers@npm:7.25.9" @@ -445,6 +963,25 @@ __metadata: languageName: node linkType: hard +"@babel/helper-simple-access@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/helper-simple-access@npm:7.24.5" + dependencies: + "@babel/types": "npm:^7.24.5" + checksum: 10/db8768a16592faa1bde9061cac3d903bdbb2ddb2a7e9fb73c5904daee1f1b1dc69ba4d249dc22c45885c0d4b54fd0356ee78e6d67a9a90330c7dd37e6cd3acff + languageName: node + linkType: hard + +"@babel/helper-simple-access@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-simple-access@npm:7.24.7" + dependencies: + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/5083e190186028e48fc358a192e4b93ab320bd016103caffcfda81302a13300ccce46c9cd255ae520c25d2a6a9b47671f93e5fe5678954a2329dc0a685465c49 + languageName: node + linkType: hard + "@babel/helper-simple-access@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-simple-access@npm:7.25.9" @@ -465,6 +1002,64 @@ __metadata: languageName: node linkType: hard +"@babel/helper-skip-transparent-expression-wrappers@npm:^7.22.5": + version: 7.22.5 + resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.22.5" + dependencies: + "@babel/types": "npm:^7.22.5" + checksum: 10/1012ef2295eb12dc073f2b9edf3425661e9b8432a3387e62a8bc27c42963f1f216ab3124228015c748770b2257b4f1fda882ca8fa34c0bf485e929ae5bc45244 + languageName: node + linkType: hard + +"@babel/helper-skip-transparent-expression-wrappers@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.24.7" + dependencies: + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/784a6fdd251a9a7e42ccd04aca087ecdab83eddc60fda76a2950e00eb239cc937d3c914266f0cc476298b52ac3f44ffd04c358e808bd17552a7e008d75494a77 + languageName: node + linkType: hard + +"@babel/helper-split-export-declaration@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/helper-split-export-declaration@npm:7.24.5" + dependencies: + "@babel/types": "npm:^7.24.5" + checksum: 10/84777b6304ef0fe6501038985b61aaa118082688aa54eca8265f14f3ae2e01adf137e9111f4eb9870e0e9bc23901e0b8859bb2a9e4362ddf89d05e1c409c2422 + languageName: node + linkType: hard + +"@babel/helper-split-export-declaration@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-split-export-declaration@npm:7.24.7" + dependencies: + "@babel/types": "npm:^7.24.7" + checksum: 10/ff04a3071603c87de0d6ee2540b7291ab36305b329bd047cdbb6cbd7db335a12f9a77af1cf708779f75f13c4d9af46093c00b34432e50b2411872c658d1a2e5e + languageName: node + linkType: hard + +"@babel/helper-string-parser@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/helper-string-parser@npm:7.24.1" + checksum: 10/04c0ede77b908b43e6124753b48bc485528112a9335f0a21a226bff1ace75bb6e64fab24c85cb4b1610ef3494dacd1cb807caeb6b79a7b36c43d48c289b35949 + languageName: node + linkType: hard + +"@babel/helper-string-parser@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-string-parser@npm:7.24.7" + checksum: 10/603d8d962bbe89907aa99a8f19a006759ab7b2464615f20a6a22e3e2e8375af37ddd0e5175c9e622e1c4b2d83607ffb41055a59d0ce34404502af30fde573a5c + languageName: node + linkType: hard + +"@babel/helper-string-parser@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-string-parser@npm:7.24.8" + checksum: 10/6d1bf8f27dd725ce02bdc6dffca3c95fb9ab8a06adc2edbd9c1c9d68500274230d1a609025833ed81981eff560045b6b38f7b4c6fb1ab19fc90e5004e3932535 + languageName: node + linkType: hard + "@babel/helper-string-parser@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-string-parser@npm:7.25.9" @@ -472,6 +1067,20 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-identifier@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/helper-validator-identifier@npm:7.24.5" + checksum: 10/38aaf6a64a0ea2e84766165b461deda3c24fd2173dff18419a2cc9e1ea1d3e709039aee94db29433a07011492717c80900a5eb564cdca7d137757c3c69e26898 + languageName: node + linkType: hard + +"@babel/helper-validator-identifier@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-validator-identifier@npm:7.24.7" + checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b + languageName: node + linkType: hard + "@babel/helper-validator-identifier@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-validator-identifier@npm:7.25.9" @@ -479,6 +1088,27 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-option@npm:^7.23.5": + version: 7.23.5 + resolution: "@babel/helper-validator-option@npm:7.23.5" + checksum: 10/537cde2330a8aede223552510e8a13e9c1c8798afee3757995a7d4acae564124fe2bf7e7c3d90d62d3657434a74340a274b3b3b1c6f17e9a2be1f48af29cb09e + languageName: node + linkType: hard + +"@babel/helper-validator-option@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-validator-option@npm:7.24.7" + checksum: 10/9689166bf3f777dd424c026841c8cd651e41b21242dbfd4569a53086179a3e744c8eddd56e9d10b54142270141c91581b53af0d7c00c82d552d2540e2a919f7e + languageName: node + linkType: hard + +"@babel/helper-validator-option@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-validator-option@npm:7.24.8" + checksum: 10/a52442dfa74be6719c0608fee3225bd0493c4057459f3014681ea1a4643cd38b68ff477fe867c4b356da7330d085f247f0724d300582fa4ab9a02efaf34d107c + languageName: node + linkType: hard + "@babel/helper-validator-option@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-validator-option@npm:7.25.9" @@ -497,6 +1127,37 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/helpers@npm:7.24.5" + dependencies: + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.5" + "@babel/types": "npm:^7.24.5" + checksum: 10/efd74325823c70a32aa9f5e263c8eb0a1f729f5e9ea168e3226fa92a10b1702593b76034812e9f7b560d6447f9cd446bad231d7086af842129c6596306300094 + languageName: node + linkType: hard + +"@babel/helpers@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helpers@npm:7.24.7" + dependencies: + "@babel/template": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/f7496f0d7a0b13ea86136ac2053371027125734170328215f8a90eac96fafaaae4e5398c0729bdadf23261c00582a31e14bc70113427653b718220641a917f9d + languageName: node + linkType: hard + +"@babel/helpers@npm:^7.25.0": + version: 7.25.6 + resolution: "@babel/helpers@npm:7.25.6" + dependencies: + "@babel/template": "npm:^7.25.0" + "@babel/types": "npm:^7.25.6" + checksum: 10/43abc8d017b754619aa189d05e2bdb54aaf44f03ec0439e89b3e7c180d538adb01ce9014a1689f632a7e8b17655c72bfac0a92268476eec708b41d3ba0a65296 + languageName: node + linkType: hard + "@babel/helpers@npm:^7.26.0": version: 7.26.0 resolution: "@babel/helpers@npm:7.26.0" @@ -507,7 +1168,40 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.14.0, @babel/parser@npm:^7.14.5, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2, @babel/parser@npm:^7.4.5": +"@babel/highlight@npm:^7.24.2": + version: 7.24.5 + resolution: "@babel/highlight@npm:7.24.5" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.24.5" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10/afde0403154ad69ecd58a98903058e776760444bf4d0363fb740a8596bc6278b72c5226637c4f6b3674d70acb1665207fe2fcecfe93a74f2f4ab033e89fd7e8c + languageName: node + linkType: hard + +"@babel/highlight@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/highlight@npm:7.24.7" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.24.7" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1 + languageName: node + linkType: hard + +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.14.0, @babel/parser@npm:^7.14.5, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.5, @babel/parser@npm:^7.4.5": + version: 7.24.5 + resolution: "@babel/parser@npm:7.24.5" + bin: + parser: ./bin/babel-parser.js + checksum: 10/f5ed1c5fd4b0045a364fb906f54fd30e2fff93a45069068b6d80d3ab2b64f5569c90fb41d39aff80fb7e925ca4d44917965a76776a3ca11924ec1fae3be5d1ea + languageName: node + linkType: hard + +"@babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2": version: 7.26.2 resolution: "@babel/parser@npm:7.26.2" dependencies: @@ -518,6 +1212,26 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/parser@npm:7.24.7" + bin: + parser: ./bin/babel-parser.js + checksum: 10/ef9ebce60e13db560ccc7af9235d460f6726bb7e23ae2d675098c1fc43d5249067be60d4118889dad33b1d4f85162cf66baf554719e1669f29bb20e71322568e + languageName: node + linkType: hard + +"@babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6": + version: 7.25.6 + resolution: "@babel/parser@npm:7.25.6" + dependencies: + "@babel/types": "npm:^7.25.6" + bin: + parser: ./bin/babel-parser.js + checksum: 10/830aab72116aa14eb8d61bfa8f9d69fc8f3a43d909ce993cb4350ae14d3af1a2f740a54410a22d821c48a253263643dfecbc094f9608e6a70ce9ff3c0bbfe91a + languageName: node + linkType: hard + "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.25.9": version: 7.25.9 resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.25.9" @@ -589,7 +1303,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-decorators@npm:^7.13.5, @babel/plugin-proposal-decorators@npm:^7.16.7, @babel/plugin-proposal-decorators@npm:^7.20.13, @babel/plugin-proposal-decorators@npm:^7.24.1": +"@babel/plugin-proposal-decorators@npm:^7.13.5, @babel/plugin-proposal-decorators@npm:^7.16.7, @babel/plugin-proposal-decorators@npm:^7.20.13": version: 7.25.9 resolution: "@babel/plugin-proposal-decorators@npm:7.25.9" dependencies: @@ -602,6 +1316,19 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-proposal-decorators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-proposal-decorators@npm:7.24.1" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-decorators": "npm:^7.24.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/cbc489ae3ebe5216a4d764a6d155591282e819b6b7436c4cffbb8f123515a1db9cc2f84259c36d558f896e8ff8526ebd28d3563fabb04347ae1964c476b44b9f + languageName: node + linkType: hard + "@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.1.0": version: 7.18.6 resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6" @@ -717,6 +1444,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-decorators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-decorators@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/6e70d64b6ce6843dd388740eef032c5a013b6b873e3a6ccdb41f342b91b49d4dac1ce5daac32f588c66815047ce00bab0785a8a45d724e6dce9f49bff01fb24e + languageName: node + linkType: hard + "@babel/plugin-syntax-flow@npm:^7.25.9": version: 7.26.0 resolution: "@babel/plugin-syntax-flow@npm:7.26.0" @@ -772,6 +1510,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-jsx@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-syntax-jsx@npm:7.24.7" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/a93516ae5b34868ab892a95315027d4e5e38e8bd1cfca6158f2974b0901cbb32bbe64ea10ad5b25f919ddc40c6d8113c4823372909c9c9922170c12b0b1acecb + languageName: node + linkType: hard + "@babel/plugin-syntax-jsx@npm:^7.25.9, @babel/plugin-syntax-jsx@npm:^7.7.2": version: 7.25.9 resolution: "@babel/plugin-syntax-jsx@npm:7.25.9" @@ -882,6 +1631,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-typescript@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-syntax-typescript@npm:7.24.7" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/2518cc06323f5673c93142935879c112fea0ee836dfa9a9ec744fc972fdeaf22a06fe631c23817562aaaddadf64626a4fbba98c300b3e2c828f48f0f1cca0ce0 + languageName: node + linkType: hard + "@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6" @@ -1191,6 +1951,19 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-modules-commonjs@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.7" + dependencies: + "@babel/helper-module-transforms": "npm:^7.24.7" + "@babel/helper-plugin-utils": "npm:^7.24.7" + "@babel/helper-simple-access": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/9bd10cd03cce138a644f4e671025058348d8ff364253122bed60f9a2a32759445b93e8a6501773491cb19906602b18fd26255df0caac425343a1584599b36b24 + languageName: node + linkType: hard + "@babel/plugin-transform-modules-systemjs@npm:^7.25.9": version: 7.25.9 resolution: "@babel/plugin-transform-modules-systemjs@npm:7.25.9" @@ -1479,6 +2252,20 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-typescript@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-typescript@npm:7.24.7" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.24.7" + "@babel/helper-create-class-features-plugin": "npm:^7.24.7" + "@babel/helper-plugin-utils": "npm:^7.24.7" + "@babel/plugin-syntax-typescript": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/6a4af5a96a90f08ea679829abc558b8478b8b31b40c84b887f2859110b75ab2c8c48a2cf80193621d988a6b064aefef2a74ea3ccc310166219f87959d06a3033 + languageName: node + linkType: hard + "@babel/plugin-transform-typescript@npm:~7.4.0": version: 7.4.5 resolution: "@babel/plugin-transform-typescript@npm:7.4.5" @@ -1666,7 +2453,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.1.0, @babel/preset-typescript@npm:^7.24.7": +"@babel/preset-typescript@npm:^7.1.0": version: 7.26.0 resolution: "@babel/preset-typescript@npm:7.26.0" dependencies: @@ -1681,6 +2468,21 @@ __metadata: languageName: node linkType: hard +"@babel/preset-typescript@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/preset-typescript@npm:7.24.7" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.7" + "@babel/helper-validator-option": "npm:^7.24.7" + "@babel/plugin-syntax-jsx": "npm:^7.24.7" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.7" + "@babel/plugin-transform-typescript": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/995e9783f8e474581e7533d6b10ec1fbea69528cc939ad8582b5937e13548e5215d25a8e2c845e7b351fdaa13139896b5e42ab3bde83918ea4e41773f10861ac + languageName: node + linkType: hard + "@babel/register@npm:^7.0.0": version: 7.25.9 resolution: "@babel/register@npm:7.25.9" @@ -1714,6 +2516,39 @@ __metadata: languageName: node linkType: hard +"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0": + version: 7.24.0 + resolution: "@babel/template@npm:7.24.0" + dependencies: + "@babel/code-frame": "npm:^7.23.5" + "@babel/parser": "npm:^7.24.0" + "@babel/types": "npm:^7.24.0" + checksum: 10/8c538338c7de8fac8ada691a5a812bdcbd60bd4a4eb5adae2cc9ee19773e8fb1a724312a00af9e1ce49056ffd3c3475e7287b5668cf6360bfb3f8ac827a06ffe + languageName: node + linkType: hard + +"@babel/template@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/template@npm:7.24.7" + dependencies: + "@babel/code-frame": "npm:^7.24.7" + "@babel/parser": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/5975d404ef51cf379515eb0f80b115981d0b9dff5539e53a47516644abb8c83d7559f5b083eb1d4977b20d8359ebb2f911ccd4f729143f8958fdc465f976d843 + languageName: node + linkType: hard + +"@babel/template@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/template@npm:7.25.0" + dependencies: + "@babel/code-frame": "npm:^7.24.7" + "@babel/parser": "npm:^7.25.0" + "@babel/types": "npm:^7.25.0" + checksum: 10/07ebecf6db8b28244b7397628e09c99e7a317b959b926d90455c7253c88df3677a5a32d1501d9749fe292a263ff51a4b6b5385bcabd5dadd3a48036f4d4949e0 + languageName: node + linkType: hard + "@babel/template@npm:^7.25.9, @babel/template@npm:^7.3.3": version: 7.25.9 resolution: "@babel/template@npm:7.25.9" @@ -1725,18 +2560,69 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.14.5, @babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.4.5": - version: 7.25.9 - resolution: "@babel/traverse@npm:7.25.9" +"@babel/traverse@npm:^7.14.5, @babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.4.5": + version: 7.25.9 + resolution: "@babel/traverse@npm:7.25.9" + dependencies: + "@babel/code-frame": "npm:^7.25.9" + "@babel/generator": "npm:^7.25.9" + "@babel/parser": "npm:^7.25.9" + "@babel/template": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/7431614d76d4a053e429208db82f2846a415833f3d9eb2e11ef72eeb3c64dfd71f4a4d983de1a4a047b36165a1f5a64de8ca2a417534cc472005c740ffcb9c6a + languageName: node + linkType: hard + +"@babel/traverse@npm:^7.24.5": + version: 7.24.5 + resolution: "@babel/traverse@npm:7.24.5" + dependencies: + "@babel/code-frame": "npm:^7.24.2" + "@babel/generator": "npm:^7.24.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.24.5" + "@babel/parser": "npm:^7.24.5" + "@babel/types": "npm:^7.24.5" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/e237de56e0c30795293fdb6f2cb09a75e6230836e3dc67dc4fa21781eb4d5842996bf3af95bc57ac5c7e6e97d06446f14732d0952eb57d5d9643de7c4f95bee6 + languageName: node + linkType: hard + +"@babel/traverse@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/traverse@npm:7.24.7" + dependencies: + "@babel/code-frame": "npm:^7.24.7" + "@babel/generator": "npm:^7.24.7" + "@babel/helper-environment-visitor": "npm:^7.24.7" + "@babel/helper-function-name": "npm:^7.24.7" + "@babel/helper-hoist-variables": "npm:^7.24.7" + "@babel/helper-split-export-declaration": "npm:^7.24.7" + "@babel/parser": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/785cf26383a992740e492efba7016de964cd06c05c9d7146fa1b5ead409e054c444f50b36dc37856884a56e32cf9d3105ddf1543486b6df68300bffb117a245a + languageName: node + linkType: hard + +"@babel/traverse@npm:^7.25.2": + version: 7.25.6 + resolution: "@babel/traverse@npm:7.25.6" dependencies: - "@babel/code-frame": "npm:^7.25.9" - "@babel/generator": "npm:^7.25.9" - "@babel/parser": "npm:^7.25.9" - "@babel/template": "npm:^7.25.9" - "@babel/types": "npm:^7.25.9" + "@babel/code-frame": "npm:^7.24.7" + "@babel/generator": "npm:^7.25.6" + "@babel/parser": "npm:^7.25.6" + "@babel/template": "npm:^7.25.0" + "@babel/types": "npm:^7.25.6" debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: 10/7431614d76d4a053e429208db82f2846a415833f3d9eb2e11ef72eeb3c64dfd71f4a4d983de1a4a047b36165a1f5a64de8ca2a417534cc472005c740ffcb9c6a + checksum: 10/de75a918299bc27a44ec973e3f2fa8c7902bbd67bd5d39a0be656f3c1127f33ebc79c12696fbc8170a0b0e1072a966d4a2126578d7ea2e241b0aeb5d16edc738 languageName: node linkType: hard @@ -1750,6 +2636,39 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.8.3": + version: 7.24.5 + resolution: "@babel/types@npm:7.24.5" + dependencies: + "@babel/helper-string-parser": "npm:^7.24.1" + "@babel/helper-validator-identifier": "npm:^7.24.5" + to-fast-properties: "npm:^2.0.0" + checksum: 10/259e7512476ae64830e73f2addf143159232bcbf0eba6a6a27cab25a960cd353a11c826eb54185fdf7d8d9865922cbcd6522149e9ec55b967131193f9c9111a1 + languageName: node + linkType: hard + +"@babel/types@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/types@npm:7.24.7" + dependencies: + "@babel/helper-string-parser": "npm:^7.24.7" + "@babel/helper-validator-identifier": "npm:^7.24.7" + to-fast-properties: "npm:^2.0.0" + checksum: 10/ad3c8c0d6fb4acb0bb74bb5b4bb849b181bf6185677ef9c59c18856c81e43628d0858253cf232f0eca806f02e08eff85a1d3e636a3e94daea737597796b0b430 + languageName: node + linkType: hard + +"@babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2, @babel/types@npm:^7.25.6": + version: 7.25.6 + resolution: "@babel/types@npm:7.25.6" + dependencies: + "@babel/helper-string-parser": "npm:^7.24.8" + "@babel/helper-validator-identifier": "npm:^7.24.7" + to-fast-properties: "npm:^2.0.0" + checksum: 10/7b54665e1b51f525fe0f451efdd9fe7a4a6dfba3fd4956c3530bc77336b66ffe3d78c093796ed044119b5d213176af7cf326f317a2057c538d575c6cefcb3562 + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -2671,7 +3590,30 @@ __metadata: languageName: node linkType: hard -"@embroider/addon-shim@npm:^1.0.0, @embroider/addon-shim@npm:^1.2.0, @embroider/addon-shim@npm:^1.6.0, @embroider/addon-shim@npm:^1.8.3, @embroider/addon-shim@npm:^1.8.6, @embroider/addon-shim@npm:^1.8.7, @embroider/addon-shim@npm:^1.9.0": +"@embroider/addon-shim@npm:^1.0.0, @embroider/addon-shim@npm:^1.2.0, @embroider/addon-shim@npm:^1.8.6, @embroider/addon-shim@npm:^1.8.7": + version: 1.8.7 + resolution: "@embroider/addon-shim@npm:1.8.7" + dependencies: + "@embroider/shared-internals": "npm:^2.5.1" + broccoli-funnel: "npm:^3.0.8" + semver: "npm:^7.3.8" + checksum: 10/68f378ce9f6a9d4ae7e79fb0f2ea71d493cb6a4326d6ed986ab6ab6315cf1c825ed2299c3d4efc0cb6497533916bf82a2916348fd5df9176a265a9699667a679 + languageName: node + linkType: hard + +"@embroider/addon-shim@npm:^1.6.0, @embroider/addon-shim@npm:^1.8.3": + version: 1.8.8 + resolution: "@embroider/addon-shim@npm:1.8.8" + dependencies: + "@embroider/shared-internals": "npm:^2.6.0" + broccoli-funnel: "npm:^3.0.8" + common-ancestor-path: "npm:^1.0.1" + semver: "npm:^7.3.8" + checksum: 10/8710977a7c66f76c8680268265c25dfca22ed1feef826ddb126681fd384ad9e38a83c4782893e4b2e6f415f351e6903e3b4278918283813be2c682f62a6fda47 + languageName: node + linkType: hard + +"@embroider/addon-shim@npm:^1.9.0": version: 1.9.0 resolution: "@embroider/addon-shim@npm:1.9.0" dependencies: @@ -2716,7 +3658,7 @@ __metadata: languageName: node linkType: hard -"@embroider/macros@npm:1.16.9, @embroider/macros@npm:^0.50.0 || ^1.0.0, @embroider/macros@npm:^1.0.0, @embroider/macros@npm:^1.10.0, @embroider/macros@npm:^1.13.1, @embroider/macros@npm:^1.16.5, @embroider/macros@npm:^1.16.9, @embroider/macros@npm:^1.2.0, @embroider/macros@npm:^1.8.1, @embroider/macros@npm:^1.8.3": +"@embroider/macros@npm:1.16.9, @embroider/macros@npm:^0.50.0 || ^1.0.0, @embroider/macros@npm:^1.0.0, @embroider/macros@npm:^1.10.0, @embroider/macros@npm:^1.13.1, @embroider/macros@npm:^1.16.5, @embroider/macros@npm:^1.16.9, @embroider/macros@npm:^1.8.1, @embroider/macros@npm:^1.8.3": version: 1.16.9 resolution: "@embroider/macros@npm:1.16.9" dependencies: @@ -2737,6 +3679,45 @@ __metadata: languageName: node linkType: hard +"@embroider/macros@npm:^1.2.0": + version: 1.16.2 + resolution: "@embroider/macros@npm:1.16.2" + dependencies: + "@embroider/shared-internals": "npm:2.6.1" + assert-never: "npm:^1.2.1" + babel-import-util: "npm:^2.0.0" + ember-cli-babel: "npm:^7.26.6" + find-up: "npm:^5.0.0" + lodash: "npm:^4.17.21" + resolve: "npm:^1.20.0" + semver: "npm:^7.3.2" + peerDependencies: + "@glint/template": ^1.0.0 + peerDependenciesMeta: + "@glint/template": + optional: true + checksum: 10/8f3d47cdb9fab6ed41d20002b43328d7772a80bf9e65ec33c1e04aa0eec8e1f475f853f6c4d0aba768c55aa97db25c67242e35ab07f208148ac26ac591c4d10f + languageName: node + linkType: hard + +"@embroider/shared-internals@npm:2.6.1": + version: 2.6.1 + resolution: "@embroider/shared-internals@npm:2.6.1" + dependencies: + babel-import-util: "npm:^2.0.0" + debug: "npm:^4.3.2" + ember-rfc176-data: "npm:^0.3.17" + fs-extra: "npm:^9.1.0" + js-string-escape: "npm:^1.0.1" + lodash: "npm:^4.17.21" + minimatch: "npm:^3.0.4" + resolve-package-path: "npm:^4.0.1" + semver: "npm:^7.3.5" + typescript-memoize: "npm:^1.0.1" + checksum: 10/b40621b4dd98aed7f9422cf996de40da2abb6aa15e494070579431b55d1786d824c041a683899b397e3a89e65abe2600f64ed0bce09e0b6781b1a3abe0bdeafd + languageName: node + linkType: hard + "@embroider/shared-internals@npm:2.8.1, @embroider/shared-internals@npm:^2.0.0, @embroider/shared-internals@npm:^2.8.1": version: 2.8.1 resolution: "@embroider/shared-internals@npm:2.8.1" @@ -2757,6 +3738,24 @@ __metadata: languageName: node linkType: hard +"@embroider/shared-internals@npm:^2.5.1, @embroider/shared-internals@npm:^2.6.0": + version: 2.6.0 + resolution: "@embroider/shared-internals@npm:2.6.0" + dependencies: + babel-import-util: "npm:^2.0.0" + debug: "npm:^4.3.2" + ember-rfc176-data: "npm:^0.3.17" + fs-extra: "npm:^9.1.0" + js-string-escape: "npm:^1.0.1" + lodash: "npm:^4.17.21" + minimatch: "npm:^3.0.4" + resolve-package-path: "npm:^4.0.1" + semver: "npm:^7.3.5" + typescript-memoize: "npm:^1.0.1" + checksum: 10/74f98b679422fc92ecbd61f221e6affec69071b188f34a394df46b6415e912f5deae09e619d3aae96f1a75ea5a640d5af6436f73693ad7038880cae17f56516f + languageName: node + linkType: hard + "@embroider/test-setup@npm:^3.0.3": version: 3.0.3 resolution: "@embroider/test-setup@npm:3.0.3" @@ -2977,13 +3976,20 @@ __metadata: languageName: node linkType: hard -"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.11.0, @eslint-community/regexpp@npm:^4.6.1": +"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.11.0": version: 4.12.1 resolution: "@eslint-community/regexpp@npm:4.12.1" checksum: 10/c08f1dd7dd18fbb60bdd0d85820656d1374dd898af9be7f82cb00451313402a22d5e30569c150315b4385907cdbca78c22389b2a72ab78883b3173be317620cc languageName: node linkType: hard +"@eslint-community/regexpp@npm:^4.6.1": + version: 4.10.0 + resolution: "@eslint-community/regexpp@npm:4.10.0" + checksum: 10/8c36169c815fc5d726078e8c71a5b592957ee60d08c6470f9ce0187c8046af1a00afbda0a065cc40ff18d5d83f82aed9793c6818f7304a74a7488dc9f3ecbd42 + languageName: node + linkType: hard + "@eslint/eslintrc@npm:^2.1.4": version: 2.1.4 resolution: "@eslint/eslintrc@npm:2.1.4" @@ -3132,7 +4138,7 @@ __metadata: languageName: node linkType: hard -"@glimmer/debug@npm:0.92.4, @glimmer/debug@npm:^0.92.0": +"@glimmer/debug@npm:0.92.4": version: 0.92.4 resolution: "@glimmer/debug@npm:0.92.4" dependencies: @@ -3143,6 +4149,17 @@ __metadata: languageName: node linkType: hard +"@glimmer/debug@npm:^0.92.0": + version: 0.92.0 + resolution: "@glimmer/debug@npm:0.92.0" + dependencies: + "@glimmer/interfaces": "npm:^0.92.0" + "@glimmer/util": "npm:^0.92.0" + "@glimmer/vm": "npm:^0.92.0" + checksum: 10/16bf3e4bcddb2b60be936e2f314ae632e7306dffd1b5c81b82eed9a49ddaf2645bdb72d07b2c656e70f4931a67c10e132fdb0cfdfe52512e6ce71412c7d338ab + languageName: node + linkType: hard + "@glimmer/destroyable@npm:0.92.0": version: 0.92.0 resolution: "@glimmer/destroyable@npm:0.92.0" @@ -3727,7 +4744,7 @@ __metadata: languageName: node linkType: hard -"@glimmer/wire-format@npm:0.92.3, @glimmer/wire-format@npm:^0.92.0": +"@glimmer/wire-format@npm:0.92.3": version: 0.92.3 resolution: "@glimmer/wire-format@npm:0.92.3" dependencies: @@ -3737,6 +4754,16 @@ __metadata: languageName: node linkType: hard +"@glimmer/wire-format@npm:^0.92.0": + version: 0.92.0 + resolution: "@glimmer/wire-format@npm:0.92.0" + dependencies: + "@glimmer/interfaces": "npm:^0.92.0" + "@glimmer/util": "npm:^0.92.0" + checksum: 10/2de4eb8119d787a02c41d081705f0ec876ffea8317408a0f7dffe4dc6f0f937ced6b31a60ec6e05948b8d005e47e537d1a63e3b64313a555dded649f3b39c985 + languageName: node + linkType: hard + "@glint/core@npm:^1.2.1, @glint/core@npm:^1.4.0": version: 1.5.0 resolution: "@glint/core@npm:1.5.0" @@ -3981,6 +5008,7 @@ __metadata: eslint: "npm:^8.57.0" fs-extra: "npm:^11.1.1" lodash-es: "npm:^4.17.21" + nodemon: "npm:^3.1.7" path: "npm:^0.12.7" prettier: "npm:^3.3.2" style-dictionary: "npm:^4.2.0" @@ -4421,6 +5449,13 @@ __metadata: languageName: node linkType: hard +"@jridgewell/sourcemap-codec@npm:^1.4.15": + version: 1.4.15 + resolution: "@jridgewell/sourcemap-codec@npm:1.4.15" + checksum: 10/89960ac087781b961ad918978975bcdf2051cd1741880469783c42de64239703eab9db5230d776d8e6a09d73bb5e4cb964e07d93ee6e2e7aea5a7d726e865c09 + languageName: node + linkType: hard + "@jridgewell/trace-mapping@npm:0.3.9": version: 0.3.9 resolution: "@jridgewell/trace-mapping@npm:0.3.9" @@ -4913,13 +5948,20 @@ __metadata: languageName: node linkType: hard -"@percy/sdk-utils@npm:1.30.4, @percy/sdk-utils@npm:^1.18.0": +"@percy/sdk-utils@npm:1.30.4": version: 1.30.4 resolution: "@percy/sdk-utils@npm:1.30.4" checksum: 10/451cc9ed3da7f26b366d568c6b34ebbaac9c82ed7075c81725240f0fd1aba1a60ab3b0d4e63b9581f3bada2c3386b31e2d119e0038be86a257f339c2ef99e509 languageName: node linkType: hard +"@percy/sdk-utils@npm:^1.18.0": + version: 1.27.5 + resolution: "@percy/sdk-utils@npm:1.27.5" + checksum: 10/c1dd20104823f19545e2ee118d09c1f0eae741547479c3a63d636fa8327762c27d3b4815c4e48e16f4d67e42f47bf6b937d67ca872130202775665a8e536dd9c + languageName: node + linkType: hard + "@percy/webdriver-utils@npm:1.30.4": version: 1.30.4 resolution: "@percy/webdriver-utils@npm:1.30.4" @@ -5549,11 +6591,9 @@ __metadata: linkType: hard "@types/chai@npm:*": - version: 5.0.1 - resolution: "@types/chai@npm:5.0.1" - dependencies: - "@types/deep-eql": "npm:*" - checksum: 10/0f829d4f4be06d6a32c9d89ac08c356df89bafc4b923d8b7fd56cf78d681f5fddfe7aa3391b747f076c57129428f4df694026f344ad3bf8bda65e2ca50c0fd37 + version: 4.3.11 + resolution: "@types/chai@npm:4.3.11" + checksum: 10/c83a00359684bf06114d5ad0ffa62c78b2fbfe09a985eda56e55cd3c191fe176052aef6e297a8c8a3608efb8ea7a44598cf7e0ae1a3a9311af892417e95b0b28 languageName: node linkType: hard @@ -5598,13 +6638,6 @@ __metadata: languageName: node linkType: hard -"@types/deep-eql@npm:*": - version: 4.0.2 - resolution: "@types/deep-eql@npm:4.0.2" - checksum: 10/249a27b0bb22f6aa28461db56afa21ec044fa0e303221a62dff81831b20c8530502175f1a49060f7099e7be06181078548ac47c668de79ff9880241968d43d0c - languageName: node - linkType: hard - "@types/ember-qunit@npm:^6.1.1": version: 6.1.3 resolution: "@types/ember-qunit@npm:6.1.3" @@ -5826,7 +6859,14 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:*, @types/estree@npm:1.0.6, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6": +"@types/estree@npm:*, @types/estree@npm:^1.0.0": + version: 1.0.5 + resolution: "@types/estree@npm:1.0.5" + checksum: 10/7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408 + languageName: node + linkType: hard + +"@types/estree@npm:1.0.6, @types/estree@npm:^1.0.6": version: 1.0.6 resolution: "@types/estree@npm:1.0.6" checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d @@ -6014,13 +7054,20 @@ __metadata: languageName: node linkType: hard -"@types/lodash@npm:*, @types/lodash@npm:^4.14.200": +"@types/lodash@npm:*": version: 4.17.13 resolution: "@types/lodash@npm:4.17.13" checksum: 10/ddb34e20810c71be2d9445bcc4b64ec25b83976738454de709854b79c7f655b03704b76235445699956d65012987720e0e429a35489de65495cdb5420202d905 languageName: node linkType: hard +"@types/lodash@npm:^4.14.200": + version: 4.14.202 + resolution: "@types/lodash@npm:4.14.202" + checksum: 10/1bb9760a5b1dda120132c4b987330d67979c95dbc22612678682cd61b00302e190f4207228f3728580059cdab5582362262e3819aea59960c1017bd2b9fb26f6 + languageName: node + linkType: hard + "@types/luxon@npm:^3.2.0": version: 3.4.2 resolution: "@types/luxon@npm:3.4.2" @@ -6065,7 +7112,7 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:*, @types/node@npm:>=10.0.0, @types/node@npm:^22.8.7": +"@types/node@npm:*, @types/node@npm:>=10.0.0": version: 22.10.1 resolution: "@types/node@npm:22.10.1" dependencies: @@ -6088,6 +7135,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^22.8.7": + version: 22.9.0 + resolution: "@types/node@npm:22.9.0" + dependencies: + undici-types: "npm:~6.19.8" + checksum: 10/a7df3426891868b0f5fb03e46aeddd8446178233521c624a44531c92a040cf08a82d8235f7e1e02af731fd16984665d4d71f3418caf9c2788313b10f040d615d + languageName: node + linkType: hard + "@types/node@npm:^9.6.0": version: 9.6.61 resolution: "@types/node@npm:9.6.61" @@ -6772,7 +7828,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.11.0, acorn@npm:^8.14.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0": +"acorn@npm:^8.11.0, acorn@npm:^8.14.0": version: 8.14.0 resolution: "acorn@npm:8.14.0" bin: @@ -6781,6 +7837,15 @@ __metadata: languageName: node linkType: hard +"acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0": + version: 8.11.2 + resolution: "acorn@npm:8.11.2" + bin: + acorn: bin/acorn + checksum: 10/ff559b891382ad4cd34cc3c493511d0a7075a51f5f9f02a03440e92be3705679367238338566c5fbd3521ecadd565d29301bc8e16cb48379206bffbff3d72500 + languageName: node + linkType: hard + "agent-base@npm:6": version: 6.0.2 resolution: "agent-base@npm:6.0.2" @@ -6855,15 +7920,27 @@ __metadata: languageName: node linkType: hard -"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.6.2, ajv@npm:^8.9.0": - version: 8.17.1 - resolution: "ajv@npm:8.17.1" +"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.9.0": + version: 8.12.0 + resolution: "ajv@npm:8.12.0" + dependencies: + fast-deep-equal: "npm:^3.1.1" + json-schema-traverse: "npm:^1.0.0" + require-from-string: "npm:^2.0.2" + uri-js: "npm:^4.2.2" + checksum: 10/b406f3b79b5756ac53bfe2c20852471b08e122bc1ee4cde08ae4d6a800574d9cd78d60c81c69c63ff81e4da7cd0b638fafbb2303ae580d49cf1600b9059efb85 + languageName: node + linkType: hard + +"ajv@npm:^8.6.2": + version: 8.13.0 + resolution: "ajv@npm:8.13.0" dependencies: fast-deep-equal: "npm:^3.1.3" - fast-uri: "npm:^3.0.1" json-schema-traverse: "npm:^1.0.0" require-from-string: "npm:^2.0.2" - checksum: 10/ee3c62162c953e91986c838f004132b6a253d700f1e51253b99791e2dbfdb39161bc950ebdc2f156f8568035bb5ed8be7bd78289cd9ecbf3381fe8f5b82e3f33 + uri-js: "npm:^4.4.1" + checksum: 10/4ada268c9a6e44be87fd295df0f0a91267a7bae8dbc8a67a2d5799c3cb459232839c99d18b035597bb6e3ffe88af6979f7daece854f590a81ebbbc2dfa80002c languageName: node linkType: hard @@ -7050,7 +8127,7 @@ __metadata: languageName: node linkType: hard -"anymatch@npm:^3.0.3, anymatch@npm:^3.1.1": +"anymatch@npm:^3.0.3, anymatch@npm:^3.1.1, anymatch@npm:~3.1.2": version: 3.1.3 resolution: "anymatch@npm:3.1.3" dependencies: @@ -7894,13 +8971,23 @@ __metadata: languageName: node linkType: hard -"babel-plugin-ember-template-compilation@npm:^2.0.0, babel-plugin-ember-template-compilation@npm:^2.0.1, babel-plugin-ember-template-compilation@npm:^2.1.1, babel-plugin-ember-template-compilation@npm:^2.2.1, babel-plugin-ember-template-compilation@npm:^2.2.4": - version: 2.3.0 - resolution: "babel-plugin-ember-template-compilation@npm:2.3.0" +"babel-plugin-ember-template-compilation@npm:^2.0.0, babel-plugin-ember-template-compilation@npm:^2.0.1, babel-plugin-ember-template-compilation@npm:^2.1.1, babel-plugin-ember-template-compilation@npm:^2.2.4": + version: 2.2.4 + resolution: "babel-plugin-ember-template-compilation@npm:2.2.4" + dependencies: + "@glimmer/syntax": "npm:^0.84.3" + babel-import-util: "npm:^3.0.0" + checksum: 10/e5050bdfbd9327c7124ec18097815ced4b55d5690ffba411347608604b9d38959e3de1aafdc0bdda08b8389e65a036aeb6b7047f23697ae2b3720ae1b34b0a00 + languageName: node + linkType: hard + +"babel-plugin-ember-template-compilation@npm:^2.2.1": + version: 2.2.5 + resolution: "babel-plugin-ember-template-compilation@npm:2.2.5" dependencies: "@glimmer/syntax": "npm:^0.84.3" babel-import-util: "npm:^3.0.0" - checksum: 10/327e0fa8c7490b0d43593cb3cd091c9f18dfb698121c135c80e0b8edfd7b1d1c8688b9b2cf6ef6177a5c5b600d20a5e04b01c6655569b95e00c73fde6cca1952 + checksum: 10/24bd9a032c0ed7b4d4456f3e42bcd46ff771cb084aad9868cb5cfe9b4df8304724d6cfe68df0b9fd6b28c6bdea04d96533ef961935e946cb3ec30606fe8ac197 languageName: node linkType: hard @@ -8593,6 +9680,13 @@ __metadata: languageName: node linkType: hard +"binary-extensions@npm:^2.0.0": + version: 2.2.0 + resolution: "binary-extensions@npm:2.2.0" + checksum: 10/ccd267956c58d2315f5d3ea6757cf09863c5fc703e50fbeb13a7dc849b812ef76e3cf9ca8f35a0c48498776a7478d7b4a0418e1e2b8cb9cb9731f2922aaad7f8 + languageName: node + linkType: hard + "binaryextensions@npm:1 || 2, binaryextensions@npm:^2.1.2": version: 2.3.0 resolution: "binaryextensions@npm:2.3.0" @@ -8717,6 +9811,15 @@ __metadata: languageName: node linkType: hard +"braces@npm:~3.0.2": + version: 3.0.2 + resolution: "braces@npm:3.0.2" + dependencies: + fill-range: "npm:^7.0.1" + checksum: 10/966b1fb48d193b9d155f810e5efd1790962f2c4e0829f8440b8ad236ba009222c501f70185ef732fef17a4c490bb33a03b90dab0631feafbdf447da91e8165b1 + languageName: node + linkType: hard + "broccoli-asset-rev@npm:^3.0.0": version: 3.0.0 resolution: "broccoli-asset-rev@npm:3.0.0" @@ -9505,6 +10608,34 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.22.2": + version: 4.23.0 + resolution: "browserslist@npm:4.23.0" + dependencies: + caniuse-lite: "npm:^1.0.30001587" + electron-to-chromium: "npm:^1.4.668" + node-releases: "npm:^2.0.14" + update-browserslist-db: "npm:^1.0.13" + bin: + browserslist: cli.js + checksum: 10/496c3862df74565dd942b4ae65f502c575cbeba1fa4a3894dad7aa3b16130dc3033bc502d8848147f7b625154a284708253d9598bcdbef5a1e34cf11dc7bad8e + languageName: node + linkType: hard + +"browserslist@npm:^4.23.1": + version: 4.23.3 + resolution: "browserslist@npm:4.23.3" + dependencies: + caniuse-lite: "npm:^1.0.30001646" + electron-to-chromium: "npm:^1.5.4" + node-releases: "npm:^2.0.18" + update-browserslist-db: "npm:^1.1.0" + bin: + browserslist: cli.js + checksum: 10/e266d18c6c6c5becf9a1a7aa264477677b9796387972e8fce34854bb33dc1666194dc28389780e5dc6566e68a95e87ece2ce222e1c4ca93c2b75b61dfebd5f1c + languageName: node + linkType: hard + "bser@npm:2.1.1": version: 2.1.1 resolution: "bser@npm:2.1.1" @@ -9753,6 +10884,20 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001587": + version: 1.0.30001597 + resolution: "caniuse-lite@npm:1.0.30001597" + checksum: 10/44a268113faeee51e249cbcb3924dc3765f26cd527a134e3bb720ed20d50abd8b9291500a88beee061cc03ae9f15ddc9045d57e30d25a98efeaff4f7bb8965c1 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001646": + version: 1.0.30001660 + resolution: "caniuse-lite@npm:1.0.30001660" + checksum: 10/5d83f0b7e2075b7e31f114f739155dc6c21b0afe8cb61180f625a4903b0ccd3d7591a5f81c930f14efddfa57040203ba0890850b8a3738f6c7f17c7dd83b9de8 + languageName: node + linkType: hard + "capture-exit@npm:^2.0.0": version: 2.0.0 resolution: "capture-exit@npm:2.0.0" @@ -9952,6 +11097,25 @@ __metadata: languageName: node linkType: hard +"chokidar@npm:^3.5.2": + version: 3.6.0 + resolution: "chokidar@npm:3.6.0" + dependencies: + anymatch: "npm:~3.1.2" + braces: "npm:~3.0.2" + fsevents: "npm:~2.3.2" + glob-parent: "npm:~5.1.2" + is-binary-path: "npm:~2.1.0" + is-glob: "npm:~4.0.1" + normalize-path: "npm:~3.0.0" + readdirp: "npm:~3.6.0" + dependenciesMeta: + fsevents: + optional: true + checksum: 10/c327fb07704443f8d15f7b4a7ce93b2f0bc0e6cea07ec28a7570aa22cd51fcf0379df589403976ea956c369f25aa82d84561947e227cd925902e1751371658df + languageName: node + linkType: hard + "chokidar@npm:^4.0.0": version: 4.0.1 resolution: "chokidar@npm:4.0.1" @@ -11392,15 +12556,15 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.7, debug@npm:~4.3.1, debug@npm:~4.3.2, debug@npm:~4.3.4": - version: 4.3.7 - resolution: "debug@npm:4.3.7" +"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2": + version: 4.3.4 + resolution: "debug@npm:4.3.4" dependencies: - ms: "npm:^2.1.3" + ms: "npm:2.1.2" peerDependenciesMeta: supports-color: optional: true - checksum: 10/71168908b9a78227ab29d5d25fe03c5867750e31ce24bf2c44a86efc5af041758bb56569b0a3d48a9b5344c00a24a777e6f4100ed6dfd9534a42c1dde285125a + checksum: 10/0073c3bcbd9cb7d71dd5f6b55be8701af42df3e56e911186dfa46fac3a5b9eb7ce7f377dd1d3be6db8977221f8eb333d945216f645cf56f6b688cd484837d255 languageName: node linkType: hard @@ -11413,6 +12577,18 @@ __metadata: languageName: node linkType: hard +"debug@npm:^4, debug@npm:^4.3.7, debug@npm:~4.3.4": + version: 4.3.7 + resolution: "debug@npm:4.3.7" + dependencies: + ms: "npm:^2.1.3" + peerDependenciesMeta: + supports-color: + optional: true + checksum: 10/71168908b9a78227ab29d5d25fe03c5867750e31ce24bf2c44a86efc5af041758bb56569b0a3d48a9b5344c00a24a777e6f4100ed6dfd9534a42c1dde285125a + languageName: node + linkType: hard + "decamelize-keys@npm:^1.0.0": version: 1.1.1 resolution: "decamelize-keys@npm:1.1.1" @@ -11954,6 +13130,20 @@ __metadata: languageName: node linkType: hard +"electron-to-chromium@npm:^1.4.668": + version: 1.4.700 + resolution: "electron-to-chromium@npm:1.4.700" + checksum: 10/957588fc222c86d84ad46d3a4e0cc153337a7fdd2345d714a3763604144a173aca88e4be16d0b7bf1fbd2ef9a58191a470f91732d2c05857d7e03ffa7941a69c + languageName: node + linkType: hard + +"electron-to-chromium@npm:^1.5.4": + version: 1.5.20 + resolution: "electron-to-chromium@npm:1.5.20" + checksum: 10/179f8af9b5e426489fdf9f43272bea64c5e66231656e5510abe058fc601ff5981260f37576c03e4288dd25446d645cb35995b1ed3aab67e2e080fadb9134041f + languageName: node + linkType: hard + "ember-a11y-refocus@npm:^4.1.3": version: 4.1.4 resolution: "ember-a11y-refocus@npm:4.1.4" @@ -12030,7 +13220,7 @@ __metadata: languageName: node linkType: hard -"ember-auto-import@npm:^2.2.4, ember-auto-import@npm:^2.4.2, ember-auto-import@npm:^2.6.0, ember-auto-import@npm:^2.6.3, ember-auto-import@npm:^2.7.3": +"ember-auto-import@npm:^2.2.4, ember-auto-import@npm:^2.4.2, ember-auto-import@npm:^2.6.0, ember-auto-import@npm:^2.6.3": version: 2.10.0 resolution: "ember-auto-import@npm:2.10.0" dependencies: @@ -12074,6 +13264,48 @@ __metadata: languageName: node linkType: hard +"ember-auto-import@npm:^2.7.3": + version: 2.7.3 + resolution: "ember-auto-import@npm:2.7.3" + dependencies: + "@babel/core": "npm:^7.16.7" + "@babel/plugin-proposal-class-properties": "npm:^7.16.7" + "@babel/plugin-proposal-decorators": "npm:^7.16.7" + "@babel/plugin-proposal-private-methods": "npm:^7.16.7" + "@babel/plugin-transform-class-static-block": "npm:^7.16.7" + "@babel/preset-env": "npm:^7.16.7" + "@embroider/macros": "npm:^1.0.0" + "@embroider/shared-internals": "npm:^2.0.0" + babel-loader: "npm:^8.0.6" + babel-plugin-ember-modules-api-polyfill: "npm:^3.5.0" + babel-plugin-ember-template-compilation: "npm:^2.0.1" + babel-plugin-htmlbars-inline-precompile: "npm:^5.2.1" + babel-plugin-syntax-dynamic-import: "npm:^6.18.0" + broccoli-debug: "npm:^0.6.4" + broccoli-funnel: "npm:^3.0.8" + broccoli-merge-trees: "npm:^4.2.0" + broccoli-plugin: "npm:^4.0.0" + broccoli-source: "npm:^3.0.0" + css-loader: "npm:^5.2.0" + debug: "npm:^4.3.1" + fs-extra: "npm:^10.0.0" + fs-tree-diff: "npm:^2.0.0" + handlebars: "npm:^4.3.1" + js-string-escape: "npm:^1.0.1" + lodash: "npm:^4.17.19" + mini-css-extract-plugin: "npm:^2.5.2" + minimatch: "npm:^3.0.0" + parse5: "npm:^6.0.1" + resolve: "npm:^1.20.0" + resolve-package-path: "npm:^4.0.3" + semver: "npm:^7.3.4" + style-loader: "npm:^2.0.0" + typescript-memoize: "npm:^1.0.0-alpha.3" + walk-sync: "npm:^3.0.0" + checksum: 10/e3f531bc332e0147e2cf4da3de4ed7b4161f9e0fc9ce594f1796c3188be172322dce2a5bb63ecc7b15f21fb3dd0b8d4ebe128cd06efa2a729bf221b0d868c2b2 + languageName: node + linkType: hard + "ember-basic-dropdown@npm:^8.1.0": version: 8.4.0 resolution: "ember-basic-dropdown@npm:8.4.0" @@ -13028,7 +14260,7 @@ __metadata: languageName: node linkType: hard -"ember-qunit@npm:*, ember-qunit@npm:^8.1.0": +"ember-qunit@npm:*": version: 8.1.1 resolution: "ember-qunit@npm:8.1.1" dependencies: @@ -13040,25 +14272,27 @@ __metadata: "@ember/test-helpers": ">=3.0.3" ember-source: ">=4.0.0" qunit: ^2.13.0 - checksum: 10/547256738a2fddddfffea1a1f0a2b1b66076b0d99548a2c3cc4a89bfa001897fd94cd1a24234149fbd72a13ef7a7ae6586599e51db9d21a0e7ad06ac9719d909 - languageName: node - linkType: hard - -"ember-resolver@npm:*": - version: 13.1.0 - resolution: "ember-resolver@npm:13.1.0" - dependencies: - ember-cli-babel: "npm:^7.26.11" - peerDependencies: - ember-source: ^4.12.0 || >= 5.0.0 - peerDependenciesMeta: - ember-source: - optional: true - checksum: 10/4ac62524c999b617bb5fe6144dbf6414070919eb962491bfecfeed1669afcc8bc5f3a444cbf8c9662ce7247eb630ca2f0d0b893d73c6d5c12a523450007b286e + checksum: 10/547256738a2fddddfffea1a1f0a2b1b66076b0d99548a2c3cc4a89bfa001897fd94cd1a24234149fbd72a13ef7a7ae6586599e51db9d21a0e7ad06ac9719d909 + languageName: node + linkType: hard + +"ember-qunit@npm:^8.1.0": + version: 8.1.0 + resolution: "ember-qunit@npm:8.1.0" + dependencies: + "@embroider/addon-shim": "npm:^1.8.6" + "@embroider/macros": "npm:^1.13.1" + ember-cli-test-loader: "npm:^3.1.0" + qunit-theme-ember: "npm:^1.0.0" + peerDependencies: + "@ember/test-helpers": ">=3.0.3" + ember-source: ">=4.0.0" + qunit: ^2.13.0 + checksum: 10/ade6ad1256385404761101fbce9914dfd82919fb97fa36a9b14333d5112c03b5903b51828feb3529d68f2925e2abe6a174b6a22cff714966d466c4b377a7cc59 languageName: node linkType: hard -"ember-resolver@npm:^11.0.1": +"ember-resolver@npm:*, ember-resolver@npm:^11.0.1": version: 11.0.1 resolution: "ember-resolver@npm:11.0.1" dependencies: @@ -13624,7 +14858,7 @@ __metadata: languageName: node linkType: hard -"es-abstract@npm:^1.17.2, es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.5": +"es-abstract@npm:^1.17.2, es-abstract@npm:^1.22.1, es-abstract@npm:^1.23.5": version: 1.23.5 resolution: "es-abstract@npm:1.23.5" dependencies: @@ -13678,6 +14912,60 @@ __metadata: languageName: node linkType: hard +"es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.2": + version: 1.23.3 + resolution: "es-abstract@npm:1.23.3" + dependencies: + array-buffer-byte-length: "npm:^1.0.1" + arraybuffer.prototype.slice: "npm:^1.0.3" + available-typed-arrays: "npm:^1.0.7" + call-bind: "npm:^1.0.7" + data-view-buffer: "npm:^1.0.1" + data-view-byte-length: "npm:^1.0.1" + data-view-byte-offset: "npm:^1.0.0" + es-define-property: "npm:^1.0.0" + es-errors: "npm:^1.3.0" + es-object-atoms: "npm:^1.0.0" + es-set-tostringtag: "npm:^2.0.3" + es-to-primitive: "npm:^1.2.1" + function.prototype.name: "npm:^1.1.6" + get-intrinsic: "npm:^1.2.4" + get-symbol-description: "npm:^1.0.2" + globalthis: "npm:^1.0.3" + gopd: "npm:^1.0.1" + has-property-descriptors: "npm:^1.0.2" + has-proto: "npm:^1.0.3" + has-symbols: "npm:^1.0.3" + hasown: "npm:^2.0.2" + internal-slot: "npm:^1.0.7" + is-array-buffer: "npm:^3.0.4" + is-callable: "npm:^1.2.7" + is-data-view: "npm:^1.0.1" + is-negative-zero: "npm:^2.0.3" + is-regex: "npm:^1.1.4" + is-shared-array-buffer: "npm:^1.0.3" + is-string: "npm:^1.0.7" + is-typed-array: "npm:^1.1.13" + is-weakref: "npm:^1.0.2" + object-inspect: "npm:^1.13.1" + object-keys: "npm:^1.1.1" + object.assign: "npm:^4.1.5" + regexp.prototype.flags: "npm:^1.5.2" + safe-array-concat: "npm:^1.1.2" + safe-regex-test: "npm:^1.0.3" + string.prototype.trim: "npm:^1.2.9" + string.prototype.trimend: "npm:^1.0.8" + string.prototype.trimstart: "npm:^1.0.8" + typed-array-buffer: "npm:^1.0.2" + typed-array-byte-length: "npm:^1.0.1" + typed-array-byte-offset: "npm:^1.0.2" + typed-array-length: "npm:^1.0.6" + unbox-primitive: "npm:^1.0.2" + which-typed-array: "npm:^1.1.15" + checksum: 10/2da795a6a1ac5fc2c452799a409acc2e3692e06dc6440440b076908617188899caa562154d77263e3053bcd9389a07baa978ab10ac3b46acc399bd0c77be04cb + languageName: node + linkType: hard + "es-array-method-boxes-properly@npm:^1.0.0": version: 1.0.0 resolution: "es-array-method-boxes-properly@npm:1.0.0" @@ -13831,7 +15119,7 @@ __metadata: languageName: node linkType: hard -"escalade@npm:^3.1.1, escalade@npm:^3.2.0": +"escalade@npm:^3.1.1, escalade@npm:^3.1.2, escalade@npm:^3.2.0": version: 3.2.0 resolution: "escalade@npm:3.2.0" checksum: 10/9d7169e3965b2f9ae46971afa392f6e5a25545ea30f2e2dd99c9b0a95a3f52b5653681a84f5b2911a413ddad2d7a93d3514165072f349b5ffc59c75a899970d6 @@ -14741,13 +16029,6 @@ __metadata: languageName: node linkType: hard -"fast-uri@npm:^3.0.1": - version: 3.0.3 - resolution: "fast-uri@npm:3.0.3" - checksum: 10/92487c75848b03edc45517fca0148287d342c30818ce43d556391db774d8e01644fb6964315a3336eec5a90f301b218b21f71fb9b2528ba25757435a20392c95 - languageName: node - linkType: hard - "fastboot-express-middleware@npm:4.1.2": version: 4.1.2 resolution: "fastboot-express-middleware@npm:4.1.2" @@ -14942,6 +16223,15 @@ __metadata: languageName: node linkType: hard +"fill-range@npm:^7.0.1": + version: 7.0.1 + resolution: "fill-range@npm:7.0.1" + dependencies: + to-regex-range: "npm:^5.0.1" + checksum: 10/e260f7592fd196b4421504d3597cc76f4a1ca7a9488260d533b611fc3cefd61e9a9be1417cb82d3b01ad9f9c0ff2dbf258e1026d2445e26b0cf5148ff4250429 + languageName: node + linkType: hard + "fill-range@npm:^7.1.1": version: 7.1.1 resolution: "fill-range@npm:7.1.1" @@ -15719,7 +17009,7 @@ __metadata: languageName: node linkType: hard -"glob-parent@npm:^5.1.2": +"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2": version: 5.1.2 resolution: "glob-parent@npm:5.1.2" dependencies: @@ -15902,6 +17192,15 @@ __metadata: languageName: node linkType: hard +"globalthis@npm:^1.0.3": + version: 1.0.3 + resolution: "globalthis@npm:1.0.3" + dependencies: + define-properties: "npm:^1.1.3" + checksum: 10/45ae2f3b40a186600d0368f2a880ae257e8278b4c7704f0417d6024105ad7f7a393661c5c2fa1334669cd485ea44bc883a08fdd4516df2428aec40c99f52aa89 + languageName: node + linkType: hard + "globalthis@npm:^1.0.4": version: 1.0.4 resolution: "globalthis@npm:1.0.4" @@ -16191,7 +17490,7 @@ __metadata: languageName: node linkType: hard -"has-proto@npm:^1.0.1, has-proto@npm:^1.0.3": +"has-proto@npm:^1.0.1": version: 1.1.0 resolution: "has-proto@npm:1.1.0" dependencies: @@ -16200,6 +17499,13 @@ __metadata: languageName: node linkType: hard +"has-proto@npm:^1.0.3": + version: 1.0.3 + resolution: "has-proto@npm:1.0.3" + checksum: 10/0b67c2c94e3bea37db3e412e3c41f79d59259875e636ba471e94c009cdfb1fa82bf045deeffafc7dbb9c148e36cae6b467055aaa5d9fad4316e11b41e3ba551a + languageName: node + linkType: hard + "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.3": version: 1.1.0 resolution: "has-symbols@npm:1.1.0" @@ -16718,6 +18024,13 @@ __metadata: languageName: node linkType: hard +"ignore-by-default@npm:^1.0.1": + version: 1.0.1 + resolution: "ignore-by-default@npm:1.0.1" + checksum: 10/441509147b3615e0365e407a3c18e189f78c07af08564176c680be1fabc94b6c789cad1342ad887175d4ecd5225de86f73d376cec8e06b42fd9b429505ffcf8a + languageName: node + linkType: hard + "ignore@npm:^4.0.3": version: 4.0.6 resolution: "ignore@npm:4.0.6" @@ -17107,6 +18420,15 @@ __metadata: languageName: node linkType: hard +"is-binary-path@npm:~2.1.0": + version: 2.1.0 + resolution: "is-binary-path@npm:2.1.0" + dependencies: + binary-extensions: "npm:^2.0.0" + checksum: 10/078e51b4f956c2c5fd2b26bb2672c3ccf7e1faff38e0ebdba45612265f4e3d9fc3127a1fa8370bbf09eab61339203c3d3b7af5662cbf8be4030f8fac37745b0e + languageName: node + linkType: hard + "is-boolean-object@npm:^1.2.0": version: 1.2.0 resolution: "is-boolean-object@npm:1.2.0" @@ -17311,7 +18633,7 @@ __metadata: languageName: node linkType: hard -"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3": +"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1": version: 4.0.3 resolution: "is-glob@npm:4.0.3" dependencies: @@ -18485,6 +19807,15 @@ __metadata: languageName: node linkType: hard +"jsesc@npm:^2.5.1": + version: 2.5.2 + resolution: "jsesc@npm:2.5.2" + bin: + jsesc: bin/jsesc + checksum: 10/d2096abdcdec56969764b40ffc91d4a23408aa2f351b4d1c13f736f25476643238c43fdbaf38a191c26b1b78fd856d965f5d4d0dde7b89459cd94025190cdf13 + languageName: node + linkType: hard + "jsesc@npm:^3.0.2, jsesc@npm:~3.0.2": version: 3.0.2 resolution: "jsesc@npm:3.0.2" @@ -19211,7 +20542,14 @@ __metadata: languageName: node linkType: hard -"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0": +"lru-cache@npm:^10.0.1": + version: 10.1.0 + resolution: "lru-cache@npm:10.1.0" + checksum: 10/207278d6fa711fb1f94a0835d4d4737441d2475302482a14785b10515e4c906a57ebf9f35bf060740c9560e91c7c1ad5a04fd7ed030972a9ba18bce2a228e95b + languageName: node + linkType: hard + +"lru-cache@npm:^10.2.0": version: 10.4.3 resolution: "lru-cache@npm:10.4.3" checksum: 10/e6e90267360476720fa8e83cc168aa2bf0311f3f2eea20a6ba78b90a885ae72071d9db132f40fda4129c803e7dcec3a6b6a6fbb44ca90b081630b810b5d6a41a @@ -19259,7 +20597,7 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.30.0, magic-string@npm:^0.30.2": +"magic-string@npm:^0.30.0": version: 0.30.14 resolution: "magic-string@npm:0.30.14" dependencies: @@ -19268,6 +20606,15 @@ __metadata: languageName: node linkType: hard +"magic-string@npm:^0.30.2": + version: 0.30.8 + resolution: "magic-string@npm:0.30.8" + dependencies: + "@jridgewell/sourcemap-codec": "npm:^1.4.15" + checksum: 10/72ab63817af600e92c19dc8489c1aa4a9599da00cfd59b2319709bd48fb0cf533fdf354bf140ac86e598dbd63e6b2cc83647fe8448f864a3eb6061c62c94e784 + languageName: node + linkType: hard + "make-dir@npm:^2.0.0, make-dir@npm:^2.1.0": version: 2.1.0 resolution: "make-dir@npm:2.1.0" @@ -20487,6 +21834,13 @@ __metadata: languageName: node linkType: hard +"ms@npm:2.1.2": + version: 2.1.2 + resolution: "ms@npm:2.1.2" + checksum: 10/673cdb2c3133eb050c745908d8ce632ed2c02d85640e2edb3ace856a2266a813b30c613569bf3354fdf4ea7d1a1494add3bfa95e2713baa27d0c2c71fc44f58f + languageName: node + linkType: hard + "ms@npm:2.1.3, ms@npm:^2.1.1, ms@npm:^2.1.3": version: 2.1.3 resolution: "ms@npm:2.1.3" @@ -20703,6 +22057,13 @@ __metadata: languageName: node linkType: hard +"node-releases@npm:^2.0.14": + version: 2.0.14 + resolution: "node-releases@npm:2.0.14" + checksum: 10/0f7607ec7db5ef1dc616899a5f24ae90c869b6a54c2d4f36ff6d84a282ab9343c7ff3ca3670fe4669171bb1e8a9b3e286e1ef1c131f09a83d70554f855d54f24 + languageName: node + linkType: hard + "node-releases@npm:^2.0.18": version: 2.0.18 resolution: "node-releases@npm:2.0.18" @@ -20717,6 +22078,26 @@ __metadata: languageName: node linkType: hard +"nodemon@npm:^3.1.7": + version: 3.1.7 + resolution: "nodemon@npm:3.1.7" + dependencies: + chokidar: "npm:^3.5.2" + debug: "npm:^4" + ignore-by-default: "npm:^1.0.1" + minimatch: "npm:^3.1.2" + pstree.remy: "npm:^1.1.8" + semver: "npm:^7.5.3" + simple-update-notifier: "npm:^2.0.0" + supports-color: "npm:^5.5.0" + touch: "npm:^3.1.0" + undefsafe: "npm:^2.0.5" + bin: + nodemon: bin/nodemon.js + checksum: 10/07c6b14e4915bfe11abd0ee95bdfd96087dcdb7a37f9d1a57d9526f5f564268432556aa726a4019abf7e48deeff4628a5b34e88ccba8bf46c310c5910ad4a075 + languageName: node + linkType: hard + "nopt@npm:^3.0.6": version: 3.0.6 resolution: "nopt@npm:3.0.6" @@ -20760,7 +22141,7 @@ __metadata: languageName: node linkType: hard -"normalize-path@npm:^3.0.0": +"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0": version: 3.0.0 resolution: "normalize-path@npm:3.0.0" checksum: 10/88eeb4da891e10b1318c4b2476b6e2ecbeb5ff97d946815ffea7794c31a89017c70d7f34b3c2ebf23ef4e9fc9fb99f7dffe36da22011b5b5c6ffa34f4873ec20 @@ -20885,7 +22266,14 @@ __metadata: languageName: node linkType: hard -"nwsapi@npm:^2.2.0, nwsapi@npm:^2.2.12, nwsapi@npm:^2.2.4": +"nwsapi@npm:^2.2.0, nwsapi@npm:^2.2.4": + version: 2.2.7 + resolution: "nwsapi@npm:2.2.7" + checksum: 10/22c002080f0297121ad138aba5a6509e724774d6701fe2c4777627bd939064ecd9e1b6dc1c2c716bb7ca0b9f16247892ff2f664285202ac7eff6ec9543725320 + languageName: node + linkType: hard + +"nwsapi@npm:^2.2.12": version: 2.2.16 resolution: "nwsapi@npm:2.2.16" checksum: 10/1e5e086cdd4ca4a45f414d37f49bf0ca81d84ed31c6871ac68f531917d2910845db61f77c6d844430dc90fda202d43fce9603024e74038675de95229eb834dba @@ -20931,7 +22319,14 @@ __metadata: languageName: node linkType: hard -"object-inspect@npm:^1.13.1, object-inspect@npm:^1.13.3": +"object-inspect@npm:^1.13.1": + version: 1.13.1 + resolution: "object-inspect@npm:1.13.1" + checksum: 10/92f4989ed83422d56431bc39656d4c780348eb15d397ce352ade6b7fec08f973b53744bd41b94af021901e61acaf78fcc19e65bf464ecc0df958586a672700f0 + languageName: node + linkType: hard + +"object-inspect@npm:^1.13.3": version: 1.13.3 resolution: "object-inspect@npm:1.13.3" checksum: 10/14cb973d8381c69e14d7f1c8c75044eb4caf04c6dabcf40ca5c2ce42dc2073ae0bb2a9939eeca142b0c05215afaa1cd5534adb7c8879c32cba2576e045ed8368 @@ -21711,7 +23106,14 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": +"picocolors@npm:^1.0.1": + version: 1.1.0 + resolution: "picocolors@npm:1.1.0" + checksum: 10/a2ad60d94d185c30f2a140b19c512547713fb89b920d32cc6cf658fa786d63a37ba7b8451872c3d9fc34883971fb6e5878e07a20b60506e0bb2554dce9169ccb + languageName: node + linkType: hard + +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 10/60c2595003b05e4535394d1da94850f5372c9427ca4413b71210f437f7b2ca091dbd611c45e8b37d10036fa8eade25c1b8951654f9d3973bfa66a2ff4d3b08bc @@ -22166,7 +23568,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^3.1.1, prettier@npm:^3.3.2": +"prettier@npm:^3.1.1": version: 3.4.1 resolution: "prettier@npm:3.4.1" bin: @@ -22175,6 +23577,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:^3.3.2": + version: 3.3.2 + resolution: "prettier@npm:3.3.2" + bin: + prettier: bin/prettier.cjs + checksum: 10/83214e154afa5aa9b664c2506640212323eb1376b13379b2413dc351b7de0687629dca3f00ff2ec895ebd7e3a2adb7d7e231b6c77606e2358137f2150807405b + languageName: node + linkType: hard + "pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" @@ -22360,6 +23771,13 @@ __metadata: languageName: node linkType: hard +"pstree.remy@npm:^1.1.8": + version: 1.1.8 + resolution: "pstree.remy@npm:1.1.8" + checksum: 10/ef13b1b5896b35f67dbd4fb7ba54bb2a5da1a5c317276cbad4bcad4159bf8f7b5e1748dc244bf36865f3d560d2fc952521581280a91468c9c2df166cc760c8c1 + languageName: node + linkType: hard + "pump@npm:^3.0.0": version: 3.0.2 resolution: "pump@npm:3.0.2" @@ -22407,7 +23825,7 @@ __metadata: languageName: node linkType: hard -"qs@npm:^6.12.3, qs@npm:^6.4.0": +"qs@npm:^6.12.3": version: 6.13.1 resolution: "qs@npm:6.13.1" dependencies: @@ -22416,6 +23834,15 @@ __metadata: languageName: node linkType: hard +"qs@npm:^6.4.0": + version: 6.11.2 + resolution: "qs@npm:6.11.2" + dependencies: + side-channel: "npm:^1.0.4" + checksum: 10/f2321d0796664d0f94e92447ccd3bdfd6b6f3a50b6b762aa79d7f5b1ea3a7a9f94063ba896b82bc2a877ed6a7426d4081e4f16568fdb04f0ee188cca9d8505b4 + languageName: node + linkType: hard + "qs@npm:~6.5.2": version: 6.5.3 resolution: "qs@npm:6.5.3" @@ -22653,6 +24080,15 @@ __metadata: languageName: node linkType: hard +"readdirp@npm:~3.6.0": + version: 3.6.0 + resolution: "readdirp@npm:3.6.0" + dependencies: + picomatch: "npm:^2.2.1" + checksum: 10/196b30ef6ccf9b6e18c4e1724b7334f72a093d011a99f3b5920470f0b3406a51770867b3e1ae9711f227ef7a7065982f6ee2ce316746b2cb42c88efe44297fe7 + languageName: node + linkType: hard + "recast@npm:^0.18.1": version: 0.18.10 resolution: "recast@npm:0.18.10" @@ -24217,6 +25653,15 @@ __metadata: languageName: node linkType: hard +"simple-update-notifier@npm:^2.0.0": + version: 2.0.0 + resolution: "simple-update-notifier@npm:2.0.0" + dependencies: + semver: "npm:^7.5.3" + checksum: 10/40bd4f96aa89aedbf717ae9f4ab8fca70e8f7511e8b766feb15471cca3f6fe4fe673743309b08b4ba8abfe0965c9cd927e1de46550a757b819b70fc7430cc85d + languageName: node + linkType: hard + "sinon@npm:^17.0.0": version: 17.0.1 resolution: "sinon@npm:17.0.1" @@ -25282,7 +26727,7 @@ __metadata: languageName: node linkType: hard -"supports-color@npm:^5.3.0": +"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" dependencies: @@ -25564,7 +27009,7 @@ __metadata: languageName: node linkType: hard -"terser@npm:^5.26.0, terser@npm:^5.7.0": +"terser@npm:^5.26.0": version: 5.36.0 resolution: "terser@npm:5.36.0" dependencies: @@ -25578,6 +27023,20 @@ __metadata: languageName: node linkType: hard +"terser@npm:^5.7.0": + version: 5.26.0 + resolution: "terser@npm:5.26.0" + dependencies: + "@jridgewell/source-map": "npm:^0.3.3" + acorn: "npm:^8.8.2" + commander: "npm:^2.20.0" + source-map-support: "npm:~0.5.20" + bin: + terser: bin/terser + checksum: 10/0282c5c065cbfa1e725d5609b99579252bc20b83cd1d75e8ab8b46d5da2c9d0fcfc453a12624f2d2d4c1240bfa0017a90fcf1e3b88258e5842fca1b0b82be8d8 + languageName: node + linkType: hard + "test-exclude@npm:^6.0.0": version: 6.0.0 resolution: "test-exclude@npm:6.0.0" @@ -25791,6 +27250,13 @@ __metadata: languageName: node linkType: hard +"to-fast-properties@npm:^2.0.0": + version: 2.0.0 + resolution: "to-fast-properties@npm:2.0.0" + checksum: 10/be2de62fe58ead94e3e592680052683b1ec986c72d589e7b21e5697f8744cdbf48c266fa72f6c15932894c10187b5f54573a3bcf7da0bfd964d5caf23d436168 + languageName: node + linkType: hard + "to-object-path@npm:^0.3.0": version: 0.3.0 resolution: "to-object-path@npm:0.3.0" @@ -25845,6 +27311,15 @@ __metadata: languageName: node linkType: hard +"touch@npm:^3.1.0": + version: 3.1.1 + resolution: "touch@npm:3.1.1" + bin: + nodetouch: bin/nodetouch.js + checksum: 10/853e763a1f4903302c5654ed353f84ad85baf757dac62c2d37ab67e0477cfd271e8c64771fcfad42310aff7c9d284ddb435ee5ca13ff36d0f3693fedd8e971d1 + languageName: node + linkType: hard + "tough-cookie@npm:^4.0.0, tough-cookie@npm:^4.1.2": version: 4.1.4 resolution: "tough-cookie@npm:4.1.4" @@ -26103,13 +27578,20 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.4.1, tslib@npm:^2.6.1, tslib@npm:^2.6.2": +"tslib@npm:^2.0.0": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7 languageName: node linkType: hard +"tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.4.1, tslib@npm:^2.6.1, tslib@npm:^2.6.2": + version: 2.6.2 + resolution: "tslib@npm:2.6.2" + checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca + languageName: node + linkType: hard + "tsx@npm:^4.19.2": version: 4.19.2 resolution: "tsx@npm:4.19.2" @@ -26272,7 +27754,7 @@ __metadata: languageName: node linkType: hard -"typescript@npm:^5.3.3, typescript@npm:^5.4.5, typescript@npm:^5.6.3": +"typescript@npm:^5.3.3": version: 5.7.2 resolution: "typescript@npm:5.7.2" bin: @@ -26282,7 +27764,27 @@ __metadata: languageName: node linkType: hard -"typescript@patch:typescript@npm%3A^5.3.3#optional!builtin, typescript@patch:typescript@npm%3A^5.4.5#optional!builtin, typescript@patch:typescript@npm%3A^5.6.3#optional!builtin": +"typescript@npm:^5.4.5": + version: 5.4.5 + resolution: "typescript@npm:5.4.5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10/d04a9e27e6d83861f2126665aa8d84847e8ebabcea9125b9ebc30370b98cb38b5dff2508d74e2326a744938191a83a69aa9fddab41f193ffa43eabfdf3f190a5 + languageName: node + linkType: hard + +"typescript@npm:^5.6.3": + version: 5.6.3 + resolution: "typescript@npm:5.6.3" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10/c328e418e124b500908781d9f7b9b93cf08b66bf5936d94332b463822eea2f4e62973bfb3b8a745fdc038785cb66cf59d1092bac3ec2ac6a3e5854687f7833f1 + languageName: node + linkType: hard + +"typescript@patch:typescript@npm%3A^5.3.3#optional!builtin": version: 5.7.2 resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin::version=5.7.2&hash=74658d" bin: @@ -26292,6 +27794,26 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@npm%3A^5.4.5#optional!builtin": + version: 5.4.5 + resolution: "typescript@patch:typescript@npm%3A5.4.5#optional!builtin::version=5.4.5&hash=5adc0c" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10/760f7d92fb383dbf7dee2443bf902f4365db2117f96f875cf809167f6103d55064de973db9f78fe8f31ec08fff52b2c969aee0d310939c0a3798ec75d0bca2e1 + languageName: node + linkType: hard + +"typescript@patch:typescript@npm%3A^5.6.3#optional!builtin": + version: 5.6.3 + resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin::version=5.6.3&hash=74658d" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10/dc4bec403cd33a204b655b1152a096a08e7bad2c931cb59ef8ff26b6f2aa541bf98f09fc157958a60c921b1983a8dde9a85b692f9de60fa8f574fd131e3ae4dd + languageName: node + linkType: hard + "ua-parser-js@npm:^1.0.38": version: 1.0.39 resolution: "ua-parser-js@npm:1.0.39" @@ -26329,6 +27851,13 @@ __metadata: languageName: node linkType: hard +"undefsafe@npm:^2.0.5": + version: 2.0.5 + resolution: "undefsafe@npm:2.0.5" + checksum: 10/f42ab3b5770fedd4ada175fc1b2eb775b78f609156f7c389106aafd231bfc210813ee49f54483d7191d7b76e483bc7f537b5d92d19ded27156baf57592eb02cc + languageName: node + linkType: hard + "underscore.string@npm:^3.2.2, underscore.string@npm:~3.3.4": version: 3.3.6 resolution: "underscore.string@npm:3.3.6" @@ -26346,6 +27875,13 @@ __metadata: languageName: node linkType: hard +"undici-types@npm:~6.19.8": + version: 6.19.8 + resolution: "undici-types@npm:6.19.8" + checksum: 10/cf0b48ed4fc99baf56584afa91aaffa5010c268b8842f62e02f752df209e3dea138b372a60a963b3b2576ed932f32329ce7ddb9cb5f27a6c83040d8cd74b7a70 + languageName: node + linkType: hard + "undici-types@npm:~6.20.0": version: 6.20.0 resolution: "undici-types@npm:6.20.0" @@ -26661,6 +28197,34 @@ __metadata: languageName: node linkType: hard +"update-browserslist-db@npm:^1.0.13": + version: 1.0.13 + resolution: "update-browserslist-db@npm:1.0.13" + dependencies: + escalade: "npm:^3.1.1" + picocolors: "npm:^1.0.0" + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 10/9074b4ef34d2ed931f27d390aafdd391ee7c45ad83c508e8fed6aaae1eb68f81999a768ed8525c6f88d4001a4fbf1b8c0268f099d0e8e72088ec5945ac796acf + languageName: node + linkType: hard + +"update-browserslist-db@npm:^1.1.0": + version: 1.1.0 + resolution: "update-browserslist-db@npm:1.1.0" + dependencies: + escalade: "npm:^3.1.2" + picocolors: "npm:^1.0.1" + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 10/d70b9efeaf4601aadb1a4f6456a7a5d9118e0063d995866b8e0c5e0cf559482671dab6ce7b079f9536b06758a344fbd83f974b965211e1c6e8d1958540b0c24c + languageName: node + linkType: hard + "update-browserslist-db@npm:^1.1.1": version: 1.1.1 resolution: "update-browserslist-db@npm:1.1.1" @@ -26675,7 +28239,7 @@ __metadata: languageName: node linkType: hard -"uri-js@npm:^4.2.2": +"uri-js@npm:^4.2.2, uri-js@npm:^4.4.1": version: 4.4.1 resolution: "uri-js@npm:4.4.1" dependencies: @@ -27627,9 +29191,9 @@ __metadata: languageName: node linkType: hard -"ws@npm:^8.13.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.2.3": - version: 8.18.0 - resolution: "ws@npm:8.18.0" +"ws@npm:^8.13.0, ws@npm:^8.2.3": + version: 8.15.0 + resolution: "ws@npm:8.15.0" peerDependencies: bufferutil: ^4.0.1 utf-8-validate: ">=5.0.2" @@ -27638,11 +29202,11 @@ __metadata: optional: true utf-8-validate: optional: true - checksum: 10/70dfe53f23ff4368d46e4c0b1d4ca734db2c4149c6f68bc62cb16fc21f753c47b35fcc6e582f3bdfba0eaeb1c488cddab3c2255755a5c3eecb251431e42b3ff6 + checksum: 10/77a106fd0c7284dfb3c2d85e7c8b52f4f898bab0bede8588f443696a6dc95026eb13bda8f390a609340c994c3b88d4839e63c3caf0d0e635575994a3357afdbd languageName: node linkType: hard -"ws@npm:~8.17.1": +"ws@npm:^8.17.1, ws@npm:~8.17.1": version: 8.17.1 resolution: "ws@npm:8.17.1" peerDependencies: @@ -27657,6 +29221,21 @@ __metadata: languageName: node linkType: hard +"ws@npm:^8.18.0": + version: 8.18.0 + resolution: "ws@npm:8.18.0" + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ">=5.0.2" + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + checksum: 10/70dfe53f23ff4368d46e4c0b1d4ca734db2c4149c6f68bc62cb16fc21f753c47b35fcc6e582f3bdfba0eaeb1c488cddab3c2255755a5c3eecb251431e42b3ff6 + languageName: node + linkType: hard + "x-is-string@npm:^0.1.0": version: 0.1.0 resolution: "x-is-string@npm:0.1.0" @@ -27756,7 +29335,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^2.0.0, yaml@npm:^2.2.2, yaml@npm:^2.4.1": +"yaml@npm:^2.0.0": version: 2.6.1 resolution: "yaml@npm:2.6.1" bin: @@ -27765,6 +29344,24 @@ __metadata: languageName: node linkType: hard +"yaml@npm:^2.2.2": + version: 2.6.0 + resolution: "yaml@npm:2.6.0" + bin: + yaml: bin.mjs + checksum: 10/f4369f667c7626c216ea81b5840fe9b530cdae4cff2d84d166ec1239e54bf332dbfac4a71bf60d121f8e85e175364a4e280a520292269b6cf9d074368309adf9 + languageName: node + linkType: hard + +"yaml@npm:^2.4.1": + version: 2.4.5 + resolution: "yaml@npm:2.4.5" + bin: + yaml: bin.mjs + checksum: 10/b09bf5a615a65276d433d76b8e34ad6b4c0320b85eb3f1a39da132c61ae6e2ff34eff4624e6458d96d49566c93cf43408ba5e568218293a8c6541a2006883f64 + languageName: node + linkType: hard + "yargs-parser@npm:^10.0.0": version: 10.1.0 resolution: "yargs-parser@npm:10.1.0" From 08fa678f48b5a500a18f94abbe9f73f43b605d8a Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 1 Oct 2024 11:47:20 +0100 Subject: [PATCH 02/41] updated `build` script to remove check on token category for `font-size` type --- packages/tokens/scripts/build.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index de6ae416dcd..3b77c115833 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -50,7 +50,7 @@ StyleDictionary.registerTransform({ name: 'font-size/rem', type: 'value', filter: function(token) { - return token?.attributes?.category === 'typography' && token.type === 'font-size'; + return token.type === 'font-size'; }, transform: transformPxToRem }); @@ -59,7 +59,7 @@ StyleDictionary.registerTransform({ name: 'font-size/px', type: 'value', filter: function(token) { - return token?.attributes?.category === 'typography' && token.type === 'font-size'; + return token.type === 'font-size'; }, transform: function (token) { const val = parseFloat(token.value); From ed7feb764fd1c2be55ddd6a05b1c7f9aaa274f4c Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 6 Dec 2024 14:41:07 +0000 Subject: [PATCH 03/41] enable logging --- packages/tokens/scripts/build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 3b77c115833..2efa44b3968 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -187,7 +187,7 @@ function getStyleDictionaryConfig({ target }: { target: string }): Config { const { source, transformGroup, platforms } = targets[target]; // we need to explicitly initialize the `config` object this way to make TS happy - const config: Config = {}; + const config: Config = {log: { verbosity: 'verbose' }}; config.source = source; config.platforms = {}; From ede6b01cc0ae6706669020f45a6fd3228128f44e Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 10 Dec 2024 15:13:07 +0000 Subject: [PATCH 04/41] renamed custom transform to avoid bug in SD --- packages/tokens/scripts/build.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 2efa44b3968..1d338e03400 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -34,7 +34,9 @@ const transformPxToRem: Transform['transform'] = (token, platform) => { } StyleDictionary.registerTransform({ - name: 'size/px', + // TODO! there is a bug in SD where registering a transform (more in general a "hook") with the same name as a default one doesn't work if another hook is registered before it (in this case, the 'preprocessor') + // TODO later when the bug is fixed, rename this transform to `size/px` + name: 'size/pixel', type: 'value', filter: function(token) { return token.type === 'size'; @@ -101,18 +103,18 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransformGroup({ name: 'products/web', - transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/sec'] + transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/pixel', 'color/css', 'color/with-alpha', 'time/sec'] }); StyleDictionary.registerTransformGroup({ name: 'products/email', // notice: for emails we need the font-size in `px` (not `rem`) - transforms: ['attribute/cti', 'name/kebab', 'font-size/px', 'size/px', 'color/css', 'color/with-alpha', 'time/sec'] + transforms: ['attribute/cti', 'name/kebab', 'font-size/px', 'size/pixel', 'color/css', 'color/with-alpha', 'time/sec'] }); StyleDictionary.registerTransformGroup({ name: 'marketing/web', - transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/sec'] + transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/pixel', 'color/css', 'color/with-alpha', 'time/sec'] }); StyleDictionary.registerFormat({ From 2337a682fc45e1f1cff87125c327bd9005b6ca87 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 Dec 2024 14:52:15 +0000 Subject: [PATCH 05/41] created folders for theming of colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (notice: all the dark color tokens are set to `#FF0000` on purpose, so it’s easy to debug later) --- .../{ => shared}/color/semantic-border.json | 0 .../{ => shared}/color/semantic-focus.json | 0 .../color/semantic-foreground.json | 0 .../{ => shared}/color/semantic-page.json | 0 .../{ => shared}/color/semantic-surface.json | 0 .../{ => shared}/elevation/elevation.json | 0 .../{ => shared}/elevation/surface.json | 0 .../elevation/values/base-level.json | 0 .../{ => shared}/elevation/values/colors.json | 0 .../elevation/values/high-level.json | 0 .../elevation/values/higher-level.json | 0 .../elevation/values/inset-level.json | 0 .../elevation/values/low-level.json | 0 .../elevation/values/mid-level.json | 0 .../elevation/values/overlay-level.json | 0 .../src/global/{ => shared}/focus-ring.json | 0 .../themed/dark/color/palette-accents.json | 156 ++++++ .../themed/dark/color/palette-neutrals.json | 69 +++ .../themed/dark/color/palette-products.json | 498 ++++++++++++++++++ .../light}/color/palette-accents.json | 0 .../light}/color/palette-neutrals.json | 0 .../light}/color/palette-products.json | 0 22 files changed, 723 insertions(+) rename packages/tokens/src/global/{ => shared}/color/semantic-border.json (100%) rename packages/tokens/src/global/{ => shared}/color/semantic-focus.json (100%) rename packages/tokens/src/global/{ => shared}/color/semantic-foreground.json (100%) rename packages/tokens/src/global/{ => shared}/color/semantic-page.json (100%) rename packages/tokens/src/global/{ => shared}/color/semantic-surface.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/elevation.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/surface.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/base-level.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/colors.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/high-level.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/higher-level.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/inset-level.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/low-level.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/mid-level.json (100%) rename packages/tokens/src/global/{ => shared}/elevation/values/overlay-level.json (100%) rename packages/tokens/src/global/{ => shared}/focus-ring.json (100%) create mode 100644 packages/tokens/src/global/themed/dark/color/palette-accents.json create mode 100644 packages/tokens/src/global/themed/dark/color/palette-neutrals.json create mode 100644 packages/tokens/src/global/themed/dark/color/palette-products.json rename packages/tokens/src/global/{ => themed/light}/color/palette-accents.json (100%) rename packages/tokens/src/global/{ => themed/light}/color/palette-neutrals.json (100%) rename packages/tokens/src/global/{ => themed/light}/color/palette-products.json (100%) diff --git a/packages/tokens/src/global/color/semantic-border.json b/packages/tokens/src/global/shared/color/semantic-border.json similarity index 100% rename from packages/tokens/src/global/color/semantic-border.json rename to packages/tokens/src/global/shared/color/semantic-border.json diff --git a/packages/tokens/src/global/color/semantic-focus.json b/packages/tokens/src/global/shared/color/semantic-focus.json similarity index 100% rename from packages/tokens/src/global/color/semantic-focus.json rename to packages/tokens/src/global/shared/color/semantic-focus.json diff --git a/packages/tokens/src/global/color/semantic-foreground.json b/packages/tokens/src/global/shared/color/semantic-foreground.json similarity index 100% rename from packages/tokens/src/global/color/semantic-foreground.json rename to packages/tokens/src/global/shared/color/semantic-foreground.json diff --git a/packages/tokens/src/global/color/semantic-page.json b/packages/tokens/src/global/shared/color/semantic-page.json similarity index 100% rename from packages/tokens/src/global/color/semantic-page.json rename to packages/tokens/src/global/shared/color/semantic-page.json diff --git a/packages/tokens/src/global/color/semantic-surface.json b/packages/tokens/src/global/shared/color/semantic-surface.json similarity index 100% rename from packages/tokens/src/global/color/semantic-surface.json rename to packages/tokens/src/global/shared/color/semantic-surface.json diff --git a/packages/tokens/src/global/elevation/elevation.json b/packages/tokens/src/global/shared/elevation/elevation.json similarity index 100% rename from packages/tokens/src/global/elevation/elevation.json rename to packages/tokens/src/global/shared/elevation/elevation.json diff --git a/packages/tokens/src/global/elevation/surface.json b/packages/tokens/src/global/shared/elevation/surface.json similarity index 100% rename from packages/tokens/src/global/elevation/surface.json rename to packages/tokens/src/global/shared/elevation/surface.json diff --git a/packages/tokens/src/global/elevation/values/base-level.json b/packages/tokens/src/global/shared/elevation/values/base-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/base-level.json rename to packages/tokens/src/global/shared/elevation/values/base-level.json diff --git a/packages/tokens/src/global/elevation/values/colors.json b/packages/tokens/src/global/shared/elevation/values/colors.json similarity index 100% rename from packages/tokens/src/global/elevation/values/colors.json rename to packages/tokens/src/global/shared/elevation/values/colors.json diff --git a/packages/tokens/src/global/elevation/values/high-level.json b/packages/tokens/src/global/shared/elevation/values/high-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/high-level.json rename to packages/tokens/src/global/shared/elevation/values/high-level.json diff --git a/packages/tokens/src/global/elevation/values/higher-level.json b/packages/tokens/src/global/shared/elevation/values/higher-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/higher-level.json rename to packages/tokens/src/global/shared/elevation/values/higher-level.json diff --git a/packages/tokens/src/global/elevation/values/inset-level.json b/packages/tokens/src/global/shared/elevation/values/inset-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/inset-level.json rename to packages/tokens/src/global/shared/elevation/values/inset-level.json diff --git a/packages/tokens/src/global/elevation/values/low-level.json b/packages/tokens/src/global/shared/elevation/values/low-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/low-level.json rename to packages/tokens/src/global/shared/elevation/values/low-level.json diff --git a/packages/tokens/src/global/elevation/values/mid-level.json b/packages/tokens/src/global/shared/elevation/values/mid-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/mid-level.json rename to packages/tokens/src/global/shared/elevation/values/mid-level.json diff --git a/packages/tokens/src/global/elevation/values/overlay-level.json b/packages/tokens/src/global/shared/elevation/values/overlay-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/overlay-level.json rename to packages/tokens/src/global/shared/elevation/values/overlay-level.json diff --git a/packages/tokens/src/global/focus-ring.json b/packages/tokens/src/global/shared/focus-ring.json similarity index 100% rename from packages/tokens/src/global/focus-ring.json rename to packages/tokens/src/global/shared/focus-ring.json diff --git a/packages/tokens/src/global/themed/dark/color/palette-accents.json b/packages/tokens/src/global/themed/dark/color/palette-accents.json new file mode 100644 index 00000000000..1f3b0e61b2c --- /dev/null +++ b/packages/tokens/src/global/themed/dark/color/palette-accents.json @@ -0,0 +1,156 @@ +{ + "color": { + "palette": { + "blue-500": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "blue-400": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "blue-300": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "blue-200": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "blue-100": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "blue-50": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "purple-500": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "purple-400": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "purple-300": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "purple-200": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "purple-100": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "purple-50": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "green-500": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "green-400": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "green-300": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "green-200": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "green-100": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "green-50": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "amber-500": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "amber-400": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "amber-300": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "amber-200": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "amber-100": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "amber-50": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "red-500": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "red-400": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "red-300": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "red-200": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "red-100": { + "value": "#ff0000", + "type": "color", + "group": "palette" + }, + "red-50": { + "value": "#ff0000", + "type": "color", + "group": "palette" + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/global/themed/dark/color/palette-neutrals.json b/packages/tokens/src/global/themed/dark/color/palette-neutrals.json new file mode 100644 index 00000000000..fa26c78b476 --- /dev/null +++ b/packages/tokens/src/global/themed/dark/color/palette-neutrals.json @@ -0,0 +1,69 @@ +{ + "color": { + "palette": { + "neutral-700": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-600": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-500": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-400": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-300": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-200": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-100": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-50": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "neutral-0": { + "value": "#FF0000", + "type": "color", + "group": "palette" + }, + "alpha-300": { + "value": "{color.palette.neutral-600.value}", + "alpha": "0.4", + "type": "color", + "group": "palette" + }, + "alpha-200": { + "value": "{color.palette.neutral-500.value}", + "alpha": "0.2", + "type": "color", + "group": "palette" + }, + "alpha-100": { + "value": "{color.palette.neutral-500.value}", + "alpha": "0.1", + "type": "color", + "group": "palette" + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/global/themed/dark/color/palette-products.json b/packages/tokens/src/global/themed/dark/color/palette-products.json new file mode 100644 index 00000000000..ef2cd9c1e5b --- /dev/null +++ b/packages/tokens/src/global/themed/dark/color/palette-products.json @@ -0,0 +1,498 @@ +{ + "color": { + "palette": { + "hashicorp-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "boundary-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "consul-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "hcp-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "nomad-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "packer-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "terraform-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vagrant-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-secrets-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "vault-radar-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + }, + "waypoint-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "private": "true" + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/global/color/palette-accents.json b/packages/tokens/src/global/themed/light/color/palette-accents.json similarity index 100% rename from packages/tokens/src/global/color/palette-accents.json rename to packages/tokens/src/global/themed/light/color/palette-accents.json diff --git a/packages/tokens/src/global/color/palette-neutrals.json b/packages/tokens/src/global/themed/light/color/palette-neutrals.json similarity index 100% rename from packages/tokens/src/global/color/palette-neutrals.json rename to packages/tokens/src/global/themed/light/color/palette-neutrals.json diff --git a/packages/tokens/src/global/color/palette-products.json b/packages/tokens/src/global/themed/light/color/palette-products.json similarity index 100% rename from packages/tokens/src/global/color/palette-products.json rename to packages/tokens/src/global/themed/light/color/palette-products.json From 744a69824b09784dc4b4e1f7b507c511550949cd Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Tue, 10 Dec 2024 16:21:56 +0000 Subject: [PATCH 06/41] updated build script to include by default only the light theme files --- packages/tokens/scripts/build.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index 1d338e03400..f08a94ee1b9 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -147,7 +147,8 @@ StyleDictionary.registerAction({ const targets: ConfigTargets = { 'products': { 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/**/*.json` ], 'transformGroup': 'products/web', @@ -155,7 +156,8 @@ const targets: ConfigTargets = { }, 'devdot': { 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/**/*.json`, // just uncomment the line below to include overrides for "devdot" tokens `src/devdot/**/*.json` @@ -165,7 +167,8 @@ const targets: ConfigTargets = { }, 'marketing': { 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/**/*.json`, ], 'transformGroup': 'marketing/web', @@ -175,7 +178,8 @@ const targets: ConfigTargets = { 'cloud-email': { // we need only foundational tokens (colors, typography, etc) 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/color/**/*.json`, `src/products/shared/typography.json`, ], From 28fc34420b2b17a89aec4f96130325dfcc516b65 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 Dec 2024 13:33:32 +0000 Subject: [PATCH 07/41] updated source (themed) tokens to include a `theme` attribute --- .../themed/dark/color/palette-accents.json | 90 ++++++++++++------- .../themed/dark/color/palette-neutrals.json | 36 +++++--- .../themed/dark/color/palette-products.json | 82 +++++++++++++++++ .../themed/light/color/palette-accents.json | 90 ++++++++++++------- .../themed/light/color/palette-neutrals.json | 36 +++++--- .../themed/light/color/palette-products.json | 82 +++++++++++++++++ 6 files changed, 332 insertions(+), 84 deletions(-) diff --git a/packages/tokens/src/global/themed/dark/color/palette-accents.json b/packages/tokens/src/global/themed/dark/color/palette-accents.json index 1f3b0e61b2c..2ce08e4d380 100644 --- a/packages/tokens/src/global/themed/dark/color/palette-accents.json +++ b/packages/tokens/src/global/themed/dark/color/palette-accents.json @@ -4,152 +4,182 @@ "blue-500": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "blue-400": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "blue-300": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "blue-200": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "blue-100": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "blue-50": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "purple-500": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "purple-400": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "purple-300": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "purple-200": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "purple-100": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "purple-50": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "green-500": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "green-400": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "green-300": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "green-200": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "green-100": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "green-50": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "amber-500": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "amber-400": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "amber-300": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "amber-200": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "amber-100": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "amber-50": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "red-500": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "red-400": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "red-300": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "red-200": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "red-100": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "red-50": { "value": "#ff0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" } } } diff --git a/packages/tokens/src/global/themed/dark/color/palette-neutrals.json b/packages/tokens/src/global/themed/dark/color/palette-neutrals.json index fa26c78b476..8488f60ab6a 100644 --- a/packages/tokens/src/global/themed/dark/color/palette-neutrals.json +++ b/packages/tokens/src/global/themed/dark/color/palette-neutrals.json @@ -4,65 +4,77 @@ "neutral-700": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-600": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-500": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-400": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-300": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-200": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-100": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-50": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "neutral-0": { "value": "#FF0000", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "alpha-300": { "value": "{color.palette.neutral-600.value}", "alpha": "0.4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "alpha-200": { "value": "{color.palette.neutral-500.value}", "alpha": "0.2", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" }, "alpha-100": { "value": "{color.palette.neutral-500.value}", "alpha": "0.1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "dark" } } } diff --git a/packages/tokens/src/global/themed/dark/color/palette-products.json b/packages/tokens/src/global/themed/dark/color/palette-products.json index ef2cd9c1e5b..caebad125c1 100644 --- a/packages/tokens/src/global/themed/dark/color/palette-products.json +++ b/packages/tokens/src/global/themed/dark/color/palette-products.json @@ -5,492 +5,574 @@ "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "boundary-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "consul-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "hcp-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "nomad-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "packer-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "terraform-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vagrant-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-secrets-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "vault-radar-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-brand": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-600": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-500": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-400": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-300": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-200": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-100": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" }, "waypoint-50": { "value": "#FF0000", "type": "color", "group": "palette", + "theme": "dark", "private": "true" } } diff --git a/packages/tokens/src/global/themed/light/color/palette-accents.json b/packages/tokens/src/global/themed/light/color/palette-accents.json index 3211aee1c77..2cbc74d7a1f 100644 --- a/packages/tokens/src/global/themed/light/color/palette-accents.json +++ b/packages/tokens/src/global/themed/light/color/palette-accents.json @@ -4,152 +4,182 @@ "blue-500": { "value": "#1c345f", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-400": { "value": "#0046d1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-300": { "value": "#0c56e9", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-200": { "value": "#1060ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-100": { "value": "#cce3fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-50": { "value": "#f2f8ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-500": { "value": "#42215b", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-400": { "value": "#7b00db", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-300": { "value": "#911ced", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-200": { "value": "#a737ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-100": { "value": "#ead2fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-50": { "value": "#f9f2ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-500": { "value": "#054220", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-400": { "value": "#006619", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-300": { "value": "#00781e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-200": { "value": "#008a22", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-100": { "value": "#cceeda", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-50": { "value": "#f2fbf6", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-500": { "value": "#542800", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-400": { "value": "#803d00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-300": { "value": "#9e4b00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-200": { "value": "#bb5a00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-100": { "value": "#fbeabf", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-50": { "value": "#fff9e8", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-500": { "value": "#51130a", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-400": { "value": "#940004", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-300": { "value": "#c00005", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-200": { "value": "#e52228", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-100": { "value": "#fbd4d4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-50": { "value": "#fff5f5", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" } } } diff --git a/packages/tokens/src/global/themed/light/color/palette-neutrals.json b/packages/tokens/src/global/themed/light/color/palette-neutrals.json index cf1d6902317..abc212e818b 100644 --- a/packages/tokens/src/global/themed/light/color/palette-neutrals.json +++ b/packages/tokens/src/global/themed/light/color/palette-neutrals.json @@ -4,65 +4,77 @@ "neutral-700": { "value": "#0c0c0e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-600": { "value": "#3b3d45", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-500": { "value": "#656a76", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-400": { "value": "#8c909c", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-300": { "value": "#c2c5cb", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-200": { "value": "#dedfe3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-100": { "value": "#f1f2f3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-50": { "value": "#fafafa", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-0": { "value": "#ffffff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "alpha-300": { "value": "{color.palette.neutral-600.value}", "alpha": "0.4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "alpha-200": { "value": "{color.palette.neutral-500.value}", "alpha": "0.2", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "alpha-100": { "value": "{color.palette.neutral-500.value}", "alpha": "0.1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" } } } diff --git a/packages/tokens/src/global/themed/light/color/palette-products.json b/packages/tokens/src/global/themed/light/color/palette-products.json index 62979e05eae..21445270942 100644 --- a/packages/tokens/src/global/themed/light/color/palette-products.json +++ b/packages/tokens/src/global/themed/light/color/palette-products.json @@ -5,492 +5,574 @@ "value": "#000000", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-brand": { "value": "#f24c53", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-600": { "value": "#b21e23", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-500": { "value": "#cf2d32", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-400": { "value": "#db363b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-300": { "value": "#f97076", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-200": { "value": "#ff9da2", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-100": { "value": "#fbd7d8", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-50": { "value": "#ffecec", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-brand": { "value": "#e03875", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-600": { "value": "#b10743", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-500": { "value": "#d01c5b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-400": { "value": "#da306e", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-300": { "value": "#ff99be", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-200": { "value": "#ffbbd4", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-100": { "value": "#ffcede", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-50": { "value": "#ffe9f1", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "hcp-brand": { "value": "#000000", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-brand": { "value": "#06d092", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-600": { "value": "#007756", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-500": { "value": "#008661", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-400": { "value": "#22a870", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-300": { "value": "#4cd099", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-200": { "value": "#60dea9", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-100": { "value": "#bff3dd", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-50": { "value": "#d3fdeb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-brand": { "value": "#02a8ef", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-600": { "value": "#0071a1", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-500": { "value": "#007eb4", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-400": { "value": "#1d9ed7", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-300": { "value": "#3cc1fb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-200": { "value": "#63d0ff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-100": { "value": "#b4e4ff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-50": { "value": "#d4f2ff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-brand": { "value": "#7b42bc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-600": { "value": "#5f219e", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-500": { "value": "#773cb4", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-400": { "value": "#844fba", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-300": { "value": "#bb8deb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-200": { "value": "#d8b7fc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-100": { "value": "#ebdbfc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-50": { "value": "#f4ecff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-brand": { "value": "#1868f2", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-600": { "value": "#064abe", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-500": { "value": "#1c61d8", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-400": { "value": "#2e71e5", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-300": { "value": "#639cff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-200": { "value": "#7dadff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-100": { "value": "#c7dbfc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-50": { "value": "#d6ebff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-brand": { "value": "#ffcf25", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-600": { "value": "#8b6400", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-500": { "value": "#9a6f00", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-400": { "value": "#bb8e1a", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-300": { "value": "#f5d712", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-200": { "value": "#ffe543", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-100": { "value": "#feec7b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-50": { "value": "#fff9cf", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-brand": { "value": "#ffcf25", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-600": { "value": "#8b6400", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-500": { "value": "#9a6f00", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-400": { "value": "#bb8e1a", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-300": { "value": "#f5d712", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-200": { "value": "#ffe543", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-100": { "value": "#feec7b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-50": { "value": "#fff9cf", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-brand": { "value": "#ffcf25", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-600": { "value": "#8b6400", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-500": { "value": "#9a6f00", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-400": { "value": "#bb8e1a", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-300": { "value": "#f5d712", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-200": { "value": "#ffe543", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-100": { "value": "#feec7b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-50": { "value": "#fff9cf", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-brand": { "value": "#14c6cb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-600": { "value": "#007487", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-500": { "value": "#008196", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-400": { "value": "#22a4ac", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-300": { "value": "#4fc9d1", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-200": { "value": "#62d4dc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-100": { "value": "#cbf1f3", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-50": { "value": "#e0fcff", "type": "color", "group": "palette", + "theme": "light", "private": "true" } } From af7543fdd51db7848134379404e1288a2acc7770 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 Dec 2024 14:49:20 +0000 Subject: [PATCH 08/41] found a scrappy but working way to generate themed CSS files --- packages/tokens/scripts/@types/Config.d.ts | 1 + .../build-parts/generateExtraThemingFiles.ts | 54 +++++++++ packages/tokens/scripts/build.ts | 107 ++++++++++++++++-- 3 files changed, 154 insertions(+), 8 deletions(-) create mode 100644 packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts diff --git a/packages/tokens/scripts/@types/Config.d.ts b/packages/tokens/scripts/@types/Config.d.ts index 859d42a181a..df7ff711b19 100644 --- a/packages/tokens/scripts/@types/Config.d.ts +++ b/packages/tokens/scripts/@types/Config.d.ts @@ -9,6 +9,7 @@ export type ConfigTarget = { source: Config['source'], transformGroup: Config['transformGroup'], platforms: string[], + destination: string, }; export type ConfigTargets = { diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts new file mode 100644 index 00000000000..75ff43cb955 --- /dev/null +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -0,0 +1,54 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import fs from 'fs-extra'; +import prettier from 'prettier'; + +import type { Dictionary, PlatformConfig } from 'style-dictionary'; +import { fileHeader } from 'style-dictionary/utils'; + +const prettierConfig = { + parser: 'css', + tabWidth: 2, + printWidth: 1000, +} as const; + +export async function generateExtraThemingFiles(_dictionary: Dictionary, config: PlatformConfig ): Promise { + + const darkSource = await fs.readFile(`${config.buildPath}themed-tokens-with-root-selector/dark-tokens.css`, 'utf8'); + const lightSource = await fs.readFile(`${config.buildPath}themed-tokens-with-root-selector/light-tokens.css`, 'utf8'); + const commonSource = await fs.readFile(`${config.buildPath}themed-tokens-with-root-selector/common-tokens.css`, 'utf8'); + + const header = await fileHeader({}); + + const methods = ['prefers-color-scheme', 'css-selectors']; + + for (const method of methods) { + + const outputFolder = `${config.buildPath}themed-tokens-with-${method}/`; + fs.ensureDir(outputFolder); + + let outputContent = `${header}\n\n`; + + if (method === 'prefers-color-scheme') { + outputContent += `@media (prefers-color-scheme: dark) { ${darkSource} }\n\n`; + outputContent += `@media (prefers-color-scheme: light) { ${lightSource} }\n\n`; + } + if (method === 'css-selectors') { + outputContent += `${darkSource.replace(/^:root/, '.hds-theme-dark, [data-hds-theme="dark"]')}\n\n`; + outputContent += `${lightSource.replace(/^:root/, '.hds-theme-light, [data-hds-theme="light"]')}\n\n`; + } + + // this is the fallback to `light` mode (commented for now: consumers can always import the `themed-tokens-with-root-selector/light-tokens.css` as extra file if they want to) + // outputContent += '\n\n'; + // outputContent += `${lightSource}\n\n`; + + outputContent += `${commonSource}\n\n`; + + const outputTokensCss = await prettier.format(outputContent, prettierConfig);; + await fs.writeFile(`${outputFolder}tokens.css`, outputTokensCss); + } + +} diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index f08a94ee1b9..08eef70fc2e 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -17,6 +17,7 @@ import { cloneDeep } from 'lodash-es'; import type { ConfigTargets } from './@types/Config.d.ts'; import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; +import { generateExtraThemingFiles } from './build-parts/generateExtraThemingFiles.ts'; // SCRIPT CONFIG @@ -142,9 +143,38 @@ StyleDictionary.registerAction({ undo: () => {} }); +StyleDictionary.registerAction({ + name: 'generate-extra-theming-files', + do: generateExtraThemingFiles, + undo: () => {} +}); + // DYNAMIC CONFIG const targets: ConfigTargets = { + // THEMING + // TODO temporary hack, while we come up with a more solid approach based on the Style Dictionary APIs + 'products/theme[dark]': { + 'source': [ + `src/global/themed/dark/**/*.json`, + `src/global/shared/**/*.json`, + `src/products/shared/**/*.json` + ], + 'transformGroup': 'products/web', + 'platforms': ['web/css-variables-theme-dark'], + 'destination': 'products' + }, + 'products/theme[light]': { + 'source': [ + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, + `src/products/shared/**/*.json` + ], + 'transformGroup': 'products/web', + 'platforms': ['web/css-variables-theme-light'], + 'destination': 'products' + }, + // NON-THEMED TARGETS 'products': { 'source': [ `src/global/themed/light/**/*.json`, @@ -152,7 +182,8 @@ const targets: ConfigTargets = { `src/products/shared/**/*.json` ], 'transformGroup': 'products/web', - 'platforms': ['web/css-variables', 'docs/json'] + 'platforms': ['web/css-variables', 'docs/json'], + 'destination': 'products' }, 'devdot': { 'source': [ @@ -163,7 +194,8 @@ const targets: ConfigTargets = { `src/devdot/**/*.json` ], 'transformGroup': 'products/web', - 'platforms': ['web/css-variables'] + 'platforms': ['web/css-variables'], + 'destination': 'devdot' }, 'marketing': { 'source': [ @@ -172,7 +204,8 @@ const targets: ConfigTargets = { `src/products/shared/**/*.json`, ], 'transformGroup': 'marketing/web', - 'platforms': ['web/css-variables', 'json'] + 'platforms': ['web/css-variables', 'json'], + 'destination': 'marketing' }, // these tokens will be consumed by the email templating system in https://github.com/hashicorp/cloud-email 'cloud-email': { @@ -184,23 +217,81 @@ const targets: ConfigTargets = { `src/products/shared/typography.json`, ], 'transformGroup': 'products/email', - 'platforms': ['email/sass-variables'] + 'platforms': ['email/sass-variables'], + 'destination': 'cloud-email' } }; function getStyleDictionaryConfig({ target }: { target: string }): Config { // @ts-ignore safe to ignore, since we control the `targets` object, and the `getStyleDictionaryConfig` invocations - const { source, transformGroup, platforms } = targets[target]; + const { source, transformGroup, platforms, destination } = targets[target]; // we need to explicitly initialize the `config` object this way to make TS happy const config: Config = {log: { verbosity: 'verbose' }}; config.source = source; config.platforms = {}; + // EXTRA THEME-RELATED FILES + // TODO we hide all the complexity here, for the moment, in this super-scrappy implementation, until we have a more solid solution leveraging the proper Style Dictionary APIs + + if (platforms.includes('web/css-variables-theme-dark')) { + config.platforms['web/css-variables-theme-dark'] = { + transformGroup, + "buildPath": `dist/${destination}/css/`, + "prefix": "token", + "basePxFontSize": 16, + "files": [ + { + "destination": "themed-tokens-with-root-selector/dark-tokens.css", + "format": "css/variables", + "options": { + "showFileHeader": false + }, + "filter": function(token: DesignToken) { + return !token.private && token.theme === 'dark'; + }, + } + ], + } + } + if (platforms.includes('web/css-variables-theme-light')) { + config.platforms['web/css-variables-theme-light'] = { + transformGroup, + "buildPath": `dist/${destination}/css/`, + "prefix": "token", + "basePxFontSize": 16, + "files": [ + { + "destination": "themed-tokens-with-root-selector/light-tokens.css", + "format": "css/variables", + "options": { + "showFileHeader": false + }, + "filter": function(token: DesignToken) { + return !token.private && token.theme === 'light'; + }, + }, + { + "destination": "themed-tokens-with-root-selector/common-tokens.css", + "format": "css/variables", + "options": { + "showFileHeader": false + }, + "filter": function(token: DesignToken) { + return !token.private && token.theme === undefined; + }, + } + ], + "actions": ['generate-extra-theming-files'] + } + } + + // STANDARD (OLD, NON-THEMED) OUTPUTS + if (platforms.includes('web/css-variables')) { config.platforms['web/css-variables'] = { transformGroup, - "buildPath": `dist/${target}/css/`, + "buildPath": `dist/${destination}/css/`, "prefix": "token", "basePxFontSize": 16, "files": [ @@ -237,7 +328,7 @@ function getStyleDictionaryConfig({ target }: { target: string }): Config { if (platforms.includes("json")) { config.platforms["json"] = { transformGroup, - "buildPath": `dist/${target}/`, + "buildPath": `dist/${destination}/`, "prefix": "token", "basePxFontSize": 16, "files": [ @@ -255,7 +346,7 @@ function getStyleDictionaryConfig({ target }: { target: string }): Config { if (platforms.includes("email/sass-variables")) { config.platforms["email/sass-variables"] = { transformGroup, - "buildPath": `dist/${target}/`, + "buildPath": `dist/${destination}/`, "prefix": "token", "files": [ { From c7c140f959462ab9c34215b296c57dc31e248f58 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 12 Dec 2024 13:46:55 +0000 Subject: [PATCH 09/41] generated CSS output files --- .../tokens/dist/docs/products/tokens.json | 5680 +++++++++++++++-- packages/tokens/dist/marketing/tokens.json | 374 +- .../tokens.css | 624 ++ .../tokens.css | 626 ++ .../common-tokens.css | 528 ++ .../dark-tokens.css | 44 + .../light-tokens.css | 44 + 7 files changed, 7297 insertions(+), 623 deletions(-) create mode 100644 packages/tokens/dist/products/css/themed-tokens-with-css-selectors/tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens-with-prefers-color-scheme/tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens-with-root-selector/common-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens-with-root-selector/dark-tokens.css create mode 100644 packages/tokens/dist/products/css/themed-tokens-with-root-selector/light-tokens.css diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index ffb45cd5e08..9e9d18b927f 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -3,10 +3,12 @@ "value": "#1c345f", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#1c345f", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-500", "attributes": { @@ -18,16 +20,19 @@ "color", "palette", "blue-500" - ] + ], + "key": "{color.palette.blue-500}" }, { "value": "#0046d1", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#0046d1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-400", "attributes": { @@ -39,16 +44,19 @@ "color", "palette", "blue-400" - ] + ], + "key": "{color.palette.blue-400}" }, { "value": "#0c56e9", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#0c56e9", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-300", "attributes": { @@ -60,16 +68,19 @@ "color", "palette", "blue-300" - ] + ], + "key": "{color.palette.blue-300}" }, { "value": "#1060ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#1060ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-200", "attributes": { @@ -81,16 +92,19 @@ "color", "palette", "blue-200" - ] + ], + "key": "{color.palette.blue-200}" }, { "value": "#cce3fe", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#cce3fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-100", "attributes": { @@ -102,16 +116,19 @@ "color", "palette", "blue-100" - ] + ], + "key": "{color.palette.blue-100}" }, { "value": "#f2f8ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f2f8ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-50", "attributes": { @@ -123,16 +140,19 @@ "color", "palette", "blue-50" - ] + ], + "key": "{color.palette.blue-50}" }, { "value": "#42215b", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#42215b", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-500", "attributes": { @@ -144,16 +164,19 @@ "color", "palette", "purple-500" - ] + ], + "key": "{color.palette.purple-500}" }, { "value": "#7b00db", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#7b00db", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-400", "attributes": { @@ -165,16 +188,19 @@ "color", "palette", "purple-400" - ] + ], + "key": "{color.palette.purple-400}" }, { "value": "#911ced", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#911ced", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-300", "attributes": { @@ -186,16 +212,19 @@ "color", "palette", "purple-300" - ] + ], + "key": "{color.palette.purple-300}" }, { "value": "#a737ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#a737ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-200", "attributes": { @@ -207,16 +236,19 @@ "color", "palette", "purple-200" - ] + ], + "key": "{color.palette.purple-200}" }, { "value": "#ead2fe", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#ead2fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-100", "attributes": { @@ -228,16 +260,19 @@ "color", "palette", "purple-100" - ] + ], + "key": "{color.palette.purple-100}" }, { "value": "#f9f2ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f9f2ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-50", "attributes": { @@ -249,16 +284,19 @@ "color", "palette", "purple-50" - ] + ], + "key": "{color.palette.purple-50}" }, { "value": "#054220", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#054220", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-500", "attributes": { @@ -270,16 +308,19 @@ "color", "palette", "green-500" - ] + ], + "key": "{color.palette.green-500}" }, { "value": "#006619", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#006619", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-400", "attributes": { @@ -291,16 +332,19 @@ "color", "palette", "green-400" - ] + ], + "key": "{color.palette.green-400}" }, { "value": "#00781e", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#00781e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-300", "attributes": { @@ -312,16 +356,19 @@ "color", "palette", "green-300" - ] + ], + "key": "{color.palette.green-300}" }, { "value": "#008a22", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#008a22", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-200", "attributes": { @@ -333,16 +380,19 @@ "color", "palette", "green-200" - ] + ], + "key": "{color.palette.green-200}" }, { "value": "#cceeda", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#cceeda", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-100", "attributes": { @@ -354,16 +404,19 @@ "color", "palette", "green-100" - ] + ], + "key": "{color.palette.green-100}" }, { "value": "#f2fbf6", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f2fbf6", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-50", "attributes": { @@ -375,16 +428,19 @@ "color", "palette", "green-50" - ] + ], + "key": "{color.palette.green-50}" }, { "value": "#542800", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#542800", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-500", "attributes": { @@ -396,16 +452,19 @@ "color", "palette", "amber-500" - ] + ], + "key": "{color.palette.amber-500}" }, { "value": "#803d00", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#803d00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-400", "attributes": { @@ -417,16 +476,19 @@ "color", "palette", "amber-400" - ] + ], + "key": "{color.palette.amber-400}" }, { "value": "#9e4b00", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#9e4b00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-300", "attributes": { @@ -438,16 +500,19 @@ "color", "palette", "amber-300" - ] + ], + "key": "{color.palette.amber-300}" }, { "value": "#bb5a00", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#bb5a00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-200", "attributes": { @@ -459,16 +524,19 @@ "color", "palette", "amber-200" - ] + ], + "key": "{color.palette.amber-200}" }, { "value": "#fbeabf", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fbeabf", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-100", "attributes": { @@ -480,16 +548,19 @@ "color", "palette", "amber-100" - ] + ], + "key": "{color.palette.amber-100}" }, { "value": "#fff9e8", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fff9e8", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-50", "attributes": { @@ -501,16 +572,19 @@ "color", "palette", "amber-50" - ] + ], + "key": "{color.palette.amber-50}" }, { "value": "#51130a", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#51130a", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-500", "attributes": { @@ -522,16 +596,19 @@ "color", "palette", "red-500" - ] + ], + "key": "{color.palette.red-500}" }, { "value": "#940004", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#940004", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-400", "attributes": { @@ -543,16 +620,19 @@ "color", "palette", "red-400" - ] + ], + "key": "{color.palette.red-400}" }, { "value": "#c00005", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#c00005", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-300", "attributes": { @@ -564,16 +644,19 @@ "color", "palette", "red-300" - ] + ], + "key": "{color.palette.red-300}" }, { "value": "#e52228", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#e52228", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-200", "attributes": { @@ -585,16 +668,19 @@ "color", "palette", "red-200" - ] + ], + "key": "{color.palette.red-200}" }, { "value": "#fbd4d4", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fbd4d4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-100", "attributes": { @@ -606,16 +692,19 @@ "color", "palette", "red-100" - ] + ], + "key": "{color.palette.red-100}" }, { "value": "#fff5f5", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fff5f5", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-50", "attributes": { @@ -627,16 +716,19 @@ "color", "palette", "red-50" - ] + ], + "key": "{color.palette.red-50}" }, { "value": "#0c0c0e", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#0c0c0e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-700", "attributes": { @@ -648,16 +740,19 @@ "color", "palette", "neutral-700" - ] + ], + "key": "{color.palette.neutral-700}" }, { "value": "#3b3d45", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#3b3d45", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-600", "attributes": { @@ -669,16 +764,19 @@ "color", "palette", "neutral-600" - ] + ], + "key": "{color.palette.neutral-600}" }, { "value": "#656a76", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#656a76", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-500", "attributes": { @@ -690,16 +788,19 @@ "color", "palette", "neutral-500" - ] + ], + "key": "{color.palette.neutral-500}" }, { "value": "#8c909c", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#8c909c", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-400", "attributes": { @@ -711,16 +812,19 @@ "color", "palette", "neutral-400" - ] + ], + "key": "{color.palette.neutral-400}" }, { "value": "#c2c5cb", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#c2c5cb", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-300", "attributes": { @@ -732,16 +836,19 @@ "color", "palette", "neutral-300" - ] + ], + "key": "{color.palette.neutral-300}" }, { "value": "#dedfe3", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#dedfe3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-200", "attributes": { @@ -753,16 +860,19 @@ "color", "palette", "neutral-200" - ] + ], + "key": "{color.palette.neutral-200}" }, { "value": "#f1f2f3", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f1f2f3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-100", "attributes": { @@ -774,16 +884,19 @@ "color", "palette", "neutral-100" - ] + ], + "key": "{color.palette.neutral-100}" }, { "value": "#fafafa", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fafafa", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-50", "attributes": { @@ -795,16 +908,19 @@ "color", "palette", "neutral-50" - ] + ], + "key": "{color.palette.neutral-50}" }, { "value": "#ffffff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#ffffff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-0", "attributes": { @@ -816,18 +932,21 @@ "color", "palette", "neutral-0" - ] + ], + "key": "{color.palette.neutral-0}" }, { "value": "#3b3d4566", "alpha": "0.4", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "{color.palette.neutral-600.value}", "alpha": "0.4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-300", "attributes": { @@ -839,18 +958,21 @@ "color", "palette", "alpha-300" - ] + ], + "key": "{color.palette.alpha-300}" }, { "value": "#656a7633", "alpha": "0.2", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.2", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-200", "attributes": { @@ -862,18 +984,21 @@ "color", "palette", "alpha-200" - ] + ], + "key": "{color.palette.alpha-200}" }, { "value": "#656a761a", "alpha": "0.1", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-100", "attributes": { @@ -885,7 +1010,8 @@ "color", "palette", "alpha-100" - ] + ], + "key": "{color.palette.alpha-100}" }, { "value": "#656a7633", @@ -906,7 +1032,8 @@ "color", "border", "primary" - ] + ], + "key": "{color.border.primary}" }, { "value": "#656a761a", @@ -927,7 +1054,8 @@ "color", "border", "faint" - ] + ], + "key": "{color.border.faint}" }, { "value": "#3b3d4566", @@ -948,7 +1076,8 @@ "color", "border", "strong" - ] + ], + "key": "{color.border.strong}" }, { "value": "#cce3fe", @@ -969,7 +1098,8 @@ "color", "border", "action" - ] + ], + "key": "{color.border.action}" }, { "value": "#ead2fe", @@ -990,7 +1120,8 @@ "color", "border", "highlight" - ] + ], + "key": "{color.border.highlight}" }, { "value": "#cceeda", @@ -1011,7 +1142,8 @@ "color", "border", "success" - ] + ], + "key": "{color.border.success}" }, { "value": "#fbeabf", @@ -1032,7 +1164,8 @@ "color", "border", "warning" - ] + ], + "key": "{color.border.warning}" }, { "value": "#fbd4d4", @@ -1053,7 +1186,8 @@ "color", "border", "critical" - ] + ], + "key": "{color.border.critical}" }, { "value": "#0c56e9", @@ -1076,7 +1210,8 @@ "focus", "action", "internal" - ] + ], + "key": "{color.focus.action.internal}" }, { "value": "#5990ff", @@ -1101,7 +1236,8 @@ "focus", "action", "external" - ] + ], + "key": "{color.focus.action.external}" }, { "value": "#c00005", @@ -1124,7 +1260,8 @@ "focus", "critical", "internal" - ] + ], + "key": "{color.focus.critical.internal}" }, { "value": "#dd7578", @@ -1149,7 +1286,8 @@ "focus", "critical", "external" - ] + ], + "key": "{color.focus.critical.external}" }, { "value": "#0c0c0e", @@ -1170,7 +1308,8 @@ "color", "foreground", "strong" - ] + ], + "key": "{color.foreground.strong}" }, { "value": "#3b3d45", @@ -1191,7 +1330,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{color.foreground.primary}" }, { "value": "#656a76", @@ -1212,7 +1352,8 @@ "color", "foreground", "faint" - ] + ], + "key": "{color.foreground.faint}" }, { "value": "#ffffff", @@ -1233,7 +1374,8 @@ "color", "foreground", "high-contrast" - ] + ], + "key": "{color.foreground.high-contrast}" }, { "value": "#8c909c", @@ -1254,7 +1396,8 @@ "color", "foreground", "disabled" - ] + ], + "key": "{color.foreground.disabled}" }, { "value": "#1060ff", @@ -1275,7 +1418,8 @@ "color", "foreground", "action" - ] + ], + "key": "{color.foreground.action}" }, { "value": "#0c56e9", @@ -1296,7 +1440,8 @@ "color", "foreground", "action-hover" - ] + ], + "key": "{color.foreground.action-hover}" }, { "value": "#0046d1", @@ -1317,7 +1462,8 @@ "color", "foreground", "action-active" - ] + ], + "key": "{color.foreground.action-active}" }, { "value": "#a737ff", @@ -1338,7 +1484,8 @@ "color", "foreground", "highlight" - ] + ], + "key": "{color.foreground.highlight}" }, { "value": "#911ced", @@ -1359,7 +1506,8 @@ "color", "foreground", "highlight-on-surface" - ] + ], + "key": "{color.foreground.highlight-on-surface}" }, { "value": "#42215b", @@ -1380,7 +1528,8 @@ "color", "foreground", "highlight-high-contrast" - ] + ], + "key": "{color.foreground.highlight-high-contrast}" }, { "value": "#008a22", @@ -1401,7 +1550,8 @@ "color", "foreground", "success" - ] + ], + "key": "{color.foreground.success}" }, { "value": "#00781e", @@ -1422,7 +1572,8 @@ "color", "foreground", "success-on-surface" - ] + ], + "key": "{color.foreground.success-on-surface}" }, { "value": "#054220", @@ -1443,7 +1594,8 @@ "color", "foreground", "success-high-contrast" - ] + ], + "key": "{color.foreground.success-high-contrast}" }, { "value": "#bb5a00", @@ -1464,7 +1616,8 @@ "color", "foreground", "warning" - ] + ], + "key": "{color.foreground.warning}" }, { "value": "#9e4b00", @@ -1485,7 +1638,8 @@ "color", "foreground", "warning-on-surface" - ] + ], + "key": "{color.foreground.warning-on-surface}" }, { "value": "#542800", @@ -1506,7 +1660,8 @@ "color", "foreground", "warning-high-contrast" - ] + ], + "key": "{color.foreground.warning-high-contrast}" }, { "value": "#e52228", @@ -1527,7 +1682,8 @@ "color", "foreground", "critical" - ] + ], + "key": "{color.foreground.critical}" }, { "value": "#c00005", @@ -1548,7 +1704,8 @@ "color", "foreground", "critical-on-surface" - ] + ], + "key": "{color.foreground.critical-on-surface}" }, { "value": "#51130a", @@ -1569,7 +1726,8 @@ "color", "foreground", "critical-high-contrast" - ] + ], + "key": "{color.foreground.critical-high-contrast}" }, { "value": "#ffffff", @@ -1590,7 +1748,8 @@ "color", "page", "primary" - ] + ], + "key": "{color.page.primary}" }, { "value": "#fafafa", @@ -1611,7 +1770,8 @@ "color", "page", "faint" - ] + ], + "key": "{color.page.faint}" }, { "value": "#ffffff", @@ -1632,7 +1792,8 @@ "color", "surface", "primary" - ] + ], + "key": "{color.surface.primary}" }, { "value": "#fafafa", @@ -1653,7 +1814,8 @@ "color", "surface", "faint" - ] + ], + "key": "{color.surface.faint}" }, { "value": "#f1f2f3", @@ -1674,7 +1836,8 @@ "color", "surface", "strong" - ] + ], + "key": "{color.surface.strong}" }, { "value": "#ffffff", @@ -1695,7 +1858,8 @@ "color", "surface", "interactive" - ] + ], + "key": "{color.surface.interactive}" }, { "value": "#f1f2f3", @@ -1716,7 +1880,8 @@ "color", "surface", "interactive-hover" - ] + ], + "key": "{color.surface.interactive-hover}" }, { "value": "#dedfe3", @@ -1737,7 +1902,8 @@ "color", "surface", "interactive-active" - ] + ], + "key": "{color.surface.interactive-active}" }, { "value": "#fafafa", @@ -1758,7 +1924,8 @@ "color", "surface", "interactive-disabled" - ] + ], + "key": "{color.surface.interactive-disabled}" }, { "value": "#f2f8ff", @@ -1779,7 +1946,8 @@ "color", "surface", "action" - ] + ], + "key": "{color.surface.action}" }, { "value": "#f9f2ff", @@ -1800,7 +1968,8 @@ "color", "surface", "highlight" - ] + ], + "key": "{color.surface.highlight}" }, { "value": "#f2fbf6", @@ -1821,7 +1990,8 @@ "color", "surface", "success" - ] + ], + "key": "{color.surface.success}" }, { "value": "#fff9e8", @@ -1842,7 +2012,8 @@ "color", "surface", "warning" - ] + ], + "key": "{color.surface.warning}" }, { "value": "#fff5f5", @@ -1863,7 +2034,8 @@ "color", "surface", "critical" - ] + ], + "key": "{color.surface.critical}" }, { "value": "#000000", @@ -1884,7 +2056,8 @@ "color", "hashicorp", "brand" - ] + ], + "key": "{color.hashicorp.brand}" }, { "value": "#f24c53", @@ -1905,7 +2078,8 @@ "color", "boundary", "brand" - ] + ], + "key": "{color.boundary.brand}" }, { "value": "#cf2d32", @@ -1926,7 +2100,8 @@ "color", "boundary", "foreground" - ] + ], + "key": "{color.boundary.foreground}" }, { "value": "#ffecec", @@ -1947,7 +2122,8 @@ "color", "boundary", "surface" - ] + ], + "key": "{color.boundary.surface}" }, { "value": "#fbd7d8", @@ -1968,7 +2144,8 @@ "color", "boundary", "border" - ] + ], + "key": "{color.boundary.border}" }, { "value": "#f97076", @@ -1993,7 +2170,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.boundary.gradient.primary.start}" }, { "value": "#db363b", @@ -2018,7 +2196,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.boundary.gradient.primary.stop}" }, { "value": "#fffafa", @@ -2045,7 +2224,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.boundary.gradient.faint.start}" }, { "value": "#ffecec", @@ -2070,7 +2250,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.boundary.gradient.faint.stop}" }, { "value": "#e03875", @@ -2091,7 +2272,8 @@ "color", "consul", "brand" - ] + ], + "key": "{color.consul.brand}" }, { "value": "#d01c5b", @@ -2112,7 +2294,8 @@ "color", "consul", "foreground" - ] + ], + "key": "{color.consul.foreground}" }, { "value": "#ffe9f1", @@ -2133,7 +2316,8 @@ "color", "consul", "surface" - ] + ], + "key": "{color.consul.surface}" }, { "value": "#ffcede", @@ -2154,7 +2338,8 @@ "color", "consul", "border" - ] + ], + "key": "{color.consul.border}" }, { "value": "#ff99be", @@ -2179,7 +2364,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.consul.gradient.primary.start}" }, { "value": "#da306e", @@ -2204,7 +2390,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.consul.gradient.primary.stop}" }, { "value": "#fff9fb", @@ -2231,7 +2418,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.consul.gradient.faint.start}" }, { "value": "#ffe9f1", @@ -2256,7 +2444,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.consul.gradient.faint.stop}" }, { "value": "#000000", @@ -2277,7 +2466,8 @@ "color", "hcp", "brand" - ] + ], + "key": "{color.hcp.brand}" }, { "value": "#06d092", @@ -2298,7 +2488,8 @@ "color", "nomad", "brand" - ] + ], + "key": "{color.nomad.brand}" }, { "value": "#008661", @@ -2319,7 +2510,8 @@ "color", "nomad", "foreground" - ] + ], + "key": "{color.nomad.foreground}" }, { "value": "#d3fdeb", @@ -2340,7 +2532,8 @@ "color", "nomad", "surface" - ] + ], + "key": "{color.nomad.surface}" }, { "value": "#bff3dd", @@ -2361,7 +2554,8 @@ "color", "nomad", "border" - ] + ], + "key": "{color.nomad.border}" }, { "value": "#bff3dd", @@ -2386,7 +2580,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.nomad.gradient.primary.start}" }, { "value": "#60dea9", @@ -2411,7 +2606,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.nomad.gradient.primary.stop}" }, { "value": "#f3fff9", @@ -2438,7 +2634,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.nomad.gradient.faint.start}" }, { "value": "#d3fdeb", @@ -2463,7 +2660,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.nomad.gradient.faint.stop}" }, { "value": "#02a8ef", @@ -2484,7 +2682,8 @@ "color", "packer", "brand" - ] + ], + "key": "{color.packer.brand}" }, { "value": "#007eb4", @@ -2505,7 +2704,8 @@ "color", "packer", "foreground" - ] + ], + "key": "{color.packer.foreground}" }, { "value": "#d4f2ff", @@ -2526,7 +2726,8 @@ "color", "packer", "surface" - ] + ], + "key": "{color.packer.surface}" }, { "value": "#b4e4ff", @@ -2547,7 +2748,8 @@ "color", "packer", "border" - ] + ], + "key": "{color.packer.border}" }, { "value": "#b4e4ff", @@ -2572,7 +2774,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.packer.gradient.primary.start}" }, { "value": "#63d0ff", @@ -2597,7 +2800,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.packer.gradient.primary.stop}" }, { "value": "#f3fcff", @@ -2624,7 +2828,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.packer.gradient.faint.start}" }, { "value": "#d4f2ff", @@ -2649,7 +2854,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.packer.gradient.faint.stop}" }, { "value": "#7b42bc", @@ -2670,7 +2876,8 @@ "color", "terraform", "brand" - ] + ], + "key": "{color.terraform.brand}" }, { "value": "#a067da", @@ -2693,7 +2900,8 @@ "color", "terraform", "brand-on-dark" - ] + ], + "key": "{color.terraform.brand-on-dark}" }, { "value": "#773cb4", @@ -2714,7 +2922,8 @@ "color", "terraform", "foreground" - ] + ], + "key": "{color.terraform.foreground}" }, { "value": "#f4ecff", @@ -2735,7 +2944,8 @@ "color", "terraform", "surface" - ] + ], + "key": "{color.terraform.surface}" }, { "value": "#ebdbfc", @@ -2756,7 +2966,8 @@ "color", "terraform", "border" - ] + ], + "key": "{color.terraform.border}" }, { "value": "#bb8deb", @@ -2781,7 +2992,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.terraform.gradient.primary.start}" }, { "value": "#844fba", @@ -2806,7 +3018,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.terraform.gradient.primary.stop}" }, { "value": "#fcfaff", @@ -2833,7 +3046,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.terraform.gradient.faint.start}" }, { "value": "#f4ecff", @@ -2858,7 +3072,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.terraform.gradient.faint.stop}" }, { "value": "#1868f2", @@ -2879,7 +3094,8 @@ "color", "vagrant", "brand" - ] + ], + "key": "{color.vagrant.brand}" }, { "value": "#1c61d8", @@ -2900,7 +3116,8 @@ "color", "vagrant", "foreground" - ] + ], + "key": "{color.vagrant.foreground}" }, { "value": "#d6ebff", @@ -2921,7 +3138,8 @@ "color", "vagrant", "surface" - ] + ], + "key": "{color.vagrant.surface}" }, { "value": "#c7dbfc", @@ -2942,7 +3160,8 @@ "color", "vagrant", "border" - ] + ], + "key": "{color.vagrant.border}" }, { "value": "#639cff", @@ -2967,7 +3186,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vagrant.gradient.primary.start}" }, { "value": "#2e71e5", @@ -2992,7 +3212,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vagrant.gradient.primary.stop}" }, { "value": "#f4faff", @@ -3019,7 +3240,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vagrant.gradient.faint.start}" }, { "value": "#d6ebff", @@ -3044,7 +3266,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vagrant.gradient.faint.stop}" }, { "value": "#ffcf25", @@ -3065,7 +3288,8 @@ "color", "vault-radar", "brand" - ] + ], + "key": "{color.vault-radar.brand}" }, { "value": "#000000", @@ -3088,7 +3312,8 @@ "color", "vault-radar", "brand-alt" - ] + ], + "key": "{color.vault-radar.brand-alt}" }, { "value": "#9a6f00", @@ -3109,7 +3334,8 @@ "color", "vault-radar", "foreground" - ] + ], + "key": "{color.vault-radar.foreground}" }, { "value": "#fff9cf", @@ -3130,7 +3356,8 @@ "color", "vault-radar", "surface" - ] + ], + "key": "{color.vault-radar.surface}" }, { "value": "#feec7b", @@ -3151,7 +3378,8 @@ "color", "vault-radar", "border" - ] + ], + "key": "{color.vault-radar.border}" }, { "value": "#feec7b", @@ -3176,7 +3404,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vault-radar.gradient.primary.start}" }, { "value": "#ffe543", @@ -3201,7 +3430,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vault-radar.gradient.primary.stop}" }, { "value": "#fffdf2", @@ -3228,7 +3458,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vault-radar.gradient.faint.start}" }, { "value": "#fff9cf", @@ -3253,7 +3484,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vault-radar.gradient.faint.stop}" }, { "value": "#ffcf25", @@ -3274,7 +3506,8 @@ "color", "vault-secrets", "brand" - ] + ], + "key": "{color.vault-secrets.brand}" }, { "value": "#000000", @@ -3297,7 +3530,8 @@ "color", "vault-secrets", "brand-alt" - ] + ], + "key": "{color.vault-secrets.brand-alt}" }, { "value": "#9a6f00", @@ -3318,7 +3552,8 @@ "color", "vault-secrets", "foreground" - ] + ], + "key": "{color.vault-secrets.foreground}" }, { "value": "#fff9cf", @@ -3339,7 +3574,8 @@ "color", "vault-secrets", "surface" - ] + ], + "key": "{color.vault-secrets.surface}" }, { "value": "#feec7b", @@ -3360,7 +3596,8 @@ "color", "vault-secrets", "border" - ] + ], + "key": "{color.vault-secrets.border}" }, { "value": "#feec7b", @@ -3385,7 +3622,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vault-secrets.gradient.primary.start}" }, { "value": "#ffe543", @@ -3410,7 +3648,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vault-secrets.gradient.primary.stop}" }, { "value": "#fffdf2", @@ -3437,7 +3676,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vault-secrets.gradient.faint.start}" }, { "value": "#fff9cf", @@ -3462,7 +3702,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vault-secrets.gradient.faint.stop}" }, { "value": "#ffcf25", @@ -3483,7 +3724,8 @@ "color", "vault", "brand" - ] + ], + "key": "{color.vault.brand}" }, { "value": "#000000", @@ -3506,7 +3748,8 @@ "color", "vault", "brand-alt" - ] + ], + "key": "{color.vault.brand-alt}" }, { "value": "#9a6f00", @@ -3527,7 +3770,8 @@ "color", "vault", "foreground" - ] + ], + "key": "{color.vault.foreground}" }, { "value": "#fff9cf", @@ -3548,7 +3792,8 @@ "color", "vault", "surface" - ] + ], + "key": "{color.vault.surface}" }, { "value": "#feec7b", @@ -3569,7 +3814,8 @@ "color", "vault", "border" - ] + ], + "key": "{color.vault.border}" }, { "value": "#feec7b", @@ -3594,7 +3840,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vault.gradient.primary.start}" }, { "value": "#ffe543", @@ -3619,7 +3866,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vault.gradient.primary.stop}" }, { "value": "#fffdf2", @@ -3646,7 +3894,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vault.gradient.faint.start}" }, { "value": "#fff9cf", @@ -3671,7 +3920,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vault.gradient.faint.stop}" }, { "value": "#14c6cb", @@ -3692,7 +3942,8 @@ "color", "waypoint", "brand" - ] + ], + "key": "{color.waypoint.brand}" }, { "value": "#008196", @@ -3713,7 +3964,8 @@ "color", "waypoint", "foreground" - ] + ], + "key": "{color.waypoint.foreground}" }, { "value": "#e0fcff", @@ -3734,7 +3986,8 @@ "color", "waypoint", "surface" - ] + ], + "key": "{color.waypoint.surface}" }, { "value": "#cbf1f3", @@ -3755,7 +4008,8 @@ "color", "waypoint", "border" - ] + ], + "key": "{color.waypoint.border}" }, { "value": "#cbf1f3", @@ -3780,7 +4034,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.waypoint.gradient.primary.start}" }, { "value": "#62d4dc", @@ -3805,7 +4060,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.waypoint.gradient.primary.stop}" }, { "value": "#f6feff", @@ -3832,7 +4088,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.waypoint.gradient.faint.start}" }, { "value": "#e0fcff", @@ -3857,7 +4114,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.waypoint.gradient.faint.stop}" }, { "value": "inset 0px 1px 2px 1px #656a761a", @@ -3874,7 +4132,8 @@ "elevation", "inset", "box-shadow" - ] + ], + "key": "{elevation.inset.box-shadow}" }, { "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", @@ -3891,7 +4150,8 @@ "elevation", "low", "box-shadow" - ] + ], + "key": "{elevation.low.box-shadow}" }, { "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", @@ -3908,7 +4168,8 @@ "elevation", "mid", "box-shadow" - ] + ], + "key": "{elevation.mid.box-shadow}" }, { "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", @@ -3925,7 +4186,8 @@ "elevation", "high", "box-shadow" - ] + ], + "key": "{elevation.high.box-shadow}" }, { "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", @@ -3942,7 +4204,8 @@ "elevation", "higher", "box-shadow" - ] + ], + "key": "{elevation.higher.box-shadow}" }, { "value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", @@ -3959,7 +4222,8 @@ "elevation", "overlay", "box-shadow" - ] + ], + "key": "{elevation.overlay.box-shadow}" }, { "value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", @@ -3976,7 +4240,8 @@ "surface", "inset", "box-shadow" - ] + ], + "key": "{surface.inset.box-shadow}" }, { "value": "0 0 0 1px #656a7633", @@ -3993,7 +4258,8 @@ "surface", "base", "box-shadow" - ] + ], + "key": "{surface.base.box-shadow}" }, { "value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", @@ -4010,7 +4276,8 @@ "surface", "low", "box-shadow" - ] + ], + "key": "{surface.low.box-shadow}" }, { "value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", @@ -4027,7 +4294,8 @@ "surface", "mid", "box-shadow" - ] + ], + "key": "{surface.mid.box-shadow}" }, { "value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", @@ -4044,7 +4312,8 @@ "surface", "high", "box-shadow" - ] + ], + "key": "{surface.high.box-shadow}" }, { "value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", @@ -4061,7 +4330,8 @@ "surface", "higher", "box-shadow" - ] + ], + "key": "{surface.higher.box-shadow}" }, { "value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", @@ -4078,7 +4348,8 @@ "surface", "overlay", "box-shadow" - ] + ], + "key": "{surface.overlay.box-shadow}" }, { "value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", @@ -4095,7 +4366,8 @@ "focus-ring", "action", "box-shadow" - ] + ], + "key": "{focus-ring.action.box-shadow}" }, { "value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", @@ -4112,7 +4384,8 @@ "focus-ring", "critical", "box-shadow" - ] + ], + "key": "{focus-ring.critical.box-shadow}" }, { "value": "60px", @@ -4129,7 +4402,8 @@ "path": [ "app-header", "height" - ] + ], + "key": "{app-header.height}" }, { "value": "36px", @@ -4148,7 +4422,8 @@ "app-header", "home-link", "size" - ] + ], + "key": "{app-header.home-link.size}" }, { "value": "28px", @@ -4167,7 +4442,8 @@ "app-header", "logo", "size" - ] + ], + "key": "{app-header.logo.size}" }, { "value": "1px", @@ -4188,7 +4464,8 @@ "wrapper", "border", "width" - ] + ], + "key": "{app-side-nav.wrapper.border.width}" }, { "value": "var(--token-color-palette-neutral-200)", @@ -4211,7 +4488,8 @@ "wrapper", "border", "color" - ] + ], + "key": "{app-side-nav.wrapper.border.color}" }, { "value": "16px", @@ -4232,7 +4510,8 @@ "wrapper", "padding", "horizontal" - ] + ], + "key": "{app-side-nav.wrapper.padding.horizontal}" }, { "value": "16px", @@ -4253,7 +4532,8 @@ "wrapper", "padding", "vertical" - ] + ], + "key": "{app-side-nav.wrapper.padding.vertical}" }, { "value": "8px", @@ -4274,7 +4554,8 @@ "wrapper", "padding", "horizontal-minimized" - ] + ], + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" }, { "value": "22px", @@ -4295,7 +4576,8 @@ "wrapper", "padding", "vertical-minimized" - ] + ], + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" }, { "value": "5px", @@ -4316,7 +4598,8 @@ "toggle-button", "border", "radius" - ] + ], + "key": "{app-side-nav.toggle-button.border.radius}" }, { "value": "4px", @@ -4337,7 +4620,8 @@ "header", "home-link", "padding" - ] + ], + "key": "{app-side-nav.header.home-link.padding}" }, { "value": "48px", @@ -4358,7 +4642,8 @@ "header", "home-link", "logo-size" - ] + ], + "key": "{app-side-nav.header.home-link.logo-size}" }, { "value": "32px", @@ -4379,7 +4664,8 @@ "header", "home-link", "logo-size-minimized" - ] + ], + "key": "{app-side-nav.header.home-link.logo-size-minimized}" }, { "value": "8px", @@ -4400,7 +4686,8 @@ "header", "actions", "spacing" - ] + ], + "key": "{app-side-nav.header.actions.spacing}" }, { "value": "24px", @@ -4421,7 +4708,8 @@ "body", "list", "margin-vertical" - ] + ], + "key": "{app-side-nav.body.list.margin-vertical}" }, { "value": "36px", @@ -4442,7 +4730,8 @@ "body", "list-item", "height" - ] + ], + "key": "{app-side-nav.body.list-item.height}" }, { "value": "8px", @@ -4465,7 +4754,8 @@ "list-item", "padding", "horizontal" - ] + ], + "key": "{app-side-nav.body.list-item.padding.horizontal}" }, { "value": "4px", @@ -4488,7 +4778,8 @@ "list-item", "padding", "vertical" - ] + ], + "key": "{app-side-nav.body.list-item.padding.vertical}" }, { "value": "2px", @@ -4509,7 +4800,8 @@ "body", "list-item", "spacing-vertical" - ] + ], + "key": "{app-side-nav.body.list-item.spacing-vertical}" }, { "value": "8px", @@ -4530,7 +4822,8 @@ "body", "list-item", "content-spacing-horizontal" - ] + ], + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" }, { "value": "5px", @@ -4551,7 +4844,8 @@ "body", "list-item", "border-radius" - ] + ], + "key": "{app-side-nav.body.list-item.border-radius}" }, { "value": "var(--token-color-foreground-primary)", @@ -4574,7 +4868,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{app-side-nav.color.foreground.primary}" }, { "value": "var(--token-color-foreground-primary)", @@ -4597,7 +4892,8 @@ "color", "foreground", "strong" - ] + ], + "key": "{app-side-nav.color.foreground.strong}" }, { "value": "var(--token-color-foreground-faint)", @@ -4620,7 +4916,8 @@ "color", "foreground", "faint" - ] + ], + "key": "{app-side-nav.color.foreground.faint}" }, { "value": "var(--token-color-surface-faint)", @@ -4643,7 +4940,8 @@ "color", "surface", "primary" - ] + ], + "key": "{app-side-nav.color.surface.primary}" }, { "value": "var(--token-color-surface-interactive-hover)", @@ -4666,7 +4964,8 @@ "color", "surface", "interactive-hover" - ] + ], + "key": "{app-side-nav.color.surface.interactive-hover}" }, { "value": "var(--token-color-palette-neutral-300)", @@ -4689,50 +4988,3536 @@ "color", "surface", "interactive-active" - ] + ], + "key": "{app-side-nav.color.surface.interactive-active}" }, { - "value": "#0c0c0e", - "type": "color", - "group": "components", +<<<<<<< HEAD +======= + "value": "7px", + "type": "size", + "comment": "this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border", "original": { - "value": "{color.foreground.strong.value}", - "type": "color", - "group": "components" + "value": "7", + "type": "size", + "comment": "this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border" }, - "name": "token-form-label-color", + "name": "token-badge-count-padding-horizontal-small", "attributes": { - "category": "form", - "type": "label", - "item": "color" + "category": "badge-count", + "type": "padding", + "item": "horizontal", + "subitem": "small" }, "path": [ - "form", - "label", - "color" - ] + "badge-count", + "padding", + "horizontal", + "small" + ], + "key": "{badge-count.padding.horizontal.small}" }, { - "value": "#0c0c0e", - "type": "color", - "group": "components", + "value": "11px", + "type": "size", + "comment": "this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border", "original": { - "value": "{form.label.color.value}", - "type": "color", - "group": "components" + "value": "11", + "type": "size", + "comment": "this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border" }, - "name": "token-form-legend-color", + "name": "token-badge-count-padding-horizontal-medium", "attributes": { - "category": "form", - "type": "legend", - "item": "color" + "category": "badge-count", + "type": "padding", + "item": "horizontal", + "subitem": "medium" }, "path": [ - "form", - "legend", - "color" - ] - }, + "badge-count", + "padding", + "horizontal", + "medium" + ], + "key": "{badge-count.padding.horizontal.medium}" + }, + { + "value": "13px", + "type": "size", + "comment": "this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border", + "original": { + "value": "13", + "type": "size", + "comment": "this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border" + }, + "name": "token-badge-count-padding-horizontal-large", + "attributes": { + "category": "badge-count", + "type": "padding", + "item": "horizontal", + "subitem": "large" + }, + "path": [ + "badge-count", + "padding", + "horizontal", + "large" + ], + "key": "{badge-count.padding.horizontal.large}" + }, + { + "value": "20px", + "type": "size", + "original": { + "value": "20", + "type": "size" + }, + "name": "token-badge-height-small", + "attributes": { + "category": "badge", + "type": "height", + "item": "small" + }, + "path": [ + "badge", + "height", + "small" + ], + "key": "{badge.height.small}" + }, + { + "value": "24px", + "type": "size", + "original": { + "value": "24", + "type": "size" + }, + "name": "token-badge-height-medium", + "attributes": { + "category": "badge", + "type": "height", + "item": "medium" + }, + "path": [ + "badge", + "height", + "medium" + ], + "key": "{badge.height.medium}" + }, + { + "value": "32px", + "type": "size", + "original": { + "value": "32", + "type": "size" + }, + "name": "token-badge-height-large", + "attributes": { + "category": "badge", + "type": "height", + "item": "large" + }, + "path": [ + "badge", + "height", + "large" + ], + "key": "{badge.height.large}" + }, + { + "value": "5px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "5", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-badge-padding-horizontal-small", + "attributes": { + "category": "badge", + "type": "padding", + "item": "horizontal", + "subitem": "small" + }, + "path": [ + "badge", + "padding", + "horizontal", + "small" + ], + "key": "{badge.padding.horizontal.small}" + }, + { + "value": "7px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "7", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-badge-padding-horizontal-medium", + "attributes": { + "category": "badge", + "type": "padding", + "item": "horizontal", + "subitem": "medium" + }, + "path": [ + "badge", + "padding", + "horizontal", + "medium" + ], + "key": "{badge.padding.horizontal.medium}" + }, + { + "value": "7px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "7", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-badge-padding-horizontal-large", + "attributes": { + "category": "badge", + "type": "padding", + "item": "horizontal", + "subitem": "large" + }, + "path": [ + "badge", + "padding", + "horizontal", + "large" + ], + "key": "{badge.padding.horizontal.large}" + }, + { + "value": "1px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "1", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-badge-padding-vertical-small", + "attributes": { + "category": "badge", + "type": "padding", + "item": "vertical", + "subitem": "small" + }, + "path": [ + "badge", + "padding", + "vertical", + "small" + ], + "key": "{badge.padding.vertical.small}" + }, + { + "value": "3px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "3", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-badge-padding-vertical-medium", + "attributes": { + "category": "badge", + "type": "padding", + "item": "vertical", + "subitem": "medium" + }, + "path": [ + "badge", + "padding", + "vertical", + "medium" + ], + "key": "{badge.padding.vertical.medium}" + }, + { + "value": "3px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "3", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-badge-padding-vertical-large", + "attributes": { + "category": "badge", + "type": "padding", + "item": "vertical", + "subitem": "large" + }, + "path": [ + "badge", + "padding", + "vertical", + "large" + ], + "key": "{badge.padding.vertical.large}" + }, + { + "value": "12px", + "type": "size", + "original": { + "value": "12", + "type": "size" + }, + "name": "token-badge-icon-size-small", + "attributes": { + "category": "badge", + "type": "icon-size", + "item": "small" + }, + "path": [ + "badge", + "icon-size", + "small" + ], + "key": "{badge.icon-size.small}" + }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-badge-icon-size-medium", + "attributes": { + "category": "badge", + "type": "icon-size", + "item": "medium" + }, + "path": [ + "badge", + "icon-size", + "medium" + ], + "key": "{badge.icon-size.medium}" + }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-badge-icon-size-large", + "attributes": { + "category": "badge", + "type": "icon-size", + "item": "large" + }, + "path": [ + "badge", + "icon-size", + "large" + ], + "key": "{badge.icon-size.large}" + }, + { + "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "value": "{typography.font-stack.text.value}" + }, + "name": "token-badge-font-family", + "attributes": { + "category": "badge", + "type": "font-family" + }, + "path": [ + "badge", + "font-family" + ], + "key": "{badge.font-family}" + }, + { + "value": "0.8125rem", + "type": "font-size", + "comment": "13px/0.8125rem", + "original": { + "value": "13", + "type": "font-size", + "comment": "13px/0.8125rem" + }, + "name": "token-badge-font-size-small", + "attributes": { + "category": "badge", + "type": "font-size", + "item": "small" + }, + "path": [ + "badge", + "font-size", + "small" + ], + "key": "{badge.font-size.small}" + }, + { + "value": "0.8125rem", + "type": "font-size", + "comment": "13px/0.8125rem", + "original": { + "value": "13", + "type": "font-size", + "comment": "13px/0.8125rem" + }, + "name": "token-badge-font-size-medium", + "attributes": { + "category": "badge", + "type": "font-size", + "item": "medium" + }, + "path": [ + "badge", + "font-size", + "medium" + ], + "key": "{badge.font-size.medium}" + }, + { + "value": "1rem", + "type": "font-size", + "category": "typography", + "comment": "16px/1rem", + "original": { + "value": "16", + "type": "font-size", + "category": "typography", + "comment": "16px/1rem" + }, + "name": "token-badge-font-size-large", + "attributes": { + "category": "badge", + "type": "font-size", + "item": "large" + }, + "path": [ + "badge", + "font-size", + "large" + ], + "key": "{badge.font-size.large}" + }, + { + "value": "1.2308", + "comment": "16px", + "original": { + "value": "1.2308", + "comment": "16px" + }, + "name": "token-badge-line-height-small", + "attributes": { + "category": "badge", + "type": "line-height", + "item": "small" + }, + "path": [ + "badge", + "line-height", + "small" + ], + "key": "{badge.line-height.small}" + }, + { + "value": "1.2308", + "comment": "16px", + "original": { + "value": "1.2308", + "comment": "16px" + }, + "name": "token-badge-line-height-medium", + "attributes": { + "category": "badge", + "type": "line-height", + "item": "medium" + }, + "path": [ + "badge", + "line-height", + "medium" + ], + "key": "{badge.line-height.medium}" + }, + { + "value": "1.5", + "comment": "24px", + "original": { + "value": "1.5", + "comment": "24px" + }, + "name": "token-badge-line-height-large", + "attributes": { + "category": "badge", + "type": "line-height", + "item": "large" + }, + "path": [ + "badge", + "line-height", + "large" + ], + "key": "{badge.line-height.large}" + }, + { + "value": "500", + "original": { + "value": "{typography.font-weight.medium.value}" + }, + "name": "token-badge-font-weight", + "attributes": { + "category": "badge", + "type": "font-weight" + }, + "path": [ + "badge", + "font-weight" + ], + "key": "{badge.font-weight}" + }, + { + "value": "4px", + "type": "size", + "original": { + "value": "4", + "type": "size" + }, + "name": "token-badge-gap-small", + "attributes": { + "category": "badge", + "type": "gap", + "item": "small" + }, + "path": [ + "badge", + "gap", + "small" + ], + "key": "{badge.gap.small}" + }, + { + "value": "4px", + "type": "size", + "original": { + "value": "4", + "type": "size" + }, + "name": "token-badge-gap-medium", + "attributes": { + "category": "badge", + "type": "gap", + "item": "medium" + }, + "path": [ + "badge", + "gap", + "medium" + ], + "key": "{badge.gap.medium}" + }, + { + "value": "6px", + "type": "size", + "original": { + "value": "6", + "type": "size" + }, + "name": "token-badge-gap-large", + "attributes": { + "category": "badge", + "type": "gap", + "item": "large" + }, + "path": [ + "badge", + "gap", + "large" + ], + "key": "{badge.gap.large}" + }, + { + "value": "1px", + "type": "size", + "original": { + "value": "1", + "type": "size" + }, + "name": "token-badge-border-width", + "attributes": { + "category": "badge", + "type": "border", + "item": "width" + }, + "path": [ + "badge", + "border", + "width" + ], + "key": "{badge.border.width}" + }, + { + "value": "5px", + "type": "size", + "original": { + "value": "5", + "type": "size" + }, + "name": "token-badge-border-radius", + "attributes": { + "category": "badge", + "type": "border", + "item": "radius" + }, + "path": [ + "badge", + "border", + "radius" + ], + "key": "{badge.border.radius}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-neutral-foreground-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "neutral", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "filled", + "neutral", + "foreground-color" + ], + "key": "{badge.filled.neutral.foreground-color}" + }, + { + "value": "#f1f2f3", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.strong.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-neutral-background-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "neutral", + "subitem": "background-color" + }, + "path": [ + "badge", + "filled", + "neutral", + "background-color" + ], + "key": "{badge.filled.neutral.background-color}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-neutral-dark-mode-foreground-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "neutral-dark-mode", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "filled", + "neutral-dark-mode", + "foreground-color" + ], + "key": "{badge.filled.neutral-dark-mode.foreground-color}" + }, + { + "value": "#656a76", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.neutral-500.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-neutral-dark-mode-background-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "neutral-dark-mode", + "subitem": "background-color" + }, + "path": [ + "badge", + "filled", + "neutral-dark-mode", + "background-color" + ], + "key": "{badge.filled.neutral-dark-mode.background-color}" + }, + { + "value": "#911ced", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.highlight-on-surface.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-highlight-foreground-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "highlight", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "filled", + "highlight", + "foreground-color" + ], + "key": "{badge.filled.highlight.foreground-color}" + }, + { + "value": "#f9f2ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.highlight.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-highlight-background-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "highlight", + "subitem": "background-color" + }, + "path": [ + "badge", + "filled", + "highlight", + "background-color" + ], + "key": "{badge.filled.highlight.background-color}" + }, + { + "value": "#00781e", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.success-on-surface.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-success-foreground-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "success", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "filled", + "success", + "foreground-color" + ], + "key": "{badge.filled.success.foreground-color}" + }, + { + "value": "#f2fbf6", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.success.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-success-background-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "success", + "subitem": "background-color" + }, + "path": [ + "badge", + "filled", + "success", + "background-color" + ], + "key": "{badge.filled.success.background-color}" + }, + { + "value": "#9e4b00", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.warning-on-surface.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-warning-foreground-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "warning", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "filled", + "warning", + "foreground-color" + ], + "key": "{badge.filled.warning.foreground-color}" + }, + { + "value": "#fff9e8", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.warning.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-warning-background-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "warning", + "subitem": "background-color" + }, + "path": [ + "badge", + "filled", + "warning", + "background-color" + ], + "key": "{badge.filled.warning.background-color}" + }, + { + "value": "#c00005", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.critical-on-surface.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-critical-foreground-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "critical", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "filled", + "critical", + "foreground-color" + ], + "key": "{badge.filled.critical.foreground-color}" + }, + { + "value": "#fff5f5", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.critical.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-filled-critical-background-color", + "attributes": { + "category": "badge", + "type": "filled", + "item": "critical", + "subitem": "background-color" + }, + "path": [ + "badge", + "filled", + "critical", + "background-color" + ], + "key": "{badge.filled.critical.background-color}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-neutral-foreground-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "neutral", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "inverted", + "neutral", + "foreground-color" + ], + "key": "{badge.inverted.neutral.foreground-color}" + }, + { + "value": "#656a76", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.neutral-500.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-neutral-background-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "neutral", + "subitem": "background-color" + }, + "path": [ + "badge", + "inverted", + "neutral", + "background-color" + ], + "key": "{badge.inverted.neutral.background-color}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-neutral-dark-mode-foreground-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "neutral-dark-mode", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "inverted", + "neutral-dark-mode", + "foreground-color" + ], + "key": "{badge.inverted.neutral-dark-mode.foreground-color}" + }, + { + "value": "#fafafa", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.faint.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-neutral-dark-mode-background-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "neutral-dark-mode", + "subitem": "background-color" + }, + "path": [ + "badge", + "inverted", + "neutral-dark-mode", + "background-color" + ], + "key": "{badge.inverted.neutral-dark-mode.background-color}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-highlight-foreground-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "highlight", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "inverted", + "highlight", + "foreground-color" + ], + "key": "{badge.inverted.highlight.foreground-color}" + }, + { + "value": "#a737ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.purple-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-highlight-background-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "highlight", + "subitem": "background-color" + }, + "path": [ + "badge", + "inverted", + "highlight", + "background-color" + ], + "key": "{badge.inverted.highlight.background-color}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-success-foreground-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "success", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "inverted", + "success", + "foreground-color" + ], + "key": "{badge.inverted.success.foreground-color}" + }, + { + "value": "#008a22", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.green-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-success-background-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "success", + "subitem": "background-color" + }, + "path": [ + "badge", + "inverted", + "success", + "background-color" + ], + "key": "{badge.inverted.success.background-color}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-warning-foreground-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "warning", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "inverted", + "warning", + "foreground-color" + ], + "key": "{badge.inverted.warning.foreground-color}" + }, + { + "value": "#bb5a00", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.amber-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-warning-background-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "warning", + "subitem": "background-color" + }, + "path": [ + "badge", + "inverted", + "warning", + "background-color" + ], + "key": "{badge.inverted.warning.background-color}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-critical-foreground-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "critical", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "inverted", + "critical", + "foreground-color" + ], + "key": "{badge.inverted.critical.foreground-color}" + }, + { + "value": "#e52228", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.red-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-inverted-critical-background-color", + "attributes": { + "category": "badge", + "type": "inverted", + "item": "critical", + "subitem": "background-color" + }, + "path": [ + "badge", + "inverted", + "critical", + "background-color" + ], + "key": "{badge.inverted.critical.background-color}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-neutral-foreground-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "neutral", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "outlined", + "neutral", + "foreground-color" + ], + "key": "{badge.outlined.neutral.foreground-color}" + }, + { + "value": "#656a76", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.neutral-500.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-neutral-border-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "neutral", + "subitem": "border-color" + }, + "path": [ + "badge", + "outlined", + "neutral", + "border-color" + ], + "key": "{badge.outlined.neutral.border-color}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-neutral-dark-mode-foreground-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "neutral-dark-mode", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "outlined", + "neutral-dark-mode", + "foreground-color" + ], + "key": "{badge.outlined.neutral-dark-mode.foreground-color}" + }, + { + "value": "#fafafa", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.neutral-50.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-neutral-dark-mode-border-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "neutral-dark-mode", + "subitem": "border-color" + }, + "path": [ + "badge", + "outlined", + "neutral-dark-mode", + "border-color" + ], + "key": "{badge.outlined.neutral-dark-mode.border-color}" + }, + { + "value": "#a737ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.highlight.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-highlight-foreground-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "highlight", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "outlined", + "highlight", + "foreground-color" + ], + "key": "{badge.outlined.highlight.foreground-color}" + }, + { + "value": "#a737ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.purple-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-highlight-border-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "highlight", + "subitem": "border-color" + }, + "path": [ + "badge", + "outlined", + "highlight", + "border-color" + ], + "key": "{badge.outlined.highlight.border-color}" + }, + { + "value": "#008a22", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.success.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-success-foreground-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "success", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "outlined", + "success", + "foreground-color" + ], + "key": "{badge.outlined.success.foreground-color}" + }, + { + "value": "#008a22", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.green-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-success-border-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "success", + "subitem": "border-color" + }, + "path": [ + "badge", + "outlined", + "success", + "border-color" + ], + "key": "{badge.outlined.success.border-color}" + }, + { + "value": "#bb5a00", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.warning.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-warning-foreground-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "warning", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "outlined", + "warning", + "foreground-color" + ], + "key": "{badge.outlined.warning.foreground-color}" + }, + { + "value": "#bb5a00", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.amber-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-warning-border-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "warning", + "subitem": "border-color" + }, + "path": [ + "badge", + "outlined", + "warning", + "border-color" + ], + "key": "{badge.outlined.warning.border-color}" + }, + { + "value": "#e52228", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.critical.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-critical-foreground-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "critical", + "subitem": "foreground-color" + }, + "path": [ + "badge", + "outlined", + "critical", + "foreground-color" + ], + "key": "{badge.outlined.critical.foreground-color}" + }, + { + "value": "#e52228", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.red-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-badge-outlined-critical-border-color", + "attributes": { + "category": "badge", + "type": "outlined", + "item": "critical", + "subitem": "border-color" + }, + "path": [ + "badge", + "outlined", + "critical", + "border-color" + ], + "key": "{badge.outlined.critical.border-color}" + }, + { + "value": "#c00005", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.critical-on-surface.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-foreground-default", + "attributes": { + "category": "button", + "type": "critical", + "item": "foreground", + "subitem": "default" + }, + "path": [ + "button", + "critical", + "foreground", + "default" + ], + "key": "{button.critical.foreground.default}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-foreground-hover", + "attributes": { + "category": "button", + "type": "critical", + "item": "foreground", + "subitem": "hover" + }, + "path": [ + "button", + "critical", + "foreground", + "hover" + ], + "key": "{button.critical.foreground.hover}" + }, + { + "value": "#c00005", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.critical-on-surface.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-foreground-focus", + "attributes": { + "category": "button", + "type": "critical", + "item": "foreground", + "subitem": "focus" + }, + "path": [ + "button", + "critical", + "foreground", + "focus" + ], + "key": "{button.critical.foreground.focus}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-foreground-active", + "attributes": { + "category": "button", + "type": "critical", + "item": "foreground", + "subitem": "active" + }, + "path": [ + "button", + "critical", + "foreground", + "active" + ], + "key": "{button.critical.foreground.active}" + }, + { + "value": "#fff5f5", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.critical.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-surface-default", + "attributes": { + "category": "button", + "type": "critical", + "item": "surface", + "subitem": "default" + }, + "path": [ + "button", + "critical", + "surface", + "default" + ], + "key": "{button.critical.surface.default}" + }, + { + "value": "#c00005", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.red-300.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-surface-hover", + "attributes": { + "category": "button", + "type": "critical", + "item": "surface", + "subitem": "hover" + }, + "path": [ + "button", + "critical", + "surface", + "hover" + ], + "key": "{button.critical.surface.hover}" + }, + { + "value": "#fff5f5", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.critical.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-surface-focus", + "attributes": { + "category": "button", + "type": "critical", + "item": "surface", + "subitem": "focus" + }, + "path": [ + "button", + "critical", + "surface", + "focus" + ], + "key": "{button.critical.surface.focus}" + }, + { + "value": "#940004", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.red-400.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-surface-active", + "attributes": { + "category": "button", + "type": "critical", + "item": "surface", + "subitem": "active" + }, + "path": [ + "button", + "critical", + "surface", + "active" + ], + "key": "{button.critical.surface.active}" + }, + { + "value": "#c00005", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.critical-on-surface.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-border-color-default", + "attributes": { + "category": "button", + "type": "critical", + "item": "border-color", + "subitem": "default" + }, + "path": [ + "button", + "critical", + "border-color", + "default" + ], + "key": "{button.critical.border-color.default}" + }, + { + "value": "#940004", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.red-400.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-border-color-hover", + "attributes": { + "category": "button", + "type": "critical", + "item": "border-color", + "subitem": "hover" + }, + "path": [ + "button", + "critical", + "border-color", + "hover" + ], + "key": "{button.critical.border-color.hover}" + }, + { + "value": "#c00005", + "type": "color", + "group": "components", + "original": { + "value": "{color.focus.critical.internal.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-border-color-focus", + "attributes": { + "category": "button", + "type": "critical", + "item": "border-color", + "subitem": "focus" + }, + "path": [ + "button", + "critical", + "border-color", + "focus" + ], + "key": "{button.critical.border-color.focus}" + }, + { + "value": "#940004", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.red-400.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-critical-border-color-active", + "attributes": { + "category": "button", + "type": "critical", + "item": "border-color", + "subitem": "active" + }, + "path": [ + "button", + "critical", + "border-color", + "active" + ], + "key": "{button.critical.border-color.active}" + }, + { + "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "original": { + "value": "{elevation.low.box-shadow.value}" + }, + "name": "token-button-critical-box-shadow-default", + "attributes": { + "category": "button", + "type": "critical", + "item": "box-shadow", + "subitem": "default" + }, + "path": [ + "button", + "critical", + "box-shadow", + "default" + ], + "key": "{button.critical.box-shadow.default}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-critical-box-shadow-focus", + "attributes": { + "category": "button", + "type": "critical", + "item": "box-shadow", + "subitem": "focus" + }, + "path": [ + "button", + "critical", + "box-shadow", + "focus" + ], + "key": "{button.critical.box-shadow.focus}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-critical-box-shadow-active", + "attributes": { + "category": "button", + "type": "critical", + "item": "box-shadow", + "subitem": "active" + }, + "path": [ + "button", + "critical", + "box-shadow", + "active" + ], + "key": "{button.critical.box-shadow.active}" + }, + { + "value": "#8c909c", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.disabled.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-disabled-foreground", + "attributes": { + "category": "button", + "type": "disabled", + "item": "foreground" + }, + "path": [ + "button", + "disabled", + "foreground" + ], + "key": "{button.disabled.foreground}" + }, + { + "value": "#fafafa", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.faint.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-disabled-surface", + "attributes": { + "category": "button", + "type": "disabled", + "item": "surface" + }, + "path": [ + "button", + "disabled", + "surface" + ], + "key": "{button.disabled.surface}" + }, + { + "value": "#656a7633", + "type": "color", + "group": "components", + "original": { + "value": "{color.border.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-disabled-border-color", + "attributes": { + "category": "button", + "type": "disabled", + "item": "border-color" + }, + "path": [ + "button", + "disabled", + "border-color" + ], + "key": "{button.disabled.border-color}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-disabled-box-shadow", + "attributes": { + "category": "button", + "type": "disabled", + "item": "box-shadow" + }, + "path": [ + "button", + "disabled", + "box-shadow" + ], + "key": "{button.disabled.box-shadow}" + }, + { + "value": "28px", + "type": "size", + "original": { + "value": "28", + "type": "size" + }, + "name": "token-button-height-small", + "attributes": { + "category": "button", + "type": "height", + "item": "small" + }, + "path": [ + "button", + "height", + "small" + ], + "key": "{button.height.small}" + }, + { + "value": "36px", + "type": "size", + "original": { + "value": "36", + "type": "size" + }, + "name": "token-button-height-medium", + "attributes": { + "category": "button", + "type": "height", + "item": "medium" + }, + "path": [ + "button", + "height", + "medium" + ], + "key": "{button.height.medium}" + }, + { + "value": "48px", + "type": "size", + "original": { + "value": "48", + "type": "size" + }, + "name": "token-button-height-large", + "attributes": { + "category": "button", + "type": "height", + "item": "large" + }, + "path": [ + "button", + "height", + "large" + ], + "key": "{button.height.large}" + }, + { + "value": "11px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "11", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-button-padding-horizontal-small", + "attributes": { + "category": "button", + "type": "padding", + "item": "horizontal", + "subitem": "small" + }, + "path": [ + "button", + "padding", + "horizontal", + "small" + ], + "key": "{button.padding.horizontal.small}" + }, + { + "value": "15px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "15", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-button-padding-horizontal-medium", + "attributes": { + "category": "button", + "type": "padding", + "item": "horizontal", + "subitem": "medium" + }, + "path": [ + "button", + "padding", + "horizontal", + "medium" + ], + "key": "{button.padding.horizontal.medium}" + }, + { + "value": "19px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "19", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-button-padding-horizontal-large", + "attributes": { + "category": "button", + "type": "padding", + "item": "horizontal", + "subitem": "large" + }, + "path": [ + "button", + "padding", + "horizontal", + "large" + ], + "key": "{button.padding.horizontal.large}" + }, + { + "value": "6px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "6", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-button-padding-vertical-small", + "attributes": { + "category": "button", + "type": "padding", + "item": "vertical", + "subitem": "small" + }, + "path": [ + "button", + "padding", + "vertical", + "small" + ], + "key": "{button.padding.vertical.small}" + }, + { + "value": "9px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "9", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-button-padding-vertical-medium", + "attributes": { + "category": "button", + "type": "padding", + "item": "vertical", + "subitem": "medium" + }, + "path": [ + "button", + "padding", + "vertical", + "medium" + ], + "key": "{button.padding.vertical.medium}" + }, + { + "value": "11px", + "type": "size", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "11", + "type": "size", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-button-padding-vertical-large", + "attributes": { + "category": "button", + "type": "padding", + "item": "vertical", + "subitem": "large" + }, + "path": [ + "button", + "padding", + "vertical", + "large" + ], + "key": "{button.padding.vertical.large}" + }, + { + "value": "12px", + "type": "size", + "original": { + "value": "12", + "type": "size" + }, + "name": "token-button-icon-size-small", + "attributes": { + "category": "button", + "type": "icon-size", + "item": "small" + }, + "path": [ + "button", + "icon-size", + "small" + ], + "key": "{button.icon-size.small}" + }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-button-icon-size-medium", + "attributes": { + "category": "button", + "type": "icon-size", + "item": "medium" + }, + "path": [ + "button", + "icon-size", + "medium" + ], + "key": "{button.icon-size.medium}" + }, + { + "value": "24px", + "type": "size", + "original": { + "value": "24", + "type": "size" + }, + "name": "token-button-icon-size-large", + "attributes": { + "category": "button", + "type": "icon-size", + "item": "large" + }, + "path": [ + "button", + "icon-size", + "large" + ], + "key": "{button.icon-size.large}" + }, + { + "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "original": { + "value": "{typography.font-stack.text.value}" + }, + "name": "token-button-font-family", + "attributes": { + "category": "button", + "type": "font-family" + }, + "path": [ + "button", + "font-family" + ], + "key": "{button.font-family}" + }, + { + "value": "0.8125rem", + "type": "font-size", + "comment": "13px/0.8125rem", + "original": { + "value": "13", + "type": "font-size", + "comment": "13px/0.8125rem" + }, + "name": "token-button-font-size-small", + "attributes": { + "category": "button", + "type": "font-size", + "item": "small" + }, + "path": [ + "button", + "font-size", + "small" + ], + "key": "{button.font-size.small}" + }, + { + "value": "0.875rem", + "type": "font-size", + "comment": "14px/0.875rem", + "original": { + "value": "14", + "type": "font-size", + "comment": "14px/0.875rem" + }, + "name": "token-button-font-size-medium", + "attributes": { + "category": "button", + "type": "font-size", + "item": "medium" + }, + "path": [ + "button", + "font-size", + "medium" + ], + "key": "{button.font-size.medium}" + }, + { + "value": "1rem", + "type": "font-size", + "comment": "16px/1rem", + "original": { + "value": "16", + "type": "font-size", + "comment": "16px/1rem" + }, + "name": "token-button-font-size-large", + "attributes": { + "category": "button", + "type": "font-size", + "item": "large" + }, + "path": [ + "button", + "font-size", + "large" + ], + "key": "{button.font-size.large}" + }, + { + "value": "1.0769", + "comment": "14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)", + "original": { + "value": "1.0769", + "comment": "14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)" + }, + "name": "token-button-line-height-small", + "attributes": { + "category": "button", + "type": "line-height", + "item": "small" + }, + "path": [ + "button", + "line-height", + "small" + ], + "key": "{button.line-height.small}" + }, + { + "value": "1.1428", + "comment": "16px", + "original": { + "value": "1.1428", + "comment": "16px" + }, + "name": "token-button-line-height-medium", + "attributes": { + "category": "button", + "type": "line-height", + "item": "medium" + }, + "path": [ + "button", + "line-height", + "medium" + ], + "key": "{button.line-height.medium}" + }, + { + "value": "1.5", + "comment": "24px", + "original": { + "value": "1.5", + "comment": "24px" + }, + "name": "token-button-line-height-large", + "attributes": { + "category": "button", + "type": "line-height", + "item": "large" + }, + "path": [ + "button", + "line-height", + "large" + ], + "key": "{button.line-height.large}" + }, + { + "value": "400", + "comment": "notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099", + "original": { + "value": "{typography.font-weight.regular.value}", + "comment": "notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099" + }, + "name": "token-button-font-weight", + "attributes": { + "category": "button", + "type": "font-weight" + }, + "path": [ + "button", + "font-weight" + ], + "key": "{button.font-weight}" + }, + { + "value": "6px", + "type": "size", + "original": { + "value": "6", + "type": "size" + }, + "name": "token-button-gap", + "attributes": { + "category": "button", + "type": "gap" + }, + "path": [ + "button", + "gap" + ], + "key": "{button.gap}" + }, + { + "value": "1px", + "type": "size", + "original": { + "value": "1", + "type": "size" + }, + "name": "token-button-border-width", + "attributes": { + "category": "button", + "type": "border", + "item": "width" + }, + "path": [ + "button", + "border", + "width" + ], + "key": "{button.border.width}" + }, + { + "value": "5px", + "type": "size", + "original": { + "value": "5", + "type": "size" + }, + "name": "token-button-border-radius", + "attributes": { + "category": "button", + "type": "border", + "item": "radius" + }, + "path": [ + "button", + "border", + "radius" + ], + "key": "{button.border.radius}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-box-shadow-focus", + "attributes": { + "category": "button", + "type": "box-shadow", + "item": "focus" + }, + "path": [ + "button", + "box-shadow", + "focus" + ], + "key": "{button.box-shadow.focus}" + }, + { + "value": "3px", + "type": "size", + "original": { + "value": "3", + "type": "size" + }, + "name": "token-button-focus-border-width", + "attributes": { + "category": "button", + "type": "focus", + "item": "border", + "subitem": "width" + }, + "path": [ + "button", + "focus", + "border", + "width" + ], + "key": "{button.focus.border.width}" + }, + { + "value": "0px", + "type": "size", + "original": { + "value": "0", + "type": "size" + }, + "name": "token-button-focus-border-radius", + "attributes": { + "category": "button", + "type": "focus", + "item": "border", + "subitem": "radius" + }, + "path": [ + "button", + "focus", + "border", + "radius" + ], + "key": "{button.focus.border.radius}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-foreground-default", + "attributes": { + "category": "button", + "type": "primary", + "item": "foreground", + "subitem": "default" + }, + "path": [ + "button", + "primary", + "foreground", + "default" + ], + "key": "{button.primary.foreground.default}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-foreground-hover", + "attributes": { + "category": "button", + "type": "primary", + "item": "foreground", + "subitem": "hover" + }, + "path": [ + "button", + "primary", + "foreground", + "hover" + ], + "key": "{button.primary.foreground.hover}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-foreground-focus", + "attributes": { + "category": "button", + "type": "primary", + "item": "foreground", + "subitem": "focus" + }, + "path": [ + "button", + "primary", + "foreground", + "focus" + ], + "key": "{button.primary.foreground.focus}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.high-contrast.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-foreground-active", + "attributes": { + "category": "button", + "type": "primary", + "item": "foreground", + "subitem": "active" + }, + "path": [ + "button", + "primary", + "foreground", + "active" + ], + "key": "{button.primary.foreground.active}" + }, + { + "value": "#1060ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.blue-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-surface-default", + "attributes": { + "category": "button", + "type": "primary", + "item": "surface", + "subitem": "default" + }, + "path": [ + "button", + "primary", + "surface", + "default" + ], + "key": "{button.primary.surface.default}" + }, + { + "value": "#0046d1", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.blue-400.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-surface-hover", + "attributes": { + "category": "button", + "type": "primary", + "item": "surface", + "subitem": "hover" + }, + "path": [ + "button", + "primary", + "surface", + "hover" + ], + "key": "{button.primary.surface.hover}" + }, + { + "value": "#1060ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.blue-200.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-surface-focus", + "attributes": { + "category": "button", + "type": "primary", + "item": "surface", + "subitem": "focus" + }, + "path": [ + "button", + "primary", + "surface", + "focus" + ], + "key": "{button.primary.surface.focus}" + }, + { + "value": "#0046d1", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.blue-400.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-surface-active", + "attributes": { + "category": "button", + "type": "primary", + "item": "surface", + "subitem": "active" + }, + "path": [ + "button", + "primary", + "surface", + "active" + ], + "key": "{button.primary.surface.active}" + }, + { + "value": "#0c56e9", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.blue-300.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-border-color-default", + "attributes": { + "category": "button", + "type": "primary", + "item": "border-color", + "subitem": "default" + }, + "path": [ + "button", + "primary", + "border-color", + "default" + ], + "key": "{button.primary.border-color.default}" + }, + { + "value": "#0046d1", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.blue-400.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-border-color-hover", + "attributes": { + "category": "button", + "type": "primary", + "item": "border-color", + "subitem": "hover" + }, + "path": [ + "button", + "primary", + "border-color", + "hover" + ], + "key": "{button.primary.border-color.hover}" + }, + { + "value": "#0c56e9", + "type": "color", + "group": "components", + "original": { + "value": "{color.focus.action.internal.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-border-color-focus", + "attributes": { + "category": "button", + "type": "primary", + "item": "border-color", + "subitem": "focus" + }, + "path": [ + "button", + "primary", + "border-color", + "focus" + ], + "key": "{button.primary.border-color.focus}" + }, + { + "value": "#0046d1", + "type": "color", + "group": "components", + "original": { + "value": "{color.palette.blue-400.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-primary-border-color-active", + "attributes": { + "category": "button", + "type": "primary", + "item": "border-color", + "subitem": "active" + }, + "path": [ + "button", + "primary", + "border-color", + "active" + ], + "key": "{button.primary.border-color.active}" + }, + { + "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "original": { + "value": "{elevation.low.box-shadow.value}" + }, + "name": "token-button-primary-box-shadow-default", + "attributes": { + "category": "button", + "type": "primary", + "item": "box-shadow", + "subitem": "default" + }, + "path": [ + "button", + "primary", + "box-shadow", + "default" + ], + "key": "{button.primary.box-shadow.default}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-primary-box-shadow-focus", + "attributes": { + "category": "button", + "type": "primary", + "item": "box-shadow", + "subitem": "focus" + }, + "path": [ + "button", + "primary", + "box-shadow", + "focus" + ], + "key": "{button.primary.box-shadow.focus}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-primary-box-shadow-active", + "attributes": { + "category": "button", + "type": "primary", + "item": "box-shadow", + "subitem": "active" + }, + "path": [ + "button", + "primary", + "box-shadow", + "active" + ], + "key": "{button.primary.box-shadow.active}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-foreground-default", + "attributes": { + "category": "button", + "type": "secondary", + "item": "foreground", + "subitem": "default" + }, + "path": [ + "button", + "secondary", + "foreground", + "default" + ], + "key": "{button.secondary.foreground.default}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-foreground-hover", + "attributes": { + "category": "button", + "type": "secondary", + "item": "foreground", + "subitem": "hover" + }, + "path": [ + "button", + "secondary", + "foreground", + "hover" + ], + "key": "{button.secondary.foreground.hover}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-foreground-focus", + "attributes": { + "category": "button", + "type": "secondary", + "item": "foreground", + "subitem": "focus" + }, + "path": [ + "button", + "secondary", + "foreground", + "focus" + ], + "key": "{button.secondary.foreground.focus}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-foreground-active", + "attributes": { + "category": "button", + "type": "secondary", + "item": "foreground", + "subitem": "active" + }, + "path": [ + "button", + "secondary", + "foreground", + "active" + ], + "key": "{button.secondary.foreground.active}" + }, + { + "value": "#fafafa", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.faint.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-surface-default", + "attributes": { + "category": "button", + "type": "secondary", + "item": "surface", + "subitem": "default" + }, + "path": [ + "button", + "secondary", + "surface", + "default" + ], + "key": "{button.secondary.surface.default}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-surface-hover", + "attributes": { + "category": "button", + "type": "secondary", + "item": "surface", + "subitem": "hover" + }, + "path": [ + "button", + "secondary", + "surface", + "hover" + ], + "key": "{button.secondary.surface.hover}" + }, + { + "value": "#fafafa", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.faint.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-surface-focus", + "attributes": { + "category": "button", + "type": "secondary", + "item": "surface", + "subitem": "focus" + }, + "path": [ + "button", + "secondary", + "surface", + "focus" + ], + "key": "{button.secondary.surface.focus}" + }, + { + "value": "#dedfe3", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.interactive-active.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-surface-active", + "attributes": { + "category": "button", + "type": "secondary", + "item": "surface", + "subitem": "active" + }, + "path": [ + "button", + "secondary", + "surface", + "active" + ], + "key": "{button.secondary.surface.active}" + }, + { + "value": "#3b3d4566", + "type": "color", + "group": "components", + "original": { + "value": "{color.border.strong.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-border-color-default", + "attributes": { + "category": "button", + "type": "secondary", + "item": "border-color", + "subitem": "default" + }, + "path": [ + "button", + "secondary", + "border-color", + "default" + ], + "key": "{button.secondary.border-color.default}" + }, + { + "value": "#3b3d4566", + "type": "color", + "group": "components", + "original": { + "value": "{color.border.strong.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-border-color-hover", + "attributes": { + "category": "button", + "type": "secondary", + "item": "border-color", + "subitem": "hover" + }, + "path": [ + "button", + "secondary", + "border-color", + "hover" + ], + "key": "{button.secondary.border-color.hover}" + }, + { + "value": "#0c56e9", + "type": "color", + "group": "components", + "original": { + "value": "{color.focus.action.internal.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-border-color-focus", + "attributes": { + "category": "button", + "type": "secondary", + "item": "border-color", + "subitem": "focus" + }, + "path": [ + "button", + "secondary", + "border-color", + "focus" + ], + "key": "{button.secondary.border-color.focus}" + }, + { + "value": "#3b3d4566", + "type": "color", + "group": "components", + "original": { + "value": "{color.border.strong.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-secondary-border-color-active", + "attributes": { + "category": "button", + "type": "secondary", + "item": "border-color", + "subitem": "active" + }, + "path": [ + "button", + "secondary", + "border-color", + "active" + ], + "key": "{button.secondary.border-color.active}" + }, + { + "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", + "original": { + "value": "{elevation.low.box-shadow.value}" + }, + "name": "token-button-secondary-box-shadow-default", + "attributes": { + "category": "button", + "type": "secondary", + "item": "box-shadow", + "subitem": "default" + }, + "path": [ + "button", + "secondary", + "box-shadow", + "default" + ], + "key": "{button.secondary.box-shadow.default}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-secondary-box-shadow-focus", + "attributes": { + "category": "button", + "type": "secondary", + "item": "box-shadow", + "subitem": "focus" + }, + "path": [ + "button", + "secondary", + "box-shadow", + "focus" + ], + "key": "{button.secondary.box-shadow.focus}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-secondary-box-shadow-active", + "attributes": { + "category": "button", + "type": "secondary", + "item": "box-shadow", + "subitem": "active" + }, + "path": [ + "button", + "secondary", + "box-shadow", + "active" + ], + "key": "{button.secondary.box-shadow.active}" + }, + { + "value": "#1060ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.action.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-foreground-default", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "foreground", + "subitem": "default" + }, + "path": [ + "button", + "tertiary", + "foreground", + "default" + ], + "key": "{button.tertiary.foreground.default}" + }, + { + "value": "#0c56e9", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.action-hover.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-foreground-hover", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "foreground", + "subitem": "hover" + }, + "path": [ + "button", + "tertiary", + "foreground", + "hover" + ], + "key": "{button.tertiary.foreground.hover}" + }, + { + "value": "#1060ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.action.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-foreground-focus", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "foreground", + "subitem": "focus" + }, + "path": [ + "button", + "tertiary", + "foreground", + "focus" + ], + "key": "{button.tertiary.foreground.focus}" + }, + { + "value": "#0046d1", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.action-active.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-foreground-active", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "foreground", + "subitem": "active" + }, + "path": [ + "button", + "tertiary", + "foreground", + "active" + ], + "key": "{button.tertiary.foreground.active}" + }, + { + "value": "rgba(0, 0, 0, 0)", + "type": "color", + "group": "components", + "original": { + "value": "transparent", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-surface-default", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "surface", + "subitem": "default" + }, + "path": [ + "button", + "tertiary", + "surface", + "default" + ], + "key": "{button.tertiary.surface.default}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-surface-hover", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "surface", + "subitem": "hover" + }, + "path": [ + "button", + "tertiary", + "surface", + "hover" + ], + "key": "{button.tertiary.surface.hover}" + }, + { + "value": "#ffffff", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-surface-focus", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "surface", + "subitem": "focus" + }, + "path": [ + "button", + "tertiary", + "surface", + "focus" + ], + "key": "{button.tertiary.surface.focus}" + }, + { + "value": "#dedfe3", + "type": "color", + "group": "components", + "original": { + "value": "{color.surface.interactive-active.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-surface-active", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "surface", + "subitem": "active" + }, + "path": [ + "button", + "tertiary", + "surface", + "active" + ], + "key": "{button.tertiary.surface.active}" + }, + { + "value": "rgba(0, 0, 0, 0)", + "type": "color", + "group": "components", + "original": { + "value": "transparent", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-border-color-default", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "border-color", + "subitem": "default" + }, + "path": [ + "button", + "tertiary", + "border-color", + "default" + ], + "key": "{button.tertiary.border-color.default}" + }, + { + "value": "#3b3d4566", + "type": "color", + "group": "components", + "original": { + "value": "{color.border.strong.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-border-color-hover", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "border-color", + "subitem": "hover" + }, + "path": [ + "button", + "tertiary", + "border-color", + "hover" + ], + "key": "{button.tertiary.border-color.hover}" + }, + { + "value": "#0c56e9", + "type": "color", + "group": "components", + "original": { + "value": "{color.focus.action.internal.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-border-color-focus", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "border-color", + "subitem": "focus" + }, + "path": [ + "button", + "tertiary", + "border-color", + "focus" + ], + "key": "{button.tertiary.border-color.focus}" + }, + { + "value": "#3b3d4566", + "type": "color", + "group": "components", + "original": { + "value": "{color.border.strong.value}", + "type": "color", + "group": "components" + }, + "name": "token-button-tertiary-border-color-active", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "border-color", + "subitem": "active" + }, + "path": [ + "button", + "tertiary", + "border-color", + "active" + ], + "key": "{button.tertiary.border-color.active}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-tertiary-box-shadow-default", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "box-shadow", + "subitem": "default" + }, + "path": [ + "button", + "tertiary", + "box-shadow", + "default" + ], + "key": "{button.tertiary.box-shadow.default}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-tertiary-box-shadow-focus", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "box-shadow", + "subitem": "focus" + }, + "path": [ + "button", + "tertiary", + "box-shadow", + "focus" + ], + "key": "{button.tertiary.box-shadow.focus}" + }, + { + "value": "none", + "original": { + "value": "none" + }, + "name": "token-button-tertiary-box-shadow-active", + "attributes": { + "category": "button", + "type": "tertiary", + "item": "box-shadow", + "subitem": "active" + }, + "path": [ + "button", + "tertiary", + "box-shadow", + "active" + ], + "key": "{button.tertiary.box-shadow.active}" + }, + { +>>>>>>> 3c7dc887e (generated CSS output files) + "value": "#0c0c0e", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.strong.value}", + "type": "color", + "group": "components" + }, + "name": "token-form-label-color", + "attributes": { + "category": "form", + "type": "label", + "item": "color" + }, + "path": [ + "form", + "label", + "color" + ], + "key": "{form.label.color}" + }, + { + "value": "#0c0c0e", + "type": "color", + "group": "components", + "original": { + "value": "{form.label.color.value}", + "type": "color", + "group": "components" + }, + "name": "token-form-legend-color", + "attributes": { + "category": "form", + "type": "legend", + "item": "color" + }, + "path": [ + "form", + "legend", + "color" + ], + "key": "{form.legend.color}" + }, { "value": "#656a76", "type": "color", @@ -4752,7 +8537,8 @@ "form", "helper-text", "color" - ] + ], + "key": "{form.helper-text.color}" }, { "value": "#656a76", @@ -4775,9 +8561,151 @@ "indicator", "optional", "color" - ] + ], + "key": "{form.indicator.optional.color}" + }, + { +<<<<<<< HEAD +======= + "value": "24px", + "type": "size", + "group": "components", + "original": { + "value": "24", + "type": "size", + "group": "components" + }, + "name": "token-form-visibility-toggle-size", + "attributes": { + "category": "form", + "type": "visibility-toggle", + "item": "size" + }, + "path": [ + "form", + "visibility-toggle", + "size" + ], + "key": "{form.visibility-toggle.size}" + }, + { + "value": "3px", + "type": "size", + "group": "components", + "comment": "here we're taking into account the 1px border", + "original": { + "value": "3", + "type": "size", + "group": "components", + "comment": "here we're taking into account the 1px border" + }, + "name": "token-form-visibility-toggle-padding", + "attributes": { + "category": "form", + "type": "visibility-toggle", + "item": "padding" + }, + "path": [ + "form", + "visibility-toggle", + "padding" + ], + "key": "{form.visibility-toggle.padding}" + }, + { + "value": "#3b3d45", + "type": "color", + "group": "components", + "original": { + "value": "{color.foreground.primary.value}", + "type": "color", + "group": "components" + }, + "name": "token-form-visibility-toggle-color", + "attributes": { + "category": "form", + "type": "visibility-toggle", + "item": "color" + }, + "path": [ + "form", + "visibility-toggle", + "color" + ], + "key": "{form.visibility-toggle.color}" + }, + { + "value": "rgba(0, 0, 0, 0)", + "type": "color", + "group": "components", + "original": { + "value": "transparent", + "type": "color", + "group": "components" + }, + "name": "token-form-visibility-toggle-background-color", + "attributes": { + "category": "form", + "type": "visibility-toggle", + "item": "background-color" + }, + "path": [ + "form", + "visibility-toggle", + "background-color" + ], + "key": "{form.visibility-toggle.background-color}" + }, + { + "value": "1px", + "type": "size", + "group": "components", + "original": { + "value": "1", + "type": "size", + "group": "components" + }, + "name": "token-form-visibility-toggle-border-width", + "attributes": { + "category": "form", + "type": "visibility-toggle", + "item": "border", + "subitem": "width" + }, + "path": [ + "form", + "visibility-toggle", + "border", + "width" + ], + "key": "{form.visibility-toggle.border.width}" + }, + { + "value": "rgba(0, 0, 0, 0)", + "type": "color", + "group": "components", + "original": { + "value": "transparent", + "type": "color", + "group": "components" + }, + "name": "token-form-visibility-toggle-border-color", + "attributes": { + "category": "form", + "type": "visibility-toggle", + "item": "border", + "subitem": "color" + }, + "path": [ + "form", + "visibility-toggle", + "border", + "color" + ], + "key": "{form.visibility-toggle.border.color}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "#c00005", "type": "color", "group": "components", @@ -4796,7 +8724,8 @@ "form", "error", "color" - ] + ], + "key": "{form.error.color}" }, { "value": "14px", @@ -4814,8 +8743,85 @@ "path": [ "form", "error", +<<<<<<< HEAD "icon-size" ] +======= + "icon", + "size" + ], + "key": "{form.error.icon.size}" + }, + { + "value": "0px", + "type": "size", + "original": { + "value": "0", + "type": "size" + }, + "name": "token-form-error-icon-margin-horizontal", + "attributes": { + "category": "form", + "type": "error", + "item": "icon", + "subitem": "margin", + "state": "horizontal" + }, + "path": [ + "form", + "error", + "icon", + "margin", + "horizontal" + ], + "key": "{form.error.icon.margin.horizontal}" + }, + { + "value": "2px", + "type": "size", + "comment": "This extra margin is used for vertical optical alignment.", + "original": { + "value": "2", + "type": "size", + "comment": "This extra margin is used for vertical optical alignment." + }, + "name": "token-form-error-icon-margin-vertical", + "attributes": { + "category": "form", + "type": "error", + "item": "icon", + "subitem": "margin", + "state": "vertical" + }, + "path": [ + "form", + "error", + "icon", + "margin", + "vertical" + ], + "key": "{form.error.icon.margin.vertical}" + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-form-error-gap", + "attributes": { + "category": "form", + "type": "error", + "item": "gap" + }, + "path": [ + "form", + "error", + "gap" + ], + "key": "{form.error.gap}" +>>>>>>> 3c7dc887e (generated CSS output files) }, { "value": "16px", @@ -4834,7 +8840,8 @@ "form", "checkbox", "size" - ] + ], + "key": "{form.checkbox.size}" }, { "value": "3px", @@ -4855,7 +8862,8 @@ "checkbox", "border", "radius" - ] + ], + "key": "{form.checkbox.border.radius}" }, { "value": "1px", @@ -4876,7 +8884,8 @@ "checkbox", "border", "width" - ] + ], + "key": "{form.checkbox.border.width}" }, { "value": "12px", @@ -4897,7 +8906,8 @@ "checkbox", "background-image", "size" - ] + ], + "key": "{form.checkbox.background-image.size}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", @@ -4918,7 +8928,8 @@ "checkbox", "background-image", "data-url" - ] + ], + "key": "{form.checkbox.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", @@ -4939,7 +8950,8 @@ "checkbox", "background-image", "data-url-indeterminate" - ] + ], + "key": "{form.checkbox.background-image.data-url-indeterminate}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -4960,7 +8972,8 @@ "checkbox", "background-image", "data-url-disabled" - ] + ], + "key": "{form.checkbox.background-image.data-url-disabled}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -4981,9 +8994,53 @@ "checkbox", "background-image", "data-url-indeterminate-disabled" - ] + ], + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" + }, + { +<<<<<<< HEAD +======= + "value": "32px", + "type": "size", + "original": { + "value": "{form.control.standard-height.value}", + "type": "size" + }, + "name": "token-form-file-input-min-height", + "attributes": { + "category": "form", + "type": "file-input", + "item": "min-height" + }, + "path": [ + "form", + "file-input", + "min-height" + ], + "key": "{form.file-input.min-height}" + }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-form-file-input-margin-right", + "attributes": { + "category": "form", + "type": "file-input", + "item": "margin-right" + }, + "path": [ + "form", + "file-input", + "margin-right" + ], + "key": "{form.file-input.margin-right}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "#0c0c0e", "type": "color", "group": "components", @@ -5006,7 +9063,8 @@ "base", "foreground", "value-color" - ] + ], + "key": "{form.control.base.foreground.value-color}" }, { "value": "#656a76", @@ -5031,7 +9089,8 @@ "base", "foreground", "placeholder-color" - ] + ], + "key": "{form.control.base.foreground.placeholder-color}" }, { "value": "#ffffff", @@ -5056,7 +9115,8 @@ "base", "surface-color", "default" - ] + ], + "key": "{form.control.base.surface-color.default}" }, { "value": "#f1f2f3", @@ -5081,7 +9141,8 @@ "base", "surface-color", "hover" - ] + ], + "key": "{form.control.base.surface-color.hover}" }, { "value": "#8c909c", @@ -5106,7 +9167,8 @@ "base", "border-color", "default" - ] + ], + "key": "{form.control.base.border-color.default}" }, { "value": "#656a76", @@ -5131,9 +9193,35 @@ "base", "border-color", "hover" - ] + ], + "key": "{form.control.base.border-color.hover}" + }, + { +<<<<<<< HEAD +======= + "value": "inset 0px 1px 2px 1px #656a761a", + "original": { + "value": "{elevation.inset.box-shadow.value}" + }, + "name": "token-form-control-base-box-shadow-default", + "attributes": { + "category": "form", + "type": "control", + "item": "base", + "subitem": "box-shadow", + "state": "default" + }, + "path": [ + "form", + "control", + "base", + "box-shadow", + "default" + ], + "key": "{form.control.base.box-shadow.default}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "#ffffff", "type": "color", "group": "components", @@ -5154,7 +9242,8 @@ "control", "checked", "foreground-color" - ] + ], + "key": "{form.control.checked.foreground-color}" }, { "value": "#1060ff", @@ -5179,7 +9268,8 @@ "checked", "surface-color", "default" - ] + ], + "key": "{form.control.checked.surface-color.default}" }, { "value": "#0c56e9", @@ -5204,7 +9294,8 @@ "checked", "surface-color", "hover" - ] + ], + "key": "{form.control.checked.surface-color.hover}" }, { "value": "#0c56e9", @@ -5229,7 +9320,8 @@ "checked", "border-color", "default" - ] + ], + "key": "{form.control.checked.border-color.default}" }, { "value": "#0046d1", @@ -5254,7 +9346,8 @@ "checked", "border-color", "hover" - ] + ], + "key": "{form.control.checked.border-color.hover}" }, { "value": "#c00005", @@ -5279,7 +9372,8 @@ "invalid", "border-color", "default" - ] + ], + "key": "{form.control.invalid.border-color.default}" }, { "value": "#940004", @@ -5304,9 +9398,39 @@ "invalid", "border-color", "hover" - ] + ], + "key": "{form.control.invalid.border-color.hover}" + }, + { +<<<<<<< HEAD +======= + "value": "#dd7578", + "type": "color", + "group": "components", + "original": { + "value": "{color.focus.critical.external.value}", + "type": "color", + "group": "components" + }, + "name": "token-form-control-invalid-outline-color", + "attributes": { + "category": "form", + "type": "control", + "item": "invalid", + "subitem": "outline", + "state": "color" + }, + "path": [ + "form", + "control", + "invalid", + "outline", + "color" + ], + "key": "{form.control.invalid.outline.color}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "#3b3d45", "type": "color", "group": "components", @@ -5327,7 +9451,8 @@ "control", "readonly", "foreground-color" - ] + ], + "key": "{form.control.readonly.foreground-color}" }, { "value": "#f1f2f3", @@ -5350,7 +9475,8 @@ "control", "readonly", "surface-color" - ] + ], + "key": "{form.control.readonly.surface-color}" }, { "value": "#656a761a", @@ -5373,9 +9499,91 @@ "control", "readonly", "border-color" - ] + ], + "key": "{form.control.readonly.border-color}" + }, + { +<<<<<<< HEAD +======= + "value": "#5990ff", + "type": "color", + "group": "components", + "original": { + "value": "{color.focus.action.external.value}", + "type": "color", + "group": "components" + }, + "name": "token-form-control-focus-outline-color", + "attributes": { + "category": "form", + "type": "control", + "item": "focus", + "subitem": "outline", + "state": "color" + }, + "path": [ + "form", + "control", + "focus", + "outline", + "color" + ], + "key": "{form.control.focus.outline.color}" + }, + { + "value": "3px", + "type": "size", + "group": "components", + "original": { + "value": "3", + "type": "size", + "group": "components" + }, + "name": "token-form-control-focus-outline-width", + "attributes": { + "category": "form", + "type": "control", + "item": "focus", + "subitem": "outline", + "state": "width" + }, + "path": [ + "form", + "control", + "focus", + "outline", + "width" + ], + "key": "{form.control.focus.outline.width}" + }, + { + "value": "0px", + "type": "size", + "group": "components", + "original": { + "value": "0", + "type": "size", + "group": "components" + }, + "name": "token-form-control-focus-outline-offset", + "attributes": { + "category": "form", + "type": "control", + "item": "focus", + "subitem": "outline", + "state": "offset" + }, + "path": [ + "form", + "control", + "focus", + "outline", + "offset" + ], + "key": "{form.control.focus.outline.offset}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "#8c909c", "type": "color", "group": "components", @@ -5396,7 +9604,8 @@ "control", "disabled", "foreground-color" - ] + ], + "key": "{form.control.disabled.foreground-color}" }, { "value": "#fafafa", @@ -5419,7 +9628,8 @@ "control", "disabled", "surface-color" - ] + ], + "key": "{form.control.disabled.surface-color}" }, { "value": "#656a7633", @@ -5442,9 +9652,35 @@ "control", "disabled", "border-color" - ] + ], + "key": "{form.control.disabled.border-color}" + }, + { +<<<<<<< HEAD +======= + "value": "32px", + "type": "size", + "comment": "Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size).", + "original": { + "value": "32", + "type": "size", + "comment": "Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size)." + }, + "name": "token-form-control-standard-height", + "attributes": { + "category": "form", + "type": "control", + "item": "standard-height" + }, + "path": [ + "form", + "control", + "standard-height" + ], + "key": "{form.control.standard-height}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "7px", "type": "size", "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.", @@ -5463,9 +9699,35 @@ "form", "control", "padding" - ] + ], + "key": "{form.control.padding}" + }, + { +<<<<<<< HEAD +======= + "value": "31px", + "type": "size", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon.", + "original": { + "value": "31", + "type": "size", + "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon." + }, + "name": "token-form-control-padding-with-icon", + "attributes": { + "category": "form", + "type": "control", + "item": "padding-with-icon" + }, + "path": [ + "form", + "control", + "padding-with-icon" + ], + "key": "{form.control.padding-with-icon}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "5px", "type": "size", "original": { @@ -5484,7 +9746,8 @@ "control", "border", "radius" - ] + ], + "key": "{form.control.border.radius}" }, { "value": "1px", @@ -5505,9 +9768,57 @@ "control", "border", "width" - ] + ], + "key": "{form.control.border.width}" + }, + { +<<<<<<< HEAD +======= + "value": "24px", + "type": "size", + "original": { + "value": "{form.visibility-toggle.size.value}", + "type": "size" + }, + "name": "token-form-masked-input-toggle-button-size", + "attributes": { + "category": "form", + "type": "masked-input", + "item": "toggle-button", + "subitem": "size" + }, + "path": [ + "form", + "masked-input", + "toggle-button", + "size" + ], + "key": "{form.masked-input.toggle-button.size}" + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-form-masked-input-copy-button-margin-right", + "attributes": { + "category": "form", + "type": "masked-input", + "item": "copy-button", + "subitem": "margin-right" + }, + "path": [ + "form", + "masked-input", + "copy-button", + "margin-right" + ], + "key": "{form.masked-input.copy-button.margin-right}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "16px", "type": "size", "original": { @@ -5524,7 +9835,8 @@ "form", "radio", "size" - ] + ], + "key": "{form.radio.size}" }, { "value": "1px", @@ -5545,7 +9857,8 @@ "radio", "border", "width" - ] + ], + "key": "{form.radio.border.width}" }, { "value": "12px", @@ -5566,7 +9879,8 @@ "radio", "background-image", "size" - ] + ], + "key": "{form.radio.background-image.size}" }, { "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", @@ -5587,7 +9901,8 @@ "radio", "background-image", "data-url" - ] + ], + "key": "{form.radio.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -5608,9 +9923,33 @@ "radio", "background-image", "data-url-disabled" - ] + ], + "key": "{form.radio.background-image.data-url-disabled}" + }, + { +<<<<<<< HEAD +======= + "value": "1px", + "type": "size", + "original": { + "value": "1", + "type": "size" + }, + "name": "token-form-radio-outline-offset", + "attributes": { + "category": "form", + "type": "radio", + "item": "outline-offset" + }, + "path": [ + "form", + "radio", + "outline-offset" + ], + "key": "{form.radio.outline-offset}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "16px", "type": "size", "original": { @@ -5627,89 +9966,204 @@ "form", "radiocard-group", "gap" - ] + ], + "key": "{form.radiocard-group.gap}" + }, + { +<<<<<<< HEAD +======= + "value": "12px", + "type": "size", + "original": { + "value": "12", + "type": "size" + }, + "name": "token-form-radiocard-group-legend-margin-bottom", + "attributes": { + "category": "form", + "type": "radiocard-group", + "item": "legend", + "subitem": "margin-bottom" + }, + "path": [ + "form", + "radiocard-group", + "legend", + "margin-bottom" + ], + "key": "{form.radiocard-group.legend.margin-bottom}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "1px", "type": "size", "original": { - "value": "1", - "type": "size" + "value": "1", + "type": "size" + }, + "name": "token-form-radiocard-border-width", + "attributes": { + "category": "form", + "type": "radiocard", + "item": "border", + "subitem": "width" + }, + "path": [ + "form", + "radiocard", + "border", + "width" + ], + "key": "{form.radiocard.border.width}" + }, + { + "value": "6px", + "type": "size", + "original": { + "value": "6", + "type": "size" + }, + "name": "token-form-radiocard-border-radius", + "attributes": { + "category": "form", + "type": "radiocard", + "item": "border", + "subitem": "radius" + }, + "path": [ + "form", + "radiocard", + "border", + "radius" + ], + "key": "{form.radiocard.border.radius}" + }, + { + "value": "24px", + "type": "size", + "original": { + "value": "24", + "type": "size" + }, + "name": "token-form-radiocard-content-padding", + "attributes": { + "category": "form", + "type": "radiocard", + "item": "content-padding" + }, + "path": [ + "form", + "radiocard", + "content-padding" + ], + "key": "{form.radiocard.content-padding}" + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-form-radiocard-control-padding", + "attributes": { + "category": "form", + "type": "radiocard", + "item": "control-padding" + }, + "path": [ + "form", + "radiocard", + "control-padding" + ], + "key": "{form.radiocard.control-padding}" + }, + { +<<<<<<< HEAD +======= + "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", + "original": { + "value": "{elevation.mid.box-shadow.value}" }, - "name": "token-form-radiocard-border-width", + "name": "token-form-radiocard-box-shadow-default", "attributes": { "category": "form", "type": "radiocard", - "item": "border", - "subitem": "width" + "item": "box-shadow", + "subitem": "default" }, "path": [ "form", "radiocard", - "border", - "width" - ] + "box-shadow", + "default" + ], + "key": "{form.radiocard.box-shadow.default}" }, { - "value": "6px", - "type": "size", + "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", "original": { - "value": "6", - "type": "size" + "value": "{elevation.high.box-shadow.value}" }, - "name": "token-form-radiocard-border-radius", + "name": "token-form-radiocard-box-shadow-hover", "attributes": { "category": "form", "type": "radiocard", - "item": "border", - "subitem": "radius" + "item": "box-shadow", + "subitem": "hover" }, "path": [ "form", "radiocard", - "border", - "radius" - ] + "box-shadow", + "hover" + ], + "key": "{form.radiocard.box-shadow.hover}" }, { - "value": "24px", - "type": "size", + "value": "0 0 0 3px #5990ff", + "comment": "This is a custom shadow used to add a focus ring around the card", "original": { - "value": "24", - "type": "size" + "value": "0 0 0 3px {form.control.focus.outline.color.value}", + "comment": "This is a custom shadow used to add a focus ring around the card" }, - "name": "token-form-radiocard-content-padding", + "name": "token-form-radiocard-box-shadow-focus", "attributes": { "category": "form", "type": "radiocard", - "item": "content-padding" + "item": "box-shadow", + "subitem": "focus" }, "path": [ "form", "radiocard", - "content-padding" - ] + "box-shadow", + "focus" + ], + "key": "{form.radiocard.box-shadow.focus}" }, { - "value": "8px", - "type": "size", + "value": "none", "original": { - "value": "8", - "type": "size" + "value": "none" }, - "name": "token-form-radiocard-control-padding", + "name": "token-form-radiocard-box-shadow-disabled", "attributes": { "category": "form", "type": "radiocard", - "item": "control-padding" + "item": "box-shadow", + "subitem": "disabled" }, "path": [ "form", "radiocard", - "control-padding" - ] + "box-shadow", + "disabled" + ], + "key": "{form.radiocard.box-shadow.disabled}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "0.2s", "type": "time", "unit": "s", @@ -5730,7 +10184,8 @@ "radiocard", "transition", "duration" - ] + ], + "key": "{form.radiocard.transition.duration}" }, { "value": "16px", @@ -5751,7 +10206,8 @@ "select", "background-image", "size" - ] + ], + "key": "{form.select.background-image.size}" }, { "value": "7px", @@ -5772,7 +10228,8 @@ "select", "background-image", "position-right-x" - ] + ], + "key": "{form.select.background-image.position-right-x}" }, { "value": "9px", @@ -5793,7 +10250,8 @@ "select", "background-image", "position-top-y" - ] + ], + "key": "{form.select.background-image.position-top-y}" }, { "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", @@ -5814,7 +10272,8 @@ "select", "background-image", "data-url" - ] + ], + "key": "{form.select.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", @@ -5835,9 +10294,73 @@ "select", "background-image", "data-url-disabled" - ] + ], + "key": "{form.select.background-image.data-url-disabled}" + }, + { +<<<<<<< HEAD +======= + "value": "0px", + "type": "size", + "original": { + "value": "0", + "type": "size" + }, + "name": "token-form-select-outline-offset", + "attributes": { + "category": "form", + "type": "select", + "item": "outline-offset" + }, + "path": [ + "form", + "select", + "outline-offset" + ], + "key": "{form.select.outline-offset}" + }, + { + "value": "32px", + "type": "size", + "original": { + "value": "{form.control.standard-height.value}", + "type": "size" + }, + "name": "token-form-text-area-min-height", + "attributes": { + "category": "form", + "type": "text-area", + "item": "min-height" + }, + "path": [ + "form", + "text-area", + "min-height" + ], + "key": "{form.text-area.min-height}" + }, + { + "value": "0px", + "type": "size", + "original": { + "value": "0", + "type": "size" + }, + "name": "token-form-text-area-outline-offset", + "attributes": { + "category": "form", + "type": "text-area", + "item": "outline-offset" + }, + "path": [ + "form", + "text-area", + "outline-offset" + ], + "key": "{form.text-area.outline-offset}" }, { +>>>>>>> 3c7dc887e (generated CSS output files) "value": "16px", "type": "size", "original": { @@ -5856,7 +10379,8 @@ "text-input", "background-image", "size" - ] + ], + "key": "{form.text-input.background-image.size}" }, { "value": "7px", @@ -5877,7 +10401,8 @@ "text-input", "background-image", "position-x" - ] + ], + "key": "{form.text-input.background-image.position-x}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", @@ -5898,7 +10423,8 @@ "text-input", "background-image", "data-url-date" - ] + ], + "key": "{form.text-input.background-image.data-url-date}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", @@ -5919,7 +10445,8 @@ "text-input", "background-image", "data-url-time" - ] + ], + "key": "{form.text-input.background-image.data-url-time}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", @@ -5940,7 +10467,8 @@ "text-input", "background-image", "data-url-search" - ] + ], + "key": "{form.text-input.background-image.data-url-search}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", @@ -5961,7 +10489,8 @@ "text-input", "background-image", "data-url-search-cancel" - ] + ], + "key": "{form.text-input.background-image.data-url-search-cancel}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", @@ -5982,7 +10511,8 @@ "text-input", "background-image", "data-url-search-loading" - ] + ], + "key": "{form.text-input.background-image.data-url-search-loading}" }, { "value": "32px", @@ -6001,7 +10531,8 @@ "form", "toggle", "width" - ] + ], + "key": "{form.toggle.width}" }, { "value": "16px", @@ -6020,7 +10551,8 @@ "form", "toggle", "height" - ] + ], + "key": "{form.toggle.height}" }, { "value": "#f1f2f3", @@ -6047,7 +10579,8 @@ "base", "surface-color", "default" - ] + ], + "key": "{form.toggle.base.surface-color.default}" }, { "value": "3px", @@ -6068,7 +10601,8 @@ "toggle", "border", "radius" - ] + ], + "key": "{form.toggle.border.radius}" }, { "value": "1px", @@ -6089,7 +10623,8 @@ "toggle", "border", "width" - ] + ], + "key": "{form.toggle.border.width}" }, { "value": "12px", @@ -6110,7 +10645,8 @@ "toggle", "background-image", "size" - ] + ], + "key": "{form.toggle.background-image.size}" }, { "value": "2px", @@ -6131,7 +10667,8 @@ "toggle", "background-image", "position-x" - ] + ], + "key": "{form.toggle.background-image.position-x}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", @@ -6152,7 +10689,8 @@ "toggle", "background-image", "data-url" - ] + ], + "key": "{form.toggle.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -6173,7 +10711,8 @@ "toggle", "background-image", "data-url-disabled" - ] + ], + "key": "{form.toggle.background-image.data-url-disabled}" }, { "value": "0.2s", @@ -6196,7 +10735,8 @@ "toggle", "transition", "duration" - ] + ], + "key": "{form.toggle.transition.duration}" }, { "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", @@ -6215,7 +10755,8 @@ "toggle", "transition", "timing-function" - ] + ], + "key": "{form.toggle.transition.timing-function}" }, { "value": "16px", @@ -6233,8 +10774,97 @@ "path": [ "form", "toggle", +<<<<<<< HEAD "thumb-size" ] +======= + "thumb", + "size" + ], + "key": "{form.toggle.thumb.size}" + }, + { + "value": "50%px", + "type": "size", + "original": { + "value": "50%", + "type": "size" + }, + "name": "token-form-toggle-thumb-border-radius", + "attributes": { + "category": "form", + "type": "toggle", + "item": "thumb", + "subitem": "border-radius" + }, + "path": [ + "form", + "toggle", + "thumb", + "border-radius" + ], + "key": "{form.toggle.thumb.border-radius}" + }, + { + "value": "3px", + "type": "size", + "original": { + "value": "3", + "type": "size" + }, + "name": "token-form-toggle-outline-width", + "attributes": { + "category": "form", + "type": "toggle", + "item": "outline", + "subitem": "width" + }, + "path": [ + "form", + "toggle", + "outline", + "width" + ], + "key": "{form.toggle.outline.width}" + }, + { + "value": "1px", + "type": "size", + "original": { + "value": "1", + "type": "size" + }, + "name": "token-form-toggle-outline-offset", + "attributes": { + "category": "form", + "type": "toggle", + "item": "outline", + "subitem": "offset" + }, + "path": [ + "form", + "toggle", + "outline", + "offset" + ], + "key": "{form.toggle.outline.offset}" + }, + { + "value": "0px", + "type": "size", + "original": { + "value": "0", + "type": "size" + }, + "name": "token-outline-offset", + "attributes": { + "category": "outline-offset" + }, + "path": [ + "outline-offset" + ], + "key": "{outline-offset}" +>>>>>>> 3c7dc887e (generated CSS output files) }, { "value": "36px", @@ -6255,7 +10885,8 @@ "nav", "control", "height" - ] + ], + "key": "{pagination.nav.control.height}" }, { "value": "12px", @@ -6278,7 +10909,8 @@ "control", "padding", "horizontal" - ] + ], + "key": "{pagination.nav.control.padding.horizontal}" }, { "value": "4px", @@ -6299,7 +10931,8 @@ "nav", "control", "focus-inset" - ] + ], + "key": "{pagination.nav.control.focus-inset}" }, { "value": "6px", @@ -6320,7 +10953,8 @@ "nav", "control", "icon-spacing" - ] + ], + "key": "{pagination.nav.control.icon-spacing}" }, { "value": "2px", @@ -6341,7 +10975,8 @@ "nav", "indicator", "height" - ] + ], + "key": "{pagination.nav.indicator.height}" }, { "value": "6px", @@ -6362,7 +10997,8 @@ "nav", "indicator", "spacing" - ] + ], + "key": "{pagination.nav.indicator.spacing}" }, { "value": "8px", @@ -6383,7 +11019,8 @@ "child", "spacing", "vertical" - ] + ], + "key": "{pagination.child.spacing.vertical}" }, { "value": "20px", @@ -6404,7 +11041,8 @@ "child", "spacing", "horizontal" - ] + ], + "key": "{pagination.child.spacing.horizontal}" }, { "value": "1px", @@ -6425,7 +11063,8 @@ "wrapper", "border", "width" - ] + ], + "key": "{side-nav.wrapper.border.width}" }, { "value": "#656a76", @@ -6448,7 +11087,8 @@ "wrapper", "border", "color" - ] + ], + "key": "{side-nav.wrapper.border.color}" }, { "value": "16px", @@ -6469,7 +11109,8 @@ "wrapper", "padding", "horizontal" - ] + ], + "key": "{side-nav.wrapper.padding.horizontal}" }, { "value": "16px", @@ -6490,7 +11131,8 @@ "wrapper", "padding", "vertical" - ] + ], + "key": "{side-nav.wrapper.padding.vertical}" }, { "value": "8px", @@ -6511,7 +11153,8 @@ "wrapper", "padding", "horizontal-minimized" - ] + ], + "key": "{side-nav.wrapper.padding.horizontal-minimized}" }, { "value": "22px", @@ -6532,7 +11175,8 @@ "wrapper", "padding", "vertical-minimized" - ] + ], + "key": "{side-nav.wrapper.padding.vertical-minimized}" }, { "value": "5px", @@ -6553,7 +11197,8 @@ "toggle-button", "border", "radius" - ] + ], + "key": "{side-nav.toggle-button.border.radius}" }, { "value": "4px", @@ -6574,7 +11219,8 @@ "header", "home-link", "padding" - ] + ], + "key": "{side-nav.header.home-link.padding}" }, { "value": "48px", @@ -6595,7 +11241,8 @@ "header", "home-link", "logo-size" - ] + ], + "key": "{side-nav.header.home-link.logo-size}" }, { "value": "32px", @@ -6616,7 +11263,8 @@ "header", "home-link", "logo-size-minimized" - ] + ], + "key": "{side-nav.header.home-link.logo-size-minimized}" }, { "value": "8px", @@ -6637,7 +11285,8 @@ "header", "actions", "spacing" - ] + ], + "key": "{side-nav.header.actions.spacing}" }, { "value": "24px", @@ -6658,7 +11307,8 @@ "body", "list", "margin-vertical" - ] + ], + "key": "{side-nav.body.list.margin-vertical}" }, { "value": "36px", @@ -6679,7 +11329,8 @@ "body", "list-item", "height" - ] + ], + "key": "{side-nav.body.list-item.height}" }, { "value": "8px", @@ -6702,7 +11353,8 @@ "list-item", "padding", "horizontal" - ] + ], + "key": "{side-nav.body.list-item.padding.horizontal}" }, { "value": "4px", @@ -6725,7 +11377,8 @@ "list-item", "padding", "vertical" - ] + ], + "key": "{side-nav.body.list-item.padding.vertical}" }, { "value": "2px", @@ -6746,7 +11399,8 @@ "body", "list-item", "spacing-vertical" - ] + ], + "key": "{side-nav.body.list-item.spacing-vertical}" }, { "value": "8px", @@ -6767,7 +11421,8 @@ "body", "list-item", "content-spacing-horizontal" - ] + ], + "key": "{side-nav.body.list-item.content-spacing-horizontal}" }, { "value": "5px", @@ -6788,7 +11443,8 @@ "body", "list-item", "border-radius" - ] + ], + "key": "{side-nav.body.list-item.border-radius}" }, { "value": "#dedfe3", @@ -6811,7 +11467,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{side-nav.color.foreground.primary}" }, { "value": "#ffffff", @@ -6834,7 +11491,8 @@ "color", "foreground", "strong" - ] + ], + "key": "{side-nav.color.foreground.strong}" }, { "value": "#8c909c", @@ -6857,7 +11515,8 @@ "color", "foreground", "faint" - ] + ], + "key": "{side-nav.color.foreground.faint}" }, { "value": "#0c0c0e", @@ -6880,7 +11539,8 @@ "color", "surface", "primary" - ] + ], + "key": "{side-nav.color.surface.primary}" }, { "value": "#3b3d45", @@ -6903,7 +11563,8 @@ "color", "surface", "interactive-hover" - ] + ], + "key": "{side-nav.color.surface.interactive-hover}" }, { "value": "#656a76", @@ -6926,7 +11587,8 @@ "color", "surface", "interactive-active" - ] + ], + "key": "{side-nav.color.surface.interactive-active}" }, { "value": "36px", @@ -6947,7 +11609,8 @@ "tab", "height", "medium" - ] + ], + "key": "{tabs.tab.height.medium}" }, { "value": "48px", @@ -6968,7 +11631,8 @@ "tab", "height", "large" - ] + ], + "key": "{tabs.tab.height.large}" }, { "value": "12px", @@ -6991,7 +11655,8 @@ "padding", "horizontal", "medium" - ] + ], + "key": "{tabs.tab.padding.horizontal.medium}" }, { "value": "20px", @@ -7014,7 +11679,8 @@ "padding", "horizontal", "large" - ] + ], + "key": "{tabs.tab.padding.horizontal.large}" }, { "value": "0px", @@ -7035,7 +11701,8 @@ "tab", "padding", "vertical" - ] + ], + "key": "{tabs.tab.padding.vertical}" }, { "value": "5px", @@ -7054,7 +11721,8 @@ "tabs", "tab", "border-radius" - ] + ], + "key": "{tabs.tab.border-radius}" }, { "value": "6px", @@ -7073,7 +11741,8 @@ "tabs", "tab", "focus-inset" - ] + ], + "key": "{tabs.tab.focus-inset}" }, { "value": "6px", @@ -7092,7 +11761,8 @@ "tabs", "tab", "gutter" - ] + ], + "key": "{tabs.tab.gutter}" }, { "value": "3px", @@ -7111,7 +11781,8 @@ "tabs", "indicator", "height" - ] + ], + "key": "{tabs.indicator.height}" }, { "value": "cubic-bezier(0.5, 1, 0.89, 1)", @@ -7130,7 +11801,8 @@ "indicator", "transition", "function" - ] + ], + "key": "{tabs.indicator.transition.function}" }, { "value": "0.6s", @@ -7153,7 +11825,8 @@ "indicator", "transition", "duration" - ] + ], + "key": "{tabs.indicator.transition.duration}" }, { "value": "1px", @@ -7172,7 +11845,8 @@ "tabs", "divider", "height" - ] + ], + "key": "{tabs.divider.height}" }, { "value": "5px", @@ -7189,7 +11863,8 @@ "path": [ "tooltip", "border-radius" - ] + ], + "key": "{tooltip.border-radius}" }, { "value": "var(--token-color-foreground-high-contrast)", @@ -7212,7 +11887,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{tooltip.color.foreground.primary}" }, { "value": "var(--token-color-palette-neutral-700)", @@ -7235,7 +11911,8 @@ "color", "surface", "primary" - ] + ], + "key": "{tooltip.color.surface.primary}" }, { "value": "-2px", @@ -7252,7 +11929,8 @@ "path": [ "tooltip", "focus-offset" - ] + ], + "key": "{tooltip.focus-offset}" }, { "value": "280px", @@ -7269,7 +11947,8 @@ "path": [ "tooltip", "max-width" - ] + ], + "key": "{tooltip.max-width}" }, { "value": "12px", @@ -7288,7 +11967,8 @@ "tooltip", "padding", "horizontal" - ] + ], + "key": "{tooltip.padding.horizontal}" }, { "value": "8px", @@ -7307,7 +11987,8 @@ "tooltip", "padding", "vertical" - ] + ], + "key": "{tooltip.padding.vertical}" }, { "value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", @@ -7324,7 +12005,8 @@ "tooltip", "transition", "function" - ] + ], + "key": "{tooltip.transition.function}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7341,7 +12023,8 @@ "typography", "font-stack", "display" - ] + ], + "key": "{typography.font-stack.display}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7358,7 +12041,8 @@ "typography", "font-stack", "text" - ] + ], + "key": "{typography.font-stack.text}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -7375,7 +12059,8 @@ "typography", "font-stack", "code" - ] + ], + "key": "{typography.font-stack.code}" }, { "value": "400", @@ -7392,7 +12077,8 @@ "typography", "font-weight", "regular" - ] + ], + "key": "{typography.font-weight.regular}" }, { "value": "500", @@ -7409,7 +12095,8 @@ "typography", "font-weight", "medium" - ] + ], + "key": "{typography.font-weight.medium}" }, { "value": "600", @@ -7426,7 +12113,8 @@ "typography", "font-weight", "semibold" - ] + ], + "key": "{typography.font-weight.semibold}" }, { "value": "700", @@ -7443,7 +12131,8 @@ "typography", "font-weight", "bold" - ] + ], + "key": "{typography.font-weight.bold}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7460,7 +12149,8 @@ "typography", "display-500", "font-family" - ] + ], + "key": "{typography.display-500.font-family}" }, { "value": "1.875rem", @@ -7481,7 +12171,8 @@ "typography", "display-500", "font-size" - ] + ], + "key": "{typography.display-500.font-size}" }, { "value": "1.2666", @@ -7500,7 +12191,8 @@ "typography", "display-500", "line-height" - ] + ], + "key": "{typography.display-500.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7517,7 +12209,8 @@ "typography", "display-400", "font-family" - ] + ], + "key": "{typography.display-400.font-family}" }, { "value": "1.5rem", @@ -7538,7 +12231,8 @@ "typography", "display-400", "font-size" - ] + ], + "key": "{typography.display-400.font-size}" }, { "value": "1.3333", @@ -7557,7 +12251,8 @@ "typography", "display-400", "line-height" - ] + ], + "key": "{typography.display-400.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7574,7 +12269,8 @@ "typography", "display-300", "font-family" - ] + ], + "key": "{typography.display-300.font-family}" }, { "value": "1.125rem", @@ -7595,7 +12291,8 @@ "typography", "display-300", "font-size" - ] + ], + "key": "{typography.display-300.font-size}" }, { "value": "1.3333", @@ -7614,7 +12311,8 @@ "typography", "display-300", "line-height" - ] + ], + "key": "{typography.display-300.line-height}" }, { "value": "-0.5px", @@ -7633,7 +12331,8 @@ "typography", "display-300", "letter-spacing" - ] + ], + "key": "{typography.display-300.letter-spacing}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7650,7 +12349,8 @@ "typography", "display-200", "font-family" - ] + ], + "key": "{typography.display-200.font-family}" }, { "value": "1rem", @@ -7671,7 +12371,8 @@ "typography", "display-200", "font-size" - ] + ], + "key": "{typography.display-200.font-size}" }, { "value": "1.5", @@ -7690,7 +12391,8 @@ "typography", "display-200", "line-height" - ] + ], + "key": "{typography.display-200.line-height}" }, { "value": "-0.5px", @@ -7709,7 +12411,8 @@ "typography", "display-200", "letter-spacing" - ] + ], + "key": "{typography.display-200.letter-spacing}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7726,7 +12429,8 @@ "typography", "display-100", "font-family" - ] + ], + "key": "{typography.display-100.font-family}" }, { "value": "0.8125rem", @@ -7747,7 +12451,8 @@ "typography", "display-100", "font-size" - ] + ], + "key": "{typography.display-100.font-size}" }, { "value": "1.3846", @@ -7766,7 +12471,8 @@ "typography", "display-100", "line-height" - ] + ], + "key": "{typography.display-100.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7783,7 +12489,8 @@ "typography", "body-300", "font-family" - ] + ], + "key": "{typography.body-300.font-family}" }, { "value": "1rem", @@ -7804,7 +12511,8 @@ "typography", "body-300", "font-size" - ] + ], + "key": "{typography.body-300.font-size}" }, { "value": "1.5", @@ -7823,7 +12531,8 @@ "typography", "body-300", "line-height" - ] + ], + "key": "{typography.body-300.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7840,7 +12549,8 @@ "typography", "body-200", "font-family" - ] + ], + "key": "{typography.body-200.font-family}" }, { "value": "0.875rem", @@ -7861,7 +12571,8 @@ "typography", "body-200", "font-size" - ] + ], + "key": "{typography.body-200.font-size}" }, { "value": "1.4286", @@ -7880,7 +12591,8 @@ "typography", "body-200", "line-height" - ] + ], + "key": "{typography.body-200.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7897,7 +12609,8 @@ "typography", "body-100", "font-family" - ] + ], + "key": "{typography.body-100.font-family}" }, { "value": "0.8125rem", @@ -7918,7 +12631,8 @@ "typography", "body-100", "font-size" - ] + ], + "key": "{typography.body-100.font-size}" }, { "value": "1.3846", @@ -7937,7 +12651,8 @@ "typography", "body-100", "line-height" - ] + ], + "key": "{typography.body-100.line-height}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -7954,7 +12669,8 @@ "typography", "code-100", "font-family" - ] + ], + "key": "{typography.code-100.font-family}" }, { "value": "0.8125rem", @@ -7975,7 +12691,8 @@ "typography", "code-100", "font-size" - ] + ], + "key": "{typography.code-100.font-size}" }, { "value": "1.23", @@ -7994,7 +12711,8 @@ "typography", "code-100", "line-height" - ] + ], + "key": "{typography.code-100.line-height}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -8011,7 +12729,8 @@ "typography", "code-200", "font-family" - ] + ], + "key": "{typography.code-200.font-family}" }, { "value": "0.875rem", @@ -8032,7 +12751,8 @@ "typography", "code-200", "font-size" - ] + ], + "key": "{typography.code-200.font-size}" }, { "value": "1.125", @@ -8051,7 +12771,8 @@ "typography", "code-200", "line-height" - ] + ], + "key": "{typography.code-200.line-height}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -8068,7 +12789,8 @@ "typography", "code-300", "font-family" - ] + ], + "key": "{typography.code-300.font-family}" }, { "value": "1rem", @@ -8089,7 +12811,8 @@ "typography", "code-300", "font-size" - ] + ], + "key": "{typography.code-300.font-size}" }, { "value": "1.25", @@ -8108,6 +12831,7 @@ "typography", "code-300", "line-height" - ] + ], + "key": "{typography.code-300.line-height}" } ] \ No newline at end of file diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index a0dc4bccf77..cf0adb51ec1 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -5,12 +5,14 @@ "value": "#1c345f", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#1c345f", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-500", "attributes": { @@ -28,12 +30,14 @@ "value": "#0046d1", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#0046d1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-400", "attributes": { @@ -51,12 +55,14 @@ "value": "#0c56e9", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#0c56e9", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-300", "attributes": { @@ -74,12 +80,14 @@ "value": "#1060ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#1060ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-200", "attributes": { @@ -97,12 +105,14 @@ "value": "#cce3fe", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#cce3fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-100", "attributes": { @@ -120,12 +130,14 @@ "value": "#f2f8ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#f2f8ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-50", "attributes": { @@ -143,12 +155,14 @@ "value": "#42215b", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#42215b", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-500", "attributes": { @@ -166,12 +180,14 @@ "value": "#7b00db", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#7b00db", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-400", "attributes": { @@ -189,12 +205,14 @@ "value": "#911ced", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#911ced", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-300", "attributes": { @@ -212,12 +230,14 @@ "value": "#a737ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#a737ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-200", "attributes": { @@ -235,12 +255,14 @@ "value": "#ead2fe", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#ead2fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-100", "attributes": { @@ -258,12 +280,14 @@ "value": "#f9f2ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#f9f2ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-50", "attributes": { @@ -281,12 +305,14 @@ "value": "#054220", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#054220", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-500", "attributes": { @@ -304,12 +330,14 @@ "value": "#006619", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#006619", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-400", "attributes": { @@ -327,12 +355,14 @@ "value": "#00781e", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#00781e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-300", "attributes": { @@ -350,12 +380,14 @@ "value": "#008a22", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#008a22", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-200", "attributes": { @@ -373,12 +405,14 @@ "value": "#cceeda", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#cceeda", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-100", "attributes": { @@ -396,12 +430,14 @@ "value": "#f2fbf6", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#f2fbf6", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-50", "attributes": { @@ -419,12 +455,14 @@ "value": "#542800", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#542800", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-500", "attributes": { @@ -442,12 +480,14 @@ "value": "#803d00", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#803d00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-400", "attributes": { @@ -465,12 +505,14 @@ "value": "#9e4b00", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#9e4b00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-300", "attributes": { @@ -488,12 +530,14 @@ "value": "#bb5a00", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#bb5a00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-200", "attributes": { @@ -511,12 +555,14 @@ "value": "#fbeabf", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fbeabf", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-100", "attributes": { @@ -534,12 +580,14 @@ "value": "#fff9e8", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fff9e8", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-50", "attributes": { @@ -557,12 +605,14 @@ "value": "#51130a", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#51130a", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-500", "attributes": { @@ -580,12 +630,14 @@ "value": "#940004", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#940004", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-400", "attributes": { @@ -603,12 +655,14 @@ "value": "#c00005", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#c00005", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-300", "attributes": { @@ -626,12 +680,14 @@ "value": "#e52228", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#e52228", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-200", "attributes": { @@ -649,12 +705,14 @@ "value": "#fbd4d4", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fbd4d4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-100", "attributes": { @@ -672,12 +730,14 @@ "value": "#fff5f5", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fff5f5", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-50", "attributes": { @@ -695,12 +755,14 @@ "value": "#0c0c0e", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#0c0c0e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-700", "attributes": { @@ -718,12 +780,14 @@ "value": "#3b3d45", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#3b3d45", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-600", "attributes": { @@ -741,12 +805,14 @@ "value": "#656a76", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#656a76", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-500", "attributes": { @@ -764,12 +830,14 @@ "value": "#8c909c", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#8c909c", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-400", "attributes": { @@ -787,12 +855,14 @@ "value": "#c2c5cb", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#c2c5cb", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-300", "attributes": { @@ -810,12 +880,14 @@ "value": "#dedfe3", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#dedfe3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-200", "attributes": { @@ -833,12 +905,14 @@ "value": "#f1f2f3", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#f1f2f3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-100", "attributes": { @@ -856,12 +930,14 @@ "value": "#fafafa", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#fafafa", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-50", "attributes": { @@ -879,12 +955,14 @@ "value": "#ffffff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#ffffff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-0", "attributes": { @@ -903,13 +981,15 @@ "alpha": "0.4", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "{color.palette.neutral-600.value}", "alpha": "0.4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-300", "attributes": { @@ -928,13 +1008,15 @@ "alpha": "0.2", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.2", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-200", "attributes": { @@ -953,13 +1035,15 @@ "alpha": "0.1", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-100", "attributes": { @@ -979,7 +1063,7 @@ "value": "#656a7633", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.alpha-200.value}", @@ -1002,7 +1086,7 @@ "value": "#656a761a", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.alpha-100.value}", @@ -1025,7 +1109,7 @@ "value": "#3b3d4566", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.alpha-300.value}", @@ -1048,7 +1132,7 @@ "value": "#cce3fe", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.blue-100.value}", @@ -1071,7 +1155,7 @@ "value": "#ead2fe", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.purple-100.value}", @@ -1094,7 +1178,7 @@ "value": "#cceeda", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.green-100.value}", @@ -1117,7 +1201,7 @@ "value": "#fbeabf", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.amber-100.value}", @@ -1140,7 +1224,7 @@ "value": "#fbd4d4", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.red-100.value}", @@ -1166,7 +1250,7 @@ "value": "#0c56e9", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "{color.palette.blue-300.value}", @@ -1192,7 +1276,7 @@ "type": "color", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "#5990ff", @@ -1220,7 +1304,7 @@ "value": "#c00005", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "{color.palette.red-300.value}", @@ -1246,7 +1330,7 @@ "type": "color", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "#dd7578", @@ -1275,7 +1359,7 @@ "value": "#0c0c0e", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-700.value}", @@ -1298,7 +1382,7 @@ "value": "#3b3d45", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-600.value}", @@ -1321,7 +1405,7 @@ "value": "#656a76", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-500.value}", @@ -1344,7 +1428,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1367,7 +1451,7 @@ "value": "#8c909c", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-400.value}", @@ -1390,7 +1474,7 @@ "value": "#1060ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.blue-200.value}", @@ -1413,7 +1497,7 @@ "value": "#0c56e9", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.blue-300.value}", @@ -1436,7 +1520,7 @@ "value": "#0046d1", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.blue-400.value}", @@ -1459,7 +1543,7 @@ "value": "#a737ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.purple-200.value}", @@ -1482,7 +1566,7 @@ "value": "#911ced", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.purple-300.value}", @@ -1505,7 +1589,7 @@ "value": "#42215b", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.purple-500.value}", @@ -1528,7 +1612,7 @@ "value": "#008a22", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.green-200.value}", @@ -1551,7 +1635,7 @@ "value": "#00781e", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.green-300.value}", @@ -1574,7 +1658,7 @@ "value": "#054220", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.green-500.value}", @@ -1597,7 +1681,7 @@ "value": "#bb5a00", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.amber-200.value}", @@ -1620,7 +1704,7 @@ "value": "#9e4b00", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.amber-300.value}", @@ -1643,7 +1727,7 @@ "value": "#542800", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.amber-500.value}", @@ -1666,7 +1750,7 @@ "value": "#e52228", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.red-200.value}", @@ -1689,7 +1773,7 @@ "value": "#c00005", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.red-300.value}", @@ -1712,7 +1796,7 @@ "value": "#51130a", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.red-500.value}", @@ -1737,7 +1821,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-page.json", + "filePath": "src/global/shared/color/semantic-page.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1760,7 +1844,7 @@ "value": "#fafafa", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-page.json", + "filePath": "src/global/shared/color/semantic-page.json", "isSource": true, "original": { "value": "{color.palette.neutral-50.value}", @@ -1785,7 +1869,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1808,7 +1892,7 @@ "value": "#fafafa", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-50.value}", @@ -1831,7 +1915,7 @@ "value": "#f1f2f3", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-100.value}", @@ -1854,7 +1938,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1877,7 +1961,7 @@ "value": "#f1f2f3", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-100.value}", @@ -1900,7 +1984,7 @@ "value": "#dedfe3", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-200.value}", @@ -1923,7 +2007,7 @@ "value": "#fafafa", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-50.value}", @@ -1946,7 +2030,7 @@ "value": "#f2f8ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.blue-50.value}", @@ -1969,7 +2053,7 @@ "value": "#f9f2ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.purple-50.value}", @@ -1992,7 +2076,7 @@ "value": "#f2fbf6", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.green-50.value}", @@ -2015,7 +2099,7 @@ "value": "#fff9e8", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.amber-50.value}", @@ -2038,7 +2122,7 @@ "value": "#fff5f5", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.red-50.value}", @@ -4313,7 +4397,7 @@ "inset": { "box-shadow": { "value": "inset 0px 1px 2px 1px #656a761a", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.inset.box-shadow-01.value}" @@ -4334,7 +4418,7 @@ "low": { "box-shadow": { "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}" @@ -4355,7 +4439,7 @@ "mid": { "box-shadow": { "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}" @@ -4376,7 +4460,7 @@ "high": { "box-shadow": { "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}" @@ -4397,7 +4481,7 @@ "higher": { "box-shadow": { "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}" @@ -4418,7 +4502,7 @@ "overlay": { "box-shadow": { "value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.overlay.box-shadow-01.value}, {elevation.overlay.box-shadow-02.value}" @@ -4441,7 +4525,7 @@ "inset": { "box-shadow": { "value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.inset.box-shadow-border.value}, {elevation.inset.box-shadow.value}" @@ -4462,7 +4546,7 @@ "base": { "box-shadow": { "value": "0 0 0 1px #656a7633", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.base.box-shadow-border.value}" @@ -4483,7 +4567,7 @@ "low": { "box-shadow": { "value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.low.box-shadow-border.value}, {elevation.low.box-shadow.value}" @@ -4504,7 +4588,7 @@ "mid": { "box-shadow": { "value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.mid.box-shadow-border.value}, {elevation.mid.box-shadow.value}" @@ -4525,7 +4609,7 @@ "high": { "box-shadow": { "value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.high.box-shadow-border.value}, {elevation.high.box-shadow.value}" @@ -4546,7 +4630,7 @@ "higher": { "box-shadow": { "value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.higher.box-shadow-border.value}, {elevation.higher.box-shadow.value}" @@ -4567,7 +4651,7 @@ "overlay": { "box-shadow": { "value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.overlay.box-shadow-border.value}, {elevation.overlay.box-shadow.value}" @@ -4590,7 +4674,7 @@ "action": { "box-shadow": { "value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", - "filePath": "src/global/focus-ring.json", + "filePath": "src/global/shared/focus-ring.json", "isSource": true, "original": { "value": "{focus-ring.action.internal-box-shadow.value}, {focus-ring.action.external-box-shadow.value}" @@ -4611,7 +4695,7 @@ "critical": { "box-shadow": { "value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", - "filePath": "src/global/focus-ring.json", + "filePath": "src/global/shared/focus-ring.json", "isSource": true, "original": { "value": "{focus-ring.critical.internal-box-shadow.value}, {focus-ring.critical.external-box-shadow.value}" diff --git a/packages/tokens/dist/products/css/themed-tokens-with-css-selectors/tokens.css b/packages/tokens/dist/products/css/themed-tokens-with-css-selectors/tokens.css new file mode 100644 index 00000000000..7da414fb912 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens-with-css-selectors/tokens.css @@ -0,0 +1,624 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +.hds-theme-dark, +[data-hds-theme="dark"] { + --token-color-palette-blue-500: #ff0000; + --token-color-palette-blue-400: #ff0000; + --token-color-palette-blue-300: #ff0000; + --token-color-palette-blue-200: #ff0000; + --token-color-palette-blue-100: #ff0000; + --token-color-palette-blue-50: #ff0000; + --token-color-palette-purple-500: #ff0000; + --token-color-palette-purple-400: #ff0000; + --token-color-palette-purple-300: #ff0000; + --token-color-palette-purple-200: #ff0000; + --token-color-palette-purple-100: #ff0000; + --token-color-palette-purple-50: #ff0000; + --token-color-palette-green-500: #ff0000; + --token-color-palette-green-400: #ff0000; + --token-color-palette-green-300: #ff0000; + --token-color-palette-green-200: #ff0000; + --token-color-palette-green-100: #ff0000; + --token-color-palette-green-50: #ff0000; + --token-color-palette-amber-500: #ff0000; + --token-color-palette-amber-400: #ff0000; + --token-color-palette-amber-300: #ff0000; + --token-color-palette-amber-200: #ff0000; + --token-color-palette-amber-100: #ff0000; + --token-color-palette-amber-50: #ff0000; + --token-color-palette-red-500: #ff0000; + --token-color-palette-red-400: #ff0000; + --token-color-palette-red-300: #ff0000; + --token-color-palette-red-200: #ff0000; + --token-color-palette-red-100: #ff0000; + --token-color-palette-red-50: #ff0000; + --token-color-palette-neutral-700: #ff0000; + --token-color-palette-neutral-600: #ff0000; + --token-color-palette-neutral-500: #ff0000; + --token-color-palette-neutral-400: #ff0000; + --token-color-palette-neutral-300: #ff0000; + --token-color-palette-neutral-200: #ff0000; + --token-color-palette-neutral-100: #ff0000; + --token-color-palette-neutral-50: #ff0000; + --token-color-palette-neutral-0: #ff0000; + --token-color-palette-alpha-300: #ff000066; + --token-color-palette-alpha-200: #ff000033; + --token-color-palette-alpha-100: #ff00001a; +} + +.hds-theme-light, +[data-hds-theme="light"] { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +:root { + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #c00005; + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #0c0c0e; + --token-color-foreground-primary: #3b3d45; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-brand: #ffcf25; + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a; + --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-badge-count-padding-horizontal-small: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-font-weight: 500; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-badge-filled-neutral-foreground-color: #3b3d45; + --token-badge-filled-neutral-background-color: #f1f2f3; + --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-filled-neutral-dark-mode-background-color: #656a76; + --token-badge-filled-highlight-foreground-color: #911ced; + --token-badge-filled-highlight-background-color: #f9f2ff; + --token-badge-filled-success-foreground-color: #00781e; + --token-badge-filled-success-background-color: #f2fbf6; + --token-badge-filled-warning-foreground-color: #9e4b00; + --token-badge-filled-warning-background-color: #fff9e8; + --token-badge-filled-critical-foreground-color: #c00005; + --token-badge-filled-critical-background-color: #fff5f5; + --token-badge-inverted-neutral-foreground-color: #ffffff; + --token-badge-inverted-neutral-background-color: #656a76; + --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; + --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; + --token-badge-inverted-highlight-foreground-color: #ffffff; + --token-badge-inverted-highlight-background-color: #a737ff; + --token-badge-inverted-success-foreground-color: #ffffff; + --token-badge-inverted-success-background-color: #008a22; + --token-badge-inverted-warning-foreground-color: #ffffff; + --token-badge-inverted-warning-background-color: #bb5a00; + --token-badge-inverted-critical-foreground-color: #ffffff; + --token-badge-inverted-critical-background-color: #e52228; + --token-badge-outlined-neutral-foreground-color: #3b3d45; + --token-badge-outlined-neutral-border-color: #656a76; + --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; + --token-badge-outlined-highlight-foreground-color: #a737ff; + --token-badge-outlined-highlight-border-color: #a737ff; + --token-badge-outlined-success-foreground-color: #008a22; + --token-badge-outlined-success-border-color: #008a22; + --token-badge-outlined-warning-foreground-color: #bb5a00; + --token-badge-outlined-warning-border-color: #bb5a00; + --token-badge-outlined-critical-foreground-color: #e52228; + --token-badge-outlined-critical-border-color: #e52228; + --token-button-critical-foreground-default: #c00005; + --token-button-critical-foreground-hover: #ffffff; + --token-button-critical-foreground-focus: #c00005; + --token-button-critical-foreground-active: #ffffff; + --token-button-critical-surface-default: #fff5f5; + --token-button-critical-surface-hover: #c00005; + --token-button-critical-surface-focus: #fff5f5; + --token-button-critical-surface-active: #940004; + --token-button-critical-border-color-default: #c00005; + --token-button-critical-border-color-hover: #940004; + --token-button-critical-border-color-focus: #c00005; + --token-button-critical-border-color-active: #940004; + --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-foreground: #8c909c; + --token-button-disabled-surface: #fafafa; + --token-button-disabled-border-color: #656a7633; + --token-button-disabled-box-shadow: none; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /* here we're taking into account the 1px border */ + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-foreground-default: #ffffff; + --token-button-primary-foreground-hover: #ffffff; + --token-button-primary-foreground-focus: #ffffff; + --token-button-primary-foreground-active: #ffffff; + --token-button-primary-surface-default: #1060ff; + --token-button-primary-surface-hover: #0046d1; + --token-button-primary-surface-focus: #1060ff; + --token-button-primary-surface-active: #0046d1; + --token-button-primary-border-color-default: #0c56e9; + --token-button-primary-border-color-hover: #0046d1; + --token-button-primary-border-color-focus: #0c56e9; + --token-button-primary-border-color-active: #0046d1; + --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-foreground-default: #3b3d45; + --token-button-secondary-foreground-hover: #3b3d45; + --token-button-secondary-foreground-focus: #3b3d45; + --token-button-secondary-foreground-active: #3b3d45; + --token-button-secondary-surface-default: #fafafa; + --token-button-secondary-surface-hover: #ffffff; + --token-button-secondary-surface-focus: #fafafa; + --token-button-secondary-surface-active: #dedfe3; + --token-button-secondary-border-color-default: #3b3d4566; + --token-button-secondary-border-color-hover: #3b3d4566; + --token-button-secondary-border-color-focus: #0c56e9; + --token-button-secondary-border-color-active: #3b3d4566; + --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-foreground-default: #1060ff; + --token-button-tertiary-foreground-hover: #0c56e9; + --token-button-tertiary-foreground-focus: #1060ff; + --token-button-tertiary-foreground-active: #0046d1; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-surface-hover: #ffffff; + --token-button-tertiary-surface-focus: #ffffff; + --token-button-tertiary-surface-active: #dedfe3; + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-hover: #3b3d4566; + --token-button-tertiary-border-color-focus: #0c56e9; + --token-button-tertiary-border-color-active: #3b3d4566; + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-color: #3b3d45; + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-file-input-min-height: 32px; + --token-form-file-input-margin-right: 16px; + --token-form-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-invalid-outline-color: #dd7578; + --token-form-control-readonly-foreground-color: #3b3d45; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-focus-outline-color: #5990ff; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-toggle-button-size: 24px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-outline-offset: 0px; + --token-form-text-area-min-height: 32px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-thumb-size: 16px; + --token-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ +} diff --git a/packages/tokens/dist/products/css/themed-tokens-with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens-with-prefers-color-scheme/tokens.css new file mode 100644 index 00000000000..cb12a8c9d04 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens-with-prefers-color-scheme/tokens.css @@ -0,0 +1,626 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +@media (prefers-color-scheme: dark) { + :root { + --token-color-palette-blue-500: #ff0000; + --token-color-palette-blue-400: #ff0000; + --token-color-palette-blue-300: #ff0000; + --token-color-palette-blue-200: #ff0000; + --token-color-palette-blue-100: #ff0000; + --token-color-palette-blue-50: #ff0000; + --token-color-palette-purple-500: #ff0000; + --token-color-palette-purple-400: #ff0000; + --token-color-palette-purple-300: #ff0000; + --token-color-palette-purple-200: #ff0000; + --token-color-palette-purple-100: #ff0000; + --token-color-palette-purple-50: #ff0000; + --token-color-palette-green-500: #ff0000; + --token-color-palette-green-400: #ff0000; + --token-color-palette-green-300: #ff0000; + --token-color-palette-green-200: #ff0000; + --token-color-palette-green-100: #ff0000; + --token-color-palette-green-50: #ff0000; + --token-color-palette-amber-500: #ff0000; + --token-color-palette-amber-400: #ff0000; + --token-color-palette-amber-300: #ff0000; + --token-color-palette-amber-200: #ff0000; + --token-color-palette-amber-100: #ff0000; + --token-color-palette-amber-50: #ff0000; + --token-color-palette-red-500: #ff0000; + --token-color-palette-red-400: #ff0000; + --token-color-palette-red-300: #ff0000; + --token-color-palette-red-200: #ff0000; + --token-color-palette-red-100: #ff0000; + --token-color-palette-red-50: #ff0000; + --token-color-palette-neutral-700: #ff0000; + --token-color-palette-neutral-600: #ff0000; + --token-color-palette-neutral-500: #ff0000; + --token-color-palette-neutral-400: #ff0000; + --token-color-palette-neutral-300: #ff0000; + --token-color-palette-neutral-200: #ff0000; + --token-color-palette-neutral-100: #ff0000; + --token-color-palette-neutral-50: #ff0000; + --token-color-palette-neutral-0: #ff0000; + --token-color-palette-alpha-300: #ff000066; + --token-color-palette-alpha-200: #ff000033; + --token-color-palette-alpha-100: #ff00001a; + } +} + +@media (prefers-color-scheme: light) { + :root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + } +} + +:root { + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #c00005; + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #0c0c0e; + --token-color-foreground-primary: #3b3d45; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-brand: #ffcf25; + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a; + --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-badge-count-padding-horizontal-small: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-font-weight: 500; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-badge-filled-neutral-foreground-color: #3b3d45; + --token-badge-filled-neutral-background-color: #f1f2f3; + --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-filled-neutral-dark-mode-background-color: #656a76; + --token-badge-filled-highlight-foreground-color: #911ced; + --token-badge-filled-highlight-background-color: #f9f2ff; + --token-badge-filled-success-foreground-color: #00781e; + --token-badge-filled-success-background-color: #f2fbf6; + --token-badge-filled-warning-foreground-color: #9e4b00; + --token-badge-filled-warning-background-color: #fff9e8; + --token-badge-filled-critical-foreground-color: #c00005; + --token-badge-filled-critical-background-color: #fff5f5; + --token-badge-inverted-neutral-foreground-color: #ffffff; + --token-badge-inverted-neutral-background-color: #656a76; + --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; + --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; + --token-badge-inverted-highlight-foreground-color: #ffffff; + --token-badge-inverted-highlight-background-color: #a737ff; + --token-badge-inverted-success-foreground-color: #ffffff; + --token-badge-inverted-success-background-color: #008a22; + --token-badge-inverted-warning-foreground-color: #ffffff; + --token-badge-inverted-warning-background-color: #bb5a00; + --token-badge-inverted-critical-foreground-color: #ffffff; + --token-badge-inverted-critical-background-color: #e52228; + --token-badge-outlined-neutral-foreground-color: #3b3d45; + --token-badge-outlined-neutral-border-color: #656a76; + --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; + --token-badge-outlined-highlight-foreground-color: #a737ff; + --token-badge-outlined-highlight-border-color: #a737ff; + --token-badge-outlined-success-foreground-color: #008a22; + --token-badge-outlined-success-border-color: #008a22; + --token-badge-outlined-warning-foreground-color: #bb5a00; + --token-badge-outlined-warning-border-color: #bb5a00; + --token-badge-outlined-critical-foreground-color: #e52228; + --token-badge-outlined-critical-border-color: #e52228; + --token-button-critical-foreground-default: #c00005; + --token-button-critical-foreground-hover: #ffffff; + --token-button-critical-foreground-focus: #c00005; + --token-button-critical-foreground-active: #ffffff; + --token-button-critical-surface-default: #fff5f5; + --token-button-critical-surface-hover: #c00005; + --token-button-critical-surface-focus: #fff5f5; + --token-button-critical-surface-active: #940004; + --token-button-critical-border-color-default: #c00005; + --token-button-critical-border-color-hover: #940004; + --token-button-critical-border-color-focus: #c00005; + --token-button-critical-border-color-active: #940004; + --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-foreground: #8c909c; + --token-button-disabled-surface: #fafafa; + --token-button-disabled-border-color: #656a7633; + --token-button-disabled-box-shadow: none; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /* here we're taking into account the 1px border */ + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-foreground-default: #ffffff; + --token-button-primary-foreground-hover: #ffffff; + --token-button-primary-foreground-focus: #ffffff; + --token-button-primary-foreground-active: #ffffff; + --token-button-primary-surface-default: #1060ff; + --token-button-primary-surface-hover: #0046d1; + --token-button-primary-surface-focus: #1060ff; + --token-button-primary-surface-active: #0046d1; + --token-button-primary-border-color-default: #0c56e9; + --token-button-primary-border-color-hover: #0046d1; + --token-button-primary-border-color-focus: #0c56e9; + --token-button-primary-border-color-active: #0046d1; + --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-foreground-default: #3b3d45; + --token-button-secondary-foreground-hover: #3b3d45; + --token-button-secondary-foreground-focus: #3b3d45; + --token-button-secondary-foreground-active: #3b3d45; + --token-button-secondary-surface-default: #fafafa; + --token-button-secondary-surface-hover: #ffffff; + --token-button-secondary-surface-focus: #fafafa; + --token-button-secondary-surface-active: #dedfe3; + --token-button-secondary-border-color-default: #3b3d4566; + --token-button-secondary-border-color-hover: #3b3d4566; + --token-button-secondary-border-color-focus: #0c56e9; + --token-button-secondary-border-color-active: #3b3d4566; + --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-foreground-default: #1060ff; + --token-button-tertiary-foreground-hover: #0c56e9; + --token-button-tertiary-foreground-focus: #1060ff; + --token-button-tertiary-foreground-active: #0046d1; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-surface-hover: #ffffff; + --token-button-tertiary-surface-focus: #ffffff; + --token-button-tertiary-surface-active: #dedfe3; + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-hover: #3b3d4566; + --token-button-tertiary-border-color-focus: #0c56e9; + --token-button-tertiary-border-color-active: #3b3d4566; + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-color: #3b3d45; + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-file-input-min-height: 32px; + --token-form-file-input-margin-right: 16px; + --token-form-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-invalid-outline-color: #dd7578; + --token-form-control-readonly-foreground-color: #3b3d45; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-focus-outline-color: #5990ff; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-toggle-button-size: 24px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-outline-offset: 0px; + --token-form-text-area-min-height: 32px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-thumb-size: 16px; + --token-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ +} diff --git a/packages/tokens/dist/products/css/themed-tokens-with-root-selector/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens-with-root-selector/common-tokens.css new file mode 100644 index 00000000000..8d45c44eceb --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens-with-root-selector/common-tokens.css @@ -0,0 +1,528 @@ +:root { + --token-color-border-primary: #656a7633; + --token-color-border-faint: #656a761a; + --token-color-border-strong: #3b3d4566; + --token-color-border-action: #cce3fe; + --token-color-border-highlight: #ead2fe; + --token-color-border-success: #cceeda; + --token-color-border-warning: #fbeabf; + --token-color-border-critical: #fbd4d4; + --token-color-focus-action-internal: #0c56e9; + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-internal: #c00005; + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-foreground-strong: #0c0c0e; + --token-color-foreground-primary: #3b3d45; + --token-color-foreground-faint: #656a76; + --token-color-foreground-high-contrast: #ffffff; + --token-color-foreground-disabled: #8c909c; + --token-color-foreground-action: #1060ff; + --token-color-foreground-action-hover: #0c56e9; + --token-color-foreground-action-active: #0046d1; + --token-color-foreground-highlight: #a737ff; + --token-color-foreground-highlight-on-surface: #911ced; + --token-color-foreground-highlight-high-contrast: #42215b; + --token-color-foreground-success: #008a22; + --token-color-foreground-success-on-surface: #00781e; + --token-color-foreground-success-high-contrast: #054220; + --token-color-foreground-warning: #bb5a00; + --token-color-foreground-warning-on-surface: #9e4b00; + --token-color-foreground-warning-high-contrast: #542800; + --token-color-foreground-critical: #e52228; + --token-color-foreground-critical-on-surface: #c00005; + --token-color-foreground-critical-high-contrast: #51130a; + --token-color-page-primary: #ffffff; + --token-color-page-faint: #fafafa; + --token-color-surface-primary: #ffffff; + --token-color-surface-faint: #fafafa; + --token-color-surface-strong: #f1f2f3; + --token-color-surface-interactive: #ffffff; + --token-color-surface-interactive-hover: #f1f2f3; + --token-color-surface-interactive-active: #dedfe3; + --token-color-surface-interactive-disabled: #fafafa; + --token-color-surface-action: #f2f8ff; + --token-color-surface-highlight: #f9f2ff; + --token-color-surface-success: #f2fbf6; + --token-color-surface-warning: #fff9e8; + --token-color-surface-critical: #fff5f5; + --token-color-hashicorp-brand: #000000; + --token-color-boundary-brand: #f24c53; + --token-color-boundary-foreground: #cf2d32; + --token-color-boundary-surface: #ffecec; + --token-color-boundary-border: #fbd7d8; + --token-color-boundary-gradient-primary-start: #f97076; + --token-color-boundary-gradient-primary-stop: #db363b; + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-boundary-gradient-faint-stop: #ffecec; + --token-color-consul-brand: #e03875; + --token-color-consul-foreground: #d01c5b; + --token-color-consul-surface: #ffe9f1; + --token-color-consul-border: #ffcede; + --token-color-consul-gradient-primary-start: #ff99be; + --token-color-consul-gradient-primary-stop: #da306e; + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-stop: #ffe9f1; + --token-color-hcp-brand: #000000; + --token-color-nomad-brand: #06d092; + --token-color-nomad-foreground: #008661; + --token-color-nomad-surface: #d3fdeb; + --token-color-nomad-border: #bff3dd; + --token-color-nomad-gradient-primary-start: #bff3dd; + --token-color-nomad-gradient-primary-stop: #60dea9; + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-stop: #d3fdeb; + --token-color-packer-brand: #02a8ef; + --token-color-packer-foreground: #007eb4; + --token-color-packer-surface: #d4f2ff; + --token-color-packer-border: #b4e4ff; + --token-color-packer-gradient-primary-start: #b4e4ff; + --token-color-packer-gradient-primary-stop: #63d0ff; + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-stop: #d4f2ff; + --token-color-terraform-brand: #7b42bc; + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-foreground: #773cb4; + --token-color-terraform-surface: #f4ecff; + --token-color-terraform-border: #ebdbfc; + --token-color-terraform-gradient-primary-start: #bb8deb; + --token-color-terraform-gradient-primary-stop: #844fba; + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-terraform-gradient-faint-stop: #f4ecff; + --token-color-vagrant-brand: #1868f2; + --token-color-vagrant-foreground: #1c61d8; + --token-color-vagrant-surface: #d6ebff; + --token-color-vagrant-border: #c7dbfc; + --token-color-vagrant-gradient-primary-start: #639cff; + --token-color-vagrant-gradient-primary-stop: #2e71e5; + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-stop: #d6ebff; + --token-color-vault-radar-brand: #ffcf25; + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-foreground: #9a6f00; + --token-color-vault-radar-surface: #fff9cf; + --token-color-vault-radar-border: #feec7b; + --token-color-vault-radar-gradient-primary-start: #feec7b; + --token-color-vault-radar-gradient-primary-stop: #ffe543; + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-radar-gradient-faint-stop: #fff9cf; + --token-color-vault-secrets-brand: #ffcf25; + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-foreground: #9a6f00; + --token-color-vault-secrets-surface: #fff9cf; + --token-color-vault-secrets-border: #feec7b; + --token-color-vault-secrets-gradient-primary-start: #feec7b; + --token-color-vault-secrets-gradient-primary-stop: #ffe543; + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-secrets-gradient-faint-stop: #fff9cf; + --token-color-vault-brand: #ffcf25; + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-foreground: #9a6f00; + --token-color-vault-surface: #fff9cf; + --token-color-vault-border: #feec7b; + --token-color-vault-gradient-primary-start: #feec7b; + --token-color-vault-gradient-primary-stop: #ffe543; + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-vault-gradient-faint-stop: #fff9cf; + --token-color-waypoint-brand: #14c6cb; + --token-color-waypoint-foreground: #008196; + --token-color-waypoint-surface: #e0fcff; + --token-color-waypoint-border: #cbf1f3; + --token-color-waypoint-gradient-primary-start: #cbf1f3; + --token-color-waypoint-gradient-primary-stop: #62d4dc; + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-stop: #e0fcff; + --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a; + --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; + --token-surface-base-box-shadow: 0 0 0 1px #656a7633; + --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; + --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-badge-count-padding-horizontal-small: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-font-weight: 500; + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-badge-filled-neutral-foreground-color: #3b3d45; + --token-badge-filled-neutral-background-color: #f1f2f3; + --token-badge-filled-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-filled-neutral-dark-mode-background-color: #656a76; + --token-badge-filled-highlight-foreground-color: #911ced; + --token-badge-filled-highlight-background-color: #f9f2ff; + --token-badge-filled-success-foreground-color: #00781e; + --token-badge-filled-success-background-color: #f2fbf6; + --token-badge-filled-warning-foreground-color: #9e4b00; + --token-badge-filled-warning-background-color: #fff9e8; + --token-badge-filled-critical-foreground-color: #c00005; + --token-badge-filled-critical-background-color: #fff5f5; + --token-badge-inverted-neutral-foreground-color: #ffffff; + --token-badge-inverted-neutral-background-color: #656a76; + --token-badge-inverted-neutral-dark-mode-foreground-color: #3b3d45; + --token-badge-inverted-neutral-dark-mode-background-color: #fafafa; + --token-badge-inverted-highlight-foreground-color: #ffffff; + --token-badge-inverted-highlight-background-color: #a737ff; + --token-badge-inverted-success-foreground-color: #ffffff; + --token-badge-inverted-success-background-color: #008a22; + --token-badge-inverted-warning-foreground-color: #ffffff; + --token-badge-inverted-warning-background-color: #bb5a00; + --token-badge-inverted-critical-foreground-color: #ffffff; + --token-badge-inverted-critical-background-color: #e52228; + --token-badge-outlined-neutral-foreground-color: #3b3d45; + --token-badge-outlined-neutral-border-color: #656a76; + --token-badge-outlined-neutral-dark-mode-foreground-color: #ffffff; + --token-badge-outlined-neutral-dark-mode-border-color: #fafafa; + --token-badge-outlined-highlight-foreground-color: #a737ff; + --token-badge-outlined-highlight-border-color: #a737ff; + --token-badge-outlined-success-foreground-color: #008a22; + --token-badge-outlined-success-border-color: #008a22; + --token-badge-outlined-warning-foreground-color: #bb5a00; + --token-badge-outlined-warning-border-color: #bb5a00; + --token-badge-outlined-critical-foreground-color: #e52228; + --token-badge-outlined-critical-border-color: #e52228; + --token-button-critical-foreground-default: #c00005; + --token-button-critical-foreground-hover: #ffffff; + --token-button-critical-foreground-focus: #c00005; + --token-button-critical-foreground-active: #ffffff; + --token-button-critical-surface-default: #fff5f5; + --token-button-critical-surface-hover: #c00005; + --token-button-critical-surface-focus: #fff5f5; + --token-button-critical-surface-active: #940004; + --token-button-critical-border-color-default: #c00005; + --token-button-critical-border-color-hover: #940004; + --token-button-critical-border-color-focus: #c00005; + --token-button-critical-border-color-active: #940004; + --token-button-critical-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-foreground: #8c909c; + --token-button-disabled-surface: #fafafa; + --token-button-disabled-border-color: #656a7633; + --token-button-disabled-box-shadow: none; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /* here we're taking into account the 1px border */ + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-font-weight: 400; /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-foreground-default: #ffffff; + --token-button-primary-foreground-hover: #ffffff; + --token-button-primary-foreground-focus: #ffffff; + --token-button-primary-foreground-active: #ffffff; + --token-button-primary-surface-default: #1060ff; + --token-button-primary-surface-hover: #0046d1; + --token-button-primary-surface-focus: #1060ff; + --token-button-primary-surface-active: #0046d1; + --token-button-primary-border-color-default: #0c56e9; + --token-button-primary-border-color-hover: #0046d1; + --token-button-primary-border-color-focus: #0c56e9; + --token-button-primary-border-color-active: #0046d1; + --token-button-primary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-foreground-default: #3b3d45; + --token-button-secondary-foreground-hover: #3b3d45; + --token-button-secondary-foreground-focus: #3b3d45; + --token-button-secondary-foreground-active: #3b3d45; + --token-button-secondary-surface-default: #fafafa; + --token-button-secondary-surface-hover: #ffffff; + --token-button-secondary-surface-focus: #fafafa; + --token-button-secondary-surface-active: #dedfe3; + --token-button-secondary-border-color-default: #3b3d4566; + --token-button-secondary-border-color-hover: #3b3d4566; + --token-button-secondary-border-color-focus: #0c56e9; + --token-button-secondary-border-color-active: #3b3d4566; + --token-button-secondary-box-shadow-default: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-foreground-default: #1060ff; + --token-button-tertiary-foreground-hover: #0c56e9; + --token-button-tertiary-foreground-focus: #1060ff; + --token-button-tertiary-foreground-active: #0046d1; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-surface-hover: #ffffff; + --token-button-tertiary-surface-focus: #ffffff; + --token-button-tertiary-surface-active: #dedfe3; + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-hover: #3b3d4566; + --token-button-tertiary-border-color-focus: #0c56e9; + --token-button-tertiary-border-color-active: #3b3d4566; + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-label-color: #0c0c0e; + --token-form-legend-color: #0c0c0e; + --token-form-helper-text-color: #656a76; + --token-form-indicator-optional-color: #656a76; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-color: #3b3d45; + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-color: #c00005; + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-file-input-min-height: 32px; + --token-form-file-input-margin-right: 16px; + --token-form-control-base-foreground-value-color: #0c0c0e; + --token-form-control-base-foreground-placeholder-color: #656a76; + --token-form-control-base-surface-color-default: #ffffff; + --token-form-control-base-surface-color-hover: #f1f2f3; + --token-form-control-base-border-color-default: #8c909c; + --token-form-control-base-border-color-hover: #656a76; + --token-form-control-base-box-shadow-default: inset 0px 1px 2px 1px #656a761a; + --token-form-control-checked-foreground-color: #ffffff; + --token-form-control-checked-surface-color-default: #1060ff; + --token-form-control-checked-surface-color-hover: #0c56e9; + --token-form-control-checked-border-color-default: #0c56e9; + --token-form-control-checked-border-color-hover: #0046d1; + --token-form-control-invalid-border-color-default: #c00005; + --token-form-control-invalid-border-color-hover: #940004; + --token-form-control-invalid-outline-color: #dd7578; + --token-form-control-readonly-foreground-color: #3b3d45; + --token-form-control-readonly-surface-color: #f1f2f3; + --token-form-control-readonly-border-color: #656a761a; + --token-form-control-focus-outline-color: #5990ff; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-disabled-foreground-color: #8c909c; + --token-form-control-disabled-surface-color: #fafafa; + --token-form-control-disabled-border-color: #656a7633; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-toggle-button-size: 24px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-default: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-hover: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; + --token-form-radiocard-box-shadow-focus: 0 0 0 3px #5990ff; /* This is a custom shadow used to add a focus ring around the card */ + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-right-x: 7px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-outline-offset: 0px; + --token-form-text-area-min-height: 32px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-position-x: 7px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */ + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-form-toggle-thumb-size: 16px; + --token-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace; + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ +} diff --git a/packages/tokens/dist/products/css/themed-tokens-with-root-selector/dark-tokens.css b/packages/tokens/dist/products/css/themed-tokens-with-root-selector/dark-tokens.css new file mode 100644 index 00000000000..9b443669bc1 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens-with-root-selector/dark-tokens.css @@ -0,0 +1,44 @@ +:root { + --token-color-palette-blue-500: #ff0000; + --token-color-palette-blue-400: #ff0000; + --token-color-palette-blue-300: #ff0000; + --token-color-palette-blue-200: #ff0000; + --token-color-palette-blue-100: #ff0000; + --token-color-palette-blue-50: #ff0000; + --token-color-palette-purple-500: #ff0000; + --token-color-palette-purple-400: #ff0000; + --token-color-palette-purple-300: #ff0000; + --token-color-palette-purple-200: #ff0000; + --token-color-palette-purple-100: #ff0000; + --token-color-palette-purple-50: #ff0000; + --token-color-palette-green-500: #ff0000; + --token-color-palette-green-400: #ff0000; + --token-color-palette-green-300: #ff0000; + --token-color-palette-green-200: #ff0000; + --token-color-palette-green-100: #ff0000; + --token-color-palette-green-50: #ff0000; + --token-color-palette-amber-500: #ff0000; + --token-color-palette-amber-400: #ff0000; + --token-color-palette-amber-300: #ff0000; + --token-color-palette-amber-200: #ff0000; + --token-color-palette-amber-100: #ff0000; + --token-color-palette-amber-50: #ff0000; + --token-color-palette-red-500: #ff0000; + --token-color-palette-red-400: #ff0000; + --token-color-palette-red-300: #ff0000; + --token-color-palette-red-200: #ff0000; + --token-color-palette-red-100: #ff0000; + --token-color-palette-red-50: #ff0000; + --token-color-palette-neutral-700: #ff0000; + --token-color-palette-neutral-600: #ff0000; + --token-color-palette-neutral-500: #ff0000; + --token-color-palette-neutral-400: #ff0000; + --token-color-palette-neutral-300: #ff0000; + --token-color-palette-neutral-200: #ff0000; + --token-color-palette-neutral-100: #ff0000; + --token-color-palette-neutral-50: #ff0000; + --token-color-palette-neutral-0: #ff0000; + --token-color-palette-alpha-300: #ff000066; + --token-color-palette-alpha-200: #ff000033; + --token-color-palette-alpha-100: #ff00001a; +} diff --git a/packages/tokens/dist/products/css/themed-tokens-with-root-selector/light-tokens.css b/packages/tokens/dist/products/css/themed-tokens-with-root-selector/light-tokens.css new file mode 100644 index 00000000000..f742f113858 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens-with-root-selector/light-tokens.css @@ -0,0 +1,44 @@ +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} From c945fc5942f683e60a561ed608c7ddf8ff1f8073 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 13 Nov 2024 11:13:21 +0000 Subject: [PATCH 10/41] cherry-pick commits from `spike-showcase-theming` --- .../app/components/shw/theme/switcher.gts | 74 +++++++++++ .../app/controllers/foundations/theming.js | 19 +++ showcase/app/index.html | 2 + showcase/app/router.ts | 1 + showcase/app/services/theming.js | 36 ++++++ showcase/app/styles/_globals.scss | 6 +- showcase/app/styles/_tokens.scss | 30 ----- showcase/app/styles/_typography.scss | 6 +- showcase/app/styles/app.scss | 4 + .../styles/showcase-components/divider.scss | 4 +- .../app/styles/showcase-components/frame.scss | 6 +- .../app/styles/showcase-components/label.scss | 2 +- .../showcase-components/placeholder.scss | 8 +- .../showcase-components/theme-switcher.scss | 32 +++++ .../app/styles/showcase-pages/theming.scss | 54 ++++++++ .../app/styles/showcase-pages/typography.scss | 3 +- .../app/styles/showcase-theming/dark.scss | 84 +++++++++++++ .../app/styles/showcase-theming/light.scss | 88 +++++++++++++ showcase/app/templates/application.hbs | 3 + .../app/templates/foundations/theming.hbs | 116 ++++++++++++++++++ showcase/app/templates/index.hbs | 5 + showcase/ember-cli-build.js | 13 ++ 22 files changed, 553 insertions(+), 43 deletions(-) create mode 100644 showcase/app/components/shw/theme/switcher.gts create mode 100644 showcase/app/controllers/foundations/theming.js create mode 100644 showcase/app/services/theming.js create mode 100644 showcase/app/styles/showcase-components/theme-switcher.scss create mode 100644 showcase/app/styles/showcase-pages/theming.scss create mode 100644 showcase/app/styles/showcase-theming/dark.scss create mode 100644 showcase/app/styles/showcase-theming/light.scss create mode 100644 showcase/app/templates/foundations/theming.hbs diff --git a/showcase/app/components/shw/theme/switcher.gts b/showcase/app/components/shw/theme/switcher.gts new file mode 100644 index 00000000000..3e57014b8d5 --- /dev/null +++ b/showcase/app/components/shw/theme/switcher.gts @@ -0,0 +1,74 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; +import { action } from '@ember/object'; +import { service } from '@ember/service'; + +import type ShwThemingService from 'showcase/services/theming'; + +interface ShwThemeSwitcherSignature { + // Args: {}; + Element: HTMLDivElement; +} + +export default class ShwThemeSwitcher extends Component { + @service declare readonly theming: ShwThemingService; + + @action + onChangePageTheme(event: Event) { + const select = event.target as HTMLSelectElement; + console.log(`Theme: ${select.value}`); + console.log(`theming.getTheme: ${this.theming.getTheme()}`); + + let theme; + let type; + switch (select.value) { + case 'light-data-attribute': + theme = 'light'; + type = 'data-attribute'; + break; + case 'light-css-class': + theme = 'light'; + type = 'css-class'; + break; + case 'dark-data-attribute': + theme = 'dark'; + type = 'data-attribute'; + break; + case 'dark-css-class': + theme = 'dark'; + type = 'css-class'; + break; + default: + theme = 'auto'; + break; + } + + // we set the theme in the global service + this.theming.setTheme(theme, type, 'body'); + } + + +} diff --git a/showcase/app/controllers/foundations/theming.js b/showcase/app/controllers/foundations/theming.js new file mode 100644 index 00000000000..1dbde21cc6b --- /dev/null +++ b/showcase/app/controllers/foundations/theming.js @@ -0,0 +1,19 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Controller from '@ember/controller'; +import { inject as service } from '@ember/service'; + +export default class ThemingController extends Controller { + @service theming; + + get currentTheme() { + return this.theming.getTheme(); + } + + get inverseTheme() { + return this.theming.getInverseTheme(); + } +} diff --git a/showcase/app/index.html b/showcase/app/index.html index 1d0faeb19b4..e468e65e7e3 100644 --- a/showcase/app/index.html +++ b/showcase/app/index.html @@ -17,6 +17,8 @@ + + diff --git a/showcase/app/router.ts b/showcase/app/router.ts index ac108e42ebc..2fd0af070b9 100644 --- a/showcase/app/router.ts +++ b/showcase/app/router.ts @@ -16,6 +16,7 @@ Router.map(function () { this.route('typography'); this.route('elevation'); this.route('focus-ring'); + this.route('theming'); }); this.route('components', function () { this.route('accordion'); diff --git a/showcase/app/services/theming.js b/showcase/app/services/theming.js new file mode 100644 index 00000000000..b32f983a95b --- /dev/null +++ b/showcase/app/services/theming.js @@ -0,0 +1,36 @@ +import Service from '@ember/service'; +import { tracked } from '@glimmer/tracking'; + +export default class ShwThemingService extends Service { + // undefined means to use the default in the browser, which is "prefers-color-scheme" + @tracked currentTheme = 'auto'; + + getTheme() { + return this.currentTheme; + // return localStorage.getItem('shwCurrentTheme'); + } + + getInverseTheme() { + // TODO what happens if we have four themes, like IBM, instead of just two? + return this.currentTheme === 'dark' ? 'light' : 'dark'; + } + + setTheme(theme, type, target) { + // const fullKey = this.#buildKey(key, appName); + this.currentTheme = theme; + // localStorage.setItem('shwCurrentTheme', theme); + console.log('setting theme', theme, type, target); + + const bodyElement = document.querySelector('body'); + bodyElement.removeAttribute('data-shw-theme'); + bodyElement.classList.remove('shw-theme-dark'); + bodyElement.classList.remove('shw-theme-light'); + + if (type === 'data-attribute') { + bodyElement.setAttribute('data-shw-theme', theme); + } else if (type === 'css-class') { + bodyElement.classList.add(`shw-theme-${theme}`); + } + // } + } +} diff --git a/showcase/app/styles/_globals.scss b/showcase/app/styles/_globals.scss index 90168966458..7801651f1ec 100644 --- a/showcase/app/styles/_globals.scss +++ b/showcase/app/styles/_globals.scss @@ -30,7 +30,7 @@ body { height: 68px; padding: 0 24px; color: var(--shw-color-black); - border-bottom: 1px solid #eaeaea; + border-bottom: 1px solid var(--shw-color-gray-500); } .shw-page-header__logo { @@ -66,6 +66,10 @@ body { line-height: 1; } +.shw-page-header__theme-toggle { + margin-left: auto; +} + .shw-page-aside { padding: 1rem; diff --git a/showcase/app/styles/_tokens.scss b/showcase/app/styles/_tokens.scss index fa11ede62f2..23899c49b6b 100644 --- a/showcase/app/styles/_tokens.scss +++ b/showcase/app/styles/_tokens.scss @@ -6,36 +6,6 @@ // TOKENS (CSS PROPS) :root { - // COLORS - --shw-color-white: #fff; - --shw-color-gray-600: #f2f2f3; - --shw-color-gray-500: #dbdbdc; - --shw-color-gray-400: #bfbfc0; - --shw-color-gray-300: #727374; - --shw-color-gray-200: #343536; - --shw-color-gray-100: #1d1e1f; - --shw-color-black: #000; - --shw-color-link-on-black: #4294ff; - --shw-color-link-on-white: #2264d6; - --shw-color-feedback-information-100: #0d44cc; - --shw-color-feedback-information-200: #1563ff; - --shw-color-feedback-information-300: #d0e0ff; - --shw-color-feedback-information-400: #eff5ff; - --shw-color-feedback-success-100: #007854; - --shw-color-feedback-success-200: #00bc7f; - --shw-color-feedback-success-300: #c1f1e0; - --shw-color-feedback-success-400: #ebfdf7; - --shw-color-feedback-warning-100: #975b06; - --shw-color-feedback-warning-200: #eaaa32; - --shw-color-feedback-warning-300: #f9eacd; - --shw-color-feedback-warning-400: #fcf6ea; - --shw-color-feedback-critical-100: #ba2226; - --shw-color-feedback-critical-200: #f25054; - --shw-color-feedback-critical-300: #ffd4d6; - --shw-color-feedback-critical-400: #fcf0f2; - --shw-color-action-active-foreground: #00f; // HTML "blue" - --shw-color-action-active-border: #00f; // HTML "blue" - --shw-color-action-active-background: #f0f8ff; // HTML "aliceblue" // "FLEX/GRID" COMPONENTS --shw-layout-gap-base: 1rem; } diff --git a/showcase/app/styles/_typography.scss b/showcase/app/styles/_typography.scss index d94b4c80230..cad0d0452bf 100644 --- a/showcase/app/styles/_typography.scss +++ b/showcase/app/styles/_typography.scss @@ -86,6 +86,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h1() { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-weight: 700; font-size: 3rem; line-height: 1.3; @@ -95,6 +96,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h2() { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-weight: 400; font-size: 1.8rem; line-height: 1.3; @@ -104,6 +106,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h3() { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-weight: 400; font-size: 1.4rem; line-height: 1.3; @@ -113,7 +116,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-h4() { @include shw-font-family("gilmer"); - color: #666; // equivalent to `opacity: 0.5` + color: var(--shw-color-gray-300); font-weight: 500; font-size: 1.2rem; line-height: 1.3; @@ -123,6 +126,7 @@ $show-font-family-mono: ui-monospace, menlo, consolas, monospace; @mixin shw-font-style-body { @include shw-font-family("gilmer"); + color: var(--shw-color-black); font-size: 1rem; line-height: 1.4; } diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss index 75df0620061..13fc983775b 100644 --- a/showcase/app/styles/app.scss +++ b/showcase/app/styles/app.scss @@ -9,6 +9,8 @@ // global declarations @import "./tokens"; +@import "./showcase-theming/light"; +@import "./showcase-theming/dark"; @import "./layout"; @import "./typography"; @import "./globals"; @@ -23,6 +25,7 @@ @import "./showcase-components/label"; @import "./showcase-components/outliner"; @import "./showcase-components/placeholder"; +@import "./showcase-components/theme-switcher"; @import "./mock-components/app"; @@ -72,6 +75,7 @@ @import "./showcase-pages/tabs"; @import "./showcase-pages/tag"; @import "./showcase-pages/text"; +@import "./showcase-pages/theming"; @import "./showcase-pages/tooltip"; @import "./showcase-pages/typography"; // END COMPONENT PAGES IMPORTS diff --git a/showcase/app/styles/showcase-components/divider.scss b/showcase/app/styles/showcase-components/divider.scss index 51f63676a67..19718e76ab3 100644 --- a/showcase/app/styles/showcase-components/divider.scss +++ b/showcase/app/styles/showcase-components/divider.scss @@ -6,9 +6,9 @@ .shw-divider { margin: 3rem 0; border: none; - border-top: 2px solid #ccc; + border-top: 2px solid var(--shw-color-gray-500); } .shw-divider--level-2 { - border-top: 2px dotted #ddd; + border-top-style: dotted; } diff --git a/showcase/app/styles/showcase-components/frame.scss b/showcase/app/styles/showcase-components/frame.scss index cf57890321f..c99a40ee31a 100644 --- a/showcase/app/styles/showcase-components/frame.scss +++ b/showcase/app/styles/showcase-components/frame.scss @@ -15,7 +15,7 @@ $shw-frame-navigation-bar-height: 48px; max-width: 100%; height: calc(var(--iframe-height) + #{$shw-frame-navigation-bar-height}); max-height: 100%; - outline: 1px solid #e4e4d4; + outline: 1px solid var(--shw-color-gray-500); } .shw-frame__browser-navigation { @@ -25,12 +25,12 @@ $shw-frame-navigation-bar-height: 48px; height: $shw-frame-navigation-bar-height; // safe area for the dots padding: 8px 24px 8px 120px; - background-color: #fafafa; + background-color: var(--shw-frame-browser-navigation-background); background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: 24px 50%; background-size: 56px 14px; - border-bottom: 1px solid #e4e4d4; + border-bottom: 1px solid var(--shw-color-gray-500); } .shw-frame__open-link { diff --git a/showcase/app/styles/showcase-components/label.scss b/showcase/app/styles/showcase-components/label.scss index e621f2f2eca..bcf67f595ad 100644 --- a/showcase/app/styles/showcase-components/label.scss +++ b/showcase/app/styles/showcase-components/label.scss @@ -8,7 +8,7 @@ .shw-label { @include shw-font-family("rubik"); margin: 0 0 10px 0; - color: #545454; + color: var(--shw-label-text-color); font-size: 0.8rem; line-height: 1.2; } diff --git a/showcase/app/styles/showcase-components/placeholder.scss b/showcase/app/styles/showcase-components/placeholder.scss index df37357fc9b..664ff2e37d4 100644 --- a/showcase/app/styles/showcase-components/placeholder.scss +++ b/showcase/app/styles/showcase-components/placeholder.scss @@ -11,18 +11,18 @@ display: flex; align-items: center; justify-content: center; - color: #6b6b6b; // if background is #EEE then this has the appropriate color contrast (4.59:1) + color: var(--shw-placeholder-text-color); font-weight: bold; font-size: 10px; font-family: monaco, Consolas, "Lucida Console", monospace; line-height: 1.2; text-align: center; - text-shadow: 0 0 5px #fff; - background-color: #eee; + text-shadow: 0 0 5px var(--shw-color-white); + background-color: var(--shw-placeholder-background-color); a, a > & { - color: #333; + color: var(--shw-placeholder-link-color); text-decoration: underline; } } diff --git a/showcase/app/styles/showcase-components/theme-switcher.scss b/showcase/app/styles/showcase-components/theme-switcher.scss new file mode 100644 index 00000000000..f61937282bc --- /dev/null +++ b/showcase/app/styles/showcase-components/theme-switcher.scss @@ -0,0 +1,32 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +.shw-theme-switcher { + display: flex; + gap: 8px; + align-items: center; +} + +.shw-theme-switcher__label { + color: var(--shw-color-black); + font-size: 0.75rem; + font-family: monaco, Consolas, "Lucida Console", monospace; +} + +.shw-theme-switcher__control { + height: 24px; + padding: 2px 24px 2px 8px; + color: var(--shw-color-gray-100); + font-size: 0.75rem; + font-family: monaco, Consolas, "Lucida Console", monospace; + background-color: var(--shw-color-gray-600); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.34572 7H20.6543C21.8517 7 22.4504 8.4463 21.6028 9.29391L12.9519 17.9515C12.4272 18.4763 11.5728 18.4763 11.0481 17.9515L2.39722 9.29391C1.54961 8.4463 2.14832 7 3.34572 7Z' fill='%23808080'/%3E%3C/svg%3E"); // notice: the 'caret' color is hardcoded here! + background-repeat: no-repeat; + background-position: right 6px top 4px; + background-size: 12px 12px; + border: 1px solid var(--shw-color-gray-400); + border-radius: 3px; + appearance: none; +} diff --git a/showcase/app/styles/showcase-pages/theming.scss b/showcase/app/styles/showcase-pages/theming.scss new file mode 100644 index 00000000000..d8f0cc07103 --- /dev/null +++ b/showcase/app/styles/showcase-pages/theming.scss @@ -0,0 +1,54 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// TYPOGRAPHY + +body.foundations-theming { + .shw-theming-demo-container { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + min-width: 120px; + min-height: 120px; + padding: 50px; + color: var(--shw-test-theme-foreground-color); + font-weight: bold; + font-size: 10px; + font-family: monaco, Consolas, "Lucida Console", monospace; + line-height: 1.2; + background-color: var(--shw-test-theme-background-color); + } + + .shw-theming-demo-container--class { + color: var( + --shw-test-theme-class-foreground-color, + var(--shw-test-theme-foreground-color) + ); + background-color: var( + --shw-test-theme-class-background-color, + var(--shw-test-theme-background-color) + ); + } + + .shw-theming-demo-container--data { + color: var( + --shw-test-theme-data-foreground-color, + var(--shw-test-theme-foreground-color) + ); + background-color: var( + --shw-test-theme-data-background-color, + var(--shw-test-theme-background-color) + ); + } + + .shw-theming-container-background-light { + background-color: #fff; + } + + .shw-theming-container-background-dark { + background-color: #000; + } +} diff --git a/showcase/app/styles/showcase-pages/typography.scss b/showcase/app/styles/showcase-pages/typography.scss index 4758af01b54..0a5ccb6f808 100644 --- a/showcase/app/styles/showcase-pages/typography.scss +++ b/showcase/app/styles/showcase-pages/typography.scss @@ -7,11 +7,12 @@ body.foundations-typography { .shw-label { - color: #999; + color: var(--shw-color-gray-300); } p[class^="hds-"] { margin: 0; padding: 0; + color: var(--shw-color-black); } } diff --git a/showcase/app/styles/showcase-theming/dark.scss b/showcase/app/styles/showcase-theming/dark.scss new file mode 100644 index 00000000000..b8acb8731e6 --- /dev/null +++ b/showcase/app/styles/showcase-theming/dark.scss @@ -0,0 +1,84 @@ +// SHOWCASE COLORS > DARK THEME + +@mixin shw-theme-color-variables-dark() { + // SEMANTIC PALETTE + --shw-color-white: #1a1a1a; + --shw-color-gray-600: #222225; + --shw-color-gray-500: #353537; + --shw-color-gray-400: #4c4c4d; + --shw-color-gray-300: #89898a; + --shw-color-gray-200: #babbbc; + --shw-color-gray-100: #cccdcf; + --shw-color-black: #e5e5e5; + --shw-color-link-on-black: #145ab6; + --shw-color-link-on-white: #3a6fcb; + --shw-color-feedback-information-100: #406dde; + --shw-color-feedback-information-200: #1857d6; + --shw-color-feedback-information-300: #092150; + --shw-color-feedback-information-400: #061a39; + --shw-color-feedback-success-100: #7bf0cd; + --shw-color-feedback-success-200: #4aebb7; + --shw-color-feedback-success-300: #1c5440; + --shw-color-feedback-success-400: #0c392a; + --shw-color-feedback-warning-100: #e8b265; + --shw-color-feedback-warning-200: #bf8b28; + --shw-color-feedback-warning-300: #4e3912; + --shw-color-feedback-warning-400: #382a0e; + --shw-color-feedback-critical-100: #cc4f52; + --shw-color-feedback-critical-200: #aa1f23; + --shw-color-feedback-critical-300: #4d090c; + --shw-color-feedback-critical-400: #320f15; + --shw-color-action-active-foreground: #1a1ae5; + --shw-color-action-active-border: #1a1ae5; + --shw-color-action-active-background: #062139; + // COMPONENTS + --shw-frame-browser-navigation-background: #050505; + --shw-label-text-color: #c4c4c4; + --shw-placeholder-text-color: #949494; + --shw-placeholder-background-color: #121212; + --shw-placeholder-link-color: #ccc; +} + +@media (prefers-color-scheme: dark) { + :root { + @include shw-theme-color-variables-dark(); + } +} + +.shw-theme-dark, +[data-shw-theme="dark"] { + @include shw-theme-color-variables-dark(); +} + +// ###################################################### + +// TEST COLORS + +@media (prefers-color-scheme: dark) { + :root { + --shw-test-theme-foreground-color: #eee; + --shw-test-theme-background-color: #111; + } +} + +.shw-theme-dark, +[data-shw-theme="dark"] { + --shw-test-theme-foreground-color: #eee; + --shw-test-theme-background-color: #111; +} + + +// --- + +// special variables used in the "theming" showcase page to demonstrate different ways to apply a theme to a page + +body.shw-theme-dark { + --shw-test-theme-class-foreground-color: #e0ffd9; + --shw-test-theme-class-background-color: #008217; +} + +body[data-shw-theme="dark"] { + --shw-test-theme-data-foreground-color: #f7d9ff; + --shw-test-theme-data-background-color: #b01fe3; +} + diff --git a/showcase/app/styles/showcase-theming/light.scss b/showcase/app/styles/showcase-theming/light.scss new file mode 100644 index 00000000000..e4e8a38aa3a --- /dev/null +++ b/showcase/app/styles/showcase-theming/light.scss @@ -0,0 +1,88 @@ +// SHOWCASE COLORS > LIGHT THEME + +@mixin shw-theme-color-variables-light() { + // SEMANTIC PALETTE + --shw-color-white: #fff; + --shw-color-gray-600: #f2f2f3; + --shw-color-gray-500: #dbdbdc; + --shw-color-gray-400: #bfbfc0; + --shw-color-gray-300: #727374; + --shw-color-gray-200: #343536; + --shw-color-gray-100: #1d1e1f; + --shw-color-black: #000; + --shw-color-link-on-black: #4294ff; + --shw-color-link-on-white: #2264d6; + --shw-color-feedback-information-100: #0d44cc; + --shw-color-feedback-information-200: #1563ff; + --shw-color-feedback-information-300: #d0e0ff; + --shw-color-feedback-information-400: #eff5ff; + --shw-color-feedback-success-100: #007854; + --shw-color-feedback-success-200: #00bc7f; + --shw-color-feedback-success-300: #c1f1e0; + --shw-color-feedback-success-400: #ebfdf7; + --shw-color-feedback-warning-100: #975b06; + --shw-color-feedback-warning-200: #eaaa32; + --shw-color-feedback-warning-300: #f9eacd; + --shw-color-feedback-warning-400: #fcf6ea; + --shw-color-feedback-critical-100: #ba2226; + --shw-color-feedback-critical-200: #f25054; + --shw-color-feedback-critical-300: #ffd4d6; + --shw-color-feedback-critical-400: #fcf0f2; + --shw-color-action-active-foreground: #00f; // HTML "blue" + --shw-color-action-active-border: #00f; // HTML "blue" + --shw-color-action-active-background: #f0f8ff; // HTML "aliceblue" + // COMPONENTS + --shw-frame-browser-navigation-background: #fafafa; + --shw-label-text-color: #545454; + --shw-placeholder-text-color: #6b6b6b; // if background is #EEE then this has the appropriate color contrast (4.59:1) + --shw-placeholder-background-color: #eee; + --shw-placeholder-link-color: #333; +} + +// TODO! should we add an entry to act as default for browser that may not support `prefers-color-scheme`? +// :root { +// @include shw-theme-color-variables-light(); +// } + +@media (prefers-color-scheme: light) { + :root { + @include shw-theme-color-variables-light(); + } +} + +.shw-theme-light, +[data-shw-theme="light"] { + @include shw-theme-color-variables-light(); +} + +// ###################################################### + +// TEST COLORS + +@media (prefers-color-scheme: light) { + :root { + --shw-test-theme-foreground-color: #111; + --shw-test-theme-background-color: #eee; + } +} + +.shw-theme-light, +[data-shw-theme="light"] { + --shw-test-theme-foreground-color: #111; + --shw-test-theme-background-color: #eee; +} + +// --- + +// special variables used in the "theming" showcase page to demonstrate different ways to apply a theme to a page + +body.shw-theme-light { + --shw-test-theme-class-foreground-color: #008217; + --shw-test-theme-class-background-color: #e0ffd9; +} + +body[data-shw-theme="light"] { + --shw-test-theme-data-foreground-color: #b01fe3; + --shw-test-theme-data-background-color: #f7d9ff; +} + diff --git a/showcase/app/templates/application.hbs b/showcase/app/templates/application.hbs index ff9e1cbdd64..76b0dbd44c7 100644 --- a/showcase/app/templates/application.hbs +++ b/showcase/app/templates/application.hbs @@ -13,6 +13,9 @@
Components showcase
+
+ +