@ibis-design/css 0.3.0 → 0.4.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 (4) hide show
  1. package/dist/ibis/ibis-design.css +177 -82
  2. package/dist/ibis/ibis-design.scss +177 -82
  3. package/dist/ibis/tailwind.preset.js +267 -110
  4. package/package.json +2 -2
package/dist/ibis/ibis-design.css CHANGED
@@ -3,61 +3,39 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --color-primary-purple-50: #f5f3ff;
7
- --color-primary-purple-100: #edeafd;
8
- --color-primary-purple-200: #ded7fd;
9
- --color-primary-purple-300: #c7b8fa;
10
- --color-primary-purple-400: #aa8ff6;
11
- --color-primary-purple-500: #713bc1;
12
- --color-primary-purple-600: #8040e7;
13
- --color-primary-purple-700: #702ed3;
14
- --color-primary-purple-800: #5d26b1;
15
- --color-primary-purple-900: #522398;
16
- --color-primary-purple-950: #301362;
17
- --color-primary-pink-50: #fff1fb;
18
- --color-primary-pink-100: #ffc1f2;
19
- --color-primary-pink-200: #ffc3f2;
20
- --color-primary-pink-300: #ff94e4;
21
- --color-primary-pink-400: #ff54d4;
22
- --color-primary-pink-500: #f83fd3;
23
- --color-primary-pink-600: #ff00d6;
24
- --color-primary-pink-700: #d900b6;
25
- --color-primary-pink-800: #b10092;
26
- --color-primary-pink-900: #920075;
27
- --color-primary-pink-950: #630050;
6
+ --color-primary-50: #f5f3ff;
7
+ --color-primary-100: #edeafd;
8
+ --color-primary-200: #ded7fd;
9
+ --color-primary-300: #c7b8fa;
10
+ --color-primary-400: #aa8ff6;
11
+ --color-primary-500: #8e56e0;
12
+ --color-primary-600: #8647e5;
13
+ --color-primary-700: #7d42d6;
14
+ --color-primary-800: #713bc1;
15
+ --color-primary-900: #522398;
16
+ --color-primary-950: #301362;
28
17
  --color-neutral-50: #f4f4f4;
29
18
  --color-neutral-100: #dbdbdb;
30
- --color-neutral-200: #dbdbdb;
19
+ --color-neutral-200: #d1d1d1;
31
20
  --color-neutral-300: #c1c1c1;
32
21
  --color-neutral-400: #a8a8a8;
33
22
  --color-neutral-500: #6d6d6d;
34
23
  --color-neutral-600: #5d5d5d;
35
24
  --color-neutral-700: #4f4f4f;
36
- --color-neutral-800: #666666;
37
- --color-neutral-900: #4d4d4d;
25
+ --color-neutral-800: #454545;
26
+ --color-neutral-900: #3d3d3d;
38
27
  --color-neutral-950: #000000;
39
28
  --color-white: #ffffff;
40
29
  --color-black: #000000;
41
- --color-system-success: #009a08; /** Positive / completed state */
42
- --color-system-failure: #b70c00; /** Error / destructive state */
43
- --color-system-attention: #fa8900; /** Warning / needs attention */
44
- --color-gradient-purple-pink-start: #713bc1;
45
- --color-gradient-purple-pink-end: #c519a3;
46
- --color-gradient-pink-purple-start: #c519a3;
47
- --color-gradient-pink-purple-end: #713bc1;
48
- --color-gradient-dark-purple-start: #713bc1;
49
- --color-gradient-dark-purple-end: #bd91ff;
50
- --color-backgrounds-card-bg-dark-purple: #522398;
51
- --color-backgrounds-card-bg-purple: #48277d;
52
- --color-backgrounds-classic-bg-light: #fafafa;
53
- --color-backgrounds-classic-bg-dark: #0d0d0d;
54
- --color-backgrounds-themed-bg-ibis-white: #ffecfb;
55
- --color-backgrounds-themed-bg-ibis-dark: #251440;
56
- --color-buttons-simple: #522398;
57
- --color-buttons-dark-gradient-start: #713bc1;
58
- --color-buttons-dark-gradient-end: #bd91ff;
59
- --color-buttons-gradient-start: #713bc1;
60
- --color-buttons-gradient-end: #c519a3;
30
+ --color-green-500: #009a08;
31
+ --color-red-500: #b70c00;
32
+ --color-orange-500: #fa8900;
33
+ --color-gradients-main-start: #3b1570;
34
+ --color-gradients-main-end: #8e0175;
35
+ --color-gradients-purple-start: #c519a3;
36
+ --color-gradients-purple-end: #713bc1;
37
+ --color-gradients-dark-purple-start: #713bc1;
38
+ --color-gradients-dark-purple-end: #bd91ff;
61
39
  --spacing-0: 0;
62
40
  --spacing-1: 0.25rem;
63
41
  --spacing-2: 0.5rem;
@@ -65,19 +43,15 @@
65
43
  --spacing-4: 1rem;
66
44
  --spacing-5: 1.25rem;
67
45
  --spacing-6: 1.5rem;
46
+ --spacing-7: 1.75rem;
68
47
  --spacing-8: 2rem;
48
+ --spacing-9: 2.25rem;
69
49
  --spacing-10: 2.5rem;
70
50
  --spacing-12: 3rem;
51
+ --spacing-14: 3.5rem;
71
52
  --spacing-16: 4rem;
72
- --letter-spacing-tighter: -0.05em;
73
- --letter-spacing-tight: -0.025em;
74
- --letter-spacing-normal: 0;
75
- --letter-spacing-wide: 0.025em;
76
- --letter-spacing-wider: 0.05em;
77
- --line-height-tight: 1.25;
78
- --line-height-normal: 1.5;
79
- --line-height-relaxed: 1.75;
80
- --line-height-loose: 2;
53
+ --spacing-20: 5rem;
54
+ --spacing-24: 6rem;
81
55
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
82
56
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
83
57
  --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
@@ -90,47 +64,62 @@
90
64
  --font-weight-bold: 700;
91
65
  --font-weight-extrabold: 800;
92
66
  --font-weight-black: 900;
93
- --font-size-normal-text-xs: 0.75rem;
94
- --font-size-normal-text-sm: 0.875rem;
95
- --font-size-normal-text-default: 1rem;
96
- --font-size-normal-text-lg: 1.125rem;
97
- --font-size-normal-text-xl: 1.25rem;
98
- --font-size-marketing-text-sm: 1rem;
99
- --font-size-marketing-text-default: 1.333rem;
100
- --font-size-marketing-text-lg: 1.771rem;
101
- --font-size-marketing-text-xl: 2.375rem;
67
+ --font-size-body-sm: 0.75rem;
68
+ --font-size-body-md: 1rem;
69
+ --font-size-body-lg: 1.25rem;
70
+ --font-size-heading-h1: 4.188rem;
71
+ --font-size-heading-h2: 3.188rem;
72
+ --font-size-heading-h3: 2.375rem;
73
+ --font-size-heading-h4: 1.75rem;
74
+ --font-size-heading-h5: 1.312rem;
75
+ --font-style-normal: normal;
76
+ --font-style-italic: italic;
77
+ --text-transform-uppercase: uppercase;
78
+ --text-transform-lowercase: lowercase;
79
+ --text-transform-capitalize: capitalize;
80
+ --line-height-tight: 1.25;
81
+ --line-height-normal: 1.5;
82
+ --line-height-relaxed: 1.75;
83
+ --line-height-loose: 2;
84
+ --letter-spacing-tighter: -0.05em;
85
+ --letter-spacing-tight: -0.025em;
86
+ --letter-spacing-normal: 0;
87
+ --letter-spacing-wide: 0.025em;
88
+ --letter-spacing-wider: 0.05em;
102
89
  --border-radius-none: 0;
