diff --git a/components/atom/helpText/src/index.scss b/components/atom/helpText/src/index.scss index 685b3fa68..81b21b544 100644 --- a/components/atom/helpText/src/index.scss +++ b/components/atom/helpText/src/index.scss @@ -1,4 +1,3 @@ -@import '~@s-ui/theme/lib/settings'; @import '~@s-ui/theme/lib/index'; @import './styles/settings.scss'; diff --git a/components/atom/validationText/src/index.scss b/components/atom/validationText/src/index.scss index 685b3fa68..81b21b544 100644 --- a/components/atom/validationText/src/index.scss +++ b/components/atom/validationText/src/index.scss @@ -1,4 +1,3 @@ -@import '~@s-ui/theme/lib/settings'; @import '~@s-ui/theme/lib/index'; @import './styles/settings.scss'; diff --git a/package-lock.json b/package-lock.json index 5e6b23670..ef391f1bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3684,6 +3684,171 @@ "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", "dev": true }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz", + "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz", + "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz", + "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz", + "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz", + "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz", + "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz", + "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz", + "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz", + "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz", + "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz", + "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@esbuild/linux-loong64": { "version": "0.15.5", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.5.tgz", @@ -3700,6 +3865,186 @@ "node": ">=12" } }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz", + "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==", + "cpu": [ + "mips64el" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz", + "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz", + "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==", + "cpu": [ + "riscv64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz", + "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==", + "cpu": [ + "s390x" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz", + "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz", + "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz", + "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz", + "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz", + "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz", + "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz", + "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz", + "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -5583,6 +5928,10 @@ "resolved": "utils/sui-theme", "link": true }, + "node_modules/@s-ui/tokens": { + "resolved": "utils/sui-tokens", + "link": true + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -5991,6 +6340,11 @@ "@types/chai": "*" } }, + "node_modules/@types/chroma-js": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.5.tgz", + "integrity": "sha512-6ISjhzJViaPCy2q2e6PgK+8HcHQDQ0V2LDiKmYAh+jJlLqDa6HbwDh0wOevHY0kHHUx0iZwjSRbVD47WOUx5EQ==" + }, "node_modules/@types/classnames": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.5.tgz", @@ -6920,7 +7274,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -7980,7 +8333,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -7992,6 +8344,11 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/change-case": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz", + "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==" + }, "node_modules/check-error": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz", @@ -8028,6 +8385,11 @@ "fsevents": "~2.3.2" } }, + "node_modules/chroma-js": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz", + "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==" + }, "node_modules/chrome-trace-event": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", @@ -8185,7 +8547,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -8196,8 +8557,7 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/color-string": { "version": "1.9.1", @@ -9203,6 +9563,14 @@ "node": ">=0.10.0" } }, + "node_modules/deepmerge-ts": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-4.3.0.tgz", + "integrity": "sha512-if3ZYdkD2dClhnXR5reKtG98cwyaRT1NeugQoAPTTfsOpV9kqyeiBF9Qa5RHjemb3KzD5ulqygv6ED3t5j9eJw==", + "engines": { + "node": ">=12.4.0" + } + }, "node_modules/default-browser": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz", @@ -11877,7 +12245,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -12051,6 +12418,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-tsconfig": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz", + "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==", + "dependencies": { + "resolve-pkg-maps": "^1.0.0" + }, + "funding": { + "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" + } + }, "node_modules/git-raw-commits": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz", @@ -12392,7 +12770,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, "engines": { "node": ">=8" } @@ -18182,6 +18559,14 @@ "node": ">=8" } }, + "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==", + "funding": { + "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" + } + }, "node_modules/retry": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", @@ -19994,7 +20379,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -20656,6 +21040,77 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true }, + "node_modules/tsx": { + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz", + "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==", + "dependencies": { + "esbuild": "~0.23.0", + "get-tsconfig": "^4.7.5" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-loong64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz", + "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==", + "cpu": [ + "loong64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/esbuild": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", + "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.23.1", + "@esbuild/android-arm": "0.23.1", + "@esbuild/android-arm64": "0.23.1", + "@esbuild/android-x64": "0.23.1", + "@esbuild/darwin-arm64": "0.23.1", + "@esbuild/darwin-x64": "0.23.1", + "@esbuild/freebsd-arm64": "0.23.1", + "@esbuild/freebsd-x64": "0.23.1", + "@esbuild/linux-arm": "0.23.1", + "@esbuild/linux-arm64": "0.23.1", + "@esbuild/linux-ia32": "0.23.1", + "@esbuild/linux-loong64": "0.23.1", + "@esbuild/linux-mips64el": "0.23.1", + "@esbuild/linux-ppc64": "0.23.1", + "@esbuild/linux-riscv64": "0.23.1", + "@esbuild/linux-s390x": "0.23.1", + "@esbuild/linux-x64": "0.23.1", + "@esbuild/netbsd-x64": "0.23.1", + "@esbuild/openbsd-arm64": "0.23.1", + "@esbuild/openbsd-x64": "0.23.1", + "@esbuild/sunos-x64": "0.23.1", + "@esbuild/win32-arm64": "0.23.1", + "@esbuild/win32-ia32": "0.23.1", + "@esbuild/win32-x64": "0.23.1" + } + }, "node_modules/tty-browserify": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz", @@ -21904,6 +22359,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, "utils/sui-component-dependencies": { "name": "@s-ui/component-dependencies", "version": "1.9.0", @@ -21915,8 +22378,43 @@ }, "utils/sui-theme": { "name": "@s-ui/theme", - "version": "8.127.0", + "version": "8.128.0", "license": "MIT" + }, + "utils/sui-tokens": { + "name": "@s-ui/tokens", + "version": "0.0.1", + "license": "MIT", + "dependencies": { + "@types/chroma-js": "2.4.5", + "chalk": "4.1.2", + "change-case": "5.4.4", + "chroma-js": "2.6.0", + "commander": "8.3.0", + "deepmerge-ts": "^4.0.0", + "tsx": "4.19.2", + "typescript": "4.9.5", + "zod": "3.23.8" + }, + "bin": { + "tokens": "bin/tokens.mjs", + "tokens-scss": "bin/tokens-scss.mjs" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "utils/sui-tokens/node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } } } } diff --git a/utils/sui-tokens/.gitignore b/utils/sui-tokens/.gitignore new file mode 100644 index 000000000..a9f4ed545 --- /dev/null +++ b/utils/sui-tokens/.gitignore @@ -0,0 +1,2 @@ +lib +node_modules \ No newline at end of file diff --git a/utils/sui-tokens/.npmignore b/utils/sui-tokens/.npmignore new file mode 100644 index 000000000..9c0df20f8 --- /dev/null +++ b/utils/sui-tokens/.npmignore @@ -0,0 +1,6 @@ +assets +demo + +test +node_modules +CHANGELOG.md diff --git a/utils/sui-tokens/CHANGELOG.md b/utils/sui-tokens/CHANGELOG.md new file mode 100644 index 000000000..505d21df1 --- /dev/null +++ b/utils/sui-tokens/CHANGELOG.md @@ -0,0 +1 @@ +# CHANGELOG \ No newline at end of file diff --git a/utils/sui-tokens/LICENSE.md b/utils/sui-tokens/LICENSE.md new file mode 100644 index 000000000..f4155c1a2 --- /dev/null +++ b/utils/sui-tokens/LICENSE.md @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 SUI + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/utils/sui-tokens/README.md b/utils/sui-tokens/README.md new file mode 100644 index 000000000..b1fe378f0 --- /dev/null +++ b/utils/sui-tokens/README.md @@ -0,0 +1,47 @@ +# sui-tokens +> A set of dependencies of all SUI components. + +It provides: +* Unified dependencies versions across components +* Minified boilerplate + +## Installation + +```sh +$ npm install @s-ui/tokens --save-dev +``` + +## Usage + +To see the resulting configuration, you can run the following command: +```sh +$ tokens -c +``` + +To export the result on json format you can use the JSON script + +```sh +$ tokens json -c -o +``` + +To export the result on SCSS format you can use the scss script + +```sh +$ tokens scss -c -o +``` + +To see other configurations you can use the -h flag + +```sh +$ tokens -h +``` + +...or use it on each script + +```sh +$ tokens json -h +``` + +```shell +$ tokens scss -h +``` diff --git a/utils/sui-tokens/bin/tokens-json.mjs b/utils/sui-tokens/bin/tokens-json.mjs new file mode 100755 index 000000000..165f632a4 --- /dev/null +++ b/utils/sui-tokens/bin/tokens-json.mjs @@ -0,0 +1,16 @@ +#!/usr/bin/env node --import tsx + +import {Command} from 'commander' + +import {runJSON} from '../src/build.ts' + +const program = new Command() + +program + .description('building scss tokens file') + .option('-c, --configuration ', 'configuration file route') + .option('-o, --output ', 'output file route') + .option('-p, --primitive', 'include primitives in the output', false) + .action(runJSON) + +program.parse(process.argv) diff --git a/utils/sui-tokens/bin/tokens-scss.mjs b/utils/sui-tokens/bin/tokens-scss.mjs new file mode 100755 index 000000000..06d71e3bb --- /dev/null +++ b/utils/sui-tokens/bin/tokens-scss.mjs @@ -0,0 +1,18 @@ +#!/usr/bin/env node --import tsx + +import {Command} from 'commander' + +import {runSCSS} from '../src/build.ts' + +const program = new Command() + +program + .description('building scss tokens file') + .option('-c, --configuration ', 'configuration file route') + .option('-o, --output ', 'output file route') + .option('-s, --selector ', 'css selector of tokens container', ':root') + .option('-m, --mode ', 'color schemes of the config') + .option('-p, --primitives', 'include primitives in the output', false) + .action(runSCSS) + +program.parse(process.argv) diff --git a/utils/sui-tokens/bin/tokens.mjs b/utils/sui-tokens/bin/tokens.mjs new file mode 100755 index 000000000..a3eae561f --- /dev/null +++ b/utils/sui-tokens/bin/tokens.mjs @@ -0,0 +1,14 @@ +#!/usr/bin/env node --import tsx + +import {program} from 'commander' +import {createRequire} from 'node:module' +const require = createRequire(import.meta.url) + +const {version} = require('../package.json') + +program.version(version, '--version, -v') + +program.command('scss', 'Generate scss theming variables') +program.command('json', 'Generate json theming variables') + +program.parse(process.argv) diff --git a/utils/sui-tokens/fotocasa.tokens.config.ts b/utils/sui-tokens/fotocasa.tokens.config.ts new file mode 100644 index 000000000..0896bdd70 --- /dev/null +++ b/utils/sui-tokens/fotocasa.tokens.config.ts @@ -0,0 +1,339 @@ +import chroma from 'chroma-js' + +import {type PrimitiveTheme, type Theme} from './src/types' + +const theme: Theme = { + settings: { + fontSize: '16px', + colorSpace: 'rgb' + }, + primitive: { + color: { + blue: { + 50: '#F4F4FB', + 100: '#EAEBF7', + 200: '#CBCDEB', + 300: '#979CD8', + 400: '#636BC5', + 500: '#303AB2', + 600: '#262E8E', + 700: '#1F2573', + 800: '#151A50', + 900: '#0C0E2C' + }, + greenWashed: { + 50: '#F3FDFC', + 100: '#E8FBFA', + 200: '#C6F5F2', + 300: '#8EEDE7', + 400: '#56E4DB', + 500: '#1EDBCF', + 600: '#18AFA5', + 700: '#12847D', + 800: '#0D625D', + 900: '#073633' + }, + magenta: { + 50: '#FDF3F6', + 100: '#FCE8EE', + 200: '#F7C4D5', + 300: '#F18AAD', + 400: '#EA5084', + 500: '#E3165B', + 600: '#B51148', + 700: '#930E3B', + 800: '#660929', + 900: '#380516' + }, + green: { + 50: '#F2FAF5', + 100: '#E5F5EB', + 200: '#BFE8D0', + 300: '#80D2A1', + 400: '#40BB72', + 500: '#00A544', + 600: '#008436', + 700: '#006B2C', + 800: '#004A1E', + 900: '#002810' + }, + red: { + 50: '#FBF4F3', + 100: '#FCEBE8', + 200: '#F7CCC4', + 300: '#F09A8A', + 400: '#E9674F', + 500: '#E23515', + 600: '#B42A10', + 700: '#93220D', + 800: '#651709', + 900: '#380D05' + }, + orange: { + 50: '#FEF9F2', + 100: '#FEF4E6', + 200: '#FCE4BF', + 300: '#FBCA80', + 400: '#F9AF40', + 500: '#F79500', + 600: '#C57700', + 700: '#A06000', + 800: '#6F4300', + 900: '#3D2500' + }, + gray: { + 50: '#F8F8F8', + 100: '#F1F1F1', + 200: '#DCDCDC', + 300: '#BBBBBB', + 400: '#999999', + 500: '#777777', + 600: '#5F5F5F', + 700: '#4D4D4D', + 800: '#353535', + 900: '#1D1D1D' + }, + social: { + facebook: '#4267B2', + whatsapp: '#25D366', + youtube: '#FF0000', + tiktok: '#000000', + telegram: '#0088cc', + x: '#14171A', + instagram: '#E1306C' + }, + extra: { + accent: '#E3165B', + opportunity: '#FE4F51', + greenVibrant: '#8BC34A', + blueVibrant: '#AAAAFA', + greenWashedVibrant: '#6DFFFF' + }, + base: { + bright: '#FFFFFF', + gloom: '#000000' + } + }, + opacity: { + full: 1, + dim1: 0.82, + dim2: 0.55, + dim3: 0.37, + dim4: 0.28, + dim5: 0.18, + none: 0 + } + }, + semantic: ({color, opacity}: PrimitiveTheme) => ({ + color: { + brand: { + main: color?.blue[500], + mainHovered: color?.hero[400], + mainPressed: color?.hero[400], + mainFocused: color?.hero[400], + mainDisabled: chroma(color?.hero[500] as string) + .alpha(opacity?.dim5 as number) + .css(), + onMain: color?.base.bright, + + mainContainer: color?.hero[100], + mainContainerHovered: color?.hero[50], + mainContainerFocused: color?.hero[50], + mainContainerPressed: color?.hero[50], + mainContainerDisabled: chroma(color?.hero[100] as string) + .alpha(opacity?.dim5 as number) + .css(), + onMainContainer: color?.hero[700], + + mainVariant: color?.hero[700], + mainVariantHovered: color?.hero[600], + mainVariantFocused: color?.hero[600], + mainVariantPressed: color?.hero[600], + mainVariantDisabled: chroma(color?.hero[700] as string) + .alpha(opacity?.dim5 as number) + .css(), + onMainVariant: color?.base.bright, + + accent: color?.triforce[500], + accentHovered: color?.triforce[400], + accentPressed: color?.triforce[400], + accentFocused: color?.triforce[400], + accentDisabled: chroma(color?.triforce[500] as string) + .alpha(opacity?.dim5 as number) + .css(), + onAccent: color?.gray[900], + + accentContainer: color?.triforce[100], + accentContainerHovered: color?.triforce[50], + accentContainerFocused: color?.triforce[50], + accentContainerPressed: color?.triforce[50], + accentContainerDisabled: chroma(color?.triforce[100] as string) + .alpha(opacity?.dim5 as number) + .css(), + onAccentContainer: color?.base.gloom, + + accentVariant: color?.triforce[300], + accentVariantHovered: color?.triforce[200], + accentVariantFocused: color?.triforce[200], + accentVariantPressed: color?.triforce[200], + accentVariantDisabled: chroma(color?.triforce[300] as string) + .alpha(opacity?.dim5 as number) + .css(), + onAccentVariant: color?.base.gloom, + + support: color?.zelda[500], + supportHovered: color?.zelda[400], + supportPressed: color?.zelda[400], + supportFocused: color?.zelda[400], + supportDisabled: chroma(color?.zelda[500] as string) + .alpha(opacity?.dim5 as number) + .css(), + onSupport: color?.base.bright, + + supportContainer: color?.zelda[100], + supportContainerHovered: color?.zelda[50], + supportContainerFocused: color?.zelda[50], + supportContainerPressed: color?.zelda[50], + supportContainerDisabled: chroma(color?.zelda[100] as string) + .alpha(opacity?.dim5 as number) + .css(), + onSupportContainer: color?.zelda[500], + + supportVariant: color?.zelda[700], + supportVariantHovered: color?.zelda[600], + supportVariantFocused: color?.zelda[600], + supportVariantPressed: color?.zelda[600], + supportVariantDisabled: chroma(color?.zelda[700] as string) + .alpha(opacity?.dim5 as number) + .css(), + onSupportVariant: color?.base.bright + }, + feedback: { + success: color?.hero[500], + successHovered: color?.hero[400], + successPressed: color?.hero[400], + successFocused: color?.hero[400], + successDisabled: chroma(color?.hero[500] as string) + .alpha(opacity?.dim5 as number) + .css(), + onSuccess: color?.base.bright, + + successContainer: color?.hero[50], + successContainerHovered: color?.hero[100], + successContainerFocused: color?.hero[100], + successContainerPressed: color?.hero[100], + successContainerDisabled: chroma(color?.hero[50] as string) + .alpha(opacity?.dim5 as number) + .css(), + onSuccessContainer: color?.hero[700], + + alert: color?.triforce[800], + alertHovered: color?.triforce[700], + alertPressed: color?.triforce[700], + alertFocused: color?.triforce[700], + alertDisabled: chroma(color?.triforce[800] as string) + .alpha(opacity?.dim5 as number) + .css(), + onAlert: color?.base.gloom, + + alertContainer: color?.triforce[100], + alertContainerHovered: color?.triforce[50], + alertContainerFocused: color?.triforce[50], + alertContainerPressed: color?.triforce[50], + alertContainerDisabled: chroma(color?.triforce[100] as string) + .alpha(opacity?.dim5 as number) + .css(), + onAlertContainer: color?.base.gloom, + + error: color?.goron[500], + errorHovered: color?.goron[400], + errorPressed: color?.goron[400], + errorFocused: color?.goron[400], + errorDisabled: chroma(color?.goron[500] as string) + .alpha(opacity?.dim5 as number) + .css(), + onError: color?.base.bright, + + errorContainer: color?.goron[100], + errorContainerHovered: color?.goron[50], + errorContainerFocused: color?.goron[50], + errorContainerPressed: color?.goron[50], + errorContainerDisabled: chroma(color?.goron[100] as string) + .alpha(opacity?.dim5 as number) + .css(), + onErrorContainer: color?.goron[600], + + info: color?.zora[500], + infoHovered: color?.zora[400], + infoPressed: color?.zora[400], + infoFocused: color?.zora[400], + infoDisabled: chroma(color?.zora[500] as string) + .alpha(opacity?.dim5 as number) + .css(), + onInfo: color?.base.bright, + + infoContainer: color?.zora[100], + infoContainerHovered: color?.zora[50], + infoContainerFocused: color?.zora[50], + infoContainerPressed: color?.zora[50], + infoContainerDisabled: chroma(color?.zora[100] as string) + .alpha(opacity?.dim5 as number) + .css(), + onInfoContainer: color?.zora[600], + + neutral: color?.poe[600], + neutralHovered: color?.poe[500], + neutralPressed: color?.poe[500], + neutralFocused: color?.poe[500], + neutralDisabled: chroma(color?.poe[600] as string) + .alpha(opacity?.dim5 as number) + .css(), + onNeutral: color?.base.bright, + + neutralContainer: color?.poe[100], + neutralContainerHovered: color?.poe[50], + neutralContainerFocused: color?.poe[50], + neutralContainerPressed: color?.poe[50], + neutralContainerDisabled: chroma(color?.poe[100] as string) + .alpha(opacity?.dim5 as number) + .css(), + onNeutralContainer: color?.base.gloom + }, + base: { + background: color?.base.bright, + onBackground: color?.base.gloom, + backgroundVariant: color?.poe[100], + onBackgroundVariant: color?.base.gloom, + + surface: color?.base.bright, + onSurface: color?.base.gloom, + surfaceInverse: color?.poe[900], + onSurfaceInverse: color?.base.bright, + + overlay: color?.base.gloom, + onOverlay: color?.base.bright, + + outline: color?.poe[400], + outlineHovered: color?.poe[700], + outlinePressed: color?.poe[700], + outlineFocused: color?.poe[700], + outlineDisabled: chroma(color?.poe[400] as string) + .alpha(opacity?.dim5 as number) + .css(), + outlineHigh: color?.poe[900] + }, + extra: {}, + social: { + facebook: color?.social.facebook, + whatsapp: color?.social.whatsapp, + youtube: color?.social.youtube, + tiktok: color?.social.tiktok, + telegram: color?.social.telegram, + x: color?.social.x, + instagram: color?.social.instagram + } + } + }) +} + +export default theme diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts new file mode 100644 index 000000000..fdd7bdd56 --- /dev/null +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -0,0 +1,332 @@ +import chroma from 'chroma-js' + +import {type PrimitiveTheme, type Theme} from './src/types' + +const theme: Theme = { + settings: { + fontSize: '16px', + colorSpace: 'rgb' + }, + primitive: { + color: { + hero: { + 50: '#F2FCF7', + 100: '#DFFFED', + 200: '#C4F3D9', + 300: '#98E9BC', + 400: '#2DD276', + 500: '#11A753', + 600: '#0E9549', + 700: '#097137', + 800: '#075529', + 900: '#02441F' + }, + triforce: { + 50: '#FFFBEE', + 100: '#FFF3CC', + 200: '#FFEBAA', + 300: '#FFE799', + 400: '#FFD142', + 500: '#F9BE01', + 600: '#F9A501', + 700: '#EF9801', + 800: '#E57301', + 900: '#D75A00' + }, + zelda: { + 50: '#FDF8FA', + 100: '#FBF4F6', + 200: '#FFE5EF', + 300: '#EBC2D0', + 400: '#DD7FA0', + 500: '#BF406D', + 600: '#A72A56', + 700: '#7A2946', + 800: '#541C30', + 900: '#460F22' + }, + goron: { + 50: '#FFF6F6', + 100: '#FFEBEB', + 200: '#FFDEDE', + 300: '#FECDCD', + 400: '#FF6565', + 500: '#E51B1B', + 600: '#D60606', + 700: '#C90303', + 800: '#970202', + 900: '#840000' + }, + zora: { + 50: '#F4F9FF', + 100: '#E5F2FF', + 200: '#D0E8FF', + 300: '#99CAFF', + 400: '#72B5FF', + 500: '#006FE5', + 600: '#0062CD', + 700: '#004999', + 800: '#003166', + 900: '#002955' + }, + poe: { + 50: '#F9F9FA', + 100: '#F4F5F6', + 200: '#E6E9EB', + 300: '#D3D7D9', + 400: '#B7BEC2', + 500: '#808D93', + 600: '#677379', + 700: '#50595E', + 800: '#3F474B', + 900: '#24292C' + }, + social: { + facebook: '#4267B2', + whatsapp: '#25D366', + youtube: '#FF0000', + tiktok: '#000000', + telegram: '#0088cc', + x: '#14171A', + instagram: '#E1306C' + }, + extra: { + illustrationDarkGreen: '#1ED86C', + illustrationLightGreen: '#8BF5AF', + illustrationDarkGrey: '#939393', + illustrationLightGrey: '#E2E2E2', + illustrationBlack: '#2A3439', + illustrationWhite: '#FFFFFF', + lightGreen: '#D2EDDE', + lightBlue: '#E5F2FF', + lightYellow: '#F7EFD4', + lightGrey: '#F1F2F2' + }, + base: { + bright: '#FFFFFF', + gloom: '#000000' + } + }, + opacity: { + full: 1, + dim1: 0.72, + dim2: 0.68, + dim3: 0.4, + dim4: 0.16, + dim5: 0.08, + none: 0 + } + }, + semantic: ({color, opacity}: PrimitiveTheme) => ({ + color: { + brand: { + main: color?.hero[500], + mainHovered: color?.hero[400], + mainPressed: color?.hero[400], + mainFocused: color?.hero[400], + mainDisabled: chroma(color?.hero[400] as string) + .alpha(opacity?.dim3 as number) + .css(), + onMain: color?.base.bright, + + mainContainer: color?.hero[50], + mainContainerHovered: color?.hero[100], + mainContainerFocused: color?.hero[100], + mainContainerPressed: color?.hero[100], + mainContainerDisabled: chroma(color?.hero[50] as string) + .alpha(opacity?.dim3 as number) + .css(), + onMainContainer: color?.hero[700], + + mainVariant: color?.hero[700], + mainVariantHovered: color?.hero[600], + mainVariantFocused: color?.hero[600], + mainVariantPressed: color?.hero[600], + mainVariantDisabled: chroma(color?.hero[600] as string) + .alpha(opacity?.dim3 as number) + .css(), + onMainVariant: color?.base.bright, + + accent: color?.triforce[500], + accentHovered: color?.triforce[400], + accentPressed: color?.triforce[400], + accentFocused: color?.triforce[400], + accentDisabled: chroma(color?.triforce[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAccent: color?.base.gloom, + + accentContainer: color?.triforce[100], + accentContainerHovered: color?.triforce[50], + accentContainerFocused: color?.triforce[50], + accentContainerPressed: color?.triforce[50], + accentContainerDisabled: chroma(color?.triforce[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAccentContainer: color?.base.gloom, + + accentVariant: color?.triforce[300], + accentVariantHovered: color?.triforce[200], + accentVariantFocused: color?.triforce[200], + accentVariantPressed: color?.triforce[200], + accentVariantDisabled: chroma(color?.triforce[300] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAccentVariant: color?.base.gloom, + + support: color?.zelda[500], + supportHovered: color?.zelda[400], + supportPressed: color?.zelda[400], + supportFocused: color?.zelda[400], + supportDisabled: chroma(color?.zelda[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSupport: color?.base.bright, + + supportContainer: color?.zelda[100], + supportContainerHovered: color?.zelda[50], + supportContainerFocused: color?.zelda[50], + supportContainerPressed: color?.zelda[50], + supportContainerDisabled: chroma(color?.zelda[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSupportContainer: color?.zelda[500], + + supportVariant: color?.zelda[700], + supportVariantHovered: color?.zelda[600], + supportVariantFocused: color?.zelda[600], + supportVariantPressed: color?.zelda[600], + supportVariantDisabled: chroma(color?.zelda[700] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSupportVariant: color?.base.bright + }, + feedback: { + success: color?.hero[500], + successHovered: color?.hero[400], + successPressed: color?.hero[400], + successFocused: color?.hero[400], + successDisabled: chroma(color?.hero[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSuccess: color?.base.bright, + + successContainer: color?.hero[50], + successContainerHovered: color?.hero[100], + successContainerFocused: color?.hero[100], + successContainerPressed: color?.hero[100], + successContainerDisabled: chroma(color?.hero[50] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSuccessContainer: color?.hero[700], + + alert: color?.triforce[800], + alertHovered: color?.triforce[700], + alertPressed: color?.triforce[700], + alertFocused: color?.triforce[700], + alertDisabled: chroma(color?.triforce[800] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAlert: color?.base.gloom, + + alertContainer: color?.triforce[100], + alertContainerHovered: color?.triforce[50], + alertContainerFocused: color?.triforce[50], + alertContainerPressed: color?.triforce[50], + alertContainerDisabled: chroma(color?.triforce[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAlertContainer: color?.base.gloom, + + error: color?.goron[500], + errorHovered: color?.goron[400], + errorPressed: color?.goron[400], + errorFocused: color?.goron[400], + errorDisabled: chroma(color?.goron[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onError: color?.base.bright, + + errorContainer: color?.goron[100], + errorContainerHovered: color?.goron[50], + errorContainerFocused: color?.goron[50], + errorContainerPressed: color?.goron[50], + errorContainerDisabled: chroma(color?.goron[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onErrorContainer: color?.goron[600], + + info: color?.zora[500], + infoHovered: color?.zora[400], + infoPressed: color?.zora[400], + infoFocused: color?.zora[400], + infoDisabled: chroma(color?.zora[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onInfo: color?.base.bright, + + infoContainer: color?.zora[100], + infoContainerHovered: color?.zora[50], + infoContainerFocused: color?.zora[50], + infoContainerPressed: color?.zora[50], + infoContainerDisabled: chroma(color?.zora[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onInfoContainer: color?.zora[600], + + neutral: color?.poe[600], + neutralHovered: color?.poe[500], + neutralPressed: color?.poe[500], + neutralFocused: color?.poe[500], + neutralDisabled: chroma(color?.poe[600] as string) + .alpha(opacity?.dim3 as number) + .css(), + onNeutral: color?.base.bright, + + neutralContainer: color?.poe[100], + neutralContainerHovered: color?.poe[50], + neutralContainerFocused: color?.poe[50], + neutralContainerPressed: color?.poe[50], + neutralContainerDisabled: chroma(color?.poe[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onNeutralContainer: color?.base.gloom + }, + base: { + background: color?.base.bright, + onBackground: color?.base.gloom, + backgroundVariant: color?.poe[100], + onBackgroundVariant: color?.base.gloom, + + surface: color?.base.bright, + onSurface: color?.base.gloom, + surfaceInverse: color?.poe[900], + onSurfaceInverse: color?.base.bright, + + overlay: color?.base.gloom, + onOverlay: color?.base.bright, + + outline: color?.poe[400], + outlineHovered: color?.poe[700], + outlinePressed: color?.poe[700], + outlineFocused: color?.poe[700], + outlineDisabled: chroma(color?.poe[400] as string) + .alpha(opacity?.dim3 as number) + .css(), + outlineHigh: color?.poe[900] + }, + extra: {}, + social: { + facebook: color?.social.facebook, + whatsapp: color?.social.whatsapp, + youtube: color?.social.youtube, + tiktok: color?.social.tiktok, + telegram: color?.social.telegram, + x: color?.social.x, + instagram: color?.social.instagram + } + } + }) +} + +export default theme diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json new file mode 100644 index 000000000..07447d46e --- /dev/null +++ b/utils/sui-tokens/package.json @@ -0,0 +1,49 @@ +{ + "name": "@s-ui/tokens", + "version": "0.0.1", + "description": "Tool for manipulate @s-ui tokens.", + "publishConfig": { + "access": "public" + }, + "engines": { + "node": ">=20.0.0" + }, + "bin": { + ".": "./bin/tokens.mjs", + "tokens": "./bin/tokens.mjs", + "tokens-scss": "./bin/tokens-scss.mjs" + }, + "exports": { + ".": "./src/index.ts" + }, + "types": "./src/index.ts", + "type": "module", + "keywords": [ + "tokens", + "sui" + ], + "dependencies": { + "@types/chroma-js": "2.4.5", + "chalk": "4.1.2", + "chroma-js": "2.6.0", + "change-case": "5.4.4", + "commander": "8.3.0", + "deepmerge-ts": "^4.0.0", + "tsx": "4.19.2", + "typescript": "4.9.5", + "zod": "3.23.8" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/SUI-Components/sui-components.git" + }, + "config": { + "title": "tokens", + "type": "utils" + }, + "bugs": { + "url": "https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Util%3A+tokens%22" + }, + "homepage": "https://sui-components.vercel.app/", + "license": "MIT" +} diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts new file mode 100644 index 000000000..3aa38a391 --- /dev/null +++ b/utils/sui-tokens/src/build.ts @@ -0,0 +1,154 @@ +// eslint-disable-file no-console @typescript-eslint/strict-boolean-expressions + +import {existsSync, mkdirSync, writeFileSync} from 'fs' +import path from 'path' + +import chalk from 'chalk' +import chroma from 'chroma-js' +import {deepmerge} from 'deepmerge-ts' +import process from 'node:process' + +import {colorParser, colorRampParser} from './checker' +import defaultTokensConfig from './default.tokens.config' +import {generate} from './generate' +import type {ColorPrimitives, ColorRamp, PrimitiveTheme, SettingsTheme, Theme} from './types' + +const colorFn = (colorSpace: SettingsTheme['colorSpace']) => (v: string) => { + switch (colorSpace) { + case 'hex': + return chroma(v).css() + case 'rgb': + return chroma(v).css() + } +} + +export function build(tokensConfig?: Theme) { + const buildPrimitive = (primitive: PrimitiveTheme, settings: SettingsTheme) => { + const colorSpace = settings?.colorSpace + const colorTx = colorFn(colorSpace) + return { + color: Object.entries(primitive.color as ColorPrimitives).reduce( + (acc: any, [key, value]: [string, ColorRamp | string]) => { + if (typeof value === 'string' && colorParser.safeParse(value).success) { + acc[key] = colorTx(value) as string + } else if (colorRampParser.safeParse(value).success) { + acc[key] = Object.entries(value).reduce((acc: ColorRamp, [rampKey, rampValue]) => { + acc[rampKey] = colorTx(rampValue) as string + return acc + }, {}) + } + return acc + }, + {} + ), + opacity: primitive.opacity, + fontFamily: primitive.fontFamily, + size: primitive.size, + elevation: primitive.elevation + } + } + + const protoSettings = + tokensConfig?.settings != null + ? deepmerge(defaultTokensConfig.settings, tokensConfig.settings) + : defaultTokensConfig.settings + + const protoPrimitive = + tokensConfig?.primitive != null + ? deepmerge(defaultTokensConfig.primitive, tokensConfig.primitive) + : defaultTokensConfig.primitive + + const primitive = buildPrimitive(protoPrimitive, protoSettings) + const semantic = + tokensConfig?.semantic != null + ? deepmerge( + defaultTokensConfig.semantic( + buildPrimitive(defaultTokensConfig.primitive, defaultTokensConfig.settings), + defaultTokensConfig.settings + ), + tokensConfig.semantic(primitive, protoSettings) + ) + : defaultTokensConfig.semantic(primitive, protoSettings) + + return { + settings: protoSettings, + primitive, + semantic + } +} + +export async function loadTokensConfig(tokensConfigPath: string = '') { + try { + const configFileRoute = path.join(process.cwd(), tokensConfigPath) + + if (existsSync(configFileRoute)) { + const {default: config} = await import(configFileRoute) + return config + } else { + console.log(chalk.blue('No configuration file found, using default configuration')) + return {} + } + } catch (error) { + chalk.red('💥 Something went wrong loading the custom configuration file', error) + } +} + +export async function writeTokensConfig(data: string, outputPath?: string) { + if (outputPath !== undefined) { + try { + const {dir} = path.parse(path.join(process.cwd(), outputPath)) + if (!existsSync(dir)) { + mkdirSync(dir, {recursive: true}) + } + writeFileSync(`${path.join(process.cwd(), outputPath)}`, data) + } catch (error: Error | any) { + console.log(chalk.red(`💥 Error writing file: ${error.message as string}`)) + process.exit(1) + } + } else { + console.log(data) + process.exit(0) + } +} + +export const runSCSS = async ({ + configuration, + output, + selector, + mode, + primitives +}: { + configuration?: string + output?: string + selector: string + mode?: 'light' | 'dark' + primitives: boolean +}) => { + console.log(chalk.blue('Loading tokens configuration')) + const tokensConfig = await loadTokensConfig(configuration) + console.log(chalk.blue('Building tokens')) + console.log(chalk.green(JSON.stringify(tokensConfig, null, 2))) + const result = build(tokensConfig) + console.log(chalk.blue('Writing tokens')) + await writeTokensConfig(generate.scss(result, {hasPrimitive: primitives, selector, mode}), output) + console.log(chalk.blue('Done!')) +} + +export const runJSON = async ({ + configuration, + output, + primitive +}: { + configuration?: string + output?: string + primitive: boolean +}) => { + console.log(chalk.blue('Loading tokens configuration')) + const tokensConfig = await loadTokensConfig(configuration) + console.log(chalk.blue('Building tokens')) + console.log(chalk.green(JSON.stringify(tokensConfig, null, 2))) + const result = build(tokensConfig) + console.log(chalk.blue('Writing tokens')) + await writeTokensConfig(JSON.stringify(generate.json(result, {hasPrimitive: primitive}), null, 2), output) + console.log(chalk.blue('Done!')) +} diff --git a/utils/sui-tokens/src/checker.ts b/utils/sui-tokens/src/checker.ts new file mode 100644 index 000000000..ce198c37a --- /dev/null +++ b/utils/sui-tokens/src/checker.ts @@ -0,0 +1,33 @@ +import chroma from 'chroma-js' +import {z} from 'zod' + +export const colorParser = z.custom<`${string}`>(val => { + return typeof val === 'string' && chroma.valid(val) +}) + +export const colorRampParser = z.record(z.string(), z.string()) + +export const colorPrimitivesParser = z.record(colorRampParser) + +export const cmSizeParser = z.custom<`${number}cm`>(val => { + return typeof val === 'string' ? /^\d+px$/.test(val) : false +}) +export const mmSizeParser = z.custom<`${number}mm`>(val => { + return typeof val === 'string' ? /^\d+px$/.test(val) : false +}) +export const QSizeParser = z.custom<`${number}Q`>(val => { + return typeof val === 'string' ? /^\d+px$/.test(val) : false +}) +export const inSizeParser = z.custom<`${number}in`>(val => { + return typeof val === 'string' ? /^\d+px$/.test(val) : false +}) +export const pcSizeParser = z.custom<`${number}pc`>(val => { + return typeof val === 'string' ? /^\d+px$/.test(val) : false +}) +export const pxSizeParser = z.custom<`${number}px`>(val => { + return typeof val === 'string' ? /^\d+px$/.test(val) : false +}) + +export const sizeParser = z.union([cmSizeParser, mmSizeParser, QSizeParser, inSizeParser, pcSizeParser, pxSizeParser]) + +export const baseSizeParser = sizeParser diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts new file mode 100644 index 000000000..f40c4d9eb --- /dev/null +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -0,0 +1,497 @@ +import chroma from 'chroma-js' + +import {type Theme} from './types' + +const theme: Theme = { + settings: { + prefix: 's-ui', + fontSize: '16px', + colorSpace: 'rgb' + }, + primitive: { + fontFamily: { + sans: ["'Open Sans'", 'Helvetica', 'sans-serif'], + serif: ['Georgia', 'Cambria', "'Times New Roman'", 'Times', 'serif'], + mono: ['Menlo', 'Monaco', 'Consolas', "'Liberation Mono'", "'Courier New'", 'monospace'] + }, + color: { + theBlue: { + 50: '#F4F4FC', + 100: '#E2E1F8', + 200: '#B1AEEC', + 300: '#8580E1', + 400: '#5952D6', + 500: '#2118C9', + 600: '#191297', + 700: '#140E79', + 800: '#0D0A50', + 900: '#080632' + }, + sugarCotton: { + 50: '#FFF5F9', + 100: '#FFE1ED', + 200: '#FEBAD6', + 300: '#FE92BF', + 400: '#FE6BA7', + 500: '#FD398A', + 600: '#CA2E6E', + 700: '#982253', + 800: '#651737', + 900: '#3F0E22' + }, + apple: { + 50: '#F5FBF8', + 100: '#E0F2E9', + 200: '#B7DFCB', + 300: '#8ECDAE', + 400: '#64BC90', + 500: '#31A56B', + 600: '#278456', + 700: '#1D6340', + 800: '#14422B', + 900: '#0C291B' + }, + wiggins: { + 50: '#FFFCF6', + 100: '#FDF5E4', + 200: '#FBE9BF', + 300: '#F9DC9A', + 400: '#F7CF76', + 500: '#F4BF48', + 600: '#C3993A', + 700: '#92732B', + 800: '#624C1D', + 900: '#3D3012' + }, + chilli: { + 50: '#FFF7F6', + 100: '#FEE6E5', + 200: '#FCC4C2', + 300: '#FAA29F', + 400: '#F8807D', + 500: '#F65651', + 600: '#C54541', + 700: '#943431', + 800: '#622220', + 900: '#3E1514' + }, + sky: { + 50: '#F3FAFC', + 100: '#DAF1F4', + 200: '#A8DEE6', + 300: '#77CBD8', + 400: '#45B8CA', + 500: '#07A0B8', + 600: '#068093', + 700: '#04606E', + 800: '#03404A', + 900: '#02282E' + }, + surfer: { + 50: '#F8F8F9', + 100: '#EBEBED', + 200: '#D1D0D5', + 300: '#B6B5BC', + 400: '#9C9BA4', + 500: '#7B7986', + 600: '#5C5B64', + 700: '#4A4950', + 800: '#313036', + 900: '#252428' + }, + kiwi: { + 50: '#FDFDF6', + 100: '#F8FAE2', + 200: '#F0F3BC', + 300: '#E7EC96', + 400: '#DEE570', + 500: '#D3DD40', + 600: '#A9B133', + 700: '#7F8526', + 800: '#54581A', + 900: '#353710' + }, + social: { + facebook: '#4267B2', + whatsapp: '#25D366', + youtube: '#FF0000', + tiktok: '#000000', + telegram: '#0088cc', + x: '#14171A', + instagram: '#E1306C' + }, + extra: { + theBlueV: '#7583FF' + }, + base: { + bright: '#FFFFFF', + gloom: '#000000' + } + }, + opacity: { + full: 1, + dim1: 0.72, + dim2: 0.68, + dim3: 0.4, + dim4: 0.16, + dim5: 0.08, + none: 0 + }, + size: { + none: '0', + px: '1px', + '0.5': '0.125rem', // 2px + '1': '0.25rem', // 4px + '1.5': '0.375rem', // 6px + '2': '0.5rem', // 8px + '2.5': '0.625rem', // 10px + '3': '0.75rem', // 12px + '3.5': '0.875rem', // 14px + '4': '1rem', // 16px + '5': '1.25rem', // 20px + '6': '1.5rem', // 24px + '7': '1.75rem', // 28px + '8': '2rem', // 32px + '9': '2.25rem', // 36px + '10': '2.5rem', // 40px + '11': '2.75rem', // 44px + '12': '3rem', // 48px + '14': '3.5rem', // 56px + '16': '4rem', // 64px + '20': '5rem', // 80px + '24': '6rem', // 96px + '28': '7rem', // 112px + '32': '8rem', // 128px + '36': '9rem', // 144px + '40': '10rem', // 160px + '44': '11rem', // 176px + '48': '12rem', // 192px + '52': '13rem', // 208px + '56': '14rem', // 224px + '60': '15rem', // 240px + '64': '16rem', // 256px + '72': '18rem', // 288px + '80': '20rem', // 320px + '96': '24rem', // 384px + auto: 'auto', // auto + '1/2': '50%', // 50% + '1/3': '33.333333%', // 33.333333% + '2/3': '66.666667%', // 66.666667% + '1/4': '25%', // 25% + '2/4': '50%', // 50% + '3/4': '75%', // 75% + '1/5': '20%', // 20% + '2/5': '40%', // 40% + '3/5': '60%', // 60% + '4/5': '80%', // 80% + '1/6': '16.666667%', // 16.666667% + '2/6': '33.333333%', // 33.333333% + '3/6': '50%', // 50% + '4/6': '66.666667%', // 66.666667% + '5/6': '83.333333%', // 83.333333% + '1/12': '8.333333%', // 8.333333% + '2/12': '16.666667%', // 16.666667% + '3/12': '25%', // 25% + '4/12': '33.333333%', // 33.333333% + '5/12': '41.666667%', // 41.666667% + '6/12': '50%', // 50% + '7/12': '58.333333%', // 58.333333% + '8/12': '66.666667%', // 66.666667% + '9/12': '75%', // 75% + '10/12': '83.333333%', // 83.333333% + '11/12': '91.666667%', // 91.666667% + full: '100%', // 100% + screen: '100dvw', // 100dvw + min: 'min-content', // min-content + max: 'max-content', // max-content + fit: 'fit-content' // fit-content + }, + elevation: { + hide: -1, + base: 0, + raised: 1, + dropdown: 1000, + sticky: 1100, + overlay: 1300, + modal: 1400, + popover: 1500, + skipLink: 1600, + toast: 1700, + tooltip: 1800 + } + }, + semantic: ({color, opacity, elevation, size, fontFamily}, {fontSize, prefix, colorSpace}) => { + return { + color: { + brand: { + main: color?.theBlue[500], + mainHovered: color?.theBlue[400], + mainPressed: color?.theBlue[400], + mainFocused: color?.theBlue[400], + mainDisabled: chroma(color?.theBlue[400] as string) + .alpha(opacity?.dim3 as number) + .css(), + onMain: color?.base.bright, + + mainContainer: color?.theBlue[50], + mainContainerHovered: color?.theBlue[100], + mainContainerFocused: color?.theBlue[100], + mainContainerPressed: color?.theBlue[100], + mainContainerDisabled: chroma(color?.theBlue[50] as string) + .alpha(opacity?.dim3 as number) + .css(), + onMainContainer: color?.theBlue[700], + + mainVariant: color?.theBlue[700], + mainVariantHovered: color?.theBlue[600], + mainVariantFocused: color?.theBlue[600], + mainVariantPressed: color?.theBlue[600], + mainVariantDisabled: chroma(color?.theBlue[600] as string) + .alpha(opacity?.dim3 as number) + .css(), + onMainVariant: color?.base.bright, + + accent: color?.sugarCotton[500], + accentHovered: color?.sugarCotton[400], + accentPressed: color?.sugarCotton[400], + accentFocused: color?.sugarCotton[400], + accentDisabled: chroma(color?.sugarCotton[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAccent: color?.base.gloom, + + accentContainer: color?.sugarCotton[100], + accentContainerHovered: color?.sugarCotton[50], + accentContainerFocused: color?.sugarCotton[50], + accentContainerPressed: color?.sugarCotton[50], + accentContainerDisabled: chroma(color?.sugarCotton[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAccentContainer: color?.base.gloom, + + accentVariant: color?.sugarCotton[300], + accentVariantHovered: color?.sugarCotton[200], + accentVariantFocused: color?.sugarCotton[200], + accentVariantPressed: color?.sugarCotton[200], + accentVariantDisabled: chroma(color?.sugarCotton[300] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAccentVariant: color?.base.gloom, + + support: color?.sky[500], + supportHovered: color?.sky[400], + supportPressed: color?.sky[400], + supportFocused: color?.sky[400], + supportDisabled: chroma(color?.sky[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSupport: color?.base.bright, + + supportContainer: color?.sky[100], + supportContainerHovered: color?.sky[50], + supportContainerFocused: color?.sky[50], + supportContainerPressed: color?.sky[50], + supportContainerDisabled: chroma(color?.sky[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSupportContainer: color?.sky[500], + + supportVariant: color?.sky[700], + supportVariantHovered: color?.sky[600], + supportVariantFocused: color?.sky[600], + supportVariantPressed: color?.sky[600], + supportVariantDisabled: chroma(color?.sky[700] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSupportVariant: color?.base.bright + }, + feedback: { + success: color?.apple[500], + successHovered: color?.apple[400], + successPressed: color?.apple[400], + successFocused: color?.apple[400], + successDisabled: chroma(color?.apple[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSuccess: color?.base.bright, + + successContainer: color?.apple[50], + successContainerHovered: color?.apple[100], + successContainerFocused: color?.apple[100], + successContainerPressed: color?.apple[100], + successContainerDisabled: chroma(color?.apple[50] as string) + .alpha(opacity?.dim3 as number) + .css(), + onSuccessContainer: color?.apple[700], + + alert: color?.wiggins[500], + alertHovered: color?.wiggins[400], + alertPressed: color?.wiggins[400], + alertFocused: color?.wiggins[400], + alertDisabled: chroma(color?.wiggins[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAlert: color?.base.bright, + + alertContainer: color?.wiggins[100], + alertContainerHovered: color?.wiggins[50], + alertContainerDisabled: chroma(color?.wiggins[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onAlertContainer: color?.base.gloom, + + error: color?.chilli[500], + errorHovered: color?.chilli[400], + errorPressed: color?.chilli[400], + errorFocused: color?.chilli[400], + errorDisabled: chroma(color?.chilli[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onError: color?.base.bright, + + errorContainer: color?.chilli[100], + errorContainerHovered: color?.chilli[50], + errorContainerFocused: color?.chilli[50], + errorContainerPressed: color?.chilli[50], + errorContainerDisabled: chroma(color?.chilli[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onErrorContainer: color?.chilli[600], + + info: color?.sky[500], + infoHovered: color?.sky[400], + infoPressed: color?.sky[400], + infoFocused: color?.sky[400], + infoDisabled: chroma(color?.sky[500] as string) + .alpha(opacity?.dim3 as number) + .css(), + onInfo: color?.base.bright, + + infoContainer: color?.sky[100], + infoContainerHovered: color?.sky[50], + infoContainerFocused: color?.sky[50], + infoContainerPressed: color?.sky[50], + infoContainerDisabled: chroma(color?.sky[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onInfoContainer: color?.sky[600], + + neutral: color?.surfer[600], + neutralHovered: color?.surfer[500], + neutralPressed: color?.surfer[500], + neutralFocused: color?.surfer[500], + neutralDisabled: chroma(color?.surfer[600] as string) + .alpha(opacity?.dim3 as number) + .css(), + onNeutral: color?.base.bright, + + neutralContainer: color?.surfer[100], + neutralContainerHovered: color?.surfer[50], + neutralContainerFocused: color?.surfer[50], + neutralContainerPressed: color?.surfer[50], + neutralContainerDisabled: chroma(color?.surfer[100] as string) + .alpha(opacity?.dim3 as number) + .css(), + onNeutralContainer: color?.base.gloom + }, + base: { + basic: color?.surfer[500], + basicHovered: color?.surfer[400], + basicFocused: color?.surfer[400], + basicPressed: color?.surfer[400], + basicDisabled: chroma(color?.surfer[400] as string) + .alpha(opacity?.dim3 as number) + .css(), + onBasic: color?.base.bright, + + basicContainer: color?.surfer[50], + basicContainerHovered: color?.surfer[100], + basicContainerFocused: color?.surfer[100], + basicContainerPressed: color?.surfer[100], + basicContainerDisabled: chroma(color?.surfer[50] as string) + .alpha(opacity?.dim3 as number) + .css(), + onBasicContainer: color?.surfer[700], + + basicVariant: color?.surfer[700], + basicVariantHovered: color?.surfer[600], + basicVariantFocused: color?.surfer[600], + basicVariantPressed: color?.surfer[600], + basicVariantDisabled: chroma(color?.surfer[600] as string) + .alpha(opacity?.dim3 as number) + .css(), + onBasicVariant: color?.base.bright, + + background: color?.base.bright, + onBackground: color?.base.gloom, + backgroundVariant: color?.surfer[100], + onBackgroundVariant: color?.base.gloom, + + surface: color?.base.bright, + onSurface: color?.base.gloom, + surfaceInverse: color?.surfer[900], + onSurfaceInverse: color?.base.bright, + + overlay: color?.base.gloom, + onOverlay: color?.base.bright, + + outline: color?.surfer[400], + outlineHovered: color?.surfer[700], + outlinePressed: color?.surfer[700], + outlineFocused: color?.surfer[700], + outlineDisabled: chroma(color?.surfer[400] as string) + .alpha(opacity?.dim3 as number) + .css(), + outlineHigh: color?.surfer[900] + }, + social: { + facebook: color?.social?.facebook, + whatsapp: color?.social?.whatsapp, + youtube: color?.social?.youtube, + tiktok: color?.social?.tiktok, + telegram: color?.social?.telegram, + x: color?.social?.x, + instagram: color?.social?.instagram + } + }, + font: { + size: { + '2xs': '0.625rem', // 10px + xs: '0.75rem', // 12px + sm: '0.875rem', // 14px + md: '1rem', // 16px + lg: '1.125rem', // 18px + xl: '1.25rem', // 20px + '2xl': '1.5rem', // 24px + '3xl': '1.75rem', // 28px + '4xl': '2.25rem', // 36px + '5xl': '3rem', // 48px + '6xl': '4rem' // 64px + }, + weight: { + hairline: '100', + thin: '200', + light: '300', + normal: '400', + medium: '500', + semiBold: '600', + bold: '700', + extraBold: '800', + black: '900' + }, + family: { + sans: fontFamily?.sans.join(', ') as string, + serif: fontFamily?.serif.join(', ') as string, + mono: fontFamily?.mono.join(', ') as string + } + }, + opacity, + spacing: { + size + }, + elevation + } + } +} + +export default theme diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts new file mode 100644 index 000000000..1f6252a37 --- /dev/null +++ b/utils/sui-tokens/src/generate.ts @@ -0,0 +1,128 @@ +import {kebabCase} from 'change-case' + +import {type PrimitiveTheme, type SemanticTheme, type SettingsTheme} from './types' + +const anidate = ( + accumulator: Map, + [key, value]: [string, string | number | object | string[] | number[]] +) => { + if (typeof value === 'string' || typeof value === 'number') { + if (accumulator === undefined) { + accumulator = new Map() + } + accumulator.set(`${kebabCase(key)}`, value as string) + } else if (Array.isArray(value)) { + value.forEach((arrayValue, arrayIndex) => { + anidate(accumulator, [`${kebabCase(key)}-${arrayIndex}`, arrayValue]) + }) + } else if (typeof value === 'object') { + Object.entries(value).forEach(([objectKey, objectValue]: [string, object]) => { + anidate(accumulator, [`${kebabCase(key)}-${kebabCase(objectKey)}`, objectValue]) + }) + } + return accumulator +} + +export const generate = { + scss: ( + {settings, primitive, semantic}: {settings: SettingsTheme; primitive: PrimitiveTheme; semantic: SemanticTheme}, + { + selector, + mode, + hasPrimitive + }: { + selector: string + mode?: 'light' | 'dark' + hasPrimitive: boolean + } + ) => { + const maps: { + [index: string]: Map + } = {} + + const customProperty: { + [index: string]: string + } = {} + + const scssTokens: { + [index: string]: string + } = {} + + const add = (partial: any, keyword: string, prefix?: string, ident: number = 0) => { + if (maps[keyword] === undefined) { + maps[keyword] = new Map() + } + Object.entries(partial).forEach(([key, value]: [string, any]) => { + anidate(maps[keyword], [`${keyword}-${key}`, value]) + }) + + const getTokenKey = (key: string) => `--${prefix === undefined ? '' : `${prefix}-`}${key}` + + const identStr = ' '.repeat(ident) + if (customProperty !== undefined) { + customProperty[keyword] = String().concat( + ...Array.from(maps[keyword]).map(v => { + const [key, value] = v as [string, string | number] + return ` +${identStr}${getTokenKey(key)}: ${value};` + }) + ) + } + + scssTokens[keyword] = String().concat( + ...Array.from(maps[keyword]).map(val => { + const [key] = val as [string, string | number] + return ` +$${key}: var(${getTokenKey(key)}) !default;` + }) + ) + } + + const {prefix, fontSize} = settings + const hasMode = (mode?: 'light' | 'dark') => mode !== undefined + + hasPrimitive && add(primitive.color, 'primitiveColor', prefix, hasMode(mode) ? 2 : 1) + add(semantic.color, 'color', prefix, hasMode(mode) ? 2 : 1) + add(semantic.font, 'font', prefix, hasMode(mode) ? 2 : 1) + add(semantic.opacity, 'opacity', prefix, hasMode(mode) ? 2 : 1) + add( + semantic.elevation, + + 'elevation', + prefix, + hasMode(mode) ? 2 : 1 + ) + add(semantic.spacing, 'spacing', prefix, hasMode(mode) ? 2 : 1) + + return `// This file is auto-generated by sui-tokens +${selector} {${hasMode(mode) ? `\n @media (prefers-color-scheme: ${mode as string}) {` : ''}${customProperty.color} +${hasPrimitive ? `${customProperty.primitiveColor}\n` : ''}${customProperty.font} +${customProperty.opacity} +${customProperty.elevation} +${customProperty.spacing}${hasMode(mode) ? `\n }` : ''} +} +${scssTokens.color} +${scssTokens.font} +${scssTokens.opacity} +${scssTokens.elevation} +${scssTokens.spacing} +${ + fontSize !== undefined + ? `\n:where(body) { + font-size: ${fontSize}; +}` + : '' +} +` + }, + json: ( + {settings, primitive, semantic}: {settings: SettingsTheme; primitive: PrimitiveTheme; semantic: SemanticTheme}, + {hasPrimitive}: {hasPrimitive: boolean} + ) => { + return { + settings, + ...(hasPrimitive ? {primitive} : {}), + semantic + } + } +} diff --git a/utils/sui-tokens/src/index.ts b/utils/sui-tokens/src/index.ts new file mode 100644 index 000000000..537d60a29 --- /dev/null +++ b/utils/sui-tokens/src/index.ts @@ -0,0 +1,13 @@ +export {runSCSS, runJSON} from './build' + +export { + type SettingsTheme, + type PrimitiveTheme, + type SemanticTheme, + type ColorPrimitives, + type ColorRamp, + type OpacityPrimitive, + type Base, + type Theme, + type ThemeResult +} from './types' diff --git a/utils/sui-tokens/src/schema.ts b/utils/sui-tokens/src/schema.ts new file mode 100644 index 000000000..591b93edf --- /dev/null +++ b/utils/sui-tokens/src/schema.ts @@ -0,0 +1,97 @@ +import {type ColorPrimitives} from './types' + +export const colorPrimitives: ColorPrimitives = { + hero: { + 50: '#F2FCF7', + 100: '#DFFFED', + 200: '#C4F3D9', + 300: '#98E9BC', + 400: '#2DD276', + 500: '#11A753', + 600: '#0E9549', + 700: '#097137', + 800: '#075529', + 900: '#02441F' + }, + triforce: { + 50: '#FFFBEE', + 100: '#FFF3CC', + 200: '#FFEBAA', + 300: '#FFE799', + 400: '#FFD142', + 500: '#F9BE01', + 600: '#F9A501', + 700: '#EF9801', + 800: '#E57301', + 900: '#D75A00' + }, + zelda: { + 50: '#FDF8FA', + 100: '#FBF4F6', + 200: '#FFE5EF', + 300: '#EBC2D0', + 400: '#DD7FA0', + 500: '#BF406D', + 600: '#A72A56', + 700: '#7A2946', + 800: '#541C30', + 900: '#460F22' + }, + goron: { + 50: '#FFF6F6', + 100: '#FFEBEB', + 200: '#FFDEDE', + 300: '#FECDCD', + 400: '#FF6565', + 500: '#E51B1B', + 600: '#D60606', + 700: '#C90303', + 800: '#970202', + 900: '#840000' + }, + zora: { + 50: '#F4F9FF', + 100: '#E5F2FF', + 200: '#D0E8FF', + 300: '#99CAFF', + 400: '#72B5FF', + 500: '#006FE5', + 600: '#0062CD', + 700: '#004999', + 800: '#003166', + 900: '#002955' + }, + poe: { + 50: '#F9F9FA', + 100: '#F4F5F6', + 200: '#E6E9EB', + 300: '#D3D7D9', + 400: '#B7BEC2', + 500: '#808D93', + 600: '#677379', + 700: '#50595E', + 800: '#3F474B', + 900: '#24292C' + }, + social: { + facebook: '#4267B2', + whatsapp: '#25D366', + youtube: '#FF0000', + tiktok: '#000000', + telegram: '#0088cc', + x: '#14171A', + instagram: '#E1306C' + }, + extra: { + illustrationDarkGreen: '#1ED86C', + illustrationLightGreen: '#8BF5AF', + illustrationDarkGrey: '#939393', + illustrationLightGrey: '#E2E2E2', + illustrationBlack: '#2A3439', + illustrationWhite: '#FFFFFF', + lightGreen: '#D2EDDE', + lightBlue: '#E5F2FF', + lightYellow: '#F7EFD4', + lightGrey: '#F1F2F2' + } +} diff --git a/utils/sui-tokens/src/types.ts b/utils/sui-tokens/src/types.ts new file mode 100644 index 000000000..5d058c4db --- /dev/null +++ b/utils/sui-tokens/src/types.ts @@ -0,0 +1,243 @@ +export interface ColorRamp { + [key: string | number]: string +} + +export interface ColorPrimitives { + [key: string]: ColorRamp +} + +export interface OpacityPrimitive { + [key: string]: number +} + +export type Base = string + +export interface SettingsTheme { + prefix?: string + fontSize?: string + colorSpace?: 'hex' | 'rgb' +} + +export interface PrimitiveTheme { + fontFamily?: { + [key: string]: string[] + } + color?: ColorPrimitives + opacity?: OpacityPrimitive + size?: { + [key: string]: string + } + elevation?: { + [key: string]: number + } +} + +export interface SemanticTheme { + color?: { + brand?: { + main?: string + mainHovered?: string + mainFocused?: string + mainPressed?: string + mainDisabled?: string + onMain?: string + + mainContainer?: string + mainContainerHovered?: string + mainContainerFocused?: string + mainContainerPressed?: string + mainContainerDisabled?: string + onMainContainer?: string + + mainVariant?: string + mainVariantHovered?: string + mainVariantFocused?: string + mainVariantPressed?: string + mainVariantDisabled?: string + onMainVariant?: string + + accent?: string + accentHovered?: string + accentFocused?: string + accentPressed?: string + accentDisabled?: string + onAccent?: string + + accentContainer?: string + accentContainerHovered?: string + accentContainerFocused?: string + accentContainerPressed?: string + accentContainerDisabled?: string + onAccentContainer?: string + + accentVariant?: string + accentVariantHovered?: string + accentVariantFocused?: string + accentVariantPressed?: string + accentVariantDisabled?: string + onAccentVariant?: string + + support?: string + supportHovered?: string + supportPressed?: string + supportFocused?: string + supportDisabled?: string + onSupport?: string + + supportContainer?: string + supportContainerHovered?: string + supportContainerFocused?: string + supportContainerPressed?: string + supportContainerDisabled?: string + onSupportContainer?: string + + supportVariant?: string + supportVariantHovered?: string + supportVariantFocused?: string + supportVariantPressed?: string + supportVariantDisabled?: string + onSupportVariant?: string + } + feedback?: { + success?: string + successHovered?: string + successPressed?: string + successFocused?: string + successDisabled?: string + onSuccess?: string + successContainer?: string + successContainerHovered?: string + successContainerFocused?: string + successContainerPressed?: string + successContainerDisabled?: string + onSuccessContainer?: string + alert?: string + alertHovered?: string + alertPressed?: string + alertFocused?: string + alertDisabled?: string + onAlert?: string + alertContainer?: string + alertContainerHovered?: string + alertContainerFocused?: string + alertContainerPressed?: string + alertContainerDisabled?: string + onAlertContainer?: string + error?: string + errorHovered?: string + errorPressed?: string + errorFocused?: string + errorDisabled?: string + onError?: string + errorContainer?: string + errorContainerHovered?: string + errorContainerFocused?: string + errorContainerPressed?: string + errorContainerDisabled?: string + onErrorContainer?: string + info?: string + infoHovered?: string + infoPressed?: string + infoFocused?: string + infoDisabled?: string + onInfo?: string + infoContainer?: string + infoContainerHovered?: string + infoContainerFocused?: string + infoContainerPressed?: string + infoContainerDisabled?: string + onInfoContainer?: string + neutral?: string + neutralHovered?: string + neutralPressed?: string + neutralFocused?: string + neutralDisabled?: string + onNeutral?: string + neutralContainer?: string + neutralContainerHovered?: string + neutralContainerFocused?: string + neutralContainerPressed?: string + neutralContainerDisabled?: string + onNeutralContainer?: string + } + base?: { + basic?: string + basicHovered?: string + basicFocused?: string + basicPressed?: string + basicDisabled?: string + onBasic?: string + + basicContainer?: string + basicContainerHovered?: string + basicContainerFocused?: string + basicContainerPressed?: string + basicContainerDisabled?: string + onBasicContainer?: string + + basicVariant?: string + basicVariantHovered?: string + basicVariantFocused?: string + basicVariantPressed?: string + basicVariantDisabled?: string + onBasicVariant?: string + + background?: string + onBackground?: string + backgroundVariant?: string + onBackgroundVariant?: string + surface?: string + onSurface?: string + surfaceInverse?: string + onSurfaceInverse?: string + overlay?: string + onOverlay?: string + outline?: string + outlineHovered?: string + outlinePressed?: string + outlineFocused?: string + outlineDisabled?: string + outlineHigh?: string + } + extra?: { + [key: string | number]: string + } + social?: { + facebook?: string + whatsapp?: string + youtube?: string + tiktok?: string + telegram?: string + x?: string + instagram?: string + } + } + font?: { + size?: {[key: string]: string} + family?: {[key: string]: string} + weight?: {[key: string]: string} + } + spacing?: { + size?: { + [key: string]: string + } + } + elevation?: { + [key: string]: number + } + opacity?: { + [key: string]: number + } +} + +export interface Theme { + settings: SettingsTheme + primitive: PrimitiveTheme + semantic: (themePrimitives: PrimitiveTheme, settingsTheme: SettingsTheme) => SemanticTheme +} + +export interface ThemeResult { + settings: SettingsTheme + primitive: PrimitiveTheme + semantic: SemanticTheme +} diff --git a/utils/sui-tokens/tsconfig.json b/utils/sui-tokens/tsconfig.json new file mode 100644 index 000000000..1860e1368 --- /dev/null +++ b/utils/sui-tokens/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.json", + "ts-node": {"esm": true, "experimentalSpecifierResolution": "node"}, + "compilerOptions": { + "outDir": "./lib", + "rootDir": "./src", + "allowImportingTsExtensions": true, + "allowJs": true, + "module": "CommonJS", + "esModuleInterop": true, + "target": "ESNext", + "moduleResolution": "Node", + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "isolatedModules": false, + "useUnknownInCatchVariables": false, + "inlineSourceMap": true + } +}