@ibis-design/css 0.2.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 (8) hide show
  1. package/README.md +17 -5
  2. package/dist/alchemy/alchemy-design.css +154 -0
  3. package/dist/alchemy/alchemy-design.scss +151 -0
  4. package/dist/alchemy/tailwind.preset.js +231 -0
  5. package/dist/ibis/ibis-design.css +188 -125
  6. package/dist/ibis/ibis-design.scss +188 -125
  7. package/dist/ibis/tailwind.preset.js +257 -138
  8. package/package.json +5 -3
package/dist/ibis/ibis-design.css CHANGED
@@ -3,94 +3,39 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --color-primary-50: #f5efff;
7
- --color-primary-100: #fbfcfe;
8
- --color-primary-200: #e6d9ff;
9
- --color-primary-300: #cdb8ff;
10
- --color-primary-400: #9f7bef;
11
- --color-primary-500: #522398;
12
- --color-primary-600: #920075;
13
- --color-primary-700: #c3009e;
14
- --color-primary-800: #f83fd3;
15
- --color-primary-900: #251440;
16
- --color-primary-950: #140a26;
17
- --color-secondary-purple-50: #f5f0ff;
18
- --color-secondary-purple-100: #e8dbff;
19
- --color-secondary-purple-200: #d9c0ff;
20
- --color-secondary-purple-300: #bd91ff;
21
- --color-secondary-purple-400: #945aea;
22
- --color-secondary-purple-500: #713bc1;
23
- --color-secondary-purple-600: #5c2fa0;
24
- --color-secondary-purple-700: #4a2581;
25
- --color-secondary-purple-800: #381c61;
26
- --color-secondary-purple-900: #271342;
27
- --color-secondary-purple-950: #150a26;
28
- --color-secondary-pink-50: #fff0fb;
29
- --color-secondary-pink-100: #ffc1f2;
30
- --color-secondary-pink-200: #ff6ce2;
31
- --color-secondary-pink-300: #f83fd3;
32
- --color-secondary-pink-400: #c519a3;
33
- --color-secondary-pink-500: #a01487;
34
- --color-secondary-pink-600: #830e6e;
35
- --color-secondary-pink-700: #660a55;
36
- --color-secondary-pink-800: #4a063c;
37
- --color-secondary-pink-900: #2e0324;
38
- --color-secondary-pink-950: #160112;
39
- --color-neutral-50: #fafafa;
40
- --color-neutral-100: #f2f2f2;
41
- --color-neutral-200: #e5e5e5;
42
- --color-neutral-300: #d4d4d4;
43
- --color-neutral-400: #bfbfbf;
44
- --color-neutral-500: #8d8d8e;
45
- --color-neutral-600: #6f6f70;
46
- --color-neutral-700: #545455;
47
- --color-neutral-800: #3a3a3b;
48
- --color-neutral-900: #1f1f20;
49
- --color-neutral-950: #0d0d0e;
50
- --color-neutral-secondary-sec-grey-50: #fafafa;
51
- --color-neutral-secondary-sec-grey-100: #f4f4f4;
52
- --color-neutral-secondary-sec-grey-200: #dbdbdb;
53
- --color-neutral-secondary-sec-grey-300: #c1c1c1;
54
- --color-neutral-secondary-sec-grey-400: #ababab;
55
- --color-neutral-secondary-sec-grey-500: #8f8f8f;
56
- --color-neutral-secondary-sec-grey-600: #737373;
57
- --color-neutral-secondary-sec-grey-700: #595959;
58
- --color-neutral-secondary-sec-grey-800: #3f3f3f;
59
- --color-neutral-secondary-sec-grey-900: #262626;
60
- --color-neutral-secondary-sec-grey-950: #121212;
61
- --color-neutral-secondary-sec-black-50: #f2f2f2;
62
- --color-neutral-secondary-sec-black-100: #808080;
63
- --color-neutral-secondary-sec-black-200: #666666;
64
- --color-neutral-secondary-sec-black-300: #4d4d4d;
65
- --color-neutral-secondary-sec-black-400: #404040;
66
- --color-neutral-secondary-sec-black-500: #333333;
67
- --color-neutral-secondary-sec-black-600: #262626;
68
- --color-neutral-secondary-sec-black-700: #1a1a1a;
69
- --color-neutral-secondary-sec-black-800: #121212;
70
- --color-neutral-secondary-sec-black-900: #0a0a0a;
71
- --color-neutral-secondary-sec-black-950: #050505;
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;
17
+ --color-neutral-50: #f4f4f4;
18
+ --color-neutral-100: #dbdbdb;
19
+ --color-neutral-200: #d1d1d1;
20
+ --color-neutral-300: #c1c1c1;
21
+ --color-neutral-400: #a8a8a8;
22
+ --color-neutral-500: #6d6d6d;
23
+ --color-neutral-600: #5d5d5d;
24
+ --color-neutral-700: #4f4f4f;
25
+ --color-neutral-800: #454545;
26
+ --color-neutral-900: #3d3d3d;
27
+ --color-neutral-950: #000000;
72
28
  --color-white: #ffffff;
73
29
  --color-black: #000000;