103
- --border-radius-sm: 0.25rem;
104
- --border-radius-default: 0.375rem;
90
+ --border-radius-xs: 0.25rem;
91
+ --border-radius-sm: 0.375rem;
105
92
  --border-radius-md: 0.5rem;
106
93
  --border-radius-lg: 0.75rem;
94
+ --border-radius-xl: 1rem;
95
+ --border-radius-2xl: 1.5rem;
107
96
  --border-radius-full: 9999px;
108
97
  --border-width-none: 0;
98
+ --border-width-hairline: 0.5px;
109
99
  --border-width-thin: 1px;
110
100
  --border-width-default: 2px;
101
+ --border-width-medium: 3px;
111
102
  --border-width-thick: 4px;
112
- --shadow-none: none;
113
- --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
114
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
115
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
116
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
117
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
118
- --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
103
+ --shadow-color-black-soft: rgba(0, 0, 0, 0.1);
104
+ --shadow-color-black-medium: rgba(0, 0, 0, 0.15);
105
+ --shadow-color-black-strong: rgba(0, 0, 0, 0.25);
106
+ --shadow-color-brand-soft: rgba(223, 238, 255, 0.1);
107
+ --shadow-color-brand-medium: rgba(223, 238, 255, 0.15);
108
+ --shadow-color-brand-strong: rgba(223, 238, 255, 0.25);
109
+ --shadow-color-white-soft: rgba(255, 255, 255, 0.1);
110
+ --shadow-color-white-medium: rgba(255, 255, 255, 0.15);
111
+ --shadow-color-white-strong: rgba(255, 255, 255, 0.25);
112
+ --shadow-none: ;
119
113
  --logo-square-sm: 24px;
120
114
  --logo-square-md: 32px;
121
115
  --logo-square-lg: 40px;
122
116
  --logo-square-xl: 48px;
123
117
  --logo-square-main: 255px;
124
- --icons-frame-circle-xs: 16px;
125
- --icons-frame-circle-sm: 24px;
126
- --icons-frame-circle-md: 32px;
127
- --icons-frame-circle-lg: 48px;
128
- --icons-frame-circle-xl: 56px;
129
- --icons-size-xs: 12px;
130
- --icons-size-sm: 18px;
131
- --icons-size-md: 24px;
132
- --icons-size-lg: 40px;
133
- --icons-size-xl: 48px;
118
+ --icons-xs: 16px;
119
+ --icons-sm: 24px;
120
+ --icons-md: 32px;
121
+ --icons-lg: 48px;
122
+ --icons-xl: 56px;
134
123
  --z-index-base: 0;
135
124
  --z-index-dropdown: 1000;
136
125
  --z-index-sticky: 1100;
@@ -138,6 +127,15 @@
138
127
  --z-index-modal: 1300;
139
128
  --z-index-popover: 1400;
140
129
  --z-index-tooltip: 1500;
130
+ --opacity-1: 0.1;
131
+ --opacity-2: 0.2;
132
+ --opacity-3: 0.3;
133
+ --opacity-4: 0.4;
134
+ --opacity-5: 0.5;
135
+ --opacity-6: 0.6;
136
+ --opacity-7: 0.7;
137
+ --opacity-8: 0.8;
138
+ --opacity-9: 0.9;
141
139
  --opacity-disabled: 0.5;
142
140
  --opacity-muted: 0.75;
143
141
  --opacity-subtle: 0.9;
@@ -148,6 +146,7 @@
148
146
  --transition-timing-in: ease-in;
149
147
  --transition-timing-out: ease-out;
150
148
  --transition-timing-in-out: ease-in-out;
149
+ --breakpoint-2xs: 360px;
151
150
  --breakpoint-xs: 480px;
152
151
  --breakpoint-sm: 640px;
153
152
  --breakpoint-md: 768px;
@@ -161,4 +160,100 @@
161
160
  --blur-lg: 8px;
162
161
  --blur-xl: 12px;
163
162
  --blur-2xl: 16px;
