Skip to content

[test] full update for css packages (not for merging) #5282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[test] full update for css packages (not for merging) #5282

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/accordion/src/accordion-item-overrides.css
View file
Original file line number Diff line number Diff line change
@@ -11,3 +11,5 @@ governing permissions and limitations under the License.
*/

/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */


7 changes: 4 additions & 3 deletions packages/accordion/src/accordion-overrides.css
View file
Original file line number Diff line number Diff line change
@@ -12,7 +12,8 @@ governing permissions and limitations under the License.

/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
--spectrum-accordion-divider-color: var(--system-accordion-divider-color);
--spectrum-accordion-item-content-disabled-color: var(--system-accordion-item-content-disabled-color);
--spectrum-accordion-item-content-color: var(--system-accordion-item-content-color);
--spectrum-accordion-divider-color: var(--system-accordion-divider-color);
--spectrum-accordion-item-content-disabled-color: var(--system-accordion-item-content-disabled-color);
--spectrum-accordion-item-content-color: var(--system-accordion-item-content-color);
}

197 changes: 97 additions & 100 deletions packages/accordion/src/spectrum-accordion-item.css
View file
Original file line number Diff line number Diff line change
@@ -12,158 +12,155 @@ governing permissions and limitations under the License.

/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
z-index: inherit;
min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width));
border-block-end: 1px solid #0000;
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
margin: 0;
position: relative;
z-index: inherit;
min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width));
border-block-end: 1px solid #0000;
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
margin: 0;
position: relative;
}

:host(:first-child) {
border-block-start: 1px solid #0000;
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
border-block-start: 1px solid #0000;
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
}

#heading {
box-sizing: border-box;
margin: 0;
position: relative;
box-sizing: border-box;
margin: 0;
position: relative;
}

.iconContainer {
inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
justify-content: center;
align-items: center;
padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
display: flex;
position: absolute;
inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
justify-content: center;
align-items: center;
padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
display: flex;
position: absolute;
inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
}

.iconContainer:dir(rtl),
:host([dir="rtl"]) .iconContainer {
transform: scaleX(-1);
.iconContainer:dir(rtl), :host([dir="rtl"]) .iconContainer {
transform: scaleX(-1);
}

#content {
padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
display: none;
padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
display: none;
}

#header {
box-sizing: border-box;
padding-block: 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));
min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size));
line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height));
text-overflow: ellipsis;
cursor: pointer;
font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size));
font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight));
font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style));
font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font));
appearance: none;
text-align: start;
inline-size: 100%;
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));
border: 0;
justify-content: flex-start;
align-items: center;
padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)));
padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
display: flex;
position: relative;
box-sizing: border-box;
padding-block: 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));
min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size));
line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height));
text-overflow: ellipsis;
cursor: pointer;
font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size));
font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight));
font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style));
font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font));
appearance: none;
text-align: start;
inline-size: 100%;
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));
border: 0;
justify-content: flex-start;
align-items: center;
padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)));
padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
display: flex;
position: relative;
}

#header:focus {
outline: none;
outline: none;
}

#header:focus:after {
content: "";
position: absolute;
inset-inline-start: 0;
content: "";
position: absolute;
inset-inline-start: 0;
}

#header:focus-visible {
border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color));
background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus));
color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus));
outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1);
border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color));
background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus));
color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus));
outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1);
}

#header:active {
background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down));
color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down));
background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down));
color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down));
}

:host([disabled]) #header,
:host([disabled]) #header:focus-visible {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
background-color: initial;
:host([disabled]) #header, :host([disabled]) #header:focus-visible {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
background-color: initial;
}

@media (hover: hover) {
#header:hover {
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
}
#header:hover {
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
}

#header:hover,
#header:hover + .iconContainer {
color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover));
}
#header:hover, #header:hover + .iconContainer {
color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover));
}

:host([open]) #header:hover {
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
}
:host([open]) #header:hover {
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
}

:host([disabled]) #header:hover {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
background-color: initial;
}
:host([disabled]) #header:hover {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
background-color: initial;
}
}

:host([disabled]) #header + .iconContainer {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
}

:host([disabled]) #content {
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
}

@media (forced-colors: active) {
#header:after {
forced-color-adjust: none;
content: "";
position: absolute;
inset-inline-start: 0;
}
#header:after {
forced-color-adjust: none;
content: "";
position: absolute;
inset-inline-start: 0;
}
}

:host([open]) > #heading > .iconContainer > .indicator,
:host([open]) > .iconContainer > .indicator {
transform: rotate(90deg);
transform: var(--spectrum-logical-rotation,) rotate(90deg);
:host([open]) > #heading > .iconContainer > .indicator, :host([open]) > .iconContainer > .indicator {
transform: rotate(90deg);
transform: var(--spectrum-logical-rotation, ) rotate(90deg);
}

:host([open]) > #content {
display: block;
display: block;
}

:host([disabled]) #header {
cursor: default;
cursor: default;
}

Loading