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