@landtrustinc/design-system 1.0.11
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 +38 -0
- package/dist/ShowcaseWrapper.tsx +18 -0
- package/dist/ThemeProvider.tsx +14 -0
- package/dist/colorUtils.ts +36 -0
- package/dist/global.ts +80 -0
- package/dist/index.css +173 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +1248 -0
- package/dist/index.js +5085 -0
- package/dist/index.js.map +1 -0
- package/dist/index.ts +9 -0
- package/dist/styles.ts +289 -0
- package/dist/theme.ts +27 -0
- package/dist/variables.css +194 -0
- package/package.json +102 -0
- package/variables.css +194 -0
package/README.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# @landtrustinc/design-system
|
|
2
|
+
|
|
3
|
+
Design system components for LandTrust applications.
|
|
4
|
+
|
|
5
|
+
## 🚀 Quick Setup
|
|
6
|
+
|
|
7
|
+
1. **Copy template:** `cp node_modules/@landtrustinc/design-system/.npmrc.template .npmrc`
|
|
8
|
+
2. **Get GitHub token:** https://github.com/settings/tokens (select "read:packages" scope)
|
|
9
|
+
3. **Replace YOUR_GITHUB_TOKEN** in `.npmrc` with your actual token
|
|
10
|
+
4. **Add to gitignore:** `echo ".npmrc" >> .gitignore`
|
|
11
|
+
5. **Install:** `npm install @landtrustinc/design-system`
|
|
12
|
+
|
|
13
|
+
## 📖 Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Button, Box, Typography } from '@landtrustinc/design-system';
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<Box>
|
|
21
|
+
<Typography variant="h1">Hello World</Typography>
|
|
22
|
+
<Button variant="primary">Click Me</Button>
|
|
23
|
+
</Box>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## 🔧 Development
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm run dev # Start development server
|
|
32
|
+
npm run build # Build package
|
|
33
|
+
npm run storybook # Run Storybook
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## 📦 Publishing
|
|
37
|
+
|
|
38
|
+
Go to **Actions** → **Publish Design System Package** → Enter version → **Run workflow**
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Global } from '@emotion/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
import { GlobalStyle } from './global';
|
|
5
|
+
import { ThemeProvider } from './ThemeProvider';
|
|
6
|
+
|
|
7
|
+
interface ShowcaseWrapperProps {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const ShowcaseWrapper: React.FC<ShowcaseWrapperProps> = ({ children }) => (
|
|
12
|
+
<ThemeProvider>
|
|
13
|
+
<Global styles={GlobalStyle} />
|
|
14
|
+
<div className="sb-unstyled">{children}</div>
|
|
15
|
+
</ThemeProvider>
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
export default ShowcaseWrapper;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
import { theme } from './theme';
|
|
5
|
+
|
|
6
|
+
interface ThemeProviderProps {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => (
|
|
11
|
+
<EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
export default ThemeProvider;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { colors } from './styles';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Resolves a color token to its actual color value
|
|
5
|
+
* Supports both dot notation (gray.100) and direct color values (#fff, red, etc.)
|
|
6
|
+
*/
|
|
7
|
+
export const resolveColor = (colorToken: string): string => {
|
|
8
|
+
if (!colorToken) return '';
|
|
9
|
+
|
|
10
|
+
// If it's already a valid CSS color (starts with #, rgb, hsl, or is a named color)
|
|
11
|
+
if (
|
|
12
|
+
colorToken.startsWith('#') ||
|
|
13
|
+
colorToken.startsWith('rgb') ||
|
|
14
|
+
colorToken.startsWith('hsl') ||
|
|
15
|
+
colorToken.match(/^[a-z]+$/i)
|
|
16
|
+
) {
|
|
17
|
+
return colorToken;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Handle dot notation (e.g., "gray.100")
|
|
21
|
+
const [colorName, shade] = colorToken.split('.');
|
|
22
|
+
|
|
23
|
+
if (colorName && shade) {
|
|
24
|
+
// Use bracket notation to safely access colors
|
|
25
|
+
const colorSet = colors[colorName as keyof typeof colors];
|
|
26
|
+
if (colorSet && typeof colorSet === 'object') {
|
|
27
|
+
const colorValue = (colorSet as Record<string, string>)[shade];
|
|
28
|
+
if (colorValue) {
|
|
29
|
+
return colorValue;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// If we can't resolve it, return the original token
|
|
35
|
+
return colorToken;
|
|
36
|
+
};
|
package/dist/global.ts
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import './variables.css';
|
|
2
|
+
|
|
3
|
+
import { css } from '@emotion/react';
|
|
4
|
+
|
|
5
|
+
import { colors, fonts, fontSizes, fontWeights, lineHeights } from './styles';
|
|
6
|
+
|
|
7
|
+
export const globalStyles = css`
|
|
8
|
+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');
|
|
9
|
+
|
|
10
|
+
html {
|
|
11
|
+
-webkit-box-sizing: border-box;
|
|
12
|
+
-moz-box-sizing: border-box;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
*,
|
|
17
|
+
*::before,
|
|
18
|
+
*::after {
|
|
19
|
+
-webkit-box-sizing: inherit;
|
|
20
|
+
-moz-box-sizing: inherit;
|
|
21
|
+
box-sizing: inherit;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
* {
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
font-family: ${fonts.base};
|
|
27
|
+
-webkit-font-smoothing: antialiased;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
body {
|
|
31
|
+
font-size: 16px;
|
|
32
|
+
font-size: ${fontSizes.base};
|
|
33
|
+
font-family: ${fonts.base};
|
|
34
|
+
font-weight: normal;
|
|
35
|
+
line-height: ${lineHeights.normal};
|
|
36
|
+
-webkit-font-smoothing: antialiased;
|
|
37
|
+
-moz-osx-font-smoothing: grayscale;
|
|
38
|
+
text-rendering: optimizeSpeed;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
::selection,
|
|
42
|
+
::-moz-selection {
|
|
43
|
+
background: ${colors.olive['500']};
|
|
44
|
+
color: ${colors.light['100']};
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
*,
|
|
48
|
+
*:focus {
|
|
49
|
+
outline: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
*:focus-visible {
|
|
53
|
+
outline: 2px solid ${colors.olive['700']};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
a {
|
|
57
|
+
color: ${colors.gray['900']};
|
|
58
|
+
text-decoration: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
a:hover {
|
|
62
|
+
text-decoration: underline;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
b,
|
|
66
|
+
strong {
|
|
67
|
+
font-weight: ${fontWeights.bold};
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
ul,
|
|
71
|
+
ol {
|
|
72
|
+
list-style: none;
|
|
73
|
+
margin: 0;
|
|
74
|
+
padding: 0;
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
77
|
+
|
|
78
|
+
export const GlobalStyle = css`
|
|
79
|
+
${globalStyles}
|
|
80
|
+
`;
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/* src/shared/variables.css */
|
|
2
|
+
:root {
|
|
3
|
+
--color-base-white: #ffffff;
|
|
4
|
+
--color-base-black: #000000;
|
|
5
|
+
--color-primary-900: #0c160f;
|
|
6
|
+
--color-primary-800: #192d1e;
|
|
7
|
+
--color-primary-700: #25432d;
|
|
8
|
+
--color-primary-600: #325a3c;
|
|
9
|
+
--color-primary-500: #3e704b;
|
|
10
|
+
--color-primary-400: #638b6d;
|
|
11
|
+
--color-primary-300: #87a58f;
|
|
12
|
+
--color-primary-200: #acc0b1;
|
|
13
|
+
--color-primary-100: #d0dad3;
|
|
14
|
+
--color-hunter-900: #0f100f;
|
|
15
|
+
--color-hunter-800: #1e201f;
|
|
16
|
+
--color-hunter-700: #2d312e;
|
|
17
|
+
--color-hunter-600: #3c413e;
|
|
18
|
+
--color-hunter-500: #4b514d;
|
|
19
|
+
--color-hunter-400: #6d726f;
|
|
20
|
+
--color-hunter-300: #8f9390;
|
|
21
|
+
--color-hunter-200: #b1b3b2;
|
|
22
|
+
--color-hunter-100: #d3d4d3;
|
|
23
|
+
--color-brown-900: #2a241e;
|
|
24
|
+
--color-brown-800: #54483d;
|
|
25
|
+
--color-brown-700: #7d6b5b;
|
|
26
|
+
--color-brown-600: #a78f7a;
|
|
27
|
+
--color-brown-500: #d1b398;
|
|
28
|
+
--color-brown-400: #d8c0ab;
|
|
29
|
+
--color-brown-300: #dfcdbd;
|
|
30
|
+
--color-brown-200: #e7dbd0;
|
|
31
|
+
--color-brown-100: #f5f2ed;
|
|
32
|
+
--color-brown-50: #fffdf7;
|
|
33
|
+
--color-neutral-900: #202327;
|
|
34
|
+
--color-neutral-800: #40464d;
|
|
35
|
+
--color-neutral-700: #606874;
|
|
36
|
+
--color-neutral-600: #808b9a;
|
|
37
|
+
--color-neutral-500: #a0aec1;
|
|
38
|
+
--color-neutral-400: #b1bccb;
|
|
39
|
+
--color-neutral-300: #c2cad6;
|
|
40
|
+
--color-neutral-200: #d3d9e0;
|
|
41
|
+
--color-neutral-100: #e4e7eb;
|
|
42
|
+
--color-neutral-50: #f8fafc;
|
|
43
|
+
--color-yellow-900: #64551f;
|
|
44
|
+
--color-yellow-800: #967f2f;
|
|
45
|
+
--color-yellow-700: #e4bc29;
|
|
46
|
+
--color-yellow-600: #edc94a;
|
|
47
|
+
--color-yellow-500: #fad44e;
|
|
48
|
+
--color-yellow-400: #fbdd71;
|
|
49
|
+
--color-yellow-300: #fce595;
|
|
50
|
+
--color-yellow-200: #fdeeb8;
|
|
51
|
+
--color-yellow-100: #fef6dc;
|
|
52
|
+
--color-yellow-50: #fefbed;
|
|
53
|
+
--color-gold-900: #332510;
|
|
54
|
+
--color-gold-800: #664b21;
|
|
55
|
+
--color-gold-700: #997031;
|
|
56
|
+
--color-gold-600: #cc9642;
|
|
57
|
+
--color-gold-500: #ffbb52;
|
|
58
|
+
--color-gold-400: #ffc975;
|
|
59
|
+
--color-gold-300: #ffd697;
|
|
60
|
+
--color-gold-200: #ffe4ba;
|
|
61
|
+
--color-gold-100: #fff1dc;
|
|
62
|
+
--color-gold-50: #fff8ed;
|
|
63
|
+
--color-accent-900: #2d0d02;
|
|
64
|
+
--color-accent-800: #5a1b05;
|
|
65
|
+
--color-accent-700: #882807;
|
|
66
|
+
--color-accent-600: #b5360a;
|
|
67
|
+
--color-accent-500: #e2430c;
|
|
68
|
+
--color-accent-400: #e8693d;
|
|
69
|
+
--color-accent-300: #ee8e6d;
|
|
70
|
+
--color-accent-200: #f3b49e;
|
|
71
|
+
--color-accent-100: #f9d9ce;
|
|
72
|
+
--color-accent-50: #fcece6;
|
|
73
|
+
--color-success-900: #0f2204;
|
|
74
|
+
--color-success-800: #1f4309;
|
|
75
|
+
--color-success-700: #2e650d;
|
|
76
|
+
--color-success-600: #3e8612;
|
|
77
|
+
--color-success-500: #4da816;
|
|
78
|
+
--color-success-400: #71b945;
|
|
79
|
+
--color-success-300: #94cb73;
|
|
80
|
+
--color-success-200: #b8dca2;
|
|
81
|
+
--color-success-100: #dbeed0;
|
|
82
|
+
--color-success-50: #edf6e8;
|
|
83
|
+
--color-error-900: #2c0808;
|
|
84
|
+
--color-error-800: #580f0f;
|
|
85
|
+
--color-error-700: #841717;
|
|
86
|
+
--color-error-600: #b01e1e;
|
|
87
|
+
--color-error-500: #dc2626;
|
|
88
|
+
--color-error-400: #e35151;
|
|
89
|
+
--color-error-300: #ea7d7d;
|
|
90
|
+
--color-error-200: #f1a8a8;
|
|
91
|
+
--color-error-100: #f8d4d4;
|
|
92
|
+
--color-error-50: #fbe9e9;
|
|
93
|
+
--text-primary: var(--color-neutral-900);
|
|
94
|
+
--text-secondary: var(--color-neutral-600);
|
|
95
|
+
--text-headings: var(--color-neutral-900);
|
|
96
|
+
--text-action: var(--color-neutral-900);
|
|
97
|
+
--text-action-hover: var(--color-neutral-600);
|
|
98
|
+
--text-on-disabled: var(--color-neutral-300);
|
|
99
|
+
--text-disabled: var(--color-neutral-300);
|
|
100
|
+
--text-success: var(--color-success-500);
|
|
101
|
+
--text-error: var(--color-error-500);
|
|
102
|
+
--text-warning: var(--color-yellow-500);
|
|
103
|
+
--text-on-action: var(--color-base-white);
|
|
104
|
+
--surface-page: var(--color-base-white);
|
|
105
|
+
--surface-subtle: var(--color-brown-50);
|
|
106
|
+
--surface-success: var(--color-success-50);
|
|
107
|
+
--surface-warning: var(--color-yellow-200);
|
|
108
|
+
--surface-error: var(--color-error-100);
|
|
109
|
+
--surface-disabled: var(--color-primary-200);
|
|
110
|
+
--surface-disabled-2: var(--color-neutral-50);
|
|
111
|
+
--surface-action: var(--color-primary-500);
|
|
112
|
+
--surface-action-2: var(--color-yellow-500);
|
|
113
|
+
--surface-action-hover: var(--color-primary-700);
|
|
114
|
+
--surface-action-2-hover: var(--color-yellow-600);
|
|
115
|
+
--surface-action-hover-outline: var(--color-primary-500);
|
|
116
|
+
--surface-action-3: var(--surface-page);
|
|
117
|
+
--surface-action-3-hover: var(--color-neutral-50);
|
|
118
|
+
--border-primary: var(--color-neutral-200);
|
|
119
|
+
--border-secondary: var(--color-base-black);
|
|
120
|
+
--border-success: var(--color-success-50);
|
|
121
|
+
--border-warning: var(--color-yellow-200);
|
|
122
|
+
--border-error: var(--color-error-300);
|
|
123
|
+
--border-disabled: var(--color-neutral-300);
|
|
124
|
+
--border-disabled-2: var(--color-neutral-100);
|
|
125
|
+
--border-action: var(--color-primary-500);
|
|
126
|
+
--border-action-hover: var(--color-primary-700);
|
|
127
|
+
--border-focus: var(--color-primary-500);
|
|
128
|
+
--icon-primary: var(--color-neutral-900);
|
|
129
|
+
--icon-secondary: var(--color-neutral-600);
|
|
130
|
+
--icon-success: var(--color-success-500);
|
|
131
|
+
--icon-warning: var(--color-yellow-500);
|
|
132
|
+
--icon-error: var(--color-error-500);
|
|
133
|
+
--icon-action: var(--color-primary-500);
|
|
134
|
+
--icon-action-hover: var(--color-primary-700);
|
|
135
|
+
--icon-on-action: var(--color-base-white);
|
|
136
|
+
--icon-on-disabled: var(--color-neutral-300);
|
|
137
|
+
--spacing-0: 0;
|
|
138
|
+
--spacing-1: 4px;
|
|
139
|
+
--spacing-2: 8px;
|
|
140
|
+
--spacing-3: 12px;
|
|
141
|
+
--spacing-4: 16px;
|
|
142
|
+
--spacing-5: 20px;
|
|
143
|
+
--spacing-6: 24px;
|
|
144
|
+
--spacing-7: 28px;
|
|
145
|
+
--spacing-8: 32px;
|
|
146
|
+
--spacing-10: 40px;
|
|
147
|
+
--spacing-12: 48px;
|
|
148
|
+
--spacing-14: 56px;
|
|
149
|
+
--spacing-24: 96px;
|
|
150
|
+
--spacing-32: 128px;
|
|
151
|
+
--spacing-64: 256px;
|
|
152
|
+
--shadow-blur-2xs: 4px;
|
|
153
|
+
--shadow-blur-xs: 8px;
|
|
154
|
+
--shadow-blur-sm: 12px;
|
|
155
|
+
--shadow-blur-md: 16px;
|
|
156
|
+
--shadow-blur-lg: 24px;
|
|
157
|
+
--shadow-blur-xl: 48px;
|
|
158
|
+
--shadow-blur-2xl: 64px;
|
|
159
|
+
--shadow-spread-xs: -4px;
|
|
160
|
+
--shadow-spread-sm: -8px;
|
|
161
|
+
--shadow-spread-md: -12px;
|
|
162
|
+
--shadow-spread-lg: -16px;
|
|
163
|
+
--shadow-spread-xl: -24px;
|
|
164
|
+
--shadow-spread-2xl: -32px;
|
|
165
|
+
--shadow-xs: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px rgba(0, 0, 0, 0.05);
|
|
166
|
+
--shadow-sm: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px rgba(17, 17, 17, 0.1);
|
|
167
|
+
--shadow-md: 0px var(--spacing-1) var(--shadow-blur-xs) 0px rgba(17, 17, 17, 0.1);
|
|
168
|
+
--shadow-lg: 0px var(--spacing-3) var(--shadow-blur-md) var(--shadow-spread-xs) var(--color-brown-100);
|
|
169
|
+
--shadow-xl: 0px var(--spacing-5) var(--shadow-blur-lg) var(--shadow-spread-xs) rgba(17, 17, 17, 0.1);
|
|
170
|
+
--shadow-2xl: 0px var(--spacing-6) var(--shadow-blur-xl) var(--shadow-spread-md) var(--color-brown-200);
|
|
171
|
+
--shadow-3xl: 0px var(--spacing-8) var(--shadow-blur-2xl) var(--shadow-spread-md) rgba(17, 17, 17, 0.1);
|
|
172
|
+
}
|
|
173
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/shared/variables.css"],"sourcesContent":[":root {\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-primary-900: #0c160f;\n --color-primary-800: #192d1e;\n --color-primary-700: #25432d;\n --color-primary-600: #325a3c;\n --color-primary-500: #3e704b;\n --color-primary-400: #638b6d;\n --color-primary-300: #87a58f;\n --color-primary-200: #acc0b1;\n --color-primary-100: #d0dad3;\n\n --color-hunter-900: #0f100f;\n --color-hunter-800: #1e201f;\n --color-hunter-700: #2d312e;\n --color-hunter-600: #3c413e;\n --color-hunter-500: #4b514d;\n --color-hunter-400: #6d726f;\n --color-hunter-300: #8f9390;\n --color-hunter-200: #b1b3b2;\n --color-hunter-100: #d3d4d3;\n\n --color-brown-900: #2a241e;\n --color-brown-800: #54483d;\n --color-brown-700: #7d6b5b;\n --color-brown-600: #a78f7a;\n --color-brown-500: #d1b398;\n --color-brown-400: #d8c0ab;\n --color-brown-300: #dfcdbd;\n --color-brown-200: #e7dbd0;\n --color-brown-100: #f5f2ed;\n --color-brown-50: #fffdf7;\n\n --color-neutral-900: #202327;\n --color-neutral-800: #40464d;\n --color-neutral-700: #606874;\n --color-neutral-600: #808b9a;\n --color-neutral-500: #a0aec1;\n --color-neutral-400: #b1bccb;\n --color-neutral-300: #c2cad6;\n --color-neutral-200: #d3d9e0;\n --color-neutral-100: #e4e7eb;\n --color-neutral-50: #f8fafc;\n\n --color-yellow-900: #64551f;\n --color-yellow-800: #967f2f;\n --color-yellow-700: #e4bc29;\n --color-yellow-600: #edc94a;\n --color-yellow-500: #fad44e;\n --color-yellow-400: #fbdd71;\n --color-yellow-300: #fce595;\n --color-yellow-200: #fdeeb8;\n --color-yellow-100: #fef6dc;\n --color-yellow-50: #fefbed;\n\n --color-gold-900: #332510;\n --color-gold-800: #664b21;\n --color-gold-700: #997031;\n --color-gold-600: #cc9642;\n --color-gold-500: #ffbb52;\n --color-gold-400: #ffc975;\n --color-gold-300: #ffd697;\n --color-gold-200: #ffe4ba;\n --color-gold-100: #fff1dc;\n --color-gold-50: #fff8ed;\n\n --color-accent-900: #2d0d02;\n --color-accent-800: #5a1b05;\n --color-accent-700: #882807;\n --color-accent-600: #b5360a;\n --color-accent-500: #e2430c;\n --color-accent-400: #e8693d;\n --color-accent-300: #ee8e6d;\n --color-accent-200: #f3b49e;\n --color-accent-100: #f9d9ce;\n --color-accent-50: #fcece6;\n\n --color-success-900: #0f2204;\n --color-success-800: #1f4309;\n --color-success-700: #2e650d;\n --color-success-600: #3e8612;\n --color-success-500: #4da816;\n --color-success-400: #71b945;\n --color-success-300: #94cb73;\n --color-success-200: #b8dca2;\n --color-success-100: #dbeed0;\n --color-success-50: #edf6e8;\n\n --color-error-900: #2c0808;\n --color-error-800: #580f0f;\n --color-error-700: #841717;\n --color-error-600: #b01e1e;\n --color-error-500: #dc2626;\n --color-error-400: #e35151;\n --color-error-300: #ea7d7d;\n --color-error-200: #f1a8a8;\n --color-error-100: #f8d4d4;\n --color-error-50: #fbe9e9;\n\n --text-primary: var(--color-neutral-900);\n --text-secondary: var(--color-neutral-600);\n --text-headings: var(--color-neutral-900);\n --text-action: var(--color-neutral-900);\n --text-action-hover: var(--color-neutral-600);\n --text-on-disabled: var(--color-neutral-300);\n --text-disabled: var(--color-neutral-300);\n --text-success: var(--color-success-500);\n --text-error: var(--color-error-500);\n --text-warning: var(--color-yellow-500);\n --text-on-action: var(--color-base-white);\n\n --surface-page: var(--color-base-white);\n --surface-subtle: var(--color-brown-50);\n --surface-success: var(--color-success-50);\n --surface-warning: var(--color-yellow-200);\n --surface-error: var(--color-error-100);\n --surface-disabled: var(--color-primary-200);\n --surface-disabled-2: var(--color-neutral-50);\n --surface-action: var(--color-primary-500);\n --surface-action-2: var(--color-yellow-500);\n --surface-action-hover: var(--color-primary-700);\n --surface-action-2-hover: var(--color-yellow-600);\n --surface-action-hover-outline: var(--color-primary-500);\n --surface-action-3: var(--surface-page);\n --surface-action-3-hover: var(--color-neutral-50);\n\n --border-primary: var(--color-neutral-200);\n --border-secondary: var(--color-base-black);\n --border-success: var(--color-success-50);\n --border-warning: var(--color-yellow-200);\n --border-error: var(--color-error-300);\n --border-disabled: var(--color-neutral-300);\n --border-disabled-2: var(--color-neutral-100);\n --border-action: var(--color-primary-500);\n --border-action-hover: var(--color-primary-700);\n --border-focus: var(--color-primary-500);\n\n --icon-primary: var(--color-neutral-900);\n --icon-secondary: var(--color-neutral-600);\n --icon-success: var(--color-success-500);\n --icon-warning: var(--color-yellow-500);\n --icon-error: var(--color-error-500);\n --icon-action: var(--color-primary-500);\n --icon-action-hover: var(--color-primary-700);\n --icon-on-action: var(--color-base-white);\n --icon-on-disabled: var(--color-neutral-300);\n\n --spacing-0: 0;\n --spacing-1: 4px;\n --spacing-2: 8px;\n --spacing-3: 12px;\n --spacing-4: 16px;\n --spacing-5: 20px;\n --spacing-6: 24px;\n --spacing-7: 28px;\n --spacing-8: 32px;\n --spacing-10: 40px;\n --spacing-12: 48px;\n --spacing-14: 56px;\n --spacing-24: 96px;\n --spacing-32: 128px;\n --spacing-64: 256px;\n\n --shadow-blur-2xs: 4px;\n --shadow-blur-xs: 8px;\n --shadow-blur-sm: 12px;\n --shadow-blur-md: 16px;\n --shadow-blur-lg: 24px;\n --shadow-blur-xl: 48px;\n --shadow-blur-2xl: 64px;\n\n --shadow-spread-xs: -4px;\n --shadow-spread-sm: -8px;\n --shadow-spread-md: -12px;\n --shadow-spread-lg: -16px;\n --shadow-spread-xl: -24px;\n --shadow-spread-2xl: -32px;\n\n --shadow-xs: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px\n rgba(0, 0, 0, 0.05);\n --shadow-sm: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px\n rgba(17, 17, 17, 0.1);\n --shadow-md: 0px var(--spacing-1) var(--shadow-blur-xs) 0px\n rgba(17, 17, 17, 0.1);\n --shadow-lg: 0px var(--spacing-3) var(--shadow-blur-md)\n var(--shadow-spread-xs) var(--color-brown-100);\n --shadow-xl: 0px var(--spacing-5) var(--shadow-blur-lg)\n var(--shadow-spread-xs) rgba(17, 17, 17, 0.1);\n --shadow-2xl: 0px var(--spacing-6) var(--shadow-blur-xl)\n var(--shadow-spread-md) var(--color-brown-200);\n --shadow-3xl: 0px var(--spacing-8) var(--shadow-blur-2xl)\n var(--shadow-spread-md) rgba(17, 17, 17, 0.1);\n}\n"],"mappings":"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","names":[]}
|