@ibis-design/css 0.2.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.
- package/README.md +93 -0
- package/dist/ibis/ibis-design.css +196 -0
- package/dist/ibis/ibis-design.scss +193 -0
- package/dist/ibis/tailwind.preset.js +287 -0
- package/dist/ibis/tokens.css +196 -0
- package/dist/ibis/tokens.scss +193 -0
- package/package.json +26 -0
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# @ibis-design/css
|
|
2
|
+
|
|
3
|
+
Design tokens as CSS custom properties, optional base CSS, and a Tailwind v4–compatible preset for the IBIS design system. Framework-agnostic; usable from any stack.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ibis-design/css
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Brands / style sets
|
|
14
|
+
|
|
15
|
+
The package ships two style sets. The default entry is **ibis**; use explicit paths for **alchemy**:
|
|
16
|
+
|
|
17
|
+
| Import | Description |
|
|
18
|
+
|--------|-------------|
|
|
19
|
+
| `@ibis-design/css` or `@ibis-design/css/ibis-design.css` | IBIS design tokens (default) |
|
|
20
|
+
| `@ibis-design/css/alchemy-design.css` | Alchemy design tokens |
|
|
21
|
+
| `@ibis-design/css/ibis-design.scss` / `alchemy-design.scss` | SCSS variables for each brand |
|
|
22
|
+
|
|
23
|
+
The Tailwind preset export (`@ibis-design/css/tailwind.preset` or `@ibis-design/css/preset`) points at the IBIS preset. Use the preset that matches the token CSS you load.
|
|
24
|
+
|
|
25
|
+
### CSS variables
|
|
26
|
+
|
|
27
|
+
Import the generated tokens in your CSS (or entry point) so that `:root` is populated with design tokens:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "@ibis-design/css";
|
|
31
|
+
/* or */
|
|
32
|
+
@import "@ibis-design/css/ibis-design.css";
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
All tokens are exposed as custom properties, for example:
|
|
36
|
+
|
|
37
|
+
- `--color-primary-500`, `--color-success-text`, …
|
|
38
|
+
- `--spacing-1`, `--spacing-4`, …
|
|
39
|
+
- `--font-sans`, `--font-size-base`, …
|
|
40
|
+
- `--radius-sm`, `--radius-lg`, …
|
|
41
|
+
|
|
42
|
+
Use them in your own CSS:
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
.card {
|
|
46
|
+
background: var(--color-primary-50);
|
|
47
|
+
padding: var(--spacing-4);
|
|
48
|
+
border-radius: var(--radius-md);
|
|
49
|
+
font-family: var(--font-sans);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Tailwind preset
|
|
54
|
+
|
|
55
|
+
Use the preset so Tailwind utilities (e.g. `bg-primary-500`, `p-4`, `rounded-md`) map to the same token values. In your Tailwind config:
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
/** @type {import('tailwindcss').Config} */
|
|
59
|
+
module.exports = {
|
|
60
|
+
presets: [require("@ibis-design/css/tailwind.preset")],
|
|
61
|
+
content: ["./src/**/*.{html,js,ts,jsx,tsx,svelte,vue}"],
|
|
62
|
+
};
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Or with the `preset` export:
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
presets: [require("@ibis-design/css/preset")],
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Ensure the token CSS is loaded in your app (e.g. `@import "@ibis-design/css/ibis-design.css"` in your main CSS) so that the `var(--...)` references resolve.
|
|
72
|
+
|
|
73
|
+
Tailwind v4 may use a different config or CSS-based theme; the preset shape is compatible with Tailwind v3. For v4, use the same preset via `@config` if supported, or import the tokens CSS and extend your theme with the same variable names.
|
|
74
|
+
|
|
75
|
+
## Build
|
|
76
|
+
|
|
77
|
+
From the package directory (or from the repo root with `npm run build:css`):
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm run build
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
This runs Style Dictionary for each token set in `src/tokens/` (e.g. `ibis.json`, `alchemy.json`) and writes per brand under `dist/<brand>/`:
|
|
84
|
+
|
|
85
|
+
- `dist/<brand>/<brand>-design.css` — `:root` block with all CSS custom properties
|
|
86
|
+
- `dist/<brand>/<brand>-design.scss` — SCSS variables
|
|
87
|
+
- `dist/<brand>/tailwind.preset.js` — Tailwind theme extend object that references those variables
|
|
88
|
+
|
|
89
|
+
Do not edit the files in `dist/`; they are generated. To change tokens, edit the JSON files in `src/tokens/` and run `npm run build` again.
|
|
90
|
+
|
|
91
|
+
## Token source
|
|
92
|
+
|
|
93
|
+
Tokens are defined in DTCG format in `src/tokens/` (e.g. `ibis.json`, `alchemy.json`). The build is driven by `src/scripts/build.ts` and `src/config/style-dictionary.config.ts`. Style Dictionary reads the token JSON and emits CSS, SCSS, and the Tailwind preset. Other packages (e.g. Svelte, React Native) can consume the generated CSS or preset for consistent values.
|
|
@@ -0,0 +1,196 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,193 @@
|
|
|
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;
|
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
/** @type {import('tailwindcss').Config} */
|
|
2
|
+
module.exports = {
|
|
3
|
+
content: ["./src/**/*.{ts,tsx}"],
|
|
4
|
+
darkMode: "class",
|
|
5
|
+
theme: {
|
|
6
|
+
extend: {
|
|
7
|
+
color: {
|
|
8
|
+
primary: {
|
|
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)"
|
|
20
|
+
},
|
|
21
|
+
secondaryPurple: {
|
|
22
|
+
50: "var(--color-secondary-purple-50)",
|
|
23
|
+
100: "var(--color-secondary-purple-100)",
|
|
24
|
+
200: "var(--color-secondary-purple-200)",
|
|
25
|
+
300: "var(--color-secondary-purple-300)",
|
|
26
|
+
400: "var(--color-secondary-purple-400)",
|
|
27
|
+
500: "var(--color-secondary-purple-500)",
|
|
28
|
+
600: "var(--color-secondary-purple-600)",
|
|
29
|
+
700: "var(--color-secondary-purple-700)",
|
|
30
|
+
800: "var(--color-secondary-purple-800)",
|
|
31
|
+
900: "var(--color-secondary-purple-900)",
|
|
32
|
+
950: "var(--color-secondary-purple-950)"
|
|
33
|
+
},
|
|
34
|
+
secondaryPink: {
|
|
35
|
+
50: "var(--color-secondary-pink-50)",
|
|
36
|
+
100: "var(--color-secondary-pink-100)",
|
|
37
|
+
200: "var(--color-secondary-pink-200)",
|
|
38
|
+
300: "var(--color-secondary-pink-300)",
|
|
39
|
+
400: "var(--color-secondary-pink-400)",
|
|
40
|
+
500: "var(--color-secondary-pink-500)",
|
|
41
|
+
600: "var(--color-secondary-pink-600)",
|
|
42
|
+
700: "var(--color-secondary-pink-700)",
|
|
43
|
+
800: "var(--color-secondary-pink-800)",
|
|
44
|
+
900: "var(--color-secondary-pink-900)",
|
|
45
|
+
950: "var(--color-secondary-pink-950)"
|
|
46
|
+
},
|
|
47
|
+
neutral: {
|
|
48
|
+
50: "var(--color-neutral-50)",
|
|
49
|
+
100: "var(--color-neutral-100)",
|
|
50
|
+
200: "var(--color-neutral-200)",
|
|
51
|
+
300: "var(--color-neutral-300)",
|
|
52
|
+
400: "var(--color-neutral-400)",
|
|
53
|
+
500: "var(--color-neutral-500)",
|
|
54
|
+
600: "var(--color-neutral-600)",
|
|
55
|
+
700: "var(--color-neutral-700)",
|
|
56
|
+
800: "var(--color-neutral-800)",
|
|
57
|
+
900: "var(--color-neutral-900)",
|
|
58
|
+
950: "var(--color-neutral-950)"
|
|
59
|
+
},
|
|
60
|
+
neutralSecondary: {
|
|
61
|
+
secGrey: {
|
|
62
|
+
50: "var(--color-neutral-secondary-sec-grey-50)",
|
|
63
|
+
100: "var(--color-neutral-secondary-sec-grey-100)",
|
|
64
|
+
200: "var(--color-neutral-secondary-sec-grey-200)",
|
|
65
|
+
300: "var(--color-neutral-secondary-sec-grey-300)",
|
|
66
|
+
400: "var(--color-neutral-secondary-sec-grey-400)",
|
|
67
|
+
500: "var(--color-neutral-secondary-sec-grey-500)",
|
|
68
|
+
600: "var(--color-neutral-secondary-sec-grey-600)",
|
|
69
|
+
700: "var(--color-neutral-secondary-sec-grey-700)",
|
|
70
|
+
800: "var(--color-neutral-secondary-sec-grey-800)",
|
|
71
|
+
900: "var(--color-neutral-secondary-sec-grey-900)",
|
|
72
|
+
950: "var(--color-neutral-secondary-sec-grey-950)"
|
|
73
|
+
},
|
|
74
|
+
secBlack: {
|
|
75
|
+
50: "var(--color-neutral-secondary-sec-black-50)",
|
|
76
|
+
100: "var(--color-neutral-secondary-sec-black-100)",
|
|
77
|
+
200: "var(--color-neutral-secondary-sec-black-200)",
|
|
78
|
+
300: "var(--color-neutral-secondary-sec-black-300)",
|
|
79
|
+
400: "var(--color-neutral-secondary-sec-black-400)",
|
|
80
|
+
500: "var(--color-neutral-secondary-sec-black-500)",
|
|
81
|
+
600: "var(--color-neutral-secondary-sec-black-600)",
|
|
82
|
+
700: "var(--color-neutral-secondary-sec-black-700)",
|
|
83
|
+
800: "var(--color-neutral-secondary-sec-black-800)",
|
|
84
|
+
900: "var(--color-neutral-secondary-sec-black-900)",
|
|
85
|
+
950: "var(--color-neutral-secondary-sec-black-950)"
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
white: "var(--color-white)",
|
|
89
|
+
black: "var(--color-black)",
|
|
90
|
+
system: {
|
|
91
|
+
success: "var(--color-system-success)",
|
|
92
|
+
failure: "var(--color-system-failure)",
|
|
93
|
+
attention: "var(--color-system-attention)"
|
|
94
|
+
},
|
|
95
|
+
gradient: {
|
|
96
|
+
purplePink: {
|
|
97
|
+
start: "var(--color-gradient-purple-pink-start)",
|
|
98
|
+
end: "var(--color-gradient-purple-pink-end)"
|
|
99
|
+
},
|
|
100
|
+
pinkPurple: {
|
|
101
|
+
start: "var(--color-gradient-pink-purple-start)",
|
|
102
|
+
end: "var(--color-gradient-pink-purple-end)"
|
|
103
|
+
},
|
|
104
|
+
darkPurple: {
|
|
105
|
+
start: "var(--color-gradient-dark-purple-start)",
|
|
106
|
+
end: "var(--color-gradient-dark-purple-end)"
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
backgrounds: {
|
|
110
|
+
cardBg: {
|
|
111
|
+
darkPurple: "var(--color-backgrounds-card-bg-dark-purple)",
|
|
112
|
+
purple: "var(--color-backgrounds-card-bg-purple)"
|
|
113
|
+
},
|
|
114
|
+
classicBg: {
|
|
115
|
+
light: "var(--color-backgrounds-classic-bg-light)",
|
|
116
|
+
dark: "var(--color-backgrounds-classic-bg-dark)"
|
|
117
|
+
},
|
|
118
|
+
themedBg: {
|
|
119
|
+
ibisWhite: "var(--color-backgrounds-themed-bg-ibis-white)",
|
|
120
|
+
ibisDark: "var(--color-backgrounds-themed-bg-ibis-dark)"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
buttons: {
|
|
124
|
+
simple: "var(--color-buttons-simple)",
|
|
125
|
+
darkGradient: {
|
|
126
|
+
start: "var(--color-buttons-dark-gradient-start)",
|
|
127
|
+
end: "var(--color-buttons-dark-gradient-end)"
|
|
128
|
+
},
|
|
129
|
+
gradient: {
|
|
130
|
+
start: "var(--color-buttons-gradient-start)",
|
|
131
|
+
end: "var(--color-buttons-gradient-end)"
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
spacing: {
|
|
136
|
+
0: "var(--spacing-0)",
|
|
137
|
+
1: "var(--spacing-1)",
|
|
138
|
+
2: "var(--spacing-2)",
|
|
139
|
+
3: "var(--spacing-3)",
|
|
140
|
+
4: "var(--spacing-4)",
|
|
141
|
+
5: "var(--spacing-5)",
|
|
142
|
+
6: "var(--spacing-6)",
|
|
143
|
+
8: "var(--spacing-8)",
|
|
144
|
+
10: "var(--spacing-10)",
|
|
145
|
+
12: "var(--spacing-12)",
|
|
146
|
+
16: "var(--spacing-16)"
|
|
147
|
+
},
|
|
148
|
+
letterSpacing: {
|
|
149
|
+
tighter: "var(--letter-spacing-tighter)",
|
|
150
|
+
tight: "var(--letter-spacing-tight)",
|
|
151
|
+
normal: "var(--letter-spacing-normal)",
|
|
152
|
+
wide: "var(--letter-spacing-wide)",
|
|
153
|
+
wider: "var(--letter-spacing-wider)"
|
|
154
|
+
},
|
|
155
|
+
lineHeight: {
|
|
156
|
+
tight: "var(--line-height-tight)",
|
|
157
|
+
normal: "var(--line-height-normal)",
|
|
158
|
+
relaxed: "var(--line-height-relaxed)",
|
|
159
|
+
loose: "var(--line-height-loose)"
|
|
160
|
+
},
|
|
161
|
+
fontFamily: {
|
|
162
|
+
branding: "var(--font-family-branding)",
|
|
163
|
+
sans: "var(--font-family-sans)"
|
|
164
|
+
},
|
|
165
|
+
fontWeight: {
|
|
166
|
+
thin: "var(--font-weight-thin)",
|
|
167
|
+
extralight: "var(--font-weight-extralight)",
|
|
168
|
+
light: "var(--font-weight-light)",
|
|
169
|
+
normal: "var(--font-weight-normal)",
|
|
170
|
+
medium: "var(--font-weight-medium)",
|
|
171
|
+
semibold: "var(--font-weight-semibold)",
|
|
172
|
+
bold: "var(--font-weight-bold)",
|
|
173
|
+
extrabold: "var(--font-weight-extrabold)",
|
|
174
|
+
black: "var(--font-weight-black)"
|
|
175
|
+
},
|
|
176
|
+
fontSize: {
|
|
177
|
+
normalText: {
|
|
178
|
+
xs: "var(--font-size-normal-text-xs)",
|
|
179
|
+
sm: "var(--font-size-normal-text-sm)",
|
|
180
|
+
DEFAULT: "var(--font-size-normal-text-default)",
|
|
181
|
+
lg: "var(--font-size-normal-text-lg)",
|
|
182
|
+
xl: "var(--font-size-normal-text-xl)"
|
|
183
|
+
},
|
|
184
|
+
marketingText: {
|
|
185
|
+
sm: "var(--font-size-marketing-text-sm)",
|
|
186
|
+
DEFAULT: "var(--font-size-marketing-text-default)",
|
|
187
|
+
lg: "var(--font-size-marketing-text-lg)",
|
|
188
|
+
xl: "var(--font-size-marketing-text-xl)"
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
borderRadius: {
|
|
192
|
+
none: "var(--border-radius-none)",
|
|
193
|
+
sm: "var(--border-radius-sm)",
|
|
194
|
+
DEFAULT: "var(--border-radius-default)",
|
|
195
|
+
md: "var(--border-radius-md)",
|
|
196
|
+
lg: "var(--border-radius-lg)",
|
|
197
|
+
full: "var(--border-radius-full)"
|
|
198
|
+
},
|
|
199
|
+
borderWidth: {
|
|
200
|
+
none: "var(--border-width-none)",
|
|
201
|
+
thin: "var(--border-width-thin)",
|
|
202
|
+
DEFAULT: "var(--border-width-default)",
|
|
203
|
+
thick: "var(--border-width-thick)"
|
|
204
|
+
},
|
|
205
|
+
shadow: {
|
|
206
|
+
none: "var(--shadow-none)",
|
|
207
|
+
DEFAULT: "var(--shadow-default)",
|
|
208
|
+
md: "var(--shadow-md)",
|
|
209
|
+
lg: "var(--shadow-lg)",
|
|
210
|
+
xl: "var(--shadow-xl)",
|
|
211
|
+
"2xl": "var(--shadow-2xl)",
|
|
212
|
+
inner: "var(--shadow-inner)"
|
|
213
|
+
},
|
|
214
|
+
logo: {
|
|
215
|
+
square: {
|
|
216
|
+
sm: "var(--logo-square-sm)",
|
|
217
|
+
md: "var(--logo-square-md)",
|
|
218
|
+
lg: "var(--logo-square-lg)",
|
|
219
|
+
xl: "var(--logo-square-xl)",
|
|
220
|
+
main: "var(--logo-square-main)"
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
icons: {
|
|
224
|
+
frame: {
|
|
225
|
+
circle: {
|
|
226
|
+
xs: "var(--icons-frame-circle-xs)",
|
|
227
|
+
sm: "var(--icons-frame-circle-sm)",
|
|
228
|
+
md: "var(--icons-frame-circle-md)",
|
|
229
|
+
lg: "var(--icons-frame-circle-lg)",
|
|
230
|
+
xl: "var(--icons-frame-circle-xl)"
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
size: {
|
|
234
|
+
xs: "var(--icons-size-xs)",
|
|
235
|
+
sm: "var(--icons-size-sm)",
|
|
236
|
+
md: "var(--icons-size-md)",
|
|
237
|
+
lg: "var(--icons-size-lg)",
|
|
238
|
+
xl: "var(--icons-size-xl)"
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
zIndex: {
|
|
242
|
+
base: "var(--z-index-base)",
|
|
243
|
+
dropdown: "var(--z-index-dropdown)",
|
|
244
|
+
sticky: "var(--z-index-sticky)",
|
|
245
|
+
overlay: "var(--z-index-overlay)",
|
|
246
|
+
modal: "var(--z-index-modal)",
|
|
247
|
+
popover: "var(--z-index-popover)",
|
|
248
|
+
tooltip: "var(--z-index-tooltip)"
|
|
249
|
+
},
|
|
250
|
+
opacity: {
|
|
251
|
+
disabled: "var(--opacity-disabled)",
|
|
252
|
+
muted: "var(--opacity-muted)",
|
|
253
|
+
subtle: "var(--opacity-subtle)"
|
|
254
|
+
},
|
|
255
|
+
transition: {
|
|
256
|
+
duration: {
|
|
257
|
+
fast: "var(--transition-duration-fast)",
|
|
258
|
+
normal: "var(--transition-duration-normal)",
|
|
259
|
+
slow: "var(--transition-duration-slow)"
|
|
260
|
+
},
|
|
261
|
+
timing: {
|
|
262
|
+
DEFAULT: "var(--transition-timing-default)",
|
|
263
|
+
in: "var(--transition-timing-in)",
|
|
264
|
+
out: "var(--transition-timing-out)",
|
|
265
|
+
inOut: "var(--transition-timing-in-out)"
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
breakpoint: {
|
|
269
|
+
xs: "var(--breakpoint-xs)",
|
|
270
|
+
sm: "var(--breakpoint-sm)",
|
|
271
|
+
md: "var(--breakpoint-md)",
|
|
272
|
+
lg: "var(--breakpoint-lg)",
|
|
273
|
+
xl: "var(--breakpoint-xl)",
|
|
274
|
+
"2xl": "var(--breakpoint-2xl)"
|
|
275
|
+
},
|
|
276
|
+
blur: {
|
|
277
|
+
none: "var(--blur-none)",
|
|
278
|
+
xs: "var(--blur-xs)",
|
|
279
|
+
sm: "var(--blur-sm)",
|
|
280
|
+
md: "var(--blur-md)",
|
|
281
|
+
lg: "var(--blur-lg)",
|
|
282
|
+
xl: "var(--blur-xl)",
|
|
283
|
+
"2xl": "var(--blur-2xl)"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
},
|
|
287
|
+
}
|
|
@@ -0,0 +1,196 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,193 @@
|
|
|
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;
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ibis-design/css",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./dist/ibis/ibis-design.css",
|
|
8
|
+
"./ibis-design.css": "./dist/ibis/ibis-design.css",
|
|
9
|
+
"./ibis-design.scss": "./dist/ibis/ibis-design.scss",
|
|
10
|
+
"./alchemy-design.css": "./dist/alchemy/alchemy-design.css",
|
|
11
|
+
"./alchemy-design.scss": "./dist/alchemy/alchemy-design.scss",
|
|
12
|
+
"./tailwind.preset": "./dist/ibis/tailwind.preset.js",
|
|
13
|
+
"./preset": "./dist/ibis/tailwind.preset.js"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "node --experimental-strip-types src/scripts/build.ts",
|
|
20
|
+
"prepublishOnly": "npm run build"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"sd-tailwindcss-transformer": "^2.2.1",
|
|
24
|
+
"style-dictionary": "^5.3.3"
|
|
25
|
+
}
|
|
26
|
+
}
|