@surf-kit/tokens 0.1.1

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 (9) hide show
  1. package/LICENSE +12 -0
  2. package/README.md +57 -0
  3. package/dist/css/variables-brand.css +162 -0
  4. package/dist/css/variables-dark.css +162 -0
  5. package/dist/css/variables.css +166 -0
  6. package/dist/json/tokens.json +162 -0
  7. package/dist/ts/tokens.d.ts +164 -0
  8. package/dist/ts/tokens.js +2966 -0
  9. package/package.json +50 -0
package/LICENSE ADDED
@@ -0,0 +1,12 @@
1
+ Copyright (c) 2026 surf-kit contributors
2
+
3
+ Permission to use, copy, modify, and/or distribute this software for any
4
+ purpose with or without fee is hereby granted.
5
+
6
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
7
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
8
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
9
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
10
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
11
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
12
+ PERFORMANCE OF THIS SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,57 @@
1
+ # @surf-kit/tokens
2
+
3
+ > Design tokens for surf-kit — colors, spacing, typography as CSS, JSON, and TypeScript
4
+
5
+ Part of the [surf-kit](https://github.com/barney-w/surf-kit) design system.
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ npm install @surf-kit/tokens
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### CSS Custom Properties
16
+
17
+ ```ts
18
+ // Light mode (default)
19
+ import '@surf-kit/tokens/css';
20
+
21
+ // Dark mode overrides
22
+ import '@surf-kit/tokens/css/dark';
23
+
24
+ // Brand mode (teal/gold theme)
25
+ import '@surf-kit/tokens/css/brand';
26
+ ```
27
+
28
+ ### TypeScript
29
+
30
+ ```ts
31
+ import tokens from '@surf-kit/tokens';
32
+ // tokens.color.primary, tokens.spacing.md, etc.
33
+ ```
34
+
35
+ ### JSON
36
+
37
+ ```ts
38
+ import tokens from '@surf-kit/tokens/json';
39
+ ```
40
+
41
+ ## How It Works
42
+
43
+ Built with [Style Dictionary v4](https://styledictionary.com/) using the [DTCG](https://www.designtokens.org/) format. Source tokens live in the monorepo under `src/` and are compiled to CSS, JSON, and TypeScript outputs.
44
+
45
+ Three CSS builds are generated:
46
+ - **Light** — `:root` custom properties
47
+ - **Dark** — `:root` overrides for dark mode
48
+ - **Brand** — `[data-color-mode="brand"]` overrides for the teal/gold brand theme
49
+
50
+ ## Docs
51
+
52
+ - [Storybook](https://barney-w.github.io/surf-kit/storybook)
53
+ - [Contributing](https://github.com/barney-w/surf-kit/blob/main/CONTRIBUTING.md)
54
+
55
+ ## License
56
+
57
+ [0BSD](./LICENSE)
package/dist/css/variables-brand.css ADDED
@@ -0,0 +1,162 @@
1
+ [data-color-mode="brand"] {
2
+ --surf-color-teal-50: #f0fafb;
3
+ --surf-color-teal-100: #e0f5f7;
4
+ --surf-color-teal-300: #66c2cc;
5
+ --surf-color-teal-500: #0099a8;
6
+ --surf-color-teal-600: #007f8c;
7
+ --surf-color-teal-700: #006673;
8
+ --surf-color-charcoal-50: #f5f5f5;
9
+ --surf-color-charcoal-100: #e8e8e8;
10
+ --surf-color-charcoal-300: #b0b0b0;
11
+ --surf-color-charcoal-500: #787878;
12
+ --surf-color-charcoal-700: #5a5a5a;
13
+ --surf-color-charcoal-900: #3c3c3c;
14
+ --surf-color-watermelon-100: #fde8ef;
15
+ --surf-color-watermelon-500: #e8175d;
16
+ --surf-color-watermelon-700: #b8124a;
17
+ --surf-color-lime-100: #f0f8e0;
18
+ --surf-color-lime-500: #8dc21f;
19
+ --surf-color-lime-700: #6b9317;
20
+ --surf-color-golden-100: #fef5e0;
21
+ --surf-color-golden-500: #f8b800;
22
+ --surf-color-golden-700: #c69300;
23
+ --surf-color-sky-500: #5bc8f5;
24
+ --surf-color-magenta-500: #9e1f82;
25
+ --surf-color-cyan-500: #00b2aa;
26
+ --surf-color-hotpink-500: #f0197c;
27
+ --surf-color-orangered-500: #f05a22;
28
+ --surf-color-purple-500: #3b1283;
29
+ --surf-color-neutral-50: #fafafa;
30
+ --surf-color-neutral-100: #f5f5f5;
31
+ --surf-color-neutral-200: #e8e8e8;
32
+ --surf-color-neutral-300: #d4d4d4;
33
+ --surf-color-neutral-600: #6b6b6b;
34
+ --surf-color-neutral-800: #454545;
35
+ --surf-color-neutral-900: #3c3c3c;
36
+ --surf-color-white: #ffffff;
37
+ --surf-color-brand-dark: #041f26;
38
+ --surf-color-brand-dark-panel: #0a3642;
39
+ --surf-color-brand-blue: #0091a5;
40
+ --surf-color-brand-cyan: #38bdd0;
41
+ --surf-color-brand-gold: #e1b989;
42
+ --surf-color-brand-gold-light: #f3d79c;
43
+ --surf-color-brand-cream: #f1f0e3;
44
+ --surf-color-brand-cream-warm: #f0e8b6;
45
+ --surf-color-brand-charcoal: #414142;
46
+ --surf-color-brand-watermelon: #e81152;
47
+ --surf-color-bg-canvas: #041f26;
48
+ --surf-color-bg-surface: #0a3642;
49
+ --surf-color-bg-surface-raised: #0d3f50;
50
+ --surf-color-bg-surface-sunken: #031519;
51
+ --surf-color-text-primary: #f1f0e3;
52
+ --surf-color-text-secondary: rgba(241, 240, 227, 0.6);
53
+ --surf-color-text-muted: rgba(241, 240, 227, 0.4);
54
+ --surf-color-text-inverse: #041f26;
55
+ --surf-color-accent-primary: #0091a5;
56
+ --surf-color-accent-primary-hover: #38bdd0;
57
+ --surf-color-accent-primary-active: #2aa8bc;
58
+ --surf-color-accent-primary-subtle: rgba(0, 145, 165, 0.15);
59
+ --surf-color-accent-primary-subtlest: rgba(0, 145, 165, 0.08);
60
+ --surf-color-border-default: rgba(225, 185, 137, 0.15);
61
+ --surf-color-border-strong: rgba(225, 185, 137, 0.3);
62
+ --surf-color-border-interactive: rgba(225, 185, 137, 0.5);
63
+ --surf-color-status-success: #38bdd0;
64
+ --surf-color-status-success-subtle: rgba(56, 189, 208, 0.15);
65
+ --surf-color-status-warning: #e1b989;
66
+ --surf-color-status-warning-subtle: rgba(225, 185, 137, 0.1);
67
+ --surf-color-status-error: #e81152;
68
+ --surf-color-status-error-subtle: rgba(232, 17, 82, 0.1);
69
+ --surf-color-status-info: #0091a5;
70
+ --surf-spacing-1: 4px;
71
+ --surf-spacing-2: 8px;
72
+ --surf-spacing-3: 12px;
73
+ --surf-spacing-4: 16px;
74
+ --surf-spacing-5: 20px;
75
+ --surf-spacing-6: 24px;
76
+ --surf-spacing-7: 28px;
77
+ --surf-spacing-8: 32px;
78
+ --surf-spacing-9: 36px;
79
+ --surf-spacing-10: 40px;
80
+ --surf-spacing-11: 44px;
81
+ --surf-spacing-12: 48px;
82
+ --surf-spacing-13: 52px;
83
+ --surf-spacing-14: 56px;
84
+ --surf-spacing-15: 60px;
85
+ --surf-spacing-16: 64px;
86
+ --surf-font-family-sans: Inter, system-ui, -apple-system, sans-serif;
87
+ --surf-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
88
+ --surf-font-family-display: 'Space Grotesk', system-ui, sans-serif;
89
+ --surf-font-size-xs: 12px;
90
+ --surf-font-size-sm: 14px;
91
+ --surf-font-size-base: 16px;
92
+ --surf-font-size-lg: 18px;
93
+ --surf-font-size-xl: 20px;
94
+ --surf-font-size-2xl: 24px;
95
+ --surf-font-size-3xl: 30px;
96
+ --surf-font-size-4xl: 36px;
97
+ --surf-font-weight-normal: 400;
98
+ --surf-font-weight-medium: 500;
99
+ --surf-font-weight-semibold: 600;
100
+ --surf-font-weight-bold: 700;
101
+ --surf-font-line-height-tight: 1.25rem;
102
+ --surf-font-line-height-normal: 1.5rem;
103
+ --surf-font-line-height-relaxed: 1.75rem;
104
+ --surf-radius-sm: 4px;
105
+ --surf-radius-md: 8px;
106
+ --surf-radius-lg: 12px;
107
+ --surf-radius-xl: 16px;
108
+ --surf-radius-full: 9999px;
109
+ --surf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
110
+ --surf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
111
+ --surf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
112
+ --surf-duration-instant: 100ms;
113
+ --surf-duration-fast: 200ms;
114
+ --surf-duration-normal: 300ms;
115
+ --surf-duration-slow: 500ms;
116
+ --surf-duration-streaming: 50ms;
117
+ --surf-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
118
+ --surf-easing-in: cubic-bezier(0.4, 0, 1, 1);
119
+ --surf-easing-out: cubic-bezier(0, 0, 0.2, 1);
120
+ --surf-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
121
+ --surf-button-bg-primary: #0091a5;
122
+ --surf-button-bg-primary-hover: #38bdd0;
123
+ --surf-button-text-primary: #ffffff;
124
+ --surf-button-radius: 8px;
125
+ --surf-input-border: rgba(225, 185, 137, 0.15);
126
+ --surf-input-border-focus: rgba(225, 185, 137, 0.5);
127
+ --surf-input-bg: #0a3642;
128
+ --surf-confidence-high-bg: rgba(56, 189, 208, 0.15);
129
+ --surf-confidence-high-text: #38bdd0;
130
+ --surf-confidence-high-border: #38bdd0;
131
+ --surf-confidence-medium-bg: rgba(225, 185, 137, 0.1);
132
+ --surf-confidence-medium-text: #e1b989;
133
+ --surf-confidence-medium-border: #e1b989;
134
+ --surf-confidence-low-bg: rgba(232, 17, 82, 0.1);
135
+ --surf-confidence-low-text: #e81152;
136
+ --surf-confidence-low-border: #e81152;
137
+ --surf-verification-passed-icon: #38bdd0;
138
+ --surf-verification-passed-bg: rgba(56, 189, 208, 0.15);
139
+ --surf-verification-flagged-icon: #e1b989;
140
+ --surf-verification-flagged-bg: rgba(225, 185, 137, 0.1);
141
+ --surf-verification-failed-icon: #e81152;
142
+ --surf-verification-failed-bg: rgba(232, 17, 82, 0.1);
143
+ --surf-source-card-bg: #0a3642;
144
+ --surf-source-card-border: rgba(225, 185, 137, 0.15);
145
+ --surf-source-card-border-hover: rgba(225, 185, 137, 0.3);
146
+ --surf-agent-coordinator-accent: #0099a8;
147
+ --surf-agent-hr-accent: #e8175d;
148
+ --surf-agent-it-accent: #5bc8f5;
149
+ --surf-agent-governance-accent: #3b1283;
150
+ --surf-agent-finance-accent: #f8b800;
151
+ --surf-agent-facilities-accent: #8dc21f;
152
+ --surf-agent-general-accent: #787878;
153
+ --surf-message-user-bg: #0091a5;
154
+ --surf-message-user-text: #ffffff;
155
+ --surf-message-assistant-bg: #0d3f50;
156
+ --surf-message-assistant-text: #f1f0e3;
157
+ --surf-message-assistant-border: rgba(225, 185, 137, 0.15);
158
+ --surf-streaming-cursor-color: #0091a5;
159
+ --surf-streaming-phase-bg: rgba(0, 145, 165, 0.08);
160
+ --surf-streaming-phase-text: #0091a5;
161
+ --surf-streaming-phase-icon: #0091a5;
162
+ }
package/dist/css/variables-dark.css ADDED
@@ -0,0 +1,162 @@
1
+ [data-color-mode="dark"] {
2
+ --surf-color-teal-50: #f0fafb;
3
+ --surf-color-teal-100: #e0f5f7;
4
+ --surf-color-teal-300: #66c2cc;
5
+ --surf-color-teal-500: #0099a8;
6
+ --surf-color-teal-600: #007f8c;
7
+ --surf-color-teal-700: #006673;
8
+ --surf-color-charcoal-50: #f5f5f5;
9
+ --surf-color-charcoal-100: #e8e8e8;
10
+ --surf-color-charcoal-300: #b0b0b0;
11
+ --surf-color-charcoal-500: #787878;
12
+ --surf-color-charcoal-700: #5a5a5a;
13
+ --surf-color-charcoal-900: #3c3c3c;
14
+ --surf-color-watermelon-100: #fde8ef;
15
+ --surf-color-watermelon-500: #e8175d;
16
+ --surf-color-watermelon-700: #b8124a;
17
+ --surf-color-lime-100: #f0f8e0;
18
+ --surf-color-lime-500: #8dc21f;
19
+ --surf-color-lime-700: #6b9317;
20
+ --surf-color-golden-100: #fef5e0;
21
+ --surf-color-golden-500: #f8b800;
22
+ --surf-color-golden-700: #c69300;
23
+ --surf-color-sky-500: #5bc8f5;
24
+ --surf-color-magenta-500: #9e1f82;
25
+ --surf-color-cyan-500: #00b2aa;
26
+ --surf-color-hotpink-500: #f0197c;
27
+ --surf-color-orangered-500: #f05a22;
28
+ --surf-color-purple-500: #3b1283;
29
+ --surf-color-neutral-50: #fafafa;
30
+ --surf-color-neutral-100: #f5f5f5;
31
+ --surf-color-neutral-200: #e8e8e8;
32
+ --surf-color-neutral-300: #d4d4d4;
33
+ --surf-color-neutral-600: #6b6b6b;
34
+ --surf-color-neutral-800: #454545;
35
+ --surf-color-neutral-900: #3c3c3c;
36
+ --surf-color-white: #ffffff;
37
+ --surf-color-brand-dark: #041f26;
38
+ --surf-color-brand-dark-panel: #0a3642;
39
+ --surf-color-brand-blue: #0091a5;
40
+ --surf-color-brand-cyan: #38bdd0;
41
+ --surf-color-brand-gold: #e1b989;
42
+ --surf-color-brand-gold-light: #f3d79c;
43
+ --surf-color-brand-cream: #f1f0e3;
44
+ --surf-color-brand-cream-warm: #f0e8b6;
45
+ --surf-color-brand-charcoal: #414142;
46
+ --surf-color-brand-watermelon: #e81152;
47
+ --surf-color-bg-canvas: #1a1a1a;
48
+ --surf-color-bg-surface: #2a2a2a;
49
+ --surf-color-bg-surface-raised: #333333;
50
+ --surf-color-bg-surface-sunken: #111111;
51
+ --surf-color-text-primary: #f5f5f5;
52
+ --surf-color-text-secondary: #b0b0b0;
53
+ --surf-color-text-muted: #6b6b6b;
54
+ --surf-color-text-inverse: #3c3c3c;
55
+ --surf-color-accent-primary: #0099a8;
56
+ --surf-color-accent-primary-hover: #007f8c;
57
+ --surf-color-accent-primary-active: #006673;
58
+ --surf-color-accent-primary-subtle: #e0f5f7;
59
+ --surf-color-accent-primary-subtlest: #f0fafb;
60
+ --surf-color-border-default: #404040;
61
+ --surf-color-border-strong: #555555;
62
+ --surf-color-border-interactive: #0099a8;
63
+ --surf-color-status-success: #8dc21f;
64
+ --surf-color-status-success-subtle: #f0f8e0;
65
+ --surf-color-status-warning: #f8b800;
66
+ --surf-color-status-warning-subtle: #fef5e0;
67
+ --surf-color-status-error: #e8175d;
68
+ --surf-color-status-error-subtle: #fde8ef;
69
+ --surf-color-status-info: #5bc8f5;
70
+ --surf-spacing-1: 4px;
71
+ --surf-spacing-2: 8px;
72
+ --surf-spacing-3: 12px;
73
+ --surf-spacing-4: 16px;
74
+ --surf-spacing-5: 20px;
75
+ --surf-spacing-6: 24px;
76
+ --surf-spacing-7: 28px;
77
+ --surf-spacing-8: 32px;
78
+ --surf-spacing-9: 36px;
79
+ --surf-spacing-10: 40px;
80
+ --surf-spacing-11: 44px;
81
+ --surf-spacing-12: 48px;
82
+ --surf-spacing-13: 52px;
83
+ --surf-spacing-14: 56px;
84
+ --surf-spacing-15: 60px;
85
+ --surf-spacing-16: 64px;
86
+ --surf-font-family-sans: Inter, system-ui, -apple-system, sans-serif;
87
+ --surf-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
88
+ --surf-font-family-display: 'Space Grotesk', system-ui, sans-serif;
89
+ --surf-font-size-xs: 12px;
90
+ --surf-font-size-sm: 14px;
91
+ --surf-font-size-base: 16px;
92
+ --surf-font-size-lg: 18px;
93
+ --surf-font-size-xl: 20px;
94
+ --surf-font-size-2xl: 24px;
95
+ --surf-font-size-3xl: 30px;
96
+ --surf-font-size-4xl: 36px;
97
+ --surf-font-weight-normal: 400;
98
+ --surf-font-weight-medium: 500;
99
+ --surf-font-weight-semibold: 600;
100
+ --surf-font-weight-bold: 700;
101
+ --surf-font-line-height-tight: 1.25rem;
102
+ --surf-font-line-height-normal: 1.5rem;
103
+ --surf-font-line-height-relaxed: 1.75rem;
104
+ --surf-radius-sm: 4px;
105
+ --surf-radius-md: 8px;
106
+ --surf-radius-lg: 12px;
107
+ --surf-radius-xl: 16px;
108
+ --surf-radius-full: 9999px;
109
+ --surf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
110
+ --surf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
111
+ --surf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
112
+ --surf-duration-instant: 100ms;
113
+ --surf-duration-fast: 200ms;
114
+ --surf-duration-normal: 300ms;
115
+ --surf-duration-slow: 500ms;
116
+ --surf-duration-streaming: 50ms;
117
+ --surf-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
118
+ --surf-easing-in: cubic-bezier(0.4, 0, 1, 1);
119
+ --surf-easing-out: cubic-bezier(0, 0, 0.2, 1);
120
+ --surf-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
121
+ --surf-button-bg-primary: #0099a8;
122
+ --surf-button-bg-primary-hover: #007f8c;
123
+ --surf-button-text-primary: #ffffff;
124
+ --surf-button-radius: 8px;
125
+ --surf-input-border: #404040;
126
+ --surf-input-border-focus: #0099a8;
127
+ --surf-input-bg: #2a2a2a;
128
+ --surf-confidence-high-bg: #f0f8e0;
129
+ --surf-confidence-high-text: #6b9317;
130
+ --surf-confidence-high-border: #8dc21f;
131
+ --surf-confidence-medium-bg: #fef5e0;
132
+ --surf-confidence-medium-text: #c69300;
133
+ --surf-confidence-medium-border: #f8b800;
134
+ --surf-confidence-low-bg: #fde8ef;
135
+ --surf-confidence-low-text: #b8124a;
136
+ --surf-confidence-low-border: #e8175d;
137
+ --surf-verification-passed-icon: #8dc21f;
138
+ --surf-verification-passed-bg: #f0f8e0;
139
+ --surf-verification-flagged-icon: #f8b800;
140
+ --surf-verification-flagged-bg: #fef5e0;
141
+ --surf-verification-failed-icon: #e8175d;
142
+ --surf-verification-failed-bg: #fde8ef;
143
+ --surf-source-card-bg: #2a2a2a;
144
+ --surf-source-card-border: #404040;
145
+ --surf-source-card-border-hover: #555555;
146
+ --surf-agent-coordinator-accent: #0099a8;
147
+ --surf-agent-hr-accent: #e8175d;
148
+ --surf-agent-it-accent: #5bc8f5;
149
+ --surf-agent-governance-accent: #3b1283;
150
+ --surf-agent-finance-accent: #f8b800;
151
+ --surf-agent-facilities-accent: #8dc21f;
152
+ --surf-agent-general-accent: #787878;
153
+ --surf-message-user-bg: #0099a8;
154
+ --surf-message-user-text: #ffffff;
155
+ --surf-message-assistant-bg: #333333;
156
+ --surf-message-assistant-text: #f5f5f5;
157
+ --surf-message-assistant-border: #404040;
158
+ --surf-streaming-cursor-color: #0099a8;
159
+ --surf-streaming-phase-bg: #f0fafb;
160
+ --surf-streaming-phase-text: #0099a8;
161
+ --surf-streaming-phase-icon: #0099a8;
162
+ }
package/dist/css/variables.css ADDED
@@ -0,0 +1,166 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --surf-color-teal-50: #f0fafb;
7
+ --surf-color-teal-100: #e0f5f7;
8
+ --surf-color-teal-300: #66c2cc;
9
+ --surf-color-teal-500: #0099a8;
10
+ --surf-color-teal-600: #007f8c;
11
+ --surf-color-teal-700: #006673;
12
+ --surf-color-charcoal-50: #f5f5f5;
13
+ --surf-color-charcoal-100: #e8e8e8;
14
+ --surf-color-charcoal-300: #b0b0b0;
15
+ --surf-color-charcoal-500: #787878;
16
+ --surf-color-charcoal-700: #5a5a5a;
17
+ --surf-color-charcoal-900: #3c3c3c;
18
+ --surf-color-watermelon-100: #fde8ef;
19
+ --surf-color-watermelon-500: #e8175d;
20
+ --surf-color-watermelon-700: #b8124a;
21
+ --surf-color-lime-100: #f0f8e0;
22
+ --surf-color-lime-500: #8dc21f;
23
+ --surf-color-lime-700: #6b9317;
24
+ --surf-color-golden-100: #fef5e0;
25
+ --surf-color-golden-500: #f8b800;
26
+ --surf-color-golden-700: #c69300;
27
+ --surf-color-sky-500: #5bc8f5;
28
+ --surf-color-magenta-500: #9e1f82;
29
+ --surf-color-cyan-500: #00b2aa;
30
+ --surf-color-hotpink-500: #f0197c;
31
+ --surf-color-orangered-500: #f05a22;
32
+ --surf-color-purple-500: #3b1283;
33
+ --surf-color-neutral-50: #fafafa;
34
+ --surf-color-neutral-100: #f5f5f5;
35
+ --surf-color-neutral-200: #e8e8e8;
36
+ --surf-color-neutral-300: #d4d4d4;
37
+ --surf-color-neutral-600: #6b6b6b;
38
+ --surf-color-neutral-800: #454545;
39
+ --surf-color-neutral-900: #3c3c3c;
40
+ --surf-color-white: #ffffff;
41
+ --surf-color-brand-dark: #041f26;
42
+ --surf-color-brand-dark-panel: #0a3642;
43
+ --surf-color-brand-blue: #0091a5;
44
+ --surf-color-brand-cyan: #38bdd0;
45
+ --surf-color-brand-gold: #e1b989;
46
+ --surf-color-brand-gold-light: #f3d79c;
47
+ --surf-color-brand-cream: #f1f0e3;
48
+ --surf-color-brand-cream-warm: #f0e8b6;
49
+ --surf-color-brand-charcoal: #414142;
50
+ --surf-color-brand-watermelon: #e81152;
51
+ --surf-color-bg-surface: #ffffff;
52
+ --surf-color-bg-surface-raised: #ffffff;
53
+ --surf-color-text-inverse: #ffffff;
54
+ --surf-spacing-1: 4px;
55
+ --surf-spacing-2: 8px;
56
+ --surf-spacing-3: 12px;
57
+ --surf-spacing-4: 16px;
58
+ --surf-spacing-5: 20px;
59
+ --surf-spacing-6: 24px;
60
+ --surf-spacing-7: 28px;
61
+ --surf-spacing-8: 32px;
62
+ --surf-spacing-9: 36px;
63
+ --surf-spacing-10: 40px;
64
+ --surf-spacing-11: 44px;
65
+ --surf-spacing-12: 48px;
66
+ --surf-spacing-13: 52px;
67
+ --surf-spacing-14: 56px;
68
+ --surf-spacing-15: 60px;
69
+ --surf-spacing-16: 64px;
70
+ --surf-font-family-sans: Inter, system-ui, -apple-system, sans-serif;
71
+ --surf-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
72
+ --surf-font-family-display: 'Space Grotesk', system-ui, sans-serif;
73
+ --surf-font-size-xs: 12px;
74
+ --surf-font-size-sm: 14px;
75
+ --surf-font-size-base: 16px;
76
+ --surf-font-size-lg: 18px;
77
+ --surf-font-size-xl: 20px;
78
+ --surf-font-size-2xl: 24px;
79
+ --surf-font-size-3xl: 30px;
80
+ --surf-font-size-4xl: 36px;
81
+ --surf-font-weight-normal: 400;
82
+ --surf-font-weight-medium: 500;
83
+ --surf-font-weight-semibold: 600;
84
+ --surf-font-weight-bold: 700;
85
+ --surf-font-line-height-tight: 1.25rem;
86
+ --surf-font-line-height-normal: 1.5rem;
87
+ --surf-font-line-height-relaxed: 1.75rem;
88
+ --surf-radius-sm: 4px;
89
+ --surf-radius-md: 8px;
90
+ --surf-radius-lg: 12px;
91
+ --surf-radius-xl: 16px;
92
+ --surf-radius-full: 9999px;
93
+ --surf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
94
+ --surf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
95
+ --surf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
96
+ --surf-duration-instant: 100ms;
97
+ --surf-duration-fast: 200ms;
98
+ --surf-duration-normal: 300ms;
99
+ --surf-duration-slow: 500ms;
100
+ --surf-duration-streaming: 50ms;
101
+ --surf-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
102
+ --surf-easing-in: cubic-bezier(0.4, 0, 1, 1);
103
+ --surf-easing-out: cubic-bezier(0, 0, 0.2, 1);
104
+ --surf-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
105
+ --surf-button-text-primary: #ffffff;
106
+ --surf-message-user-text: #ffffff;
107
+ --surf-color-bg-canvas: var(--surf-color-charcoal-50);
108
+ --surf-color-bg-surface-sunken: var(--surf-color-charcoal-100);
109
+ --surf-color-text-primary: var(--surf-color-charcoal-900);
110
+ --surf-color-text-secondary: var(--surf-color-charcoal-500);
111
+ --surf-color-text-muted: var(--surf-color-charcoal-300);
112
+ --surf-color-accent-primary: var(--surf-color-teal-500);
113
+ --surf-color-accent-primary-hover: var(--surf-color-teal-600);
114
+ --surf-color-accent-primary-active: var(--surf-color-teal-700);
115
+ --surf-color-accent-primary-subtle: var(--surf-color-teal-100);
116
+ --surf-color-accent-primary-subtlest: var(--surf-color-teal-50);
117
+ --surf-color-border-default: var(--surf-color-neutral-200);
118
+ --surf-color-border-strong: var(--surf-color-neutral-300);
119
+ --surf-color-border-interactive: var(--surf-color-teal-500);
120
+ --surf-color-status-success: var(--surf-color-lime-500);
121
+ --surf-color-status-success-subtle: var(--surf-color-lime-100);
122
+ --surf-color-status-warning: var(--surf-color-golden-500);
123
+ --surf-color-status-warning-subtle: var(--surf-color-golden-100);
124
+ --surf-color-status-error: var(--surf-color-watermelon-500);
125
+ --surf-color-status-error-subtle: var(--surf-color-watermelon-100);
126
+ --surf-color-status-info: var(--surf-color-sky-500);
127
+ --surf-button-radius: var(--surf-radius-md);
128
+ --surf-input-bg: var(--surf-color-bg-surface);
129
+ --surf-confidence-high-text: var(--surf-color-lime-700);
130
+ --surf-confidence-medium-text: var(--surf-color-golden-700);
131
+ --surf-confidence-low-text: var(--surf-color-watermelon-700);
132
+ --surf-source-card-bg: var(--surf-color-bg-surface);
133
+ --surf-agent-coordinator-accent: var(--surf-color-teal-500);
134
+ --surf-agent-hr-accent: var(--surf-color-watermelon-500);
135
+ --surf-agent-it-accent: var(--surf-color-sky-500);
136
+ --surf-agent-governance-accent: var(--surf-color-purple-500);
137
+ --surf-agent-finance-accent: var(--surf-color-golden-500);
138
+ --surf-agent-facilities-accent: var(--surf-color-lime-500);
139
+ --surf-agent-general-accent: var(--surf-color-charcoal-500);
140
+ --surf-message-assistant-bg: var(--surf-color-bg-surface-raised);
141
+ --surf-button-bg-primary: var(--surf-color-accent-primary);
142
+ --surf-button-bg-primary-hover: var(--surf-color-accent-primary-hover);
143
+ --surf-input-border: var(--surf-color-border-default);
144
+ --surf-input-border-focus: var(--surf-color-border-interactive);
145
+ --surf-confidence-high-bg: var(--surf-color-status-success-subtle);
146
+ --surf-confidence-high-border: var(--surf-color-status-success);
147
+ --surf-confidence-medium-bg: var(--surf-color-status-warning-subtle);
148
+ --surf-confidence-medium-border: var(--surf-color-status-warning);
149
+ --surf-confidence-low-bg: var(--surf-color-status-error-subtle);
150
+ --surf-confidence-low-border: var(--surf-color-status-error);
151
+ --surf-verification-passed-icon: var(--surf-color-status-success);
152
+ --surf-verification-passed-bg: var(--surf-color-status-success-subtle);
153
+ --surf-verification-flagged-icon: var(--surf-color-status-warning);
154
+ --surf-verification-flagged-bg: var(--surf-color-status-warning-subtle);
155
+ --surf-verification-failed-icon: var(--surf-color-status-error);
156
+ --surf-verification-failed-bg: var(--surf-color-status-error-subtle);
157
+ --surf-source-card-border: var(--surf-color-border-default);
158
+ --surf-source-card-border-hover: var(--surf-color-border-strong);
159
+ --surf-message-user-bg: var(--surf-color-accent-primary);
160
+ --surf-message-assistant-text: var(--surf-color-text-primary);
161
+ --surf-message-assistant-border: var(--surf-color-border-default);
162
+ --surf-streaming-cursor-color: var(--surf-color-accent-primary);
163
+ --surf-streaming-phase-bg: var(--surf-color-accent-primary-subtlest);
164
+ --surf-streaming-phase-text: var(--surf-color-accent-primary);
165
+ --surf-streaming-phase-icon: var(--surf-color-accent-primary);
166
+ }