@surf-kit/tokens 0.2.0 → 0.3.0
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.
- package/dist/css/variables-brand.css +13 -13
- package/dist/css/variables-energy.css +165 -0
- package/dist/native/tokens-brand.ts +13 -13
- package/dist/native/tokens-energy.ts +163 -0
- package/package.json +6 -1
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
--surf-color-text-secondary: rgba(241, 240, 227, 0.6);
|
|
54
54
|
--surf-color-text-muted: rgba(241, 240, 227, 0.4);
|
|
55
55
|
--surf-color-text-inverse: #041f26;
|
|
56
|
-
--surf-color-accent-primary: #
|
|
57
|
-
--surf-color-accent-primary-hover: #
|
|
56
|
+
--surf-color-accent-primary: #38bdd0;
|
|
57
|
+
--surf-color-accent-primary-hover: #5dd4e5;
|
|
58
58
|
--surf-color-accent-primary-active: #2aa8bc;
|
|
59
|
-
--surf-color-accent-primary-subtle: rgba(
|
|
60
|
-
--surf-color-accent-primary-subtlest: rgba(
|
|
59
|
+
--surf-color-accent-primary-subtle: rgba(56, 189, 208, 0.15);
|
|
60
|
+
--surf-color-accent-primary-subtlest: rgba(56, 189, 208, 0.08);
|
|
61
61
|
--surf-color-border-default: rgba(225, 185, 137, 0.15);
|
|
62
62
|
--surf-color-border-strong: rgba(225, 185, 137, 0.3);
|
|
63
63
|
--surf-color-border-interactive: rgba(225, 185, 137, 0.5);
|
|
@@ -120,9 +120,9 @@
|
|
|
120
120
|
--surf-easing-in: cubic-bezier(0.4, 0, 1, 1);
|
|
121
121
|
--surf-easing-out: cubic-bezier(0, 0, 0.2, 1);
|
|
122
122
|
--surf-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
123
|
-
--surf-button-bg-primary: #
|
|
124
|
-
--surf-button-bg-primary-hover: #
|
|
125
|
-
--surf-button-text-primary: #
|
|
123
|
+
--surf-button-bg-primary: #38bdd0;
|
|
124
|
+
--surf-button-bg-primary-hover: #5dd4e5;
|
|
125
|
+
--surf-button-text-primary: #041f26;
|
|
126
126
|
--surf-button-radius: 8px;
|
|
127
127
|
--surf-input-border: rgba(225, 185, 137, 0.15);
|
|
128
128
|
--surf-input-border-focus: rgba(225, 185, 137, 0.5);
|
|
@@ -152,14 +152,14 @@
|
|
|
152
152
|
--surf-agent-finance-accent: #f8b800;
|
|
153
153
|
--surf-agent-facilities-accent: #8dc21f;
|
|
154
154
|
--surf-agent-general-accent: #787878;
|
|
155
|
-
--surf-message-user-bg: #
|
|
156
|
-
--surf-message-user-text: #
|
|
155
|
+
--surf-message-user-bg: #38bdd0;
|
|
156
|
+
--surf-message-user-text: #041f26;
|
|
157
157
|
--surf-message-assistant-bg: #0d3f50;
|
|
158
158
|
--surf-message-assistant-text: #f1f0e3;
|
|
159
159
|
--surf-message-assistant-border: rgba(225, 185, 137, 0.15);
|
|
160
|
-
--surf-streaming-cursor-color: #
|
|
161
|
-
--surf-streaming-phase-bg: rgba(
|
|
162
|
-
--surf-streaming-phase-text: #
|
|
163
|
-
--surf-streaming-phase-icon: #
|
|
160
|
+
--surf-streaming-cursor-color: #38bdd0;
|
|
161
|
+
--surf-streaming-phase-bg: rgba(56, 189, 208, 0.08);
|
|
162
|
+
--surf-streaming-phase-text: #38bdd0;
|
|
163
|
+
--surf-streaming-phase-icon: #38bdd0;
|
|
164
164
|
}
|
|
165
165
|
}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
@layer surf.tokens {
|
|
2
|
+
[data-color-mode="energy"] {
|
|
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: #ffffff;
|
|
49
|
+
--surf-color-bg-surface: #ffffff;
|
|
50
|
+
--surf-color-bg-surface-raised: #ffffff;
|
|
51
|
+
--surf-color-bg-surface-sunken: #f5f5f5;
|
|
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: #e8175d;
|
|
57
|
+
--surf-color-accent-primary-hover: #d00f4a;
|
|
58
|
+
--surf-color-accent-primary-active: #b8124a;
|
|
59
|
+
--surf-color-accent-primary-subtle: rgba(232, 23, 93, 0.12);
|
|
60
|
+
--surf-color-accent-primary-subtlest: rgba(232, 23, 93, 0.08);
|
|
61
|
+
--surf-color-border-default: #e8e8e8;
|
|
62
|
+
--surf-color-border-strong: #b0b0b0;
|
|
63
|
+
--surf-color-border-interactive: #e8175d;
|
|
64
|
+
--surf-color-status-success: #16a34a;
|
|
65
|
+
--surf-color-status-success-subtle: rgba(22, 163, 74, 0.12);
|
|
66
|
+
--surf-color-status-warning: #d97706;
|
|
67
|
+
--surf-color-status-warning-subtle: rgba(217, 119, 6, 0.12);
|
|
68
|
+
--surf-color-status-error: #b91c1c;
|
|
69
|
+
--surf-color-status-error-subtle: rgba(185, 28, 28, 0.12);
|
|
70
|
+
--surf-color-status-info: #0284c7;
|
|
71
|
+
--surf-color-status-info-subtle: rgba(2, 132, 199, 0.12);
|
|
72
|
+
--surf-spacing-1: 4px;
|
|
73
|
+
--surf-spacing-2: 8px;
|
|
74
|
+
--surf-spacing-3: 12px;
|
|
75
|
+
--surf-spacing-4: 16px;
|
|
76
|
+
--surf-spacing-5: 20px;
|
|
77
|
+
--surf-spacing-6: 24px;
|
|
78
|
+
--surf-spacing-7: 28px;
|
|
79
|
+
--surf-spacing-8: 32px;
|
|
80
|
+
--surf-spacing-9: 36px;
|
|
81
|
+
--surf-spacing-10: 40px;
|
|
82
|
+
--surf-spacing-11: 44px;
|
|
83
|
+
--surf-spacing-12: 48px;
|
|
84
|
+
--surf-spacing-13: 52px;
|
|
85
|
+
--surf-spacing-14: 56px;
|
|
86
|
+
--surf-spacing-15: 60px;
|
|
87
|
+
--surf-spacing-16: 64px;
|
|
88
|
+
--surf-font-family-sans: Inter, system-ui, -apple-system, sans-serif;
|
|
89
|
+
--surf-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
90
|
+
--surf-font-family-display: 'Space Grotesk', system-ui, sans-serif;
|
|
91
|
+
--surf-font-size-xs: 12px;
|
|
92
|
+
--surf-font-size-sm: 14px;
|
|
93
|
+
--surf-font-size-base: 16px;
|
|
94
|
+
--surf-font-size-lg: 18px;
|
|
95
|
+
--surf-font-size-xl: 20px;
|
|
96
|
+
--surf-font-size-2xl: 24px;
|
|
97
|
+
--surf-font-size-3xl: 30px;
|
|
98
|
+
--surf-font-size-4xl: 36px;
|
|
99
|
+
--surf-font-weight-normal: 400;
|
|
100
|
+
--surf-font-weight-medium: 500;
|
|
101
|
+
--surf-font-weight-semibold: 600;
|
|
102
|
+
--surf-font-weight-bold: 700;
|
|
103
|
+
--surf-font-line-height-tight: 1.25rem;
|
|
104
|
+
--surf-font-line-height-normal: 1.5rem;
|
|
105
|
+
--surf-font-line-height-relaxed: 1.75rem;
|
|
106
|
+
--surf-radius-sm: 4px;
|
|
107
|
+
--surf-radius-md: 8px;
|
|
108
|
+
--surf-radius-lg: 12px;
|
|
109
|
+
--surf-radius-xl: 16px;
|
|
110
|
+
--surf-radius-full: 9999px;
|
|
111
|
+
--surf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
112
|
+
--surf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
113
|
+
--surf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
114
|
+
--surf-duration-instant: 100ms;
|
|
115
|
+
--surf-duration-fast: 200ms;
|
|
116
|
+
--surf-duration-normal: 300ms;
|
|
117
|
+
--surf-duration-slow: 500ms;
|
|
118
|
+
--surf-duration-streaming: 50ms;
|
|
119
|
+
--surf-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
120
|
+
--surf-easing-in: cubic-bezier(0.4, 0, 1, 1);
|
|
121
|
+
--surf-easing-out: cubic-bezier(0, 0, 0.2, 1);
|
|
122
|
+
--surf-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
123
|
+
--surf-button-bg-primary: #e8175d;
|
|
124
|
+
--surf-button-bg-primary-hover: #d00f4a;
|
|
125
|
+
--surf-button-text-primary: #ffffff;
|
|
126
|
+
--surf-button-radius: 8px;
|
|
127
|
+
--surf-input-border: #e8e8e8;
|
|
128
|
+
--surf-input-border-focus: #e8175d;
|
|
129
|
+
--surf-input-bg: #ffffff;
|
|
130
|
+
--surf-confidence-high-bg: rgba(22, 163, 74, 0.12);
|
|
131
|
+
--surf-confidence-high-text: #6b9317;
|
|
132
|
+
--surf-confidence-high-border: #16a34a;
|
|
133
|
+
--surf-confidence-medium-bg: rgba(217, 119, 6, 0.12);
|
|
134
|
+
--surf-confidence-medium-text: #c69300;
|
|
135
|
+
--surf-confidence-medium-border: #d97706;
|
|
136
|
+
--surf-confidence-low-bg: rgba(185, 28, 28, 0.12);
|
|
137
|
+
--surf-confidence-low-text: #b8124a;
|
|
138
|
+
--surf-confidence-low-border: #b91c1c;
|
|
139
|
+
--surf-verification-passed-icon: #16a34a;
|
|
140
|
+
--surf-verification-passed-bg: rgba(22, 163, 74, 0.12);
|
|
141
|
+
--surf-verification-flagged-icon: #d97706;
|
|
142
|
+
--surf-verification-flagged-bg: rgba(217, 119, 6, 0.12);
|
|
143
|
+
--surf-verification-failed-icon: #b91c1c;
|
|
144
|
+
--surf-verification-failed-bg: rgba(185, 28, 28, 0.12);
|
|
145
|
+
--surf-source-card-bg: #ffffff;
|
|
146
|
+
--surf-source-card-border: #e8e8e8;
|
|
147
|
+
--surf-source-card-border-hover: #b0b0b0;
|
|
148
|
+
--surf-agent-coordinator-accent: #0099a8;
|
|
149
|
+
--surf-agent-hr-accent: #e8175d;
|
|
150
|
+
--surf-agent-it-accent: #5bc8f5;
|
|
151
|
+
--surf-agent-governance-accent: #3b1283;
|
|
152
|
+
--surf-agent-finance-accent: #f8b800;
|
|
153
|
+
--surf-agent-facilities-accent: #8dc21f;
|
|
154
|
+
--surf-agent-general-accent: #787878;
|
|
155
|
+
--surf-message-user-bg: #e8175d;
|
|
156
|
+
--surf-message-user-text: #ffffff;
|
|
157
|
+
--surf-message-assistant-bg: #ffffff;
|
|
158
|
+
--surf-message-assistant-text: #3c3c3c;
|
|
159
|
+
--surf-message-assistant-border: #e8e8e8;
|
|
160
|
+
--surf-streaming-cursor-color: #e8175d;
|
|
161
|
+
--surf-streaming-phase-bg: rgba(232, 23, 93, 0.08);
|
|
162
|
+
--surf-streaming-phase-text: #e8175d;
|
|
163
|
+
--surf-streaming-phase-icon: #e8175d;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
@@ -52,11 +52,11 @@ export const tokens = {
|
|
|
52
52
|
"SurfColorTextSecondary": "#f1f0e399",
|
|
53
53
|
"SurfColorTextMuted": "#f1f0e366",
|
|
54
54
|
"SurfColorTextInverse": "#041f26",
|
|
55
|
-
"SurfColorAccentPrimary": "#
|
|
56
|
-
"SurfColorAccentPrimaryHover": "#
|
|
55
|
+
"SurfColorAccentPrimary": "#38bdd0",
|
|
56
|
+
"SurfColorAccentPrimaryHover": "#5dd4e5",
|
|
57
57
|
"SurfColorAccentPrimaryActive": "#2aa8bc",
|
|
58
|
-
"SurfColorAccentPrimarySubtle": "#
|
|
59
|
-
"SurfColorAccentPrimarySubtlest": "#
|
|
58
|
+
"SurfColorAccentPrimarySubtle": "#38bdd026",
|
|
59
|
+
"SurfColorAccentPrimarySubtlest": "#38bdd014",
|
|
60
60
|
"SurfColorBorderDefault": "#e1b98926",
|
|
61
61
|
"SurfColorBorderStrong": "#e1b9894d",
|
|
62
62
|
"SurfColorBorderInteractive": "#e1b98980",
|
|
@@ -119,9 +119,9 @@ export const tokens = {
|
|
|
119
119
|
"SurfEasingIn": "cubic-bezier(0.4, 0, 1, 1)",
|
|
120
120
|
"SurfEasingOut": "cubic-bezier(0, 0, 0.2, 1)",
|
|
121
121
|
"SurfEasingInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
122
|
-
"SurfButtonBgPrimary": "#
|
|
123
|
-
"SurfButtonBgPrimaryHover": "#
|
|
124
|
-
"SurfButtonTextPrimary": "#
|
|
122
|
+
"SurfButtonBgPrimary": "#38bdd0",
|
|
123
|
+
"SurfButtonBgPrimaryHover": "#5dd4e5",
|
|
124
|
+
"SurfButtonTextPrimary": "#041f26",
|
|
125
125
|
"SurfButtonRadius": "8px",
|
|
126
126
|
"SurfInputBorder": "#e1b98926",
|
|
127
127
|
"SurfInputBorderFocus": "#e1b98980",
|
|
@@ -151,13 +151,13 @@ export const tokens = {
|
|
|
151
151
|
"SurfAgentFinanceAccent": "#f8b800",
|
|
152
152
|
"SurfAgentFacilitiesAccent": "#8dc21f",
|
|
153
153
|
"SurfAgentGeneralAccent": "#787878",
|
|
154
|
-
"SurfMessageUserBg": "#
|
|
155
|
-
"SurfMessageUserText": "#
|
|
154
|
+
"SurfMessageUserBg": "#38bdd0",
|
|
155
|
+
"SurfMessageUserText": "#041f26",
|
|
156
156
|
"SurfMessageAssistantBg": "#0d3f50",
|
|
157
157
|
"SurfMessageAssistantText": "#f1f0e3",
|
|
158
158
|
"SurfMessageAssistantBorder": "#e1b98926",
|
|
159
|
-
"SurfStreamingCursorColor": "#
|
|
160
|
-
"SurfStreamingPhaseBg": "#
|
|
161
|
-
"SurfStreamingPhaseText": "#
|
|
162
|
-
"SurfStreamingPhaseIcon": "#
|
|
159
|
+
"SurfStreamingCursorColor": "#38bdd0",
|
|
160
|
+
"SurfStreamingPhaseBg": "#38bdd014",
|
|
161
|
+
"SurfStreamingPhaseText": "#38bdd0",
|
|
162
|
+
"SurfStreamingPhaseIcon": "#38bdd0"
|
|
163
163
|
} as const
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
export const tokens = {
|
|
2
|
+
"SurfColorTeal50": "#f0fafb",
|
|
3
|
+
"SurfColorTeal100": "#e0f5f7",
|
|
4
|
+
"SurfColorTeal300": "#66c2cc",
|
|
5
|
+
"SurfColorTeal500": "#0099a8",
|
|
6
|
+
"SurfColorTeal600": "#007f8c",
|
|
7
|
+
"SurfColorTeal700": "#006673",
|
|
8
|
+
"SurfColorCharcoal50": "#f5f5f5",
|
|
9
|
+
"SurfColorCharcoal100": "#e8e8e8",
|
|
10
|
+
"SurfColorCharcoal300": "#b0b0b0",
|
|
11
|
+
"SurfColorCharcoal500": "#787878",
|
|
12
|
+
"SurfColorCharcoal700": "#5a5a5a",
|
|
13
|
+
"SurfColorCharcoal900": "#3c3c3c",
|
|
14
|
+
"SurfColorWatermelon100": "#fde8ef",
|
|
15
|
+
"SurfColorWatermelon500": "#e8175d",
|
|
16
|
+
"SurfColorWatermelon700": "#b8124a",
|
|
17
|
+
"SurfColorLime100": "#f0f8e0",
|
|
18
|
+
"SurfColorLime500": "#8dc21f",
|
|
19
|
+
"SurfColorLime700": "#6b9317",
|
|
20
|
+
"SurfColorGolden100": "#fef5e0",
|
|
21
|
+
"SurfColorGolden500": "#f8b800",
|
|
22
|
+
"SurfColorGolden700": "#c69300",
|
|
23
|
+
"SurfColorSky500": "#5bc8f5",
|
|
24
|
+
"SurfColorMagenta500": "#9e1f82",
|
|
25
|
+
"SurfColorCyan500": "#00b2aa",
|
|
26
|
+
"SurfColorHotpink500": "#f0197c",
|
|
27
|
+
"SurfColorOrangered500": "#f05a22",
|
|
28
|
+
"SurfColorPurple500": "#3b1283",
|
|
29
|
+
"SurfColorNeutral50": "#fafafa",
|
|
30
|
+
"SurfColorNeutral100": "#f5f5f5",
|
|
31
|
+
"SurfColorNeutral200": "#e8e8e8",
|
|
32
|
+
"SurfColorNeutral300": "#d4d4d4",
|
|
33
|
+
"SurfColorNeutral600": "#6b6b6b",
|
|
34
|
+
"SurfColorNeutral800": "#454545",
|
|
35
|
+
"SurfColorNeutral900": "#3c3c3c",
|
|
36
|
+
"SurfColorWhite": "#ffffff",
|
|
37
|
+
"SurfColorBrandDark": "#041f26",
|
|
38
|
+
"SurfColorBrandDarkPanel": "#0a3642",
|
|
39
|
+
"SurfColorBrandBlue": "#0091a5",
|
|
40
|
+
"SurfColorBrandCyan": "#38bdd0",
|
|
41
|
+
"SurfColorBrandGold": "#e1b989",
|
|
42
|
+
"SurfColorBrandGoldLight": "#f3d79c",
|
|
43
|
+
"SurfColorBrandCream": "#f1f0e3",
|
|
44
|
+
"SurfColorBrandCreamWarm": "#f0e8b6",
|
|
45
|
+
"SurfColorBrandCharcoal": "#414142",
|
|
46
|
+
"SurfColorBrandWatermelon": "#e81152",
|
|
47
|
+
"SurfColorBgCanvas": "#ffffff",
|
|
48
|
+
"SurfColorBgSurface": "#ffffff",
|
|
49
|
+
"SurfColorBgSurfaceRaised": "#ffffff",
|
|
50
|
+
"SurfColorBgSurfaceSunken": "#f5f5f5",
|
|
51
|
+
"SurfColorTextPrimary": "#3c3c3c",
|
|
52
|
+
"SurfColorTextSecondary": "#787878",
|
|
53
|
+
"SurfColorTextMuted": "#b0b0b0",
|
|
54
|
+
"SurfColorTextInverse": "#ffffff",
|
|
55
|
+
"SurfColorAccentPrimary": "#e8175d",
|
|
56
|
+
"SurfColorAccentPrimaryHover": "#d00f4a",
|
|
57
|
+
"SurfColorAccentPrimaryActive": "#b8124a",
|
|
58
|
+
"SurfColorAccentPrimarySubtle": "#e8175d1f",
|
|
59
|
+
"SurfColorAccentPrimarySubtlest": "#e8175d14",
|
|
60
|
+
"SurfColorBorderDefault": "#e8e8e8",
|
|
61
|
+
"SurfColorBorderStrong": "#b0b0b0",
|
|
62
|
+
"SurfColorBorderInteractive": "#e8175d",
|
|
63
|
+
"SurfColorStatusSuccess": "#16a34a",
|
|
64
|
+
"SurfColorStatusSuccessSubtle": "#16a34a1f",
|
|
65
|
+
"SurfColorStatusWarning": "#d97706",
|
|
66
|
+
"SurfColorStatusWarningSubtle": "#d977061f",
|
|
67
|
+
"SurfColorStatusError": "#b91c1c",
|
|
68
|
+
"SurfColorStatusErrorSubtle": "#b91c1c1f",
|
|
69
|
+
"SurfColorStatusInfo": "#0284c7",
|
|
70
|
+
"SurfColorStatusInfoSubtle": "#0284c71f",
|
|
71
|
+
"SurfSpacing1": "4px",
|
|
72
|
+
"SurfSpacing2": "8px",
|
|
73
|
+
"SurfSpacing3": "12px",
|
|
74
|
+
"SurfSpacing4": "16px",
|
|
75
|
+
"SurfSpacing5": "20px",
|
|
76
|
+
"SurfSpacing6": "24px",
|
|
77
|
+
"SurfSpacing7": "28px",
|
|
78
|
+
"SurfSpacing8": "32px",
|
|
79
|
+
"SurfSpacing9": "36px",
|
|
80
|
+
"SurfSpacing10": "40px",
|
|
81
|
+
"SurfSpacing11": "44px",
|
|
82
|
+
"SurfSpacing12": "48px",
|
|
83
|
+
"SurfSpacing13": "52px",
|
|
84
|
+
"SurfSpacing14": "56px",
|
|
85
|
+
"SurfSpacing15": "60px",
|
|
86
|
+
"SurfSpacing16": "64px",
|
|
87
|
+
"SurfFontFamilySans": "Inter, system-ui, -apple-system, sans-serif",
|
|
88
|
+
"SurfFontFamilyMono": "JetBrains Mono, Fira Code, monospace",
|
|
89
|
+
"SurfFontFamilyDisplay": "'Space Grotesk', system-ui, sans-serif",
|
|
90
|
+
"SurfFontSizeXs": "12px",
|
|
91
|
+
"SurfFontSizeSm": "14px",
|
|
92
|
+
"SurfFontSizeBase": "16px",
|
|
93
|
+
"SurfFontSizeLg": "18px",
|
|
94
|
+
"SurfFontSizeXl": "20px",
|
|
95
|
+
"SurfFontSize2xl": "24px",
|
|
96
|
+
"SurfFontSize3xl": "30px",
|
|
97
|
+
"SurfFontSize4xl": "36px",
|
|
98
|
+
"SurfFontWeightNormal": "400",
|
|
99
|
+
"SurfFontWeightMedium": "500",
|
|
100
|
+
"SurfFontWeightSemibold": "600",
|
|
101
|
+
"SurfFontWeightBold": "700",
|
|
102
|
+
"SurfFontLineHeightTight": "1.25rem",
|
|
103
|
+
"SurfFontLineHeightNormal": "1.5rem",
|
|
104
|
+
"SurfFontLineHeightRelaxed": "1.75rem",
|
|
105
|
+
"SurfRadiusSm": "4px",
|
|
106
|
+
"SurfRadiusMd": "8px",
|
|
107
|
+
"SurfRadiusLg": "12px",
|
|
108
|
+
"SurfRadiusXl": "16px",
|
|
109
|
+
"SurfRadiusFull": "9999px",
|
|
110
|
+
"SurfShadowSm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
111
|
+
"SurfShadowMd": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
|
112
|
+
"SurfShadowLg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
|
|
113
|
+
"SurfDurationInstant": "100ms",
|
|
114
|
+
"SurfDurationFast": "200ms",
|
|
115
|
+
"SurfDurationNormal": "300ms",
|
|
116
|
+
"SurfDurationSlow": "500ms",
|
|
117
|
+
"SurfDurationStreaming": "50ms",
|
|
118
|
+
"SurfEasingDefault": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
119
|
+
"SurfEasingIn": "cubic-bezier(0.4, 0, 1, 1)",
|
|
120
|
+
"SurfEasingOut": "cubic-bezier(0, 0, 0.2, 1)",
|
|
121
|
+
"SurfEasingInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
122
|
+
"SurfButtonBgPrimary": "#e8175d",
|
|
123
|
+
"SurfButtonBgPrimaryHover": "#d00f4a",
|
|
124
|
+
"SurfButtonTextPrimary": "#ffffff",
|
|
125
|
+
"SurfButtonRadius": "8px",
|
|
126
|
+
"SurfInputBorder": "#e8e8e8",
|
|
127
|
+
"SurfInputBorderFocus": "#e8175d",
|
|
128
|
+
"SurfInputBg": "#ffffff",
|
|
129
|
+
"SurfConfidenceHighBg": "#16a34a1f",
|
|
130
|
+
"SurfConfidenceHighText": "#6b9317",
|
|
131
|
+
"SurfConfidenceHighBorder": "#16a34a",
|
|
132
|
+
"SurfConfidenceMediumBg": "#d977061f",
|
|
133
|
+
"SurfConfidenceMediumText": "#c69300",
|
|
134
|
+
"SurfConfidenceMediumBorder": "#d97706",
|
|
135
|
+
"SurfConfidenceLowBg": "#b91c1c1f",
|
|
136
|
+
"SurfConfidenceLowText": "#b8124a",
|
|
137
|
+
"SurfConfidenceLowBorder": "#b91c1c",
|
|
138
|
+
"SurfVerificationPassedIcon": "#16a34a",
|
|
139
|
+
"SurfVerificationPassedBg": "#16a34a1f",
|
|
140
|
+
"SurfVerificationFlaggedIcon": "#d97706",
|
|
141
|
+
"SurfVerificationFlaggedBg": "#d977061f",
|
|
142
|
+
"SurfVerificationFailedIcon": "#b91c1c",
|
|
143
|
+
"SurfVerificationFailedBg": "#b91c1c1f",
|
|
144
|
+
"SurfSourceCardBg": "#ffffff",
|
|
145
|
+
"SurfSourceCardBorder": "#e8e8e8",
|
|
146
|
+
"SurfSourceCardBorderHover": "#b0b0b0",
|
|
147
|
+
"SurfAgentCoordinatorAccent": "#0099a8",
|
|
148
|
+
"SurfAgentHrAccent": "#e8175d",
|
|
149
|
+
"SurfAgentItAccent": "#5bc8f5",
|
|
150
|
+
"SurfAgentGovernanceAccent": "#3b1283",
|
|
151
|
+
"SurfAgentFinanceAccent": "#f8b800",
|
|
152
|
+
"SurfAgentFacilitiesAccent": "#8dc21f",
|
|
153
|
+
"SurfAgentGeneralAccent": "#787878",
|
|
154
|
+
"SurfMessageUserBg": "#e8175d",
|
|
155
|
+
"SurfMessageUserText": "#ffffff",
|
|
156
|
+
"SurfMessageAssistantBg": "#ffffff",
|
|
157
|
+
"SurfMessageAssistantText": "#3c3c3c",
|
|
158
|
+
"SurfMessageAssistantBorder": "#e8e8e8",
|
|
159
|
+
"SurfStreamingCursorColor": "#e8175d",
|
|
160
|
+
"SurfStreamingPhaseBg": "#e8175d14",
|
|
161
|
+
"SurfStreamingPhaseText": "#e8175d",
|
|
162
|
+
"SurfStreamingPhaseIcon": "#e8175d"
|
|
163
|
+
} as const
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@surf-kit/tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Design tokens for surf-kit — colors, spacing, typography as CSS, JSON, and TypeScript",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-tokens",
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"./css/light": "./dist/css/variables-light.css",
|
|
23
23
|
"./css/dark": "./dist/css/variables-dark.css",
|
|
24
24
|
"./css/brand": "./dist/css/variables-brand.css",
|
|
25
|
+
"./css/energy": "./dist/css/variables-energy.css",
|
|
25
26
|
"./ts": {
|
|
26
27
|
"types": "./dist/ts/tokens.d.ts",
|
|
27
28
|
"default": "./dist/ts/tokens.js"
|
|
@@ -43,6 +44,10 @@
|
|
|
43
44
|
"types": "./dist/native/tokens-brand.ts",
|
|
44
45
|
"default": "./dist/native/tokens-brand.ts"
|
|
45
46
|
},
|
|
47
|
+
"./native/energy": {
|
|
48
|
+
"types": "./dist/native/tokens-energy.ts",
|
|
49
|
+
"default": "./dist/native/tokens-energy.ts"
|
|
50
|
+
},
|
|
46
51
|
".": "./dist/ts/tokens.js"
|
|
47
52
|
},
|
|
48
53
|
"repository": {
|