@mt-gloss/tokens 0.0.3

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 (5) hide show
  1. package/README.md +39 -0
  2. package/package.json +11 -0
  3. package/src/_root.scss +105 -0
  4. package/src/_tokens.scss +133 -0
  5. package/src/index.scss +3 -0
package/README.md ADDED
@@ -0,0 +1,39 @@
1
+ # @mt-gloss/tokens
2
+
3
+ SCSS design tokens (colors, spacing, typography, shadows, radii) for the MarketTime design system.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @mt-gloss/tokens
9
+ ```
10
+
11
+ ## No Dependencies
12
+
13
+ This package has no runtime or peer dependencies.
14
+
15
+ ## Usage
16
+
17
+ In your Vite config:
18
+
19
+ ```typescript
20
+ css: {
21
+ preprocessorOptions: {
22
+ scss: {
23
+ additionalData: `@use "@mt-gloss/tokens/src/tokens" as *;\n`,
24
+ loadPaths: [path.resolve(__dirname, 'node_modules')]
25
+ }
26
+ }
27
+ }
28
+ ```
29
+
30
+ Or import directly in SCSS:
31
+
32
+ ```scss
33
+ @use '@mt-gloss/tokens/src/tokens' as *;
34
+
35
+ .my-component {
36
+ color: $color-gray-900;
37
+ padding: $space-4;
38
+ }
39
+ ```
package/package.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "name": "@mt-gloss/tokens",
3
+ "version": "0.0.3",
4
+ "type": "module",
5
+ "files": [
6
+ "src/**/*.scss"
7
+ ],
8
+ "sideEffects": [
9
+ "**/*.scss"
10
+ ]
11
+ }
package/src/_root.scss ADDED
@@ -0,0 +1,105 @@
1
+ @use './tokens' as *;
2
+
3
+ // ============================================
4
+ // CSS CUSTOM PROPERTIES
5
+ // ============================================
6
+ :root {
7
+ --color-white: #{$color-white};
8
+ --color-gray-50: #{$color-gray-50};
9
+ --color-gray-100: #{$color-gray-100};
10
+ --color-gray-200: #{$color-gray-200};
11
+ --color-gray-300: #{$color-gray-300};
12
+ --color-gray-400: #{$color-gray-400};
13
+ --color-gray-500: #{$color-gray-500};
14
+ --color-gray-600: #{$color-gray-600};
15
+ --color-gray-700: #{$color-gray-700};
16
+ --color-gray-800: #{$color-gray-800};
17
+ --color-gray-900: #{$color-gray-900};
18
+ --color-blue-50: #{$color-blue-50};
19
+ --color-blue-100: #{$color-blue-100};
20
+ --color-blue-200: #{$color-blue-200};
21
+ --color-blue-300: #{$color-blue-300};
22
+ --color-blue-400: #{$color-blue-400};
23
+ --color-blue-500: #{$color-blue-500};
24
+ --color-blue-600: #{$color-blue-600};
25
+ --color-blue-700: #{$color-blue-700};
26
+ --color-blue-800: #{$color-blue-800};
27
+ --color-blue-900: #{$color-blue-900};
28
+ --color-green-50: #{$color-green-50};
29
+ --color-green-100: #{$color-green-100};
30
+ --color-green-500: #{$color-green-500};
31
+ --color-green-600: #{$color-green-600};
32
+ --color-green-700: #15803d;
33
+ --color-red-50: #{$color-red-50};
34
+ --color-red-100: #{$color-red-100};
35
+ --color-red-200: #{$color-red-200};
36
+ --color-red-400: #{$color-red-400};
37
+ --color-red-500: #{$color-red-500};
38
+ --color-red-600: #{$color-red-600};
39
+ --color-red-700: #{$color-red-700};
40
+ --color-amber-100: #{$color-amber-100};
41
+ --color-amber-200: #{$color-amber-200};
42
+ --color-amber-500: #{$color-amber-500};
43
+ --color-amber-600: #{$color-amber-600};
44
+ --alias-primary: #{$alias-primary};
45
+ --alias-primary-hover: #{$alias-primary-hover};
46
+ --alias-primary-active: #{$alias-primary-active};
47
+ --alias-text-primary: #{$alias-text-primary};
48
+ --alias-text-secondary: #{$alias-text-secondary};
49
+ --alias-text-tertiary: #{$alias-text-tertiary};
50
+ --alias-text-inverse: #{$alias-text-inverse};
51
+ --alias-text-error: #{$alias-text-error};
52
+ --alias-text-success: #{$alias-text-success};
53
+ --alias-text-link: #{$alias-text-link};
54
+ --alias-bg-page: #{$alias-bg-page};
55
+ --alias-bg-sidebar: #{$alias-bg-sidebar};
56
+ --alias-bg-surface: #{$alias-bg-surface};
57
+ --alias-bg-muted: #{$alias-bg-muted};
58
+ --alias-bg-hover: #{$alias-bg-hover};
59
+ --alias-bg-disabled: #{$alias-bg-disabled};
60
+ --alias-bg-error: #{$alias-bg-error};
61
+ --alias-bg-secondary: #{$alias-bg-secondary};
62
+ --alias-border-default: #{$alias-border-default};
63
+ --alias-border-hover: #{$alias-border-hover};
64
+ --alias-border-focus: #{$alias-border-focus};
65
+ --alias-border-success: #{$alias-border-success};
66
+ --alias-border-error: #{$alias-border-error};
67
+ --shadow-input-default: #{$shadow-input-default};
68
+ --shadow-elevation-hover: #{$shadow-elevation-hover};
69
+ --shadow-input-focus: #{$shadow-input-focus};
70
+ --shadow-input-success-focus: #{$shadow-input-success-focus};
71
+ --shadow-input-error: #{$shadow-input-error};
72
+ --shadow-input-error-focus: #{$shadow-input-error-focus};
73
+ --shadow-input-disabled: #{$shadow-input-disabled};
74
+ --shadow-button-default: #{$shadow-button-default};
75
+ --shadow-button-hover: #{$shadow-button-hover};
76
+ --shadow-button-active: #{$shadow-button-active};
77
+ --shadow-card: #{$shadow-card};
78
+ --radius-xs: #{$radius-xs};
79
+ --radius-sm: #{$radius-sm};
80
+ --radius-md: #{$radius-md};
81
+ --radius-lg: #{$radius-lg};
82
+ --radius-xl: #{$radius-xl};
83
+ --radius-full: #{$radius-full};
84
+ --space-1: #{$space-1};
85
+ --space-2: #{$space-2};
86
+ --space-3: #{$space-3};
87
+ --space-4: #{$space-4};
88
+ --space-5: #{$space-5};
89
+ --space-6: #{$space-6};
90
+ --space-8: #{$space-8};
91
+ --space-10: #{$space-10};
92
+ --space-12: #{$space-12};
93
+ --space-16: #{$space-16};
94
+ --font-display: #{$font-display};
95
+ --font-body: #{$font-body};
96
+ --font-mono: #{$font-mono};
97
+ --text-xs: #{$text-xs};
98
+ --text-sm: #{$text-sm};
99
+ --text-base: #{$text-base};
100
+ --text-lg: #{$text-lg};
101
+ --text-xl: #{$text-xl};
102
+ --text-2xl: #{$text-2xl};
103
+ --text-3xl: #{$text-3xl};
104
+ --text-4xl: #{$text-4xl};
105
+ }
package/src/_tokens.scss ADDED
@@ -0,0 +1,133 @@
1
+ // ============================================
2
+ // GLOSS UI KIT v4.4 — SHARED TOKENS
3
+ // ============================================
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;
51
+
52
+ // --- ALIASES ---
53
+ $alias-primary: $color-blue-600;
54
+ $alias-primary-hover: $color-blue-700;
55
+ $alias-primary-active: $color-blue-800;
56
+
57
+ $alias-text-primary: $color-gray-800;
58
+ $alias-text-secondary: $color-gray-500;
59
+ $alias-text-tertiary: $color-gray-400;
60
+ $alias-text-inverse: $color-white;
61
+ $alias-text-error: $color-red-600;
62
+ $alias-text-success: $color-green-600;
63
+ $alias-text-link: $color-blue-500;
64
+
65
+ $alias-bg-page: $color-gray-50;
66
+ $alias-bg-sidebar: $color-white;
67
+ $alias-bg-surface: $color-white;
68
+ $alias-bg-muted: $color-gray-50;
69
+ $alias-bg-hover: linear-gradient(180deg, #fff 0%, #fafafa 100%);
70
+ $alias-bg-disabled: linear-gradient(180deg, #e5e7eb 0%, #f3f4f6 100%);
71
+ $alias-bg-error: linear-gradient(180deg, #fee2e2 0%, #fef2f2 100%);
72
+ $alias-bg-secondary: $color-gray-100;
73
+
74
+ $alias-border-default: $color-gray-200;
75
+ $alias-border-hover: $color-gray-300;
76
+ $alias-border-focus: $color-blue-500;
77
+ $alias-border-success: $color-green-500;
78
+ $alias-border-error: $color-red-500;
79
+
80
+ // --- SHADOWS ---
81
+ $shadow-input-default: inset 0 2px 4px rgba(0,0,0,0.06), inset 0 1px 2px rgba(0,0,0,0.04);
82
+ $shadow-elevation-hover: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
83
+
84
+ $shadow-input-focus: 0 1px 2px rgba(59,130,246,0.1), 0 4px 12px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.08), 0 0 0 3px rgba(59,130,246,0.2);
85
+
86
+ $shadow-input-success-hover: 0 1px 2px rgba(34,197,94,0.08), 0 4px 12px rgba(34,197,94,0.1), 0 0 0 3px rgba(34,197,94,0.1);
87
+ $shadow-input-success-focus: 0 1px 2px rgba(34,197,94,0.08), 0 4px 12px rgba(34,197,94,0.1), 0 0 0 3px rgba(34,197,94,0.18);
88
+
89
+ $shadow-input-error: inset 0 2px 4px rgba(239,68,68,0.1);
90
+ $shadow-input-error-hover: 0 1px 2px rgba(239,68,68,0.08), 0 4px 12px rgba(239,68,68,0.1), 0 0 0 3px rgba(239,68,68,0.1);
91
+ $shadow-input-error-focus: 0 1px 2px rgba(239,68,68,0.08), 0 4px 12px rgba(239,68,68,0.1), 0 0 0 3px rgba(239,68,68,0.18);
92
+
93
+ $shadow-input-disabled: inset 0 1px 2px rgba(0,0,0,0.03);
94
+
95
+ $shadow-button-default: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
96
+ $shadow-button-hover: 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
97
+ $shadow-button-active: 0 1px 1px rgba(0,0,0,0.1), inset 0 2px 4px rgba(0,0,0,0.1);
98
+
99
+ $shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08);
100
+ $shadow-sidebar: 1px 0 0 $alias-border-default;
101
+
102
+ // --- METRICS ---
103
+ $radius-xs: 4px;
104
+ $radius-sm: 6px;
105
+ $radius-md: 10px;
106
+ $radius-lg: 14px;
107
+ $radius-xl: 20px;
108
+ $radius-full: 9999px;
109
+
110
+ $space-1: 4px;
111
+ $space-2: 8px;
112
+ $space-3: 12px;
113
+ $space-4: 16px;
114
+ $space-5: 20px;
115
+ $space-6: 24px;
116
+ $space-8: 32px;
117
+ $space-10: 40px;
118
+ $space-12: 48px;
119
+ $space-16: 64px;
120
+
121
+ // --- TYPOGRAPHY ---
122
+ $font-display: 'DM Serif Display', Georgia, serif;
123
+ $font-body: 'Plus Jakarta Sans', sans-serif;
124
+ $font-mono: 'JetBrains Mono', monospace;
125
+
126
+ $text-xs: 0.6875rem;
127
+ $text-sm: 0.8125rem;
128
+ $text-base: 0.9375rem;
129
+ $text-lg: 1.125rem;
130
+ $text-xl: 1.25rem;
131
+ $text-2xl: 1.5rem;
132
+ $text-3xl: 1.875rem;
133
+ $text-4xl: 2.25rem;
package/src/index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // @mt-gloss/tokens — Design token entry point
2
+ @forward './tokens';
3
+ @forward './root';