@northstar-js/tokens 0.0.0-stage → 0.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 (13) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.d.ts +314 -0
  3. package/dist/index.js +308 -0
  4. package/dist/tailwind.css +80 -0
  5. package/dist/tokens.css +216 -0
  6. package/dist/tokens.json +305 -0
  7. package/package.json +40 -3
  8. package/src/component.json +10 -0
  9. package/src/primitive.json +38 -0
  10. package/src/scales.json +132 -0
  11. package/src/semantic.day.json +52 -0
  12. package/src/semantic.night.json +53 -0
  13. package/README.md +0 -3
package/src/primitive.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "$description": "Primitive layer: raw values. Never used by components; only semantic and component tokens reference them.",
3
+ "gray": {
4
+ "$type": "color",
5
+ "$description": "Day neutrals, light to dark.",
6
+ "0": { "$value": "#FFFFFF" },
7
+ "1": { "$value": "#F8F9FA" },
8
+ "2": { "$value": "#F1F3F5" },
9
+ "3": { "$value": "#E9ECEF" },
10
+ "4": { "$value": "#E6E8EB" },
11
+ "5": { "$value": "#D4D8DD" },
12
+ "6": { "$value": "#656A75" },
13
+ "7": { "$value": "#464C56" },
14
+ "8": { "$value": "#06080C" }
15
+ },
16
+ "night": {
17
+ "$type": "color",
18
+ "$description": "Night neutrals, dark to light.",
19
+ "0": { "$value": "#08090C" },
20
+ "1": { "$value": "#0D0F13" },
21
+ "2": { "$value": "#14161B" },
22
+ "3": { "$value": "#1B1E24" },
23
+ "4": { "$value": "#1E2128" },
24
+ "5": { "$value": "#2B2F38" },
25
+ "6": { "$value": "#848A94" },
26
+ "7": { "$value": "#A9AEB8" },
27
+ "8": { "$value": "#E8EAEE" }
28
+ },
29
+ "glacier": {
30
+ "$type": "color",
31
+ "100": { "$value": "#EDF3FB" },
32
+ "200": { "$value": "#B9CEEA" },
33
+ "300": { "$value": "#93B4E0" },
34
+ "700": { "$value": "#2F5D9A" },
35
+ "alpha-12": { "$value": "rgba(147, 180, 224, 0.12)" },
36
+ "alpha-35": { "$value": "rgba(147, 180, 224, 0.35)" }
37
+ }
38
+ }
package/src/scales.json ADDED
@@ -0,0 +1,132 @@
1
+ {
2
+ "$description": "Semantic layer, theme-independent scales.",
3
+ "font": {
4
+ "family": {
5
+ "$type": "fontFamily",
6
+ "ui": { "$value": "Inter, ui-sans-serif, system-ui, sans-serif" },
7
+ "mono": { "$value": "'IBM Plex Mono', ui-monospace, monospace" }
8
+ },
9
+ "weight": {
10
+ "$type": "fontWeight",
11
+ "regular": { "$value": 400 },
12
+ "medium": { "$value": 500 },
13
+ "semibold": { "$value": 600 }
14
+ },
15
+ "size": {
16
+ "$type": "dimension",
17
+ "11": { "$value": "11px" },
18
+ "12": { "$value": "12px" },
19
+ "13": { "$value": "13px" },
20
+ "15": { "$value": "15px" },
21
+ "18": { "$value": "18px" },
22
+ "24": { "$value": "24px" },
23
+ "32": { "$value": "32px" },
24
+ "48": { "$value": "48px" },
25
+ "base": { "$value": "{font.size.13}" }
26
+ },
27
+ "line-height": {
28
+ "$type": "dimension",
29
+ "11": { "$value": "16px" },
30
+ "12": { "$value": "18px" },
31
+ "13": { "$value": "20px" },
32
+ "15": { "$value": "22px" },
33
+ "18": { "$value": "26px" },
34
+ "24": { "$value": "32px" },
35
+ "32": { "$value": "40px" },
36
+ "48": { "$value": "52px" }
37
+ },
38
+ "numeric": { "figures": { "$type": "other", "$value": "tabular-nums" } }
39
+ },
40
+ "space": {
41
+ "$type": "dimension",
42
+ "2": { "$value": "2px" },
43
+ "4": { "$value": "4px" },
44
+ "6": { "$value": "6px" },
45
+ "8": { "$value": "8px" },
46
+ "12": { "$value": "12px" },
47
+ "16": { "$value": "16px" },
48
+ "20": { "$value": "20px" },
49
+ "24": { "$value": "24px" },
50
+ "32": { "$value": "32px" },
51
+ "40": { "$value": "40px" },
52
+ "48": { "$value": "48px" },
53
+ "64": { "$value": "64px" }
54
+ },
55
+ "size": {
56
+ "$type": "dimension",
57
+ "control": {
58
+ "sm": { "$value": "28px" },
59
+ "md": { "$value": "32px" },
60
+ "lg": { "$value": "36px" },
61
+ "xl": { "$value": "44px" }
62
+ },
63
+ "row": {
64
+ "sm": { "$value": "32px" },
65
+ "md": { "$value": "36px" },
66
+ "lg": { "$value": "40px" }
67
+ },
68
+ "icon": {
69
+ "sm": { "$value": "16px" },
70
+ "md": { "$value": "20px" },
71
+ "lg": { "$value": "24px" }
72
+ },
73
+ "target": {
74
+ "coarse": {
75
+ "$value": "44px",
76
+ "$description": "Minimum target for coarse pointers at every density."
77
+ }
78
+ }
79
+ },
80
+ "density": {
81
+ "$type": "dimension",
82
+ "compact": {
83
+ "control-height": { "$value": "{size.control.sm}" },
84
+ "row-height": { "$value": "{size.row.sm}" },
85
+ "row-padding": { "$value": "{space.4}" }
86
+ },
87
+ "default": {
88
+ "control-height": { "$value": "{size.control.md}" },
89
+ "row-height": { "$value": "{size.row.md}" },
90
+ "row-padding": { "$value": "{space.6}" }
91
+ },
92
+ "comfortable": {
93
+ "control-height": { "$value": "{size.control.lg}" },
94
+ "row-height": { "$value": "{size.row.lg}" },
95
+ "row-padding": { "$value": "{space.8}" }
96
+ }
97
+ },
98
+ "radius": {
99
+ "$type": "dimension",
100
+ "4": { "$value": "4px" },
101
+ "6": { "$value": "6px" },
102
+ "8": { "$value": "8px" },
103
+ "12": { "$value": "12px" },
104
+ "full": { "$value": "9999px" }
105
+ },
106
+ "z": {
107
+ "$type": "number",
108
+ "banner": { "$value": 30 },
109
+ "dropdown": { "$value": 40 },
110
+ "popover": { "$value": 50 },
111
+ "sheet": { "$value": 60 },
112
+ "dialog": { "$value": 70 },
113
+ "toast": { "$value": 80 },
114
+ "tooltip": { "$value": 90 }
115
+ },
116
+ "motion": {
117
+ "duration": {
118
+ "$type": "duration",
119
+ "120": { "$value": "120ms" },
120
+ "200": { "$value": "200ms" },
121
+ "320": { "$value": "320ms" },
122
+ "600": { "$value": "600ms" }
123
+ },
124
+ "easing": {
125
+ "$type": "cubicBezier",
126
+ "settle": { "$value": [0.2, 0, 0, 1], "$description": "Comes to rest; state changes." },
127
+ "enter": { "$value": [0, 0, 0.2, 1], "$description": "Decelerates in." },
128
+ "travel": { "$value": [0.4, 0, 0.2, 1], "$description": "Moves across the screen." },
129
+ "exit": { "$value": [0.4, 0, 1, 1], "$description": "Accelerates out." }
130
+ }
131
+ }
132
+ }
package/src/semantic.day.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "$description": "Semantic layer, Day theme.",
3
+ "color": {
4
+ "$type": "color",
5
+ "ground": { "$value": "{gray.0}" },
6
+ "surface": {
7
+ "1": { "$value": "{gray.1}" },
8
+ "2": { "$value": "{gray.2}" },
9
+ "3": { "$value": "{gray.3}" }
10
+ },
11
+ "line": {
12
+ "1": { "$value": "{gray.4}" },
13
+ "2": { "$value": "{gray.5}" }
14
+ },
15
+ "text": {
16
+ "1": { "$value": "{gray.8}" },
17
+ "2": { "$value": "{gray.7}" },
18
+ "3": { "$value": "{gray.6}" }
19
+ },
20
+ "signal": {
21
+ "default": { "$value": "{glacier.700}", "$description": "Marks and signal text." },
22
+ "fill": { "$value": "{glacier.300}", "$description": "Primary button fill." },
23
+ "wash": { "$value": "{glacier.100}" },
24
+ "edge": { "$value": "{glacier.200}" }
25
+ },
26
+ "focus": {
27
+ "default": { "$value": "{glacier.700}", "$description": "Focus ring." },
28
+ "halo": { "$value": "{glacier.alpha-35}" }
29
+ },
30
+ "data": {
31
+ "star": { "$value": "{gray.8}" },
32
+ "node": { "$value": "{glacier.700}" },
33
+ "band": { "$value": "{glacier.alpha-35}" },
34
+ "horizon": { "$value": "{glacier.700}" },
35
+ "meridian": { "$value": "{gray.5}" },
36
+ "graticule": { "$value": "{gray.4}" },
37
+ "likert": {
38
+ "1": { "$value": "{gray.4}" },
39
+ "2": { "$value": "{gray.5}" },
40
+ "3": { "$value": "{glacier.200}" },
41
+ "4": { "$value": "{glacier.300}" },
42
+ "5": { "$value": "{glacier.700}" }
43
+ }
44
+ }
45
+ },
46
+ "elevation": {
47
+ "$type": "shadow",
48
+ "1": { "$value": "0 1px 2px rgba(6, 8, 12, 0.06)" },
49
+ "2": { "$value": "0 4px 12px rgba(6, 8, 12, 0.08)" },
50
+ "3": { "$value": "0 12px 32px rgba(6, 8, 12, 0.12)" }
51
+ }
52
+ }
package/src/semantic.night.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "$description": "Semantic layer, Night theme (the default). A key named 'default' is dropped from the token name: color.signal.default is --ns-color-signal.",
3
+ "color": {
4
+ "$type": "color",
5
+ "ground": { "$value": "{night.0}" },
6
+ "surface": {
7
+ "1": { "$value": "{night.1}" },
8
+ "2": { "$value": "{night.2}" },
9
+ "3": { "$value": "{night.3}" }
10
+ },
11
+ "line": {
12
+ "1": { "$value": "{night.4}" },
13
+ "2": { "$value": "{night.5}" }
14
+ },
15
+ "text": {
16
+ "1": { "$value": "{night.8}" },
17
+ "2": { "$value": "{night.7}" },
18
+ "3": { "$value": "{night.6}" }
19
+ },
20
+ "signal": {
21
+ "default": { "$value": "{glacier.300}", "$description": "Marks and signal text." },
22
+ "fill": { "$value": "{glacier.300}", "$description": "Primary button fill." },
23
+ "wash": { "$value": "{glacier.alpha-12}" },
24
+ "edge": { "$value": "{glacier.300}" }
25
+ },
26
+ "focus": {
27
+ "default": { "$value": "{glacier.300}", "$description": "Focus ring." },
28
+ "halo": { "$value": "transparent" }
29
+ },
30
+ "data": {
31
+ "star": { "$value": "{night.8}" },
32
+ "node": { "$value": "{glacier.300}" },
33
+ "band": { "$value": "{glacier.alpha-35}" },
34
+ "horizon": { "$value": "{glacier.300}" },
35
+ "meridian": { "$value": "{night.5}" },
36
+ "graticule": { "$value": "{night.4}" },
37
+ "likert": {
38
+ "1": { "$value": "{night.5}" },
39
+ "2": { "$value": "{night.6}" },
40
+ "3": { "$value": "{night.7}" },
41
+ "4": { "$value": "{glacier.300}" },
42
+ "5": { "$value": "{glacier.100}" }
43
+ }
44
+ }
45
+ },
46
+ "elevation": {
47
+ "$type": "shadow",
48
+ "$description": "Night uses borders only.",
49
+ "1": { "$value": "none" },
50
+ "2": { "$value": "none" },
51
+ "3": { "$value": "none" }
52
+ }
53
+ }
package/README.md DELETED
@@ -1,3 +0,0 @@
1
- # Temporary Holding Version
2
-
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.