@dezkareid/design-tokens 0.0.0 → 1.0.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.
- package/AGENTS.md +108 -0
- package/README.md +34 -0
- package/dist/css/variables.css +20 -12
- package/dist/js/tokens.d.ts +8 -0
- package/dist/js/tokens.js +8 -0
- package/dist/js/tokens.mjs +8 -0
- package/dist/scss/_variables.scss +20 -12
- package/package.json +7 -11
package/AGENTS.md
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# Agent Instructions: @dezkareid/design-tokens
|
|
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
|
+
## Making Changes (OpenSpec Workflow)
|
|
14
|
+
This project uses the **OpenSpec (opsx)** workflow for all changes. Do not modify code directly without a tracking change artifact unless it's a trivial fix.
|
|
15
|
+
|
|
16
|
+
### Workflow Cycle
|
|
17
|
+
1. **Start**: Create a new change container.
|
|
18
|
+
- Command: `/opsx:new <change-name>` (or `/opsx:ff` to fast-forward)
|
|
19
|
+
- Creates: `openspec/changes/<change-name>/`
|
|
20
|
+
|
|
21
|
+
2. **Plan**: Create artifacts in order.
|
|
22
|
+
- **Proposal**: Why and what (`proposal.md`)
|
|
23
|
+
- **Specs**: Detailed requirements (`specs/<capability>/spec.md`)
|
|
24
|
+
- **Design**: Technical approach (`design.md`)
|
|
25
|
+
- **Tasks**: Implementation checklist (`tasks.md`)
|
|
26
|
+
- Command: `/opsx:continue` (steps through creation)
|
|
27
|
+
|
|
28
|
+
3. **Implement**: Apply the changes to the codebase.
|
|
29
|
+
- Command: `/opsx:apply`
|
|
30
|
+
- Follows the checklist in `tasks.md`.
|
|
31
|
+
|
|
32
|
+
4. **Finish**: Archive the change.
|
|
33
|
+
- Command: `/opsx:archive`
|
|
34
|
+
- Moves artifacts to `openspec/changes/archive/`.
|
|
35
|
+
|
|
36
|
+
### Directory Structure
|
|
37
|
+
- `src/tokens/`: Source JSON token definitions (The Source of Truth).
|
|
38
|
+
- `color/`: Global and semantic color tokens.
|
|
39
|
+
- `spacing.json`: Spacing scale.
|
|
40
|
+
- `typography.json`: Fonts, weights, sizes.
|
|
41
|
+
- `dist/`: Generated build artifacts (CSS, SCSS, JS). **Do not edit manually.**
|
|
42
|
+
- `openspec/`: Change management artifacts.
|
|
43
|
+
|
|
44
|
+
## Token Architecture
|
|
45
|
+
- **Global Tokens**: Raw values (e.g., `blue-500: #3b82f6`). Defined in `src/tokens/color/global.json`.
|
|
46
|
+
- **Semantic Tokens**: Aliases mapped to globals (e.g., `color-primary: {color.base.blue.500}`). Defined in `src/tokens/color/semantic.json`.
|
|
47
|
+
- **Theming**: Supported via `light` and `dark` nesting in semantic tokens.
|
|
48
|
+
|
|
49
|
+
## Build Configuration
|
|
50
|
+
- `sd.config.js`: Controls the build process.
|
|
51
|
+
- **Formats & Outputs**:
|
|
52
|
+
- **CSS**: `dist/css/variables.css` (`css/variables-light-dark`) - CSS Custom Properties with `light-dark()` support.
|
|
53
|
+
- *Patterns*:
|
|
54
|
+
- `--color-base-{blue,green,red,gray}-{100,500,900}`
|
|
55
|
+
- `--color-base-{white,black}`
|
|
56
|
+
- `--spacing-{0,4,8,12,16,24,32,48,64}`
|
|
57
|
+
- `--font-family-{base,mono}`
|
|
58
|
+
- `--font-size-{100-900}`
|
|
59
|
+
- `--font-weight-{light,regular,medium,bold}`
|
|
60
|
+
- `--font-line-height-{none,tight,normal,relaxed}`
|
|
61
|
+
- `--breakpoint-{small,medium,large,extra-large}-{min,max}`
|
|
62
|
+
- `--{light,dark}-color-{primary,success,background-primary,background-secondary,text-primary,text-inverse}`
|
|
63
|
+
- `--color-{primary,success,background-primary,background-secondary,text-primary,text-inverse}`
|
|
64
|
+
- *Example*:
|
|
65
|
+
```css
|
|
66
|
+
:root {
|
|
67
|
+
--color-base-blue-500: #3b82f6;
|
|
68
|
+
--spacing-16: 1rem;
|
|
69
|
+
--breakpoint-medium-min: 37.5rem;
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
- **SCSS**: `dist/scss/_variables.scss` (`scss/simple`) - Simple SCSS variables.
|
|
73
|
+
- *Patterns*:
|
|
74
|
+
- `$color-base-{blue,green,red,gray}-{100,500,900}`
|
|
75
|
+
- `$color-base-{white,black}`
|
|
76
|
+
- `$color-semantic-{light,dark}-{primary,success,background-primary,background-secondary,text-primary,text-inverse}`
|
|
77
|
+
- `$spacing-{0,4,8,12,16,24,32,48,64}`
|
|
78
|
+
- `$font-family-{base,mono}`
|
|
79
|
+
- `$font-size-{100-900}`
|
|
80
|
+
- `$font-weight-{light,regular,medium,bold}`
|
|
81
|
+
- `$font-line-height-{none,tight,normal,relaxed}`
|
|
82
|
+
- `$breakpoint-{small,medium,large,extra-large}-{min,max}`
|
|
83
|
+
- *Example*:
|
|
84
|
+
```scss
|
|
85
|
+
$color-base-blue-500: #3b82f6;
|
|
86
|
+
$spacing-16: 1rem;
|
|
87
|
+
$breakpoint-medium-min: 37.5rem;
|
|
88
|
+
```
|
|
89
|
+
- **JS**:
|
|
90
|
+
- `dist/js/tokens.js` (`js/custom-module`) - CommonJS/ESM hybrid.
|
|
91
|
+
- `dist/js/tokens.mjs` (`js/custom-module`) - ESM.
|
|
92
|
+
- `dist/js/tokens.d.ts` (`typescript/custom-declarations`) - TypeScript declarations.
|
|
93
|
+
- *Patterns*:
|
|
94
|
+
- `ColorBase{Blue,Green,Red,Gray}Val{100,500,900}`
|
|
95
|
+
- `ColorBase{White,Black}`
|
|
96
|
+
- `{Light,Dark}Color{Primary,Success,BackgroundPrimary,BackgroundSecondary,TextPrimary,TextInverse}`
|
|
97
|
+
- `SpacingVal{0,4,8,12,16,24,32,48,64}`
|
|
98
|
+
- `FontFamily{Base,Mono}`
|
|
99
|
+
- `FontSizeVal{100-900}`
|
|
100
|
+
- `FontWeight{Light,Regular,Medium,Bold}`
|
|
101
|
+
- `FontLineHeight{None,Tight,Normal,Relaxed}`
|
|
102
|
+
- `Breakpoint{Small,Medium,Large,ExtraLarge}{Min,Max}`
|
|
103
|
+
- *Example*:
|
|
104
|
+
```javascript
|
|
105
|
+
export const ColorBaseBlueVal500 = "#3b82f6";
|
|
106
|
+
export const SpacingVal16 = "1rem";
|
|
107
|
+
export const BreakpointMediumMin = "37.5rem";
|
|
108
|
+
```
|
package/README.md
CHANGED
|
@@ -51,3 +51,37 @@ const styles = {
|
|
|
51
51
|
padding: SpacingVal16
|
|
52
52
|
};
|
|
53
53
|
```
|
|
54
|
+
|
|
55
|
+
## Breakpoints
|
|
56
|
+
|
|
57
|
+
The design system provides breakpoint tokens for responsive design.
|
|
58
|
+
|
|
59
|
+
### CSS
|
|
60
|
+
|
|
61
|
+
```css
|
|
62
|
+
@media (min-width: var(--breakpoint-medium-min)) {
|
|
63
|
+
.my-container {
|
|
64
|
+
width: 100%;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### SCSS
|
|
70
|
+
|
|
71
|
+
```scss
|
|
72
|
+
@media (min-width: $breakpoint-medium-min) {
|
|
73
|
+
.my-container {
|
|
74
|
+
width: 100%;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### JavaScript / TypeScript
|
|
80
|
+
|
|
81
|
+
```javascript
|
|
82
|
+
import { BreakpointMediumMin } from '@dezkareid/design-tokens';
|
|
83
|
+
|
|
84
|
+
if (window.matchMedia(`(min-width: ${BreakpointMediumMin})`).matches) {
|
|
85
|
+
// logic for medium screens and up
|
|
86
|
+
}
|
|
87
|
+
```
|
package/dist/css/variables.css
CHANGED
|
@@ -4,6 +4,14 @@
|
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
6
|
color-scheme: light dark;
|
|
7
|
+
--breakpoint-small-min: 0;
|
|
8
|
+
--breakpoint-small-max: 37.49rem;
|
|
9
|
+
--breakpoint-medium-min: 37.5rem;
|
|
10
|
+
--breakpoint-medium-max: 59.99rem;
|
|
11
|
+
--breakpoint-large-min: 60rem;
|
|
12
|
+
--breakpoint-large-max: 89.99rem;
|
|
13
|
+
--breakpoint-extra-large-min: 90rem;
|
|
14
|
+
--breakpoint-extra-large-max: 9999rem;
|
|
7
15
|
--color-base-blue-100: #dbeafe;
|
|
8
16
|
--color-base-blue-500: #3b82f6;
|
|
9
17
|
--color-base-blue-900: #1e3a8a;
|
|
@@ -46,22 +54,22 @@
|
|
|
46
54
|
--font-line-height-tight: 1.25;
|
|
47
55
|
--font-line-height-normal: 1.5;
|
|
48
56
|
--font-line-height-relaxed: 1.75;
|
|
49
|
-
--light-color-primary:
|
|
50
|
-
--dark-color-primary:
|
|
57
|
+
--light-color-primary: var(--color-base-blue-500);
|
|
58
|
+
--dark-color-primary: var(--color-base-blue-100);
|
|
51
59
|
--color-primary: light-dark(var(--light-color-primary), var(--dark-color-primary));
|
|
52
|
-
--light-color-success:
|
|
53
|
-
--dark-color-success:
|
|
60
|
+
--light-color-success: var(--color-base-green-500);
|
|
61
|
+
--dark-color-success: var(--color-base-green-900);
|
|
54
62
|
--color-success: light-dark(var(--light-color-success), var(--dark-color-success));
|
|
55
|
-
--light-color-background-primary:
|
|
56
|
-
--dark-color-background-primary:
|
|
63
|
+
--light-color-background-primary: var(--color-base-white);
|
|
64
|
+
--dark-color-background-primary: var(--color-base-gray-900);
|
|
57
65
|
--color-background-primary: light-dark(var(--light-color-background-primary), var(--dark-color-background-primary));
|
|
58
|
-
--light-color-background-secondary:
|
|
59
|
-
--dark-color-background-secondary:
|
|
66
|
+
--light-color-background-secondary: var(--color-base-gray-100);
|
|
67
|
+
--dark-color-background-secondary: var(--color-base-gray-500);
|
|
60
68
|
--color-background-secondary: light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary));
|
|
61
|
-
--light-color-text-primary:
|
|
62
|
-
--dark-color-text-primary:
|
|
69
|
+
--light-color-text-primary: var(--color-base-gray-900);
|
|
70
|
+
--dark-color-text-primary: var(--color-base-white);
|
|
63
71
|
--color-text-primary: light-dark(var(--light-color-text-primary), var(--dark-color-text-primary));
|
|
64
|
-
--light-color-text-inverse:
|
|
65
|
-
--dark-color-text-inverse:
|
|
72
|
+
--light-color-text-inverse: var(--color-base-white);
|
|
73
|
+
--dark-color-text-inverse: var(--color-base-gray-900);
|
|
66
74
|
--color-text-inverse: light-dark(var(--light-color-text-inverse), var(--dark-color-text-inverse));
|
|
67
75
|
}
|
package/dist/js/tokens.d.ts
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
+
export const BreakpointSmallMin: string;
|
|
6
|
+
export const BreakpointSmallMax: string;
|
|
7
|
+
export const BreakpointMediumMin: string;
|
|
8
|
+
export const BreakpointMediumMax: string;
|
|
9
|
+
export const BreakpointLargeMin: string;
|
|
10
|
+
export const BreakpointLargeMax: string;
|
|
11
|
+
export const BreakpointExtraLargeMin: string;
|
|
12
|
+
export const BreakpointExtraLargeMax: string;
|
|
5
13
|
export const ColorBaseBlueVal100: string;
|
|
6
14
|
export const ColorBaseBlueVal500: string;
|
|
7
15
|
export const ColorBaseBlueVal900: string;
|
package/dist/js/tokens.js
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
+
export const BreakpointSmallMin = "0";
|
|
6
|
+
export const BreakpointSmallMax = "37.49rem";
|
|
7
|
+
export const BreakpointMediumMin = "37.5rem";
|
|
8
|
+
export const BreakpointMediumMax = "59.99rem";
|
|
9
|
+
export const BreakpointLargeMin = "60rem";
|
|
10
|
+
export const BreakpointLargeMax = "89.99rem";
|
|
11
|
+
export const BreakpointExtraLargeMin = "90rem";
|
|
12
|
+
export const BreakpointExtraLargeMax = "9999rem";
|
|
5
13
|
export const ColorBaseBlueVal100 = "#dbeafe";
|
|
6
14
|
export const ColorBaseBlueVal500 = "#3b82f6";
|
|
7
15
|
export const ColorBaseBlueVal900 = "#1e3a8a";
|
package/dist/js/tokens.mjs
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
+
export const BreakpointSmallMin = "0";
|
|
6
|
+
export const BreakpointSmallMax = "37.49rem";
|
|
7
|
+
export const BreakpointMediumMin = "37.5rem";
|
|
8
|
+
export const BreakpointMediumMax = "59.99rem";
|
|
9
|
+
export const BreakpointLargeMin = "60rem";
|
|
10
|
+
export const BreakpointLargeMax = "89.99rem";
|
|
11
|
+
export const BreakpointExtraLargeMin = "90rem";
|
|
12
|
+
export const BreakpointExtraLargeMax = "9999rem";
|
|
5
13
|
export const ColorBaseBlueVal100 = "#dbeafe";
|
|
6
14
|
export const ColorBaseBlueVal500 = "#3b82f6";
|
|
7
15
|
export const ColorBaseBlueVal900 = "#1e3a8a";
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
$breakpoint-small-min: 0;
|
|
2
|
+
$breakpoint-small-max: 37.49rem;
|
|
3
|
+
$breakpoint-medium-min: 37.5rem;
|
|
4
|
+
$breakpoint-medium-max: 59.99rem;
|
|
5
|
+
$breakpoint-large-min: 60rem;
|
|
6
|
+
$breakpoint-large-max: 89.99rem;
|
|
7
|
+
$breakpoint-extra-large-min: 90rem;
|
|
8
|
+
$breakpoint-extra-large-max: 9999rem;
|
|
1
9
|
$color-base-blue-100: #dbeafe;
|
|
2
10
|
$color-base-blue-500: #3b82f6;
|
|
3
11
|
$color-base-blue-900: #1e3a8a;
|
|
@@ -12,18 +20,18 @@ $color-base-gray-500: #6b7280;
|
|
|
12
20
|
$color-base-gray-900: #111827;
|
|
13
21
|
$color-base-white: #ffffff;
|
|
14
22
|
$color-base-black: #000000;
|
|
15
|
-
$color-semantic-light-primary:
|
|
16
|
-
$color-semantic-light-success:
|
|
17
|
-
$color-semantic-light-background-primary:
|
|
18
|
-
$color-semantic-light-background-secondary:
|
|
19
|
-
$color-semantic-light-text-primary:
|
|
20
|
-
$color-semantic-light-text-inverse:
|
|
21
|
-
$color-semantic-dark-primary:
|
|
22
|
-
$color-semantic-dark-success:
|
|
23
|
-
$color-semantic-dark-background-primary:
|
|
24
|
-
$color-semantic-dark-background-secondary:
|
|
25
|
-
$color-semantic-dark-text-primary:
|
|
26
|
-
$color-semantic-dark-text-inverse:
|
|
23
|
+
$color-semantic-light-primary: $color-base-blue-500;
|
|
24
|
+
$color-semantic-light-success: $color-base-green-500;
|
|
25
|
+
$color-semantic-light-background-primary: $color-base-white;
|
|
26
|
+
$color-semantic-light-background-secondary: $color-base-gray-100;
|
|
27
|
+
$color-semantic-light-text-primary: $color-base-gray-900;
|
|
28
|
+
$color-semantic-light-text-inverse: $color-base-white;
|
|
29
|
+
$color-semantic-dark-primary: $color-base-blue-100;
|
|
30
|
+
$color-semantic-dark-success: $color-base-green-900;
|
|
31
|
+
$color-semantic-dark-background-primary: $color-base-gray-900;
|
|
32
|
+
$color-semantic-dark-background-secondary: $color-base-gray-500;
|
|
33
|
+
$color-semantic-dark-text-primary: $color-base-white;
|
|
34
|
+
$color-semantic-dark-text-inverse: $color-base-gray-900;
|
|
27
35
|
$spacing-0: 0;
|
|
28
36
|
$spacing-4: 0.25rem;
|
|
29
37
|
$spacing-8: 0.5rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dezkareid/design-tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Design tokens for dezkareid design system",
|
|
5
5
|
"main": "dist/js/tokens.js",
|
|
6
6
|
"module": "dist/js/tokens.mjs",
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"*.scss"
|
|
11
11
|
],
|
|
12
12
|
"files": [
|
|
13
|
-
"dist"
|
|
13
|
+
"dist",
|
|
14
|
+
"AGENTS.md"
|
|
14
15
|
],
|
|
15
16
|
"publishConfig": {
|
|
16
17
|
"access": "public",
|
|
@@ -32,15 +33,10 @@
|
|
|
32
33
|
"url": "https://github.com/dezkareid/dezkareid/issues"
|
|
33
34
|
},
|
|
34
35
|
"homepage": "https://github.com/dezkareid/dezkareid/tree/main/projects/dezkareid/design-system/design-tokens#readme",
|
|
35
|
-
"scripts": {
|
|
36
|
-
"build": "style-dictionary build --config sd.config.js",
|
|
37
|
-
"release": "semantic-release"
|
|
38
|
-
},
|
|
39
36
|
"devDependencies": {
|
|
40
|
-
"style-dictionary": "5.2.0"
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
"semantic-release-monorepo": "8.0.2"
|
|
37
|
+
"style-dictionary": "5.2.0"
|
|
38
|
+
},
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "style-dictionary build --config sd.config.js"
|
|
45
41
|
}
|
|
46
42
|
}
|