From 3a558c9ef4b6936018dd6c8be1655143df33321d Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 29 Nov 2024 20:00:29 +0100 Subject: [PATCH 01/43] feat(utils/sui-tokens): first attempt --- 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 ++ 17 files changed, 1219 insertions(+) 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/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 c1f15d1b1e8cef7a1c23dec838fe870562a06242 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 3 Dec 2024 09:28:31 +0100 Subject: [PATCH 02/43] 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 0e65381250ac66f00c7150d54c7d4dea45e7871a Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 3 Dec 2024 09:45:52 +0100 Subject: [PATCH 03/43] feat(utils/sui-tokens): new beta --- utils/sui-theme/package.json | 3 + .../src/milanuncios.tokens.config.ts | 290 ++++++++++++++++++ utils/sui-tokens/package.json | 6 +- 3 files changed, 297 insertions(+), 2 deletions(-) create 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 047ea54ffb..4b2cb98c84 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 d88c2919faf61d7609e5e61bf2d5edc6d301b5c6 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 3 Dec 2024 15:08:49 +0100 Subject: [PATCH 04/43] feat(utils/sui-tokens): module --- utils/sui-theme/package.json | 2 +- utils/sui-tokens/package.json | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/utils/sui-theme/package.json b/utils/sui-theme/package.json index 4b2cb98c84..37bb54f9d6 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 6f49ed0a4016b64d5be452e7d7d960059e68d00e Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 4 Dec 2024 22:48:10 +0100 Subject: [PATCH 05/43] feat(utils/sui-tokens): again --- package.json | 1 + utils/sui-tokens/package.json | 7 +++---- 2 files changed, 4 insertions(+), 4 deletions(-) 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 a6e4d48913307f7cfe5200fb98b35a16c69cd0da Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 11 Dec 2024 12:40:30 +0100 Subject: [PATCH 06/43] feat(utils/sui-tokens): minor schema sructure --- package.json | 1 - 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 ++++++++-------- 6 files changed, 414 insertions(+), 379 deletions(-) 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/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 4eac9c780a7bbef17156cfeaf06c97904e03cb47 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 16 Dec 2024 09:41:11 +0100 Subject: [PATCH 07/43] 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 5187c9d2167903c9d5b4ab6b8f931bd3e72ef133 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 16 Dec 2024 09:41:59 +0100 Subject: [PATCH 08/43] 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 37bb54f9d6..c872c7232f 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 73d5cbb9442dd32d2658d4466462d987427ecd59 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 16 Dec 2024 09:54:31 +0100 Subject: [PATCH 09/43] 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 af66476b5b44047fe23f17185d010bf1db66c557 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 11:30:00 +0100 Subject: [PATCH 10/43] 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 52a28e7d43dd09c9baa84bf5612a3e4f3ac25514 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 13:36:31 +0100 Subject: [PATCH 11/43] 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 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 dda2f03e5e56f603ee1de07704cab8a85fca19a0 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 15:44:28 +0100 Subject: [PATCH 12/43] 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 65fe24d41bbf35d3687e59763f0e9148a517f9e3 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 15:52:22 +0100 Subject: [PATCH 13/43] 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 212a183906d09a513ab5a664968b8ddcc2077cee Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 15:52:51 +0100 Subject: [PATCH 14/43] 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 94fd903afd78b93709619782c9e7a547f4bda948 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 16:00:16 +0100 Subject: [PATCH 15/43] 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 c872c7232f..21785649fe 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 97b63a89006c220414e1a53a807b9c276890cd5d Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 16:24:16 +0100 Subject: [PATCH 16/43] 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 40ca910a3513137ecf3d968536cacbc0b612c352 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 17 Dec 2024 16:25:00 +0100 Subject: [PATCH 17/43] 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 5779e646d9f5cb36fffbbae9b90921b66a5c92b7 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 09:23:01 +0100 Subject: [PATCH 18/43] feat(utils/sui-tokens): new way to template tokens --- 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 +- 4 files changed, 6 insertions(+), 6 deletions(-) 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 afbd2dd009e98c0d238330212f9d1923a136fbba Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 10:33:25 +0100 Subject: [PATCH 19/43] feat(utils/sui-tokens): bump --- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/generate.ts | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) 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 e6b9336fc23b438516a1b132cafbc87bb4c0da49 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 11:00:07 +0100 Subject: [PATCH 20/43] feat(utils/sui-tokens): add defualt key to tokens --- utils/sui-tokens/package.json | 2 +- utils/sui-tokens/src/generate.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 ccc26001e8d54f4d328c2fb56e5468f0de4c89e8 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:37:35 +0100 Subject: [PATCH 21/43] fix(utils/sui-tokens): minor changes --- utils/sui-theme/src/settings/_color.scss | 26 ++++++++++++------------ utils/sui-tokens/src/build.ts | 8 ++++---- utils/sui-tokens/src/generate.ts | 2 +- 3 files changed, 18 insertions(+), 18 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-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 31f6e94482aa4be585e75ccd0d86af55b5ce9d47 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:38:06 +0100 Subject: [PATCH 22/43] 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 3b3b6d4cc11abd9fb19649d9bc4a38a75a0397a8 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:38:23 +0100 Subject: [PATCH 23/43] 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 03bfba1a4f949df5150b9b8ef1fc7fb107fd7838 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 18 Dec 2024 16:39:49 +0100 Subject: [PATCH 24/43] chore(Root): themes imports --- themes/carfactory.scss | 1 + themes/epreselec.scss | 1 + themes/infojobs.scss | 1 + themes/motor.scss | 1 + 4 files changed, 4 insertions(+) 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/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 1f26d2c9fc34d63fe822afcfdf14cc147d347f44 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 19 Dec 2024 10:38:34 +0100 Subject: [PATCH 25/43] 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 905e4ce0f03e6df85a3fd868f2d88c9391a6d134 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 19 Dec 2024 10:40:44 +0100 Subject: [PATCH 26/43] fix(utils/sui-theme): opacity native functionality --- utils/sui-theme/src/utils/_opacity.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/utils/sui-theme/src/utils/_opacity.scss b/utils/sui-theme/src/utils/_opacity.scss index 14d88e5d64..ef4ed88cbb 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, $color #{$value + '%'}, transparent); + background-color: color-mix(in srgb, #{$value '%'}, transparent); } } } @@ -19,7 +19,7 @@ position: relative; &::before { - background-color: color-mix(in srgb, $color #{$value + '%'}, transparent); + background-color: color-mix(in srgb, #{$value '%'}, transparent); content: ''; display: block; height: 100%; From e5a9d626e8fcd47357f584d6237c481e4dcce015 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 20 Dec 2024 10:05:55 +0100 Subject: [PATCH 27/43] 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 b11f5e7abc13b7505887444b8daf15f8fd34a84d Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 20 Dec 2024 10:12:10 +0100 Subject: [PATCH 28/43] 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 580651a15413b2cc38dc3a65ba7f6ec737ec823b Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 20 Dec 2024 15:03:40 +0100 Subject: [PATCH 29/43] 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 f31eb224ec43ac37f9367a21aedc3d26037edaf8 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 15:53:23 +0100 Subject: [PATCH 30/43] 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 3200b47f960f789347bc1fb3b9bccbad1bfae3aa Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 16:21:38 +0100 Subject: [PATCH 31/43] chore(Root): modify themes+ --- themes/carfactory.scss | 3 ++- themes/epreselec.scss | 3 ++- themes/infojobs.scss | 3 ++- themes/motor.scss | 3 ++- 4 files changed, 8 insertions(+), 4 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/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 435bc1354deb76ed279a92aa6dfad32a42e13c5c Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 16:23:39 +0100 Subject: [PATCH 32/43] feat(utils/sui-theme): use native mix --- utils/sui-theme/milanuncios.tokens.config.ts | 290 +++++++++++++++++++ utils/sui-theme/src/utils/_opacity.scss | 4 +- 2 files changed, 292 insertions(+), 2 deletions(-) create mode 100644 utils/sui-theme/milanuncios.tokens.config.ts 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 dc7b57a30b79628051f6c656971549d1d43f0b6d Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 23 Dec 2024 16:25:33 +0100 Subject: [PATCH 33/43] 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 44ba19b3f7e3e222e9ddfc5892d69feb787918cd Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 09:10:10 +0100 Subject: [PATCH 34/43] 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 21785649fe..047ea54ffb 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 13a467b99a7db550ef8b1a48f3fdc88452f705b5 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 09:22:57 +0100 Subject: [PATCH 35/43] fix(Root): remove unnecesary tokens scss files --- themes/carfactory.scss | 2 -- themes/epreselec.scss | 2 -- themes/infojobs.scss | 2 -- themes/motor.scss | 2 -- 4 files changed, 8 deletions(-) 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/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 5dc4cc3c01b6f93805af4b6e8fe420a55585ebf8 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 09:30:08 +0100 Subject: [PATCH 36/43] 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 83c3b8ba5bda67a4fe96bc25b466d64e49f1ef33 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 16:20:33 +0100 Subject: [PATCH 37/43] fix(utils/sui-tokens): ts errors fixed --- 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 +- 8 files changed, 616 insertions(+), 775 deletions(-) delete mode 100644 utils/sui-theme/milanuncios.tokens.config.ts 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 4562c589fe216b5d84e6b69febdf9619082d05bb Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 2 Jan 2025 16:39:40 +0100 Subject: [PATCH 38/43] 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 90b67cf32b47b16365b44ede88a5ffddeadcbcaa Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 09:54:36 +0100 Subject: [PATCH 39/43] chore(Root): lint --- 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 +- 5 files changed, 7 insertions(+), 31 deletions(-) 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 f867676f5cef541435e8aa5e98c05afc8c5bf378 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 12:43:33 +0100 Subject: [PATCH 40/43] 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 b54d4fca3ba3e38e3a84a577c5f6d0c3216a6aa4 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 13:17:30 +0100 Subject: [PATCH 41/43] chore(Root): revert some changes --- utils/sui-theme/.gitignore | 1 - utils/sui-theme/LICENSE.md | 1 - 2 files changed, 2 deletions(-) delete mode 100644 utils/sui-theme/.gitignore 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 9abdee1789c978f170b1707a18220cd0462414f9 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 3 Jan 2025 13:21:08 +0100 Subject: [PATCH 42/43] chore(utils/sui-tokens): prepare the package for launch --- 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 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" From 07f3c6f429f4c79ff23368ac8a66e7239d7c52b0 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 7 Jan 2025 10:42:54 +0100 Subject: [PATCH 43/43] chore(Root): lock file --- package-lock.json | 516 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 507 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5e6b236706..ef391f1bb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3684,6 +3684,171 @@ "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", "dev": true }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz", + "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz", + "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz", + "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz", + "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz", + "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz", + "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz", + "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz", + "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz", + "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz", + "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz", + "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@esbuild/linux-loong64": { "version": "0.15.5", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.5.tgz", @@ -3700,6 +3865,186 @@ "node": ">=12" } }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz", + "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==", + "cpu": [ + "mips64el" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz", + "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz", + "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==", + "cpu": [ + "riscv64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz", + "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==", + "cpu": [ + "s390x" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz", + "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz", + "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz", + "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz", + "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz", + "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz", + "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz", + "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz", + "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -5583,6 +5928,10 @@ "resolved": "utils/sui-theme", "link": true }, + "node_modules/@s-ui/tokens": { + "resolved": "utils/sui-tokens", + "link": true + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -5991,6 +6340,11 @@ "@types/chai": "*" } }, + "node_modules/@types/chroma-js": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.5.tgz", + "integrity": "sha512-6ISjhzJViaPCy2q2e6PgK+8HcHQDQ0V2LDiKmYAh+jJlLqDa6HbwDh0wOevHY0kHHUx0iZwjSRbVD47WOUx5EQ==" + }, "node_modules/@types/classnames": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.5.tgz", @@ -6920,7 +7274,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -7980,7 +8333,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -7992,6 +8344,11 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/change-case": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz", + "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==" + }, "node_modules/check-error": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz", @@ -8028,6 +8385,11 @@ "fsevents": "~2.3.2" } }, + "node_modules/chroma-js": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz", + "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==" + }, "node_modules/chrome-trace-event": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", @@ -8185,7 +8547,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -8196,8 +8557,7 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/color-string": { "version": "1.9.1", @@ -9203,6 +9563,14 @@ "node": ">=0.10.0" } }, + "node_modules/deepmerge-ts": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-4.3.0.tgz", + "integrity": "sha512-if3ZYdkD2dClhnXR5reKtG98cwyaRT1NeugQoAPTTfsOpV9kqyeiBF9Qa5RHjemb3KzD5ulqygv6ED3t5j9eJw==", + "engines": { + "node": ">=12.4.0" + } + }, "node_modules/default-browser": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz", @@ -11877,7 +12245,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -12051,6 +12418,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-tsconfig": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz", + "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==", + "dependencies": { + "resolve-pkg-maps": "^1.0.0" + }, + "funding": { + "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" + } + }, "node_modules/git-raw-commits": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz", @@ -12392,7 +12770,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, "engines": { "node": ">=8" } @@ -18182,6 +18559,14 @@ "node": ">=8" } }, + "node_modules/resolve-pkg-maps": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz", + "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==", + "funding": { + "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" + } + }, "node_modules/retry": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", @@ -19994,7 +20379,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -20656,6 +21040,77 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true }, + "node_modules/tsx": { + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz", + "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==", + "dependencies": { + "esbuild": "~0.23.0", + "get-tsconfig": "^4.7.5" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-loong64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz", + "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==", + "cpu": [ + "loong64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/esbuild": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", + "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.23.1", + "@esbuild/android-arm": "0.23.1", + "@esbuild/android-arm64": "0.23.1", + "@esbuild/android-x64": "0.23.1", + "@esbuild/darwin-arm64": "0.23.1", + "@esbuild/darwin-x64": "0.23.1", + "@esbuild/freebsd-arm64": "0.23.1", + "@esbuild/freebsd-x64": "0.23.1", + "@esbuild/linux-arm": "0.23.1", + "@esbuild/linux-arm64": "0.23.1", + "@esbuild/linux-ia32": "0.23.1", + "@esbuild/linux-loong64": "0.23.1", + "@esbuild/linux-mips64el": "0.23.1", + "@esbuild/linux-ppc64": "0.23.1", + "@esbuild/linux-riscv64": "0.23.1", + "@esbuild/linux-s390x": "0.23.1", + "@esbuild/linux-x64": "0.23.1", + "@esbuild/netbsd-x64": "0.23.1", + "@esbuild/openbsd-arm64": "0.23.1", + "@esbuild/openbsd-x64": "0.23.1", + "@esbuild/sunos-x64": "0.23.1", + "@esbuild/win32-arm64": "0.23.1", + "@esbuild/win32-ia32": "0.23.1", + "@esbuild/win32-x64": "0.23.1" + } + }, "node_modules/tty-browserify": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz", @@ -21904,6 +22359,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, "utils/sui-component-dependencies": { "name": "@s-ui/component-dependencies", "version": "1.9.0", @@ -21915,8 +22378,43 @@ }, "utils/sui-theme": { "name": "@s-ui/theme", - "version": "8.127.0", + "version": "8.128.0", "license": "MIT" + }, + "utils/sui-tokens": { + "name": "@s-ui/tokens", + "version": "0.0.1", + "license": "MIT", + "dependencies": { + "@types/chroma-js": "2.4.5", + "chalk": "4.1.2", + "change-case": "5.4.4", + "chroma-js": "2.6.0", + "commander": "8.3.0", + "deepmerge-ts": "^4.0.0", + "tsx": "4.19.2", + "typescript": "4.9.5", + "zod": "3.23.8" + }, + "bin": { + "tokens": "bin/tokens.mjs", + "tokens-scss": "bin/tokens-scss.mjs" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "utils/sui-tokens/node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } } } }