@ibis-design/css 0.2.0 → 0.3.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 +17 -5
- package/dist/alchemy/alchemy-design.css +154 -0
- package/dist/alchemy/alchemy-design.scss +151 -0
- package/dist/alchemy/tailwind.preset.js +231 -0
- package/dist/ibis/ibis-design.css +40 -72
- package/dist/ibis/ibis-design.scss +40 -72
- package/dist/ibis/tailwind.preset.js +27 -65
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -20,7 +20,13 @@ The package ships two style sets. The default entry is **ibis**; use explicit pa
|
|
|
20
20
|
| `@ibis-design/css/alchemy-design.css` | Alchemy design tokens |
|
|
21
21
|
| `@ibis-design/css/ibis-design.scss` / `alchemy-design.scss` | SCSS variables for each brand |
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
**Tailwind presets** — Use the preset that matches the token CSS you load:
|
|
24
|
+
|
|
25
|
+
| Import | Description |
|
|
26
|
+
|--------|-------------|
|
|
27
|
+
| `@ibis-design/css/tailwind.preset` or `@ibis-design/css/preset` | IBIS preset (default) |
|
|
28
|
+
| `@ibis-design/css/ibis/tailwind.preset` | IBIS preset (explicit) |
|
|
29
|
+
| `@ibis-design/css/alchemy/tailwind.preset` | Alchemy preset |
|
|
24
30
|
|
|
25
31
|
### CSS variables
|
|
26
32
|
|
|
@@ -52,7 +58,9 @@ Use them in your own CSS:
|
|
|
52
58
|
|
|
53
59
|
### Tailwind preset
|
|
54
60
|
|
|
55
|
-
Use the preset so Tailwind utilities (e.g. `bg-primary-500`, `p-4`, `rounded-md`) map to the same token values.
|
|
61
|
+
Use the preset so Tailwind utilities (e.g. `bg-primary-500`, `p-4`, `rounded-md`) map to the same token values. Load the preset that matches the token CSS you use.
|
|
62
|
+
|
|
63
|
+
**Ibis:**
|
|
56
64
|
|
|
57
65
|
```js
|
|
58
66
|
/** @type {import('tailwindcss').Config} */
|
|
@@ -62,13 +70,13 @@ module.exports = {
|
|
|
62
70
|
};
|
|
63
71
|
```
|
|
64
72
|
|
|
65
|
-
|
|
73
|
+
**Alchemy:**
|
|
66
74
|
|
|
67
75
|
```js
|
|
68
|
-
presets: [require("@ibis-design/css/preset")],
|
|
76
|
+
presets: [require("@ibis-design/css/alchemy/tailwind.preset")],
|
|
69
77
|
```
|
|
70
78
|
|
|
71
|
-
Ensure the token CSS is loaded in your app (e.g. `@import "@ibis-design/css/ibis-design.css"`
|
|
79
|
+
Ensure the matching token CSS is loaded in your app (e.g. `@import "@ibis-design/css/ibis-design.css"` for ibis or `@import "@ibis-design/css/alchemy-design.css"` for alchemy) so that the `var(--...)` references resolve.
|
|
72
80
|
|
|
73
81
|
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
82
|
|
|
@@ -91,3 +99,7 @@ Do not edit the files in `dist/`; they are generated. To change tokens, edit the
|
|
|
91
99
|
## Token source
|
|
92
100
|
|
|
93
101
|
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.
|
|
102
|
+
|
|
103
|
+
## Fonts
|
|
104
|
+
|
|
105
|
+
The tokens reference font families (e.g. Inter, Metrisch, Beyond Infinity). This package does not bundle or load font files. To get the intended typography, load the fonts in your app (e.g. via Google Fonts, a CDN, or self-hosted assets) and ensure the font names match the token values.
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--color-primary-50: #eff6ff;
|
|
7
|
+
--color-primary-100: #daebff;
|
|
8
|
+
--color-primary-200: #bdddff;
|
|
9
|
+
--color-primary-300: #90c8ff;
|
|
10
|
+
--color-primary-400: #5ca9fe;
|
|
11
|
+
--color-primary-500: #3686fb;
|
|
12
|
+
--color-primary-600: #2066f0;
|
|
13
|
+
--color-primary-700: #1851dd;
|
|
14
|
+
--color-primary-800: #1a42b3;
|
|
15
|
+
--color-primary-900: #1b3c8d;
|
|
16
|
+
--color-primary-950: #152554;
|
|
17
|
+
--color-neutral-50: #f4f4f4;
|
|
18
|
+
--color-neutral-100: #dbdbdb;
|
|
19
|
+
--color-neutral-200: #dbdbdb;
|
|
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: #666666;
|
|
26
|
+
--color-neutral-900: #4d4d4d;
|
|
27
|
+
--color-neutral-950: #000000;
|
|
28
|
+
--color-white: #ffffff;
|
|
29
|
+
--color-black: #000000;
|
|
30
|
+
--color-system-success: #009a08; /** Positive / completed state */
|
|
31
|
+
--color-system-failure: #b70c00; /** Error / destructive state */
|
|
32
|
+
--color-system-attention: #fa8900; /** Warning / needs attention */
|
|
33
|
+
--color-brand-blue: #31498f;
|
|
34
|
+
--color-brand-yellow: #ffc60d;
|
|
35
|
+
--color-brand-green: #43b249;
|
|
36
|
+
--color-alchemy-neutral-yellow: #fffbf0;
|
|
37
|
+
--color-alchemy-neutral-blue: #f0f4ff;
|
|
38
|
+
--color-alchemy-neutral-green: #f0fff1;
|
|
39
|
+
--color-gradient-primary-start: #244197;
|
|
40
|
+
--color-gradient-primary-end: #090f20;
|
|
41
|
+
--color-gradient-brand-start: #feca1f;
|
|
42
|
+
--color-gradient-brand-middle: #3da042;
|
|
43
|
+
--color-gradient-brand-end: #2f4688;
|
|
44
|
+
--color-backgrounds-classic-light: #fafafa;
|
|
45
|
+
--color-backgrounds-classic-dark: #0d0d0d;
|
|
46
|
+
--color-backgrounds-cardbg-purple: #920075;
|
|
47
|
+
--color-backgrounds-cardbg-dark-purple: #522398;
|
|
48
|
+
--color-button-start: #244197;
|
|
49
|
+
--color-button-end: #090f20;
|
|
50
|
+
--spacing-0: 0;
|
|
51
|
+
--spacing-1: 0.25rem;
|
|
52
|
+
--spacing-2: 0.5rem;
|
|
53
|
+
--spacing-3: 0.75rem;
|
|
54
|
+
--spacing-4: 1rem;
|
|
55
|
+
--spacing-5: 1.25rem;
|
|
56
|
+
--spacing-6: 1.5rem;
|
|
57
|
+
--spacing-8: 2rem;
|
|
58
|
+
--spacing-10: 2.5rem;
|
|
59
|
+
--spacing-12: 3rem;
|
|
60
|
+
--spacing-16: 4rem;
|
|
61
|
+
--letter-spacing-tighter: -0.05em;
|
|
62
|
+
--letter-spacing-tight: -0.025em;
|
|
63
|
+
--letter-spacing-normal: 0;
|
|
64
|
+
--letter-spacing-wide: 0.025em;
|
|
65
|
+
--letter-spacing-wider: 0.05em;
|
|
66
|
+
--line-height-tight: 1.25;
|
|
67
|
+
--line-height-normal: 1.5;
|
|
68
|
+
--line-height-relaxed: 1.75;
|
|
69
|
+
--line-height-loose: 2;
|
|
70
|
+
--font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
|
|
71
|
+
--font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
|
|
72
|
+
--font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
|
|
73
|
+
--font-family-ui: 'Istok Web', Inter, system-ui, sans-serif; /** Alchemy UI accent (optional) */
|
|
74
|
+
--font-weight-thin: 100;
|
|
75
|
+
--font-weight-extralight: 200;
|
|
76
|
+
--font-weight-light: 300;
|
|
77
|
+
--font-weight-normal: 400;
|
|
78
|
+
--font-weight-medium: 500;
|
|
79
|
+
--font-weight-semibold: 600;
|
|
80
|
+
--font-weight-bold: 700;
|
|
81
|
+
--font-weight-extrabold: 800;
|
|
82
|
+
--font-weight-black: 900;
|
|
83
|
+
--font-size-normal-text-xs: 0.75rem;
|
|
84
|
+
--font-size-normal-text-sm: 0.875rem;
|
|
85
|
+
--font-size-normal-text-default: 1rem;
|
|
86
|
+
--font-size-normal-text-lg: 1.125rem;
|
|
87
|
+
--font-size-normal-text-xl: 1.25rem;
|
|
88
|
+
--font-size-marketing-text-sm: 1rem;
|
|
89
|
+
--font-size-marketing-text-default: 1.333rem;
|
|
90
|
+
--font-size-marketing-text-lg: 1.771rem;
|
|
91
|
+
--font-size-marketing-text-xl: 2.375rem;
|
|
92
|
+
--border-radius-none: 0;
|
|
93
|
+
--border-radius-sm: 0.25rem;
|
|
94
|
+
--border-radius-default: 0.375rem;
|
|
95
|
+
--border-radius-md: 0.5rem;
|
|
96
|
+
--border-radius-lg: 0.75rem;
|
|
97
|
+
--border-radius-full: 9999px;
|
|
98
|
+
--border-width-none: 0;
|
|
99
|
+
--border-width-thin: 1px;
|
|
100
|
+
--border-width-default: 2px;
|
|
101
|
+
--border-width-thick: 4px;
|
|
102
|
+
--shadow-none: none;
|
|
103
|
+
--shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
104
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
105
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
106
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
107
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
108
|
+
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
109
|
+
--logo-square-sm: 24px;
|
|
110
|
+
--logo-square-md: 32px;
|
|
111
|
+
--logo-square-lg: 40px;
|
|
112
|
+
--logo-square-xl: 48px;
|
|
113
|
+
--logo-square-main: 255px;
|
|
114
|
+
--icons-frame-circle-xs: 16px;
|
|
115
|
+
--icons-frame-circle-sm: 24px;
|
|
116
|
+
--icons-frame-circle-md: 32px;
|
|
117
|
+
--icons-frame-circle-lg: 48px;
|
|
118
|
+
--icons-frame-circle-xl: 56px;
|
|
119
|
+
--icons-size-xs: 12px;
|
|
120
|
+
--icons-size-sm: 18px;
|
|
121
|
+
--icons-size-md: 24px;
|
|
122
|
+
--icons-size-lg: 40px;
|
|
123
|
+
--icons-size-xl: 48px;
|
|
124
|
+
--z-index-base: 0;
|
|
125
|
+
--z-index-dropdown: 1000;
|
|
126
|
+
--z-index-sticky: 1100;
|
|
127
|
+
--z-index-overlay: 1200;
|
|
128
|
+
--z-index-modal: 1300;
|
|
129
|
+
--z-index-popover: 1400;
|
|
130
|
+
--z-index-tooltip: 1500;
|
|
131
|
+
--opacity-disabled: 0.5;
|
|
132
|
+
--opacity-muted: 0.75;
|
|
133
|
+
--opacity-subtle: 0.9;
|
|
134
|
+
--transition-duration-fast: 150ms;
|
|
135
|
+
--transition-duration-normal: 250ms;
|
|
136
|
+
--transition-duration-slow: 400ms;
|
|
137
|
+
--transition-timing-default: ease;
|
|
138
|
+
--transition-timing-in: ease-in;
|
|
139
|
+
--transition-timing-out: ease-out;
|
|
140
|
+
--transition-timing-in-out: ease-in-out;
|
|
141
|
+
--breakpoint-xs: 480px;
|
|
142
|
+
--breakpoint-sm: 640px;
|
|
143
|
+
--breakpoint-md: 768px;
|
|
144
|
+
--breakpoint-lg: 1024px;
|
|
145
|
+
--breakpoint-xl: 1280px;
|
|
146
|
+
--breakpoint-2xl: 1536px;
|
|
147
|
+
--blur-none: 0;
|
|
148
|
+
--blur-xs: 2px;
|
|
149
|
+
--blur-sm: 4px;
|
|
150
|
+
--blur-md: 6px;
|
|
151
|
+
--blur-lg: 8px;
|
|
152
|
+
--blur-xl: 12px;
|
|
153
|
+
--blur-2xl: 16px;
|
|
154
|
+
}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$color-primary-50: #eff6ff;
|
|
5
|
+
$color-primary-100: #daebff;
|
|
6
|
+
$color-primary-200: #bdddff;
|
|
7
|
+
$color-primary-300: #90c8ff;
|
|
8
|
+
$color-primary-400: #5ca9fe;
|
|
9
|
+
$color-primary-500: #3686fb;
|
|
10
|
+
$color-primary-600: #2066f0;
|
|
11
|
+
$color-primary-700: #1851dd;
|
|
12
|
+
$color-primary-800: #1a42b3;
|
|
13
|
+
$color-primary-900: #1b3c8d;
|
|
14
|
+
$color-primary-950: #152554;
|
|
15
|
+
$color-neutral-50: #f4f4f4;
|
|
16
|
+
$color-neutral-100: #dbdbdb;
|
|
17
|
+
$color-neutral-200: #dbdbdb;
|
|
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: #666666;
|
|
24
|
+
$color-neutral-900: #4d4d4d;
|
|
25
|
+
$color-neutral-950: #000000;
|
|
26
|
+
$color-white: #ffffff;
|
|
27
|
+
$color-black: #000000;
|
|
28
|
+
$color-system-success: #009a08; // Positive / completed state
|
|
29
|
+
$color-system-failure: #b70c00; // Error / destructive state
|
|
30
|
+
$color-system-attention: #fa8900; // Warning / needs attention
|
|
31
|
+
$color-brand-blue: #31498f;
|
|
32
|
+
$color-brand-yellow: #ffc60d;
|
|
33
|
+
$color-brand-green: #43b249;
|
|
34
|
+
$color-alchemy-neutral-yellow: #fffbf0;
|
|
35
|
+
$color-alchemy-neutral-blue: #f0f4ff;
|
|
36
|
+
$color-alchemy-neutral-green: #f0fff1;
|
|
37
|
+
$color-gradient-primary-start: #244197;
|
|
38
|
+
$color-gradient-primary-end: #090f20;
|
|
39
|
+
$color-gradient-brand-start: #feca1f;
|
|
40
|
+
$color-gradient-brand-middle: #3da042;
|
|
41
|
+
$color-gradient-brand-end: #2f4688;
|
|
42
|
+
$color-backgrounds-classic-light: #fafafa;
|
|
43
|
+
$color-backgrounds-classic-dark: #0d0d0d;
|
|
44
|
+
$color-backgrounds-cardbg-purple: #920075;
|
|
45
|
+
$color-backgrounds-cardbg-dark-purple: #522398;
|
|
46
|
+
$color-button-start: #244197;
|
|
47
|
+
$color-button-end: #090f20;
|
|
48
|
+
$spacing-0: 0;
|
|
49
|
+
$spacing-1: 0.25rem;
|
|
50
|
+
$spacing-2: 0.5rem;
|
|
51
|
+
$spacing-3: 0.75rem;
|
|
52
|
+
$spacing-4: 1rem;
|
|
53
|
+
$spacing-5: 1.25rem;
|
|
54
|
+
$spacing-6: 1.5rem;
|
|
55
|
+
$spacing-8: 2rem;
|
|
56
|
+
$spacing-10: 2.5rem;
|
|
57
|
+
$spacing-12: 3rem;
|
|
58
|
+
$spacing-16: 4rem;
|
|
59
|
+
$letter-spacing-tighter: -0.05em;
|
|
60
|
+
$letter-spacing-tight: -0.025em;
|
|
61
|
+
$letter-spacing-normal: 0;
|
|
62
|
+
$letter-spacing-wide: 0.025em;
|
|
63
|
+
$letter-spacing-wider: 0.05em;
|
|
64
|
+
$line-height-tight: 1.25;
|
|
65
|
+
$line-height-normal: 1.5;
|
|
66
|
+
$line-height-relaxed: 1.75;
|
|
67
|
+
$line-height-loose: 2;
|
|
68
|
+
$font-family-branding: 'Beyond Infinity', cursive; // Logo and brand display
|
|
69
|
+
$font-family-heading: Metrisch, Poppins, system-ui, sans-serif; // Headings and display text
|
|
70
|
+
$font-family-sans: Inter, Verdana, system-ui, sans-serif; // Body and UI text
|
|
71
|
+
$font-family-ui: 'Istok Web', Inter, system-ui, sans-serif; // Alchemy UI accent (optional)
|
|
72
|
+
$font-weight-thin: 100;
|
|
73
|
+
$font-weight-extralight: 200;
|
|
74
|
+
$font-weight-light: 300;
|
|
75
|
+
$font-weight-normal: 400;
|
|
76
|
+
$font-weight-medium: 500;
|
|
77
|
+
$font-weight-semibold: 600;
|
|
78
|
+
$font-weight-bold: 700;
|
|
79
|
+
$font-weight-extrabold: 800;
|
|
80
|
+
$font-weight-black: 900;
|
|
81
|
+
$font-size-normal-text-xs: 0.75rem;
|
|
82
|
+
$font-size-normal-text-sm: 0.875rem;
|
|
83
|
+
$font-size-normal-text-default: 1rem;
|
|
84
|
+
$font-size-normal-text-lg: 1.125rem;
|
|
85
|
+
$font-size-normal-text-xl: 1.25rem;
|
|
86
|
+
$font-size-marketing-text-sm: 1rem;
|
|
87
|
+
$font-size-marketing-text-default: 1.333rem;
|
|
88
|
+
$font-size-marketing-text-lg: 1.771rem;
|
|
89
|
+
$font-size-marketing-text-xl: 2.375rem;
|
|
90
|
+
$border-radius-none: 0;
|
|
91
|
+
$border-radius-sm: 0.25rem;
|
|
92
|
+
$border-radius-default: 0.375rem;
|
|
93
|
+
$border-radius-md: 0.5rem;
|
|
94
|
+
$border-radius-lg: 0.75rem;
|
|
95
|
+
$border-radius-full: 9999px;
|
|
96
|
+
$border-width-none: 0;
|
|
97
|
+
$border-width-thin: 1px;
|
|
98
|
+
$border-width-default: 2px;
|
|
99
|
+
$border-width-thick: 4px;
|
|
100
|
+
$shadow-none: none;
|
|
101
|
+
$shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
102
|
+
$shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
103
|
+
$shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
104
|
+
$shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
105
|
+
$shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
106
|
+
$shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
107
|
+
$logo-square-sm: 24px;
|
|
108
|
+
$logo-square-md: 32px;
|
|
109
|
+
$logo-square-lg: 40px;
|
|
110
|
+
$logo-square-xl: 48px;
|
|
111
|
+
$logo-square-main: 255px;
|
|
112
|
+
$icons-frame-circle-xs: 16px;
|
|
113
|
+
$icons-frame-circle-sm: 24px;
|
|
114
|
+
$icons-frame-circle-md: 32px;
|
|
115
|
+
$icons-frame-circle-lg: 48px;
|
|
116
|
+
$icons-frame-circle-xl: 56px;
|
|
117
|
+
$icons-size-xs: 12px;
|
|
118
|
+
$icons-size-sm: 18px;
|
|
119
|
+
$icons-size-md: 24px;
|
|
120
|
+
$icons-size-lg: 40px;
|
|
121
|
+
$icons-size-xl: 48px;
|
|
122
|
+
$z-index-base: 0;
|
|
123
|
+
$z-index-dropdown: 1000;
|
|
124
|
+
$z-index-sticky: 1100;
|
|
125
|
+
$z-index-overlay: 1200;
|
|
126
|
+
$z-index-modal: 1300;
|
|
127
|
+
$z-index-popover: 1400;
|
|
128
|
+
$z-index-tooltip: 1500;
|
|
129
|
+
$opacity-disabled: 0.5;
|
|
130
|
+
$opacity-muted: 0.75;
|
|
131
|
+
$opacity-subtle: 0.9;
|
|
132
|
+
$transition-duration-fast: 150ms;
|
|
133
|
+
$transition-duration-normal: 250ms;
|
|
134
|
+
$transition-duration-slow: 400ms;
|
|
135
|
+
$transition-timing-default: ease;
|
|
136
|
+
$transition-timing-in: ease-in;
|
|
137
|
+
$transition-timing-out: ease-out;
|
|
138
|
+
$transition-timing-in-out: ease-in-out;
|
|
139
|
+
$breakpoint-xs: 480px;
|
|
140
|
+
$breakpoint-sm: 640px;
|
|
141
|
+
$breakpoint-md: 768px;
|
|
142
|
+
$breakpoint-lg: 1024px;
|
|
143
|
+
$breakpoint-xl: 1280px;
|
|
144
|
+
$breakpoint-2xl: 1536px;
|
|
145
|
+
$blur-none: 0;
|
|
146
|
+
$blur-xs: 2px;
|
|
147
|
+
$blur-sm: 4px;
|
|
148
|
+
$blur-md: 6px;
|
|
149
|
+
$blur-lg: 8px;
|
|
150
|
+
$blur-xl: 12px;
|
|
151
|
+
$blur-2xl: 16px;
|
|
@@ -0,0 +1,231 @@
|
|
|
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
|
+
neutral: {
|
|
22
|
+
50: "var(--color-neutral-50)",
|
|
23
|
+
100: "var(--color-neutral-100)",
|
|
24
|
+
200: "var(--color-neutral-200)",
|
|
25
|
+
300: "var(--color-neutral-300)",
|
|
26
|
+
400: "var(--color-neutral-400)",
|
|
27
|
+
500: "var(--color-neutral-500)",
|
|
28
|
+
600: "var(--color-neutral-600)",
|
|
29
|
+
700: "var(--color-neutral-700)",
|
|
30
|
+
800: "var(--color-neutral-800)",
|
|
31
|
+
900: "var(--color-neutral-900)",
|
|
32
|
+
950: "var(--color-neutral-950)"
|
|
33
|
+
},
|
|
34
|
+
white: "var(--color-white)",
|
|
35
|
+
black: "var(--color-black)",
|
|
36
|
+
system: {
|
|
37
|
+
success: "var(--color-system-success)",
|
|
38
|
+
failure: "var(--color-system-failure)",
|
|
39
|
+
attention: "var(--color-system-attention)"
|
|
40
|
+
},
|
|
41
|
+
brand: {
|
|
42
|
+
blue: "var(--color-brand-blue)",
|
|
43
|
+
yellow: "var(--color-brand-yellow)",
|
|
44
|
+
green: "var(--color-brand-green)"
|
|
45
|
+
},
|
|
46
|
+
alchemyNeutral: {
|
|
47
|
+
yellow: "var(--color-alchemy-neutral-yellow)",
|
|
48
|
+
blue: "var(--color-alchemy-neutral-blue)",
|
|
49
|
+
green: "var(--color-alchemy-neutral-green)"
|
|
50
|
+
},
|
|
51
|
+
gradient: {
|
|
52
|
+
primary: {
|
|
53
|
+
start: "var(--color-gradient-primary-start)",
|
|
54
|
+
end: "var(--color-gradient-primary-end)"
|
|
55
|
+
},
|
|
56
|
+
brand: {
|
|
57
|
+
start: "var(--color-gradient-brand-start)",
|
|
58
|
+
middle: "var(--color-gradient-brand-middle)",
|
|
59
|
+
end: "var(--color-gradient-brand-end)"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
backgrounds: {
|
|
63
|
+
classic: {
|
|
64
|
+
light: "var(--color-backgrounds-classic-light)",
|
|
65
|
+
dark: "var(--color-backgrounds-classic-dark)"
|
|
66
|
+
},
|
|
67
|
+
cardbg: {
|
|
68
|
+
purple: "var(--color-backgrounds-cardbg-purple)",
|
|
69
|
+
darkPurple: "var(--color-backgrounds-cardbg-dark-purple)"
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
button: {
|
|
73
|
+
start: "var(--color-button-start)",
|
|
74
|
+
end: "var(--color-button-end)"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
spacing: {
|
|
78
|
+
0: "var(--spacing-0)",
|
|
79
|
+
1: "var(--spacing-1)",
|
|
80
|
+
2: "var(--spacing-2)",
|
|
81
|
+
3: "var(--spacing-3)",
|
|
82
|
+
4: "var(--spacing-4)",
|
|
83
|
+
5: "var(--spacing-5)",
|
|
84
|
+
6: "var(--spacing-6)",
|
|
85
|
+
8: "var(--spacing-8)",
|
|
86
|
+
10: "var(--spacing-10)",
|
|
87
|
+
12: "var(--spacing-12)",
|
|
88
|
+
16: "var(--spacing-16)"
|
|
89
|
+
},
|
|
90
|
+
letterSpacing: {
|
|
91
|
+
tighter: "var(--letter-spacing-tighter)",
|
|
92
|
+
tight: "var(--letter-spacing-tight)",
|
|
93
|
+
normal: "var(--letter-spacing-normal)",
|
|
94
|
+
wide: "var(--letter-spacing-wide)",
|
|
95
|
+
wider: "var(--letter-spacing-wider)"
|
|
96
|
+
},
|
|
97
|
+
lineHeight: {
|
|
98
|
+
tight: "var(--line-height-tight)",
|
|
99
|
+
normal: "var(--line-height-normal)",
|
|
100
|
+
relaxed: "var(--line-height-relaxed)",
|
|
101
|
+
loose: "var(--line-height-loose)"
|
|
102
|
+
},
|
|
103
|
+
fontFamily: {
|
|
104
|
+
branding: "var(--font-family-branding)",
|
|
105
|
+
heading: "var(--font-family-heading)",
|
|
106
|
+
sans: "var(--font-family-sans)",
|
|
107
|
+
ui: "var(--font-family-ui)"
|
|
108
|
+
},
|
|
109
|
+
fontWeight: {
|
|
110
|
+
thin: "var(--font-weight-thin)",
|
|
111
|
+
extralight: "var(--font-weight-extralight)",
|
|
112
|
+
light: "var(--font-weight-light)",
|
|
113
|
+
normal: "var(--font-weight-normal)",
|
|
114
|
+
medium: "var(--font-weight-medium)",
|
|
115
|
+
semibold: "var(--font-weight-semibold)",
|
|
116
|
+
bold: "var(--font-weight-bold)",
|
|
117
|
+
extrabold: "var(--font-weight-extrabold)",
|
|
118
|
+
black: "var(--font-weight-black)"
|
|
119
|
+
},
|
|
120
|
+
fontSize: {
|
|
121
|
+
normalText: {
|
|
122
|
+
xs: "var(--font-size-normal-text-xs)",
|
|
123
|
+
sm: "var(--font-size-normal-text-sm)",
|
|
124
|
+
DEFAULT: "var(--font-size-normal-text-default)",
|
|
125
|
+
lg: "var(--font-size-normal-text-lg)",
|
|
126
|
+
xl: "var(--font-size-normal-text-xl)"
|
|
127
|
+
},
|
|
128
|
+
marketingText: {
|
|
129
|
+
sm: "var(--font-size-marketing-text-sm)",
|
|
130
|
+
DEFAULT: "var(--font-size-marketing-text-default)",
|
|
131
|
+
lg: "var(--font-size-marketing-text-lg)",
|
|
132
|
+
xl: "var(--font-size-marketing-text-xl)"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
borderRadius: {
|
|
136
|
+
none: "var(--border-radius-none)",
|
|
137
|
+
sm: "var(--border-radius-sm)",
|
|
138
|
+
DEFAULT: "var(--border-radius-default)",
|
|
139
|
+
md: "var(--border-radius-md)",
|
|
140
|
+
lg: "var(--border-radius-lg)",
|
|
141
|
+
full: "var(--border-radius-full)"
|
|
142
|
+
},
|
|
143
|
+
borderWidth: {
|
|
144
|
+
none: "var(--border-width-none)",
|
|
145
|
+
thin: "var(--border-width-thin)",
|
|
146
|
+
DEFAULT: "var(--border-width-default)",
|
|
147
|
+
thick: "var(--border-width-thick)"
|
|
148
|
+
},
|
|
149
|
+
shadow: {
|
|
150
|
+
none: "var(--shadow-none)",
|
|
151
|
+
DEFAULT: "var(--shadow-default)",
|
|
152
|
+
md: "var(--shadow-md)",
|
|
153
|
+
lg: "var(--shadow-lg)",
|
|
154
|
+
xl: "var(--shadow-xl)",
|
|
155
|
+
"2xl": "var(--shadow-2xl)",
|
|
156
|
+
inner: "var(--shadow-inner)"
|
|
157
|
+
},
|
|
158
|
+
logo: {
|
|
159
|
+
square: {
|
|
160
|
+
sm: "var(--logo-square-sm)",
|
|
161
|
+
md: "var(--logo-square-md)",
|
|
162
|
+
lg: "var(--logo-square-lg)",
|
|
163
|
+
xl: "var(--logo-square-xl)",
|
|
164
|
+
main: "var(--logo-square-main)"
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
icons: {
|
|
168
|
+
frame: {
|
|
169
|
+
circle: {
|
|
170
|
+
xs: "var(--icons-frame-circle-xs)",
|
|
171
|
+
sm: "var(--icons-frame-circle-sm)",
|
|
172
|
+
md: "var(--icons-frame-circle-md)",
|
|
173
|
+
lg: "var(--icons-frame-circle-lg)",
|
|
174
|
+
xl: "var(--icons-frame-circle-xl)"
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
size: {
|
|
178
|
+
xs: "var(--icons-size-xs)",
|
|
179
|
+
sm: "var(--icons-size-sm)",
|
|
180
|
+
md: "var(--icons-size-md)",
|
|
181
|
+
lg: "var(--icons-size-lg)",
|
|
182
|
+
xl: "var(--icons-size-xl)"
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
zIndex: {
|
|
186
|
+
base: "var(--z-index-base)",
|
|
187
|
+
dropdown: "var(--z-index-dropdown)",
|
|
188
|
+
sticky: "var(--z-index-sticky)",
|
|
189
|
+
overlay: "var(--z-index-overlay)",
|
|
190
|
+
modal: "var(--z-index-modal)",
|
|
191
|
+
popover: "var(--z-index-popover)",
|
|
192
|
+
tooltip: "var(--z-index-tooltip)"
|
|
193
|
+
},
|
|
194
|
+
opacity: {
|
|
195
|
+
disabled: "var(--opacity-disabled)",
|
|
196
|
+
muted: "var(--opacity-muted)",
|
|
197
|
+
subtle: "var(--opacity-subtle)"
|
|
198
|
+
},
|
|
199
|
+
transition: {
|
|
200
|
+
duration: {
|
|
201
|
+
fast: "var(--transition-duration-fast)",
|
|
202
|
+
normal: "var(--transition-duration-normal)",
|
|
203
|
+
slow: "var(--transition-duration-slow)"
|
|
204
|
+
},
|
|
205
|
+
timing: {
|
|
206
|
+
DEFAULT: "var(--transition-timing-default)",
|
|
207
|
+
in: "var(--transition-timing-in)",
|
|
208
|
+
out: "var(--transition-timing-out)",
|
|
209
|
+
inOut: "var(--transition-timing-in-out)"
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
breakpoint: {
|
|
213
|
+
xs: "var(--breakpoint-xs)",
|
|
214
|
+
sm: "var(--breakpoint-sm)",
|
|
215
|
+
md: "var(--breakpoint-md)",
|
|
216
|
+
lg: "var(--breakpoint-lg)",
|
|
217
|
+
xl: "var(--breakpoint-xl)",
|
|
218
|
+
"2xl": "var(--breakpoint-2xl)"
|
|
219
|
+
},
|
|
220
|
+
blur: {
|
|
221
|
+
none: "var(--blur-none)",
|
|
222
|
+
xs: "var(--blur-xs)",
|
|
223
|
+
sm: "var(--blur-sm)",
|
|
224
|
+
md: "var(--blur-md)",
|
|
225
|
+
lg: "var(--blur-lg)",
|
|
226
|
+
xl: "var(--blur-xl)",
|
|
227
|
+
"2xl": "var(--blur-2xl)"
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
},
|
|
231
|
+
}
|
|
@@ -3,77 +3,44 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--color-primary-50: #
|
|
7
|
-
--color-primary-100: #
|
|
8
|
-
--color-primary-200: #
|
|
9
|
-
--color-primary-300: #
|
|
10
|
-
--color-primary-400: #
|
|
11
|
-
--color-primary-500: #
|
|
12
|
-
--color-primary-600: #
|
|
13
|
-
--color-primary-700: #
|
|
14
|
-
--color-primary-800: #
|
|
15
|
-
--color-primary-900: #
|
|
16
|
-
--color-primary-950: #
|
|
17
|
-
--color-
|
|
18
|
-
--color-
|
|
19
|
-
--color-
|
|
20
|
-
--color-
|
|
21
|
-
--color-
|
|
22
|
-
--color-
|
|
23
|
-
--color-
|
|
24
|
-
--color-
|
|
25
|
-
--color-
|
|
26
|
-
--color-
|
|
27
|
-
--color-
|
|
28
|
-
--color-
|
|
29
|
-
--color-
|
|
30
|
-
--color-
|
|
31
|
-
--color-
|
|
32
|
-
--color-
|
|
33
|
-
--color-
|
|
34
|
-
--color-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
--color-
|
|
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-purple-50: #f5f3ff;
|
|
7
|
+
--color-primary-purple-100: #edeafd;
|
|
8
|
+
--color-primary-purple-200: #ded7fd;
|
|
9
|
+
--color-primary-purple-300: #c7b8fa;
|
|
10
|
+
--color-primary-purple-400: #aa8ff6;
|
|
11
|
+
--color-primary-purple-500: #713bc1;
|
|
12
|
+
--color-primary-purple-600: #8040e7;
|
|
13
|
+
--color-primary-purple-700: #702ed3;
|
|
14
|
+
--color-primary-purple-800: #5d26b1;
|
|
15
|
+
--color-primary-purple-900: #522398;
|
|
16
|
+
--color-primary-purple-950: #301362;
|
|
17
|
+
--color-primary-pink-50: #fff1fb;
|
|
18
|
+
--color-primary-pink-100: #ffc1f2;
|
|
19
|
+
--color-primary-pink-200: #ffc3f2;
|
|
20
|
+
--color-primary-pink-300: #ff94e4;
|
|
21
|
+
--color-primary-pink-400: #ff54d4;
|
|
22
|
+
--color-primary-pink-500: #f83fd3;
|
|
23
|
+
--color-primary-pink-600: #ff00d6;
|
|
24
|
+
--color-primary-pink-700: #d900b6;
|
|
25
|
+
--color-primary-pink-800: #b10092;
|
|
26
|
+
--color-primary-pink-900: #920075;
|
|
27
|
+
--color-primary-pink-950: #630050;
|
|
28
|
+
--color-neutral-50: #f4f4f4;
|
|
29
|
+
--color-neutral-100: #dbdbdb;
|
|
30
|
+
--color-neutral-200: #dbdbdb;
|
|
31
|
+
--color-neutral-300: #c1c1c1;
|
|
32
|
+
--color-neutral-400: #a8a8a8;
|
|
33
|
+
--color-neutral-500: #6d6d6d;
|
|
34
|
+
--color-neutral-600: #5d5d5d;
|
|
35
|
+
--color-neutral-700: #4f4f4f;
|
|
36
|
+
--color-neutral-800: #666666;
|
|
37
|
+
--color-neutral-900: #4d4d4d;
|
|
38
|
+
--color-neutral-950: #000000;
|
|
72
39
|
--color-white: #ffffff;
|
|
73
40
|
--color-black: #000000;
|
|
74
|
-
--color-system-success: #009a08;
|
|
75
|
-
--color-system-failure: #b70c00;
|
|
76
|
-
--color-system-attention: #fa8900;
|
|
41
|
+
--color-system-success: #009a08; /** Positive / completed state */
|
|
42
|
+
--color-system-failure: #b70c00; /** Error / destructive state */
|
|
43
|
+
--color-system-attention: #fa8900; /** Warning / needs attention */
|
|
77
44
|
--color-gradient-purple-pink-start: #713bc1;
|
|
78
45
|
--color-gradient-purple-pink-end: #c519a3;
|
|
79
46
|
--color-gradient-pink-purple-start: #c519a3;
|
|
@@ -111,8 +78,9 @@
|
|
|
111
78
|
--line-height-normal: 1.5;
|
|
112
79
|
--line-height-relaxed: 1.75;
|
|
113
80
|
--line-height-loose: 2;
|
|
114
|
-
--font-family-branding: 'Beyond Infinity', cursive;
|
|
115
|
-
--font-family-
|
|
81
|
+
--font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
|
|
82
|
+
--font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
|
|
83
|
+
--font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
|
|
116
84
|
--font-weight-thin: 100;
|
|
117
85
|
--font-weight-extralight: 200;
|
|
118
86
|
--font-weight-light: 300;
|
|
@@ -127,7 +95,7 @@
|
|
|
127
95
|
--font-size-normal-text-default: 1rem;
|
|
128
96
|
--font-size-normal-text-lg: 1.125rem;
|
|
129
97
|
--font-size-normal-text-xl: 1.25rem;
|
|
130
|
-
--font-size-marketing-text-sm:
|
|
98
|
+
--font-size-marketing-text-sm: 1rem;
|
|
131
99
|
--font-size-marketing-text-default: 1.333rem;
|
|
132
100
|
--font-size-marketing-text-lg: 1.771rem;
|
|
133
101
|
--font-size-marketing-text-xl: 2.375rem;
|
|
@@ -1,77 +1,44 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly, this file was auto-generated.
|
|
3
3
|
|
|
4
|
-
$color-primary-50: #
|
|
5
|
-
$color-primary-100: #
|
|
6
|
-
$color-primary-200: #
|
|
7
|
-
$color-primary-300: #
|
|
8
|
-
$color-primary-400: #
|
|
9
|
-
$color-primary-500: #
|
|
10
|
-
$color-primary-600: #
|
|
11
|
-
$color-primary-700: #
|
|
12
|
-
$color-primary-800: #
|
|
13
|
-
$color-primary-900: #
|
|
14
|
-
$color-primary-950: #
|
|
15
|
-
$color-
|
|
16
|
-
$color-
|
|
17
|
-
$color-
|
|
18
|
-
$color-
|
|
19
|
-
$color-
|
|
20
|
-
$color-
|
|
21
|
-
$color-
|
|
22
|
-
$color-
|
|
23
|
-
$color-
|
|
24
|
-
$color-
|
|
25
|
-
$color-
|
|
26
|
-
$color-
|
|
27
|
-
$color-
|
|
28
|
-
$color-
|
|
29
|
-
$color-
|
|
30
|
-
$color-
|
|
31
|
-
$color-
|
|
32
|
-
$color-
|
|
33
|
-
$color-
|
|
34
|
-
$color-
|
|
35
|
-
$color-
|
|
36
|
-
$color-
|
|
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-purple-50: #f5f3ff;
|
|
5
|
+
$color-primary-purple-100: #edeafd;
|
|
6
|
+
$color-primary-purple-200: #ded7fd;
|
|
7
|
+
$color-primary-purple-300: #c7b8fa;
|
|
8
|
+
$color-primary-purple-400: #aa8ff6;
|
|
9
|
+
$color-primary-purple-500: #713bc1;
|
|
10
|
+
$color-primary-purple-600: #8040e7;
|
|
11
|
+
$color-primary-purple-700: #702ed3;
|
|
12
|
+
$color-primary-purple-800: #5d26b1;
|
|
13
|
+
$color-primary-purple-900: #522398;
|
|
14
|
+
$color-primary-purple-950: #301362;
|
|
15
|
+
$color-primary-pink-50: #fff1fb;
|
|
16
|
+
$color-primary-pink-100: #ffc1f2;
|
|
17
|
+
$color-primary-pink-200: #ffc3f2;
|
|
18
|
+
$color-primary-pink-300: #ff94e4;
|
|
19
|
+
$color-primary-pink-400: #ff54d4;
|
|
20
|
+
$color-primary-pink-500: #f83fd3;
|
|
21
|
+
$color-primary-pink-600: #ff00d6;
|
|
22
|
+
$color-primary-pink-700: #d900b6;
|
|
23
|
+
$color-primary-pink-800: #b10092;
|
|
24
|
+
$color-primary-pink-900: #920075;
|
|
25
|
+
$color-primary-pink-950: #630050;
|
|
26
|
+
$color-neutral-50: #f4f4f4;
|
|
27
|
+
$color-neutral-100: #dbdbdb;
|
|
28
|
+
$color-neutral-200: #dbdbdb;
|
|
29
|
+
$color-neutral-300: #c1c1c1;
|
|
30
|
+
$color-neutral-400: #a8a8a8;
|
|
31
|
+
$color-neutral-500: #6d6d6d;
|
|
32
|
+
$color-neutral-600: #5d5d5d;
|
|
33
|
+
$color-neutral-700: #4f4f4f;
|
|
34
|
+
$color-neutral-800: #666666;
|
|
35
|
+
$color-neutral-900: #4d4d4d;
|
|
36
|
+
$color-neutral-950: #000000;
|
|
70
37
|
$color-white: #ffffff;
|
|
71
38
|
$color-black: #000000;
|
|
72
|
-
$color-system-success: #009a08;
|
|
73
|
-
$color-system-failure: #b70c00;
|
|
74
|
-
$color-system-attention: #fa8900;
|
|
39
|
+
$color-system-success: #009a08; // Positive / completed state
|
|
40
|
+
$color-system-failure: #b70c00; // Error / destructive state
|
|
41
|
+
$color-system-attention: #fa8900; // Warning / needs attention
|
|
75
42
|
$color-gradient-purple-pink-start: #713bc1;
|
|
76
43
|
$color-gradient-purple-pink-end: #c519a3;
|
|
77
44
|
$color-gradient-pink-purple-start: #c519a3;
|
|
@@ -109,8 +76,9 @@ $line-height-tight: 1.25;
|
|
|
109
76
|
$line-height-normal: 1.5;
|
|
110
77
|
$line-height-relaxed: 1.75;
|
|
111
78
|
$line-height-loose: 2;
|
|
112
|
-
$font-family-branding: 'Beyond Infinity', cursive;
|
|
113
|
-
$font-family-
|
|
79
|
+
$font-family-branding: 'Beyond Infinity', cursive; // Logo and brand display
|
|
80
|
+
$font-family-heading: Metrisch, Poppins, system-ui, sans-serif; // Headings and display text
|
|
81
|
+
$font-family-sans: Inter, Verdana, system-ui, sans-serif; // Body and UI text
|
|
114
82
|
$font-weight-thin: 100;
|
|
115
83
|
$font-weight-extralight: 200;
|
|
116
84
|
$font-weight-light: 300;
|
|
@@ -125,7 +93,7 @@ $font-size-normal-text-sm: 0.875rem;
|
|
|
125
93
|
$font-size-normal-text-default: 1rem;
|
|
126
94
|
$font-size-normal-text-lg: 1.125rem;
|
|
127
95
|
$font-size-normal-text-xl: 1.25rem;
|
|
128
|
-
$font-size-marketing-text-sm:
|
|
96
|
+
$font-size-marketing-text-sm: 1rem;
|
|
129
97
|
$font-size-marketing-text-default: 1.333rem;
|
|
130
98
|
$font-size-marketing-text-lg: 1.771rem;
|
|
131
99
|
$font-size-marketing-text-xl: 2.375rem;
|
|
@@ -6,43 +6,32 @@ module.exports = {
|
|
|
6
6
|
extend: {
|
|
7
7
|
color: {
|
|
8
8
|
primary: {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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)"
|
|
9
|
+
purple: {
|
|
10
|
+
50: "var(--color-primary-purple-50)",
|
|
11
|
+
100: "var(--color-primary-purple-100)",
|
|
12
|
+
200: "var(--color-primary-purple-200)",
|
|
13
|
+
300: "var(--color-primary-purple-300)",
|
|
14
|
+
400: "var(--color-primary-purple-400)",
|
|
15
|
+
500: "var(--color-primary-purple-500)",
|
|
16
|
+
600: "var(--color-primary-purple-600)",
|
|
17
|
+
700: "var(--color-primary-purple-700)",
|
|
18
|
+
800: "var(--color-primary-purple-800)",
|
|
19
|
+
900: "var(--color-primary-purple-900)",
|
|
20
|
+
950: "var(--color-primary-purple-950)"
|
|
21
|
+
},
|
|
22
|
+
pink: {
|
|
23
|
+
50: "var(--color-primary-pink-50)",
|
|
24
|
+
100: "var(--color-primary-pink-100)",
|
|
25
|
+
200: "var(--color-primary-pink-200)",
|
|
26
|
+
300: "var(--color-primary-pink-300)",
|
|
27
|
+
400: "var(--color-primary-pink-400)",
|
|
28
|
+
500: "var(--color-primary-pink-500)",
|
|
29
|
+
600: "var(--color-primary-pink-600)",
|
|
30
|
+
700: "var(--color-primary-pink-700)",
|
|
31
|
+
800: "var(--color-primary-pink-800)",
|
|
32
|
+
900: "var(--color-primary-pink-900)",
|
|
33
|
+
950: "var(--color-primary-pink-950)"
|
|
34
|
+
}
|
|
46
35
|
},
|
|
47
36
|
neutral: {
|
|
48
37
|
50: "var(--color-neutral-50)",
|
|
@@ -57,34 +46,6 @@ module.exports = {
|
|
|
57
46
|
900: "var(--color-neutral-900)",
|
|
58
47
|
950: "var(--color-neutral-950)"
|
|
59
48
|
},
|
|
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
49
|
white: "var(--color-white)",
|
|
89
50
|
black: "var(--color-black)",
|
|
90
51
|
system: {
|
|
@@ -160,6 +121,7 @@ module.exports = {
|
|
|
160
121
|
},
|
|
161
122
|
fontFamily: {
|
|
162
123
|
branding: "var(--font-family-branding)",
|
|
124
|
+
heading: "var(--font-family-heading)",
|
|
163
125
|
sans: "var(--font-family-sans)"
|
|
164
126
|
},
|
|
165
127
|
fontWeight: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ibis-design/css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
"./alchemy-design.css": "./dist/alchemy/alchemy-design.css",
|
|
11
11
|
"./alchemy-design.scss": "./dist/alchemy/alchemy-design.scss",
|
|
12
12
|
"./tailwind.preset": "./dist/ibis/tailwind.preset.js",
|
|
13
|
-
"./preset": "./dist/ibis/tailwind.preset.js"
|
|
13
|
+
"./preset": "./dist/ibis/tailwind.preset.js",
|
|
14
|
+
"./ibis/tailwind.preset": "./dist/ibis/tailwind.preset.js",
|
|
15
|
+
"./alchemy/tailwind.preset": "./dist/alchemy/tailwind.preset.js"
|
|
14
16
|
},
|
|
15
17
|
"files": [
|
|
16
18
|
"dist"
|