Skip to content

Commit 371262e

Browse files
antoinemantoinem
committed
Remove useless styles
1 parent 0c4b1e5 commit 371262e

File tree

15 files changed

+81
-226
lines changed

15 files changed

+81
-226
lines changed

‎assets/css/ariato/components/badge.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.badge {
1+
:where(.badge) {
22
display: inline-block;
33
height: var(--space-2x);
44
padding: 0 var(--space-1-2);
@@ -11,6 +11,8 @@
1111
font-weight: 400;
1212
line-height: var(--space-2x);
1313
text-decoration: none;
14+
text-transform: none;
15+
letter-spacing: 0;
1416

1517
& > svg {
1618
width: 12px;

‎assets/css/ariato/components/card.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.card {
1+
:where(.card) {
22
background: var(--color-grey-20);
33
border: 0;
44
border-radius: var(--border-radius-s, 0);
@@ -31,6 +31,7 @@
3131
& > picture {
3232
margin: calc(var(--space-3x) * -1) calc(var(--space-3x) * -1) calc(var(--space-3x) * 1);
3333
width: calc(100% + var(--space-6x));
34+
max-width: unset;
3435
}
3536

3637
& > footer {

‎assets/css/ariato/components/grid_auto.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@
1313
margin: 0;
1414
}
1515

16-
& * + *,
17-
& * + .card {
18-
margin-top: 0;
19-
}
16+
& * + * { margin-top: 0; }
2017

2118
& + * {
2219
margin-top: var(--space-3x);

‎assets/css/ariato/design_tokens/color.css‎

Lines changed: 58 additions & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -1,188 +1,65 @@
1-
:root,
2-
.theme-light {
3-
/* Grey scale with fine-grained steps */
4-
--color-grey-00: oklch(100% 0 269);
5-
--color-grey-20: oklch(99% 0.01 269);
6-
--color-grey-35: oklch(97% 0.01 269);
7-
--color-grey-50: oklch(94% 0.01 269);
8-
--color-grey-100: oklch(92% 0.01 269);
9-
--color-grey-200: oklch(85% 0.01 269);
10-
--color-grey-300: oklch(75% 0.02 269);
11-
--color-grey-400: oklch(60% 0.02 269);
12-
--color-grey-500: oklch(47% 0.02 269);
13-
--color-grey-600: oklch(0.40 0.02 269);
14-
--color-grey-700: oklch(33% 0.02 269);
15-
--color-grey-800: oklch(25% 0.02 269);
16-
--color-grey-900: oklch(20% 0.02 269);
17-
18-
/* Info/Primary with optimized blue hue */
19-
--color-info-50: oklch(97% 0.03 265);
20-
--color-info-100: oklch(92% 0.07 265);
21-
--color-info-200: oklch(88% 0.09 265);
22-
--color-info-400: oklch(65% 0.12 265);
23-
--color-info-500: oklch(52% 0.15 265);
24-
--color-info-600: oklch(45% 0.17 265);
25-
--color-info-700: oklch(38% 0.19 265);
26-
27-
/* Success with natural green hue */
28-
--color-success-50: oklch(97% 0.03 145);
29-
--color-success-100: oklch(92% 0.07 145);
30-
--color-success-200: oklch(88% 0.09 145);
31-
--color-success-400: oklch(65% 0.12 145);
32-
--color-success-500: oklch(52% 0.15 145);
33-
--color-success-600: oklch(45% 0.17 145);
34-
--color-success-700: oklch(38% 0.19 145);
35-
36-
/* Warning with optimized yellow/orange */
37-
--color-warning-50: oklch(97% 0.03 85);
38-
--color-warning-100: oklch(92% 0.07 85);
39-
--color-warning-200: oklch(88% 0.09 85);
40-
--color-warning-400: oklch(65% 0.12 85);
41-
--color-warning-500: oklch(52% 0.15 85);
42-
--color-warning-600: oklch(45% 0.17 85);
43-
--color-warning-700: oklch(38% 0.19 85);
44-
45-
/* Danger with vibrant red */
46-
--color-danger-50: oklch(97% 0.03 25);
47-
--color-danger-100: oklch(92% 0.07 25);
48-
--color-danger-200: oklch(88% 0.09 25);
49-
--color-danger-400: oklch(65% 0.12 25);
50-
--color-danger-500: oklch(52% 0.15 25);
51-
--color-danger-600: oklch(45% 0.17 25);
52-
--color-danger-700: oklch(38% 0.19 25);
53-
54-
/* Accent colors with balanced hues */
55-
--color-cyan-500: oklch(52% 0.15 190);
56-
--color-orange-500: oklch(52% 0.15 60);
57-
--color-fuschia-500: oklch(52% 0.15 330);
58-
--color-purple-500: oklch(52% 0.15 300);
59-
60-
/* System colors */
61-
--color-shadow: oklch(5% 0.01 269 / 0.08);
62-
--color-backdrop: oklch(20% 0.01 269 / 0.75);
63-
--color-light: oklch(100% 0.01 269 / 0.2);
1+
:root {
2+
--color-grey-00: light-dark(oklch(100% 0 269), oklch(17% 0 269));
3+
--color-grey-20: light-dark(oklch(99% 0.01 269), oklch(19% 0.01 269));
4+
--color-grey-35: light-dark(oklch(97% 0.01 269), oklch(21% 0.01 269));
5+
--color-grey-50: light-dark(oklch(94% 0.01 269), oklch(23% 0.01 269));
6+
--color-grey-100: light-dark(oklch(92% 0.01 269), oklch(28% 0.01 269));
7+
--color-grey-200: light-dark(oklch(85% 0.01 269), oklch(35% 0.01 269));
8+
--color-grey-300: light-dark(oklch(75% 0.02 269), oklch(65% 0.02 269));
9+
--color-grey-400: light-dark(oklch(60% 0.02 269), oklch(75% 0.02 269));
10+
--color-grey-500: light-dark(oklch(47% 0.02 269), oklch(84% 0.02 269));
11+
--color-grey-600: light-dark(oklch(0.40 0.02 269), oklch(86.80640625% 0.02 269));
12+
--color-grey-700: light-dark(oklch(33% 0.02 269), oklch(91.88453125% 0.02 269));
13+
--color-grey-800: light-dark(oklch(25% 0.02 269), oklch(96.57203125% 0.02 269));
14+
--color-grey-900: light-dark(oklch(20% 0.02 269), oklch(98% 0.02 269));
15+
16+
--color-info-50: light-dark(oklch(97% 0.03 265), oklch(23% 0.05 269));
17+
--color-info-100: light-dark(oklch(92% 0.07 265), oklch(28% 0.09 269));
18+
--color-info-200: light-dark(oklch(88% 0.09 265), oklch(31% 0.09 269));
19+
--color-info-400: light-dark(oklch(65% 0.12 265), oklch(76.25953125% 0.09 269));
20+
--color-info-500: light-dark(oklch(52% 0.15 265), oklch(0.84 0.09 260));
21+
--color-info-600: light-dark(oklch(45% 0.17 265), oklch(87.00171875% 0.07 269));
22+
--color-info-700: light-dark(oklch(38% 0.19 265), oklch(91.88453125% 0.04 269));
23+
24+
--color-success-50: light-dark(oklch(97% 0.03 145), oklch(23% 0.05 149));
25+
--color-success-100: light-dark(oklch(92% 0.07 145), oklch(28% 0.09 149));
26+
--color-success-200: light-dark(oklch(88% 0.09 145), oklch(40.13671875% 0.09 149));
27+
--color-success-400: light-dark(oklch(65% 0.12 145), oklch(74.69703125% 0.09 149));
28+
--color-success-500: light-dark(oklch(52% 0.15 145), oklch(0.83 0.09 149));
29+
--color-success-600: light-dark(oklch(45% 0.17 145), oklch(85.82984375% 0.07 149));
30+
--color-success-700: light-dark(oklch(38% 0.19 145), oklch(91.10328125% 0.04 149));
31+
32+
--color-warning-50: light-dark(oklch(97% 0.03 85), oklch(23% 0.05 89));
33+
--color-warning-100: light-dark(oklch(92% 0.07 85), oklch(28% 0.09 89));
34+
--color-warning-200: light-dark(oklch(88% 0.09 85), oklch(41.11328125% 0.09 89));
35+
--color-warning-400: light-dark(oklch(65% 0.12 85), oklch(76.06421875% 0.09 89));
36+
--color-warning-500: light-dark(oklch(52% 0.15 85), oklch(0.84 0.09 89));
37+
--color-warning-600: light-dark(oklch(45% 0.17 85), oklch(86.80640625% 0.07 89));
38+
--color-warning-700: light-dark(oklch(38% 0.19 85), oklch(91.68921875% 0.04 89));
39+
40+
--color-danger-50: light-dark(oklch(97% 0.03 25), oklch(23% 0.05 29));
41+
--color-danger-100: light-dark(oklch(92% 0.07 25), oklch(28% 0.09 29));
42+
--color-danger-200: light-dark(oklch(88% 0.09 25), oklch(41.89453125% 0.09 29));
43+
--color-danger-400: light-dark(oklch(65% 0.12 25), oklch(77.23609375% 0.09 29));
44+
--color-danger-500: light-dark(oklch(52% 0.15 25), oklch(0.85 0.09 29));
45+
--color-danger-600: light-dark(oklch(45% 0.17 25), oklch(87.78296875% 0.07 29));
46+
--color-danger-700: light-dark(oklch(38% 0.19 25), oklch(92.27515625% 0.04 29));
47+
48+
--color-cyan-500: light-dark(oklch(52% 0.15 190), oklch(0.83 0.09 189));
49+
--color-orange-500: light-dark(oklch(52% 0.15 60), oklch(0.85 0.05 59));
50+
--color-fuschia-500: light-dark(oklch(52% 0.15 330), oklch(0.86 0.09 329));
51+
--color-purple-500: light-dark(oklch(52% 0.15 300), oklch(0.85 0.09 299));
52+
53+
--color-shadow: light-dark(oklch(5% 0.01 269 / 0.08), oklch(5% 0.015 269 / 0.15));
54+
--color-backdrop: light-dark(oklch(20% 0.01 269 / 0.75), oklch(5% 0.006 269 / 0.7));
55+
--color-light: light-dark(oklch(100% 0.01 269 / 0.2), oklch(100% 0.006 269 / 0.1));
6456
}
6557

66-
.theme-dark {
67-
/* Inverted grey scale */
68-
--color-grey-00: oklch(17% 0.01 269);
69-
--color-grey-20: oklch(19% 0.01 269);
70-
--color-grey-35: oklch(21% 0.01 269);
71-
--color-grey-50: oklch(23% 0.01 269);
72-
--color-grey-100: oklch(28% 0.01 269);
73-
--color-grey-200: oklch(35% 0.01 269);
74-
--color-grey-300: oklch(65% 0.02 269);
75-
--color-grey-400: oklch(75% 0.02 269);
76-
--color-grey-500: oklch(84% 0.02 269);
77-
--color-grey-600: oklch(0.87 0.02 269);
78-
--color-grey-700: oklch(90% 0.02 269);
79-
--color-grey-800: oklch(95% 0.02 269);
80-
--color-grey-900: oklch(98% 0.02 269);
81-
82-
/* Adjusted colors for dark mode - increased lightness, reduced chroma */
83-
--color-info-50: oklch(23% 0.04 265);
84-
--color-info-100: oklch(28% 0.06 265);
85-
--color-info-200: oklch(35% 0.08 265);
86-
--color-info-400: oklch(75% 0.09 265);
87-
--color-info-500: oklch(84% 0.08 265);
88-
--color-info-600: oklch(87% 0.07 265);
89-
--color-info-700: oklch(90% 0.05 265);
90-
91-
/* Similar adjustments for other colors... */
92-
--color-success-50: oklch(23% 0.04 145);
93-
--color-success-100: oklch(28% 0.06 145);
94-
--color-success-200: oklch(35% 0.08 145);
95-
--color-success-400: oklch(75% 0.09 145);
96-
--color-success-500: oklch(84% 0.08 145);
97-
--color-success-600: oklch(87% 0.07 145);
98-
--color-success-700: oklch(90% 0.05 145);
99-
100-
--color-warning-50: oklch(23% 0.04 85);
101-
--color-warning-100: oklch(28% 0.06 85);
102-
--color-warning-200: oklch(35% 0.08 85);
103-
--color-warning-400: oklch(75% 0.09 85);
104-
--color-warning-500: oklch(84% 0.08 85);
105-
--color-warning-600: oklch(87% 0.07 85);
106-
--color-warning-700: oklch(90% 0.05 85);
107-
108-
--color-danger-50: oklch(23% 0.04 25);
109-
--color-danger-100: oklch(28% 0.06 25);
110-
--color-danger-200: oklch(35% 0.08 25);
111-
--color-danger-400: oklch(75% 0.09 25);
112-
--color-danger-500: oklch(84% 0.08 25);
113-
--color-danger-600: oklch(87% 0.07 25);
114-
--color-danger-700: oklch(90% 0.05 25);
58+
.theme-light { color-scheme: light; }
11559

116-
/* Accent colors adjusted for dark mode */
117-
--color-cyan-500: oklch(84% 0.08 190);
118-
--color-orange-500: oklch(84% 0.08 60);
119-
--color-fuschia-500: oklch(84% 0.08 330);
120-
--color-purple-500: oklch(84% 0.08 300);
60+
.theme-dark { color-scheme: dark; }
12161

122-
/* System colors for dark mode */
123-
--color-backdrop: oklch(5% 0.01 269 / 0.75);
124-
--color-shadow: oklch(5% 0.015 269 / 0.15);
125-
--color-light: oklch(100% 0.01 269 / 0.1);
126-
}
127-
128-
@media (prefers-color-scheme: dark) {
129-
:root:not(.theme-light) {
130-
--color-grey-00: oklch(0.17 0.02 269);
131-
--color-grey-20: oklch(0.19 0.02 269);
132-
--color-grey-35: oklch(21% 0.02 269);
133-
--color-grey-50: oklch(23% 0.02 269);
134-
--color-grey-100: oklch(28% 0.02 269);
135-
--color-grey-200: oklch(41.11328125% 0.02 269);
136-
--color-grey-300: oklch(67.07984375% 0.02 269);
137-
--color-grey-400: oklch(76.06421875% 0.02 269);
138-
--color-grey-500: oklch(0.84 0.02 269);
139-
--color-grey-600: oklch(86.80640625% 0.02 269);
140-
--color-grey-700: oklch(91.88453125% 0.02 269);
141-
--color-grey-800: oklch(96.57203125% 0.02 269);
142-
--color-grey-900: oklch(98% 0.02 269);
143-
144-
--color-info-50: oklch(23% 0.05 269);
145-
--color-info-100: oklch(28% 0.09 269);
146-
--color-info-200: oklch(31% 0.09 269);
147-
--color-info-400: oklch(76.25953125% 0.09 269);
148-
--color-info-500: oklch(0.84 0.09 260);
149-
--color-info-600: oklch(87.00171875% 0.07 269);
150-
--color-info-700: oklch(91.88453125% 0.04 269);
151-
152-
--color-success-50: oklch(23% 0.05 149);
153-
--color-success-100: oklch(28% 0.09 149);
154-
--color-success-200: oklch(40.13671875% 0.09 149);
155-
--color-success-400: oklch(74.69703125% 0.09 149);
156-
--color-success-500: oklch(0.83 0.09 149);
157-
--color-success-600: oklch(85.82984375% 0.07 149);
158-
--color-success-700: oklch(91.10328125% 0.04 149);
159-
160-
--color-warning-50: oklch(23% 0.05 89);
161-
--color-warning-100: oklch(28% 0.09 89);
162-
--color-warning-200: oklch(41.11328125% 0.09 89);
163-
--color-warning-400: oklch(76.06421875% 0.09 89);
164-
--color-warning-500: oklch(0.84 0.09 89);
165-
--color-warning-600: oklch(86.80640625% 0.07 89);
166-
--color-warning-700: oklch(91.68921875% 0.04 89);
167-
168-
--color-danger-50: oklch(23% 0.05 29);
169-
--color-danger-100: oklch(28% 0.09 29);
170-
--color-danger-200: oklch(41.89453125% 0.09 29);
171-
--color-danger-400: oklch(77.23609375% 0.09 29);
172-
--color-danger-500: oklch(0.85 0.09 29);
173-
--color-danger-600: oklch(87.78296875% 0.07 29);
174-
--color-danger-700: oklch(92.27515625% 0.04 29);
175-
176-
--color-orange-500: oklch(0.85 0.05 59);
177-
--color-purple-500: oklch(0.85 0.09 299);
178-
--color-fuschia-500: oklch(0.86 0.09 329);
179-
--color-cyan-500: oklch(0.83 0.09 189);
180-
181-
--color-backdrop: oklch(5% 0.006 269 / 0.7);
182-
--color-shadow: oklch(5% 0.015 269 / 0.1);
183-
--color-light: oklch(100% 0.006 269 / 0.1);
184-
}
185-
}
62+
html { color-scheme: light dark; }
18663

18764
body {
18865
background: var(--color-grey-20);

‎assets/css/ariato/design_tokens/font.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* design_tokens/font.css */
2-
31
:root {
42
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
53
--font-serif: Athelas, Cambria, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

‎assets/css/ariato/design_tokens/motion.css‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
/* design_tokens/motion.css */
2-
3-
html:focus-within {
4-
scroll-behavior: smooth;
5-
}
6-
7-
/* force reduced motion if preference is set */
1+
html:focus-within { scroll-behavior: smooth; }
82

93
@media (prefers-reduced-motion: reduce) {
104
*, ::before, ::after {

‎assets/css/ariato/design_tokens/shadow.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/* design_tokens/shadow.css */
2-
31
:root {
4-
/* box-shadow */
52
--box-shadow-s:
63
0 1px 1px 0 var(--color-shadow),
74
0 1px 2px 0 var(--color-shadow);
@@ -18,15 +15,13 @@
1815
0 8px 16px -4px var(--color-shadow),
1916
0 16px 32px -8px var(--color-shadow);
2017

21-
/* inset box shadow */
2218
--box-inset-shadow-s: 0 1px 1px 0 var(--color-shadow) inset;
2319
--box-inset-shadow-m: 0 1px 1px 0px var(--color-shadow) inset,
2420
0 2px 2px 1px var(--color-shadow) inset;
2521
--box-inset-shadow-l: 0 1px 1px 0px var(--color-shadow) inset,
2622
0 2px 2px 1px var(--color-shadow) inset,
2723
0 2px 8px 2px var(--color-shadow) inset;
2824

29-
/* text shadow */
3025
--text-shadow-s: 0 1px 1px var(--color-shadow);
3126
--text-shadow-m: 0 1px 1px var(--color-shadow),
3227
0 2px 2px var(--color-shadow);

‎assets/css/ariato/design_tokens/shape.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/* design_tokens/shape.css */
2-
31
:root {
4-
/* border radius */
52
--border-radius-s: calc(var(--space) * 0.25);
63
--border-radius-m: var(--space-1-2);
74
--border-radius-l: calc(var(--space) * 1);

‎assets/css/ariato/design_tokens/space.css‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* design_tokens/space.css */
2-
31
*,
42
*::before,
53
*::after {
@@ -9,17 +7,17 @@
97
:root {
108
--space: 0.5rem;
119

12-
--space-1-4: calc(var(--space) / 4);
13-
--space-1-2: calc(var(--space) / 2);
14-
15-
--space-2x: calc(var(--space) * 2);
16-
--space-3x: calc(var(--space) * 3);
17-
--space-4x: calc(var(--space) * 4);
18-
--space-5x: calc(var(--space) * 5);
19-
--space-6x: calc(var(--space) * 6);
20-
--space-7x: calc(var(--space) * 7);
21-
--space-8x: calc(var(--space) * 8);
22-
--space-9x: calc(var(--space) * 9);
10+
--space-1-4: 0.125rem;
11+
--space-1-2: 0.25rem;
12+
13+
--space-2x: 1rem;
14+
--space-3x: 1.5rem;
15+
--space-4x: 2rem;
16+
--space-5x: 2.5rem;
17+
--space-6x: 3rem;
18+
--space-7x: 3.5rem;
19+
--space-8x: 4rem;
20+
--space-9x: 4.5rem;
2321
}
2422

2523
.is-flowing > * + * {

‎assets/css/ariato/design_tokens/states.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
/* design_tokens/states.css */
2-
31
*[hidden=true] { display: none; }
42

5-
/* hide visually but make it available to assistive technology. */
63
.sr-only {
74
border: 0 !important;
85
clip: rect(1px, 1px, 1px, 1px) !important;

0 commit comments

Comments
 (0)