Skip to content

Commit af8110f

Browse files
castastrophecastastrophe
committed
feat: simplify theme mapping to minimum required
1 parent 12964ae commit af8110f

File tree

264 files changed

+8216
-11757
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

264 files changed

+8216
-11757
lines changed

‎components/accordion/index.css

Lines changed: 184 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,156 @@
1414
@import "./themes/spectrum-two.css";
1515

1616
.spectrum-Accordion {
17-
/** @note used for internal calculation on itemHeader and iconContainer */
17+
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
18+
--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
19+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
20+
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
21+
--spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator);
22+
--spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text);
23+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
24+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
25+
--spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
26+
--spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
27+
--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100);
28+
--spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
29+
--spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
30+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
31+
32+
/* Text header */
33+
--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
34+
--spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
35+
--spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
36+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
37+
--spectrum-accordion-item-header-line-height: 1.25;
38+
39+
/* Text body */
40+
--spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack);
41+
--spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
42+
--spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style);
43+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
44+
--spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
45+
46+
/* Colors */
47+
--spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
48+
--spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
49+
--spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
50+
--spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
51+
52+
/* Label */
53+
--spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
54+
--spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover);
55+
--spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down);
56+
--spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
57+
58+
--spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color);
59+
--spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);
60+
61+
/* Body */
62+
--spectrum-accordion-item-content-color: var(--spectrum-body-color);
63+
64+
/* Focus indicator */
65+
--spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);
66+
1867
--spectrum-accordion-min-block-size: max(
1968
var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)),
2069
calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))
2170
);
2271

23-
display: block;
24-
list-style: none;
25-
padding: 0;
26-
margin: 0;
72+
&:dir(rtl) {
73+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
74+
}
2775

2876
&:lang(ja),
2977
&:lang(zh),
3078
&:lang(ko) {
31-
--spectrum-accordion-item-header-line-height: var(--spectrum-accordion-item-header-line-height-cjk);
32-
--spectrum-accordion-item-content-line-height: var(--spectrum-accordion-item-content-line-height-cjk);
79+
--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
80+
--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
3381
}
82+
}
3483

35-
&:dir(rtl) {
36-
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
84+
.spectrum-Accordion--compact {
85+
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
86+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
87+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
88+
89+
&.spectrum-Accordion--sizeS {
90+
--spectrum-accordion-item-height: var(--spectrum-component-height-75);
91+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
92+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
3793
}
94+
95+
&.spectrum-Accordion--sizeL {
96+
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
97+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
98+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
99+
}
100+
101+
&.spectrum-Accordion--sizeXL {
102+
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
103+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
104+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
105+
}
106+
}
107+
108+
.spectrum-Accordion--spacious {
109+
--spectrum-accordion-item-header-line-height: 1.278;
110+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
111+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
112+
113+
&.spectrum-Accordion--sizeS {
114+
--spectrum-accordion-item-header-line-height: 1.25;
115+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
116+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
117+
}
118+
119+
&.spectrum-Accordion--sizeL {
120+
--spectrum-accordion-item-header-line-height: 1.273;
121+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
122+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
123+
}
124+
125+
&.spectrum-Accordion--sizeXL {
126+
--spectrum-accordion-item-header-line-height: 1.25;
127+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
128+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
129+
}
130+
}
131+
132+
.spectrum-Accordion--sizeS {
133+
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
134+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
135+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
136+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
137+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
138+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
139+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
140+
}
141+
142+
.spectrum-Accordion--sizeL {
143+
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
144+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
145+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
146+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
147+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
148+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
149+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
150+
}
151+
152+
.spectrum-Accordion--sizeXL {
153+
--spectrum-accordion-item-height: var(--spectrum-component-height-400);
154+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
155+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
156+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
157+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
158+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
159+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
160+
}
161+
162+
.spectrum-Accordion {
163+
display: block;
164+
list-style: none;
165+
padding: 0;
166+
margin: 0;
38167
}
39168

40169
.spectrum-Accordion-item {
@@ -55,42 +184,6 @@
55184
border-block-end: 1px solid transparent;
56185
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
57186
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
58-
59-
&.is-open {
60-
.spectrum-Accordion-itemHeader:hover {
61-
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
62-
}
63-
64-
> .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
65-
> .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
66-
transform: var(--spectrum-logical-rotation,) rotate(90deg);
67-
}
68-
69-
> .spectrum-Accordion-itemContent {
70-
display: block;
71-
}
72-
}
73-
74-
&.is-disabled {
75-
.spectrum-Accordion-itemHeader {
76-
cursor: default;
77-
78-
&,
79-
&:hover,
80-
&:focus-visible {
81-
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
82-
background-color: transparent;
83-
}
84-
85-
+ .spectrum-Accordion-itemIconContainer {
86-
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
87-
}
88-
}
89-
90-
.spectrum-Accordion-itemContent {
91-
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
92-
}
93-
}
94187
}
95188

96189
.spectrum-Accordion-itemHeading {
@@ -164,7 +257,6 @@
164257
inset-inline-start: 0;
165258
}
166259
}
167-
168260
color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
169261
background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default));
170262

@@ -192,6 +284,33 @@
192284
}
193285
}
194286

287+
.spectrum-Accordion-item {
288+
&.is-open {
289+
.spectrum-Accordion-itemHeader:hover {
290+
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
291+
}
292+
}
293+
}
294+
295+
.spectrum-Accordion-item.is-disabled {
296+
.spectrum-Accordion-itemHeader {
297+
&,
298+
&:hover,
299+
&:focus-visible {
300+
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
301+
background-color: transparent;
302+
}
303+
304+
+ .spectrum-Accordion-itemIconContainer {
305+
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
306+
}
307+
}
308+
309+
.spectrum-Accordion-itemContent {
310+
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
311+
}
312+
}
313+
195314
@media (forced-colors: active) {
196315
.spectrum-Accordion-itemHeader {
197316
&::after {
@@ -203,3 +322,22 @@
203322
}
204323
}
205324
}
325+
326+
.spectrum-Accordion-item {
327+
&.is-open {
328+
> .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
329+
> .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
330+
transform: var(--spectrum-logical-rotation,) rotate(90deg);
331+
}
332+
333+
> .spectrum-Accordion-itemContent {
334+
display: block;
335+
}
336+
}
337+
338+
&.is-disabled {
339+
.spectrum-Accordion-itemHeader {
340+
cursor: default;
341+
}
342+
}
343+
}

0 commit comments

Comments
 (0)