@ibis-design/css 0.5.0 → 0.7.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 (32) hide show
  1. package/README.md +90 -53
  2. package/dist/components/banner.css +155 -0
  3. package/dist/components/button.css +179 -0
  4. package/dist/components/checkbox.css +103 -0
  5. package/dist/components/chips.css +76 -0
  6. package/dist/components/dropdown.css +105 -0
  7. package/dist/components/dropdownButton.css +81 -0
  8. package/dist/components/pillTab.css +59 -0
  9. package/dist/components/radio.css +108 -0
  10. package/dist/components/switch.css +68 -0
  11. package/dist/components/textInput.css +152 -0
  12. package/dist/components/textarea.css +91 -0
  13. package/dist/components/textlink.css +149 -0
  14. package/dist/components/tipIndicator.css +79 -0
  15. package/dist/components/toaster.css +129 -0
  16. package/dist/components/tooltip.css +0 -0
  17. package/dist/design-tokens.css +503 -0
  18. package/dist/tailwind.preset.js +5 -0
  19. package/dist/tailwind.theme.js +310 -0
  20. package/dist/tokens/alc-dark.json +1 -0
  21. package/dist/tokens/alc-light.json +1 -0
  22. package/dist/tokens/ib-dark.json +1 -0
  23. package/dist/tokens/ib-light.json +1 -0
  24. package/package.json +15 -12
  25. package/dist/alchemy/alchemy-design.css +0 -154
  26. package/dist/alchemy/alchemy-design.scss +0 -151
  27. package/dist/alchemy/tailwind.preset.js +0 -231
  28. package/dist/ibis/ibis-design.css +0 -261
  29. package/dist/ibis/ibis-design.scss +0 -258
  30. package/dist/ibis/tailwind.preset.js +0 -410
  31. package/dist/ibis/tokens.css +0 -196
  32. package/dist/ibis/tokens.scss +0 -193
package/dist/ibis/tokens.css DELETED
@@ -1,196 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
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;
72
- --color-white: #ffffff;
73
- --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;
94
- --spacing-0: 0;
95
- --spacing-1: 0.25rem;
96
- --spacing-2: 0.5rem;
97
- --spacing-3: 0.75rem;
98
- --spacing-4: 1rem;
99
- --spacing-5: 1.25rem;
100
- --spacing-6: 1.5rem;
101
- --spacing-8: 2rem;
102
- --spacing-10: 2.5rem;
103
- --spacing-12: 3rem;
104
- --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;
116
- --font-weight-thin: 100;
117
- --font-weight-extralight: 200;
118
- --font-weight-light: 300;
119
- --font-weight-normal: 400;
120
- --font-weight-medium: 500;
121
- --font-weight-semibold: 600;
122
- --font-weight-bold: 700;
123
- --font-weight-extrabold: 800;
124
- --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;
134
- --border-radius-none: 0;
135
- --border-radius-sm: 0.25rem;
136
- --border-radius-default: 0.375rem;
137
- --border-radius-md: 0.5rem;
138
- --border-radius-lg: 0.75rem;
139
- --border-radius-full: 9999px;
140
- --border-width-none: 0;
141
- --border-width-thin: 1px;
142
- --border-width-default: 2px;
143
- --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);
151
- --logo-square-sm: 24px;
152
- --logo-square-md: 32px;
153
- --logo-square-lg: 40px;
154
- --logo-square-xl: 48px;
155
- --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;
166
- --z-index-base: 0;
167
- --z-index-dropdown: 1000;
168
- --z-index-sticky: 1100;
169
- --z-index-overlay: 1200;
170
- --z-index-modal: 1300;
171
- --z-index-popover: 1400;
172
- --z-index-tooltip: 1500;
173
- --opacity-disabled: 0.5;
174
- --opacity-muted: 0.75;
175
- --opacity-subtle: 0.9;
176
- --transition-duration-fast: 150ms;
177
- --transition-duration-normal: 250ms;
178
- --transition-duration-slow: 400ms;
179
- --transition-timing-default: ease;
180
- --transition-timing-in: ease-in;
181
- --transition-timing-out: ease-out;
182
- --transition-timing-in-out: ease-in-out;
183
- --breakpoint-xs: 480px;
184
- --breakpoint-sm: 640px;
185
- --breakpoint-md: 768px;
186
- --breakpoint-lg: 1024px;
187
- --breakpoint-xl: 1280px;
188
- --breakpoint-2xl: 1536px;
189
- --blur-none: 0;
190
- --blur-xs: 2px;
191
- --blur-sm: 4px;
192
- --blur-md: 6px;
193
- --blur-lg: 8px;
194
- --blur-xl: 12px;
195
- --blur-2xl: 16px;
196
- }
package/dist/ibis/tokens.scss DELETED
@@ -1,193 +0,0 @@
1
-
2
- // Do not edit directly, this file was auto-generated.
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;
70
- $color-white: #ffffff;
71
- $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;
92
- $spacing-0: 0;
93
- $spacing-1: 0.25rem;
94
- $spacing-2: 0.5rem;
95
- $spacing-3: 0.75rem;
96
- $spacing-4: 1rem;
97
- $spacing-5: 1.25rem;
98
- $spacing-6: 1.5rem;
99
- $spacing-8: 2rem;
100
- $spacing-10: 2.5rem;
101
- $spacing-12: 3rem;
102
- $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;
114
- $font-weight-thin: 100;
115
- $font-weight-extralight: 200;
116
- $font-weight-light: 300;
117
- $font-weight-normal: 400;
118
- $font-weight-medium: 500;
119
- $font-weight-semibold: 600;
120
- $font-weight-bold: 700;
121
- $font-weight-extrabold: 800;
122
- $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;
132
- $border-radius-none: 0;
133
- $border-radius-sm: 0.25rem;
134
- $border-radius-default: 0.375rem;
135
- $border-radius-md: 0.5rem;
136
- $border-radius-lg: 0.75rem;
137
- $border-radius-full: 9999px;
138
- $border-width-none: 0;
139
- $border-width-thin: 1px;
140
- $border-width-default: 2px;
141
- $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);
149
- $logo-square-sm: 24px;
150
- $logo-square-md: 32px;
151
- $logo-square-lg: 40px;
152
- $logo-square-xl: 48px;
153
- $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;
164
- $z-index-base: 0;
165
- $z-index-dropdown: 1000;
166
- $z-index-sticky: 1100;
167
- $z-index-overlay: 1200;
168
- $z-index-modal: 1300;
169
- $z-index-popover: 1400;
170
- $z-index-tooltip: 1500;
171
- $opacity-disabled: 0.5;
172
- $opacity-muted: 0.75;
173
- $opacity-subtle: 0.9;
174
- $transition-duration-fast: 150ms;
175
- $transition-duration-normal: 250ms;
176
- $transition-duration-slow: 400ms;
177
- $transition-timing-default: ease;
178
- $transition-timing-in: ease-in;
179
- $transition-timing-out: ease-out;
180
- $transition-timing-in-out: ease-in-out;
181
- $breakpoint-xs: 480px;
182
- $breakpoint-sm: 640px;
183
- $breakpoint-md: 768px;
184
- $breakpoint-lg: 1024px;
185
- $breakpoint-xl: 1280px;
186
- $breakpoint-2xl: 1536px;
187
- $blur-none: 0;
188
- $blur-xs: 2px;
189
- $blur-sm: 4px;
190
- $blur-md: 6px;
191
- $blur-lg: 8px;
192
- $blur-xl: 12px;
193
- $blur-2xl: 16px;