@northstar-js/tokens 0.1.0 → 0.2.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/dist/index.d.ts +328 -4
  2. package/dist/index.js +328 -4
  3. package/dist/tailwind.css +16 -0
  4. package/dist/tokens.css +275 -0
  5. package/dist/tokens.json +328 -4
  6. package/package.json +1 -1
  7. package/src/component.json +2 -1
  8. package/src/primitive.json +1 -0
  9. package/src/scales.json +566 -76
  10. package/src/semantic.day.json +94 -0
  11. package/src/semantic.night.json +94 -0
package/src/semantic.day.json CHANGED
@@ -48,5 +48,99 @@
48
48
  "1": { "$value": "0 1px 2px rgba(6, 8, 12, 0.06)" },
49
49
  "2": { "$value": "0 4px 12px rgba(6, 8, 12, 0.08)" },
50
50
  "3": { "$value": "0 12px 32px rgba(6, 8, 12, 0.12)" }
51
+ },
52
+ "material": {
53
+ "$description": "Glass: translucent layered fill, rim highlight, specular sheen and a glacier glow. Components fall back to material.solid when transparency is reduced or backdrop-filter is unsupported.",
54
+ "glass": {
55
+ "$type": "color",
56
+ "fill": { "$value": "rgba(255, 255, 255, 0.5)" },
57
+ "tint": { "$value": "rgba(147, 180, 224, 0.08)", "$description": "Glacier tint layered over the fill." },
58
+ "edge": { "$value": "rgba(6, 8, 12, 0.08)", "$description": "Hairline border of a glass layer." },
59
+ "rim": { "$value": "rgba(255, 255, 255, 0.95)", "$description": "Specular rim on the top edge." },
60
+ "specular": { "$type": "other", "$value": "linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%)" }
61
+ },
62
+ "solid": { "$type": "color", "$value": "{gray.0}", "$description": "Opaque fallback for glass." },
63
+ "glow": { "$type": "color", "$value": "rgba(47, 93, 154, 0.24)", "$description": "Glacier glow around focused and pressed controls." },
64
+ "spotlight": { "$type": "color", "$value": "rgba(47, 93, 154, 0.09)", "$description": "Pointer-tracked spotlight wash." },
65
+ "shadow": { "$type": "shadow", "$value": "0 16px 40px -12px rgba(6, 8, 12, 0.18)" },
66
+ "hairline": { "$type": "color", "$value": "rgba(6, 8, 12, 0.06)", "$description": "The only border a borderless surface keeps, where separation needs it." },
67
+ "spin": {
68
+ "$description": "Machined spin: the default finish of every button, on glass and off it. A conic sweep of machined stops under a fine concentric grain, both centred on the button, so an icon-only circle is a turned knob. Ink is checked against the lightest and darkest stop of each body, ghost text on the faint wash and the disabled ink on matte (tooling/contrast).",
69
+ "stop": {
70
+ "$type": "color",
71
+ "$description": "The secondary body: seven machined stops round the conic sweep (the sweep closes on stop 1).",
72
+ "1": { "$value": "#C9CED5" },
73
+ "2": { "$value": "#F0F2F5", "$description": "Lightest stop; also the flat fill under prefers-contrast: more." },
74
+ "3": { "$value": "#B5BBC4" },
75
+ "4": { "$value": "#E4E7EB" },
76
+ "5": { "$value": "#AEB5BE", "$description": "Darkest stop." },
77
+ "6": { "$value": "#EAEDF0" },
78
+ "7": { "$value": "#B8BEC7" }
79
+ },
80
+ "signal-stop": {
81
+ "$type": "color",
82
+ "$description": "The Glacier-anodized primary (and tone=\"signal\") body.",
83
+ "1": { "$value": "#A9C0E2" },
84
+ "2": { "$value": "#D7E3F4", "$description": "Lightest stop." },
85
+ "3": { "$value": "#8FAAD2" },
86
+ "4": { "$value": "#C6D6EE" },
87
+ "5": { "$value": "#88A4CE", "$description": "Darkest stop." },
88
+ "6": { "$value": "#CCDBF0" },
89
+ "7": { "$value": "#93ADD4" }
90
+ },
91
+ "ink": { "$type": "color", "$value": "#0B0E12", "$description": "Text and icons on the secondary body." },
92
+ "signal-ink": { "$type": "color", "$value": "{gray.8}", "$description": "Text and icons on the Glacier body." },
93
+ "grain-dark": { "$type": "color", "$value": "rgba(0, 0, 0, 0.05)", "$description": "Dark ring of the concentric grain (1px of every 2px)." },
94
+ "grain-light": { "$type": "color", "$value": "rgba(255, 255, 255, 0.05)", "$description": "Light ring of the grain on the secondary body." },
95
+ "signal-grain-light": { "$type": "color", "$value": "rgba(255, 255, 255, 0.06)", "$description": "Light ring of the grain on the Glacier body." },
96
+ "emboss": { "$type": "color", "$value": "rgba(255, 255, 255, 0.4)", "$description": "The 1px light under the label: the text reads as cut into the metal." },
97
+ "sheen": { "$type": "color", "$value": "rgba(255, 255, 255, 0.38)", "$description": "Peak of the light band that slides across on hover and focus." },
98
+ "shadow": { "$type": "shadow", "$value": "inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(6, 8, 12, 0.2), 0 1px 3px rgba(6, 8, 12, 0.14)", "$description": "Bevel (light top edge, dark lower edge), outer hairline and a short drop." },
99
+ "shadow-press": { "$type": "shadow", "$value": "inset 0 1px 2px rgba(6, 8, 12, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(6, 8, 12, 0.2), 0 1px 1px rgba(6, 8, 12, 0.08)", "$description": "Pressed: the bevel flips, so the face reads as pushed in." },
100
+ "ghost": { "$type": "number", "$value": 0.4, "$description": "Opacity of the faint metal a ghost button takes on hover, focus and selection." },
101
+ "ghost-edge": { "$type": "color", "$value": "rgba(6, 8, 12, 0.08)", "$description": "Hairline round the ghost wash, so it reads as metal, not a flat fill." },
102
+ "matte": { "$type": "color", "$value": "{gray.3}", "$description": "Disabled: a flat matte body, no grain or sheen; color.line.2 keeps its edge." },
103
+ "matte-ink": { "$type": "color", "$value": "#6B717B", "$description": "Disabled label on matte (3:1, it is not actionable)." }
104
+ },
105
+ "liquid": {
106
+ "$description": "Liquid glass layers: glacier tint, specular highlight, rim, inner glow and drop shadow.",
107
+ "tint": { "$type": "color", "$value": "rgba(147, 180, 224, 0.10)" },
108
+ "highlight": { "$type": "other", "$value": "radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%)" },
109
+ "rim": { "$type": "color", "$value": "rgba(255, 255, 255, 0.95)" },
110
+ "rim-low": { "$type": "color", "$value": "rgba(6, 8, 12, 0.06)", "$description": "Lower rim and hairline." },
111
+ "inner": { "$type": "color", "$value": "rgba(255, 255, 255, 0.5)", "$description": "Inner shadow light." },
112
+ "shadow": { "$type": "shadow", "$value": "0 10px 30px -12px rgba(6, 8, 12, 0.16)" }
113
+ },
114
+ "texture": {
115
+ "$description": "Tactile texture of the soft button finish (finish=\"soft\"): fine brushed lines (light and dark, two coprime periods), a soft top highlight and a low inner bevel. signal-* is tuned for the Glacier primary. Text on every textured button body is checked with the lines and highlight composited (tooling/contrast).",
116
+ "$type": "color",
117
+ "light": { "$value": "rgba(255, 255, 255, 0.5)", "$description": "Light brushed line." },
118
+ "dark": { "$value": "rgba(6, 8, 12, 0.03)", "$description": "Dark brushed line." },
119
+ "top": { "$value": "rgba(255, 255, 255, 0.8)", "$description": "Peak of the soft top highlight." },
120
+ "bevel-hi": { "$value": "rgba(255, 255, 255, 0.95)", "$description": "Inner top edge of the bevel." },
121
+ "bevel-lo": { "$value": "rgba(6, 8, 12, 0.08)", "$description": "Inner lower edge of the bevel." },
122
+ "signal-light": { "$value": "rgba(255, 255, 255, 0.12)" },
123
+ "signal-dark": { "$value": "rgba(6, 8, 12, 0.04)" },
124
+ "signal-top": { "$value": "rgba(255, 255, 255, 0.26)" },
125
+ "signal-bevel-hi": { "$value": "rgba(255, 255, 255, 0.6)" },
126
+ "signal-bevel-lo": { "$value": "rgba(6, 8, 12, 0.14)" }
127
+ }
128
+ },
129
+ "backdrop": {
130
+ "$description": "Animated star backdrops (@northstar-js/react/backdrops). Decorative: the stars carry no meaning, but the ground is checked as a ground for text, and ink and signal as marks on it.",
131
+ "ground": { "$type": "color", "$value": "{gray.pale}", "$description": "Backdrop ground." },
132
+ "ink": { "$type": "color", "$value": "{gray.7}", "$description": "Stars." },
133
+ "signal": { "$type": "color", "$value": "{glacier.700}", "$description": "The few Glacier stars, links and the north star." },
134
+ "line": { "$type": "color", "$value": "{gray.5}", "$description": "Rings, meridians and graduations." },
135
+ "faint": { "$type": "color", "$value": "{gray.4}", "$description": "Unlit lattice points and spokes." },
136
+ "glow": {
137
+ "$type": "number",
138
+ "$description": "Peak opacities of the soft glows: nebulae, the orrery core and the interference band.",
139
+ "nebula": { "$value": 0.24 },
140
+ "haze": { "$value": 0.1 },
141
+ "core": { "$value": 0.22 },
142
+ "core-soft": { "$value": 0.07 },
143
+ "band": { "$value": 0.18 }
144
+ }
51
145
  }
