@dataimago/tokens 0.1.0-alpha.3 → 0.1.0-alpha.5

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 (7) hide show
  1. package/dist/index.cjs +3 -3
  2. package/dist/index.mjs +3 -3
  3. package/dist/tokens.css +9 -7
  4. package/dist/tokens.scss +9 -7
  5. package/package.json +1 -1
  6. package/src/colors.json +6 -4
  7. package/src/theme-colors.json +3 -3
package/dist/index.cjs CHANGED
@@ -99,9 +99,9 @@ const tokens = {
99
99
  "description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
100
100
  },
101
101
  "accent": {
102
- "light": "#b54a27",
103
- "dark": "#b54a27",
104
- "description": "Accent — emancipation copper-red; moral-weight color (preserved from copper era as deliberate non-interactive emphasis)"
102
+ "light": "#1f618d",
103
+ "dark": "#3498DB",
104
+ "description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
105
105
  },
106
106
  "focus": {
107
107
  "light": "#434739",
package/dist/index.mjs CHANGED
@@ -99,9 +99,9 @@ const tokens = {
99
99
  "description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
100
100
  },
101
101
  "accent": {
102
- "light": "#b54a27",
103
- "dark": "#b54a27",
104
- "description": "Accent — emancipation copper-red; moral-weight color (preserved from copper era as deliberate non-interactive emphasis)"
102
+ "light": "#1f618d",
103
+ "dark": "#3498DB",
104
+ "description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
105
105
  },
106
106
  "focus": {
107
107
  "light": "#434739",
package/dist/tokens.css CHANGED
@@ -45,10 +45,12 @@
45
45
  --color-palette-copper-700: #913d15;
46
46
  --color-palette-copper-800: #753318;
47
47
  --color-palette-copper-900: #612b16;
48
- --color-palette-accent-50: #fdf2f2;
49
- --color-palette-accent-500: #b54a27;
50
- --color-palette-accent-600: #9a3e20;
51
- --color-palette-accent-700: #7d321a;
48
+ --color-palette-accent-50: #f0f8fc;
49
+ --color-palette-accent-300: #3498DB;
50
+ --color-palette-accent-400: #2980B9;
51
+ --color-palette-accent-500: #1f618d;
52
+ --color-palette-accent-600: #154d6f;
53
+ --color-palette-accent-700: #0f3a52;
52
54
  --color-palette-presentation-blue-50: #f0f8fc;
53
55
  --color-palette-presentation-blue-500: #3498DB;
54
56
  --color-palette-presentation-blue-600: #2980B9;
@@ -135,7 +137,7 @@
135
137
  --color-content-inverse: #fdf9f2;
136
138
  --color-interactive-primary: #434739;
137
139
  --color-interactive-hover: #363a2e;
138
- --color-interactive-accent: #b54a27;
140
+ --color-interactive-accent: #1f618d;
139
141
  --color-interactive-focus: #434739;
140
142
  --color-presentation-accent: #3498DB;
141
143
  --color-presentation-accent-hover: #2980B9;
@@ -172,7 +174,7 @@
172
174
  --color-content-inverse: #0c0a09;
173
175
  --color-interactive-primary: #98a384;
174
176
  --color-interactive-hover: #7e8a6b;
175
- --color-interactive-accent: #b54a27;
177
+ --color-interactive-accent: #3498DB;
176
178
  --color-interactive-focus: #98a384;
177
179
  --color-presentation-accent: #3498DB;
178
180
  --color-presentation-accent-hover: #2980B9;
@@ -210,7 +212,7 @@
210
212
  --color-content-inverse: #0c0a09;
211
213
  --color-interactive-primary: #98a384;
212
214
  --color-interactive-hover: #7e8a6b;
213
- --color-interactive-accent: #b54a27;
215
+ --color-interactive-accent: #3498DB;
214
216
  --color-interactive-focus: #98a384;
215
217
  --color-presentation-accent: #3498DB;
216
218
  --color-presentation-accent-hover: #2980B9;
package/dist/tokens.scss CHANGED
@@ -45,10 +45,12 @@
45
45
  --color-palette-copper-700: #913d15;
46
46
  --color-palette-copper-800: #753318;
47
47
  --color-palette-copper-900: #612b16;
48
- --color-palette-accent-50: #fdf2f2;
49
- --color-palette-accent-500: #b54a27;
50
- --color-palette-accent-600: #9a3e20;
51
- --color-palette-accent-700: #7d321a;
48
+ --color-palette-accent-50: #f0f8fc;
49
+ --color-palette-accent-300: #3498DB;
50
+ --color-palette-accent-400: #2980B9;
51
+ --color-palette-accent-500: #1f618d;
52
+ --color-palette-accent-600: #154d6f;
53
+ --color-palette-accent-700: #0f3a52;
52
54
  --color-palette-presentation-blue-50: #f0f8fc;
53
55
  --color-palette-presentation-blue-500: #3498DB;
54
56
  --color-palette-presentation-blue-600: #2980B9;
@@ -135,7 +137,7 @@
135
137
  --color-content-inverse: #fdf9f2;
136
138
  --color-interactive-primary: #434739;
137
139
  --color-interactive-hover: #363a2e;
138
- --color-interactive-accent: #b54a27;
140
+ --color-interactive-accent: #1f618d;
139
141
  --color-interactive-focus: #434739;
140
142
  --color-presentation-accent: #3498DB;
141
143
  --color-presentation-accent-hover: #2980B9;
@@ -172,7 +174,7 @@
172
174
  --color-content-inverse: #0c0a09;
173
175
  --color-interactive-primary: #98a384;
174
176
  --color-interactive-hover: #7e8a6b;
175
- --color-interactive-accent: #b54a27;
177
+ --color-interactive-accent: #3498DB;
176
178
  --color-interactive-focus: #98a384;
177
179
  --color-presentation-accent: #3498DB;
178
180
  --color-presentation-accent-hover: #2980B9;
@@ -210,7 +212,7 @@
210
212
  --color-content-inverse: #0c0a09;
211
213
  --color-interactive-primary: #98a384;
212
214
  --color-interactive-hover: #7e8a6b;
213
- --color-interactive-accent: #b54a27;
215
+ --color-interactive-accent: #3498DB;
214
216
  --color-interactive-focus: #98a384;
215
217
  --color-presentation-accent: #3498DB;
216
218
  --color-presentation-accent-hover: #2980B9;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens",
3
- "version": "0.1.0-alpha.3",
3
+ "version": "0.1.0-alpha.5",
4
4
  "description": "dataimago design tokens — canonical JSON sources plus generated TS/CSS artifacts",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/colors.json CHANGED
@@ -58,10 +58,12 @@
58
58
  "900": { "value": "#612b16", "description": "Copper scale — deep foundation" }
59
59
  },
60
60
  "accent": {
61
- "50": { "value": "#fdf2f2", "description": "Accent scale — faint wash for emancipation-coded panels" },
62
- "500": { "value": "#b54a27", "description": "Accent scale — canonical moral/emancipation accent" },
63
- "600": { "value": "#9a3e20", "description": "Accent scale — hover on accent" },
64
- "700": { "value": "#7d321a", "description": "Accent scale — pressed state" }
61
+ "50": { "value": "#f0f8fc", "description": "Accent scale — pale wash for accent-tinted backgrounds (iteration-2; was #fdf2f2 emancipation-coded panels in iteration-1)" },
62
+ "300": { "value": "#3498DB", "description": "Accent scale — dark-mode canonical (5.41:1 on stone-900, AA). Sourced from presentation-blue-500 — Flat-UI peter-river. Iteration-2 introduces this stop to enable mode-aware role mapping; see wiki/decisions/iteration-2-blue-accent.md." },
63
+ "400": { "value": "#2980B9", "description": "Accent scale — dark-mode hover/emphasized variant (sourced from presentation-blue-600 — Flat-UI belize-hole)" },
64
+ "500": { "value": "#1f618d", "description": "Accent scale — light-mode canonical (5.68:1 on stone-100, AA; 6.66:1 white-on-color, AA). Sourced from presentation-blue-700. Iteration-2 sky-blue moral-weight; supersedes iteration-1's #b54a27 emancipation-copper-red. The scale-name is preserved (consumer-side text-accent-500 keeps working with the same mental model); only the value moved." },
65
+ "600": { "value": "#154d6f", "description": "Accent scale — light-mode hover (HSL-interpolated from accent-500: H≈205°, S+4, L−6)" },
66
+ "700": { "value": "#0f3a52", "description": "Accent scale — light-mode pressed/active (HSL-interpolated from accent-500: H≈205°, S+8, L−13)" }
65
67
  },
66
68
  "presentation-blue": {
67
69
  "50": { "value": "#f0f8fc", "description": "Presentation-blue scale — pale wash for reveal.js callout backgrounds" },
package/src/theme-colors.json CHANGED
@@ -98,9 +98,9 @@
98
98
  "description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
99
99
  },
100
100
  "accent": {
101
- "light": "#b54a27",
102
- "dark": "#b54a27",
103
- "description": "Accent — emancipation copper-red; moral-weight color (preserved from copper era as deliberate non-interactive emphasis)"
101
+ "light": "#1f618d",
102
+ "dark": "#3498DB",
103
+ "description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
104
104
  },
105
105
  "focus": {
106
106
  "light": "#434739",