@mt-gloss/tokens 0.1.147 → 0.1.148

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 (8) hide show
  1. package/README.md +26 -3
  2. package/package.json +22 -2
  3. package/src/_css-vars.scss +5 -45
  4. package/src/_generated/_color-tokens.scss +45 -0
  5. package/src/_generated/_color-vars.scss +47 -0
  6. package/src/_tokens.scss +8 -46
  7. package/src/index.d.ts +43 -0
  8. package/src/index.js +87 -0
package/README.md CHANGED
@@ -1,6 +1,16 @@
1
1
  # @mt-gloss/tokens
2
2
 
3
- SCSS design tokens (colors, spacing, typography, shadows, radii) for the MarketTime design system.
3
+ Design tokens (colors, spacing, typography, shadows, radii) for the MarketTime design system — a **single source of truth** emitted in multiple formats.
4
+
5
+ Color values are authored ONCE in [`tokens/colors.tokens.json`](tokens/colors.tokens.json) (W3C DTCG format) and generated by **Style Dictionary v5** ([`build-tokens.mjs`](build-tokens.mjs)) into:
6
+
7
+ | Output | File | Consumed as |
8
+ |---|---|---|
9
+ | SCSS `$vars` | `src/_generated/_color-tokens.scss` | `@use` → `$color-blue-600`, `$range-a` |
10
+ | CSS custom properties | `src/_generated/_color-vars.scss` | cascade → `var(--gloss-color-blue-600)`, `var(--gloss-range-a)` |
11
+ | Tree-shakeable JS/TS | `src/index.js` + `src/index.d.ts` | `import { rangeColors } from '@mt-gloss/tokens'` |
12
+
13
+ > **Colors-first (S0):** the color scale + the comparison-range (A/B/C) palette flow through the pipeline today; remaining tokens stay hand-authored in `src/_tokens.scss` / `src/_css-vars.scss` and are added incrementally. Regenerate with `nx build tokens` (also wired into the release `preVersionCommand`).
4
14
 
5
15
  ## Install
6
16
 
@@ -10,9 +20,22 @@ npm install @mt-gloss/tokens
10
20
 
11
21
  ## No Dependencies
12
22
 
13
- This package has no runtime or peer dependencies.
23
+ This package has no runtime or peer dependencies. (Style Dictionary is a build-time-only devDependency of the workspace; the published package ships pre-generated artifacts.)
24
+
25
+ ## Usage — JS values
26
+
27
+ ```typescript
28
+ import { rangeColors, rangeEmphasisColors, colors } from '@mt-gloss/tokens';
29
+
30
+ rangeColors.A.base; // '#2563EB' (comparison Range A fill)
31
+ rangeColors.B.light; // '#6EE7B7' (Range B gradient stop)
32
+ rangeEmphasisColors.A.base // '#1D4ED8' (Range A hover/emphasis)
33
+ colors.blue['600']; // '#2563eb'
34
+ ```
35
+
36
+ `rangeColors` / `rangeEmphasisColors` are the canonical source for the dashboard's ECharts comparison series **and** the date-picker's compare surfaces (which read `var(--gloss-range-a|b|c)` from the same source) — eliminating the historical chart-vs-picker color drift.
14
37
 
15
- ## Usage
38
+ ## Usage — SCSS
16
39
 
17
40
  In your Vite config:
18
41
 
package/package.json CHANGED
@@ -1,12 +1,32 @@
1
1
  {
2
2
  "name": "@mt-gloss/tokens",
3
- "version": "0.1.147",
3
+ "version": "0.1.148",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
8
+ "main": "./src/index.js",
9
+ "module": "./src/index.js",
10
+ "types": "./src/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "import": {
14
+ "types": "./src/index.d.ts",
15
+ "default": "./src/index.js"
16
+ },
17
+ "require": {
18
+ "types": "./src/index.d.ts",
19
+ "default": "./src/index.js"
20
+ },
21
+ "default": "./src/index.js"
22
+ },
23
+ "./src/*": "./src/*",
24
+ "./package.json": "./package.json"
25
+ },
8
26
  "files": [
9
- "src/**/*.scss"
27
+ "src/**/*.scss",
28
+ "src/index.js",
29
+ "src/index.d.ts"
10
30
  ],
