@ivao/atmosphere-react 2.1.0 → 3.0.0-next.1
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 +13 -25
- package/dist/atmosphere-react.js +5629 -5124
- package/dist/atmosphere-react.js.map +1 -1
- package/dist/react-components.d.ts +23 -8
- package/dist/styles/index.css +2 -3
- package/dist/styles/theme.css +207 -0
- package/package.json +18 -15
- package/src/styles/colors.css +0 -98
- package/src/styles/index.css +0 -109
- package/tailwind.preset.ts +0 -238
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
@import '@ivao/atmosphere-brand/theme.css';
|
|
2
|
+
@import 'tw-animate-css';
|
|
3
|
+
|
|
4
|
+
@plugin 'tailwindcss-radix';
|
|
5
|
+
@source '../atmosphere-react.js';
|
|
6
|
+
|
|
7
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
8
|
+
|
|
9
|
+
@theme inline {
|
|
10
|
+
--breakpoint-xs: 25rem;
|
|
11
|
+
|
|
12
|
+
--color-body: var(--body);
|
|
13
|
+
--color-border: var(--border);
|
|
14
|
+
--color-input: var(--input);
|
|
15
|
+
--color-ring: var(--ring);
|
|
16
|
+
--color-background: var(--background);
|
|
17
|
+
--color-foreground: var(--foreground);
|
|
18
|
+
--color-primary: var(--primary);
|
|
19
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
20
|
+
--color-secondary: var(--secondary);
|
|
21
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
22
|
+
--color-destructive: var(--destructive);
|
|
23
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
24
|
+
--color-muted: var(--muted);
|
|
25
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
26
|
+
--color-accent: var(--accent);
|
|
27
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
28
|
+
--color-popover: var(--popover);
|
|
29
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
30
|
+
--color-card: var(--card);
|
|
31
|
+
--color-card-foreground: var(--card-foreground);
|
|
32
|
+
|
|
33
|
+
--radius-lg: var(--radius);
|
|
34
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
35
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
36
|
+
|
|
37
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
38
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
39
|
+
|
|
40
|
+
@keyframes accordion-down {
|
|
41
|
+
from {
|
|
42
|
+
height: 0;
|
|
43
|
+
}
|
|
44
|
+
to {
|
|
45
|
+
height: var(--radix-accordion-content-height);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@keyframes accordion-up {
|
|
50
|
+
from {
|
|
51
|
+
height: var(--radix-accordion-content-height);
|
|
52
|
+
}
|
|
53
|
+
to {
|
|
54
|
+
height: 0;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@utility container {
|
|
60
|
+
margin-inline: auto;
|
|
61
|
+
padding-inline: 2rem;
|
|
62
|
+
|
|
63
|
+
@media (width >= 96rem) {
|
|
64
|
+
max-width: 87.5rem;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@layer base {
|
|
69
|
+
:root {
|
|
70
|
+
--body: #fff;
|
|
71
|
+
|
|
72
|
+
--background: var(--ivao-color-fuselage-50);
|
|
73
|
+
--foreground: var(--ivao-color-fuselage-800);
|
|
74
|
+
|
|
75
|
+
--card: var(--ivao-color-fuselage-100);
|
|
76
|
+
--card-foreground: var(--ivao-color-fuselage-800);
|
|
77
|
+
|
|
78
|
+
--popover: var(--ivao-color-fuselage-50);
|
|
79
|
+
--popover-foreground: var(--ivao-color-fuselage-800);
|
|
80
|
+
|
|
81
|
+
--primary: var(--ivao-color-atmos-700);
|
|
82
|
+
--primary-foreground: var(--ivao-color-atmos-50);
|
|
83
|
+
|
|
84
|
+
--secondary: var(--ivao-color-fuselage-100);
|
|
85
|
+
--secondary-foreground: var(--ivao-color-fuselage-800);
|
|
86
|
+
|
|
87
|
+
--muted: var(--ivao-color-fuselage-200);
|
|
88
|
+
--muted-foreground: var(--ivao-color-fuselage-500);
|
|
89
|
+
|
|
90
|
+
--accent: var(--ivao-color-fuselage-250);
|
|
91
|
+
--accent-foreground: var(--ivao-color-fuselage-500);
|
|
92
|
+
|
|
93
|
+
--destructive: var(--ivao-color-semantic-red-600);
|
|
94
|
+
--destructive-foreground: var(--ivao-color-semantic-red-50);
|
|
95
|
+
|
|
96
|
+
--border: var(--ivao-color-fuselage-150);
|
|
97
|
+
--input: var(--ivao-color-fuselage-150);
|
|
98
|
+
--ring: var(--ivao-color-fuselage-200);
|
|
99
|
+
|
|
100
|
+
--radius: 0.6rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.dark {
|
|
104
|
+
--body: var(--ivao-color-fuselage-950);
|
|
105
|
+
|
|
106
|
+
--background: var(--ivao-color-fuselage-900);
|
|
107
|
+
--foreground: var(--ivao-color-fuselage-100);
|
|
108
|
+
|
|
109
|
+
--card: var(--ivao-color-fuselage-900);
|
|
110
|
+
--card-foreground: var(--ivao-color-fuselage-200);
|
|
111
|
+
|
|
112
|
+
--popover: var(--ivao-color-fuselage-900);
|
|
113
|
+
--popover-foreground: var(--ivao-color-fuselage-200);
|
|
114
|
+
|
|
115
|
+
--primary: var(--ivao-color-fuselage-50);
|
|
116
|
+
--primary-foreground: var(--ivao-color-fuselage-800);
|
|
117
|
+
|
|
118
|
+
--secondary: var(--ivao-color-fuselage-800);
|
|
119
|
+
--secondary-foreground: var(--ivao-color-fuselage-100);
|
|
120
|
+
|
|
121
|
+
--muted: var(--ivao-color-fuselage-700);
|
|
122
|
+
--muted-foreground: var(--ivao-color-fuselage-500);
|
|
123
|
+
|
|
124
|
+
--accent: var(--ivao-color-fuselage-700);
|
|
125
|
+
--accent-foreground: var(--ivao-color-fuselage-300);
|
|
126
|
+
|
|
127
|
+
--destructive: var(--ivao-color-semantic-red-600);
|
|
128
|
+
--destructive-foreground: var(--ivao-color-semantic-red-50);
|
|
129
|
+
|
|
130
|
+
--border: var(--ivao-color-fuselage-700);
|
|
131
|
+
--input: var(--ivao-color-fuselage-900);
|
|
132
|
+
--ring: var(--ivao-color-fuselage-800);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
body {
|
|
136
|
+
background-color: var(--body);
|
|
137
|
+
color: var(--foreground);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
h1 {
|
|
141
|
+
color: var(--ivao-color-fuselage-800);
|
|
142
|
+
font-size: 2.25rem;
|
|
143
|
+
font-weight: 700;
|
|
144
|
+
line-height: 2.5rem;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
h2,
|
|
148
|
+
h3,
|
|
149
|
+
h4,
|
|
150
|
+
h5,
|
|
151
|
+
h6 {
|
|
152
|
+
color: var(--ivao-color-fuselage-400);
|
|
153
|
+
font-weight: 600;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
h2 {
|
|
157
|
+
font-size: 1.875rem;
|
|
158
|
+
line-height: 2.25rem;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
h3 {
|
|
162
|
+
font-size: 1.5rem;
|
|
163
|
+
line-height: 2rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
h4 {
|
|
167
|
+
font-size: 1.25rem;
|
|
168
|
+
line-height: 1.75rem;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
h5 {
|
|
172
|
+
font-size: 1.125rem;
|
|
173
|
+
line-height: 1.75rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
h6 {
|
|
177
|
+
font-size: 1rem;
|
|
178
|
+
line-height: 1.5rem;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.dark h1 {
|
|
182
|
+
color: var(--ivao-color-fuselage-50);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.dark h2,
|
|
186
|
+
.dark h3,
|
|
187
|
+
.dark h4,
|
|
188
|
+
.dark h5,
|
|
189
|
+
.dark h6 {
|
|
190
|
+
color: var(--ivao-color-fuselage-300);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.border,
|
|
194
|
+
.border-color-default {
|
|
195
|
+
border-color: var(--ivao-color-fuselage-150);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.dark .border,
|
|
199
|
+
.dark .border-color-default {
|
|
200
|
+
border-color: var(--ivao-color-fuselage-700);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
button:not(:disabled),
|
|
204
|
+
[role='button']:not(:disabled) {
|
|
205
|
+
cursor: pointer;
|
|
206
|
+
}
|
|
207
|
+
}
|
package/package.json
CHANGED
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ivao/atmosphere-react",
|
|
3
3
|
"description": "React component library for the IVAO Atmosphere design system.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "3.0.0-next.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/atmosphere-react.js",
|
|
7
7
|
"types": "./dist/react-components.d.ts",
|
|
8
8
|
"style": "./dist/styles/index.css",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/react-components.d.ts",
|
|
12
|
+
"import": "./dist/atmosphere-react.js"
|
|
13
|
+
},
|
|
14
|
+
"./styles.css": "./dist/styles/index.css",
|
|
15
|
+
"./theme.css": "./dist/styles/theme.css"
|
|
16
|
+
},
|
|
9
17
|
"files": [
|
|
10
|
-
"
|
|
11
|
-
"dist",
|
|
12
|
-
"src/styles/colors.css",
|
|
13
|
-
"src/styles/index.css"
|
|
18
|
+
"dist"
|
|
14
19
|
],
|
|
15
20
|
"repository": {
|
|
16
21
|
"type": "git",
|
|
@@ -80,9 +85,10 @@
|
|
|
80
85
|
"date-fns": "4.4.0",
|
|
81
86
|
"embla-carousel-react": "8.6.0",
|
|
82
87
|
"lucide-react": "^1.27.0",
|
|
83
|
-
"tailwind-merge": "
|
|
84
|
-
"tailwindcss-
|
|
85
|
-
"
|
|
88
|
+
"tailwind-merge": "3.6.0",
|
|
89
|
+
"tailwindcss-radix": "4.0.2",
|
|
90
|
+
"tw-animate-css": "1.4.0",
|
|
91
|
+
"@ivao/atmosphere-brand": "2.0.0-next.0"
|
|
86
92
|
},
|
|
87
93
|
"devDependencies": {
|
|
88
94
|
"@ianvs/prettier-plugin-sort-imports": "4.7.1",
|
|
@@ -94,21 +100,19 @@
|
|
|
94
100
|
"@storybook/addon-themes": "10.5.5",
|
|
95
101
|
"@storybook/builder-vite": "10.5.5",
|
|
96
102
|
"@storybook/react-vite": "10.5.5",
|
|
103
|
+
"@tailwindcss/cli": "4.3.3",
|
|
104
|
+
"@tailwindcss/vite": "4.3.3",
|
|
97
105
|
"@types/node": "22.18.7",
|
|
98
106
|
"@types/react": "19.2.17",
|
|
99
107
|
"@types/react-dom": "19.2.3",
|
|
100
108
|
"@vitejs/plugin-react": "6.0.4",
|
|
101
|
-
"autoprefixer": "10.5.4",
|
|
102
109
|
"eslint": "10.8.0",
|
|
103
110
|
"eslint-plugin-storybook": "10.5.5",
|
|
104
|
-
"postcss": "8.5.23",
|
|
105
111
|
"prettier": "3.9.6",
|
|
106
112
|
"prettier-plugin-tailwindcss": "0.8.1",
|
|
107
113
|
"rollup-plugin-analyzer": "4.0.0",
|
|
108
114
|
"storybook": "10.5.5",
|
|
109
|
-
"tailwindcss": "3.
|
|
110
|
-
"tailwindcss-radix": "3.0.5",
|
|
111
|
-
"ts-node": "10.9.2",
|
|
115
|
+
"tailwindcss": "4.3.3",
|
|
112
116
|
"typescript": "5.9.2",
|
|
113
117
|
"unplugin-dts": "^1.0.3",
|
|
114
118
|
"vite": "8.1.5"
|
|
@@ -122,8 +126,7 @@
|
|
|
122
126
|
},
|
|
123
127
|
"scripts": {
|
|
124
128
|
"dev": "vite --config vite.build.config.ts",
|
|
125
|
-
"build": "tsc && vite build --config vite.build.config.ts && tailwindcss -i ./src/styles/index.css -o ./dist/styles/index.css --minify",
|
|
126
|
-
"build:color-css": "node --loader ts-node/esm generate-colors-css.ts",
|
|
129
|
+
"build": "tsc && vite build --config vite.build.config.ts && tailwindcss -i ./src/styles/index.css -o ./dist/styles/index.css --minify && node scripts/copy-style-assets.mjs",
|
|
127
130
|
"lint": "eslint . --cache --report-unused-disable-directives --max-warnings 0",
|
|
128
131
|
"lint:ci": "eslint . --report-unused-disable-directives --max-warnings 0",
|
|
129
132
|
"lint-fix": "eslint . --cache --fix --report-unused-disable-directives --max-warnings 0",
|
package/src/styles/colors.css
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
@tailwind base;
|
|
2
|
-
|
|
3
|
-
@layer base {
|
|
4
|
-
:root {
|
|
5
|
-
--atmos-50: 182 197 249; /* #B6C5F9 */
|
|
6
|
-
--atmos-100: 164 182 247; /* #A4B6F7 */
|
|
7
|
-
--atmos-200: 126 152 244; /* #7E98F4 */
|
|
8
|
-
--atmos-300: 88 122 241; /* #587AF1 */
|
|
9
|
-
--atmos-400: 51 92 238; /* #335CEE */
|
|
10
|
-
--atmos-500: 19 66 228; /* #1342E4 */
|
|
11
|
-
--atmos-600: 16 55 191; /* #1037BF */
|
|
12
|
-
--atmos-700: 13 44 153; /* #0D2C99 */
|
|
13
|
-
--atmos-800: 9 29 101; /* #091D65 */
|
|
14
|
-
--atmos-900: 4 14 50; /* #040E32 */
|
|
15
|
-
--atmos: 13 44 153; /* #0D2C99 */
|
|
16
|
-
--ocean-50: 215 221 241; /* #D7DDF1 */
|
|
17
|
-
--ocean-100: 200 208 236; /* #C8D0EC */
|
|
18
|
-
--ocean-200: 170 182 225; /* #AAB6E1 */
|
|
19
|
-
--ocean-300: 140 156 215; /* #8C9CD7 */
|
|
20
|
-
--ocean-400: 109 131 204; /* #6D83CC */
|
|
21
|
-
--ocean-500: 79 105 194; /* #4F69C2 */
|
|
22
|
-
--ocean-600: 60 85 172; /* #3C55AC */
|
|
23
|
-
--ocean-700: 45 64 130; /* #2D4082 */
|
|
24
|
-
--ocean-800: 31 44 89; /* #1F2C59 */
|
|
25
|
-
--ocean-900: 16 23 47; /* #10172F */
|
|
26
|
-
--ocean: 60 85 172; /* #3C55AC */
|
|
27
|
-
--fuselage-50: 249 250 255; /* #f9faff */
|
|
28
|
-
--fuselage-100: 238 239 245; /* #EEEFF5 */
|
|
29
|
-
--fuselage-150: 224 225 236; /* #e0e1ec */
|
|
30
|
-
--fuselage-200: 210 211 224; /* #d2d3e0 */
|
|
31
|
-
--fuselage-250: 186 187 204; /* #babbcc */
|
|
32
|
-
--fuselage-300: 167 168 187; /* #a7a8bb */
|
|
33
|
-
--fuselage-400: 139 140 169; /* #8b8ca9 */
|
|
34
|
-
--fuselage-450: 116 117 152; /* #747598 */
|
|
35
|
-
--fuselage-500: 96 98 130; /* #606282 */
|
|
36
|
-
--fuselage-550: 79 80 107; /* #4f506b */
|
|
37
|
-
--fuselage-600: 61 63 84; /* #3d3f54 */
|
|
38
|
-
--fuselage-700: 44 45 60; /* #2c2d3c */
|
|
39
|
-
--fuselage-800: 33 33 46; /* #21212e */
|
|
40
|
-
--fuselage-900: 25 26 35; /* #191a23 */
|
|
41
|
-
--fuselage-950: 18 19 27; /* #12131B */
|
|
42
|
-
--semantic-red-50: 251 218 218; /* #FBDADA */
|
|
43
|
-
--semantic-red-100: 249 199 199; /* #F9C7C7 */
|
|
44
|
-
--semantic-red-200: 245 162 162; /* #F5A2A2 */
|
|
45
|
-
--semantic-red-300: 241 126 126; /* #F17E7E */
|
|
46
|
-
--semantic-red-400: 237 89 89; /* #ED5959 */
|
|
47
|
-
--semantic-red-500: 233 52 52; /* #E93434 */
|
|
48
|
-
--semantic-red-600: 207 22 22; /* #CF1616 */
|
|
49
|
-
--semantic-red-700: 156 17 17; /* #9C1111 */
|
|
50
|
-
--semantic-red-800: 105 11 11; /* #690B0B */
|
|
51
|
-
--semantic-red-900: 55 6 6; /* #370606 */
|
|
52
|
-
--semantic-red: 233 52 52; /* #E93434 */
|
|
53
|
-
--semantic-green-50: 188 239 206; /* #BCEFCE */
|
|
54
|
-
--semantic-green-100: 172 236 193; /* #ACECC1 */
|
|
55
|
-
--semantic-green-200: 138 228 169; /* #8AE4A9 */
|
|
56
|
-
--semantic-green-300: 105 220 145; /* #69DC91 */
|
|
57
|
-
--semantic-green-400: 72 213 120; /* #48D578 */
|
|
58
|
-
--semantic-green-500: 46 198 98; /* #2EC662 */
|
|
59
|
-
--semantic-green-600: 35 152 75; /* #23984B */
|
|
60
|
-
--semantic-green-700: 25 107 53; /* #196B35 */
|
|
61
|
-
--semantic-green-800: 14 61 30; /* #0E3D1E */
|
|
62
|
-
--semantic-green-900: 4 16 8; /* #041008 */
|
|
63
|
-
--semantic-green: 46 198 98; /* #2EC662 */
|
|
64
|
-
--semantic-yellow-50: 254 247 223; /* #FEF7DF */
|
|
65
|
-
--semantic-yellow-100: 254 242 203; /* #FEF2CB */
|
|
66
|
-
--semantic-yellow-200: 252 233 163; /* #FCE9A3 */
|
|
67
|
-
--semantic-yellow-300: 251 223 123; /* #FBDF7B */
|
|
68
|
-
--semantic-yellow-400: 250 214 84; /* #FAD654 */
|
|
69
|
-
--semantic-yellow-500: 249 204 44; /* #F9CC2C */
|
|
70
|
-
--semantic-yellow-600: 230 181 7; /* #E6B507 */
|
|
71
|
-
--semantic-yellow-700: 176 138 5; /* #B08A05 */
|
|
72
|
-
--semantic-yellow-800: 121 95 3; /* #795F03 */
|
|
73
|
-
--semantic-yellow-900: 67 52 2; /* #433402 */
|
|
74
|
-
--semantic-yellow: 249 204 44; /* #F9CC2C */
|
|
75
|
-
--semantic-blue-50: 250 251 253; /* #FAFBFD */
|
|
76
|
-
--semantic-blue-100: 237 242 250; /* #EDF2FA */
|
|
77
|
-
--semantic-blue-200: 219 229 244; /* #DBE5F4 */
|
|
78
|
-
--semantic-blue-300: 188 207 234; /* #BCCFEA */
|
|
79
|
-
--semantic-blue-400: 157 184 224; /* #9DB8E0 */
|
|
80
|
-
--semantic-blue-500: 126 162 214; /* #7EA2D6 */
|
|
81
|
-
--semantic-blue-600: 83 131 200; /* #5383C8 */
|
|
82
|
-
--semantic-blue-700: 55 103 173; /* #3767AD */
|
|
83
|
-
--semantic-blue-800: 41 78 130; /* #294E82 */
|
|
84
|
-
--semantic-blue-900: 28 52 88; /* #1C3458 */
|
|
85
|
-
--semantic-blue: 126 162 214; /* #7EA2D6 */
|
|
86
|
-
--product-creators: 139 92 246; /* #8b5cf6 */
|
|
87
|
-
--product-aurora-light: 75 127 126; /* #4b7f7e */
|
|
88
|
-
--product-aurora-mid: 49 91 90; /* #315b5a */
|
|
89
|
-
--product-aurora-dark: 8 38 40; /* #082628 */
|
|
90
|
-
--product-altitude-light: 98 123 160; /* #627ba0 */
|
|
91
|
-
--product-altitude-mid: 1 16 35; /* #011023 */
|
|
92
|
-
--product-altitude-dark: 0 3 7; /* #000307 */
|
|
93
|
-
--product-artifice-light: 234 152 78; /* #ea984e */
|
|
94
|
-
--product-artifice-mid: 229 128 46; /* #e5802e */
|
|
95
|
-
--product-artifice-dark: 226 110 23; /* #e26e17 */
|
|
96
|
-
--product-artifice-low: 168 103 0; /* #a86700 */
|
|
97
|
-
}
|
|
98
|
-
}
|
package/src/styles/index.css
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
@import './colors.css';
|
|
2
|
-
|
|
3
|
-
@tailwind base;
|
|
4
|
-
@tailwind components;
|
|
5
|
-
@tailwind utilities;
|
|
6
|
-
|
|
7
|
-
@layer base {
|
|
8
|
-
:root {
|
|
9
|
-
--body: 255 255 255;
|
|
10
|
-
|
|
11
|
-
--background: var(--fuselage-50);
|
|
12
|
-
--foreground: var(--fuselage-800);
|
|
13
|
-
|
|
14
|
-
--card: var(--fuselage-100);
|
|
15
|
-
--card-foreground: var(--fuselage-800);
|
|
16
|
-
|
|
17
|
-
--popover: var(--fuselage-50);
|
|
18
|
-
--popover-foreground: var(--fuselage-800);
|
|
19
|
-
|
|
20
|
-
--primary: var(--atmos-700);
|
|
21
|
-
--primary-foreground: var(--atmos-50);
|
|
22
|
-
|
|
23
|
-
--secondary: var(--fuselage-100);
|
|
24
|
-
--secondary-foreground: var(--fuselage-800);
|
|
25
|
-
|
|
26
|
-
--muted: var(--fuselage-200);
|
|
27
|
-
--muted-foreground: var(--fuselage-500);
|
|
28
|
-
|
|
29
|
-
--accent: var(--fuselage-250);
|
|
30
|
-
--accent-foreground: var(--fuselage-500);
|
|
31
|
-
|
|
32
|
-
--destructive: var(--semantic-red-600);
|
|
33
|
-
--destructive-foreground: var(--semantic-red-50);
|
|
34
|
-
|
|
35
|
-
--border: var(--fuselage-150);
|
|
36
|
-
--input: var(--fuselage-150);
|
|
37
|
-
--ring: var(--fuselage-200);
|
|
38
|
-
|
|
39
|
-
--radius: 0.6rem;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.dark {
|
|
43
|
-
--body: var(--fuselage-950);
|
|
44
|
-
|
|
45
|
-
--background: var(--fuselage-900);
|
|
46
|
-
--foreground: var(--fuselage-100);
|
|
47
|
-
|
|
48
|
-
--card: var(--fuselage-900);
|
|
49
|
-
--card-foreground: var(--fuselage-200);
|
|
50
|
-
|
|
51
|
-
--popover: var(--fuselage-900);
|
|
52
|
-
--popover-foreground: var(--fuselage-200);
|
|
53
|
-
|
|
54
|
-
--primary: var(--fuselage-50);
|
|
55
|
-
--primary-foreground: var(--fuselage-800);
|
|
56
|
-
|
|
57
|
-
--secondary: var(--fuselage-800);
|
|
58
|
-
--secondary-foreground: var(--fuselage-100);
|
|
59
|
-
|
|
60
|
-
--muted: var(--fuselage-700);
|
|
61
|
-
--muted-foreground: var(--fuselage-500);
|
|
62
|
-
|
|
63
|
-
--accent: var(--fuselage-700);
|
|
64
|
-
--accent-foreground: var(--fuselage-300);
|
|
65
|
-
|
|
66
|
-
--destructive: var(--semantic-red-600);
|
|
67
|
-
--destructive-foreground: var(--semantic-red-50);
|
|
68
|
-
|
|
69
|
-
--border: var(--fuselage-700);
|
|
70
|
-
--input: var(--fuselage-900);
|
|
71
|
-
--ring: var(--fuselage-800);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
body {
|
|
75
|
-
@apply bg-body text-foreground;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
h1 {
|
|
79
|
-
@apply text-4xl font-bold text-fuselage-800 dark:text-fuselage-50;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
h2,
|
|
83
|
-
h3,
|
|
84
|
-
h4,
|
|
85
|
-
h5,
|
|
86
|
-
h6 {
|
|
87
|
-
@apply font-semibold text-fuselage-400 dark:text-fuselage-300;
|
|
88
|
-
}
|
|
89
|
-
h2 {
|
|
90
|
-
@apply text-3xl;
|
|
91
|
-
}
|
|
92
|
-
h3 {
|
|
93
|
-
@apply text-2xl;
|
|
94
|
-
}
|
|
95
|
-
h4 {
|
|
96
|
-
@apply text-xl;
|
|
97
|
-
}
|
|
98
|
-
h5 {
|
|
99
|
-
@apply text-lg;
|
|
100
|
-
}
|
|
101
|
-
h6 {
|
|
102
|
-
@apply text-base;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.border,
|
|
106
|
-
.border-color-default {
|
|
107
|
-
@apply border-fuselage-150 dark:border-fuselage-700;
|
|
108
|
-
}
|
|
109
|
-
}
|