@texturehq/edges 0.1.7 → 1.0.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.
Files changed (16) hide show
  1. package/dist/components.manifest.json +556 -7
  2. package/dist/generated/tailwind-tokens-dark.css +190 -0
  3. package/dist/generated/tailwind-tokens-light.css +190 -0
  4. package/dist/index.cjs +6 -5
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +1189 -129
  7. package/dist/index.d.ts +1189 -129
  8. package/dist/index.js +6 -5
  9. package/dist/index.js.map +1 -1
  10. package/dist/styles/animations.css +132 -0
  11. package/dist/styles/computed.css +137 -0
  12. package/dist/styles/utilities.css +13 -0
  13. package/dist/styles.css +1664 -661
  14. package/dist/theme.css +26 -1102
  15. package/package.json +44 -16
  16. package/scripts/validate-tokens.js +177 -0
package/dist/generated/tailwind-tokens-dark.css ADDED
@@ -0,0 +1,190 @@
1
+ /**
2
+ * Design Tokens for Tailwind CSS
3
+ * Generated by Style Dictionary
4
+ *
5
+ * These CSS variables are formatted specifically for Tailwind CSS compatibility.
6
+ * The 'color-' prefix is required for Tailwind's color utility classes to work.
7
+ *
8
+ * For other platforms, generate separate outputs using different transforms.
9
+ */
10
+
11
+ .dark {
12
+ --color-white: #ffffff;
13
+ --color-black: #000000;
14
+ --color-gray-50: #f9fafb;
15
+ --color-gray-100: #f3f4f6;
16
+ --color-gray-200: #e5e7eb;
17
+ --color-gray-300: #d1d5db;
18
+ --color-gray-400: #9ca3af;
19
+ --color-gray-500: #6b7280;
20
+ --color-gray-600: #4b5563;
21
+ --color-gray-700: #374151;
22
+ --color-gray-800: #1f2937;
23
+ --color-gray-900: #111827;
24
+ --color-gray-950: #030712;
25
+ --color-red-50: oklch(0.971 0.013 17.38);
26
+ --color-red-100: oklch(0.936 0.032 17.717);
27
+ --color-red-200: oklch(0.885 0.062 18.334);
28
+ --color-red-300: oklch(0.808 0.114 19.571);
29
+ --color-red-400: oklch(0.704 0.191 22.216);
30
+ --color-red-500: oklch(0.637 0.237 25.331);
31
+ --color-red-600: oklch(0.577 0.245 27.325);
32
+ --color-red-700: oklch(0.505 0.213 27.518);
33
+ --color-red-800: oklch(0.444 0.177 26.899);
34
+ --color-red-900: oklch(0.396 0.141 25.723);
35
+ --color-red-950: oklch(0.258 0.092 26.042);
36
+ --color-green-50: oklch(0.982 0.018 131.68);
37
+ --color-green-100: oklch(0.947 0.052 132.272);
38
+ --color-green-200: oklch(0.895 0.111 131.438);
39
+ --color-green-300: oklch(0.82 0.178 132.63);
40
+ --color-green-400: oklch(0.718 0.209 130.901);
41
+ --color-green-500: oklch(0.627 0.194 130.331);
42
+ --color-green-600: oklch(0.527 0.19 131.688);
43
+ --color-green-700: oklch(0.437 0.154 132.474);
44
+ --color-green-800: oklch(0.366 0.121 132.109);
45
+ --color-green-900: oklch(0.314 0.095 133.748);
46
+ --color-green-950: oklch(0.197 0.06 130.709);
47
+ --color-blue-50: oklch(0.97 0.014 237.69);
48
+ --color-blue-100: oklch(0.932 0.032 241.935);
49
+ --color-blue-200: oklch(0.882 0.059 243.157);
50
+ --color-blue-300: oklch(0.809 0.105 244.039);
51
+ --color-blue-400: oklch(0.707 0.165 246.422);
52
+ --color-blue-500: oklch(0.623 0.214 250.546);
53
+ --color-blue-600: oklch(0.546 0.245 253.739);
54
+ --color-blue-700: oklch(0.488 0.243 255.638);
55
+ --color-blue-800: oklch(0.424 0.199 255.585);
56
+ --color-blue-900: oklch(0.368 0.146 254.128);
57
+ --color-blue-950: oklch(0.262 0.09 254.128);
58
+ --color-yellow-50: oklch(0.987 0.024 102.851);
59
+ --color-yellow-100: oklch(0.973 0.071 103.193);
60
+ --color-yellow-200: oklch(0.945 0.129 101.54);
61
+ --color-yellow-300: oklch(0.905 0.182 98.111);
62
+ --color-yellow-400: oklch(0.852 0.199 91.936);
63
+ --color-yellow-500: oklch(0.795 0.184 86.047);
64
+ --color-yellow-600: oklch(0.681 0.162 75.834);
65
+ --color-yellow-700: oklch(0.554 0.135 66.191);
66
+ --color-yellow-800: oklch(0.456 0.111 61.896);
67
+ --color-yellow-900: oklch(0.398 0.092 60.236);
68
+ --color-yellow-950: oklch(0.265 0.06 56.259);
69
+ --color-brand-primary: #444ae1;
70
+ --color-brand-light: #f7f7ff;
71
+ --color-brand-dark: #363ccb;
72
+ --color-brand-background: #f6f7ff;
73
+ --color-neutral-white: #ffffff;
74
+ --color-neutral-black: #000000;
75
+ --spacing-0: 0px;
76
+ --spacing-1: 0.25rem;
77
+ --spacing-2: 0.5rem;
78
+ --spacing-3: 0.75rem;
79
+ --spacing-4: 1rem;
80
+ --spacing-5: 1.25rem;
81
+ --spacing-6: 1.5rem;
82
+ --spacing-7: 1.75rem;
83
+ --spacing-8: 2rem;
84
+ --spacing-9: 2.25rem;
85
+ --spacing-10: 2.5rem;
86
+ --spacing-11: 2.75rem;
87
+ --spacing-12: 3rem;
88
+ --spacing-14: 3.5rem;
89
+ --spacing-16: 4rem;
90
+ --spacing-20: 5rem;
91
+ --spacing-24: 6rem;
92
+ --spacing-28: 7rem;
93
+ --spacing-32: 8rem;
94
+ --spacing-36: 9rem;
95
+ --spacing-40: 10rem;
96
+ --spacing-44: 11rem;
97
+ --spacing-48: 12rem;
98
+ --spacing-52: 13rem;
99
+ --spacing-56: 14rem;
100
+ --spacing-60: 15rem;
101
+ --spacing-64: 16rem;
102
+ --spacing-72: 18rem;
103
+ --spacing-80: 20rem;
104
+ --spacing-96: 24rem;
105
+ --radius-none: 0px;
106
+ --radius-xs: 0.125rem;
107
+ --radius-sm: 0.25rem;
108
+ --radius-md: 0.375rem;
109
+ --radius-lg: 0.5rem;
110
+ --radius-xl: 0.75rem;
111
+ --radius-2xl: 1rem;
112
+ --radius-3xl: 1.5rem;
113
+ --radius-4xl: 2rem;
114
+ --radius-full: 9999px;
115
+ --font-family-sans: Inter, system-ui, sans-serif;
116
+ --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
117
+ --font-family-serif: Merriweather, serif;
118
+ --font-family-mono: 'Fira Code', monospace;
119
+ --font-size-xs: 0.75rem;
120
+ --font-size-sm: 0.875rem;
121
+ --font-size-base: 1rem;
122
+ --font-size-lg: 1.125rem;
123
+ --font-size-xl: 1.25rem;
124
+ --font-size-2xl: 1.5rem;
125
+ --font-size-3xl: 1.875rem;
126
+ --font-size-4xl: 2.25rem;
127
+ --font-size-5xl: 3rem;
128
+ --font-size-6xl: 3.75rem;
129
+ --font-size-7xl: 4.5rem;
130
+ --font-size-8xl: 6rem;
131
+ --font-size-9xl: 8rem;
132
+ --font-weight-thin: 100;
133
+ --font-weight-extralight: 200;
134
+ --font-weight-light: 300;
135
+ --font-weight-normal: 400;
136
+ --font-weight-medium: 500;
137
+ --font-weight-semibold: 600;
138
+ --font-weight-bold: 700;
139
+ --font-weight-extrabold: 800;
140
+ --font-weight-black: 900;
141
+ --font-lineheight-tight: 1.25;
142
+ --font-lineheight-snug: 1.375;
143
+ --font-lineheight-normal: 1.5;
144
+ --font-lineheight-relaxed: 1.625;
145
+ --font-lineheight-loose: 2;
146
+ --font-letterspacing-tighter: -0.05em;
147
+ --font-letterspacing-tight: -0.025em;
148
+ --font-letterspacing-normal: 0em;
149
+ --font-letterspacing-wide: 0.025em;
150
+ --font-letterspacing-wider: 0.05em;
151
+ --font-letterspacing-widest: 0.1em;
152
+ --color-background-body: #151a30;
153
+ --color-background-surface: #1a2038;
154
+ --color-background-muted: #374151;
155
+ --color-background-hover: #4b5563;
156
+ --color-background-selected: #6b7280;
157
+ --color-background-modal: rgba(255, 255, 255, 0.12);
158
+ --color-background-input: rgba(255, 255, 255, 0.05);
159
+ --color-text-body: #ededef;
160
+ --color-text-heading: #ffffff;
161
+ --color-text-muted: #9ca3af;
162
+ --color-text-caption: #d1d5db;
163
+ --color-text-placeholder: #9ca3af;
164
+ --color-text-disabled: #9ca3af;
165
+ --color-text-link-default: #b4b9ff;
166
+ --color-text-link-hover: #c0c5ff;
167
+ --color-text-onPrimary: #1f2937;
168
+ --color-border-default: #2e3a59;
169
+ --color-border-focus: #e5e7eb;
170
+ --color-border-muted: #4b5563;
171
+ --color-border-input: #6b7280;
172
+ --color-feedback-success-text: #d1fae5;
173
+ --color-feedback-success-background: #064e3b;
174
+ --color-feedback-success-border: #059669;
175
+ --color-feedback-error-text: #f87171;
176
+ --color-feedback-error-background: #7f1d1d;
177
+ --color-feedback-error-border: #dc2626;
178
+ --color-feedback-warning-text: #fbbf24;
179
+ --color-feedback-warning-background: #78350f;
180
+ --color-feedback-warning-border: #d97706;
181
+ --color-feedback-info-text: #60a5fa;
182
+ --color-feedback-info-background: #1e3a8a;
183
+ --color-feedback-info-border: #2563eb;
184
+ --color-action-primary: #7a8ee1;
185
+ --color-action-primary-hover: #6a6fcc;
186
+ --color-action-primary-text: #ffffff;
187
+ --color-action-secondary: #e5e7eb;
188
+ --color-action-secondary-hover: #f3f4f6;
189
+ --color-action-secondary-text: #111827;
190
+ }
package/dist/generated/tailwind-tokens-light.css ADDED
@@ -0,0 +1,190 @@
1
+ /**
2
+ * Design Tokens for Tailwind CSS
3
+ * Generated by Style Dictionary
4
+ *
5
+ * These CSS variables are formatted specifically for Tailwind CSS compatibility.
6
+ * The 'color-' prefix is required for Tailwind's color utility classes to work.
7
+ *
8
+ * For other platforms, generate separate outputs using different transforms.
9
+ */
10
+
11
+ @theme {
12
+ --color-white: #ffffff;
13
+ --color-black: #000000;
14
+ --color-gray-50: #f9fafb;
15
+ --color-gray-100: #f3f4f6;
16
+ --color-gray-200: #e5e7eb;
17
+ --color-gray-300: #d1d5db;
18
+ --color-gray-400: #9ca3af;
19
+ --color-gray-500: #6b7280;
20
+ --color-gray-600: #4b5563;
21
+ --color-gray-700: #374151;
22
+ --color-gray-800: #1f2937;
23
+ --color-gray-900: #111827;
24
+ --color-gray-950: #030712;
25
+ --color-red-50: oklch(0.971 0.013 17.38);
26
+ --color-red-100: oklch(0.936 0.032 17.717);
27
+ --color-red-200: oklch(0.885 0.062 18.334);
28
+ --color-red-300: oklch(0.808 0.114 19.571);
29
+ --color-red-400: oklch(0.704 0.191 22.216);
30
+ --color-red-500: oklch(0.637 0.237 25.331);
31
+ --color-red-600: oklch(0.577 0.245 27.325);
32
+ --color-red-700: oklch(0.505 0.213 27.518);
33
+ --color-red-800: oklch(0.444 0.177 26.899);
34
+ --color-red-900: oklch(0.396 0.141 25.723);
35
+ --color-red-950: oklch(0.258 0.092 26.042);
36
+ --color-green-50: oklch(0.982 0.018 131.68);
37
+ --color-green-100: oklch(0.947 0.052 132.272);
38
+ --color-green-200: oklch(0.895 0.111 131.438);
39
+ --color-green-300: oklch(0.82 0.178 132.63);
40
+ --color-green-400: oklch(0.718 0.209 130.901);
41
+ --color-green-500: oklch(0.627 0.194 130.331);
42
+ --color-green-600: oklch(0.527 0.19 131.688);
43
+ --color-green-700: oklch(0.437 0.154 132.474);
44
+ --color-green-800: oklch(0.366 0.121 132.109);
45
+ --color-green-900: oklch(0.314 0.095 133.748);
46
+ --color-green-950: oklch(0.197 0.06 130.709);
47
+ --color-blue-50: oklch(0.97 0.014 237.69);
48
+ --color-blue-100: oklch(0.932 0.032 241.935);
49
+ --color-blue-200: oklch(0.882 0.059 243.157);
50
+ --color-blue-300: oklch(0.809 0.105 244.039);
51
+ --color-blue-400: oklch(0.707 0.165 246.422);
52
+ --color-blue-500: oklch(0.623 0.214 250.546);
53
+ --color-blue-600: oklch(0.546 0.245 253.739);
54
+ --color-blue-700: oklch(0.488 0.243 255.638);
55
+ --color-blue-800: oklch(0.424 0.199 255.585);
56
+ --color-blue-900: oklch(0.368 0.146 254.128);
57
+ --color-blue-950: oklch(0.262 0.09 254.128);
58
+ --color-yellow-50: oklch(0.987 0.024 102.851);
59
+ --color-yellow-100: oklch(0.973 0.071 103.193);
60
+ --color-yellow-200: oklch(0.945 0.129 101.54);
61
+ --color-yellow-300: oklch(0.905 0.182 98.111);
62
+ --color-yellow-400: oklch(0.852 0.199 91.936);
63
+ --color-yellow-500: oklch(0.795 0.184 86.047);
64
+ --color-yellow-600: oklch(0.681 0.162 75.834);
65
+ --color-yellow-700: oklch(0.554 0.135 66.191);
66
+ --color-yellow-800: oklch(0.456 0.111 61.896);
67
+ --color-yellow-900: oklch(0.398 0.092 60.236);
68
+ --color-yellow-950: oklch(0.265 0.06 56.259);
69
+ --color-brand-primary: #444ae1;
70
+ --color-brand-light: #f7f7ff;
71
+ --color-brand-dark: #363ccb;
72
+ --color-brand-background: #f6f7ff;
73
+ --color-neutral-white: #ffffff;
74
+ --color-neutral-black: #000000;
75
+ --spacing-0: 0px;
76
+ --spacing-1: 0.25rem;
77
+ --spacing-2: 0.5rem;
78
+ --spacing-3: 0.75rem;
79
+ --spacing-4: 1rem;
80
+ --spacing-5: 1.25rem;
81
+ --spacing-6: 1.5rem;
82
+ --spacing-7: 1.75rem;
83
+ --spacing-8: 2rem;
84
+ --spacing-9: 2.25rem;
85
+ --spacing-10: 2.5rem;
86
+ --spacing-11: 2.75rem;
87
+ --spacing-12: 3rem;
88
+ --spacing-14: 3.5rem;
89
+ --spacing-16: 4rem;
90
+ --spacing-20: 5rem;
91
+ --spacing-24: 6rem;
92
+ --spacing-28: 7rem;
93
+ --spacing-32: 8rem;
94
+ --spacing-36: 9rem;
95
+ --spacing-40: 10rem;
96
+ --spacing-44: 11rem;
97
+ --spacing-48: 12rem;
98
+ --spacing-52: 13rem;
99
+ --spacing-56: 14rem;
100
+ --spacing-60: 15rem;
101
+ --spacing-64: 16rem;
102
+ --spacing-72: 18rem;
103
+ --spacing-80: 20rem;
104
+ --spacing-96: 24rem;
105
+ --radius-none: 0px;
106
+ --radius-xs: 0.125rem;
107
+ --radius-sm: 0.25rem;
108
+ --radius-md: 0.375rem;
109
+ --radius-lg: 0.5rem;
110
+ --radius-xl: 0.75rem;
111
+ --radius-2xl: 1rem;
112
+ --radius-3xl: 1.5rem;
113
+ --radius-4xl: 2rem;
114
+ --radius-full: 9999px;
115
+ --font-family-sans: Inter, system-ui, sans-serif;
116
+ --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
117
+ --font-family-serif: Merriweather, serif;
118
+ --font-family-mono: 'Fira Code', monospace;
119
+ --font-size-xs: 0.75rem;
120
+ --font-size-sm: 0.875rem;
121
+ --font-size-base: 1rem;
122
+ --font-size-lg: 1.125rem;
123
+ --font-size-xl: 1.25rem;
124
+ --font-size-2xl: 1.5rem;
125
+ --font-size-3xl: 1.875rem;
126
+ --font-size-4xl: 2.25rem;
127
+ --font-size-5xl: 3rem;
128
+ --font-size-6xl: 3.75rem;
129
+ --font-size-7xl: 4.5rem;
130
+ --font-size-8xl: 6rem;
131
+ --font-size-9xl: 8rem;
132
+ --font-weight-thin: 100;
133
+ --font-weight-extralight: 200;
134
+ --font-weight-light: 300;
135
+ --font-weight-normal: 400;
136
+ --font-weight-medium: 500;
137
+ --font-weight-semibold: 600;
138
+ --font-weight-bold: 700;
139
+ --font-weight-extrabold: 800;
140
+ --font-weight-black: 900;
141
+ --font-lineheight-tight: 1.25;
142
+ --font-lineheight-snug: 1.375;
143
+ --font-lineheight-normal: 1.5;
144
+ --font-lineheight-relaxed: 1.625;
145
+ --font-lineheight-loose: 2;
146
+ --font-letterspacing-tighter: -0.05em;
147
+ --font-letterspacing-tight: -0.025em;
148
+ --font-letterspacing-normal: 0em;
149
+ --font-letterspacing-wide: 0.025em;
150
+ --font-letterspacing-wider: 0.05em;
151
+ --font-letterspacing-widest: 0.1em;
152
+ --color-background-body: #f9fafb;
153
+ --color-background-surface: #ffffff;
154
+ --color-background-muted: #f3f4f6;
155
+ --color-background-hover: #f3f4f6;
156
+ --color-background-selected: #d1d5db;
157
+ --color-background-modal: rgba(0, 0, 0, 0.15);
158
+ --color-background-input: #ffffff;
159
+ --color-text-body: #333333;
160
+ --color-text-heading: #111827;
161
+ --color-text-muted: #4b5563;
162
+ --color-text-caption: #6b7280;
163
+ --color-text-placeholder: #9ca3af;
164
+ --color-text-disabled: #9ca3af;
165
+ --color-text-link-default: #444ae1;
166
+ --color-text-link-hover: #363ccb;
167
+ --color-text-onPrimary: #ffffff;
168
+ --color-border-default: #e5e7eb;
169
+ --color-border-focus: #111827;
170
+ --color-border-muted: #e5e7eb;
171
+ --color-border-input: #d1d5db;
172
+ --color-feedback-success-text: #065f46;
173
+ --color-feedback-success-background: #d1fae5;
174
+ --color-feedback-success-border: #10b981;
175
+ --color-feedback-error-text: #b91c1c;
176
+ --color-feedback-error-background: #fee2e2;
177
+ --color-feedback-error-border: #ef4444;
178
+ --color-feedback-warning-text: #92400e;
179
+ --color-feedback-warning-background: #fef3c7;
180
+ --color-feedback-warning-border: #f59e0b;
181
+ --color-feedback-info-text: #2563eb;
182
+ --color-feedback-info-background: #dbeafe;
183
+ --color-feedback-info-border: #93c5fd;
184
+ --color-action-primary: #444ae1;
185
+ --color-action-primary-hover: #383ccb;
186
+ --color-action-primary-text: #ffffff;
187
+ --color-action-secondary: #333333;
188
+ --color-action-secondary-hover: #4b5563;
189
+ --color-action-secondary-text: #ffffff;
190
+ }