Skip to content

Commit

Permalink
feat: simplify theme mapping to minimum required
Browse files Browse the repository at this point in the history
  • Loading branch information
@castastrophe
castastrophe committed Nov 14, 2024
1 parent 12964ae commit 93a9b79
Show file tree
Hide file tree
Showing 268 changed files with 8,621 additions and 11,654 deletions.
230 changes: 184 additions & 46 deletions components/accordion/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,156 @@
@import "./themes/spectrum-two.css";

.spectrum-Accordion {
/** @note used for internal calculation on itemHeader and iconContainer */
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
--spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator);
--spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
--spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
--spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100);
--spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
--spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);

/* Text header */
--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
--spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
--spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
--spectrum-accordion-item-header-line-height: 1.25;

/* Text body */
--spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack);
--spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
--spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
--spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);

/* Colors */
--spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
--spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
--spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
--spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));

/* Label */
--spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down);
--spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus);

--spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color);
--spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);

/* Body */
--spectrum-accordion-item-content-color: var(--spectrum-body-color);

/* Focus indicator */
--spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);

--spectrum-accordion-min-block-size: max(
var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)),
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))))
);

display: block;
list-style: none;
padding: 0;
margin: 0;
&:dir(rtl) {
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}

&:lang(ja),
&:lang(zh),
&:lang(ko) {
--spectrum-accordion-item-header-line-height: var(--spectrum-accordion-item-header-line-height-cjk);
--spectrum-accordion-item-content-line-height: var(--spectrum-accordion-item-content-line-height-cjk);
--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
}
}

&:dir(rtl) {
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
.spectrum-Accordion--compact {
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);

&.spectrum-Accordion--sizeS {
--spectrum-accordion-item-height: var(--spectrum-component-height-75);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
}

&.spectrum-Accordion--sizeL {
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
}

&.spectrum-Accordion--sizeXL {
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
}
}

.spectrum-Accordion--spacious {
--spectrum-accordion-item-header-line-height: 1.278;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);

&.spectrum-Accordion--sizeS {
--spectrum-accordion-item-header-line-height: 1.25;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
}

&.spectrum-Accordion--sizeL {
--spectrum-accordion-item-header-line-height: 1.273;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
}

&.spectrum-Accordion--sizeXL {
--spectrum-accordion-item-header-line-height: 1.25;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
}
}

.spectrum-Accordion--sizeS {
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
}

.spectrum-Accordion--sizeL {
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
}

.spectrum-Accordion--sizeXL {
--spectrum-accordion-item-height: var(--spectrum-component-height-400);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
}

.spectrum-Accordion {
display: block;
list-style: none;
padding: 0;
margin: 0;
}

.spectrum-Accordion-item {
Expand All @@ -55,42 +184,6 @@
border-block-end: 1px solid transparent;
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));

&.is-open {
.spectrum-Accordion-itemHeader:hover {
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
}

> .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
> .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
transform: var(--spectrum-logical-rotation,) rotate(90deg);
}

> .spectrum-Accordion-itemContent {
display: block;
}
}

&.is-disabled {
.spectrum-Accordion-itemHeader {
cursor: default;

&,
&:hover,
&:focus-visible {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
background-color: transparent;
}

+ .spectrum-Accordion-itemIconContainer {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
}
}

.spectrum-Accordion-itemContent {
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
}
}
}

.spectrum-Accordion-itemHeading {
Expand Down Expand Up @@ -164,7 +257,6 @@
inset-inline-start: 0;
}
}

color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default));

Expand Down Expand Up @@ -192,6 +284,33 @@
}
}

.spectrum-Accordion-item {
&.is-open {
.spectrum-Accordion-itemHeader:hover {
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
}
}
}

.spectrum-Accordion-item.is-disabled {
.spectrum-Accordion-itemHeader {
&,
&:hover,
&:focus-visible {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
background-color: transparent;
}

+ .spectrum-Accordion-itemIconContainer {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
}
}

.spectrum-Accordion-itemContent {
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
}
}

@media (forced-colors: active) {
.spectrum-Accordion-itemHeader {
&::after {
Expand All @@ -203,3 +322,22 @@
}
}
}

.spectrum-Accordion-item {
&.is-open {
> .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
> .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
transform: var(--spectrum-logical-rotation,) rotate(90deg);
}

> .spectrum-Accordion-itemContent {
display: block;
}
}

&.is-disabled {
.spectrum-Accordion-itemHeader {
cursor: default;
}
}
}
Loading

0 comments on commit 93a9b79

Please sign in to comment.