@oscarrf2/goo-ds 0.1.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/README.md +163 -0
- package/package.json +60 -0
- package/src/components/Button/Button.css +107 -0
- package/src/components/Button/Button.tsx +82 -0
- package/src/components/Button/Button.types.ts +62 -0
- package/src/components/Button/index.ts +3 -0
- package/src/components/Cell/Cell.css +64 -0
- package/src/components/Cell/Cell.tsx +42 -0
- package/src/components/Cell/Cell.types.ts +42 -0
- package/src/components/Cell/index.ts +3 -0
- package/src/components/Codeblock/Codeblock.css +90 -0
- package/src/components/Codeblock/Codeblock.tsx +88 -0
- package/src/components/Codeblock/Codeblock.types.ts +42 -0
- package/src/components/Codeblock/index.ts +3 -0
- package/src/components/CoreText/CoreText.tsx +43 -0
- package/src/components/CoreText/CoreText.types.ts +56 -0
- package/src/components/CoreText/index.ts +2 -0
- package/src/components/Divider/Divider.css +38 -0
- package/src/components/Divider/Divider.tsx +35 -0
- package/src/components/Divider/Divider.types.ts +19 -0
- package/src/components/Divider/index.ts +3 -0
- package/src/components/InputImage/InputImage.css +212 -0
- package/src/components/InputImage/InputImage.tsx +314 -0
- package/src/components/InputImage/InputImage.types.ts +86 -0
- package/src/components/InputImage/index.ts +2 -0
- package/src/components/Sidebar/Sidebar.css +35 -0
- package/src/components/Sidebar/Sidebar.tsx +42 -0
- package/src/components/Sidebar/Sidebar.types.ts +24 -0
- package/src/components/Sidebar/index.ts +3 -0
- package/src/components/SidebarItem/SidebarItem.css +70 -0
- package/src/components/SidebarItem/SidebarItem.tsx +55 -0
- package/src/components/SidebarItem/SidebarItem.types.ts +39 -0
- package/src/components/SidebarItem/index.ts +3 -0
- package/src/components/Skeleton/Skeleton.css +25 -0
- package/src/components/Skeleton/Skeleton.tsx +41 -0
- package/src/components/Skeleton/Skeleton.types.ts +65 -0
- package/src/components/Skeleton/index.ts +5 -0
- package/src/components/Spacer/Spacer.tsx +31 -0
- package/src/components/Spacer/Spacer.types.ts +58 -0
- package/src/components/Spacer/index.ts +3 -0
- package/src/components/TabItem/TabItem.css +67 -0
- package/src/components/TabItem/TabItem.tsx +45 -0
- package/src/components/TabItem/TabItem.types.ts +35 -0
- package/src/components/TabItem/index.ts +3 -0
- package/src/components/Table/Table.css +16 -0
- package/src/components/Table/Table.tsx +39 -0
- package/src/components/Table/Table.types.ts +18 -0
- package/src/components/Table/index.ts +3 -0
- package/src/components/TableRow/TableRow.css +53 -0
- package/src/components/TableRow/TableRow.tsx +53 -0
- package/src/components/TableRow/TableRow.types.ts +41 -0
- package/src/components/TableRow/index.ts +3 -0
- package/src/components/Tabs/Tabs.css +11 -0
- package/src/components/Tabs/Tabs.tsx +37 -0
- package/src/components/Tabs/Tabs.types.ts +18 -0
- package/src/components/Tabs/index.ts +3 -0
- package/src/components/index.ts +15 -0
- package/src/compositions/index.ts +3 -0
- package/src/index.css +68 -0
- package/src/index.ts +4 -0
- package/src/styles/component-tokens.css +270 -0
- package/src/styles/component-tokens.current.css +3 -0
- package/src/styles/fonts.css +11 -0
- package/src/styles/global-tokens.css +257 -0
- package/src/styles/index.css +20 -0
- package/src/styles/number-tokens.css +72 -0
- package/src/styles/semantic-tokens.css +84 -0
- package/src/styles/style-tokens.css +219 -0
- package/src/styles/typography-tokens.css +50 -0
- package/src/styles.css +2 -0
package/src/index.css
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
line-height: 1.5;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
background-color: #242424;
|
|
9
|
+
|
|
10
|
+
font-synthesis: none;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a {
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
color: #646cff;
|
|
19
|
+
text-decoration: inherit;
|
|
20
|
+
}
|
|
21
|
+
a:hover {
|
|
22
|
+
color: #535bf2;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
margin: 0;
|
|
27
|
+
display: flex;
|
|
28
|
+
place-items: center;
|
|
29
|
+
min-width: 320px;
|
|
30
|
+
min-height: 100vh;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h1 {
|
|
34
|
+
font-size: 3.2em;
|
|
35
|
+
line-height: 1.1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
button {
|
|
39
|
+
border-radius: 8px;
|
|
40
|
+
border: 1px solid transparent;
|
|
41
|
+
padding: 0.6em 1.2em;
|
|
42
|
+
font-size: 1em;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
font-family: inherit;
|
|
45
|
+
background-color: #1a1a1a;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
transition: border-color 0.25s;
|
|
48
|
+
}
|
|
49
|
+
button:hover {
|
|
50
|
+
border-color: #646cff;
|
|
51
|
+
}
|
|
52
|
+
button:focus,
|
|
53
|
+
button:focus-visible {
|
|
54
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@media (prefers-color-scheme: light) {
|
|
58
|
+
:root {
|
|
59
|
+
color: #213547;
|
|
60
|
+
background-color: #ffffff;
|
|
61
|
+
}
|
|
62
|
+
a:hover {
|
|
63
|
+
color: #747bff;
|
|
64
|
+
}
|
|
65
|
+
button {
|
|
66
|
+
background-color: #f9f9f9;
|
|
67
|
+
}
|
|
68
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
/* Auto-generated design tokens */
|
|
2
|
+
/* 2026-01-18T15:39:04.948Z */
|
|
3
|
+
|
|
4
|
+
/* component-tokens */
|
|
5
|
+
:root {
|
|
6
|
+
--button-primary-background-default: var(--color-background-primary-default);
|
|
7
|
+
--button-primary-background-hover: var(--color-background-primary-hover);
|
|
8
|
+
--button-primary-background-pressed: var(--color-background-primary-pressed);
|
|
9
|
+
--button-primary-background-disabled: var(--color-background-primary-disabled);
|
|
10
|
+
--button-primary-text-default: var(--color-text-inverse);
|
|
11
|
+
--button-primary-text-disabled: var(--color-text-inverse);
|
|
12
|
+
--button-primary-stroke-default: var(--color-stroke-primary-default);
|
|
13
|
+
--button-primary-stroke-disabled: var(--color-stroke-primary-disabled);
|
|
14
|
+
--button-small-cta-strokeWidth: var(--strokeWidth-10);
|
|
15
|
+
--button-small-cta-paddingVertical: var(--size-4);
|
|
16
|
+
--button-small-cta-paddingHorizontal: var(--size-12);
|
|
17
|
+
--button-small-cta-gap: var(--size-6);
|
|
18
|
+
--button-small-cta-radius: var(--radius-100);
|
|
19
|
+
--button-medium-cta-strokeWidth: var(--strokeWidth-10);
|
|
20
|
+
--button-medium-cta-gap: var(--size-8);
|
|
21
|
+
--button-medium-cta-paddingVertical: var(--size-8);
|
|
22
|
+
--button-medium-cta-paddingHorizontal: var(--size-16);
|
|
23
|
+
--button-medium-cta-radius: var(--radius-100);
|
|
24
|
+
--button-small-cta-minHeight: var(--size-32);
|
|
25
|
+
--button-medium-cta-minHeight: var(--size-36);
|
|
26
|
+
--button-large-cta-minHeight: var(--size-40);
|
|
27
|
+
--button-large-cta-gap: var(--size-8);
|
|
28
|
+
--button-large-cta-paddingVertical: var(--size-8);
|
|
29
|
+
--button-large-cta-strokeWidth: var(--strokeWidth-10);
|
|
30
|
+
--button-large-cta-paddingHorizontal: var(--size-24);
|
|
31
|
+
--button-large-cta-radius: var(--radius-100);
|
|
32
|
+
--button-small-icon-strokeWidth: var(--strokeWidth-150);
|
|
33
|
+
--button-small-icon-paddingVertical: var(--size-8);
|
|
34
|
+
--button-small-icon-paddingHorizontal: var(--size-8);
|
|
35
|
+
--button-small-icon-radius: var(--radius-100);
|
|
36
|
+
--button-medium-icon-strokeWidth: var(--strokeWidth-175);
|
|
37
|
+
--button-medium-icon-paddingVertical: var(--size-8);
|
|
38
|
+
--button-medium-icon-paddingHorizontal: var(--size-8);
|
|
39
|
+
--button-medium-icon-radius: var(--radius-100);
|
|
40
|
+
--button-medium-icon-minHeight: var(--size-36);
|
|
41
|
+
--button-medium-icon-minWidth: var(--size-36);
|
|
42
|
+
--button-large-icon-minWidth: var(--size-40);
|
|
43
|
+
--button-large-icon-paddingVertical: var(--size-12);
|
|
44
|
+
--button-large-icon-paddingHorizontal: var(--size-12);
|
|
45
|
+
--button-large-icon-minHeight: var(--size-40);
|
|
46
|
+
--button-large-icon-strokeWidth: var(--strokeWidth-200);
|
|
47
|
+
--button-large-icon-radius: var(--radius-100);
|
|
48
|
+
--button-small-icon-minWidth: var(--size-32);
|
|
49
|
+
--button-small-icon-minHeight: var(--size-32);
|
|
50
|
+
--button-secondary-background-default: var(--color-background-secondary-default);
|
|
51
|
+
--button-secondary-background-hover: var(--color-background-secondary-hover);
|
|
52
|
+
--button-secondary-background-pressed: var(--color-background-secondary-pressed);
|
|
53
|
+
--button-secondary-background-disabled: var(--color-background-secondary-disabled);
|
|
54
|
+
--button-destructive-background-default: var(--color-background-semantic-error-default);
|
|
55
|
+
--button-destructive-background-hover: var(--color-background-semantic-error-hover);
|
|
56
|
+
--button-destructive-background-pressed: var(--color-background-semantic-error-pressed);
|
|
57
|
+
--button-destructive-background-disabled: var(--color-background-semantic-error-disabled);
|
|
58
|
+
--button-outline-background-default: var(--color-background-neutral-default);
|
|
59
|
+
--button-outline-background-hover: var(--color-background-neutral-hover);
|
|
60
|
+
--button-outline-background-pressed: var(--color-background-neutral-pressed);
|
|
61
|
+
--button-outline-background-disabled: var(--color-background-neutral-disabled);
|
|
62
|
+
--button-ghost-background-hover: var(--color-background-neutral-hover);
|
|
63
|
+
--button-ghost-background-pressed: var(--color-background-neutral-pressed);
|
|
64
|
+
--button-ghost-background-disabled: var(--color-background-neutral-disabled);
|
|
65
|
+
--button-secondary-stroke-default: var(--color-stroke-secondary-default);
|
|
66
|
+
--button-secondary-stroke-disabled: var(--color-stroke-secondary-disabled);
|
|
67
|
+
--button-destructive-stroke-default: var(--color-stroke-semantic-error-default);
|
|
68
|
+
--button-destructive-stroke-disabled: var(--color-stroke-semantic-error-disabled);
|
|
69
|
+
--button-outline-stroke-default: var(--color-stroke-neutral-default);
|
|
70
|
+
--button-outline-stroke-disabled: var(--color-stroke-neutral-disabled);
|
|
71
|
+
--button-secondary-text-default: var(--color-text-primary);
|
|
72
|
+
--button-secondary-text-disabled: var(--color-text-disabled);
|
|
73
|
+
--button-destructive-text-default: var(--color-text-inverse);
|
|
74
|
+
--button-destructive-text-disabled: var(--color-text-inverse);
|
|
75
|
+
--button-outline-text-default: var(--color-text-primary);
|
|
76
|
+
--button-outline-text-disabled: var(--color-text-disabled);
|
|
77
|
+
--button-ghost-text-default: var(--color-text-primary);
|
|
78
|
+
--button-ghost-text-disabled: var(--color-text-disabled);
|
|
79
|
+
--button-link-text-default: var(--color-text-primary);
|
|
80
|
+
--button-link-text-disabled: var(--color-text-disabled);
|
|
81
|
+
--button-primary-icon-default: var(--color-icon-inverse);
|
|
82
|
+
--button-primary-icon-disabled: var(--color-icon-inverse);
|
|
83
|
+
--button-secondary-icon-default: var(--color-icon-primary);
|
|
84
|
+
--button-secondary-icon-disabled: var(--color-icon-disabled);
|
|
85
|
+
--button-destructive-icon-default: var(--color-icon-inverse);
|
|
86
|
+
--button-destructive-icon-disabled: var(--color-icon-inverse);
|
|
87
|
+
--button-outline-icon-default: var(--color-icon-primary);
|
|
88
|
+
--button-outline-icon-disabled: var(--color-icon-disabled);
|
|
89
|
+
--button-ghost-icon-default: var(--color-icon-primary);
|
|
90
|
+
--button-ghost-icon-disabled: var(--color-icon-disabled);
|
|
91
|
+
--button-link-icon-default: var(--color-icon-primary);
|
|
92
|
+
--button-link-icon-disabled: var(--color-icon-disabled);
|
|
93
|
+
--coreIcon-small-minWidth: var(--size-16);
|
|
94
|
+
--coreIcon-small-minHeight: var(--size-16);
|
|
95
|
+
--coreIcon-small-strokeWidth: var(--strokeWidth-75);
|
|
96
|
+
--coreIcon-medium-minWidth: var(--size-20);
|
|
97
|
+
--coreIcon-medium-minHeight: var(--size-20);
|
|
98
|
+
--coreIcon-medium-strokeWidth: var(--strokeWidth-100);
|
|
99
|
+
--coreIcon-large-minWidth: var(--size-24);
|
|
100
|
+
--coreIcon-large-minHeight: var(--size-24);
|
|
101
|
+
--coreIcon-large-strokeWidth: var(--strokeWidth-125);
|
|
102
|
+
--coreText-text-primary-default: var(--color-text-primary);
|
|
103
|
+
--layout-background-default: var(--color-background-canvas-default);
|
|
104
|
+
--input-background-default: var(--color-background-neutral-default);
|
|
105
|
+
--input-stroke-default: var(--color-stroke-neutral-default);
|
|
106
|
+
--input-text-active: var(--color-text-primary);
|
|
107
|
+
--input-text-default: var(--color-text-neutral-default);
|
|
108
|
+
--input-medium-strokeWidth: var(--strokeWidth-10);
|
|
109
|
+
--input-medium-gap: var(--size-4);
|
|
110
|
+
--input-medium-paddingVertical: var(--size-8);
|
|
111
|
+
--input-medium-minHeight-textfield: var(--size-36);
|
|
112
|
+
--input-medium-paddingHorizontal: var(--size-12);
|
|
113
|
+
--input-medium-radius: var(--radius-100);
|
|
114
|
+
--input-medium-maxWidth: var(--size-320);
|
|
115
|
+
--input-background-hover: var(--color-background-interactive-neutral-hover);
|
|
116
|
+
--input-background-disabled: var(--color-background-neutral-disabled);
|
|
117
|
+
--image-medium-maxHeight-default: var(--size-128);
|
|
118
|
+
--image-background-loading: var(--color-background-neutral-disabled);
|
|
119
|
+
--image-medium-radius: var(--radius-100);
|
|
120
|
+
--image-medium-gap: var(--size-4);
|
|
121
|
+
--image-medium-paddingVertical-default: var(--size-20);
|
|
122
|
+
--image-medium-paddingHorizontal-default: var(--size-20);
|
|
123
|
+
--input-text-error: var(--color-text-error);
|
|
124
|
+
--input-stroke-error: var(--color-stroke-semantic-error-default);
|
|
125
|
+
--skeleton-background-default: var(--color-background-neutral-disabled);
|
|
126
|
+
--input-text-disabled: var(--color-text-disabled);
|
|
127
|
+
--toast-text-primary: var(--color-text-primary);
|
|
128
|
+
--toast-background-success: var(--color-background-semantic-success-default);
|
|
129
|
+
--toast-medium-gap: var(--size-8);
|
|
130
|
+
--toast-medium-paddingHorizontal: var(--size-16);
|
|
131
|
+
--toast-medium-paddingVertical: var(--size-16);
|
|
132
|
+
--toast-medium-strokeWidth: var(--strokeWidth-10);
|
|
133
|
+
--toast-medium-radius: var(--radius-100);
|
|
134
|
+
--dot-medium-paddingHorizontal: var(--size-2);
|
|
135
|
+
--dot-medium-paddingVertical: var(--size-2);
|
|
136
|
+
--dot-medium-strokeWidth: var(--strokeWidth-10);
|
|
137
|
+
--dot-medium-radius: var(--VariableID-2768-287);
|
|
138
|
+
--dot-primary-text-default: var(--color-text-inverse);
|
|
139
|
+
--dot-primary-background-default: var(--color-background-primary-default);
|
|
140
|
+
--dot-primary-icon-default: var(--color-icon-inverse);
|
|
141
|
+
--dot-medium-minWidth: var(--size-24);
|
|
142
|
+
--dot-medium-minHeight: var(--size-24);
|
|
143
|
+
--dot-outline-background-default: var(--color-background-neutral-default);
|
|
144
|
+
--dot-outline-text-default: var(--color-text-neutral-default);
|
|
145
|
+
--dot-outline-stroke-default: var(--color-stroke-neutral-default);
|
|
146
|
+
--dot-outline-icon-default: var(--color-icon-neutral-default);
|
|
147
|
+
--timeline-medium-gap: var(--size-8);
|
|
148
|
+
--timeline-text-primary: var(--color-text-primary);
|
|
149
|
+
--timeline-text-secondary: var(--color-text-neutral-default);
|
|
150
|
+
--timeline-stroke-default: var(--color-stroke-neutral-default);
|
|
151
|
+
--timeline-stroke-filled: var(--color-stroke-primary-default);
|
|
152
|
+
--timeline-text-filled: var(--color-text-inverse);
|
|
153
|
+
--timeline-icon-filled: var(--color-icon-inverse);
|
|
154
|
+
--timeline-icon-default: var(--color-icon-neutral-default);
|
|
155
|
+
--timeline-background-filled: var(--color-background-primary-default);
|
|
156
|
+
--timeline-background-default: var(--color-background-neutral-default);
|
|
157
|
+
--timeline-medium-borderWidth: var(--strokeWidth-10);
|
|
158
|
+
--timeline-medium-radius: var(--radius-round);
|
|
159
|
+
--divider-background-default: var(--color-stroke-neutral-default);
|
|
160
|
+
--image-medium-maxHeight-generated: var(--size-256);
|
|
161
|
+
--input-medium-minHeight-textarea: var(--size-56);
|
|
162
|
+
--image-medium-paddingVertical-filled: var(--size-8);
|
|
163
|
+
--image-medium-paddingHorizontal-filled: var(--size-8);
|
|
164
|
+
--button-extraSmall-icon-radius: var(--radius-50);
|
|
165
|
+
--button-extraSmall-icon-paddingHorizontal: var(--size-0);
|
|
166
|
+
--button-extraSmall-icon-paddingVertical: var(--size-0);
|
|
167
|
+
--button-extraSmall-icon-gap: var(--size-4);
|
|
168
|
+
--button-extraSmall-icon-strokeWidth: var(--strokeWidth-10);
|
|
169
|
+
--button-extraSmall-icon-minHeight: var(--size-16);
|
|
170
|
+
--button-extraSmall-icon-minWidth: var(--size-16);
|
|
171
|
+
--toast-background-error: var(--color-background-semantic-error-default);
|
|
172
|
+
--card-flip-background-default: var(--color-background-neutral-default);
|
|
173
|
+
--card-flip-text-default: var(--VariableID-2818-301);
|
|
174
|
+
--card-flip-medium-gap: var(--size-16);
|
|
175
|
+
--card-flip-medium-paddingHorizontal: var(--size-16);
|
|
176
|
+
--card-flip-medium-paddingVertical: var(--size-16);
|
|
177
|
+
--card-flip-medium-minHeight: var(--size-224);
|
|
178
|
+
--input-large-radius: var(--radius-100);
|
|
179
|
+
--input-large-paddingHorizontal: var(--size-12);
|
|
180
|
+
--input-large-paddingVertical: var(--size-12);
|
|
181
|
+
--input-large-gap: var(--size-4);
|
|
182
|
+
--input-large-strokeWidth: var(--strokeWidth-10);
|
|
183
|
+
--input-large-minHeight-textfield: var(--size-36);
|
|
184
|
+
--input-large-minHeight-textarea: var(--size-56);
|
|
185
|
+
--card-action-background-default: var(--color-background-neutral-default);
|
|
186
|
+
--card-action-text-default: var(--VariableID-2768-379);
|
|
187
|
+
--card-action-medium-gap: var(--size-4);
|
|
188
|
+
--card-action-medium-paddingHorizontal: var(--size-12);
|
|
189
|
+
--card-action-medium-paddingVertical: var(--size-8);
|
|
190
|
+
--card-action-medium-cornerRadius: var(--VariableID-2768-288);
|
|
191
|
+
--card-action-background-hover: var(--color-background-neutral-hover);
|
|
192
|
+
--card-action-background-pressed: var(--color-background-neutral-pressed);
|
|
193
|
+
--card-action-text-subtitle: var(--VariableID-2818-301);
|
|
194
|
+
--card-action-icon-error: var(--VariableID-2768-404);
|
|
195
|
+
--card-flip-text-filled: var(--VariableID-2768-379);
|
|
196
|
+
--coreText-family-primary: Inter;
|
|
197
|
+
--coreText-family-secondary: Geist;
|
|
198
|
+
--coreIcon-icon-default: var(--color-icon-primary);
|
|
199
|
+
--coreText-text-secondary-default: var(--color-text-neutral-default);
|
|
200
|
+
--layout-background-alt: var(--color-background-canvas-alt);
|
|
201
|
+
--input-stroke-active: var(--color-stroke-neutral-active);
|
|
202
|
+
--toast-background-default: var(--color-background-floating-light);
|
|
203
|
+
--coreIcon-icon-error: var(--color-icon-error);
|
|
204
|
+
--input-stroke-success: var(--color-stroke-semantic-success-default);
|
|
205
|
+
--toast-text-secondary: var(--color-text-neutral-default);
|
|
206
|
+
--toast-icon-default: var(--color-icon-inverse);
|
|
207
|
+
--toast-medium-asset-radius: var(--radius-round);
|
|
208
|
+
--toast-medium-asset-paddingHorizontal: var(--size-4);
|
|
209
|
+
--toast-medium-asset-paddingVertical: var(--size-4);
|
|
210
|
+
--sidebar-item-background-hover: var(--color-background-interactive-neutral-hover);
|
|
211
|
+
--sidebar-item-text-active: var(--color-text-primary);
|
|
212
|
+
--sidebar-item-background-pressed: var(--color-background-interactive-neutral-pressed);
|
|
213
|
+
--sidebar-item-text-default: var(--color-text-neutral-default);
|
|
214
|
+
--sidebar-item-medium-radius: var(--radius-100);
|
|
215
|
+
--sidebar-item-medium-paddingHorizontal: var(--size-12);
|
|
216
|
+
--sidebar-item-medium-paddingVertical: var(--size-8);
|
|
217
|
+
--sidebar-item-background-active: var(--color-background-interactive-neutral-active);
|
|
218
|
+
--sidebar-background-default: var(--color-background-neutral-default);
|
|
219
|
+
--sidebar-medium-paddingHorizontal: var(--size-16);
|
|
220
|
+
--sidebar-medium-paddingTop: var(--size-32);
|
|
221
|
+
--sidebar-medium-paddingBottom: var(--size-20);
|
|
222
|
+
--sidebar-medium-minWidth: var(--size-256);
|
|
223
|
+
--docs-text-primary: var(--color-text-primary);
|
|
224
|
+
--button-extraSmall-cta-radius: var(--radius-100);
|
|
225
|
+
--button-extraSmall-cta-paddingHorizontal: var(--size-8);
|
|
226
|
+
--button-extraSmall-cta-paddingVertical: var(--size-2);
|
|
227
|
+
--button-extraSmall-cta-gap: var(--size-4);
|
|
228
|
+
--button-extraSmall-cta-strokeWidth: var(--strokeWidth-10);
|
|
229
|
+
--button-extraSmall-cta-minHeight: var(--size-24);
|
|
230
|
+
--tab-item-text-selected: var(--color-text-primary);
|
|
231
|
+
--tab-item-text-unselected: var(--color-text-neutral-default);
|
|
232
|
+
--tab-item-stroke-unselected: var(--color-stroke-neutral-default);
|
|
233
|
+
--tab-item-stroke-selected: var(--color-stroke-neutral-active);
|
|
234
|
+
--tab-item-medium-paddingHorizontal: var(--size-20);
|
|
235
|
+
--tab-item-medium-paddingTop: var(--size-4);
|
|
236
|
+
--tab-item-medium-paddingBottom: var(--size-8);
|
|
237
|
+
--tab-item-medium-strokeWidth: var(--strokeWidth-100);
|
|
238
|
+
--docs-text-secondary: var(--color-text-neutral-default);
|
|
239
|
+
--docs-preview-background-default: var(--color-surface-1);
|
|
240
|
+
--docs-preview-medium-paddingHorizontal: var(--size-20);
|
|
241
|
+
--docs-preview-medium-paddingVertical: var(--size-20);
|
|
242
|
+
--docs-preview-medium-gap: var(--size-12);
|
|
243
|
+
--docs-preview-medium-radius: var(--radius-200);
|
|
244
|
+
--codeblock-background-default: var(--color-surface-4);
|
|
245
|
+
--codeblock-medium-paddingHorizontal: var(--size-20);
|
|
246
|
+
--codeblock-medium-paddingVertical: var(--size-20);
|
|
247
|
+
--codeblock-medium-gap: var(--size-12);
|
|
248
|
+
--codeblock-medium-radius: var(--radius-200);
|
|
249
|
+
--codeblock-stroke-default: var(--color-stroke-neutral-default);
|
|
250
|
+
--docs-preview-stroke-default: var(--color-stroke-neutral-default);
|
|
251
|
+
--codeblock-text-default: var(--color-text-primary);
|
|
252
|
+
--codeblock-medium-strokeWidth: var(--strokeWidth-10);
|
|
253
|
+
--docs-preview-medium-strokeWidth: var(--strokeWidth-10);
|
|
254
|
+
--table-background-default: var(--color-surface-1);
|
|
255
|
+
--table-cell-paddingHorizontal: var(--size-12);
|
|
256
|
+
--table-cell-paddingVertical: var(--size-12);
|
|
257
|
+
--table-cell-width-xs: var(--size-64);
|
|
258
|
+
--table-cell-width-sm: var(--size-96);
|
|
259
|
+
--table-cell-width-md: var(--size-160);
|
|
260
|
+
--table-cell-width-lg: var(--size-256);
|
|
261
|
+
--table-cell-width-xl: var(--size-320);
|
|
262
|
+
--table-stroke-default: var(--color-stroke-neutral-default);
|
|
263
|
+
--table-row-stroke-divider: var(--color-stroke-neutral-default);
|
|
264
|
+
--table-row-medium-strokeWidth: var(--strokeWidth-10);
|
|
265
|
+
--table-row-background-hover: var(--color-background-interactive-neutral-hover);
|
|
266
|
+
--table-row-background-pressed: var(--color-background-interactive-neutral-pressed);
|
|
267
|
+
--table-row-background-active: var(--color-background-interactive-neutral-active);
|
|
268
|
+
--table-row-background-disabled: var(--color-background-neutral-disabled);
|
|
269
|
+
--table-medium-strokeWidth: var(--strokeWidth-10);
|
|
270
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* Font imports */
|
|
2
|
+
/* Fonts identified from typography-tokens.css: Inter, Geist, Merriweather */
|
|
3
|
+
|
|
4
|
+
/* Inter - primary font family */
|
|
5
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
6
|
+
|
|
7
|
+
/* Geist - secondary font family */
|
|
8
|
+
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');
|
|
9
|
+
|
|
10
|
+
/* Merriweather - secondary-flip font family */
|
|
11
|
+
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
/* Auto-generated design tokens */
|
|
2
|
+
/* 2026-01-18T11:19:20.848Z */
|
|
3
|
+
|
|
4
|
+
/* global-tokens */
|
|
5
|
+
:root {
|
|
6
|
+
--red-50: rgba(254, 242, 242, 1.0);
|
|
7
|
+
--red-100: rgba(254, 226, 226, 1.0);
|
|
8
|
+
--red-200: rgba(254, 202, 202, 1.0);
|
|
9
|
+
--red-300: rgba(252, 165, 165, 1.0);
|
|
10
|
+
--red-400: rgba(248, 113, 113, 1.0);
|
|
11
|
+
--red-500: rgba(239, 68, 68, 1.0);
|
|
12
|
+
--red-600: rgba(220, 38, 38, 1.0);
|
|
13
|
+
--red-700: rgba(185, 28, 28, 1.0);
|
|
14
|
+
--red-800: rgba(153, 27, 27, 1.0);
|
|
15
|
+
--red-900: rgba(127, 29, 29, 1.0);
|
|
16
|
+
--red-950: rgba(69, 10, 10, 1.0);
|
|
17
|
+
--orange-50: rgba(255, 247, 237, 1.0);
|
|
18
|
+
--orange-100: rgba(255, 237, 213, 1.0);
|
|
19
|
+
--orange-200: rgba(254, 215, 170, 1.0);
|
|
20
|
+
--orange-300: rgba(253, 186, 116, 1.0);
|
|
21
|
+
--orange-400: rgba(251, 146, 60, 1.0);
|
|
22
|
+
--orange-500: rgba(249, 115, 22, 1.0);
|
|
23
|
+
--orange-600: rgba(234, 88, 12, 1.0);
|
|
24
|
+
--orange-700: rgba(194, 65, 12, 1.0);
|
|
25
|
+
--orange-800: rgba(154, 52, 18, 1.0);
|
|
26
|
+
--orange-900: rgba(124, 45, 18, 1.0);
|
|
27
|
+
--orange-950: rgba(67, 20, 7, 1.0);
|
|
28
|
+
--amber-50: rgba(255, 251, 235, 1.0);
|
|
29
|
+
--amber-100: rgba(254, 243, 199, 1.0);
|
|
30
|
+
--amber-200: rgba(253, 230, 138, 1.0);
|
|
31
|
+
--amber-300: rgba(252, 211, 77, 1.0);
|
|
32
|
+
--amber-400: rgba(251, 191, 36, 1.0);
|
|
33
|
+
--amber-500: rgba(245, 158, 11, 1.0);
|
|
34
|
+
--amber-600: rgba(217, 119, 6, 1.0);
|
|
35
|
+
--amber-700: rgba(180, 83, 9, 1.0);
|
|
36
|
+
--amber-800: rgba(146, 64, 14, 1.0);
|
|
37
|
+
--amber-900: rgba(120, 53, 15, 1.0);
|
|
38
|
+
--amber-950: rgba(69, 26, 3, 1.0);
|
|
39
|
+
--yellow-50: rgba(254, 252, 232, 1.0);
|
|
40
|
+
--yellow-100: rgba(254, 249, 195, 1.0);
|
|
41
|
+
--yellow-200: rgba(254, 249, 195, 1.0);
|
|
42
|
+
--yellow-300: rgba(253, 224, 71, 1.0);
|
|
43
|
+
--yellow-400: rgba(250, 204, 21, 1.0);
|
|
44
|
+
--yellow-500: rgba(250, 204, 21, 1.0);
|
|
45
|
+
--yellow-600: rgba(202, 138, 4, 1.0);
|
|
46
|
+
--yellow-700: rgba(161, 98, 7, 1.0);
|
|
47
|
+
--yellow-800: rgba(133, 77, 14, 1.0);
|
|
48
|
+
--yellow-900: rgba(113, 63, 18, 1.0);
|
|
49
|
+
--yellow-950: rgba(66, 32, 6, 1.0);
|
|
50
|
+
--lime-50: rgba(247, 254, 231, 1.0);
|
|
51
|
+
--lime-100: rgba(236, 252, 203, 1.0);
|
|
52
|
+
--lime-200: rgba(217, 249, 157, 1.0);
|
|
53
|
+
--lime-300: rgba(190, 242, 100, 1.0);
|
|
54
|
+
--lime-400: rgba(163, 230, 53, 1.0);
|
|
55
|
+
--lime-500: rgba(132, 204, 22, 1.0);
|
|
56
|
+
--lime-600: rgba(101, 163, 13, 1.0);
|
|
57
|
+
--lime-700: rgba(77, 124, 15, 1.0);
|
|
58
|
+
--lime-800: rgba(63, 98, 18, 1.0);
|
|
59
|
+
--lime-900: rgba(54, 83, 20, 1.0);
|
|
60
|
+
--lime-950: rgba(26, 46, 5, 1.0);
|
|
61
|
+
--green-50: rgba(240, 253, 244, 1.0);
|
|
62
|
+
--green-100: rgba(220, 252, 231, 1.0);
|
|
63
|
+
--green-200: rgba(187, 247, 208, 1.0);
|
|
64
|
+
--green-300: rgba(134, 239, 172, 1.0);
|
|
65
|
+
--green-400: rgba(74, 222, 128, 1.0);
|
|
66
|
+
--green-500: rgba(34, 197, 94, 1.0);
|
|
67
|
+
--green-600: rgba(22, 163, 74, 1.0);
|
|
68
|
+
--green-700: rgba(21, 128, 61, 1.0);
|
|
69
|
+
--green-800: rgba(22, 101, 52, 1.0);
|
|
70
|
+
--green-900: rgba(22, 101, 52, 1.0);
|
|
71
|
+
--green-950: rgba(5, 46, 22, 1.0);
|
|
72
|
+
--emerald-50: rgba(236, 253, 245, 1.0);
|
|
73
|
+
--emerald-100: rgba(209, 250, 229, 1.0);
|
|
74
|
+
--emerald-200: rgba(167, 243, 208, 1.0);
|
|
75
|
+
--emerald-300: rgba(110, 231, 183, 1.0);
|
|
76
|
+
--emerald-400: rgba(52, 211, 153, 1.0);
|
|
77
|
+
--emerald-500: rgba(16, 185, 129, 1.0);
|
|
78
|
+
--emerald-600: rgba(5, 150, 105, 1.0);
|
|
79
|
+
--emerald-700: rgba(4, 120, 87, 1.0);
|
|
80
|
+
--emerald-800: rgba(6, 95, 70, 1.0);
|
|
81
|
+
--emerald-900: rgba(6, 78, 59, 1.0);
|
|
82
|
+
--emerald-950: rgba(2, 44, 34, 1.0);
|
|
83
|
+
--teal-50: rgba(240, 253, 250, 1.0);
|
|
84
|
+
--teal-100: rgba(204, 251, 241, 1.0);
|
|
85
|
+
--teal-200: rgba(153, 246, 228, 1.0);
|
|
86
|
+
--teal-300: rgba(94, 234, 212, 1.0);
|
|
87
|
+
--teal-400: rgba(45, 212, 191, 1.0);
|
|
88
|
+
--teal-500: rgba(20, 184, 166, 1.0);
|
|
89
|
+
--teal-600: rgba(13, 148, 136, 1.0);
|
|
90
|
+
--teal-700: rgba(15, 118, 110, 1.0);
|
|
91
|
+
--teal-800: rgba(17, 94, 89, 1.0);
|
|
92
|
+
--teal-900: rgba(19, 78, 74, 1.0);
|
|
93
|
+
--teal-950: rgba(4, 47, 46, 1.0);
|
|
94
|
+
--cyan-50: rgba(236, 254, 255, 1.0);
|
|
95
|
+
--cyan-100: rgba(207, 250, 254, 1.0);
|
|
96
|
+
--cyan-200: rgba(165, 243, 252, 1.0);
|
|
97
|
+
--cyan-300: rgba(103, 232, 249, 1.0);
|
|
98
|
+
--cyan-400: rgba(34, 211, 238, 1.0);
|
|
99
|
+
--cyan-500: rgba(6, 182, 212, 1.0);
|
|
100
|
+
--cyan-600: rgba(8, 145, 178, 1.0);
|
|
101
|
+
--cyan-700: rgba(14, 116, 144, 1.0);
|
|
102
|
+
--cyan-800: rgba(21, 94, 117, 1.0);
|
|
103
|
+
--cyan-900: rgba(22, 78, 99, 1.0);
|
|
104
|
+
--cyan-950: rgba(8, 51, 68, 1.0);
|
|
105
|
+
--sky-50: rgba(240, 249, 255, 1.0);
|
|
106
|
+
--sky-100: rgba(224, 242, 254, 1.0);
|
|
107
|
+
--sky-200: rgba(186, 230, 253, 1.0);
|
|
108
|
+
--sky-300: rgba(125, 211, 252, 1.0);
|
|
109
|
+
--sky-400: rgba(56, 189, 248, 1.0);
|
|
110
|
+
--sky-500: rgba(14, 165, 233, 1.0);
|
|
111
|
+
--sky-600: rgba(2, 132, 199, 1.0);
|
|
112
|
+
--sky-700: rgba(3, 105, 161, 1.0);
|
|
113
|
+
--sky-800: rgba(7, 89, 133, 1.0);
|
|
114
|
+
--sky-900: rgba(12, 74, 110, 1.0);
|
|
115
|
+
--sky-950: rgba(8, 47, 73, 1.0);
|
|
116
|
+
--blue-50: rgba(239, 246, 255, 1.0);
|
|
117
|
+
--blue-100: rgba(219, 234, 254, 1.0);
|
|
118
|
+
--blue-200: rgba(191, 219, 254, 1.0);
|
|
119
|
+
--blue-300: rgba(147, 197, 253, 1.0);
|
|
120
|
+
--blue-400: rgba(96, 165, 250, 1.0);
|
|
121
|
+
--blue-500: rgba(59, 130, 246, 1.0);
|
|
122
|
+
--blue-600: rgba(37, 99, 235, 1.0);
|
|
123
|
+
--blue-700: rgba(29, 78, 216, 1.0);
|
|
124
|
+
--blue-800: rgba(30, 64, 175, 1.0);
|
|
125
|
+
--blue-900: rgba(30, 58, 138, 1.0);
|
|
126
|
+
--blue-950: rgba(23, 37, 84, 1.0);
|
|
127
|
+
--indigo-50: rgba(238, 242, 255, 1.0);
|
|
128
|
+
--indigo-100: rgba(224, 231, 255, 1.0);
|
|
129
|
+
--indigo-200: rgba(199, 210, 254, 1.0);
|
|
130
|
+
--indigo-300: rgba(165, 180, 252, 1.0);
|
|
131
|
+
--indigo-400: rgba(129, 140, 248, 1.0);
|
|
132
|
+
--indigo-500: rgba(99, 102, 241, 1.0);
|
|
133
|
+
--indigo-600: rgba(79, 70, 229, 1.0);
|
|
134
|
+
--indigo-700: rgba(67, 56, 202, 1.0);
|
|
135
|
+
--indigo-800: rgba(55, 48, 163, 1.0);
|
|
136
|
+
--indigo-900: rgba(49, 46, 129, 1.0);
|
|
137
|
+
--indigo-950: rgba(30, 27, 75, 1.0);
|
|
138
|
+
--violet-50: rgba(245, 243, 255, 1.0);
|
|
139
|
+
--violet-100: rgba(237, 233, 254, 1.0);
|
|
140
|
+
--violet-200: rgba(237, 233, 254, 1.0);
|
|
141
|
+
--violet-300: rgba(196, 181, 253, 1.0);
|
|
142
|
+
--violet-400: rgba(167, 139, 250, 1.0);
|
|
143
|
+
--violet-500: rgba(139, 92, 246, 1.0);
|
|
144
|
+
--violet-600: rgba(124, 58, 237, 1.0);
|
|
145
|
+
--violet-700: rgba(109, 40, 217, 1.0);
|
|
146
|
+
--violet-800: rgba(91, 33, 182, 1.0);
|
|
147
|
+
--violet-900: rgba(76, 29, 149, 1.0);
|
|
148
|
+
--violet-950: rgba(46, 16, 101, 1.0);
|
|
149
|
+
--purple-50: rgba(250, 245, 255, 1.0);
|
|
150
|
+
--purple-100: rgba(243, 232, 255, 1.0);
|
|
151
|
+
--purple-200: rgba(233, 213, 255, 1.0);
|
|
152
|
+
--purple-300: rgba(216, 180, 254, 1.0);
|
|
153
|
+
--purple-400: rgba(192, 132, 252, 1.0);
|
|
154
|
+
--purple-500: rgba(168, 85, 247, 1.0);
|
|
155
|
+
--purple-600: rgba(147, 51, 234, 1.0);
|
|
156
|
+
--purple-700: rgba(126, 34, 206, 1.0);
|
|
157
|
+
--purple-800: rgba(107, 33, 168, 1.0);
|
|
158
|
+
--purple-900: rgba(88, 28, 135, 1.0);
|
|
159
|
+
--purple-950: rgba(59, 7, 100, 1.0);
|
|
160
|
+
--fuchsia-50: rgba(253, 244, 255, 1.0);
|
|
161
|
+
--fuchsia-100: rgba(250, 232, 255, 1.0);
|
|
162
|
+
--fuchsia-200: rgba(245, 208, 254, 1.0);
|
|
163
|
+
--fuchsia-300: rgba(240, 171, 252, 1.0);
|
|
164
|
+
--fuchsia-400: rgba(232, 121, 249, 1.0);
|
|
165
|
+
--fuchsia-500: rgba(217, 70, 239, 1.0);
|
|
166
|
+
--fuchsia-600: rgba(192, 38, 211, 1.0);
|
|
167
|
+
--fuchsia-700: rgba(162, 28, 175, 1.0);
|
|
168
|
+
--fuchsia-800: rgba(134, 25, 143, 1.0);
|
|
169
|
+
--fuchsia-900: rgba(112, 26, 117, 1.0);
|
|
170
|
+
--fuchsia-950: rgba(74, 4, 78, 1.0);
|
|
171
|
+
--pink-50: rgba(253, 242, 248, 1.0);
|
|
172
|
+
--pink-100: rgba(252, 231, 243, 1.0);
|
|
173
|
+
--pink-200: rgba(251, 207, 232, 1.0);
|
|
174
|
+
--pink-300: rgba(249, 168, 212, 1.0);
|
|
175
|
+
--pink-400: rgba(244, 114, 182, 1.0);
|
|
176
|
+
--pink-500: rgba(236, 72, 153, 1.0);
|
|
177
|
+
--pink-600: rgba(219, 39, 119, 1.0);
|
|
178
|
+
--pink-700: rgba(190, 24, 93, 1.0);
|
|
179
|
+
--pink-800: rgba(157, 23, 77, 1.0);
|
|
180
|
+
--pink-900: rgba(131, 24, 67, 1.0);
|
|
181
|
+
--pink-950: rgba(80, 7, 36, 1.0);
|
|
182
|
+
--rose-50: rgba(255, 241, 242, 1.0);
|
|
183
|
+
--rose-100: rgba(255, 228, 230, 1.0);
|
|
184
|
+
--rose-200: rgba(254, 205, 211, 1.0);
|
|
185
|
+
--rose-300: rgba(253, 164, 175, 1.0);
|
|
186
|
+
--rose-400: rgba(251, 113, 133, 1.0);
|
|
187
|
+
--rose-500: rgba(244, 63, 94, 1.0);
|
|
188
|
+
--rose-600: rgba(225, 29, 72, 1.0);
|
|
189
|
+
--rose-700: rgba(190, 18, 60, 1.0);
|
|
190
|
+
--rose-800: rgba(159, 18, 57, 1.0);
|
|
191
|
+
--rose-900: rgba(136, 19, 55, 1.0);
|
|
192
|
+
--rose-950: rgba(136, 19, 55, 1.0);
|
|
193
|
+
--slate-50: rgba(248, 250, 252, 1.0);
|
|
194
|
+
--slate-100: rgba(241, 245, 249, 1.0);
|
|
195
|
+
--slate-200: rgba(226, 232, 240, 1.0);
|
|
196
|
+
--slate-300: rgba(203, 213, 225, 1.0);
|
|
197
|
+
--slate-400: rgba(148, 163, 184, 1.0);
|
|
198
|
+
--slate-500: rgba(100, 116, 139, 1.0);
|
|
199
|
+
--slate-600: rgba(71, 85, 105, 1.0);
|
|
200
|
+
--slate-700: rgba(51, 65, 85, 1.0);
|
|
201
|
+
--slate-800: rgba(30, 41, 59, 1.0);
|
|
202
|
+
--slate-900: rgba(15, 23, 42, 1.0);
|
|
203
|
+
--slate-950: rgba(2, 6, 23, 1.0);
|
|
204
|
+
--gray-50: rgba(249, 250, 251, 1.0);
|
|
205
|
+
--gray-100: rgba(243, 244, 246, 1.0);
|
|
206
|
+
--gray-200: rgba(229, 231, 235, 1.0);
|
|
207
|
+
--gray-300: rgba(209, 213, 219, 1.0);
|
|
208
|
+
--gray-400: rgba(156, 163, 175, 1.0);
|
|
209
|
+
--gray-500: rgba(107, 114, 128, 1.0);
|
|
210
|
+
--gray-600: rgba(75, 85, 99, 1.0);
|
|
211
|
+
--gray-700: rgba(55, 65, 81, 1.0);
|
|
212
|
+
--gray-800: rgba(31, 41, 55, 1.0);
|
|
213
|
+
--gray-900: rgba(17, 24, 39, 1.0);
|
|
214
|
+
--gray-950: rgba(3, 7, 18, 1.0);
|
|
215
|
+
--zinc-50: rgba(250, 250, 250, 1.0);
|
|
216
|
+
--zinc-100: rgba(244, 244, 245, 1.0);
|
|
217
|
+
--zinc-200: rgba(228, 228, 231, 1.0);
|
|
218
|
+
--zinc-300: rgba(212, 212, 216, 1.0);
|
|
219
|
+
--zinc-400: rgba(161, 161, 170, 1.0);
|
|
220
|
+
--zinc-500: rgba(113, 113, 122, 1.0);
|
|
221
|
+
--zinc-600: rgba(82, 82, 91, 1.0);
|
|
222
|
+
--zinc-700: rgba(63, 63, 70, 1.0);
|
|
223
|
+
--zinc-800: rgba(39, 39, 42, 1.0);
|
|
224
|
+
--zinc-900: rgba(24, 24, 27, 1.0);
|
|
225
|
+
--zinc-950: rgba(9, 9, 11, 1.0);
|
|
226
|
+
--neutral-50: rgba(250, 250, 250, 1.0);
|
|
227
|
+
--neutral-100: rgba(245, 245, 245, 1.0);
|
|
228
|
+
--neutral-200: rgba(229, 229, 229, 1.0);
|
|
229
|
+
--neutral-300: rgba(212, 212, 212, 1.0);
|
|
230
|
+
--neutral-400: rgba(163, 163, 163, 1.0);
|
|
231
|
+
--neutral-500: rgba(115, 115, 115, 1.0);
|
|
232
|
+
--neutral-600: rgba(82, 82, 82, 1.0);
|
|
233
|
+
--neutral-700: rgba(64, 64, 64, 1.0);
|
|
234
|
+
--neutral-800: rgba(38, 38, 38, 1.0);
|
|
235
|
+
--neutral-900: rgba(23, 23, 23, 1.0);
|
|
236
|
+
--neutral-950: rgba(10, 10, 10, 1.0);
|
|
237
|
+
--stone-50: rgba(250, 250, 249, 1.0);
|
|
238
|
+
--stone-100: rgba(245, 245, 244, 1.0);
|
|
239
|
+
--stone-200: rgba(231, 229, 228, 1.0);
|
|
240
|
+
--stone-300: rgba(214, 211, 209, 1.0);
|
|
241
|
+
--stone-400: rgba(168, 162, 158, 1.0);
|
|
242
|
+
--stone-500: rgba(120, 113, 108, 1.0);
|
|
243
|
+
--stone-600: rgba(87, 83, 78, 1.0);
|
|
244
|
+
--stone-700: rgba(68, 64, 60, 1.0);
|
|
245
|
+
--stone-800: rgba(41, 37, 36, 1.0);
|
|
246
|
+
--stone-900: rgba(28, 25, 23, 1.0);
|
|
247
|
+
--stone-950: rgba(12, 10, 9, 1.0);
|
|
248
|
+
--white-50: rgba(255, 255, 255, 1.0);
|
|
249
|
+
--black-50: rgba(0, 0, 0, 1.0);
|
|
250
|
+
--white-transparent: rgba(255, 255, 255, 0.0);
|
|
251
|
+
--black-50-5: rgba(0, 0, 0, 0.1);
|
|
252
|
+
--slate-900-opacity-5: rgba(15, 23, 42, 0.1);
|
|
253
|
+
--slate-900-opacity-10: rgba(15, 23, 42, 0.1);
|
|
254
|
+
--slate-900-opacity-50: rgba(15, 23, 42, 0.5);
|
|
255
|
+
--slate-900-opacity-15: rgba(15, 23, 42, 0.2);
|
|
256
|
+
--slate-900-opacity-20: rgba(15, 23, 42, 0.2);
|
|
257
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* Design System CSS Entry Point */
|
|
2
|
+
/* Import order is fixed per Constitution and Scaffold */
|
|
3
|
+
|
|
4
|
+
/* 1. Fonts (must load first) */
|
|
5
|
+
@import "./fonts.css";
|
|
6
|
+
|
|
7
|
+
/* 2. Tailwind */
|
|
8
|
+
@import "tailwindcss";
|
|
9
|
+
|
|
10
|
+
/* 3. Base token layers */
|
|
11
|
+
@import "./global-tokens.css";
|
|
12
|
+
@import "./semantic-tokens.css";
|
|
13
|
+
@import "./number-tokens.css";
|
|
14
|
+
@import "./typography-tokens.css";
|
|
15
|
+
|
|
16
|
+
/* 4. Figma styles (text styles, gradients, shadows) */
|
|
17
|
+
@import "./style-tokens.css";
|
|
18
|
+
|
|
19
|
+
/* 5. Theme layer (component tokens via alias) */
|
|
20
|
+
@import "./component-tokens.current.css";
|