@surf-kit/tokens 0.1.1 → 0.1.2

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/dist/css/variables-brand.css +3 -1
  2. package/dist/css/variables-dark.css +3 -1
  3. package/dist/css/variables-light.css +164 -0
  4. package/dist/css/variables.css +3 -1
  5. package/package.json +6 -2
package/dist/css/variables-brand.css CHANGED
@@ -1,4 +1,5 @@
1
- [data-color-mode="brand"] {
1
+ @layer surf.tokens {
2
+ [data-color-mode="brand"] {
2
3
  --surf-color-teal-50: #f0fafb;
3
4
  --surf-color-teal-100: #e0f5f7;
4
5
  --surf-color-teal-300: #66c2cc;
@@ -159,4 +160,5 @@
159
160
  --surf-streaming-phase-bg: rgba(0, 145, 165, 0.08);
160
161
  --surf-streaming-phase-text: #0091a5;
161
162
  --surf-streaming-phase-icon: #0091a5;
163
+ }
162
164
  }
package/dist/css/variables-dark.css CHANGED
@@ -1,4 +1,5 @@
1
- [data-color-mode="dark"] {
1
+ @layer surf.tokens {
2
+ [data-color-mode="dark"] {
2
3
  --surf-color-teal-50: #f0fafb;
3
4
  --surf-color-teal-100: #e0f5f7;
4
5
  --surf-color-teal-300: #66c2cc;
@@ -159,4 +160,5 @@
159
160
  --surf-streaming-phase-bg: #f0fafb;
160
161
  --surf-streaming-phase-text: #0099a8;
161
162
  --surf-streaming-phase-icon: #0099a8;
163
+ }
162
164
  }
package/dist/css/variables-light.css ADDED
@@ -0,0 +1,164 @@
1
+ @layer surf.tokens {
2
+ [data-color-mode="light"] {
3
+ --surf-color-teal-50: #f0fafb;
4
+ --surf-color-teal-100: #e0f5f7;
5
+ --surf-color-teal-300: #66c2cc;
6
+ --surf-color-teal-500: #0099a8;
7
+ --surf-color-teal-600: #007f8c;
8
+ --surf-color-teal-700: #006673;
9
+ --surf-color-charcoal-50: #f5f5f5;
10
+ --surf-color-charcoal-100: #e8e8e8;
11
+ --surf-color-charcoal-300: #b0b0b0;
12
+ --surf-color-charcoal-500: #787878;
13
+ --surf-color-charcoal-700: #5a5a5a;
14
+ --surf-color-charcoal-900: #3c3c3c;
15
+ --surf-color-watermelon-100: #fde8ef;
16
+ --surf-color-watermelon-500: #e8175d;
17
+ --surf-color-watermelon-700: #b8124a;
18
+ --surf-color-lime-100: #f0f8e0;
19
+ --surf-color-lime-500: #8dc21f;
20
+ --surf-color-lime-700: #6b9317;
21
+ --surf-color-golden-100: #fef5e0;
22
+ --surf-color-golden-500: #f8b800;
23
+ --surf-color-golden-700: #c69300;
24
+ --surf-color-sky-500: #5bc8f5;
25
+ --surf-color-magenta-500: #9e1f82;
26
+ --surf-color-cyan-500: #00b2aa;
27
+ --surf-color-hotpink-500: #f0197c;
28
+ --surf-color-orangered-500: #f05a22;
29
+ --surf-color-purple-500: #3b1283;
30
+ --surf-color-neutral-50: #fafafa;
31
+ --surf-color-neutral-100: #f5f5f5;
32
+ --surf-color-neutral-200: #e8e8e8;
33
+ --surf-color-neutral-300: #d4d4d4;
34
+ --surf-color-neutral-600: #6b6b6b;
35
+ --surf-color-neutral-800: #454545;
36
+ --surf-color-neutral-900: #3c3c3c;
37
+ --surf-color-white: #ffffff;
38
+ --surf-color-brand-dark: #041f26;
39
+ --surf-color-brand-dark-panel: #0a3642;
40
+ --surf-color-brand-blue: #0091a5;
41
+ --surf-color-brand-cyan: #38bdd0;
42
+ --surf-color-brand-gold: #e1b989;
43
+ --surf-color-brand-gold-light: #f3d79c;
44
+ --surf-color-brand-cream: #f1f0e3;
45
+ --surf-color-brand-cream-warm: #f0e8b6;
46
+ --surf-color-brand-charcoal: #414142;
47
+ --surf-color-brand-watermelon: #e81152;
48
+ --surf-color-bg-canvas: #f5f5f5;
49
+ --surf-color-bg-surface: #ffffff;
50
+ --surf-color-bg-surface-raised: #ffffff;
51
+ --surf-color-bg-surface-sunken: #e8e8e8;
52
+ --surf-color-text-primary: #3c3c3c;
53
+ --surf-color-text-secondary: #787878;
54
+ --surf-color-text-muted: #b0b0b0;
55
+ --surf-color-text-inverse: #ffffff;
56
+ --surf-color-accent-primary: #0099a8;
57
+ --surf-color-accent-primary-hover: #007f8c;
58
+ --surf-color-accent-primary-active: #006673;
59
+ --surf-color-accent-primary-subtle: #e0f5f7;
60
+ --surf-color-accent-primary-subtlest: #f0fafb;
61
+ --surf-color-border-default: #e8e8e8;
62
+ --surf-color-border-strong: #d4d4d4;
63
+ --surf-color-border-interactive: #0099a8;
64
+ --surf-color-status-success: #8dc21f;
65
+ --surf-color-status-success-subtle: #f0f8e0;
66
+ --surf-color-status-warning: #f8b800;
67
+ --surf-color-status-warning-subtle: #fef5e0;
68
+ --surf-color-status-error: #e8175d;
69
+ --surf-color-status-error-subtle: #fde8ef;
70
+ --surf-color-status-info: #5bc8f5;
71
+ --surf-spacing-1: 4px;
72
+ --surf-spacing-2: 8px;
73
+ --surf-spacing-3: 12px;
74
+ --surf-spacing-4: 16px;
75
+ --surf-spacing-5: 20px;
76
+ --surf-spacing-6: 24px;
77
+ --surf-spacing-7: 28px;
78
+ --surf-spacing-8: 32px;
79
+ --surf-spacing-9: 36px;
80
+ --surf-spacing-10: 40px;
81
+ --surf-spacing-11: 44px;
82
+ --surf-spacing-12: 48px;
83
+ --surf-spacing-13: 52px;
84
+ --surf-spacing-14: 56px;
85
+ --surf-spacing-15: 60px;
86
+ --surf-spacing-16: 64px;
87
+ --surf-font-family-sans: Inter, system-ui, -apple-system, sans-serif;
88
+ --surf-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
89
+ --surf-font-family-display: 'Space Grotesk', system-ui, sans-serif;
90
+ --surf-font-size-xs: 12px;
91
+ --surf-font-size-sm: 14px;
92
+ --surf-font-size-base: 16px;
93
+ --surf-font-size-lg: 18px;
94
+ --surf-font-size-xl: 20px;
95
+ --surf-font-size-2xl: 24px;
96
+ --surf-font-size-3xl: 30px;
97
+ --surf-font-size-4xl: 36px;
98
+ --surf-font-weight-normal: 400;
99
+ --surf-font-weight-medium: 500;
100
+ --surf-font-weight-semibold: 600;
101
+ --surf-font-weight-bold: 700;
102
+ --surf-font-line-height-tight: 1.25rem;
103
+ --surf-font-line-height-normal: 1.5rem;
104
+ --surf-font-line-height-relaxed: 1.75rem;
105
+ --surf-radius-sm: 4px;
106
+ --surf-radius-md: 8px;
107
+ --surf-radius-lg: 12px;
108
+ --surf-radius-xl: 16px;
109
+ --surf-radius-full: 9999px;
110
+ --surf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
111
+ --surf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
112
+ --surf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
113
+ --surf-duration-instant: 100ms;
114
+ --surf-duration-fast: 200ms;
115
+ --surf-duration-normal: 300ms;
116
+ --surf-duration-slow: 500ms;
117
+ --surf-duration-streaming: 50ms;
118
+ --surf-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
119
+ --surf-easing-in: cubic-bezier(0.4, 0, 1, 1);
120
+ --surf-easing-out: cubic-bezier(0, 0, 0.2, 1);
121
+ --surf-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
122
+ --surf-button-bg-primary: #0099a8;
123
+ --surf-button-bg-primary-hover: #007f8c;
124
+ --surf-button-text-primary: #ffffff;
125
+ --surf-button-radius: 8px;
126
+ --surf-input-border: #e8e8e8;
127
+ --surf-input-border-focus: #0099a8;
128
+ --surf-input-bg: #ffffff;
129
+ --surf-confidence-high-bg: #f0f8e0;
130
+ --surf-confidence-high-text: #6b9317;
131
+ --surf-confidence-high-border: #8dc21f;
132
+ --surf-confidence-medium-bg: #fef5e0;
133
+ --surf-confidence-medium-text: #c69300;
134
+ --surf-confidence-medium-border: #f8b800;
135
+ --surf-confidence-low-bg: #fde8ef;
136
+ --surf-confidence-low-text: #b8124a;
137
+ --surf-confidence-low-border: #e8175d;
138
+ --surf-verification-passed-icon: #8dc21f;
139
+ --surf-verification-passed-bg: #f0f8e0;
140
+ --surf-verification-flagged-icon: #f8b800;
141
+ --surf-verification-flagged-bg: #fef5e0;
142
+ --surf-verification-failed-icon: #e8175d;
143
+ --surf-verification-failed-bg: #fde8ef;
144
+ --surf-source-card-bg: #ffffff;
145
+ --surf-source-card-border: #e8e8e8;
146
+ --surf-source-card-border-hover: #d4d4d4;
147
+ --surf-agent-coordinator-accent: #0099a8;
148
+ --surf-agent-hr-accent: #e8175d;
149
+ --surf-agent-it-accent: #5bc8f5;
150
+ --surf-agent-governance-accent: #3b1283;
151
+ --surf-agent-finance-accent: #f8b800;
152
+ --surf-agent-facilities-accent: #8dc21f;
153
+ --surf-agent-general-accent: #787878;
154
+ --surf-message-user-bg: #0099a8;
155
+ --surf-message-user-text: #ffffff;
156
+ --surf-message-assistant-bg: #ffffff;
157
+ --surf-message-assistant-text: #3c3c3c;
158
+ --surf-message-assistant-border: #e8e8e8;
159
+ --surf-streaming-cursor-color: #0099a8;
160
+ --surf-streaming-phase-bg: #f0fafb;
161
+ --surf-streaming-phase-text: #0099a8;
162
+ --surf-streaming-phase-icon: #0099a8;
163
+ }
164
+ }
package/dist/css/variables.css CHANGED
@@ -2,7 +2,8 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- :root {
5
+ @layer surf.tokens {
6
+ :root {
6
7
  --surf-color-teal-50: #f0fafb;
7
8
  --surf-color-teal-100: #e0f5f7;
8
9
  --surf-color-teal-300: #66c2cc;
@@ -163,4 +164,5 @@
163
164
  --surf-streaming-phase-bg: var(--surf-color-accent-primary-subtlest);
164
165
  --surf-streaming-phase-text: var(--surf-color-accent-primary);
165
166
  --surf-streaming-phase-icon: var(--surf-color-accent-primary);
167
+ }
166
168
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@surf-kit/tokens",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Design tokens for surf-kit — colors, spacing, typography as CSS, JSON, and TypeScript",
5
5
  "keywords": [
6
6
  "design-tokens",
@@ -19,9 +19,13 @@
19
19
  "types": "dist/ts/tokens.d.ts",
20
20
  "exports": {
21
21
  "./css": "./dist/css/variables.css",
22
+ "./css/light": "./dist/css/variables-light.css",
22
23
  "./css/dark": "./dist/css/variables-dark.css",
23
24
  "./css/brand": "./dist/css/variables-brand.css",
24
- "./ts": "./dist/ts/tokens.ts",
25
+ "./ts": {
26
+ "types": "./dist/ts/tokens.d.ts",
27
+ "default": "./dist/ts/tokens.js"
28
+ },
25
29
  "./json": "./dist/json/tokens.json",
26
30
  ".": "./dist/ts/tokens.js"
27
31
  },