@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.
Files changed (31) hide show
  1. package/README.md +100 -0
  2. package/build/css/tokens.css +588 -0
  3. package/build/js/tokens.js +591 -0
  4. package/build/json/tokens.json +696 -0
  5. package/package.json +43 -0
  6. package/tokens/base/borders.json +21 -0
  7. package/tokens/base/colors.json +17 -0
  8. package/tokens/base/elevation.json +11 -0
  9. package/tokens/base/motion.json +16 -0
  10. package/tokens/base/opacity.json +14 -0
  11. package/tokens/base/shades.json +965 -0
  12. package/tokens/base/shadows.json +35 -0
  13. package/tokens/base/spacing.json +12 -0
  14. package/tokens/base/typography.json +17 -0
  15. package/tokens/components/badge-status.json +66 -0
  16. package/tokens/components/button.json +152 -0
  17. package/tokens/components/card.json +19 -0
  18. package/tokens/components/checkbox.json +34 -0
  19. package/tokens/components/image.json +9 -0
  20. package/tokens/components/list-item.json +87 -0
  21. package/tokens/components/radio-button.json +46 -0
  22. package/tokens/components/spinner.json +30 -0
  23. package/tokens/components/text-input.json +47 -0
  24. package/tokens/components/tooltip.json +39 -0
  25. package/tokens/semantic/borders.json +18 -0
  26. package/tokens/semantic/icons.json +17 -0
  27. package/tokens/semantic/layout.json +11 -0
  28. package/tokens/semantic/states.json +29 -0
  29. package/tokens/semantic/surfaces.json +87 -0
  30. package/tokens/semantic/text.json +17 -0
  31. package/tokens/semantic/typography.json +49 -0
