@alessandrogiordano/stk 1.1.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/README.md +100 -0
- package/build/css/tokens.css +588 -0
- package/build/js/tokens.js +591 -0
- package/build/json/tokens.json +696 -0
- package/package.json +43 -0
- package/tokens/base/borders.json +21 -0
- package/tokens/base/colors.json +17 -0
- package/tokens/base/elevation.json +11 -0
- package/tokens/base/motion.json +16 -0
- package/tokens/base/opacity.json +14 -0
- package/tokens/base/shades.json +965 -0
- package/tokens/base/shadows.json +35 -0
- package/tokens/base/spacing.json +12 -0
- package/tokens/base/typography.json +17 -0
- package/tokens/components/badge-status.json +66 -0
- package/tokens/components/button.json +152 -0
- package/tokens/components/card.json +19 -0
- package/tokens/components/checkbox.json +34 -0
- package/tokens/components/image.json +9 -0
- package/tokens/components/list-item.json +87 -0
- package/tokens/components/radio-button.json +46 -0
- package/tokens/components/spinner.json +30 -0
- package/tokens/components/text-input.json +47 -0
- package/tokens/components/tooltip.json +39 -0
- package/tokens/semantic/borders.json +18 -0
- package/tokens/semantic/icons.json +17 -0
- package/tokens/semantic/layout.json +11 -0
- package/tokens/semantic/states.json +29 -0
- package/tokens/semantic/surfaces.json +87 -0
- package/tokens/semantic/text.json +17 -0
- package/tokens/semantic/typography.json +49 -0
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@alessandrogiordano/stk",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "AI driven design system & workflow — OKLCH design tokens",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "build/js/tokens.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./build/js/tokens.js",
|
|
9
|
+
"./css": "./build/css/tokens.css",
|
|
10
|
+
"./json": "./build/json/tokens.json"
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"build/",
|
|
14
|
+
"tokens/"
|
|
15
|
+
],
|
|
16
|
+
"publishConfig": {
|
|
17
|
+
"access": "public"
|
|
18
|
+
},
|
|
19
|
+
"scripts": {
|
|
20
|
+
"generate-shades": "node scripts/generate-shades.js",
|
|
21
|
+
"build-tokens": "cd style-dictionary && style-dictionary build --config config.cjs",
|
|
22
|
+
"sync-tokens": "cp tokens/base/shades.json ../../apps/storybook/src/tokens/shades.json && cp tokens/base/opacity.json ../../apps/storybook/src/tokens/opacity.json && cp tokens/semantic/*.json ../../apps/storybook/src/tokens/semantic/ && cp build/css/tokens.css ../../apps/storybook/src/tokens/tokens.css",
|
|
23
|
+
"build": "npm run generate-shades && npm run build-tokens && npm run sync-tokens",
|
|
24
|
+
"build-plugin": "node scripts/build-plugin.js",
|
|
25
|
+
"proxy": "node figma-plugin/proxy.cjs",
|
|
26
|
+
"storybook": "cd ../../apps/storybook && npm run storybook",
|
|
27
|
+
"storybook:build": "cd ../../apps/storybook && npm run build-storybook",
|
|
28
|
+
"pull-from-figma": "node --env-file=.env scripts/pull-from-figma.js",
|
|
29
|
+
"audit": "node scripts/audit-components.js",
|
|
30
|
+
"audit:a11y": "node scripts/a11y/build-audit-json.js",
|
|
31
|
+
"audit:playwright": "node scripts/a11y/playwright-runner.js",
|
|
32
|
+
"playwright:install": "node_modules/.bin/playwright install chromium",
|
|
33
|
+
"generate-component": "node --env-file=.env scripts/generate-component.js"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@anthropic-ai/sdk": "^0.36.0",
|
|
37
|
+
"@figma/code-connect": "^1.4.2",
|
|
38
|
+
"@playwright/test": "^1.59.1",
|
|
39
|
+
"axe-core": "^4.11.4",
|
|
40
|
+
"jsdom": "^29.1.1",
|
|
41
|
+
"style-dictionary": "^3.9.2"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"radius": {
|
|
3
|
+
"none": { "value": "0px", "type": "borderRadius" },
|
|
4
|
+
"xs": { "value": "2px", "type": "borderRadius" },
|
|
5
|
+
"sm": { "value": "4px", "type": "borderRadius" },
|
|
6
|
+
"sm-md": { "value": "6px", "type": "borderRadius", "$description": "Between sm and md — used for overlay components (tooltip, popover)" },
|
|
7
|
+
"md": { "value": "8px", "type": "borderRadius" },
|
|
8
|
+
"lg": { "value": "16px", "type": "borderRadius" },
|
|
9
|
+
"xl": { "value": "24px", "type": "borderRadius" },
|
|
10
|
+
"circular": { "value": "100px", "type": "borderRadius", "$description": "Use on square elements to make circles" },
|
|
11
|
+
"pill": { "value": "100px", "type": "borderRadius", "$description": "Use on rectangular elements for pill shape" }
|
|
12
|
+
},
|
|
13
|
+
"border": {
|
|
14
|
+
"width": {
|
|
15
|
+
"sm": { "value": "1px", "type": "borderWidth" },
|
|
16
|
+
"md": { "value": "2px", "type": "borderWidth" },
|
|
17
|
+
"lg": { "value": "4px", "type": "borderWidth" },
|
|
18
|
+
"xl": { "value": "8px", "type": "borderWidth" }
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"brand": {
|
|
4
|
+
"palette-1": { "value": "#2563EB" },
|
|
5
|
+
"palette-2": { "value": "#4F46E5" },
|
|
6
|
+
"palette-3": { "value": "#7C3AED" },
|
|
7
|
+
"palette-4": { "value": "#DB2777" },
|
|
8
|
+
"palette-5": { "value": "#DC2626" },
|
|
9
|
+
"palette-6": { "value": "#EA580C" },
|
|
10
|
+
"palette-7": { "value": "#D97706" },
|
|
11
|
+
"palette-8": { "value": "#16A34A" },
|
|
12
|
+
"palette-9": { "value": "#0D9488" },
|
|
13
|
+
"palette-10": { "value": "#0891B2" },
|
|
14
|
+
"palette-11": { "value": "#525252" }
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"elevation": {
|
|
3
|
+
"base": { "value": "0", "type": "number", "$description": "Default, no stacking" },
|
|
4
|
+
"raised": { "value": "10", "type": "number", "$description": "Cards, dropdowns" },
|
|
5
|
+
"sticky": { "value": "100", "type": "number", "$description": "Sticky headers, toolbars" },
|
|
6
|
+
"overlay": { "value": "200", "type": "number", "$description": "Overlays, backdrops" },
|
|
7
|
+
"modal": { "value": "300", "type": "number", "$description": "Modals, dialogs" },
|
|
8
|
+
"toast": { "value": "400", "type": "number", "$description": "Notifications, toasts" },
|
|
9
|
+
"tooltip": { "value": "500", "type": "number", "$description": "Tooltips" }
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"duration": {
|
|
3
|
+
"instant": { "value": "0ms", "type": "duration", "$description": "No animation" },
|
|
4
|
+
"fast": { "value": "100ms", "type": "duration", "$description": "Small UI elements, tooltips" },
|
|
5
|
+
"normal": { "value": "200ms", "type": "duration", "$description": "Default transitions" },
|
|
6
|
+
"slow": { "value": "300ms", "type": "duration", "$description": "Modals, panels" },
|
|
7
|
+
"slower": { "value": "500ms", "type": "duration", "$description": "Page transitions" }
|
|
8
|
+
},
|
|
9
|
+
"easing": {
|
|
10
|
+
"linear": { "value": "linear", "type": "cubicBezier", "$description": "Progress bars" },
|
|
11
|
+
"ease-in": { "value": "cubic-bezier(0.4, 0, 1, 1)", "type": "cubicBezier", "$description": "Elements leaving screen" },
|
|
12
|
+
"ease-out": { "value": "cubic-bezier(0, 0, 0.2, 1)", "type": "cubicBezier", "$description": "Elements entering screen" },
|
|
13
|
+
"ease-in-out": { "value": "cubic-bezier(0.4, 0, 0.2, 1)", "type": "cubicBezier", "$description": "Elements moving on screen" },
|
|
14
|
+
"spring": { "value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "type": "cubicBezier", "$description": "Playful, bouncy interactions" }
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"opacity": {
|
|
3
|
+
"0": { "value": "0", "type": "number", "$description": "Fully transparent" },
|
|
4
|
+
"8": { "value": "0.08", "type": "number", "$description": "Hover overlays" },
|
|
5
|
+
"12": { "value": "0.12", "type": "number", "$description": "Selected states" },
|
|
6
|
+
"16": { "value": "0.16", "type": "number", "$description": "Active/pressed" },
|
|
7
|
+
"24": { "value": "0.24", "type": "number", "$description": "Disabled borders" },
|
|
8
|
+
"32": { "value": "0.32", "type": "number", "$description": "Disabled backgrounds" },
|
|
9
|
+
"48": { "value": "0.48", "type": "number", "$description": "Medium overlays" },
|
|
10
|
+
"64": { "value": "0.64", "type": "number", "$description": "Strong overlays" },
|
|
11
|
+
"80": { "value": "0.80", "type": "number", "$description": "Near opaque" },
|
|
12
|
+
"100": { "value": "1", "type": "number", "$description": "Fully opaque" }
|
|
13
|
+
}
|
|
14
|
+
}
|