@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.
Files changed (16) hide show
  1. package/README.md +38 -0
  2. package/dist/ShowcaseWrapper.tsx +18 -0
  3. package/dist/ThemeProvider.tsx +14 -0
  4. package/dist/colorUtils.ts +36 -0
  5. package/dist/global.ts +80 -0
  6. package/dist/index.css +173 -0
  7. package/dist/index.css.map +1 -0
  8. package/dist/index.d.ts +1248 -0
  9. package/dist/index.js +5085 -0
  10. package/dist/index.js.map +1 -0
  11. package/dist/index.ts +9 -0
  12. package/dist/styles.ts +289 -0
  13. package/dist/theme.ts +27 -0
  14. package/dist/variables.css +194 -0
  15. package/package.json +102 -0
  16. package/variables.css +194 -0
package/variables.css ADDED
@@ -0,0 +1,194 @@
1
+ :root {
2
+ --color-base-white: #ffffff;
3
+ --color-base-black: #000000;
4
+ --color-primary-900: #0c160f;
5
+ --color-primary-800: #192d1e;
6
+ --color-primary-700: #25432d;
7
+ --color-primary-600: #325a3c;
8
+ --color-primary-500: #3e704b;
9
+ --color-primary-400: #638b6d;
10
+ --color-primary-300: #87a58f;
11
+ --color-primary-200: #acc0b1;
12
+ --color-primary-100: #d0dad3;
13
+
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
+
24
+ --color-brown-900: #2a241e;
25
+ --color-brown-800: #54483d;
26
+ --color-brown-700: #7d6b5b;
27
+ --color-brown-600: #a78f7a;
28
+ --color-brown-500: #d1b398;
29
+ --color-brown-400: #d8c0ab;
30
+ --color-brown-300: #dfcdbd;
31
+ --color-brown-200: #e7dbd0;
32
+ --color-brown-100: #f5f2ed;
33
+ --color-brown-50: #fffdf7;
34
+
35
+ --color-neutral-900: #202327;
36
+ --color-neutral-800: #40464d;
37
+ --color-neutral-700: #606874;
38
+ --color-neutral-600: #808b9a;
39
+ --color-neutral-500: #a0aec1;
40
+ --color-neutral-400: #b1bccb;
41
+ --color-neutral-300: #c2cad6;
42
+ --color-neutral-200: #d3d9e0;
43
+ --color-neutral-100: #e4e7eb;
44
+ --color-neutral-50: #f8fafc;
45
+
46
+ --color-yellow-900: #64551f;
47
+ --color-yellow-800: #967f2f;
48
+ --color-yellow-700: #e4bc29;
49
+ --color-yellow-600: #edc94a;
50
+ --color-yellow-500: #fad44e;
51
+ --color-yellow-400: #fbdd71;
52
+ --color-yellow-300: #fce595;
53
+ --color-yellow-200: #fdeeb8;
54
+ --color-yellow-100: #fef6dc;
55
+ --color-yellow-50: #fefbed;
56
+
57
+ --color-gold-900: #332510;
58
+ --color-gold-800: #664b21;
59
+ --color-gold-700: #997031;
60
+ --color-gold-600: #cc9642;
61
+ --color-gold-500: #ffbb52;
62
+ --color-gold-400: #ffc975;
63
+ --color-gold-300: #ffd697;
64
+ --color-gold-200: #ffe4ba;
65
+ --color-gold-100: #fff1dc;
66
+ --color-gold-50: #fff8ed;
67
+
68
+ --color-accent-900: #2d0d02;
69
+ --color-accent-800: #5a1b05;
70
+ --color-accent-700: #882807;
71
+ --color-accent-600: #b5360a;
72
+ --color-accent-500: #e2430c;
73
+ --color-accent-400: #e8693d;
74
+ --color-accent-300: #ee8e6d;
75
+ --color-accent-200: #f3b49e;
76
+ --color-accent-100: #f9d9ce;
77
+ --color-accent-50: #fcece6;
78
+
79
+ --color-success-900: #0f2204;
80
+ --color-success-800: #1f4309;
81
+ --color-success-700: #2e650d;
82
+ --color-success-600: #3e8612;
83
+ --color-success-500: #4da816;
84
+ --color-success-400: #71b945;
85
+ --color-success-300: #94cb73;
86
+ --color-success-200: #b8dca2;
87
+ --color-success-100: #dbeed0;
88
+ --color-success-50: #edf6e8;
89
+
90
+ --color-error-900: #2c0808;
91
+ --color-error-800: #580f0f;
92
+ --color-error-700: #841717;
93
+ --color-error-600: #b01e1e;
94
+ --color-error-500: #dc2626;
95
+ --color-error-400: #e35151;
96
+ --color-error-300: #ea7d7d;
97
+ --color-error-200: #f1a8a8;
98
+ --color-error-100: #f8d4d4;
99
+ --color-error-50: #fbe9e9;
100
+
101
+ --text-primary: var(--color-neutral-900);
102
+ --text-secondary: var(--color-neutral-600);
103
+ --text-headings: var(--color-neutral-900);
104
+ --text-action: var(--color-neutral-900);
105
+ --text-action-hover: var(--color-neutral-600);
106
+ --text-on-disabled: var(--color-neutral-300);
107
+ --text-disabled: var(--color-neutral-300);
108
+ --text-success: var(--color-success-500);
109
+ --text-error: var(--color-error-500);
110
+ --text-warning: var(--color-yellow-500);
111
+ --text-on-action: var(--color-base-white);
112
+
113
+ --surface-page: var(--color-base-white);
114
+ --surface-subtle: var(--color-brown-50);
115
+ --surface-success: var(--color-success-50);
116
+ --surface-warning: var(--color-yellow-200);
117
+ --surface-error: var(--color-error-100);
118
+ --surface-disabled: var(--color-primary-200);
119
+ --surface-disabled-2: var(--color-neutral-50);
120
+ --surface-action: var(--color-primary-500);
121
+ --surface-action-2: var(--color-yellow-500);
122
+ --surface-action-hover: var(--color-primary-700);
123
+ --surface-action-2-hover: var(--color-yellow-600);
124
+ --surface-action-hover-outline: var(--color-primary-500);
125
+ --surface-action-3: var(--surface-page);
126
+ --surface-action-3-hover: var(--color-neutral-50);
127
+
128
+ --border-primary: var(--color-neutral-200);
129
+ --border-secondary: var(--color-base-black);
130
+ --border-success: var(--color-success-50);
131
+ --border-warning: var(--color-yellow-200);
132
+ --border-error: var(--color-error-300);
133
+ --border-disabled: var(--color-neutral-300);
134
+ --border-disabled-2: var(--color-neutral-100);
135
+ --border-action: var(--color-primary-500);
136
+ --border-action-hover: var(--color-primary-700);
137
+ --border-focus: var(--color-primary-500);
138
+
139
+ --icon-primary: var(--color-neutral-900);
140
+ --icon-secondary: var(--color-neutral-600);
141
+ --icon-success: var(--color-success-500);
142
+ --icon-warning: var(--color-yellow-500);
143
+ --icon-error: var(--color-error-500);
144
+ --icon-action: var(--color-primary-500);
145
+ --icon-action-hover: var(--color-primary-700);
146
+ --icon-on-action: var(--color-base-white);
147
+ --icon-on-disabled: var(--color-neutral-300);
148
+
149
+ --spacing-0: 0;
150
+ --spacing-1: 4px;
151
+ --spacing-2: 8px;
152
+ --spacing-3: 12px;
153
+ --spacing-4: 16px;
154
+ --spacing-5: 20px;
155
+ --spacing-6: 24px;
156
+ --spacing-7: 28px;
157
+ --spacing-8: 32px;
158
+ --spacing-10: 40px;
159
+ --spacing-12: 48px;
160
+ --spacing-14: 56px;
161
+ --spacing-24: 96px;
162
+ --spacing-32: 128px;
163
+ --spacing-64: 256px;
164
+
165
+ --shadow-blur-2xs: 4px;
166
+ --shadow-blur-xs: 8px;
167
+ --shadow-blur-sm: 12px;
168
+ --shadow-blur-md: 16px;
169
+ --shadow-blur-lg: 24px;
170
+ --shadow-blur-xl: 48px;
171
+ --shadow-blur-2xl: 64px;
172
+
173
+ --shadow-spread-xs: -4px;
174
+ --shadow-spread-sm: -8px;
175
+ --shadow-spread-md: -12px;
176
+ --shadow-spread-lg: -16px;
177
+ --shadow-spread-xl: -24px;
178
+ --shadow-spread-2xl: -32px;
179
+
180
+ --shadow-xs: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px
181
+ rgba(0, 0, 0, 0.05);
182
+ --shadow-sm: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px
183
+ rgba(17, 17, 17, 0.1);
184
+ --shadow-md: 0px var(--spacing-1) var(--shadow-blur-xs) 0px
185
+ rgba(17, 17, 17, 0.1);
186
+ --shadow-lg: 0px var(--spacing-3) var(--shadow-blur-md)
187
+ var(--shadow-spread-xs) var(--color-brown-100);
188
+ --shadow-xl: 0px var(--spacing-5) var(--shadow-blur-lg)
189
+ var(--shadow-spread-xs) rgba(17, 17, 17, 0.1);
190
+ --shadow-2xl: 0px var(--spacing-6) var(--shadow-blur-xl)
191
+ var(--shadow-spread-md) var(--color-brown-200);
192
+ --shadow-3xl: 0px var(--spacing-8) var(--shadow-blur-2xl)
193
+ var(--shadow-spread-md) rgba(17, 17, 17, 0.1);
194
+ }