@dezkareid/design-tokens 1.4.1 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/AGENTS.md +145 -96
  2. package/dist/css/variables.css +30 -0
  3. package/dist/js/tokens.d.ts +24 -0
  4. package/dist/js/tokens.js +24 -0
  5. package/dist/js/tokens.mjs +24 -0
  6. package/dist/scss/_variables.scss +24 -0
  7. package/package.json +3 -2
  8. package/scripts/export-catalog.js +1 -1
  9. package/dist/catalogs/all-tokens-css.md +0 -131
  10. package/dist/catalogs/all-tokens-js.md +0 -123
  11. package/dist/catalogs/all-tokens-scss.md +0 -123
package/AGENTS.md CHANGED
@@ -1,98 +1,147 @@
1
1
  # Agent Instructions: @dezkareid/design-tokens
2
2
 
3
- ## Project Context
4
- This project contains design tokens (colors, typography, spacing, etc.) for the `dezkareid` design system.
5
- It uses **Style Dictionary** to transform JSON token definitions into platform-specific outputs (CSS, SCSS, JS/TS).
6
-
7
- ## Setup & Build
8
- - **Package Manager**: pnpm
9
- - **Install**: `pnpm install`
10
- - **Build**: `pnpm build` (runs `style-dictionary build --config sd.config.js`)
11
- - **Release**: `pnpm release` (semantic-release only in CI/CD pipeline)
12
-
13
- ## Token Architecture
14
- - **Global Tokens**: Raw values (e.g., `blue-500: #3b82f6`). Defined in `src/tokens/color/global.json`.
15
- - **Semantic Tokens**: Aliases mapped to globals (e.g., `color-primary: {color.base.blue.500}`). Defined in `src/tokens/color/semantic.json`.
16
- - **Theming**: Supported via `light` and `dark` nesting in semantic tokens.
17
-
18
- ## Build Configuration
19
- - `sd.config.js`: Controls the build process.
20
- - **Formats & Outputs**:
21
- - **CSS**: `dist/css/variables.css` (`css/variables-light-dark`) - CSS Custom Properties with `light-dark()` support.
22
- - *Patterns*:
23
- - `--color-base-{blue,green,red,gray}-{100,400,500,600,900}`
24
- - `--color-base-{white,black}`
25
- - `--spacing-{0,4,8,12,16,24,32,48,64}`
26
- - `--font-family-{base,mono}`
27
- - `--font-size-{100-900}`
28
- - `--font-weight-{light,regular,medium,bold}`
29
- - `--font-line-height-{none,tight,normal,relaxed}`
30
- - `--font-letter-spacing-{tight,normal,wide}`
31
- - `--breakpoint-{small,medium,large,extra-large}-{min,max}`
32
- - `--border-radius-{none,small,medium,large,pill}`
33
- - `--shadow-{none,subtle,card,card-hover}`
34
- - `--{light,dark}-color-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
35
- - `--color-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
36
- - *Example*:
37
- ```css
38
- :root {
39
- --color-base-blue-500: #3b82f6;
40
- --color-base-gray-400: #9ca3af;
41
- --color-text-secondary: light-dark(var(--light-color-text-secondary), var(--dark-color-text-secondary));
42
- --font-letter-spacing-tight: -0.02em;
43
- --border-radius-pill: 9999px;
44
- --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
45
- --spacing-16: 1rem;
46
- --breakpoint-medium-min: 37.5rem;
47
- }
48
- ```
49
- - **SCSS**: `dist/scss/_variables.scss` (`scss/simple`) - Simple SCSS variables.
50
- - *Patterns*:
51
- - `$color-base-{blue,green,red,gray}-{100,400,500,600,900}`
52
- - `$color-base-{white,black}`
53
- - `$color-semantic-{light,dark}-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
54
- - `$spacing-{0,4,8,12,16,24,32,48,64}`
55
- - `$font-family-{base,mono}`
56
- - `$font-size-{100-900}`
57
- - `$font-weight-{light,regular,medium,bold}`
58
- - `$font-line-height-{none,tight,normal,relaxed}`
59
- - `$font-letter-spacing-{tight,normal,wide}`
60
- - `$breakpoint-{small,medium,large,extra-large}-{min,max}`
61
- - `$border-radius-{none,small,medium,large,pill}`
62
- - `$shadow-{none,subtle,card,card-hover}`
63
- - *Example*:
64
- ```scss
65
- $color-base-blue-500: #3b82f6;
66
- $font-letter-spacing-tight: -0.02em;
67
- $border-radius-pill: 9999px;
68
- $shadow-card: 0 2px 8px rgba(0,0,0,0.08);
69
- $spacing-16: 1rem;
70
- $breakpoint-medium-min: 37.5rem;
71
- ```
72
- - **JS**:
73
- - `dist/js/tokens.js` (`js/custom-module`) - CommonJS/ESM hybrid.
74
- - `dist/js/tokens.mjs` (`js/custom-module`) - ESM.
75
- - `dist/js/tokens.d.ts` (`typescript/custom-declarations`) - TypeScript declarations.
76
- - *Patterns*:
77
- - `ColorBase{Blue,Green,Red,Gray}{100,400,500,600,900}`
78
- - `ColorBase{White,Black}`
79
- - `{Light,Dark}Color{Primary,Success,Danger,BackgroundPrimary,BackgroundSecondary,TextPrimary,TextSecondary,TextInverse}`
80
- - `Spacing{0,4,8,12,16,24,32,48,64}`
81
- - `FontFamily{Base,Mono}`
82
- - `FontSize{100-900}`
83
- - `FontWeight{Light,Regular,Medium,Bold}`
84
- - `FontLineHeight{None,Tight,Normal,Relaxed}`
85
- - `FontLetterSpacing{Tight,Normal,Wide}`
86
- - `Breakpoint{Small,Medium,Large,ExtraLarge}{Min,Max}`
87
- - `BorderRadius{None,Small,Medium,Large,Pill}`
88
- - `Shadow{None,Subtle,Card,CardHover}`
89
- - *Example*:
90
- ```javascript
91
- export const ColorBaseBlue500 = "#3b82f6";
92
- export const ColorBaseGray400 = "#9ca3af";
93
- export const FontLetterSpacingTight = "-0.02em";
94
- export const BorderRadiusPill = "9999px";
95
- export const ShadowCard = "0 2px 8px rgba(0,0,0,0.08)";
96
- export const Spacing16 = "1rem";
97
- export const BreakpointMediumMin = "37.5rem";
98
- ```
3
+ ## Overview
4
+ This project serves as the single source of truth for the `dezkareid` design system's visual language. It manages design tokens (colors, typography, spacing, etc.) using **Style Dictionary** to transform JSON definitions into platform-specific outputs for CSS, SCSS, and JavaScript/TypeScript.
5
+
6
+ ## Tech Stack & Versions
7
+ - **Node.js**: >= 22.x
8
+ - **Package Manager**: pnpm 10.x
9
+ - **Style Dictionary**: 5.2.0
10
+ - **Testing**: Vitest 4.0.18
11
+ - **Linting**: ESLint 9.39.2
12
+
13
+ ## Project Structure
14
+ ```text
15
+ design-system/design-tokens/
16
+ ├── catalogs/ # Token catalogs for discovery (auto-generated)
17
+ │ ├── all-tokens-css.md # CSS variables reference
18
+ │ ├── all-tokens-scss.md # SCSS variables reference
19
+ │ └── all-tokens-js.md # JS/TS constants reference
20
+ ├── dist/ # Build outputs (auto-generated)
21
+ │ ├── css/variables.css # CSS Custom Properties with light-dark() support
22
+ │ ├── scss/_variables.scss# Simple SCSS variables
23
+ │ └── js/tokens.{js,mjs,d.ts} # JS/TS constants and declarations
24
+ ├── scripts/ # Utility scripts
25
+ │ ├── export-catalog.js # CLI to generate token documentation
26
+ │ └── contrast-check.js # Accessibility validation script
27
+ ├── src/
28
+ │ ├── tokens/ # Token source of truth (JSON)
29
+ │ │ ├── color/ # Global and semantic color definitions
30
+ │ │ ├── spacing/ # Layout and spacing scales
31
+ │ │ └── typography/ # Font scales and families
32
+ │ └── utils/ # Build transforms and naming logic
33
+ ├── sd.config.js # Style Dictionary configuration
34
+ └── package.json # Project manifests and scripts
35
+ ```
36
+
37
+ ## Token Reference & Patterns
38
+ The build process generates tokens following these patterns. Use these as a reference for expected token names.
39
+
40
+ ### CSS Patterns (`dist/css/variables.css`)
41
+ - `--color-base-{blue,green,red,gray}-{100,400,500,600,900}`
42
+ - `--color-base-{white,black}`
43
+ - `--spacing-{0,4,8,12,16,24,32,48,64}`
44
+ - `--font-family-{base,mono}`
45
+ - `--font-size-{100-900}`
46
+ - `--font-weight-{light,regular,medium,bold}`
47
+ - `--font-line-height-{none,tight,normal,relaxed}`
48
+ - `--font-letter-spacing-{tight,normal,wide}`
49
+ - `--breakpoint-{small,medium,large,extra-large}-{min,max}`
50
+ - `--border-radius-{none,small,medium,large,pill}`
51
+ - `--shadow-{none,subtle,card,card-hover}`
52
+ - `--{light,dark}-color-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
53
+ - `--color-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
54
+
55
+ **Example:**
56
+ ```css
57
+ :root {
58
+ --color-base-blue-500: #3b82f6;
59
+ --color-text-secondary: light-dark(var(--light-color-text-secondary), var(--dark-color-text-secondary));
60
+ --border-radius-pill: 9999px;
61
+ --spacing-16: 1rem;
62
+ }
63
+ ```
64
+
65
+ ### SCSS Patterns (`dist/scss/_variables.scss`)
66
+ - `$color-base-{blue,green,red,gray}-{100,400,500,600,900}`
67
+ - `$color-base-{white,black}`
68
+ - `$color-semantic-{light,dark}-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
69
+ - `$spacing-{0,4,8,12,16,24,32,48,64}`
70
+ - `$font-family-{base,mono}`
71
+ - `$font-size-{100-900}`
72
+ - `$font-weight-{light,regular,medium,bold}`
73
+ - `$breakpoint-{small,medium,large,extra-large}-{min,max}`
74
+ - `$border-radius-{none,small,medium,large,pill}`
75
+ - `$shadow-{none,subtle,card,card-hover}`
76
+
77
+ **Example:**
78
+ ```scss
79
+ $color-base-blue-500: #3b82f6;
80
+ $border-radius-pill: 9999px;
81
+ $spacing-16: 1rem;
82
+ ```
83
+
84
+ ### JS Patterns (`dist/js/tokens.{js,mjs,d.ts}`)
85
+ - `ColorBase{Blue,Green,Red,Gray}{100,400,500,600,900}`
86
+ - `ColorBase{White,Black}`
87
+ - `{Light,Dark}Color{Primary,Success,Danger,BackgroundPrimary,BackgroundSecondary,TextPrimary,TextSecondary,TextInverse}`
88
+ - `Spacing{0,4,8,12,16,24,32,48,64}`
89
+ - `FontFamily{Base,Mono}`
90
+ - `FontSize{100-900}`
91
+ - `FontWeight{Light,Regular,Medium,Bold}`
92
+ - `Breakpoint{Small,Medium,Large,ExtraLarge}{Min,Max}`
93
+ - `BorderRadius{None,Small,Medium,Large,Pill}`
94
+ - `Shadow{None,Subtle,Card,CardHover}`
95
+
96
+ **Example:**
97
+ ```javascript
98
+ export const ColorBaseBlue500 = "#3b82f6";
99
+ export const BorderRadiusPill = "9999px";
100
+ export const Spacing16 = "1rem";
101
+ ```
102
+
103
+ ## Development Workflow
104
+ - **Build Tokens**: `pnpm build` - Transforms JSON tokens into all platform formats.
105
+ - **Generate Catalog**: `pnpm tokens:catalog` - Generates a markdown reference of all tokens.
106
+ - **Visualizer**: `pnpm visualizer` - Opens a local interactive dashboard to explore tokens.
107
+ - **Linting**: `pnpm lint` / `pnpm lint:fix` - Ensures token definitions follow naming conventions.
108
+
109
+ ## Testing Conventions
110
+ - **Unit Testing**: `pnpm test` - Uses Vitest to verify token transformation logic and naming utilities.
111
+ - **Accessibility**: `pnpm contrast-check` - Validates color combinations against WCAG 2.1 contrast requirements.
112
+ - **Validation**: The build process checks for dangling aliases or invalid references in JSON files.
113
+
114
+ ## Coding Standards & Style
115
+
116
+ ### Component Architecture
117
+ Tokens follow a multi-tier architecture to ensure maintainability:
118
+ 1. **Global Tokens (Tier 1)**: Raw values (e.g., `#3b82f6`). Defined in `src/tokens/color/global.json`.
119
+ 2. **Semantic Tokens (Tier 2)**: Design intent aliases (e.g., `color-primary`). Defined in `src/tokens/color/semantic.json`.
120
+ 3. **Theme Tokens (Tier 3)**: Nesting `light` and `dark` values within semantic tokens to support system-level theming.
121
+
122
+ ### Design Tokens & Theme
123
+ - **Implementation**: Managed via `sd.config.js`.
124
+ - **Theming**: Uses the modern `light-dark()` CSS function in `dist/css/variables.css` for seamless theme switching.
125
+ - **Naming**: Controlled by `src/utils/token-naming.js`. Reference this file when adding new token categories.
126
+
127
+ ### Visual & Unit Testing
128
+ - New transformation logic in `sd.config.js` or `src/utils/` MUST have a corresponding Vitest spec.
129
+ - All new color pairs MUST be validated with the `contrast-check` script.
130
+
131
+ ### Documentation & Storybook
132
+ - **Internal**: Use the markdown catalogs in the \`catalogs/\` directory for a quick CLI/Markdown reference. These files (\`all-tokens-css.md\`, \`all-tokens-scss.md\`, \`all-tokens-js.md\`) are the primary source for token discovery for AI agents and developers.
133
+ - **External**: Tokens are consumed by \`ui-tools/storybook-react\` for component documentation.
134
+ - **Interactive**: Use the local \`visualizer\` for a graphical overview.
135
+
136
+
137
+ ### Skills
138
+ The following skills/agents are essential for this project:
139
+ - `accessibility` / `web-quality:accessibility`: For validating color contrast and typography readability.
140
+
141
+ ### MCP Servers
142
+ - `context7` : When you need documentation for Style Dictionary, Vitest, or any other external library — do not rely on training data alone.
143
+ ## Debugging
144
+ - **Build Errors**: Check the console output during `pnpm build`. Style Dictionary provides detailed error messages for circular references or missing values.
145
+ - **Output Inspection**: If a token isn't appearing as expected, inspect the relevant file in `dist/`.
146
+ - **Naming Issues**: If JS exports or CSS variables have unexpected names, verify the logic in `src/utils/token-naming.js`.
147
+ - **Cache**: If changes don't reflect, delete the `dist/` folder and rebuild.
package/dist/css/variables.css CHANGED
@@ -26,7 +26,19 @@
26
26
  --color-base-green-900: #14532d;
27
27
  --color-base-red-100: #fee2e2;
28
28
  --color-base-red-500: #ef4444;
29
+ --color-base-red-600: #dc2626;
30
+ --color-base-red-700: #c53030;
29
31
  --color-base-red-900: #7f1d1d;
32
+ --color-base-amber-600: #d97706;
33
+ --color-base-amber-900: #78350f;
34
+ --color-base-rose-100: #ffe4e6;
35
+ --color-base-rose-500: #f43f6e;
36
+ --color-base-rose-600: #e11d48;
37
+ --color-base-rose-700: #be185d;
38
+ --color-base-rose-900: #881337;
39
+ --color-base-orange-100: #ffedd5;
40
+ --color-base-orange-400: #fb923c;
41
+ --color-base-orange-900: #7c2d12;
30
42
  --color-base-gray-100: #f3f4f6;
31
43
  --color-base-gray-400: #9ca3af;
32
44
  --color-base-gray-500: #6b7280;
@@ -79,6 +91,9 @@
79
91
  --light-color-danger: var(--color-base-red-500);
80
92
  --dark-color-danger: var(--color-base-red-900);
81
93
  --color-danger: light-dark(var(--light-color-danger), var(--dark-color-danger));
94
+ --light-color-warning: var(--color-base-amber-600);
95
+ --dark-color-warning: var(--color-base-amber-900);
96
+ --color-warning: light-dark(var(--light-color-warning), var(--dark-color-warning));
82
97
  --light-color-background-primary: var(--color-base-white);
83
98
  --dark-color-background-primary: var(--color-base-black);
84
99
  --color-background-primary: light-dark(var(--light-color-background-primary), var(--dark-color-background-primary));
@@ -94,4 +109,19 @@
94
109
  --light-color-text-inverse: var(--color-base-white);
95
110
  --dark-color-text-inverse: var(--color-base-gray-900);
96
111
  --color-text-inverse: light-dark(var(--light-color-text-inverse), var(--dark-color-text-inverse));
112
+ --light-color-like: var(--color-base-rose-700);
113
+ --dark-color-like: var(--color-base-rose-100);
114
+ --color-like: light-dark(var(--light-color-like), var(--dark-color-like));
115
+ --light-color-like-hover-bg: rgba(190, 24, 93, 0.08);
116
+ --dark-color-like-hover-bg: rgba(255, 228, 230, 0.08);
117
+ --color-like-hover-bg: light-dark(var(--light-color-like-hover-bg), var(--dark-color-like-hover-bg));
118
+ --light-color-like-gradient-from: var(--color-base-rose-700);
119
+ --dark-color-like-gradient-from: var(--color-base-rose-100);
120
+ --color-like-gradient-from: light-dark(var(--light-color-like-gradient-from), var(--dark-color-like-gradient-from));
121
+ --light-color-like-gradient-to: var(--color-base-orange-400);
122
+ --dark-color-like-gradient-to: var(--color-base-orange-100);
123
+ --color-like-gradient-to: light-dark(var(--light-color-like-gradient-to), var(--dark-color-like-gradient-to));
124
+ --light-color-error: var(--color-base-red-700);
125
+ --dark-color-error: var(--color-base-red-100);
126
+ --color-error: light-dark(var(--light-color-error), var(--dark-color-error));
97
127
  }
package/dist/js/tokens.d.ts CHANGED
@@ -24,7 +24,19 @@ export const ColorBaseGreen500: string;
24
24
  export const ColorBaseGreen900: string;
25
25
  export const ColorBaseRed100: string;
26
26
  export const ColorBaseRed500: string;
27
+ export const ColorBaseRed600: string;
28
+ export const ColorBaseRed700: string;
27
29
  export const ColorBaseRed900: string;
30
+ export const ColorBaseAmber600: string;
31
+ export const ColorBaseAmber900: string;
32
+ export const ColorBaseRose100: string;
33
+ export const ColorBaseRose500: string;
34
+ export const ColorBaseRose600: string;
35
+ export const ColorBaseRose700: string;
36
+ export const ColorBaseRose900: string;
37
+ export const ColorBaseOrange100: string;
38
+ export const ColorBaseOrange400: string;
39
+ export const ColorBaseOrange900: string;
28
40
  export const ColorBaseGray100: string;
29
41
  export const ColorBaseGray400: string;
30
42
  export const ColorBaseGray500: string;
@@ -36,19 +48,31 @@ export const ColorBaseBlack: string;
36
48
  export const LightColorPrimary: string;
37
49
  export const LightColorSuccess: string;
38
50
  export const LightColorDanger: string;
51
+ export const LightColorWarning: string;
39
52
  export const LightColorBackgroundPrimary: string;
40
53
  export const LightColorBackgroundSecondary: string;
41
54
  export const LightColorTextPrimary: string;
42
55
  export const LightColorTextSecondary: string;
43
56
  export const LightColorTextInverse: string;
57
+ export const LightColorLike: string;
58
+ export const LightColorLikeHoverBg: string;
59
+ export const LightColorLikeGradientFrom: string;
60
+ export const LightColorLikeGradientTo: string;
61
+ export const LightColorError: string;
44
62
  export const DarkColorPrimary: string;
45
63
  export const DarkColorSuccess: string;
46
64
  export const DarkColorDanger: string;
65
+ export const DarkColorWarning: string;
47
66
  export const DarkColorBackgroundPrimary: string;
48
67
  export const DarkColorBackgroundSecondary: string;
49
68
  export const DarkColorTextPrimary: string;
50
69
  export const DarkColorTextSecondary: string;
51
70
  export const DarkColorTextInverse: string;
71
+ export const DarkColorLike: string;
72
+ export const DarkColorLikeHoverBg: string;
73
+ export const DarkColorLikeGradientFrom: string;
74
+ export const DarkColorLikeGradientTo: string;
75
+ export const DarkColorError: string;
52
76
  export const ShadowNone: string;
53
77
  export const ShadowSubtle: string;
54
78
  export const ShadowCard: string;
package/dist/js/tokens.js CHANGED
@@ -24,7 +24,19 @@ export const ColorBaseGreen500 = "#22c55e";
24
24
  export const ColorBaseGreen900 = "#14532d";
25
25
  export const ColorBaseRed100 = "#fee2e2";
26
26
  export const ColorBaseRed500 = "#ef4444";
27
+ export const ColorBaseRed600 = "#dc2626";
28
+ export const ColorBaseRed700 = "#c53030";
27
29
  export const ColorBaseRed900 = "#7f1d1d";
30
+ export const ColorBaseAmber600 = "#d97706";
31
+ export const ColorBaseAmber900 = "#78350f";
32
+ export const ColorBaseRose100 = "#ffe4e6";
33
+ export const ColorBaseRose500 = "#f43f6e";
34
+ export const ColorBaseRose600 = "#e11d48";
35
+ export const ColorBaseRose700 = "#be185d";
36
+ export const ColorBaseRose900 = "#881337";
37
+ export const ColorBaseOrange100 = "#ffedd5";
38
+ export const ColorBaseOrange400 = "#fb923c";
39
+ export const ColorBaseOrange900 = "#7c2d12";
28
40
  export const ColorBaseGray100 = "#f3f4f6";
29
41
  export const ColorBaseGray400 = "#9ca3af";
30
42
  export const ColorBaseGray500 = "#6b7280";
@@ -36,19 +48,31 @@ export const ColorBaseBlack = "#000000";
36
48
  export const LightColorPrimary = "#2563eb";
37
49
  export const LightColorSuccess = "#22c55e";
38
50
  export const LightColorDanger = "#ef4444";
51
+ export const LightColorWarning = "#d97706";
39
52
  export const LightColorBackgroundPrimary = "#ffffff";
40
53
  export const LightColorBackgroundSecondary = "#f3f4f6";
41
54
  export const LightColorTextPrimary = "#111827";
42
55
  export const LightColorTextSecondary = "#4b5563";
43
56
  export const LightColorTextInverse = "#ffffff";
57
+ export const LightColorLike = "#be185d";
58
+ export const LightColorLikeHoverBg = "#be185d";
59
+ export const LightColorLikeGradientFrom = "#be185d";
60
+ export const LightColorLikeGradientTo = "#fb923c";
61
+ export const LightColorError = "#c53030";
44
62
  export const DarkColorPrimary = "#dbeafe";
45
63
  export const DarkColorSuccess = "#14532d";
46
64
  export const DarkColorDanger = "#7f1d1d";
65
+ export const DarkColorWarning = "#78350f";
47
66
  export const DarkColorBackgroundPrimary = "#000000";
48
67
  export const DarkColorBackgroundSecondary = "#1f2937";
49
68
  export const DarkColorTextPrimary = "#ffffff";
50
69
  export const DarkColorTextSecondary = "#9ca3af";
51
70
  export const DarkColorTextInverse = "#111827";
71
+ export const DarkColorLike = "#ffe4e6";
72
+ export const DarkColorLikeHoverBg = "#ffe4e6";
73
+ export const DarkColorLikeGradientFrom = "#ffe4e6";
74
+ export const DarkColorLikeGradientTo = "#ffedd5";
75
+ export const DarkColorError = "#fee2e2";
52
76
  export const ShadowNone = "none";
53
77
  export const ShadowSubtle = "0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)";
54
78
  export const ShadowCard = "0 2px 8px rgba(0,0,0,0.08)";
package/dist/js/tokens.mjs CHANGED
@@ -24,7 +24,19 @@ export const ColorBaseGreen500 = "#22c55e";
24
24
  export const ColorBaseGreen900 = "#14532d";
25
25
  export const ColorBaseRed100 = "#fee2e2";
26
26
  export const ColorBaseRed500 = "#ef4444";
27
+ export const ColorBaseRed600 = "#dc2626";
28
+ export const ColorBaseRed700 = "#c53030";
27
29
  export const ColorBaseRed900 = "#7f1d1d";
30
+ export const ColorBaseAmber600 = "#d97706";
31
+ export const ColorBaseAmber900 = "#78350f";
32
+ export const ColorBaseRose100 = "#ffe4e6";
33
+ export const ColorBaseRose500 = "#f43f6e";
34
+ export const ColorBaseRose600 = "#e11d48";
35
+ export const ColorBaseRose700 = "#be185d";
36
+ export const ColorBaseRose900 = "#881337";
37
+ export const ColorBaseOrange100 = "#ffedd5";
38
+ export const ColorBaseOrange400 = "#fb923c";
39
+ export const ColorBaseOrange900 = "#7c2d12";
28
40
  export const ColorBaseGray100 = "#f3f4f6";
29
41
  export const ColorBaseGray400 = "#9ca3af";
30
42
  export const ColorBaseGray500 = "#6b7280";
@@ -36,19 +48,31 @@ export const ColorBaseBlack = "#000000";
36
48
  export const LightColorPrimary = "#2563eb";
37
49
  export const LightColorSuccess = "#22c55e";
38
50
  export const LightColorDanger = "#ef4444";
51
+ export const LightColorWarning = "#d97706";
39
52
  export const LightColorBackgroundPrimary = "#ffffff";
40
53
  export const LightColorBackgroundSecondary = "#f3f4f6";
41
54
  export const LightColorTextPrimary = "#111827";
42
55
  export const LightColorTextSecondary = "#4b5563";
43
56
  export const LightColorTextInverse = "#ffffff";
57
+ export const LightColorLike = "#be185d";
58
+ export const LightColorLikeHoverBg = "#be185d";
59
+ export const LightColorLikeGradientFrom = "#be185d";
60
+ export const LightColorLikeGradientTo = "#fb923c";
61
+ export const LightColorError = "#c53030";
44
62
  export const DarkColorPrimary = "#dbeafe";
45
63
  export const DarkColorSuccess = "#14532d";
46
64
  export const DarkColorDanger = "#7f1d1d";
65
+ export const DarkColorWarning = "#78350f";
47
66
  export const DarkColorBackgroundPrimary = "#000000";
48
67
  export const DarkColorBackgroundSecondary = "#1f2937";
49
68
  export const DarkColorTextPrimary = "#ffffff";
50
69
  export const DarkColorTextSecondary = "#9ca3af";
51
70
  export const DarkColorTextInverse = "#111827";
71
+ export const DarkColorLike = "#ffe4e6";
72
+ export const DarkColorLikeHoverBg = "#ffe4e6";
73
+ export const DarkColorLikeGradientFrom = "#ffe4e6";
74
+ export const DarkColorLikeGradientTo = "#ffedd5";
75
+ export const DarkColorError = "#fee2e2";
52
76
  export const ShadowNone = "none";
53
77
  export const ShadowSubtle = "0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)";
54
78
  export const ShadowCard = "0 2px 8px rgba(0,0,0,0.08)";
package/dist/scss/_variables.scss CHANGED
@@ -20,7 +20,19 @@ $color-base-green-500: #22c55e;
20
20
  $color-base-green-900: #14532d;
21
21
  $color-base-red-100: #fee2e2;
22
22
  $color-base-red-500: #ef4444;
23
+ $color-base-red-600: #dc2626;
24
+ $color-base-red-700: #c53030;
23
25
  $color-base-red-900: #7f1d1d;
26
+ $color-base-amber-600: #d97706;
27
+ $color-base-amber-900: #78350f;
28
+ $color-base-rose-100: #ffe4e6;
29
+ $color-base-rose-500: #f43f6e;
30
+ $color-base-rose-600: #e11d48;
31
+ $color-base-rose-700: #be185d;
32
+ $color-base-rose-900: #881337;
33
+ $color-base-orange-100: #ffedd5;
34
+ $color-base-orange-400: #fb923c;
35
+ $color-base-orange-900: #7c2d12;
24
36
  $color-base-gray-100: #f3f4f6;
25
37
  $color-base-gray-400: #9ca3af;
26
38
  $color-base-gray-500: #6b7280;
@@ -32,19 +44,31 @@ $color-base-black: #000000;
32
44
  $color-semantic-light-primary: $color-base-blue-600;
33
45
  $color-semantic-light-success: $color-base-green-500;
34
46
  $color-semantic-light-danger: $color-base-red-500;
47
+ $color-semantic-light-warning: $color-base-amber-600;
35
48
  $color-semantic-light-background-primary: $color-base-white;
36
49
  $color-semantic-light-background-secondary: $color-base-gray-100;
37
50
  $color-semantic-light-text-primary: $color-base-gray-900;
38
51
  $color-semantic-light-text-secondary: $color-base-gray-600;
39
52
  $color-semantic-light-text-inverse: $color-base-white;
53
+ $color-semantic-light-like: $color-base-rose-700;
54
+ $color-semantic-light-like-hover-bg: $color-base-rose-700;
55
+ $color-semantic-light-like-gradient-from: $color-base-rose-700;
56
+ $color-semantic-light-like-gradient-to: $color-base-orange-400;
57
+ $color-semantic-light-error: $color-base-red-700;
40
58
  $color-semantic-dark-primary: $color-base-blue-100;
41
59
  $color-semantic-dark-success: $color-base-green-900;
42
60
  $color-semantic-dark-danger: $color-base-red-900;
61
+ $color-semantic-dark-warning: $color-base-amber-900;
43
62
  $color-semantic-dark-background-primary: $color-base-black;
44
63
  $color-semantic-dark-background-secondary: $color-base-gray-800;
45
64
  $color-semantic-dark-text-primary: $color-base-white;
46
65
  $color-semantic-dark-text-secondary: $color-base-gray-400;
47
66
  $color-semantic-dark-text-inverse: $color-base-gray-900;
67
+ $color-semantic-dark-like: $color-base-rose-100;
68
+ $color-semantic-dark-like-hover-bg: $color-base-rose-100;
69
+ $color-semantic-dark-like-gradient-from: $color-base-rose-100;
70
+ $color-semantic-dark-like-gradient-to: $color-base-orange-100;
71
+ $color-semantic-dark-error: $color-base-red-100;
48
72
  $shadow-none: none;
49
73
  $shadow-subtle: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
50
74
  $shadow-card: 0 2px 8px rgba(0,0,0,0.08);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dezkareid/design-tokens",
3
- "version": "1.4.1",
3
+ "version": "1.6.0",
4
4
  "description": "Design tokens for dezkareid design system",
5
5
  "main": "dist/js/tokens.js",
6
6
  "module": "dist/js/tokens.mjs",
@@ -15,7 +15,8 @@
15
15
  "files": [
16
16
  "dist",
17
17
  "AGENTS.md",
18
- "scripts/export-catalog.js"
18
+ "scripts/export-catalog.js",
19
+ "catalog"
19
20
  ],
20
21
  "publishConfig": {
21
22
  "access": "public",
package/scripts/export-catalog.js CHANGED
@@ -12,7 +12,7 @@ program
12
12
  .version('1.0.0')
13
13
  .option('-f, --format <format>', 'Output format: css, scss, js', 'css')
14
14
  .action(async (options) => {
15
- const catalogPath = path.join(process.cwd(), 'dist', 'catalogs', `all-tokens-${options.format}.md`);
15
+ const catalogPath = path.join(process.cwd(), 'catalogs', `all-tokens-${options.format}.md`);
16
16
 
17
17
  if (!fs.existsSync(catalogPath)) {
18
18
  console.error(`Error: Catalog file for format "${options.format}" not found at: ${catalogPath}`);
package/dist/catalogs/all-tokens-css.md DELETED
@@ -1,131 +0,0 @@
1
- # Design Tokens Catalog (CSS)
2
-
3
- This catalog contains design tokens optimized for CSS usage.
4
-
5
- ## Border-radius
6
-
7
- | CSS Variable | Value |
8
- | :--- | :--- |
9
- | `--border-radius-none` | `0` |
10
- | `--border-radius-small` | `0.25rem` |
11
- | `--border-radius-medium` | `0.5rem` |
12
- | `--border-radius-large` | `1rem` |
13
- | `--border-radius-pill` | `9999px` |
14
-
15
- ## Breakpoint
16
-
17
- | CSS Variable | Value |
18
- | :--- | :--- |
19
- | `--breakpoint-small-min` | `0` |
20
- | `--breakpoint-small-max` | `37.49rem` |
21
- | `--breakpoint-medium-min` | `37.5rem` |
22
- | `--breakpoint-medium-max` | `59.99rem` |
23
- | `--breakpoint-large-min` | `60rem` |
24
- | `--breakpoint-large-max` | `89.99rem` |
25
- | `--breakpoint-extra-large-min` | `90rem` |
26
- | `--breakpoint-extra-large-max` | `9999rem` |
27
-
28
- ## Color
29
-
30
- | CSS Variable | Value |
31
- | :--- | :--- |
32
- | `--color-base-blue-100` | `#dbeafe` |
33
- | `--color-base-blue-500` | `#3b82f6` |
34
- | `--color-base-blue-600` | `#2563eb` |
35
- | `--color-base-blue-900` | `#1e3a8a` |
36
- | `--color-base-green-100` | `#dcfce7` |
37
- | `--color-base-green-500` | `#22c55e` |
38
- | `--color-base-green-900` | `#14532d` |
39
- | `--color-base-red-100` | `#fee2e2` |
40
- | `--color-base-red-500` | `#ef4444` |
41
- | `--color-base-red-900` | `#7f1d1d` |
42
- | `--color-base-gray-100` | `#f3f4f6` |
43
- | `--color-base-gray-400` | `#9ca3af` |
44
- | `--color-base-gray-500` | `#6b7280` |
45
- | `--color-base-gray-600` | `#4b5563` |
46
- | `--color-base-gray-800` | `#1f2937` |
47
- | `--color-base-gray-900` | `#111827` |
48
- | `--color-base-white` | `#ffffff` |
49
- | `--color-base-black` | `#000000` |
50
-
51
- ## Font
52
-
53
- | CSS Variable | Value |
54
- | :--- | :--- |
55
- | `--font-family-base` | `'IBM Plex Sans', sans-serif` |
56
- | `--font-family-mono` | `'IBM Plex Mono', monospace` |
57
- | `--font-size-100` | `0.75rem` |
58
- | `--font-size-200` | `0.875rem` |
59
- | `--font-size-300` | `1rem` |
60
- | `--font-size-400` | `1.125rem` |
61
- | `--font-size-500` | `1.25rem` |
62
- | `--font-size-600` | `1.5rem` |
63
- | `--font-size-700` | `1.875rem` |
64
- | `--font-size-800` | `2.25rem` |
65
- | `--font-size-900` | `3rem` |
66
- | `--font-weight-light` | `300` |
67
- | `--font-weight-regular` | `400` |
68
- | `--font-weight-medium` | `500` |
69
- | `--font-weight-bold` | `700` |
70
- | `--font-line-height-none` | `1` |
71
- | `--font-line-height-tight` | `1.25` |
72
- | `--font-line-height-normal` | `1.5` |
73
- | `--font-line-height-relaxed` | `1.75` |
74
- | `--font-letter-spacing-tight` | `-0.02em` |
75
- | `--font-letter-spacing-normal` | `0` |
76
- | `--font-letter-spacing-wide` | `0.08em` |
77
-
78
- ## Shadow
79
-
80
- | CSS Variable | Value |
81
- | :--- | :--- |
82
- | `--shadow-none` | `none` |
83
- | `--shadow-subtle` | `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)` |
84
- | `--shadow-card` | `0 2px 8px rgba(0,0,0,0.08)` |
85
- | `--shadow-card-hover` | `0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)` |
86
-
87
- ## Spacing
88
-
89
- | CSS Variable | Value |
90
- | :--- | :--- |
91
- | `--spacing-0` | `0` |
92
- | `--spacing-4` | `0.25rem` |
93
- | `--spacing-8` | `0.5rem` |
94
- | `--spacing-12` | `0.75rem` |
95
- | `--spacing-16` | `1rem` |
96
- | `--spacing-24` | `1.5rem` |
97
- | `--spacing-32` | `2rem` |
98
- | `--spacing-48` | `3rem` |
99
- | `--spacing-64` | `4rem` |
100
-
101
- ## Semantic Tokens
102
-
103
- The following semantic tokens are themed and support light/dark modes.
104
-
105
- | CSS Variable | Value |
106
- | :--- | :--- |
107
- | `--color-background-primary` | `light-dark(var(--light-color-background-primary), var(--dark-color-background-primary))` |
108
- | `--light-color-background-primary` | `#ffffff` |
109
- | `--dark-color-background-primary` | `#000000` |
110
- | `--color-background-secondary` | `light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary))` |
111
- | `--light-color-background-secondary` | `#f3f4f6` |
112
- | `--dark-color-background-secondary` | `#1f2937` |
113
- | `--color-danger` | `light-dark(var(--light-color-danger), var(--dark-color-danger))` |
114
- | `--light-color-danger` | `#ef4444` |
115
- | `--dark-color-danger` | `#7f1d1d` |
116
- | `--color-primary` | `light-dark(var(--light-color-primary), var(--dark-color-primary))` |
117
- | `--light-color-primary` | `#2563eb` |
118
- | `--dark-color-primary` | `#dbeafe` |
119
- | `--color-success` | `light-dark(var(--light-color-success), var(--dark-color-success))` |
120
- | `--light-color-success` | `#22c55e` |
121
- | `--dark-color-success` | `#14532d` |
122
- | `--color-text-inverse` | `light-dark(var(--light-color-text-inverse), var(--dark-color-text-inverse))` |
123
- | `--light-color-text-inverse` | `#ffffff` |
124
- | `--dark-color-text-inverse` | `#111827` |
125
- | `--color-text-primary` | `light-dark(var(--light-color-text-primary), var(--dark-color-text-primary))` |
126
- | `--light-color-text-primary` | `#111827` |
127
- | `--dark-color-text-primary` | `#ffffff` |
128
- | `--color-text-secondary` | `light-dark(var(--light-color-text-secondary), var(--dark-color-text-secondary))` |
129
- | `--light-color-text-secondary` | `#4b5563` |
130
- | `--dark-color-text-secondary` | `#9ca3af` |
131
-
package/dist/catalogs/all-tokens-js.md DELETED
@@ -1,123 +0,0 @@
1
- # Design Tokens Catalog (JS)
2
-
3
- This catalog contains design tokens optimized for JS usage.
4
-
5
- ## Border-radius
6
-
7
- | JS Variable | Value |
8
- | :--- | :--- |
9
- | `BorderRadiusNone` | `0` |
10
- | `BorderRadiusSmall` | `0.25rem` |
11
- | `BorderRadiusMedium` | `0.5rem` |
12
- | `BorderRadiusLarge` | `1rem` |
13
- | `BorderRadiusPill` | `9999px` |
14
-
15
- ## Breakpoint
16
-
17
- | JS Variable | Value |
18
- | :--- | :--- |
19
- | `BreakpointSmallMin` | `0` |
20
- | `BreakpointSmallMax` | `37.49rem` |
21
- | `BreakpointMediumMin` | `37.5rem` |
22
- | `BreakpointMediumMax` | `59.99rem` |
23
- | `BreakpointLargeMin` | `60rem` |
24
- | `BreakpointLargeMax` | `89.99rem` |
25
- | `BreakpointExtraLargeMin` | `90rem` |
26
- | `BreakpointExtraLargeMax` | `9999rem` |
27
-
28
- ## Color
29
-
30
- | JS Variable | Value |
31
- | :--- | :--- |
32
- | `ColorBaseBlue100` | `#dbeafe` |
33
- | `ColorBaseBlue500` | `#3b82f6` |
34
- | `ColorBaseBlue600` | `#2563eb` |
35
- | `ColorBaseBlue900` | `#1e3a8a` |
36
- | `ColorBaseGreen100` | `#dcfce7` |
37
- | `ColorBaseGreen500` | `#22c55e` |
38
- | `ColorBaseGreen900` | `#14532d` |
39
- | `ColorBaseRed100` | `#fee2e2` |
40
- | `ColorBaseRed500` | `#ef4444` |
41
- | `ColorBaseRed900` | `#7f1d1d` |
42
- | `ColorBaseGray100` | `#f3f4f6` |
43
- | `ColorBaseGray400` | `#9ca3af` |
44
- | `ColorBaseGray500` | `#6b7280` |
45
- | `ColorBaseGray600` | `#4b5563` |
46
- | `ColorBaseGray800` | `#1f2937` |
47
- | `ColorBaseGray900` | `#111827` |
48
- | `ColorBaseWhite` | `#ffffff` |
49
- | `ColorBaseBlack` | `#000000` |
50
-
51
- ## Font
52
-
53
- | JS Variable | Value |
54
- | :--- | :--- |
55
- | `FontFamilyBase` | `'IBM Plex Sans', sans-serif` |
56
- | `FontFamilyMono` | `'IBM Plex Mono', monospace` |
57
- | `FontSize100` | `0.75rem` |
58
- | `FontSize200` | `0.875rem` |
59
- | `FontSize300` | `1rem` |
60
- | `FontSize400` | `1.125rem` |
61
- | `FontSize500` | `1.25rem` |
62
- | `FontSize600` | `1.5rem` |
63
- | `FontSize700` | `1.875rem` |
64
- | `FontSize800` | `2.25rem` |
65
- | `FontSize900` | `3rem` |
66
- | `FontWeightLight` | `300` |
67
- | `FontWeightRegular` | `400` |
68
- | `FontWeightMedium` | `500` |
69
- | `FontWeightBold` | `700` |
70
- | `FontLineHeightNone` | `1` |
71
- | `FontLineHeightTight` | `1.25` |
72
- | `FontLineHeightNormal` | `1.5` |
73
- | `FontLineHeightRelaxed` | `1.75` |
74
- | `FontLetterSpacingTight` | `-0.02em` |
75
- | `FontLetterSpacingNormal` | `0` |
76
- | `FontLetterSpacingWide` | `0.08em` |
77
-
78
- ## Shadow
79
-
80
- | JS Variable | Value |
81
- | :--- | :--- |
82
- | `ShadowNone` | `none` |
83
- | `ShadowSubtle` | `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)` |
84
- | `ShadowCard` | `0 2px 8px rgba(0,0,0,0.08)` |
85
- | `ShadowCardHover` | `0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)` |
86
-
87
- ## Spacing
88
-
89
- | JS Variable | Value |
90
- | :--- | :--- |
91
- | `Spacing0` | `0` |
92
- | `Spacing4` | `0.25rem` |
93
- | `Spacing8` | `0.5rem` |
94
- | `Spacing12` | `0.75rem` |
95
- | `Spacing16` | `1rem` |
96
- | `Spacing24` | `1.5rem` |
97
- | `Spacing32` | `2rem` |
98
- | `Spacing48` | `3rem` |
99
- | `Spacing64` | `4rem` |
100
-
101
- ## Semantic Tokens
102
-
103
- The following semantic tokens are themed and support light/dark modes.
104
-
105
- | JS Variable | Value |
106
- | :--- | :--- |
107
- | `LightColorBackgroundPrimary` | `#ffffff` |
108
- | `DarkColorBackgroundPrimary` | `#000000` |
109
- | `LightColorBackgroundSecondary` | `#f3f4f6` |
110
- | `DarkColorBackgroundSecondary` | `#1f2937` |
111
- | `LightColorDanger` | `#ef4444` |
112
- | `DarkColorDanger` | `#7f1d1d` |
113
- | `LightColorPrimary` | `#2563eb` |
114
- | `DarkColorPrimary` | `#dbeafe` |
115
- | `LightColorSuccess` | `#22c55e` |
116
- | `DarkColorSuccess` | `#14532d` |
117
- | `LightColorTextInverse` | `#ffffff` |
118
- | `DarkColorTextInverse` | `#111827` |
119
- | `LightColorTextPrimary` | `#111827` |
120
- | `DarkColorTextPrimary` | `#ffffff` |
121
- | `LightColorTextSecondary` | `#4b5563` |
122
- | `DarkColorTextSecondary` | `#9ca3af` |
123
-
package/dist/catalogs/all-tokens-scss.md DELETED
@@ -1,123 +0,0 @@
1
- # Design Tokens Catalog (SCSS)
2
-
3
- This catalog contains design tokens optimized for SCSS usage.
4
-
5
- ## Border-radius
6
-
7
- | SCSS Variable | Value |
8
- | :--- | :--- |
9
- | `$border-radius-none` | `0` |
10
- | `$border-radius-small` | `0.25rem` |
11
- | `$border-radius-medium` | `0.5rem` |
12
- | `$border-radius-large` | `1rem` |
13
- | `$border-radius-pill` | `9999px` |
14
-
15
- ## Breakpoint
16
-
17
- | SCSS Variable | Value |
18
- | :--- | :--- |
19
- | `$breakpoint-small-min` | `0` |
20
- | `$breakpoint-small-max` | `37.49rem` |
21
- | `$breakpoint-medium-min` | `37.5rem` |
22
- | `$breakpoint-medium-max` | `59.99rem` |
23
- | `$breakpoint-large-min` | `60rem` |
24
- | `$breakpoint-large-max` | `89.99rem` |
25
- | `$breakpoint-extra-large-min` | `90rem` |
26
- | `$breakpoint-extra-large-max` | `9999rem` |
27
-
28
- ## Color
29
-
30
- | SCSS Variable | Value |
31
- | :--- | :--- |
32
- | `$color-base-blue-100` | `#dbeafe` |
33
- | `$color-base-blue-500` | `#3b82f6` |
34
- | `$color-base-blue-600` | `#2563eb` |
35
- | `$color-base-blue-900` | `#1e3a8a` |
36
- | `$color-base-green-100` | `#dcfce7` |
37
- | `$color-base-green-500` | `#22c55e` |
38
- | `$color-base-green-900` | `#14532d` |
39
- | `$color-base-red-100` | `#fee2e2` |
40
- | `$color-base-red-500` | `#ef4444` |
41
- | `$color-base-red-900` | `#7f1d1d` |
42
- | `$color-base-gray-100` | `#f3f4f6` |
43
- | `$color-base-gray-400` | `#9ca3af` |
44
- | `$color-base-gray-500` | `#6b7280` |
45
- | `$color-base-gray-600` | `#4b5563` |
46
- | `$color-base-gray-800` | `#1f2937` |
47
- | `$color-base-gray-900` | `#111827` |
48
- | `$color-base-white` | `#ffffff` |
49
- | `$color-base-black` | `#000000` |
50
-
51
- ## Font
52
-
53
- | SCSS Variable | Value |
54
- | :--- | :--- |
55
- | `$font-family-base` | `'IBM Plex Sans', sans-serif` |
56
- | `$font-family-mono` | `'IBM Plex Mono', monospace` |
57
- | `$font-size-100` | `0.75rem` |
58
- | `$font-size-200` | `0.875rem` |
59
- | `$font-size-300` | `1rem` |
60
- | `$font-size-400` | `1.125rem` |
61
- | `$font-size-500` | `1.25rem` |
62
- | `$font-size-600` | `1.5rem` |
63
- | `$font-size-700` | `1.875rem` |
64
- | `$font-size-800` | `2.25rem` |
65
- | `$font-size-900` | `3rem` |
66
- | `$font-weight-light` | `300` |
67
- | `$font-weight-regular` | `400` |
68
- | `$font-weight-medium` | `500` |
69
- | `$font-weight-bold` | `700` |
70
- | `$font-line-height-none` | `1` |
71
- | `$font-line-height-tight` | `1.25` |
72
- | `$font-line-height-normal` | `1.5` |
73
- | `$font-line-height-relaxed` | `1.75` |
74
- | `$font-letter-spacing-tight` | `-0.02em` |
75
- | `$font-letter-spacing-normal` | `0` |
76
- | `$font-letter-spacing-wide` | `0.08em` |
77
-
78
- ## Shadow
79
-
80
- | SCSS Variable | Value |
81
- | :--- | :--- |
82
- | `$shadow-none` | `none` |
83
- | `$shadow-subtle` | `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)` |
84
- | `$shadow-card` | `0 2px 8px rgba(0,0,0,0.08)` |
85
- | `$shadow-card-hover` | `0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)` |
86
-
87
- ## Spacing
88
-
89
- | SCSS Variable | Value |
90
- | :--- | :--- |
91
- | `$spacing-0` | `0` |
92
- | `$spacing-4` | `0.25rem` |
93
- | `$spacing-8` | `0.5rem` |
94
- | `$spacing-12` | `0.75rem` |
95
- | `$spacing-16` | `1rem` |
96
- | `$spacing-24` | `1.5rem` |
97
- | `$spacing-32` | `2rem` |
98
- | `$spacing-48` | `3rem` |
99
- | `$spacing-64` | `4rem` |
100
-
101
- ## Semantic Tokens
102
-
103
- The following semantic tokens are themed and support light/dark modes.
104
-
105
- | SCSS Variable | Value |
106
- | :--- | :--- |
107
- | `$color-semantic-light-background-primary` | `#ffffff` |
108
- | `$color-semantic-dark-background-primary` | `#000000` |
109
- | `$color-semantic-light-background-secondary` | `#f3f4f6` |
110
- | `$color-semantic-dark-background-secondary` | `#1f2937` |
111
- | `$color-semantic-light-danger` | `#ef4444` |
112
- | `$color-semantic-dark-danger` | `#7f1d1d` |
113
- | `$color-semantic-light-primary` | `#2563eb` |
114
- | `$color-semantic-dark-primary` | `#dbeafe` |
115
- | `$color-semantic-light-success` | `#22c55e` |
116
- | `$color-semantic-dark-success` | `#14532d` |
117
- | `$color-semantic-light-text-inverse` | `#ffffff` |
118
- | `$color-semantic-dark-text-inverse` | `#111827` |
119
- | `$color-semantic-light-text-primary` | `#111827` |
120
- | `$color-semantic-dark-text-primary` | `#ffffff` |
121
- | `$color-semantic-light-text-secondary` | `#4b5563` |
122
- | `$color-semantic-dark-text-secondary` | `#9ca3af` |
123
-