package/tokens/semantic/borders.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "border": {
3
+ "default": { "value": "{color.shade.palette-11.5}", "type": "color", "$description": "Default borders" },
4
+ "subtle": { "value": "{color.shade.palette-11.4}", "type": "color", "$description": "Subtle dividers" },
5
+ "strong": { "value": "{color.shade.palette-11.7}", "type": "color", "$description": "Strong borders" },
6
+ "inverse": { "value": "{color.shade.palette-11.1}", "type": "color", "$description": "Borders on dark backgrounds" },
7
+ "focus": { "value": "{color.shade.palette-1.8}", "type": "color", "$description": "Focus rings" },
8
+ "brand-1": { "value": "{color.shade.palette-1.8}", "type": "color", "$description": "Brand 1 borders" },
9
+ "brand-2": { "value": "{color.shade.palette-2.8}", "type": "color", "$description": "Brand 2 borders" },
10
+ "brand-3": { "value": "{color.shade.palette-3.8}", "type": "color", "$description": "Brand 3 borders" },
11
+ "success": { "value": "{color.shade.palette-8.8}", "type": "color", "$description": "Success borders" },
12
+ "danger": { "value": "{color.shade.palette-5.8}", "type": "color", "$description": "Error borders" },
13
+ "alert": { "value": "{color.shade.palette-6.8}", "type": "color", "$description": "Warning borders" },
14
+ "info": { "value": "{color.shade.palette-7.8}", "type": "color", "$description": "Info borders" },
15
+ "news": { "value": "{color.shade.palette-8.8}", "type": "color", "$description": "News borders" },
16
+ "ai": { "value": "{color.shade.palette-9.8}", "type": "color", "$description": "AI borders" }
17
+ }
18
+ }
package/tokens/semantic/icons.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "icon": {
3
+ "default": { "value": "{color.shade.palette-11.12}", "type": "color", "$description": "Primary icons, default state" },
4
+ "subtle": { "value": "{color.shade.palette-11.9}", "type": "color", "$description": "Secondary icons, supporting UI" },
5
+ "subtlest": { "value": "{color.shade.palette-11.7}", "type": "color", "$description": "Placeholder, disabled icons" },
6
+ "inverse": { "value": "{color.shade.palette-11.1}", "type": "color", "$description": "Icons on dark backgrounds" },
7
+ "brand-1": { "value": "{color.shade.palette-1.10}", "type": "color", "$description": "Brand 1 colored icons" },
8
+ "brand-2": { "value": "{color.shade.palette-2.10}", "type": "color", "$description": "Brand 2 colored icons" },
9
+ "brand-3": { "value": "{color.shade.palette-3.10}", "type": "color", "$description": "Brand 3 colored icons" },
10
+ "success": { "value": "{color.shade.palette-8.10}", "type": "color", "$description": "Success state icons" },
11
+ "danger": { "value": "{color.shade.palette-5.10}", "type": "color", "$description": "Error / destructive icons" },
12
+ "alert": { "value": "{color.shade.palette-6.10}", "type": "color", "$description": "Warning icons" },
13
+ "info": { "value": "{color.shade.palette-7.10}", "type": "color", "$description": "Info icons" },
14
+ "news": { "value": "{color.shade.palette-8.10}", "type": "color", "$description": "News icons" },
15
+ "ai": { "value": "{color.shade.palette-9.10}", "type": "color", "$description": "AI content icons" }
16
+ }
17
+ }
package/tokens/semantic/layout.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "layout": {
3
+ "container": {
4
+ "max-width-sm": { "value": "560px", "type": "dimension", "description": "Forms, auth, single-column flows" },
5
+ "max-width-md": { "value": "800px", "type": "dimension", "description": "Articles, docs, narrow content" },
6
+ "max-width-lg": { "value": "1280px", "type": "dimension", "description": "Standard page layout" },
7
+ "padding-x": { "value": "{spacing.xl}", "type": "dimension" },
8
+ "padding-x-narrow": { "value": "{spacing.md}", "type": "dimension" }
9
+ }
10
+ }
11
+ }
package/tokens/semantic/states.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "state": {
3
+ "hover": {
4
+ "value": "{surface.neutral.default}",
5
+ "type": "color",
6
+ "$description": "Hover background — neutral surface"
7
+ },
8
+ "active": {
9
+ "value": "{surface.neutral.bold}",
10
+ "type": "color",
11
+ "$description": "Active/pressed background — neutral surface"
12
+ },
13
+ "selected": {
14
+ "value": "{opacity.12}",
15
+ "type": "number",
16
+ "$description": "Selected state overlay opacity"
17
+ },
18
+ "focus": {
19
+ "value": "{color.shade.palette-1.8}",
20
+ "type": "color",
21
+ "$description": "Focus ring color"
22
+ },
23
+ "disabled": {
24
+ "bg": { "value": "{color.shade.palette-11.2}", "type": "color", "$description": "Disabled background" },
25
+ "text": { "value": "{color.shade.palette-11.6}", "type": "color", "$description": "Disabled text" },
26
+ "border": { "value": "{color.shade.palette-11.4}", "type": "color", "$description": "Disabled border" }
27
+ }
28
+ }
29
+ }
package/tokens/semantic/surfaces.json ADDED
@@ -0,0 +1,87 @@
1
+ {
2
+ "surface": {
3
+ "brand-1": {
4
+ "subtlest": { "value": "{color.shade.palette-1.1}", "type": "color" },
5
+ "subtle": { "value": "{color.shade.palette-1.2}", "type": "color" },
6
+ "default": { "value": "{color.shade.palette-1.3}", "type": "color" },
7
+ "bold": { "value": "{color.shade.palette-1.5}", "type": "color" },
8
+ "strong": { "value": "{color.shade.palette-1.9}", "type": "color" },
9
+ "strongest":{ "value": "{color.shade.palette-1.10}", "type": "color" }
10
+ },
11
+ "brand-2": {
12
+ "subtlest": { "value": "{color.shade.palette-2.1}", "type": "color" },
13
+ "subtle": { "value": "{color.shade.palette-2.2}", "type": "color" },
14
+ "default": { "value": "{color.shade.palette-2.3}", "type": "color" },
15
+ "bold": { "value": "{color.shade.palette-2.5}", "type": "color" },
16
+ "strong": { "value": "{color.shade.palette-2.8}", "type": "color" },
17
+ "strongest":{ "value": "{color.shade.palette-2.10}", "type": "color" }
18
+ },
19
+ "brand-3": {
20
+ "subtlest": { "value": "{color.shade.palette-3.1}", "type": "color" },
21
+ "subtle": { "value": "{color.shade.palette-3.2}", "type": "color" },
22
+ "default": { "value": "{color.shade.palette-3.3}", "type": "color" },
23
+ "bold": { "value": "{color.shade.palette-3.5}", "type": "color" },
24
+ "strong": { "value": "{color.shade.palette-3.8}", "type": "color" },
25
+ "strongest":{ "value": "{color.shade.palette-3.10}", "type": "color" }
26
+ },
27
+ "success": {
28
+ "subtlest": { "value": "{color.shade.palette-8.1}", "type": "color" },
29
+ "subtle": { "value": "{color.shade.palette-8.2}", "type": "color" },
30
+ "default": { "value": "{color.shade.palette-8.3}", "type": "color" },
31
+ "bold": { "value": "{color.shade.palette-8.5}", "type": "color" },
32
+ "strong": { "value": "{color.shade.palette-8.8}", "type": "color" },
33
+ "strongest":{ "value": "{color.shade.palette-8.10}", "type": "color" }
34
+ },
35
+ "danger": {
36
+ "subtlest": { "value": "{color.shade.palette-5.1}", "type": "color" },
37
+ "subtle": { "value": "{color.shade.palette-5.2}", "type": "color" },
38
+ "default": { "value": "{color.shade.palette-5.3}", "type": "color" },
39
+ "bold": { "value": "{color.shade.palette-5.5}", "type": "color" },
40
+ "strong": { "value": "{color.shade.palette-5.8}", "type": "color" },
41
+ "strongest":{ "value": "{color.shade.palette-5.10}", "type": "color" }
42
+ },
43
+ "alert": {
44
+ "subtlest": { "value": "{color.shade.palette-6.1}", "type": "color" },
45
+ "subtle": { "value": "{color.shade.palette-6.2}", "type": "color" },
46
+ "default": { "value": "{color.shade.palette-6.3}", "type": "color" },
47
+ "bold": { "value": "{color.shade.palette-6.5}", "type": "color" },
48
+ "strong": { "value": "{color.shade.palette-6.8}", "type": "color" },
49
+ "strongest":{ "value": "{color.shade.palette-6.10}", "type": "color" }
50
+ },
51
+ "info": {
52
+ "subtlest": { "value": "{color.shade.palette-7.1}", "type": "color" },
53
+ "subtle": { "value": "{color.shade.palette-7.2}", "type": "color" },
54
+ "default": { "value": "{color.shade.palette-7.3}", "type": "color" },
55
+ "bold": { "value": "{color.shade.palette-7.5}", "type": "color" },
56
+ "strong": { "value": "{color.shade.palette-7.8}", "type": "color" },
57
+ "strongest":{ "value": "{color.shade.palette-7.10}", "type": "color" }
58
+ },
59
+ "news": {
60
+ "subtlest": { "value": "{color.shade.palette-8.1}", "type": "color" },
61
+ "subtle": { "value": "{color.shade.palette-8.2}", "type": "color" },
62
+ "default": { "value": "{color.shade.palette-8.3}", "type": "color" },
63
+ "bold": { "value": "{color.shade.palette-8.5}", "type": "color" },
64
+ "strong": { "value": "{color.shade.palette-8.8}", "type": "color" },
65
+ "strongest":{ "value": "{color.shade.palette-8.10}", "type": "color" }
66
+ },
67
+ "ai": {
68
+ "subtlest": { "value": "{color.shade.palette-9.1}", "type": "color" },
69
+ "subtle": { "value": "{color.shade.palette-9.2}", "type": "color" },
70
+ "default": { "value": "{color.shade.palette-9.3}", "type": "color" },
71
+ "bold": { "value": "{color.shade.palette-9.5}", "type": "color" },
72
+ "strong": { "value": "{color.shade.palette-9.8}", "type": "color" },
73
+ "strongest":{ "value": "{color.shade.palette-9.10}", "type": "color" }
74
+ },
75
+ "neutral": {
76
+ "white": { "value": "#ffffff", "type": "color" },
77
+ "subtlest": { "value": "{color.shade.palette-11.1}", "type": "color" },
78
+ "subtle": { "value": "{color.shade.palette-11.2}", "type": "color" },
79
+ "default": { "value": "{color.shade.palette-11.3}", "type": "color" },
80
+ "bold": { "value": "{color.shade.palette-11.5}", "type": "color" },
81
+ "strong": { "value": "{color.shade.palette-11.8}", "type": "color" },
82
+ "strongest":{ "value": "{color.shade.palette-11.10}", "type": "color" },
83
+ "black": { "value": "#000000", "type": "color" }
84
+ },
85
+ "transparent": { "value": "transparent", "type": "color", "$description": "Fully transparent surface — used for ghost loading states" }
86
+ }
87
+ }
package/tokens/semantic/text.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "text": {
3
+ "default": { "value": "{color.shade.palette-11.12}", "type": "color", "$description": "Primary body text" },
4
+ "subtle": { "value": "{color.shade.palette-11.9}", "type": "color", "$description": "Secondary text" },
5
+ "subtlest": { "value": "{color.shade.palette-11.8}", "type": "color", "$description": "Placeholder, disabled text — AA on white (4.61:1)" },
6
+ "inverse": { "value": "{color.shade.palette-11.1}", "type": "color", "$description": "Text on dark backgrounds" },
7
+ "brand-1": { "value": "{color.shade.palette-1.10}", "type": "color", "$description": "Brand 1 colored text" },
8
+ "brand-2": { "value": "{color.shade.palette-2.10}", "type": "color", "$description": "Brand 2 colored text" },
9
+ "brand-3": { "value": "{color.shade.palette-3.10}", "type": "color", "$description": "Brand 3 colored text" },
10
+ "success": { "value": "{color.shade.palette-8.10}", "type": "color", "$description": "Success text" },
11
+ "danger": { "value": "{color.shade.palette-5.10}", "type": "color", "$description": "Error text" },
12
+ "alert": { "value": "{color.shade.palette-6.10}", "type": "color", "$description": "Warning text" },
13
+ "info": { "value": "{color.shade.palette-7.10}", "type": "color", "$description": "Info text" },
14
+ "news": { "value": "{color.shade.palette-8.10}", "type": "color", "$description": "News text" },
15
+ "ai": { "value": "{color.shade.palette-9.10}", "type": "color", "$description": "AI content text" }
16
+ }
17
+ }
package/tokens/semantic/typography.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "text": {
3
+ "display": {
4
+ "light": { "value": { "fontSize": "{typography.size.xxxl}", "fontWeight": "300", "lineHeight": "1.1" }, "type": "typography" },
5
+ "regular": { "value": { "fontSize": "{typography.size.xxxl}", "fontWeight": "400", "lineHeight": "1.1" }, "type": "typography" },
6
+ "bold": { "value": { "fontSize": "{typography.size.xxxl}", "fontWeight": "700", "lineHeight": "1.1" }, "type": "typography" }
7
+ },
8
+ "title-1": {
9
+ "light": { "value": { "fontSize": "{typography.size.xxl}", "fontWeight": "300", "lineHeight": "1.2" }, "type": "typography" },
10
+ "regular": { "value": { "fontSize": "{typography.size.xxl}", "fontWeight": "400", "lineHeight": "1.2" }, "type": "typography" },
11
+ "bold": { "value": { "fontSize": "{typography.size.xxl}", "fontWeight": "700", "lineHeight": "1.2" }, "type": "typography" }
12
+ },
13
+ "title-2": {
14
+ "light": { "value": { "fontSize": "{typography.size.xl}", "fontWeight": "300", "lineHeight": "1.25" }, "type": "typography" },
15
+ "regular": { "value": { "fontSize": "{typography.size.xl}", "fontWeight": "400", "lineHeight": "1.25" }, "type": "typography" },
16
+ "bold": { "value": { "fontSize": "{typography.size.xl}", "fontWeight": "700", "lineHeight": "1.25" }, "type": "typography" }
17
+ },
18
+ "title-3": {
19
+ "light": { "value": { "fontSize": "{typography.size.lg}", "fontWeight": "300", "lineHeight": "1.3" }, "type": "typography" },
20
+ "regular": { "value": { "fontSize": "{typography.size.lg}", "fontWeight": "400", "lineHeight": "1.3" }, "type": "typography" },
21
+ "bold": { "value": { "fontSize": "{typography.size.lg}", "fontWeight": "700", "lineHeight": "1.3" }, "type": "typography" }
22
+ },
23
+ "title-4": {
24
+ "light": { "value": { "fontSize": "{typography.size.md}", "fontWeight": "300", "lineHeight": "1.35" }, "type": "typography" },
25
+ "regular": { "value": { "fontSize": "{typography.size.md}", "fontWeight": "400", "lineHeight": "1.35" }, "type": "typography" },
26
+ "bold": { "value": { "fontSize": "{typography.size.md}", "fontWeight": "700", "lineHeight": "1.35" }, "type": "typography" }
27
+ },
28
+ "body": {
29
+ "light": { "value": { "fontSize": "{typography.size.md}", "fontWeight": "300", "lineHeight": "1.5" }, "type": "typography" },
30
+ "regular": { "value": { "fontSize": "{typography.size.md}", "fontWeight": "400", "lineHeight": "1.5" }, "type": "typography" },
31
+ "bold": { "value": { "fontSize": "{typography.size.md}", "fontWeight": "700", "lineHeight": "1.5" }, "type": "typography" }
32
+ },
33
+ "body-sm": {
34
+ "light": { "value": { "fontSize": "{typography.size.sm}", "fontWeight": "300", "lineHeight": "1.5" }, "type": "typography" },
35
+ "regular": { "value": { "fontSize": "{typography.size.sm}", "fontWeight": "400", "lineHeight": "1.5" }, "type": "typography" },
36
+ "bold": { "value": { "fontSize": "{typography.size.sm}", "fontWeight": "700", "lineHeight": "1.5" }, "type": "typography" }
37
+ },
38
+ "label": {
39
+ "light": { "value": { "fontSize": "{typography.size.sm}", "fontWeight": "300", "lineHeight": "1.4" }, "type": "typography" },
40
+ "regular": { "value": { "fontSize": "{typography.size.sm}", "fontWeight": "400", "lineHeight": "1.4" }, "type": "typography" },
41
+ "bold": { "value": { "fontSize": "{typography.size.sm}", "fontWeight": "700", "lineHeight": "1.4" }, "type": "typography" }
42
+ },
43
+ "label-sm": {
44
+ "light": { "value": { "fontSize": "{typography.size.xs}", "fontWeight": "300", "lineHeight": "1.4" }, "type": "typography" },
45
+ "regular": { "value": { "fontSize": "{typography.size.xs}", "fontWeight": "400", "lineHeight": "1.4" }, "type": "typography" },
46
+ "bold": { "value": { "fontSize": "{typography.size.xs}", "fontWeight": "700", "lineHeight": "1.4" }, "type": "typography" }
47
+ }
48
+ }
49
+ }