From 0bcfefd68b821b0244d6034d954c3570d37dd1cf Mon Sep 17 00:00:00 2001 From: Mark Tomlinson Date: Sat, 31 Jan 2026 09:23:50 +1100 Subject: [PATCH 1/7] Add sugarcube --- package-lock.json | 684 +----------------------- package.json | 10 +- postcss.config.cjs | 3 + postcss.config.js | 7 - src/css-utils/clamp-generator.js | 39 -- src/css-utils/tokens-to-tailwind.js | 20 - src/css/global.css | 9 +- src/css/global/tokens.variables.gen.css | 53 ++ src/css/utilities/utilities.gen.css | 10 + src/design-tokens/colors.json | 23 +- src/design-tokens/fonts.json | 15 +- src/design-tokens/spacing.json | 256 +++++---- src/design-tokens/text-leading.json | 28 +- src/design-tokens/text-sizes.json | 77 +-- src/design-tokens/text-weights.json | 24 +- src/design-tokens/tokens.resolver.json | 18 + src/design-tokens/viewports.json | 17 +- sugarcube.config.js | 70 +++ tailwind.config.js | 144 ----- 19 files changed, 391 insertions(+), 1116 deletions(-) create mode 100644 postcss.config.cjs delete mode 100644 postcss.config.js delete mode 100644 src/css-utils/clamp-generator.js delete mode 100644 src/css-utils/tokens-to-tailwind.js create mode 100644 src/css/global/tokens.variables.gen.css create mode 100644 src/css/utilities/utilities.gen.css create mode 100644 src/design-tokens/tokens.resolver.json create mode 100644 sugarcube.config.js delete mode 100644 tailwind.config.js diff --git a/package-lock.json b/package-lock.json index ce6b610..c610c0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "tailwind-cruft", + "name": "cube-boilerplate", "lockfileVersion": 3, "requires": true, "packages": { @@ -12,21 +12,7 @@ "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", - "postcss-import-ext-glob": "^2.1.1", - "postcss-js": "^4.0.1", - "slugify": "^1.6.6", - "tailwindcss": "^3.3.5" - } - }, - "node_modules/@alloc/quick-lru": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", - "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "postcss-import-ext-glob": "^2.1.1" } }, "node_modules/@babel/runtime": { @@ -40,65 +26,6 @@ "node": ">=6.9.0" } }, - "node_modules/@isaacs/cliui": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", - "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", - "dependencies": { - "string-width": "^5.1.2", - "string-width-cjs": "npm:string-width@^4.2.0", - "strip-ansi": "^7.0.1", - "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", - "wrap-ansi": "^8.1.0", - "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", - "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", - "dependencies": { - "@jridgewell/set-array": "^1.0.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.9" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", - "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==", - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/set-array": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", - "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.15", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" - }, - "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.22", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz", - "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==", - "dependencies": { - "@jridgewell/resolve-uri": "^3.1.0", - "@jridgewell/sourcemap-codec": "^1.4.14" - } - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -131,15 +58,6 @@ "node": ">= 8" } }, - "node_modules/@pkgjs/parseargs": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", - "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", - "optional": true, - "engines": { - "node": ">=14" - } - }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -148,17 +66,6 @@ "node": ">=10.13.0" } }, - "node_modules/ansi-regex": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", - "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, "node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -173,11 +80,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/any-promise": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==" - }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -190,16 +92,6 @@ "node": ">= 8" } }, - "node_modules/arg": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==" - }, - "node_modules/balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" - }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -213,14 +105,6 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, - "node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dependencies": { - "balanced-match": "^1.0.0" - } - }, "node_modules/braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -263,14 +147,6 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, - "node_modules/camelcase-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", - "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", - "engines": { - "node": ">= 6" - } - }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -485,19 +361,6 @@ "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" } }, - "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/css-declaration-sorter": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.1.1.tgz", @@ -683,11 +546,6 @@ "node": ">= 0.6.0" } }, - "node_modules/didyoumean": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", - "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==" - }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -699,11 +557,6 @@ "node": ">=8" } }, - "node_modules/dlv": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==" - }, "node_modules/dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -755,21 +608,11 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, - "node_modules/eastasianwidth": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" - }, "node_modules/electron-to-chromium": { "version": "1.4.647", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.647.tgz", "integrity": "sha512-Z/fTNGwc45WrYQhPaEcz5tAJuZZ8G7S/DBnhS6Kgp4BxnS40Z/HqlJ0hHg3Z79IGVzuVartIlTcjw/cQbPLgOw==" }, - "node_modules/emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" - }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -828,21 +671,6 @@ "node": ">=8" } }, - "node_modules/foreground-child": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", - "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==", - "dependencies": { - "cross-spawn": "^7.0.0", - "signal-exit": "^4.0.1" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/fs-extra": { "version": "11.2.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", @@ -896,27 +724,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/glob": { - "version": "10.3.10", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz", - "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==", - "dependencies": { - "foreground-child": "^3.1.0", - "jackspeak": "^2.3.5", - "minimatch": "^9.0.1", - "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0", - "path-scurry": "^1.10.1" - }, - "bin": { - "glob": "dist/esm/bin.mjs" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/glob-parent": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", @@ -1046,36 +853,6 @@ "node": ">=0.12.0" } }, - "node_modules/isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" - }, - "node_modules/jackspeak": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz", - "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==", - "dependencies": { - "@isaacs/cliui": "^8.0.2" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - }, - "optionalDependencies": { - "@pkgjs/parseargs": "^0.11.0" - } - }, - "node_modules/jiti": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", - "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", - "bin": { - "jiti": "bin/jiti.js" - } - }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -1095,11 +872,6 @@ "node": ">=14" } }, - "node_modules/lines-and-columns": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" - }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -1115,14 +887,6 @@ "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==" }, - "node_modules/lru-cache": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz", - "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==", - "engines": { - "node": "14 || >=16.14" - } - }, "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", @@ -1148,38 +912,6 @@ "node": ">=8.6" } }, - "node_modules/minimatch": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", - "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/minipass": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz", - "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==", - "engines": { - "node": ">=16 || 14 >=14.17" - } - }, - "node_modules/mz": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", - "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", - "dependencies": { - "any-promise": "^1.0.0", - "object-assign": "^4.0.1", - "thenify-all": "^1.0.0" - } - }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -1221,50 +953,11 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, - "node_modules/object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/object-hash": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", - "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", - "engines": { - "node": ">= 6" - } - }, - "node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "engines": { - "node": ">=8" - } - }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, - "node_modules/path-scurry": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz", - "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==", - "dependencies": { - "lru-cache": "^9.1.1 || ^10.0.0", - "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -1297,14 +990,6 @@ "node": ">=0.10.0" } }, - "node_modules/pirates": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", - "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", - "engines": { - "node": ">= 6" - } - }, "node_modules/postcss": { "version": "8.4.33", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz", @@ -1480,24 +1165,6 @@ "postcss": "^8.2.0" } }, - "node_modules/postcss-js": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", - "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", - "dependencies": { - "camelcase-css": "^2.0.1" - }, - "engines": { - "node": "^12 || ^14 || >= 16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.4.21" - } - }, "node_modules/postcss-load-config": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", @@ -1624,24 +1291,6 @@ "postcss": "^8.4.31" } }, - "node_modules/postcss-nested": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", - "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", - "dependencies": { - "postcss-selector-parser": "^6.0.11" - }, - "engines": { - "node": ">=12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.2.14" - } - }, "node_modules/postcss-normalize-charset": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.1.tgz", @@ -1995,25 +1644,6 @@ "tslib": "^2.1.0" } }, - "node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "engines": { - "node": ">=8" - } - }, "node_modules/shell-quote": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", @@ -2022,17 +1652,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/slash": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", @@ -2044,14 +1663,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/slugify": { - "version": "1.6.6", - "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz", - "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==", - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -2073,94 +1684,6 @@ "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz", "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==" }, - "node_modules/string-width": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", - "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", - "dependencies": { - "eastasianwidth": "^0.2.0", - "emoji-regex": "^9.2.2", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/string-width-cjs": { - "name": "string-width", - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width-cjs/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width-cjs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "node_modules/string-width-cjs/node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, - "node_modules/strip-ansi-cjs": { - "name": "strip-ansi", - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-ansi-cjs/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "engines": { - "node": ">=8" - } - }, "node_modules/stylehacks": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.2.tgz", @@ -2176,35 +1699,6 @@ "postcss": "^8.4.31" } }, - "node_modules/sucrase": { - "version": "3.35.0", - "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", - "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.2", - "commander": "^4.0.0", - "glob": "^10.3.10", - "lines-and-columns": "^1.1.6", - "mz": "^2.7.0", - "pirates": "^4.0.1", - "ts-interface-checker": "^0.1.9" - }, - "bin": { - "sucrase": "bin/sucrase", - "sucrase-node": "bin/sucrase-node" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - } - }, - "node_modules/sucrase/node_modules/commander": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", - "engines": { - "node": ">= 6" - } - }, "node_modules/supports-color": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", @@ -2254,85 +1748,11 @@ "url": "https://opencollective.com/svgo" } }, - "node_modules/tailwindcss": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", - "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==", - "dependencies": { - "@alloc/quick-lru": "^5.2.0", - "arg": "^5.0.2", - "chokidar": "^3.5.3", - "didyoumean": "^1.2.2", - "dlv": "^1.1.3", - "fast-glob": "^3.3.0", - "glob-parent": "^6.0.2", - "is-glob": "^4.0.3", - "jiti": "^1.19.1", - "lilconfig": "^2.1.0", - "micromatch": "^4.0.5", - "normalize-path": "^3.0.0", - "object-hash": "^3.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.4.23", - "postcss-import": "^15.1.0", - "postcss-js": "^4.0.1", - "postcss-load-config": "^4.0.1", - "postcss-nested": "^6.0.1", - "postcss-selector-parser": "^6.0.11", - "resolve": "^1.22.2", - "sucrase": "^3.32.0" - }, - "bin": { - "tailwind": "lib/cli.js", - "tailwindcss": "lib/cli.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/tailwindcss/node_modules/glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", - "dependencies": { - "is-glob": "^4.0.3" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/tailwindcss/node_modules/lilconfig": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", - "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", - "engines": { - "node": ">=10" - } - }, "node_modules/thenby": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz", "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==" }, - "node_modules/thenify": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", - "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", - "dependencies": { - "any-promise": "^1.0.0" - } - }, - "node_modules/thenify-all": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", - "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", - "dependencies": { - "thenify": ">= 3.1.0 < 4" - }, - "engines": { - "node": ">=0.8" - } - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -2352,11 +1772,6 @@ "tree-kill": "cli.js" } }, - "node_modules/ts-interface-checker": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", - "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" - }, "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", @@ -2404,101 +1819,6 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, - "node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/wrap-ansi": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", - "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", - "dependencies": { - "ansi-styles": "^6.1.0", - "string-width": "^5.0.1", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/wrap-ansi-cjs": { - "name": "wrap-ansi", - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "node_modules/wrap-ansi-cjs/node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi/node_modules/ansi-styles": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", - "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index 1ecf494..0f9e32c 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,11 @@ { + "type": "module", "scripts": { + "tokens": "npx make-sugarcube generate", "css": "npx postcss src/css/*.css --dir dist/css", "clean": "rm -r -f dist && mkdir dist", - "start": "npm run clean && cp src/index.html dist/index.html && concurrently 'npx serve dist' 'npm run css -- --watch'" + "start": "npm run clean && npm run tokens && cp src/index.html dist/index.html && concurrently 'npx serve dist' 'npm run css -- --watch'", + "validate:tokens": "npx make-sugarcube validate" }, "keywords": [], "author": "", @@ -14,9 +17,6 @@ "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", - "postcss-import-ext-glob": "^2.1.1", - "postcss-js": "^4.0.1", - "slugify": "^1.6.6", - "tailwindcss": "^3.3.5" + "postcss-import-ext-glob": "^2.1.1" } } diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..e2bb76b --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,3 @@ +module.exports = { + plugins: [require('postcss-import-ext-glob'), require('postcss-import')] +}; diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 2d7e645..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - plugins: [ - require('postcss-import-ext-glob'), - require('postcss-import'), - require('tailwindcss') - ] -}; diff --git a/src/css-utils/clamp-generator.js b/src/css-utils/clamp-generator.js deleted file mode 100644 index 8bd737f..0000000 --- a/src/css-utils/clamp-generator.js +++ /dev/null @@ -1,39 +0,0 @@ -const viewports = require('../design-tokens/viewports.json'); - -/** - * Takes an array of tokens and sends back and array of name - * and clamp pairs for CSS fluid values. - * - * @param {array} tokens array of {name: string, min: number, max: number} - * @returns {array} {name: string, value: string} - */ -const clampGenerator = tokens => { - const rootSize = 16; - - return tokens.map(({name, min, max}) => { - if (min === max) { - return `${min / rootSize}rem`; - } - - // Convert the min and max sizes to rems - const minSize = min / rootSize; - const maxSize = max / rootSize; - - // Convert the pixel viewport sizes into rems - const minViewport = viewports.min / rootSize; - const maxViewport = viewports.max / rootSize; - - // Slope and intersection allow us to have a fluid value but also keep that sensible - const slope = (maxSize - minSize) / (maxViewport - minViewport); - const intersection = -1 * minViewport * slope + minSize; - - return { - name, - value: `clamp(${minSize}rem, ${intersection.toFixed(2)}rem + ${( - slope * 100 - ).toFixed(2)}vw, ${maxSize}rem)` - }; - }); -}; - -module.exports = clampGenerator; diff --git a/src/css-utils/tokens-to-tailwind.js b/src/css-utils/tokens-to-tailwind.js deleted file mode 100644 index 8bd78ef..0000000 --- a/src/css-utils/tokens-to-tailwind.js +++ /dev/null @@ -1,20 +0,0 @@ -const slugify = require('slugify'); - -/** - * Converts human readable tokens into tailwind config friendly ones - * - * @param {array} tokens {name: string, value: any} - * @return {object} {key, value} - */ -const tokensToTailwind = tokens => { - const nameSlug = text => slugify(text, {lower: true}); - let response = {}; - - tokens.forEach(({name, value}) => { - response[nameSlug(name)] = value; - }); - - return response; -}; - -module.exports = tokensToTailwind; diff --git a/src/css/global.css b/src/css/global.css index 7ffbdab..d825f01 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -1,10 +1,8 @@ -@import 'tailwindcss/base'; +/* Generated variable CSS from sugarcube */ +@import 'global/tokens.variables.gen.css'; @import 'global/reset.css'; @import 'global/fonts.css'; - -@import 'tailwindcss/components'; - @import 'global/variables.css'; @import 'global/global-styles.css'; @@ -12,4 +10,5 @@ @import-glob 'compositions/*.css'; @import-glob 'utilities/*.css'; -@import 'tailwindcss/utilities'; +/* Generated utility classes from sugarcube (optional). */ +@import 'utilities/utilities.gen.css'; diff --git a/src/css/global/tokens.variables.gen.css b/src/css/global/tokens.variables.gen.css new file mode 100644 index 0000000..b9b7d8c --- /dev/null +++ b/src/css/global/tokens.variables.gen.css @@ -0,0 +1,53 @@ +/*! + * This file was automatically generated by sugarcube. + * You should NOT make any changes in this file as it will be overwritten. + * To make changes, edit your design token files instead. + * Additionally, you should exclude this file from your linter and/or formatter + * to prevent it from being checked or modified. + */ + +:root { + --color-dark: #030303; + --color-light: #ffffff; + --color-primary: #02394A; + --font-base: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-weight-bold: 700; + --font-weight-medium: 500; + --font-weight-regular: 400; + --leading-fine: 1.15; + --leading-flat: 1; + --leading-loose: 1.7; + --leading-standard: 1.5; + --size-step-0: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); + --size-step-00: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem); + --size-step-1: clamp(1.35rem, 1.27rem + 0.38vw, 1.5625rem); + --size-step-2: clamp(1.62rem, 1.50rem + 0.59vw, 1.953rem); + --size-step-3: clamp(1.944rem, 1.76rem + 0.88vw, 2.441rem); + --size-step-4: clamp(2.441rem, 2.22rem + 1.09vw, 3.052rem); + --size-step-5: clamp(2.799rem, 2.43rem + 1.81vw, 3.815rem); + --space-2xl: clamp(4.5rem, 3.95rem + 2.67vw, 6rem); + --space-2xl-3xl: clamp(4.5rem, 2.85rem + 8.00vw, 9rem); + --space-2xs: clamp(0.5625rem, 0.49rem + 0.33vw, 0.75rem); + --space-2xs-xs: clamp(0.5625rem, 0.36rem + 1.00vw, 1.125rem); + --space-3xl: clamp(6.75rem, 5.92rem + 4.00vw, 9rem); + --space-3xl-4xl: clamp(6.75rem, 4.83rem + 9.33vw, 12rem); + --space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem); + --space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.78vw, 0.75rem); + --space-4xl: clamp(9rem, 7.90rem + 5.33vw, 12rem); + --space-l: clamp(2.25rem, 1.98rem + 1.33vw, 3rem); + --space-l-xl: clamp(2.25rem, 1.42rem + 4.00vw, 4.5rem); + --space-m: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem); + --space-m-l: clamp(1.6875rem, 1.21rem + 2.33vw, 3rem); + --space-s: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem); + --space-s-l: clamp(1.125rem, 0.44rem + 3.33vw, 3rem); + --space-s-m: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem); + --space-s-xl: clamp(1.125rem, -0.11rem + 6.00vw, 4.5rem); + --space-xl: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem); + --space-xl-2xl: clamp(3.375rem, 2.41rem + 4.67vw, 6rem); + --space-xs: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem); + --space-xs-s: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem); + --space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem); + --viewport-max: 1230px; + --viewport-mid: 760px; + --viewport-min: 330px; +} diff --git a/src/css/utilities/utilities.gen.css b/src/css/utilities/utilities.gen.css new file mode 100644 index 0000000..bfa42c0 --- /dev/null +++ b/src/css/utilities/utilities.gen.css @@ -0,0 +1,10 @@ +/*! + * This file was automatically generated by sugarcube. + * You should NOT make any changes in this file as it will be overwritten. + * To make changes, edit your utilities configuration instead. + * Additionally, you should exclude this file from your linter and/or formatter + * to prevent it from being checked or modified. + */ + +/* layer: default */ +.text-primary{color:var(--color-primary);} \ No newline at end of file diff --git a/src/design-tokens/colors.json b/src/design-tokens/colors.json index 87b425a..92c3ebf 100644 --- a/src/design-tokens/colors.json +++ b/src/design-tokens/colors.json @@ -1,18 +1,15 @@ { - "title": "Colors", - "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.", - "items": [ - { - "name": "Dark", - "value": "#030303" + "color": { + "$type": "color", + "$description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.", + "dark": { + "$value": "#030303" }, - { - "name": "Light", - "value": "#ffffff" + "light": { + "$value": "#ffffff" }, - { - "name": "Primary", - "value": "#02394A" + "primary": { + "$value": "#02394A" } - ] + } } diff --git a/src/design-tokens/fonts.json b/src/design-tokens/fonts.json index 0e70607..b80a7d7 100644 --- a/src/design-tokens/fonts.json +++ b/src/design-tokens/fonts.json @@ -1,11 +1,10 @@ { - "title": "Fonts", - "description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks", - "items": [ - { - "name": "Base", - "description": "System fonts for body copy and globally set text.", - "value": ["Inter", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"] + "font": { + "$type": "fontFamily", + "$description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks.", + "base": { + "$value": ["Inter", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"], + "$description": "System fonts for body copy and globally set text." } - ] + } } diff --git a/src/design-tokens/spacing.json b/src/design-tokens/spacing.json index f754ab5..c908e6f 100644 --- a/src/design-tokens/spacing.json +++ b/src/design-tokens/spacing.json @@ -1,119 +1,141 @@ { - "title": "Spacing", - "description": "Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.", - "meta": { - "scaleGenerator": "https://utopia.fyi/space/calculator/?c=330,18,1.2,1200,24,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l|s-xl&g=s,l,xl,12" - }, - "items": [ - { - "name": "Zero", - "min": 0, - "max": 1 - }, - { - "name": "3XS", - "min": 5, - "max": 6 - }, - { - "name": "2XS", - "min": 9, - "max": 12 - }, - { - "name": "XS", - "min": 14, - "max": 18 - }, - { - "name": "S", - "min": 18, - "max": 24 - }, - { - "name": "M", - "min": 27, - "max": 36 - }, - { - "name": "L", - "min": 36, - "max": 48 - }, - { - "name": "XL", - "min": 54, - "max": 72 - }, - { - "name": "2XL", - "min": 72, - "max": 96 - }, - { - "name": "3XL", - "min": 108, - "max": 144 - }, - { - "name": "4XL", - "min": 144, - "max": 192 - }, - { - "name": "3XS - 2XS", - "min": 5, - "max": 12 - }, - { - "name": "2XS - XS", - "min": 9, - "max": 18 - }, - { - "name": "XS - S", - "min": 14, - "max": 24 - }, - { - "name": "S - M", - "min": 18, - "max": 36 - }, - { - "name": "M - L", - "min": 27, - "max": 48 - }, - { - "name": "L - XL", - "min": 36, - "max": 72 - }, - { - "name": "XL - 2XL", - "min": 54, - "max": 96 - }, - { - "name": "2XL - 3XL", - "min": 72, - "max": 144 - }, - { - "name": "3XL - 4XL", - "min": 108, - "max": 192 - }, - { - "name": "S - L", - "min": 18, - "max": 48 - }, - { - "name": "S - XL", - "min": 18, - "max": 72 + "space": { + "$type": "fluidDimension", + "$description": "Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.", + "$extensions": { + "scaleGenerator": "https://utopia.fyi/space/calculator/?c=330,18,1.2,1200,24,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l|s-xl&g=s,l,xl,12" + }, + "zero": { + "$value": { + "min": {"value": 0, "unit": "rem"}, + "max": {"value": 0.0625, "unit": "rem"} + } + }, + "3xs": { + "$value": { + "min": {"value": 0.3125, "unit": "rem"}, + "max": {"value": 0.375, "unit": "rem"} + } + }, + "2xs": { + "$value": { + "min": {"value": 0.5625, "unit": "rem"}, + "max": {"value": 0.75, "unit": "rem"} + } + }, + "xs": { + "$value": { + "min": {"value": 0.875, "unit": "rem"}, + "max": {"value": 1.125, "unit": "rem"} + } + }, + "s": { + "$value": { + "min": {"value": 1.125, "unit": "rem"}, + "max": {"value": 1.5, "unit": "rem"} + } + }, + "m": { + "$value": { + "min": {"value": 1.6875, "unit": "rem"}, + "max": {"value": 2.25, "unit": "rem"} + } + }, + "l": { + "$value": { + "min": {"value": 2.25, "unit": "rem"}, + "max": {"value": 3, "unit": "rem"} + } + }, + "xl": { + "$value": { + "min": {"value": 3.375, "unit": "rem"}, + "max": {"value": 4.5, "unit": "rem"} + } + }, + "2xl": { + "$value": { + "min": {"value": 4.5, "unit": "rem"}, + "max": {"value": 6, "unit": "rem"} + } + }, + "3xl": { + "$value": { + "min": {"value": 6.75, "unit": "rem"}, + "max": {"value": 9, "unit": "rem"} + } + }, + "4xl": { + "$value": { + "min": {"value": 9, "unit": "rem"}, + "max": {"value": 12, "unit": "rem"} + } + }, + "3xs-2xs": { + "$value": { + "min": {"value": 0.3125, "unit": "rem"}, + "max": {"value": 0.75, "unit": "rem"} + } + }, + "2xs-xs": { + "$value": { + "min": {"value": 0.5625, "unit": "rem"}, + "max": {"value": 1.125, "unit": "rem"} + } + }, + "xs-s": { + "$value": { + "min": {"value": 0.875, "unit": "rem"}, + "max": {"value": 1.5, "unit": "rem"} + } + }, + "s-m": { + "$value": { + "min": {"value": 1.125, "unit": "rem"}, + "max": {"value": 2.25, "unit": "rem"} + } + }, + "m-l": { + "$value": { + "min": {"value": 1.6875, "unit": "rem"}, + "max": {"value": 3, "unit": "rem"} + } + }, + "l-xl": { + "$value": { + "min": {"value": 2.25, "unit": "rem"}, + "max": {"value": 4.5, "unit": "rem"} + } + }, + "xl-2xl": { + "$value": { + "min": {"value": 3.375, "unit": "rem"}, + "max": {"value": 6, "unit": "rem"} + } + }, + "2xl-3xl": { + "$value": { + "min": {"value": 4.5, "unit": "rem"}, + "max": {"value": 9, "unit": "rem"} + } + }, + "3xl-4xl": { + "$value": { + "min": {"value": 6.75, "unit": "rem"}, + "max": {"value": 12, "unit": "rem"} + } + }, + "s-l": { + "$value": { + "min": {"value": 1.125, "unit": "rem"}, + "max": {"value": 3, "unit": "rem"} + } + }, + "s-xl": { + "$value": { + "min": {"value": 1.125, "unit": "rem"}, + "max": {"value": 4.5, "unit": "rem"} + } } - ] -} \ No newline at end of file + } +} diff --git a/src/design-tokens/text-leading.json b/src/design-tokens/text-leading.json index 795eebe..673f352 100644 --- a/src/design-tokens/text-leading.json +++ b/src/design-tokens/text-leading.json @@ -1,22 +1,10 @@ { - "title": "Leading", - "description": "Ratio-based leading/line-height values", - "items": [ - { - "name": "Flat", - "value": 1 - }, - { - "name": "Fine", - "value": 1.15 - }, - { - "name": "Standard", - "value": 1.5 - }, - { - "name": "Loose", - "value": 1.7 - } - ] + "leading": { + "$type": "number", + "$description": "Ratio-based leading/line-height values.", + "flat": {"$value": 1}, + "fine": {"$value": 1.15}, + "standard": {"$value": 1.5}, + "loose": {"$value": 1.7} + } } diff --git a/src/design-tokens/text-sizes.json b/src/design-tokens/text-sizes.json index e34b3a5..1d3658d 100644 --- a/src/design-tokens/text-sizes.json +++ b/src/design-tokens/text-sizes.json @@ -1,44 +1,51 @@ { - "title": "Text Sizes", - "description": "A minimum and maximum text size size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropiate sizes, per context. For example, for web, the should be converted to REM units (pixelSize / baseSize)", - "meta": { - "scaleGenerator": "https://utopia.fyi/type/calculator/?c=330,18,1.175,1200,24,1.25,7,1,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12" - }, - "items": [ - { - "name": "Step 00", - "min": 15, - "max": 16 + "size": { + "$type": "fluidDimension", + "$description": "A minimum and maximum text size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropriate sizes, per context. For example, for web, they should be converted to REM units (pixelSize / baseSize).", + "$extensions": { + "scaleGenerator": "https://utopia.fyi/type/calculator/?c=330,18,1.175,1200,24,1.25,7,1,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12" }, - { - "name": "Step 0", - "min": 18, - "max": 20 + "step-00": { + "$value": { + "min": {"value": 0.9375, "unit": "rem"}, + "max": {"value": 1, "unit": "rem"} + } }, - { - "name": "Step 1", - "min": 21.6, - "max": 25 + "step-0": { + "$value": { + "min": {"value": 1.125, "unit": "rem"}, + "max": {"value": 1.25, "unit": "rem"} + } }, - { - "name": "Step 2", - "min": 25.92, - "max": 31.25 + "step-1": { + "$value": { + "min": {"value": 1.35, "unit": "rem"}, + "max": {"value": 1.5625, "unit": "rem"} + } }, - { - "name": "Step 3", - "min": 31.1, - "max": 39.06 + "step-2": { + "$value": { + "min": {"value": 1.62, "unit": "rem"}, + "max": {"value": 1.953, "unit": "rem"} + } }, - { - "name": "Step 4", - "min": 39.06, - "max": 48.83 + "step-3": { + "$value": { + "min": {"value": 1.944, "unit": "rem"}, + "max": {"value": 2.441, "unit": "rem"} + } }, - { - "name": "Step 5", - "min": 44.79, - "max": 61.04 + "step-4": { + "$value": { + "min": {"value": 2.441, "unit": "rem"}, + "max": {"value": 3.052, "unit": "rem"} + } + }, + "step-5": { + "$value": { + "min": {"value": 2.799, "unit": "rem"}, + "max": {"value": 3.815, "unit": "rem"} + } } - ] + } } diff --git a/src/design-tokens/text-weights.json b/src/design-tokens/text-weights.json index 4f94b98..a78e095 100644 --- a/src/design-tokens/text-weights.json +++ b/src/design-tokens/text-weights.json @@ -1,19 +1,11 @@ { - "title": "Text Weights", - "description": "Helper classes and custom properties for common font weights", - "meta": {}, - "items": [ - { - "name": "Regular", - "value": 400 - }, - { - "name": "Medium", - "value": 500 - }, - { - "name": "Bold", - "value": 700 + "font": { + "weight": { + "$type": "fontWeight", + "$description": "Helper classes and custom properties for common font weights.", + "regular": {"$value": 400}, + "medium": {"$value": 500}, + "bold": {"$value": 700} } - ] + } } diff --git a/src/design-tokens/tokens.resolver.json b/src/design-tokens/tokens.resolver.json new file mode 100644 index 0000000..3ee0316 --- /dev/null +++ b/src/design-tokens/tokens.resolver.json @@ -0,0 +1,18 @@ +{ + "version": "2025.10", + "resolutionOrder": [ + { + "type": "set", + "name": "base", + "sources": [ + {"$ref": "./colors.json"}, + {"$ref": "./fonts.json"}, + {"$ref": "./spacing.json"}, + {"$ref": "./text-sizes.json"}, + {"$ref": "./text-leading.json"}, + {"$ref": "./text-weights.json"}, + {"$ref": "./viewports.json"} + ] + } + ] +} diff --git a/src/design-tokens/viewports.json b/src/design-tokens/viewports.json index f4ebfdb..1b068b0 100644 --- a/src/design-tokens/viewports.json +++ b/src/design-tokens/viewports.json @@ -1,7 +1,14 @@ { - "title": "Viewports", - "description": "The min and maximum viewports used to generate fluid type and space scales.", - "min": 330, - "mid": 760, - "max": 1230 + "viewport": { + "$type": "dimension", + "min": { + "$value": {"value": 330, "unit": "px"} + }, + "mid": { + "$value": {"value": 760, "unit": "px"} + }, + "max": { + "$value": {"value": 1230, "unit": "px"} + } + } } diff --git a/sugarcube.config.js b/sugarcube.config.js new file mode 100644 index 0000000..41f6030 --- /dev/null +++ b/sugarcube.config.js @@ -0,0 +1,70 @@ +// Configuration reference: https://sugarcube.sh/docs/reference/configuration-schema +const config = { + resolver: 'src/design-tokens/tokens.resolver.json', + output: { + css: './src/css' + }, + transforms: { + fluid: { + min: 330, + max: 1230 + } + }, + utilities: { + // Colors + 'color': { + source: 'color.*', + prefix: 'text' + }, + 'background-color': { + source: 'color.*', + prefix: 'bg' + }, + + // Spacing with directional variants + 'margin': { + source: 'space.*', + prefix: 'm', + directions: ['all'] + }, + 'padding': { + source: 'space.*', + prefix: 'p', + directions: ['all'] + }, + + // Typography + 'font-size': { + source: 'size.*', + prefix: 'text' + }, + 'line-height': { + source: 'leading.*', + prefix: 'leading' + }, + 'font-family': { + source: 'font.*', + prefix: 'font' + }, + 'font-weight': { + source: 'font.weight.*', + prefix: 'font' + }, + + // CUBE CSS custom property utilities + '--flow-space': { + source: 'space.*', + prefix: 'flow-space' + }, + '--region-space': { + source: 'space.*', + prefix: 'region-space' + }, + '--gutter': { + source: 'space.*', + prefix: 'gutter' + } + } +}; + +export default config; diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 7e135d5..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,144 +0,0 @@ -const plugin = require('tailwindcss/plugin'); -const postcss = require('postcss'); -const postcssJs = require('postcss-js'); - -const clampGenerator = require('./src/css-utils/clamp-generator.js'); -const tokensToTailwind = require('./src/css-utils/tokens-to-tailwind.js'); - -// Raw design tokens -const colorTokens = require('./src/design-tokens/colors.json'); -const fontTokens = require('./src/design-tokens/fonts.json'); -const spacingTokens = require('./src/design-tokens/spacing.json'); -const textSizeTokens = require('./src/design-tokens/text-sizes.json'); -const textLeadingTokens = require('./src/design-tokens/text-leading.json'); -const textWeightTokens = require('./src/design-tokens/text-weights.json'); -const viewportTokens = require('./src/design-tokens/viewports.json'); - -// Process design tokens -const colors = tokensToTailwind(colorTokens.items); -const fontFamily = tokensToTailwind(fontTokens.items); -const fontWeight = tokensToTailwind(textWeightTokens.items); -const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items)); -const lineHeight = tokensToTailwind(textLeadingTokens.items); -const spacing = tokensToTailwind(clampGenerator(spacingTokens.items)); - -module.exports = { - content: ['./src/**/*.{html,js,jsx,mdx,njk,twig,vue}'], - // Add color classes to safe list so they are always generated - safelist: [], - presets: [], - theme: { - screens: { - sm: `${viewportTokens.min}px`, - md: `${viewportTokens.mid}px`, - lg: `${viewportTokens.max}px` - }, - colors, - spacing, - fontSize, - lineHeight, - fontFamily, - fontWeight, - backgroundColor: ({theme}) => theme('colors'), - textColor: ({theme}) => theme('colors'), - margin: ({theme}) => ({ - auto: 'auto', - ...theme('spacing') - }), - padding: ({theme}) => theme('spacing') - }, - variantOrder: [ - 'first', - 'last', - 'odd', - 'even', - 'visited', - 'checked', - 'empty', - 'read-only', - 'group-hover', - 'group-focus', - 'focus-within', - 'hover', - 'focus', - 'focus-visible', - 'active', - 'disabled' - ], - - // Disables Tailwind's reset and usage of rgb/opacity - corePlugins: { - preflight: false, - textOpacity: false, - backgroundOpacity: false, - borderOpacity: false - }, - - // Prevents Tailwind's core components - blocklist: ['container'], - - // Prevents Tailwind from generating that wall of empty custom properties - experimental: { - optimizeUniversalDefaults: true - }, - - plugins: [ - // Generates custom property values from tailwind config - plugin(function ({addComponents, config}) { - let result = ''; - - const currentConfig = config(); - - const groups = [ - {key: 'colors', prefix: 'color'}, - {key: 'spacing', prefix: 'space'}, - {key: 'fontSize', prefix: 'size'}, - {key: 'lineHeight', prefix: 'leading'}, - {key: 'fontFamily', prefix: 'font'}, - {key: 'fontWeight', prefix: 'font'} - ]; - - groups.forEach(({key, prefix}) => { - const group = currentConfig.theme[key]; - - if (!group) { - return; - } - - Object.keys(group).forEach(key => { - result += `--${prefix}-${key}: ${group[key]};`; - }); - }); - - addComponents({ - ':root': postcssJs.objectify(postcss.parse(result)) - }); - }), - - // Generates custom utility classes - plugin(function ({addUtilities, config}) { - const currentConfig = config(); - const customUtilities = [ - {key: 'spacing', prefix: 'flow-space', property: '--flow-space'}, - {key: 'spacing', prefix: 'region-space', property: '--region-space'}, - {key: 'spacing', prefix: 'gutter', property: '--gutter'} - ]; - - customUtilities.forEach(({key, prefix, property}) => { - const group = currentConfig.theme[key]; - - if (!group) { - return; - } - - Object.keys(group).forEach(key => { - addUtilities({ - [`.${prefix}-${key}`]: postcssJs.objectify( - postcss.parse(`${property}: ${group[key]}`) - ) - }); - }); - }); - }) - ] -}; From 41a687b25c1549589804e406826674d425c0de4c Mon Sep 17 00:00:00 2001 From: Mark Tomlinson Date: Sat, 31 Jan 2026 12:22:16 +1100 Subject: [PATCH 2/7] Remove generated files --- src/css/global/tokens.variables.gen.css | 53 ------------------------- src/css/utilities/utilities.gen.css | 10 ----- 2 files changed, 63 deletions(-) delete mode 100644 src/css/global/tokens.variables.gen.css delete mode 100644 src/css/utilities/utilities.gen.css diff --git a/src/css/global/tokens.variables.gen.css b/src/css/global/tokens.variables.gen.css deleted file mode 100644 index b9b7d8c..0000000 --- a/src/css/global/tokens.variables.gen.css +++ /dev/null @@ -1,53 +0,0 @@ -/*! - * This file was automatically generated by sugarcube. - * You should NOT make any changes in this file as it will be overwritten. - * To make changes, edit your design token files instead. - * Additionally, you should exclude this file from your linter and/or formatter - * to prevent it from being checked or modified. - */ - -:root { - --color-dark: #030303; - --color-light: #ffffff; - --color-primary: #02394A; - --font-base: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-weight-bold: 700; - --font-weight-medium: 500; - --font-weight-regular: 400; - --leading-fine: 1.15; - --leading-flat: 1; - --leading-loose: 1.7; - --leading-standard: 1.5; - --size-step-0: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); - --size-step-00: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem); - --size-step-1: clamp(1.35rem, 1.27rem + 0.38vw, 1.5625rem); - --size-step-2: clamp(1.62rem, 1.50rem + 0.59vw, 1.953rem); - --size-step-3: clamp(1.944rem, 1.76rem + 0.88vw, 2.441rem); - --size-step-4: clamp(2.441rem, 2.22rem + 1.09vw, 3.052rem); - --size-step-5: clamp(2.799rem, 2.43rem + 1.81vw, 3.815rem); - --space-2xl: clamp(4.5rem, 3.95rem + 2.67vw, 6rem); - --space-2xl-3xl: clamp(4.5rem, 2.85rem + 8.00vw, 9rem); - --space-2xs: clamp(0.5625rem, 0.49rem + 0.33vw, 0.75rem); - --space-2xs-xs: clamp(0.5625rem, 0.36rem + 1.00vw, 1.125rem); - --space-3xl: clamp(6.75rem, 5.92rem + 4.00vw, 9rem); - --space-3xl-4xl: clamp(6.75rem, 4.83rem + 9.33vw, 12rem); - --space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem); - --space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.78vw, 0.75rem); - --space-4xl: clamp(9rem, 7.90rem + 5.33vw, 12rem); - --space-l: clamp(2.25rem, 1.98rem + 1.33vw, 3rem); - --space-l-xl: clamp(2.25rem, 1.42rem + 4.00vw, 4.5rem); - --space-m: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem); - --space-m-l: clamp(1.6875rem, 1.21rem + 2.33vw, 3rem); - --space-s: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem); - --space-s-l: clamp(1.125rem, 0.44rem + 3.33vw, 3rem); - --space-s-m: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem); - --space-s-xl: clamp(1.125rem, -0.11rem + 6.00vw, 4.5rem); - --space-xl: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem); - --space-xl-2xl: clamp(3.375rem, 2.41rem + 4.67vw, 6rem); - --space-xs: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem); - --space-xs-s: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem); - --space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem); - --viewport-max: 1230px; - --viewport-mid: 760px; - --viewport-min: 330px; -} diff --git a/src/css/utilities/utilities.gen.css b/src/css/utilities/utilities.gen.css deleted file mode 100644 index bfa42c0..0000000 --- a/src/css/utilities/utilities.gen.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! - * This file was automatically generated by sugarcube. - * You should NOT make any changes in this file as it will be overwritten. - * To make changes, edit your utilities configuration instead. - * Additionally, you should exclude this file from your linter and/or formatter - * to prevent it from being checked or modified. - */ - -/* layer: default */ -.text-primary{color:var(--color-primary);} \ No newline at end of file From 32c8305f8634d7f4d11c1cdc8b90c73150a2a051 Mon Sep 17 00:00:00 2001 From: Mark Tomlinson Date: Tue, 10 Feb 2026 16:31:44 +1100 Subject: [PATCH 3/7] chore: bump package --- package-lock.json | 813 +++++++++++++++++++++++++++++++++++++++++++- package.json | 7 +- sugarcube.config.js | 13 +- 3 files changed, 821 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index c610c0f..251b66c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,25 @@ "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", "postcss-import-ext-glob": "^2.1.1" + }, + "devDependencies": { + "@sugarcube-org/cli": "^0.0.0-alpha.37" + } + }, + "node_modules/@antfu/ni": { + "version": "23.3.0", + "resolved": "https://registry.npmjs.org/@antfu/ni/-/ni-23.3.0.tgz", + "integrity": "sha512-H3avrIQMnmo8rJu9w62vE/c4WGgLCGemnBDg83pgdARIttKgyJpTOX5hQ4JFjeZ7fRfrzkRCCDg3vLxseH4Xtg==", + "dev": true, + "license": "MIT", + "bin": { + "na": "bin/na.mjs", + "nci": "bin/nci.mjs", + "ni": "bin/ni.mjs", + "nlx": "bin/nlx.mjs", + "nr": "bin/nr.mjs", + "nu": "bin/nu.mjs", + "nun": "bin/nun.mjs" } }, "node_modules/@babel/runtime": { @@ -26,6 +45,29 @@ "node": ">=6.9.0" } }, + "node_modules/@clack/core": { + "version": "1.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/@clack/core/-/core-1.0.0-alpha.3.tgz", + "integrity": "sha512-al3c2RSTesNLPVyEi4qJMmQigCbxKPRl35nxbbRLJLoYEE3JuHlZIi7oXchZ/LVegGSlsQUzPqNH5vrHpoKDxg==", + "dev": true, + "license": "MIT", + "dependencies": { + "picocolors": "^1.0.0", + "sisteransi": "^1.0.5" + } + }, + "node_modules/@clack/prompts": { + "version": "1.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-1.0.0-alpha.3.tgz", + "integrity": "sha512-t0nEprDU45jP9Ipp+kEXml9FZ49Xr3BpUUJ0rqrSVguOPrfh4AOBpj8Swx29pZjs8t1tVTvFSyMTvVdQzbmqng==", + "dev": true, + "license": "MIT", + "dependencies": { + "@clack/core": "1.0.0-alpha.3", + "picocolors": "^1.0.0", + "sisteransi": "^1.0.5" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -58,6 +100,82 @@ "node": ">= 8" } }, + "node_modules/@sec-ant/readable-stream": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@sec-ant/readable-stream/-/readable-stream-0.4.1.tgz", + "integrity": "sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@sindresorhus/merge-streams": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz", + "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@sugarcube-org/cli": { + "version": "0.0.0-alpha.37", + "resolved": "https://registry.npmjs.org/@sugarcube-org/cli/-/cli-0.0.0-alpha.37.tgz", + "integrity": "sha512-GiDSh4GcBbB2YWqEu2NFCAUbcHFvI545aUIkDa1SQCctuNgbdpk2l7pJxX75OP5jGMfeYngmBnMAWi3o4PfPKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@antfu/ni": "23.3.0", + "@clack/core": "1.0.0-alpha.3", + "@clack/prompts": "1.0.0-alpha.3", + "@sugarcube-org/core": "0.1.0-alpha.21", + "@unocss/core": "66.5.2", + "commander": "12.1.0", + "execa": "9.5.2", + "fast-wrap-ansi": "0.1.3", + "get-tsconfig": "4.7.2", + "is-unicode-supported": "2.1.0", + "log-update": "6.1.0", + "pathe": "2.0.3", + "picocolors": "1.1.1", + "tinyglobby": "^0.2.9", + "zod": "^3.23.8" + }, + "bin": { + "make-sugarcube": "dist/index.mjs" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@sugarcube-org/cli/node_modules/commander": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", + "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@sugarcube-org/core": { + "version": "0.1.0-alpha.21", + "resolved": "https://registry.npmjs.org/@sugarcube-org/core/-/core-0.1.0-alpha.21.tgz", + "integrity": "sha512-mFW+22bbxibWBJKHWt/wsa3v6T5DWUHa1C0h/KAFE/zLVC6kHGznMqPl3Scw4pp8ifSM3MgtdX/kELaInAPDHQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "jiti": "2.4.2", + "pathe": "2.0.3", + "tinyglobby": "^0.2.9", + "zod": "^3.23.8" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -66,6 +184,45 @@ "node": ">=10.13.0" } }, + "node_modules/@unocss/core": { + "version": "66.5.2", + "resolved": "https://registry.npmjs.org/@unocss/core/-/core-66.5.2.tgz", + "integrity": "sha512-POSEpwj2FJtrDgzSq6nVhAJbnGIYPqtEMTpzQXfeFqPDMidAXjaH/xZUeTdHDbI9Jg700smrRXJtFJrJFXkmiQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/ansi-escapes": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz", + "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==", + "dev": true, + "license": "MIT", + "dependencies": { + "environment": "^1.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-regex": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, "node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -240,6 +397,22 @@ "node": ">= 10.0" } }, + "node_modules/cli-cursor": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz", + "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==", + "dev": true, + "license": "MIT", + "dependencies": { + "restore-cursor": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -361,6 +534,21 @@ "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" } }, + "node_modules/cross-spawn": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/css-declaration-sorter": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.1.1.tgz", @@ -613,6 +801,13 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.647.tgz", "integrity": "sha512-Z/fTNGwc45WrYQhPaEcz5tAJuZZ8G7S/DBnhS6Kgp4BxnS40Z/HqlJ0hHg3Z79IGVzuVartIlTcjw/cQbPLgOw==" }, + "node_modules/emoji-regex": { + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz", + "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==", + "dev": true, + "license": "MIT" + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -624,6 +819,19 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/environment": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz", + "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -632,6 +840,33 @@ "node": ">=6" } }, + "node_modules/execa": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/execa/-/execa-9.5.2.tgz", + "integrity": "sha512-EHlpxMCpHWSAh1dgS6bVeoLAXGnJNdR93aabr4QCGbzOM73o5XmRfM/e5FUqsw3aagP8S8XEWUWFAxnRBnAF0Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@sindresorhus/merge-streams": "^4.0.0", + "cross-spawn": "^7.0.3", + "figures": "^6.1.0", + "get-stream": "^9.0.0", + "human-signals": "^8.0.0", + "is-plain-obj": "^4.1.0", + "is-stream": "^4.0.1", + "npm-run-path": "^6.0.0", + "pretty-ms": "^9.0.0", + "signal-exit": "^4.1.0", + "strip-final-newline": "^4.0.0", + "yoctocolors": "^2.0.0" + }, + "engines": { + "node": "^18.19.0 || >=20.5.0" + }, + "funding": { + "url": "https://github.com/sindresorhus/execa?sponsor=1" + } + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -652,6 +887,33 @@ "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.0.tgz", "integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==" }, + "node_modules/fast-string-truncated-width": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-1.2.1.tgz", + "integrity": "sha512-Q9acT/+Uu3GwGj+5w/zsGuQjh9O1TyywhIwAxHudtWrgF09nHOPrvTLhQevPbttcxjr/SNN7mJmfOw/B1bXgow==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-string-width": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fast-string-width/-/fast-string-width-1.1.0.tgz", + "integrity": "sha512-O3fwIVIH5gKB38QNbdg+3760ZmGz0SZMgvwJbA1b2TGXceKE6A2cOlfogh1iw8lr049zPyd7YADHy+B7U4W9bQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-string-truncated-width": "^1.2.0" + } + }, + "node_modules/fast-wrap-ansi": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.1.3.tgz", + "integrity": "sha512-iLg8mLuZBztzm8jmY6/xjr+ci4WYo6eYgHAioTA1ElxkE1BJ9J4tPuDlnHaLfljkRZ2vYfP0CDIpCHBBag4InA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-string-width": "^1.1.0" + } + }, "node_modules/fastq": { "version": "1.16.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz", @@ -660,6 +922,22 @@ "reusify": "^1.0.4" } }, + "node_modules/figures": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz", + "integrity": "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-unicode-supported": "^2.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -713,6 +991,19 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/get-east-asian-width": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz", + "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/get-stdin": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz", @@ -724,6 +1015,36 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/get-stream": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz", + "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@sec-ant/readable-stream": "^0.4.1", + "is-stream": "^4.0.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/get-tsconfig": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.2.tgz", + "integrity": "sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==", + "dev": true, + "license": "MIT", + "dependencies": { + "resolve-pkg-maps": "^1.0.0" + }, + "funding": { + "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" + } + }, "node_modules/glob-parent": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", @@ -788,6 +1109,16 @@ "node": ">= 0.4" } }, + "node_modules/human-signals": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.1.tgz", + "integrity": "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18.0" + } + }, "node_modules/ignore": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz", @@ -853,6 +1184,62 @@ "node": ">=0.12.0" } }, + "node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-stream": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz", + "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-unicode-supported": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz", + "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true, + "license": "ISC" + }, + "node_modules/jiti": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz", + "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -887,6 +1274,26 @@ "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==" }, + "node_modules/log-update": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz", + "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-escapes": "^7.0.0", + "cli-cursor": "^5.0.0", + "slice-ansi": "^7.1.0", + "strip-ansi": "^7.1.0", + "wrap-ansi": "^9.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", @@ -912,6 +1319,19 @@ "node": ">=8.6" } }, + "node_modules/mimic-function": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz", + "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -942,6 +1362,36 @@ "node": ">=0.10.0" } }, + "node_modules/npm-run-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz", + "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^4.0.0", + "unicorn-magic": "^0.3.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/npm-run-path/node_modules/path-key": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz", + "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/nth-check": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", @@ -953,6 +1403,45 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/onetime": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz", + "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "mimic-function": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parse-ms": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz", + "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -966,10 +1455,18 @@ "node": ">=8" } }, + "node_modules/pathe": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", + "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", + "dev": true, + "license": "MIT" + }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "license": "ISC" }, "node_modules/picomatch": { "version": "2.3.1", @@ -1538,6 +2035,22 @@ "node": ">= 0.8" } }, + "node_modules/pretty-ms": { + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.3.0.tgz", + "integrity": "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "parse-ms": "^4.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -1605,6 +2118,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/resolve-pkg-maps": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz", + "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" + } + }, + "node_modules/restore-cursor": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz", + "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==", + "dev": true, + "license": "MIT", + "dependencies": { + "onetime": "^7.0.0", + "signal-exit": "^4.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/reusify": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", @@ -1644,6 +2184,29 @@ "tslib": "^2.1.0" } }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/shell-quote": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", @@ -1652,6 +2215,26 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/sisteransi": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", + "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", + "dev": true, + "license": "MIT" + }, "node_modules/slash": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", @@ -1663,6 +2246,52 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/slice-ansi": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz", + "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "is-fullwidth-code-point": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/ansi-styles": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", + "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz", + "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "get-east-asian-width": "^1.3.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -1684,6 +2313,53 @@ "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz", "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==" }, + "node_modules/string-width": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz", + "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/strip-ansi": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", + "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/strip-final-newline": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz", + "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/stylehacks": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.2.tgz", @@ -1753,6 +2429,54 @@ "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz", "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==" }, + "node_modules/tinyglobby": { + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -1777,6 +2501,19 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/unicorn-magic": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz", + "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/universalify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", @@ -1819,6 +2556,53 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/wrap-ansi": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz", + "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "string-width": "^7.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi/node_modules/ansi-styles": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", + "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", @@ -1896,6 +2680,29 @@ "engines": { "node": ">=8" } + }, + "node_modules/yoctocolors": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz", + "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/zod": { + "version": "3.25.76", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", + "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } } } diff --git a/package.json b/package.json index 0f9e32c..e6770ea 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "type": "module", "scripts": { - "tokens": "npx make-sugarcube generate", + "tokens": "make-sugarcube generate", "css": "npx postcss src/css/*.css --dir dist/css", "clean": "rm -r -f dist && mkdir dist", "start": "npm run clean && npm run tokens && cp src/index.html dist/index.html && concurrently 'npx serve dist' 'npm run css -- --watch'", - "validate:tokens": "npx make-sugarcube validate" + "validate:tokens": "make-sugarcube validate" }, "keywords": [], "author": "", @@ -18,5 +18,8 @@ "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", "postcss-import-ext-glob": "^2.1.1" + }, + "devDependencies": { + "@sugarcube-org/cli": "^0.0.0-alpha.37" } } diff --git a/sugarcube.config.js b/sugarcube.config.js index 41f6030..42f63e1 100644 --- a/sugarcube.config.js +++ b/sugarcube.config.js @@ -1,8 +1,9 @@ -// Configuration reference: https://sugarcube.sh/docs/reference/configuration-schema -const config = { - resolver: 'src/design-tokens/tokens.resolver.json', +// @ts-check +import { defineConfig } from '@sugarcube-org/cli'; + +export default defineConfig({ output: { - css: './src/css' + cssRoot: './src/css', }, transforms: { fluid: { @@ -65,6 +66,4 @@ const config = { prefix: 'gutter' } } -}; - -export default config; +}); From 15d8b0cf280e84f79a9467588ea737f4766bbca3 Mon Sep 17 00:00:00 2001 From: Mark Tomlinson Date: Wed, 18 Feb 2026 17:09:11 +1100 Subject: [PATCH 4/7] chore: update sugarcube CLI package and commands --- package-lock.json | 24 ++++++++++++------------ package.json | 6 +++--- sugarcube.config.js | 2 +- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 251b66c..04050e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "postcss-import-ext-glob": "^2.1.1" }, "devDependencies": { - "@sugarcube-org/cli": "^0.0.0-alpha.37" + "@sugarcube-sh/cli": "^0.0.2" } }, "node_modules/@antfu/ni": { @@ -120,17 +120,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@sugarcube-org/cli": { - "version": "0.0.0-alpha.37", - "resolved": "https://registry.npmjs.org/@sugarcube-org/cli/-/cli-0.0.0-alpha.37.tgz", - "integrity": "sha512-GiDSh4GcBbB2YWqEu2NFCAUbcHFvI545aUIkDa1SQCctuNgbdpk2l7pJxX75OP5jGMfeYngmBnMAWi3o4PfPKw==", + "node_modules/@sugarcube-sh/cli": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@sugarcube-sh/cli/-/cli-0.0.2.tgz", + "integrity": "sha512-FfwTfeJbXB3N9799F5CvrrPeAT12sNbtryvIjnj879Jggvjj8+eVCqstdqHo08JBlSl0fUPI46Qn7Th50esQCA==", "dev": true, "license": "MIT", "dependencies": { "@antfu/ni": "23.3.0", "@clack/core": "1.0.0-alpha.3", "@clack/prompts": "1.0.0-alpha.3", - "@sugarcube-org/core": "0.1.0-alpha.21", + "@sugarcube-sh/core": "0.0.2", "@unocss/core": "66.5.2", "commander": "12.1.0", "execa": "9.5.2", @@ -144,13 +144,13 @@ "zod": "^3.23.8" }, "bin": { - "make-sugarcube": "dist/index.mjs" + "sugarcube": "dist/index.mjs" }, "engines": { "node": ">=18.0.0" } }, - "node_modules/@sugarcube-org/cli/node_modules/commander": { + "node_modules/@sugarcube-sh/cli/node_modules/commander": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", @@ -160,10 +160,10 @@ "node": ">=18" } }, - "node_modules/@sugarcube-org/core": { - "version": "0.1.0-alpha.21", - "resolved": "https://registry.npmjs.org/@sugarcube-org/core/-/core-0.1.0-alpha.21.tgz", - "integrity": "sha512-mFW+22bbxibWBJKHWt/wsa3v6T5DWUHa1C0h/KAFE/zLVC6kHGznMqPl3Scw4pp8ifSM3MgtdX/kELaInAPDHQ==", + "node_modules/@sugarcube-sh/core": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@sugarcube-sh/core/-/core-0.0.2.tgz", + "integrity": "sha512-0S/SO8XmnXgd2RX88ye4yt/rjbxy1nHw90O1CAzd+nuenVD+BQgsaFFQ834USJkhQYQ6OwpbFr56sMoZXrFp3g==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index e6770ea..e43fd74 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "type": "module", "scripts": { - "tokens": "make-sugarcube generate", + "tokens": "sugarcube generate", "css": "npx postcss src/css/*.css --dir dist/css", "clean": "rm -r -f dist && mkdir dist", "start": "npm run clean && npm run tokens && cp src/index.html dist/index.html && concurrently 'npx serve dist' 'npm run css -- --watch'", - "validate:tokens": "make-sugarcube validate" + "validate:tokens": "sugarcube validate" }, "keywords": [], "author": "", @@ -20,6 +20,6 @@ "postcss-import-ext-glob": "^2.1.1" }, "devDependencies": { - "@sugarcube-org/cli": "^0.0.0-alpha.37" + "@sugarcube-sh/cli": "^0.0.2" } } diff --git a/sugarcube.config.js b/sugarcube.config.js index 42f63e1..1f73122 100644 --- a/sugarcube.config.js +++ b/sugarcube.config.js @@ -1,5 +1,5 @@ // @ts-check -import { defineConfig } from '@sugarcube-org/cli'; +import { defineConfig } from '@sugarcube-sh/cli'; export default defineConfig({ output: { From 2889bd4093120f51799b2a3cb521d7739c1caca4 Mon Sep 17 00:00:00 2001 From: Mark Tomlinson Date: Fri, 27 Feb 2026 17:36:38 +1100 Subject: [PATCH 5/7] chore: update sc to v4 and implement watch mode --- package-lock.json | 81 ++++++++++++++++++++++++++++++++--------------- package.json | 6 ++-- 2 files changed, 59 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 04050e8..29508e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "postcss-import-ext-glob": "^2.1.1" }, "devDependencies": { - "@sugarcube-sh/cli": "^0.0.2" + "@sugarcube-sh/cli": "^0.0.4" } }, "node_modules/@antfu/ni": { @@ -121,24 +121,25 @@ } }, "node_modules/@sugarcube-sh/cli": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@sugarcube-sh/cli/-/cli-0.0.2.tgz", - "integrity": "sha512-FfwTfeJbXB3N9799F5CvrrPeAT12sNbtryvIjnj879Jggvjj8+eVCqstdqHo08JBlSl0fUPI46Qn7Th50esQCA==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@sugarcube-sh/cli/-/cli-0.0.4.tgz", + "integrity": "sha512-M2KrlsegjFVVhUlnQquwulgf9ii6cD0xNUZwdrnMr2X1HDC0XkR2bqtb5WaNKoQknhIjWinFd15PwSpuf0PS0Q==", "dev": true, "license": "MIT", "dependencies": { "@antfu/ni": "23.3.0", "@clack/core": "1.0.0-alpha.3", "@clack/prompts": "1.0.0-alpha.3", - "@sugarcube-sh/core": "0.0.2", - "@unocss/core": "66.5.2", + "@sugarcube-sh/core": "0.0.4", + "@unocss/core": "^66.5.2", + "chokidar": "^4.0.3", "commander": "12.1.0", "execa": "9.5.2", "fast-wrap-ansi": "0.1.3", "get-tsconfig": "4.7.2", "is-unicode-supported": "2.1.0", "log-update": "6.1.0", - "pathe": "2.0.3", + "pathe": "^2.0.3", "picocolors": "1.1.1", "tinyglobby": "^0.2.9", "zod": "^3.23.8" @@ -150,6 +151,22 @@ "node": ">=18.0.0" } }, + "node_modules/@sugarcube-sh/cli/node_modules/chokidar": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", + "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@sugarcube-sh/cli/node_modules/commander": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", @@ -160,15 +177,29 @@ "node": ">=18" } }, + "node_modules/@sugarcube-sh/cli/node_modules/readdirp": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", + "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14.18.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@sugarcube-sh/core": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@sugarcube-sh/core/-/core-0.0.2.tgz", - "integrity": "sha512-0S/SO8XmnXgd2RX88ye4yt/rjbxy1nHw90O1CAzd+nuenVD+BQgsaFFQ834USJkhQYQ6OwpbFr56sMoZXrFp3g==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@sugarcube-sh/core/-/core-0.0.4.tgz", + "integrity": "sha512-sY7i85Wmb0hd6zopsKOFdSTPgLb34p/M6qbbBHCVdm8UlT3ZX39NtREpcUn4HX6Vt7zSCf3V7dGSl8QGi9R4QA==", "dev": true, "license": "MIT", "dependencies": { - "jiti": "2.4.2", - "pathe": "2.0.3", + "jiti": "^2.6.1", + "pathe": "^2.0.3", "tinyglobby": "^0.2.9", "zod": "^3.23.8" }, @@ -185,9 +216,9 @@ } }, "node_modules/@unocss/core": { - "version": "66.5.2", - "resolved": "https://registry.npmjs.org/@unocss/core/-/core-66.5.2.tgz", - "integrity": "sha512-POSEpwj2FJtrDgzSq6nVhAJbnGIYPqtEMTpzQXfeFqPDMidAXjaH/xZUeTdHDbI9Jg700smrRXJtFJrJFXkmiQ==", + "version": "66.6.2", + "resolved": "https://registry.npmjs.org/@unocss/core/-/core-66.6.2.tgz", + "integrity": "sha512-IOvN1BLRP0VTjjS5afSxmXhvKRDko2Shisp8spU+A9qiH1tXEFP3phyVevm/SuGwBHO1lC+SJ451/4oFkCAwJA==", "dev": true, "license": "MIT", "funding": { @@ -992,9 +1023,9 @@ } }, "node_modules/get-east-asian-width": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz", - "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz", + "integrity": "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==", "dev": true, "license": "MIT", "engines": { @@ -1231,9 +1262,9 @@ "license": "ISC" }, "node_modules/jiti": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz", - "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", + "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", "dev": true, "license": "MIT", "bin": { @@ -2332,13 +2363,13 @@ } }, "node_modules/strip-ansi": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", - "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz", + "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==", "dev": true, "license": "MIT", "dependencies": { - "ansi-regex": "^6.0.1" + "ansi-regex": "^6.2.2" }, "engines": { "node": ">=12" diff --git a/package.json b/package.json index e43fd74..fff10a5 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "type": "module", "scripts": { - "tokens": "sugarcube generate", + "tokens": "sugarcube generate --watch", "css": "npx postcss src/css/*.css --dir dist/css", "clean": "rm -r -f dist && mkdir dist", - "start": "npm run clean && npm run tokens && cp src/index.html dist/index.html && concurrently 'npx serve dist' 'npm run css -- --watch'", + "start": "npm run clean && cp src/index.html dist/index.html && concurrently \"npm run tokens\" \"npx serve dist\" \"npm run css -- --watch\"", "validate:tokens": "sugarcube validate" }, "keywords": [], @@ -20,6 +20,6 @@ "postcss-import-ext-glob": "^2.1.1" }, "devDependencies": { - "@sugarcube-sh/cli": "^0.0.2" + "@sugarcube-sh/cli": "^0.0.4" } } From a66bb709441f767c3f598ce94b2504bca48554bf Mon Sep 17 00:00:00 2001 From: Mark Tomlinson Date: Fri, 27 Feb 2026 17:39:04 +1100 Subject: [PATCH 6/7] chore: rename token generation script for clarity --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fff10a5..4fe15f4 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "type": "module", "scripts": { - "tokens": "sugarcube generate --watch", + "generate:styles": "sugarcube generate --watch", "css": "npx postcss src/css/*.css --dir dist/css", "clean": "rm -r -f dist && mkdir dist", - "start": "npm run clean && cp src/index.html dist/index.html && concurrently \"npm run tokens\" \"npx serve dist\" \"npm run css -- --watch\"", + "start": "npm run clean && cp src/index.html dist/index.html && concurrently \"npm run generate:styles\" \"npx serve dist\" \"npm run css -- --watch\"", "validate:tokens": "sugarcube validate" }, "keywords": [], From 7e9037058899dde95fa66f0915aba6ee9e7a761e Mon Sep 17 00:00:00 2001 From: Mark Tomlinson Date: Sat, 4 Apr 2026 10:04:46 +1100 Subject: [PATCH 7/7] chore: bump sc to latest --- package-lock.json | 64 ++++---- package.json | 2 +- src/css/global.css | 2 +- src/design-tokens/spacing.json | 265 ++++++++++++++++++++++-------- src/design-tokens/text-sizes.json | 85 +++++++--- sugarcube.config.js | 118 ++++++------- 6 files changed, 356 insertions(+), 180 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29508e1..e3bd250 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "postcss-import-ext-glob": "^2.1.1" }, "devDependencies": { - "@sugarcube-sh/cli": "^0.0.4" + "@sugarcube-sh/cli": "^0.1.6" } }, "node_modules/@antfu/ni": { @@ -46,9 +46,9 @@ } }, "node_modules/@clack/core": { - "version": "1.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/@clack/core/-/core-1.0.0-alpha.3.tgz", - "integrity": "sha512-al3c2RSTesNLPVyEi4qJMmQigCbxKPRl35nxbbRLJLoYEE3JuHlZIi7oXchZ/LVegGSlsQUzPqNH5vrHpoKDxg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@clack/core/-/core-1.0.1.tgz", + "integrity": "sha512-WKeyK3NOBwDOzagPR5H08rFk9D/WuN705yEbuZvKqlkmoLM2woKtXb10OO2k1NoSU4SFG947i2/SCYh+2u5e4g==", "dev": true, "license": "MIT", "dependencies": { @@ -57,13 +57,13 @@ } }, "node_modules/@clack/prompts": { - "version": "1.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-1.0.0-alpha.3.tgz", - "integrity": "sha512-t0nEprDU45jP9Ipp+kEXml9FZ49Xr3BpUUJ0rqrSVguOPrfh4AOBpj8Swx29pZjs8t1tVTvFSyMTvVdQzbmqng==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-1.0.1.tgz", + "integrity": "sha512-/42G73JkuYdyWZ6m8d/CJtBrGl1Hegyc7Fy78m5Ob+jF85TOUmLR5XLce/U3LxYAw0kJ8CT5aI99RIvPHcGp/Q==", "dev": true, "license": "MIT", "dependencies": { - "@clack/core": "1.0.0-alpha.3", + "@clack/core": "1.0.1", "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } @@ -121,21 +121,21 @@ } }, "node_modules/@sugarcube-sh/cli": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@sugarcube-sh/cli/-/cli-0.0.4.tgz", - "integrity": "sha512-M2KrlsegjFVVhUlnQquwulgf9ii6cD0xNUZwdrnMr2X1HDC0XkR2bqtb5WaNKoQknhIjWinFd15PwSpuf0PS0Q==", + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@sugarcube-sh/cli/-/cli-0.1.6.tgz", + "integrity": "sha512-NnnIeUzClLMjsLRf4lEFMnCSW1qSLbnPFkUo2wu+rLET4Ae1475BMipwcUP2Ec1rt+Q4F+6DtQr0QKAupWIHGA==", "dev": true, "license": "MIT", "dependencies": { "@antfu/ni": "23.3.0", - "@clack/core": "1.0.0-alpha.3", - "@clack/prompts": "1.0.0-alpha.3", - "@sugarcube-sh/core": "0.0.4", + "@clack/core": "1.0.1", + "@clack/prompts": "1.0.1", + "@sugarcube-sh/core": "0.2.0", "@unocss/core": "^66.5.2", "chokidar": "^4.0.3", "commander": "12.1.0", "execa": "9.5.2", - "fast-wrap-ansi": "0.1.3", + "fast-wrap-ansi": "0.2.0", "get-tsconfig": "4.7.2", "is-unicode-supported": "2.1.0", "log-update": "6.1.0", @@ -192,9 +192,9 @@ } }, "node_modules/@sugarcube-sh/core": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@sugarcube-sh/core/-/core-0.0.4.tgz", - "integrity": "sha512-sY7i85Wmb0hd6zopsKOFdSTPgLb34p/M6qbbBHCVdm8UlT3ZX39NtREpcUn4HX6Vt7zSCf3V7dGSl8QGi9R4QA==", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@sugarcube-sh/core/-/core-0.2.0.tgz", + "integrity": "sha512-fHWXoRx4oBUIlNmWh1AzY9IgNanfMtH8IxrJmUwc8rVha+NrR06vZvI5i8TbwtJJEkI2TzQWsurvuexX7fy3fA==", "dev": true, "license": "MIT", "dependencies": { @@ -919,30 +919,30 @@ "integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==" }, "node_modules/fast-string-truncated-width": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-1.2.1.tgz", - "integrity": "sha512-Q9acT/+Uu3GwGj+5w/zsGuQjh9O1TyywhIwAxHudtWrgF09nHOPrvTLhQevPbttcxjr/SNN7mJmfOw/B1bXgow==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz", + "integrity": "sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==", "dev": true, "license": "MIT" }, "node_modules/fast-string-width": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fast-string-width/-/fast-string-width-1.1.0.tgz", - "integrity": "sha512-O3fwIVIH5gKB38QNbdg+3760ZmGz0SZMgvwJbA1b2TGXceKE6A2cOlfogh1iw8lr049zPyd7YADHy+B7U4W9bQ==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/fast-string-width/-/fast-string-width-3.0.2.tgz", + "integrity": "sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==", "dev": true, "license": "MIT", "dependencies": { - "fast-string-truncated-width": "^1.2.0" + "fast-string-truncated-width": "^3.0.2" } }, "node_modules/fast-wrap-ansi": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.1.3.tgz", - "integrity": "sha512-iLg8mLuZBztzm8jmY6/xjr+ci4WYo6eYgHAioTA1ElxkE1BJ9J4tPuDlnHaLfljkRZ2vYfP0CDIpCHBBag4InA==", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.0.tgz", + "integrity": "sha512-rLV8JHxTyhVmFYhBJuMujcrHqOT2cnO5Zxj37qROj23CP39GXubJRBUFF0z8KFK77Uc0SukZUf7JZhsVEQ6n8w==", "dev": true, "license": "MIT", "dependencies": { - "fast-string-width": "^1.1.0" + "fast-string-width": "^3.0.2" } }, "node_modules/fastq": { @@ -2496,9 +2496,9 @@ } }, "node_modules/tinyglobby/node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index 4fe15f4..7a3a90e 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,6 @@ "postcss-import-ext-glob": "^2.1.1" }, "devDependencies": { - "@sugarcube-sh/cli": "^0.0.4" + "@sugarcube-sh/cli": "^0.1.6" } } diff --git a/src/css/global.css b/src/css/global.css index d825f01..b135a35 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -1,5 +1,5 @@ /* Generated variable CSS from sugarcube */ -@import 'global/tokens.variables.gen.css'; +@import 'global/variables.gen.css'; @import 'global/reset.css'; @import 'global/fonts.css'; diff --git a/src/design-tokens/spacing.json b/src/design-tokens/spacing.json index c908e6f..c22734e 100644 --- a/src/design-tokens/spacing.json +++ b/src/design-tokens/spacing.json @@ -1,140 +1,271 @@ { "space": { - "$type": "fluidDimension", "$description": "Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.", "$extensions": { "scaleGenerator": "https://utopia.fyi/space/calculator/?c=330,18,1.2,1200,24,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l|s-xl&g=s,l,xl,12" }, "zero": { - "$value": { - "min": {"value": 0, "unit": "rem"}, - "max": {"value": 0.0625, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 0.0625, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0, "unit": "rem" }, + "max": { "value": 0.0625, "unit": "rem" } + } + } } }, "3xs": { - "$value": { - "min": {"value": 0.3125, "unit": "rem"}, - "max": {"value": 0.375, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 0.375, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0.3125, "unit": "rem" }, + "max": { "value": 0.375, "unit": "rem" } + } + } } }, "2xs": { - "$value": { - "min": {"value": 0.5625, "unit": "rem"}, - "max": {"value": 0.75, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 0.75, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0.5625, "unit": "rem" }, + "max": { "value": 0.75, "unit": "rem" } + } + } } }, "xs": { - "$value": { - "min": {"value": 0.875, "unit": "rem"}, - "max": {"value": 1.125, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1.125, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0.875, "unit": "rem" }, + "max": { "value": 1.125, "unit": "rem" } + } + } } }, "s": { - "$value": { - "min": {"value": 1.125, "unit": "rem"}, - "max": {"value": 1.5, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1.5, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.125, "unit": "rem" }, + "max": { "value": 1.5, "unit": "rem" } + } + } } }, "m": { - "$value": { - "min": {"value": 1.6875, "unit": "rem"}, - "max": {"value": 2.25, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 2.25, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.6875, "unit": "rem" }, + "max": { "value": 2.25, "unit": "rem" } + } + } } }, "l": { - "$value": { - "min": {"value": 2.25, "unit": "rem"}, - "max": {"value": 3, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 3, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 2.25, "unit": "rem" }, + "max": { "value": 3, "unit": "rem" } + } + } } }, "xl": { - "$value": { - "min": {"value": 3.375, "unit": "rem"}, - "max": {"value": 4.5, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 4.5, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 3.375, "unit": "rem" }, + "max": { "value": 4.5, "unit": "rem" } + } + } } }, "2xl": { - "$value": { - "min": {"value": 4.5, "unit": "rem"}, - "max": {"value": 6, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 6, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 4.5, "unit": "rem" }, + "max": { "value": 6, "unit": "rem" } + } + } } }, "3xl": { - "$value": { - "min": {"value": 6.75, "unit": "rem"}, - "max": {"value": 9, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 9, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 6.75, "unit": "rem" }, + "max": { "value": 9, "unit": "rem" } + } + } } }, "4xl": { - "$value": { - "min": {"value": 9, "unit": "rem"}, - "max": {"value": 12, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 12, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 9, "unit": "rem" }, + "max": { "value": 12, "unit": "rem" } + } + } } }, "3xs-2xs": { - "$value": { - "min": {"value": 0.3125, "unit": "rem"}, - "max": {"value": 0.75, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 0.75, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0.3125, "unit": "rem" }, + "max": { "value": 0.75, "unit": "rem" } + } + } } }, "2xs-xs": { - "$value": { - "min": {"value": 0.5625, "unit": "rem"}, - "max": {"value": 1.125, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1.125, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0.5625, "unit": "rem" }, + "max": { "value": 1.125, "unit": "rem" } + } + } } }, "xs-s": { - "$value": { - "min": {"value": 0.875, "unit": "rem"}, - "max": {"value": 1.5, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1.5, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0.875, "unit": "rem" }, + "max": { "value": 1.5, "unit": "rem" } + } + } } }, "s-m": { - "$value": { - "min": {"value": 1.125, "unit": "rem"}, - "max": {"value": 2.25, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 2.25, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.125, "unit": "rem" }, + "max": { "value": 2.25, "unit": "rem" } + } + } } }, "m-l": { - "$value": { - "min": {"value": 1.6875, "unit": "rem"}, - "max": {"value": 3, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 3, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.6875, "unit": "rem" }, + "max": { "value": 3, "unit": "rem" } + } + } } }, "l-xl": { - "$value": { - "min": {"value": 2.25, "unit": "rem"}, - "max": {"value": 4.5, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 4.5, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 2.25, "unit": "rem" }, + "max": { "value": 4.5, "unit": "rem" } + } + } } }, "xl-2xl": { - "$value": { - "min": {"value": 3.375, "unit": "rem"}, - "max": {"value": 6, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 6, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 3.375, "unit": "rem" }, + "max": { "value": 6, "unit": "rem" } + } + } } }, "2xl-3xl": { - "$value": { - "min": {"value": 4.5, "unit": "rem"}, - "max": {"value": 9, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 9, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 4.5, "unit": "rem" }, + "max": { "value": 9, "unit": "rem" } + } + } } }, "3xl-4xl": { - "$value": { - "min": {"value": 6.75, "unit": "rem"}, - "max": {"value": 12, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 12, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 6.75, "unit": "rem" }, + "max": { "value": 12, "unit": "rem" } + } + } } }, "s-l": { - "$value": { - "min": {"value": 1.125, "unit": "rem"}, - "max": {"value": 3, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 3, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.125, "unit": "rem" }, + "max": { "value": 3, "unit": "rem" } + } + } } }, "s-xl": { - "$value": { - "min": {"value": 1.125, "unit": "rem"}, - "max": {"value": 4.5, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 4.5, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.125, "unit": "rem" }, + "max": { "value": 4.5, "unit": "rem" } + } + } } } } diff --git a/src/design-tokens/text-sizes.json b/src/design-tokens/text-sizes.json index 1d3658d..5ce40f4 100644 --- a/src/design-tokens/text-sizes.json +++ b/src/design-tokens/text-sizes.json @@ -1,50 +1,91 @@ { "size": { - "$type": "fluidDimension", "$description": "A minimum and maximum text size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropriate sizes, per context. For example, for web, they should be converted to REM units (pixelSize / baseSize).", "$extensions": { "scaleGenerator": "https://utopia.fyi/type/calculator/?c=330,18,1.175,1200,24,1.25,7,1,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12" }, "step-00": { - "$value": { - "min": {"value": 0.9375, "unit": "rem"}, - "max": {"value": 1, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 0.9375, "unit": "rem" }, + "max": { "value": 1, "unit": "rem" } + } + } } }, "step-0": { - "$value": { - "min": {"value": 1.125, "unit": "rem"}, - "max": {"value": 1.25, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1.25, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.125, "unit": "rem" }, + "max": { "value": 1.25, "unit": "rem" } + } + } } }, "step-1": { - "$value": { - "min": {"value": 1.35, "unit": "rem"}, - "max": {"value": 1.5625, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1.5625, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.35, "unit": "rem" }, + "max": { "value": 1.5625, "unit": "rem" } + } + } } }, "step-2": { - "$value": { - "min": {"value": 1.62, "unit": "rem"}, - "max": {"value": 1.953, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 1.953, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.62, "unit": "rem" }, + "max": { "value": 1.953, "unit": "rem" } + } + } } }, "step-3": { - "$value": { - "min": {"value": 1.944, "unit": "rem"}, - "max": {"value": 2.441, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 2.441, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 1.944, "unit": "rem" }, + "max": { "value": 2.441, "unit": "rem" } + } + } } }, "step-4": { - "$value": { - "min": {"value": 2.441, "unit": "rem"}, - "max": {"value": 3.052, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 3.052, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 2.441, "unit": "rem" }, + "max": { "value": 3.052, "unit": "rem" } + } + } } }, "step-5": { - "$value": { - "min": {"value": 2.799, "unit": "rem"}, - "max": {"value": 3.815, "unit": "rem"} + "$type": "dimension", + "$value": { "value": 3.815, "unit": "rem" }, + "$extensions": { + "sh.sugarcube": { + "fluid": { + "min": { "value": 2.799, "unit": "rem" }, + "max": { "value": 3.815, "unit": "rem" } + } + } } } } diff --git a/sugarcube.config.js b/sugarcube.config.js index 1f73122..527ce40 100644 --- a/sugarcube.config.js +++ b/sugarcube.config.js @@ -2,68 +2,72 @@ import { defineConfig } from '@sugarcube-sh/cli'; export default defineConfig({ - output: { - cssRoot: './src/css', - }, - transforms: { - fluid: { - min: 330, - max: 1230 - } + variables: { + path: './src/css/global/variables.gen.css', + transforms: { + fluid: { + min: 330, + max: 1230 + } + }, }, utilities: { - // Colors - 'color': { - source: 'color.*', - prefix: 'text' - }, - 'background-color': { - source: 'color.*', - prefix: 'bg' - }, + path: './src/css/utilities/utilities.gen.css', + classes: { + // Colors + 'color': { + source: 'color.*', + prefix: 'text' + }, + 'background-color': { + source: 'color.*', + prefix: 'bg' + }, - // Spacing with directional variants - 'margin': { - source: 'space.*', - prefix: 'm', - directions: ['all'] - }, - 'padding': { - source: 'space.*', - prefix: 'p', - directions: ['all'] - }, + // Spacing with directional variants + 'margin': { + source: 'space.*', + prefix: 'm', + directions: ['all'] + }, + 'padding': { + source: 'space.*', + prefix: 'p', + directions: ['all'] + }, - // Typography - 'font-size': { - source: 'size.*', - prefix: 'text' - }, - 'line-height': { - source: 'leading.*', - prefix: 'leading' - }, - 'font-family': { - source: 'font.*', - prefix: 'font' - }, - 'font-weight': { - source: 'font.weight.*', - prefix: 'font' - }, + // Typography + 'font-size': { + source: 'size.*', + prefix: 'text' + }, + 'line-height': { + source: 'leading.*', + prefix: 'leading' + }, + 'font-family': { + source: 'font.*', + prefix: 'font' + }, + 'font-weight': { + source: 'font.weight.*', + prefix: 'font' + }, + + // CUBE CSS custom property utilities + '--flow-space': { + source: 'space.*', + prefix: 'flow-space' + }, + '--region-space': { + source: 'space.*', + prefix: 'region-space' + }, + '--gutter': { + source: 'space.*', + prefix: 'gutter' + } - // CUBE CSS custom property utilities - '--flow-space': { - source: 'space.*', - prefix: 'flow-space' - }, - '--region-space': { - source: 'space.*', - prefix: 'region-space' - }, - '--gutter': { - source: 'space.*', - prefix: 'gutter' } } });