52
146
  }
package/src/semantic.night.json CHANGED
@@ -49,5 +49,99 @@
49
49
  "1": { "$value": "none" },
50
50
  "2": { "$value": "none" },
51
51
  "3": { "$value": "none" }
52
+ },
53
+ "material": {
54
+ "$description": "Glass: translucent layered fill, rim highlight, specular sheen and a glacier glow. Components fall back to material.solid when transparency is reduced or backdrop-filter is unsupported.",
55
+ "glass": {
56
+ "$type": "color",
57
+ "fill": { "$value": "rgba(20, 22, 27, 0.4)" },
58
+ "tint": { "$value": "rgba(147, 180, 224, 0.06)", "$description": "Glacier tint layered over the fill." },
59
+ "edge": { "$value": "rgba(232, 234, 238, 0.12)", "$description": "Hairline border of a glass layer." },
60
+ "rim": { "$value": "rgba(255, 255, 255, 0.16)", "$description": "Specular rim on the top edge." },
61
+ "specular": { "$type": "other", "$value": "linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%)" }
62
+ },
63
+ "solid": { "$type": "color", "$value": "{night.2}", "$description": "Opaque fallback for glass." },
64
+ "glow": { "$type": "color", "$value": "{glacier.alpha-35}", "$description": "Glacier glow around focused and pressed controls." },
65
+ "spotlight": { "$type": "color", "$value": "rgba(147, 180, 224, 0.16)", "$description": "Pointer-tracked spotlight wash." },
66
+ "shadow": { "$type": "shadow", "$value": "0 24px 48px -12px rgba(0, 0, 0, 0.6)" },
67
+ "hairline": { "$type": "color", "$value": "rgba(232, 234, 238, 0.06)", "$description": "The only border a borderless surface keeps, where separation needs it." },
68
+ "spin": {
69
+ "$description": "Machined spin: the default finish of every button, on glass and off it. A conic sweep of machined stops under a fine concentric grain, both centred on the button, so an icon-only circle is a turned knob. Ink is checked against the lightest and darkest stop of each body, ghost text on the faint wash and the disabled ink on matte (tooling/contrast).",
70
+ "stop": {
71
+ "$type": "color",
72
+ "$description": "The secondary body: seven machined stops round the conic sweep (the sweep closes on stop 1).",
73
+ "1": { "$value": "#C9CED5" },
74
+ "2": { "$value": "#F0F2F5", "$description": "Lightest stop; also the flat fill under prefers-contrast: more." },
75
+ "3": { "$value": "#B5BBC4" },
76
+ "4": { "$value": "#E4E7EB" },
77
+ "5": { "$value": "#AEB5BE", "$description": "Darkest stop." },
78
+ "6": { "$value": "#EAEDF0" },
79
+ "7": { "$value": "#B8BEC7" }
80
+ },
81
+ "signal-stop": {
82
+ "$type": "color",
83
+ "$description": "The Glacier-anodized primary (and tone=\"signal\") body.",
84
+ "1": { "$value": "#A9C0E2" },
85
+ "2": { "$value": "#D7E3F4", "$description": "Lightest stop." },
86
+ "3": { "$value": "#8FAAD2" },
87
+ "4": { "$value": "#C6D6EE" },
88
+ "5": { "$value": "#88A4CE", "$description": "Darkest stop." },
89
+ "6": { "$value": "#CCDBF0" },
90
+ "7": { "$value": "#93ADD4" }
91
+ },
92
+ "ink": { "$type": "color", "$value": "#0B0E12", "$description": "Text and icons on the secondary body." },
93
+ "signal-ink": { "$type": "color", "$value": "{gray.8}", "$description": "Text and icons on the Glacier body." },
94
+ "grain-dark": { "$type": "color", "$value": "rgba(0, 0, 0, 0.05)", "$description": "Dark ring of the concentric grain (1px of every 2px)." },
95
+ "grain-light": { "$type": "color", "$value": "rgba(255, 255, 255, 0.05)", "$description": "Light ring of the grain on the secondary body." },
96
+ "signal-grain-light": { "$type": "color", "$value": "rgba(255, 255, 255, 0.06)", "$description": "Light ring of the grain on the Glacier body." },
97
+ "emboss": { "$type": "color", "$value": "rgba(255, 255, 255, 0.4)", "$description": "The 1px light under the label: the text reads as cut into the metal." },
98
+ "sheen": { "$type": "color", "$value": "rgba(255, 255, 255, 0.38)", "$description": "Peak of the light band that slides across on hover and focus." },
99
+ "shadow": { "$type": "shadow", "$value": "inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35)", "$description": "Bevel (light top edge, dark lower edge), outer hairline and a short drop." },
100
+ "shadow-press": { "$type": "shadow", "$value": "inset 0 1px 2px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3)", "$description": "Pressed: the bevel flips, so the face reads as pushed in." },
101
+ "ghost": { "$type": "number", "$value": 0.16, "$description": "Opacity of the faint metal a ghost button takes on hover, focus and selection." },
102
+ "ghost-edge": { "$type": "color", "$value": "rgba(255, 255, 255, 0.1)", "$description": "Hairline round the ghost wash, so it reads as metal, not a flat fill." },
103
+ "matte": { "$type": "color", "$value": "{night.3}", "$description": "Disabled: a flat matte body, no grain or sheen; color.line.2 keeps its edge." },
104
+ "matte-ink": { "$type": "color", "$value": "{night.6}", "$description": "Disabled label on matte (3:1, it is not actionable)." }
105
+ },
106
+ "liquid": {
107
+ "$description": "Liquid glass layers: glacier tint, specular highlight, rim, inner glow and drop shadow.",
108
+ "tint": { "$type": "color", "$value": "rgba(147, 180, 224, 0.05)" },
109
+ "highlight": { "$type": "other", "$value": "radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%)" },
110
+ "rim": { "$type": "color", "$value": "rgba(255, 255, 255, 0.22)" },
111
+ "rim-low": { "$type": "color", "$value": "rgba(255, 255, 255, 0.06)", "$description": "Lower rim and hairline." },
112
+ "inner": { "$type": "color", "$value": "rgba(255, 255, 255, 0.05)", "$description": "Inner shadow light." },
113
+ "shadow": { "$type": "shadow", "$value": "0 10px 30px -10px rgba(0, 0, 0, 0.55)" }
114
+ },
115
+ "texture": {
116
+ "$description": "Tactile texture of the soft button finish (finish=\"soft\"): fine brushed lines (light and dark, two coprime periods), a soft top highlight and a low inner bevel. signal-* is tuned for the Glacier primary. Text on every textured button body is checked with the lines and highlight composited (tooling/contrast).",
117
+ "$type": "color",
118
+ "light": { "$value": "rgba(255, 255, 255, 0.03)", "$description": "Light brushed line." },
119
+ "dark": { "$value": "rgba(0, 0, 0, 0.16)", "$description": "Dark brushed line." },
120
+ "top": { "$value": "rgba(255, 255, 255, 0.055)", "$description": "Peak of the soft top highlight." },
121
+ "bevel-hi": { "$value": "rgba(255, 255, 255, 0.075)", "$description": "Inner top edge of the bevel." },
122
+ "bevel-lo": { "$value": "rgba(0, 0, 0, 0.32)", "$description": "Inner lower edge of the bevel." },
123
+ "signal-light": { "$value": "rgba(255, 255, 255, 0.1)" },
124
+ "signal-dark": { "$value": "rgba(6, 8, 12, 0.045)" },
125
+ "signal-top": { "$value": "rgba(255, 255, 255, 0.22)" },
126
+ "signal-bevel-hi": { "$value": "rgba(255, 255, 255, 0.5)" },
127
+ "signal-bevel-lo": { "$value": "rgba(6, 8, 12, 0.2)" }
128
+ }
129
+ },
130
+ "backdrop": {
131
+ "$description": "Animated star backdrops (@northstar-js/react/backdrops). Decorative: the stars carry no meaning, but the ground is checked as a ground for text, and ink and signal as marks on it.",
132
+ "ground": { "$type": "color", "$value": "{night.0}", "$description": "Backdrop ground." },
133
+ "ink": { "$type": "color", "$value": "{night.8}", "$description": "Stars." },
134
+ "signal": { "$type": "color", "$value": "{glacier.300}", "$description": "The few Glacier stars, links and the north star." },
135
+ "line": { "$type": "color", "$value": "{night.5}", "$description": "Rings, meridians and graduations." },
136
+ "faint": { "$type": "color", "$value": "{night.4}", "$description": "Unlit lattice points and spokes." },
137
+ "glow": {
138
+ "$type": "number",
139
+ "$description": "Peak opacities of the soft glows: nebulae, the orrery core and the interference band.",
140
+ "nebula": { "$value": 0.13 },
141
+ "haze": { "$value": 0.04 },
142
+ "core": { "$value": 0.12 },
143
+ "core-soft": { "$value": 0.03 },
144
+ "band": { "$value": 0.08 }
145
+ }
52
146
  }
53
147
  }