163
+ --blur-3xl: 24px;
164
+ --size-xs: 16px;
165
+ --size-sm: 24px;
166
+ --size-md: 32px;
167
+ --size-lg: 48px;
168
+ --size-xl: 56px;
169
+ --size-2xl: 64px;
170
+ --component-button-size-xs-border-radius: 10px;
171
+ --component-button-size-sm-border-radius: 12px;
172
+ --component-button-size-md-border-radius: 16px;
173
+ --component-button-size-lg-border-radius: 16px;
174
+ --color-text-primary: var(--color-black);
175
+ --color-text-inverse: var(--color-white);
176
+ --color-border-default: var(--color-neutral-200);
177
+ --color-border-focus: var(--color-primary-300);
178
+ --color-status-success: var(--color-green-500);
179
+ --color-status-error: var(--color-red-500);
180
+ --color-status-warning: var(--color-orange-500);
181
+ --gradient-brand-primary: [object Object];
182
+ --text-style-body-font-family: var(--font-family-sans);
183
+ --text-style-body-font-size: var(--font-size-body-md);
184
+ --text-style-body-line-height: var(--line-height-normal);
185
+ --text-style-body-font-weight: var(--font-weight-normal);
186
+ --text-style-heading-font-family: var(--font-family-heading);
187
+ --text-style-heading-font-size: var(--font-size-heading-h2);
188
+ --text-style-heading-line-height: var(--line-height-tight);
189
+ --text-style-heading-font-weight: var(--font-weight-bold);
190
+ --shadow-default: 0 0 3px 0 var(--shadow-color-black-soft), 0 0 2px -1px var(--shadow-color-black-soft);
191
+ --shadow-md: 0 0 6px -1px var(--shadow-color-black-soft), 0 0 4px -2px var(--shadow-color-black-soft);
192
+ --shadow-lg: 0 0 15px -3px var(--shadow-color-black-soft), 0 0 6px -4px var(--shadow-color-black-soft);
193
+ --shadow-xl: 0 0 25px -5px var(--shadow-color-black-soft), 0 0 10px -6px var(--shadow-color-black-soft);
194
+ --shadow-2xl: 0 0 50px -12px var(--shadow-color-black-strong);
195
+ --shadow-inner: 0 0 4px 0 var(--shadow-color-black-soft);
196
+ --shadow-button-inner: 0 0 4px 0 var(--shadow-color-brand-soft), 0 0 1px 0 var(--shadow-color-white-soft);
197
+ --component-button-primary-default-border-width: var(--border-width-thin);
198
+ --component-button-primary-default-padding-x: var(--spacing-4);
199
+ --component-button-primary-default-padding-y: var(--spacing-2);
200
+ --component-button-primary-hover-background: var(--color-primary-900);
201
+ --component-button-primary-disabled-background: var(--color-neutral-200);
202
+ --component-button-primary-disabled-color: var(--color-neutral-300);
203
+ --component-button-primary-disabled-border-color: var(--color-neutral-300);
204
+ --component-button-secondary-default-background: var(--color-primary-50);
205
+ --component-button-secondary-default-color: var(--color-primary-900);
206
+ --component-button-secondary-default-border-color: var(--color-primary-50);
207
+ --component-button-secondary-default-border-width: var(--border-width-thin);
208
+ --component-button-secondary-default-padding-x: var(--spacing-4);
209
+ --component-button-secondary-default-padding-y: var(--spacing-2);
210
+ --component-button-secondary-hover-background: var(--color-primary-50);
211
+ --component-button-secondary-hover-border-color: var(--color-primary-900);
212
+ --component-button-secondary-focused-background: var(--color-primary-50);
213
+ --component-button-secondary-focused-border-color: var(--color-primary-900);
214
+ --component-button-secondary-focused-border-width: var(--border-width-thick);
215
+ --component-button-secondary-disabled-background: var(--color-white);
216
+ --component-button-secondary-disabled-color: var(--color-neutral-300);
217
+ --component-button-secondary-disabled-border-color: var(--color-neutral-300);
218
+ --component-toaster-default-background: var(--color-neutral-200);
219
+ --component-toaster-default-border-color: var(--color-neutral-200);
220
+ --component-toaster-default-border-width: var(--border-width-thin);
221
+ --component-toaster-success-background: var(--color-green-500);
222
+ --component-toaster-success-border-color: var(--color-green-500);
223
+ --component-toaster-success-border-width: var(--border-width-thin);
224
+ --component-toaster-error-background: var(--color-red-500);
225
+ --component-toaster-error-border-color: var(--color-red-500);
226
+ --component-toaster-error-border-width: var(--border-width-thin);
227
+ --component-toaster-accent-background: var(--color-neutral-200);
228
+ --component-toaster-accent-color: var(--color-black);
229
+ --component-toaster-accent-border-color: var(--color-neutral-200);
230
+ --component-toaster-accent-border-width: var(--border-width-thin);
231
+ --component-banner-default-background: var(--color-neutral-200);
232
+ --component-banner-default-background-opacity: var(--opacity-1);
233
+ --component-banner-default-border-color: var(--color-neutral-200);
234
+ --component-banner-default-border-width: var(--border-width-thin);
235
+ --component-banner-success-background: var(--color-green-500);
236
+ --component-banner-success-background-opacity: var(--opacity-1);
237
+ --component-banner-success-border-color: var(--color-green-500);
238
+ --component-banner-success-border-width: var(--border-width-thin);
239
+ --component-banner-error-background: var(--color-red-500);
240
+ --component-banner-error-background-opacity: var(--opacity-1);
241
+ --component-banner-error-border-color: var(--color-red-500);
242
+ --component-banner-error-border-width: var(--border-width-thin);
243
+ --component-banner-accent-background: var(--color-neutral-200);
244
+ --component-banner-accent-background-opacity: var(--opacity-1);
245
+ --component-banner-accent-color: var(--color-black);
246
+ --component-banner-accent-border-color: var(--color-neutral-200);
247
+ --component-banner-accent-border-width: var(--border-width-thin);
248
+ --component-button-primary-default-background: var(--gradient-brand-primary);
249
+ --component-button-primary-default-color: var(--color-text-inverse);
250
+ --component-button-primary-default-border-color: var(--color-border-default);
251
+ --component-button-primary-default-shadow: var(--shadow-button-inner);
252
+ --component-button-primary-hover-border-color: var(--color-border-default);
253
+ --component-toaster-default-color: var(--color-text-primary);
254
+ --component-toaster-success-color: var(--color-text-inverse);
255
+ --component-toaster-error-color: var(--color-text-inverse);
256
+ --component-banner-default-color: var(--color-text-primary);
257
+ --component-banner-success-color: var(--color-text-inverse);
258
+ --component-banner-error-color: var(--color-text-inverse);
164
259
  }
package/dist/ibis/ibis-design.scss CHANGED
@@ -1,61 +1,39 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
- $color-primary-purple-50: #f5f3ff;
5
- $color-primary-purple-100: #edeafd;
6
- $color-primary-purple-200: #ded7fd;
7
- $color-primary-purple-300: #c7b8fa;
8
- $color-primary-purple-400: #aa8ff6;
9
- $color-primary-purple-500: #713bc1;
10
- $color-primary-purple-600: #8040e7;
11
- $color-primary-purple-700: #702ed3;
12
- $color-primary-purple-800: #5d26b1;
13
- $color-primary-purple-900: #522398;
14
- $color-primary-purple-950: #301362;
15
- $color-primary-pink-50: #fff1fb;
16
- $color-primary-pink-100: #ffc1f2;
17
- $color-primary-pink-200: #ffc3f2;
18
- $color-primary-pink-300: #ff94e4;
19
- $color-primary-pink-400: #ff54d4;
20
- $color-primary-pink-500: #f83fd3;
21
- $color-primary-pink-600: #ff00d6;
22
- $color-primary-pink-700: #d900b6;
23
- $color-primary-pink-800: #b10092;
24
- $color-primary-pink-900: #920075;
25
- $color-primary-pink-950: #630050;
4
+ $color-primary-50: #f5f3ff;
5
+ $color-primary-100: #edeafd;
6
+ $color-primary-200: #ded7fd;
7
+ $color-primary-300: #c7b8fa;
8
+ $color-primary-400: #aa8ff6;
9
+ $color-primary-500: #8e56e0;
10
+ $color-primary-600: #8647e5;
11
+ $color-primary-700: #7d42d6;
12
+ $color-primary-800: #713bc1;
13
+ $color-primary-900: #522398;
14
+ $color-primary-950: #301362;
26
15
  $color-neutral-50: #f4f4f4;
27
16
  $color-neutral-100: #dbdbdb;
28
- $color-neutral-200: #dbdbdb;
17
+ $color-neutral-200: #d1d1d1;
29
18
  $color-neutral-300: #c1c1c1;
30
19
  $color-neutral-400: #a8a8a8;
31
20
  $color-neutral-500: #6d6d6d;
32
21
  $color-neutral-600: #5d5d5d;
33
22
  $color-neutral-700: #4f4f4f;
34
- $color-neutral-800: #666666;
35
- $color-neutral-900: #4d4d4d;
23
+ $color-neutral-800: #454545;
24
+ $color-neutral-900: #3d3d3d;
36
25
  $color-neutral-950: #000000;
37
26
  $color-white: #ffffff;
38
27
  $color-black: #000000;
