From 7f92136939e3c5824ae6af8e5fa3a1c34f7d61e8 Mon Sep 17 00:00:00 2001 From: Anselm Marie Date: Sun, 15 Sep 2024 22:30:25 -0400 Subject: [PATCH] ds tokens library created to convert figma design tokens to web/app variables --- libs/ds-tokens/.eslintrc.json | 25 ++ libs/ds-tokens/project.json | 21 ++ .../src}/imported/design-tokens.tokens.json | 144 ++++----- libs/ds-tokens/style-dictionary.config.ts | 215 +++++++++++++ libs/ds-tokens/tsconfig.json | 10 + libs/ds-tokens/tsconfig.lib.json | 10 + libs/ui/src/index.ts | 1 - .../ui/src/lib-base/styles/css/_variables.css | 70 +++++ libs/ui/src/lib-base/styles/css/global.css | 102 +------ libs/ui/src/lib-base/styles/ts/variables.ts | 68 +++++ .../src/lib-base/ui/button/button.module.css | 4 +- libs/ui/src/lib-base/ui/card/card.module.css | 6 +- .../container.layout.module.css | 6 +- .../ui/src/lib-base/ui/input/input.module.css | 2 +- .../ui/src/lib-base/ui/modal/modal.module.css | 4 +- .../src/lib-base/ui/switch/switch.module.css | 6 +- .../ui/tag/tag.item/tag.item.module.css | 4 +- .../ui/tag/tag.wrapper/tag.wrapper.module.css | 2 +- package-lock.json | 287 ++++++++++++++++++ package.json | 2 + 20 files changed, 800 insertions(+), 189 deletions(-) create mode 100644 libs/ds-tokens/.eslintrc.json create mode 100644 libs/ds-tokens/project.json rename libs/{ui/src/lib-base/themes => ds-tokens/src}/imported/design-tokens.tokens.json (94%) create mode 100644 libs/ds-tokens/style-dictionary.config.ts create mode 100644 libs/ds-tokens/tsconfig.json create mode 100644 libs/ds-tokens/tsconfig.lib.json create mode 100644 libs/ui/src/lib-base/styles/css/_variables.css create mode 100644 libs/ui/src/lib-base/styles/ts/variables.ts diff --git a/libs/ds-tokens/.eslintrc.json b/libs/ds-tokens/.eslintrc.json new file mode 100644 index 0000000..adbe7ae --- /dev/null +++ b/libs/ds-tokens/.eslintrc.json @@ -0,0 +1,25 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "@nx/dependency-checks": "error" + } + } + ] +} diff --git a/libs/ds-tokens/project.json b/libs/ds-tokens/project.json new file mode 100644 index 0000000..1ef2638 --- /dev/null +++ b/libs/ds-tokens/project.json @@ -0,0 +1,21 @@ +{ + "name": "ds-tokens", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "libs/ds-tokens/src", + "tags": [], + "targets": { + "build": { + "executor": "@nxkit/style-dictionary:build", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/ds-tokens", + "styleDictionaryConfig": "libs/ds-tokens/style-dictionary.config.ts", + "tsConfig": "libs/ds-tokens/tsconfig.json" + } + }, + "lint": { + "command": "eslint libs/ds-tokens/**/*.{js,ts} libs/ds-tokens/package.json" + } + } +} diff --git a/libs/ui/src/lib-base/themes/imported/design-tokens.tokens.json b/libs/ds-tokens/src/imported/design-tokens.tokens.json similarity index 94% rename from libs/ui/src/lib-base/themes/imported/design-tokens.tokens.json rename to libs/ds-tokens/src/imported/design-tokens.tokens.json index f33927f..a993605 100644 --- a/libs/ui/src/lib-base/themes/imported/design-tokens.tokens.json +++ b/libs/ds-tokens/src/imported/design-tokens.tokens.json @@ -1,7 +1,7 @@ { "theme": { - "greyscale": { - "color-white": { + "netural": { + "100": { "type": "color", "value": "#ffffffff", "blendMode": "normal", @@ -17,7 +17,7 @@ } } }, - "color-grey-200": { + "200": { "type": "color", "value": "#f2f2f2ff", "blendMode": "normal", @@ -33,7 +33,7 @@ } } }, - "color-grey-400": { + "400": { "type": "color", "value": "#d5d5d5ff", "blendMode": "normal", @@ -49,7 +49,7 @@ } } }, - "color-grey-600": { + "600": { "type": "color", "value": "#707274ff", "blendMode": "normal", @@ -65,7 +65,7 @@ } } }, - "color-grey-800": { + "800": { "type": "color", "value": "#434343ff", "blendMode": "normal", @@ -81,7 +81,7 @@ } } }, - "color-black": { + "900": { "type": "color", "value": "#212121ff", "blendMode": "normal", @@ -97,7 +97,7 @@ } } }, - "color-white-dark": { + "100-dark": { "type": "color", "value": "#424242ff", "blendMode": "normal", @@ -113,7 +113,7 @@ } } }, - "color-grey-200-dark": { + "200-dark": { "type": "color", "value": "#8c8c8cff", "blendMode": "normal", @@ -129,7 +129,7 @@ } } }, - "color-grey-400-dark": { + "400-dark": { "type": "color", "value": "#707274ff", "blendMode": "normal", @@ -145,7 +145,7 @@ } } }, - "color-grey-600-dark": { + "600-dark": { "type": "color", "value": "#434343ff", "blendMode": "normal", @@ -161,7 +161,7 @@ } } }, - "color-black-loading": { + "900-loading": { "type": "color", "value": "#21212180", "blendMode": "normal", @@ -179,7 +179,7 @@ } }, "blue": { - "blue-100": { + "100": { "type": "color", "value": "#f5f8fdff", "blendMode": "normal", @@ -195,7 +195,7 @@ } } }, - "blue-200": { + "200": { "type": "color", "value": "#adc6f5ff", "blendMode": "normal", @@ -211,7 +211,7 @@ } } }, - "blue-400": { + "400": { "type": "color", "value": "#6089d6ff", "blendMode": "normal", @@ -227,7 +227,7 @@ } } }, - "blue-600": { + "600": { "type": "color", "value": "#365facff", "blendMode": "normal", @@ -243,7 +243,7 @@ } } }, - "blue-800": { + "800": { "type": "color", "value": "#26457fff", "blendMode": "normal", @@ -259,7 +259,7 @@ } } }, - "blue-900": { + "900": { "type": "color", "value": "#152f61ff", "blendMode": "normal", @@ -275,7 +275,7 @@ } } }, - "blue-600-dark": { + "600-dark": { "type": "color", "value": "#ffffffff", "blendMode": "normal", @@ -291,7 +291,7 @@ } } }, - "blue-600-dark-button": { + "600-dark-button": { "type": "color", "value": "#26457fff", "blendMode": "normal", @@ -307,7 +307,7 @@ } } }, - "blue-800-dark-button": { + "800-dark-button": { "type": "color", "value": "#152f61ff", "blendMode": "normal", @@ -323,7 +323,7 @@ } } }, - "blue-100-dark": { + "100-dark": { "type": "color", "value": "#696c72ff", "blendMode": "normal", @@ -341,7 +341,7 @@ } }, "yellow": { - "yellow-100": { + "100": { "type": "color", "value": "#fff5ccff", "blendMode": "normal", @@ -357,7 +357,7 @@ } } }, - "yellow-200": { + "200": { "type": "color", "value": "#ffe991ff", "blendMode": "normal", @@ -373,7 +373,7 @@ } } }, - "yellow-400": { + "400": { "type": "color", "value": "#ffdb4bff", "blendMode": "normal", @@ -389,7 +389,7 @@ } } }, - "yellow-600": { + "600": { "type": "color", "value": "#ffcc01ff", "blendMode": "normal", @@ -405,7 +405,7 @@ } } }, - "yellow-800": { + "800": { "type": "color", "value": "#d2a800ff", "blendMode": "normal", @@ -421,7 +421,7 @@ } } }, - "yellow-900": { + "900": { "type": "color", "value": "#a48300ff", "blendMode": "normal", @@ -439,7 +439,7 @@ } }, "green": { - "green-100": { + "100": { "type": "color", "value": "#b1e6bbff", "blendMode": "normal", @@ -455,7 +455,7 @@ } } }, - "green-200": { + "200": { "type": "color", "value": "#69b076ff", "blendMode": "normal", @@ -471,7 +471,7 @@ } } }, - "green-400": { + "400": { "type": "color", "value": "#579d63ff", "blendMode": "normal", @@ -487,7 +487,7 @@ } } }, - "green-600": { + "600": { "type": "color", "value": "#4a8554ff", "blendMode": "normal", @@ -503,7 +503,7 @@ } } }, - "green-800": { + "800": { "type": "color", "value": "#295630ff", "blendMode": "normal", @@ -519,7 +519,7 @@ } } }, - "green-900": { + "900": { "type": "color", "value": "#1a3c1fff", "blendMode": "normal", @@ -535,7 +535,7 @@ } } }, - "green-200-dark": { + "200-dark": { "type": "color", "value": "#579d63ff", "blendMode": "normal", @@ -551,7 +551,7 @@ } } }, - "green-400-dark": { + "400-dark": { "type": "color", "value": "#4a8554ff", "blendMode": "normal", @@ -567,7 +567,7 @@ } } }, - "green-600-dark": { + "600-dark": { "type": "color", "value": "#295630ff", "blendMode": "normal", @@ -583,7 +583,7 @@ } } }, - "green-800-dark": { + "800-dark": { "type": "color", "value": "#1a3c1fff", "blendMode": "normal", @@ -601,7 +601,7 @@ } }, "red": { - "red": { + "100": { "type": "color", "value": "#ffb6b6ff", "blendMode": "normal", @@ -617,7 +617,7 @@ } } }, - "red-200": { + "200": { "type": "color", "value": "#fb9090ff", "blendMode": "normal", @@ -633,7 +633,7 @@ } } }, - "red-400": { + "400": { "type": "color", "value": "#f76767ff", "blendMode": "normal", @@ -649,7 +649,7 @@ } } }, - "red-600": { + "600": { "type": "color", "value": "#d63535ff", "blendMode": "normal", @@ -665,7 +665,7 @@ } } }, - "red-800": { + "800": { "type": "color", "value": "#ab0e0eff", "blendMode": "normal", @@ -681,7 +681,7 @@ } } }, - "red-900": { + "900": { "type": "color", "value": "#7a0a0aff", "blendMode": "normal", @@ -699,9 +699,9 @@ } }, "font": { - "font-24": { + "10": { "type": "dimension", - "value": 24, + "value": 10, "extensions": { "org.lukasoppermann.figmaDesignTokens": { "mode": "Mode 1", @@ -709,14 +709,14 @@ "scopes": [ "ALL_SCOPES" ], - "variableId": "VariableID:118:418", + "variableId": "VariableID:118:423", "exportKey": "variables" } } }, - "font-18": { + "13": { "type": "dimension", - "value": 18, + "value": 13, "extensions": { "org.lukasoppermann.figmaDesignTokens": { "mode": "Mode 1", @@ -724,12 +724,12 @@ "scopes": [ "ALL_SCOPES" ], - "variableId": "VariableID:118:419", + "variableId": "VariableID:118:421", "exportKey": "variables" } } }, - "font-16": { + "16": { "type": "dimension", "value": 16, "extensions": { @@ -744,9 +744,9 @@ } } }, - "font-13": { + "18": { "type": "dimension", - "value": 13, + "value": 18, "extensions": { "org.lukasoppermann.figmaDesignTokens": { "mode": "Mode 1", @@ -754,14 +754,14 @@ "scopes": [ "ALL_SCOPES" ], - "variableId": "VariableID:118:421", + "variableId": "VariableID:118:419", "exportKey": "variables" } } }, - "font-10": { + "24": { "type": "dimension", - "value": 10, + "value": 24, "extensions": { "org.lukasoppermann.figmaDesignTokens": { "mode": "Mode 1", @@ -769,14 +769,14 @@ "scopes": [ "ALL_SCOPES" ], - "variableId": "VariableID:118:423", + "variableId": "VariableID:118:418", "exportKey": "variables" } } } }, "radius": { - "radius-8": { + "8": { "type": "dimension", "value": 8, "extensions": { @@ -791,7 +791,7 @@ } } }, - "radius-16": { + "16": { "type": "dimension", "value": 16, "extensions": { @@ -806,7 +806,7 @@ } } }, - "radius-pill": { + "pill": { "type": "dimension", "value": 100, "extensions": { @@ -821,7 +821,7 @@ } } }, - "radius-circle": { + "circle": { "type": "dimension", "value": 100, "extensions": { @@ -838,7 +838,7 @@ } }, "breakpoints": { - "breakpoint-lg": { + "lg": { "type": "dimension", "value": 1280, "extensions": { @@ -853,7 +853,7 @@ } } }, - "breakpoint-md": { + "md": { "type": "dimension", "value": 736, "extensions": { @@ -868,7 +868,7 @@ } } }, - "breakpoint-sm": { + "sm": { "type": "dimension", "value": 375, "extensions": { @@ -885,7 +885,7 @@ } }, "spacing": { - "spacing-2": { + "2": { "type": "dimension", "value": 2, "extensions": { @@ -900,7 +900,7 @@ } } }, - "spacing-5": { + "5": { "type": "dimension", "value": 5, "extensions": { @@ -915,7 +915,7 @@ } } }, - "spacing-10": { + "10": { "type": "dimension", "value": 10, "extensions": { @@ -930,7 +930,7 @@ } } }, - "spacing-15": { + "15": { "type": "dimension", "value": 15, "extensions": { @@ -945,7 +945,7 @@ } } }, - "spacing-30": { + "30": { "type": "dimension", "value": 30, "extensions": { @@ -960,7 +960,7 @@ } } }, - "spacing-35": { + "35": { "type": "dimension", "value": 35, "extensions": { @@ -975,7 +975,7 @@ } } }, - "spacing-40": { + "40": { "type": "dimension", "value": 40, "extensions": { @@ -990,7 +990,7 @@ } } }, - "spacing-45": { + "45": { "type": "dimension", "value": 45, "extensions": { diff --git a/libs/ds-tokens/style-dictionary.config.ts b/libs/ds-tokens/style-dictionary.config.ts new file mode 100644 index 0000000..32ae1d0 --- /dev/null +++ b/libs/ds-tokens/style-dictionary.config.ts @@ -0,0 +1,215 @@ +import { Config } from 'style-dictionary'; + +const config: Config | Config[] = { + source: ['src/imported/design-tokens.tokens.json'], + transform: { + 'custom/name/web': { + type: 'name', + transformer: (token) => token.path.join('-'), + }, + 'custom/name/native': { + type: 'name', + transformer: (token) => { + const path = token.path.map((string) => { + return string.includes('-') + ? string.replace(/-/g, '_').toUpperCase() + : string.toUpperCase(); + }); + return path.join('_'); + }, + }, + 'custom/dimension-to-pixel': { + type: 'value', + matcher: (prop) => { + return prop.type === 'dimension'; + }, + transformer: (prop) => { + return `${prop.value}px`; + }, + }, + }, + platforms: { + css: { + transformGroup: 'css', + transforms: ['custom/dimension-to-pixel', 'custom/name/web'], + buildPath: 'build/css/', + files: [ + { + destination: '_variables.css', + format: 'css/variables', + }, + ], + }, + + js: { + transformGroup: 'js', + transforms: ['custom/dimension-to-pixel', 'custom/name/native'], + buildPath: 'build/js/', + files: [ + { + destination: 'variables.ts', + format: 'javascript/es6', + }, + ], + }, + + // scss: { + // transformGroup: 'scss', + // buildPath: 'scss/', + // files: [ + // { + // destination: '_variables.scss', + // format: 'scss/variables', + // }, + // ], + // }, + + // android: { + // transformGroup: 'android', + // buildPath: 'android/', + // files: [ + // { + // destination: 'font_dimens.xml', + // format: 'android/fontDimens', + // }, + // { + // destination: 'colors.xml', + // format: 'android/colors', + // }, + // ], + // }, + + // compose: { + // transformGroup: 'compose', + // buildPath: 'compose/', + // files: [ + // { + // destination: 'StyleDictionaryColor.kt', + // format: 'compose/object', + // className: 'StyleDictionaryColor', + // filter: { + // attributes: { + // category: 'color', + // }, + // }, + // }, + // { + // destination: 'StyleDictionarySize.kt', + // format: 'compose/object', + // className: 'StyleDictionarySize', + // filter: { + // attributes: { + // category: 'size', + // }, + // }, + // }, + // ], + // }, + + // ios: { + // transformGroup: 'ios', + // buildPath: 'ios/', + // files: [ + // { + // destination: 'StyleDictionaryColor.h', + // format: 'ios/colors.h', + // className: 'StyleDictionaryColor', + // filter: { + // attributes: { + // category: 'color', + // }, + // }, + // }, + // { + // destination: 'StyleDictionaryColor.m', + // format: 'ios/colors.m', + // className: 'StyleDictionaryColor', + // filter: { + // attributes: { + // category: 'color', + // }, + // }, + // }, + // { + // destination: 'StyleDictionarySize.h', + // format: 'ios/static.h', + // className: 'StyleDictionarySize', + // filter: { + // attributes: { + // category: 'size', + // }, + // }, + // }, + // { + // destination: 'StyleDictionarySize.m', + // format: 'ios/static.m', + // className: 'StyleDictionarySize', + // filter: { + // attributes: { + // category: 'size', + // }, + // }, + // }, + // ], + // }, + + // 'ios-swift': { + // transformGroup: 'ios-swift', + // buildPath: 'ios-swift/', + // files: [ + // { + // destination: 'StyleDictionary+Class.swift', + // format: 'ios-swift/class.swift', + // className: 'StyleDictionaryClass', + // filter: {}, + // }, + // { + // destination: 'StyleDictionary+Enum.swift', + // format: 'ios-swift/enum.swift', + // className: 'StyleDictionaryEnum', + // filter: {}, + // }, + // { + // destination: 'StyleDictionary+Struct.swift', + // format: 'ios-swift/any.swift', + // className: 'StyleDictionaryStruct', + // filter: {}, + // options: { + // imports: 'SwiftUI', + // objectType: 'struct', + // accessControl: 'internal', + // }, + // }, + // ], + // }, + + // 'ios-swift-separate-enums': { + // transformGroup: 'ios-swift-separate', + // buildPath: 'ios-swift/', + // files: [ + // { + // destination: 'StyleDictionaryColor.swift', + // format: 'ios-swift/enum.swift', + // className: 'StyleDictionaryColor', + // filter: { + // attributes: { + // category: 'color', + // }, + // }, + // }, + // { + // destination: 'StyleDictionarySize.swift', + // format: 'ios-swift/enum.swift', + // className: 'StyleDictionarySize', + // filter: { + // attributes: { + // category: 'size', + // }, + // }, + // }, + // ], + // }, + }, +}; + +export default config; diff --git a/libs/ds-tokens/tsconfig.json b/libs/ds-tokens/tsconfig.json new file mode 100644 index 0000000..c23e61c --- /dev/null +++ b/libs/ds-tokens/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ] +} diff --git a/libs/ds-tokens/tsconfig.lib.json b/libs/ds-tokens/tsconfig.lib.json new file mode 100644 index 0000000..22ea685 --- /dev/null +++ b/libs/ds-tokens/tsconfig.lib.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "sourceMap": false, + "outDir": "../../dist/out-tsc", + "allowJs": true, + "types": ["node"] + }, + "include": ["src/**/*.ts", "src/**/*.js", "style-dictionary.config.ts"] +} diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index 72e2ce4..9305d47 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -12,7 +12,6 @@ export * from './lib-base/ui/button'; export * from './lib-base/ui/icon.poke.type'; export * from './lib-base/ui/modal'; export * from './lib-base/ui/card'; -export * from './lib-base/ui/dropdown'; export * from './lib-base/ui/hide.in.mobile'; export * from './lib-base/ui/tag'; export * from './lib-base/ui/switch'; diff --git a/libs/ui/src/lib-base/styles/css/_variables.css b/libs/ui/src/lib-base/styles/css/_variables.css new file mode 100644 index 0000000..1af22f1 --- /dev/null +++ b/libs/ui/src/lib-base/styles/css/_variables.css @@ -0,0 +1,70 @@ +/** + * Do not edit directly + * Generated on Mon, 16 Sep 2024 02:02:34 GMT + */ + +:root { + --theme-netural-100: #ffff; + --theme-netural-200: #f2f2f2ff; + --theme-netural-400: #d5d5d5ff; + --theme-netural-600: #707274ff; + --theme-netural-800: #434343ff; + --theme-netural-900: #212121ff; + --theme-netural-100-dark: #424242ff; + --theme-netural-200-dark: #8c8c8cff; + --theme-netural-400-dark: #707274ff; + --theme-netural-600-dark: #434343ff; + --theme-netural-900-loading: #21212180; + --theme-blue-100: #f5f8fdff; + --theme-blue-200: #adc6f5ff; + --theme-blue-400: #6089d6ff; + --theme-blue-600: #365facff; + --theme-blue-800: #26457fff; + --theme-blue-900: #152f61ff; + --theme-blue-600-dark: #ffff; + --theme-blue-600-dark-button: #26457fff; + --theme-blue-800-dark-button: #152f61ff; + --theme-blue-100-dark: #696c72ff; + --theme-yellow-100: #fff5ccff; + --theme-yellow-200: #ffe991ff; + --theme-yellow-400: #ffdb4bff; + --theme-yellow-600: #ffcc01ff; + --theme-yellow-800: #d2a800ff; + --theme-yellow-900: #a48300ff; + --theme-green-100: #b1e6bbff; + --theme-green-200: #69b076ff; + --theme-green-400: #579d63ff; + --theme-green-600: #4a8554ff; + --theme-green-800: #295630ff; + --theme-green-900: #1a3c1fff; + --theme-green-200-dark: #579d63ff; + --theme-green-400-dark: #4a8554ff; + --theme-green-600-dark: #295630ff; + --theme-green-800-dark: #1a3c1fff; + --theme-red-100: #ffb6b6ff; + --theme-red-200: #fb9090ff; + --theme-red-400: #f76767ff; + --theme-red-600: #d63535ff; + --theme-red-800: #ab0e0eff; + --theme-red-900: #7a0a0aff; + --theme-font-10: 10px; + --theme-font-13: 13px; + --theme-font-16: 16px; + --theme-font-18: 18px; + --theme-font-24: 24px; + --theme-radius-8: 8px; + --theme-radius-16: 16px; + --theme-radius-pill: 100px; + --theme-radius-circle: 100px; + --theme-breakpoints-lg: 1280px; + --theme-breakpoints-md: 736px; + --theme-breakpoints-sm: 375px; + --theme-spacing-2: 2px; + --theme-spacing-5: 5px; + --theme-spacing-10: 10px; + --theme-spacing-15: 15px; + --theme-spacing-30: 30px; + --theme-spacing-35: 35px; + --theme-spacing-40: 40px; + --theme-spacing-45: 45px; +} diff --git a/libs/ui/src/lib-base/styles/css/global.css b/libs/ui/src/lib-base/styles/css/global.css index bef3fc1..5e3581f 100644 --- a/libs/ui/src/lib-base/styles/css/global.css +++ b/libs/ui/src/lib-base/styles/css/global.css @@ -1,101 +1,7 @@ -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -/* Prevent font size inflation */ -html, -body { - text-size-adjust: none; - text-size-adjust: none; - text-size-adjust: none; - margin: 0; -} - -/* Remove default margin in favour of better control in authored CSS */ -body, -h1, -h2, -h3, -h4, -p, -figure, -blockquote, -dl, -dd { - margin-block-end: 0; - margin-block-start: 0; -} - -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul[role='list'], -ol[role='list'] { - list-style: none; -} - -/* Set core body defaults */ -body { - min-height: 100vh; - line-height: 1.5; -} - -/* Set shorter line heights on headings and interactive elements */ -h1, -h2, -h3, -h4, -button, -input, -label { - line-height: 1.1; -} - -/* Balance text wrapping on headings */ -h1, -h2, -h3, -h4, -h5, -h6 { - text-wrap: balance; - margin: 0; -} - -/* A elements that don't have a class get default styles */ -a:not([class]) { - text-decoration-skip-ink: auto; - color: currentcolor; -} - -/* Make images easier to work with */ -img, -picture { - max-width: 100%; - display: block; -} - -/* Inherit fonts for inputs and buttons */ -input, -button, -textarea, -select { - font-family: inherit; - font-size: inherit; -} - -/* Make sure textareas without a rows attribute are not tiny */ -textarea:not([rows]) { - min-height: 10em; -} +@import url('reset.css'); +@import url('_variables.css'); -/* Anything that has been anchored to should have extra scroll margin */ -:target { - scroll-margin-block: 5ex; -} - -:root, +/* :root, html[data-theme='light'] { --background-color: #fff; --text-color: #121416d8; @@ -106,4 +12,4 @@ html[data-theme='dark'] { --background-color: #212a2e; --text-color: #f7f8f8; --link-color: #828fff; -} +} */ diff --git a/libs/ui/src/lib-base/styles/ts/variables.ts b/libs/ui/src/lib-base/styles/ts/variables.ts new file mode 100644 index 0000000..3b4c567 --- /dev/null +++ b/libs/ui/src/lib-base/styles/ts/variables.ts @@ -0,0 +1,68 @@ +/** + * Do not edit directly + * Generated on Mon, 16 Sep 2024 02:09:33 GMT + */ + +export const THEME_NETURAL_100 = '#ffffffff'; +export const THEME_NETURAL_200 = '#f2f2f2ff'; +export const THEME_NETURAL_400 = '#d5d5d5ff'; +export const THEME_NETURAL_600 = '#707274ff'; +export const THEME_NETURAL_800 = '#434343ff'; +export const THEME_NETURAL_900 = '#212121ff'; +export const THEME_NETURAL_100_DARK = '#424242ff'; +export const THEME_NETURAL_200_DARK = '#8c8c8cff'; +export const THEME_NETURAL_400_DARK = '#707274ff'; +export const THEME_NETURAL_600_DARK = '#434343ff'; +export const THEME_NETURAL_900_LOADING = '#21212180'; +export const THEME_BLUE_100 = '#f5f8fdff'; +export const THEME_BLUE_200 = '#adc6f5ff'; +export const THEME_BLUE_400 = '#6089d6ff'; +export const THEME_BLUE_600 = '#365facff'; +export const THEME_BLUE_800 = '#26457fff'; +export const THEME_BLUE_900 = '#152f61ff'; +export const THEME_BLUE_600_DARK = '#ffffffff'; +export const THEME_BLUE_600_DARK_BUTTON = '#26457fff'; +export const THEME_BLUE_800_DARK_BUTTON = '#152f61ff'; +export const THEME_BLUE_100_DARK = '#696c72ff'; +export const THEME_YELLOW_100 = '#fff5ccff'; +export const THEME_YELLOW_200 = '#ffe991ff'; +export const THEME_YELLOW_400 = '#ffdb4bff'; +export const THEME_YELLOW_600 = '#ffcc01ff'; +export const THEME_YELLOW_800 = '#d2a800ff'; +export const THEME_YELLOW_900 = '#a48300ff'; +export const THEME_GREEN_100 = '#b1e6bbff'; +export const THEME_GREEN_200 = '#69b076ff'; +export const THEME_GREEN_400 = '#579d63ff'; +export const THEME_GREEN_600 = '#4a8554ff'; +export const THEME_GREEN_800 = '#295630ff'; +export const THEME_GREEN_900 = '#1a3c1fff'; +export const THEME_GREEN_200_DARK = '#579d63ff'; +export const THEME_GREEN_400_DARK = '#4a8554ff'; +export const THEME_GREEN_600_DARK = '#295630ff'; +export const THEME_GREEN_800_DARK = '#1a3c1fff'; +export const THEME_RED_100 = '#ffb6b6ff'; +export const THEME_RED_200 = '#fb9090ff'; +export const THEME_RED_400 = '#f76767ff'; +export const THEME_RED_600 = '#d63535ff'; +export const THEME_RED_800 = '#ab0e0eff'; +export const THEME_RED_900 = '#7a0a0aff'; +export const THEME_FONT_10 = '10px'; +export const THEME_FONT_13 = '13px'; +export const THEME_FONT_16 = '16px'; +export const THEME_FONT_18 = '18px'; +export const THEME_FONT_24 = '24px'; +export const THEME_RADIUS_8 = '8px'; +export const THEME_RADIUS_16 = '16px'; +export const THEME_RADIUS_PILL = '100px'; +export const THEME_RADIUS_CIRCLE = '100px'; +export const THEME_BREAKPOINTS_LG = '1280px'; +export const THEME_BREAKPOINTS_MD = '736px'; +export const THEME_BREAKPOINTS_SM = '375px'; +export const THEME_SPACING_2 = '2px'; +export const THEME_SPACING_5 = '5px'; +export const THEME_SPACING_10 = '10px'; +export const THEME_SPACING_15 = '15px'; +export const THEME_SPACING_30 = '30px'; +export const THEME_SPACING_35 = '35px'; +export const THEME_SPACING_40 = '40px'; +export const THEME_SPACING_45 = '45px'; diff --git a/libs/ui/src/lib-base/ui/button/button.module.css b/libs/ui/src/lib-base/ui/button/button.module.css index 29f5c1d..db61047 100644 --- a/libs/ui/src/lib-base/ui/button/button.module.css +++ b/libs/ui/src/lib-base/ui/button/button.module.css @@ -1,9 +1,9 @@ .button { - border-radius: 30px; + border-radius: var(--theme-radius-pill); cursor: pointer; background: none; border: 0; - padding: 10px 15px; + padding: var(--theme-spacing-10) var(--theme-spacing-15); text-align: center; } diff --git a/libs/ui/src/lib-base/ui/card/card.module.css b/libs/ui/src/lib-base/ui/card/card.module.css index 9c4bb30..4627e4e 100644 --- a/libs/ui/src/lib-base/ui/card/card.module.css +++ b/libs/ui/src/lib-base/ui/card/card.module.css @@ -1,6 +1,4 @@ .card { - /* background: white; */ - /* height: 100%; */ - /* width: 100%; */ - border-radius: 8px; + background: var(--theme-netural-100); + border-radius: var(--theme-radius-8); } diff --git a/libs/ui/src/lib-base/ui/container.layout/container.layout.module.css b/libs/ui/src/lib-base/ui/container.layout/container.layout.module.css index 1804a5e..b298f39 100644 --- a/libs/ui/src/lib-base/ui/container.layout/container.layout.module.css +++ b/libs/ui/src/lib-base/ui/container.layout/container.layout.module.css @@ -1,7 +1,7 @@ .container { - max-width: 1300px; + max-width: var(--theme-breakpoints-lg); margin-right: auto; margin-left: auto; - padding-left: 15px; - padding-right: 15px; + padding-left: var(--theme-spacing-15); + padding-right: var(--theme-spacing-15); } diff --git a/libs/ui/src/lib-base/ui/input/input.module.css b/libs/ui/src/lib-base/ui/input/input.module.css index 7013085..ba0e4dd 100644 --- a/libs/ui/src/lib-base/ui/input/input.module.css +++ b/libs/ui/src/lib-base/ui/input/input.module.css @@ -10,5 +10,5 @@ } .icon { - margin-left: 10px; + margin-left: var(--theme-spacing-10); } diff --git a/libs/ui/src/lib-base/ui/modal/modal.module.css b/libs/ui/src/lib-base/ui/modal/modal.module.css index 9a40710..d7b25af 100644 --- a/libs/ui/src/lib-base/ui/modal/modal.module.css +++ b/libs/ui/src/lib-base/ui/modal/modal.module.css @@ -33,7 +33,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 15px; + padding: var(--theme-spacing-15); } .absoluteDropdownHeadline { @@ -41,7 +41,7 @@ justify-content: space-between; align-items: center; position: absolute; - padding: 15px; + padding: var(--theme-spacing-15); top: 0; left: 0; width: 100%; diff --git a/libs/ui/src/lib-base/ui/switch/switch.module.css b/libs/ui/src/lib-base/ui/switch/switch.module.css index 2ef3200..78d94d7 100644 --- a/libs/ui/src/lib-base/ui/switch/switch.module.css +++ b/libs/ui/src/lib-base/ui/switch/switch.module.css @@ -14,11 +14,11 @@ } .iconLeft { - margin-left: 6px; + margin-left: var(--theme-spacing-5); } .iconRight { - margin-right: 3px; + margin-right: var(--theme-spacing-2); } .iconCircle { @@ -28,7 +28,7 @@ height: 36px; background-color: blue; z-index: 0; - border-radius: 100px; + border-radius: var(--theme-radius-circle); transition: left 100ms ease-in-out; } diff --git a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css index f81eeae..c8a5b30 100644 --- a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css +++ b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css @@ -1,6 +1,6 @@ .tag { - border-radius: 100px; - padding: 10px 15px; + border-radius: var(--theme-radius-circle); + padding: var(--theme-spacing-10) var(--theme-spacing-15); } .bugThemeBg { diff --git a/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.css b/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.css index a631626..06e0d46 100644 --- a/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.css +++ b/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.css @@ -1,6 +1,6 @@ .tagWrapper { display: flex; - gap: 15px; + gap: var(--theme-spacing-15); } .leftAlign { diff --git a/package-lock.json b/package-lock.json index 908e7b5..9d9bef2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,6 +70,7 @@ "@nx/web": "19.5.6", "@nx/webpack": "19.5.6", "@nx/workspace": "19.5.6", + "@nxkit/style-dictionary": "^5.0.0", "@playwright/test": "^1.36.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7", "@rspack/cli": "^0.7.2", @@ -128,6 +129,7 @@ "react-refresh": "~0.14.0", "react-test-renderer": "18.2.0", "storybook": "7.6.20", + "style-dictionary": "^3.7.1", "style-loader": "^4.0.0", "ts-jest": "^29.1.0", "ts-node": "10.9.1", @@ -6716,6 +6718,83 @@ "yargs-parser": "21.1.1" } }, + "node_modules/@nxkit/style-dictionary": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@nxkit/style-dictionary/-/style-dictionary-5.0.0.tgz", + "integrity": "sha512-bBbPcE10TwngwSF5ItSmoJPOMrmVKgbwC0sI2eEkR7zt/pyrPzrB58AQ9Zan5pSr/sGrUFEHoHdv8Hi9qTq5tA==", + "dev": true, + "dependencies": { + "@nx/devkit": "17.3.1", + "@phenomnomnominal/tsquery": "^5.0.0", + "fs-extra": "^11.1.0", + "ts-node": "10.9.1", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "style-dictionary": "^3.7.1" + } + }, + "node_modules/@nxkit/style-dictionary/node_modules/@nrwl/devkit": { + "version": "17.3.1", + "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-17.3.1.tgz", + "integrity": "sha512-MtHlsdErSz0Z1j8j+qAKUafWzMs3XcHgXmJomjUzect1jS/HtmbcDvdMv9GwVtk+67JD+7ca2CWjk2atv6dZdw==", + "dev": true, + "dependencies": { + "@nx/devkit": "17.3.1" + } + }, + "node_modules/@nxkit/style-dictionary/node_modules/@nx/devkit": { + "version": "17.3.1", + "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-17.3.1.tgz", + "integrity": "sha512-E44feT7x/pGTzMWSndjTAoBXvZYEdy2SU99O14LdW7atUK4gv0glKUfyq6nNFULrs6r173WKfJgfmJDL3l78lg==", + "dev": true, + "dependencies": { + "@nrwl/devkit": "17.3.1", + "ejs": "^3.1.7", + "enquirer": "~2.3.6", + "ignore": "^5.0.4", + "semver": "7.5.3", + "tmp": "~0.2.1", + "tslib": "^2.3.0", + "yargs-parser": "21.1.1" + }, + "peerDependencies": { + "nx": ">= 16 <= 18" + } + }, + "node_modules/@nxkit/style-dictionary/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@nxkit/style-dictionary/node_modules/semver": { + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", + "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@nxkit/style-dictionary/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/@phenomnomnominal/tsquery": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@phenomnomnominal/tsquery/-/tsquery-5.0.1.tgz", @@ -18137,6 +18216,16 @@ "node": ">=6" } }, + "node_modules/camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, + "dependencies": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, "node_modules/camelcase": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", @@ -18197,6 +18286,17 @@ } ] }, + "node_modules/capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/chai": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/chai/-/chai-4.5.0.tgz", @@ -18239,6 +18339,26 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "dependencies": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -18846,6 +18966,17 @@ "node": "^14.18.0 || >=16.10.0" } }, + "node_modules/constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -23878,6 +24009,16 @@ "he": "bin/he" } }, + "node_modules/header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "dependencies": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/hermes-estree": { "version": "0.20.1", "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz", @@ -30133,6 +30274,16 @@ "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==", "dev": true }, + "node_modules/param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -30215,6 +30366,16 @@ "node": ">= 0.8" } }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/password-prompt": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/password-prompt/-/password-prompt-1.1.3.tgz", @@ -30224,6 +30385,16 @@ "cross-spawn": "^7.0.3" } }, + "node_modules/path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-dirname": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", @@ -33047,6 +33218,17 @@ "node": ">= 0.8" } }, + "node_modules/sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/serialize-error": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz", @@ -34143,6 +34325,87 @@ "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz", "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==" }, + "node_modules/style-dictionary": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.9.2.tgz", + "integrity": "sha512-M2pcQ6hyRtqHOh+NyT6T05R3pD/gwNpuhREBKvxC1En0vyywx+9Wy9nXWT1SZ9ePzv1vAo65ItnpA16tT9ZUCg==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^8.3.0", + "fs-extra": "^10.0.0", + "glob": "^10.3.10", + "json5": "^2.2.2", + "jsonc-parser": "^3.0.0", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "bin": { + "style-dictionary": "bin/style-dictionary" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/style-dictionary/node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "dev": true, + "engines": { + "node": ">= 12" + } + }, + "node_modules/style-dictionary/node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/style-dictionary/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/style-dictionary/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/style-loader": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz", @@ -35236,6 +35499,12 @@ "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", "dev": true }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==", + "dev": true + }, "node_modules/tinypool": { "version": "0.8.4", "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz", @@ -36078,6 +36347,24 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 7625330..03c2925 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "@nx/web": "19.5.6", "@nx/webpack": "19.5.6", "@nx/workspace": "19.5.6", + "@nxkit/style-dictionary": "^5.0.0", "@playwright/test": "^1.36.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7", "@rspack/cli": "^0.7.2", @@ -141,6 +142,7 @@ "react-refresh": "~0.14.0", "react-test-renderer": "18.2.0", "storybook": "7.6.20", + "style-dictionary": "^3.7.1", "style-loader": "^4.0.0", "ts-jest": "^29.1.0", "ts-node": "10.9.1",