11
31
  "sideEffects": [
12
32
  "**/*.scss"
package/src/_css-vars.scss CHANGED
@@ -3,53 +3,13 @@
3
3
  // Maps SCSS tokens to --gloss-* CSS vars
4
4
  // ============================================
5
5
  @use './tokens' as *;
6
+ // Family color scale (--gloss-color-*) AND the comparison-range palette
7
+ // (--gloss-range-a/b/c) are GENERATED from libs/tokens/tokens/colors.tokens.json
8
+ // (Style Dictionary v5) and emitted by this @use. The brand/text/bg/border
9
+ // aliases and all non-color tokens below remain hand-authored. See build-tokens.mjs.
10
+ @use './_generated/color-vars';
6
11
 
7
12
  :root {
8
- // --- Colors: Scale ---
9
- --gloss-color-white: #{$color-white};
10
- --gloss-color-gray-50: #{$color-gray-50};
11
- --gloss-color-gray-100: #{$color-gray-100};
12
- --gloss-color-gray-200: #{$color-gray-200};
13
- --gloss-color-gray-300: #{$color-gray-300};
14
- --gloss-color-gray-400: #{$color-gray-400};
15
- --gloss-color-gray-500: #{$color-gray-500};
16
- --gloss-color-gray-600: #{$color-gray-600};
17
- --gloss-color-gray-700: #{$color-gray-700};
18
- --gloss-color-gray-800: #{$color-gray-800};
19
- --gloss-color-gray-900: #{$color-gray-900};
20
-
21
- --gloss-color-blue-50: #{$color-blue-50};
22
- --gloss-color-blue-100: #{$color-blue-100};
23
- --gloss-color-blue-200: #{$color-blue-200};
24
- --gloss-color-blue-300: #{$color-blue-300};
25
- --gloss-color-blue-400: #{$color-blue-400};
26
- --gloss-color-blue-500: #{$color-blue-500};
27
- --gloss-color-blue-600: #{$color-blue-600};
28
- --gloss-color-blue-700: #{$color-blue-700};
29
- --gloss-color-blue-800: #{$color-blue-800};
30
- --gloss-color-blue-900: #{$color-blue-900};
31
-
32
- --gloss-color-green-50: #{$color-green-50};
33
- --gloss-color-green-100: #{$color-green-100};
34
- --gloss-color-green-200: #{$color-green-200};
35
- --gloss-color-green-500: #{$color-green-500};
36
- --gloss-color-green-600: #{$color-green-600};
37
- --gloss-color-green-700: #{$color-green-700};
38
-
39
- --gloss-color-red-50: #{$color-red-50};
40
- --gloss-color-red-100: #{$color-red-100};
41
- --gloss-color-red-200: #{$color-red-200};
42
- --gloss-color-red-300: #{$color-red-300};
43
- --gloss-color-red-400: #{$color-red-400};
44
- --gloss-color-red-500: #{$color-red-500};
45
- --gloss-color-red-600: #{$color-red-600};
46
- --gloss-color-red-700: #{$color-red-700};
47
-
48
- --gloss-color-amber-100: #{$color-amber-100};
49
- --gloss-color-amber-200: #{$color-amber-200};
50
- --gloss-color-amber-500: #{$color-amber-500};
51
- --gloss-color-amber-600: #{$color-amber-600};
52
-
53
13
  // --- Colors: Brand aliases ---
54
14
  --gloss-color-brand-primary: #{$alias-primary};
55
15
  --gloss-color-brand-primary-hover: #{$alias-primary-hover};
package/src/_generated/_color-tokens.scss ADDED
@@ -0,0 +1,45 @@
1
+ // AUTO-GENERATED by libs/tokens/build-tokens.mjs (Style Dictionary v5). DO NOT EDIT.
2
+ // Source of truth: libs/tokens/tokens/colors.tokens.json
3
+
4
+ $color-white: #ffffff;
5
+ $color-gray-50: #f9fafb;
6
+ $color-gray-100: #f3f4f6;
7
+ $color-gray-200: #e5e7eb;
8
+ $color-gray-300: #d1d5db;
9
+ $color-gray-400: #9ca3af;
10
+ $color-gray-500: #6b7280;
11
+ $color-gray-600: #4b5563;
12
+ $color-gray-700: #374151;
13
+ $color-gray-800: #1f2937;
14
+ $color-gray-900: #111827;
15
+ $color-blue-50: #eff6ff;
16
+ $color-blue-100: #dbeafe;
17
+ $color-blue-200: #bfdbfe;
18
+ $color-blue-300: #93c5fd;
19
+ $color-blue-400: #60a5fa;
20
+ $color-blue-500: #3b82f6;
21
+ $color-blue-600: #2563eb;
22
+ $color-blue-700: #1d4ed8;
23
+ $color-blue-800: #1e40af;
24
+ $color-blue-900: #1e3a8a;
25
+ $color-green-50: #f0fdf4;
26
+ $color-green-100: #dcfce7;
27
+ $color-green-200: #bbf7d0;
28
+ $color-green-500: #22c55e;
29
+ $color-green-600: #16a34a;
30
+ $color-green-700: #15803d;
31
+ $color-red-50: #fef2f2;
32
+ $color-red-100: #fee2e2;
33
+ $color-red-200: #fecaca;
34
+ $color-red-300: #fca5a5;
35
+ $color-red-400: #f87171;
36
+ $color-red-500: #ef4444;
37
+ $color-red-600: #dc2626;
38
+ $color-red-700: #b91c1c;
39
+ $color-amber-100: #fef3c7;
40
+ $color-amber-200: #fde68a;
41
+ $color-amber-500: #f59e0b;
42
+ $color-amber-600: #d97706;
43
+ $range-a: #2563eb;
44
+ $range-b: #10b981;
45
+ $range-c: #f59e0b;
package/src/_generated/_color-vars.scss ADDED
@@ -0,0 +1,47 @@
1
+ // AUTO-GENERATED by libs/tokens/build-tokens.mjs (Style Dictionary v5). DO NOT EDIT.
2
+ // Source of truth: libs/tokens/tokens/colors.tokens.json
3
+
4
+ :root {
5
+ --gloss-color-white: #ffffff;
6
+ --gloss-color-gray-50: #f9fafb;
7
+ --gloss-color-gray-100: #f3f4f6;
8
+ --gloss-color-gray-200: #e5e7eb;
9
+ --gloss-color-gray-300: #d1d5db;
10
+ --gloss-color-gray-400: #9ca3af;
11
+ --gloss-color-gray-500: #6b7280;
12
+ --gloss-color-gray-600: #4b5563;
13
+ --gloss-color-gray-700: #374151;
14
+ --gloss-color-gray-800: #1f2937;
15
+ --gloss-color-gray-900: #111827;
16
+ --gloss-color-blue-50: #eff6ff;
17
+ --gloss-color-blue-100: #dbeafe;
18
+ --gloss-color-blue-200: #bfdbfe;
19
+ --gloss-color-blue-300: #93c5fd;
20
+ --gloss-color-blue-400: #60a5fa;
21
+ --gloss-color-blue-500: #3b82f6;
22
+ --gloss-color-blue-600: #2563eb;
23
+ --gloss-color-blue-700: #1d4ed8;
24
+ --gloss-color-blue-800: #1e40af;
25
+ --gloss-color-blue-900: #1e3a8a;
26
+ --gloss-color-green-50: #f0fdf4;
27
+ --gloss-color-green-100: #dcfce7;
28
+ --gloss-color-green-200: #bbf7d0;
29
+ --gloss-color-green-500: #22c55e;
30
+ --gloss-color-green-600: #16a34a;
31
+ --gloss-color-green-700: #15803d;
32
+ --gloss-color-red-50: #fef2f2;
33
+ --gloss-color-red-100: #fee2e2;
34
+ --gloss-color-red-200: #fecaca;
35
+ --gloss-color-red-300: #fca5a5;
36
+ --gloss-color-red-400: #f87171;
37
+ --gloss-color-red-500: #ef4444;
38
+ --gloss-color-red-600: #dc2626;
39
+ --gloss-color-red-700: #b91c1c;
40
+ --gloss-color-amber-100: #fef3c7;
41
+ --gloss-color-amber-200: #fde68a;
42
+ --gloss-color-amber-500: #f59e0b;
43
+ --gloss-color-amber-600: #d97706;
44
+ --gloss-range-a: #2563eb;
45
+ --gloss-range-b: #10b981;
46
+ --gloss-range-c: #f59e0b;
47
+ }
package/src/_tokens.scss CHANGED
@@ -2,52 +2,14 @@
2
2
  // GLOSS UI KIT v4.4 — SHARED TOKENS
3
3
  // ============================================
4
4
 
5
- // --- COLORS ---
6
- $color-white: #ffffff;
7
- $color-gray-50: #f9fafb;
8
- $color-gray-100: #f3f4f6;
9
- $color-gray-200: #e5e7eb;
10
- $color-gray-300: #d1d5db;
11
- $color-gray-400: #9ca3af;
12
- $color-gray-500: #6b7280;
13
- $color-gray-600: #4b5563;
14
- $color-gray-700: #374151;
15
- $color-gray-800: #1f2937;
16
- $color-gray-900: #111827;
17
-
18
- // Brand - Electric Blue
19
- $color-blue-50: #eff6ff;
20
- $color-blue-100: #dbeafe;
21
- $color-blue-200: #bfdbfe;
22
- $color-blue-300: #93c5fd;
23
- $color-blue-400: #60a5fa;
24
- $color-blue-500: #3b82f6;
25
- $color-blue-600: #2563eb;
26
- $color-blue-700: #1d4ed8;
27
- $color-blue-800: #1e40af;
28
- $color-blue-900: #1e3a8a;
29
-
30
- // Semantic
31
- $color-green-50: #f0fdf4;
32
- $color-green-100: #dcfce7;
33
- $color-green-200: #bbf7d0;
34
- $color-green-500: #22c55e;
35
- $color-green-600: #16a34a;
36
- $color-green-700: #15803d;
37
-
38
- $color-red-50: #fef2f2;
39
- $color-red-100: #fee2e2;
40
- $color-red-200: #fecaca;
41
- $color-red-300: #fca5a5;
42
- $color-red-400: #f87171;
43
- $color-red-500: #ef4444;
44
- $color-red-600: #dc2626;
45
- $color-red-700: #b91c1c;
46
-
47
- $color-amber-100: #fef3c7;
48
- $color-amber-200: #fde68a;
49
- $color-amber-500: #f59e0b;
50
- $color-amber-600: #d97706;
5
+ // --- COLORS (GENERATED) ---
6
+ // The raw color scale ($color-* families) AND the comparison-range palette
7
+ // ($range-a/b/c) are now emitted by Style Dictionary v5 from the single source
8
+ // libs/tokens/tokens/colors.tokens.json. See build-tokens.mjs. The aliases,
9
+ // shadows, metrics and typography below remain hand-authored (S0 is colors-first;
10
+ // the rest follow in a later round). DO NOT re-add hand-written $color-* here.
11
+ @use './_generated/color-tokens' as *;
12
+ @forward './_generated/color-tokens';
51
13
 
52
14
  // --- ALIASES ---
53
15
  $alias-primary: $color-blue-600;
package/src/index.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ /* AUTO-GENERATED by libs/tokens/build-tokens.mjs (Style Dictionary v5). DO NOT EDIT.
2
+ * Source of truth: libs/tokens/tokens/colors.tokens.json */
3
+
4
+ export interface RangeColor {
5
+ /** Base/fill hex (matches the picker compare-card + chart series fill). */
6
+ base: string;
7
+ /** Lighter gradient stop for the ECharts series fill. */
8
+ light: string;
9
+ /** Translucent rgba() shadow for the chart series. */
10
+ shadow: string;
11
+ }
12
+
13
+ export interface RangeEmphasisColor {
14
+ /** Darker base used on hover/emphasis. */
15
+ base: string;
16
+ /** Lighter emphasis gradient stop. */
17
+ light: string;
18
+ }
19
+
20
+ /**
21
+ * Raw color scale (gray/blue/green/red/amber families + white).
22
+ * @example
23
+ * import { colors } from '@mt-gloss/tokens';
24
+ * colors.blue['600'] // '#2563eb'
25
+ */
26
+ export declare const colors: Record<string, string | Record<string, string>>;
27
+
28
+ /**
29
+ * Comparison-mode A/B/C palette — the canonical single source consumed by BOTH
30
+ * the dashboard ECharts series colors AND the gloss date-picker compare surfaces.
31
+ * @example
32
+ * import { rangeColors } from '@mt-gloss/tokens';
33
+ * rangeColors.A.base // '#2563EB'
34
+ */
35
+ export declare const rangeColors: Record<'A' | 'B' | 'C', RangeColor>;
36
+
37
+ /**
38
+ * Comparison-mode A/B/C hover/emphasis palette (darker base + lighter gradient stop).
39
+ * @example
40
+ * import { rangeEmphasisColors } from '@mt-gloss/tokens';
41
+ * rangeEmphasisColors.A.base // '#1D4ED8'
42
+ */
43
+ export declare const rangeEmphasisColors: Record<'A' | 'B' | 'C', RangeEmphasisColor>;
package/src/index.js ADDED
@@ -0,0 +1,87 @@
1
+ /* AUTO-GENERATED by libs/tokens/build-tokens.mjs (Style Dictionary v5). DO NOT EDIT.
2
+ * Source of truth: libs/tokens/tokens/colors.tokens.json */
3
+
4
+ export const colors = {
5
+ "white": "#ffffff",
6
+ "gray": {
7
+ "50": "#f9fafb",
8
+ "100": "#f3f4f6",
9
+ "200": "#e5e7eb",
10
+ "300": "#d1d5db",
11
+ "400": "#9ca3af",
12
+ "500": "#6b7280",
13
+ "600": "#4b5563",
14
+ "700": "#374151",
15
+ "800": "#1f2937",
16
+ "900": "#111827"
17
+ },
18
+ "blue": {
19
+ "50": "#eff6ff",
20
+ "100": "#dbeafe",
21
+ "200": "#bfdbfe",
22
+ "300": "#93c5fd",
23
+ "400": "#60a5fa",
24
+ "500": "#3b82f6",
25
+ "600": "#2563eb",
26
+ "700": "#1d4ed8",
27
+ "800": "#1e40af",
28
+ "900": "#1e3a8a"
29
+ },
30
+ "green": {
31
+ "50": "#f0fdf4",
32
+ "100": "#dcfce7",
33
+ "200": "#bbf7d0",
34
+ "500": "#22c55e",
35
+ "600": "#16a34a",
36
+ "700": "#15803d"
37
+ },
38
+ "red": {
39
+ "50": "#fef2f2",
40
+ "100": "#fee2e2",
41
+ "200": "#fecaca",
42
+ "300": "#fca5a5",
43
+ "400": "#f87171",
44
+ "500": "#ef4444",
45
+ "600": "#dc2626",
46
+ "700": "#b91c1c"
47
+ },
48
+ "amber": {
49
+ "100": "#fef3c7",
50
+ "200": "#fde68a",
51
+ "500": "#f59e0b",
52
+ "600": "#d97706"
53
+ }
54
+ };
55
+
56
+ export const rangeColors = {
57
+ "A": {
58
+ "base": "#2563EB",
59
+ "light": "#60A5FA",
60
+ "shadow": "rgba(37, 99, 235, 0.2)"
61
+ },
62
+ "B": {
63
+ "base": "#10B981",
64
+ "light": "#6EE7B7",
65
+ "shadow": "rgba(16, 185, 129, 0.2)"
66
+ },
67
+ "C": {
68
+ "base": "#F59E0B",
69
+ "light": "#FCD34D",
70
+ "shadow": "rgba(245, 158, 11, 0.2)"
71
+ }
72
+ };
73
+
74
+ export const rangeEmphasisColors = {
75
+ "A": {
76
+ "base": "#1D4ED8",
77
+ "light": "#3B82F6"
78
+ },
79
+ "B": {
80
+ "base": "#059669",
81
+ "light": "#34D399"
82
+ },
83
+ "C": {
84
+ "base": "#D97706",
85
+ "light": "#FBBF24"
86
+ }
87
+ };