74
- --color-system-success: #009a08;
75
- --color-system-failure: #b70c00;
76
- --color-system-attention: #fa8900;
77
- --color-gradient-purple-pink-start: #713bc1;
78
- --color-gradient-purple-pink-end: #c519a3;
79
- --color-gradient-pink-purple-start: #c519a3;
80
- --color-gradient-pink-purple-end: #713bc1;
81
- --color-gradient-dark-purple-start: #713bc1;
82
- --color-gradient-dark-purple-end: #bd91ff;
83
- --color-backgrounds-card-bg-dark-purple: #522398;
84
- --color-backgrounds-card-bg-purple: #48277d;
85
- --color-backgrounds-classic-bg-light: #fafafa;
86
- --color-backgrounds-classic-bg-dark: #0d0d0d;
87
- --color-backgrounds-themed-bg-ibis-white: #ffecfb;
88
- --color-backgrounds-themed-bg-ibis-dark: #251440;
89
- --color-buttons-simple: #522398;
90
- --color-buttons-dark-gradient-start: #713bc1;
91
- --color-buttons-dark-gradient-end: #bd91ff;
92
- --color-buttons-gradient-start: #713bc1;
93
- --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;
94
39
  --spacing-0: 0;
95
40
  --spacing-1: 0.25rem;
96
41
  --spacing-2: 0.5rem;
@@ -98,21 +43,18 @@
98
43
  --spacing-4: 1rem;
99
44
  --spacing-5: 1.25rem;
100
45
  --spacing-6: 1.5rem;
46
+ --spacing-7: 1.75rem;
101
47
  --spacing-8: 2rem;
48
+ --spacing-9: 2.25rem;
102
49
  --spacing-10: 2.5rem;
103
50
  --spacing-12: 3rem;
51
+ --spacing-14: 3.5rem;
104
52
  --spacing-16: 4rem;
105
- --letter-spacing-tighter: -0.05em;
106
- --letter-spacing-tight: -0.025em;
107
- --letter-spacing-normal: 0;
108
- --letter-spacing-wide: 0.025em;
109
- --letter-spacing-wider: 0.05em;
110
- --line-height-tight: 1.25;
111
- --line-height-normal: 1.5;
112
- --line-height-relaxed: 1.75;
113
- --line-height-loose: 2;
114
- --font-family-branding: 'Beyond Infinity', cursive;
115
- --font-family-sans: Inter, system-ui, sans-serif;
53
+ --spacing-20: 5rem;
54
+ --spacing-24: 6rem;
55
+ --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
56
+ --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
57
+ --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
116
58
  --font-weight-thin: 100;
117
59
  --font-weight-extralight: 200;
118
60
  --font-weight-light: 300;
@@ -122,47 +64,62 @@
122
64
  --font-weight-bold: 700;
123
65
  --font-weight-extrabold: 800;
124
66
  --font-weight-black: 900;
125
- --font-size-normal-text-xs: 0.75rem;
126
- --font-size-normal-text-sm: 0.875rem;
127
- --font-size-normal-text-default: 1rem;
128
- --font-size-normal-text-lg: 1.125rem;
129
- --font-size-normal-text-xl: 1.25rem;
130
- --font-size-marketing-text-sm: 1.000rem;
131
- --font-size-marketing-text-default: 1.333rem;
132
- --font-size-marketing-text-lg: 1.771rem;
133
- --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;
134
89
  --border-radius-none: 0;
135
- --border-radius-sm: 0.25rem;
136
- --border-radius-default: 0.375rem;
90
+ --border-radius-xs: 0.25rem;
91
+ --border-radius-sm: 0.375rem;
137
92
  --border-radius-md: 0.5rem;
138
93
  --border-radius-lg: 0.75rem;
94
+ --border-radius-xl: 1rem;
95
+ --border-radius-2xl: 1.5rem;
139
96
  --border-radius-full: 9999px;
140
97
  --border-width-none: 0;
98
+ --border-width-hairline: 0.5px;
141
99
  --border-width-thin: 1px;
142
100
  --border-width-default: 2px;
101
+ --border-width-medium: 3px;
143
102
  --border-width-thick: 4px;
144
- --shadow-none: none;
145
- --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
146
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
147
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
148
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
149
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
150
- --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: ;
151
113
  --logo-square-sm: 24px;
152
114
  --logo-square-md: 32px;
153
115
  --logo-square-lg: 40px;
154
116
  --logo-square-xl: 48px;
155
117
  --logo-square-main: 255px;
156
- --icons-frame-circle-xs: 16px;
157
- --icons-frame-circle-sm: 24px;
158
- --icons-frame-circle-md: 32px;
159
- --icons-frame-circle-lg: 48px;
160
- --icons-frame-circle-xl: 56px;
161
- --icons-size-xs: 12px;
162
- --icons-size-sm: 18px;
163
- --icons-size-md: 24px;
164
- --icons-size-lg: 40px;
165
- --icons-size-xl: 48px;
118
+ --icons-xs: 16px;
119
+ --icons-sm: 24px;
120
+ --icons-md: 32px;
121
+ --icons-lg: 48px;
122
+ --icons-xl: 56px;
166
123
  --z-index-base: 0;
167
124
  --z-index-dropdown: 1000;
168
125
  --z-index-sticky: 1100;
@@ -170,6 +127,15 @@
170
127
  --z-index-modal: 1300;
171
128
  --z-index-popover: 1400;
172
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;
173
139
  --opacity-disabled: 0.5;
174
140
  --opacity-muted: 0.75;
175
141
  --opacity-subtle: 0.9;
@@ -180,6 +146,7 @@
180
146
  --transition-timing-in: ease-in;
181
147
  --transition-timing-out: ease-out;
182
148
  --transition-timing-in-out: ease-in-out;
149
+ --breakpoint-2xs: 360px;
183
150
  --breakpoint-xs: 480px;
184
151
  --breakpoint-sm: 640px;
185
152
  --breakpoint-md: 768px;
@@ -193,4 +160,100 @@
193
160
  --blur-lg: 8px;
194
161
  --blur-xl: 12px;
195
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);
196
259
  }