From 305a919325cc637260a420007f11adf66368bc7c Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 9 Jun 2026 13:29:18 -0500 Subject: [PATCH 1/3] feat: add CSS Layers to 06-navigation-skeletons Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/css-layers-navigation-skeletons.md | 5 + .../ScrollableRegion.module.css | 16 +- packages/react/src/Select/Select.module.css | 112 +-- packages/react/src/SideNav.module.css | 188 ++-- .../react/src/Skeleton/SkeletonBox.module.css | 48 +- .../SkeletonAvatar/SkeletonAvatar.module.css | 52 +- .../src/SkeletonText/SkeletonText.module.css | 110 +-- packages/react/src/Stack/Stack.module.css | 882 +++++++++--------- .../src/StateLabel/StateLabel.module.css | 270 +++--- packages/react/src/SubNav/SubNav.module.css | 114 +-- packages/react/src/TabNav/TabNav.module.css | 68 +- .../react/src/__tests__/css-layers.test.ts | 10 + 12 files changed, 955 insertions(+), 920 deletions(-) create mode 100644 .changeset/css-layers-navigation-skeletons.md diff --git a/.changeset/css-layers-navigation-skeletons.md b/.changeset/css-layers-navigation-skeletons.md new file mode 100644 index 00000000000..70f95d01ceb --- /dev/null +++ b/.changeset/css-layers-navigation-skeletons.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, TabNav: Improve custom class override behavior for component styles diff --git a/packages/react/src/ScrollableRegion/ScrollableRegion.module.css b/packages/react/src/ScrollableRegion/ScrollableRegion.module.css index cf38fe50fae..d9307850f0a 100644 --- a/packages/react/src/ScrollableRegion/ScrollableRegion.module.css +++ b/packages/react/src/ScrollableRegion/ScrollableRegion.module.css @@ -1,8 +1,10 @@ -.ScrollableRegion { - /* When setting overflow, we also set `position: relative` to avoid - * `position: absolute` items breaking out of the container and causing - * scrollbars on the page. This can occur with common classes like `sr-only` - * and can cause difficult to track down layout issues */ - position: relative; - overflow: auto; +@layer primer.components.ScrollableRegion { + .ScrollableRegion { + /* When setting overflow, we also set `position: relative` to avoid + * `position: absolute` items breaking out of the container and causing + * scrollbars on the page. This can occur with common classes like `sr-only` + * and can cause difficult to track down layout issues */ + position: relative; + overflow: auto; + } } diff --git a/packages/react/src/Select/Select.module.css b/packages/react/src/Select/Select.module.css index 86cfb01aca9..50159faa24f 100644 --- a/packages/react/src/Select/Select.module.css +++ b/packages/react/src/Select/Select.module.css @@ -1,69 +1,71 @@ -.Select { - width: 100%; - /* stylelint-disable-next-line primer/spacing */ - margin-top: 1px; - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: 1px; - /* stylelint-disable-next-line primer/spacing */ - margin-left: 1px; - font-size: inherit; - color: currentColor; +@layer primer.components.Select { + .Select { + width: 100%; + /* stylelint-disable-next-line primer/spacing */ + margin-top: 1px; + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: 1px; + /* stylelint-disable-next-line primer/spacing */ + margin-left: 1px; + font-size: inherit; + color: currentColor; - /* Firefox hacks: - * 1. Makes Firefox's native dropdown menu's background match the theme. - * background-color should be 'transparent', but Firefox uses the background-color on - * so the background color doesn't hide the focus outline created with an inset box-shadow. - */ - background-color: inherit; - border: 0; - border-radius: inherit; - outline: none; - appearance: none; + /* Firefox hacks: + * 1. Makes Firefox's native dropdown menu's background match the theme. + * background-color should be 'transparent', but Firefox uses the background-color on + * so the background color doesn't hide the focus outline created with an inset box-shadow. + */ + background-color: inherit; + border: 0; + border-radius: inherit; + outline: none; + appearance: none; - /* 2. Prevents visible overlap of partially transparent background colors. - * 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a - * transparent background-color on a disabled 's background color white when setting 'background-color: transparent;' - */ - @media screen and (forced-colors: active) { + /* 2. Prevents visible overlap of partially transparent background colors. + * 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a + * transparent background-color on a disabled 's background color white when setting 'background-color: transparent;' + */ + @media screen and (forced-colors: active) { + &:disabled { + background-color: -moz-combobox; + } } } -} -.TextInputWrapper { - position: relative; - overflow: hidden; + .TextInputWrapper { + position: relative; + overflow: hidden; - @media screen and (forced-colors: active) { - svg { - /* stylelint-disable-next-line declaration-property-value-no-unknown */ - fill: 'FieldText'; + @media screen and (forced-colors: active) { + svg { + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + fill: 'FieldText'; + } } } -} -.Disabled { - @media screen and (forced-colors: active) { - svg { - /* stylelint-disable-next-line declaration-property-value-no-unknown */ - fill: 'GrayText'; + .Disabled { + @media screen and (forced-colors: active) { + svg { + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + fill: 'GrayText'; + } } } -} -.ArrowIndicator { - position: absolute; - top: 50%; - right: var(--base-size-4); - pointer-events: none; - transform: translateY(-50%); + .ArrowIndicator { + position: absolute; + top: 50%; + right: var(--base-size-4); + pointer-events: none; + transform: translateY(-50%); + } } diff --git a/packages/react/src/SideNav.module.css b/packages/react/src/SideNav.module.css index 781030ac49e..dbcc8164650 100644 --- a/packages/react/src/SideNav.module.css +++ b/packages/react/src/SideNav.module.css @@ -1,114 +1,116 @@ -.SideNav { - background-color: var(--bgColor-muted); -} - -.SideNavBordered { - border-color: var(--borderColor-default); - border-style: solid; - border-width: var(--borderWidth-thin); - border-radius: var(--borderRadius-medium); - - /* Remove duplicate borders from nested SideNavs */ - & > & { - border-right: 0; - border-bottom: 0; - border-left: 0; - } -} - -.SideNavLink { - position: relative; - display: block; - width: 100%; - /* stylelint-disable-next-line primer/typography */ - font-size: 14px; - text-align: left; - text-decoration: none; - - & > .SideNav { - border-bottom: none; +@layer primer.components.SideNav { + .SideNav { + background-color: var(--bgColor-muted); } - .SideNav.SideNavVariant--normal > & { - padding: var(--base-size-16); - color: var(--fgColor-default); - border: 0; - border-top: var(--borderWidth-thin) solid var(--borderColor-muted); - - &:first-child { - border-top: 0; - border-top-left-radius: var(--borderRadius-medium); - border-top-right-radius: var(--borderRadius-medium); - } - - &:last-child { - border-bottom-right-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); + .SideNavBordered { + border-color: var(--borderColor-default); + border-style: solid; + border-width: var(--borderWidth-thin); + border-radius: var(--borderRadius-medium); + + /* Remove duplicate borders from nested SideNavs */ + & > & { + border-right: 0; + border-bottom: 0; + border-left: 0; } + } - /* Bar on the left */ - &::before { - position: absolute; - top: 0; - bottom: 0; - left: 0; - z-index: 1; - width: 3px; - pointer-events: none; - content: ''; + .SideNavLink { + position: relative; + display: block; + width: 100%; + /* stylelint-disable-next-line primer/typography */ + font-size: 14px; + text-align: left; + text-decoration: none; + + & > .SideNav { + border-bottom: none; } - &:hover { - text-decoration: none; - background-color: var(--bgColor-neutral-muted); - } + .SideNav.SideNavVariant--normal > & { + padding: var(--base-size-16); + color: var(--fgColor-default); + border: 0; + border-top: var(--borderWidth-thin) solid var(--borderColor-muted); - &:focus { - z-index: 1; - text-decoration: none; - background-color: var(--bgColor-neutral-muted); - outline: solid 2px var(--fgColor-accent); - } + &:first-child { + border-top: 0; + border-top-left-radius: var(--borderRadius-medium); + border-top-right-radius: var(--borderRadius-medium); + } - &[aria-current='page'], - &[aria-selected='true'] { - background-color: var(--bgColor-default); + &:last-child { + border-bottom-right-radius: var(--borderRadius-medium); + border-bottom-left-radius: var(--borderRadius-medium); + } /* Bar on the left */ - /* stylelint-disable-next-line selector-max-specificity */ &::before { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73)); + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + width: 3px; + pointer-events: none; + content: ''; } - } - } - .SideNav.SideNavVariant--lightweight > & { - padding: var(--base-size-4) 0; - color: var(--fgColor-accent); + &:hover { + text-decoration: none; + background-color: var(--bgColor-neutral-muted); + } - &:hover { - color: var(--fgColor-default); - text-decoration: none; - } + &:focus { + z-index: 1; + text-decoration: none; + background-color: var(--bgColor-neutral-muted); + outline: solid 2px var(--fgColor-accent); + } - &:focus { - z-index: 1; - color: var(--fgColor-default); - text-decoration: none; - outline: solid 1px var(--fgColor-accent); + &[aria-current='page'], + &[aria-selected='true'] { + background-color: var(--bgColor-default); + + /* Bar on the left */ + /* stylelint-disable-next-line selector-max-specificity */ + &::before { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73)); + } + } } - &[aria-current='page'], - &[aria-selected='true'] { - font-weight: var(--base-text-weight-medium); - color: var(--fgColor-default); + .SideNav.SideNavVariant--lightweight > & { + padding: var(--base-size-4) 0; + color: var(--fgColor-accent); + + &:hover { + color: var(--fgColor-default); + text-decoration: none; + } + + &:focus { + z-index: 1; + color: var(--fgColor-default); + text-decoration: none; + outline: solid 1px var(--fgColor-accent); + } + + &[aria-current='page'], + &[aria-selected='true'] { + font-weight: var(--base-text-weight-medium); + color: var(--fgColor-default); + } } } -} -.SideNavLinkFull { - display: flex; - align-items: center; - justify-content: space-between; + .SideNavLinkFull { + display: flex; + align-items: center; + justify-content: space-between; + } } diff --git a/packages/react/src/Skeleton/SkeletonBox.module.css b/packages/react/src/Skeleton/SkeletonBox.module.css index b060bdb265d..1ac8d8e7c0e 100644 --- a/packages/react/src/Skeleton/SkeletonBox.module.css +++ b/packages/react/src/Skeleton/SkeletonBox.module.css @@ -1,30 +1,32 @@ -@keyframes shimmer { - from { - mask-position: 200%; - } +@layer primer.components.Skeleton { + @keyframes shimmer { + from { + mask-position: 200%; + } - to { - mask-position: 0%; + to { + mask-position: 0%; + } } -} - -.SkeletonBox { - display: block; - height: 1rem; - background-color: var(--skeletonLoader-bgColor); - border-radius: var(--borderRadius-small); - animation: shimmer; - @media (prefers-reduced-motion: no-preference) { - mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%); - mask-size: 200%; + .SkeletonBox { + display: block; + height: 1rem; + background-color: var(--skeletonLoader-bgColor); + border-radius: var(--borderRadius-small); animation: shimmer; - animation-duration: var(--base-duration-1000); - animation-iteration-count: infinite; - } - @media (forced-colors: active) { - outline: 1px solid transparent; - outline-offset: -1px; + @media (prefers-reduced-motion: no-preference) { + mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%); + mask-size: 200%; + animation: shimmer; + animation-duration: var(--base-duration-1000); + animation-iteration-count: infinite; + } + + @media (forced-colors: active) { + outline: 1px solid transparent; + outline-offset: -1px; + } } } diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.module.css b/packages/react/src/SkeletonAvatar/SkeletonAvatar.module.css index 02c869f1078..137fec5995c 100644 --- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.module.css +++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.module.css @@ -1,32 +1,34 @@ -.SkeletonAvatar { - &:where([data-component='SkeletonAvatar']) { - display: inline-block; - width: var(--avatarSize-regular); - height: var(--avatarSize-regular); - /* stylelint-disable-next-line primer/typography */ - line-height: 1; - border-radius: 50%; - } - - &:where([data-square]) { - /* stylelint-disable-next-line primer/borders */ - border-radius: clamp(4px, var(--avatarSize-regular) - 24px, var(--borderRadius-medium)); - } - - &:where([data-responsive]) { - @media screen and (--viewportRange-narrow) { - width: var(--avatarSize-narrow); - height: var(--avatarSize-narrow); - } - - @media screen and (--viewportRange-regular) { +@layer primer.components.SkeletonAvatar { + .SkeletonAvatar { + &:where([data-component='SkeletonAvatar']) { + display: inline-block; width: var(--avatarSize-regular); height: var(--avatarSize-regular); + /* stylelint-disable-next-line primer/typography */ + line-height: 1; + border-radius: 50%; + } + + &:where([data-square]) { + /* stylelint-disable-next-line primer/borders */ + border-radius: clamp(4px, var(--avatarSize-regular) - 24px, var(--borderRadius-medium)); } - @media screen and (--viewportRange-wide) { - width: var(--avatarSize-wide); - height: var(--avatarSize-wide); + &:where([data-responsive]) { + @media screen and (--viewportRange-narrow) { + width: var(--avatarSize-narrow); + height: var(--avatarSize-narrow); + } + + @media screen and (--viewportRange-regular) { + width: var(--avatarSize-regular); + height: var(--avatarSize-regular); + } + + @media screen and (--viewportRange-wide) { + width: var(--avatarSize-wide); + height: var(--avatarSize-wide); + } } } } diff --git a/packages/react/src/SkeletonText/SkeletonText.module.css b/packages/react/src/SkeletonText/SkeletonText.module.css index eeee28e036b..1c7f9591efe 100644 --- a/packages/react/src/SkeletonText/SkeletonText.module.css +++ b/packages/react/src/SkeletonText/SkeletonText.module.css @@ -1,70 +1,72 @@ -.SkeletonText { - --font-size: var(--text-body-size-medium); - --line-height: var(--text-body-lineHeight-medium); - --leading: calc(var(--font-size) * var(--line-height) - var(--font-size)); +@layer primer.components.SkeletonText { + .SkeletonText { + --font-size: var(--text-body-size-medium); + --line-height: var(--text-body-lineHeight-medium); + --leading: calc(var(--font-size) * var(--line-height) - var(--font-size)); - @supports (margin-block: mod(1px, 1px)) { - --leading: mod(var(--font-size) * var(--line-height), var(--font-size)); - } - - height: var(--font-size); - border-radius: var(--borderRadius-small); - /* stylelint-disable-next-line primer/spacing */ - margin-block: calc(var(--leading) / 2); + @supports (margin-block: mod(1px, 1px)) { + --leading: mod(var(--font-size) * var(--line-height), var(--font-size)); + } - &:where([data-in-multiline]) { + height: var(--font-size); + border-radius: var(--borderRadius-small); /* stylelint-disable-next-line primer/spacing */ - margin-block-end: calc(var(--leading) * 2); + margin-block: calc(var(--leading) / 2); - &:last-child { - min-width: 50px; - max-width: 65%; - margin-bottom: 0; + &:where([data-in-multiline]) { + /* stylelint-disable-next-line primer/spacing */ + margin-block-end: calc(var(--leading) * 2); + + &:last-child { + min-width: 50px; + max-width: 65%; + margin-bottom: 0; + } } - } - &:where([data-text-skeleton-size='display']), - &:where([data-text-skeleton-size='titleLarge']) { - border-radius: var(--borderRadius-medium); - } + &:where([data-text-skeleton-size='display']), + &:where([data-text-skeleton-size='titleLarge']) { + border-radius: var(--borderRadius-medium); + } - &:where([data-text-skeleton-size='display']) { - --font-size: var(--text-display-size); - --line-height: var(--text-display-lineHeight); - } + &:where([data-text-skeleton-size='display']) { + --font-size: var(--text-display-size); + --line-height: var(--text-display-lineHeight); + } - &:where([data-text-skeleton-size='titleLarge']) { - --font-size: var(--text-title-size-large); - --line-height: var(--text-title-lineHeight-large); - } + &:where([data-text-skeleton-size='titleLarge']) { + --font-size: var(--text-title-size-large); + --line-height: var(--text-title-lineHeight-large); + } - &:where([data-text-skeleton-size='titleMedium']) { - --font-size: var(--text-title-size-medium); - --line-height: var(--text-title-lineHeight-medium); - } + &:where([data-text-skeleton-size='titleMedium']) { + --font-size: var(--text-title-size-medium); + --line-height: var(--text-title-lineHeight-medium); + } - &:where([data-text-skeleton-size='titleSmall']) { - --font-size: var(--text-title-size-small); - --line-height: var(--text-title-lineHeight-small); - } + &:where([data-text-skeleton-size='titleSmall']) { + --font-size: var(--text-title-size-small); + --line-height: var(--text-title-lineHeight-small); + } - &:where([data-text-skeleton-size='subtitle']) { - --font-size: var(--text-subtitle-size); - --line-height: var(--text-subtitle-lineHeight); - } + &:where([data-text-skeleton-size='subtitle']) { + --font-size: var(--text-subtitle-size); + --line-height: var(--text-subtitle-lineHeight); + } - &:where([data-text-skeleton-size='bodyLarge']) { - --font-size: var(--text-body-size-large); - --line-height: var(--text-body-lineHeight-large); - } + &:where([data-text-skeleton-size='bodyLarge']) { + --font-size: var(--text-body-size-large); + --line-height: var(--text-body-lineHeight-large); + } - &:where([data-text-skeleton-size='bodySmall']) { - --font-size: var(--text-body-size-small); - --line-height: var(--text-body-lineHeight-small); + &:where([data-text-skeleton-size='bodySmall']) { + --font-size: var(--text-body-size-small); + --line-height: var(--text-body-lineHeight-small); + } } -} -.SkeletonTextWrapper { - /* stylelint-disable-next-line primer/spacing */ - padding-block: 0.1px; + .SkeletonTextWrapper { + /* stylelint-disable-next-line primer/spacing */ + padding-block: 0.1px; + } } diff --git a/packages/react/src/Stack/Stack.module.css b/packages/react/src/Stack/Stack.module.css index 8a18624c8b7..676488d4b69 100644 --- a/packages/react/src/Stack/Stack.module.css +++ b/packages/react/src/Stack/Stack.module.css @@ -1,597 +1,599 @@ -.Stack { - display: flex; - flex-flow: column; - align-items: stretch; - align-content: flex-start; - gap: var(--stack-gap, var(--stack-gap-normal)); - - &[data-padding='none'], - &[data-padding-narrow='none'] { - padding-block: 0; - padding-inline: 0; - } - - &[data-padding='tight'], - &[data-padding-narrow='tight'] { - padding-block: var(--base-size-4); - padding-inline: var(--base-size-4); - } - - &[data-padding='condensed'], - &[data-padding-narrow='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-condensed); - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-condensed); - } - - &[data-padding='cozy'], - &[data-padding-narrow='cozy'] { - padding-block: var(--base-size-12); - padding-inline: var(--base-size-12); - } - - &[data-padding='normal'], - &[data-padding-narrow='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-normal); - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-normal); - } - - &[data-padding='spacious'], - &[data-padding-narrow='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-spacious); - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-spacious); - } - - &[data-direction='horizontal'], - &[data-direction-narrow='horizontal'] { - flex-flow: row; - } - - &[data-direction='vertical'], - &[data-direction-narrow='vertical'] { +@layer primer.components.Stack { + .Stack { + display: flex; flex-flow: column; - } - - &[data-gap='none'], - &[data-gap-narrow='none'] { - --stack-gap: 0; - } - - &[data-gap='tight'], - &[data-gap-narrow='tight'] { - --stack-gap: var(--base-size-4); - } - - &[data-gap='condensed'], - &[data-gap-narrow='condensed'] { - --stack-gap: var(--stack-gap-condensed); - } - - &[data-gap='cozy'], - &[data-gap-narrow='cozy'] { - --stack-gap: var(--base-size-12); - } - - &[data-gap='normal'], - &[data-gap-narrow='normal'] { - --stack-gap: var(--stack-gap-normal); - } - - &[data-gap='spacious'], - &[data-gap-narrow='spacious'] { - --stack-gap: var(--stack-gap-spacious); - } - - &[data-align='start'], - &[data-align-narrow='start'] { - align-items: flex-start; - } - - &[data-align='center'], - &[data-align-narrow='center'] { - align-items: center; - } - - &[data-align='end'], - &[data-align-narrow='end'] { - align-items: flex-end; - } - - &[data-align='baseline'], - &[data-align-narrow='baseline'] { - align-items: baseline; - } - - &[data-justify='start'], - &[data-justify-narrow='start'] { - justify-content: flex-start; - } - - &[data-justify='center'], - &[data-justify-narrow='center'] { - justify-content: center; - } - - &[data-justify='end'], - &[data-justify-narrow='end'] { - justify-content: flex-end; - } - - &[data-justify='space-between'], - &[data-justify-narrow='space-between'] { - justify-content: space-between; - } - - &[data-justify='space-evenly'], - &[data-justify-narrow='space-evenly'] { - justify-content: space-evenly; - } - - &[data-wrap='wrap'], - &[data-wrap-narrow='wrap'] { - flex-wrap: wrap; - } - - &[data-wrap='nowrap'], - &[data-wrap-narrow='nowrap'] { - flex-wrap: nowrap; - } - - &[data-padding-block='none'], - &[data-padding-block-narrow='none'] { - padding-block: 0; - } - - &[data-padding-block='tight'], - &[data-padding-block-narrow='tight'] { - padding-block: var(--base-size-4); - } + align-items: stretch; + align-content: flex-start; + gap: var(--stack-gap, var(--stack-gap-normal)); - &[data-padding-block='condensed'], - &[data-padding-block-narrow='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-condensed); - } - - &[data-padding-block='cozy'], - &[data-padding-block-narrow='cozy'] { - padding-block: var(--base-size-12); - } - - &[data-padding-block='normal'], - &[data-padding-block-narrow='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-normal); - } - - &[data-padding-block='spacious'], - &[data-padding-block-narrow='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-spacious); - } - - &[data-padding-inline='none'], - &[data-padding-inline-narrow='none'] { - padding-inline: 0; - } - - &[data-padding-inline='tight'], - &[data-padding-inline-narrow='tight'] { - padding-inline: var(--base-size-4); - } - - &[data-padding-inline='condensed'], - &[data-padding-inline-narrow='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-condensed); - } - - &[data-padding-inline='cozy'], - &[data-padding-inline-narrow='cozy'] { - padding-inline: var(--base-size-12); - } - - &[data-padding-inline='normal'], - &[data-padding-inline-narrow='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-normal); - } - - &[data-padding-inline='spacious'], - &[data-padding-inline-narrow='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-spacious); - } - - @media (--viewportRange-regular) { - &[data-padding-regular='none'] { + &[data-padding='none'], + &[data-padding-narrow='none'] { padding-block: 0; padding-inline: 0; } - &[data-padding-regular='tight'] { + &[data-padding='tight'], + &[data-padding-narrow='tight'] { padding-block: var(--base-size-4); padding-inline: var(--base-size-4); } - &[data-padding-regular='condensed'] { + &[data-padding='condensed'], + &[data-padding-narrow='condensed'] { /* stylelint-disable-next-line primer/spacing */ padding-block: var(--stack-padding-condensed); /* stylelint-disable-next-line primer/spacing */ padding-inline: var(--stack-padding-condensed); } - &[data-padding-regular='cozy'] { + &[data-padding='cozy'], + &[data-padding-narrow='cozy'] { padding-block: var(--base-size-12); padding-inline: var(--base-size-12); } - &[data-padding-regular='normal'] { + &[data-padding='normal'], + &[data-padding-narrow='normal'] { /* stylelint-disable-next-line primer/spacing */ padding-block: var(--stack-padding-normal); /* stylelint-disable-next-line primer/spacing */ padding-inline: var(--stack-padding-normal); } - &[data-padding-regular='spacious'] { + &[data-padding='spacious'], + &[data-padding-narrow='spacious'] { /* stylelint-disable-next-line primer/spacing */ padding-block: var(--stack-padding-spacious); /* stylelint-disable-next-line primer/spacing */ padding-inline: var(--stack-padding-spacious); } - &[data-direction-regular='horizontal'] { + &[data-direction='horizontal'], + &[data-direction-narrow='horizontal'] { flex-flow: row; } - &[data-direction-regular='vertical'] { + &[data-direction='vertical'], + &[data-direction-narrow='vertical'] { flex-flow: column; } - &[data-gap-regular='none'] { + &[data-gap='none'], + &[data-gap-narrow='none'] { --stack-gap: 0; } - &[data-gap-regular='tight'] { + &[data-gap='tight'], + &[data-gap-narrow='tight'] { --stack-gap: var(--base-size-4); } - &[data-gap-regular='condensed'] { + &[data-gap='condensed'], + &[data-gap-narrow='condensed'] { --stack-gap: var(--stack-gap-condensed); } - &[data-gap-regular='cozy'] { + &[data-gap='cozy'], + &[data-gap-narrow='cozy'] { --stack-gap: var(--base-size-12); } - &[data-gap-regular='normal'] { + &[data-gap='normal'], + &[data-gap-narrow='normal'] { --stack-gap: var(--stack-gap-normal); } - &[data-gap-regular='spacious'] { + &[data-gap='spacious'], + &[data-gap-narrow='spacious'] { --stack-gap: var(--stack-gap-spacious); } - &[data-align-regular='start'] { + &[data-align='start'], + &[data-align-narrow='start'] { align-items: flex-start; } - &[data-align-regular='center'] { + &[data-align='center'], + &[data-align-narrow='center'] { align-items: center; } - &[data-align-regular='end'] { + &[data-align='end'], + &[data-align-narrow='end'] { align-items: flex-end; } - &[data-align-regular='baseline'] { + &[data-align='baseline'], + &[data-align-narrow='baseline'] { align-items: baseline; } - &[data-justify-regular='start'] { + &[data-justify='start'], + &[data-justify-narrow='start'] { justify-content: flex-start; } - &[data-justify-regular='center'] { + &[data-justify='center'], + &[data-justify-narrow='center'] { justify-content: center; } - &[data-justify-regular='end'] { + &[data-justify='end'], + &[data-justify-narrow='end'] { justify-content: flex-end; } - &[data-justify-regular='space-between'] { + &[data-justify='space-between'], + &[data-justify-narrow='space-between'] { justify-content: space-between; } - &[data-justify-regular='space-evenly'] { + &[data-justify='space-evenly'], + &[data-justify-narrow='space-evenly'] { justify-content: space-evenly; } - &[data-wrap-regular='wrap'] { + &[data-wrap='wrap'], + &[data-wrap-narrow='wrap'] { flex-wrap: wrap; } - &[data-wrap-regular='nowrap'] { + &[data-wrap='nowrap'], + &[data-wrap-narrow='nowrap'] { flex-wrap: nowrap; } - &[data-padding-block-regular='none'] { + &[data-padding-block='none'], + &[data-padding-block-narrow='none'] { padding-block: 0; } - &[data-padding-block-regular='tight'] { + &[data-padding-block='tight'], + &[data-padding-block-narrow='tight'] { padding-block: var(--base-size-4); } - &[data-padding-block-regular='condensed'] { + &[data-padding-block='condensed'], + &[data-padding-block-narrow='condensed'] { /* stylelint-disable-next-line primer/spacing */ padding-block: var(--stack-padding-condensed); } - &[data-padding-block-regular='cozy'] { + &[data-padding-block='cozy'], + &[data-padding-block-narrow='cozy'] { padding-block: var(--base-size-12); } - &[data-padding-block-regular='normal'] { + &[data-padding-block='normal'], + &[data-padding-block-narrow='normal'] { /* stylelint-disable-next-line primer/spacing */ padding-block: var(--stack-padding-normal); } - &[data-padding-block-regular='spacious'] { + &[data-padding-block='spacious'], + &[data-padding-block-narrow='spacious'] { /* stylelint-disable-next-line primer/spacing */ padding-block: var(--stack-padding-spacious); } - &[data-padding-inline-regular='none'] { + &[data-padding-inline='none'], + &[data-padding-inline-narrow='none'] { padding-inline: 0; } - &[data-padding-inline-regular='tight'] { + &[data-padding-inline='tight'], + &[data-padding-inline-narrow='tight'] { padding-inline: var(--base-size-4); } - &[data-padding-inline-regular='condensed'] { + &[data-padding-inline='condensed'], + &[data-padding-inline-narrow='condensed'] { /* stylelint-disable-next-line primer/spacing */ padding-inline: var(--stack-padding-condensed); } - &[data-padding-inline-regular='cozy'] { + &[data-padding-inline='cozy'], + &[data-padding-inline-narrow='cozy'] { padding-inline: var(--base-size-12); } - &[data-padding-inline-regular='normal'] { + &[data-padding-inline='normal'], + &[data-padding-inline-narrow='normal'] { /* stylelint-disable-next-line primer/spacing */ padding-inline: var(--stack-padding-normal); } - &[data-padding-inline-regular='spacious'] { + &[data-padding-inline='spacious'], + &[data-padding-inline-narrow='spacious'] { /* stylelint-disable-next-line primer/spacing */ padding-inline: var(--stack-padding-spacious); } - } - @media (--viewportRange-wide) { - &[data-padding-wide='none'] { - padding-block: 0; - padding-inline: 0; - } + @media (--viewportRange-regular) { + &[data-padding-regular='none'] { + padding-block: 0; + padding-inline: 0; + } + + &[data-padding-regular='tight'] { + padding-block: var(--base-size-4); + padding-inline: var(--base-size-4); + } + + &[data-padding-regular='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-condensed); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-condensed); + } + + &[data-padding-regular='cozy'] { + padding-block: var(--base-size-12); + padding-inline: var(--base-size-12); + } + + &[data-padding-regular='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-normal); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-normal); + } + + &[data-padding-regular='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-spacious); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-spacious); + } + + &[data-direction-regular='horizontal'] { + flex-flow: row; + } + + &[data-direction-regular='vertical'] { + flex-flow: column; + } + + &[data-gap-regular='none'] { + --stack-gap: 0; + } + + &[data-gap-regular='tight'] { + --stack-gap: var(--base-size-4); + } + + &[data-gap-regular='condensed'] { + --stack-gap: var(--stack-gap-condensed); + } + + &[data-gap-regular='cozy'] { + --stack-gap: var(--base-size-12); + } + + &[data-gap-regular='normal'] { + --stack-gap: var(--stack-gap-normal); + } + + &[data-gap-regular='spacious'] { + --stack-gap: var(--stack-gap-spacious); + } + + &[data-align-regular='start'] { + align-items: flex-start; + } + + &[data-align-regular='center'] { + align-items: center; + } + + &[data-align-regular='end'] { + align-items: flex-end; + } + + &[data-align-regular='baseline'] { + align-items: baseline; + } + + &[data-justify-regular='start'] { + justify-content: flex-start; + } + + &[data-justify-regular='center'] { + justify-content: center; + } + + &[data-justify-regular='end'] { + justify-content: flex-end; + } + + &[data-justify-regular='space-between'] { + justify-content: space-between; + } + + &[data-justify-regular='space-evenly'] { + justify-content: space-evenly; + } + + &[data-wrap-regular='wrap'] { + flex-wrap: wrap; + } + + &[data-wrap-regular='nowrap'] { + flex-wrap: nowrap; + } + + &[data-padding-block-regular='none'] { + padding-block: 0; + } + + &[data-padding-block-regular='tight'] { + padding-block: var(--base-size-4); + } + + &[data-padding-block-regular='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-condensed); + } + + &[data-padding-block-regular='cozy'] { + padding-block: var(--base-size-12); + } + + &[data-padding-block-regular='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-normal); + } + + &[data-padding-block-regular='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-spacious); + } + + &[data-padding-inline-regular='none'] { + padding-inline: 0; + } + + &[data-padding-inline-regular='tight'] { + padding-inline: var(--base-size-4); + } + + &[data-padding-inline-regular='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-condensed); + } + + &[data-padding-inline-regular='cozy'] { + padding-inline: var(--base-size-12); + } + + &[data-padding-inline-regular='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-normal); + } + + &[data-padding-inline-regular='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-spacious); + } + } + + @media (--viewportRange-wide) { + &[data-padding-wide='none'] { + padding-block: 0; + padding-inline: 0; + } + + &[data-padding-wide='tight'] { + padding-block: var(--base-size-4); + padding-inline: var(--base-size-4); + } + + &[data-padding-wide='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-condensed); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-condensed); + } + + &[data-padding-wide='cozy'] { + padding-block: var(--base-size-12); + padding-inline: var(--base-size-12); + } + + &[data-padding-wide='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-normal); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-normal); + } + + &[data-padding-wide='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-spacious); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-spacious); + } + + &[data-direction-wide='horizontal'] { + flex-flow: row; + } + + &[data-direction-wide='vertical'] { + flex-flow: column; + } + + &[data-gap-wide='none'] { + --stack-gap: 0; + } + + &[data-gap-wide='tight'] { + --stack-gap: var(--base-size-4); + } + + &[data-gap-wide='condensed'] { + --stack-gap: var(--stack-gap-condensed); + } + + &[data-gap-wide='cozy'] { + --stack-gap: var(--base-size-12); + } + + &[data-gap-wide='normal'] { + --stack-gap: var(--stack-gap-normal); + } + + &[data-gap-wide='spacious'] { + --stack-gap: var(--stack-gap-spacious); + } + + &[data-align-wide='start'] { + align-items: flex-start; + } + + &[data-align-wide='center'] { + align-items: center; + } + + &[data-align-wide='end'] { + align-items: flex-end; + } + + &[data-align-wide='baseline'] { + align-items: baseline; + } + + &[data-justify-wide='start'] { + justify-content: flex-start; + } + + &[data-justify-wide='center'] { + justify-content: center; + } + + &[data-justify-wide='end'] { + justify-content: flex-end; + } + + &[data-justify-wide='space-between'] { + justify-content: space-between; + } + + &[data-justify-wide='space-evenly'] { + justify-content: space-evenly; + } + + &[data-wrap-wide='wrap'] { + flex-wrap: wrap; + } + + &[data-wrap-wide='nowrap'] { + flex-wrap: nowrap; + } + + &[data-padding-block-wide='none'] { + padding-block: 0; + } + + &[data-padding-block-wide='tight'] { + padding-block: var(--base-size-4); + } + + &[data-padding-block-wide='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-condensed); + } + + &[data-padding-block-wide='cozy'] { + padding-block: var(--base-size-12); + } - &[data-padding-wide='tight'] { - padding-block: var(--base-size-4); - padding-inline: var(--base-size-4); - } + &[data-padding-block-wide='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-normal); + } - &[data-padding-wide='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-condensed); - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-condensed); - } + &[data-padding-block-wide='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--stack-padding-spacious); + } - &[data-padding-wide='cozy'] { - padding-block: var(--base-size-12); - padding-inline: var(--base-size-12); - } + &[data-padding-inline-wide='none'] { + padding-inline: 0; + } - &[data-padding-wide='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-normal); - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-normal); - } + &[data-padding-inline-wide='tight'] { + padding-inline: var(--base-size-4); + } - &[data-padding-wide='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-spacious); - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-spacious); - } + &[data-padding-inline-wide='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-condensed); + } - &[data-direction-wide='horizontal'] { - flex-flow: row; - } + &[data-padding-inline-wide='cozy'] { + padding-inline: var(--base-size-12); + } - &[data-direction-wide='vertical'] { - flex-flow: column; - } + &[data-padding-inline-wide='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-normal); + } - &[data-gap-wide='none'] { - --stack-gap: 0; - } - - &[data-gap-wide='tight'] { - --stack-gap: var(--base-size-4); - } - - &[data-gap-wide='condensed'] { - --stack-gap: var(--stack-gap-condensed); - } - - &[data-gap-wide='cozy'] { - --stack-gap: var(--base-size-12); - } - - &[data-gap-wide='normal'] { - --stack-gap: var(--stack-gap-normal); - } - - &[data-gap-wide='spacious'] { - --stack-gap: var(--stack-gap-spacious); - } - - &[data-align-wide='start'] { - align-items: flex-start; - } - - &[data-align-wide='center'] { - align-items: center; - } - - &[data-align-wide='end'] { - align-items: flex-end; - } - - &[data-align-wide='baseline'] { - align-items: baseline; - } - - &[data-justify-wide='start'] { - justify-content: flex-start; - } - - &[data-justify-wide='center'] { - justify-content: center; - } - - &[data-justify-wide='end'] { - justify-content: flex-end; - } - - &[data-justify-wide='space-between'] { - justify-content: space-between; - } - - &[data-justify-wide='space-evenly'] { - justify-content: space-evenly; - } - - &[data-wrap-wide='wrap'] { - flex-wrap: wrap; - } - - &[data-wrap-wide='nowrap'] { - flex-wrap: nowrap; - } - - &[data-padding-block-wide='none'] { - padding-block: 0; - } - - &[data-padding-block-wide='tight'] { - padding-block: var(--base-size-4); - } - - &[data-padding-block-wide='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-condensed); - } - - &[data-padding-block-wide='cozy'] { - padding-block: var(--base-size-12); - } - - &[data-padding-block-wide='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-normal); - } - - &[data-padding-block-wide='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--stack-padding-spacious); - } - - &[data-padding-inline-wide='none'] { - padding-inline: 0; - } - - &[data-padding-inline-wide='tight'] { - padding-inline: var(--base-size-4); - } - - &[data-padding-inline-wide='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-condensed); - } - - &[data-padding-inline-wide='cozy'] { - padding-inline: var(--base-size-12); - } - - &[data-padding-inline-wide='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-normal); - } - - &[data-padding-inline-wide='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--stack-padding-spacious); + &[data-padding-inline-wide='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--stack-padding-spacious); + } } } -} - -.StackItem { - flex: 0 1 auto; - min-inline-size: 0; - &[data-shrink='false'], - &[data-shrink-narrow='false'] { - flex-shrink: 0; - } + .StackItem { + flex: 0 1 auto; + min-inline-size: 0; - &[data-grow='true'], - &[data-grow-narrow='true'] { - flex-grow: 1; - } + &[data-shrink='false'], + &[data-shrink-narrow='false'] { + flex-shrink: 0; + } - @media (--viewportRange-regular) { - &[data-grow-regular='true'] { + &[data-grow='true'], + &[data-grow-narrow='true'] { flex-grow: 1; } - &[data-grow-regular='false'] { - flex-grow: 0; - } + @media (--viewportRange-regular) { + &[data-grow-regular='true'] { + flex-grow: 1; + } - &[data-shrink-regular='true'] { - flex-shrink: 1; - } + &[data-grow-regular='false'] { + flex-grow: 0; + } - &[data-shrink-regular='false'] { - flex-shrink: 0; - } - } + &[data-shrink-regular='true'] { + flex-shrink: 1; + } - @media (--viewportRange-wide) { - &[data-grow-wide='true'] { - flex-grow: 1; + &[data-shrink-regular='false'] { + flex-shrink: 0; + } } - &[data-grow-wide='false'] { - flex-grow: 0; - } + @media (--viewportRange-wide) { + &[data-grow-wide='true'] { + flex-grow: 1; + } - &[data-shrink-wide='true'] { - flex-shrink: 1; - } + &[data-grow-wide='false'] { + flex-grow: 0; + } - &[data-shrink-wide='false'] { - flex-shrink: 0; + &[data-shrink-wide='true'] { + flex-shrink: 1; + } + + &[data-shrink-wide='false'] { + flex-shrink: 0; + } } } } diff --git a/packages/react/src/StateLabel/StateLabel.module.css b/packages/react/src/StateLabel/StateLabel.module.css index 1b20c2cfbd4..339d74b2ee5 100644 --- a/packages/react/src/StateLabel/StateLabel.module.css +++ b/packages/react/src/StateLabel/StateLabel.module.css @@ -1,135 +1,137 @@ -.StateLabel { - display: inline-flex; - align-items: center; - font-weight: var(--base-text-weight-semibold); - /* stylelint-disable-next-line primer/typography */ - line-height: 16px; - color: var(--fgColor-onEmphasis); - text-align: center; - border-radius: var(--borderRadius-full); -} - -/* Size variants */ -.StateLabel:where([data-size='small']) { - padding: var(--base-size-4) var(--base-size-8); - font-size: var(--text-body-size-small); -} - -.StateLabel:where([data-size='medium']) { - padding: var(--base-size-8) var(--base-size-12); - font-size: var(--text-body-size-medium); -} - -/* Status color variants */ -.StateLabel:where([data-status='issueClosed']) { - background-color: var(--bgColor-done-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); -} - -.StateLabel:where([data-status='issueClosedNotPlanned']) { - background-color: var(--bgColor-neutral-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent); -} - -.StateLabel:where([data-status='pullClosed']) { - background-color: var(--bgColor-closed-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent); -} - -.StateLabel:where([data-status='pullMerged']) { - background-color: var(--bgColor-done-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); -} - -.StateLabel:where([data-status='pullQueued']) { - background-color: var(--bgColor-attention-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent); -} - -.StateLabel:where([data-status='issueOpened']) { - background-color: var(--bgColor-open-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); -} - -.StateLabel:where([data-status='pullOpened']) { - background-color: var(--bgColor-open-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); -} - -.StateLabel:where([data-status='draft']) { - background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis)); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) - var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent)); -} - -.StateLabel:where([data-status='issueDraft']) { - background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis)); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) - var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent)); -} - -.StateLabel:where([data-status='unavailable']) { - background-color: var(--bgColor-neutral-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent); -} - -.StateLabel:where([data-status='open']) { - background-color: var(--bgColor-open-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); -} - -.StateLabel:where([data-status='closed']) { - background-color: var(--bgColor-done-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); -} - -.StateLabel:where([data-status='alertOpened']) { - background-color: var(--bgColor-open-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); -} - -.StateLabel:where([data-status='alertFixed']) { - background-color: var(--bgColor-done-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); -} - -.StateLabel:where([data-status='alertDismissed']) { - background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis)); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) - var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent)); -} - -.StateLabel:where([data-status='alertClosed']) { - background-color: var(--bgColor-closed-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent); -} - -.StateLabel:where([data-status='archived']) { - background-color: var(--bgColor-neutral-emphasis); - color: var(--fgColor-onEmphasis); - box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent); -} - -.Icon { - margin-right: var(--base-size-4); -} - -.Icon:where([data-size-small]) { - width: 1em; +@layer primer.components.StateLabel { + .StateLabel { + display: inline-flex; + align-items: center; + font-weight: var(--base-text-weight-semibold); + /* stylelint-disable-next-line primer/typography */ + line-height: 16px; + color: var(--fgColor-onEmphasis); + text-align: center; + border-radius: var(--borderRadius-full); + } + + /* Size variants */ + .StateLabel:where([data-size='small']) { + padding: var(--base-size-4) var(--base-size-8); + font-size: var(--text-body-size-small); + } + + .StateLabel:where([data-size='medium']) { + padding: var(--base-size-8) var(--base-size-12); + font-size: var(--text-body-size-medium); + } + + /* Status color variants */ + .StateLabel:where([data-status='issueClosed']) { + background-color: var(--bgColor-done-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); + } + + .StateLabel:where([data-status='issueClosedNotPlanned']) { + background-color: var(--bgColor-neutral-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent); + } + + .StateLabel:where([data-status='pullClosed']) { + background-color: var(--bgColor-closed-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent); + } + + .StateLabel:where([data-status='pullMerged']) { + background-color: var(--bgColor-done-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); + } + + .StateLabel:where([data-status='pullQueued']) { + background-color: var(--bgColor-attention-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent); + } + + .StateLabel:where([data-status='issueOpened']) { + background-color: var(--bgColor-open-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); + } + + .StateLabel:where([data-status='pullOpened']) { + background-color: var(--bgColor-open-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); + } + + .StateLabel:where([data-status='draft']) { + background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis)); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) + var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent)); + } + + .StateLabel:where([data-status='issueDraft']) { + background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis)); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) + var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent)); + } + + .StateLabel:where([data-status='unavailable']) { + background-color: var(--bgColor-neutral-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent); + } + + .StateLabel:where([data-status='open']) { + background-color: var(--bgColor-open-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); + } + + .StateLabel:where([data-status='closed']) { + background-color: var(--bgColor-done-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); + } + + .StateLabel:where([data-status='alertOpened']) { + background-color: var(--bgColor-open-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent); + } + + .StateLabel:where([data-status='alertFixed']) { + background-color: var(--bgColor-done-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent); + } + + .StateLabel:where([data-status='alertDismissed']) { + background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis)); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) + var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent)); + } + + .StateLabel:where([data-status='alertClosed']) { + background-color: var(--bgColor-closed-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent); + } + + .StateLabel:where([data-status='archived']) { + background-color: var(--bgColor-neutral-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent); + } + + .Icon { + margin-right: var(--base-size-4); + } + + .Icon:where([data-size-small]) { + width: 1em; + } } diff --git a/packages/react/src/SubNav/SubNav.module.css b/packages/react/src/SubNav/SubNav.module.css index bac390dcd4b..7c856afa254 100644 --- a/packages/react/src/SubNav/SubNav.module.css +++ b/packages/react/src/SubNav/SubNav.module.css @@ -1,69 +1,71 @@ -.SubNav { - display: flex; - justify-content: space-between; -} - -.Body { - display: flex; - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: -1px; - - & > * { - margin-left: var(--base-size-8); +@layer primer.components.SubNav { + .SubNav { + display: flex; + justify-content: space-between; } - & > *:first-child { - margin-left: 0; - } -} + .Body { + display: flex; + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: -1px; -.Actions { - align-self: center; -} + & > * { + margin-left: var(--base-size-8); + } -.Links { - display: flex; -} - -.Link { - display: flex; - min-height: 34px; /* custom values for SubNav */ - padding-right: var(--base-size-16); - padding-left: var(--base-size-16); - font-size: var(--text-body-size-medium); - font-weight: var(--base-text-weight-medium); - /* stylelint-disable-next-line primer/typography */ - line-height: 20px; /* custom values for SubNav */ - color: var(--fgColor-default); - text-align: center; - text-decoration: none; - border-top: var(--borderWidth-thin) solid var(--borderColor-default); - border-right: var(--borderWidth-thin) solid var(--borderColor-default); - border-bottom: var(--borderWidth-thin) solid var(--borderColor-default); - align-items: center; + & > *:first-child { + margin-left: 0; + } + } - &:first-of-type { - border-left: var(--borderWidth-thin) solid var(--borderColor-default); - border-top-left-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); + .Actions { + align-self: center; } - &:last-of-type { - border-top-right-radius: var(--borderRadius-medium); - border-bottom-right-radius: var(--borderRadius-medium); + .Links { + display: flex; } - &:hover, - &:focus { + .Link { + display: flex; + min-height: 34px; /* custom values for SubNav */ + padding-right: var(--base-size-16); + padding-left: var(--base-size-16); + font-size: var(--text-body-size-medium); + font-weight: var(--base-text-weight-medium); + /* stylelint-disable-next-line primer/typography */ + line-height: 20px; /* custom values for SubNav */ + color: var(--fgColor-default); + text-align: center; text-decoration: none; - background-color: var(--bgColor-muted); - transition: background-color 0.2s ease; - } + border-top: var(--borderWidth-thin) solid var(--borderColor-default); + border-right: var(--borderWidth-thin) solid var(--borderColor-default); + border-bottom: var(--borderWidth-thin) solid var(--borderColor-default); + align-items: center; + + &:first-of-type { + border-left: var(--borderWidth-thin) solid var(--borderColor-default); + border-top-left-radius: var(--borderRadius-medium); + border-bottom-left-radius: var(--borderRadius-medium); + } + + &:last-of-type { + border-top-right-radius: var(--borderRadius-medium); + border-bottom-right-radius: var(--borderRadius-medium); + } + + &:hover, + &:focus { + text-decoration: none; + background-color: var(--bgColor-muted); + transition: background-color 0.2s ease; + } - &:is([data-selected='true']) { - color: var(--fgColor-onEmphasis); - background-color: var(--bgColor-accent-emphasis); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-accent-emphasis); + &:is([data-selected='true']) { + color: var(--fgColor-onEmphasis); + background-color: var(--bgColor-accent-emphasis); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-accent-emphasis); + } } } diff --git a/packages/react/src/TabNav/TabNav.module.css b/packages/react/src/TabNav/TabNav.module.css index 162c804e429..19682ddeaa4 100644 --- a/packages/react/src/TabNav/TabNav.module.css +++ b/packages/react/src/TabNav/TabNav.module.css @@ -1,42 +1,44 @@ -.TabNavTabList { - display: flex; - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: -1px; - overflow: auto; -} - -.TabNavNav { - margin-top: 0; - border-bottom: var(--borderWidth-thin) solid var(--borderColor-default); -} +@layer primer.components.TabNav { + .TabNavTabList { + display: flex; + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: -1px; + overflow: auto; + } -.TabNavLink { - padding: var(--base-size-8) var(--base-size-12); - font-size: var(--text-body-size-medium); - /* stylelint-disable-next-line primer/typography */ - line-height: 20px; - color: var(--fgColor-default); - text-decoration: none; - background-color: transparent; - border: var(--borderWidth-thin) solid transparent; - border-bottom: 0; + .TabNavNav { + margin-top: 0; + border-bottom: var(--borderWidth-thin) solid var(--borderColor-default); + } - &:hover { + .TabNavLink { + padding: var(--base-size-8) var(--base-size-12); + font-size: var(--text-body-size-medium); + /* stylelint-disable-next-line primer/typography */ + line-height: 20px; color: var(--fgColor-default); text-decoration: none; - } + background-color: transparent; + border: var(--borderWidth-thin) solid transparent; + border-bottom: 0; - &:focus { - text-decoration: none; + &:hover { + color: var(--fgColor-default); + text-decoration: none; + } - @mixin focusOutline -6px; - } + &:focus { + text-decoration: none; - &.Selected { - color: var(--fgColor-default); - background-color: var(--bgColor-default); - border-color: var(--borderColor-default); - border-top-left-radius: var(--borderRadius-medium); - border-top-right-radius: var(--borderRadius-medium); + @mixin focusOutline -6px; + } + + &.Selected { + color: var(--fgColor-default); + background-color: var(--bgColor-default); + border-color: var(--borderColor-default); + border-top-left-radius: var(--borderRadius-medium); + border-top-right-radius: var(--borderRadius-medium); + } } } diff --git a/packages/react/src/__tests__/css-layers.test.ts b/packages/react/src/__tests__/css-layers.test.ts index 6fa172f0af8..65c09e4da69 100644 --- a/packages/react/src/__tests__/css-layers.test.ts +++ b/packages/react/src/__tests__/css-layers.test.ts @@ -45,6 +45,16 @@ const allowlist = new Set([ path.resolve(import.meta.dirname, '../ProgressBar/ProgressBar.module.css'), path.resolve(import.meta.dirname, '../Radio/Radio.module.css'), path.resolve(import.meta.dirname, '../PageLayout/PageLayout.module.css'), + path.resolve(import.meta.dirname, '../ScrollableRegion/ScrollableRegion.module.css'), + path.resolve(import.meta.dirname, '../Select/Select.module.css'), + path.resolve(import.meta.dirname, '../SideNav.module.css'), + path.resolve(import.meta.dirname, '../Skeleton/SkeletonBox.module.css'), + path.resolve(import.meta.dirname, '../SkeletonAvatar/SkeletonAvatar.module.css'), + path.resolve(import.meta.dirname, '../SkeletonText/SkeletonText.module.css'), + path.resolve(import.meta.dirname, '../Stack/Stack.module.css'), + path.resolve(import.meta.dirname, '../StateLabel/StateLabel.module.css'), + path.resolve(import.meta.dirname, '../SubNav/SubNav.module.css'), + path.resolve(import.meta.dirname, '../TabNav/TabNav.module.css'), ]) const files = Array.from(allowlist).map(file => { return [path.relative(path.resolve(import.meta.dirname, '..'), file), file] From 38b804a84568ffe802c85bc44efd21f00847dee6 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 9 Jun 2026 13:31:56 -0500 Subject: [PATCH 2/3] chore: remove Select CSS whitespace Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- packages/react/src/Select/Select.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Select/Select.module.css b/packages/react/src/Select/Select.module.css index 50159faa24f..5ca7121172b 100644 --- a/packages/react/src/Select/Select.module.css +++ b/packages/react/src/Select/Select.module.css @@ -24,14 +24,14 @@ /* 2. Prevents visible overlap of partially transparent background colors. * 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a - * transparent background-color on a disabled . */ &:disabled { background-color: transparent; } /* 3. Maintain dark bg color in Firefox on Windows high-contrast mode - * Firefox makes the 's background color white when setting 'background-color: transparent;' */ @media screen and (forced-colors: active) { &:disabled { From 649fdd10e6a890dde32957009aba36019f66edcb Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 9 Jun 2026 15:13:12 -0500 Subject: [PATCH 3/3] chore: standardize CSS layer changeset wording Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/css-layers-navigation-skeletons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/css-layers-navigation-skeletons.md b/.changeset/css-layers-navigation-skeletons.md index 70f95d01ceb..88bbc9c1b66 100644 --- a/.changeset/css-layers-navigation-skeletons.md +++ b/.changeset/css-layers-navigation-skeletons.md @@ -2,4 +2,4 @@ '@primer/react': patch --- -ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, TabNav: Improve custom class override behavior for component styles +ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, TabNav: Add CSS layer support for component styles