39
- $color-system-success: #009a08; // Positive / completed state
40
- $color-system-failure: #b70c00; // Error / destructive state
41
- $color-system-attention: #fa8900; // Warning / needs attention
42
- $color-gradient-purple-pink-start: #713bc1;
43
- $color-gradient-purple-pink-end: #c519a3;
44
- $color-gradient-pink-purple-start: #c519a3;
45
- $color-gradient-pink-purple-end: #713bc1;
46
- $color-gradient-dark-purple-start: #713bc1;
47
- $color-gradient-dark-purple-end: #bd91ff;
48
- $color-backgrounds-card-bg-dark-purple: #522398;
49
- $color-backgrounds-card-bg-purple: #48277d;
50
- $color-backgrounds-classic-bg-light: #fafafa;
51
- $color-backgrounds-classic-bg-dark: #0d0d0d;
52
- $color-backgrounds-themed-bg-ibis-white: #ffecfb;
53
- $color-backgrounds-themed-bg-ibis-dark: #251440;
54
- $color-buttons-simple: #522398;
55
- $color-buttons-dark-gradient-start: #713bc1;
56
- $color-buttons-dark-gradient-end: #bd91ff;
57
- $color-buttons-gradient-start: #713bc1;
58
- $color-buttons-gradient-end: #c519a3;
28
+ $color-green-500: #009a08;
29
+ $color-red-500: #b70c00;
30
+ $color-orange-500: #fa8900;
31
+ $color-gradients-main-start: #3b1570;
32
+ $color-gradients-main-end: #8e0175;
33
+ $color-gradients-purple-start: #c519a3;
34
+ $color-gradients-purple-end: #713bc1;
35
+ $color-gradients-dark-purple-start: #713bc1;
36
+ $color-gradients-dark-purple-end: #bd91ff;
59
37
  $spacing-0: 0;
60
38
  $spacing-1: 0.25rem;
61
39
  $spacing-2: 0.5rem;
@@ -63,19 +41,15 @@ $spacing-3: 0.75rem;
63
41
  $spacing-4: 1rem;
64
42
  $spacing-5: 1.25rem;
65
43
  $spacing-6: 1.5rem;
44
+ $spacing-7: 1.75rem;
66
45
  $spacing-8: 2rem;
46
+ $spacing-9: 2.25rem;
67
47
  $spacing-10: 2.5rem;
68
48
  $spacing-12: 3rem;
49
+ $spacing-14: 3.5rem;
69
50
  $spacing-16: 4rem;
70
- $letter-spacing-tighter: -0.05em;
71
- $letter-spacing-tight: -0.025em;
72
- $letter-spacing-normal: 0;
73
- $letter-spacing-wide: 0.025em;
74
- $letter-spacing-wider: 0.05em;
75
- $line-height-tight: 1.25;
76
- $line-height-normal: 1.5;
77
- $line-height-relaxed: 1.75;
78
- $line-height-loose: 2;
51
+ $spacing-20: 5rem;
52
+ $spacing-24: 6rem;
79
53
  $font-family-branding: 'Beyond Infinity', cursive; // Logo and brand display
80
54
  $font-family-heading: Metrisch, Poppins, system-ui, sans-serif; // Headings and display text
81
55
  $font-family-sans: Inter, Verdana, system-ui, sans-serif; // Body and UI text
@@ -88,47 +62,62 @@ $font-weight-semibold: 600;
88
62
  $font-weight-bold: 700;
89
63
  $font-weight-extrabold: 800;
90
64
  $font-weight-black: 900;
91
- $font-size-normal-text-xs: 0.75rem;
92
- $font-size-normal-text-sm: 0.875rem;
93
- $font-size-normal-text-default: 1rem;
94
- $font-size-normal-text-lg: 1.125rem;
95
- $font-size-normal-text-xl: 1.25rem;
96
- $font-size-marketing-text-sm: 1rem;
97
- $font-size-marketing-text-default: 1.333rem;
98
- $font-size-marketing-text-lg: 1.771rem;
99
- $font-size-marketing-text-xl: 2.375rem;
65
+ $font-size-body-sm: 0.75rem;
66
+ $font-size-body-md: 1rem;
67
+ $font-size-body-lg: 1.25rem;
68
+ $font-size-heading-h1: 4.188rem;
69
+ $font-size-heading-h2: 3.188rem;
70
+ $font-size-heading-h3: 2.375rem;
71
+ $font-size-heading-h4: 1.75rem;
72
+ $font-size-heading-h5: 1.312rem;
73
+ $font-style-normal: normal;
74
+ $font-style-italic: italic;
75
+ $text-transform-uppercase: uppercase;
76
+ $text-transform-lowercase: lowercase;
77
+ $text-transform-capitalize: capitalize;
78
+ $line-height-tight: 1.25;
79
+ $line-height-normal: 1.5;
80
+ $line-height-relaxed: 1.75;
81
+ $line-height-loose: 2;
82
+ $letter-spacing-tighter: -0.05em;
83
+ $letter-spacing-tight: -0.025em;
84
+ $letter-spacing-normal: 0;
85
+ $letter-spacing-wide: 0.025em;
86
+ $letter-spacing-wider: 0.05em;
100
87
  $border-radius-none: 0;
101
- $border-radius-sm: 0.25rem;
102
- $border-radius-default: 0.375rem;
88
+ $border-radius-xs: 0.25rem;
89
+ $border-radius-sm: 0.375rem;
103
90
  $border-radius-md: 0.5rem;
104
91
  $border-radius-lg: 0.75rem;
92
+ $border-radius-xl: 1rem;
93
+ $border-radius-2xl: 1.5rem;
105
94
  $border-radius-full: 9999px;
106
95
  $border-width-none: 0;
96
+ $border-width-hairline: 0.5px;
107
97
  $border-width-thin: 1px;
108
98
  $border-width-default: 2px;
99
+ $border-width-medium: 3px;
109
100
  $border-width-thick: 4px;
110
- $shadow-none: none;
111
- $shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
112
- $shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
113
- $shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
114
- $shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
115
- $shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
116
- $shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
101
+ $shadow-color-black-soft: rgba(0, 0, 0, 0.1);
102
+ $shadow-color-black-medium: rgba(0, 0, 0, 0.15);
103
+ $shadow-color-black-strong: rgba(0, 0, 0, 0.25);
104
+ $shadow-color-brand-soft: rgba(223, 238, 255, 0.1);
105
+ $shadow-color-brand-medium: rgba(223, 238, 255, 0.15);
106
+ $shadow-color-brand-strong: rgba(223, 238, 255, 0.25);
107
+ $shadow-color-white-soft: rgba(255, 255, 255, 0.1);
108
+ $shadow-color-white-medium: rgba(255, 255, 255, 0.15);
109
+ $shadow-color-white-strong: rgba(255, 255, 255, 0.25);
110
+ $shadow-none: ;
117
111
  $logo-square-sm: 24px;
118
112
  $logo-square-md: 32px;
119
113
  $logo-square-lg: 40px;
120
114
  $logo-square-xl: 48px;
121
115
  $logo-square-main: 255px;
122
- $icons-frame-circle-xs: 16px;
123
- $icons-frame-circle-sm: 24px;
124
- $icons-frame-circle-md: 32px;
125
- $icons-frame-circle-lg: 48px;
126
- $icons-frame-circle-xl: 56px;
127
- $icons-size-xs: 12px;
128
- $icons-size-sm: 18px;
129
- $icons-size-md: 24px;
130
- $icons-size-lg: 40px;
131
- $icons-size-xl: 48px;
116
+ $icons-xs: 16px;
117
+ $icons-sm: 24px;
118
+ $icons-md: 32px;
119
+ $icons-lg: 48px;
120
+ $icons-xl: 56px;
132
121
  $z-index-base: 0;
