diff --git a/.changeset/css-layers-layout-foundations-a.md b/.changeset/css-layers-layout-foundations-a.md new file mode 100644 index 00000000000..067a3b1f7db --- /dev/null +++ b/.changeset/css-layers-layout-foundations-a.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Link, Overlay, Pagehead, PageHeader, Pagination, Placeholder, Popover, ProgressBar, Radio: Add CSS layer support for component styles diff --git a/packages/react/src/Link/Link.module.css b/packages/react/src/Link/Link.module.css index 721f70e8e79..13b7c9c91ac 100644 --- a/packages/react/src/Link/Link.module.css +++ b/packages/react/src/Link/Link.module.css @@ -1,42 +1,44 @@ -:where(.Link) { - color: var(--fgColor-accent); - text-decoration: none; - text-underline-offset: 0.05rem; +@layer primer.components.Link { + :where(.Link) { + color: var(--fgColor-accent); + text-decoration: none; + text-underline-offset: 0.05rem; - /* Reset for button tags */ - &:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - user-select: none; - background-color: transparent; - border: 0; - appearance: none; - } + /* Reset for button tags */ + &:is(button) { + display: inline-block; + padding: 0; + font-size: inherit; + white-space: nowrap; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 0; + appearance: none; + } - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: underline; + } - /* - Inline links (inside a text block) should have underline based on accessibility setting set in data-attribute - */ - [data-a11y-link-underlines='true'] &:where([data-inline='true']) { - text-decoration: underline; + /* + Inline links (inside a text block) should have underline based on accessibility setting set in data-attribute + */ + [data-a11y-link-underlines='true'] &:where([data-inline='true']) { + text-decoration: underline; - &:hover { - text-decoration: none; + &:hover { + text-decoration: none; + } } - } - &:where([data-muted='true']) { - color: var(--fgColor-muted); + &:where([data-muted='true']) { + color: var(--fgColor-muted); - &:hover { - color: var(--fgColor-accent); - text-decoration: none; + &:hover { + color: var(--fgColor-accent); + text-decoration: none; + } } } } diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css index 57029a2864f..d1f2367292f 100644 --- a/packages/react/src/Overlay/Overlay.module.css +++ b/packages/react/src/Overlay/Overlay.module.css @@ -1,238 +1,240 @@ -@keyframes overlay-appear { - 0% { - opacity: 0; - } +@layer primer.components.Overlay { + @keyframes overlay-appear { + 0% { + opacity: 0; + } - 100% { - opacity: 1; + 100% { + opacity: 1; + } } -} -.Overlay { - position: absolute; - max-width: calc(100vw - 2rem); - width: auto; - min-width: 192px; - height: auto; - max-height: 100vh; - overflow: auto; - background-color: var(--overlay-bgColor); - border-radius: var(--borderRadius-large); - box-shadow: var(--shadow-floating-small); - - &[data-anchor-position='false'], - &:not([data-anchor-position]):not([data-variant='modal']) { - /* stylelint-disable-next-line primer/spacing */ - right: var(--right, auto); - /* stylelint-disable-next-line primer/spacing */ - bottom: var(--bottom, auto); - - /* stylelint-disable-next-line selector-max-specificity */ - &[data-responsive='fullscreen']:not([data-variant]) { - @media screen and (--viewportRange-narrow) { - top: 0; - left: 0; - } - } + .Overlay { + position: absolute; + max-width: calc(100vw - 2rem); + width: auto; + min-width: 192px; + height: auto; + max-height: 100vh; + overflow: auto; + background-color: var(--overlay-bgColor); + border-radius: var(--borderRadius-large); + box-shadow: var(--shadow-floating-small); - &:not([data-variant]) { + &[data-anchor-position='false'], + &:not([data-anchor-position]):not([data-variant='modal']) { /* stylelint-disable-next-line primer/spacing */ - top: var(--top, auto); + right: var(--right, auto); /* stylelint-disable-next-line primer/spacing */ - left: var(--left, auto); + bottom: var(--bottom, auto); + + /* stylelint-disable-next-line selector-max-specificity */ + &[data-responsive='fullscreen']:not([data-variant]) { + @media screen and (--viewportRange-narrow) { + top: 0; + left: 0; + } + } + + &:not([data-variant]) { + /* stylelint-disable-next-line primer/spacing */ + top: var(--top, auto); + /* stylelint-disable-next-line primer/spacing */ + left: var(--left, auto); + } } - } - &:focus { - outline: none; - } + &:focus { + outline: none; + } - @media (forced-colors: active) { - /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */ - outline: solid 1px transparent; - } + @media (forced-colors: active) { + /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */ + outline: solid 1px transparent; + } - &:where([data-reflow-container='true']) { - max-width: calc(100vw - 2rem); - } + &:where([data-reflow-container='true']) { + max-width: calc(100vw - 2rem); + } - &:where([data-overflow-auto]) { - overflow: auto; - } + &:where([data-overflow-auto]) { + overflow: auto; + } - &:where([data-overflow-hidden]) { - overflow: hidden; - } + &:where([data-overflow-hidden]) { + overflow: hidden; + } - &:where([data-overflow-scroll]) { - overflow: scroll; - } + &:where([data-overflow-scroll]) { + overflow: scroll; + } - &:where([data-overflow-visible]) { - overflow: visible; - } + &:where([data-overflow-visible]) { + overflow: visible; + } - &:where([data-height-xsmall]) { - height: 192px; - } + &:where([data-height-xsmall]) { + height: 192px; + } - &:where([data-height-small]) { - height: 256px; - } + &:where([data-height-small]) { + height: 256px; + } - &:where([data-height-medium]) { - height: 320px; - } + &:where([data-height-medium]) { + height: 320px; + } - &:where([data-height-large]) { - height: 432px; - } + &:where([data-height-large]) { + height: 432px; + } - &:where([data-height-xlarge]) { - height: 600px; - } + &:where([data-height-xlarge]) { + height: 600px; + } - &:where([data-height-auto]), - &:where([data-height-initial]) { - height: auto; - } + &:where([data-height-auto]), + &:where([data-height-initial]) { + height: auto; + } - &:where([data-height-fit-content]) { - height: fit-content; - } + &:where([data-height-fit-content]) { + height: fit-content; + } - &:where([data-max-height-xsmall]) { - max-height: min(192px, 100vh); + &:where([data-max-height-xsmall]) { + max-height: min(192px, 100vh); - @supports (height: 100dvh) { - max-height: min(192px, 100dvh); + @supports (height: 100dvh) { + max-height: min(192px, 100dvh); + } } - } - &:where([data-max-height-small]) { - max-height: min(256px, 100vh); + &:where([data-max-height-small]) { + max-height: min(256px, 100vh); - @supports (height: 100dvh) { - max-height: min(256px, 100dvh); + @supports (height: 100dvh) { + max-height: min(256px, 100dvh); + } } - } - &:where([data-max-height-medium]) { - max-height: min(320px, 100vh); + &:where([data-max-height-medium]) { + max-height: min(320px, 100vh); - @supports (height: 100dvh) { - max-height: min(320px, 100dvh); + @supports (height: 100dvh) { + max-height: min(320px, 100dvh); + } } - } - &:where([data-max-height-large]) { - max-height: min(432px, 100vh); + &:where([data-max-height-large]) { + max-height: min(432px, 100vh); - @supports (height: 100dvh) { - max-height: min(432px, 100dvh); + @supports (height: 100dvh) { + max-height: min(432px, 100dvh); + } } - } - &:where([data-max-height-xlarge]) { - max-height: min(600px, 100vh); + &:where([data-max-height-xlarge]) { + max-height: min(600px, 100vh); - @supports (height: 100dvh) { - max-height: min(600px, 100dvh); + @supports (height: 100dvh) { + max-height: min(600px, 100dvh); + } } - } - &:where([data-max-height-fit-content]) { - max-height: fit-content; - } + &:where([data-max-height-fit-content]) { + max-height: fit-content; + } - &:where([data-width-small]) { - width: 256px; - } + &:where([data-width-small]) { + width: 256px; + } - &:where([data-width-medium]) { - width: 320px; - } + &:where([data-width-medium]) { + width: 320px; + } - &:where([data-width-large]) { - /* stylelint-disable-next-line primer/responsive-widths */ - width: 480px; - } + &:where([data-width-large]) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 480px; + } - &:where([data-width-xlarge]) { - /* stylelint-disable-next-line primer/responsive-widths */ - width: 640px; - } + &:where([data-width-xlarge]) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 640px; + } - &:where([data-width-xxlarge]) { - /* stylelint-disable-next-line primer/responsive-widths */ - width: 960px; - } + &:where([data-width-xxlarge]) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 960px; + } - &:where([data-width-auto]) { - width: auto; - } + &:where([data-width-auto]) { + width: auto; + } - &:where([data-max-width-small]) { - max-width: 256px; - } + &:where([data-max-width-small]) { + max-width: 256px; + } - &:where([data-max-width-medium]) { - max-width: 320px; - } + &:where([data-max-width-medium]) { + max-width: 320px; + } - &:where([data-max-width-large]) { - max-width: 480px; - } + &:where([data-max-width-large]) { + max-width: 480px; + } - &:where([data-max-width-xlarge]) { - max-width: 640px; - } + &:where([data-max-width-xlarge]) { + max-width: 640px; + } - &:where([data-max-width-xxlarge]) { - max-width: 960px; - } + &:where([data-max-width-xxlarge]) { + max-width: 960px; + } - &:where([data-visibility-visible]) { - visibility: visible; - } + &:where([data-visibility-visible]) { + visibility: visible; + } - &:where([data-visibility-hidden]) { - visibility: hidden; - } + &:where([data-visibility-hidden]) { + visibility: hidden; + } - &:where([data-responsive='fullscreen']), - &[data-responsive='fullscreen'][data-anchor-position='true'], - &[data-component='AnchoredOverlay'][data-responsive='fullscreen'][data-anchor-position='true'] { - @media screen and (--viewportRange-narrow) { - position: fixed; - top: 0; - left: 0; - width: 100vw; - max-width: none; - height: 100vh; - max-height: none; - margin: 0; - border-radius: unset; - /* stylelint-disable-next-line primer/spacing */ - padding-bottom: env(safe-area-inset-bottom); + &:where([data-responsive='fullscreen']), + &[data-responsive='fullscreen'][data-anchor-position='true'], + &[data-component='AnchoredOverlay'][data-responsive='fullscreen'][data-anchor-position='true'] { + @media screen and (--viewportRange-narrow) { + position: fixed; + top: 0; + left: 0; + width: 100vw; + max-width: none; + height: 100vh; + max-height: none; + margin: 0; + border-radius: unset; + /* stylelint-disable-next-line primer/spacing */ + padding-bottom: env(safe-area-inset-bottom); + + @supports (height: 100dvh) { + /* fix for mobile safari (100vh clips the screen with the toolbar) */ + height: 100dvh; + } + } + } - @supports (height: 100dvh) { - /* fix for mobile safari (100vh clips the screen with the toolbar) */ + @supports (height: 100dvh) { + /* fix for mobile safari (100vh clips the screen with the toolbar) */ + &:where([data-variant='fullscreen']) { height: 100dvh; } } } - @supports (height: 100dvh) { - /* fix for mobile safari (100vh clips the screen with the toolbar) */ - &:where([data-variant='fullscreen']) { - height: 100dvh; + @media (prefers-reduced-motion: no-preference) { + .Overlay { + animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1); } } } - -@media (prefers-reduced-motion: no-preference) { - .Overlay { - animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1); - } -} diff --git a/packages/react/src/PageHeader/PageHeader.module.css b/packages/react/src/PageHeader/PageHeader.module.css index 992f1618d12..522b6106693 100644 --- a/packages/react/src/PageHeader/PageHeader.module.css +++ b/packages/react/src/PageHeader/PageHeader.module.css @@ -1,330 +1,332 @@ -.PageHeader { - /* Grid Row Order */ - --grid-row-order-context-area: 1; - --grid-row-order-leading-action: 2; - --grid-row-order-breadcrumbs: 2; - --grid-row-order-title-area: 2; - --grid-row-order-trailing-action: 2; - --grid-row-order-actions: 2; - --grid-row-order-description: 3; - --grid-row-order-navigation: 4; - - /* Title Area Region Order */ - --title-area-region-order-leading-visual: 0; - --title-area-region-order-title: 1; - --title-area-region-order-trailing-visual: 2; - - /* Context Area Region Order */ - --context-area-region-order-parent-link: 0; - --context-area-region-order-context-bar: 1; - --context-area-region-order-context-area-actions: 2; - - display: grid; - - /* We have max 5 columns. */ - grid-template-columns: auto auto auto auto 1fr; - grid-template-areas: - 'context-area context-area context-area context-area context-area' - 'leading-action breadcrumbs title-area trailing-action actions' - 'description description description description description' - 'navigation navigation navigation navigation navigation'; - - /* - line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives. - --custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values. - We don't want these values to be overridden but still want to allow consumers to override them if needed. - */ - /* stylelint-disable selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */ - &:has([data-component='TitleArea'][data-size-variant='large']) { - font-size: var(--custom-font-size, var(--text-title-size-large, 2rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */ - - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); - } - - &:has([data-component='TitleArea'][data-size-variant='medium']) { - font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */ - - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - } - - &:has([data-component='TitleArea'][data-size-variant='subtitle']) { - font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */ - - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - } - - /* Responsive size variants */ - @media (--viewportRange-narrow) { - &:has([data-component='TitleArea'][data-size-variant-narrow='large']) { +@layer primer.components.PageHeader { + .PageHeader { + /* Grid Row Order */ + --grid-row-order-context-area: 1; + --grid-row-order-leading-action: 2; + --grid-row-order-breadcrumbs: 2; + --grid-row-order-title-area: 2; + --grid-row-order-trailing-action: 2; + --grid-row-order-actions: 2; + --grid-row-order-description: 3; + --grid-row-order-navigation: 4; + + /* Title Area Region Order */ + --title-area-region-order-leading-visual: 0; + --title-area-region-order-title: 1; + --title-area-region-order-trailing-visual: 2; + + /* Context Area Region Order */ + --context-area-region-order-parent-link: 0; + --context-area-region-order-context-bar: 1; + --context-area-region-order-context-area-actions: 2; + + display: grid; + + /* We have max 5 columns. */ + grid-template-columns: auto auto auto auto 1fr; + grid-template-areas: + 'context-area context-area context-area context-area context-area' + 'leading-action breadcrumbs title-area trailing-action actions' + 'description description description description description' + 'navigation navigation navigation navigation navigation'; + + /* + line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives. + --custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values. + We don't want these values to be overridden but still want to allow consumers to override them if needed. + */ + /* stylelint-disable selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */ + &:has([data-component='TitleArea'][data-size-variant='large']) { font-size: var(--custom-font-size, var(--text-title-size-large, 2rem)); font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */ --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); } - &:has([data-component='TitleArea'][data-size-variant-narrow='medium']) { + &:has([data-component='TitleArea'][data-size-variant='medium']) { font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */ --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); } - &:has([data-component='TitleArea'][data-size-variant-narrow='subtitle']) { + &:has([data-component='TitleArea'][data-size-variant='subtitle']) { font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */ --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); } - } - @media (--viewportRange-regular) { - &:has([data-component='TitleArea'][data-size-variant-regular='large']) { - font-size: var(--custom-font-size, var(--text-title-size-large, 2rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); + /* Responsive size variants */ + @media (--viewportRange-narrow) { + &:has([data-component='TitleArea'][data-size-variant-narrow='large']) { + font-size: var(--custom-font-size, var(--text-title-size-large, 2rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); - } + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); + } - &:has([data-component='TitleArea'][data-size-variant-regular='medium']) { - font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + &:has([data-component='TitleArea'][data-size-variant-narrow='medium']) { + font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - } + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + } - &:has([data-component='TitleArea'][data-size-variant-regular='subtitle']) { - font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + &:has([data-component='TitleArea'][data-size-variant-narrow='subtitle']) { + font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + } } - } - @media (--viewportRange-wide) { - &:has([data-component='TitleArea'][data-size-variant-wide='large']) { - font-size: var(--custom-font-size, var(--text-title-size-large, 2rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); + @media (--viewportRange-regular) { + &:has([data-component='TitleArea'][data-size-variant-regular='large']) { + font-size: var(--custom-font-size, var(--text-title-size-large, 2rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); - } + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); + } - &:has([data-component='TitleArea'][data-size-variant-wide='medium']) { - font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + &:has([data-component='TitleArea'][data-size-variant-regular='medium']) { + font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - } + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + } - &:has([data-component='TitleArea'][data-size-variant-wide='subtitle']) { - font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); - font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); - line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + &:has([data-component='TitleArea'][data-size-variant-regular='subtitle']) { + font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); - --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + } } - } - &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-all]), - &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) { - border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); - padding-block-end: var(--base-size-8); - } + @media (--viewportRange-wide) { + &:has([data-component='TitleArea'][data-size-variant-wide='large']) { + font-size: var(--custom-font-size, var(--text-title-size-large, 2rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); - @media (--viewportRange-narrow) { - &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-narrow]) { - border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); - padding-block-end: var(--base-size-8); - } - } + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); + } - @media (--viewportRange-regular) { - &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-regular]) { - border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); - padding-block-end: var(--base-size-8); + &:has([data-component='TitleArea'][data-size-variant-wide='medium']) { + font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + } + + &:has([data-component='TitleArea'][data-size-variant-wide='subtitle']) { + font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem)); + font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400)); + line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + + --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); + } } - } - @media (--viewportRange-wide) { - &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-wide]) { + &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-all]), + &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) { border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); padding-block-end: var(--base-size-8); } - } - /* stylelint-enable selector-pseudo-class-disallowed-list */ - - & [data-component='PH_LeadingAction'], - & [data-component='PH_TrailingAction'], - & [data-component='PH_Actions'], - & [data-component='PH_LeadingVisual'], - & [data-component='PH_TrailingVisual'] { - height: calc(var(--title-line-height) * 1em); - } - - & [data-hidden-all] { - display: none; - } - & [data-hidden-narrow] { @media (--viewportRange-narrow) { - display: none; + &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-narrow]) { + border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); + padding-block-end: var(--base-size-8); + } } - } - & [data-hidden-regular] { @media (--viewportRange-regular) { - display: none; + &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-regular]) { + border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); + padding-block-end: var(--base-size-8); + } } - } - & [data-hidden-wide] { @media (--viewportRange-wide) { + &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-wide]) { + border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); + padding-block-end: var(--base-size-8); + } + } + /* stylelint-enable selector-pseudo-class-disallowed-list */ + + & [data-component='PH_LeadingAction'], + & [data-component='PH_TrailingAction'], + & [data-component='PH_Actions'], + & [data-component='PH_LeadingVisual'], + & [data-component='PH_TrailingVisual'] { + height: calc(var(--title-line-height) * 1em); + } + + & [data-hidden-all] { display: none; } + + & [data-hidden-narrow] { + @media (--viewportRange-narrow) { + display: none; + } + } + + & [data-hidden-regular] { + @media (--viewportRange-regular) { + display: none; + } + } + + & [data-hidden-wide] { + @media (--viewportRange-wide) { + display: none; + } + } } -} -.ContextArea { - display: flex; - padding-bottom: var(--base-size-8); - font-size: var(--text-body-size-medium, 0.875rem); - font-weight: var(--base-text-weight-normal); - line-height: var(--text-body-lineHeight-medium, 1.4285); - flex-direction: row; - grid-row: var(--grid-row-order-context-area); - grid-area: context-area; - align-items: center; - gap: var(--stack-gap-condensed); -} + .ContextArea { + display: flex; + padding-bottom: var(--base-size-8); + font-size: var(--text-body-size-medium, 0.875rem); + font-weight: var(--base-text-weight-normal); + line-height: var(--text-body-lineHeight-medium, 1.4285); + flex-direction: row; + grid-row: var(--grid-row-order-context-area); + grid-area: context-area; + align-items: center; + gap: var(--stack-gap-condensed); + } -.ParentLink { - display: flex; - align-items: center; - order: var(--context-area-region-order-parent-link); - gap: var(--stack-gap-condensed); -} + .ParentLink { + display: flex; + align-items: center; + order: var(--context-area-region-order-parent-link); + gap: var(--stack-gap-condensed); + } -.ContextBar { - display: flex; - order: var(--context-area-region-order-context-bar); -} + .ContextBar { + display: flex; + order: var(--context-area-region-order-context-bar); + } -.ContextAreaActions { - display: flex; - flex-direction: row; - order: var(--context-area-region-order-context-area-actions); - align-items: center; - gap: var(--stack-gap-condensed); - flex-grow: 1; - justify-content: flex-end; -} + .ContextAreaActions { + display: flex; + flex-direction: row; + order: var(--context-area-region-order-context-area-actions); + align-items: center; + gap: var(--stack-gap-condensed); + flex-grow: 1; + justify-content: flex-end; + } -.TitleArea { - grid-row: var(--grid-row-order-title-area); - grid-area: title-area; - display: flex; - gap: var(--stack-gap-condensed); - flex-direction: row; - align-items: flex-start; -} + .TitleArea { + grid-row: var(--grid-row-order-title-area); + grid-area: title-area; + display: flex; + gap: var(--stack-gap-condensed); + flex-direction: row; + align-items: flex-start; + } -.LeadingAction { - display: flex; - padding-right: var(--base-size-8); - grid-row: var(--grid-row-order-leading-action); - grid-area: leading-action; - align-items: center; -} + .LeadingAction { + display: flex; + padding-right: var(--base-size-8); + grid-row: var(--grid-row-order-leading-action); + grid-area: leading-action; + align-items: center; + } -.Breadcrumbs { - display: flex; - padding-right: var(--base-size-8); - font-size: var(--text-body-size-medium, 0.875rem); - font-weight: var(--base-text-weight-normal); - line-height: var(--text-body-lineHeight-medium, 1.4285); - grid-row: var(--grid-row-order-breadcrumbs); - grid-area: breadcrumbs; - align-items: center; -} + .Breadcrumbs { + display: flex; + padding-right: var(--base-size-8); + font-size: var(--text-body-size-medium, 0.875rem); + font-weight: var(--base-text-weight-normal); + line-height: var(--text-body-lineHeight-medium, 1.4285); + grid-row: var(--grid-row-order-breadcrumbs); + grid-area: breadcrumbs; + align-items: center; + } -.LeadingVisual { - /* using flex and order to display the leading visual in the title area. */ - display: flex; - order: var(--title-area-region-order-leading-visual); - align-items: center; -} + .LeadingVisual { + /* using flex and order to display the leading visual in the title area. */ + display: flex; + order: var(--title-area-region-order-leading-visual); + align-items: center; + } -.Title { - /* using flex and order to display the title in the title area. */ - display: block; - order: var(--title-area-region-order-title); - font-size: inherit; - font-weight: inherit; -} + .Title { + /* using flex and order to display the title in the title area. */ + display: block; + order: var(--title-area-region-order-title); + font-size: inherit; + font-weight: inherit; + } -.Title:where([data-hidden='true']) { - display: none; -} + .Title:where([data-hidden='true']) { + display: none; + } -.TrailingVisual { - /* using flex and order to display the trailing visual in the title area. */ - display: flex; - order: var(--title-area-region-order-trailing-visual); - align-items: center; -} + .TrailingVisual { + /* using flex and order to display the trailing visual in the title area. */ + display: flex; + order: var(--title-area-region-order-trailing-visual); + align-items: center; + } -.TrailingAction { - display: flex; - padding-left: var(--base-size-8); - grid-row: var(--grid-row-order-trailing-action); - grid-area: trailing-action; - align-items: center; -} + .TrailingAction { + display: flex; + padding-left: var(--base-size-8); + grid-row: var(--grid-row-order-trailing-action); + grid-area: trailing-action; + align-items: center; + } -.Actions { - display: flex; - min-width: max-content; - padding-left: var(--base-size-8); - flex-direction: row; - grid-row: var(--grid-row-order-actions); - grid-area: actions; - gap: var(--stack-gap-condensed); - justify-content: flex-end; - align-items: center; -} + .Actions { + display: flex; + min-width: max-content; + padding-left: var(--base-size-8); + flex-direction: row; + grid-row: var(--grid-row-order-actions); + grid-area: actions; + gap: var(--stack-gap-condensed); + justify-content: flex-end; + align-items: center; + } -.Description { - display: flex; - padding-top: var(--base-size-8); - font-size: var(--text-body-size-medium, 0.875rem); - font-weight: var(--base-text-weight-normal); - line-height: var(--text-body-lineHeight-medium, 1.4285); - flex-direction: row; - grid-row: var(--grid-row-order-description); - grid-area: description; - align-items: center; - gap: var(--stack-gap-condensed); -} + .Description { + display: flex; + padding-top: var(--base-size-8); + font-size: var(--text-body-size-medium, 0.875rem); + font-weight: var(--base-text-weight-normal); + line-height: var(--text-body-lineHeight-medium, 1.4285); + flex-direction: row; + grid-row: var(--grid-row-order-description); + grid-area: description; + align-items: center; + gap: var(--stack-gap-condensed); + } -.Navigation { - display: block; - padding-top: var(--base-size-8); - font-size: var(--text-body-size-medium, 0.875rem); - font-weight: var(--base-text-weight-normal); - line-height: var(--text-body-lineHeight-medium, 1.4285); - grid-row: var(--grid-row-order-navigation); - grid-area: navigation; + .Navigation { + display: block; + padding-top: var(--base-size-8); + font-size: var(--text-body-size-medium, 0.875rem); + font-weight: var(--base-text-weight-normal); + line-height: var(--text-body-lineHeight-medium, 1.4285); + grid-row: var(--grid-row-order-navigation); + grid-area: navigation; + } } diff --git a/packages/react/src/Pagehead/Pagehead.module.css b/packages/react/src/Pagehead/Pagehead.module.css index de297a95451..25c2622a2cf 100644 --- a/packages/react/src/Pagehead/Pagehead.module.css +++ b/packages/react/src/Pagehead/Pagehead.module.css @@ -1,8 +1,10 @@ -.Pagehead { - position: relative; - padding-top: var(--base-size-24); - padding-bottom: var(--base-size-24); - margin-bottom: var(--base-size-24); - /* stylelint-disable-next-line primer/borders */ - border-bottom: 1px solid var(--borderColor-default); +@layer primer.components.Pagehead { + .Pagehead { + position: relative; + padding-top: var(--base-size-24); + padding-bottom: var(--base-size-24); + margin-bottom: var(--base-size-24); + /* stylelint-disable-next-line primer/borders */ + border-bottom: 1px solid var(--borderColor-default); + } } diff --git a/packages/react/src/Pagination/Pagination.module.css b/packages/react/src/Pagination/Pagination.module.css index e5e8aa26f09..2e48a5e0e2d 100644 --- a/packages/react/src/Pagination/Pagination.module.css +++ b/packages/react/src/Pagination/Pagination.module.css @@ -1,140 +1,142 @@ -.Page { - min-width: 32px; /* primer.control.medium.size */ - height: 32px; /* primer.control.medium.size */ - padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */ - margin-right: var(--base-size-4); - font-style: normal; - /* stylelint-disable-next-line primer/typography */ - line-height: 1; - color: var(--fgColor-default); - text-align: center; - text-decoration: none; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - user-select: none; - background-color: transparent; - border-radius: var(--borderRadius-medium); - transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); - display: inline-flex; - align-items: center; - justify-content: center; -} - -.Page[rel='prev'] > svg, -.Page[rel='next'] > svg { - /* sizing with `em` so icons scale with inherited font-size */ - height: 1em; - width: 1em; -} - -.Page[rel='prev'] > svg { - margin-inline-end: var(--base-size-4); -} - -.Page[rel='next'] > svg { - margin-inline-start: var(--base-size-4); -} - -.Page:last-child { - margin-right: 0; -} - -.Page:hover, -.Page:focus { - text-decoration: none; - background-color: var(--control-transparent-bgColor-hover); - outline: 0; - transition-duration: 0.1s; -} - -.Page:focus-visible { - outline: 2px solid var(--bgColor-accent-emphasis); - outline-offset: -2px; -} +@layer primer.components.Pagination { + .Page { + min-width: 32px; /* primer.control.medium.size */ + height: 32px; /* primer.control.medium.size */ + padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */ + margin-right: var(--base-size-4); + font-style: normal; + /* stylelint-disable-next-line primer/typography */ + line-height: 1; + color: var(--fgColor-default); + text-align: center; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + background-color: transparent; + border-radius: var(--borderRadius-medium); + transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); + display: inline-flex; + align-items: center; + justify-content: center; + } -.Page:active { - border-color: var(--borderColor-muted); -} + .Page[rel='prev'] > svg, + .Page[rel='next'] > svg { + /* sizing with `em` so icons scale with inherited font-size */ + height: 1em; + width: 1em; + } -.Page[rel='prev'], -.Page[rel='next'] { - color: var(--fgColor-accent); -} + .Page[rel='prev'] > svg { + margin-inline-end: var(--base-size-4); + } -.Page[aria-current], -.Page[aria-current]:hover { - color: var(--fgColor-onEmphasis); - background-color: var(--bgColor-accent-emphasis); - border-color: transparent; -} + .Page[rel='next'] > svg { + margin-inline-start: var(--base-size-4); + } -.Page[aria-current]:focus-visible { - outline: 2px solid var(--bgColor-accent-emphasis); - outline-offset: -2px; - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); -} + .Page:last-child { + margin-right: 0; + } -.Page[aria-hidden], -.Page[aria-hidden]:hover, -.Page[role='presentation'], -.Page[role='presentation']:hover { - color: var(--fgColor-disabled); - cursor: default; - background-color: transparent; -} + .Page:hover, + .Page:focus { + text-decoration: none; + background-color: var(--control-transparent-bgColor-hover); + outline: 0; + transition-duration: 0.1s; + } -.PaginationContainer { - /* stylelint-disable-next-line primer/spacing */ - margin-top: 20px; - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: 15px; - text-align: center; -} + .Page:focus-visible { + outline: 2px solid var(--bgColor-accent-emphasis); + outline-offset: -2px; + } -.TablePaginationSteps { - display: inline-block; -} + .Page:active { + border-color: var(--borderColor-muted); + } -@media screen and (--viewportRange-narrow) { - .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) { - display: none; + .Page[rel='prev'], + .Page[rel='next'] { + color: var(--fgColor-accent); } - .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child { - margin-inline-end: 0; + .Page[aria-current], + .Page[aria-current]:hover { + color: var(--fgColor-onEmphasis); + background-color: var(--bgColor-accent-emphasis); + border-color: transparent; } - .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child { - margin-inline-start: 0; + .Page[aria-current]:focus-visible { + outline: 2px solid var(--bgColor-accent-emphasis); + outline-offset: -2px; + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); } -} -@media screen and (--viewportRange-regular) { - .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) { - display: none; + .Page[aria-hidden], + .Page[aria-hidden]:hover, + .Page[role='presentation'], + .Page[role='presentation']:hover { + color: var(--fgColor-disabled); + cursor: default; + background-color: transparent; } - .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child { - margin-inline-end: 0; + .PaginationContainer { + /* stylelint-disable-next-line primer/spacing */ + margin-top: 20px; + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: 15px; + text-align: center; } - .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child { - margin-inline-start: 0; + .TablePaginationSteps { + display: inline-block; } -} -@media screen and (--viewportRange-wide) { - .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) { - display: none; + @media screen and (--viewportRange-narrow) { + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) { + display: none; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child { + margin-inline-end: 0; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child { + margin-inline-start: 0; + } } - .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child { - margin-inline-end: 0; + @media screen and (--viewportRange-regular) { + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) { + display: none; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child { + margin-inline-end: 0; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child { + margin-inline-start: 0; + } } - .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child { - margin-inline-start: 0; + @media screen and (--viewportRange-wide) { + .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) { + display: none; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child { + margin-inline-end: 0; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child { + margin-inline-start: 0; + } } } diff --git a/packages/react/src/Placeholder.module.css b/packages/react/src/Placeholder.module.css index 9350d004294..4f7b495d3d4 100644 --- a/packages/react/src/Placeholder.module.css +++ b/packages/react/src/Placeholder.module.css @@ -1,14 +1,16 @@ -.Placeholder { - /* these are set in the component */ - --placeholder-width: ; - --placeholder-height: ; +@layer primer.components.Placeholder { + .Placeholder { + /* these are set in the component */ + --placeholder-width: ; + --placeholder-height: ; - width: var(--placeholder-width, 100%); - height: var(--placeholder-height); - padding: var(--base-size-4) var(--base-size-24); - display: grid; - place-items: center; - background-color: var(--bgColor-inset); - border-radius: var(--borderRadius-medium); - border: var(--borderWidth-thin) solid var(--borderColor-muted); + width: var(--placeholder-width, 100%); + height: var(--placeholder-height); + padding: var(--base-size-4) var(--base-size-24); + display: grid; + place-items: center; + background-color: var(--bgColor-inset); + border-radius: var(--borderRadius-medium); + border: var(--borderWidth-thin) solid var(--borderColor-muted); + } } diff --git a/packages/react/src/Popover/Popover.module.css b/packages/react/src/Popover/Popover.module.css index 80db25623bf..d9849cc7ba9 100644 --- a/packages/react/src/Popover/Popover.module.css +++ b/packages/react/src/Popover/Popover.module.css @@ -1,255 +1,257 @@ -.Popover { - position: absolute; - z-index: 100; - display: none; - - &:where([data-open]) { - display: block; - } - - &:where([data-relative]) { - position: relative; - } -} - -.PopoverContent { - position: relative; - padding: var(--base-size-24); - margin-right: auto; - margin-left: auto; - background-color: var(--overlay-bgColor); - border-radius: var(--borderRadius-medium); - box-shadow: var(--shadow-floating-small); - - /* Carets */ - &::before, - &::after { +@layer primer.components.Popover { + .Popover { position: absolute; - left: 50%; - display: inline-block; - content: ''; - } - - &::before { - top: calc(-1 * var(--base-size-16)); - /* stylelint-disable-next-line primer/spacing */ - margin-left: -9px; - - /* TODO: solid? */ - /* stylelint-disable-next-line primer/borders */ - border: var(--base-size-8) solid transparent; - border-bottom-color: var(--borderColor-default); - } + z-index: 100; + display: none; - &::after { - /* stylelint-disable-next-line primer/spacing */ - top: -14px; - margin-left: calc(-1 * var(--base-size-8)); + &:where([data-open]) { + display: block; + } - /* // todo: solid */ - /* stylelint-disable-next-line primer/borders */ - border: 7px solid transparent; - /* stylelint-disable-next-line primer/colors */ - border-bottom-color: var(--overlay-bgColor); + &:where([data-relative]) { + position: relative; + } } - /* Bottom-oriented carets */ - :where([data-caret='bottom']) &, - :where([data-caret='bottom-right']) &, - :where([data-caret='bottom-left']) & { + .PopoverContent { + position: relative; + padding: var(--base-size-24); + margin-right: auto; + margin-left: auto; + background-color: var(--overlay-bgColor); + border-radius: var(--borderRadius-medium); + box-shadow: var(--shadow-floating-small); + + /* Carets */ &::before, &::after { - top: auto; - border-bottom-color: transparent; + position: absolute; + left: 50%; + display: inline-block; + content: ''; } &::before { - bottom: calc(-1 * var(--base-size-16)); - border-top-color: var(--borderColor-default); + top: calc(-1 * var(--base-size-16)); + /* stylelint-disable-next-line primer/spacing */ + margin-left: -9px; + + /* TODO: solid? */ + /* stylelint-disable-next-line primer/borders */ + border: var(--base-size-8) solid transparent; + border-bottom-color: var(--borderColor-default); } &::after { /* stylelint-disable-next-line primer/spacing */ - bottom: -14px; + top: -14px; + margin-left: calc(-1 * var(--base-size-8)); + + /* // todo: solid */ + /* stylelint-disable-next-line primer/borders */ + border: 7px solid transparent; /* stylelint-disable-next-line primer/colors */ - border-top-color: var(--overlay-bgColor); + border-bottom-color: var(--overlay-bgColor); } - } - - /* Top & Bottom: Right-oriented carets */ - :where([data-caret='top-right']) &, - :where([data-caret='bottom-right']) & { - /* stylelint-disable-next-line primer/spacing */ - right: -9px; - margin-right: 0; - &::before, - &::after { - left: auto; - margin-left: 0; + /* Bottom-oriented carets */ + :where([data-caret='bottom']) &, + :where([data-caret='bottom-right']) &, + :where([data-caret='bottom-left']) & { + &::before, + &::after { + top: auto; + border-bottom-color: transparent; + } + + &::before { + bottom: calc(-1 * var(--base-size-16)); + border-top-color: var(--borderColor-default); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + bottom: -14px; + /* stylelint-disable-next-line primer/colors */ + border-top-color: var(--overlay-bgColor); + } } - &::before { + /* Top & Bottom: Right-oriented carets */ + :where([data-caret='top-right']) &, + :where([data-caret='bottom-right']) & { /* stylelint-disable-next-line primer/spacing */ - right: 20px; + right: -9px; + margin-right: 0; + + &::before, + &::after { + left: auto; + margin-left: 0; + } + + &::before { + /* stylelint-disable-next-line primer/spacing */ + right: 20px; + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + right: 21px; + } } - &::after { + /* Top & Bottom: Left-oriented carets */ + :where([data-caret='top-left']) &, + :where([data-caret='bottom-left']) & { /* stylelint-disable-next-line primer/spacing */ - right: 21px; - } - } + left: -9px; + margin-left: 0; - /* Top & Bottom: Left-oriented carets */ - :where([data-caret='top-left']) &, - :where([data-caret='bottom-left']) & { - /* stylelint-disable-next-line primer/spacing */ - left: -9px; - margin-left: 0; + &::before, + &::after { + left: var(--base-size-24); + margin-left: 0; + } - &::before, - &::after { - left: var(--base-size-24); - margin-left: 0; + &::after { + /* stylelint-disable-next-line primer/spacing */ + left: calc(var(--base-size-24) + 1px); + } } - &::after { - /* stylelint-disable-next-line primer/spacing */ - left: calc(var(--base-size-24) + 1px); + /* Right- & Left-oriented carets */ + :where([data-caret='right']) &, + :where([data-caret='right-top']) &, + :where([data-caret='right-bottom']) &, + :where([data-caret='left']) &, + :where([data-caret='left-top']) &, + :where([data-caret='left-bottom']) & { + &::before, + &::after { + top: 50%; + left: auto; + margin-left: 0; + border-bottom-color: transparent; + } + + &::before { + /* stylelint-disable-next-line primer/spacing */ + margin-top: calc((var(--base-size-8) + 1px) * -1); + } + + &::after { + margin-top: calc(-1 * var(--base-size-8)); + } } - } - /* Right- & Left-oriented carets */ - :where([data-caret='right']) &, - :where([data-caret='right-top']) &, - :where([data-caret='right-bottom']) &, - :where([data-caret='left']) &, - :where([data-caret='left-top']) &, - :where([data-caret='left-bottom']) & { - &::before, - &::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; + /* Right-oriented carets */ + :where([data-caret='right']) &, + :where([data-caret='right-top']) &, + :where([data-caret='right-bottom']) & { + &::before { + right: calc(-1 * var(--base-size-16)); + border-left-color: var(--borderColor-default); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + right: -14px; + /* stylelint-disable-next-line primer/colors */ + border-left-color: var(--overlay-bgColor); + } } - &::before { - /* stylelint-disable-next-line primer/spacing */ - margin-top: calc((var(--base-size-8) + 1px) * -1); + /* Left-oriented carets */ + :where([data-caret='left']) &, + :where([data-caret='left-top']) &, + :where([data-caret='left-bottom']) & { + &::before { + left: calc(-1 * var(--base-size-16)); + border-right-color: var(--borderColor-default); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + left: -14px; + /* stylelint-disable-next-line primer/colors */ + border-right-color: var(--overlay-bgColor); + } } - &::after { - margin-top: calc(-1 * var(--base-size-8)); + /* Right & Left: Top-oriented carets */ + :where([data-caret='right-top']) &, + :where([data-caret='left-top']) & { + &::before, + &::after { + top: var(--base-size-24); + } } - } - /* Right-oriented carets */ - :where([data-caret='right']) &, - :where([data-caret='right-top']) &, - :where([data-caret='right-bottom']) & { - &::before { - right: calc(-1 * var(--base-size-16)); - border-left-color: var(--borderColor-default); + /* Right & Left: Bottom-oriented carets */ + :where([data-caret='right-bottom']) &, + :where([data-caret='left-bottom']) & { + &::before, + &::after { + top: auto; + } + + &::before { + bottom: var(--base-size-16); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + bottom: calc(var(--base-size-16) + 1px); + } } - &::after { - /* stylelint-disable-next-line primer/spacing */ - right: -14px; - /* stylelint-disable-next-line primer/colors */ - border-left-color: var(--overlay-bgColor); + &:where([data-width='xsmall']) { + width: var(--overlay-width-xsmall); } - } - /* Left-oriented carets */ - :where([data-caret='left']) &, - :where([data-caret='left-top']) &, - :where([data-caret='left-bottom']) & { - &::before { - left: calc(-1 * var(--base-size-16)); - border-right-color: var(--borderColor-default); + &:where([data-width='small']) { + width: var(--overlay-width-small); } - &::after { - /* stylelint-disable-next-line primer/spacing */ - left: -14px; - /* stylelint-disable-next-line primer/colors */ - border-right-color: var(--overlay-bgColor); + &:where([data-width='medium']) { + width: var(--overlay-width-medium); } - } - /* Right & Left: Top-oriented carets */ - :where([data-caret='right-top']) &, - :where([data-caret='left-top']) & { - &::before, - &::after { - top: var(--base-size-24); + &:where([data-width='large']) { + width: var(--overlay-width-large); } - } - /* Right & Left: Bottom-oriented carets */ - :where([data-caret='right-bottom']) &, - :where([data-caret='left-bottom']) & { - &::before, - &::after { - top: auto; + &:where([data-width='xlarge']) { + width: var(--overlay-width-xlarge); } - &::before { - bottom: var(--base-size-16); + &:where([data-width='auto']) { + width: auto; } - &::after { - /* stylelint-disable-next-line primer/spacing */ - bottom: calc(var(--base-size-16) + 1px); + &:where([data-height='small']) { + height: var(--overlay-height-small); } - } - &:where([data-width='xsmall']) { - width: var(--overlay-width-xsmall); - } - - &:where([data-width='small']) { - width: var(--overlay-width-small); - } - - &:where([data-width='medium']) { - width: var(--overlay-width-medium); - } - - &:where([data-width='large']) { - width: var(--overlay-width-large); - } - - &:where([data-width='xlarge']) { - width: var(--overlay-width-xlarge); - } - - &:where([data-width='auto']) { - width: auto; - } - - &:where([data-height='small']) { - height: var(--overlay-height-small); - } - - &:where([data-height='medium']) { - height: var(--overlay-height-medium); - } + &:where([data-height='medium']) { + height: var(--overlay-height-medium); + } - &:where([data-height='large']) { - height: var(--overlay-height-large); - } + &:where([data-height='large']) { + height: var(--overlay-height-large); + } - &:where([data-height='xlarge']) { - height: var(--overlay-height-xlarge); - } + &:where([data-height='xlarge']) { + height: var(--overlay-height-xlarge); + } - &:where([data-height='fit-content']) { - height: fit-content; - } + &:where([data-height='fit-content']) { + height: fit-content; + } - &:where([data-height='auto']) { - height: auto; + &:where([data-height='auto']) { + height: auto; + } } } diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css index 2cba3b75614..b35c7b8661f 100644 --- a/packages/react/src/ProgressBar/ProgressBar.module.css +++ b/packages/react/src/ProgressBar/ProgressBar.module.css @@ -1,67 +1,69 @@ -@keyframes shimmer { - from { - mask-position: 200%; - } +@layer primer.components.ProgressBar { + @keyframes shimmer { + from { + mask-position: 200%; + } - to { - mask-position: 0%; + to { + mask-position: 0%; + } } -} -.ProgressBarItem { - /* these are passed from the component */ - --progress-width: ; - --progress-bg: ; + .ProgressBarItem { + /* these are passed from the component */ + --progress-width: ; + --progress-bg: ; - width: var(--progress-width); - /* stylelint-disable-next-line primer/colors */ - background-color: var(--progress-bg); + width: var(--progress-width); + /* stylelint-disable-next-line primer/colors */ + background-color: var(--progress-bg); - @media (prefers-reduced-motion: no-preference) { - &[data-animated='true'] { - mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%); - mask-size: 200%; - animation-name: shimmer; - animation-duration: 1s; - animation-iteration-count: infinite; + @media (prefers-reduced-motion: no-preference) { + &[data-animated='true'] { + mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%); + mask-size: 200%; + animation-name: shimmer; + animation-duration: 1s; + animation-iteration-count: infinite; + } } } -} -.ProgressBarContainer { - display: flex; - overflow: hidden; - background-color: var(--progressBar-track-bgColor); - border-radius: var(--borderRadius-small); - gap: 2px; - outline: solid 1px var(--progressBar-track-borderColor); - outline-offset: -1px; + .ProgressBarContainer { + display: flex; + overflow: hidden; + background-color: var(--progressBar-track-bgColor); + border-radius: var(--borderRadius-small); + gap: 2px; + outline: solid 1px var(--progressBar-track-borderColor); + outline-offset: -1px; - &:where([data-progress-display='inline']) { - display: inline-flex; - } + &:where([data-progress-display='inline']) { + display: inline-flex; + } - &:where([data-progress-bar-size='default']) { - height: 8px; - } + &:where([data-progress-bar-size='default']) { + height: 8px; + } - &:where([data-progress-bar-size='small']) { - height: 5px; - } + &:where([data-progress-bar-size='small']) { + height: 5px; + } - &:where([data-progress-bar-size='large']) { - height: 10px; + &:where([data-progress-bar-size='large']) { + height: 10px; + } } -} -@media (forced-colors: active) { - :root { - --progress-bg: LinkText; - --progressBar-track-bgColor: CanvasText; - } + @media (forced-colors: active) { + :root { + --progress-bg: LinkText; + --progressBar-track-bgColor: CanvasText; + } - .ProgressBarContainer, - .ProgressBarItem { - forced-color-adjust: none; + .ProgressBarContainer, + .ProgressBarItem { + forced-color-adjust: none; + } } } diff --git a/packages/react/src/Radio/Radio.module.css b/packages/react/src/Radio/Radio.module.css index 169929e5619..22ef1e10000 100644 --- a/packages/react/src/Radio/Radio.module.css +++ b/packages/react/src/Radio/Radio.module.css @@ -1,33 +1,35 @@ -.Radio { - border-radius: var(--borderRadius-full, 100vh); - transition: - background-color, - border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */ +@layer primer.components.Radio { + .Radio { + border-radius: var(--borderRadius-full, 100vh); + transition: + background-color, + border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */ - &:where(:checked) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-fgColor-rest); - - /* using bgColor here to avoid a border change in dark high contrast */ - /* stylelint-disable-next-line primer/colors */ - border-color: var(--control-checked-bgColor-rest); - border-width: var(--borderWidth-thicker); - - &:disabled { - cursor: not-allowed; + &:where(:checked) { /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-fgColor-disabled); + background-color: var(--control-checked-fgColor-rest); + + /* using bgColor here to avoid a border change in dark high contrast */ /* stylelint-disable-next-line primer/colors */ - border-color: var(--control-checked-bgColor-disabled); + border-color: var(--control-checked-bgColor-rest); + border-width: var(--borderWidth-thicker); + + &:disabled { + cursor: not-allowed; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--control-checked-fgColor-disabled); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--control-checked-bgColor-disabled); + } } - } - &:focus-visible { - @mixin focusOutline 2px; - } + &:focus-visible { + @mixin focusOutline 2px; + } - @media (forced-colors: active) { - background-color: canvastext; - border-color: canvastext; + @media (forced-colors: active) { + background-color: canvastext; + border-color: canvastext; + } } } diff --git a/packages/react/src/__tests__/css-layers.test.ts b/packages/react/src/__tests__/css-layers.test.ts index 27ef21499b8..b29c1e6c2f4 100644 --- a/packages/react/src/__tests__/css-layers.test.ts +++ b/packages/react/src/__tests__/css-layers.test.ts @@ -35,6 +35,15 @@ const allowlist = new Set([ path.resolve(import.meta.dirname, '../internal/components/UnstyledTextInput.module.css'), path.resolve(import.meta.dirname, '../internal/components/ValidationAnimationContainer.module.css'), path.resolve(import.meta.dirname, '../Label/Label.module.css'), + path.resolve(import.meta.dirname, '../Link/Link.module.css'), + path.resolve(import.meta.dirname, '../Overlay/Overlay.module.css'), + path.resolve(import.meta.dirname, '../Pagehead/Pagehead.module.css'), + path.resolve(import.meta.dirname, '../PageHeader/PageHeader.module.css'), + path.resolve(import.meta.dirname, '../Pagination/Pagination.module.css'), + path.resolve(import.meta.dirname, '../Placeholder.module.css'), + path.resolve(import.meta.dirname, '../Popover/Popover.module.css'), + path.resolve(import.meta.dirname, '../ProgressBar/ProgressBar.module.css'), + path.resolve(import.meta.dirname, '../Radio/Radio.module.css'), ]) const files = Array.from(allowlist).map(file => { return [path.relative(path.resolve(import.meta.dirname, '..'), file), file]