From 595aedae8f3181d391c833341542b119937b3a5f Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 29 Nov 2024 20:00:29 +0100 Subject: [PATCH 01/42] feat(utils/sui-tokens): first attempt --- components/atom/tag/demo/index.js | 2 +- .../photoUploader/src/ThumbCard/index.js | 3 +- .../molecule/photoUploader/src/index.js | 4 +- .../select/src/components/SingleSelection.js | 4 +- components/molecule/select/src/index.js | 6 +- .../src/components/SelectIcon.js | 2 + .../molecule/selectPopover/src/index.js | 2 +- .../molecule/selectPopover/test/index.test.js | 4 +- .../molecule/stepper/src/Step/DefaultStep.js | 2 +- package-lock.json | 866 +++++++++++++++--- tsconfig.json | 5 +- utils/sui-theme/LICENSE.md | 1 + utils/sui-tokens/.gitignore | 2 + utils/sui-tokens/.npmignore | 6 + utils/sui-tokens/CHANGELOG.md | 1 + utils/sui-tokens/LICENSE.md | 21 + utils/sui-tokens/README.md | 12 + utils/sui-tokens/bin/tokens-scss.mjs | 15 + utils/sui-tokens/bin/tokens.mjs | 13 + utils/sui-tokens/milanuncios.tokens.config.ts | 290 ++++++ utils/sui-tokens/package.json | 42 + utils/sui-tokens/src/build.ts | 107 +++ utils/sui-tokens/src/checker.ts | 33 + utils/sui-tokens/src/default.tokens.config.ts | 290 ++++++ utils/sui-tokens/src/generate.ts | 59 ++ utils/sui-tokens/src/schema.ts | 97 ++ utils/sui-tokens/src/types.ts | 211 +++++ utils/sui-tokens/tsconfig.json | 19 + 28 files changed, 1997 insertions(+), 122 deletions(-) create mode 100644 utils/sui-tokens/.gitignore create mode 100644 utils/sui-tokens/.npmignore create mode 100644 utils/sui-tokens/CHANGELOG.md create mode 100644 utils/sui-tokens/LICENSE.md create mode 100644 utils/sui-tokens/README.md create mode 100755 utils/sui-tokens/bin/tokens-scss.mjs create mode 100755 utils/sui-tokens/bin/tokens.mjs create mode 100644 utils/sui-tokens/milanuncios.tokens.config.ts create mode 100644 utils/sui-tokens/package.json create mode 100644 utils/sui-tokens/src/build.ts create mode 100644 utils/sui-tokens/src/checker.ts create mode 100644 utils/sui-tokens/src/default.tokens.config.ts create mode 100644 utils/sui-tokens/src/generate.ts create mode 100644 utils/sui-tokens/src/schema.ts create mode 100644 utils/sui-tokens/src/types.ts create mode 100644 utils/sui-tokens/tsconfig.json diff --git a/components/atom/tag/demo/index.js b/components/atom/tag/demo/index.js index 010727e5c4..be385fbf6c 100644 --- a/components/atom/tag/demo/index.js +++ b/components/atom/tag/demo/index.js @@ -4,9 +4,9 @@ import ArticleActionable from './articles/ArticleActionable.js' import ArticleDesign from './articles/ArticleDesign.js' import ArticleIcons from './articles/ArticleIcons.js' import ArticleIsFitted from './articles/ArticleIsFitted.js' +import ArticleResponsive from './articles/ArticleResponsive.js' import ArticleSize from './articles/ArticleSize.js' import ArticleTypes from './articles/ArticleTypes.js' -import ArticleResponsive from './articles/ArticleResponsive.js' import {CLASS_SECTION, closeIcon, icon} from './settings.js' import './index.scss' diff --git a/components/molecule/photoUploader/src/ThumbCard/index.js b/components/molecule/photoUploader/src/ThumbCard/index.js index f69f56704f..22f5c85a78 100644 --- a/components/molecule/photoUploader/src/ThumbCard/index.js +++ b/components/molecule/photoUploader/src/ThumbCard/index.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import AtomIcon, {ATOM_ICON_SIZES} from '@s-ui/react-atom-icon' +import {DEFAULT_VIEW_TYPE, VIEW_TYPE} from './../config.js' import { ACTION_THUMB_CARD_CLASS_NAME, BUTTON_THUMB_CARD_CLASS_NAME, @@ -12,8 +13,6 @@ import { THUMB_CARD_CLASS_NAME } from './config.js' -import {DEFAULT_VIEW_TYPE, VIEW_TYPE} from './../config.js' - const ThumbCard = ({ iconSize = ATOM_ICON_SIZES.small, callbackDeleteItem, diff --git a/components/molecule/photoUploader/src/index.js b/components/molecule/photoUploader/src/index.js index e669efd4ca..09b6b7f819 100644 --- a/components/molecule/photoUploader/src/index.js +++ b/components/molecule/photoUploader/src/index.js @@ -24,12 +24,12 @@ import { DEFAULT_MAX_IMAGE_HEIGHT, DEFAULT_MAX_IMAGE_WIDTH, DEFAULT_NOTIFICATION_ERROR, + DEFAULT_VIEW_TYPE, DRAG_STATE_STATUS_REJECTED, DROPZONE_CLASS_NAME, REJECT_FILES_REASONS, ROTATION_DIRECTION, - VIEW_TYPE, - DEFAULT_VIEW_TYPE + VIEW_TYPE } from './config.js' import {filterValidFiles, loadInitialPhotos, prepareFiles} from './fileTools.js' diff --git a/components/molecule/select/src/components/SingleSelection.js b/components/molecule/select/src/components/SingleSelection.js index 597fc63037..db403fd5a2 100644 --- a/components/molecule/select/src/components/SingleSelection.js +++ b/components/molecule/select/src/components/SingleSelection.js @@ -6,9 +6,9 @@ import AtomInput, {inputTypes} from '@s-ui/react-atom-input' import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list' import { - useDropdown, + SELECT_DROPDOWN_LIST_SIZES as dropdownListSizes, SELECT_INPUT_SIZES as inputSizes, - SELECT_DROPDOWN_LIST_SIZES as dropdownListSizes + useDropdown } from '../config.js' import MoleculeInputSelect from './MoleculeInputSelect.js' import Search from './Search.js' diff --git a/components/molecule/select/src/index.js b/components/molecule/select/src/index.js index be6aead565..6450440bba 100644 --- a/components/molecule/select/src/index.js +++ b/components/molecule/select/src/index.js @@ -23,10 +23,10 @@ import { ENABLED_KEYS, getClassName, getOptionData, - SELECT_STATES, - SELECTION_KEYS, + SELECT_DROPDOWN_LIST_SIZES, SELECT_INPUT_SIZES, - SELECT_DROPDOWN_LIST_SIZES + SELECT_STATES, + SELECTION_KEYS } from './config.js' const useFunctionalRef = () => useReducer((_s, node) => node, null) diff --git a/components/molecule/selectPopover/src/components/SelectIcon.js b/components/molecule/selectPopover/src/components/SelectIcon.js index 816a0229cb..2a4f9f7341 100644 --- a/components/molecule/selectPopover/src/components/SelectIcon.js +++ b/components/molecule/selectPopover/src/components/SelectIcon.js @@ -1,5 +1,7 @@ import PropTypes from 'prop-types' + import AtomButton, {atomButtonDesigns, atomButtonShapes, atomButtonSizes} from '@s-ui/react-atom-button' + import {BASE_CLASS} from '../config.js' const NO_OP = () => {} diff --git a/components/molecule/selectPopover/src/index.js b/components/molecule/selectPopover/src/index.js index 33e8fdd825..fcb38528f1 100644 --- a/components/molecule/selectPopover/src/index.js +++ b/components/molecule/selectPopover/src/index.js @@ -5,9 +5,9 @@ import PropTypes from 'prop-types' import usePortal from '@s-ui/react-hook-use-portal' +import SelectIcon from './components/SelectIcon.js' import {BASE_CLASS, getPlacement, OVERLAY_TYPES, PLACEMENTS, SHAPES, SIZES} from './config.js' import RenderActions from './RenderActions.js' -import SelectIcon from './components/SelectIcon.js' function usePrevious(value) { const ref = useRef() diff --git a/components/molecule/selectPopover/test/index.test.js b/components/molecule/selectPopover/test/index.test.js index 23b4cb06df..c1ec6e3680 100644 --- a/components/molecule/selectPopover/test/index.test.js +++ b/components/molecule/selectPopover/test/index.test.js @@ -9,14 +9,14 @@ import ReactDOM from 'react-dom' import chai, {expect} from 'chai' import chaiDOM from 'chai-dom' +import sinon from 'sinon' import {fireEvent} from '@testing-library/react' -import sinon from 'sinon' +import IconClose from '../../../atom/popover/demo/Icons/IconClose.js' import json from '../package.json' import {PLACEMENTS} from '../src/config.js' import * as pkg from '../src/index.js' -import IconClose from '../../../atom/popover/demo/Icons/IconClose.js' chai.use(chaiDOM) diff --git a/components/molecule/stepper/src/Step/DefaultStep.js b/components/molecule/stepper/src/Step/DefaultStep.js index 2df00bf87d..8b3a0a067d 100644 --- a/components/molecule/stepper/src/Step/DefaultStep.js +++ b/components/molecule/stepper/src/Step/DefaultStep.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import {naturalNumber} from '../prop-types.js' import {ALIGNMENT, DESIGN} from '../settings.js' -import {BASE_CLASS_STEP_LABEL, BASE_CLASS_STEP_ICON, getIcon, getLabel} from './settings.js' +import {BASE_CLASS_STEP_ICON, BASE_CLASS_STEP_LABEL, getIcon, getLabel} from './settings.js' const DefaultStep = ({ alignment, diff --git a/package-lock.json b/package-lock.json index 1c9f7951c9..929cc9a9cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3698,6 +3698,182 @@ "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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", @@ -3714,6 +3890,198 @@ "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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" + ], + "dev": true, + "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", @@ -4565,9 +4933,9 @@ } }, "node_modules/@s-ui/js": { - "version": "2.36.0", - "resolved": "https://registry.npmjs.org/@s-ui/js/-/js-2.36.0.tgz", - "integrity": "sha512-iqbtAj09mDoUm6MPIbh5YY6xR+NUcTJs5Ln9nMe4QeF5R/cOaOpYKZX4eSkZK6ydnKq6R/V5359ck8kt/RgAKQ==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@s-ui/js/-/js-2.37.0.tgz", + "integrity": "sha512-NAvBw5eFIxrQBMYJ+XNxy1MaE0+0aWINhnuaoCe6AYSVh/oMF1lBJHG6zsXdHJ5xofB3R7iNKmDA8cWJvOXRoA==", "dependencies": { "bowser": "2.11.0", "cookie": "0.7.0", @@ -4578,7 +4946,7 @@ "just-kebab-case": "1.1.0", "lodash.debounce": "4.0.8", "lodash.throttle": "4.1.1", - "nanoid": "3.3.1", + "nanoid": "3.3.7", "qs": "6.13.0", "remove-accents": "0.4.2" } @@ -4627,9 +4995,15 @@ "integrity": "sha512-ACJgj9MPgn/ac4b55OZFbPY/u57HTSkOD65ScYN1sh/js0pQP7WQh7/kFt6/NxBOHKlwVsxZWliVo7CkxF0Cjg==" }, "node_modules/@s-ui/js/node_modules/nanoid": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", - "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -4638,9 +5012,9 @@ } }, "node_modules/@s-ui/lint": { - "version": "4.53.0", - "resolved": "https://registry.npmjs.org/@s-ui/lint/-/lint-4.53.0.tgz", - "integrity": "sha512-WhXpKdo69XOgLL/wT5M2rNSE00BWZ91ayNpAU6lzZ1Irsmtcn+MwkV4t/3eUcPB1xcmMsA+zmQoz/9+EdmLw3g==", + "version": "4.55.0", + "resolved": "https://registry.npmjs.org/@s-ui/lint/-/lint-4.55.0.tgz", + "integrity": "sha512-c9ZhQLqIEaZqkuEZ98WhcqIfiBGTpbC2ihHJ0mWbLvNm2+m/GgrWyru7LswYm76154/FG0ofKpb6FH6+PgR4rw==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -4653,13 +5027,13 @@ "console-table-printer": "2.12.0", "eslint": "8.56.0", "eslint-config-prettier": "8.5.0", - "eslint-config-standard": "17.0.0", + "eslint-config-standard": "17.1.0", "eslint-config-standard-react": "13.0.0", "eslint-config-standard-with-typescript": "22.0.0", "eslint-plugin-chai-friendly": "0.7.4", "eslint-plugin-cypress": "2.15.2", "eslint-plugin-import": "2.30.0", - "eslint-plugin-jest": "27.2.1", + "eslint-plugin-jest": "27.9.0", "eslint-plugin-jest-dom": "4.0.3", "eslint-plugin-n": "15.2.5", "eslint-plugin-no-only-tests": "3.0.0", @@ -5434,9 +5808,9 @@ } }, "node_modules/@s-ui/studio": { - "version": "11.47.0", - "resolved": "https://registry.npmjs.org/@s-ui/studio/-/studio-11.47.0.tgz", - "integrity": "sha512-h1pWKK2CBatIWUgOVa38Hmr1JpKCr+fDzHoUfXejblzcSQZHeDP3mWeR0qox7lU3x/jmQ9zXZhQJG/yENQQdVw==", + "version": "11.48.0", + "resolved": "https://registry.npmjs.org/@s-ui/studio/-/studio-11.48.0.tgz", + "integrity": "sha512-gDME046C5abDMMzti3N+f9sDx6n6AJjrP7+zq0qwY7UDCbOXsQGk9AcLNW+YUMrvWmcbMkjdVV4Ho7okuUH2ww==", "dev": true, "dependencies": { "@babel/cli": "7", @@ -5504,9 +5878,9 @@ } }, "node_modules/@s-ui/test": { - "version": "8.40.0", - "resolved": "https://registry.npmjs.org/@s-ui/test/-/test-8.40.0.tgz", - "integrity": "sha512-MgV6ZhgNCwAFGBjadMzP4Ix2GzhfuY2mQMIwXqJjfzPQNiLUWvQMnzTuAm9qNNfXtAegle0VNbdaMKLC3Sh4xA==", + "version": "8.41.0", + "resolved": "https://registry.npmjs.org/@s-ui/test/-/test-8.41.0.tgz", + "integrity": "sha512-NwpYxtC7mPN+a0Sh8vwB8QZX0B7m5wwnzie2hysRGbunF/AYC+xk4iUKAoNpAdnMJPDx4B5M0EM7ZHQmO54dUg==", "dev": true, "dependencies": { "@babel/core": "7.18.10", @@ -5591,6 +5965,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", @@ -6058,9 +6436,9 @@ } }, "node_modules/@types/express-serve-static-core": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.1.tgz", - "integrity": "sha512-CRICJIl0N5cXDONAdlTv5ShATZ4HEwk6kDDIW2/w9qOWKg+NU/5F8wYRWCrONad0/UKkloNSmmyN/wX4rtpbVA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz", + "integrity": "sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==", "dev": true, "dependencies": { "@types/node": "*", @@ -6162,12 +6540,12 @@ "dev": true }, "node_modules/@types/node": { - "version": "22.9.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz", - "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==", + "version": "22.10.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz", + "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==", "dev": true, "dependencies": { - "undici-types": "~6.19.8" + "undici-types": "~6.20.0" } }, "node_modules/@types/node-forge": { @@ -7704,9 +8082,9 @@ "dev": true }, "node_modules/bonjour-service": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.2.1.tgz", - "integrity": "sha512-oSzCS2zV14bh2kji6vNe7vrpJYCHGvcZnlffFQ1MEoX/WOeQ/teD8SYWKR942OI3INjq8OMNJlbPK5LLLUxFDw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz", + "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==", "dev": true, "dependencies": { "fast-deep-equal": "^3.1.3", @@ -7949,9 +8327,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001680", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz", - "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==", + "version": "1.0.30001684", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz", + "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==", "dev": true, "funding": [ { @@ -8014,6 +8392,12 @@ "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==", + "dev": true + }, "node_modules/check-error": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz", @@ -8050,6 +8434,12 @@ "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==", + "dev": true + }, "node_modules/chrome-trace-event": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", @@ -8695,9 +9085,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz", - "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "dependencies": { "path-key": "^3.1.0", @@ -9225,6 +9615,15 @@ "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==", + "dev": true, + "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", @@ -9603,9 +10002,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.56", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.56.tgz", - "integrity": "sha512-7lXb9dAvimCFdvUMTyucD4mnIndt/xhRKFAlky0CyFogdnNmdPQNoHI23msF/2V4mpTxMzgMdjK4+YRlFlRQZw==", + "version": "1.5.66", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.66.tgz", + "integrity": "sha512-pI2QF6+i+zjPbqRzJwkMvtvkdI7MjVbSh2g8dlMguDJIXEPw+kwasS1Jl+YGPEBfGVxsVgGUratAKymPdPo2vQ==", "dev": true }, "node_modules/emoji-regex": { @@ -9735,9 +10134,9 @@ } }, "node_modules/es-abstract": { - "version": "1.23.3", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", - "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==", + "version": "1.23.5", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.5.tgz", + "integrity": "sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.1", @@ -9755,7 +10154,7 @@ "function.prototype.name": "^1.1.6", "get-intrinsic": "^1.2.4", "get-symbol-description": "^1.0.2", - "globalthis": "^1.0.3", + "globalthis": "^1.0.4", "gopd": "^1.0.1", "has-property-descriptors": "^1.0.2", "has-proto": "^1.0.3", @@ -9771,10 +10170,10 @@ "is-string": "^1.0.7", "is-typed-array": "^1.1.13", "is-weakref": "^1.0.2", - "object-inspect": "^1.13.1", + "object-inspect": "^1.13.3", "object-keys": "^1.1.1", "object.assign": "^4.1.5", - "regexp.prototype.flags": "^1.5.2", + "regexp.prototype.flags": "^1.5.3", "safe-array-concat": "^1.1.2", "safe-regex-test": "^1.0.3", "string.prototype.trim": "^1.2.9", @@ -9881,14 +10280,14 @@ } }, "node_modules/es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz", + "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==", "dev": true, "dependencies": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" + "is-callable": "^1.2.7", + "is-date-object": "^1.0.5", + "is-symbol": "^1.0.4" }, "engines": { "node": ">= 0.4" @@ -10349,9 +10748,9 @@ } }, "node_modules/eslint-config-standard": { - "version": "17.0.0", - "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz", - "integrity": "sha512-/2ks1GKyqSOkH7JFvXJicu0iMpoojkwB+f5Du/1SC0PtBL+s8v30k9njRZ21pm2drKYm2342jFnGWzttxPmZVg==", + "version": "17.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz", + "integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==", "dev": true, "funding": [ { @@ -10367,10 +10766,13 @@ "url": "https://feross.org/support" } ], + "engines": { + "node": ">=12.0.0" + }, "peerDependencies": { "eslint": "^8.0.1", "eslint-plugin-import": "^2.25.2", - "eslint-plugin-n": "^15.0.0", + "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", "eslint-plugin-promise": "^6.0.0" } }, @@ -10418,6 +10820,32 @@ "typescript": "*" } }, + "node_modules/eslint-config-standard-with-typescript/node_modules/eslint-config-standard": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz", + "integrity": "sha512-/2ks1GKyqSOkH7JFvXJicu0iMpoojkwB+f5Du/1SC0PtBL+s8v30k9njRZ21pm2drKYm2342jFnGWzttxPmZVg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "peerDependencies": { + "eslint": "^8.0.1", + "eslint-plugin-import": "^2.25.2", + "eslint-plugin-n": "^15.0.0", + "eslint-plugin-promise": "^6.0.0" + } + }, "node_modules/eslint-import-resolver-node": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz", @@ -10612,9 +11040,9 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "27.2.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz", - "integrity": "sha512-l067Uxx7ZT8cO9NJuf+eJHvt6bqJyz2Z29wykyEdz/OtmcELQl2MQGQLX8J94O1cSJWAwUSEvCjwjA7KEK3Hmg==", + "version": "27.9.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.9.0.tgz", + "integrity": "sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==", "dev": true, "dependencies": { "@typescript-eslint/utils": "^5.10.0" @@ -10623,8 +11051,9 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" }, "peerDependencies": { - "@typescript-eslint/eslint-plugin": "^5.0.0", - "eslint": "^7.0.0 || ^8.0.0" + "@typescript-eslint/eslint-plugin": "^5.0.0 || ^6.0.0 || ^7.0.0", + "eslint": "^7.0.0 || ^8.0.0", + "jest": "*" }, "peerDependenciesMeta": { "@typescript-eslint/eslint-plugin": { @@ -11673,9 +12102,9 @@ } }, "node_modules/flatted": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", - "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz", + "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==", "dev": true }, "node_modules/flux": { @@ -11975,6 +12404,18 @@ "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==", + "dev": true, + "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", @@ -12926,6 +13367,21 @@ "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", "dev": true }, + "node_modules/is-async-function": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz", + "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==", + "dev": true, + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-bigint": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", @@ -13045,6 +13501,21 @@ "node": ">=0.10.0" } }, + "node_modules/is-finalizationregistry": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.0.tgz", + "integrity": "sha512-qfMdqbAQEwBw78ZyReKnlA8ezmPdb9BemzIIip/JkjaZUhitfXDkkr+3QTboW0JrSXT1QWyYShpvnNHGZ4c4yA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -15664,9 +16135,9 @@ } }, "node_modules/p-retry": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.0.tgz", - "integrity": "sha512-JA6nkq6hKyWLLasXQXUrO4z8BUZGUt/LjlJxx8Gb2+2ntodU/SS63YZ8b0LUTbQ8ZB9iwOfhEPhg4ykKnn2KsA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.1.tgz", + "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==", "dev": true, "dependencies": { "@types/retry": "0.12.2", @@ -16197,9 +16668,9 @@ } }, "node_modules/postcss-load-config/node_modules/yaml": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz", - "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz", + "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==", "dev": true, "bin": { "yaml": "bin.mjs" @@ -16752,9 +17223,9 @@ "dev": true }, "node_modules/postcss/node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ { @@ -17352,9 +17823,9 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-joyride": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.2.tgz", - "integrity": "sha512-DQ3m3W/GeoASv4UE9ZaadFp3ACJusV0kjjBe7zTpPwWuHpvEoofc+2TCJkru0lbA+G9l39+vPVttcJA/p1XeSA==", + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz", + "integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==", "dependencies": { "@gilbarbara/deep-equal": "^0.3.1", "deep-diff": "^1.0.2", @@ -17366,7 +17837,7 @@ "scroll": "^3.0.1", "scrollparent": "^2.1.0", "tree-changes": "^0.11.2", - "type-fest": "^4.26.1" + "type-fest": "^4.27.0" }, "peerDependencies": { "react": "15 - 18", @@ -17374,9 +17845,9 @@ } }, "node_modules/react-joyride/node_modules/type-fest": { - "version": "4.26.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz", - "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==", + "version": "4.29.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.29.0.tgz", + "integrity": "sha512-RPYt6dKyemXJe7I6oNstcH24myUGSReicxcHTvCLgzm4e0n8y05dGvcGB15/SoPRBmhlMthWQ9pvKyL81ko8nQ==", "engines": { "node": ">=16" }, @@ -17507,9 +17978,9 @@ "dev": true }, "node_modules/react-textarea-autosize": { - "version": "8.5.4", - "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.4.tgz", - "integrity": "sha512-eSSjVtRLcLfFwFcariT77t9hcbVJHQV76b51QjQGarQIHml2+gM2lms0n3XrhnDmgK5B+/Z7TmQk5OHNzqYm/A==", + "version": "8.5.5", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.5.tgz", + "integrity": "sha512-CVA94zmfp8m4bSHtWwmANaBR8EPsKy2aZ7KwqhoS4Ftib87F9Kvi7XQhOixypPLMc6kVYgOXvKFuuzZDpHGRPg==", "dependencies": { "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", @@ -17805,6 +18276,27 @@ "node": ">=8" } }, + "node_modules/reflect.getprototypeof": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.7.tgz", + "integrity": "sha512-bMvFGIUKlc/eSfXNX+aZ+EL95/EgZzuwA0OBPTbZZDEJw/0AkentjMuM1oiRfwHrshqk4RzdgiTg5CcDalXN5g==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.5", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "which-builtin-type": "^1.1.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -17867,15 +18359,15 @@ } }, "node_modules/regexpu-core": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.1.1.tgz", - "integrity": "sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz", + "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==", "dev": true, "dependencies": { "regenerate": "^1.4.2", "regenerate-unicode-properties": "^10.2.0", "regjsgen": "^0.8.0", - "regjsparser": "^0.11.0", + "regjsparser": "^0.12.0", "unicode-match-property-ecmascript": "^2.0.0", "unicode-match-property-value-ecmascript": "^2.1.0" }, @@ -17890,9 +18382,9 @@ "dev": true }, "node_modules/regjsparser": { - "version": "0.11.2", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.2.tgz", - "integrity": "sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA==", + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz", + "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==", "dev": true, "dependencies": { "jsesc": "~3.0.2" @@ -17992,6 +18484,15 @@ "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==", + "dev": true, + "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", @@ -18508,10 +19009,13 @@ } }, "node_modules/shell-quote": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", - "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==", + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz", + "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==", "dev": true, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -20262,6 +20766,80 @@ "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==", + "dev": true, + "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" + ], + "dev": true, + "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==", + "dev": true, + "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", @@ -20348,9 +20926,9 @@ } }, "node_modules/typed-array-byte-offset": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz", - "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.3.tgz", + "integrity": "sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw==", "dev": true, "dependencies": { "available-typed-arrays": "^1.0.7", @@ -20358,7 +20936,8 @@ "for-each": "^0.3.3", "gopd": "^1.0.1", "has-proto": "^1.0.3", - "is-typed-array": "^1.1.13" + "is-typed-array": "^1.1.13", + "reflect.getprototypeof": "^1.0.6" }, "engines": { "node": ">= 0.4" @@ -20368,17 +20947,17 @@ } }, "node_modules/typed-array-length": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz", - "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz", + "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==", "dev": true, "dependencies": { "call-bind": "^1.0.7", "for-each": "^0.3.3", "gopd": "^1.0.1", - "has-proto": "^1.0.3", "is-typed-array": "^1.1.13", - "possible-typed-array-names": "^1.0.0" + "possible-typed-array-names": "^1.0.0", + "reflect.getprototypeof": "^1.0.6" }, "engines": { "node": ">= 0.4" @@ -20457,9 +21036,9 @@ } }, "node_modules/undici-types": { - "version": "6.19.8", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", "dev": true }, "node_modules/unicode-canonical-property-names-ecmascript": { @@ -21205,6 +21784,39 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/which-builtin-type": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.0.tgz", + "integrity": "sha512-I+qLGQ/vucCby4tf5HsLmGueEla4ZhwTBSqaooS+Y0BuxN4Cp+okmGuV+8mXZ84KDI9BA+oklo+RzKg0ONdSUA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "function.prototype.name": "^1.1.6", + "has-tostringtag": "^1.0.2", + "is-async-function": "^2.0.0", + "is-date-object": "^1.0.5", + "is-finalizationregistry": "^1.1.0", + "is-generator-function": "^1.0.10", + "is-regex": "^1.1.4", + "is-weakref": "^1.0.2", + "isarray": "^2.0.5", + "which-boxed-primitive": "^1.0.2", + "which-collection": "^1.0.2", + "which-typed-array": "^1.1.15" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/which-builtin-type/node_modules/isarray": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", + "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==", + "dev": true + }, "node_modules/which-collection": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz", @@ -21224,9 +21836,9 @@ } }, "node_modules/which-typed-array": { - "version": "1.1.15", - "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz", - "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==", + "version": "1.1.16", + "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.16.tgz", + "integrity": "sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ==", "dev": true, "dependencies": { "available-typed-arrays": "^1.0.7", @@ -21464,6 +22076,15 @@ "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==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, "utils/sui-component-dependencies": { "name": "@s-ui/component-dependencies", "version": "1.9.0", @@ -21477,6 +22098,41 @@ "name": "@s-ui/theme", "version": "8.127.0", "license": "MIT" + }, + "utils/sui-tokens": { + "name": "@s-ui/tokens", + "version": "0.0.0", + "license": "MIT", + "bin": { + "sui-tokens": "bin/sui-tokens" + }, + "devDependencies": { + "chalk": "4.1.2", + "change-case": "5.4.4", + "chroma-js": "2.6.0", + "commander": "8.3.0", + "deepmerge-ts": "^4.0.0", + "lodash.get": "^4.4.2", + "tsx": "4.19.2", + "typescript": "4.9.5", + "zod": "3.23.8" + }, + "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==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } } } } diff --git a/tsconfig.json b/tsconfig.json index fe8633bd08..7e238343a5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,5 @@ "extends": "@s-ui/bundler/tsconfig.json", "compilerOptions": { "rootDir": "./" - }, - "include": ["src", "domain", "components"] -} \ No newline at end of file + } +} diff --git a/utils/sui-theme/LICENSE.md b/utils/sui-theme/LICENSE.md index f4155c1a2c..f5c7cf9531 100644 --- a/utils/sui-theme/LICENSE.md +++ b/utils/sui-theme/LICENSE.md @@ -1,3 +1,4 @@ + MIT License Copyright (c) 2021 SUI diff --git a/utils/sui-tokens/.gitignore b/utils/sui-tokens/.gitignore new file mode 100644 index 0000000000..a9f4ed5456 --- /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 0000000000..9c0df20f8b --- /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 0000000000..505d21df1d --- /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 0000000000..f4155c1a2c --- /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 0000000000..db87f9eb3f --- /dev/null +++ b/utils/sui-tokens/README.md @@ -0,0 +1,12 @@ +# 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 +``` diff --git a/utils/sui-tokens/bin/tokens-scss.mjs b/utils/sui-tokens/bin/tokens-scss.mjs new file mode 100755 index 0000000000..9de76a1e50 --- /dev/null +++ b/utils/sui-tokens/bin/tokens-scss.mjs @@ -0,0 +1,15 @@ +#!/usr/bin/env node --import tsx + +import {Command} from 'commander' + +import {run} 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') + .action(run) + +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 0000000000..78cdefb55d --- /dev/null +++ b/utils/sui-tokens/bin/tokens.mjs @@ -0,0 +1,13 @@ +#!/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.parse(process.argv) diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts new file mode 100644 index 0000000000..447353fbd6 --- /dev/null +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -0,0 +1,290 @@ +import chroma from 'chroma-js' + +import {type Theme, type ThemePrimitive} from './src/types' + +const theme: Theme = { + primitive: { + size: '16px', + 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' + } + }, + colorSpace: 'rgb', + opacity: { + full: 1, + dim1: 0.72, + dim2: 0.68, + dim3: 0.4, + dim4: 0.16, + dim5: 0.08, + none: 0 + } + }, + semantic: ({color, opacity}: ThemePrimitive) => ({ + color: { + brand: { + main: color.hero[500], + mainHovered: color.hero[400], + mainPressed: color.hero[400], + mainFocused: color.hero[400], + mainDisabled: chroma(color.hero[400]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + onSupportVariant: color.base.bright + }, + status: { + success: color.hero[500], + successHovered: color.hero[400], + successPressed: color.hero[400], + successFocused: color.hero[400], + successDisabled: chroma(color.hero[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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 0000000000..59038fed69 --- /dev/null +++ b/utils/sui-tokens/package.json @@ -0,0 +1,42 @@ +{ + "name": "@s-ui/tokens", + "version": "0.0.0", + "description": "Tool for manipulate @s-ui tokens.", + "publishConfig": { + "access": "public" + }, + "engines": { + "node": ">=20.0.0" + }, + "bin": { + "sui-tokens": "bin/sui-tokens" + }, + "keywords": [ + "tokens", + "sui" + ], + "devDependencies": { + "chalk": "4.1.2", + "change-case": "5.4.4", + "chroma-js": "2.6.0", + "commander": "8.3.0", + "deepmerge-ts": "^4.0.0", + "lodash.get": "^4.4.2", + "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 0000000000..b0659c669e --- /dev/null +++ b/utils/sui-tokens/src/build.ts @@ -0,0 +1,107 @@ +// 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 {Theme, ThemePrimitive} from './types' + +const colorFn = (colorSpace: ThemePrimitive['colorSpace']) => (v: string) => { + switch (colorSpace) { + case 'hex': + return chroma(v).css() + case 'rgb': + return chroma(v).css('rgb') + } +} + +export function build(tokensConfig?: Theme) { + const buildPrimitive = (primitive: ThemePrimitive) => { + const colorSpace = primitive?.colorSpace + const colorTx = colorFn(colorSpace) + return { + color: Object.entries(primitive.color).reduce((acc, [key, value]) => { + if (typeof value === 'string' && colorParser.safeParse(value).success) { + acc[key] = colorTx(value) + } else if (colorRampParser.safeParse(value).success) { + acc[key] = Object.entries(value).reduce((acc, [rampKey, rampValue]) => { + acc[rampKey] = colorTx(rampValue) + return acc + }, {}) + } + return acc + }, {}), + colorSpace: primitive.colorSpace, + opacity: primitive.opacity, + size: primitive.size + } + } + + const protoPrimitive = + tokensConfig?.primitive != null + ? deepmerge(defaultTokensConfig.primitive, tokensConfig.primitive) + : defaultTokensConfig.primitive + const primitive = buildPrimitive(protoPrimitive) + + const semantic = + tokensConfig?.semantic != null + ? deepmerge(defaultTokensConfig.semantic(defaultTokensConfig.primitive), tokensConfig.semantic(primitive)) + : defaultTokensConfig.semantic(primitive) + + return { + 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) { + console.log(chalk.red(`💥 Error writing file: ${error.message as string}`)) + process.exit(1) + } + } else { + console.log(data) + process.exit(0) + } +} + +export const run = async ({configuration, output}: {configuration?: string; output?: string}) => { + 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(result), 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 0000000000..ce198c37a1 --- /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 0000000000..02fefe33e6 --- /dev/null +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -0,0 +1,290 @@ +import chroma from 'chroma-js' + +import {type Theme, type ThemePrimitive} from './types' + +const theme: Theme = { + primitive: { + size: '16px', + 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' + } + }, + colorSpace: 'rgb', + opacity: { + full: 1, + dim1: 0.72, + dim2: 0.68, + dim3: 0.4, + dim4: 0.16, + dim5: 0.08, + none: 0 + } + }, + semantic: ({color, opacity}: ThemePrimitive) => ({ + color: { + brand: { + main: color.hero[500], + mainHovered: color.hero[400], + mainPressed: color.hero[400], + mainFocused: color.hero[400], + mainDisabled: chroma(color.hero[400]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + onSupportVariant: color.base.bright + }, + status: { + success: color.hero[500], + successHovered: color.hero[400], + successPressed: color.hero[400], + successFocused: color.hero[400], + successDisabled: chroma(color.hero[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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/src/generate.ts b/utils/sui-tokens/src/generate.ts new file mode 100644 index 0000000000..3cc339bc90 --- /dev/null +++ b/utils/sui-tokens/src/generate.ts @@ -0,0 +1,59 @@ +import {kebabCase} from 'change-case' + +import {type SemanticShape, type ThemePrimitive} from './types' + +const anidate = (accumulator: Map, [key, value]) => { + if (typeof value === 'string' || typeof value === 'number') { + accumulator.set(`--${kebabCase(key)}`, value) + } 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, string]) => { + anidate(accumulator, [`${kebabCase(key)}-${kebabCase(objectKey)}`, objectValue]) + }) + } else if (Array.isArray(value)) { + value.forEach((arrayValue, arrayIndex) => { + anidate(accumulator, [`${kebabCase(key)}-${arrayIndex}`, arrayValue]) + }) + } + return accumulator +} + +export const generate = ({primitive, semantic}: {primitive: ThemePrimitive; semantic: SemanticShape}) => { + const primitivesMap = new Map() + let primitives = '' + + Object.entries(primitive).forEach(([key, value]) => { + anidate(primitivesMap, [key, value]) + }) + + primitivesMap.forEach((value: string, key: string) => { + primitives += ` + ${key}: ${value};` + }) + + const semanticsMap = new Map() + let semantics = '' + + Object.entries(semantic).forEach(([key, value]) => { + anidate(semanticsMap, [key, value]) + }) + + semanticsMap.forEach((value: string, key: string) => { + semantics += ` + ${key}: ${value};` + }) + + const template = `// This file is auto-generated by sui-tokens +@layer tokens { + @layer primitives {${primitives} + } + + @layer semantics {${semantics} + } +} + ` + return template +} diff --git a/utils/sui-tokens/src/schema.ts b/utils/sui-tokens/src/schema.ts new file mode 100644 index 0000000000..591b93edfc --- /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 0000000000..f0a7c9a7da --- /dev/null +++ b/utils/sui-tokens/src/types.ts @@ -0,0 +1,211 @@ +export interface ColorRamp { + [key: string | number]: string +} + +export interface ColorPrimitives { + [key: string]: ColorRamp +} + +export interface OpacityPrimitive { + [key: string]: number +} + +export interface ColorType { + name: string + color: string + convert: () => { + [key: string]: string + } +} + +export type Base = string + +export interface ThemePrimitive { + color: ColorPrimitives + colorSpace: 'hex' | 'rgb' + opacity: OpacityPrimitive + size: string +} + +export type propertySyntax = + | 'angle' + | 'color' + | 'custom-ident' + | 'image' + | 'integer' + | 'length' + | 'length-percentage' + | 'number' + | 'percentage' + | 'resolution' + | 'string' + | 'time' + | 'transform-function' + | 'transform-list' + | 'url' + +export interface SemanticShape { + 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 + } + status: { + 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: { + 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 + } + } +} + +export interface Theme { + primitive: ThemePrimitive + semantic: (themePrimitives: ThemePrimitive) => SemanticShape +} diff --git a/utils/sui-tokens/tsconfig.json b/utils/sui-tokens/tsconfig.json new file mode 100644 index 0000000000..1860e13685 --- /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 + } +} From 3de49d48a9272375bd73b6eff4add7ea3f55fd32 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 3 Dec 2024 09:28:31 +0100 Subject: [PATCH 02/42] feat(utils/sui-tokens): lint --- utils/sui-tokens/milanuncios.tokens.config.ts | 2 +- utils/sui-tokens/src/build.ts | 6 +- utils/sui-tokens/src/default.tokens.config.ts | 130 +++++++++++++++++- utils/sui-tokens/src/generate.ts | 86 ++++++++---- utils/sui-tokens/src/types.ts | 28 +++- 5 files changed, 220 insertions(+), 32 deletions(-) diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts index 447353fbd6..fdb489a90d 100644 --- a/utils/sui-tokens/milanuncios.tokens.config.ts +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -4,7 +4,7 @@ import {type Theme, type ThemePrimitive} from './src/types' const theme: Theme = { primitive: { - size: '16px', + fontSize: '16px', color: { hero: { 50: '#F2FCF7', diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index b0659c669e..0cc9e8eb4f 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -27,6 +27,7 @@ export function build(tokensConfig?: Theme) { const colorSpace = primitive?.colorSpace const colorTx = colorFn(colorSpace) return { + prefix: primitive.prefix, color: Object.entries(primitive.color).reduce((acc, [key, value]) => { if (typeof value === 'string' && colorParser.safeParse(value).success) { acc[key] = colorTx(value) @@ -40,7 +41,10 @@ export function build(tokensConfig?: Theme) { }, {}), colorSpace: primitive.colorSpace, opacity: primitive.opacity, - size: primitive.size + fontsize: primitive.fontSize, + fontFamily: primitive.fontFamily, + size: primitive.size, + elevation: primitive.elevation } } diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index 02fefe33e6..d032673e70 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -4,7 +4,13 @@ import {type Theme, type ThemePrimitive} from './types' const theme: Theme = { primitive: { - size: '16px', + prefix: 's-ui', + fontSize: '16px', + 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: { hero: { 50: '#F2FCF7', @@ -113,9 +119,91 @@ const theme: Theme = { 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}: ThemePrimitive) => ({ + semantic: ({color, opacity, elevation, size, fontSize, fontFamily}: ThemePrimitive) => ({ color: { brand: { main: color.hero[500], @@ -283,7 +371,43 @@ const theme: Theme = { 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(', '), + serif: fontFamily.serif.join(', '), + mono: fontFamily.mono.join(', ') + } + }, + opacity, + spacing: { + size + }, + elevation }) } diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 3cc339bc90..5606cca403 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -4,7 +4,7 @@ import {type SemanticShape, type ThemePrimitive} from './types' const anidate = (accumulator: Map, [key, value]) => { if (typeof value === 'string' || typeof value === 'number') { - accumulator.set(`--${kebabCase(key)}`, value) + accumulator.set(`${kebabCase(key)}`, value) } else if (Array.isArray(value)) { value.forEach((arrayValue, arrayIndex) => { anidate(accumulator, [`${kebabCase(key)}-${arrayIndex}`, arrayValue]) @@ -22,38 +22,72 @@ const anidate = (accumulator: Map, [key, value]) => { } export const generate = ({primitive, semantic}: {primitive: ThemePrimitive; semantic: SemanticShape}) => { - const primitivesMap = new Map() - let primitives = '' + // const primitivesMap = new Map() + // let primitives = '' + // + // Object.entries(primitive).forEach(([key, value]) => { + // anidate(primitivesMap, [key, value]) + // }) + // + // primitivesMap.forEach((value: string, key: string) => { + // primitives += ` + // ${key}: ${value};` + // }) - Object.entries(primitive).forEach(([key, value]) => { - anidate(primitivesMap, [key, value]) - }) + const semanticMaps = { + color: new Map(), + font: new Map(), + opacity: new Map(), + elevation: new Map(), + spacing: new Map() + } + const semanticTokens = { + color: '', + font: '', + opacity: '', + elevation: '', + spacing: '' + } - primitivesMap.forEach((value: string, key: string) => { - primitives += ` - ${key}: ${value};` - }) + const add = (keyword: string, prefix?: string) => { + Object.entries(semantic[keyword]).forEach(([key, value]) => { + anidate(semanticMaps[keyword], [`${keyword}-${key}`, value]) + }) - const semanticsMap = new Map() - let semantics = '' + semanticTokens[keyword] = ''.concat( + ...Array.from(semanticMaps[keyword]).map( + ([key, value]: [string, string]) => ` + --${prefix === undefined ? '' : `${prefix}-`}${key}: ${value};` + ) + ) + } - Object.entries(semantic).forEach(([key, value]) => { - anidate(semanticsMap, [key, value]) - }) + const {prefix} = primitive - semanticsMap.forEach((value: string, key: string) => { - semantics += ` - ${key}: ${value};` - }) + add('color', prefix) + add('font', prefix) + add('opacity', prefix) + add('elevation', prefix) + add('spacing', prefix) - const template = `// This file is auto-generated by sui-tokens + return `// This file is auto-generated by sui-tokens @layer tokens { - @layer primitives {${primitives} - } - - @layer semantics {${semantics} + @layer semantic { + @layer color {${semanticTokens.color} + } + + @layer font {${semanticTokens.font} + } + + @layer opacity {${semanticTokens.opacity} + } + + @layer elevation {${semanticTokens.elevation} + } + + @layer spacing {${semanticTokens.spacing} + } } } - ` - return template +` } diff --git a/utils/sui-tokens/src/types.ts b/utils/sui-tokens/src/types.ts index f0a7c9a7da..ab8a57c07a 100644 --- a/utils/sui-tokens/src/types.ts +++ b/utils/sui-tokens/src/types.ts @@ -21,10 +21,20 @@ export interface ColorType { export type Base = string export interface ThemePrimitive { + prefix: string + fontSize: string + fontFamily: { + [key: string]: string[] + } color: ColorPrimitives colorSpace: 'hex' | 'rgb' opacity: OpacityPrimitive - size: string + size: { + [key: string]: string + } + elevation: { + [key: string]: number + } } export type propertySyntax = @@ -203,6 +213,22 @@ export interface SemanticShape { instagram: string } } + font: { + size: { + [key: string]: string + } + family: { + [key: string]: string + } + } + spacing: { + size: { + [key: string]: string + } + } + elevation: { + [key: string]: number + } } export interface Theme { From d4a3c696756af6bb71004075be7d7f1a70918578 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 3 Dec 2024 09:45:52 +0100 Subject: [PATCH 03/42] feat(utils/sui-tokens): new beta --- package-lock.json | 7 +- utils/sui-theme/package.json | 3 + .../src/milanuncios.tokens.config.ts | 290 ++++++++++++++++++ utils/sui-tokens/package.json | 6 +- 4 files changed, 302 insertions(+), 4 deletions(-) create mode 100644 utils/sui-theme/src/milanuncios.tokens.config.ts diff --git a/package-lock.json b/package-lock.json index 929cc9a9cd..bdf83ccfff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22097,11 +22097,14 @@ "utils/sui-theme": { "name": "@s-ui/theme", "version": "8.127.0", - "license": "MIT" + "license": "MIT", + "devDependencies": { + "@s-ui/tokens": "^0.0.0-beta.0" + } }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0", + "version": "0.0.0-beta.0", "license": "MIT", "bin": { "sui-tokens": "bin/sui-tokens" diff --git a/utils/sui-theme/package.json b/utils/sui-theme/package.json index 035c83d0d2..26036a0495 100644 --- a/utils/sui-theme/package.json +++ b/utils/sui-theme/package.json @@ -35,6 +35,9 @@ "bugs": { "url": "https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Util%3A+theme%22" }, + "devDependencies": { + "@s-ui/tokens": "0.0.0-beta.0" + }, "homepage": "https://sui-components.vercel.app/", "license": "MIT" } diff --git a/utils/sui-theme/src/milanuncios.tokens.config.ts b/utils/sui-theme/src/milanuncios.tokens.config.ts new file mode 100644 index 0000000000..fdb489a90d --- /dev/null +++ b/utils/sui-theme/src/milanuncios.tokens.config.ts @@ -0,0 +1,290 @@ +import chroma from 'chroma-js' + +import {type Theme, type ThemePrimitive} from './src/types' + +const theme: Theme = { + primitive: { + fontSize: '16px', + 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' + } + }, + colorSpace: 'rgb', + opacity: { + full: 1, + dim1: 0.72, + dim2: 0.68, + dim3: 0.4, + dim4: 0.16, + dim5: 0.08, + none: 0 + } + }, + semantic: ({color, opacity}: ThemePrimitive) => ({ + color: { + brand: { + main: color.hero[500], + mainHovered: color.hero[400], + mainPressed: color.hero[400], + mainFocused: color.hero[400], + mainDisabled: chroma(color.hero[400]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + onSupportVariant: color.base.bright + }, + status: { + success: color.hero[500], + successHovered: color.hero[400], + successPressed: color.hero[400], + successFocused: color.hero[400], + successDisabled: chroma(color.hero[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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 index 59038fed69..7fdb5d927b 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0", + "version": "0.0.0-beta.1", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" @@ -9,7 +9,9 @@ "node": ">=20.0.0" }, "bin": { - "sui-tokens": "bin/sui-tokens" + ".": "./bin/tokens.mjs", + "tokens": "bin/sui-tokens.mjs", + "tokens-scss": "bin/sui-tokens-scss.mjs" }, "keywords": [ "tokens", From a99581a0e9a0d454c6e707c607f9450ffde29041 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 3 Dec 2024 15:08:49 +0100 Subject: [PATCH 04/42] feat(utils/sui-tokens): module --- package-lock.json | 150 +++++++++++++++++++--------------- tsconfig.json | 5 +- utils/sui-theme/package.json | 2 +- utils/sui-tokens/package.json | 4 +- 4 files changed, 92 insertions(+), 69 deletions(-) diff --git a/package-lock.json b/package-lock.json index bdf83ccfff..1c685b4665 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5012,9 +5012,9 @@ } }, "node_modules/@s-ui/lint": { - "version": "4.55.0", - "resolved": "https://registry.npmjs.org/@s-ui/lint/-/lint-4.55.0.tgz", - "integrity": "sha512-c9ZhQLqIEaZqkuEZ98WhcqIfiBGTpbC2ihHJ0mWbLvNm2+m/GgrWyru7LswYm76154/FG0ofKpb6FH6+PgR4rw==", + "version": "4.56.0", + "resolved": "https://registry.npmjs.org/@s-ui/lint/-/lint-4.56.0.tgz", + "integrity": "sha512-uWXH9EuwmPbKAhG13OvpB4T6SIWwOMGLzvzSgQbw9D+dIw12engD4HYZ4rS4IL3g2MktAPSU5iQDyeTsVVLlIA==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -8327,9 +8327,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001684", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz", - "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==", + "version": "1.0.30001686", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz", + "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==", "dev": true, "funding": [ { @@ -10002,9 +10002,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.66", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.66.tgz", - "integrity": "sha512-pI2QF6+i+zjPbqRzJwkMvtvkdI7MjVbSh2g8dlMguDJIXEPw+kwasS1Jl+YGPEBfGVxsVgGUratAKymPdPo2vQ==", + "version": "1.5.68", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz", + "integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ==", "dev": true }, "node_modules/emoji-regex": { @@ -11345,9 +11345,9 @@ } }, "node_modules/eslint-plugin-sui": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-sui/-/eslint-plugin-sui-1.13.0.tgz", - "integrity": "sha512-HAy63wH7lk5vV82aSyKT9L42+QwYSEh/YntZPn6kGKZlK1DQnMbN44Euzj9GgzqDbA/SaA1bJhDTwaHpSttNPw==", + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-sui/-/eslint-plugin-sui-1.14.0.tgz", + "integrity": "sha512-8EdFjhRiSCGkEzXvtjVGS425rfuUWAGESVbY3xyestnZHAz0jWwYG4M9/6ZABxIdT4ezPH0GuzTFCC6e6m0CCg==", "dev": true, "dependencies": { "fast-glob": "3.3.2", @@ -12649,11 +12649,14 @@ "dev": true }, "node_modules/gopd": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", - "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.1.0.tgz", + "integrity": "sha512-FQoVQnqcdk4hVM4JN1eromaun4iuS34oStkdlLENLdpULsuQcTyXj8w7ayhuUfPwEYZ1ZOooOTT6fdA9Vmx/RA==", "dependencies": { - "get-intrinsic": "^1.1.3" + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -12771,9 +12774,12 @@ } }, "node_modules/has-proto": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", - "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.1.0.tgz", + "integrity": "sha512-QLdzI9IIO1Jg7f9GT1gXpPpXArAn6cS31R1eEZqz08Gc+uQ8/XiqHWt17Fiw+2p6oTTIq5GXEpQkAlA88YRl/Q==", + "dependencies": { + "call-bind": "^1.0.7" + }, "engines": { "node": ">= 0.4" }, @@ -12782,9 +12788,9 @@ } }, "node_modules/has-symbols": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", - "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", "engines": { "node": ">= 0.4" }, @@ -13383,12 +13389,15 @@ } }, "node_modules/is-bigint": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", - "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz", + "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==", "dev": true, "dependencies": { - "has-bigints": "^1.0.1" + "has-bigints": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -13407,13 +13416,13 @@ } }, "node_modules/is-boolean-object": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", - "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.0.tgz", + "integrity": "sha512-kR5g0+dXf/+kXnqI+lu0URKYPKgICtHGGNCDSB10AaUFj3o/HkB3u7WfpRBJGFopxxY0oH3ux7ZsDjLtK7xqvw==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" + "call-bind": "^1.0.7", + "has-tostringtag": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -13634,12 +13643,13 @@ } }, "node_modules/is-number-object": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz", - "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.0.tgz", + "integrity": "sha512-KVSZV0Dunv9DTPkhXwcZ3Q+tUc9TsaE1ZwX5J2WMvsSGS6Md8TFPun5uwh0yRdrNerI6vf/tbJxqSx4c1ZI1Lw==", "dev": true, "dependencies": { - "has-tostringtag": "^1.0.0" + "call-bind": "^1.0.7", + "has-tostringtag": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -13688,12 +13698,14 @@ } }, "node_modules/is-regex": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", - "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.0.tgz", + "integrity": "sha512-B6ohK4ZmoftlUe+uvenXSbPJFo6U37BH7oO1B3nQH8f/7h27N56s85MhUtbFJAziz5dcmuR3i8ovUl35zp8pFA==", "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" + "call-bind": "^1.0.7", + "gopd": "^1.1.0", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" }, "engines": { "node": ">= 0.4" @@ -13751,12 +13763,13 @@ } }, "node_modules/is-string": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", - "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.0.tgz", + "integrity": "sha512-PlfzajuF9vSo5wErv3MJAKD/nqf9ngAs1NFQYm16nUYFO2IzxJ2hcm+IOCg+EEopdykNNUhVq5cz35cAUxU8+g==", "dev": true, "dependencies": { - "has-tostringtag": "^1.0.0" + "call-bind": "^1.0.7", + "has-tostringtag": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -13766,12 +13779,14 @@ } }, "node_modules/is-symbol": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz", - "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.0.tgz", + "integrity": "sha512-qS8KkNNXUZ/I+nX6QT8ZS1/Yx0A444yhzdTKxCzKkNjQ9sHErBxJnJAgh+f5YhusYECEcjo4XcyH87hn6+ks0A==", "dev": true, "dependencies": { - "has-symbols": "^1.0.2" + "call-bind": "^1.0.7", + "has-symbols": "^1.0.3", + "safe-regex-test": "^1.0.3" }, "engines": { "node": ">= 0.4" @@ -14906,9 +14921,9 @@ } }, "node_modules/memfs": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.14.0.tgz", - "integrity": "sha512-JUeY0F/fQZgIod31Ja1eJgiSxLn7BfQlCnqhwXFBzFHEw63OdLK7VJUJ7bnzNsWgCyoUP5tEp1VRY8rDaYzqOA==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.14.1.tgz", + "integrity": "sha512-Fq5CMEth+2iprLJ5mNizRcWuiwRZYjNkUD0zKk224jZunE9CRacTRDK8QLALbMBlNX2y3nY6lKZbesCwDwacig==", "dev": true, "dependencies": { "@jsonjoy.com/json-pack": "^1.0.3", @@ -17845,9 +17860,9 @@ } }, "node_modules/react-joyride/node_modules/type-fest": { - "version": "4.29.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.29.0.tgz", - "integrity": "sha512-RPYt6dKyemXJe7I6oNstcH24myUGSReicxcHTvCLgzm4e0n8y05dGvcGB15/SoPRBmhlMthWQ9pvKyL81ko8nQ==", + "version": "4.30.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.0.tgz", + "integrity": "sha512-G6zXWS1dLj6eagy6sVhOMQiLtJdxQBHIA9Z6HFUNLOlr6MFOgzV8wvmidtPONfPtEUv0uZsy77XJNzTAfwPDaA==", "engines": { "node": ">=16" }, @@ -21769,16 +21784,19 @@ } }, "node_modules/which-boxed-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz", - "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.0.tgz", + "integrity": "sha512-Ei7Miu/AXe2JJ4iNF5j/UphAgRoma4trE6PtisM09bPygb3egMH3YLW/befsWb1A1AxvNSFidOFTB18XtnIIng==", "dev": true, "dependencies": { - "is-bigint": "^1.0.1", - "is-boolean-object": "^1.1.0", - "is-number-object": "^1.0.4", - "is-string": "^1.0.5", - "is-symbol": "^1.0.3" + "is-bigint": "^1.1.0", + "is-boolean-object": "^1.2.0", + "is-number-object": "^1.1.0", + "is-string": "^1.1.0", + "is-symbol": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -22099,17 +22117,19 @@ "version": "8.127.0", "license": "MIT", "devDependencies": { - "@s-ui/tokens": "^0.0.0-beta.0" + "@s-ui/tokens": "0.0.0-beta.1" } }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.0", + "version": "0.0.0-beta.1", "license": "MIT", "bin": { - "sui-tokens": "bin/sui-tokens" + "tokens": "bin/sui-tokens.mjs", + "tokens-scss": "bin/sui-tokens-scss.mjs" }, "devDependencies": { + "@s-ui/tokens": "*", "chalk": "4.1.2", "change-case": "5.4.4", "chroma-js": "2.6.0", diff --git a/tsconfig.json b/tsconfig.json index 7e238343a5..fe8633bd08 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,5 +2,6 @@ "extends": "@s-ui/bundler/tsconfig.json", "compilerOptions": { "rootDir": "./" - } -} + }, + "include": ["src", "domain", "components"] +} \ No newline at end of file diff --git a/utils/sui-theme/package.json b/utils/sui-theme/package.json index 26036a0495..ebdf16849a 100644 --- a/utils/sui-theme/package.json +++ b/utils/sui-theme/package.json @@ -36,7 +36,7 @@ "url": "https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Util%3A+theme%22" }, "devDependencies": { - "@s-ui/tokens": "0.0.0-beta.0" + "@s-ui/tokens": "0.0.0-beta.1" }, "homepage": "https://sui-components.vercel.app/", "license": "MIT" diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 7fdb5d927b..c835719d3e 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.1", + "version": "0.0.0-beta.2", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" @@ -13,11 +13,13 @@ "tokens": "bin/sui-tokens.mjs", "tokens-scss": "bin/sui-tokens-scss.mjs" }, + "type": "module", "keywords": [ "tokens", "sui" ], "devDependencies": { + "@s-ui/tokens": "*", "chalk": "4.1.2", "change-case": "5.4.4", "chroma-js": "2.6.0", From 56696ea04813475319bc53c14c3b16bef222d798 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 4 Dec 2024 22:48:10 +0100 Subject: [PATCH 05/42] feat(utils/sui-tokens): again --- package-lock.json | 116 ++++++++++++++++------------------ package.json | 1 + utils/sui-tokens/package.json | 7 +- 3 files changed, 60 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1c685b4665..a95c937298 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@s-ui/mono": "2", "@s-ui/precommit": "3", "@s-ui/studio": "11", + "@s-ui/tokens": "beta", "@types/chai": "4.3.16", "@types/chai-dom": "1.11.3", "@types/classnames": "2.2.5", @@ -1772,9 +1773,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz", - "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz", + "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==", "dev": true, "engines": { "node": ">=6.9.0" @@ -1845,13 +1846,13 @@ } }, "node_modules/@babel/generator": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz", - "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz", + "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==", "dev": true, "dependencies": { - "@babel/parser": "^7.26.2", - "@babel/types": "^7.26.0", + "@babel/parser": "^7.26.3", + "@babel/types": "^7.26.3", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" @@ -1872,19 +1873,6 @@ "node": ">=6.9.0" } }, - "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz", - "integrity": "sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==", - "dev": true, - "dependencies": { - "@babel/traverse": "^7.25.9", - "@babel/types": "^7.25.9" - }, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@babel/helper-compilation-targets": { "version": "7.25.9", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz", @@ -1923,13 +1911,13 @@ } }, "node_modules/@babel/helper-create-regexp-features-plugin": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz", - "integrity": "sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz", + "integrity": "sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.25.9", - "regexpu-core": "^6.1.1", + "regexpu-core": "^6.2.0", "semver": "^6.3.1" }, "engines": { @@ -2146,12 +2134,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz", - "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz", + "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==", "dev": true, "dependencies": { - "@babel/types": "^7.26.0" + "@babel/types": "^7.26.3" }, "bin": { "parser": "bin/babel-parser.js" @@ -2855,12 +2843,11 @@ } }, "node_modules/@babel/plugin-transform-exponentiation-operator": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz", - "integrity": "sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz", + "integrity": "sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==", "dev": true, "dependencies": { - "@babel/helper-builder-binary-assignment-operator-visitor": "^7.25.9", "@babel/helper-plugin-utils": "^7.25.9" }, "engines": { @@ -3555,16 +3542,16 @@ } }, "node_modules/@babel/traverse": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz", - "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.3.tgz", + "integrity": "sha512-yTmc8J+Sj8yLzwr4PD5Xb/WF3bOYu2C2OoSZPzbuqRm4n98XirsbzaX+GloeO376UnSYIYJ4NCanwV5/ugZkwA==", "dev": true, "dependencies": { - "@babel/code-frame": "^7.25.9", - "@babel/generator": "^7.25.9", - "@babel/parser": "^7.25.9", + "@babel/code-frame": "^7.26.2", + "@babel/generator": "^7.26.3", + "@babel/parser": "^7.26.3", "@babel/template": "^7.25.9", - "@babel/types": "^7.25.9", + "@babel/types": "^7.26.3", "debug": "^4.3.1", "globals": "^11.1.0" }, @@ -3573,9 +3560,9 @@ } }, "node_modules/@babel/types": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", - "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz", + "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==", "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.25.9", @@ -6588,9 +6575,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.3.12", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", - "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", + "version": "18.3.13", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.13.tgz", + "integrity": "sha512-ii/gswMmOievxAJed4PAHT949bpYjPKXvXo1v6cRB/kqc2ZR4n+SgyCyvyc5Fec5ez8VnUumI1Vk7j6fRyRogg==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -12649,12 +12636,9 @@ "dev": true }, "node_modules/gopd": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.1.0.tgz", - "integrity": "sha512-FQoVQnqcdk4hVM4JN1eromaun4iuS34oStkdlLENLdpULsuQcTyXj8w7ayhuUfPwEYZ1ZOooOTT6fdA9Vmx/RA==", - "dependencies": { - "get-intrinsic": "^1.2.4" - }, + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", "engines": { "node": ">= 0.4" }, @@ -16671,9 +16655,9 @@ } }, "node_modules/postcss-load-config/node_modules/lilconfig": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz", - "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", "dev": true, "engines": { "node": ">=14" @@ -20335,9 +20319,9 @@ } }, "node_modules/table": { - "version": "6.8.2", - "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", - "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==", + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz", + "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==", "dev": true, "dependencies": { "ajv": "^8.0.1", @@ -22120,16 +22104,28 @@ "@s-ui/tokens": "0.0.0-beta.1" } }, + "utils/sui-theme/node_modules/@s-ui/tokens": { + "version": "0.0.0-beta.1", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.1.tgz", + "integrity": "sha512-8bn9lZd3sMYySiyt+LQXrd9gG/3kOzyXg5dqoplHVCaPr0hYmRhN3D320sURIEBtO3pAFka6Rymxxem2dAWOBg==", + "dev": true, + "bin": { + "tokens": "bin/sui-tokens.mjs", + "tokens-scss": "bin/sui-tokens-scss.mjs" + }, + "engines": { + "node": ">=20.0.0" + } + }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.1", + "version": "0.0.0-beta.2", "license": "MIT", "bin": { "tokens": "bin/sui-tokens.mjs", "tokens-scss": "bin/sui-tokens-scss.mjs" }, "devDependencies": { - "@s-ui/tokens": "*", "chalk": "4.1.2", "change-case": "5.4.4", "chroma-js": "2.6.0", diff --git a/package.json b/package.json index da755d1223..73cf7573e9 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@s-ui/mono": "2", "@s-ui/precommit": "3", "@s-ui/studio": "11", + "@s-ui/tokens": "beta", "@types/chai": "4.3.16", "@types/chai-dom": "1.11.3", "@types/classnames": "2.2.5", diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index c835719d3e..def958de19 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.2", + "version": "0.0.0-beta.3", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" @@ -10,8 +10,8 @@ }, "bin": { ".": "./bin/tokens.mjs", - "tokens": "bin/sui-tokens.mjs", - "tokens-scss": "bin/sui-tokens-scss.mjs" + "tokens": "./bin/tokens.mjs", + "tokens-scss": "./bin/tokens-scss.mjs" }, "type": "module", "keywords": [ @@ -19,7 +19,6 @@ "sui" ], "devDependencies": { - "@s-ui/tokens": "*", "chalk": "4.1.2", "change-case": "5.4.4", "chroma-js": "2.6.0", From c57fbd825e29f377ea54a7a696e17bd205be6324 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 11 Dec 2024 12:40:30 +0100 Subject: [PATCH 06/42] feat(utils/sui-tokens): minor schema sructure --- package-lock.json | 338 +++++++++------ package.json | 1 - tsconfig.json | 2 +- utils/sui-tokens/milanuncios.tokens.config.ts | 2 +- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/build.ts | 11 +- utils/sui-tokens/src/default.tokens.config.ts | 401 ++++++++++-------- utils/sui-tokens/src/types.ts | 376 ++++++++-------- 8 files changed, 635 insertions(+), 498 deletions(-) diff --git a/package-lock.json b/package-lock.json index a95c937298..1deee84143 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,6 @@ "@s-ui/mono": "2", "@s-ui/precommit": "3", "@s-ui/studio": "11", - "@s-ui/tokens": "beta", "@types/chai": "4.3.16", "@types/chai-dom": "1.11.3", "@types/classnames": "2.2.5", @@ -336,9 +335,9 @@ } }, "components/atom/popover/node_modules/react-use": { - "version": "17.5.1", - "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz", - "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==", + "version": "17.6.0", + "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.6.0.tgz", + "integrity": "sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==", "dependencies": { "@types/js-cookie": "^2.2.6", "@xobotyi/scrollbar-width": "^1.9.5", @@ -718,9 +717,9 @@ } }, "components/layout/grid/node_modules/react-use": { - "version": "17.5.1", - "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz", - "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==", + "version": "17.6.0", + "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.6.0.tgz", + "integrity": "sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==", "dependencies": { "@types/js-cookie": "^2.2.6", "@xobotyi/scrollbar-width": "^1.9.5", @@ -1694,9 +1693,9 @@ } }, "node_modules/@babel/cli": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.25.9.tgz", - "integrity": "sha512-I+02IfrTiSanpxJBlZQYb18qCxB6c2Ih371cVpfgIrPQrjAYkf45XxomTJOG8JBWX5GY35/+TmhCMdJ4ZPkL8Q==", + "version": "7.26.4", + "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.26.4.tgz", + "integrity": "sha512-+mORf3ezU3p3qr+82WvJSnQNE1GAYeoCfEv4fik6B5/2cvKZ75AX8oawWQdXtM9MmndooQj15Jr9kelRFWsuRw==", "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", @@ -3542,9 +3541,9 @@ } }, "node_modules/@babel/traverse": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.3.tgz", - "integrity": "sha512-yTmc8J+Sj8yLzwr4PD5Xb/WF3bOYu2C2OoSZPzbuqRm4n98XirsbzaX+GloeO376UnSYIYJ4NCanwV5/ugZkwA==", + "version": "7.26.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz", + "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==", "dev": true, "dependencies": { "@babel/code-frame": "^7.26.2", @@ -4553,9 +4552,9 @@ } }, "node_modules/@jsonjoy.com/json-pack": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz", - "integrity": "sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.1.tgz", + "integrity": "sha512-osjeBqMJ2lb/j/M8NCPjs1ylqWIcTRTycIhVB5pt6LgzgeRSb0YRZ7j9RfA8wIUrsr/medIuhVyonXRZWLyfdw==", "dev": true, "dependencies": { "@jsonjoy.com/base64": "^1.1.1", @@ -4856,9 +4855,9 @@ "dev": true }, "node_modules/@s-ui/documentation-library/node_modules/react-use": { - "version": "17.5.1", - "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz", - "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==", + "version": "17.6.0", + "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.6.0.tgz", + "integrity": "sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==", "dev": true, "dependencies": { "@types/js-cookie": "^2.2.6", @@ -6527,9 +6526,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "22.10.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz", - "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==", + "version": "22.10.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", + "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", "dev": true, "dependencies": { "undici-types": "~6.20.0" @@ -6556,12 +6555,6 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "dev": true }, - "node_modules/@types/prop-types": { - "version": "15.7.13", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", - "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", - "dev": true - }, "node_modules/@types/qs": { "version": "6.9.17", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz", @@ -6575,12 +6568,11 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.3.13", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.13.tgz", - "integrity": "sha512-ii/gswMmOievxAJed4PAHT949bpYjPKXvXo1v6cRB/kqc2ZR4n+SgyCyvyc5Fec5ez8VnUumI1Vk7j6fRyRogg==", + "version": "19.0.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.1.tgz", + "integrity": "sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==", "dev": true, "dependencies": { - "@types/prop-types": "*", "csstype": "^3.0.2" } }, @@ -6594,9 +6586,9 @@ } }, "node_modules/@types/react-test-renderer": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz", - "integrity": "sha512-HW4MuEYxfDbOHQsVlY/XtOvNHftCVEPhJF2pQXXwcUiUF+Oyb0usgp48HSgpK5rt8m9KZb22yqOeZm+rrVG8gw==", + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-19.0.0.tgz", + "integrity": "sha512-qDVnNybqFm2eZKJ4jD34EvRd6VHD67KjgnWaEMM0Id9L22EpWe3nOSVKHWL1XWRCxUWe3lhXwlEeCKD1BlJCQA==", "dev": true, "dependencies": { "@types/react": "*" @@ -6949,9 +6941,9 @@ "dev": true }, "node_modules/@ungap/structured-clone": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", - "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz", + "integrity": "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==", "dev": true }, "node_modules/@vimeo/player": { @@ -8230,15 +8222,14 @@ } }, "node_modules/call-bind": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", - "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz", + "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==", "dependencies": { + "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", "get-intrinsic": "^1.2.4", - "set-function-length": "^1.2.1" + "set-function-length": "^1.2.2" }, "engines": { "node": ">= 0.4" @@ -8247,6 +8238,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz", + "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -8314,9 +8317,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001686", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz", - "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==", + "version": "1.0.30001687", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz", + "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==", "dev": true, "funding": [ { @@ -9502,9 +9505,9 @@ } }, "node_modules/debug": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", - "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", "dev": true, "dependencies": { "ms": "^2.1.3" @@ -9913,6 +9916,19 @@ "node": ">=4" } }, + "node_modules/dunder-proto": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.0.tgz", + "integrity": "sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==", + "dependencies": { + "call-bind-apply-helpers": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -9989,9 +10005,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.68", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz", - "integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ==", + "version": "1.5.72", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.72.tgz", + "integrity": "sha512-ZpSAUOZ2Izby7qnZluSrAlGgGQzucmFbN0n64dYzocYxnxV5ufurpj3VgEe4cUp7ir9LmeLxNYo8bVnlM8bQHw==", "dev": true }, "node_modules/emoji-regex": { @@ -10058,6 +10074,23 @@ "node": ">=10.0.0" } }, + "node_modules/engine.io/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/enhanced-resolve": { "version": "5.17.1", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", @@ -10181,12 +10214,9 @@ } }, "node_modules/es-define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", - "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", - "dependencies": { - "get-intrinsic": "^1.2.4" - }, + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", "engines": { "node": ">= 0.4" } @@ -11636,9 +11666,9 @@ } }, "node_modules/express": { - "version": "4.21.1", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", - "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", + "version": "4.21.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", + "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", "dev": true, "dependencies": { "accepts": "~1.3.8", @@ -11660,7 +11690,7 @@ "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.10", + "path-to-regexp": "0.1.12", "proxy-addr": "~2.0.7", "qs": "6.13.0", "range-parser": "~1.2.1", @@ -11675,6 +11705,10 @@ }, "engines": { "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/express/node_modules/cookie": { @@ -11729,9 +11763,9 @@ "dev": true }, "node_modules/express/node_modules/path-to-regexp": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", - "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", + "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==", "dev": true }, "node_modules/express/node_modules/safe-buffer": { @@ -12308,15 +12342,18 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", - "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.5.tgz", + "integrity": "sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==", "dependencies": { + "call-bind-apply-helpers": "^1.0.0", + "dunder-proto": "^1.0.0", + "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "function-bind": "^1.1.2", - "has-proto": "^1.0.1", - "has-symbols": "^1.0.3", - "hasown": "^2.0.0" + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2" }, "engines": { "node": ">= 0.4" @@ -12758,11 +12795,12 @@ } }, "node_modules/has-proto": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.1.0.tgz", - "integrity": "sha512-QLdzI9IIO1Jg7f9GT1gXpPpXArAn6cS31R1eEZqz08Gc+uQ8/XiqHWt17Fiw+2p6oTTIq5GXEpQkAlA88YRl/Q==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz", + "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==", + "dev": true, "dependencies": { - "call-bind": "^1.0.7" + "dunder-proto": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -14177,9 +14215,9 @@ } }, "node_modules/jsesc": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", - "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", + "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", "dev": true, "bin": { "jsesc": "bin/jsesc" @@ -14905,9 +14943,9 @@ } }, "node_modules/memfs": { - "version": "4.14.1", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.14.1.tgz", - "integrity": "sha512-Fq5CMEth+2iprLJ5mNizRcWuiwRZYjNkUD0zKk224jZunE9CRacTRDK8QLALbMBlNX2y3nY6lKZbesCwDwacig==", + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.15.0.tgz", + "integrity": "sha512-q9MmZXd2rRWHS6GU3WEm3HyiXZyyoA1DqdOhEq0lxPBmKb5S7IAOwX0RgUCwJfqjelDCySa5h8ujOy24LqsWcw==", "dev": true, "dependencies": { "@jsonjoy.com/json-pack": "^1.0.3", @@ -15707,9 +15745,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", - "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", "dev": true }, "node_modules/nopt": { @@ -17524,13 +17562,13 @@ } }, "node_modules/rc-motion": { - "version": "2.9.3", - "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.3.tgz", - "integrity": "sha512-rkW47ABVkic7WEB0EKJqzySpvDqwl60/tdkY7hWP7dYnh5pm0SzJpo54oW3TDUGXV5wfxXFmMkxrzRRbotQ0+w==", + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.4.tgz", + "integrity": "sha512-TAPUUufDqhPO669qJobI0d9U0XZ/VPNQyZTivUxxzU1EyuPe3PtHSx7Kb902KuzQgu7sS18z8GguaxZEALV/ww==", "dependencies": { "@babel/runtime": "^7.11.1", "classnames": "^2.2.1", - "rc-util": "^5.43.0" + "rc-util": "^5.44.0" }, "peerDependencies": { "react": ">=16.9.0", @@ -17590,9 +17628,9 @@ } }, "node_modules/rc-util": { - "version": "5.43.0", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz", - "integrity": "sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==", + "version": "5.44.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.1.tgz", + "integrity": "sha512-h6z91oGfWJPZgunkFBWSobfL0CkyLeaUNWP1ru7b05GMUSe2uHgTk0EiFEQ11v+zJBrORuXFl6Htf949ZSDdOw==", "dependencies": { "@babel/runtime": "^7.18.3", "react-is": "^18.2.0" @@ -17977,9 +18015,9 @@ "dev": true }, "node_modules/react-textarea-autosize": { - "version": "8.5.5", - "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.5.tgz", - "integrity": "sha512-CVA94zmfp8m4bSHtWwmANaBR8EPsKy2aZ7KwqhoS4Ftib87F9Kvi7XQhOixypPLMc6kVYgOXvKFuuzZDpHGRPg==", + "version": "8.5.6", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.6.tgz", + "integrity": "sha512-aT3ioKXMa8f6zHYGebhbdMD2L00tKeRX1zuVuDx9YQK/JLLRSaSxq3ugECEmUB9z2kvk6bFSIoRHLkkUv0RJiw==", "dependencies": { "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", @@ -17989,7 +18027,7 @@ "node": ">=10" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/react-transition-group": { @@ -18276,18 +18314,19 @@ } }, "node_modules/reflect.getprototypeof": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.7.tgz", - "integrity": "sha512-bMvFGIUKlc/eSfXNX+aZ+EL95/EgZzuwA0OBPTbZZDEJw/0AkentjMuM1oiRfwHrshqk4RzdgiTg5CcDalXN5g==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.8.tgz", + "integrity": "sha512-B5dj6usc5dkk8uFliwjwDHM8To5/QwdKz9JcBZ8Ic4G1f0YmeeJTtE/ZTdgRFPAfxZFiUaPhZ1Jcs4qeagItGQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", "define-properties": "^1.2.1", + "dunder-proto": "^1.0.0", "es-abstract": "^1.23.5", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.4", - "gopd": "^1.0.1", - "which-builtin-type": "^1.1.4" + "gopd": "^1.2.0", + "which-builtin-type": "^1.2.0" }, "engines": { "node": ">= 0.4" @@ -18392,6 +18431,18 @@ "regjsparser": "bin/parser" } }, + "node_modules/regjsparser/node_modules/jsesc": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", + "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", + "dev": true, + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", @@ -19136,6 +19187,23 @@ "ws": "~8.17.1" } }, + "node_modules/socket.io-adapter/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/socket.io-parser": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", @@ -19149,6 +19217,40 @@ "node": ">=10.0.0" } }, + "node_modules/socket.io-parser/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/socket.io/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -20443,9 +20545,9 @@ } }, "node_modules/terser": { - "version": "5.36.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz", - "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==", + "version": "5.37.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz", + "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==", "dev": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", @@ -21175,11 +21277,11 @@ } }, "node_modules/use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz", + "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==", "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -22101,17 +22203,17 @@ "version": "8.127.0", "license": "MIT", "devDependencies": { - "@s-ui/tokens": "0.0.0-beta.1" + "@s-ui/tokens": "beta" } }, "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.1", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.1.tgz", - "integrity": "sha512-8bn9lZd3sMYySiyt+LQXrd9gG/3kOzyXg5dqoplHVCaPr0hYmRhN3D320sURIEBtO3pAFka6Rymxxem2dAWOBg==", + "version": "0.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.3.tgz", + "integrity": "sha512-0DqVZxyUoip6Mc1T7yVNQyYy91DuFAxAYFQI7vREJGqFppShsLRG1bLh4u8A0jPtzGUFO4yn4tNJtoY6yTukhQ==", "dev": true, "bin": { - "tokens": "bin/sui-tokens.mjs", - "tokens-scss": "bin/sui-tokens-scss.mjs" + "tokens": "bin/tokens.mjs", + "tokens-scss": "bin/tokens-scss.mjs" }, "engines": { "node": ">=20.0.0" @@ -22119,11 +22221,11 @@ }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.2", + "version": "0.0.0-beta.4", "license": "MIT", "bin": { - "tokens": "bin/sui-tokens.mjs", - "tokens-scss": "bin/sui-tokens-scss.mjs" + "tokens": "bin/tokens.mjs", + "tokens-scss": "bin/tokens-scss.mjs" }, "devDependencies": { "chalk": "4.1.2", diff --git a/package.json b/package.json index 73cf7573e9..da755d1223 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,6 @@ "@s-ui/mono": "2", "@s-ui/precommit": "3", "@s-ui/studio": "11", - "@s-ui/tokens": "beta", "@types/chai": "4.3.16", "@types/chai-dom": "1.11.3", "@types/classnames": "2.2.5", diff --git a/tsconfig.json b/tsconfig.json index fe8633bd08..bd080c3a63 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,5 +3,5 @@ "compilerOptions": { "rootDir": "./" }, - "include": ["src", "domain", "components"] + "include": ["src", "domain", "components", "utils"] } \ No newline at end of file diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts index fdb489a90d..b78e21d0ac 100644 --- a/utils/sui-tokens/milanuncios.tokens.config.ts +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -252,7 +252,7 @@ const theme: Theme = { neutralContainerDisabled: chroma(color.poe[100]).alpha(opacity.dim3).css('rgb'), onNeutralContainer: color.base.gloom }, - base: { + core: { background: color.base.bright, onBackground: color.base.gloom, backgroundVariant: color.poe[100], diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index def958de19..c002f61bc1 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.3", + "version": "0.0.0-beta.4", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index 0cc9e8eb4f..71d30b993b 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -41,7 +41,7 @@ export function build(tokensConfig?: Theme) { }, {}), colorSpace: primitive.colorSpace, opacity: primitive.opacity, - fontsize: primitive.fontSize, + fontSize: primitive.fontSize, fontFamily: primitive.fontFamily, size: primitive.size, elevation: primitive.elevation @@ -52,11 +52,16 @@ export function build(tokensConfig?: Theme) { tokensConfig?.primitive != null ? deepmerge(defaultTokensConfig.primitive, tokensConfig.primitive) : defaultTokensConfig.primitive - const primitive = buildPrimitive(protoPrimitive) + console.log('protoPrimitive', protoPrimitive) + const primitive = buildPrimitive(protoPrimitive) + console.log('primitive', primitive) const semantic = tokensConfig?.semantic != null - ? deepmerge(defaultTokensConfig.semantic(defaultTokensConfig.primitive), tokensConfig.semantic(primitive)) + ? deepmerge( + defaultTokensConfig.semantic(buildPrimitive(defaultTokensConfig.primitive)), + tokensConfig.semantic(primitive) + ) : defaultTokensConfig.semantic(primitive) return { diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index d032673e70..de8b1a2971 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -108,6 +108,18 @@ const theme: Theme = { base: { bright: '#FFFFFF', gloom: '#000000' + }, + tin: { + 50: '#fafafa', + 100: '#f7f7f7', + 200: '#e8e8e8', + 300: '#d8d8d8', + 400: '#b8b8b8', + 500: '#919191', + 600: '#818181', + 700: '#626262', + 800: '#494949', + 900: '#3a3a3a' } }, colorSpace: 'rgb', @@ -203,212 +215,235 @@ const theme: Theme = { tooltip: 1800 } }, - semantic: ({color, opacity, elevation, size, fontSize, fontFamily}: ThemePrimitive) => ({ - color: { - brand: { - main: color.hero[500], - mainHovered: color.hero[400], - mainPressed: color.hero[400], - mainFocused: color.hero[400], - mainDisabled: chroma(color.hero[400]).alpha(opacity.dim3).css('rgb'), - onMain: color.base.bright, + semantic: ({color, opacity, elevation, size, fontSize, fontFamily}: ThemePrimitive) => { + return { + color: { + brand: { + main: color.hero[500], + mainHovered: color.hero[400], + mainPressed: color.hero[400], + mainFocused: color.hero[400], + mainDisabled: chroma(color.hero[400]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onMainContainer: color.hero[700], + mainContainer: color.hero[50], + mainContainerHovered: color.hero[100], + mainContainerFocused: color.hero[100], + mainContainerPressed: color.hero[100], + mainContainerDisabled: chroma(color.hero[50]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onMainVariant: color.base.bright, + mainVariant: color.hero[700], + mainVariantHovered: color.hero[600], + mainVariantFocused: color.hero[600], + mainVariantPressed: color.hero[600], + mainVariantDisabled: chroma(color.hero[600]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onAccent: color.base.gloom, + accent: color.triforce[500], + accentHovered: color.triforce[400], + accentPressed: color.triforce[400], + accentFocused: color.triforce[400], + accentDisabled: chroma(color.triforce[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onAccentContainer: color.base.gloom, + accentContainer: color.triforce[100], + accentContainerHovered: color.triforce[50], + accentContainerFocused: color.triforce[50], + accentContainerPressed: color.triforce[50], + accentContainerDisabled: chroma(color.triforce[100]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onAccentVariant: color.base.gloom, + accentVariant: color.triforce[300], + accentVariantHovered: color.triforce[200], + accentVariantFocused: color.triforce[200], + accentVariantPressed: color.triforce[200], + accentVariantDisabled: chroma(color.triforce[300]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onSupport: color.base.bright, + support: color.zelda[500], + supportHovered: color.zelda[400], + supportPressed: color.zelda[400], + supportFocused: color.zelda[400], + supportDisabled: chroma(color.zelda[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onSupportContainer: color.zelda[500], + supportContainer: color.zelda[100], + supportContainerHovered: color.zelda[50], + supportContainerFocused: color.zelda[50], + supportContainerPressed: color.zelda[50], + supportContainerDisabled: chroma(color.zelda[100]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onSupportVariant: color.base.bright - }, - status: { - success: color.hero[500], - successHovered: color.hero[400], - successPressed: color.hero[400], - successFocused: color.hero[400], - successDisabled: chroma(color.hero[500]).alpha(opacity.dim3).css('rgb'), - onSuccess: color.base.bright, + supportVariant: color.zelda[700], + supportVariantHovered: color.zelda[600], + supportVariantFocused: color.zelda[600], + supportVariantPressed: color.zelda[600], + supportVariantDisabled: chroma(color.zelda[700]).alpha(opacity.dim3).css('rgb'), + onSupportVariant: color.base.bright + }, + status: { + success: color.hero[500], + successHovered: color.hero[400], + successPressed: color.hero[400], + successFocused: color.hero[400], + successDisabled: chroma(color.hero[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onSuccessContainer: color.hero[700], + successContainer: color.hero[50], + successContainerHovered: color.hero[100], + successContainerFocused: color.hero[100], + successContainerPressed: color.hero[100], + successContainerDisabled: chroma(color.hero[50]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onAlert: color.base.gloom, + alert: color.triforce[800], + alertHovered: color.triforce[700], + alertPressed: color.triforce[700], + alertFocused: color.triforce[700], + alertDisabled: chroma(color.triforce[800]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onAlertContainer: color.base.gloom, + alertContainer: color.triforce[100], + alertContainerHovered: color.triforce[50], + alertContainerFocused: color.triforce[50], + alertContainerPressed: color.triforce[50], + alertContainerDisabled: chroma(color.triforce[100]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onError: color.base.bright, + error: color.goron[500], + errorHovered: color.goron[400], + errorPressed: color.goron[400], + errorFocused: color.goron[400], + errorDisabled: chroma(color.goron[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onErrorContainer: color.goron[600], + errorContainer: color.goron[100], + errorContainerHovered: color.goron[50], + errorContainerFocused: color.goron[50], + errorContainerPressed: color.goron[50], + errorContainerDisabled: chroma(color.goron[100]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onInfo: color.base.bright, + info: color.zora[500], + infoHovered: color.zora[400], + infoPressed: color.zora[400], + infoFocused: color.zora[400], + infoDisabled: chroma(color.zora[500]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onInfoContainer: color.zora[600], + infoContainer: color.zora[100], + infoContainerHovered: color.zora[50], + infoContainerFocused: color.zora[50], + infoContainerPressed: color.zora[50], + infoContainerDisabled: chroma(color.zora[100]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onNeutral: color.base.bright, + neutral: color.poe[600], + neutralHovered: color.poe[500], + neutralPressed: color.poe[500], + neutralFocused: color.poe[500], + neutralDisabled: chroma(color.poe[600]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), - onNeutralContainer: color.base.gloom - }, - base: { - background: color.base.bright, - onBackground: color.base.gloom, - backgroundVariant: color.poe[100], - onBackgroundVariant: color.base.gloom, + neutralContainer: color.poe[100], + neutralContainerHovered: color.poe[50], + neutralContainerFocused: color.poe[50], + neutralContainerPressed: color.poe[50], + neutralContainerDisabled: chroma(color.poe[100]).alpha(opacity.dim3).css('rgb'), + onNeutralContainer: color.base.gloom + }, + core: { + basic: color.tin[500], + basicHovered: color.tin[400], + basicFocused: color.tin[400], + basicPressed: color.tin[400], + basicDisabled: chroma(color.tin[400]).alpha(opacity.dim3).css('rgb'), + onBasic: color.base.bright, + + basicContainer: color.tin[50], + basicContainerHovered: color.tin[100], + basicContainerFocused: color.tin[100], + basicContainerPressed: color.tin[100], + basicContainerDisabled: chroma(color.tin[50]).alpha(opacity.dim3).css('rgb'), + onBasicContainer: color.tin[700], + + basicVariant: color.tin[700], + basicVariantHovered: color.tin[600], + basicVariantFocused: color.tin[600], + basicVariantPressed: color.tin[600], + basicVariantDisabled: chroma(color.tin[600]).alpha(opacity.dim3).css('rgb'), + onBasicVariant: color.base.bright, + + 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, + surface: color.base.bright, + onSurface: color.base.gloom, + surfaceInverse: color.poe[900], + onSurfaceInverse: color.base.bright, - overlay: color.base.gloom, - onOverlay: 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]).alpha(opacity.dim3).css('rgb'), - outlineHigh: color.poe[900] + outline: color.poe[400], + outlineHovered: color.poe[700], + outlinePressed: color.poe[700], + outlineFocused: color.poe[700], + outlineDisabled: chroma(color.poe[400]).alpha(opacity.dim3).css('rgb'), + 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 + } }, - 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 - } - }, - 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 + 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(', '), + serif: fontFamily.serif.join(', '), + mono: fontFamily.mono.join(', ') + } }, - weight: { - hairline: '100', - thin: '200', - light: '300', - normal: '400', - medium: '500', - semiBold: '600', - bold: '700', - extrabold: '800', - black: '900' + opacity, + spacing: { + size }, - family: { - sans: fontFamily.sans.join(', '), - serif: fontFamily.serif.join(', '), - mono: fontFamily.mono.join(', ') - } - }, - opacity, - spacing: { - size - }, - elevation - }) + elevation + } + } } export default theme diff --git a/utils/sui-tokens/src/types.ts b/utils/sui-tokens/src/types.ts index ab8a57c07a..a92d9b9751 100644 --- a/utils/sui-tokens/src/types.ts +++ b/utils/sui-tokens/src/types.ts @@ -10,223 +10,219 @@ export interface OpacityPrimitive { [key: string]: number } -export interface ColorType { - name: string - color: string - convert: () => { - [key: string]: string - } -} - export type Base = string export interface ThemePrimitive { - prefix: string - fontSize: string - fontFamily: { + prefix?: string + fontSize?: string + fontFamily?: { [key: string]: string[] } - color: ColorPrimitives - colorSpace: 'hex' | 'rgb' - opacity: OpacityPrimitive - size: { + color?: ColorPrimitives + colorSpace?: 'hex' | 'rgb' + opacity?: OpacityPrimitive + size?: { [key: string]: string } - elevation: { + elevation?: { [key: string]: number } } -export type propertySyntax = - | 'angle' - | 'color' - | 'custom-ident' - | 'image' - | 'integer' - | 'length' - | 'length-percentage' - | 'number' - | 'percentage' - | 'resolution' - | 'string' - | 'time' - | 'transform-function' - | 'transform-list' - | 'url' - export interface SemanticShape { - 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 + 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 } - status: { - 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 + status?: { + 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: { - 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 + core?: { + 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: { + extra?: { [key: string | number]: string } - social: { - facebook: string - whatsapp: string - youtube: string - tiktok: string - telegram: string - x: string - instagram: string + social?: { + facebook?: string + whatsapp?: string + youtube?: string + tiktok?: string + telegram?: string + x?: string + instagram?: string } } - font: { - size: { + font?: { + size?: { [key: string]: string } - family: { + family?: { [key: string]: string } } - spacing: { - size: { + spacing?: { + size?: { [key: string]: string } } - elevation: { + elevation?: { [key: string]: number } } From 4de4f8cb88cf9bfbd0188cb56dafc375b503b5f5 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 16 Dec 2024 09:41:11 +0100 Subject: [PATCH 07/42] feat(utils/sui-tokens): different output formats --- utils/sui-tokens/bin/tokens-json.mjs | 15 +++ utils/sui-tokens/bin/tokens-scss.mjs | 4 +- utils/sui-tokens/bin/tokens.mjs | 1 + utils/sui-tokens/src/build.ts | 17 ++- utils/sui-tokens/src/default.tokens.config.ts | 2 +- utils/sui-tokens/src/generate.ts | 125 +++++++++++------- 6 files changed, 109 insertions(+), 55 deletions(-) create mode 100755 utils/sui-tokens/bin/tokens-json.mjs diff --git a/utils/sui-tokens/bin/tokens-json.mjs b/utils/sui-tokens/bin/tokens-json.mjs new file mode 100755 index 0000000000..a1c1f67ede --- /dev/null +++ b/utils/sui-tokens/bin/tokens-json.mjs @@ -0,0 +1,15 @@ +#!/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') + .action(runJSON) + +program.parse(process.argv) diff --git a/utils/sui-tokens/bin/tokens-scss.mjs b/utils/sui-tokens/bin/tokens-scss.mjs index 9de76a1e50..54b08e91fa 100755 --- a/utils/sui-tokens/bin/tokens-scss.mjs +++ b/utils/sui-tokens/bin/tokens-scss.mjs @@ -2,7 +2,7 @@ import {Command} from 'commander' -import {run} from '../src/build.ts' +import {runSCSS} from '../src/build.ts' const program = new Command() @@ -10,6 +10,6 @@ program .description('building scss tokens file') .option('-c, --configuration ', 'configuration file route') .option('-o, --output ', 'output file route') - .action(run) + .action(runSCSS) program.parse(process.argv) diff --git a/utils/sui-tokens/bin/tokens.mjs b/utils/sui-tokens/bin/tokens.mjs index 78cdefb55d..a3eae561f3 100755 --- a/utils/sui-tokens/bin/tokens.mjs +++ b/utils/sui-tokens/bin/tokens.mjs @@ -9,5 +9,6 @@ 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/src/build.ts b/utils/sui-tokens/src/build.ts index 71d30b993b..18ae52102e 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -53,9 +53,7 @@ export function build(tokensConfig?: Theme) { ? deepmerge(defaultTokensConfig.primitive, tokensConfig.primitive) : defaultTokensConfig.primitive - console.log('protoPrimitive', protoPrimitive) const primitive = buildPrimitive(protoPrimitive) - console.log('primitive', primitive) const semantic = tokensConfig?.semantic != null ? deepmerge( @@ -104,13 +102,24 @@ export async function writeTokensConfig(data: string, outputPath?: string) { } } -export const run = async ({configuration, output}: {configuration?: string; output?: string}) => { +export const runSCSS = async ({configuration, output}: {configuration?: string; output?: string}) => { 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(result), output) + await writeTokensConfig(generate.scss(result), output) + console.log(chalk.blue('Done!')) +} + +export const runJSON = async ({configuration, output}: {configuration?: string; output?: string}) => { + 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.json(result), output) console.log(chalk.blue('Done!')) } diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index de8b1a2971..4b7f5b2bae 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -428,7 +428,7 @@ const theme: Theme = { medium: '500', semiBold: '600', bold: '700', - extrabold: '800', + extraBold: '800', black: '900' }, family: { diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 5606cca403..dde44c5f97 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -21,73 +21,102 @@ const anidate = (accumulator: Map, [key, value]) => { return accumulator } -export const generate = ({primitive, semantic}: {primitive: ThemePrimitive; semantic: SemanticShape}) => { - // const primitivesMap = new Map() - // let primitives = '' - // - // Object.entries(primitive).forEach(([key, value]) => { - // anidate(primitivesMap, [key, value]) - // }) - // - // primitivesMap.forEach((value: string, key: string) => { - // primitives += ` - // ${key}: ${value};` - // }) - - const semanticMaps = { - color: new Map(), - font: new Map(), - opacity: new Map(), - elevation: new Map(), - spacing: new Map() - } - const semanticTokens = { - color: '', - font: '', - opacity: '', - elevation: '', - spacing: '' - } +export const generate = { + scss: ({primitive, semantic}: {primitive: ThemePrimitive; semantic: SemanticShape}) => { + const semanticMaps = { + color: new Map(), + font: new Map(), + opacity: new Map(), + elevation: new Map(), + spacing: new Map() + } + const semanticTokens = { + color: '', + font: '', + opacity: '', + elevation: '', + spacing: '' + } - const add = (keyword: string, prefix?: string) => { - Object.entries(semantic[keyword]).forEach(([key, value]) => { - anidate(semanticMaps[keyword], [`${keyword}-${key}`, value]) - }) + const scssTokens = { + color: '', + font: '', + opacity: '', + elevation: '', + spacing: '' + } + + const add = (keyword: string, prefix?: string) => { + Object.entries(semantic[keyword]).forEach(([key, value]) => { + anidate(semanticMaps[keyword], [`${keyword}-${key}`, value]) + }) + + const getTokenKey = (key: string) => `--${prefix === undefined ? '' : `${prefix}-`}${key}` - semanticTokens[keyword] = ''.concat( - ...Array.from(semanticMaps[keyword]).map( - ([key, value]: [string, string]) => ` - --${prefix === undefined ? '' : `${prefix}-`}${key}: ${value};` + semanticTokens[keyword] = ''.concat( + ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { + return ` + ${getTokenKey(key)}: ${value};` + }) ) - ) - } - const {prefix} = primitive + scssTokens[keyword] = ''.concat( + ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { + return ` + $${key}: var(${getTokenKey(key)});` + }) + ) + } + + const {prefix} = primitive - add('color', prefix) - add('font', prefix) - add('opacity', prefix) - add('elevation', prefix) - add('spacing', prefix) + add('color', prefix) + add('font', prefix) + add('opacity', prefix) + add('elevation', prefix) + add('spacing', prefix) - return `// This file is auto-generated by sui-tokens + return `// This file is auto-generated by sui-tokens @layer tokens { @layer semantic { @layer color {${semanticTokens.color} } - + @layer font {${semanticTokens.font} } - + @layer opacity {${semanticTokens.opacity} } - + @layer elevation {${semanticTokens.elevation} } - + @layer spacing {${semanticTokens.spacing} } } } + +@layer variables { + @layer semantic { + @layer color {${scssTokens.color} + } + + @layer font {${scssTokens.font} + } + + @layer opacity {${scssTokens.opacity} + } + + @layer elevation {${scssTokens.elevation} + } + + @layer spacing {${scssTokens.spacing} + } + } +} ` + }, + json: ({semantic}: {primitive: ThemePrimitive; semantic: SemanticShape}) => { + return JSON.stringify(semantic, null, 2) + } } From 9afb49185dc1edbaec12a94ae7f17bbfa8b141d8 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 16 Dec 2024 09:41:59 +0100 Subject: [PATCH 08/42] feat(utils/sui-theme): add sui-tokens package --- utils/sui-theme/.gitignore | 1 + utils/sui-theme/package.json | 5 +++-- utils/sui-theme/src/index.scss | 4 ++++ 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 utils/sui-theme/.gitignore diff --git a/utils/sui-theme/.gitignore b/utils/sui-theme/.gitignore new file mode 100644 index 0000000000..1012dc2d53 --- /dev/null +++ b/utils/sui-theme/.gitignore @@ -0,0 +1 @@ +src/.tokens \ No newline at end of file diff --git a/utils/sui-theme/package.json b/utils/sui-theme/package.json index ebdf16849a..bf486ba2b7 100644 --- a/utils/sui-theme/package.json +++ b/utils/sui-theme/package.json @@ -21,7 +21,8 @@ ], "main": "lib/index.scss", "scripts": { - "lib": "rm -rf ./lib && cp -R src lib", + "tokens": "tokens scss -c ./milanuncios.tokens.config.js -o ./src/.tokens/.tokens.scss", + "lib": "rm -rf ./lib && npm run tokens && cp -R src lib", "prepublishOnly": "npm run lib" }, "repository": { @@ -36,7 +37,7 @@ "url": "https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Util%3A+theme%22" }, "devDependencies": { - "@s-ui/tokens": "0.0.0-beta.1" + "@s-ui/tokens": "beta" }, "homepage": "https://sui-components.vercel.app/", "license": "MIT" diff --git a/utils/sui-theme/src/index.scss b/utils/sui-theme/src/index.scss index abb5aa42ae..905311bc15 100644 --- a/utils/sui-theme/src/index.scss +++ b/utils/sui-theme/src/index.scss @@ -1,3 +1,7 @@ +@import './.tokens/.tokens'; + +@layer tokens; + // Utils @import './utils'; // Settings From fb2c21581e9eba9dc1887949b79be1472d22314e Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 16 Dec 2024 09:54:31 +0100 Subject: [PATCH 09/42] feat(utils/sui-tokens): last beta bump --- utils/sui-tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index c002f61bc1..9b6773ea94 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.4", + "version": "0.0.0-beta.5", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" From c8c713bbedda7b5006228f4996a9d162e9e95fa7 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 11:30:00 +0100 Subject: [PATCH 10/42] fix(utils/sui-tokens): map correct color primitives --- .../src/milanuncios.tokens.config.ts | 4 +- utils/sui-tokens/milanuncios.tokens.config.ts | 4 +- utils/sui-tokens/package.json | 3 + utils/sui-tokens/src/default.tokens.config.ts | 431 +++++++++--------- utils/sui-tokens/src/generate.ts | 6 +- utils/sui-tokens/src/index.ts | 9 + utils/sui-tokens/src/types.ts | 12 +- 7 files changed, 242 insertions(+), 227 deletions(-) create mode 100644 utils/sui-tokens/src/index.ts diff --git a/utils/sui-theme/src/milanuncios.tokens.config.ts b/utils/sui-theme/src/milanuncios.tokens.config.ts index fdb489a90d..db7df6e366 100644 --- a/utils/sui-theme/src/milanuncios.tokens.config.ts +++ b/utils/sui-theme/src/milanuncios.tokens.config.ts @@ -1,6 +1,6 @@ import chroma from 'chroma-js' -import {type Theme, type ThemePrimitive} from './src/types' +import {type Theme, type ThemePrimitive} from '@s-ui/tokens' const theme: Theme = { primitive: { @@ -181,7 +181,7 @@ const theme: Theme = { supportVariantDisabled: chroma(color.zelda[700]).alpha(opacity.dim3).css('rgb'), onSupportVariant: color.base.bright }, - status: { + feedback: { success: color.hero[500], successHovered: color.hero[400], successPressed: color.hero[400], diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts index b78e21d0ac..6e5c97c7d8 100644 --- a/utils/sui-tokens/milanuncios.tokens.config.ts +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -181,7 +181,7 @@ const theme: Theme = { supportVariantDisabled: chroma(color.zelda[700]).alpha(opacity.dim3).css('rgb'), onSupportVariant: color.base.bright }, - status: { + feedback: { success: color.hero[500], successHovered: color.hero[400], successPressed: color.hero[400], @@ -252,7 +252,7 @@ const theme: Theme = { neutralContainerDisabled: chroma(color.poe[100]).alpha(opacity.dim3).css('rgb'), onNeutralContainer: color.base.gloom }, - core: { + base: { background: color.base.bright, onBackground: color.base.gloom, backgroundVariant: color.poe[100], diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 9b6773ea94..7ee2d15240 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -13,6 +13,9 @@ "tokens": "./bin/tokens.mjs", "tokens-scss": "./bin/tokens-scss.mjs" }, + "exports": { + ".": "./src/index.ts" + }, "type": "module", "keywords": [ "tokens", diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index 4b7f5b2bae..5bda690233 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -12,77 +12,101 @@ const theme: Theme = { mono: ['Menlo', 'Monaco', 'Consolas', "'Liberation Mono'", "'Courier New'", 'monospace'] }, color: { - hero: { - 50: '#F2FCF7', - 100: '#DFFFED', - 200: '#C4F3D9', - 300: '#98E9BC', - 400: '#2DD276', - 500: '#11A753', - 600: '#0E9549', - 700: '#097137', - 800: '#075529', - 900: '#02441F' + theBlue: { + 50: '#F4F4FC', + 100: '#E2E1F8', + 200: '#B1AEEC', + 300: '#8580E1', + 400: '#5952D6', + 500: '#2118C9', + 600: '#191297', + 700: '#140E79', + 800: '#0D0A50', + 900: '#080632' }, - triforce: { - 50: '#FFFBEE', - 100: '#FFF3CC', - 200: '#FFEBAA', - 300: '#FFE799', - 400: '#FFD142', - 500: '#F9BE01', - 600: '#F9A501', - 700: '#EF9801', - 800: '#E57301', - 900: '#D75A00' + sugarCotton: { + 50: '#FFF5F9', + 100: '#FFE1ED', + 200: '#FEBAD6', + 300: '#FE92BF', + 400: '#FE6BA7', + 500: '#FD398A', + 600: '#CA2E6E', + 700: '#982253', + 800: '#651737', + 900: '#3F0E22' }, - zelda: { - 50: '#FDF8FA', - 100: '#FBF4F6', - 200: '#FFE5EF', - 300: '#EBC2D0', - 400: '#DD7FA0', - 500: '#BF406D', - 600: '#A72A56', - 700: '#7A2946', - 800: '#541C30', - 900: '#460F22' + apple: { + 50: '#F5FBF8', + 100: '#E0F2E9', + 200: '#B7DFCB', + 300: '#8ECDAE', + 400: '#64BC90', + 500: '#31A56B', + 600: '#278456', + 700: '#1D6340', + 800: '#14422B', + 900: '#0C291B' }, - goron: { - 50: '#FFF6F6', - 100: '#FFEBEB', - 200: '#FFDEDE', - 300: '#FECDCD', - 400: '#FF6565', - 500: '#E51B1B', - 600: '#D60606', - 700: '#C90303', - 800: '#970202', - 900: '#840000' + wiggins: { + 50: '#FFFCF6', + 100: '#FDF5E4', + 200: '#FBE9BF', + 300: '#F9DC9A', + 400: '#F7CF76', + 500: '#F4BF48', + 600: '#C3993A', + 700: '#92732B', + 800: '#624C1D', + 900: '#3D3012' }, - zora: { - 50: '#F4F9FF', - 100: '#E5F2FF', - 200: '#D0E8FF', - 300: '#99CAFF', - 400: '#72B5FF', - 500: '#006FE5', - 600: '#0062CD', - 700: '#004999', - 800: '#003166', - 900: '#002955' + chilli: { + 50: '#FFF7F6', + 100: '#FEE6E5', + 200: '#FCC4C2', + 300: '#FAA29F', + 400: '#F8807D', + 500: '#F65651', + 600: '#C54541', + 700: '#943431', + 800: '#622220', + 900: '#3E1514' }, - poe: { - 50: '#F9F9FA', - 100: '#F4F5F6', - 200: '#E6E9EB', - 300: '#D3D7D9', - 400: '#B7BEC2', - 500: '#808D93', - 600: '#677379', - 700: '#50595E', - 800: '#3F474B', - 900: '#24292C' + 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', @@ -94,32 +118,11 @@ const theme: Theme = { instagram: '#E1306C' }, extra: { - illustrationDarkGreen: '#1ED86C', - illustrationLightGreen: '#8BF5AF', - illustrationDarkGrey: '#939393', - illustrationLightGrey: '#E2E2E2', - illustrationBlack: '#2A3439', - illustrationWhite: '#FFFFFF', - lightGreen: '#D2EDDE', - lightBlue: '#E5F2FF', - lightYellow: '#F7EFD4', - lightGrey: '#F1F2F2' + theBlueV: '#7583FF' }, base: { bright: '#FFFFFF', gloom: '#000000' - }, - tin: { - 50: '#fafafa', - 100: '#f7f7f7', - 200: '#e8e8e8', - 300: '#d8d8d8', - 400: '#b8b8b8', - 500: '#919191', - 600: '#818181', - 700: '#626262', - 800: '#494949', - 900: '#3a3a3a' } }, colorSpace: 'rgb', @@ -219,181 +222,181 @@ const theme: Theme = { return { color: { brand: { - main: color.hero[500], - mainHovered: color.hero[400], - mainPressed: color.hero[400], - mainFocused: color.hero[400], - mainDisabled: chroma(color.hero[400]).alpha(opacity.dim3).css('rgb'), + main: color.theBlue[500], + mainHovered: color.theBlue[400], + mainPressed: color.theBlue[400], + mainFocused: color.theBlue[400], + mainDisabled: chroma(color.theBlue[400]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), - onMainContainer: color.hero[700], + mainContainer: color.theBlue[50], + mainContainerHovered: color.theBlue[100], + mainContainerFocused: color.theBlue[100], + mainContainerPressed: color.theBlue[100], + mainContainerDisabled: chroma(color.theBlue[50]).alpha(opacity.dim3).css('rgb'), + onMainContainer: color.theBlue[700], - mainVariant: color.hero[700], - mainVariantHovered: color.hero[600], - mainVariantFocused: color.hero[600], - mainVariantPressed: color.hero[600], - mainVariantDisabled: chroma(color.hero[600]).alpha(opacity.dim3).css('rgb'), + mainVariant: color.theBlue[700], + mainVariantHovered: color.theBlue[600], + mainVariantFocused: color.theBlue[600], + mainVariantPressed: color.theBlue[600], + mainVariantDisabled: chroma(color.theBlue[600]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), + accent: color.sugarCotton[500], + accentHovered: color.sugarCotton[400], + accentPressed: color.sugarCotton[400], + accentFocused: color.sugarCotton[400], + accentDisabled: chroma(color.sugarCotton[500]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), + accentContainer: color.sugarCotton[100], + accentContainerHovered: color.sugarCotton[50], + accentContainerFocused: color.sugarCotton[50], + accentContainerPressed: color.sugarCotton[50], + accentContainerDisabled: chroma(color.sugarCotton[100]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), + accentVariant: color.sugarCotton[300], + accentVariantHovered: color.sugarCotton[200], + accentVariantFocused: color.sugarCotton[200], + accentVariantPressed: color.sugarCotton[200], + accentVariantDisabled: chroma(color.sugarCotton[300]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), + support: color.sky[500], + supportHovered: color.sky[400], + supportPressed: color.sky[400], + supportFocused: color.sky[400], + supportDisabled: chroma(color.sky[500]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), - onSupportContainer: color.zelda[500], + supportContainer: color.sky[100], + supportContainerHovered: color.sky[50], + supportContainerFocused: color.sky[50], + supportContainerPressed: color.sky[50], + supportContainerDisabled: chroma(color.sky[100]).alpha(opacity.dim3).css('rgb'), + onSupportContainer: color.sky[500], - supportVariant: color.zelda[700], - supportVariantHovered: color.zelda[600], - supportVariantFocused: color.zelda[600], - supportVariantPressed: color.zelda[600], - supportVariantDisabled: chroma(color.zelda[700]).alpha(opacity.dim3).css('rgb'), + supportVariant: color.sky[700], + supportVariantHovered: color.sky[600], + supportVariantFocused: color.sky[600], + supportVariantPressed: color.sky[600], + supportVariantDisabled: chroma(color.sky[700]).alpha(opacity.dim3).css('rgb'), onSupportVariant: color.base.bright }, - status: { - success: color.hero[500], - successHovered: color.hero[400], - successPressed: color.hero[400], - successFocused: color.hero[400], - successDisabled: chroma(color.hero[500]).alpha(opacity.dim3).css('rgb'), + feedback: { + success: color.apple[500], + successHovered: color.apple[400], + successPressed: color.apple[400], + successFocused: color.apple[400], + successDisabled: chroma(color.apple[500]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), - onSuccessContainer: color.hero[700], + successContainer: color.apple[50], + successContainerHovered: color.apple[100], + successContainerFocused: color.apple[100], + successContainerPressed: color.apple[100], + successContainerDisabled: chroma(color.apple[50]).alpha(opacity.dim3).css('rgb'), + onSuccessContainer: color.apple[700], - alert: color.triforce[800], - alertHovered: color.triforce[700], - alertPressed: color.triforce[700], - alertFocused: color.triforce[700], - alertDisabled: chroma(color.triforce[800]).alpha(opacity.dim3).css('rgb'), + alert: color.wiggins[800], + alertHovered: color.wiggins[700], + alertPressed: color.wiggins[700], + alertFocused: color.wiggins[700], + alertDisabled: chroma(color.wiggins[800]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), + alertContainer: color.wiggins[100], + alertContainerHovered: color.wiggins[50], + alertContainerFocused: color.wiggins[50], + alertContainerPressed: color.wiggins[50], + alertContainerDisabled: chroma(color.wiggins[100]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), + error: color.chilli[500], + errorHovered: color.chilli[400], + errorPressed: color.chilli[400], + errorFocused: color.chilli[400], + errorDisabled: chroma(color.chilli[500]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), - onErrorContainer: color.goron[600], + errorContainer: color.chilli[100], + errorContainerHovered: color.chilli[50], + errorContainerFocused: color.chilli[50], + errorContainerPressed: color.chilli[50], + errorContainerDisabled: chroma(color.chilli[100]).alpha(opacity.dim3).css('rgb'), + onErrorContainer: color.chilli[600], - info: color.zora[500], - infoHovered: color.zora[400], - infoPressed: color.zora[400], - infoFocused: color.zora[400], - infoDisabled: chroma(color.zora[500]).alpha(opacity.dim3).css('rgb'), + info: color.sky[500], + infoHovered: color.sky[400], + infoPressed: color.sky[400], + infoFocused: color.sky[400], + infoDisabled: chroma(color.sky[500]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), - onInfoContainer: color.zora[600], + infoContainer: color.sky[100], + infoContainerHovered: color.sky[50], + infoContainerFocused: color.sky[50], + infoContainerPressed: color.sky[50], + infoContainerDisabled: chroma(color.sky[100]).alpha(opacity.dim3).css('rgb'), + onInfoContainer: color.sky[600], - neutral: color.poe[600], - neutralHovered: color.poe[500], - neutralPressed: color.poe[500], - neutralFocused: color.poe[500], - neutralDisabled: chroma(color.poe[600]).alpha(opacity.dim3).css('rgb'), + neutral: color.surfer[600], + neutralHovered: color.surfer[500], + neutralPressed: color.surfer[500], + neutralFocused: color.surfer[500], + neutralDisabled: chroma(color.surfer[600]).alpha(opacity.dim3).css('rgb'), 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]).alpha(opacity.dim3).css('rgb'), + neutralContainer: color.surfer[100], + neutralContainerHovered: color.surfer[50], + neutralContainerFocused: color.surfer[50], + neutralContainerPressed: color.surfer[50], + neutralContainerDisabled: chroma(color.surfer[100]).alpha(opacity.dim3).css('rgb'), onNeutralContainer: color.base.gloom }, - core: { - basic: color.tin[500], - basicHovered: color.tin[400], - basicFocused: color.tin[400], - basicPressed: color.tin[400], - basicDisabled: chroma(color.tin[400]).alpha(opacity.dim3).css('rgb'), + base: { + basic: color.surfer[500], + basicHovered: color.surfer[400], + basicFocused: color.surfer[400], + basicPressed: color.surfer[400], + basicDisabled: chroma(color.surfer[400]).alpha(opacity.dim3).css('rgb'), onBasic: color.base.bright, - basicContainer: color.tin[50], - basicContainerHovered: color.tin[100], - basicContainerFocused: color.tin[100], - basicContainerPressed: color.tin[100], - basicContainerDisabled: chroma(color.tin[50]).alpha(opacity.dim3).css('rgb'), - onBasicContainer: color.tin[700], + basicContainer: color.surfer[50], + basicContainerHovered: color.surfer[100], + basicContainerFocused: color.surfer[100], + basicContainerPressed: color.surfer[100], + basicContainerDisabled: chroma(color.surfer[50]).alpha(opacity.dim3).css('rgb'), + onBasicContainer: color.surfer[700], - basicVariant: color.tin[700], - basicVariantHovered: color.tin[600], - basicVariantFocused: color.tin[600], - basicVariantPressed: color.tin[600], - basicVariantDisabled: chroma(color.tin[600]).alpha(opacity.dim3).css('rgb'), + basicVariant: color.surfer[700], + basicVariantHovered: color.surfer[600], + basicVariantFocused: color.surfer[600], + basicVariantPressed: color.surfer[600], + basicVariantDisabled: chroma(color.surfer[600]).alpha(opacity.dim3).css('rgb'), onBasicVariant: color.base.bright, background: color.base.bright, onBackground: color.base.gloom, - backgroundVariant: color.poe[100], + backgroundVariant: color.surfer[100], onBackgroundVariant: color.base.gloom, surface: color.base.bright, onSurface: color.base.gloom, - surfaceInverse: color.poe[900], + surfaceInverse: color.surfer[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]).alpha(opacity.dim3).css('rgb'), - outlineHigh: color.poe[900] + outline: color.surfer[400], + outlineHovered: color.surfer[700], + outlinePressed: color.surfer[700], + outlineFocused: color.surfer[700], + outlineDisabled: chroma(color.surfer[400]).alpha(opacity.dim3).css('rgb'), + outlineHigh: color.surfer[900] }, extra: {}, social: { diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index dde44c5f97..c24158abdc 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -1,6 +1,6 @@ import {kebabCase} from 'change-case' -import {type SemanticShape, type ThemePrimitive} from './types' +import {type SemanticTheme, type PrimitiveTheme} from './types' const anidate = (accumulator: Map, [key, value]) => { if (typeof value === 'string' || typeof value === 'number') { @@ -22,7 +22,7 @@ const anidate = (accumulator: Map, [key, value]) => { } export const generate = { - scss: ({primitive, semantic}: {primitive: ThemePrimitive; semantic: SemanticShape}) => { + scss: ({primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}) => { const semanticMaps = { color: new Map(), font: new Map(), @@ -116,7 +116,7 @@ export const generate = { } ` }, - json: ({semantic}: {primitive: ThemePrimitive; semantic: SemanticShape}) => { + json: ({semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}) => { return JSON.stringify(semantic, null, 2) } } diff --git a/utils/sui-tokens/src/index.ts b/utils/sui-tokens/src/index.ts new file mode 100644 index 0000000000..5754ae3c28 --- /dev/null +++ b/utils/sui-tokens/src/index.ts @@ -0,0 +1,9 @@ +export { + type PrimitiveTheme, + type SemanticTheme, + type ColorPrimitives, + type ColorRamp, + type OpacityPrimitive, + type Base, + type Theme +} from './types' diff --git a/utils/sui-tokens/src/types.ts b/utils/sui-tokens/src/types.ts index a92d9b9751..7622db826f 100644 --- a/utils/sui-tokens/src/types.ts +++ b/utils/sui-tokens/src/types.ts @@ -12,7 +12,7 @@ export interface OpacityPrimitive { export type Base = string -export interface ThemePrimitive { +export interface PrimitiveTheme { prefix?: string fontSize?: string fontFamily?: { @@ -29,7 +29,7 @@ export interface ThemePrimitive { } } -export interface SemanticShape { +export interface SemanticTheme { color?: { brand?: { main?: string @@ -95,7 +95,7 @@ export interface SemanticShape { supportVariantDisabled?: string onSupportVariant?: string } - status?: { + feedback?: { success?: string successHovered?: string successPressed?: string @@ -157,7 +157,7 @@ export interface SemanticShape { neutralContainerDisabled?: string onNeutralContainer?: string } - core?: { + base?: { basic?: string basicHovered?: string basicFocused?: string @@ -228,6 +228,6 @@ export interface SemanticShape { } export interface Theme { - primitive: ThemePrimitive - semantic: (themePrimitives: ThemePrimitive) => SemanticShape + primitive: PrimitiveTheme + semantic: (themePrimitives: PrimitiveTheme) => SemanticTheme } From 0358f32f6c5815f41de04f29d07ed11d5b77eb3f Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 13:36:31 +0100 Subject: [PATCH 11/42] feat(utils/sui-tokens): bump --- package-lock.json | 719 ++++++++++++++++++++-------------- utils/sui-tokens/package.json | 2 +- 2 files changed, 423 insertions(+), 298 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1deee84143..964ee5ee81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3176,16 +3176,16 @@ } }, "node_modules/@babel/plugin-transform-runtime": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.7.tgz", - "integrity": "sha512-fa0hnfmiXc9fq/weK34MUV0drz2pOL/vfKWvN7Qw127hiUPabFCUMgAbYWcchRzMJit4o5ARsK/s+5h0249pLw==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz", + "integrity": "sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==", "dev": true, "dependencies": { - "@babel/helper-module-imports": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", - "babel-plugin-polyfill-corejs2": "^0.4.7", - "babel-plugin-polyfill-corejs3": "^0.8.7", - "babel-plugin-polyfill-regenerator": "^0.5.4", + "@babel/helper-module-imports": "^7.25.9", + "@babel/helper-plugin-utils": "^7.25.9", + "babel-plugin-polyfill-corejs2": "^0.4.10", + "babel-plugin-polyfill-corejs3": "^0.10.6", + "babel-plugin-polyfill-regenerator": "^0.6.1", "semver": "^6.3.1" }, "engines": { @@ -4479,9 +4479,9 @@ } }, "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", - "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz", + "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==", "dev": true, "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -7425,15 +7425,15 @@ } }, "node_modules/array.prototype.flat": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz", - "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz", + "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "es-shim-unscopables": "^1.0.0" + "call-bind": "^1.0.8", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.5", + "es-shim-unscopables": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -7443,15 +7443,15 @@ } }, "node_modules/array.prototype.flatmap": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz", - "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz", + "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "es-shim-unscopables": "^1.0.0" + "call-bind": "^1.0.8", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.5", + "es-shim-unscopables": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -7461,19 +7461,18 @@ } }, "node_modules/arraybuffer.prototype.slice": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz", - "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz", + "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.1", - "call-bind": "^1.0.5", + "call-bind": "^1.0.8", "define-properties": "^1.2.1", - "es-abstract": "^1.22.3", - "es-errors": "^1.2.1", - "get-intrinsic": "^1.2.3", - "is-array-buffer": "^3.0.4", - "is-shared-array-buffer": "^1.0.2" + "es-abstract": "^1.23.5", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "is-array-buffer": "^3.0.4" }, "engines": { "node": ">= 0.4" @@ -7821,57 +7820,25 @@ } }, "node_modules/babel-plugin-polyfill-corejs3": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz", - "integrity": "sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==", + "version": "0.10.6", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz", + "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==", "dev": true, "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.4.4", - "core-js-compat": "^3.33.1" - }, - "peerDependencies": { - "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" - } - }, - "node_modules/babel-plugin-polyfill-corejs3/node_modules/@babel/helper-define-polyfill-provider": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz", - "integrity": "sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==", - "dev": true, - "dependencies": { - "@babel/helper-compilation-targets": "^7.22.6", - "@babel/helper-plugin-utils": "^7.22.5", - "debug": "^4.1.1", - "lodash.debounce": "^4.0.8", - "resolve": "^1.14.2" + "@babel/helper-define-polyfill-provider": "^0.6.2", + "core-js-compat": "^3.38.0" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, "node_modules/babel-plugin-polyfill-regenerator": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz", - "integrity": "sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz", + "integrity": "sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==", "dev": true, "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.5.0" - }, - "peerDependencies": { - "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" - } - }, - "node_modules/babel-plugin-polyfill-regenerator/node_modules/@babel/helper-define-polyfill-provider": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz", - "integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==", - "dev": true, - "dependencies": { - "@babel/helper-compilation-targets": "^7.22.6", - "@babel/helper-plugin-utils": "^7.22.5", - "debug": "^4.1.1", - "lodash.debounce": "^4.0.8", - "resolve": "^1.14.2" + "@babel/helper-define-polyfill-provider": "^0.6.3" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" @@ -7905,16 +7872,16 @@ "dev": true }, "node_modules/babel-preset-sui": { - "version": "3.54.0", - "resolved": "https://registry.npmjs.org/babel-preset-sui/-/babel-preset-sui-3.54.0.tgz", - "integrity": "sha512-J6vFr98ymqRvumF69svZCUN+h1r5/KrX7JHam70CcjSbQ18IKKsukr5Ak7ulXNWX8S9vJqcd5V2rJMyQRtF0Yw==", + "version": "3.55.0", + "resolved": "https://registry.npmjs.org/babel-preset-sui/-/babel-preset-sui-3.55.0.tgz", + "integrity": "sha512-l3vQYO5kNawuHkZfd4AsgCribkdB6+tP1j8cH99lviq+CbDBs7dNk6KK0aQexGCIqTmlvR5h3gI5qeTCdnOhRA==", "dev": true, "dependencies": { "@babel/core": "7.18.10", "@babel/plugin-proposal-decorators": "7.23.7", "@babel/plugin-syntax-export-default-from": "7.18.6", "@babel/plugin-syntax-export-namespace-from": "7.8.3", - "@babel/plugin-transform-runtime": "7.23.7", + "@babel/plugin-transform-runtime": "7.25.9", "@babel/preset-env": "7.18.10", "@babel/preset-react": "7.18.6", "@babel/runtime": "7.18.9", @@ -8109,9 +8076,9 @@ "dev": true }, "node_modules/browserslist": { - "version": "4.24.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", - "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", + "version": "4.24.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz", + "integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==", "dev": true, "funding": [ { @@ -8128,9 +8095,9 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001669", - "electron-to-chromium": "^1.5.41", - "node-releases": "^2.0.18", + "caniuse-lite": "^1.0.30001688", + "electron-to-chromium": "^1.5.73", + "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { @@ -8250,6 +8217,21 @@ "node": ">= 0.4" } }, + "node_modules/call-bound": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz", + "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "get-intrinsic": "^1.2.6" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -8317,9 +8299,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001687", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz", - "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==", + "version": "1.0.30001689", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz", + "integrity": "sha512-CmeR2VBycfa+5/jOfnp/NpWPGd06nf1XYiefUvhXFfZE4GkRc9jv+eGPS4nT558WS/8lYCzV8SlANCIPvbWP1g==", "dev": true, "funding": [ { @@ -9228,9 +9210,9 @@ "dev": true }, "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", - "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz", + "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", @@ -9239,7 +9221,7 @@ "ajv-keywords": "^5.1.0" }, "engines": { - "node": ">= 12.13.0" + "node": ">= 10.13.0" }, "funding": { "type": "opencollective", @@ -9917,11 +9899,11 @@ } }, "node_modules/dunder-proto": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.0.tgz", - "integrity": "sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", "dependencies": { - "call-bind-apply-helpers": "^1.0.0", + "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" }, @@ -10005,9 +9987,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.72", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.72.tgz", - "integrity": "sha512-ZpSAUOZ2Izby7qnZluSrAlGgGQzucmFbN0n64dYzocYxnxV5ufurpj3VgEe4cUp7ir9LmeLxNYo8bVnlM8bQHw==", + "version": "1.5.74", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz", + "integrity": "sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw==", "dev": true }, "node_modules/emoji-regex": { @@ -10117,12 +10099,15 @@ } }, "node_modules/ent": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.1.tgz", - "integrity": "sha512-QHuXVeZx9d+tIQAz/XztU0ZwZf2Agg9CcXcgE1rurqvdBeDBrpSwjl8/6XUqMg7tw2Y7uAdKb2sRv+bSEFqQ5A==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.2.tgz", + "integrity": "sha512-kKvD1tO6BM+oK9HzCPpUdRb4vKFQY/FPTFmurMvh6LlN68VMrdj77w8yp51/kDbpkFOS9J8w5W6zIzgM2H8/hw==", "dev": true, "dependencies": { - "punycode": "^1.4.1" + "call-bound": "^1.0.3", + "es-errors": "^1.3.0", + "punycode": "^1.4.1", + "safe-regex-test": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -10154,57 +10139,59 @@ } }, "node_modules/es-abstract": { - "version": "1.23.5", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.5.tgz", - "integrity": "sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==", + "version": "1.23.6", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.6.tgz", + "integrity": "sha512-Ifco6n3yj2tMZDWNLyloZrytt9lqqlwvS83P3HtaETR0NUOYnIULGGHpktqYGObGy+8wc1okO25p8TjemhImvA==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.1", - "arraybuffer.prototype.slice": "^1.0.3", + "arraybuffer.prototype.slice": "^1.0.4", "available-typed-arrays": "^1.0.7", - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", + "call-bound": "^1.0.3", "data-view-buffer": "^1.0.1", "data-view-byte-length": "^1.0.1", "data-view-byte-offset": "^1.0.0", - "es-define-property": "^1.0.0", + "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "es-set-tostringtag": "^2.0.3", - "es-to-primitive": "^1.2.1", - "function.prototype.name": "^1.1.6", - "get-intrinsic": "^1.2.4", + "es-to-primitive": "^1.3.0", + "function.prototype.name": "^1.1.7", + "get-intrinsic": "^1.2.6", "get-symbol-description": "^1.0.2", "globalthis": "^1.0.4", - "gopd": "^1.0.1", + "gopd": "^1.2.0", "has-property-descriptors": "^1.0.2", - "has-proto": "^1.0.3", - "has-symbols": "^1.0.3", + "has-proto": "^1.2.0", + "has-symbols": "^1.1.0", "hasown": "^2.0.2", - "internal-slot": "^1.0.7", + "internal-slot": "^1.1.0", "is-array-buffer": "^3.0.4", "is-callable": "^1.2.7", - "is-data-view": "^1.0.1", + "is-data-view": "^1.0.2", "is-negative-zero": "^2.0.3", - "is-regex": "^1.1.4", + "is-regex": "^1.2.1", "is-shared-array-buffer": "^1.0.3", - "is-string": "^1.0.7", + "is-string": "^1.1.1", "is-typed-array": "^1.1.13", - "is-weakref": "^1.0.2", + "is-weakref": "^1.1.0", + "math-intrinsics": "^1.0.0", "object-inspect": "^1.13.3", "object-keys": "^1.1.1", "object.assign": "^4.1.5", "regexp.prototype.flags": "^1.5.3", - "safe-array-concat": "^1.1.2", - "safe-regex-test": "^1.0.3", - "string.prototype.trim": "^1.2.9", - "string.prototype.trimend": "^1.0.8", + "safe-array-concat": "^1.1.3", + "safe-regex-test": "^1.1.0", + "string.prototype.trim": "^1.2.10", + "string.prototype.trimend": "^1.0.9", "string.prototype.trimstart": "^1.0.8", "typed-array-buffer": "^1.0.2", "typed-array-byte-length": "^1.0.1", - "typed-array-byte-offset": "^1.0.2", - "typed-array-length": "^1.0.6", + "typed-array-byte-offset": "^1.0.3", + "typed-array-length": "^1.0.7", "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.15" + "which-typed-array": "^1.1.16" }, "engines": { "node": ">= 0.4" @@ -10265,7 +10252,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", - "dev": true, "dependencies": { "es-errors": "^1.3.0" }, @@ -12289,15 +12275,16 @@ } }, "node_modules/function.prototype.name": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz", - "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==", + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.7.tgz", + "integrity": "sha512-2g4x+HqTJKM9zcJqBSpjoRmdcPFtJM60J3xJisTQSXBWka5XqyBN/2tNUgma1mztTXyDuUsEtYe5qcs7xYzYQA==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "functions-have-names": "^1.2.3" + "call-bind": "^1.0.8", + "define-properties": "^1.2.1", + "functions-have-names": "^1.2.3", + "hasown": "^2.0.2", + "is-callable": "^1.2.7" }, "engines": { "node": ">= 0.4" @@ -12342,18 +12329,20 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.5.tgz", - "integrity": "sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz", + "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==", "dependencies": { - "call-bind-apply-helpers": "^1.0.0", + "call-bind-apply-helpers": "^1.0.1", "dunder-proto": "^1.0.0", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0", "function-bind": "^1.1.2", "gopd": "^1.2.0", "has-symbols": "^1.1.0", - "hasown": "^2.0.2" + "hasown": "^2.0.2", + "math-intrinsics": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -13322,14 +13311,14 @@ } }, "node_modules/internal-slot": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", - "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz", + "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==", "dev": true, "dependencies": { "es-errors": "^1.3.0", - "hasown": "^2.0.0", - "side-channel": "^1.0.4" + "hasown": "^2.0.2", + "side-channel": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -13359,12 +13348,12 @@ } }, "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz", + "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==", "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" + "call-bound": "^1.0.2", + "has-tostringtag": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -13374,13 +13363,14 @@ } }, "node_modules/is-array-buffer": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", - "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz", + "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.1" + "call-bind": "^1.0.8", + "call-bound": "^1.0.3", + "get-intrinsic": "^1.2.6" }, "engines": { "node": ">= 0.4" @@ -13438,12 +13428,12 @@ } }, "node_modules/is-boolean-object": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.0.tgz", - "integrity": "sha512-kR5g0+dXf/+kXnqI+lu0URKYPKgICtHGGNCDSB10AaUFj3o/HkB3u7WfpRBJGFopxxY0oH3ux7ZsDjLtK7xqvw==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.1.tgz", + "integrity": "sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bound": "^1.0.2", "has-tostringtag": "^1.0.2" }, "engines": { @@ -13466,9 +13456,9 @@ } }, "node_modules/is-core-module": { - "version": "2.15.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz", - "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.0.tgz", + "integrity": "sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==", "dev": true, "dependencies": { "hasown": "^2.0.2" @@ -13481,11 +13471,13 @@ } }, "node_modules/is-data-view": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz", - "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz", + "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==", "dev": true, "dependencies": { + "call-bound": "^1.0.2", + "get-intrinsic": "^1.2.6", "is-typed-array": "^1.1.13" }, "engines": { @@ -13496,11 +13488,12 @@ } }, "node_modules/is-date-object": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", - "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz", + "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==", "dependencies": { - "has-tostringtag": "^1.0.0" + "call-bound": "^1.0.2", + "has-tostringtag": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -13533,12 +13526,12 @@ } }, "node_modules/is-finalizationregistry": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.0.tgz", - "integrity": "sha512-qfMdqbAQEwBw78ZyReKnlA8ezmPdb9BemzIIip/JkjaZUhitfXDkkr+3QTboW0JrSXT1QWyYShpvnNHGZ4c4yA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz", + "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==", "dev": true, "dependencies": { - "call-bind": "^1.0.7" + "call-bound": "^1.0.3" }, "engines": { "node": ">= 0.4" @@ -13665,12 +13658,12 @@ } }, "node_modules/is-number-object": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.0.tgz", - "integrity": "sha512-KVSZV0Dunv9DTPkhXwcZ3Q+tUc9TsaE1ZwX5J2WMvsSGS6Md8TFPun5uwh0yRdrNerI6vf/tbJxqSx4c1ZI1Lw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz", + "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" }, "engines": { @@ -13720,12 +13713,12 @@ } }, "node_modules/is-regex": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.0.tgz", - "integrity": "sha512-B6ohK4ZmoftlUe+uvenXSbPJFo6U37BH7oO1B3nQH8f/7h27N56s85MhUtbFJAziz5dcmuR3i8ovUl35zp8pFA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz", + "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==", "dependencies": { - "call-bind": "^1.0.7", - "gopd": "^1.1.0", + "call-bound": "^1.0.2", + "gopd": "^1.2.0", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" }, @@ -13785,12 +13778,12 @@ } }, "node_modules/is-string": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.0.tgz", - "integrity": "sha512-PlfzajuF9vSo5wErv3MJAKD/nqf9ngAs1NFQYm16nUYFO2IzxJ2hcm+IOCg+EEopdykNNUhVq5cz35cAUxU8+g==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz", + "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" }, "engines": { @@ -13801,14 +13794,14 @@ } }, "node_modules/is-symbol": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.0.tgz", - "integrity": "sha512-qS8KkNNXUZ/I+nX6QT8ZS1/Yx0A444yhzdTKxCzKkNjQ9sHErBxJnJAgh+f5YhusYECEcjo4XcyH87hn6+ks0A==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz", + "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", - "has-symbols": "^1.0.3", - "safe-regex-test": "^1.0.3" + "call-bound": "^1.0.2", + "has-symbols": "^1.1.0", + "safe-regex-test": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -13869,25 +13862,28 @@ } }, "node_modules/is-weakref": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", - "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.0.tgz", + "integrity": "sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==", "dev": true, "dependencies": { - "call-bind": "^1.0.2" + "call-bound": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" } }, "node_modules/is-weakset": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz", - "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz", + "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", - "get-intrinsic": "^1.2.4" + "call-bound": "^1.0.3", + "get-intrinsic": "^1.2.6" }, "engines": { "node": ">= 0.4" @@ -14918,6 +14914,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/math-intrinsics": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.0.0.tgz", + "integrity": "sha512-4MqMiKP90ybymYvsut0CH2g4XWbfLtmlCkXmtmdcDCxNB+mQcu1w/1+L/VD7vi/PSv7X2JYV7SCcR+jiPXnQtA==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -15267,9 +15271,9 @@ "dev": true }, "node_modules/mini-css-extract-plugin/node_modules/schema-utils": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", - "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz", + "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", @@ -15278,7 +15282,7 @@ "ajv-keywords": "^5.1.0" }, "engines": { - "node": ">= 12.13.0" + "node": ">= 10.13.0" }, "funding": { "type": "opencollective", @@ -16893,9 +16897,9 @@ } }, "node_modules/postcss-modules-local-by-default": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.1.0.tgz", - "integrity": "sha512-rm0bdSv4jC3BDma3s9H19ZddW0aHX6EoqwDYU2IfZhRN+53QrufTRo2IdkAbRqLx4R2IYbZnbjKKxg4VN5oU9Q==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz", + "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==", "dev": true, "dependencies": { "icss-utils": "^5.0.0", @@ -17628,9 +17632,9 @@ } }, "node_modules/rc-util": { - "version": "5.44.1", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.1.tgz", - "integrity": "sha512-h6z91oGfWJPZgunkFBWSobfL0CkyLeaUNWP1ru7b05GMUSe2uHgTk0EiFEQ11v+zJBrORuXFl6Htf949ZSDdOw==", + "version": "5.44.2", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.2.tgz", + "integrity": "sha512-uGSk3hpPBLa3/0QAcKhCjgl4SFnhQCJDLvvpoLdbR6KgDuXrujG+dQaUeUvBJr2ZWak1O/9n+cYbJiWmmk95EQ==", "dependencies": { "@babel/runtime": "^7.18.3", "react-is": "^18.2.0" @@ -17882,9 +17886,9 @@ } }, "node_modules/react-joyride/node_modules/type-fest": { - "version": "4.30.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.0.tgz", - "integrity": "sha512-G6zXWS1dLj6eagy6sVhOMQiLtJdxQBHIA9Z6HFUNLOlr6MFOgzV8wvmidtPONfPtEUv0uZsy77XJNzTAfwPDaA==", + "version": "4.30.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.2.tgz", + "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==", "engines": { "node": ">=16" }, @@ -18509,12 +18513,12 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" }, "node_modules/resolve": { - "version": "1.22.8", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", - "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "version": "1.22.9", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.9.tgz", + "integrity": "sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==", "dev": true, "dependencies": { - "is-core-module": "^2.13.0", + "is-core-module": "^2.16.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, @@ -18647,14 +18651,15 @@ } }, "node_modules/safe-array-concat": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz", - "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz", + "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", - "get-intrinsic": "^1.2.4", - "has-symbols": "^1.0.3", + "call-bind": "^1.0.8", + "call-bound": "^1.0.2", + "get-intrinsic": "^1.2.6", + "has-symbols": "^1.1.0", "isarray": "^2.0.5" }, "engines": { @@ -18677,14 +18682,14 @@ "dev": true }, "node_modules/safe-regex-test": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz", - "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz", + "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==", "dev": true, "dependencies": { - "call-bind": "^1.0.6", + "call-bound": "^1.0.2", "es-errors": "^1.3.0", - "is-regex": "^1.1.4" + "is-regex": "^1.2.1" }, "engines": { "node": ">= 0.4" @@ -19071,14 +19076,65 @@ } }, "node_modules/side-channel": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", - "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", + "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", "dependencies": { - "call-bind": "^1.0.7", "es-errors": "^1.3.0", - "get-intrinsic": "^1.2.4", - "object-inspect": "^1.13.1" + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", + "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" }, "engines": { "node": ">= 0.4" @@ -19484,12 +19540,13 @@ } }, "node_modules/stop-iteration-iterator": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", - "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz", + "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==", "dev": true, "dependencies": { - "internal-slot": "^1.0.4" + "es-errors": "^1.3.0", + "internal-slot": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -19674,15 +19731,18 @@ } }, "node_modules/string.prototype.trim": { - "version": "1.2.9", - "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz", - "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==", + "version": "1.2.10", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz", + "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", + "call-bound": "^1.0.2", + "define-data-property": "^1.1.4", "define-properties": "^1.2.1", - "es-abstract": "^1.23.0", - "es-object-atoms": "^1.0.0" + "es-abstract": "^1.23.5", + "es-object-atoms": "^1.0.0", + "has-property-descriptors": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -19692,15 +19752,19 @@ } }, "node_modules/string.prototype.trimend": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz", - "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz", + "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", + "call-bound": "^1.0.2", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -20563,16 +20627,16 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.10", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz", - "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==", + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.11.tgz", + "integrity": "sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==", "dev": true, "dependencies": { - "@jridgewell/trace-mapping": "^0.3.20", + "@jridgewell/trace-mapping": "^0.3.25", "jest-worker": "^27.4.5", - "schema-utils": "^3.1.1", - "serialize-javascript": "^6.0.1", - "terser": "^5.26.0" + "schema-utils": "^4.3.0", + "serialize-javascript": "^6.0.2", + "terser": "^5.31.1" }, "engines": { "node": ">= 10.13.0" @@ -20596,6 +20660,59 @@ } } }, + "node_modules/terser-webpack-plugin/node_modules/ajv": { + "version": "8.17.1", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", + "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.3", + "fast-uri": "^3.0.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.3" + }, + "peerDependencies": { + "ajv": "^8.8.2" + } + }, + "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/terser-webpack-plugin/node_modules/schema-utils": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz", + "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/terser/node_modules/commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -21122,15 +21239,18 @@ } }, "node_modules/unbox-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", - "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz", + "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", + "call-bound": "^1.0.3", "has-bigints": "^1.0.2", - "has-symbols": "^1.0.3", - "which-boxed-primitive": "^1.0.2" + "has-symbols": "^1.1.0", + "which-boxed-primitive": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -21269,11 +21389,16 @@ "dev": true }, "node_modules/use-composed-ref": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", - "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.4.0.tgz", + "integrity": "sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==", "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, "node_modules/use-isomorphic-layout-effect": { @@ -21290,14 +21415,14 @@ } }, "node_modules/use-latest": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz", - "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.3.0.tgz", + "integrity": "sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==", "dependencies": { "use-isomorphic-layout-effect": "^1.1.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -21562,9 +21687,9 @@ "dev": true }, "node_modules/webpack-dev-middleware/node_modules/schema-utils": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", - "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz", + "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", @@ -21573,7 +21698,7 @@ "ajv-keywords": "^5.1.0" }, "engines": { - "node": ">= 12.13.0" + "node": ">= 10.13.0" }, "funding": { "type": "opencollective", @@ -21733,9 +21858,9 @@ } }, "node_modules/webpack-dev-server/node_modules/schema-utils": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", - "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz", + "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", @@ -21744,7 +21869,7 @@ "ajv-keywords": "^5.1.0" }, "engines": { - "node": ">= 12.13.0" + "node": ">= 10.13.0" }, "funding": { "type": "opencollective", @@ -21870,16 +21995,16 @@ } }, "node_modules/which-boxed-primitive": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.0.tgz", - "integrity": "sha512-Ei7Miu/AXe2JJ4iNF5j/UphAgRoma4trE6PtisM09bPygb3egMH3YLW/befsWb1A1AxvNSFidOFTB18XtnIIng==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz", + "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==", "dev": true, "dependencies": { "is-bigint": "^1.1.0", - "is-boolean-object": "^1.2.0", - "is-number-object": "^1.1.0", - "is-string": "^1.1.0", - "is-symbol": "^1.1.0" + "is-boolean-object": "^1.2.1", + "is-number-object": "^1.1.1", + "is-string": "^1.1.1", + "is-symbol": "^1.1.1" }, "engines": { "node": ">= 0.4" @@ -21889,24 +22014,24 @@ } }, "node_modules/which-builtin-type": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.0.tgz", - "integrity": "sha512-I+qLGQ/vucCby4tf5HsLmGueEla4ZhwTBSqaooS+Y0BuxN4Cp+okmGuV+8mXZ84KDI9BA+oklo+RzKg0ONdSUA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz", + "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bound": "^1.0.2", "function.prototype.name": "^1.1.6", "has-tostringtag": "^1.0.2", "is-async-function": "^2.0.0", - "is-date-object": "^1.0.5", + "is-date-object": "^1.1.0", "is-finalizationregistry": "^1.1.0", "is-generator-function": "^1.0.10", - "is-regex": "^1.1.4", + "is-regex": "^1.2.1", "is-weakref": "^1.0.2", "isarray": "^2.0.5", - "which-boxed-primitive": "^1.0.2", + "which-boxed-primitive": "^1.1.0", "which-collection": "^1.0.2", - "which-typed-array": "^1.1.15" + "which-typed-array": "^1.1.16" }, "engines": { "node": ">= 0.4" @@ -22207,9 +22332,9 @@ } }, "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.3", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.3.tgz", - "integrity": "sha512-0DqVZxyUoip6Mc1T7yVNQyYy91DuFAxAYFQI7vREJGqFppShsLRG1bLh4u8A0jPtzGUFO4yn4tNJtoY6yTukhQ==", + "version": "0.0.0-beta.6", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.6.tgz", + "integrity": "sha512-WryHT1eB2DcdSme1Kem0GLWisgrM4Hm1UuHZRaNU69aOdJ4OBivLNDlcTiRLLHPfvFO7PQ+km1gV+Lz6LpUpqA==", "dev": true, "bin": { "tokens": "bin/tokens.mjs", @@ -22221,7 +22346,7 @@ }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.4", + "version": "0.0.0-beta.6", "license": "MIT", "bin": { "tokens": "bin/tokens.mjs", diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 7ee2d15240..6cdf984e26 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.5", + "version": "0.0.0-beta.6", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" From e0cf0c5a4a2a94ab477537a042db259d9b4579c7 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 15:44:28 +0100 Subject: [PATCH 12/42] fix(utils/sui-tokens): minor template changes --- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/generate.ts | 23 +++++------------------ 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 6cdf984e26..ec4b424dc1 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.6", + "version": "0.0.0-beta.7", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index c24158abdc..4c76ef243b 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -96,24 +96,11 @@ export const generate = { } } -@layer variables { - @layer semantic { - @layer color {${scssTokens.color} - } - - @layer font {${scssTokens.font} - } - - @layer opacity {${scssTokens.opacity} - } - - @layer elevation {${scssTokens.elevation} - } - - @layer spacing {${scssTokens.spacing} - } - } -} +${scssTokens.color} +${scssTokens.font} +${scssTokens.opacity} +${scssTokens.elevation} +${scssTokens.spacing} ` }, json: ({semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}) => { From 7eb675c5e7625114c082a445481d76ca63a6d421 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 15:52:22 +0100 Subject: [PATCH 13/42] fix(utils/sui-tokens): templace spacing --- utils/sui-tokens/src/generate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 4c76ef243b..0f0ffadd89 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -63,7 +63,7 @@ export const generate = { scssTokens[keyword] = ''.concat( ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { return ` - $${key}: var(${getTokenKey(key)});` +$${key}: var(${getTokenKey(key)});` }) ) } From 29397553109af2169b79f60700a2584f1078b387 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 15:52:51 +0100 Subject: [PATCH 14/42] feat(utils/sui-tokens): bump --- utils/sui-tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index ec4b424dc1..61a1789d73 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.7", + "version": "0.0.0-beta.8", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" From 3614a6c3e330e677ef7da93384dede985669139c Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 16:00:16 +0100 Subject: [PATCH 15/42] feat(utils/sui-theme): minor changes --- utils/sui-theme/package.json | 2 +- .../src/milanuncios.tokens.config.ts | 290 ------------------ 2 files changed, 1 insertion(+), 291 deletions(-) delete mode 100644 utils/sui-theme/src/milanuncios.tokens.config.ts diff --git a/utils/sui-theme/package.json b/utils/sui-theme/package.json index bf486ba2b7..f0b4c7cf06 100644 --- a/utils/sui-theme/package.json +++ b/utils/sui-theme/package.json @@ -21,7 +21,7 @@ ], "main": "lib/index.scss", "scripts": { - "tokens": "tokens scss -c ./milanuncios.tokens.config.js -o ./src/.tokens/.tokens.scss", + "tokens": "tokens scss -o ./src/.tokens/.tokens.scss", "lib": "rm -rf ./lib && npm run tokens && cp -R src lib", "prepublishOnly": "npm run lib" }, diff --git a/utils/sui-theme/src/milanuncios.tokens.config.ts b/utils/sui-theme/src/milanuncios.tokens.config.ts deleted file mode 100644 index db7df6e366..0000000000 --- a/utils/sui-theme/src/milanuncios.tokens.config.ts +++ /dev/null @@ -1,290 +0,0 @@ -import chroma from 'chroma-js' - -import {type Theme, type ThemePrimitive} from '@s-ui/tokens' - -const theme: Theme = { - primitive: { - fontSize: '16px', - 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' - } - }, - colorSpace: 'rgb', - opacity: { - full: 1, - dim1: 0.72, - dim2: 0.68, - dim3: 0.4, - dim4: 0.16, - dim5: 0.08, - none: 0 - } - }, - semantic: ({color, opacity}: ThemePrimitive) => ({ - color: { - brand: { - main: color.hero[500], - mainHovered: color.hero[400], - mainPressed: color.hero[400], - mainFocused: color.hero[400], - mainDisabled: chroma(color.hero[400]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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 From eefec6a1d99e9ee2a64e3550f88ab43bbad6dad3 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 16:24:16 +0100 Subject: [PATCH 16/42] fix(utils/sui-tokens): bad structure composition --- utils/sui-theme/src/index.scss | 3 +-- utils/sui-tokens/bin/tokens-scss.mjs | 1 + utils/sui-tokens/src/build.ts | 12 ++++++++++-- utils/sui-tokens/src/generate.ts | 21 +++++++-------------- 4 files changed, 19 insertions(+), 18 deletions(-) diff --git a/utils/sui-theme/src/index.scss b/utils/sui-theme/src/index.scss index 905311bc15..418a513fbe 100644 --- a/utils/sui-theme/src/index.scss +++ b/utils/sui-theme/src/index.scss @@ -1,7 +1,6 @@ +// tokens @import './.tokens/.tokens'; -@layer tokens; - // Utils @import './utils'; // Settings diff --git a/utils/sui-tokens/bin/tokens-scss.mjs b/utils/sui-tokens/bin/tokens-scss.mjs index 54b08e91fa..10b924a543 100755 --- a/utils/sui-tokens/bin/tokens-scss.mjs +++ b/utils/sui-tokens/bin/tokens-scss.mjs @@ -10,6 +10,7 @@ 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') .action(runSCSS) program.parse(process.argv) diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index 18ae52102e..91c216fbd1 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -102,14 +102,22 @@ export async function writeTokensConfig(data: string, outputPath?: string) { } } -export const runSCSS = async ({configuration, output}: {configuration?: string; output?: string}) => { +export const runSCSS = async ({ + configuration, + output, + selector +}: { + configuration?: string + output?: string + selecor?: string +}) => { 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), output) + await writeTokensConfig(generate.scss(result, selector), output) console.log(chalk.blue('Done!')) } diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 0f0ffadd89..41484dc5ed 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -22,7 +22,7 @@ const anidate = (accumulator: Map, [key, value]) => { } export const generate = { - scss: ({primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}) => { + scss: ({primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}, selector: string) => { const semanticMaps = { color: new Map(), font: new Map(), @@ -77,23 +77,16 @@ $${key}: var(${getTokenKey(key)});` add('spacing', prefix) return `// This file is auto-generated by sui-tokens -@layer tokens { - @layer semantic { - @layer color {${semanticTokens.color} - } +${selector} { + ${semanticTokens.color} - @layer font {${semanticTokens.font} - } + ${semanticTokens.font} - @layer opacity {${semanticTokens.opacity} - } + ${semanticTokens.opacity} - @layer elevation {${semanticTokens.elevation} - } + ${semanticTokens.elevation} - @layer spacing {${semanticTokens.spacing} - } - } + ${semanticTokens.spacing} } ${scssTokens.color} From c351cbc67f1fce8a50a5ecfbe3e6a7b0653d4837 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 16:25:00 +0100 Subject: [PATCH 17/42] feat(utils/sui-tokens): bump --- utils/sui-tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 61a1789d73..85da0c16ca 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.8", + "version": "0.0.0-beta.9", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" From d4322303ec22008b06ea106f53c1c208b4ad0fb5 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 09:23:01 +0100 Subject: [PATCH 18/42] feat(utils/sui-tokens): new way to template tokens --- package-lock.json | 16 ++++++++-------- utils/sui-tokens/milanuncios.tokens.config.ts | 4 ++-- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/default.tokens.config.ts | 4 ++-- utils/sui-tokens/src/generate.ts | 2 +- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 964ee5ee81..471fdc3c50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -374,7 +374,7 @@ }, "components/atom/radioButton": { "name": "@s-ui/react-atom-radio-button", - "version": "1.11.0", + "version": "1.12.0", "license": "MIT", "dependencies": { "@s-ui/component-dependencies": "1" @@ -1040,7 +1040,7 @@ }, "components/molecule/dataCounter": { "name": "@s-ui/react-molecule-data-counter", - "version": "1.17.0", + "version": "1.18.0", "license": "MIT", "dependencies": { "@s-ui/hoc": "1", @@ -1276,7 +1276,7 @@ }, "components/molecule/photoUploader": { "name": "@s-ui/react-molecule-photo-uploader", - "version": "2.32.0", + "version": "2.33.0", "license": "MIT", "dependencies": { "@s-ui/js": "2", @@ -1385,7 +1385,7 @@ }, "components/molecule/select": { "name": "@s-ui/react-molecule-select", - "version": "1.73.0", + "version": "1.74.0", "license": "MIT", "dependencies": { "@s-ui/js": "2", @@ -22332,9 +22332,9 @@ } }, "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.6", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.6.tgz", - "integrity": "sha512-WryHT1eB2DcdSme1Kem0GLWisgrM4Hm1UuHZRaNU69aOdJ4OBivLNDlcTiRLLHPfvFO7PQ+km1gV+Lz6LpUpqA==", + "version": "0.0.0-beta.10", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.10.tgz", + "integrity": "sha512-/j/R/0MVi7NA+q4IUpbJIQVJrc4VgSoNWhJv9JcLuONFbY2FSSoo/pauj+Lc1uXfyNq34Ha8F/YmK/nqjMwYig==", "dev": true, "bin": { "tokens": "bin/tokens.mjs", @@ -22346,7 +22346,7 @@ }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.6", + "version": "0.0.0-beta.10", "license": "MIT", "bin": { "tokens": "bin/tokens.mjs", diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts index 6e5c97c7d8..5819412ac8 100644 --- a/utils/sui-tokens/milanuncios.tokens.config.ts +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -1,6 +1,6 @@ import chroma from 'chroma-js' -import {type Theme, type ThemePrimitive} from './src/types' +import {type Theme, type PrimitiveTheme} from './src/types' const theme: Theme = { primitive: { @@ -115,7 +115,7 @@ const theme: Theme = { none: 0 } }, - semantic: ({color, opacity}: ThemePrimitive) => ({ + semantic: ({color, opacity}: PrimitiveTheme) => ({ color: { brand: { main: color.hero[500], diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 85da0c16ca..31a699c3f6 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.9", + "version": "0.0.0-beta.11", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index 5bda690233..7261377c62 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -1,6 +1,6 @@ import chroma from 'chroma-js' -import {type Theme, type ThemePrimitive} from './types' +import {type Theme, type PrimitiveTheme} from './types' const theme: Theme = { primitive: { @@ -218,7 +218,7 @@ const theme: Theme = { tooltip: 1800 } }, - semantic: ({color, opacity, elevation, size, fontSize, fontFamily}: ThemePrimitive) => { + semantic: ({color, opacity, elevation, size, fontSize, fontFamily}: PrimitiveTheme) => { return { color: { brand: { diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 41484dc5ed..3eace60855 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -56,7 +56,7 @@ export const generate = { semanticTokens[keyword] = ''.concat( ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { return ` - ${getTokenKey(key)}: ${value};` + ${getTokenKey(key)}: ${value};` }) ) From 92df38822f4f008af1c6ccd28ad535595489e37f Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 10:33:25 +0100 Subject: [PATCH 19/42] feat(utils/sui-tokens): bump --- package-lock.json | 46 ++++++++++++++++---------------- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/generate.ts | 8 +----- 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 471fdc3c50..886dead6ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12401,14 +12401,14 @@ } }, "node_modules/get-symbol-description": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz", - "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz", + "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==", "dev": true, "dependencies": { - "call-bind": "^1.0.5", + "call-bound": "^1.0.3", "es-errors": "^1.3.0", - "get-intrinsic": "^1.2.4" + "get-intrinsic": "^1.2.6" }, "engines": { "node": ">= 0.4" @@ -13823,12 +13823,12 @@ } }, "node_modules/is-typed-array": { - "version": "1.1.13", - "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz", - "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==", + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.14.tgz", + "integrity": "sha512-lQUsHzcTb7rH57dajbOuZEuMDXjs9f04ZloER4QOpjpKcaw4f98BRUrs8aiO9Z4G7i7B0Xhgarg6SCgYcYi8Nw==", "dev": true, "dependencies": { - "which-typed-array": "^1.1.14" + "which-typed-array": "^1.1.16" }, "engines": { "node": ">= 0.4" @@ -14093,9 +14093,9 @@ } }, "node_modules/jiti": { - "version": "1.21.6", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz", - "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==", + "version": "1.21.7", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "dev": true, "bin": { "jiti": "bin/jiti.js" @@ -21125,16 +21125,16 @@ } }, "node_modules/typed-array-byte-length": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz", - "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz", + "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", "for-each": "^0.3.3", - "gopd": "^1.0.1", - "has-proto": "^1.0.3", - "is-typed-array": "^1.1.13" + "gopd": "^1.2.0", + "has-proto": "^1.2.0", + "is-typed-array": "^1.1.14" }, "engines": { "node": ">= 0.4" @@ -22332,9 +22332,9 @@ } }, "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.10", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.10.tgz", - "integrity": "sha512-/j/R/0MVi7NA+q4IUpbJIQVJrc4VgSoNWhJv9JcLuONFbY2FSSoo/pauj+Lc1uXfyNq34Ha8F/YmK/nqjMwYig==", + "version": "0.0.0-beta.11", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.11.tgz", + "integrity": "sha512-ZRMwGBl9G/s+cLGNiu7GFMxZSgGFNwFAFVZISzMbJKQQsQdFX8GdGYgNPqi2ZjMhXdNi/3QJExu1EXyQ/hrBjQ==", "dev": true, "bin": { "tokens": "bin/tokens.mjs", @@ -22346,7 +22346,7 @@ }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.10", + "version": "0.0.0-beta.11", "license": "MIT", "bin": { "tokens": "bin/tokens.mjs", diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 31a699c3f6..eb5b90aa84 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.11", + "version": "0.0.0-beta.12", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 3eace60855..ac62111114 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -77,18 +77,12 @@ $${key}: var(${getTokenKey(key)});` add('spacing', prefix) return `// This file is auto-generated by sui-tokens -${selector} { - ${semanticTokens.color} - +${selector} {${semanticTokens.color} ${semanticTokens.font} - ${semanticTokens.opacity} - ${semanticTokens.elevation} - ${semanticTokens.spacing} } - ${scssTokens.color} ${scssTokens.font} ${scssTokens.opacity} From 169c833e3f69bbc88ab1b0c03f0ecf74e0a1087b Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 11:00:07 +0100 Subject: [PATCH 20/42] feat(utils/sui-tokens): add defualt key to tokens --- package-lock.json | 14 +++++++------- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/generate.ts | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 886dead6ef..c21a6b9908 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4736,9 +4736,9 @@ "dev": true }, "node_modules/@s-ui/bundler": { - "version": "9.70.0", - "resolved": "https://registry.npmjs.org/@s-ui/bundler/-/bundler-9.70.0.tgz", - "integrity": "sha512-3Dw5YgPAuCA9d8BQLi0RPrQbaGXahFU5XQphEy2BViqDDy7Kc97sXPQqLQns/PGvL0OamXivfdlIE9AtpcH4FQ==", + "version": "9.71.0", + "resolved": "https://registry.npmjs.org/@s-ui/bundler/-/bundler-9.71.0.tgz", + "integrity": "sha512-8kLegpCLeX3q4YV4wgPXVR/M2ifVH0jVXyBo9MBEg1yC9TulnrmFjVaC5mqvdIyyQkH8epEcN8JmimDxly/XNw==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -22332,9 +22332,9 @@ } }, "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.11", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.11.tgz", - "integrity": "sha512-ZRMwGBl9G/s+cLGNiu7GFMxZSgGFNwFAFVZISzMbJKQQsQdFX8GdGYgNPqi2ZjMhXdNi/3QJExu1EXyQ/hrBjQ==", + "version": "0.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.12.tgz", + "integrity": "sha512-jxZpkUrhLfBlagCKLtobnZ5q1atpn5WW8V/xFMp7Kx0JoCSHCqe6UT/gSnJXBjObnSS1Fm+aySzSrxFi/TRyXQ==", "dev": true, "bin": { "tokens": "bin/tokens.mjs", @@ -22346,7 +22346,7 @@ }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.11", + "version": "0.0.0-beta.12", "license": "MIT", "bin": { "tokens": "bin/tokens.mjs", diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index eb5b90aa84..f300ef3311 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.12", + "version": "0.0.0-beta.13", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index ac62111114..5d3cd532a7 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -63,7 +63,7 @@ export const generate = { scssTokens[keyword] = ''.concat( ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { return ` -$${key}: var(${getTokenKey(key)});` +$${key}: var(${getTokenKey(key)}) !default;` }) ) } From 00045775f0452922224065e07c86eeed75663b51 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:37:35 +0100 Subject: [PATCH 21/42] fix(utils/sui-tokens): minor changes --- utils/sui-theme/src/settings/_color.scss | 26 ++++++++++++------------ utils/sui-theme/src/utils/_colors.scss | 12 +++++++---- utils/sui-tokens/src/build.ts | 8 ++++---- utils/sui-tokens/src/generate.ts | 2 +- 4 files changed, 26 insertions(+), 22 deletions(-) diff --git a/utils/sui-theme/src/settings/_color.scss b/utils/sui-theme/src/settings/_color.scss index 7291bbcaa4..a2cf431b4c 100644 --- a/utils/sui-theme/src/settings/_color.scss +++ b/utils/sui-theme/src/settings/_color.scss @@ -17,7 +17,7 @@ $c-light-step: 2 !default; $c-system: #000000 !default; // Primary color -$c-primary: #2b91c1 !default; +$c-primary: $color-brand-main !default; // Old primary color gradients, keeping them for retro compatibility $c-primary-light: color-variation($c-primary, $c-light-step) !default; @@ -37,8 +37,8 @@ $c-primary-dark-3: color-variation($c-primary, -3) !default; $c-primary-dark-4: color-variation($c-primary, -4) !default; // Secondary/Accent color -$c-accent: #d57c1b !default; -$c-secondary: #d57c1b !default; +$c-accent: $color-brand-accent !default; +$c-secondary: $color-brand-support !default; // Old Secondary/Accent color gradients, keeping them for retro compatibility $c-accent-light: color-variation($c-accent, $c-light-step) !default; @@ -69,7 +69,7 @@ $c-secondary-dark-3: color-variation($c-secondary, -3) !default; $c-secondary-dark-4: color-variation($c-secondary, -4) !default; // Gray color -$c-gray: #777777 !default; +$c-gray: $color-feedback-neutral !default; // Old Gray color gradients, keeping them for retro compatibility $c-gray-light: color-variation($c-gray, $c-light-step) !default; @@ -90,7 +90,7 @@ $c-gray-dark-3: color-variation($c-gray, -3) !default; $c-gray-dark-4: color-variation($c-gray, -4) !default; // Success color -$c-success: #00a544 !default; +$c-success: $color-feedback-success !default; // Old Success color gradients, keeping them for retro compatibility $c-success-light: color-variation($c-success, $c-light-step) !default; @@ -110,7 +110,7 @@ $c-success-dark-3: color-variation($c-success, -3) !default; $c-success-dark-4: color-variation($c-success, -4) !default; // Alert color -$c-alert: #ff6335 !default; +$c-alert: $color-feedback-alert !default; // Old Alert color gradients, keeping them for retro compatibility $c-alert-light: color-variation($c-alert, $c-light-step) !default; @@ -130,7 +130,7 @@ $c-alert-dark-3: color-variation($c-alert, -3) !default; $c-alert-dark-4: color-variation($c-alert, -4) !default; // Error color -$c-error: #e93e40 !default; +$c-error: $color-feedback-error !default; // Old Error Alert color gradients, keeping them for retro compatibility $c-error-light: color-variation($c-error, $c-light-step) !default; @@ -163,13 +163,13 @@ $c-text-accent: $c-accent !default; $c-text-link: $c-text-accent !default; // Social brand colors -$c-facebook: #3b5998 !default; -$c-twitter: #55acee !default; +$c-facebook: $color-social-facebook !default; +$c-twitter: $color-social-x !default; $c-google: #d34836 !default; -$c-youtube: #bb0000 !default; -$c-whatsapp: #7ed321 !default; -$c-instagram: #8a3ab9 !default; -$c-tiktok: #69c9d0 !default; +$c-youtube: $color-social-youtube !default; +$c-whatsapp: $color-social-whatsapp !default; +$c-instagram: $color-social-instagram !default; +$c-tiktok: $color-social-tiktok !default; // Highlight color $c-highlight: #fffed4 !default; diff --git a/utils/sui-theme/src/utils/_colors.scss b/utils/sui-theme/src/utils/_colors.scss index edb4ca3c2f..4b91e56f6e 100644 --- a/utils/sui-theme/src/utils/_colors.scss +++ b/utils/sui-theme/src/utils/_colors.scss @@ -25,14 +25,18 @@ $color-darken-steps: 20, 35, 55, 75 !default; $variation: $color; @if ($step > $positive-steps) { - $variation: mix($light, $color, nth($color-lighten-steps, $positive-steps)); + $variation: color-mix(in srgb, $light #{'#{nth($color-lighten-steps, $positive-steps)}%'}, $color); } @else if ($step < -$negative-steps) { - $variation: mix($dark, $color, nth($color-darken-steps, $negative-steps)); + $variation: color-mix(in srgb, $dark #{'#{nth($color-darken-steps, $negative-steps)}%'}, $color); } @else if ($step < 0) { - $variation: mix($dark, $color, nth($color-darken-steps, -$step)); + $variation: color-mix(in srgb, $dark #{'#{nth($color-darken-steps, -$step)}%'}, $color); } @else if ($step > 0) { - $variation: mix($light, $color, nth($color-lighten-steps, $step)); + $variation: color-mix(in srgb, $light #{'#{nth($color-lighten-steps, $step)}%'}, $color); } @return $variation; } + +@function transparentize($color, $amount) { + @return color-mix(in srgb, $color #{'#{(1 - $amount) * 100}%'}, transparent); +} diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index 91c216fbd1..e3c2668172 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -11,9 +11,9 @@ import process from 'node:process' import {colorParser, colorRampParser} from './checker' import defaultTokensConfig from './default.tokens.config' import {generate} from './generate' -import type {Theme, ThemePrimitive} from './types' +import type {Theme, PrimitiveTheme} from './types' -const colorFn = (colorSpace: ThemePrimitive['colorSpace']) => (v: string) => { +const colorFn = (colorSpace: PrimitiveTheme['colorSpace']) => (v: string) => { switch (colorSpace) { case 'hex': return chroma(v).css() @@ -23,7 +23,7 @@ const colorFn = (colorSpace: ThemePrimitive['colorSpace']) => (v: string) => { } export function build(tokensConfig?: Theme) { - const buildPrimitive = (primitive: ThemePrimitive) => { + const buildPrimitive = (primitive: PrimitiveTheme) => { const colorSpace = primitive?.colorSpace const colorTx = colorFn(colorSpace) return { @@ -109,7 +109,7 @@ export const runSCSS = async ({ }: { configuration?: string output?: string - selecor?: string + selector?: string }) => { console.log(chalk.blue('Loading tokens configuration')) const tokensConfig = await loadTokensConfig(configuration) diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 5d3cd532a7..5a839333c3 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -4,7 +4,7 @@ import {type SemanticTheme, type PrimitiveTheme} from './types' const anidate = (accumulator: Map, [key, value]) => { if (typeof value === 'string' || typeof value === 'number') { - accumulator.set(`${kebabCase(key)}`, value) + accumulator.set(`${kebabCase(key)}`, value as string) } else if (Array.isArray(value)) { value.forEach((arrayValue, arrayIndex) => { anidate(accumulator, [`${kebabCase(key)}-${arrayIndex}`, arrayValue]) From 9ca9a39a904ece63d8fab799466d25774547510c Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:38:06 +0100 Subject: [PATCH 22/42] feat(components/atom/helpText): styling fixes --- components/atom/helpText/src/index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/components/atom/helpText/src/index.scss b/components/atom/helpText/src/index.scss index 685b3fa685..81b21b544c 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'; From 8dbde16d7b8c04acfb98a0292c31cf88d0cd9363 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:38:23 +0100 Subject: [PATCH 23/42] fix(components/atom/validationText): styling fixes --- components/atom/validationText/src/index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/components/atom/validationText/src/index.scss b/components/atom/validationText/src/index.scss index 685b3fa685..81b21b544c 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'; From a8f877ec4a205d82baf18e75d11390d6ecc49a51 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:39:49 +0100 Subject: [PATCH 24/42] chore(Root): themes imports --- package-lock.json | 8 ++++---- themes/carfactory.scss | 1 + themes/epreselec.scss | 1 + themes/infojobs.scss | 1 + themes/kleinanzeigen.scss | 1 + themes/motor.scss | 1 + 6 files changed, 9 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index c21a6b9908..400b9213d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22332,9 +22332,9 @@ } }, "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.12", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.12.tgz", - "integrity": "sha512-jxZpkUrhLfBlagCKLtobnZ5q1atpn5WW8V/xFMp7Kx0JoCSHCqe6UT/gSnJXBjObnSS1Fm+aySzSrxFi/TRyXQ==", + "version": "0.0.0-beta.13", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.13.tgz", + "integrity": "sha512-KuzAiCWhkCkFMmsdtcFM+D3UVNL/VVNfzwTJerZazPmwFP8tt6WUtIDmw/+UaKEwLfN7kp39BO8DJFVE7BfRpw==", "dev": true, "bin": { "tokens": "bin/tokens.mjs", @@ -22346,7 +22346,7 @@ }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.12", + "version": "0.0.0-beta.13", "license": "MIT", "bin": { "tokens": "bin/tokens.mjs", diff --git a/themes/carfactory.scss b/themes/carfactory.scss index ad42a9c081..0df926dc1b 100644 --- a/themes/carfactory.scss +++ b/themes/carfactory.scss @@ -1,4 +1,5 @@ // Settings +@import '~@s-ui/theme/lib/.tokens/.tokens'; @import '~@s-ui/theme/lib/settings'; // Inherit from original theme diff --git a/themes/epreselec.scss b/themes/epreselec.scss index 56bea0c23b..b7b93d2676 100644 --- a/themes/epreselec.scss +++ b/themes/epreselec.scss @@ -2,6 +2,7 @@ // // Inherit from original theme +@import '~@s-ui/theme/lib/.tokens/.tokens'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ep-theme/lib/index'; diff --git a/themes/infojobs.scss b/themes/infojobs.scss index 8091d0e117..8c6d5ef9e2 100644 --- a/themes/infojobs.scss +++ b/themes/infojobs.scss @@ -4,6 +4,7 @@ $ff-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, s $fz-base: 16px; // Inherit from original theme +@import '~@s-ui/theme/lib/.tokens/.tokens'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ij-theme/lib/index'; @import '~@adv-ui/ij-theme/lib/normalize'; diff --git a/themes/kleinanzeigen.scss b/themes/kleinanzeigen.scss index 383a9e7876..55dbc4a461 100644 --- a/themes/kleinanzeigen.scss +++ b/themes/kleinanzeigen.scss @@ -4,6 +4,7 @@ $ff-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, s $fz-base: 16px; // Inherit from original theme +@import '~@s-ui/theme/lib/.tokens/.tokens'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ka-theme/lib/index'; @import '~@adv-ui/ka-theme/lib/normalize'; diff --git a/themes/motor.scss b/themes/motor.scss index baa33ccabd..6fd19c7521 100644 --- a/themes/motor.scss +++ b/themes/motor.scss @@ -1,4 +1,5 @@ // Settings +@import '~@s-ui/theme/lib/.tokens/.tokens'; @import '~@s-ui/theme/lib/settings'; // Inherit from original theme From aa29925c15b0b783eba59ebb424775280a434683 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 19 Dec 2024 10:38:34 +0100 Subject: [PATCH 25/42] feat(utils/sui-tokens): solve minor improvemnts --- utils/sui-tokens/fotocasa.tokens.config.ts | 297 ++++++++++++++++++ utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/default.tokens.config.ts | 12 +- 3 files changed, 304 insertions(+), 7 deletions(-) create mode 100644 utils/sui-tokens/fotocasa.tokens.config.ts diff --git a/utils/sui-tokens/fotocasa.tokens.config.ts b/utils/sui-tokens/fotocasa.tokens.config.ts new file mode 100644 index 0000000000..b4c630814f --- /dev/null +++ b/utils/sui-tokens/fotocasa.tokens.config.ts @@ -0,0 +1,297 @@ +import chroma from 'chroma-js' + +import {type Theme, type PrimitiveTheme} from './src/types' + +const theme: Theme = { + primitive: { + fontSize: '16px', + 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' + } + }, + colorSpace: 'rgb', + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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]).alpha(opacity.dim5).css('rgb'), + 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 index f300ef3311..490220759b 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.13", + "version": "0.0.0-beta.15", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index 7261377c62..af72c278d3 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -300,12 +300,12 @@ const theme: Theme = { successContainerDisabled: chroma(color.apple[50]).alpha(opacity.dim3).css('rgb'), onSuccessContainer: color.apple[700], - alert: color.wiggins[800], - alertHovered: color.wiggins[700], - alertPressed: color.wiggins[700], - alertFocused: color.wiggins[700], - alertDisabled: chroma(color.wiggins[800]).alpha(opacity.dim3).css('rgb'), - onAlert: color.base.gloom, + alert: color.wiggins[500], + alertHovered: color.wiggins[400], + alertPressed: color.wiggins[400], + alertFocused: color.wiggins[400], + alertDisabled: chroma(color.wiggins[500]).alpha(opacity.dim3).css('rgb'), + onAlert: color.base.bright, alertContainer: color.wiggins[100], alertContainerHovered: color.wiggins[50], From 6232e6e9cfee4dc27ca2be46274c64d94a937564 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 19 Dec 2024 10:40:44 +0100 Subject: [PATCH 26/42] fix(utils/sui-theme): opacity native functionality --- utils/sui-theme/src/utils/_opacity.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/utils/sui-theme/src/utils/_opacity.scss b/utils/sui-theme/src/utils/_opacity.scss index 78ea8fbe99..ef4ed88cbb 100644 --- a/utils/sui-theme/src/utils/_opacity.scss +++ b/utils/sui-theme/src/utils/_opacity.scss @@ -4,11 +4,11 @@ // @include bgcolor-opacity($c-black); @mixin bgcolor-opacity($color) { - background-color: rgba($color, 1); + background-color: color-mix(in srgb, $color 100%, transparent); @each $value in $c-opacity { &-#{$value} { - background-color: rgba($color, $value * 0.01); + background-color: color-mix(in srgb, #{$value '%'}, transparent); } } } @@ -19,7 +19,7 @@ position: relative; &::before { - background-color: rgba($color, $value * 0.01); + background-color: color-mix(in srgb, #{$value '%'}, transparent); content: ''; display: block; height: 100%; From e5f5c023d959a045a3a284fb3dd0a47a06e79f4a Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 20 Dec 2024 10:05:55 +0100 Subject: [PATCH 27/42] feat(utils/sui-tokens): set poper dependencies --- utils/sui-tokens/package.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 490220759b..9552a5389a 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.15", + "version": "0.0.0-beta.16", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" @@ -21,16 +21,17 @@ "tokens", "sui" ], + "dependencies": { + "tsx": "4.19.2", + "typescript": "4.9.5", + "zod": "3.23.8" + }, "devDependencies": { "chalk": "4.1.2", "change-case": "5.4.4", "chroma-js": "2.6.0", "commander": "8.3.0", - "deepmerge-ts": "^4.0.0", - "lodash.get": "^4.4.2", - "tsx": "4.19.2", - "typescript": "4.9.5", - "zod": "3.23.8" + "deepmerge-ts": "^4.0.0" }, "repository": { "type": "git", From 7a3a64ebb7f81932b1c54382b68a7914e67d8618 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 20 Dec 2024 10:12:10 +0100 Subject: [PATCH 28/42] fix(utils/sui-tokens): change dependencies --- utils/sui-tokens/package.json | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 9552a5389a..93765de453 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.16", + "version": "0.0.0-beta.17", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" @@ -22,16 +22,14 @@ "sui" ], "dependencies": { - "tsx": "4.19.2", - "typescript": "4.9.5", - "zod": "3.23.8" - }, - "devDependencies": { "chalk": "4.1.2", - "change-case": "5.4.4", "chroma-js": "2.6.0", + "change-case": "5.4.4", "commander": "8.3.0", - "deepmerge-ts": "^4.0.0" + "deepmerge-ts": "^4.0.0", + "tsx": "4.19.2", + "typescript": "4.9.5", + "zod": "3.23.8" }, "repository": { "type": "git", From e30f7bfd875e8dab22d41f08ad76591adfdbf109 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 20 Dec 2024 15:03:40 +0100 Subject: [PATCH 29/42] fix(utils/sui-tokens): export types able to be imported by external project --- utils/sui-tokens/package.json | 3 ++- utils/sui-tokens/src/index.ts | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 93765de453..147feb0c81 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.17", + "version": "0.0.0-beta.18", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" @@ -16,6 +16,7 @@ "exports": { ".": "./src/index.ts" }, + "types": "./src/index.ts", "type": "module", "keywords": [ "tokens", diff --git a/utils/sui-tokens/src/index.ts b/utils/sui-tokens/src/index.ts index 5754ae3c28..6682307e17 100644 --- a/utils/sui-tokens/src/index.ts +++ b/utils/sui-tokens/src/index.ts @@ -1,3 +1,5 @@ +export {runSCSS, runJSON} from './build' + export { type PrimitiveTheme, type SemanticTheme, From 71e7ee619222f371a78a0a322fa1c996476d9a32 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 15:53:23 +0100 Subject: [PATCH 30/42] fix(utils/sui-tokens): mode schema available --- utils/sui-tokens/bin/tokens-scss.mjs | 1 + utils/sui-tokens/src/build.ts | 6 ++++-- utils/sui-tokens/src/generate.ts | 32 +++++++++++++++++----------- 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/utils/sui-tokens/bin/tokens-scss.mjs b/utils/sui-tokens/bin/tokens-scss.mjs index 10b924a543..3ccb8fdb1c 100755 --- a/utils/sui-tokens/bin/tokens-scss.mjs +++ b/utils/sui-tokens/bin/tokens-scss.mjs @@ -11,6 +11,7 @@ program .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') .action(runSCSS) program.parse(process.argv) diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index e3c2668172..4acc2b0046 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -105,11 +105,13 @@ export async function writeTokensConfig(data: string, outputPath?: string) { export const runSCSS = async ({ configuration, output, - selector + selector, + mode }: { configuration?: string output?: string selector?: string + mode?: 'light' | 'dark' }) => { console.log(chalk.blue('Loading tokens configuration')) const tokensConfig = await loadTokensConfig(configuration) @@ -117,7 +119,7 @@ export const runSCSS = async ({ console.log(chalk.green(JSON.stringify(tokensConfig, null, 2))) const result = build(tokensConfig) console.log(chalk.blue('Writing tokens')) - await writeTokensConfig(generate.scss(result, selector), output) + await writeTokensConfig(generate.scss(result, selector, mode), output) console.log(chalk.blue('Done!')) } diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 5a839333c3..9043a271e6 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -22,7 +22,11 @@ const anidate = (accumulator: Map, [key, value]) => { } export const generate = { - scss: ({primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}, selector: string) => { + scss: ( + {primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}, + selector: string, + mode?: 'light' | 'dark' + ) => { const semanticMaps = { color: new Map(), font: new Map(), @@ -46,17 +50,18 @@ export const generate = { spacing: '' } - const add = (keyword: string, prefix?: string) => { + const add = (keyword: string, prefix?: string, ident: number = 0) => { Object.entries(semantic[keyword]).forEach(([key, value]) => { anidate(semanticMaps[keyword], [`${keyword}-${key}`, value]) }) const getTokenKey = (key: string) => `--${prefix === undefined ? '' : `${prefix}-`}${key}` + const identStr = ' '.repeat(ident) semanticTokens[keyword] = ''.concat( ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { return ` - ${getTokenKey(key)}: ${value};` +${identStr}${getTokenKey(key)}: ${value};` }) ) @@ -69,19 +74,20 @@ $${key}: var(${getTokenKey(key)}) !default;` } const {prefix} = primitive + const hasMode = (mode?: 'light' | 'dark') => mode !== undefined - add('color', prefix) - add('font', prefix) - add('opacity', prefix) - add('elevation', prefix) - add('spacing', prefix) + add('color', prefix, hasMode(mode) ? 2 : 1) + add('font', prefix, hasMode(mode) ? 2 : 1) + add('opacity', prefix, hasMode(mode) ? 2 : 1) + add('elevation', prefix, hasMode(mode) ? 2 : 1) + add('spacing', prefix, hasMode(mode) ? 2 : 1) return `// This file is auto-generated by sui-tokens -${selector} {${semanticTokens.color} - ${semanticTokens.font} - ${semanticTokens.opacity} - ${semanticTokens.elevation} - ${semanticTokens.spacing} +${selector} {${hasMode(mode) ? `\n @media (prefers-color-scheme: ${mode as string}) {` : ''}${semanticTokens.color} +${semanticTokens.font} +${semanticTokens.opacity} +${semanticTokens.elevation} +${semanticTokens.spacing}${hasMode(mode) ? `\n }` : ''} } ${scssTokens.color} ${scssTokens.font} From bc990288afe12cf58122ec71ae96cf0b76609258 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 16:21:38 +0100 Subject: [PATCH 31/42] chore(Root): modify themes+ --- themes/carfactory.scss | 3 ++- themes/epreselec.scss | 3 ++- themes/infojobs.scss | 3 ++- themes/kleinanzeigen.scss | 3 ++- themes/motor.scss | 3 ++- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/themes/carfactory.scss b/themes/carfactory.scss index 0df926dc1b..1741787a70 100644 --- a/themes/carfactory.scss +++ b/themes/carfactory.scss @@ -1,5 +1,6 @@ // Settings -@import '~@s-ui/theme/lib/.tokens/.tokens'; +@import '~@s-ui/theme/lib/.tokens/.tokens.light'; +@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; // Inherit from original theme diff --git a/themes/epreselec.scss b/themes/epreselec.scss index b7b93d2676..622dab8cc5 100644 --- a/themes/epreselec.scss +++ b/themes/epreselec.scss @@ -2,7 +2,8 @@ // // Inherit from original theme -@import '~@s-ui/theme/lib/.tokens/.tokens'; +@import '~@s-ui/theme/lib/.tokens/.tokens.light'; +@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ep-theme/lib/index'; diff --git a/themes/infojobs.scss b/themes/infojobs.scss index 8c6d5ef9e2..4b1b294ccf 100644 --- a/themes/infojobs.scss +++ b/themes/infojobs.scss @@ -4,7 +4,8 @@ $ff-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, s $fz-base: 16px; // Inherit from original theme -@import '~@s-ui/theme/lib/.tokens/.tokens'; +@import '~@s-ui/theme/lib/.tokens/.tokens.light'; +@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ij-theme/lib/index'; @import '~@adv-ui/ij-theme/lib/normalize'; diff --git a/themes/kleinanzeigen.scss b/themes/kleinanzeigen.scss index 55dbc4a461..5c4a651a9f 100644 --- a/themes/kleinanzeigen.scss +++ b/themes/kleinanzeigen.scss @@ -4,7 +4,8 @@ $ff-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, s $fz-base: 16px; // Inherit from original theme -@import '~@s-ui/theme/lib/.tokens/.tokens'; +@import '~@s-ui/theme/lib/.tokens/.tokens.light'; +@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ka-theme/lib/index'; @import '~@adv-ui/ka-theme/lib/normalize'; diff --git a/themes/motor.scss b/themes/motor.scss index 6fd19c7521..15a523d01e 100644 --- a/themes/motor.scss +++ b/themes/motor.scss @@ -1,5 +1,6 @@ // Settings -@import '~@s-ui/theme/lib/.tokens/.tokens'; +@import '~@s-ui/theme/lib/.tokens/.tokens.light'; +@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; // Inherit from original theme From 765d540968e679624bce1a68a54639446433821c Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 16:23:39 +0100 Subject: [PATCH 32/42] feat(utils/sui-theme): use native mix --- package-lock.json | 381 +++++++++---------- utils/sui-theme/milanuncios.tokens.config.ts | 290 ++++++++++++++ utils/sui-theme/src/utils/_opacity.scss | 4 +- 3 files changed, 473 insertions(+), 202 deletions(-) create mode 100644 utils/sui-theme/milanuncios.tokens.config.ts diff --git a/package-lock.json b/package-lock.json index 400b9213d8..a32d0404e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3691,7 +3691,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "aix" @@ -3707,7 +3706,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "android" @@ -3723,7 +3721,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "android" @@ -3739,7 +3736,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "android" @@ -3755,7 +3751,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -3771,7 +3766,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -3787,7 +3781,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -3803,7 +3796,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -3819,7 +3811,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3835,7 +3826,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3851,7 +3841,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3883,7 +3872,6 @@ "cpu": [ "mips64el" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3899,7 +3887,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3915,7 +3902,6 @@ "cpu": [ "riscv64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3931,7 +3917,6 @@ "cpu": [ "s390x" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3947,7 +3932,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -3963,7 +3947,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "netbsd" @@ -3979,7 +3962,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "openbsd" @@ -3995,7 +3977,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "openbsd" @@ -4011,7 +3992,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "sunos" @@ -4027,7 +4007,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -4043,7 +4022,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "win32" @@ -4059,7 +4037,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -5794,9 +5771,9 @@ } }, "node_modules/@s-ui/studio": { - "version": "11.48.0", - "resolved": "https://registry.npmjs.org/@s-ui/studio/-/studio-11.48.0.tgz", - "integrity": "sha512-gDME046C5abDMMzti3N+f9sDx6n6AJjrP7+zq0qwY7UDCbOXsQGk9AcLNW+YUMrvWmcbMkjdVV4Ho7okuUH2ww==", + "version": "11.49.0", + "resolved": "https://registry.npmjs.org/@s-ui/studio/-/studio-11.49.0.tgz", + "integrity": "sha512-SZw2Bb5WC9Ji80WSLlzJL2FVRXNqeUne3n/FGJFDKmWyvDisxpQIVf4b7O1fEBiDu+xRlrVZH8r9Fz1bN9ORzA==", "dev": true, "dependencies": { "@babel/cli": "7", @@ -6568,9 +6545,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "19.0.1", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.1.tgz", - "integrity": "sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz", + "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==", "dev": true, "dependencies": { "csstype": "^3.0.2" @@ -7292,7 +7269,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" }, @@ -7348,13 +7324,13 @@ } }, "node_modules/array-buffer-byte-length": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz", - "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz", + "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==", "dev": true, "dependencies": { - "call-bind": "^1.0.5", - "is-array-buffer": "^3.0.4" + "call-bound": "^1.0.3", + "is-array-buffer": "^3.0.5" }, "engines": { "node": ">= 0.4" @@ -8299,9 +8275,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001689", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz", - "integrity": "sha512-CmeR2VBycfa+5/jOfnp/NpWPGd06nf1XYiefUvhXFfZE4GkRc9jv+eGPS4nT558WS/8lYCzV8SlANCIPvbWP1g==", + "version": "1.0.30001690", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", + "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", "dev": true, "funding": [ { @@ -8352,7 +8328,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" @@ -8367,8 +8342,7 @@ "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==", - "dev": true + "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==" }, "node_modules/check-error": { "version": "1.0.3", @@ -8409,8 +8383,7 @@ "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==", - "dev": true + "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==" }, "node_modules/chrome-trace-event": { "version": "1.0.4", @@ -8569,7 +8542,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" }, @@ -8580,8 +8552,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", @@ -9049,11 +9020,11 @@ } }, "node_modules/cross-fetch": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", - "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.2.0.tgz", + "integrity": "sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==", "dependencies": { - "node-fetch": "^2.6.12" + "node-fetch": "^2.7.0" } }, "node_modules/cross-spawn": { @@ -9418,14 +9389,14 @@ } }, "node_modules/data-view-buffer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", - "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz", + "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.6", + "call-bound": "^1.0.3", "es-errors": "^1.3.0", - "is-data-view": "^1.0.1" + "is-data-view": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -9435,29 +9406,29 @@ } }, "node_modules/data-view-byte-length": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz", - "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz", + "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bound": "^1.0.3", "es-errors": "^1.3.0", - "is-data-view": "^1.0.1" + "is-data-view": "^1.0.2" }, "engines": { "node": ">= 0.4" }, "funding": { - "url": "https://github.com/sponsors/ljharb" + "url": "https://github.com/sponsors/inspect-js" } }, "node_modules/data-view-byte-offset": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz", - "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz", + "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.6", + "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" }, @@ -9591,7 +9562,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-4.3.0.tgz", "integrity": "sha512-if3ZYdkD2dClhnXR5reKtG98cwyaRT1NeugQoAPTTfsOpV9kqyeiBF9Qa5RHjemb3KzD5ulqygv6ED3t5j9eJw==", - "dev": true, "engines": { "node": ">=12.4.0" } @@ -9987,9 +9957,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.74", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz", - "integrity": "sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw==", + "version": "1.5.75", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.75.tgz", + "integrity": "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q==", "dev": true }, "node_modules/emoji-regex": { @@ -10074,9 +10044,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.17.1", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", - "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz", + "integrity": "sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==", "dev": true, "dependencies": { "graceful-fs": "^4.2.4", @@ -10139,27 +10109,27 @@ } }, "node_modules/es-abstract": { - "version": "1.23.6", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.6.tgz", - "integrity": "sha512-Ifco6n3yj2tMZDWNLyloZrytt9lqqlwvS83P3HtaETR0NUOYnIULGGHpktqYGObGy+8wc1okO25p8TjemhImvA==", + "version": "1.23.7", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.7.tgz", + "integrity": "sha512-OygGC8kIcDhXX+6yAZRGLqwi2CmEXCbLQixeGUgYeR+Qwlppqmo7DIDr8XibtEBZp+fJcoYpoatp5qwLMEdcqQ==", "dev": true, "dependencies": { - "array-buffer-byte-length": "^1.0.1", + "array-buffer-byte-length": "^1.0.2", "arraybuffer.prototype.slice": "^1.0.4", "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.8", "call-bound": "^1.0.3", - "data-view-buffer": "^1.0.1", - "data-view-byte-length": "^1.0.1", - "data-view-byte-offset": "^1.0.0", + "data-view-buffer": "^1.0.2", + "data-view-byte-length": "^1.0.2", + "data-view-byte-offset": "^1.0.1", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "es-set-tostringtag": "^2.0.3", "es-to-primitive": "^1.3.0", - "function.prototype.name": "^1.1.7", + "function.prototype.name": "^1.1.8", "get-intrinsic": "^1.2.6", - "get-symbol-description": "^1.0.2", + "get-symbol-description": "^1.1.0", "globalthis": "^1.0.4", "gopd": "^1.2.0", "has-property-descriptors": "^1.0.2", @@ -10167,31 +10137,30 @@ "has-symbols": "^1.1.0", "hasown": "^2.0.2", "internal-slot": "^1.1.0", - "is-array-buffer": "^3.0.4", + "is-array-buffer": "^3.0.5", "is-callable": "^1.2.7", "is-data-view": "^1.0.2", - "is-negative-zero": "^2.0.3", "is-regex": "^1.2.1", - "is-shared-array-buffer": "^1.0.3", + "is-shared-array-buffer": "^1.0.4", "is-string": "^1.1.1", - "is-typed-array": "^1.1.13", + "is-typed-array": "^1.1.15", "is-weakref": "^1.1.0", - "math-intrinsics": "^1.0.0", + "math-intrinsics": "^1.1.0", "object-inspect": "^1.13.3", "object-keys": "^1.1.1", - "object.assign": "^4.1.5", + "object.assign": "^4.1.7", "regexp.prototype.flags": "^1.5.3", "safe-array-concat": "^1.1.3", "safe-regex-test": "^1.1.0", "string.prototype.trim": "^1.2.10", "string.prototype.trimend": "^1.0.9", "string.prototype.trimstart": "^1.0.8", - "typed-array-buffer": "^1.0.2", - "typed-array-byte-length": "^1.0.1", - "typed-array-byte-offset": "^1.0.3", + "typed-array-buffer": "^1.0.3", + "typed-array-byte-length": "^1.0.3", + "typed-array-byte-offset": "^1.0.4", "typed-array-length": "^1.0.7", - "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.16" + "unbox-primitive": "^1.1.0", + "which-typed-array": "^1.1.18" }, "engines": { "node": ">= 0.4" @@ -11900,9 +11869,9 @@ "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" }, "node_modules/fbjs/node_modules/ua-parser-js": { - "version": "1.0.39", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.39.tgz", - "integrity": "sha512-k24RCVWlEcjkdOxYmVJgeD/0a1TiSpqLg+ZalVGV9lsnr4yqu0w7tX/x2xX6G4zpkgQnRf89lxuZ1wsbjXM8lw==", + "version": "1.0.40", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.40.tgz", + "integrity": "sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==", "funding": [ { "type": "opencollective", @@ -12256,7 +12225,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": [ @@ -12275,12 +12243,13 @@ } }, "node_modules/function.prototype.name": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.7.tgz", - "integrity": "sha512-2g4x+HqTJKM9zcJqBSpjoRmdcPFtJM60J3xJisTQSXBWka5XqyBN/2tNUgma1mztTXyDuUsEtYe5qcs7xYzYQA==", + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz", + "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==", "dev": true, "dependencies": { "call-bind": "^1.0.8", + "call-bound": "^1.0.3", "define-properties": "^1.2.1", "functions-have-names": "^1.2.3", "hasown": "^2.0.2", @@ -12421,7 +12390,6 @@ "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==", - "dev": true, "dependencies": { "resolve-pkg-maps": "^1.0.0" }, @@ -12755,10 +12723,13 @@ } }, "node_modules/has-bigints": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", - "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", + "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==", "dev": true, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -12767,7 +12738,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" } @@ -13456,9 +13426,9 @@ } }, "node_modules/is-core-module": { - "version": "2.16.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.0.tgz", - "integrity": "sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==", + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", + "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", "dev": true, "dependencies": { "hasown": "^2.0.2" @@ -13625,18 +13595,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-negative-zero": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz", - "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==", - "dev": true, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-network-error": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.1.0.tgz", @@ -13742,12 +13700,12 @@ } }, "node_modules/is-shared-array-buffer": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz", - "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz", + "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==", "dev": true, "dependencies": { - "call-bind": "^1.0.7" + "call-bound": "^1.0.3" }, "engines": { "node": ">= 0.4" @@ -13823,9 +13781,9 @@ } }, "node_modules/is-typed-array": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.14.tgz", - "integrity": "sha512-lQUsHzcTb7rH57dajbOuZEuMDXjs9f04ZloER4QOpjpKcaw4f98BRUrs8aiO9Z4G7i7B0Xhgarg6SCgYcYi8Nw==", + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz", + "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==", "dev": true, "dependencies": { "which-typed-array": "^1.1.16" @@ -14915,9 +14873,9 @@ } }, "node_modules/math-intrinsics": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.0.0.tgz", - "integrity": "sha512-4MqMiKP90ybymYvsut0CH2g4XWbfLtmlCkXmtmdcDCxNB+mQcu1w/1+L/VD7vi/PSv7X2JYV7SCcR+jiPXnQtA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", "engines": { "node": ">= 0.4" } @@ -14947,9 +14905,9 @@ } }, "node_modules/memfs": { - "version": "4.15.0", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.15.0.tgz", - "integrity": "sha512-q9MmZXd2rRWHS6GU3WEm3HyiXZyyoA1DqdOhEq0lxPBmKb5S7IAOwX0RgUCwJfqjelDCySa5h8ujOy24LqsWcw==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.15.1.tgz", + "integrity": "sha512-ufCzgFwiVnR6R9cCYuvwznJdhdYXEvFl0hpnM4cCtVaVkHuqBR+6fo2sqt1SSMdp+uiHw9GyPZr3OMM5tqjSmQ==", "dev": true, "dependencies": { "@jsonjoy.com/json-pack": "^1.0.3", @@ -15913,14 +15871,16 @@ } }, "node_modules/object.assign": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz", - "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==", + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz", + "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==", "dev": true, "dependencies": { - "call-bind": "^1.0.5", + "call-bind": "^1.0.8", + "call-bound": "^1.0.3", "define-properties": "^1.2.1", - "has-symbols": "^1.0.3", + "es-object-atoms": "^1.0.0", + "has-symbols": "^1.1.0", "object-keys": "^1.1.1" }, "engines": { @@ -15994,12 +15954,13 @@ } }, "node_modules/object.values": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz", - "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz", + "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", + "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" }, @@ -17566,9 +17527,9 @@ } }, "node_modules/rc-motion": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.4.tgz", - "integrity": "sha512-TAPUUufDqhPO669qJobI0d9U0XZ/VPNQyZTivUxxzU1EyuPe3PtHSx7Kb902KuzQgu7sS18z8GguaxZEALV/ww==", + "version": "2.9.5", + "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.5.tgz", + "integrity": "sha512-w+XTUrfh7ArbYEd2582uDrEhmBHwK1ZENJiSJVb7uRxdE7qJSYjbO2eksRXmndqyKqKoYPc9ClpPh5242mV1vA==", "dependencies": { "@babel/runtime": "^7.11.1", "classnames": "^2.2.1", @@ -18318,19 +18279,19 @@ } }, "node_modules/reflect.getprototypeof": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.8.tgz", - "integrity": "sha512-B5dj6usc5dkk8uFliwjwDHM8To5/QwdKz9JcBZ8Ic4G1f0YmeeJTtE/ZTdgRFPAfxZFiUaPhZ1Jcs4qeagItGQ==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz", + "integrity": "sha512-r0Ay04Snci87djAsI4U+WNRcSw5S4pOH7qFjd/veA5gC7TbqESR3tcj28ia95L/fYUDw11JKP7uqUKUAfVvV5Q==", "dev": true, "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", - "dunder-proto": "^1.0.0", - "es-abstract": "^1.23.5", + "dunder-proto": "^1.0.1", + "es-abstract": "^1.23.6", "es-errors": "^1.3.0", - "get-intrinsic": "^1.2.4", + "get-intrinsic": "^1.2.6", "gopd": "^1.2.0", - "which-builtin-type": "^1.2.0" + "which-builtin-type": "^1.2.1" }, "engines": { "node": ">= 0.4" @@ -18513,9 +18474,9 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" }, "node_modules/resolve": { - "version": "1.22.9", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.9.tgz", - "integrity": "sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==", + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", + "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", "dev": true, "dependencies": { "is-core-module": "^2.16.0", @@ -18525,6 +18486,9 @@ "bin": { "resolve": "bin/resolve" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -18542,7 +18506,6 @@ "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, "funding": { "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" } @@ -19705,23 +19668,24 @@ } }, "node_modules/string.prototype.matchall": { - "version": "4.0.11", - "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz", - "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==", + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz", + "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", + "call-bound": "^1.0.3", "define-properties": "^1.2.1", - "es-abstract": "^1.23.2", + "es-abstract": "^1.23.6", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", - "get-intrinsic": "^1.2.4", - "gopd": "^1.0.1", - "has-symbols": "^1.0.3", - "internal-slot": "^1.0.7", - "regexp.prototype.flags": "^1.5.2", + "get-intrinsic": "^1.2.6", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "internal-slot": "^1.1.0", + "regexp.prototype.flags": "^1.5.3", "set-function-name": "^2.0.2", - "side-channel": "^1.0.6" + "side-channel": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -20322,7 +20286,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" }, @@ -20988,7 +20951,6 @@ "version": "4.19.2", "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz", "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==", - "dev": true, "dependencies": { "esbuild": "~0.23.0", "get-tsconfig": "^4.7.5" @@ -21010,7 +20972,6 @@ "cpu": [ "loong64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -21023,7 +20984,6 @@ "version": "0.23.1", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", - "dev": true, "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -21111,14 +21071,14 @@ } }, "node_modules/typed-array-buffer": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz", - "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz", + "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==", "dev": true, "dependencies": { - "call-bind": "^1.0.7", + "call-bound": "^1.0.3", "es-errors": "^1.3.0", - "is-typed-array": "^1.1.13" + "is-typed-array": "^1.1.14" }, "engines": { "node": ">= 0.4" @@ -21144,18 +21104,18 @@ } }, "node_modules/typed-array-byte-offset": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.3.tgz", - "integrity": "sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz", + "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==", "dev": true, "dependencies": { "available-typed-arrays": "^1.0.7", - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", "for-each": "^0.3.3", - "gopd": "^1.0.1", - "has-proto": "^1.0.3", - "is-typed-array": "^1.1.13", - "reflect.getprototypeof": "^1.0.6" + "gopd": "^1.2.0", + "has-proto": "^1.2.0", + "is-typed-array": "^1.1.15", + "reflect.getprototypeof": "^1.0.9" }, "engines": { "node": ">= 0.4" @@ -22065,15 +22025,16 @@ } }, "node_modules/which-typed-array": { - "version": "1.1.16", - "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.16.tgz", - "integrity": "sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ==", + "version": "1.1.18", + "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.18.tgz", + "integrity": "sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==", "dev": true, "dependencies": { "available-typed-arrays": "^1.0.7", - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", + "call-bound": "^1.0.3", "for-each": "^0.3.3", - "gopd": "^1.0.1", + "gopd": "^1.2.0", "has-tostringtag": "^1.0.2" }, "engines": { @@ -22309,7 +22270,6 @@ "version": "3.23.8", "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", - "dev": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -22332,10 +22292,20 @@ } }, "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.13.tgz", - "integrity": "sha512-KuzAiCWhkCkFMmsdtcFM+D3UVNL/VVNfzwTJerZazPmwFP8tt6WUtIDmw/+UaKEwLfN7kp39BO8DJFVE7BfRpw==", + "version": "0.0.0-beta.18", + "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.18.tgz", + "integrity": "sha512-BHFlOQ0jUZydd8ZH3JoMgqRU56kijmHtPQsuaevWlpvnn2/ufr7sE88nsS7qRnCC+dPZVJ3WNR6N+Zn19ZIV+A==", "dev": true, + "dependencies": { + "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" @@ -22344,25 +22314,37 @@ "node": ">=20.0.0" } }, + "utils/sui-theme/node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.13", + "version": "0.0.0-beta.18", "license": "MIT", - "bin": { - "tokens": "bin/tokens.mjs", - "tokens-scss": "bin/tokens-scss.mjs" - }, - "devDependencies": { + "dependencies": { "chalk": "4.1.2", "change-case": "5.4.4", "chroma-js": "2.6.0", "commander": "8.3.0", "deepmerge-ts": "^4.0.0", - "lodash.get": "^4.4.2", "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" } @@ -22371,7 +22353,6 @@ "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/utils/sui-theme/milanuncios.tokens.config.ts b/utils/sui-theme/milanuncios.tokens.config.ts new file mode 100644 index 0000000000..fcbcf36e48 --- /dev/null +++ b/utils/sui-theme/milanuncios.tokens.config.ts @@ -0,0 +1,290 @@ +import chroma from 'chroma-js' + +import {type Theme, type PrimitiveTheme} from '@s-ui/tokens' + +const theme: Theme = { + primitive: { + fontSize: '16px', + 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' + } + }, + colorSpace: 'rgb', + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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]).alpha(opacity.dim3).css('rgb'), + 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-theme/src/utils/_opacity.scss b/utils/sui-theme/src/utils/_opacity.scss index ef4ed88cbb..14d88e5d64 100644 --- a/utils/sui-theme/src/utils/_opacity.scss +++ b/utils/sui-theme/src/utils/_opacity.scss @@ -8,7 +8,7 @@ @each $value in $c-opacity { &-#{$value} { - background-color: color-mix(in srgb, #{$value '%'}, transparent); + background-color: color-mix(in srgb, $color #{$value + '%'}, transparent); } } } @@ -19,7 +19,7 @@ position: relative; &::before { - background-color: color-mix(in srgb, #{$value '%'}, transparent); + background-color: color-mix(in srgb, $color #{$value + '%'}, transparent); content: ''; display: block; height: 100%; From a218c6178ecd904c706d7e5a6b726a9a391ecba0 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 16:25:33 +0100 Subject: [PATCH 33/42] fix(utils/sui-tokens): bump --- utils/sui-tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 147feb0c81..6b6c5a3d89 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.18", + "version": "0.0.0-beta.19", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" From bf442fb9927965b7c510448564d683149b7f744d Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 09:10:10 +0100 Subject: [PATCH 34/42] feat(utils/sui-tokens): config file structure --- utils/sui-theme/package.json | 6 +- utils/sui-tokens/README.md | 35 +++++++++++ utils/sui-tokens/bin/tokens-json.mjs | 1 + utils/sui-tokens/bin/tokens-scss.mjs | 1 + utils/sui-tokens/bin/tokens.mjs | 8 +++ utils/sui-tokens/fotocasa.tokens.config.ts | 6 +- utils/sui-tokens/milanuncios.tokens.config.ts | 6 +- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/build.ts | 58 ++++++++++++++----- utils/sui-tokens/src/default.tokens.config.ts | 13 +++-- utils/sui-tokens/src/generate.ts | 16 +++-- utils/sui-tokens/src/index.ts | 4 +- utils/sui-tokens/src/types.ts | 16 ++++- 13 files changed, 136 insertions(+), 36 deletions(-) diff --git a/utils/sui-theme/package.json b/utils/sui-theme/package.json index f0b4c7cf06..035c83d0d2 100644 --- a/utils/sui-theme/package.json +++ b/utils/sui-theme/package.json @@ -21,8 +21,7 @@ ], "main": "lib/index.scss", "scripts": { - "tokens": "tokens scss -o ./src/.tokens/.tokens.scss", - "lib": "rm -rf ./lib && npm run tokens && cp -R src lib", + "lib": "rm -rf ./lib && cp -R src lib", "prepublishOnly": "npm run lib" }, "repository": { @@ -36,9 +35,6 @@ "bugs": { "url": "https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Util%3A+theme%22" }, - "devDependencies": { - "@s-ui/tokens": "beta" - }, "homepage": "https://sui-components.vercel.app/", "license": "MIT" } diff --git a/utils/sui-tokens/README.md b/utils/sui-tokens/README.md index db87f9eb3f..b1fe378f09 100644 --- a/utils/sui-tokens/README.md +++ b/utils/sui-tokens/README.md @@ -10,3 +10,38 @@ It provides: ```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 index a1c1f67ede..165f632a4e 100755 --- a/utils/sui-tokens/bin/tokens-json.mjs +++ b/utils/sui-tokens/bin/tokens-json.mjs @@ -10,6 +10,7 @@ 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 index 3ccb8fdb1c..06d71e3bbc 100755 --- a/utils/sui-tokens/bin/tokens-scss.mjs +++ b/utils/sui-tokens/bin/tokens-scss.mjs @@ -12,6 +12,7 @@ program .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 index a3eae561f3..02bd78515f 100755 --- a/utils/sui-tokens/bin/tokens.mjs +++ b/utils/sui-tokens/bin/tokens.mjs @@ -2,6 +2,7 @@ import {program} from 'commander' import {createRequire} from 'node:module' +import {run} from '../src/build.js' const require = createRequire(import.meta.url) const {version} = require('../package.json') @@ -11,4 +12,11 @@ program.version(version, '--version, -v') program.command('scss', 'Generate scss theming variables') program.command('json', 'Generate json theming variables') +program + .option('-c, --configuration ', 'configuration file route') + .option('-o, --output ', 'output file route') + .option('-p, --primitive', 'include primitives in the output', false) + .description('tokens result') + .action(run) + program.parse(process.argv) diff --git a/utils/sui-tokens/fotocasa.tokens.config.ts b/utils/sui-tokens/fotocasa.tokens.config.ts index b4c630814f..07e63f54e2 100644 --- a/utils/sui-tokens/fotocasa.tokens.config.ts +++ b/utils/sui-tokens/fotocasa.tokens.config.ts @@ -3,8 +3,11 @@ import chroma from 'chroma-js' import {type Theme, type PrimitiveTheme} from './src/types' const theme: Theme = { - primitive: { + settings: { fontSize: '16px', + colorSpace: 'rgb' + }, + primitive: { color: { blue: { 50: '#F4F4FB', @@ -111,7 +114,6 @@ const theme: Theme = { gloom: '#000000' } }, - colorSpace: 'rgb', opacity: { full: 1, dim1: 0.82, diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts index 5819412ac8..e3257b805f 100644 --- a/utils/sui-tokens/milanuncios.tokens.config.ts +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -3,8 +3,11 @@ import chroma from 'chroma-js' import {type Theme, type PrimitiveTheme} from './src/types' const theme: Theme = { - primitive: { + settings: { fontSize: '16px', + colorSpace: 'rgb' + }, + primitive: { color: { hero: { 50: '#F2FCF7', @@ -104,7 +107,6 @@ const theme: Theme = { gloom: '#000000' } }, - colorSpace: 'rgb', opacity: { full: 1, dim1: 0.72, diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 6b6c5a3d89..9a0af90d69 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.19", + "version": "0.0.0-beta.20", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public" diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index 4acc2b0046..393858b736 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -11,9 +11,9 @@ import process from 'node:process' import {colorParser, colorRampParser} from './checker' import defaultTokensConfig from './default.tokens.config' import {generate} from './generate' -import type {Theme, PrimitiveTheme} from './types' +import type {Theme, PrimitiveTheme, SettingsTheme} from './types' -const colorFn = (colorSpace: PrimitiveTheme['colorSpace']) => (v: string) => { +const colorFn = (colorSpace: SettingsTheme['colorSpace']) => (v: string) => { switch (colorSpace) { case 'hex': return chroma(v).css() @@ -23,11 +23,10 @@ const colorFn = (colorSpace: PrimitiveTheme['colorSpace']) => (v: string) => { } export function build(tokensConfig?: Theme) { - const buildPrimitive = (primitive: PrimitiveTheme) => { - const colorSpace = primitive?.colorSpace + const buildPrimitive = (primitive: PrimitiveTheme, settings: SettingsTheme) => { + const colorSpace = settings?.colorSpace const colorTx = colorFn(colorSpace) return { - prefix: primitive.prefix, color: Object.entries(primitive.color).reduce((acc, [key, value]) => { if (typeof value === 'string' && colorParser.safeParse(value).success) { acc[key] = colorTx(value) @@ -39,30 +38,37 @@ export function build(tokensConfig?: Theme) { } return acc }, {}), - colorSpace: primitive.colorSpace, opacity: primitive.opacity, - fontSize: primitive.fontSize, 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) + const primitive = buildPrimitive(protoPrimitive, protoSettings) const semantic = tokensConfig?.semantic != null ? deepmerge( - defaultTokensConfig.semantic(buildPrimitive(defaultTokensConfig.primitive)), - tokensConfig.semantic(primitive) + defaultTokensConfig.semantic( + buildPrimitive(defaultTokensConfig.primitive, defaultTokensConfig.settings), + defaultTokensConfig.settings + ), + tokensConfig.semantic(primitive, protoSettings) ) - : defaultTokensConfig.semantic(primitive) + : defaultTokensConfig.semantic(primitive, protoSettings) return { + settings: protoSettings, primitive, semantic } @@ -123,13 +129,39 @@ export const runSCSS = async ({ console.log(chalk.blue('Done!')) } -export const runJSON = async ({configuration, output}: {configuration?: string; output?: string}) => { +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!')) +} + +export const run = async ({ + configuration, + 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(generate.json(result), output) + console.log(JSON.stringify(generate.json(result, {hasPrimitive: primitive}), null, 2)) console.log(chalk.blue('Done!')) } diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index af72c278d3..cd373489c7 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -1,11 +1,14 @@ import chroma from 'chroma-js' -import {type Theme, type PrimitiveTheme} from './types' +import {type Theme, type PrimitiveTheme, type SettingsTheme} from './types' const theme: Theme = { - primitive: { + settings: { prefix: 's-ui', fontSize: '16px', + colorSpace: 'rgb' + }, + primitive: { fontFamily: { sans: ["'Open Sans'", 'Helvetica', 'sans-serif'], serif: ['Georgia', 'Cambria', "'Times New Roman'", 'Times', 'serif'], @@ -125,7 +128,6 @@ const theme: Theme = { gloom: '#000000' } }, - colorSpace: 'rgb', opacity: { full: 1, dim1: 0.72, @@ -218,7 +220,10 @@ const theme: Theme = { tooltip: 1800 } }, - semantic: ({color, opacity, elevation, size, fontSize, fontFamily}: PrimitiveTheme) => { + semantic: ( + {color, opacity, elevation, size, fontFamily}: PrimitiveTheme, + {fontSize, prefix, colorSpace}: SettingsTheme + ) => { return { color: { brand: { diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 9043a271e6..7832e57869 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -1,6 +1,6 @@ import {kebabCase} from 'change-case' -import {type SemanticTheme, type PrimitiveTheme} from './types' +import {type SemanticTheme, type PrimitiveTheme, type SettingsTheme} from './types' const anidate = (accumulator: Map, [key, value]) => { if (typeof value === 'string' || typeof value === 'number') { @@ -23,7 +23,7 @@ const anidate = (accumulator: Map, [key, value]) => { export const generate = { scss: ( - {primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}, + {settings, primitive, semantic}: {settings: SettingsTheme; primitive: PrimitiveTheme; semantic: SemanticTheme}, selector: string, mode?: 'light' | 'dark' ) => { @@ -73,7 +73,7 @@ $${key}: var(${getTokenKey(key)}) !default;` ) } - const {prefix} = primitive + const {prefix} = settings const hasMode = (mode?: 'light' | 'dark') => mode !== undefined add('color', prefix, hasMode(mode) ? 2 : 1) @@ -96,7 +96,13 @@ ${scssTokens.elevation} ${scssTokens.spacing} ` }, - json: ({semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}) => { - return JSON.stringify(semantic, null, 2) + json: ( + {primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}, + {hasPrimitive}: {hasPrimitive: boolean} + ) => { + return { + ...(hasPrimitive ? {primitive} : {}), + semantic + } } } diff --git a/utils/sui-tokens/src/index.ts b/utils/sui-tokens/src/index.ts index 6682307e17..537d60a29b 100644 --- a/utils/sui-tokens/src/index.ts +++ b/utils/sui-tokens/src/index.ts @@ -1,11 +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 Theme, + type ThemeResult } from './types' diff --git a/utils/sui-tokens/src/types.ts b/utils/sui-tokens/src/types.ts index 7622db826f..70ae577114 100644 --- a/utils/sui-tokens/src/types.ts +++ b/utils/sui-tokens/src/types.ts @@ -12,14 +12,17 @@ export interface OpacityPrimitive { export type Base = string -export interface PrimitiveTheme { +export interface SettingsTheme { prefix?: string fontSize?: string + colorSpace?: 'hex' | 'rgb' +} + +export interface PrimitiveTheme { fontFamily?: { [key: string]: string[] } color?: ColorPrimitives - colorSpace?: 'hex' | 'rgb' opacity?: OpacityPrimitive size?: { [key: string]: string @@ -228,6 +231,13 @@ export interface SemanticTheme { } export interface Theme { + settings: SettingsTheme + primitive: PrimitiveTheme + semantic: (themePrimitives?: PrimitiveTheme, settingsTheme?: SettingsTheme) => SemanticTheme +} + +export interface ThemeResult { + settings: SettingsTheme primitive: PrimitiveTheme - semantic: (themePrimitives: PrimitiveTheme) => SemanticTheme + semantic: SemanticTheme } From 1bbadb32c535a237ee07f7872866a22cfa1a9a44 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 09:22:57 +0100 Subject: [PATCH 35/42] fix(Root): remove unnecesary tokens scss files --- package-lock.json | 155 +++++++++++++++++++------------------- themes/carfactory.scss | 2 - themes/epreselec.scss | 2 - themes/infojobs.scss | 2 - themes/kleinanzeigen.scss | 14 ---- themes/motor.scss | 2 - 6 files changed, 79 insertions(+), 98 deletions(-) delete mode 100644 themes/kleinanzeigen.scss diff --git a/package-lock.json b/package-lock.json index a32d0404e3..aac748bb98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6399,9 +6399,9 @@ } }, "node_modules/@types/express-serve-static-core": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz", - "integrity": "sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.3.tgz", + "integrity": "sha512-JEhMNwUJt7bw728CydvYzntD0XJeTmDnvwLlbfbAhE7Tbslm/ax6bdIiUwTgeVlZTsJQPwZwKpAkyDtIjsvx3g==", "dev": true, "dependencies": { "@types/node": "*", @@ -6503,9 +6503,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "22.10.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", - "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", + "version": "22.10.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.3.tgz", + "integrity": "sha512-DifAyw4BkrufCILvD3ucnuN8eydUfc/C1GlyrnI+LK6543w5/L3VeVgf05o3B4fqSXP1dKYLOZsKfutpxPzZrw==", "dev": true, "dependencies": { "undici-types": "~6.20.0" @@ -9957,9 +9957,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.75", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.75.tgz", - "integrity": "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q==", + "version": "1.5.76", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.76.tgz", + "integrity": "sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==", "dev": true }, "node_modules/emoji-regex": { @@ -10109,9 +10109,9 @@ } }, "node_modules/es-abstract": { - "version": "1.23.7", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.7.tgz", - "integrity": "sha512-OygGC8kIcDhXX+6yAZRGLqwi2CmEXCbLQixeGUgYeR+Qwlppqmo7DIDr8XibtEBZp+fJcoYpoatp5qwLMEdcqQ==", + "version": "1.23.8", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.8.tgz", + "integrity": "sha512-lfab8IzDn6EpI1ibZakcgS6WsfEBiB+43cuJo+wgylx1xKXf+Sp+YR3vFuQwC/u3sxYwV8Cxe3B0DpVUu/WiJQ==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.2", @@ -10149,8 +10149,10 @@ "object-inspect": "^1.13.3", "object-keys": "^1.1.1", "object.assign": "^4.1.7", + "own-keys": "^1.0.0", "regexp.prototype.flags": "^1.5.3", "safe-array-concat": "^1.1.3", + "safe-push-apply": "^1.0.0", "safe-regex-test": "^1.1.0", "string.prototype.trim": "^1.2.10", "string.prototype.trimend": "^1.0.9", @@ -10212,9 +10214,9 @@ "dev": true }, "node_modules/es-module-lexer": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz", - "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz", + "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==", "dev": true }, "node_modules/es-object-atoms": { @@ -10229,14 +10231,15 @@ } }, "node_modules/es-set-tostringtag": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", - "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", "dev": true, "dependencies": { - "get-intrinsic": "^1.2.4", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", - "hasown": "^2.0.1" + "hasown": "^2.0.2" }, "engines": { "node": ">= 0.4" @@ -11822,9 +11825,9 @@ "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==" }, "node_modules/fastq": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", - "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz", + "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==", "dependencies": { "reusify": "^1.0.4" } @@ -14905,9 +14908,9 @@ } }, "node_modules/memfs": { - "version": "4.15.1", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.15.1.tgz", - "integrity": "sha512-ufCzgFwiVnR6R9cCYuvwznJdhdYXEvFl0hpnM4cCtVaVkHuqBR+6fo2sqt1SSMdp+uiHw9GyPZr3OMM5tqjSmQ==", + "version": "4.15.3", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.15.3.tgz", + "integrity": "sha512-vR/g1SgqvKJgAyYla+06G4p/EOcEmwhYuVb1yc1ixcKf8o/sh7Zngv63957ZSNd1xrZJoinmNyDf2LzuP8WJXw==", "dev": true, "dependencies": { "@jsonjoy.com/json-pack": "^1.0.3", @@ -16081,6 +16084,23 @@ "node": ">=0.10.0" } }, + "node_modules/own-keys": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz", + "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.6", + "object-keys": "^1.1.1", + "safe-push-apply": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", @@ -16670,9 +16690,9 @@ } }, "node_modules/postcss-load-config/node_modules/yaml": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz", - "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==", + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz", + "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==", "dev": true, "bin": { "yaml": "bin.mjs" @@ -17593,9 +17613,9 @@ } }, "node_modules/rc-util": { - "version": "5.44.2", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.2.tgz", - "integrity": "sha512-uGSk3hpPBLa3/0QAcKhCjgl4SFnhQCJDLvvpoLdbR6KgDuXrujG+dQaUeUvBJr2ZWak1O/9n+cYbJiWmmk95EQ==", + "version": "5.44.3", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.3.tgz", + "integrity": "sha512-q6KCcOFk3rv/zD3MckhJteZxb0VjAIFuf622B7ElK4vfrZdAzs16XR5p3VTdy3+U5jfJU5ACz4QnhLSuAGe5dA==", "dependencies": { "@babel/runtime": "^7.18.3", "react-is": "^18.2.0" @@ -17847,9 +17867,9 @@ } }, "node_modules/react-joyride/node_modules/type-fest": { - "version": "4.30.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.2.tgz", - "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==", + "version": "4.31.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.31.0.tgz", + "integrity": "sha512-yCxltHW07Nkhv/1F6wWBr8kz+5BGMfP+RbRSYFnegVb0qV/UMT0G0ElBloPVerqn4M2ZV80Ir1FtCcYv1cT6vQ==", "engines": { "node": ">=16" }, @@ -18644,6 +18664,28 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "node_modules/safe-push-apply": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz", + "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "isarray": "^2.0.5" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/safe-push-apply/node_modules/isarray": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", + "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==", + "dev": true + }, "node_modules/safe-regex-test": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz", @@ -22286,50 +22328,11 @@ "utils/sui-theme": { "name": "@s-ui/theme", "version": "8.127.0", - "license": "MIT", - "devDependencies": { - "@s-ui/tokens": "beta" - } - }, - "utils/sui-theme/node_modules/@s-ui/tokens": { - "version": "0.0.0-beta.18", - "resolved": "https://registry.npmjs.org/@s-ui/tokens/-/tokens-0.0.0-beta.18.tgz", - "integrity": "sha512-BHFlOQ0jUZydd8ZH3JoMgqRU56kijmHtPQsuaevWlpvnn2/ufr7sE88nsS7qRnCC+dPZVJ3WNR6N+Zn19ZIV+A==", - "dev": true, - "dependencies": { - "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-theme/node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } + "license": "MIT" }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.18", + "version": "0.0.0-beta.20", "license": "MIT", "dependencies": { "chalk": "4.1.2", diff --git a/themes/carfactory.scss b/themes/carfactory.scss index 1741787a70..ad42a9c081 100644 --- a/themes/carfactory.scss +++ b/themes/carfactory.scss @@ -1,6 +1,4 @@ // Settings -@import '~@s-ui/theme/lib/.tokens/.tokens.light'; -@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; // Inherit from original theme diff --git a/themes/epreselec.scss b/themes/epreselec.scss index 622dab8cc5..56bea0c23b 100644 --- a/themes/epreselec.scss +++ b/themes/epreselec.scss @@ -2,8 +2,6 @@ // // Inherit from original theme -@import '~@s-ui/theme/lib/.tokens/.tokens.light'; -@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ep-theme/lib/index'; diff --git a/themes/infojobs.scss b/themes/infojobs.scss index 4b1b294ccf..8091d0e117 100644 --- a/themes/infojobs.scss +++ b/themes/infojobs.scss @@ -4,8 +4,6 @@ $ff-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, s $fz-base: 16px; // Inherit from original theme -@import '~@s-ui/theme/lib/.tokens/.tokens.light'; -@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; @import '~@adv-ui/ij-theme/lib/index'; @import '~@adv-ui/ij-theme/lib/normalize'; diff --git a/themes/kleinanzeigen.scss b/themes/kleinanzeigen.scss deleted file mode 100644 index 5c4a651a9f..0000000000 --- a/themes/kleinanzeigen.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Settings -$ff-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, - Segoe UI Emoji; -$fz-base: 16px; - -// Inherit from original theme -@import '~@s-ui/theme/lib/.tokens/.tokens.light'; -@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; -@import '~@s-ui/theme/lib/settings'; -@import '~@adv-ui/ka-theme/lib/index'; -@import '~@adv-ui/ka-theme/lib/normalize'; - -// Common css for sui-studio -@import './common'; diff --git a/themes/motor.scss b/themes/motor.scss index 15a523d01e..baa33ccabd 100644 --- a/themes/motor.scss +++ b/themes/motor.scss @@ -1,6 +1,4 @@ // Settings -@import '~@s-ui/theme/lib/.tokens/.tokens.light'; -@import '~@s-ui/theme/lib/.tokens/.tokens.dark'; @import '~@s-ui/theme/lib/settings'; // Inherit from original theme From 359bd3f75b87c44d050564590081487e950ca9ae Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 09:30:08 +0100 Subject: [PATCH 36/42] chore(utils/sui-theme): remove unnecesary file included --- utils/sui-theme/src/index.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/utils/sui-theme/src/index.scss b/utils/sui-theme/src/index.scss index 418a513fbe..abb5aa42ae 100644 --- a/utils/sui-theme/src/index.scss +++ b/utils/sui-theme/src/index.scss @@ -1,6 +1,3 @@ -// tokens -@import './.tokens/.tokens'; - // Utils @import './utils'; // Settings From 6a2547136d38d3ae09023ddc01c47df9a99d5cf1 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 16:20:33 +0100 Subject: [PATCH 37/42] fix(utils/sui-tokens): ts errors fixed --- package-lock.json | 6 + utils/sui-theme/milanuncios.tokens.config.ts | 290 -------------- utils/sui-tokens/fotocasa.tokens.config.ts | 314 ++++++++------- utils/sui-tokens/milanuncios.tokens.config.ts | 314 ++++++++------- utils/sui-tokens/package.json | 1 + utils/sui-tokens/src/build.ts | 33 +- utils/sui-tokens/src/default.tokens.config.ts | 368 ++++++++++-------- utils/sui-tokens/src/generate.ts | 57 +-- utils/sui-tokens/src/types.ts | 14 +- 9 files changed, 622 insertions(+), 775 deletions(-) delete mode 100644 utils/sui-theme/milanuncios.tokens.config.ts diff --git a/package-lock.json b/package-lock.json index aac748bb98..90daba245e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6340,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", @@ -22335,6 +22340,7 @@ "version": "0.0.0-beta.20", "license": "MIT", "dependencies": { + "@types/chroma-js": "2.4.5", "chalk": "4.1.2", "change-case": "5.4.4", "chroma-js": "2.6.0", diff --git a/utils/sui-theme/milanuncios.tokens.config.ts b/utils/sui-theme/milanuncios.tokens.config.ts deleted file mode 100644 index fcbcf36e48..0000000000 --- a/utils/sui-theme/milanuncios.tokens.config.ts +++ /dev/null @@ -1,290 +0,0 @@ -import chroma from 'chroma-js' - -import {type Theme, type PrimitiveTheme} from '@s-ui/tokens' - -const theme: Theme = { - primitive: { - fontSize: '16px', - 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' - } - }, - colorSpace: 'rgb', - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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]).alpha(opacity.dim3).css('rgb'), - 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/fotocasa.tokens.config.ts b/utils/sui-tokens/fotocasa.tokens.config.ts index 07e63f54e2..1613f3c995 100644 --- a/utils/sui-tokens/fotocasa.tokens.config.ts +++ b/utils/sui-tokens/fotocasa.tokens.config.ts @@ -127,170 +127,210 @@ const theme: Theme = { 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]).alpha(opacity.dim5).css('rgb'), - onMain: color.base.bright, + 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]).alpha(opacity.dim5).css('rgb'), - onMainContainer: color.hero[700], + 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]).alpha(opacity.dim5).css('rgb'), - onMainVariant: color.base.bright, + 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]).alpha(opacity.dim5).css('rgb'), - onAccent: color.gray[900], + 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]).alpha(opacity.dim5).css('rgb'), - onAccentContainer: 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?.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]).alpha(opacity.dim5).css('rgb'), - onAccentVariant: 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]).alpha(opacity.dim5).css('rgb'), - onSupport: color.base.bright, + 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]).alpha(opacity.dim5).css('rgb'), - onSupportContainer: color.zelda[500], + 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]).alpha(opacity.dim5).css('rgb'), - onSupportVariant: color.base.bright + 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]).alpha(opacity.dim5).css('rgb'), - onSuccess: color.base.bright, + 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]).alpha(opacity.dim5).css('rgb'), - onSuccessContainer: color.hero[700], + 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]).alpha(opacity.dim5).css('rgb'), - onAlert: color.base.gloom, + 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]).alpha(opacity.dim5).css('rgb'), - onAlertContainer: 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]).alpha(opacity.dim5).css('rgb'), - onError: color.base.bright, + 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]).alpha(opacity.dim5).css('rgb'), - onErrorContainer: color.goron[600], + 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]).alpha(opacity.dim5).css('rgb'), - onInfo: color.base.bright, + 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]).alpha(opacity.dim5).css('rgb'), - onInfoContainer: color.zora[600], + 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]).alpha(opacity.dim5).css('rgb'), - onNeutral: color.base.bright, + 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]).alpha(opacity.dim5).css('rgb'), - onNeutralContainer: color.base.gloom + 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, + 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, + surface: color?.base.bright, + onSurface: color?.base.gloom, + surfaceInverse: color?.poe[900], + onSurfaceInverse: color?.base.bright, - overlay: color.base.gloom, - onOverlay: 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]).alpha(opacity.dim5).css('rgb'), - outlineHigh: color.poe[900] + 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 + 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 } } }) diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts index e3257b805f..8d5262f559 100644 --- a/utils/sui-tokens/milanuncios.tokens.config.ts +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -120,170 +120,210 @@ const theme: Theme = { 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]).alpha(opacity.dim3).css('rgb'), - onMain: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onMainContainer: color.hero[700], + 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]).alpha(opacity.dim3).css('rgb'), - onMainVariant: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onAccent: color.base.gloom, + 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]).alpha(opacity.dim3).css('rgb'), - onAccentContainer: 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]).alpha(opacity.dim3).css('rgb'), - onAccentVariant: 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]).alpha(opacity.dim3).css('rgb'), - onSupport: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onSupportContainer: color.zelda[500], + 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]).alpha(opacity.dim3).css('rgb'), - onSupportVariant: color.base.bright + 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]).alpha(opacity.dim3).css('rgb'), - onSuccess: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onSuccessContainer: color.hero[700], + 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]).alpha(opacity.dim3).css('rgb'), - onAlert: color.base.gloom, + 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]).alpha(opacity.dim3).css('rgb'), - onAlertContainer: 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]).alpha(opacity.dim3).css('rgb'), - onError: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onErrorContainer: color.goron[600], + 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]).alpha(opacity.dim3).css('rgb'), - onInfo: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onInfoContainer: color.zora[600], + 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]).alpha(opacity.dim3).css('rgb'), - onNeutral: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onNeutralContainer: color.base.gloom + 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, + 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, + surface: color?.base.bright, + onSurface: color?.base.gloom, + surfaceInverse: color?.poe[900], + onSurfaceInverse: color?.base.bright, - overlay: color.base.gloom, - onOverlay: 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]).alpha(opacity.dim3).css('rgb'), - outlineHigh: color.poe[900] + 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 + 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 } } }) diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index 9a0af90d69..c8aac8caab 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -23,6 +23,7 @@ "sui" ], "dependencies": { + "@types/chroma-js": "2.4.5", "chalk": "4.1.2", "chroma-js": "2.6.0", "change-case": "5.4.4", diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index 393858b736..d014284050 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -11,14 +11,14 @@ import process from 'node:process' import {colorParser, colorRampParser} from './checker' import defaultTokensConfig from './default.tokens.config' import {generate} from './generate' -import type {Theme, PrimitiveTheme, SettingsTheme} from './types' +import type {Theme, PrimitiveTheme, SettingsTheme, ColorRamp, ColorPrimitives} from './types' const colorFn = (colorSpace: SettingsTheme['colorSpace']) => (v: string) => { switch (colorSpace) { case 'hex': return chroma(v).css() case 'rgb': - return chroma(v).css('rgb') + return chroma(v).css() } } @@ -27,17 +27,20 @@ export function build(tokensConfig?: Theme) { const colorSpace = settings?.colorSpace const colorTx = colorFn(colorSpace) return { - color: Object.entries(primitive.color).reduce((acc, [key, value]) => { - if (typeof value === 'string' && colorParser.safeParse(value).success) { - acc[key] = colorTx(value) - } else if (colorRampParser.safeParse(value).success) { - acc[key] = Object.entries(value).reduce((acc, [rampKey, rampValue]) => { - acc[rampKey] = colorTx(rampValue) - return acc - }, {}) - } - return acc - }, {}), + 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, @@ -98,7 +101,7 @@ export async function writeTokensConfig(data: string, outputPath?: string) { mkdirSync(dir, {recursive: true}) } writeFileSync(`${path.join(process.cwd(), outputPath)}`, data) - } catch (error) { + } catch (error: Error | any) { console.log(chalk.red(`💥 Error writing file: ${error.message as string}`)) process.exit(1) } @@ -116,7 +119,7 @@ export const runSCSS = async ({ }: { configuration?: string output?: string - selector?: string + selector: string mode?: 'light' | 'dark' }) => { console.log(chalk.blue('Loading tokens configuration')) diff --git a/utils/sui-tokens/src/default.tokens.config.ts b/utils/sui-tokens/src/default.tokens.config.ts index cd373489c7..f40c4d9ebd 100644 --- a/utils/sui-tokens/src/default.tokens.config.ts +++ b/utils/sui-tokens/src/default.tokens.config.ts @@ -1,6 +1,6 @@ import chroma from 'chroma-js' -import {type Theme, type PrimitiveTheme, type SettingsTheme} from './types' +import {type Theme} from './types' const theme: Theme = { settings: { @@ -220,198 +220,238 @@ const theme: Theme = { tooltip: 1800 } }, - semantic: ( - {color, opacity, elevation, size, fontFamily}: PrimitiveTheme, - {fontSize, prefix, colorSpace}: SettingsTheme - ) => { + 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]).alpha(opacity.dim3).css('rgb'), - onMain: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onMainContainer: color.theBlue[700], + 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]).alpha(opacity.dim3).css('rgb'), - onMainVariant: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onAccent: color.base.gloom, + 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]).alpha(opacity.dim3).css('rgb'), - onAccentContainer: 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]).alpha(opacity.dim3).css('rgb'), - onAccentVariant: 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]).alpha(opacity.dim3).css('rgb'), - onSupport: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onSupportContainer: color.sky[500], + 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]).alpha(opacity.dim3).css('rgb'), - onSupportVariant: color.base.bright + 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]).alpha(opacity.dim3).css('rgb'), - onSuccess: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onSuccessContainer: color.apple[700], + 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]).alpha(opacity.dim3).css('rgb'), - onAlert: color.base.bright, + 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], - alertContainerFocused: color.wiggins[50], - alertContainerPressed: color.wiggins[50], - alertContainerDisabled: chroma(color.wiggins[100]).alpha(opacity.dim3).css('rgb'), - onAlertContainer: color.base.gloom, + 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]).alpha(opacity.dim3).css('rgb'), - onError: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onErrorContainer: color.chilli[600], + 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]).alpha(opacity.dim3).css('rgb'), - onInfo: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onInfoContainer: color.sky[600], + 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]).alpha(opacity.dim3).css('rgb'), - onNeutral: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onNeutralContainer: color.base.gloom + 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]).alpha(opacity.dim3).css('rgb'), - onBasic: color.base.bright, + 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]).alpha(opacity.dim3).css('rgb'), - onBasicContainer: color.surfer[700], + 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]).alpha(opacity.dim3).css('rgb'), - onBasicVariant: color.base.bright, + 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, + 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, + surface: color?.base.bright, + onSurface: color?.base.gloom, + surfaceInverse: color?.surfer[900], + onSurfaceInverse: color?.base.bright, - overlay: color.base.gloom, - onOverlay: 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]).alpha(opacity.dim3).css('rgb'), - outlineHigh: color.surfer[900] + 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] }, - 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 + 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: { @@ -440,9 +480,9 @@ const theme: Theme = { black: '900' }, family: { - sans: fontFamily.sans.join(', '), - serif: fontFamily.serif.join(', '), - mono: fontFamily.mono.join(', ') + sans: fontFamily?.sans.join(', ') as string, + serif: fontFamily?.serif.join(', ') as string, + mono: fontFamily?.mono.join(', ') as string } }, opacity, diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index 7832e57869..af6cf60501 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -2,7 +2,10 @@ import {kebabCase} from 'change-case' import {type SemanticTheme, type PrimitiveTheme, type SettingsTheme} from './types' -const anidate = (accumulator: Map, [key, value]) => { +const anidate = ( + accumulator: Map, + [key, value]: [string, string | number | object | string[] | number[]] +) => { if (typeof value === 'string' || typeof value === 'number') { accumulator.set(`${kebabCase(key)}`, value as string) } else if (Array.isArray(value)) { @@ -10,13 +13,9 @@ const anidate = (accumulator: Map, [key, value]) => { anidate(accumulator, [`${kebabCase(key)}-${arrayIndex}`, arrayValue]) }) } else if (typeof value === 'object') { - Object.entries(value).forEach(([objectKey, objectValue]: [string, string]) => { + Object.entries(value).forEach(([objectKey, objectValue]: [string, object]) => { anidate(accumulator, [`${kebabCase(key)}-${kebabCase(objectKey)}`, objectValue]) }) - } else if (Array.isArray(value)) { - value.forEach((arrayValue, arrayIndex) => { - anidate(accumulator, [`${kebabCase(key)}-${arrayIndex}`, arrayValue]) - }) } return accumulator } @@ -27,14 +26,18 @@ export const generate = { selector: string, mode?: 'light' | 'dark' ) => { - const semanticMaps = { - color: new Map(), - font: new Map(), - opacity: new Map(), - elevation: new Map(), - spacing: new Map() + const semanticMaps: { + [index: string]: Map + } = { + color: new Map(), + font: new Map(), + opacity: new Map(), + elevation: new Map(), + spacing: new Map() } - const semanticTokens = { + const semanticTokens: { + [index: string]: string + } = { color: '', font: '', opacity: '', @@ -42,7 +45,9 @@ export const generate = { spacing: '' } - const scssTokens = { + const scssTokens: { + [index: string]: string + } = { color: '', font: '', opacity: '', @@ -50,23 +55,25 @@ export const generate = { spacing: '' } - const add = (keyword: string, prefix?: string, ident: number = 0) => { - Object.entries(semantic[keyword]).forEach(([key, value]) => { + const add = (partial: any, keyword: string, prefix?: string, ident: number = 0) => { + Object.entries(partial).forEach(([key, value]: [string, any]) => { anidate(semanticMaps[keyword], [`${keyword}-${key}`, value]) }) const getTokenKey = (key: string) => `--${prefix === undefined ? '' : `${prefix}-`}${key}` const identStr = ' '.repeat(ident) - semanticTokens[keyword] = ''.concat( - ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { + semanticTokens[keyword] = String().concat( + ...Array.from(semanticMaps[keyword]).map(v => { + const [key, value] = v as [string, string | number] return ` ${identStr}${getTokenKey(key)}: ${value};` }) ) - scssTokens[keyword] = ''.concat( - ...Array.from(semanticMaps[keyword]).map(([key, value]: [string, string]) => { + scssTokens[keyword] = String().concat( + ...Array.from(semanticMaps[keyword]).map(val => { + const [key] = val as [string, string | number] return ` $${key}: var(${getTokenKey(key)}) !default;` }) @@ -76,11 +83,11 @@ $${key}: var(${getTokenKey(key)}) !default;` const {prefix} = settings const hasMode = (mode?: 'light' | 'dark') => mode !== undefined - add('color', prefix, hasMode(mode) ? 2 : 1) - add('font', prefix, hasMode(mode) ? 2 : 1) - add('opacity', prefix, hasMode(mode) ? 2 : 1) - add('elevation', prefix, hasMode(mode) ? 2 : 1) - add('spacing', 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}) {` : ''}${semanticTokens.color} diff --git a/utils/sui-tokens/src/types.ts b/utils/sui-tokens/src/types.ts index 70ae577114..5d058c4db3 100644 --- a/utils/sui-tokens/src/types.ts +++ b/utils/sui-tokens/src/types.ts @@ -213,12 +213,9 @@ export interface SemanticTheme { } } font?: { - size?: { - [key: string]: string - } - family?: { - [key: string]: string - } + size?: {[key: string]: string} + family?: {[key: string]: string} + weight?: {[key: string]: string} } spacing?: { size?: { @@ -228,12 +225,15 @@ export interface SemanticTheme { elevation?: { [key: string]: number } + opacity?: { + [key: string]: number + } } export interface Theme { settings: SettingsTheme primitive: PrimitiveTheme - semantic: (themePrimitives?: PrimitiveTheme, settingsTheme?: SettingsTheme) => SemanticTheme + semantic: (themePrimitives: PrimitiveTheme, settingsTheme: SettingsTheme) => SemanticTheme } export interface ThemeResult { From cd09cce24c668ccc23ea8ac2d2f8db5055b2f0f1 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 16:39:40 +0100 Subject: [PATCH 38/42] chore(utils/sui-theme): rmeove unnecesary changes --- utils/sui-theme/src/settings/_color.scss | 26 ++++++++++++------------ 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/utils/sui-theme/src/settings/_color.scss b/utils/sui-theme/src/settings/_color.scss index a2cf431b4c..7291bbcaa4 100644 --- a/utils/sui-theme/src/settings/_color.scss +++ b/utils/sui-theme/src/settings/_color.scss @@ -17,7 +17,7 @@ $c-light-step: 2 !default; $c-system: #000000 !default; // Primary color -$c-primary: $color-brand-main !default; +$c-primary: #2b91c1 !default; // Old primary color gradients, keeping them for retro compatibility $c-primary-light: color-variation($c-primary, $c-light-step) !default; @@ -37,8 +37,8 @@ $c-primary-dark-3: color-variation($c-primary, -3) !default; $c-primary-dark-4: color-variation($c-primary, -4) !default; // Secondary/Accent color -$c-accent: $color-brand-accent !default; -$c-secondary: $color-brand-support !default; +$c-accent: #d57c1b !default; +$c-secondary: #d57c1b !default; // Old Secondary/Accent color gradients, keeping them for retro compatibility $c-accent-light: color-variation($c-accent, $c-light-step) !default; @@ -69,7 +69,7 @@ $c-secondary-dark-3: color-variation($c-secondary, -3) !default; $c-secondary-dark-4: color-variation($c-secondary, -4) !default; // Gray color -$c-gray: $color-feedback-neutral !default; +$c-gray: #777777 !default; // Old Gray color gradients, keeping them for retro compatibility $c-gray-light: color-variation($c-gray, $c-light-step) !default; @@ -90,7 +90,7 @@ $c-gray-dark-3: color-variation($c-gray, -3) !default; $c-gray-dark-4: color-variation($c-gray, -4) !default; // Success color -$c-success: $color-feedback-success !default; +$c-success: #00a544 !default; // Old Success color gradients, keeping them for retro compatibility $c-success-light: color-variation($c-success, $c-light-step) !default; @@ -110,7 +110,7 @@ $c-success-dark-3: color-variation($c-success, -3) !default; $c-success-dark-4: color-variation($c-success, -4) !default; // Alert color -$c-alert: $color-feedback-alert !default; +$c-alert: #ff6335 !default; // Old Alert color gradients, keeping them for retro compatibility $c-alert-light: color-variation($c-alert, $c-light-step) !default; @@ -130,7 +130,7 @@ $c-alert-dark-3: color-variation($c-alert, -3) !default; $c-alert-dark-4: color-variation($c-alert, -4) !default; // Error color -$c-error: $color-feedback-error !default; +$c-error: #e93e40 !default; // Old Error Alert color gradients, keeping them for retro compatibility $c-error-light: color-variation($c-error, $c-light-step) !default; @@ -163,13 +163,13 @@ $c-text-accent: $c-accent !default; $c-text-link: $c-text-accent !default; // Social brand colors -$c-facebook: $color-social-facebook !default; -$c-twitter: $color-social-x !default; +$c-facebook: #3b5998 !default; +$c-twitter: #55acee !default; $c-google: #d34836 !default; -$c-youtube: $color-social-youtube !default; -$c-whatsapp: $color-social-whatsapp !default; -$c-instagram: $color-social-instagram !default; -$c-tiktok: $color-social-tiktok !default; +$c-youtube: #bb0000 !default; +$c-whatsapp: #7ed321 !default; +$c-instagram: #8a3ab9 !default; +$c-tiktok: #69c9d0 !default; // Highlight color $c-highlight: #fffed4 !default; From b5135559f5000b61259b0dc6bc025ffae44a6222 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 09:54:36 +0100 Subject: [PATCH 39/42] chore(Root): lint --- .../select/src/components/SingleSelection.js | 2 +- package-lock.json | 102 ++++++++++++------ utils/sui-tokens/bin/tokens.mjs | 8 -- utils/sui-tokens/fotocasa.tokens.config.ts | 2 +- utils/sui-tokens/milanuncios.tokens.config.ts | 2 +- utils/sui-tokens/src/build.ts | 24 +---- utils/sui-tokens/src/generate.ts | 2 +- 7 files changed, 77 insertions(+), 65 deletions(-) diff --git a/components/molecule/select/src/components/SingleSelection.js b/components/molecule/select/src/components/SingleSelection.js index 64c1eb8a55..2b003e102e 100644 --- a/components/molecule/select/src/components/SingleSelection.js +++ b/components/molecule/select/src/components/SingleSelection.js @@ -4,13 +4,13 @@ import PropTypes from 'prop-types' import AtomInput, {inputTypes} from '@s-ui/react-atom-input' import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list' -import {CLASS_SEARCH_CONTAINER} from './config.js' import { SELECT_DROPDOWN_LIST_SIZES as dropdownListSizes, SELECT_INPUT_SIZES as inputSizes, useDropdown } from '../config.js' +import {CLASS_SEARCH_CONTAINER} from './config.js' import MoleculeInputSelect from './MoleculeInputSelect.js' import Search from './Search.js' diff --git a/package-lock.json b/package-lock.json index 90daba245e..19c17ca295 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6508,9 +6508,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "22.10.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.3.tgz", - "integrity": "sha512-DifAyw4BkrufCILvD3ucnuN8eydUfc/C1GlyrnI+LK6543w5/L3VeVgf05o3B4fqSXP1dKYLOZsKfutpxPzZrw==", + "version": "22.10.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz", + "integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==", "dev": true, "dependencies": { "undici-types": "~6.20.0" @@ -10114,9 +10114,9 @@ } }, "node_modules/es-abstract": { - "version": "1.23.8", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.8.tgz", - "integrity": "sha512-lfab8IzDn6EpI1ibZakcgS6WsfEBiB+43cuJo+wgylx1xKXf+Sp+YR3vFuQwC/u3sxYwV8Cxe3B0DpVUu/WiJQ==", + "version": "1.23.9", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz", + "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.2", @@ -10130,10 +10130,11 @@ "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", - "es-set-tostringtag": "^2.0.3", + "es-set-tostringtag": "^2.1.0", "es-to-primitive": "^1.3.0", "function.prototype.name": "^1.1.8", - "get-intrinsic": "^1.2.6", + "get-intrinsic": "^1.2.7", + "get-proto": "^1.0.0", "get-symbol-description": "^1.1.0", "globalthis": "^1.0.4", "gopd": "^1.2.0", @@ -10154,11 +10155,12 @@ "object-inspect": "^1.13.3", "object-keys": "^1.1.1", "object.assign": "^4.1.7", - "own-keys": "^1.0.0", + "own-keys": "^1.0.1", "regexp.prototype.flags": "^1.5.3", "safe-array-concat": "^1.1.3", "safe-push-apply": "^1.0.0", "safe-regex-test": "^1.1.0", + "set-proto": "^1.0.0", "string.prototype.trim": "^1.2.10", "string.prototype.trimend": "^1.0.9", "string.prototype.trimstart": "^1.0.8", @@ -12306,20 +12308,20 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz", - "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==", + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz", + "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==", "dependencies": { "call-bind-apply-helpers": "^1.0.1", - "dunder-proto": "^1.0.0", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "function-bind": "^1.1.2", + "get-proto": "^1.0.0", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", - "math-intrinsics": "^1.0.0" + "math-intrinsics": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -12365,6 +12367,18 @@ "xtend": "~4.0.1" } }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/get-stream": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", @@ -13364,12 +13378,15 @@ "dev": true }, "node_modules/is-async-function": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz", - "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.0.tgz", + "integrity": "sha512-GExz9MtyhlZyXYLxzlJRj5WUCE661zhDa1Yna52CN57AJsymh+DvXXjyveSioqSRdxvUrdKdvqB1b5cVKsNpWQ==", "dev": true, "dependencies": { - "has-tostringtag": "^1.0.0" + "call-bound": "^1.0.3", + "get-proto": "^1.0.1", + "has-tostringtag": "^1.0.2", + "safe-regex-test": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -13528,12 +13545,15 @@ } }, "node_modules/is-generator-function": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", - "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz", + "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==", "dev": true, "dependencies": { - "has-tostringtag": "^1.0.0" + "call-bound": "^1.0.3", + "get-proto": "^1.0.0", + "has-tostringtag": "^1.0.2", + "safe-regex-test": "^1.1.0" }, "engines": { "node": ">= 0.4" @@ -18304,18 +18324,18 @@ } }, "node_modules/reflect.getprototypeof": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz", - "integrity": "sha512-r0Ay04Snci87djAsI4U+WNRcSw5S4pOH7qFjd/veA5gC7TbqESR3tcj28ia95L/fYUDw11JKP7uqUKUAfVvV5Q==", + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", + "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==", "dev": true, "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", - "dunder-proto": "^1.0.1", - "es-abstract": "^1.23.6", + "es-abstract": "^1.23.9", "es-errors": "^1.3.0", - "get-intrinsic": "^1.2.6", - "gopd": "^1.2.0", + "es-object-atoms": "^1.0.0", + "get-intrinsic": "^1.2.7", + "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" }, "engines": { @@ -18358,13 +18378,15 @@ } }, "node_modules/regexp.prototype.flags": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz", - "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz", + "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==", "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", "set-function-name": "^2.0.2" }, "engines": { @@ -19024,6 +19046,20 @@ "node": ">=6.9" } }, + "node_modules/set-proto": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz", + "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==", + "dev": true, + "dependencies": { + "dunder-proto": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", diff --git a/utils/sui-tokens/bin/tokens.mjs b/utils/sui-tokens/bin/tokens.mjs index 02bd78515f..a3eae561f3 100755 --- a/utils/sui-tokens/bin/tokens.mjs +++ b/utils/sui-tokens/bin/tokens.mjs @@ -2,7 +2,6 @@ import {program} from 'commander' import {createRequire} from 'node:module' -import {run} from '../src/build.js' const require = createRequire(import.meta.url) const {version} = require('../package.json') @@ -12,11 +11,4 @@ program.version(version, '--version, -v') program.command('scss', 'Generate scss theming variables') program.command('json', 'Generate json theming variables') -program - .option('-c, --configuration ', 'configuration file route') - .option('-o, --output ', 'output file route') - .option('-p, --primitive', 'include primitives in the output', false) - .description('tokens result') - .action(run) - program.parse(process.argv) diff --git a/utils/sui-tokens/fotocasa.tokens.config.ts b/utils/sui-tokens/fotocasa.tokens.config.ts index 1613f3c995..0896bdd708 100644 --- a/utils/sui-tokens/fotocasa.tokens.config.ts +++ b/utils/sui-tokens/fotocasa.tokens.config.ts @@ -1,6 +1,6 @@ import chroma from 'chroma-js' -import {type Theme, type PrimitiveTheme} from './src/types' +import {type PrimitiveTheme, type Theme} from './src/types' const theme: Theme = { settings: { diff --git a/utils/sui-tokens/milanuncios.tokens.config.ts b/utils/sui-tokens/milanuncios.tokens.config.ts index 8d5262f559..fdd7bdd56c 100644 --- a/utils/sui-tokens/milanuncios.tokens.config.ts +++ b/utils/sui-tokens/milanuncios.tokens.config.ts @@ -1,6 +1,6 @@ import chroma from 'chroma-js' -import {type Theme, type PrimitiveTheme} from './src/types' +import {type PrimitiveTheme, type Theme} from './src/types' const theme: Theme = { settings: { diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index d014284050..c81ac58673 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -11,7 +11,7 @@ import process from 'node:process' import {colorParser, colorRampParser} from './checker' import defaultTokensConfig from './default.tokens.config' import {generate} from './generate' -import type {Theme, PrimitiveTheme, SettingsTheme, ColorRamp, ColorPrimitives} from './types' +import type {ColorPrimitives, ColorRamp, PrimitiveTheme, SettingsTheme, Theme} from './types' const colorFn = (colorSpace: SettingsTheme['colorSpace']) => (v: string) => { switch (colorSpace) { @@ -115,12 +115,14 @@ export const runSCSS = async ({ configuration, output, selector, - mode + mode, + primitive }: { configuration?: string output?: string selector: string mode?: 'light' | 'dark' + primitive: boolean }) => { console.log(chalk.blue('Loading tokens configuration')) const tokensConfig = await loadTokensConfig(configuration) @@ -150,21 +152,3 @@ export const runJSON = async ({ await writeTokensConfig(JSON.stringify(generate.json(result, {hasPrimitive: primitive}), null, 2), output) console.log(chalk.blue('Done!')) } - -export const run = async ({ - configuration, - 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')) - console.log(JSON.stringify(generate.json(result, {hasPrimitive: primitive}), null, 2)) - console.log(chalk.blue('Done!')) -} diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index af6cf60501..f5583d59f3 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -1,6 +1,6 @@ import {kebabCase} from 'change-case' -import {type SemanticTheme, type PrimitiveTheme, type SettingsTheme} from './types' +import {type PrimitiveTheme, type SemanticTheme, type SettingsTheme} from './types' const anidate = ( accumulator: Map, From 35dd3c2d0fdb717c3865f6cb3b4e6fe3be39f17e Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 12:43:33 +0100 Subject: [PATCH 40/42] feat(utils/sui-tokens): add primitives export flag --- utils/sui-tokens/src/build.ts | 6 +- utils/sui-tokens/src/generate.ts | 95 ++++++++++++++++++-------------- 2 files changed, 57 insertions(+), 44 deletions(-) diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts index c81ac58673..3aa38a391c 100644 --- a/utils/sui-tokens/src/build.ts +++ b/utils/sui-tokens/src/build.ts @@ -116,13 +116,13 @@ export const runSCSS = async ({ output, selector, mode, - primitive + primitives }: { configuration?: string output?: string selector: string mode?: 'light' | 'dark' - primitive: boolean + primitives: boolean }) => { console.log(chalk.blue('Loading tokens configuration')) const tokensConfig = await loadTokensConfig(configuration) @@ -130,7 +130,7 @@ export const runSCSS = async ({ console.log(chalk.green(JSON.stringify(tokensConfig, null, 2))) const result = build(tokensConfig) console.log(chalk.blue('Writing tokens')) - await writeTokensConfig(generate.scss(result, selector, mode), output) + await writeTokensConfig(generate.scss(result, {hasPrimitive: primitives, selector, mode}), output) console.log(chalk.blue('Done!')) } diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts index f5583d59f3..1f6252a370 100644 --- a/utils/sui-tokens/src/generate.ts +++ b/utils/sui-tokens/src/generate.ts @@ -7,6 +7,9 @@ const anidate = ( [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) => { @@ -23,56 +26,51 @@ const anidate = ( export const generate = { scss: ( {settings, primitive, semantic}: {settings: SettingsTheme; primitive: PrimitiveTheme; semantic: SemanticTheme}, - selector: string, - mode?: 'light' | 'dark' + { + selector, + mode, + hasPrimitive + }: { + selector: string + mode?: 'light' | 'dark' + hasPrimitive: boolean + } ) => { - const semanticMaps: { + const maps: { [index: string]: Map - } = { - color: new Map(), - font: new Map(), - opacity: new Map(), - elevation: new Map(), - spacing: new Map() - } - const semanticTokens: { + } = {} + + const customProperty: { [index: string]: string - } = { - color: '', - font: '', - opacity: '', - elevation: '', - spacing: '' - } + } = {} const scssTokens: { [index: string]: string - } = { - color: '', - font: '', - opacity: '', - elevation: '', - spacing: '' - } + } = {} 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(semanticMaps[keyword], [`${keyword}-${key}`, value]) + anidate(maps[keyword], [`${keyword}-${key}`, value]) }) const getTokenKey = (key: string) => `--${prefix === undefined ? '' : `${prefix}-`}${key}` const identStr = ' '.repeat(ident) - semanticTokens[keyword] = String().concat( - ...Array.from(semanticMaps[keyword]).map(v => { - const [key, value] = v as [string, string | number] - return ` + 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(semanticMaps[keyword]).map(val => { + ...Array.from(maps[keyword]).map(val => { const [key] = val as [string, string | number] return ` $${key}: var(${getTokenKey(key)}) !default;` @@ -80,34 +78,49 @@ $${key}: var(${getTokenKey(key)}) !default;` ) } - const {prefix} = settings + 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.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}) {` : ''}${semanticTokens.color} -${semanticTokens.font} -${semanticTokens.opacity} -${semanticTokens.elevation} -${semanticTokens.spacing}${hasMode(mode) ? `\n }` : ''} +${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: ( - {primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme}, + {settings, primitive, semantic}: {settings: SettingsTheme; primitive: PrimitiveTheme; semantic: SemanticTheme}, {hasPrimitive}: {hasPrimitive: boolean} ) => { return { + settings, ...(hasPrimitive ? {primitive} : {}), semantic } From cd90806db26295c7b37bfc01f5a241b76a20bd4f Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 13:17:30 +0100 Subject: [PATCH 41/42] chore(Root): revert some changes --- scripts/build-themes.js | 3 +-- utils/sui-theme/.gitignore | 1 - utils/sui-theme/LICENSE.md | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) delete mode 100644 utils/sui-theme/.gitignore diff --git a/scripts/build-themes.js b/scripts/build-themes.js index de64667924..cea5e5942c 100755 --- a/scripts/build-themes.js +++ b/scripts/build-themes.js @@ -21,8 +21,7 @@ const THEMES_PACKAGES = [ '@adv-ui/ij-theme', '@adv-ui/ma-theme', '@adv-ui/mt-theme', - '@adv-ui/adit-boros-tcf-ui-consent', - '@adv-ui/ka-theme' + '@adv-ui/adit-boros-tcf-ui-consent' ] const cwd = process.cwd() diff --git a/utils/sui-theme/.gitignore b/utils/sui-theme/.gitignore deleted file mode 100644 index 1012dc2d53..0000000000 --- a/utils/sui-theme/.gitignore +++ /dev/null @@ -1 +0,0 @@ -src/.tokens \ No newline at end of file diff --git a/utils/sui-theme/LICENSE.md b/utils/sui-theme/LICENSE.md index f5c7cf9531..f4155c1a2c 100644 --- a/utils/sui-theme/LICENSE.md +++ b/utils/sui-theme/LICENSE.md @@ -1,4 +1,3 @@ - MIT License Copyright (c) 2021 SUI From 467dd86a8c169297bbee059ebb45eecaa4095730 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 13:21:08 +0100 Subject: [PATCH 42/42] chore(utils/sui-tokens): prepare the package for launch --- package-lock.json | 2 +- utils/sui-tokens/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 19c17ca295..3a87201eff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22373,7 +22373,7 @@ }, "utils/sui-tokens": { "name": "@s-ui/tokens", - "version": "0.0.0-beta.20", + "version": "0.0.1", "license": "MIT", "dependencies": { "@types/chroma-js": "2.4.5", diff --git a/utils/sui-tokens/package.json b/utils/sui-tokens/package.json index c8aac8caab..07447d46e5 100644 --- a/utils/sui-tokens/package.json +++ b/utils/sui-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/tokens", - "version": "0.0.0-beta.20", + "version": "0.0.1", "description": "Tool for manipulate @s-ui tokens.", "publishConfig": { "access": "public"