133
122
  $z-index-dropdown: 1000;
134
123
  $z-index-sticky: 1100;
@@ -136,6 +125,15 @@ $z-index-overlay: 1200;
136
125
  $z-index-modal: 1300;
137
126
  $z-index-popover: 1400;
138
127
  $z-index-tooltip: 1500;
128
+ $opacity-1: 0.1;
129
+ $opacity-2: 0.2;
130
+ $opacity-3: 0.3;
131
+ $opacity-4: 0.4;
132
+ $opacity-5: 0.5;
133
+ $opacity-6: 0.6;
134
+ $opacity-7: 0.7;
135
+ $opacity-8: 0.8;
136
+ $opacity-9: 0.9;
139
137
  $opacity-disabled: 0.5;
140
138
  $opacity-muted: 0.75;
141
139
  $opacity-subtle: 0.9;
@@ -146,6 +144,7 @@ $transition-timing-default: ease;
146
144
  $transition-timing-in: ease-in;
147
145
  $transition-timing-out: ease-out;
148
146
  $transition-timing-in-out: ease-in-out;
147
+ $breakpoint-2xs: 360px;
149
148
  $breakpoint-xs: 480px;
150
149
  $breakpoint-sm: 640px;
151
150
  $breakpoint-md: 768px;
@@ -159,3 +158,99 @@ $blur-md: 6px;
159
158
  $blur-lg: 8px;
160
159
  $blur-xl: 12px;
161
160
  $blur-2xl: 16px;
161
+ $blur-3xl: 24px;
162
+ $size-xs: 16px;
163
+ $size-sm: 24px;
164
+ $size-md: 32px;
165
+ $size-lg: 48px;
166
+ $size-xl: 56px;
167
+ $size-2xl: 64px;
168
+ $component-button-size-xs-border-radius: 10px;
169
+ $component-button-size-sm-border-radius: 12px;
170
+ $component-button-size-md-border-radius: 16px;
171
+ $component-button-size-lg-border-radius: 16px;
172
+ $color-text-primary: $color-black;
173
+ $color-text-inverse: $color-white;
174
+ $color-border-default: $color-neutral-200;
175
+ $color-border-focus: $color-primary-300;
176
+ $color-status-success: $color-green-500;
177
+ $color-status-error: $color-red-500;
178
+ $color-status-warning: $color-orange-500;
179
+ $gradient-brand-primary: [object Object];
180
+ $text-style-body-font-family: $font-family-sans;
181
+ $text-style-body-font-size: $font-size-body-md;
182
+ $text-style-body-line-height: $line-height-normal;
183
+ $text-style-body-font-weight: $font-weight-normal;
184
+ $text-style-heading-font-family: $font-family-heading;
185
+ $text-style-heading-font-size: $font-size-heading-h2;
186
+ $text-style-heading-line-height: $line-height-tight;
187
+ $text-style-heading-font-weight: $font-weight-bold;
188
+ $shadow-default: 0 0 3px 0 $shadow-color-black-soft, 0 0 2px -1px $shadow-color-black-soft;
189
+ $shadow-md: 0 0 6px -1px $shadow-color-black-soft, 0 0 4px -2px $shadow-color-black-soft;
190
+ $shadow-lg: 0 0 15px -3px $shadow-color-black-soft, 0 0 6px -4px $shadow-color-black-soft;
191
+ $shadow-xl: 0 0 25px -5px $shadow-color-black-soft, 0 0 10px -6px $shadow-color-black-soft;
192
+ $shadow-2xl: 0 0 50px -12px $shadow-color-black-strong;
193
+ $shadow-inner: 0 0 4px 0 $shadow-color-black-soft;
194
+ $shadow-button-inner: 0 0 4px 0 $shadow-color-brand-soft, 0 0 1px 0 $shadow-color-white-soft;
195
+ $component-button-primary-default-border-width: $border-width-thin;
196
+ $component-button-primary-default-padding-x: $spacing-4;
197
+ $component-button-primary-default-padding-y: $spacing-2;
198
+ $component-button-primary-hover-background: $color-primary-900;
199
+ $component-button-primary-disabled-background: $color-neutral-200;
200
+ $component-button-primary-disabled-color: $color-neutral-300;
201
+ $component-button-primary-disabled-border-color: $color-neutral-300;
202
+ $component-button-secondary-default-background: $color-primary-50;
203
+ $component-button-secondary-default-color: $color-primary-900;
204
+ $component-button-secondary-default-border-color: $color-primary-50;
205
+ $component-button-secondary-default-border-width: $border-width-thin;
206
+ $component-button-secondary-default-padding-x: $spacing-4;
207
+ $component-button-secondary-default-padding-y: $spacing-2;
208
+ $component-button-secondary-hover-background: $color-primary-50;
209
+ $component-button-secondary-hover-border-color: $color-primary-900;
210
+ $component-button-secondary-focused-background: $color-primary-50;
211
+ $component-button-secondary-focused-border-color: $color-primary-900;
212
+ $component-button-secondary-focused-border-width: $border-width-thick;
213
+ $component-button-secondary-disabled-background: $color-white;
214
+ $component-button-secondary-disabled-color: $color-neutral-300;
215
+ $component-button-secondary-disabled-border-color: $color-neutral-300;
216
+ $component-toaster-default-background: $color-neutral-200;
217
+ $component-toaster-default-border-color: $color-neutral-200;
218
+ $component-toaster-default-border-width: $border-width-thin;
219
+ $component-toaster-success-background: $color-green-500;
220
+ $component-toaster-success-border-color: $color-green-500;
221
+ $component-toaster-success-border-width: $border-width-thin;
222
+ $component-toaster-error-background: $color-red-500;
223
+ $component-toaster-error-border-color: $color-red-500;
224
+ $component-toaster-error-border-width: $border-width-thin;
225
+ $component-toaster-accent-background: $color-neutral-200;
226
+ $component-toaster-accent-color: $color-black;
227
+ $component-toaster-accent-border-color: $color-neutral-200;
228
+ $component-toaster-accent-border-width: $border-width-thin;
229
+ $component-banner-default-background: $color-neutral-200;
230
+ $component-banner-default-background-opacity: $opacity-1;
231
+ $component-banner-default-border-color: $color-neutral-200;
232
+ $component-banner-default-border-width: $border-width-thin;
233
+ $component-banner-success-background: $color-green-500;
234
+ $component-banner-success-background-opacity: $opacity-1;
235
+ $component-banner-success-border-color: $color-green-500;
236
+ $component-banner-success-border-width: $border-width-thin;
237
+ $component-banner-error-background: $color-red-500;
238
+ $component-banner-error-background-opacity: $opacity-1;
239
+ $component-banner-error-border-color: $color-red-500;
240
+ $component-banner-error-border-width: $border-width-thin;
241
+ $component-banner-accent-background: $color-neutral-200;
242
+ $component-banner-accent-background-opacity: $opacity-1;
243
+ $component-banner-accent-color: $color-black;
244
+ $component-banner-accent-border-color: $color-neutral-200;
245
+ $component-banner-accent-border-width: $border-width-thin;
246
+ $component-button-primary-default-background: $gradient-brand-primary;
247
+ $component-button-primary-default-color: $color-text-inverse;
248
+ $component-button-primary-default-border-color: $color-border-default;
249
+ $component-button-primary-default-shadow: $shadow-button-inner;
250
+ $component-button-primary-hover-border-color: $color-border-default;
251
+ $component-toaster-default-color: $color-text-primary;
252
+ $component-toaster-success-color: $color-text-inverse;
253
+ $component-toaster-error-color: $color-text-inverse;
254
+ $component-banner-default-color: $color-text-primary;
255
+ $component-banner-success-color: $color-text-inverse;
256
+ $component-banner-error-color: $color-text-inverse;
package/dist/ibis/tailwind.preset.js CHANGED
@@ -6,32 +6,17 @@ module.exports = {
6
6
  extend: {
7
7
  color: {
8
8
  primary: {
9
- purple: {
10
- 50: "var(--color-primary-purple-50)",
11
- 100: "var(--color-primary-purple-100)",
12
- 200: "var(--color-primary-purple-200)",
13
- 300: "var(--color-primary-purple-300)",
14
- 400: "var(--color-primary-purple-400)",
15
- 500: "var(--color-primary-purple-500)",
16
- 600: "var(--color-primary-purple-600)",
17
- 700: "var(--color-primary-purple-700)",
18
- 800: "var(--color-primary-purple-800)",
19
- 900: "var(--color-primary-purple-900)",
20
- 950: "var(--color-primary-purple-950)"
21
- },
22
- pink: {
23
- 50: "var(--color-primary-pink-50)",
24
- 100: "var(--color-primary-pink-100)",
25
- 200: "var(--color-primary-pink-200)",
26
- 300: "var(--color-primary-pink-300)",
27
- 400: "var(--color-primary-pink-400)",
28
- 500: "var(--color-primary-pink-500)",
29
- 600: "var(--color-primary-pink-600)",
30
- 700: "var(--color-primary-pink-700)",
31
- 800: "var(--color-primary-pink-800)",
32
- 900: "var(--color-primary-pink-900)",
33
- 950: "var(--color-primary-pink-950)"
34
- }
9
+ 50: "var(--color-primary-50)",
10
+ 100: "var(--color-primary-100)",
11
+ 200: "var(--color-primary-200)",
12
+ 300: "var(--color-primary-300)",
13
+ 400: "var(--color-primary-400)",
14
+ 500: "var(--color-primary-500)",
15
+ 600: "var(--color-primary-600)",
16
+ 700: "var(--color-primary-700)",
17
+ 800: "var(--color-primary-800)",
18
+ 900: "var(--color-primary-900)",
19
+ 950: "var(--color-primary-950)"
35
20
  },
36
21
  neutral: {
37
22
  50: "var(--color-neutral-50)",
@@ -48,51 +33,48 @@ module.exports = {
48
33
  },
49
34
  white: "var(--color-white)",
50
35
  black: "var(--color-black)",
51
- system: {
52
- success: "var(--color-system-success)",
53
- failure: "var(--color-system-failure)",
54
- attention: "var(--color-system-attention)"
36
+ green: {
37
+ 500: "var(--color-green-500)"
55
38
  },
56
- gradient: {
57
- purplePink: {
58
- start: "var(--color-gradient-purple-pink-start)",
59
- end: "var(--color-gradient-purple-pink-end)"
60
- },
61
- pinkPurple: {
62
- start: "var(--color-gradient-pink-purple-start)",
63
- end: "var(--color-gradient-pink-purple-end)"
64
- },
65
- darkPurple: {
66
- start: "var(--color-gradient-dark-purple-start)",
67
- end: "var(--color-gradient-dark-purple-end)"
68
- }
39
+ red: {
40
+ 500: "var(--color-red-500)"
69
41
  },
70
- backgrounds: {
71
- cardBg: {
72
- darkPurple: "var(--color-backgrounds-card-bg-dark-purple)",
73
- purple: "var(--color-backgrounds-card-bg-purple)"
74
- },
75
- classicBg: {
76
- light: "var(--color-backgrounds-classic-bg-light)",
77
- dark: "var(--color-backgrounds-classic-bg-dark)"
78
- },
79
- themedBg: {
80
- ibisWhite: "var(--color-backgrounds-themed-bg-ibis-white)",
81
- ibisDark: "var(--color-backgrounds-themed-bg-ibis-dark)"
82
- }
42
+ orange: {
43
+ 500: "var(--color-orange-500)"
44
+ },
45
+ text: {
46
+ primary: "var(--color-text-primary)",
47
+ inverse: "var(--color-text-inverse)"
48
+ },
49
+ border: {
50
+ default: "var(--color-border-default)",
51
+ focus: "var(--color-border-focus)"
83
52
  },
84
- buttons: {
85
- simple: "var(--color-buttons-simple)",
86
- darkGradient: {
87
- start: "var(--color-buttons-dark-gradient-start)",
88
- end: "var(--color-buttons-dark-gradient-end)"
53
+ status: {
54
+ success: "var(--color-status-success)",
55
+ error: "var(--color-status-error)",
56
+ warning: "var(--color-status-warning)"
57
+ },
58
+ gradients: {
59
+ main: {
60
+ start: "var(--color-gradients-main-start)",
61
+ end: "var(--color-gradients-main-end)"
89
62
  },
90
- gradient: {
91
- start: "var(--color-buttons-gradient-start)",
92
- end: "var(--color-buttons-gradient-end)"
63
+ purple: {
64
+ start: "var(--color-gradients-purple-start)",
65
+ end: "var(--color-gradients-purple-end)"
66
+ },
67
+ darkPurple: {
68
+ start: "var(--color-gradients-dark-purple-start)",
69
+ end: "var(--color-gradients-dark-purple-end)"
93
70
  }
94
71
  }
95
72
  },
73
+ gradient: {
74
+ brand: {
75
+ primary: "var(--gradient-brand-primary)"
76
+ }
77
+ },
96
78
  spacing: {
97
79
  0: "var(--spacing-0)",
98
80
  1: "var(--spacing-1)",
@@ -101,23 +83,15 @@ module.exports = {
101
83
  4: "var(--spacing-4)",
102
84
  5: "var(--spacing-5)",
103
85
  6: "var(--spacing-6)",
86
+ 7: "var(--spacing-7)",
104
87
  8: "var(--spacing-8)",
88
+ 9: "var(--spacing-9)",
105
89
  10: "var(--spacing-10)",
106
90
  12: "var(--spacing-12)",
107
- 16: "var(--spacing-16)"
108
- },
109
- letterSpacing: {
110
- tighter: "var(--letter-spacing-tighter)",
111
- tight: "var(--letter-spacing-tight)",
112
- normal: "var(--letter-spacing-normal)",
113
- wide: "var(--letter-spacing-wide)",
114
- wider: "var(--letter-spacing-wider)"
115
- },
116
- lineHeight: {
117
- tight: "var(--line-height-tight)",
118
- normal: "var(--line-height-normal)",
119
- relaxed: "var(--line-height-relaxed)",
120
- loose: "var(--line-height-loose)"
91
+ 14: "var(--spacing-14)",
92
+ 16: "var(--spacing-16)",
93
+ 20: "var(--spacing-20)",
94
+ 24: "var(--spacing-24)"
121
95
  },
122
96
  fontFamily: {
123
97
  branding: "var(--font-family-branding)",
@@ -136,42 +110,99 @@ module.exports = {
136
110
  black: "var(--font-weight-black)"
137
111
  },
138
112
  fontSize: {
139
- normalText: {
140
- xs: "var(--font-size-normal-text-xs)",
141
- sm: "var(--font-size-normal-text-sm)",
142
- DEFAULT: "var(--font-size-normal-text-default)",
143
- lg: "var(--font-size-normal-text-lg)",
144
- xl: "var(--font-size-normal-text-xl)"
113
+ body: {
114
+ sm: "var(--font-size-body-sm)",
115
+ md: "var(--font-size-body-md)",
116
+ lg: "var(--font-size-body-lg)"
117
+ },
118
+ heading: {
119
+ "h1": "var(--font-size-heading-h1)",
120
+ "h2": "var(--font-size-heading-h2)",
121
+ "h3": "var(--font-size-heading-h3)",
122
+ "h4": "var(--font-size-heading-h4)",
123
+ "h5": "var(--font-size-heading-h5)"
124
+ }
125
+ },
126
+ fontStyle: {
127
+ normal: "var(--font-style-normal)",
128
+ italic: "var(--font-style-italic)"
129
+ },
130
+ textTransform: {
131
+ uppercase: "var(--text-transform-uppercase)",
132
+ lowercase: "var(--text-transform-lowercase)",
133
+ capitalize: "var(--text-transform-capitalize)"
134
+ },
135
+ lineHeight: {
136
+ tight: "var(--line-height-tight)",
137
+ normal: "var(--line-height-normal)",
138
+ relaxed: "var(--line-height-relaxed)",
139
+ loose: "var(--line-height-loose)"
140
+ },
141
+ letterSpacing: {
142
+ tighter: "var(--letter-spacing-tighter)",
143
+ tight: "var(--letter-spacing-tight)",
144
+ normal: "var(--letter-spacing-normal)",
145
+ wide: "var(--letter-spacing-wide)",
146
+ wider: "var(--letter-spacing-wider)"
147
+ },
148
+ textStyle: {
149
+ body: {
150
+ fontFamily: "var(--text-style-body-font-family)",
151
+ fontSize: "var(--text-style-body-font-size)",
152
+ lineHeight: "var(--text-style-body-line-height)",
153
+ fontWeight: "var(--text-style-body-font-weight)"
145
154
  },
146
- marketingText: {
147
- sm: "var(--font-size-marketing-text-sm)",
148
- DEFAULT: "var(--font-size-marketing-text-default)",
149
- lg: "var(--font-size-marketing-text-lg)",
150
- xl: "var(--font-size-marketing-text-xl)"
155
+ heading: {
156
+ fontFamily: "var(--text-style-heading-font-family)",
157
+ fontSize: "var(--text-style-heading-font-size)",
158
+ lineHeight: "var(--text-style-heading-line-height)",
159
+ fontWeight: "var(--text-style-heading-font-weight)"
151
160
  }
152
161
  },
153
162
  borderRadius: {
154
163
  none: "var(--border-radius-none)",
164
+ xs: "var(--border-radius-xs)",
155
165
  sm: "var(--border-radius-sm)",
156
- DEFAULT: "var(--border-radius-default)",
157
166
  md: "var(--border-radius-md)",
158
167
  lg: "var(--border-radius-lg)",
168
+ xl: "var(--border-radius-xl)",
169
+ "2xl": "var(--border-radius-2xl)",
159
170
  full: "var(--border-radius-full)"
160
171
  },
161
172
  borderWidth: {
162
173
  none: "var(--border-width-none)",
174
+ hairline: "var(--border-width-hairline)",
163
175
  thin: "var(--border-width-thin)",
164
- DEFAULT: "var(--border-width-default)",
176
+ default: "var(--border-width-default)",
177
+ medium: "var(--border-width-medium)",
165
178
  thick: "var(--border-width-thick)"
166
179
  },
180
+ shadowColor: {
181
+ black: {
182
+ soft: "var(--shadow-color-black-soft)",
183
+ medium: "var(--shadow-color-black-medium)",
184
+ strong: "var(--shadow-color-black-strong)"
185
+ },
186
+ brand: {
187
+ soft: "var(--shadow-color-brand-soft)",
188
+ medium: "var(--shadow-color-brand-medium)",
189
+ strong: "var(--shadow-color-brand-strong)"
190
+ },
191
+ white: {
192
+ soft: "var(--shadow-color-white-soft)",
193
+ medium: "var(--shadow-color-white-medium)",
194
+ strong: "var(--shadow-color-white-strong)"
195
+ }
196
+ },
167
197
  shadow: {
168
198
  none: "var(--shadow-none)",
169
- DEFAULT: "var(--shadow-default)",
199
+ default: "var(--shadow-default)",
170
200
  md: "var(--shadow-md)",
171
201
  lg: "var(--shadow-lg)",
172
202
  xl: "var(--shadow-xl)",
173
203
  "2xl": "var(--shadow-2xl)",
174
- inner: "var(--shadow-inner)"
204
+ inner: "var(--shadow-inner)",
205
+ buttonInner: "var(--shadow-button-inner)"
175
206
  },
176
207
  logo: {
177
208
  square: {
@@ -183,22 +214,11 @@ module.exports = {
183
214
  }
184
215
  },
185
216
  icons: {
186
- frame: {
187
- circle: {
188
- xs: "var(--icons-frame-circle-xs)",
189
- sm: "var(--icons-frame-circle-sm)",
190
- md: "var(--icons-frame-circle-md)",
191
- lg: "var(--icons-frame-circle-lg)",
192
- xl: "var(--icons-frame-circle-xl)"
193
- }
194
- },
195
- size: {
196
- xs: "var(--icons-size-xs)",
197
- sm: "var(--icons-size-sm)",
198
- md: "var(--icons-size-md)",
199
- lg: "var(--icons-size-lg)",
200
- xl: "var(--icons-size-xl)"
201
- }
217
+ xs: "var(--icons-xs)",
218
+ sm: "var(--icons-sm)",
219
+ md: "var(--icons-md)",
220
+ lg: "var(--icons-lg)",
221
+ xl: "var(--icons-xl)"
202
222
  },
203
223
  zIndex: {
204
224
  base: "var(--z-index-base)",
@@ -210,6 +230,15 @@ module.exports = {
210
230
  tooltip: "var(--z-index-tooltip)"
211
231
  },
212
232
  opacity: {
233
+ 1: "var(--opacity-1)",
234
+ 2: "var(--opacity-2)",
235
+ 3: "var(--opacity-3)",
236
+ 4: "var(--opacity-4)",
237
+ 5: "var(--opacity-5)",
238
+ 6: "var(--opacity-6)",
239
+ 7: "var(--opacity-7)",
240
+ 8: "var(--opacity-8)",
241
+ 9: "var(--opacity-9)",
213
242
  disabled: "var(--opacity-disabled)",
214
243
  muted: "var(--opacity-muted)",
215
244
  subtle: "var(--opacity-subtle)"
@@ -228,6 +257,7 @@ module.exports = {
228
257
  }
229
258
  },
230
259
  breakpoint: {
260
+ "2xs": "var(--breakpoint-2xs)",
231
261
  xs: "var(--breakpoint-xs)",
232
262
  sm: "var(--breakpoint-sm)",
233
263
  md: "var(--breakpoint-md)",
@@ -242,7 +272,134 @@ module.exports = {
242
272
  md: "var(--blur-md)",
243
273
  lg: "var(--blur-lg)",
244
274
  xl: "var(--blur-xl)",
245
- "2xl": "var(--blur-2xl)"
275
+ "2xl": "var(--blur-2xl)",
276
+ "3xl": "var(--blur-3xl)"
277
+ },
278
+ size: {
279
+ xs: "var(--size-xs)",
280
+ sm: "var(--size-sm)",
281
+ md: "var(--size-md)",
282
+ lg: "var(--size-lg)",
283
+ xl: "var(--size-xl)",
284
+ "2xl": "var(--size-2xl)"
285
+ },
286
+ component: {
287
+ button: {
288
+ primary: {
289
+ default: {
290
+ background: "var(--component-button-primary-default-background)",
291
+ color: "var(--component-button-primary-default-color)",
292
+ borderColor: "var(--component-button-primary-default-border-color)",
293
+ borderWidth: "var(--component-button-primary-default-border-width)",
294
+ paddingX: "var(--component-button-primary-default-padding-x)",
295
+ paddingY: "var(--component-button-primary-default-padding-y)",
296
+ shadow: "var(--component-button-primary-default-shadow)"
297
+ },
298
+ hover: {
299
+ background: "var(--component-button-primary-hover-background)",
300
+ borderColor: "var(--component-button-primary-hover-border-color)"
301
+ },
302
+ disabled: {
303
+ background: "var(--component-button-primary-disabled-background)",
304
+ color: "var(--component-button-primary-disabled-color)",
305
+ borderColor: "var(--component-button-primary-disabled-border-color)"
306
+ }
307
+ },
308
+ secondary: {
309
+ default: {
310
+ background: "var(--component-button-secondary-default-background)",
311
+ color: "var(--component-button-secondary-default-color)",
312
+ borderColor: "var(--component-button-secondary-default-border-color)",
313
+ borderWidth: "var(--component-button-secondary-default-border-width)",
314
+ paddingX: "var(--component-button-secondary-default-padding-x)",
315
+ paddingY: "var(--component-button-secondary-default-padding-y)"
316
+ },
317
+ hover: {
318
+ background: "var(--component-button-secondary-hover-background)",
319
+ borderColor: "var(--component-button-secondary-hover-border-color)"
320
+ },
321
+ focused: {
322
+ background: "var(--component-button-secondary-focused-background)",
323
+ borderColor: "var(--component-button-secondary-focused-border-color)",
324
+ borderWidth: "var(--component-button-secondary-focused-border-width)"
325
+ },
326
+ disabled: {
327
+ background: "var(--component-button-secondary-disabled-background)",
328
+ color: "var(--component-button-secondary-disabled-color)",
329
+ borderColor: "var(--component-button-secondary-disabled-border-color)"
330
+ }
331
+ },
332
+ size: {
333
+ xs: {
334
+ borderRadius: "var(--component-button-size-xs-border-radius)"
335
+ },
336
+ sm: {
337
+ borderRadius: "var(--component-button-size-sm-border-radius)"
338
+ },
339
+ md: {
340
+ borderRadius: "var(--component-button-size-md-border-radius)"
341
+ },
342
+ lg: {
343
+ borderRadius: "var(--component-button-size-lg-border-radius)"
344
+ }
345
+ }
346
+ },
347
+ toaster: {
348
+ default: {
349
+ background: "var(--component-toaster-default-background)",
350
+ color: "var(--component-toaster-default-color)",
351
+ borderColor: "var(--component-toaster-default-border-color)",
352
+ borderWidth: "var(--component-toaster-default-border-width)"
353
+ },
354
+ success: {
355
+ background: "var(--component-toaster-success-background)",
356
+ color: "var(--component-toaster-success-color)",
357
+ borderColor: "var(--component-toaster-success-border-color)",
358
+ borderWidth: "var(--component-toaster-success-border-width)"
359
+ },
360
+ error: {
361
+ background: "var(--component-toaster-error-background)",
362
+ color: "var(--component-toaster-error-color)",
363
+ borderColor: "var(--component-toaster-error-border-color)",
364
+ borderWidth: "var(--component-toaster-error-border-width)"
365
+ },
366
+ accent: {
367
+ background: "var(--component-toaster-accent-background)",
368
+ color: "var(--component-toaster-accent-color)",
369
+ borderColor: "var(--component-toaster-accent-border-color)",
370
+ borderWidth: "var(--component-toaster-accent-border-width)"
371
+ }
372
+ },
373
+ banner: {
374
+ default: {
375
+ background: "var(--component-banner-default-background)",
376
+ backgroundOpacity: "var(--component-banner-default-background-opacity)",
377
+ color: "var(--component-banner-default-color)",
378
+ borderColor: "var(--component-banner-default-border-color)",
379
+ borderWidth: "var(--component-banner-default-border-width)"
380
+ },
381
+ success: {
382
+ background: "var(--component-banner-success-background)",
383
+ backgroundOpacity: "var(--component-banner-success-background-opacity)",
384
+ color: "var(--component-banner-success-color)",
385
+ borderColor: "var(--component-banner-success-border-color)",
386
+ borderWidth: "var(--component-banner-success-border-width)"
387
+ },
388
+ error: {
389
+ background: "var(--component-banner-error-background)",
390
+ backgroundOpacity: "var(--component-banner-error-background-opacity)",
391
+ color: "var(--component-banner-error-color)",
392
+ borderColor: "var(--component-banner-error-border-color)",
393
+ borderWidth: "var(--component-banner-error-border-width)"
394
+ },
395
+ accent: {
396
+ background: "var(--component-banner-accent-background)",
397
+ backgroundOpacity: "var(--component-banner-accent-background-opacity)",
398
+ color: "var(--component-banner-accent-color)",
399
+ borderColor: "var(--component-banner-accent-border-color)",
400
+ borderWidth: "var(--component-banner-accent-border-width)"
401
+ }
402
+ }
246
403
  }
247
404
  },
248
405
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibis-design/css",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
5
  "type": "module",
6
6
  "exports": {
@@ -23,6 +23,6 @@
23
23
  },
24
24
  "devDependencies": {
25
25
  "sd-tailwindcss-transformer": "^2.2.1",
26
- "style-dictionary": "^5.3.3"
26
+ "style-dictionary": "^5.4.0"
27
27
  }
28
28
  }