diff --git a/.changeset/happy-dogs-trade.md b/.changeset/happy-dogs-trade.md new file mode 100644 index 00000000000..df6b65ebdc5 --- /dev/null +++ b/.changeset/happy-dogs-trade.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Update CSS files to be wrapper in `primer.*` CSS Layers diff --git a/package-lock.json b/package-lock.json index 2ddb0a8af80..23268d89279 100644 --- a/package-lock.json +++ b/package-lock.json @@ -78,7 +78,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.4.0", + "@primer/react": "38.5.0", "@primer/styled-react": "1.0.2", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", @@ -92,7 +92,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.4.0", + "@primer/react": "38.5.0", "@primer/styled-react": "1.0.2", "next": "^16.0.7", "react": "^19.2.0", @@ -135,7 +135,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "38.4.0", + "@primer/react": "38.5.0", "@primer/styled-react": "1.0.2", "clsx": "^2.1.1", "next": "^16.0.7", @@ -8696,6 +8696,13 @@ "@types/node": "*" } }, + "node_modules/@types/css-tree": { + "version": "2.3.11", + "resolved": "https://registry.npmjs.org/@types/css-tree/-/css-tree-2.3.11.tgz", + "integrity": "sha512-aEokibJOI77uIlqoBOkVbaQGC9zII0A+JH1kcTNKW2CwyYWD8KM6qdo+4c77wD3wZOQfJuNWAr9M4hdk+YhDIg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/debug": { "version": "4.1.12", "dev": true, @@ -26263,7 +26270,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.4.0", + "version": "38.5.0", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -26316,6 +26323,7 @@ "@testing-library/react": "^16.3.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", + "@types/css-tree": "^2.3.11", "@types/lodash.groupby": "4.6.9", "@types/lodash.isempty": "4.4.9", "@types/lodash.isobject": "3.0.9", @@ -26341,6 +26349,7 @@ "concurrently": "9.1.2", "copyfiles": "2.4.1", "cross-env": "7.0.3", + "css-tree": "^2.3.1", "fast-glob": "3.3.2", "filesize": "10.1.6", "front-matter": "4.0.2", diff --git a/packages/react/.storybook/storybook.css b/packages/react/.storybook/storybook.css index 37e3db6f509..2ad2d635379 100644 --- a/packages/react/.storybook/storybook.css +++ b/packages/react/.storybook/storybook.css @@ -1,3 +1,5 @@ +@import '../src/layer.css'; + .story-wrap { font-family: var(--fontStack-system); color: var(--fgColor-default); diff --git a/packages/react/package.json b/packages/react/package.json index 6e393cb317b..68ea7023d6e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -32,6 +32,7 @@ "typings": "dist/index.d.ts", "sideEffects": [ "dist/**/*.css", + "src/**/*.css", "src/**/test-helpers.tsx", "dist/**/test-helpers.js" ], @@ -107,7 +108,6 @@ "@figma/code-connect": "1.3.2", "@primer/css": "^21.5.1", "@primer/doc-gen": "^0.0.1", - "@tanstack/react-virtual": "^3.13.12", "@rollup/plugin-babel": "6.1.0", "@rollup/plugin-commonjs": "29.0.0", "@rollup/plugin-json": "6.1.0", @@ -119,11 +119,13 @@ "@storybook/addon-links": "^10.1.4", "@storybook/icons": "^2.0.1", "@storybook/react-vite": "^10.1.4", + "@tanstack/react-virtual": "^3.13.12", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^16.3.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", + "@types/css-tree": "^2.3.11", "@types/lodash.groupby": "4.6.9", "@types/lodash.isempty": "4.4.9", "@types/lodash.isobject": "3.0.9", @@ -149,6 +151,7 @@ "concurrently": "9.1.2", "copyfiles": "2.4.1", "cross-env": "7.0.3", + "css-tree": "^2.3.1", "fast-glob": "3.3.2", "filesize": "10.1.6", "front-matter": "4.0.2", diff --git a/packages/react/src/ActionBar/ActionBar.module.css b/packages/react/src/ActionBar/ActionBar.module.css index 13aab764f53..8a2fccfd1f3 100644 --- a/packages/react/src/ActionBar/ActionBar.module.css +++ b/packages/react/src/ActionBar/ActionBar.module.css @@ -1,53 +1,55 @@ -.List { - position: relative; - display: flex; - min-width: 0; - - /* wonder why this is here */ - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: -1px; - white-space: nowrap; - list-style: none; - align-items: center; - gap: var(--actionbar-gap, var(--stack-gap-condensed)); - - /* Gap scale (mirrors Stack) */ - &:where([data-gap='none']) { - --actionbar-gap: 0; - - .Divider { - padding: 0 var(--base-size-8); +@layer primer.components.ActionBar { + .List { + position: relative; + display: flex; + min-width: 0; + + /* wonder why this is here */ + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: -1px; + white-space: nowrap; + list-style: none; + align-items: center; + gap: var(--actionbar-gap, var(--stack-gap-condensed)); + + /* Gap scale (mirrors Stack) */ + &:where([data-gap='none']) { + --actionbar-gap: 0; + + .Divider { + padding: 0 var(--base-size-8); + } } - } - &:where([data-gap='condensed']) { - --actionbar-gap: var(--stack-gap-condensed); + &:where([data-gap='condensed']) { + --actionbar-gap: var(--stack-gap-condensed); + } } -} -.Nav { - display: flex; - padding-inline: var(--base-size-16); - justify-content: flex-end; - align-items: center; + .Nav { + display: flex; + padding-inline: var(--base-size-16); + justify-content: flex-end; + align-items: center; - &:where([data-flush='true']) { - padding-inline: 0; + &:where([data-flush='true']) { + padding-inline: 0; + } } -} -.Divider { - &::before { - display: block; - width: var(--borderWidth-thin); - height: var(--base-size-20); - content: ''; - /* stylelint-disable-next-line primer/colors */ - background: var(--borderColor-muted); + .Divider { + &::before { + display: block; + width: var(--borderWidth-thin); + height: var(--base-size-20); + content: ''; + /* stylelint-disable-next-line primer/colors */ + background: var(--borderColor-muted); + } } -} -.Group { - display: flex; - gap: inherit; + .Group { + display: flex; + gap: inherit; + } } diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index f8007fb3e63..eb99ede7fcb 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -1,52 +1,35 @@ -/* stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors */ +@layer primer.components.ActionList { + /* stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors */ -.ActionList { - padding: 0; - margin: 0; - list-style: none; - - ul { + .ActionList { padding: 0; margin: 0; list-style: none; - } - - &:where([data-variant='inset']) { - padding-block: var(--base-size-8); - } - &:where([data-variant='inset'], [data-variant='horizontal-inset']) { - /* this is only to match default experience */ - & .ActionListItem { - margin-inline: var(--base-size-8); + ul { + padding: 0; + margin: 0; + list-style: none; } - } - &:where([data-variant='horizontal-inset']) { - padding-bottom: var(--base-size-8); - } - - &:where([data-dividers='true']) { - /* place dividers on the wrapper that excludes leading visuals/actions */ - & .ActionListSubContent::before { - position: absolute; + &:where([data-variant='inset']) { + padding-block: var(--base-size-8); + } - /* use this top size after FF removed */ + &:where([data-variant='inset'], [data-variant='horizontal-inset']) { + /* this is only to match default experience */ + & .ActionListItem { + margin-inline: var(--base-size-8); + } + } - /* top: calc(-1 * var(--control-medium-paddingBlock)); */ - /* stylelint-disable-next-line primer/spacing */ - top: -7px; - display: block; - width: 100%; - height: 1px; - content: ''; - /* stylelint-disable-next-line primer/colors */ - background: var(--borderColor-muted); + &:where([data-variant='horizontal-inset']) { + padding-bottom: var(--base-size-8); } - /* if inline description, move pseudo divider to description wrapper */ - & [data-description-variant='inline'] { - &::before { + &:where([data-dividers='true']) { + /* place dividers on the wrapper that excludes leading visuals/actions */ + & .ActionListSubContent::before { position: absolute; /* use this top size after FF removed */ @@ -56,121 +39,155 @@ top: -7px; display: block; width: 100%; - height: var(--borderWidth-thin); + height: 1px; content: ''; /* stylelint-disable-next-line primer/colors */ background: var(--borderColor-muted); } - /* remove the default divider */ - & .ActionListSubContent::before { - content: unset; + /* if inline description, move pseudo divider to description wrapper */ + & [data-description-variant='inline'] { + &::before { + position: absolute; + + /* use this top size after FF removed */ + + /* top: calc(-1 * var(--control-medium-paddingBlock)); */ + /* stylelint-disable-next-line primer/spacing */ + top: -7px; + display: block; + width: 100%; + height: var(--borderWidth-thin); + content: ''; + /* stylelint-disable-next-line primer/colors */ + background: var(--borderColor-muted); + } + + /* remove the default divider */ + & .ActionListSubContent::before { + content: unset; + } } - } - /* hide if item is first of type with label::before, or is the first item after a sectionDivider */ - .ActionListItem:first-of-type .ActionListSubContent::before, - .Divider + .ActionListItem .ActionListSubContent::before { - visibility: hidden; - } + /* hide if item is first of type with label::before, or is the first item after a sectionDivider */ + .ActionListItem:first-of-type .ActionListSubContent::before, + .Divider + .ActionListItem .ActionListSubContent::before { + visibility: hidden; + } - /* hide if item is first of type with label::before, or is the first item after a sectionDivider */ - .ActionListItem:first-of-type [data-description-variant='inline']::before, - .Divider + .ActionListItem [data-description-variant='inline']::before { - visibility: hidden; + /* hide if item is first of type with label::before, or is the first item after a sectionDivider */ + .ActionListItem:first-of-type [data-description-variant='inline']::before, + .Divider + .ActionListItem [data-description-variant='inline']::before { + visibility: hidden; + } } - } - /* Make sure that the first visible item isn't a divider */ - & .Divider:first-child { - display: none; - } + /* Make sure that the first visible item isn't a divider */ + & .Divider:first-child { + display: none; + } - /* if a list has a mix of items with and without descriptions, reset the label font-weight to normal */ - &:has([data-has-description='true']):has([data-has-description='false']) { - & .ItemLabel { - font-weight: var(--base-text-weight-normal); + /* if a list has a mix of items with and without descriptions, reset the label font-weight to normal */ + &:has([data-has-description='true']):has([data-has-description='false']) { + & .ItemLabel { + font-weight: var(--base-text-weight-normal); + } } } -} -/* ActionListItem is a li that handles visual state, while ActionListItemContent controls actual state via button or link */ + /* ActionListItem is a li that handles visual state, while ActionListItemContent controls actual state via button or link */ -.ActionListItem { - position: relative; - list-style: none; - background-color: var(--control-transparent-bgColor-rest); - border-radius: var(--borderRadius-medium); + .ActionListItem { + position: relative; + list-style: none; + background-color: var(--control-transparent-bgColor-rest); + border-radius: var(--borderRadius-medium); - /* apply flex if trailing action exists as an immediate child */ - &:has(> .TrailingAction) { - display: flex; - flex-wrap: nowrap; - } + /* apply flex if trailing action exists as an immediate child */ + &:has(> .TrailingAction) { + display: flex; + flex-wrap: nowrap; + } - /* state */ + /* state */ - @media (forced-colors: active) { - :focus, + @media (forced-colors: active) { + :focus, &:focus-visible, /* stylelint-disable-next-line selector-no-qualifying-type */ >a.focus-visible, &[data-is-active-descendant] { - /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */ - outline: solid 1px transparent !important; + /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */ + outline: solid 1px transparent !important; + } } - } - &:not(:has([aria-disabled], [disabled]), [data-has-subitem='true']) { - @media (hover: hover) { - &:hover, - &:active { - cursor: pointer; + &:not(:has([aria-disabled], [disabled]), [data-has-subitem='true']) { + @media (hover: hover) { + &:hover, + &:active { + cursor: pointer; + } + + &:hover { + background-color: var(--control-transparent-bgColor-hover); + + &:not([data-active], :focus-visible) { + /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */ + outline: solid var(--borderWidth-thin) transparent; + outline-offset: calc(-1 * var(--borderWidth-thin)); + box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active); + } + } } - &:hover { - background-color: var(--control-transparent-bgColor-hover); + &:active { + background-color: var(--control-transparent-bgColor-active); - &:not([data-active], :focus-visible) { + &:not([data-active]) { /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */ outline: solid var(--borderWidth-thin) transparent; outline-offset: calc(-1 * var(--borderWidth-thin)); box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active); } } - } - &:active { - background-color: var(--control-transparent-bgColor-active); + &:focus-visible { + @mixin focusOutline 0; - &:not([data-active]) { - /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */ - outline: solid var(--borderWidth-thin) transparent; - outline-offset: calc(-1 * var(--borderWidth-thin)); - box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active); + & .ActionListSubContent::before, + & + .ActionListItem .ActionListSubContent::before { + visibility: hidden; + } } - } - &:focus-visible { - @mixin focusOutline 0; + /* danger */ + &:where([data-variant='danger']) { + & .LeadingAction, + .LeadingVisual, + .ItemLabel { + color: var(--control-danger-fgColor-rest); + } - & .ActionListSubContent::before, - & + .ActionListItem .ActionListSubContent::before { - visibility: hidden; - } - } + @media (hover: hover) { + &:hover { + background: var(--control-danger-bgColor-hover); - /* danger */ - &:where([data-variant='danger']) { - & .LeadingAction, - .LeadingVisual, - .ItemLabel { - color: var(--control-danger-fgColor-rest); - } + & .LeadingAction, + .LeadingVisual, + .ItemLabel { + color: var(--control-danger-fgColor-hover); + } - @media (hover: hover) { - &:hover { - background: var(--control-danger-bgColor-hover); + & [data-kbd-chord] { + background-color: var(--bgColor-default); + transition: none; + } + } + } + + &:active { + background: var(--control-danger-bgColor-active); & .LeadingAction, .LeadingVisual, @@ -185,613 +202,598 @@ } } - &:active { - background: var(--control-danger-bgColor-active); + /* active state [aria-current] */ + &:where([data-active]) { + background: var(--control-transparent-bgColor-selected); - & .LeadingAction, - .LeadingVisual, - .ItemLabel { - color: var(--control-danger-fgColor-hover); - } + /* provides a visual indication of the current item for Windows high-contrast mode */ + outline: 2px solid transparent; - & [data-kbd-chord] { - background-color: var(--bgColor-default); - transition: none; + & .ItemLabel { + font-weight: var(--base-text-weight-semibold); + color: var(--control-fgColor-rest); } - } - } - - /* active state [aria-current] */ - &:where([data-active]) { - background: var(--control-transparent-bgColor-selected); - /* provides a visual indication of the current item for Windows high-contrast mode */ - outline: 2px solid transparent; - - & .ItemLabel { - font-weight: var(--base-text-weight-semibold); - color: var(--control-fgColor-rest); - } - - @media (hover: hover) { - &:hover { - background-color: var(--control-transparent-bgColor-hover); + @media (hover: hover) { + &:hover { + background-color: var(--control-transparent-bgColor-hover); + } } - } - /* hide dividers if showDividers is true and item is active */ + /* hide dividers if showDividers is true and item is active */ - & .ActionListSubContent::before, - & + .ActionListItem .ActionListSubContent::before { - visibility: hidden; - } + & .ActionListSubContent::before, + & + .ActionListItem .ActionListSubContent::before { + visibility: hidden; + } - /* blue accent line */ - &::after { - @mixin activeIndicatorLine; + /* blue accent line */ + &::after { + @mixin activeIndicatorLine; + } } - } - &:where([data-is-active-descendant]) { - background: var(--control-transparent-bgColor-selected); + &:where([data-is-active-descendant]) { + background: var(--control-transparent-bgColor-selected); - /* provides a visual indication of the current item for Windows high-contrast mode */ - outline: 2px solid transparent; + /* provides a visual indication of the current item for Windows high-contrast mode */ + outline: 2px solid transparent; - /* hide dividers if showDividers is true and item is active */ + /* hide dividers if showDividers is true and item is active */ - /* add back in after FF ship */ + /* add back in after FF ship */ - /* & .ActionListSubContent::before, + /* & .ActionListSubContent::before, & + .ActionListItem .ActionListSubContent::before { visibility: hidden; } */ - /* blue accent line */ - &::after { - @mixin activeIndicatorLine; + /* blue accent line */ + &::after { + @mixin activeIndicatorLine; + } } - } - /* inactive */ - &:where([data-inactive='true']) { - /* ignore tooltip */ - & * :not([popover], .InactiveWarning) { - color: var(--fgColor-muted); - } + /* inactive */ + &:where([data-inactive='true']) { + /* ignore tooltip */ + & * :not([popover], .InactiveWarning) { + color: var(--fgColor-muted); + } - @media (hover: hover) { - &:hover { - cursor: not-allowed; - background-color: transparent; + @media (hover: hover) { + &:hover { + cursor: not-allowed; + background-color: transparent; - & * :not([popover], .InactiveWarning) { - color: var(--fgColor-muted); + & * :not([popover], .InactiveWarning) { + color: var(--fgColor-muted); + } } } - } - &:active { - background: transparent; + &:active { + background: transparent; + } } - } - &:where([data-loading='true']), - &:has([data-loading='true']) { - & * { - color: var(--fgColor-muted); + &:where([data-loading='true']), + &:has([data-loading='true']) { + & * { + color: var(--fgColor-muted); + } } - } - /* hide dividers */ - @media (hover: hover) { - &:hover { - & .ActionListSubContent::before, - & + .ActionListItem .ActionListSubContent::before { - visibility: hidden; - } + /* hide dividers */ + @media (hover: hover) { + &:hover { + & .ActionListSubContent::before, + & + .ActionListItem .ActionListSubContent::before { + visibility: hidden; + } - & [data-description-variant='inline']::before, - & + .ActionListItem [data-description-variant='inline']::before { - visibility: hidden; + & [data-description-variant='inline']::before, + & + .ActionListItem [data-description-variant='inline']::before { + visibility: hidden; + } } } } - } - /* if item has subitem, move hover styles to ActionListContent */ - &[data-has-subitem='true'] { - /* first child */ - & > .ActionListContent { - z-index: 1; + /* if item has subitem, move hover styles to ActionListContent */ + &[data-has-subitem='true'] { + /* first child */ + & > .ActionListContent { + z-index: 1; - @media (hover: hover) { - &:hover { - cursor: pointer; - background-color: var(--control-transparent-bgColor-hover); + @media (hover: hover) { + &:hover { + cursor: pointer; + background-color: var(--control-transparent-bgColor-hover); + } + } + + &:active { + background-color: var(--control-transparent-bgColor-active); } } - &:active { - background-color: var(--control-transparent-bgColor-active); + & .Spacer { + display: block; } } - & .Spacer { - display: block; - } - } + /* disabled */ - /* disabled */ + &[aria-disabled='true'], + &:has([aria-disabled='true'], [disabled]) { + & .ActionListContent * { + color: var(--control-fgColor-disabled); + } - &[aria-disabled='true'], - &:has([aria-disabled='true'], [disabled]) { - & .ActionListContent * { - color: var(--control-fgColor-disabled); - } + & .ActionListContent { + @media (hover: hover) { + &:hover { + cursor: not-allowed; + background-color: transparent; + } + } + } - & .ActionListContent { @media (hover: hover) { &:hover { - cursor: not-allowed; background-color: transparent; } } + + & .MultiSelectCheckbox { + background-color: var(--control-bgColor-disabled); + border-color: var(--control-borderColor-disabled); + } + + &[aria-checked='true'], + &[aria-selected='true'] { + & .MultiSelectCheckbox { + background-color: var(--control-checked-bgColor-disabled); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--control-checked-bgColor-disabled); + + &::before { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--control-checked-fgColor-disabled); + } + } + } } - @media (hover: hover) { - &:hover { - background-color: transparent; + /* When TrailingAction is in loading state, keep labels and descriptions accessible */ + &:has(.TrailingAction [data-loading='true']):not([aria-disabled='true']) { + /* Ensure labels and descriptions maintain accessibility contrast */ + & .ItemLabel { + color: var(--fgColor-default); + } + + & .Description { + color: var(--fgColor-default); } } + /* Make sure that the first visible item isn't a divider */ + &[aria-hidden] + .Divider { + display: none; + } + + /* + * checkbox item [aria-checked] + * listbox [aria-selected] + */ + & .MultiSelectCheckbox { - background-color: var(--control-bgColor-disabled); - border-color: var(--control-borderColor-disabled); + position: relative; + display: grid; + width: var(--base-size-16); + height: var(--base-size-16); + margin: 0; + cursor: pointer; + background-color: var(--bgColor-default); + border: var(--borderWidth-thin) solid var(--control-borderColor-emphasis); + border-radius: var(--borderRadius-small); + transition: + background-color, + border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); + /* checked -> unchecked - add 120ms delay to fully see animation-out */ + + place-content: center; + + &::before { + width: var(--base-size-16); + height: var(--base-size-16); + content: ''; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--control-checked-fgColor-rest); + transition: visibility 0s linear 230ms; + clip-path: inset(var(--base-size-16) 0 0 0); + + /* octicon checkmark image */ + mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); + mask-size: 75%; + mask-repeat: no-repeat; + mask-position: center; + animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1); + /* forwards; slightly snappier animation out */ + } + + @media (forced-colors: active) { + /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */ + + /* background-color will be overriden but border-width is a workaround */ + border-width: var(--borderWidth-thin); + } } &[aria-checked='true'], &[aria-selected='true'] { & .MultiSelectCheckbox { - background-color: var(--control-checked-bgColor-disabled); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--control-checked-bgColor-disabled); + background-color: var(--control-checked-bgColor-rest); + border-color: var(--control-checked-borderColor-rest); + transition: + background-color, + border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; + /* unchecked -> checked */ &::before { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-fgColor-disabled); + visibility: visible; + transition: visibility 0s linear 0s; + animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; + } + + @media (forced-colors: active) { + /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips + background-color will be overriden but border-width is a workaround */ + /* stylelint-disable-next-line primer/borders */ + border-width: 8px; } } - } - } - /* When TrailingAction is in loading state, keep labels and descriptions accessible */ - &:has(.TrailingAction [data-loading='true']):not([aria-disabled='true']) { - /* Ensure labels and descriptions maintain accessibility contrast */ - & .ItemLabel { - color: var(--fgColor-default); + & .SingleSelectCheckmark { + visibility: visible; + } } - & .Description { - color: var(--fgColor-default); + &[aria-checked='false'], + &[aria-selected='false'] { + & .MultiSelectCheckbox { + &::before { + visibility: hidden; + } + } + + & .SingleSelectCheckmark { + visibility: hidden; + } } } - /* Make sure that the first visible item isn't a divider */ - &[aria-hidden] + .Divider { - display: none; + /* hide by default to support inactive state where role cannot be menuitemradio or menuitemcheckbox */ + .SingleSelectCheckmark { + visibility: hidden; } - /* - * checkbox item [aria-checked] - * listbox [aria-selected] - */ + /* button or a tag */ + + /* [ [spacer] [leadingAction] [leadingVisual] [content] ] */ + .ActionListContent { + --subitem-depth: 0px; - & .MultiSelectCheckbox { position: relative; display: grid; - width: var(--base-size-16); - height: var(--base-size-16); - margin: 0; - cursor: pointer; - background-color: var(--bgColor-default); - border: var(--borderWidth-thin) solid var(--control-borderColor-emphasis); - border-radius: var(--borderRadius-small); - transition: - background-color, - border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); - /* checked -> unchecked - add 120ms delay to fully see animation-out */ + width: 100%; + color: var(--control-fgColor-rest); + text-align: left; + user-select: none; + background-color: transparent; + border: none; + border-radius: var(--borderRadius-medium); + transition: background 33.333ms linear; + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--control-medium-paddingBlock); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--control-medium-paddingInline-condensed); + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + grid-template-rows: min-content; + grid-template-areas: 'spacer leadingAction leadingVisual content'; + grid-template-columns: min-content min-content min-content minmax(0, auto); + align-items: start; + + /* column-gap persists with empty grid-areas, margin applies only when children exist */ + & > :not(:last-child, .Spacer) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--control-medium-gap); + } - place-content: center; + &:hover { + text-decoration: none; + cursor: pointer; + } - &::before { - width: var(--base-size-16); - height: var(--base-size-16); - content: ''; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-fgColor-rest); - transition: visibility 0s linear 230ms; - clip-path: inset(var(--base-size-16) 0 0 0); + /* large */ - /* octicon checkmark image */ - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); - mask-size: 75%; - mask-repeat: no-repeat; - mask-position: center; - animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1); - /* forwards; slightly snappier animation out */ + &[data-size='large'] { + /* stylelint-disable-next-line primer/spacing */ + padding-block: var(--control-large-paddingBlock); } - @media (forced-colors: active) { - /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */ + /* collapsible item [aria-expanded] */ - /* background-color will be overriden but border-width is a workaround */ - border-width: var(--borderWidth-thin); + &[aria-expanded='true'] { + & .ExpandIcon { + transform: scaleY(-1); + } } - } - &[aria-checked='true'], - &[aria-selected='true'] { - & .MultiSelectCheckbox { - background-color: var(--control-checked-bgColor-rest); - border-color: var(--control-checked-borderColor-rest); - transition: - background-color, - border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; - /* unchecked -> checked */ - - &::before { - visibility: visible; - transition: visibility 0s linear 0s; - animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; + &[aria-expanded='false'] { + & .ExpandIcon { + transform: scaleY(1); } - @media (forced-colors: active) { - /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips - background-color will be overriden but border-width is a workaround */ - /* stylelint-disable-next-line primer/borders */ - border-width: 8px; + & + .SubGroup { + display: none; } - } - & .SingleSelectCheckmark { - visibility: visible; - } - } + /* show active indicator on parent collapse if child is active */ + &:has(+ .SubGroup [data-active='true']) { + background: var(--control-transparent-bgColor-selected); - &[aria-checked='false'], - &[aria-selected='false'] { - & .MultiSelectCheckbox { - &::before { - visibility: hidden; + & .ItemLabel { + font-weight: var(--base-text-weight-semibold); + } + + & .ActionListSubContent::before, + & + .ActionListItem .ActionListSubContent::before { + visibility: hidden; + } + + /* blue accent line */ + &::after { + @mixin activeIndicatorLine; + } } } + } - & .SingleSelectCheckmark { - visibility: hidden; + /* [ [content] [trailingVisual] [trailingAction] ] */ + .ActionListSubContent { + grid-area: content; + position: relative; + display: grid; + width: 100%; + grid-template-rows: min-content; + grid-template-areas: 'label trailingVisual trailingAction'; + grid-template-columns: minmax(0, auto) min-content min-content; + align-items: start; + + /* column-gap persists with empty grid-areas, margin applies only when children exist */ + & > :not(:last-child) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--control-medium-gap); } } -} -/* hide by default to support inactive state where role cannot be menuitemradio or menuitemcheckbox */ -.SingleSelectCheckmark { - visibility: hidden; -} + /* place children on grid */ -/* button or a tag */ - -/* [ [spacer] [leadingAction] [leadingVisual] [content] ] */ -.ActionListContent { - --subitem-depth: 0px; - - position: relative; - display: grid; - width: 100%; - color: var(--control-fgColor-rest); - text-align: left; - user-select: none; - background-color: transparent; - border: none; - border-radius: var(--borderRadius-medium); - transition: background 33.333ms linear; - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--control-medium-paddingBlock); - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--control-medium-paddingInline-condensed); - touch-action: manipulation; - -webkit-tap-highlight-color: transparent; - grid-template-rows: min-content; - grid-template-areas: 'spacer leadingAction leadingVisual content'; - grid-template-columns: min-content min-content min-content minmax(0, auto); - align-items: start; - - /* column-gap persists with empty grid-areas, margin applies only when children exist */ - & > :not(:last-child, .Spacer) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--control-medium-gap); + /* spacer used to create depth for nested lists */ + + .Spacer { + display: none; + width: max(0px, var(--subitem-depth) * 8px); + grid-area: spacer; } - &:hover { - text-decoration: none; - cursor: pointer; + .LeadingAction { + grid-area: leadingAction; } - /* large */ + .LeadingVisual { + grid-area: leadingVisual; + } - &[data-size='large'] { - /* stylelint-disable-next-line primer/spacing */ - padding-block: var(--control-large-paddingBlock); + .TrailingVisual { + grid-area: trailingVisual; + font-size: var(--text-body-size-medium); } - /* collapsible item [aria-expanded] */ + .TrailingAction { + grid-area: trailingAction; - &[aria-expanded='true'] { - & .ExpandIcon { - transform: scaleY(-1); + /* if child is loading button */ + & > *[data-loading-wrapper] { + height: 100%; } } - &[aria-expanded='false'] { - & .ExpandIcon { - transform: scaleY(1); - } + /* wrapper span +default block */ + .ItemDescriptionWrap { + grid-area: label; + display: flex; + flex-direction: column; + gap: var(--base-size-4); - & + .SubGroup { - display: none; + & .ItemLabel { + font-weight: var(--base-text-weight-semibold); + /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ + word-break: break-word; } - /* show active indicator on parent collapse if child is active */ - &:has(+ .SubGroup [data-active='true']) { - background: var(--control-transparent-bgColor-selected); + /* inline */ + &:where([data-description-variant='inline']) { + position: relative; + word-break: normal; + flex-direction: row; + align-items: baseline; + gap: var(--base-size-8); & .ItemLabel { - font-weight: var(--base-text-weight-semibold); + word-break: normal; } - & .ActionListSubContent::before, - & + .ActionListItem .ActionListSubContent::before { - visibility: hidden; + &:has([data-truncate='true']) { + & .ItemLabel { + flex: 1 0 auto; + } } - /* blue accent line */ - &::after { - @mixin activeIndicatorLine; + & .Description { + /* adjust line-height for baseline alignment */ + + /* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */ + /* stylelint-disable-next-line primer/typography */ + line-height: 16px; } } } -} - -/* [ [content] [trailingVisual] [trailingAction] ] */ -.ActionListSubContent { - grid-area: content; - position: relative; - display: grid; - width: 100%; - grid-template-rows: min-content; - grid-template-areas: 'label trailingVisual trailingAction'; - grid-template-columns: minmax(0, auto) min-content min-content; - align-items: start; - - /* column-gap persists with empty grid-areas, margin applies only when children exist */ - & > :not(:last-child) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--control-medium-gap); - } -} - -/* place children on grid */ - -/* spacer used to create depth for nested lists */ - -.Spacer { - display: none; - width: max(0px, var(--subitem-depth) * 8px); - grid-area: spacer; -} - -.LeadingAction { - grid-area: leadingAction; -} - -.LeadingVisual { - grid-area: leadingVisual; -} -.TrailingVisual { - grid-area: trailingVisual; - font-size: var(--text-body-size-medium); -} + /* description */ + .Description { + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-normal); -.TrailingAction { - grid-area: trailingAction; + /* line-height: var(--text-caption-lineHeight); */ - /* if child is loading button */ - & > *[data-loading-wrapper] { - height: 100%; + /* remove after FF ships */ + /* stylelint-disable-next-line primer/typography */ + line-height: 16px; + color: var(--fgColor-muted); } -} -/* wrapper span -default block */ -.ItemDescriptionWrap { - grid-area: label; - display: flex; - flex-direction: column; - gap: var(--base-size-4); - - & .ItemLabel { - font-weight: var(--base-text-weight-semibold); + /* helper for grid alignment with multi-line content +span wrapping svg or text */ + .VisualWrap { + display: flex; + min-width: max-content; + min-height: var(--control-medium-lineBoxHeight); + /* stylelint-disable-next-line primer/typography */ + line-height: 20px; + /* temporary until we fix line-height rounding in primitives */ + color: var(--fgColor-muted); + pointer-events: none; + fill: var(--fgColor-muted); + align-items: center; + } + + /* text */ + .ItemLabel { + position: relative; + font-size: var(--text-body-size-medium); + font-weight: var(--base-text-weight-normal); + /* stylelint-disable-next-line primer/typography */ + line-height: 20px; + /* temporary until we fix line-height rounding in primitives */ + color: var(--fgColor-default); + grid-area: label; /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ word-break: break-word; } - /* inline */ - &:where([data-description-variant='inline']) { - position: relative; - word-break: normal; - flex-direction: row; - align-items: baseline; - gap: var(--base-size-8); - + .SubGroup { & .ItemLabel { - word-break: normal; - } - - &:has([data-truncate='true']) { - & .ItemLabel { - flex: 1 0 auto; - } + font-size: var(--text-body-size-small); } - & .Description { - /* adjust line-height for baseline alignment */ - - /* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */ - /* stylelint-disable-next-line primer/typography */ - line-height: 16px; + & .ActionListItem { + margin-inline: 0; } } -} -/* description */ -.Description { - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-normal); + /* trailing action icon button */ - /* line-height: var(--text-caption-lineHeight); */ - - /* remove after FF ships */ - /* stylelint-disable-next-line primer/typography */ - line-height: 16px; - color: var(--fgColor-muted); -} - -/* helper for grid alignment with multi-line content -span wrapping svg or text */ -.VisualWrap { - display: flex; - min-width: max-content; - min-height: var(--control-medium-lineBoxHeight); - /* stylelint-disable-next-line primer/typography */ - line-height: 20px; - /* temporary until we fix line-height rounding in primitives */ - color: var(--fgColor-muted); - pointer-events: none; - fill: var(--fgColor-muted); - align-items: center; -} - -/* text */ -.ItemLabel { - position: relative; - font-size: var(--text-body-size-medium); - font-weight: var(--base-text-weight-normal); - /* stylelint-disable-next-line primer/typography */ - line-height: 20px; - /* temporary until we fix line-height rounding in primitives */ - color: var(--fgColor-default); - grid-area: label; - /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ - word-break: break-word; -} + .TrailingActionButton { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + height: 100%; -.SubGroup { - & .ItemLabel { - font-size: var(--text-body-size-small); + /* Preserve width consistency when loading state is active for text buttons only */ + &[data-loading='true']:has([data-component='buttonContent']) { + /* Double the left padding to compensate for missing right padding */ + padding: 0 0 0 calc(var(--base-size-12) * 2); + + /* Position spinner at the end to align with IconButton */ + & [data-component='loadingSpinner'] { + place-self: end; + /* Match the IconButton spinner size */ + width: var(--control-medium-size, 2rem); + height: var(--control-medium-size, 2rem); + /* Ensure spinner is properly centered */ + display: flex; + align-items: center; + justify-content: center; + } + } } - & .ActionListItem { - margin-inline: 0; - } -} + .InactiveButtonWrap { + &:has(.TrailingVisual) { + grid-area: trailingVisual; + } -/* trailing action icon button */ - -.TrailingActionButton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - height: 100%; - - /* Preserve width consistency when loading state is active for text buttons only */ - &[data-loading='true']:has([data-component='buttonContent']) { - /* Double the left padding to compensate for missing right padding */ - padding: 0 0 0 calc(var(--base-size-12) * 2); - - /* Position spinner at the end to align with IconButton */ - & [data-component='loadingSpinner'] { - place-self: end; - /* Match the IconButton spinner size */ - width: var(--control-medium-size, 2rem); - height: var(--control-medium-size, 2rem); - /* Ensure spinner is properly centered */ - display: flex; - align-items: center; - justify-content: center; + &:has(.LeadingVisual) { + grid-area: leadingVisual; } } -} -.InactiveButtonWrap { - &:has(.TrailingVisual) { - grid-area: trailingVisual; + .Divider { + display: block; + height: var(--borderWidth-thin); + padding: 0; + /* stylelint-disable-next-line primer/spacing */ + margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin)); + margin-block-end: var(--base-size-8); + list-style: none; + /* stylelint-disable-next-line primer/colors */ + background: var(--borderColor-muted); + border: 0; } - &:has(.LeadingVisual) { - grid-area: leadingVisual; + .InactiveButtonReset { + display: flex; + padding: 0; + font: inherit; + color: inherit; + cursor: pointer; + background: none; + border: none; } -} - -.Divider { - display: block; - height: var(--borderWidth-thin); - padding: 0; - /* stylelint-disable-next-line primer/spacing */ - margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin)); - margin-block-end: var(--base-size-8); - list-style: none; - /* stylelint-disable-next-line primer/colors */ - background: var(--borderColor-muted); - border: 0; -} - -.InactiveButtonReset { - display: flex; - padding: 0; - font: inherit; - color: inherit; - cursor: pointer; - background: none; - border: none; -} -.InactiveWarning { - font-size: var(--text-body-size-small); - - /* line-height: var(--text-caption-lineHeight); */ + .InactiveWarning { + font-size: var(--text-body-size-small); - /* use variable when FF removed */ - /* stylelint-disable-next-line primer/typography */ - line-height: 16px; - color: var(--fgColor-attention); - grid-row: 2/2; -} + /* line-height: var(--text-caption-lineHeight); */ -@keyframes checkmarkIn { - from { - clip-path: inset(var(--base-size-16) 0 0 0); + /* use variable when FF removed */ + /* stylelint-disable-next-line primer/typography */ + line-height: 16px; + color: var(--fgColor-attention); + grid-row: 2/2; } - to { - clip-path: inset(0 0 0 0); - } -} + @keyframes checkmarkIn { + from { + clip-path: inset(var(--base-size-16) 0 0 0); + } -@keyframes checkmarkOut { - from { - clip-path: inset(0 0 0 0); + to { + clip-path: inset(0 0 0 0); + } } - to { - clip-path: inset(var(--base-size-16) 0 0 0); + @keyframes checkmarkOut { + from { + clip-path: inset(0 0 0 0); + } + + to { + clip-path: inset(var(--base-size-16) 0 0 0); + } } } diff --git a/packages/react/src/ActionList/Group.module.css b/packages/react/src/ActionList/Group.module.css index 201d3086b86..9255182a2ca 100644 --- a/packages/react/src/ActionList/Group.module.css +++ b/packages/react/src/ActionList/Group.module.css @@ -1,60 +1,62 @@ -.Group { - list-style: none; +@layer primer.components.Group { + .Group { + list-style: none; - &:not(:first-child) { - margin-block-start: var(--base-size-8); + &:not(:first-child) { + margin-block-start: var(--base-size-8); - /* If somebody tries to pass the `title` prop AND a `NavList.GroupHeading` as a child, hide the `ActionList.GroupHeading */ - /* stylelint-disable-next-line selector-max-specificity */ - &:has(.GroupHeadingWrap + ul > .GroupHeadingWrap) { + /* If somebody tries to pass the `title` prop AND a `NavList.GroupHeading` as a child, hide the `ActionList.GroupHeading */ /* stylelint-disable-next-line selector-max-specificity */ - & > .GroupHeadingWrap { - display: none; + &:has(.GroupHeadingWrap + ul > .GroupHeadingWrap) { + /* stylelint-disable-next-line selector-max-specificity */ + & > .GroupHeadingWrap { + display: none; + } } } } -} -.GroupList { - padding-inline-start: 0; -} + .GroupList { + padding-inline-start: 0; + } -.GroupHeadingWrap { - display: flex; - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-semibold); - - /* line-height: var(--text-body-lineHeight-small); use when FF rolls out */ - /* stylelint-disable-next-line primer/typography */ - line-height: 18px; - color: var(--fgColor-muted); - flex-direction: column; - padding-inline: var(--base-size-16); - padding-block: var(--base-size-6); - - &:where([data-variant='filled']) { - /* stylelint-disable-next-line primer/spacing */ - margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin)); - margin-block-end: var(--base-size-8); - background: var(--bgColor-muted); - border-top: solid var(--borderWidth-thin) var(--borderColor-muted); - border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted); - padding-inline: var(--base-size-16); + .GroupHeadingWrap { + display: flex; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-semibold); - &:first-child { - margin-block-start: 0; + /* line-height: var(--text-body-lineHeight-small); use when FF rolls out */ + /* stylelint-disable-next-line primer/typography */ + line-height: 18px; + color: var(--fgColor-muted); + flex-direction: column; + padding-inline: var(--base-size-16); + padding-block: var(--base-size-6); + + &:where([data-variant='filled']) { + /* stylelint-disable-next-line primer/spacing */ + margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin)); + margin-block-end: var(--base-size-8); + background: var(--bgColor-muted); + border-top: solid var(--borderWidth-thin) var(--borderColor-muted); + border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted); + padding-inline: var(--base-size-16); + + &:first-child { + margin-block-start: 0; + } } - } - /* & + ul:has(.GroupHeadingWrap) { + /* & + ul:has(.GroupHeadingWrap) { outline: solid 1px red; } */ -} + } -.GroupHeading { - margin: 0; - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-semibold); - color: var(--fgColor-muted); - align-self: flex-start; + .GroupHeading { + margin: 0; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-semibold); + color: var(--fgColor-muted); + align-self: flex-start; + } } diff --git a/packages/react/src/ActionList/Heading.module.css b/packages/react/src/ActionList/Heading.module.css index 1a95511f228..4e32867ccaf 100644 --- a/packages/react/src/ActionList/Heading.module.css +++ b/packages/react/src/ActionList/Heading.module.css @@ -1,12 +1,14 @@ -.ActionListHeader { - margin-block-end: var(--base-size-8); +@layer primer.components.Heading { + .ActionListHeader { + margin-block-end: var(--base-size-8); - &:where([data-list-variant='full']) { - margin-inline-start: var(--base-size-8); - } + &:where([data-list-variant='full']) { + margin-inline-start: var(--base-size-8); + } - &:where([data-list-variant='inset'], [data-list-variant='horizontal-inset']) { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8)); + &:where([data-list-variant='inset'], [data-list-variant='horizontal-inset']) { + /* stylelint-disable-next-line primer/spacing */ + margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8)); + } } } diff --git a/packages/react/src/ActionMenu/ActionMenu.module.css b/packages/react/src/ActionMenu/ActionMenu.module.css index 4c9b063d239..dd2ff0000c2 100644 --- a/packages/react/src/ActionMenu/ActionMenu.module.css +++ b/packages/react/src/ActionMenu/ActionMenu.module.css @@ -1,47 +1,49 @@ -.ActionMenuContainer { - &:where([data-variant='fullscreen']) { - padding-top: var(--base-size-36); - } - - /* Overflow variants */ - &:where([data-overflow-auto]) { - overflow: auto; - } - - &:where([data-overflow-hidden]) { - overflow: hidden; - } - - &:where([data-overflow-scroll]) { - overflow: scroll; - } - - &:where([data-overflow-visible]) { - overflow: visible; - } - - /* Max-height size tokens (mirror Overlay sizes) */ - &:where([data-max-height-xsmall]) { - max-height: 192px; - } - - &:where([data-max-height-small]) { - max-height: 256px; - } - - &:where([data-max-height-medium]) { - max-height: 320px; - } - - &:where([data-max-height-large]) { - max-height: 432px; - } - - &:where([data-max-height-xlarge]) { - max-height: 600px; - } - - &:where([data-max-height-fit-content]) { - max-height: fit-content; +@layer primer.components.ActionMenu { + .ActionMenuContainer { + &:where([data-variant='fullscreen']) { + padding-top: var(--base-size-36); + } + + /* Overflow variants */ + &:where([data-overflow-auto]) { + overflow: auto; + } + + &:where([data-overflow-hidden]) { + overflow: hidden; + } + + &:where([data-overflow-scroll]) { + overflow: scroll; + } + + &:where([data-overflow-visible]) { + overflow: visible; + } + + /* Max-height size tokens (mirror Overlay sizes) */ + &:where([data-max-height-xsmall]) { + max-height: 192px; + } + + &:where([data-max-height-small]) { + max-height: 256px; + } + + &:where([data-max-height-medium]) { + max-height: 320px; + } + + &:where([data-max-height-large]) { + max-height: 432px; + } + + &:where([data-max-height-xlarge]) { + max-height: 600px; + } + + &:where([data-max-height-fit-content]) { + max-height: fit-content; + } } } diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.module.css b/packages/react/src/AnchoredOverlay/AnchoredOverlay.module.css index 512a890b5ff..6f7bdceb34e 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.module.css +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.module.css @@ -1,14 +1,16 @@ -.ResponsiveCloseButtonContainer { - position: relative; -} +@layer primer.components.AnchoredOverlay { + .ResponsiveCloseButtonContainer { + position: relative; + } -.ResponsiveCloseButton { - position: absolute; - top: var(--base-size-8); - right: var(--base-size-8); - display: none; + .ResponsiveCloseButton { + position: absolute; + top: var(--base-size-8); + right: var(--base-size-8); + display: none; - @media screen and (--viewportRange-narrow) { - display: inline-grid; + @media screen and (--viewportRange-narrow) { + display: inline-grid; + } } } diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.module.css b/packages/react/src/Autocomplete/AutocompleteMenu.module.css index 5806e54c560..34147918389 100644 --- a/packages/react/src/Autocomplete/AutocompleteMenu.module.css +++ b/packages/react/src/Autocomplete/AutocompleteMenu.module.css @@ -1,9 +1,11 @@ -.SpinnerWrapper { - display: flex; - justify-content: center; - padding: var(--base-size-16); -} +@layer primer.components.AutocompleteMenu { + .SpinnerWrapper { + display: flex; + justify-content: center; + padding: var(--base-size-16); + } -.EmptyStateWrapper { - padding: var(--base-size-16); + .EmptyStateWrapper { + padding: var(--base-size-16); + } } diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.module.css b/packages/react/src/Autocomplete/AutocompleteOverlay.module.css index 67d9578c7c1..3de84984499 100644 --- a/packages/react/src/Autocomplete/AutocompleteOverlay.module.css +++ b/packages/react/src/Autocomplete/AutocompleteOverlay.module.css @@ -1,3 +1,5 @@ -.Overlay { - overflow: auto; +@layer primer.components.AutocompleteOverlay { + .Overlay { + overflow: auto; + } } diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index fc67531b9a7..da221791acd 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/packages/react/src/Avatar/Avatar.module.css @@ -1,34 +1,36 @@ -:where(.Avatar) { - display: inline-block; - width: var(--avatarSize-regular); - height: var(--avatarSize-regular); - overflow: hidden; /* Ensure page layout in Firefox should images fail to load */ - /* stylelint-disable-next-line primer/typography */ - line-height: 1; - vertical-align: middle; - border-radius: 50%; - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 1px var(--avatar-borderColor); +@layer primer.components.Avatar { + :where(.Avatar) { + display: inline-block; + width: var(--avatarSize-regular); + height: var(--avatarSize-regular); + overflow: hidden; /* Ensure page layout in Firefox should images fail to load */ + /* stylelint-disable-next-line primer/typography */ + line-height: 1; + vertical-align: middle; + border-radius: 50%; + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 1px var(--avatar-borderColor); - &:where([data-square]) { - /* stylelint-disable-next-line primer/borders */ - border-radius: clamp(4px, calc(var(--avatarSize-regular) - 24px), var(--borderRadius-medium)); - } - - &:where([data-responsive]) { - @media screen and (--viewportRange-narrow) { - width: var(--avatarSize-narrow); - height: var(--avatarSize-narrow); + &:where([data-square]) { + /* stylelint-disable-next-line primer/borders */ + border-radius: clamp(4px, calc(var(--avatarSize-regular) - 24px), var(--borderRadius-medium)); } - @media screen and (--viewportRange-regular) { - width: var(--avatarSize-regular); - height: var(--avatarSize-regular); - } + &: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); + @media screen and (--viewportRange-wide) { + width: var(--avatarSize-wide); + height: var(--avatarSize-wide); + } } } } diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index b455ec447c8..40ba5639a84 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -1,270 +1,276 @@ -/* stylelint-disable selector-max-specificity */ -.AvatarStack { - --avatar-border-width: 1px; - --mask-size: calc(100% + (var(--avatar-border-width) * 2)); - --mask-start: -1; - --opacity-step: 15%; - - position: relative; - display: flex; - min-width: var(--avatar-stack-size); - height: var(--avatar-stack-size); - isolation: isolate; - - &:where([data-variant='cascade']) { - --overlap-size: calc(var(--avatar-stack-size) * 0.55); - --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85); - } +@layer primer.components.AvatarStack { + /* stylelint-disable selector-max-specificity */ + .AvatarStack { + --avatar-border-width: 1px; + --mask-size: calc(100% + (var(--avatar-border-width) * 2)); + --mask-start: -1; + --opacity-step: 15%; - &:where([data-variant='stack']) { - --overlap-size: calc(var(--avatar-stack-size) * 0.55); - --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55); - } + position: relative; + display: flex; + min-width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + isolation: isolate; + + &:where([data-variant='cascade']) { + --overlap-size: calc(var(--avatar-stack-size) * 0.55); + --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85); + } - &:where([data-responsive]) { - @media screen and (--viewportRange-narrow) { - --avatar-stack-size: var(--stackSize-narrow); + &:where([data-variant='stack']) { + --overlap-size: calc(var(--avatar-stack-size) * 0.55); + --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55); } - @media screen and (--viewportRange-regular) { - --avatar-stack-size: var(--stackSize-regular); + &:where([data-responsive]) { + @media screen and (--viewportRange-narrow) { + --avatar-stack-size: var(--stackSize-narrow); + } + + @media screen and (--viewportRange-regular) { + --avatar-stack-size: var(--stackSize-regular); + } + + @media screen and (--viewportRange-wide) { + --avatar-stack-size: var(--stackSize-wide); + } } - @media screen and (--viewportRange-wide) { - --avatar-stack-size: var(--stackSize-wide); + &:where([data-avatar-count='1'][data-shape='circle']) { + .AvatarItem:where([data-component='Avatar']) { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); + } } - } - &:where([data-avatar-count='1'][data-shape='circle']) { - .AvatarItem:where([data-component='Avatar']) { + &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem { /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); + box-shadow: 1px 0 rgb(0, 0, 0, 1); } - } - - &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 1px 0 rgb(0, 0, 0, 1); - } - &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: -1px 0 rgb(0, 0, 0, 1); - } + &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: -1px 0 rgb(0, 0, 0, 1); + } - &:where([data-avatar-count='2']) { - /* + &:where([data-avatar-count='2']) { + /* MIN-WIDTH CALC FORMULA EXPLAINED: avatar size ➡️ var(--avatar-stack-size) plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) */ - min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size))); - } + min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size))); + } - &:where([data-avatar-count='3'][data-variant='cascade']) { - /* + &:where([data-avatar-count='3'][data-variant='cascade']) { + /* MIN-WIDTH CALC FORMULA EXPLAINED: avatar size ➡️ var(--avatar-stack-size) plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) */ - min-width: calc( - var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + - (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) - ); - } + min-width: calc( + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) + ); + } - &:where([data-avatar-count='3'][data-variant='stack']) { - /* + &:where([data-avatar-count='3'][data-variant='stack']) { + /* MIN-WIDTH CALC FORMULA EXPLAINED: avatar size ➡️ var(--avatar-stack-size) plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2 */ - min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2); - } + min-width: calc( + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 + ); + } - &:where([data-avatar-count='3+'][data-variant='cascade']) { - /* + &:where([data-avatar-count='3+'][data-variant='cascade']) { + /* MIN-WIDTH CALC FORMULA EXPLAINED: avatar size ➡️ var(--avatar-stack-size) plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 */ - min-width: calc( - var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + - (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 - ); - } + min-width: calc( + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 + ); + } - &:where([data-avatar-count='3+'][data-variant='stack']) { - /* + &:where([data-avatar-count='3+'][data-variant='stack']) { + /* MIN-WIDTH CALC FORMULA EXPLAINED: avatar size ➡️ var(--avatar-stack-size) plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3 */ - min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3); + min-width: calc( + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3 + ); - --overlap-size: var(--overlap-size-avatar-three-plus); - } + --overlap-size: var(--overlap-size-avatar-three-plus); + } - &:where([data-align-right]) { - --mask-start: 1; + &:where([data-align-right]) { + --mask-start: 1; - direction: rtl; + direction: rtl; + } } -} -.AvatarStackBody { - position: absolute; - display: flex; + .AvatarStackBody { + position: absolute; + display: flex; - &:where([data-disable-expand]) { - position: relative; + &:where([data-disable-expand]) { + position: relative; + } } -} -.AvatarItem { - --avatarSize-regular: var(--avatar-stack-size); - - position: relative; - display: flex; - width: var(--avatar-stack-size); - height: var(--avatar-stack-size); - overflow: hidden; - flex-shrink: 0; - transition: - margin 0.2s ease-in-out, - opacity 0.2s ease-in-out, - mask-position 0.2s ease-in-out, - mask-size 0.2s ease-in-out; - - .AvatarStack:where([data-shape='circle']) &:is(img) { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) transparent; - } + .AvatarItem { + --avatarSize-regular: var(--avatar-stack-size); - &:not([data-component='Avatar']):not(:has([data-square])) { - border-radius: 50%; - } + position: relative; + display: flex; + width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + overflow: hidden; + flex-shrink: 0; + transition: + margin 0.2s ease-in-out, + opacity 0.2s ease-in-out, + mask-position 0.2s ease-in-out, + mask-size 0.2s ease-in-out; + + .AvatarStack:where([data-shape='circle']) &:is(img) { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 var(--avatar-border-width) transparent; + } - .AvatarStack:where([data-shape='square']) &:is(img) { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 1px 0 rgb(255, 255, 255, 1); - } + &:not([data-component='Avatar']):not(:has([data-square])) { + border-radius: 50%; + } - .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: -1px 0 rgb(255, 255, 255, 1); - } + .AvatarStack:where([data-shape='square']) &:is(img) { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 1px 0 rgb(255, 255, 255, 1); + } - &:first-child { - margin-inline-start: 0; - } + .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: -1px 0 rgb(255, 255, 255, 1); + } + + &:first-child { + margin-inline-start: 0; + } - &:nth-child(n + 2) { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-start: calc(var(--overlap-size) * -1); - mask-repeat: no-repeat, no-repeat; - mask-size: - var(--mask-size) var(--mask-size), - auto; - mask-composite: exclude; + &:nth-child(n + 2) { + /* stylelint-disable-next-line primer/spacing */ + margin-inline-start: calc(var(--overlap-size) * -1); + mask-repeat: no-repeat, no-repeat; + mask-size: + var(--mask-size) var(--mask-size), + auto; + mask-composite: exclude; - /* + /* HORIZONTAL POSITION CALC FORMULA EXPLAINED: width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start) subtract the avatar border width ➡️ var(--avatar-border-width) */ - mask-position: - calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center, - 0 0; + mask-position: + calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center, + 0 0; - /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */ - /* stylelint-disable-next-line primer/spacing */ - padding: 0.1px; - } + /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */ + /* stylelint-disable-next-line primer/spacing */ + padding: 0.1px; + } - /* Circular mask */ - .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) { - /* stylelint-disable-next-line declaration-property-value-no-unknown */ - mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0); - } + /* Circular mask */ + .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) { + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0); + } - /* Square mask */ - .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) { - /* stylelint-disable-next-line declaration-property-value-no-unknown */ - mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0); - } + /* Square mask */ + .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) { + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0); + } - /* Cascade variant override for nth-child(n + 3) */ - .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) { - --overlap-size: var(--overlap-size-avatar-three-plus); + /* Cascade variant override for nth-child(n + 3) */ + .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) { + --overlap-size: var(--overlap-size-avatar-three-plus); - /* stylelint-disable-next-line alpha-value-notation */ - opacity: calc(100% - 2 * var(--opacity-step)); - } + /* stylelint-disable-next-line alpha-value-notation */ + opacity: calc(100% - 2 * var(--opacity-step)); + } - /* Cascade variant override for nth-child(n + 4) */ - .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) { - /* stylelint-disable-next-line alpha-value-notation */ - opacity: calc(100% - 3 * var(--opacity-step)); - } + /* Cascade variant override for nth-child(n + 4) */ + .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) { + /* stylelint-disable-next-line alpha-value-notation */ + opacity: calc(100% - 3 * var(--opacity-step)); + } - /* Cascade variant override for nth-child(n + 5) */ - .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) { - /* stylelint-disable-next-line alpha-value-notation */ - opacity: calc(100% - 4 * var(--opacity-step)); - } + /* Cascade variant override for nth-child(n + 5) */ + .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) { + /* stylelint-disable-next-line alpha-value-notation */ + opacity: calc(100% - 4 * var(--opacity-step)); + } - .AvatarStack:where([data-shape='square']) &:nth-child(1) { - z-index: 5; - } + .AvatarStack:where([data-shape='square']) &:nth-child(1) { + z-index: 5; + } - .AvatarStack:where([data-shape='square']) &:nth-child(2) { - z-index: 4; - } + .AvatarStack:where([data-shape='square']) &:nth-child(2) { + z-index: 4; + } - .AvatarStack:where([data-shape='square']) &:nth-child(3) { - z-index: 3; - } + .AvatarStack:where([data-shape='square']) &:nth-child(3) { + z-index: 3; + } - .AvatarStack:where([data-shape='square']) &:nth-child(4) { - z-index: 2; - } + .AvatarStack:where([data-shape='square']) &:nth-child(4) { + z-index: 2; + } - .AvatarStack:where([data-shape='square']) &:nth-child(5) { - z-index: 1; - } + .AvatarStack:where([data-shape='square']) &:nth-child(5) { + z-index: 1; + } - &:nth-child(n + 6) { - visibility: hidden; - opacity: 0; + &:nth-child(n + 6) { + visibility: hidden; + opacity: 0; + } } -} -.AvatarStackBody:not([data-disable-expand]):hover, -.AvatarStackBody:not([data-disable-expand]):focus-within { - width: auto; + .AvatarStackBody:not([data-disable-expand]):hover, + .AvatarStackBody:not([data-disable-expand]):focus-within { + width: auto; - .AvatarItem { - --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */ + .AvatarItem { + --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */ - margin-inline-start: var(--base-size-4); - visibility: visible; - opacity: 1; + margin-inline-start: var(--base-size-4); + visibility: visible; + opacity: 1; - /* + /* HORIZONTAL POSITION CALC FORMULA EXPLAINED: width of the full avatar ➡️ var(--avatar-stack-size) multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start) */ - mask-position: - calc(var(--avatar-stack-size) * var(--mask-start)) center, - 0 0; + mask-position: + calc(var(--avatar-stack-size) * var(--mask-start)) center, + 0 0; - &:first-child { - margin-inline-start: 0; + &:first-child { + margin-inline-start: 0; + } } } } diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index 07b04346567..93d80e5f601 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -1,251 +1,253 @@ -.Banner { - display: grid; - padding: var(--base-size-8); - /* stylelint-disable-next-line primer/colors */ - background-color: var(--banner-bgColor); - /* stylelint-disable-next-line primer/colors */ - border: var(--borderWidth-thin) solid var(--banner-borderColor); - border-radius: var(--borderRadius-medium); - grid-template-columns: auto minmax(0, 1fr) auto; - align-items: start; - - &[data-actions-layout='default'] { - @supports (container-type: inline-size) { - container: banner / inline-size; +@layer primer.components.Banner { + .Banner { + display: grid; + padding: var(--base-size-8); + /* stylelint-disable-next-line primer/colors */ + background-color: var(--banner-bgColor); + /* stylelint-disable-next-line primer/colors */ + border: var(--borderWidth-thin) solid var(--banner-borderColor); + border-radius: var(--borderRadius-medium); + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: start; + + &[data-actions-layout='default'] { + @supports (container-type: inline-size) { + container: banner / inline-size; + } } - } - &[data-actions-layout='stacked'] { - & .BannerContainer { - flex-direction: column; - } + &[data-actions-layout='stacked'] { + & .BannerContainer { + flex-direction: column; + } - & .BannerActions :where([data-primary-action='trailing']) { - display: none; + & .BannerActions :where([data-primary-action='trailing']) { + display: none; + } + + & .BannerActions :where([data-primary-action='leading']) { + display: flex; + } } - & .BannerActions :where([data-primary-action='leading']) { - display: flex; + &[data-actions-layout='inline'] { + & .BannerContainer { + flex-wrap: nowrap; + } + + & .BannerActions { + flex: 0 0 auto; + } + + & .BannerActions :where([data-primary-action='trailing']) { + display: flex; + } + + & .BannerActions :where([data-primary-action='leading']) { + display: none; + } } - } - &[data-actions-layout='inline'] { - & .BannerContainer { - flex-wrap: nowrap; + &[data-layout='compact'] { + padding: var(--base-size-4); } - & .BannerActions { - flex: 0 0 auto; + &[data-flush] { + border-left: none; + border-right: none; + border-radius: 0; } - & .BannerActions :where([data-primary-action='trailing']) { - display: flex; + &[data-variant='critical'] { + --banner-bgColor: var(--bgColor-danger-muted); + --banner-borderColor: var(--borderColor-danger-muted); + --banner-icon-fgColor: var(--fgColor-danger); } - & .BannerActions :where([data-primary-action='leading']) { - display: none; + &[data-variant='info'] { + --banner-bgColor: var(--bgColor-accent-muted); + --banner-borderColor: var(--borderColor-accent-muted); + --banner-icon-fgColor: var(--fgColor-accent); } - } - &[data-layout='compact'] { - padding: var(--base-size-4); - } + &[data-variant='success'] { + --banner-bgColor: var(--bgColor-success-muted); + --banner-borderColor: var(--borderColor-success-muted); + --banner-icon-fgColor: var(--fgColor-success); + } - &[data-flush] { - border-left: none; - border-right: none; - border-radius: 0; - } + &[data-variant='upsell'] { + --banner-bgColor: var(--bgColor-upsell-muted); + --banner-borderColor: var(--borderColor-upsell-muted); + --banner-icon-fgColor: var(--fgColor-upsell); + } - &[data-variant='critical'] { - --banner-bgColor: var(--bgColor-danger-muted); - --banner-borderColor: var(--borderColor-danger-muted); - --banner-icon-fgColor: var(--fgColor-danger); + &[data-variant='warning'] { + --banner-bgColor: var(--bgColor-attention-muted); + --banner-borderColor: var(--borderColor-attention-muted); + --banner-icon-fgColor: var(--fgColor-attention); + } } - &[data-variant='info'] { - --banner-bgColor: var(--bgColor-accent-muted); - --banner-borderColor: var(--borderColor-accent-muted); - --banner-icon-fgColor: var(--fgColor-accent); - } + /* BannerContainer -------------------------------------------------------- */ - &[data-variant='success'] { - --banner-bgColor: var(--bgColor-success-muted); - --banner-borderColor: var(--borderColor-success-muted); - --banner-icon-fgColor: var(--fgColor-success); + .BannerContainer { + font-size: var(--text-body-size-medium); + align-items: start; + line-height: var(--text-body-lineHeight-medium); + row-gap: var(--base-size-4); + column-gap: var(--base-size-4); } - &[data-variant='upsell'] { - --banner-bgColor: var(--bgColor-upsell-muted); - --banner-borderColor: var(--borderColor-upsell-muted); - --banner-icon-fgColor: var(--fgColor-upsell); + .Banner :where(.BannerContainer) { + display: flex; + flex-wrap: wrap; + justify-content: space-between; } - &[data-variant='warning'] { - --banner-bgColor: var(--bgColor-attention-muted); - --banner-borderColor: var(--borderColor-attention-muted); - --banner-icon-fgColor: var(--fgColor-attention); + .Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerContainer { + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; } -} -/* BannerContainer -------------------------------------------------------- */ + /* BannerContent ---------------------------------------------------------- */ -.BannerContainer { - font-size: var(--text-body-size-medium); - align-items: start; - line-height: var(--text-body-lineHeight-medium); - row-gap: var(--base-size-4); - column-gap: var(--base-size-4); -} - -.Banner :where(.BannerContainer) { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerContainer { - display: grid; - grid-template-columns: auto; - grid-template-rows: auto; -} - -/* BannerContent ---------------------------------------------------------- */ - -.BannerContent { - display: grid; - row-gap: var(--base-size-4); - grid-column-start: 1; - margin-block: var(--base-size-8); -} - -.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent { - margin-block: var(--base-size-6); -} - -@media screen and (min-width: 544px) { .BannerContent { - flex: 1 1 0%; + display: grid; + row-gap: var(--base-size-4); + grid-column-start: 1; + margin-block: var(--base-size-8); } -} - -.BannerTitle { - margin: 0; - font-size: inherit; - font-weight: var(--base-text-weight-semibold); -} - -/* BannerIcon ------------------------------------------------------------- */ - -.BannerIcon { - display: grid; - place-items: center; - padding: var(--base-size-8); -} -.BannerIcon svg { - /* 20px is the line box height of the trailing action buttons */ - height: var(--base-size-20); - /* stylelint-disable-next-line primer/colors */ - color: var(--banner-icon-fgColor); - /* stylelint-disable-next-line primer/colors */ - fill: var(--banner-icon-fgColor); -} - -/* stylelint-disable-next-line selector-max-specificity */ -.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg { - height: var(--base-size-16); -} + .Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent { + margin-block: var(--base-size-6); + } -/* BannerDismiss ---------------------------------------------------------- */ + @media screen and (min-width: 544px) { + .BannerContent { + flex: 1 1 0%; + } + } -.BannerDismiss { - display: grid; - place-items: center; - padding: var(--base-size-8); - margin-inline-start: var(--base-size-4); -} + .BannerTitle { + margin: 0; + font-size: inherit; + font-weight: var(--base-text-weight-semibold); + } -:where(.Banner):has(.BannerActions) .BannerDismiss { - margin-block: var(--base-size-2); -} + /* BannerIcon ------------------------------------------------------------- */ -.BannerDismiss svg { - /* stylelint-disable-next-line primer/colors */ - color: var(--banner-icon-fgColor); -} + .BannerIcon { + display: grid; + place-items: center; + padding: var(--base-size-8); + } -/* BannerActions ---------------------------------------------------------- */ + .BannerIcon svg { + /* 20px is the line box height of the trailing action buttons */ + height: var(--base-size-20); + /* stylelint-disable-next-line primer/colors */ + color: var(--banner-icon-fgColor); + /* stylelint-disable-next-line primer/colors */ + fill: var(--banner-icon-fgColor); + } -.BannerActionsContainer { - display: flex; - column-gap: var(--base-size-12); - align-items: center; - margin-block: var(--base-size-2); -} + /* stylelint-disable-next-line selector-max-specificity */ + .Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg { + height: var(--base-size-16); + } -.BannerActions :where([data-primary-action='trailing']) { - display: none; -} + /* BannerDismiss ---------------------------------------------------------- */ -.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerActions { - margin-block-end: var(--base-size-6); -} + .BannerDismiss { + display: grid; + place-items: center; + padding: var(--base-size-8); + margin-inline-start: var(--base-size-4); + } -/* stylelint-disable-next-line selector-max-specificity */ -.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) - .BannerActionsContainer[data-primary-action='trailing'] { - display: none; -} + :where(.Banner):has(.BannerActions) .BannerDismiss { + margin-block: var(--base-size-2); + } -/* stylelint-disable-next-line selector-max-specificity */ -.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) - .BannerActionsContainer[data-primary-action='leading'] { - display: flex; -} + .BannerDismiss svg { + /* stylelint-disable-next-line primer/colors */ + color: var(--banner-icon-fgColor); + } -/* Layout ------------------------------------------------------------------- */ + /* BannerActions ---------------------------------------------------------- */ -@container banner (max-width: 500px) { - .BannerContainer { - display: grid; + .BannerActionsContainer { + display: flex; + column-gap: var(--base-size-12); + align-items: center; + margin-block: var(--base-size-2); } - .BannerContainer:has(.BannerActionsContainer) { - grid-template-rows: auto auto; + .BannerActions :where([data-primary-action='trailing']) { + display: none; } - .BannerActions { + .Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerActions { margin-block-end: var(--base-size-6); } - .BannerActions [data-primary-action='trailing'] { + /* stylelint-disable-next-line selector-max-specificity */ + .Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) + .BannerActionsContainer[data-primary-action='trailing'] { display: none; } - .BannerActions [data-primary-action='leading'] { + /* stylelint-disable-next-line selector-max-specificity */ + .Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) + .BannerActionsContainer[data-primary-action='leading'] { display: flex; } -} -@container banner (min-width: 500px) { - .BannerContainer { - display: grid; - grid-template-columns: auto auto; - } + /* Layout ------------------------------------------------------------------- */ - :where(.Banner):not([data-dismissible]) - :where(.BannerActionsContainer[data-primary-action='trailing']) - :where([data-variant='link']:only-child) { - padding-inline: 0 var(--base-size-12); - } + @container banner (max-width: 500px) { + .BannerContainer { + display: grid; + } - .BannerActions [data-primary-action='trailing'] { - display: flex; - min-height: var(--base-size-32, 2rem); + .BannerContainer:has(.BannerActionsContainer) { + grid-template-rows: auto auto; + } + + .BannerActions { + margin-block-end: var(--base-size-6); + } + + .BannerActions [data-primary-action='trailing'] { + display: none; + } + + .BannerActions [data-primary-action='leading'] { + display: flex; + } } - .BannerActions [data-primary-action='leading'] { - display: none; + @container banner (min-width: 500px) { + .BannerContainer { + display: grid; + grid-template-columns: auto auto; + } + + :where(.Banner):not([data-dismissible]) + :where(.BannerActionsContainer[data-primary-action='trailing']) + :where([data-variant='link']:only-child) { + padding-inline: 0 var(--base-size-12); + } + + .BannerActions [data-primary-action='trailing'] { + display: flex; + min-height: var(--base-size-32, 2rem); + } + + .BannerActions [data-primary-action='leading'] { + display: none; + } } } diff --git a/packages/react/src/BaseStyles.module.css b/packages/react/src/BaseStyles.module.css index 76259ac05dd..22eb2cfb34c 100644 --- a/packages/react/src/BaseStyles.module.css +++ b/packages/react/src/BaseStyles.module.css @@ -1,86 +1,88 @@ -/* stylelint-disable selector-max-specificity */ -/* stylelint-disable selector-type-no-unknown */ +@layer primer.base { + /* stylelint-disable selector-max-specificity */ + /* stylelint-disable selector-type-no-unknown */ -/* -------------------------------- + /* -------------------------------- * Global Styles *--------------------------------- */ -* { - box-sizing: border-box; -} - -body { - margin: 0; -} - -table { - /* stylelint-disable-next-line primer/borders */ - border-collapse: collapse; -} + * { + box-sizing: border-box; + } -[data-color-mode='light'] input { - color-scheme: light; -} + body { + margin: 0; + } -[data-color-mode='dark'] input { - color-scheme: dark; -} + table { + /* stylelint-disable-next-line primer/borders */ + border-collapse: collapse; + } -@media (prefers-color-scheme: light) { - [data-color-mode='auto'][data-light-theme*='light'] { + [data-color-mode='light'] input { color-scheme: light; } -} -@media (prefers-color-scheme: dark) { - [data-color-mode='auto'][data-dark-theme*='dark'] { + [data-color-mode='dark'] input { color-scheme: dark; } -} - -[role='button']:focus:not(:focus-visible):not(:global(.focus-visible)), -[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)), -button:focus:not(:focus-visible):not(:global(.focus-visible)), -summary:focus:not(:focus-visible):not(:global(.focus-visible)), -a:focus:not(:focus-visible):not(:global(.focus-visible)) { - outline: none; - box-shadow: none; -} -[tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)), -details-dialog:focus:not(:focus-visible):not(:global(.focus-visible)) { - outline: none; -} - -/* -------------------------------------------------------------------------- */ - -.BaseStyles { - font-family: var(--BaseStyles-fontFamily, var(--fontStack-system)); - /* stylelint-disable-next-line primer/typography */ - line-height: var(--BaseStyles-lineHeight, 1.5); - /* stylelint-disable-next-line primer/colors */ - color: var(--BaseStyles-fgColor, var(--fgColor-default)); - - /* Global styles for light mode */ - &:has([data-color-mode='light']) { - input & { + @media (prefers-color-scheme: light) { + [data-color-mode='auto'][data-light-theme*='light'] { color-scheme: light; } } - /* Global styles for dark mode */ - &:has([data-color-mode='dark']) { - input & { + @media (prefers-color-scheme: dark) { + [data-color-mode='auto'][data-dark-theme*='dark'] { color-scheme: dark; } } - /* Low-specificity default link styling */ - :where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])) { - color: var(--fgColor-accent, var(--color-accent-fg)); - text-decoration: none; + [role='button']:focus:not(:focus-visible):not(:global(.focus-visible)), + [role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)), + button:focus:not(:focus-visible):not(:global(.focus-visible)), + summary:focus:not(:focus-visible):not(:global(.focus-visible)), + a:focus:not(:focus-visible):not(:global(.focus-visible)) { + outline: none; + box-shadow: none; + } + + [tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)), + details-dialog:focus:not(:focus-visible):not(:global(.focus-visible)) { + outline: none; + } + + /* -------------------------------------------------------------------------- */ + + .BaseStyles { + font-family: var(--BaseStyles-fontFamily, var(--fontStack-system)); + /* stylelint-disable-next-line primer/typography */ + line-height: var(--BaseStyles-lineHeight, 1.5); + /* stylelint-disable-next-line primer/colors */ + color: var(--BaseStyles-fgColor, var(--fgColor-default)); + + /* Global styles for light mode */ + &:has([data-color-mode='light']) { + input & { + color-scheme: light; + } + } + + /* Global styles for dark mode */ + &:has([data-color-mode='dark']) { + input & { + color-scheme: dark; + } + } + + /* Low-specificity default link styling */ + :where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])) { + color: var(--fgColor-accent, var(--color-accent-fg)); + text-decoration: none; - &:hover { - text-decoration: underline; + &:hover { + text-decoration: underline; + } } } } diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css index f0def64e867..6fa0a3908c0 100644 --- a/packages/react/src/Blankslate/Blankslate.module.css +++ b/packages/react/src/Blankslate/Blankslate.module.css @@ -1,134 +1,136 @@ -.Container { - container: blankslate / inline-size; -} - -.Blankslate { - display: grid; - justify-items: center; - /* stylelint-disable-next-line primer/spacing */ - padding: var(--blankslate-padding); - - &:where([data-border]) { - border: var(--borderWidth-thin) solid var(--borderColor-default); - border-radius: var(--borderRadius-medium); - } - - &:where([data-narrow]) { - max-width: 485px; - margin: 0 auto; - } - - &:where([data-size='medium']) { - --blankslate-heading-text: var(--text-title-shorthand-medium); - --blankslate-heading-margin-block: 0 var(--base-size-4); - --blankslate-description-text: var(--text-body-shorthand-large); - --blankslate-padding: var(--base-size-32); - --blankslate-action-margin-block-end: var(--base-size-16); +@layer primer.components.Blankslate { + .Container { + container: blankslate / inline-size; } - &:where([data-size='medium'][data-spacious]) { - --blankslate-padding: var(--base-size-80) var(--base-size-40); - } - - &:where([data-size='small']) { - --blankslate-heading-text: var(--text-title-shorthand-small); - --blankslate-heading-margin-block: 0 var(--base-size-4); - --blankslate-description-text: var(--text-body-shorthand-medium); - --blankslate-padding: var(--base-size-32) var(--base-size-20); - --blankslate-action-margin-block-end: var(--base-size-12); - --blankslate-visual-size: var(--base-size-24); - } + .Blankslate { + display: grid; + justify-items: center; + /* stylelint-disable-next-line primer/spacing */ + padding: var(--blankslate-padding); - &:where([data-size='small'][data-spacious]) { - --blankslate-padding: var(--base-size-44) var(--base-size-28); - } + &:where([data-border]) { + border: var(--borderWidth-thin) solid var(--borderColor-default); + border-radius: var(--borderRadius-medium); + } - &:where([data-size='large']) { - --blankslate-heading-text: var(--text-title-shorthand-large); - --blankslate-heading-margin-block: var(--base-size-8) var(--base-size-4); - --blankslate-description-text: var(--text-body-shorthand-large); - --blankslate-description-margin-block: 0 var(--base-size-8); - --blankslate-padding: var(--base-size-32); - --blankslate-action-margin-block-end: var(--base-size-16); - } + &:where([data-narrow]) { + max-width: 485px; + margin: 0 auto; + } - &:where([data-size='large'][data-spacious]) { - --blankslate-padding: var(--base-size-80) var(--base-size-40); - } -} + &:where([data-size='medium']) { + --blankslate-heading-text: var(--text-title-shorthand-medium); + --blankslate-heading-margin-block: 0 var(--base-size-4); + --blankslate-description-text: var(--text-body-shorthand-large); + --blankslate-padding: var(--base-size-32); + --blankslate-action-margin-block-end: var(--base-size-16); + } -.Heading, -.Description { - margin: 0; - text-align: center; -} + &:where([data-size='medium'][data-spacious]) { + --blankslate-padding: var(--base-size-80) var(--base-size-40); + } -.Heading { - /* stylelint-disable-next-line primer/typography */ - font: var(--blankslate-heading-text); - /* stylelint-disable-next-line primer/spacing */ - margin-block: var(--blankslate-heading-margin-block); -} + &:where([data-size='small']) { + --blankslate-heading-text: var(--text-title-shorthand-small); + --blankslate-heading-margin-block: 0 var(--base-size-4); + --blankslate-description-text: var(--text-body-shorthand-medium); + --blankslate-padding: var(--base-size-32) var(--base-size-20); + --blankslate-action-margin-block-end: var(--base-size-12); + --blankslate-visual-size: var(--base-size-24); + } -.Description { - /* stylelint-disable-next-line primer/typography */ - font: var(--blankslate-description-text); - color: var(--fgColor-muted); - /* stylelint-disable-next-line primer/spacing */ - margin-block: var(--blankslate-description-margin-block); -} + &:where([data-size='small'][data-spacious]) { + --blankslate-padding: var(--base-size-44) var(--base-size-28); + } -.Visual { - color: var(--fgColor-muted); - /* This display property exists so that the container matches the size of the inner svg element */ - display: inline-flex; - margin-block-end: var(--base-size-8); - max-width: var(--blankslate-visual-size); + &:where([data-size='large']) { + --blankslate-heading-text: var(--text-title-shorthand-large); + --blankslate-heading-margin-block: var(--base-size-8) var(--base-size-4); + --blankslate-description-text: var(--text-body-shorthand-large); + --blankslate-description-margin-block: 0 var(--base-size-8); + --blankslate-padding: var(--base-size-32); + --blankslate-action-margin-block-end: var(--base-size-16); + } - & svg { - width: 100%; + &:where([data-size='large'][data-spacious]) { + --blankslate-padding: var(--base-size-80) var(--base-size-40); + } } -} -.Action { - /* stylelint-disable-next-line primer/typography */ - font: var(--blankslate-description-text); - margin-block-start: var(--base-size-16); + .Heading, + .Description { + margin: 0; + text-align: center; + } - &:where(:last-of-type) { + .Heading { + /* stylelint-disable-next-line primer/typography */ + font: var(--blankslate-heading-text); /* stylelint-disable-next-line primer/spacing */ - margin-block-end: var(--blankslate-action-margin-block-end); + margin-block: var(--blankslate-heading-margin-block); } -} -/* At the time these styles were written, 34rem was our "small" breakpoint width */ -@container blankslate (max-width: 34rem) { - .Blankslate { - --blankslate-padding: var(--base-size-20); - - &:where([data-spacious='true']) { - --blankslate-padding: var(--base-size-44) var(--base-size-28); - } - - --blankslate-heading-text: var(--text-title-shorthand-small); - --blankslate-description-text: var(--text-body-shorthand-medium); + .Description { + /* stylelint-disable-next-line primer/typography */ + font: var(--blankslate-description-text); + color: var(--fgColor-muted); + /* stylelint-disable-next-line primer/spacing */ + margin-block: var(--blankslate-description-margin-block); } .Visual { - max-width: var(--base-size-24); - margin-bottom: var(--base-size-8); color: var(--fgColor-muted); + /* This display property exists so that the container matches the size of the inner svg element */ + display: inline-flex; + margin-block-end: var(--base-size-8); + max-width: var(--blankslate-visual-size); + + & svg { + width: 100%; + } } .Action { - margin-top: var(--base-size-8); + /* stylelint-disable-next-line primer/typography */ + font: var(--blankslate-description-text); + margin-block-start: var(--base-size-16); + + &:where(:last-of-type) { + /* stylelint-disable-next-line primer/spacing */ + margin-block-end: var(--blankslate-action-margin-block-end); + } + } - &:first-of-type { - margin-top: var(--base-size-16); + /* At the time these styles were written, 34rem was our "small" breakpoint width */ + @container blankslate (max-width: 34rem) { + .Blankslate { + --blankslate-padding: var(--base-size-20); + + &:where([data-spacious='true']) { + --blankslate-padding: var(--base-size-44) var(--base-size-28); + } + + --blankslate-heading-text: var(--text-title-shorthand-small); + --blankslate-description-text: var(--text-body-shorthand-medium); + } + + .Visual { + max-width: var(--base-size-24); + margin-bottom: var(--base-size-8); + color: var(--fgColor-muted); } - &:last-of-type { - margin-bottom: calc(var(--base-size-8) / 2); + .Action { + margin-top: var(--base-size-8); + + &:first-of-type { + margin-top: var(--base-size-16); + } + + &:last-of-type { + margin-bottom: calc(var(--base-size-8) / 2); + } } } } diff --git a/packages/react/src/BranchName/BranchName.module.css b/packages/react/src/BranchName/BranchName.module.css index 66e9abc2d50..7dafb487321 100644 --- a/packages/react/src/BranchName/BranchName.module.css +++ b/packages/react/src/BranchName/BranchName.module.css @@ -1,14 +1,16 @@ -.BranchName { - display: inline-block; - padding: var(--base-size-2) var(--base-size-6); - font-family: var(--fontStack-monospace); - font-size: var(--text-body-size-small); - color: var(--fgColor-link); - text-decoration: none; - background-color: var(--bgColor-accent-muted); - border-radius: var(--borderRadius-medium); +@layer primer.components.BranchName { + .BranchName { + display: inline-block; + padding: var(--base-size-2) var(--base-size-6); + font-family: var(--fontStack-monospace); + font-size: var(--text-body-size-small); + color: var(--fgColor-link); + text-decoration: none; + background-color: var(--bgColor-accent-muted); + border-radius: var(--borderRadius-medium); - &:is(:not(a)) { - color: var(--fgColor-muted); + &:is(:not(a)) { + color: var(--fgColor-muted); + } } } diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css index e699fb42587..6cf3437dbc2 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css @@ -1,165 +1,167 @@ -.BreadcrumbsBase { - display: flex; - justify-content: space-between; - width: 100%; -} - -.BreadcrumbsList { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; -} - -[data-overflow='menu'], -[data-overflow='menu-with-root'] { - & .BreadcrumbsList { - white-space: nowrap; +@layer primer.components.Breadcrumbs { + .BreadcrumbsBase { display: flex; - flex-direction: row; + justify-content: space-between; + width: 100%; } -} - -.ItemSeparator { - color: var(--fgColor-muted); - display: flex; - align-self: center; - justify-content: center; - white-space: nowrap; - user-select: none; -} -.ItemWrapper { - display: inline-block; - font-size: var(--text-body-size-medium); - list-style: none; + .BreadcrumbsList { + padding-left: 0; + margin-top: 0; + margin-bottom: 0; + } - &::after { - display: inline-block; - height: 0.8em; - /* stylelint-disable-next-line primer/spacing */ - margin: 0 0.5em; - font-size: var(--text-body-size-medium); - content: ''; - /* stylelint-disable-next-line primer/borders, primer/colors */ - border-right: 0.1em solid var(--fgColor-muted); - transform: rotate(15deg) translateY(0.0625em); + [data-overflow='menu'], + [data-overflow='menu-with-root'] { + & .BreadcrumbsList { + white-space: nowrap; + display: flex; + flex-direction: row; + } } - &:first-child { - margin-left: 0; + .ItemSeparator { + color: var(--fgColor-muted); + display: flex; + align-self: center; + justify-content: center; + white-space: nowrap; + user-select: none; } - &:last-child { + .ItemWrapper { + display: inline-block; + font-size: var(--text-body-size-medium); + list-style: none; + &::after { - content: none; + display: inline-block; + height: 0.8em; + /* stylelint-disable-next-line primer/spacing */ + margin: 0 0.5em; + font-size: var(--text-body-size-medium); + content: ''; + /* stylelint-disable-next-line primer/borders, primer/colors */ + border-right: 0.1em solid var(--fgColor-muted); + transform: rotate(15deg) translateY(0.0625em); + } + + &:first-child { + margin-left: 0; + } + + &:last-child { + &::after { + content: none; + } } } -} -.Item { - display: inline-block; - font-size: var(--text-body-size-medium); + .Item { + display: inline-block; + font-size: var(--text-body-size-medium); - &:focus-visible { - border-radius: var(--borderRadius-small); + &:focus-visible { + border-radius: var(--borderRadius-small); - @mixin focusOutline 2px; + @mixin focusOutline 2px; + } } -} -[data-variant='normal'] { - & .Item { - color: var(--fgColor-link); - text-decoration: none; + [data-variant='normal'] { + & .Item { + color: var(--fgColor-link); + text-decoration: none; - &:not([aria-current]) { - &:hover { - text-decoration: underline; + &:not([aria-current]) { + &:hover { + text-decoration: underline; + } } - } - &:focus-visible { - text-decoration: none; - } + &:focus-visible { + text-decoration: none; + } - &[aria-current] { - color: var(--fgColor-default); + &[aria-current] { + color: var(--fgColor-default); + } } } -} -[data-variant='spacious'] { - & .Item { - color: var(--fgColor-default); - text-decoration: none; - padding-inline: var(--base-size-6); - padding-block: var(--base-size-4); - border-radius: var(--borderRadius-medium); - - &:hover { - background: var(--control-transparent-bgColor-hover); + [data-variant='spacious'] { + & .Item { + color: var(--fgColor-default); text-decoration: none; - } + padding-inline: var(--base-size-6); + padding-block: var(--base-size-4); + border-radius: var(--borderRadius-medium); - &[aria-current] { - font-weight: var(--base-text-weight-semibold); + &:hover { + background: var(--control-transparent-bgColor-hover); + text-decoration: none; + } + + &[aria-current] { + font-weight: var(--base-text-weight-semibold); + } } } -} -.BreadcrumbsItem { - display: inline-grid; - grid-auto-flow: column; - align-items: center; - flex: 0 99999 auto; - min-width: auto; - white-space: nowrap; - list-style: none; - - /* allow menu items to wrap line */ - &:has(.MenuOverlay) { - white-space: normal; - } + .BreadcrumbsItem { + display: inline-grid; + grid-auto-flow: column; + align-items: center; + flex: 0 99999 auto; + min-width: auto; + white-space: nowrap; + list-style: none; - &:first-child { - margin-left: 0; - } + /* allow menu items to wrap line */ + &:has(.MenuOverlay) { + white-space: normal; + } - &:last-child { - .ItemSeparator { - display: none; + &:first-child { + margin-left: 0; } - } - .MenuDetails { - position: relative; - display: inline-block; + &:last-child { + .ItemSeparator { + display: none; + } + } - & summary { - list-style: none; - cursor: pointer; + .MenuDetails { + position: relative; + display: inline-block; - &::-webkit-details-marker { - display: none; + & summary { + list-style: none; + cursor: pointer; + + &::-webkit-details-marker { + display: none; + } } } - } - .MenuOverlay { - position: absolute; - z-index: 1; - box-shadow: var(--shadow-floating-small); - border-radius: var(--borderRadius-large); - background-color: var(--overlay-bgColor); - min-width: var(--overlay-width-xsmall); - max-height: 100vh; - max-width: var(--overlay-width-small); - overflow: hidden; - /* stylelint-disable-next-line primer/spacing */ - top: calc(var(--overlay-offset) + var(--control-small-size)); - - @media (prefers-reduced-motion: no-preference) { - animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1); + .MenuOverlay { + position: absolute; + z-index: 1; + box-shadow: var(--shadow-floating-small); + border-radius: var(--borderRadius-large); + background-color: var(--overlay-bgColor); + min-width: var(--overlay-width-xsmall); + max-height: 100vh; + max-width: var(--overlay-width-small); + overflow: hidden; + /* stylelint-disable-next-line primer/spacing */ + top: calc(var(--overlay-offset) + var(--control-small-size)); + + @media (prefers-reduced-motion: no-preference) { + animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1); + } } } } diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 7ff56b63091..112cbc6fc54 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -1,660 +1,666 @@ -/* Base styles */ -.ButtonBase { - display: flex; - min-width: max-content; - height: var(--control-medium-size); - /* stylelint-disable-next-line primer/spacing */ - padding: 0 var(--control-medium-paddingInline-normal); - font-family: inherit; - font-size: var(--text-body-size-medium); - font-weight: var(--base-text-weight-medium); - color: var(--button-default-fgColor-rest); - text-align: center; - text-decoration: none; - cursor: pointer; - user-select: none; - background-color: transparent; - border: var(--borderWidth-thin) solid; - border-color: var(--button-default-borderColor-rest); - border-radius: var(--borderRadius-medium); - transition: 80ms cubic-bezier(0.65, 0, 0.35, 1); - transition-property: color, fill, background-color, border-color; - appearance: none; - align-items: center; - justify-content: space-between; - gap: var(--base-size-8); - - &:has([data-kbd-chord]) { - padding-inline-end: var(--base-size-6); - } - - &:hover { - transition-duration: 80ms; - } - - &:focus-visible { - @mixin focusOutline; - } - - &:active { - transition: none; - } - - &:disabled, - &[aria-disabled='true']:not([data-loading='true']) { - cursor: not-allowed; - box-shadow: none; +@layer primer.components.ButtonBase { + /* Base styles */ + .ButtonBase { + display: flex; + min-width: max-content; + height: var(--control-medium-size); + /* stylelint-disable-next-line primer/spacing */ + padding: 0 var(--control-medium-paddingInline-normal); + font-family: inherit; + font-size: var(--text-body-size-medium); + font-weight: var(--base-text-weight-medium); + color: var(--button-default-fgColor-rest); + text-align: center; + text-decoration: none; + cursor: pointer; + user-select: none; + background-color: transparent; + border: var(--borderWidth-thin) solid; + border-color: var(--button-default-borderColor-rest); + border-radius: var(--borderRadius-medium); + transition: 80ms cubic-bezier(0.65, 0, 0.35, 1); + transition-property: color, fill, background-color, border-color; + appearance: none; + align-items: center; + justify-content: space-between; + gap: var(--base-size-8); - & .Visual, - & .CounterLabel { - color: inherit; + &:has([data-kbd-chord]) { + padding-inline-end: var(--base-size-6); } - } - @media (forced-colors: active) { - &:focus { - outline: solid 1px transparent; + &:hover { + transition-duration: 80ms; } - } - /* Visuals */ - & :where(.Visual) { - display: flex; - color: var(--fgColor-muted); - pointer-events: none; - } - - /* mostly for CounterLabel */ - & :where(.VisualWrap) { - display: flex; - pointer-events: none; - } + &:focus-visible { + @mixin focusOutline; + } - /* IconButton */ + &:active { + transition: none; + } - &:where(.IconButton) { - display: inline-grid; - width: var(--control-medium-size); - min-width: unset; - /* stylelint-disable-next-line primer/spacing */ - padding: unset; - place-content: center; - flex-shrink: 0; + &:disabled, + &[aria-disabled='true']:not([data-loading='true']) { + cursor: not-allowed; + box-shadow: none; - &:where([data-size='small']) { - width: var(--control-small-size); + & .Visual, + & .CounterLabel { + color: inherit; + } } - &:where([data-size='large']) { - width: var(--control-large-size); + @media (forced-colors: active) { + &:focus { + outline: solid 1px transparent; + } } - } - - /* LinkButton */ - &:where([href]) { - display: inline-flex; + /* Visuals */ + & :where(.Visual) { + display: flex; + color: var(--fgColor-muted); + pointer-events: none; + } - &:hover { - text-decoration: none; + /* mostly for CounterLabel */ + & :where(.VisualWrap) { + display: flex; + pointer-events: none; } - } - /* Button layout */ + /* IconButton */ - & :where(.ButtonContent) { - flex: 1 0 auto; - display: grid; - grid-template-areas: 'leadingVisual text trailingVisual'; - grid-template-columns: min-content minmax(0, auto) min-content; - align-items: center; - align-content: center; + &:where(.IconButton) { + display: inline-grid; + width: var(--control-medium-size); + min-width: unset; + /* stylelint-disable-next-line primer/spacing */ + padding: unset; + place-content: center; + flex-shrink: 0; + + &:where([data-size='small']) { + width: var(--control-small-size); + } - & > :not(:last-child) { - margin-right: var(--base-size-8); + &:where([data-size='large']) { + width: var(--control-large-size); + } } - /* Content alignment */ + /* LinkButton */ - &:where([data-align='center']) { - justify-content: center; - } + &:where([href]) { + display: inline-flex; - &:where([data-align='start']) { - justify-content: flex-start; + &:hover { + text-decoration: none; + } } - } - & :where([data-component='leadingVisual']) { - grid-area: leadingVisual; - } - - & :where(.Label) { - line-height: var(--text-body-lineHeight-medium); - white-space: nowrap; - grid-area: text; - } + /* Button layout */ - & :where([data-component='trailingVisual']) { - grid-area: trailingVisual; - } + & :where(.ButtonContent) { + flex: 1 0 auto; + display: grid; + grid-template-areas: 'leadingVisual text trailingVisual'; + grid-template-columns: min-content minmax(0, auto) min-content; + align-items: center; + align-content: center; - & :where([data-component='trailingAction']) { - margin-right: calc(var(--base-size-4) * -1); - } + & > :not(:last-child) { + margin-right: var(--base-size-8); + } - /* Size */ + /* Content alignment */ - &:where([data-size='small']) { - height: var(--control-small-size); - /* stylelint-disable-next-line primer/spacing */ - padding: 0 var(--control-small-paddingInline-condensed); - gap: var(--control-small-gap); - font-size: var(--text-body-size-small); + &:where([data-align='center']) { + justify-content: center; + } - & .ButtonContent > :not(:last-child) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--control-small-gap); + &:where([data-align='start']) { + justify-content: flex-start; + } } - & .Label { - line-height: var(--text-body-lineHeight-small); + & :where([data-component='leadingVisual']) { + grid-area: leadingVisual; } - } - - &:where([data-size='large']) { - height: var(--control-large-size); - /* stylelint-disable-next-line primer/spacing */ - padding: 0 var(--control-large-paddingInline-spacious); - gap: var(--control-large-gap); - & .ButtonContent > :not(:last-child) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--control-large-gap); + & :where(.Label) { + line-height: var(--text-body-lineHeight-medium); + white-space: nowrap; + grid-area: text; } - &:has([data-kbd-chord]) { - padding-inline-end: var(--base-size-8); + & :where([data-component='trailingVisual']) { + grid-area: trailingVisual; } - } - - /* Full width */ - - &:where([data-block='block']) { - width: 100%; - } - /* Wrap label text */ - - &:where([data-label-wrap='true']) { - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size); - - & .ButtonContent { - flex: 1 1 auto; - align-self: stretch; - /* stylelint-disable-next-line primer/spacing */ - padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2)); + & :where([data-component='trailingAction']) { + margin-right: calc(var(--base-size-4) * -1); } - & .Label { - /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ - word-break: break-word; - white-space: unset; - } + /* Size */ &:where([data-size='small']) { - height: unset; - min-height: var(--control-small-size); + height: var(--control-small-size); + /* stylelint-disable-next-line primer/spacing */ + padding: 0 var(--control-small-paddingInline-condensed); + gap: var(--control-small-gap); + font-size: var(--text-body-size-small); - & .ButtonContent { + & .ButtonContent > :not(:last-child) { /* stylelint-disable-next-line primer/spacing */ - padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2)); + margin-right: var(--control-small-gap); + } + + & .Label { + line-height: var(--text-body-lineHeight-small); } } &:where([data-size='large']) { - height: unset; - min-height: var(--control-large-size); + height: var(--control-large-size); /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--control-large-paddingInline-spacious); + padding: 0 var(--control-large-paddingInline-spacious); + gap: var(--control-large-gap); - & .ButtonContent { + & .ButtonContent > :not(:last-child) { /* stylelint-disable-next-line primer/spacing */ - padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2)); + margin-right: var(--control-large-gap); } - } - } - - /* Loading */ - /* only hide label if there's no leading/trailing visuals - * move spinner to label spot if not leading/trailing visuals - */ + &:has([data-kbd-chord]) { + padding-inline-end: var(--base-size-8); + } + } - &:where([data-loading='true']) { - & - .LoadingSpinner:not( - [data-component='leadingVisual'], - [data-component='trailingVisual'], - [data-component='trailingAction'] - ) { - grid-area: text; - margin-right: 0 !important; - place-self: center; + /* Full width */ - & + .Label { - visibility: hidden; - } + &:where([data-block='block']) { + width: 100%; } - } - /* Styles for the spinner element displayed when the Button is in a loading state. - * Ensures the spinner is centered within its container. */ - .LoadingSpinner { - display: flex; - align-items: center; - justify-content: center; - } + /* Wrap label text */ - /* Default Variant */ + &:where([data-label-wrap='true']) { + min-width: fit-content; + height: unset; + min-height: var(--control-medium-size); - &:where([data-variant='default']) { - color: var(--button-default-fgColor-rest); - background-color: var(--button-default-bgColor-rest); - box-shadow: var(--button-default-shadow-resting); + & .ButtonContent { + flex: 1 1 auto; + align-self: stretch; + /* stylelint-disable-next-line primer/spacing */ + padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2)); + } - &[aria-expanded='true'] { - background-color: var(--button-default-bgColor-active); - border-color: var(--button-default-borderColor-active); - } + & .Label { + /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ + word-break: break-word; + white-space: unset; + } - &:hover { - background-color: var(--button-default-bgColor-hover); - border-color: var(--button-default-borderColor-hover); - } + &:where([data-size='small']) { + height: unset; + min-height: var(--control-small-size); - &:active { - background-color: var(--button-default-bgColor-active); - border-color: var(--button-default-borderColor-active); - } + & .ButtonContent { + /* stylelint-disable-next-line primer/spacing */ + padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2)); + } + } - &:disabled, - &[aria-disabled='true']:not([data-loading='true']) { - color: var(--control-fgColor-disabled); - background-color: var(--button-default-bgColor-disabled); - border-color: var(--button-default-borderColor-disabled); - box-shadow: none; + &:where([data-size='large']) { + height: unset; + min-height: var(--control-large-size); + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--control-large-paddingInline-spacious); - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-default-bgColor-disabled); - color: var(--buttonKeybindingHint-default-fgColor-disabled); - border-color: var(--buttonKeybindingHint-default-borderColor-disabled); + & .ButtonContent { + /* stylelint-disable-next-line primer/spacing */ + padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2)); + } } } - & .CounterLabel { - background-color: var(--buttonCounter-default-bgColor-rest) !important; /* temporarily override our own sx prop */ - } + /* Loading */ + + /* only hide label if there's no leading/trailing visuals + * move spinner to label spot if not leading/trailing visuals + */ - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-default-bgColor-rest); - color: var(--buttonKeybindingHint-default-fgColor-rest); - border-color: var(--buttonKeybindingHint-default-borderColor-rest); + &:where([data-loading='true']) { + & + .LoadingSpinner:not( + [data-component='leadingVisual'], + [data-component='trailingVisual'], + [data-component='trailingAction'] + ) { + grid-area: text; + margin-right: 0 !important; + place-self: center; + + & + .Label { + visibility: hidden; + } + } } - &:where(.IconButton) { - color: var(--fgColor-muted); + /* Styles for the spinner element displayed when the Button is in a loading state. + * Ensures the spinner is centered within its container. */ + .LoadingSpinner { + display: flex; + align-items: center; + justify-content: center; } - } - /* Primary variant */ + /* Default Variant */ - &:where([data-variant='primary']) { - color: var(--button-primary-fgColor-rest); - background-color: var(--button-primary-bgColor-rest); - border-color: var(--button-primary-borderColor-rest); - box-shadow: var(--shadow-resting-small); + &:where([data-variant='default']) { + color: var(--button-default-fgColor-rest); + background-color: var(--button-default-bgColor-rest); + box-shadow: var(--button-default-shadow-resting); - &[aria-expanded='true'] { - background-color: var(--button-primary-bgColor-active); - box-shadow: var(--button-primary-shadow-selected); - } + &[aria-expanded='true'] { + background-color: var(--button-default-bgColor-active); + border-color: var(--button-default-borderColor-active); + } - &:hover { - background-color: var(--button-primary-bgColor-hover); - border-color: var(--button-primary-borderColor-hover); - } + &:hover { + background-color: var(--button-default-bgColor-hover); + border-color: var(--button-default-borderColor-hover); + } - &:focus-visible { - @mixin focusOutlineOnEmphasis; - } + &:active { + background-color: var(--button-default-bgColor-active); + border-color: var(--button-default-borderColor-active); + } - &:active { - background-color: var(--button-primary-bgColor-active); - box-shadow: var(--button-primary-shadow-selected); - } + &:disabled, + &[aria-disabled='true']:not([data-loading='true']) { + color: var(--control-fgColor-disabled); + background-color: var(--button-default-bgColor-disabled); + border-color: var(--button-default-borderColor-disabled); + box-shadow: none; + + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-default-bgColor-disabled); + color: var(--buttonKeybindingHint-default-fgColor-disabled); + border-color: var(--buttonKeybindingHint-default-borderColor-disabled); + } + } - &:disabled, - &[aria-disabled='true']:not([data-loading='true']) { - color: var(--button-primary-fgColor-disabled); - background-color: var(--button-primary-bgColor-disabled); - border-color: var(--button-primary-borderColor-disabled); - box-shadow: none; + & .CounterLabel { + background-color: var( + --buttonCounter-default-bgColor-rest + ) !important; /* temporarily override our own sx prop */ + } & [data-kbd-chord] { - background: var(--buttonKeybindingHint-primary-bgColor-disabled); - color: var(--buttonKeybindingHint-primary-fgColor-disabled); - border-color: var(--buttonKeybindingHint-primary-borderColor-disabled); + background: var(--buttonKeybindingHint-default-bgColor-rest); + color: var(--buttonKeybindingHint-default-fgColor-rest); + border-color: var(--buttonKeybindingHint-default-borderColor-rest); } - } - & .CounterLabel { - color: var(--button-primary-fgColor-rest) !important; /* temporarily override our own sx prop */ - background-color: var(--buttonCounter-primary-bgColor-rest) !important; /* temporarily override our own sx prop */ + &:where(.IconButton) { + color: var(--fgColor-muted); + } } - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-primary-bgColor-rest); - color: var(--buttonKeybindingHint-primary-fgColor-rest); - border-color: var(--buttonKeybindingHint-primary-borderColor-rest); - } + /* Primary variant */ - /* temporarily using the fgColor to match legacy and reduce visual changes- will eventually be iconColor */ - & .Visual { + &:where([data-variant='primary']) { color: var(--button-primary-fgColor-rest); - } - } + background-color: var(--button-primary-bgColor-rest); + border-color: var(--button-primary-borderColor-rest); + box-shadow: var(--shadow-resting-small); - /* Danger variant */ + &[aria-expanded='true'] { + background-color: var(--button-primary-bgColor-active); + box-shadow: var(--button-primary-shadow-selected); + } - &:where([data-variant='danger']) { - color: var(--button-danger-fgColor-rest); - background-color: var(--button-danger-bgColor-rest); - box-shadow: var(--button-default-shadow-resting); + &:hover { + background-color: var(--button-primary-bgColor-hover); + border-color: var(--button-primary-borderColor-hover); + } - &[aria-expanded='true'] { - color: var(--button-danger-fgColor-active); - background-color: var(--button-danger-bgColor-active); - border-color: var(--button-danger-borderColor-active); - box-shadow: var(--button-danger-shadow-selected); + &:focus-visible { + @mixin focusOutlineOnEmphasis; + } - & .Visual { - color: var(--button-danger-iconColor-hover); + &:active { + background-color: var(--button-primary-bgColor-active); + box-shadow: var(--button-primary-shadow-selected); } - } - &:hover { - color: var(--button-danger-fgColor-hover); - background-color: var(--button-danger-bgColor-hover); - border-color: var(--button-danger-borderColor-hover); - box-shadow: var(--shadow-resting-small); + &:disabled, + &[aria-disabled='true']:not([data-loading='true']) { + color: var(--button-primary-fgColor-disabled); + background-color: var(--button-primary-bgColor-disabled); + border-color: var(--button-primary-borderColor-disabled); + box-shadow: none; + + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-primary-bgColor-disabled); + color: var(--buttonKeybindingHint-primary-fgColor-disabled); + border-color: var(--buttonKeybindingHint-primary-borderColor-disabled); + } + } & .CounterLabel { - color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */ - background-color: var(--buttonCounter-danger-bgColor-hover) !important; + color: var(--button-primary-fgColor-rest) !important; /* temporarily override our own sx prop */ + background-color: var( + --buttonCounter-primary-bgColor-rest + ) !important; /* temporarily override our own sx prop */ } & [data-kbd-chord] { - background: var(--buttonKeybindingHint-danger-bgColor-hover); - color: var(--buttonKeybindingHint-danger-fgColor-hover); - border-color: var(--buttonKeybindingHint-danger-borderColor-hover); - transition: 80ms ease-out; + background: var(--buttonKeybindingHint-primary-bgColor-rest); + color: var(--buttonKeybindingHint-primary-fgColor-rest); + border-color: var(--buttonKeybindingHint-primary-borderColor-rest); } + /* temporarily using the fgColor to match legacy and reduce visual changes- will eventually be iconColor */ & .Visual { - color: var(--button-danger-iconColor-hover); + color: var(--button-primary-fgColor-rest); } } - &:active { - color: var(--button-danger-fgColor-active); - background-color: var(--button-danger-bgColor-active); - border-color: var(--button-danger-borderColor-active); - box-shadow: var(--button-danger-shadow-selected); + /* Danger variant */ - & .CounterLabel { - color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */ - background-color: var(--buttonCounter-danger-bgColor-hover) !important; + &:where([data-variant='danger']) { + color: var(--button-danger-fgColor-rest); + background-color: var(--button-danger-bgColor-rest); + box-shadow: var(--button-default-shadow-resting); + + &[aria-expanded='true'] { + color: var(--button-danger-fgColor-active); + background-color: var(--button-danger-bgColor-active); + border-color: var(--button-danger-borderColor-active); + box-shadow: var(--button-danger-shadow-selected); + + & .Visual { + color: var(--button-danger-iconColor-hover); + } } - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-danger-bgColor-active); - color: var(--buttonKeybindingHint-danger-fgColor-active); - border-color: var(--buttonKeybindingHint-danger-borderColor-active); - transition: 80ms ease-out; + &:hover { + color: var(--button-danger-fgColor-hover); + background-color: var(--button-danger-bgColor-hover); + border-color: var(--button-danger-borderColor-hover); + box-shadow: var(--shadow-resting-small); + + & .CounterLabel { + color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */ + background-color: var(--buttonCounter-danger-bgColor-hover) !important; + } + + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-danger-bgColor-hover); + color: var(--buttonKeybindingHint-danger-fgColor-hover); + border-color: var(--buttonKeybindingHint-danger-borderColor-hover); + transition: 80ms ease-out; + } + + & .Visual { + color: var(--button-danger-iconColor-hover); + } } - & .Visual { - color: var(--button-danger-iconColor-hover); + &:active { + color: var(--button-danger-fgColor-active); + background-color: var(--button-danger-bgColor-active); + border-color: var(--button-danger-borderColor-active); + box-shadow: var(--button-danger-shadow-selected); + + & .CounterLabel { + color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */ + background-color: var(--buttonCounter-danger-bgColor-hover) !important; + } + + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-danger-bgColor-active); + color: var(--buttonKeybindingHint-danger-fgColor-active); + border-color: var(--buttonKeybindingHint-danger-borderColor-active); + transition: 80ms ease-out; + } + + & .Visual { + color: var(--button-danger-iconColor-hover); + } } - } - &:disabled, - &[aria-disabled='true']:not([data-loading='true']) { - color: var(--button-danger-fgColor-disabled); - background-color: var(--button-danger-bgColor-disabled); - border-color: var(--button-default-borderColor-disabled); - box-shadow: none; + &:disabled, + &[aria-disabled='true']:not([data-loading='true']) { + color: var(--button-danger-fgColor-disabled); + background-color: var(--button-danger-bgColor-disabled); + border-color: var(--button-default-borderColor-disabled); + box-shadow: none; + + & .CounterLabel { + color: var(--buttonCounter-danger-fgColor-disabled) !important; /* temporarily override our own sx prop */ + background-color: var(--buttonCounter-danger-bgColor-disabled) !important; + } + + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-danger-bgColor-disabled); + color: var(--buttonKeybindingHint-danger-fgColor-disabled); + border-color: var(--buttonKeybindingHint-danger-borderColor-disabled); + } + } & .CounterLabel { - color: var(--buttonCounter-danger-fgColor-disabled) !important; /* temporarily override our own sx prop */ - background-color: var(--buttonCounter-danger-bgColor-disabled) !important; + color: var(--buttonCounter-danger-fgColor-rest) !important; /* temporarily override our own sx prop */ + background-color: var(--buttonCounter-danger-bgColor-rest) !important; } & [data-kbd-chord] { - background: var(--buttonKeybindingHint-danger-bgColor-disabled); - color: var(--buttonKeybindingHint-danger-fgColor-disabled); - border-color: var(--buttonKeybindingHint-danger-borderColor-disabled); + background: var(--buttonKeybindingHint-danger-bgColor-rest); + color: var(--buttonKeybindingHint-danger-fgColor-rest); + border-color: var(--buttonKeybindingHint-danger-borderColor-rest); } - } - - & .CounterLabel { - color: var(--buttonCounter-danger-fgColor-rest) !important; /* temporarily override our own sx prop */ - background-color: var(--buttonCounter-danger-bgColor-rest) !important; - } - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-danger-bgColor-rest); - color: var(--buttonKeybindingHint-danger-fgColor-rest); - border-color: var(--buttonKeybindingHint-danger-borderColor-rest); + & .Visual { + color: var(--button-danger-iconColor-rest); + } } - & .Visual { - color: var(--button-danger-iconColor-rest); - } - } + /* Invisible variant */ - /* Invisible variant */ + &:where([data-variant='invisible']) { + color: var(--button-default-fgColor-rest); + border-color: var(--button-invisible-borderColor-rest); + box-shadow: none; - &:where([data-variant='invisible']) { - color: var(--button-default-fgColor-rest); - border-color: var(--button-invisible-borderColor-rest); - box-shadow: none; + &[aria-expanded='true'] { + background-color: var(--button-invisible-bgColor-active); + } - &[aria-expanded='true'] { - background-color: var(--button-invisible-bgColor-active); - } + &:hover { + background-color: var(--button-invisible-bgColor-hover); + border-color: var(--button-invisible-borderColor-hover); - &:hover { - background-color: var(--button-invisible-bgColor-hover); - border-color: var(--button-invisible-borderColor-hover); + & .Visual { + color: var(--button-invisible-iconColor-hover); + } - & .Visual { - color: var(--button-invisible-iconColor-hover); + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-invisible-bgColor-hover); + transition: 80ms ease-out; + } } - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-invisible-bgColor-hover); - transition: 80ms ease-out; + &:active { + background-color: var(--button-invisible-bgColor-active); + + & .Visual { + color: var(--button-invisible-iconColor-hover); + } + + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-invisible-bgColor-active); + transition: 80ms ease-out; + } } - } - &:active { - background-color: var(--button-invisible-bgColor-active); + &:disabled, + &[aria-disabled='true']:not([data-loading='true']) { + color: var(--button-invisible-fgColor-disabled); + background-color: var(--button-invisible-bgColor-disabled); + border-color: var(--button-invisible-borderColor-disabled); + box-shadow: none; + + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-invisible-bgColor-disabled); + color: var(--buttonKeybindingHint-invisible-fgColor-disabled); + border-color: var(--buttonKeybindingHint-invisible-borderColor-disabled); + } + } & .Visual { - color: var(--button-invisible-iconColor-hover); + color: var(--button-invisible-iconColor-rest); } - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-invisible-bgColor-active); - transition: 80ms ease-out; + & .CounterLabel { + background-color: var(--buttonCounter-invisible-bgColor-rest) !important; } - } - - &:disabled, - &[aria-disabled='true']:not([data-loading='true']) { - color: var(--button-invisible-fgColor-disabled); - background-color: var(--button-invisible-bgColor-disabled); - border-color: var(--button-invisible-borderColor-disabled); - box-shadow: none; & [data-kbd-chord] { - background: var(--buttonKeybindingHint-invisible-bgColor-disabled); - color: var(--buttonKeybindingHint-invisible-fgColor-disabled); - border-color: var(--buttonKeybindingHint-invisible-borderColor-disabled); + background: var(--buttonKeybindingHint-invisible-bgColor-rest); + color: var(--buttonKeybindingHint-invisible-fgColor-rest); + border-color: var(--buttonKeybindingHint-invisible-borderColor-rest); } - } - & .Visual { - color: var(--button-invisible-iconColor-rest); + &:where(.IconButton) { + color: var(--button-invisible-iconColor-rest); + } } - & .CounterLabel { - background-color: var(--buttonCounter-invisible-bgColor-rest) !important; - } + /* Link variant */ - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-invisible-bgColor-rest); - color: var(--buttonKeybindingHint-invisible-fgColor-rest); - border-color: var(--buttonKeybindingHint-invisible-borderColor-rest); - } + &:where([data-variant='link']) { + display: inline-flex; + min-width: fit-content; + height: unset; + padding: 0; + font-size: inherit; + color: var(--fgColor-link); + text-align: left; + border: unset; + border-radius: 0; - &:where(.IconButton) { - color: var(--button-invisible-iconColor-rest); - } - } + &:hover:not(:disabled, [data-inactive]) { + text-decoration: underline; + } - /* Link variant */ - - &:where([data-variant='link']) { - display: inline-flex; - min-width: fit-content; - height: unset; - padding: 0; - font-size: inherit; - color: var(--fgColor-link); - text-align: left; - border: unset; - border-radius: 0; - - &:hover:not(:disabled, [data-inactive]) { - text-decoration: underline; - } + &:focus-visible, + &:focus { + outline-offset: 2px; + } - &:focus-visible, - &:focus { - outline-offset: 2px; - } + &:disabled, + &[aria-disabled='true']:not([data-loading='true']) { + color: var(--control-fgColor-disabled); + background-color: transparent; + border-color: transparent; + } - &:disabled, - &[aria-disabled='true']:not([data-loading='true']) { - color: var(--control-fgColor-disabled); - background-color: transparent; - border-color: transparent; - } + & .Label { + white-space: unset; + } - & .Label { - white-space: unset; - } + &:where([data-inactive]) { + color: var(--button-inactive-fgColor); + background: transparent !important; + } - &:where([data-inactive]) { - color: var(--button-inactive-fgColor); - background: transparent !important; + & .Visual { + color: var(--fgColor-link); + } } - & .Visual { - color: var(--fgColor-link); - } - } + [data-a11y-link-underlines='true'] &:where([data-variant='link']) { + &:not(:has(.Visual)) { + text-decoration: underline; + } - [data-a11y-link-underlines='true'] &:where([data-variant='link']) { - &:not(:has(.Visual)) { - text-decoration: underline; - } + &:has(.Visual) { + background-image: linear-gradient(to right, currentColor, currentColor); + background-size: 100% 1.5px; + background-position: 0 calc(100% - 2px); + background-repeat: no-repeat; - &:has(.Visual) { - background-image: linear-gradient(to right, currentColor, currentColor); - background-size: 100% 1.5px; - background-position: 0 calc(100% - 2px); - background-repeat: no-repeat; + &:hover { + text-decoration: none; + } + } + } - &:hover { + [data-a11y-link-underlines='false'] &:where([data-variant='link']) { + &:not(:has(.Visual)) { text-decoration: none; + background-image: none; } - } - } - [data-a11y-link-underlines='false'] &:where([data-variant='link']) { - &:not(:has(.Visual)) { - text-decoration: none; - background-image: none; + &:has(.Visual) { + background-image: none; + } } - &:has(.Visual) { - background-image: none; - } - } + /* Inactive */ - /* Inactive */ - - &:where([data-inactive]), - &:where([data-inactive]):hover, - &:where([data-inactive]):active { - color: var(--button-inactive-fgColor); - cursor: auto; - background-color: var(--button-inactive-bgColor); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--button-inactive-bgColor); - box-shadow: none; - - & .Visual, - & .CounterLabel { - color: inherit !important; - } + &:where([data-inactive]), + &:where([data-inactive]):hover, + &:where([data-inactive]):active { + color: var(--button-inactive-fgColor); + cursor: auto; + background-color: var(--button-inactive-bgColor); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--button-inactive-bgColor); + box-shadow: none; - & [data-kbd-chord] { - background: var(--buttonKeybindingHint-inactive-bgColor); - color: var(--buttonKeybindingHint-inactive-fgColor); - border-color: var(--buttonKeybindingHint-inactive-borderColor); - } - } + & .Visual, + & .CounterLabel { + color: inherit !important; + } - /* Icon-only + Counter */ + & [data-kbd-chord] { + background: var(--buttonKeybindingHint-inactive-bgColor); + color: var(--buttonKeybindingHint-inactive-fgColor); + border-color: var(--buttonKeybindingHint-inactive-borderColor); + } + } - &:where([data-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--control-medium-paddingInline-condensed); + /* Icon-only + Counter */ - &:where([data-size='small']) { + &:where([data-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) { /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--control-xsmall-paddingInline-condensed); - } + padding-inline: var(--control-medium-paddingInline-condensed); - &:where([data-size='large']) { - /* stylelint-disable-next-line primer/spacing */ - padding-inline: var(--control-large-paddingInline-normal); + &:where([data-size='small']) { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--control-xsmall-paddingInline-condensed); + } + + &:where([data-size='large']) { + /* stylelint-disable-next-line primer/spacing */ + padding-inline: var(--control-large-paddingInline-normal); + } } } -} -.ConditionalWrapper { - display: block; -} + .ConditionalWrapper { + display: block; + } -[data-kbd-chord] { - transition: 80ms ease-in; - transition-property: color, background-color, border-color; + [data-kbd-chord] { + transition: 80ms ease-in; + transition-property: color, background-color, border-color; + } } diff --git a/packages/react/src/ButtonGroup/ButtonGroup.module.css b/packages/react/src/ButtonGroup/ButtonGroup.module.css index 7c289b69544..f29527e7cfd 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.module.css +++ b/packages/react/src/ButtonGroup/ButtonGroup.module.css @@ -1,81 +1,83 @@ -.ButtonGroup { - display: inline-flex; - vertical-align: middle; - isolation: isolate; +@layer primer.components.ButtonGroup { + .ButtonGroup { + display: inline-flex; + vertical-align: middle; + isolation: isolate; - & > *:not([data-loading-wrapper]) { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-end: -1px; - position: relative; + & > *:not([data-loading-wrapper]) { + /* stylelint-disable-next-line primer/spacing */ + margin-inline-end: -1px; + position: relative; - /* reset border-radius */ - button, - a { - border-radius: 0; - } - - &:first-child { + /* reset border-radius */ button, a { - border-top-left-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); + border-radius: 0; } - } - &:last-child { - button, - a { - border-top-right-radius: var(--borderRadius-medium); - border-bottom-right-radius: var(--borderRadius-medium); + &:first-child { + button, + a { + border-top-left-radius: var(--borderRadius-medium); + border-bottom-left-radius: var(--borderRadius-medium); + } } - } - - &:focus, - &:active, - &:hover { - z-index: 1; - } - } - - /* this is a workaround until portal based tooltips are fully removed from dotcom */ - &:has(div:last-child:empty) { - button, - a { - border-radius: var(--borderRadius-medium); - } - } - /* if child is loading button */ - & > *[data-loading-wrapper] { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-end: -1px; - position: relative; - - /* reset border-radius */ - button, - a { - border-radius: 0; - } + &:last-child { + button, + a { + border-top-right-radius: var(--borderRadius-medium); + border-bottom-right-radius: var(--borderRadius-medium); + } + } - &:focus, - &:active, - &:hover { - z-index: 1; + &:focus, + &:active, + &:hover { + z-index: 1; + } } - &:first-child { + /* this is a workaround until portal based tooltips are fully removed from dotcom */ + &:has(div:last-child:empty) { button, a { - border-top-left-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); + border-radius: var(--borderRadius-medium); } } - &:last-child { + /* if child is loading button */ + & > *[data-loading-wrapper] { + /* stylelint-disable-next-line primer/spacing */ + margin-inline-end: -1px; + position: relative; + + /* reset border-radius */ button, a { - border-top-right-radius: var(--borderRadius-medium); - border-bottom-right-radius: var(--borderRadius-medium); + border-radius: 0; + } + + &:focus, + &:active, + &:hover { + z-index: 1; + } + + &:first-child { + button, + a { + border-top-left-radius: var(--borderRadius-medium); + border-bottom-left-radius: var(--borderRadius-medium); + } + } + + &:last-child { + button, + a { + border-top-right-radius: var(--borderRadius-medium); + border-bottom-right-radius: var(--borderRadius-medium); + } } } } diff --git a/packages/react/src/Checkbox/Checkbox.module.css b/packages/react/src/Checkbox/Checkbox.module.css index 2be4bc11d95..e8ba49b505c 100644 --- a/packages/react/src/Checkbox/Checkbox.module.css +++ b/packages/react/src/Checkbox/Checkbox.module.css @@ -1,102 +1,104 @@ -.Checkbox { - border-radius: var(--borderRadius-small); - - /* checked -> unchecked - add 120ms delay to fully see animation-out */ - transition: - background-color, - border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); - - &::before { - width: var(--base-size-16); - height: var(--base-size-16); - visibility: hidden; - content: ''; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--fgColor-onEmphasis); - transition: visibility 0s linear 230ms; - clip-path: inset(var(--base-size-16) 0 0 0); - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); - mask-size: 75%; - mask-repeat: no-repeat; - mask-position: center; - animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; - } - - &:checked, - &:indeterminate { - background: var(--control-checked-bgColor-rest); +@layer primer.components.Checkbox { + .Checkbox { + border-radius: var(--borderRadius-small); - /* 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); + /* checked -> unchecked - add 120ms delay to fully see animation-out */ + transition: + background-color, + border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); &::before { - animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; + width: var(--base-size-16); + height: var(--base-size-16); + visibility: hidden; + content: ''; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--fgColor-onEmphasis); + transition: visibility 0s linear 230ms; + clip-path: inset(var(--base-size-16) 0 0 0); + mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); + mask-size: 75%; + mask-repeat: no-repeat; + mask-position: center; + animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; } - &:disabled { - background-color: var(--control-checked-bgColor-disabled); - border-color: var(--control-checked-borderColor-disabled); - opacity: 1; + &:checked, + &:indeterminate { + background: var(--control-checked-bgColor-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); &::before { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-fgColor-disabled); + animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; } - } - /* Windows High Contrast mode */ - @media (forced-colors: active) { - background-color: canvastext; - border-color: canvastext; + &:disabled { + background-color: var(--control-checked-bgColor-disabled); + border-color: var(--control-checked-borderColor-disabled); + opacity: 1; + + &::before { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--control-checked-fgColor-disabled); + } + } + + /* Windows High Contrast mode */ + @media (forced-colors: active) { + background-color: canvastext; + border-color: canvastext; + } } - } - &:disabled { - cursor: not-allowed; - } + &:disabled { + cursor: not-allowed; + } - &:checked { - transition: - background-color, - border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; + &:checked { + transition: + background-color, + border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; - &::before { - visibility: visible; - transition: visibility 0s linear 0s; + &::before { + visibility: visible; + transition: visibility 0s linear 0s; + } } - } - &:indeterminate { - background: var(--control-checked-bgColor-rest); + &:indeterminate { + background: var(--control-checked-bgColor-rest); - &::before { - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); - visibility: visible; + &::before { + mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); + visibility: visible; + } } - } - &:focus-visible:not(:disabled) { - @mixin focusOutline 2px; + &:focus-visible:not(:disabled) { + @mixin focusOutline 2px; + } } -} -@keyframes checkmarkIn { - from { - clip-path: inset(var(--base-size-16) 0 0 0); - } + @keyframes checkmarkIn { + from { + clip-path: inset(var(--base-size-16) 0 0 0); + } - to { - clip-path: inset(0 0 0 0); + to { + clip-path: inset(0 0 0 0); + } } -} -@keyframes checkmarkOut { - from { - clip-path: inset(0 0 0 0); - } + @keyframes checkmarkOut { + from { + clip-path: inset(0 0 0 0); + } - to { - clip-path: inset(var(--base-size-16) 0 0 0); + to { + clip-path: inset(var(--base-size-16) 0 0 0); + } } } diff --git a/packages/react/src/Checkbox/shared.module.css b/packages/react/src/Checkbox/shared.module.css index 963e4a18ae6..b3c83f3e8a0 100644 --- a/packages/react/src/Checkbox/shared.module.css +++ b/packages/react/src/Checkbox/shared.module.css @@ -1,22 +1,24 @@ -.Input { - position: relative; - display: grid; - width: var(--base-size-16); - height: var(--base-size-16); - margin: 0; +@layer primer.utilities.Input { + .Input { + position: relative; + display: grid; + width: var(--base-size-16); + height: var(--base-size-16); + margin: 0; - /* 2px to center align with label (20px line-height) */ - margin-top: var(--base-size-2); - cursor: pointer; - background-color: var(--bgColor-default); - border-color: var(--control-borderColor-emphasis); - border-style: solid; - border-width: var(--borderWidth-thin); - appearance: none; - place-content: center; + /* 2px to center align with label (20px line-height) */ + margin-top: var(--base-size-2); + cursor: pointer; + background-color: var(--bgColor-default); + border-color: var(--control-borderColor-emphasis); + border-style: solid; + border-width: var(--borderWidth-thin); + appearance: none; + place-content: center; - &:disabled { - background-color: var(--control-bgColor-disabled); - border-color: var(--control-borderColor-disabled); + &:disabled { + background-color: var(--control-bgColor-disabled); + border-color: var(--control-borderColor-disabled); + } } } diff --git a/packages/react/src/CircleBadge/CircleBadge.module.css b/packages/react/src/CircleBadge/CircleBadge.module.css index ec321f42118..5e962acd60f 100644 --- a/packages/react/src/CircleBadge/CircleBadge.module.css +++ b/packages/react/src/CircleBadge/CircleBadge.module.css @@ -1,18 +1,20 @@ -.CircleBadge { - display: flex; - align-items: center; - justify-content: center; - background-color: var(--bgColor-default); - border-radius: 50%; - box-shadow: var(--shadow-resting-medium); +@layer primer.components.CircleBadge { + .CircleBadge { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--bgColor-default); + border-radius: 50%; + box-shadow: var(--shadow-resting-medium); - &:where([data-inline]) { - display: inline-flex; + &:where([data-inline]) { + display: inline-flex; + } } -} -.CircleBadgeIcon { - height: auto; - max-height: 55%; - max-width: 60%; + .CircleBadgeIcon { + height: auto; + max-height: 55%; + max-width: 60%; + } } diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css index 952a6439d2f..15e9dbbbe7b 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css @@ -1,26 +1,28 @@ -.ConfirmationHeader { - display: flex; - padding: var(--base-size-8); - flex-direction: row; +@layer primer.components.ConfirmationDialog { + .ConfirmationHeader { + display: flex; + padding: var(--base-size-8); + flex-direction: row; - > h1 { - padding: var(--base-size-6) var(--base-size-8); - flex-grow: 1; + > h1 { + padding: var(--base-size-6) var(--base-size-8); + flex-grow: 1; + } } -} -.ConfirmationBody { - padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16); - font-size: var(--text-body-size-medium); - flex-grow: 1; -} + .ConfirmationBody { + padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16); + font-size: var(--text-body-size-medium); + flex-grow: 1; + } -.ConfirmationFooter { - display: grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-gap: var(--base-size-8); - align-items: end; - justify-content: end; - padding: var(--base-size-4) var(--base-size-16) var(--base-size-16); + .ConfirmationFooter { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + grid-gap: var(--base-size-8); + align-items: end; + justify-content: end; + padding: var(--base-size-4) var(--base-size-16) var(--base-size-16); + } } diff --git a/packages/react/src/CounterLabel/CounterLabel.module.css b/packages/react/src/CounterLabel/CounterLabel.module.css index 2c34d567a1f..0e3c7390bc6 100644 --- a/packages/react/src/CounterLabel/CounterLabel.module.css +++ b/packages/react/src/CounterLabel/CounterLabel.module.css @@ -1,25 +1,27 @@ -.CounterLabel { - display: inline-block; - padding: var(--base-size-2) var(--base-size-6); - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-semibold); - /* stylelint-disable-next-line primer/typography */ - line-height: 1; - border: var(--borderWidth-thin) solid var(--counter-borderColor); - /* stylelint-disable-next-line primer/borders */ - border-radius: 20px; +@layer primer.components.CounterLabel { + .CounterLabel { + display: inline-block; + padding: var(--base-size-2) var(--base-size-6); + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-semibold); + /* stylelint-disable-next-line primer/typography */ + line-height: 1; + border: var(--borderWidth-thin) solid var(--counter-borderColor); + /* stylelint-disable-next-line primer/borders */ + border-radius: 20px; - &:where([data-variant='primary']) { - color: var(--fgColor-onEmphasis); - background-color: var(--bgColor-neutral-emphasis); - } + &:where([data-variant='primary']) { + color: var(--fgColor-onEmphasis); + background-color: var(--bgColor-neutral-emphasis); + } - &:where([data-variant='secondary']) { - color: var(--fgColor-default); - background-color: var(--bgColor-neutral-muted); - } + &:where([data-variant='secondary']) { + color: var(--fgColor-default); + background-color: var(--bgColor-neutral-muted); + } - &:where(:empty) { - display: none; + &:where(:empty) { + display: none; + } } } diff --git a/packages/react/src/DataTable/Pagination.module.css b/packages/react/src/DataTable/Pagination.module.css index e56f7f787b2..d3c703320bf 100644 --- a/packages/react/src/DataTable/Pagination.module.css +++ b/packages/react/src/DataTable/Pagination.module.css @@ -1,138 +1,140 @@ -.TablePagination { - display: flex; - align-items: center; - justify-content: space-between; - column-gap: 1rem; - width: 100%; - grid-area: footer; - padding: var(--base-size-8) var(--base-size-16); - border: var(--borderWidth-thin) solid var(--borderColor-default); - border-top-width: 0; - border-end-start-radius: var(--borderRadius-medium); - border-end-end-radius: var(--borderRadius-medium); -} - -@media ((max-width: calc(768px - 0.02px))) { - .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) { - display: none; +@layer primer.components.Pagination { + .TablePagination { + display: flex; + align-items: center; + justify-content: space-between; + column-gap: 1rem; + width: 100%; + grid-area: footer; + padding: var(--base-size-8) var(--base-size-16); + border: var(--borderWidth-thin) solid var(--borderColor-default); + border-top-width: 0; + border-end-start-radius: var(--borderRadius-medium); + border-end-end-radius: var(--borderRadius-medium); } - .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child { - margin-inline-end: 0; - } + @media ((max-width: calc(768px - 0.02px))) { + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) { + display: none; + } - .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child { - margin-inline-start: 0; - } -} + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child { + margin-inline-end: 0; + } -@media ((min-width: 768px)) { - .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) { - display: none; + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child { + margin-inline-start: 0; + } } - .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child { - margin-inline-end: 0; - } + @media ((min-width: 768px)) { + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) { + display: none; + } - .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child { - margin-inline-start: 0; - } -} + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child { + margin-inline-end: 0; + } -@media ((min-width: 1400px)) { - .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) { - display: none; + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child { + margin-inline-start: 0; + } } - .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child { - margin-inline-end: 0; - } + @media ((min-width: 1400px)) { + .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; + .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child { + margin-inline-start: 0; + } } -} -.TablePaginationRange { - color: var(--fgColor-muted); - font-size: var(--text-body-size-small); - margin: 0; -} + .TablePaginationRange { + color: var(--fgColor-muted); + font-size: var(--text-body-size-small); + margin: 0; + } -.TablePaginationSteps { - display: flex; - align-items: center; - flex-wrap: wrap; - list-style: none; - color: var(--fgColor-default); - font-size: var(--text-body-size-medium); - margin: 0; - padding: 0; -} + .TablePaginationSteps { + display: flex; + align-items: center; + flex-wrap: wrap; + list-style: none; + color: var(--fgColor-default); + font-size: var(--text-body-size-medium); + margin: 0; + padding: 0; + } -.TablePaginationStep:first-of-type { - margin-right: var(--base-size-16); -} + .TablePaginationStep:first-of-type { + margin-right: var(--base-size-16); + } -.TablePaginationStep:last-of-type { - margin-left: var(--base-size-16); -} + .TablePaginationStep:last-of-type { + margin-left: var(--base-size-16); + } -.TablePaginationAction { - display: flex; - align-items: center; - color: var(--fgColor-muted); - font-size: var(--text-body-size-medium); - /* stylelint-disable-next-line primer/typography */ - line-height: calc(20 / 14); - user-select: none; - padding: var(--base-size-8); - border-radius: var(--borderRadius-medium); -} + .TablePaginationAction { + display: flex; + align-items: center; + color: var(--fgColor-muted); + font-size: var(--text-body-size-medium); + /* stylelint-disable-next-line primer/typography */ + line-height: calc(20 / 14); + user-select: none; + padding: var(--base-size-8); + border-radius: var(--borderRadius-medium); + } -.TablePaginationAction[data-has-page] { - color: var(--fgColor-accent); -} + .TablePaginationAction[data-has-page] { + color: var(--fgColor-accent); + } -.TablePaginationPage { - min-width: 2rem; - min-height: 2rem; - display: flex; - align-items: center; - justify-content: center; - font-size: var(--text-body-size-medium); - /* stylelint-disable-next-line primer/typography */ - line-height: calc(20 / 14); - user-select: none; - border-radius: var(--borderRadius-medium); - padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */ -} + .TablePaginationPage { + min-width: 2rem; + min-height: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-body-size-medium); + /* stylelint-disable-next-line primer/typography */ + line-height: calc(20 / 14); + user-select: none; + border-radius: var(--borderRadius-medium); + padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */ + } -.TablePaginationAction[data-has-page]:hover, -.TablePaginationAction[data-has-page]:focus, -.TablePaginationPage:hover, -.TablePaginationPage:focus { - background-color: var(--control-transparent-bgColor-hover); -} + .TablePaginationAction[data-has-page]:hover, + .TablePaginationAction[data-has-page]:focus, + .TablePaginationPage:hover, + .TablePaginationPage:focus { + background-color: var(--control-transparent-bgColor-hover); + } -.TablePaginationPage[data-active='true'] { - background-color: var(--bgColor-accent-emphasis); - color: var(--fgColor-onEmphasis); -} + .TablePaginationPage[data-active='true'] { + background-color: var(--bgColor-accent-emphasis); + color: var(--fgColor-onEmphasis); + } -.TablePaginationPage[data-active='true']: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); -} + .TablePaginationPage[data-active='true']: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); + } -.TablePaginationTruncationStep { - display: flex; - align-items: center; - justify-content: center; - min-width: 2rem; - min-height: 2rem; - user-select: none; + .TablePaginationTruncationStep { + display: flex; + align-items: center; + justify-content: center; + min-width: 2rem; + min-height: 2rem; + user-select: none; + } } diff --git a/packages/react/src/DataTable/Table.module.css b/packages/react/src/DataTable/Table.module.css index 142ca253d3e..b7b4558bae5 100644 --- a/packages/react/src/DataTable/Table.module.css +++ b/packages/react/src/DataTable/Table.module.css @@ -1,291 +1,293 @@ -/* Container ---------------------------------------------------------------- */ -.TableContainer { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-areas: - 'title actions' - 'divider divider' - 'subtitle subtitle' - 'filter filter' - 'table table' - 'footer footer'; - column-gap: var(--base-size-8); -} +@layer primer.components.Table { + /* Container ---------------------------------------------------------------- */ + .TableContainer { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + 'title actions' + 'divider divider' + 'subtitle subtitle' + 'filter filter' + 'table table' + 'footer footer'; + column-gap: var(--base-size-8); + } -/* TableTitle */ -.TableTitle { - margin: 0; - font-size: var(--text-body-size-medium); - font-weight: var(--base-text-weight-semibold); - /* stylelint-disable-next-line primer/typography */ - line-height: 20px; - color: var(--fgColor-default); - grid-area: title; - align-self: center; -} + /* TableTitle */ + .TableTitle { + margin: 0; + font-size: var(--text-body-size-medium); + font-weight: var(--base-text-weight-semibold); + /* stylelint-disable-next-line primer/typography */ + line-height: 20px; + color: var(--fgColor-default); + grid-area: title; + align-self: center; + } -/* TableSubtitle */ -.TableSubtitle { - margin: 0; - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-normal); - line-height: var(--text-title-lineHeight-small); - color: var(--fgColor-default); - grid-area: subtitle; -} + /* TableSubtitle */ + .TableSubtitle { + margin: 0; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-normal); + line-height: var(--text-title-lineHeight-small); + color: var(--fgColor-default); + grid-area: subtitle; + } -/* TableActions */ -.TableActions { - display: flex; - column-gap: var(--base-size-8); - align-items: center; - grid-area: actions; - justify-self: end; -} + /* TableActions */ + .TableActions { + display: flex; + column-gap: var(--base-size-8); + align-items: center; + grid-area: actions; + justify-self: end; + } -/* TableDivider */ -.TableDivider { - width: 100%; - height: 1px; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); - grid-area: divider; - margin-block-start: var(--base-size-16); - margin-block-end: var(--base-size-8); -} + /* TableDivider */ + .TableDivider { + width: 100%; + height: 1px; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + grid-area: divider; + margin-block-start: var(--base-size-16); + margin-block-end: var(--base-size-8); + } -/* Spacing before the table */ -.TableTitle + .TableOverflowWrapper, -.TableSubtitle + .TableOverflowWrapper, -.TableActions + .TableOverflowWrapper { - margin-block-start: var(--base-size-8); -} + /* Spacing before the table */ + .TableTitle + .TableOverflowWrapper, + .TableSubtitle + .TableOverflowWrapper, + .TableActions + .TableOverflowWrapper { + margin-block-start: var(--base-size-8); + } -.TableOverflowWrapper { - grid-area: table; -} + .TableOverflowWrapper { + grid-area: table; + } -/* Table -------------------------------------------------------------------- */ -.Table { - /* Default table styles */ - --table-border-radius: 0.375rem; - --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem); - --table-font-size: 0.75rem; - - display: grid; - width: 100%; - /* stylelint-disable-next-line primer/typography */ - font-size: var(--table-font-size); - /* stylelint-disable-next-line primer/typography */ - line-height: calc(20 / 12); - border-spacing: 0; - /* stylelint-disable-next-line primer/borders */ - border-collapse: separate; - background-color: var(--bgColor-default); - grid-area: table; - grid-template-columns: var(--grid-template-columns); - - /* Density modes: condensed, normal, spacious */ - &:where([data-cell-padding='condensed']) { - --cell-padding-block: 0.25rem; - --cell-padding-inline: 0.5rem; - } - - &:where([data-cell-padding='normal']) { - --cell-padding-block: 0.5rem; - --cell-padding-inline: 0.75rem; - } - - &:where([data-cell-padding='spacious']) { - --cell-padding-block: 0.75rem; - --cell-padding-inline: 1rem; + /* Table -------------------------------------------------------------------- */ + .Table { + /* Default table styles */ + --table-border-radius: 0.375rem; + --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem); + --table-font-size: 0.75rem; + + display: grid; + width: 100%; + /* stylelint-disable-next-line primer/typography */ + font-size: var(--table-font-size); + /* stylelint-disable-next-line primer/typography */ + line-height: calc(20 / 12); + border-spacing: 0; + /* stylelint-disable-next-line primer/borders */ + border-collapse: separate; + background-color: var(--bgColor-default); + grid-area: table; + grid-template-columns: var(--grid-template-columns); + + /* Density modes: condensed, normal, spacious */ + &:where([data-cell-padding='condensed']) { + --cell-padding-block: 0.25rem; + --cell-padding-inline: 0.5rem; + } + + &:where([data-cell-padding='normal']) { + --cell-padding-block: 0.5rem; + --cell-padding-inline: 0.75rem; + } + + &:where([data-cell-padding='spacious']) { + --cell-padding-block: 0.75rem; + --cell-padding-inline: 1rem; + } } -} -/* Borders */ -.TableCell:first-child, -.TableHeader:first-child { - border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default); -} + /* Borders */ + .TableCell:first-child, + .TableHeader:first-child { + border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default); + } -.TableCell:last-child, -.TableHeader:last-child { - border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default); -} + .TableCell:last-child, + .TableHeader:last-child { + border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default); + } -.TableHeader, -.TableCell { - display: flex; - /* stylelint-disable-next-line primer/spacing */ - padding: var(--table-cell-padding); - text-align: start; - align-items: center; - border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); -} + .TableHeader, + .TableCell { + display: flex; + /* stylelint-disable-next-line primer/spacing */ + padding: var(--table-cell-padding); + text-align: start; + align-items: center; + border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); + } -.TableHeader:where([data-cell-align='end']), -.TableCell:where([data-cell-align='end']) { - display: flex; - text-align: end; - justify-content: flex-end; -} + .TableHeader:where([data-cell-align='end']), + .TableCell:where([data-cell-align='end']) { + display: flex; + text-align: end; + justify-content: flex-end; + } -.TableHeader[data-cell-align='end'] .TableSortButton { - display: flex; - flex-direction: row-reverse; -} + .TableHeader[data-cell-align='end'] .TableSortButton { + display: flex; + flex-direction: row-reverse; + } -.TableHead .TableRow:first-of-type .TableHeader { - border-block-start: var(--borderWidth-thin) solid var(--borderColor-default); -} + .TableHead .TableRow:first-of-type .TableHeader { + border-block-start: var(--borderWidth-thin) solid var(--borderColor-default); + } -/* Border radius */ -/* stylelint-disable-next-line selector-max-specificity */ -.TableHead .TableRow:first-of-type .TableHeader:first-child { - /* stylelint-disable-next-line primer/borders */ - border-top-left-radius: var(--table-border-radius); -} + /* Border radius */ + /* stylelint-disable-next-line selector-max-specificity */ + .TableHead .TableRow:first-of-type .TableHeader:first-child { + /* stylelint-disable-next-line primer/borders */ + border-top-left-radius: var(--table-border-radius); + } -/* stylelint-disable-next-line selector-max-specificity */ -.TableHead .TableRow:first-of-type .TableHeader:last-child { - /* stylelint-disable-next-line primer/borders */ - border-top-right-radius: var(--table-border-radius); -} + /* stylelint-disable-next-line selector-max-specificity */ + .TableHead .TableRow:first-of-type .TableHeader:last-child { + /* stylelint-disable-next-line primer/borders */ + border-top-right-radius: var(--table-border-radius); + } -/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */ -.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child { - /* stylelint-disable-next-line primer/borders */ - border-bottom-left-radius: var(--table-border-radius); -} + /* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */ + .TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child { + /* stylelint-disable-next-line primer/borders */ + border-bottom-left-radius: var(--table-border-radius); + } -/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */ -.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child { - /* stylelint-disable-next-line primer/borders */ - border-bottom-right-radius: var(--table-border-radius); -} + /* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */ + .TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child { + /* stylelint-disable-next-line primer/borders */ + border-bottom-right-radius: var(--table-border-radius); + } -/** + /** * Offset padding to make sure type aligns regardless of cell padding * selection */ -.TableRow > *:first-child:not(.TableCellSkeleton), -.TableRow > *:first-child .TableCellSkeletonItem { - padding-inline-start: var(--base-size-16); -} + .TableRow > *:first-child:not(.TableCellSkeleton), + .TableRow > *:first-child .TableCellSkeletonItem { + padding-inline-start: var(--base-size-16); + } -.TableRow > *:last-child:not(.TableCellSkeleton), -.TableRow > *:last-child .TableCellSkeletonItem { - padding-inline-end: var(--base-size-16); -} + .TableRow > *:last-child:not(.TableCellSkeleton), + .TableRow > *:last-child .TableCellSkeletonItem { + padding-inline-end: var(--base-size-16); + } -/* TableHeader */ -.TableHeader { - font-weight: var(--base-text-weight-semibold); - color: var(--fgColor-muted); - background-color: var(--bgColor-muted); - border-block-start: var(--borderWidth-thin) solid var(--borderColor-default); -} + /* TableHeader */ + .TableHeader { + font-weight: var(--base-text-weight-semibold); + color: var(--fgColor-muted); + background-color: var(--bgColor-muted); + border-block-start: var(--borderWidth-thin) solid var(--borderColor-default); + } -.TableHeader:where([aria-sort='descending']), -.TableHeader:where([aria-sort='ascending']) { - color: var(--fgColor-default); -} + .TableHeader:where([aria-sort='descending']), + .TableHeader:where([aria-sort='ascending']) { + color: var(--fgColor-default); + } -/* Control visibility of sort icons */ -.TableSortIcon { - visibility: hidden; -} + /* Control visibility of sort icons */ + .TableSortIcon { + visibility: hidden; + } -/* The ASC icon is visible if the header is sortable and is hovered or focused */ -.TableHeader:hover .TableSortIcon--ascending, -.TableHeader .TableSortButton:focus .TableSortIcon--ascending { - visibility: visible; -} + /* The ASC icon is visible if the header is sortable and is hovered or focused */ + .TableHeader:hover .TableSortIcon--ascending, + .TableHeader .TableSortButton:focus .TableSortIcon--ascending { + visibility: visible; + } -/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */ -.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending, -.TableHeader[aria-sort='descending'] .TableSortIcon--descending { - visibility: visible; -} + /* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */ + .TableHeader[aria-sort='ascending'] .TableSortIcon--ascending, + .TableHeader[aria-sort='descending'] .TableSortIcon--descending { + visibility: visible; + } -/* TableRow */ -.TableRow:hover .TableCell:not(.TableCellSkeleton) { - background-color: var(--control-transparent-bgColor-hover); -} + /* TableRow */ + .TableRow:hover .TableCell:not(.TableCellSkeleton) { + background-color: var(--control-transparent-bgColor-hover); + } -/* TableCell */ -.TableCell:where([scope='row']) { - display: flex; - font-weight: var(--base-text-weight-semibold); - color: var(--fgColor-default); - align-items: center; -} + /* TableCell */ + .TableCell:where([scope='row']) { + display: flex; + font-weight: var(--base-text-weight-semibold); + color: var(--fgColor-default); + align-items: center; + } -/* TableCellSkeleton */ -.TableCellSkeleton { - padding: 0; -} + /* TableCellSkeleton */ + .TableCellSkeleton { + padding: 0; + } -.TableCellSkeletonItems { - display: flex; - width: 100%; - flex-direction: column; -} + .TableCellSkeletonItems { + display: flex; + width: 100%; + flex-direction: column; + } -.TableCellSkeletonItem { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--table-cell-padding); + .TableCellSkeletonItem { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--table-cell-padding); - &:nth-of-type(5n + 1) { - --skeleton-item-width: 85%; - } + &:nth-of-type(5n + 1) { + --skeleton-item-width: 85%; + } - &:nth-of-type(5n + 2) { - --skeleton-item-width: 67.5%; - } + &:nth-of-type(5n + 2) { + --skeleton-item-width: 67.5%; + } - &:nth-of-type(5n + 3) { - --skeleton-item-width: 80%; - } + &:nth-of-type(5n + 3) { + --skeleton-item-width: 80%; + } - &:nth-of-type(5n + 4) { - --skeleton-item-width: 60%; - } + &:nth-of-type(5n + 4) { + --skeleton-item-width: 60%; + } - &:nth-of-type(5n + 5) { - --skeleton-item-width: 75%; + &:nth-of-type(5n + 5) { + --skeleton-item-width: 75%; + } } -} - -.TableCellSkeletonItem [data-component='SkeletonText'] { - width: var(--skeleton-item-width); -} -.TableCellSkeletonItem:not(:last-of-type) { - border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); -} + .TableCellSkeletonItem [data-component='SkeletonText'] { + width: var(--skeleton-item-width); + } -.TableSortButton { - column-gap: 0.5rem; -} + .TableCellSkeletonItem:not(:last-of-type) { + border-block-end: var(--borderWidth-thin) solid var(--borderColor-default); + } -/* Grid layout */ -.TableHead, -.TableBody, -.TableRow { - display: contents; -} + .TableSortButton { + column-gap: 0.5rem; + } -@supports (grid-template-columns: subgrid) { + /* Grid layout */ .TableHead, .TableBody, .TableRow { - display: grid; - grid-template-columns: subgrid; - grid-column: -1 /1; + display: contents; + } + + @supports (grid-template-columns: subgrid) { + .TableHead, + .TableBody, + .TableRow { + display: grid; + grid-template-columns: subgrid; + grid-column: -1 /1; + } } -} -.PlaceholderText { - color: var(--fgColor-muted); + .PlaceholderText { + color: var(--fgColor-muted); + } } diff --git a/packages/react/src/Details/Details.module.css b/packages/react/src/Details/Details.module.css index a0e787b9844..2ddc3f3c93f 100644 --- a/packages/react/src/Details/Details.module.css +++ b/packages/react/src/Details/Details.module.css @@ -1,7 +1,9 @@ -.Details > summary { - list-style: none; -} +@layer primer.components.Details { + .Details > summary { + list-style: none; + } -.Details > summary::-webkit-details-marker { - display: none; + .Details > summary::-webkit-details-marker { + display: none; + } } diff --git a/packages/react/src/Dialog/Dialog.module.css b/packages/react/src/Dialog/Dialog.module.css index d750854c158..f219d1806bc 100644 --- a/packages/react/src/Dialog/Dialog.module.css +++ b/packages/react/src/Dialog/Dialog.module.css @@ -1,320 +1,322 @@ -/* The --prc-dialog-scrollgutter property is used only on the body element to +@layer primer.components.Dialog { + /* The --prc-dialog-scrollgutter property is used only on the body element to * simulate scrollbar-gutter:stable. This property is not and should not * be used elsewhere in the DOM. There is a performance penalty to * setting inherited properties which can cause a large style recalc to * occur, so it benefits us to prevent inheritance for this property. * See https://web.dev/blog/at-property-performance */ -@property --prc-dialog-scrollgutter { - initial-value: 0; - inherits: false; - syntax: ''; -} - -@keyframes dialog-backdrop-appear { - 0% { - opacity: 0; + @property --prc-dialog-scrollgutter { + initial-value: 0; + inherits: false; + syntax: ''; } - 100% { - opacity: 1; - } -} - -@keyframes Overlay--motion-scaleFade { - 0% { - opacity: 0; - transform: scale(0.5); - } + @keyframes dialog-backdrop-appear { + 0% { + opacity: 0; + } - 100% { - opacity: 1; - transform: scale(1); + 100% { + opacity: 1; + } } -} -@keyframes Overlay--motion-slideUp { - from { - transform: translateY(100%); - } -} + @keyframes Overlay--motion-scaleFade { + 0% { + opacity: 0; + transform: scale(0.5); + } -@keyframes Overlay--motion-slideInRight { - from { - transform: translateX(-100%); + 100% { + opacity: 1; + transform: scale(1); + } } -} -@keyframes Overlay--motion-slideInLeft { - from { - transform: translateX(100%); + @keyframes Overlay--motion-slideUp { + from { + transform: translateY(100%); + } } -} -/* Used to determine whether there should be a border between the body and footer */ -@keyframes detect-scroll { - from, - to { - --can-scroll: 1; + @keyframes Overlay--motion-slideInRight { + from { + transform: translateX(-100%); + } } -} -.Backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - background-color: var(--overlay-backdrop-bgColor); - animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1); - align-items: center; - justify-content: center; - - &[data-position-regular='center'] { - align-items: center; - justify-content: center; + @keyframes Overlay--motion-slideInLeft { + from { + transform: translateX(100%); + } } - &[data-position-regular='left'] { - align-items: center; - justify-content: flex-start; + /* Used to determine whether there should be a border between the body and footer */ + @keyframes detect-scroll { + from, + to { + --can-scroll: 1; + } } - &[data-position-regular='right'] { + .Backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + background-color: var(--overlay-backdrop-bgColor); + animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1); align-items: center; - justify-content: flex-end; - } + justify-content: center; - @media (max-width: 767px) { - &[data-position-narrow='center'] { + &[data-position-regular='center'] { align-items: center; justify-content: center; } - &[data-position-narrow='bottom'] { - align-items: end; - justify-content: center; + &[data-position-regular='left'] { + align-items: center; + justify-content: flex-start; } - } -} - -.Dialog { - display: flex; - /* stylelint-disable-next-line primer/responsive-widths */ - width: 640px; - min-width: 296px; - max-width: calc(100dvw - 64px); - height: auto; - max-height: calc(100dvh - 64px); - flex-direction: column; - background-color: var(--overlay-bgColor); - border-radius: var(--borderRadius-large); - border-radius: var(--borderRadius-large, var(--borderRadius-large)); - box-shadow: var(--shadow-floating-small); - opacity: 1; - - &:where([data-width='small']) { - width: 296px; - } - &:where([data-width='medium']) { - width: 320px; - } - - &:where([data-width='large']) { - /* stylelint-disable-next-line primer/responsive-widths */ - width: 480px; - } - - &:where([data-height='small']) { - height: 480px; - } + &[data-position-regular='right'] { + align-items: center; + justify-content: flex-end; + } - &:where([data-height='large']) { - height: 640px; - } + @media (max-width: 767px) { + &[data-position-narrow='center'] { + align-items: center; + justify-content: center; + } - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; + &[data-position-narrow='bottom'] { + align-items: end; + justify-content: center; + } + } } - &[data-position-regular='center'] { + .Dialog { + display: flex; + /* stylelint-disable-next-line primer/responsive-widths */ + width: 640px; + min-width: 296px; + max-width: calc(100dvw - 64px); + height: auto; + max-height: calc(100dvh - 64px); + flex-direction: column; + background-color: var(--overlay-bgColor); + border-radius: var(--borderRadius-large); border-radius: var(--borderRadius-large, var(--borderRadius-large)); + box-shadow: var(--shadow-floating-small); + opacity: 1; - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; + &:where([data-width='small']) { + width: 296px; } - } - &[data-position-regular='left'] { - height: 100dvh; - max-height: unset; - border-radius: var(--borderRadius-large, var(--borderRadius-large)); - border-top-left-radius: 0; - border-bottom-left-radius: 0; + &:where([data-width='medium']) { + width: 320px; + } - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; + &:where([data-width='large']) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 480px; } - } - &[data-position-regular='right'] { - height: 100dvh; - max-height: unset; - border-radius: var(--borderRadius-large, var(--borderRadius-large)); - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &:where([data-height='small']) { + height: 480px; + } + + &:where([data-height='large']) { + height: 640px; + } @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; } - } - @media (max-width: 767px) { - &[data-position-narrow='center'] { - /* stylelint-disable-next-line primer/responsive-widths */ - width: 640px; - height: auto; + &[data-position-regular='center'] { border-radius: var(--borderRadius-large, var(--borderRadius-large)); - &:where([data-width='small']) { - width: 296px; - } - - &:where([data-width='medium']) { - width: 320px; - } - - &:where([data-width='large']) { - /* stylelint-disable-next-line primer/responsive-widths */ - width: 480px; + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; } + } - &:where([data-height='small']) { - height: 480px; - } + &[data-position-regular='left'] { + height: 100dvh; + max-height: unset; + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + border-top-left-radius: 0; + border-bottom-left-radius: 0; - &:where([data-height='large']) { - height: 640px; + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; } } - &[data-position-narrow='bottom'] { - width: 100dvw; - max-width: 100dvw; - height: auto; - max-height: calc(100dvh - 64px); + &[data-position-regular='right'] { + height: 100dvh; + max-height: unset; border-radius: var(--borderRadius-large, var(--borderRadius-large)); + border-top-right-radius: 0; border-bottom-right-radius: 0; - border-bottom-left-radius: 0; @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; + animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; } } - &[data-position-narrow='fullscreen'] { - width: 100%; - max-width: 100dvw; - height: 100%; - max-height: 100dvh; - border-radius: unset !important; - flex-grow: 1; + @media (max-width: 767px) { + &[data-position-narrow='center'] { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 640px; + height: auto; + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + + &:where([data-width='small']) { + width: 296px; + } + + &:where([data-width='medium']) { + width: 320px; + } + + &:where([data-width='large']) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 480px; + } + + &:where([data-height='small']) { + height: 480px; + } + + &:where([data-height='large']) { + height: 640px; + } + } - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; + &[data-position-narrow='bottom'] { + width: 100dvw; + max-width: 100dvw; + height: auto; + max-height: calc(100dvh - 64px); + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; + } + } + + &[data-position-narrow='fullscreen'] { + width: 100%; + max-width: 100dvw; + height: 100%; + max-height: 100dvh; + border-radius: unset !important; + flex-grow: 1; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running; + } } } } -} -body:has(.Dialog.DisableScroll) { - /* stylelint-disable-next-line primer/spacing */ - padding-right: var(--prc-dialog-scrollgutter) !important; - overflow: hidden !important; -} + body:has(.Dialog.DisableScroll) { + /* stylelint-disable-next-line primer/spacing */ + padding-right: var(--prc-dialog-scrollgutter) !important; + overflow: hidden !important; + } -.DialogOverflowWrapper { - flex-grow: 1; -} + .DialogOverflowWrapper { + flex-grow: 1; + } -/* + /* Add a border between the body and footer if: - the dialog has a footer - the dialog has a body that can scroll - the browser supports the `animation-timeline` property and its `scroll()` function */ -.Dialog:has(.Footer) { - --can-scroll: 0; + .Dialog:has(.Footer) { + --can-scroll: 0; - .DialogOverflowWrapper { - /* If the browser does not support the `animation-timeline` property, always show a border */ - border-bottom: var(--borderWidth-default) solid var(--borderColor-default); - animation: detect-scroll; - animation-timeline: scroll(self); + .DialogOverflowWrapper { + /* If the browser does not support the `animation-timeline` property, always show a border */ + border-bottom: var(--borderWidth-default) solid var(--borderColor-default); + animation: detect-scroll; + animation-timeline: scroll(self); - @supports (animation-timeline: scroll(self)) { - border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default); + @supports (animation-timeline: scroll(self)) { + border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default); + } } } -} -.Header { - z-index: 1; - max-height: 35vh; - padding: var(--base-size-8); - overflow-y: auto; - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 1px 0 var(--borderColor-default); - flex-shrink: 0; -} + .Header { + z-index: 1; + max-height: 35vh; + padding: var(--base-size-8); + overflow-y: auto; + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 1px 0 var(--borderColor-default); + flex-shrink: 0; + } -.HeaderInner { - display: flex; -} + .HeaderInner { + display: flex; + } -.HeaderContent { - display: flex; - padding-inline: var(--base-size-8); - padding-block: var(--base-size-6); - flex-direction: column; - flex-grow: 1; -} + .HeaderContent { + display: flex; + padding-inline: var(--base-size-8); + padding-block: var(--base-size-6); + flex-direction: column; + flex-grow: 1; + } -.Title { - margin: 0; /* override default margin */ - font-size: var(--text-body-size-medium); - font-weight: var(--text-title-weight-large); -} + .Title { + margin: 0; /* override default margin */ + font-size: var(--text-body-size-medium); + font-weight: var(--text-title-weight-large); + } -.Subtitle { - margin: 0; /* override default margin */ - margin-top: var(--base-size-4); - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-normal); - color: var(--fgColor-muted); -} + .Subtitle { + margin: 0; /* override default margin */ + margin-top: var(--base-size-4); + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-normal); + color: var(--fgColor-muted); + } -.Body { - padding: var(--base-size-16); - overflow: auto; - flex-grow: 1; -} + .Body { + padding: var(--base-size-16); + overflow: auto; + flex-grow: 1; + } -.Footer { - z-index: 1; - display: flex; - flex-flow: wrap; - justify-content: flex-end; - padding: var(--base-size-16); - gap: var(--base-size-8); - flex-shrink: 0; - - @media (max-height: 325px) { - flex-wrap: nowrap; - overflow-x: scroll; - flex-direction: row; - justify-content: unset; + .Footer { + z-index: 1; + display: flex; + flex-flow: wrap; + justify-content: flex-end; + padding: var(--base-size-16); + gap: var(--base-size-8); + flex-shrink: 0; + + @media (max-height: 325px) { + flex-wrap: nowrap; + overflow-x: scroll; + flex-direction: row; + justify-content: unset; + } } } diff --git a/packages/react/src/FilteredActionList/FilteredActionList.module.css b/packages/react/src/FilteredActionList/FilteredActionList.module.css index 4613a4e96a8..61980c0d96f 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.module.css +++ b/packages/react/src/FilteredActionList/FilteredActionList.module.css @@ -1,67 +1,69 @@ -.Root { - display: flex; - flex-direction: column; - overflow: hidden; -} +@layer primer.components.FilteredActionList { + .Root { + display: flex; + flex-direction: column; + overflow: hidden; + } -.Header { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 1px 0 var(--borderColor-default); - z-index: 1; -} + .Header { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 1px 0 var(--borderColor-default); + z-index: 1; + } -.Container { - display: flex; - height: 100%; - overflow: auto; - flex-grow: 1; -} + .Container { + display: flex; + height: 100%; + overflow: auto; + flex-grow: 1; + } -.ActionList { - flex-grow: 1; -} + .ActionList { + flex-grow: 1; + } -.ActionListItem:focus { - background: var(--control-transparent-bgColor-selected); + .ActionListItem:focus { + background: var(--control-transparent-bgColor-selected); - &::after { - @mixin activeIndicatorLine; + &::after { + @mixin activeIndicatorLine; + } } -} -.ActionListItem:where([data-input-focused]):where([data-first-child]) { - background: var(--control-transparent-bgColor-selected); + .ActionListItem:where([data-input-focused]):where([data-first-child]) { + background: var(--control-transparent-bgColor-selected); - &::after { - @mixin activeIndicatorLine; + &::after { + @mixin activeIndicatorLine; + } } -} -.FullScreenTextInput { - @media screen and (--viewportRange-narrow) { - /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */ - @supports (-webkit-touch-callout: none) { - font-size: var(--text-title-size-small); + .FullScreenTextInput { + @media screen and (--viewportRange-narrow) { + /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */ + @supports (-webkit-touch-callout: none) { + font-size: var(--text-title-size-small); + } } } -} -.SelectAllContainer { - display: flex; - align-items: center; - padding-block: var(--base-size-4); - padding-inline: var(--base-size-16); - background: var(--bgColor-muted); - border-bottom: var(--borderWidth-thin) solid var(--borderColor-default); -} + .SelectAllContainer { + display: flex; + align-items: center; + padding-block: var(--base-size-4); + padding-inline: var(--base-size-16); + background: var(--bgColor-muted); + border-bottom: var(--borderWidth-thin) solid var(--borderColor-default); + } -.SelectAllCheckbox { - /* -1px hack to offset 1px border-bottom causing uneven alignment */ - /* stylelint-disable-next-line primer/spacing */ - margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0; -} + .SelectAllCheckbox { + /* -1px hack to offset 1px border-bottom causing uneven alignment */ + /* stylelint-disable-next-line primer/spacing */ + margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0; + } -.SelectAllLabel { - font-size: var(--text-body-size-medium); - color: var(--fgColor-muted); + .SelectAllLabel { + font-size: var(--text-body-size-medium); + color: var(--fgColor-muted); + } } diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css index 603d07a0c66..5309ed70107 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css +++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css @@ -1,19 +1,21 @@ -.LoadingSkeleton { - /* stylelint-disable-next-line primer/borders */ - border-radius: 4px; -} +@layer primer.components.FilteredActionListLoaders { + .LoadingSkeleton { + /* stylelint-disable-next-line primer/borders */ + border-radius: 4px; + } -.LoadingSpinner { - padding: var(--base-size-16); - flex-grow: 1; - align-content: center; - text-align: center; - height: 100%; -} + .LoadingSpinner { + padding: var(--base-size-16); + flex-grow: 1; + align-content: center; + text-align: center; + height: 100%; + } -.LoadingSkeletonContainer { - padding: var(--base-size-8); - display: flex; - flex-grow: 1; - flex-direction: column; + .LoadingSkeletonContainer { + padding: var(--base-size-8); + display: flex; + flex-grow: 1; + flex-direction: column; + } } diff --git a/packages/react/src/Flash/Flash.module.css b/packages/react/src/Flash/Flash.module.css index c16e839a4e3..45355e2a67a 100644 --- a/packages/react/src/Flash/Flash.module.css +++ b/packages/react/src/Flash/Flash.module.css @@ -1,60 +1,62 @@ -.Flash { - position: relative; - padding: var(--base-size-16); - margin-top: 0; - color: var(--fgColor-default); - border-style: solid; - border-width: var(--borderWidth-thin); - border-radius: var(--borderRadius-medium); - - &:where([data-variant='default']) { - background-color: var(--bgColor-accent-muted); - border-color: var(--borderColor-accent-muted); - - & :where(svg) { - color: var(--fgColor-accent); +@layer primer.components.Flash { + .Flash { + position: relative; + padding: var(--base-size-16); + margin-top: 0; + color: var(--fgColor-default); + border-style: solid; + border-width: var(--borderWidth-thin); + border-radius: var(--borderRadius-medium); + + &:where([data-variant='default']) { + background-color: var(--bgColor-accent-muted); + border-color: var(--borderColor-accent-muted); + + & :where(svg) { + color: var(--fgColor-accent); + } } - } - &:where([data-variant='success']) { - background-color: var(--bgColor-success-muted); - border-color: var(--borderColor-success-muted); + &:where([data-variant='success']) { + background-color: var(--bgColor-success-muted); + border-color: var(--borderColor-success-muted); - & :where(svg) { - color: var(--fgColor-success); + & :where(svg) { + color: var(--fgColor-success); + } } - } - &:where([data-variant='danger']) { - background-color: var(--bgColor-danger-muted); - border-color: var(--borderColor-danger-muted); + &:where([data-variant='danger']) { + background-color: var(--bgColor-danger-muted); + border-color: var(--borderColor-danger-muted); - & :where(svg) { - color: var(--fgColor-danger); + & :where(svg) { + color: var(--fgColor-danger); + } } - } - &:where([data-variant='warning']) { - background-color: var(--bgColor-attention-muted); - border-color: var(--borderColor-attention-muted); + &:where([data-variant='warning']) { + background-color: var(--bgColor-attention-muted); + border-color: var(--borderColor-attention-muted); - & :where(svg) { - color: var(--fgColor-attention); + & :where(svg) { + color: var(--fgColor-attention); + } } - } - &:where([data-full]) { - /* stylelint-disable-next-line primer/spacing */ - margin-top: -1px; - border-width: var(--borderWidth-thin) 0; - border-radius: 0; - } + &:where([data-full]) { + /* stylelint-disable-next-line primer/spacing */ + margin-top: -1px; + border-width: var(--borderWidth-thin) 0; + border-radius: 0; + } - & :where(p:last-child) { - margin-bottom: 0; - } + & :where(p:last-child) { + margin-bottom: 0; + } - & :where(svg) { - margin-right: var(--base-size-8); + & :where(svg) { + margin-right: var(--base-size-8); + } } } diff --git a/packages/react/src/FormControl/FormControl.module.css b/packages/react/src/FormControl/FormControl.module.css index 911f04bbde7..ff82c37303b 100644 --- a/packages/react/src/FormControl/FormControl.module.css +++ b/packages/react/src/FormControl/FormControl.module.css @@ -1,57 +1,59 @@ -.ControlHorizontalLayout { - display: flex; +@layer primer.components.FormControl { + .ControlHorizontalLayout { + display: flex; - &:where([data-has-leading-visual]) { - align-items: center; + &:where([data-has-leading-visual]) { + align-items: center; + } } -} -.ControlVerticalLayout { - display: flex; - flex-direction: column; - align-items: flex-start; + .ControlVerticalLayout { + display: flex; + flex-direction: column; + align-items: flex-start; - & > *:not(label) + * { - margin-top: var(--base-size-4); - } + & > *:not(label) + * { + margin-top: var(--base-size-4); + } - &[data-has-label] > * + * { - margin-top: var(--base-size-4); + &[data-has-label] > * + * { + margin-top: var(--base-size-4); + } } -} - -.ControlChoiceInputs > input { - margin-right: 0; - margin-left: 0; -} -.LabelContainer { - > * { - /* stylelint-disable-next-line primer/spacing */ - padding-left: var(--stack-gap-condensed); + .ControlChoiceInputs > input { + margin-right: 0; + margin-left: 0; } - > label { - font-weight: var(--base-text-weight-normal); + .LabelContainer { + > * { + /* stylelint-disable-next-line primer/spacing */ + padding-left: var(--stack-gap-condensed); + } + + > label { + font-weight: var(--base-text-weight-normal); + } } -} -.LeadingVisual { - margin-left: var(--base-size-8); - color: var(--fgColor-muted); + .LeadingVisual { + margin-left: var(--base-size-8); + color: var(--fgColor-muted); - &:where([data-disabled]) { - color: var(--control-fgColor-disabled); - } + &:where([data-disabled]) { + color: var(--control-fgColor-disabled); + } - > * { - min-width: var(--text-body-size-large); - min-height: var(--text-body-size-large); - fill: currentColor; - } + > * { + min-width: var(--text-body-size-large); + min-height: var(--text-body-size-large); + fill: currentColor; + } - > *:where([data-has-caption]) { - min-width: var(--base-size-24); - min-height: var(--base-size-24); + > *:where([data-has-caption]) { + min-width: var(--base-size-24); + min-height: var(--base-size-24); + } } } diff --git a/packages/react/src/FormControl/FormControlCaption.module.css b/packages/react/src/FormControl/FormControlCaption.module.css index b51b54b53ca..7e945a1de6a 100644 --- a/packages/react/src/FormControl/FormControlCaption.module.css +++ b/packages/react/src/FormControl/FormControlCaption.module.css @@ -1,9 +1,11 @@ -.Caption { - display: block; - font-size: var(--text-body-size-small); - color: var(--fgColor-muted); +@layer primer.components.FormControlCaption { + .Caption { + display: block; + font-size: var(--text-body-size-small); + color: var(--fgColor-muted); - &:where([data-control-disabled]) { - color: var(--control-fgColor-disabled); + &:where([data-control-disabled]) { + color: var(--control-fgColor-disabled); + } } } diff --git a/packages/react/src/FormControl/FormControlLeadingVisual.module.css b/packages/react/src/FormControl/FormControlLeadingVisual.module.css index 35c81bfe8d5..e325924b69e 100644 --- a/packages/react/src/FormControl/FormControlLeadingVisual.module.css +++ b/packages/react/src/FormControl/FormControlLeadingVisual.module.css @@ -1,21 +1,23 @@ -.LeadingVisual { - --leadingVisual-size: 16px; +@layer primer.components.FormControlLeadingVisual { + .LeadingVisual { + --leadingVisual-size: 16px; - color: var(--fgColor-default); - display: flex; - align-items: center; + color: var(--fgColor-default); + display: flex; + align-items: center; - &:where([data-control-disabled]) { - color: var(--control-fgColor-disabled); - } + &:where([data-control-disabled]) { + color: var(--control-fgColor-disabled); + } - & > * { - min-width: var(--leadingVisual-size); - min-height: var(--leadingVisual-size); - fill: currentColor; - } + & > * { + min-width: var(--leadingVisual-size); + min-height: var(--leadingVisual-size); + fill: currentColor; + } - &:where([data-has-caption]) { - --leadingVisual-size: 24px; + &:where([data-has-caption]) { + --leadingVisual-size: 24px; + } } } diff --git a/packages/react/src/Header/Header.dev.module.css b/packages/react/src/Header/Header.dev.module.css index cec71865407..4f9d5f8b579 100644 --- a/packages/react/src/Header/Header.dev.module.css +++ b/packages/react/src/Header/Header.dev.module.css @@ -1,17 +1,19 @@ -.HeaderDev { - color: var(--color-prettylights-syntax-carriage-return-text); - /* stylelint-disable-next-line primer/no-display-colors */ - background-color: var(--display-pine-bgColor-emphasis); -} +@layer primer.components.Header.dev { + .HeaderDev { + color: var(--color-prettylights-syntax-carriage-return-text); + /* stylelint-disable-next-line primer/no-display-colors */ + background-color: var(--display-pine-bgColor-emphasis); + } -.HeaderDevItem { - padding-left: var(--base-size-24); -} + .HeaderDevItem { + padding-left: var(--base-size-24); + } -.HeaderDevLink { - color: var(--color-prettylights-syntax-carriage-return-text); -} + .HeaderDevLink { + color: var(--color-prettylights-syntax-carriage-return-text); + } -.Icon { - margin-right: var(--base-size-8); + .Icon { + margin-right: var(--base-size-8); + } } diff --git a/packages/react/src/Header/Header.module.css b/packages/react/src/Header/Header.module.css index 0d8a055fea9..3e1a0b2e7b7 100644 --- a/packages/react/src/Header/Header.module.css +++ b/packages/react/src/Header/Header.module.css @@ -1,39 +1,41 @@ -.Header { - z-index: 32; - display: flex; - padding: var(--base-size-16); - overflow: auto; - font-size: var(--text-body-size-medium); - line-height: var(--text-title-lineHeight-large); - color: var(--header-fgColor-default); - background-color: var(--header-bgColor); - align-items: center; - flex-wrap: nowrap; -} +@layer primer.components.Header { + .Header { + z-index: 32; + display: flex; + padding: var(--base-size-16); + overflow: auto; + font-size: var(--text-body-size-medium); + line-height: var(--text-title-lineHeight-large); + color: var(--header-fgColor-default); + background-color: var(--header-bgColor); + align-items: center; + flex-wrap: nowrap; + } -.HeaderItem { - display: flex; - margin-right: var(--base-size-16); - align-self: stretch; - align-items: center; - flex-wrap: nowrap; + .HeaderItem { + display: flex; + margin-right: var(--base-size-16); + align-self: stretch; + align-items: center; + flex-wrap: nowrap; - &:where([data-full]) { - flex: auto; + &:where([data-full]) { + flex: auto; + } } -} -.HeaderLink { - display: flex; - font-weight: var(--text-title-weight-large); - color: var(--header-fgColor-logo); - text-decoration: none; - white-space: nowrap; - cursor: pointer; - align-items: center; + .HeaderLink { + display: flex; + font-weight: var(--text-title-weight-large); + color: var(--header-fgColor-logo); + text-decoration: none; + white-space: nowrap; + cursor: pointer; + align-items: center; - &:hover, - &:focus { - color: var(--header-fgColor-default); + &:hover, + &:focus { + color: var(--header-fgColor-default); + } } } diff --git a/packages/react/src/Heading/Heading.module.css b/packages/react/src/Heading/Heading.module.css index df66c322d6b..4cd58293fff 100644 --- a/packages/react/src/Heading/Heading.module.css +++ b/packages/react/src/Heading/Heading.module.css @@ -1,17 +1,19 @@ -:where(.Heading) { - margin: 0; - font-size: var(--text-title-size-large); - font-weight: var(--base-text-weight-semibold); +@layer primer.components.Heading { + :where(.Heading) { + margin: 0; + font-size: var(--text-title-size-large); + font-weight: var(--base-text-weight-semibold); - &:where([data-variant='large']) { - font: var(--text-title-shorthand-large); - } + &:where([data-variant='large']) { + font: var(--text-title-shorthand-large); + } - &:where([data-variant='medium']) { - font: var(--text-title-shorthand-medium); - } + &:where([data-variant='medium']) { + font: var(--text-title-shorthand-medium); + } - &:where([data-variant='small']) { - font: var(--text-title-shorthand-small); + &:where([data-variant='small']) { + font: var(--text-title-shorthand-small); + } } } diff --git a/packages/react/src/Hidden/Hidden.module.css b/packages/react/src/Hidden/Hidden.module.css index b43848f3526..6f713446b1e 100644 --- a/packages/react/src/Hidden/Hidden.module.css +++ b/packages/react/src/Hidden/Hidden.module.css @@ -1,13 +1,15 @@ -.Hidden { - @media screen and (--viewportRange-narrow) { - display: var(--hiddenDisplay-narrow, block); - } +@layer primer.components.Hidden { + .Hidden { + @media screen and (--viewportRange-narrow) { + display: var(--hiddenDisplay-narrow, block); + } - @media screen and (--viewportRange-regular) { - display: var(--hiddenDisplay-regular, block); - } + @media screen and (--viewportRange-regular) { + display: var(--hiddenDisplay-regular, block); + } - @media screen and (--viewportRange-wide) { - display: var(--hiddenDisplay-wide, block); + @media screen and (--viewportRange-wide) { + display: var(--hiddenDisplay-wide, block); + } } } diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css index 0ddbea7498b..c2e5d709b9e 100644 --- a/packages/react/src/InlineMessage/InlineMessage.module.css +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -1,42 +1,44 @@ -.InlineMessage { - display: grid; - /* stylelint-disable-next-line primer/typography */ - font-size: var(--inline-message-fontSize); - /* stylelint-disable-next-line primer/typography */ - line-height: var(--inline-message-lineHeight); - /* stylelint-disable-next-line primer/colors */ - color: var(--inline-message-fgColor); - column-gap: 0.5rem; - grid-template-columns: auto 1fr; - align-items: start; +@layer primer.components.InlineMessage { + .InlineMessage { + display: grid; + /* stylelint-disable-next-line primer/typography */ + font-size: var(--inline-message-fontSize); + /* stylelint-disable-next-line primer/typography */ + line-height: var(--inline-message-lineHeight); + /* stylelint-disable-next-line primer/colors */ + color: var(--inline-message-fgColor); + column-gap: 0.5rem; + grid-template-columns: auto 1fr; + align-items: start; - &[data-size='small'] { - --inline-message-fontSize: var(--text-body-size-small); - --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); - } + &[data-size='small'] { + --inline-message-fontSize: var(--text-body-size-small); + --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + } - &[data-size='medium'] { - --inline-message-fontSize: var(--text-body-size-medium); - --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); - } + &[data-size='medium'] { + --inline-message-fontSize: var(--text-body-size-medium); + --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); + } - &[data-variant='warning'] { - --inline-message-fgColor: var(--fgColor-attention); - } + &[data-variant='warning'] { + --inline-message-fgColor: var(--fgColor-attention); + } - &[data-variant='critical'] { - --inline-message-fgColor: var(--fgColor-danger); - } + &[data-variant='critical'] { + --inline-message-fgColor: var(--fgColor-danger); + } - &[data-variant='success'] { - --inline-message-fgColor: var(--fgColor-success); - } + &[data-variant='success'] { + --inline-message-fgColor: var(--fgColor-success); + } - &[data-variant='unavailable'] { - --inline-message-fgColor: var(--fgColor-muted); + &[data-variant='unavailable'] { + --inline-message-fgColor: var(--fgColor-muted); + } } -} -.InlineMessageIcon { - min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); + .InlineMessageIcon { + min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); + } } diff --git a/packages/react/src/KeybindingHint/KeybindingHint.module.css b/packages/react/src/KeybindingHint/KeybindingHint.module.css index 980830b0e8f..9eee373a7b2 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.module.css +++ b/packages/react/src/KeybindingHint/KeybindingHint.module.css @@ -1,15 +1,17 @@ -.KeybindingHint { - position: relative; - padding: 0; - overflow: visible; - font-family: inherit; - font-size: inherit; - /* stylelint-disable-next-line primer/typography */ - line-height: unset; - color: inherit; - white-space: nowrap; - vertical-align: baseline; - background: none; - border: none; - box-shadow: none; +@layer primer.components.KeybindingHint { + .KeybindingHint { + position: relative; + padding: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + /* stylelint-disable-next-line primer/typography */ + line-height: unset; + color: inherit; + white-space: nowrap; + vertical-align: baseline; + background: none; + border: none; + box-shadow: none; + } } diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css index 204ef191baa..dfb7d1d7b30 100644 --- a/packages/react/src/KeybindingHint/components/Chord.module.css +++ b/packages/react/src/KeybindingHint/components/Chord.module.css @@ -1,48 +1,50 @@ -.Chord { - display: inline-flex; - border: var(--borderWidth-thin) solid; - font-weight: var(--base-text-weight-normal); - gap: 0.5ch; - box-shadow: none; - vertical-align: baseline; - overflow: hidden; - justify-content: center; - border-radius: var(--borderRadius-default); - font-size: var(--text-body-size-small); - padding: var(--base-size-4); - line-height: 10px; /* stylelint-disable-line primer/typography */ -} +@layer primer.components.Chord { + .Chord { + display: inline-flex; + border: var(--borderWidth-thin) solid; + font-weight: var(--base-text-weight-normal); + gap: 0.5ch; + box-shadow: none; + vertical-align: baseline; + overflow: hidden; + justify-content: center; + border-radius: var(--borderRadius-default); + font-size: var(--text-body-size-small); + padding: var(--base-size-4); + line-height: 10px; /* stylelint-disable-line primer/typography */ + } -.ChordNormal { - background: var(--bgColor-transparent); - color: var(--fgColor-muted); - border-color: var(--borderColor-default); -} + .ChordNormal { + background: var(--bgColor-transparent); + color: var(--fgColor-muted); + border-color: var(--borderColor-default); + } -.ChordOnEmphasis { - background: var(--counter-bgColor-emphasis); - color: var(--fgColor-onEmphasis); - border-color: transparent; -} + .ChordOnEmphasis { + background: var(--counter-bgColor-emphasis); + color: var(--fgColor-onEmphasis); + border-color: transparent; + } -.ChordOnPrimary { - background: var(--button-primary-bgColor-active); - color: var(--fgColor-onEmphasis); - border-color: transparent; -} + .ChordOnPrimary { + background: var(--button-primary-bgColor-active); + color: var(--fgColor-onEmphasis); + border-color: transparent; + } -.ChordSmall { - border-radius: var(--borderRadius-small); - font-size: 11px; /* stylelint-disable-line primer/typography */ - padding: var(--base-size-2); - line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */ - min-width: var(--base-size-16); -} + .ChordSmall { + border-radius: var(--borderRadius-small); + font-size: 11px; /* stylelint-disable-line primer/typography */ + padding: var(--base-size-2); + line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */ + min-width: var(--base-size-16); + } -.ChordNormal:not(.ChordSmall) { - border-radius: var(--borderRadius-medium); - font-size: var(--text-body-size-small, 0.75rem); - padding: var(--base-size-4); - line-height: 10px; /* stylelint-disable-line primer/typography */ - min-width: var(--base-size-20); + .ChordNormal:not(.ChordSmall) { + border-radius: var(--borderRadius-medium); + font-size: var(--text-body-size-small, 0.75rem); + padding: var(--base-size-4); + line-height: 10px; /* stylelint-disable-line primer/typography */ + min-width: var(--base-size-20); + } } diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css index 1635e294778..b165ca42fed 100644 --- a/packages/react/src/Label/Label.module.css +++ b/packages/react/src/Label/Label.module.css @@ -1,79 +1,81 @@ -:where(.Label) { - display: inline-flex; - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-medium); - /* stylelint-disable-next-line primer/typography */ - line-height: 1; - color: var(--fgColor-default); - white-space: nowrap; - background-color: transparent; - border-style: solid; - border-width: var(--borderWidth-thin); - border-radius: var(--borderRadius-full); - align-items: center; +@layer primer.components.Label { + :where(.Label) { + display: inline-flex; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-medium); + /* stylelint-disable-next-line primer/typography */ + line-height: 1; + color: var(--fgColor-default); + white-space: nowrap; + background-color: transparent; + border-style: solid; + border-width: var(--borderWidth-thin); + border-radius: var(--borderRadius-full); + align-items: center; - &:where([data-size='small']) { - height: var(--base-size-20); - padding: 0 var(--base-size-6); - } + &:where([data-size='small']) { + height: var(--base-size-20); + padding: 0 var(--base-size-6); + } - &:where([data-size='large']) { - height: var(--base-size-24); - padding: 0 var(--base-size-8); - } + &:where([data-size='large']) { + height: var(--base-size-24); + padding: 0 var(--base-size-8); + } - &:where([data-variant='default']) { - border-color: var(--borderColor-default); - } + &:where([data-variant='default']) { + border-color: var(--borderColor-default); + } - &:where([data-variant='primary']) { - /* stylelint-disable-next-line primer/colors */ - border-color: var(--fgColor-default); - } + &:where([data-variant='primary']) { + /* stylelint-disable-next-line primer/colors */ + border-color: var(--fgColor-default); + } - &:where([data-variant='secondary']) { - color: var(--fgColor-muted); - border-color: var(--borderColor-muted); - } + &:where([data-variant='secondary']) { + color: var(--fgColor-muted); + border-color: var(--borderColor-muted); + } - &:where([data-variant='accent']) { - color: var(--fgColor-accent); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-accent-emphasis); - } + &:where([data-variant='accent']) { + color: var(--fgColor-accent); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-accent-emphasis); + } - &:where([data-variant='success']) { - color: var(--fgColor-success); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-success-emphasis); - } + &:where([data-variant='success']) { + color: var(--fgColor-success); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-success-emphasis); + } - &:where([data-variant='attention']) { - color: var(--fgColor-attention); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-attention-emphasis); - } + &:where([data-variant='attention']) { + color: var(--fgColor-attention); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-attention-emphasis); + } - &:where([data-variant='severe']) { - color: var(--fgColor-severe); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-severe-emphasis); - } + &:where([data-variant='severe']) { + color: var(--fgColor-severe); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-severe-emphasis); + } - &:where([data-variant='danger']) { - color: var(--fgColor-danger); - border-color: var(--borderColor-danger-emphasis); - } + &:where([data-variant='danger']) { + color: var(--fgColor-danger); + border-color: var(--borderColor-danger-emphasis); + } - &:where([data-variant='done']) { - color: var(--fgColor-done); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-done-emphasis); - } + &:where([data-variant='done']) { + color: var(--fgColor-done); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-done-emphasis); + } - &:where([data-variant='sponsors']) { - color: var(--fgColor-sponsors); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-sponsors-emphasis); + &:where([data-variant='sponsors']) { + color: var(--fgColor-sponsors); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-sponsors-emphasis); + } } } diff --git a/packages/react/src/LabelGroup/LabelGroup.module.css b/packages/react/src/LabelGroup/LabelGroup.module.css index 08cdc11fe77..138d571d310 100644 --- a/packages/react/src/LabelGroup/LabelGroup.module.css +++ b/packages/react/src/LabelGroup/LabelGroup.module.css @@ -1,52 +1,54 @@ -.Container { - display: flex; - flex-wrap: nowrap; - gap: var(--base-size-4); - /* stylelint-disable-next-line primer/typography */ - line-height: 1; - max-width: 100%; - overflow: hidden; +@layer primer.components.LabelGroup { + .Container { + display: flex; + flex-wrap: nowrap; + gap: var(--base-size-4); + /* stylelint-disable-next-line primer/typography */ + line-height: 1; + max-width: 100%; + overflow: hidden; - &:where([data-overflow='inline']) { - flex-wrap: wrap; - } + &:where([data-overflow='inline']) { + flex-wrap: wrap; + } - &:where([data-list]) { - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; - list-style-type: none; + &:where([data-list]) { + padding-inline-start: 0; + margin-block-start: 0; + margin-block-end: 0; + list-style-type: none; + } } -} -.ItemWrapper { - display: flex; - align-items: center; - /* This min-height matches the height of the expand/collapse button. + .ItemWrapper { + display: flex; + align-items: center; + /* This min-height matches the height of the expand/collapse button. Without it, the labels/tokens will do a slight layout shift when expanded. This is because the height of the first row will match the token sizes, but the height of the second row will be the height of the collapse button. */ - min-height: 28px; -} + min-height: 28px; + } -.ItemWrapper--hidden { - order: 9999; - pointer-events: none; - visibility: hidden; -} + .ItemWrapper--hidden { + order: 9999; + pointer-events: none; + visibility: hidden; + } -.OverlayContainer { - align-items: flex-start; - display: flex; -} + .OverlayContainer { + align-items: flex-start; + display: flex; + } -.OverlayInner { - display: flex; - flex-wrap: wrap; - gap: var(--base-size-4); -} + .OverlayInner { + display: flex; + flex-wrap: wrap; + gap: var(--base-size-4); + } -.CloseButton { - flex-shrink: 0; + .CloseButton { + flex-shrink: 0; + } } diff --git a/packages/react/src/Link/Link.module.css b/packages/react/src/Link/Link.module.css index b2d78039ed1..c65898f5e1a 100644 --- a/packages/react/src/Link/Link.module.css +++ b/packages/react/src/Link/Link.module.css @@ -1,38 +1,40 @@ -: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; - } + [data-a11y-link-underlines='true'] &:where([data-inline='true']) { + text-decoration: underline; + } - &: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/NavList/NavList.module.css b/packages/react/src/NavList/NavList.module.css index 9908361e112..e071dec505c 100644 --- a/packages/react/src/NavList/NavList.module.css +++ b/packages/react/src/NavList/NavList.module.css @@ -1,8 +1,10 @@ -.GroupHeading > a { - color: var(--fgColor-default); - text-decoration: inherit; -} +@layer primer.components.NavList { + .GroupHeading > a { + color: var(--fgColor-default); + text-decoration: inherit; + } -.GroupHeading > a:hover { - text-decoration: underline; + .GroupHeading > a:hover { + text-decoration: underline; + } } diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css index a411b34c6f4..fe476f26b51 100644 --- a/packages/react/src/Overlay/Overlay.module.css +++ b/packages/react/src/Overlay/Overlay.module.css @@ -1,194 +1,196 @@ -@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: hidden; - background-color: var(--overlay-bgColor); - border-radius: var(--borderRadius-large); - box-shadow: var(--shadow-floating-small); - /* stylelint-disable-next-line primer/spacing */ - top: var(--top, auto); - /* stylelint-disable-next-line primer/spacing */ - left: var(--left, auto); - /* stylelint-disable-next-line primer/spacing */ - right: var(--right, auto); - /* stylelint-disable-next-line primer/spacing */ - bottom: var(--bottom, auto); - - &:focus { - outline: none; - } + .Overlay { + position: absolute; + max-width: calc(100vw - 2rem); + width: auto; + min-width: 192px; + height: auto; + max-height: 100vh; + overflow: hidden; + background-color: var(--overlay-bgColor); + border-radius: var(--borderRadius-large); + box-shadow: var(--shadow-floating-small); + /* stylelint-disable-next-line primer/spacing */ + top: var(--top, auto); + /* stylelint-disable-next-line primer/spacing */ + left: var(--left, auto); + /* stylelint-disable-next-line primer/spacing */ + right: var(--right, auto); + /* stylelint-disable-next-line primer/spacing */ + bottom: var(--bottom, auto); + + &: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: 192px; - } + &:where([data-max-height-xsmall]) { + max-height: 192px; + } - &:where([data-max-height-small]) { - max-height: 256px; - } + &:where([data-max-height-small]) { + max-height: 256px; + } - &:where([data-max-height-medium]) { - max-height: 320px; - } + &:where([data-max-height-medium]) { + max-height: 320px; + } - &:where([data-max-height-large]) { - max-height: 432px; - } + &:where([data-max-height-large]) { + max-height: 432px; + } - &:where([data-max-height-xlarge]) { - max-height: 600px; - } + &:where([data-max-height-xlarge]) { + max-height: 600px; + } - &: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']) { - @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; + &:where([data-responsive='fullscreen']) { + @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; + } } - } - @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 92486619fe8..e123ec2ddf6 100644 --- a/packages/react/src/PageHeader/PageHeader.module.css +++ b/packages/react/src/PageHeader/PageHeader.module.css @@ -1,328 +1,330 @@ -.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'; - - /* +@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. */ - &: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']) { + &: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); } - } - & [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); + } + } + + & [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/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css index a90c9e9f7ec..60c7f98e684 100644 --- a/packages/react/src/PageLayout/PageLayout.module.css +++ b/packages/react/src/PageLayout/PageLayout.module.css @@ -1,766 +1,768 @@ -.PageLayoutRoot { - /* Region Order */ - --region-order-header: 0; - --region-order-pane-start: 1; - --region-order-content: 2; - --region-order-pane-end: 3; - --region-order-footer: 4; - - /* Spacing Values */ - --spacing-none: 0; - --spacing-condensed: var(--base-size-16); - --spacing-normal: var(--base-size-16); - - @media screen and (min-width: 1012px) { - --spacing-normal: var(--base-size-24); - } - - /* Pane Width Values */ - --pane-width-small: 100%; - --pane-width-medium: 100%; - --pane-width-large: 100%; - --pane-max-width-diff: 511px; +@layer primer.components.PageLayout { + .PageLayoutRoot { + /* Region Order */ + --region-order-header: 0; + --region-order-pane-start: 1; + --region-order-content: 2; + --region-order-pane-end: 3; + --region-order-footer: 4; + + /* Spacing Values */ + --spacing-none: 0; + --spacing-condensed: var(--base-size-16); + --spacing-normal: var(--base-size-16); + + @media screen and (min-width: 1012px) { + --spacing-normal: var(--base-size-24); + } + + /* Pane Width Values */ + --pane-width-small: 100%; + --pane-width-medium: 100%; + --pane-width-large: 100%; + --pane-max-width-diff: 511px; - @media screen and (min-width: 768px) { - --pane-width-small: 240px; - --pane-width-medium: 256px; - --pane-width-large: 256px; - } - - @media screen and (min-width: 1012px) { - --pane-width-small: 256px; - --pane-width-medium: 296px; - --pane-width-large: 320px; - } + @media screen and (min-width: 768px) { + --pane-width-small: 240px; + --pane-width-medium: 256px; + --pane-width-large: 256px; + } - @media screen and (min-width: 1280px) { - --pane-max-width-diff: 959px; - } + @media screen and (min-width: 1012px) { + --pane-width-small: 256px; + --pane-width-medium: 296px; + --pane-width-large: 320px; + } - /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */ - --spacing: 0; - --spacing-row: 0; - --spacing-column: 0; - --spacing-divider: 0; - --offset-header: 0; - --pane-width: 0; - --pane-min-width: 0; - --pane-max-width: 0; - --pane-width-custom: 0; - --pane-width-size: 0; - - /* stylelint-disable-next-line primer/spacing */ - padding: var(--spacing); -} + @media screen and (min-width: 1280px) { + --pane-max-width-diff: 959px; + } -.PageLayoutWrapper { - display: flex; - margin-right: auto; - margin-left: auto; - flex-wrap: wrap; - /* the wrapper should match the Root's dimensions by default */ - width: 100%; - height: 100%; - - &:where([data-width='medium']) { - max-width: 768px; - } + /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */ + --spacing: 0; + --spacing-row: 0; + --spacing-column: 0; + --spacing-divider: 0; + --offset-header: 0; + --pane-width: 0; + --pane-min-width: 0; + --pane-max-width: 0; + --pane-width-custom: 0; + --pane-width-size: 0; - &:where([data-width='large']) { - max-width: 1012px; + /* stylelint-disable-next-line primer/spacing */ + padding: var(--spacing); } - &:where([data-width='full']) { - max-width: 100%; - } + .PageLayoutWrapper { + display: flex; + margin-right: auto; + margin-left: auto; + flex-wrap: wrap; + /* the wrapper should match the Root's dimensions by default */ + width: 100%; + height: 100%; - &:where([data-width='xlarge']) { - max-width: 1280px; - } -} + &:where([data-width='medium']) { + max-width: 768px; + } -.PageLayoutContent { - display: flex; - flex: 1 1 100%; - flex-wrap: wrap; - max-width: 100%; -} + &:where([data-width='large']) { + max-width: 1012px; + } -.HorizontalDivider { - /* stylelint-disable-next-line primer/spacing */ - margin-right: calc(-1 * var(--spacing-divider)); - /* stylelint-disable-next-line primer/spacing */ - margin-left: calc(-1 * var(--spacing-divider)); + &:where([data-width='full']) { + max-width: 100%; + } - &:where([data-variant='none']) { - display: none; + &:where([data-width='xlarge']) { + max-width: 1280px; + } } - &:where([data-variant='line']) { - display: block; - height: 1px; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); + .PageLayoutContent { + display: flex; + flex: 1 1 100%; + flex-wrap: wrap; + max-width: 100%; } - &:where([data-variant='filled']) { - display: block; - height: var(--base-size-8); - background-color: var(--bgColor-inset); - box-shadow: - /* stylelint-disable-next-line primer/box-shadow */ - inset 0 -1px 0 0 var(--borderColor-default), - inset 0 1px 0 0 var(--borderColor-default); - } + .HorizontalDivider { + /* stylelint-disable-next-line primer/spacing */ + margin-right: calc(-1 * var(--spacing-divider)); + /* stylelint-disable-next-line primer/spacing */ + margin-left: calc(-1 * var(--spacing-divider)); - /* Narrow viewport */ - @media (--viewportRange-narrow) { - &:where([data-variant-narrow='none']) { + &:where([data-variant='none']) { display: none; } - &:where([data-variant-narrow='line']) { + &:where([data-variant='line']) { display: block; height: 1px; /* stylelint-disable-next-line primer/colors */ background-color: var(--borderColor-default); } - &:where([data-variant-narrow='filled']) { + &:where([data-variant='filled']) { display: block; height: var(--base-size-8); background-color: var(--bgColor-inset); box-shadow: - /* stylelint-disable-next-line primer/box-shadow */ + /* stylelint-disable-next-line primer/box-shadow */ inset 0 -1px 0 0 var(--borderColor-default), inset 0 1px 0 0 var(--borderColor-default); } - } - /* Regular viewport */ - @media (--viewportRange-regular) { - &:where([data-variant-regular='none']) { - display: none; - } - - &:where([data-variant-regular='line']) { - display: block; - height: 1px; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); - } - - &:where([data-variant-regular='filled']) { - display: block; - height: var(--base-size-8); - background-color: var(--bgColor-inset); - box-shadow: + /* Narrow viewport */ + @media (--viewportRange-narrow) { + &:where([data-variant-narrow='none']) { + display: none; + } + + &:where([data-variant-narrow='line']) { + display: block; + height: 1px; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + } + + &:where([data-variant-narrow='filled']) { + display: block; + height: var(--base-size-8); + background-color: var(--bgColor-inset); + box-shadow: /* stylelint-disable-next-line primer/box-shadow */ - inset 0 -1px 0 0 var(--borderColor-default), - inset 0 1px 0 0 var(--borderColor-default); - } - } - - /* Wide viewport */ - @media (--viewportRange-wide) { - &:where([data-variant-wide='none']) { - display: none; - } - - &:where([data-variant-wide='line']) { - display: block; - height: 1px; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); - } - - &:where([data-variant-wide='filled']) { - display: block; - height: var(--base-size-8); - background-color: var(--bgColor-inset); - box-shadow: + inset 0 -1px 0 0 var(--borderColor-default), + inset 0 1px 0 0 var(--borderColor-default); + } + } + + /* Regular viewport */ + @media (--viewportRange-regular) { + &:where([data-variant-regular='none']) { + display: none; + } + + &:where([data-variant-regular='line']) { + display: block; + height: 1px; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + } + + &:where([data-variant-regular='filled']) { + display: block; + height: var(--base-size-8); + background-color: var(--bgColor-inset); + box-shadow: /* stylelint-disable-next-line primer/box-shadow */ - inset 0 -1px 0 0 var(--borderColor-default), - inset 0 1px 0 0 var(--borderColor-default); + inset 0 -1px 0 0 var(--borderColor-default), + inset 0 1px 0 0 var(--borderColor-default); + } + } + + /* Wide viewport */ + @media (--viewportRange-wide) { + &:where([data-variant-wide='none']) { + display: none; + } + + &:where([data-variant-wide='line']) { + display: block; + height: 1px; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + } + + &:where([data-variant-wide='filled']) { + display: block; + height: var(--base-size-8); + background-color: var(--bgColor-inset); + box-shadow: + /* stylelint-disable-next-line primer/box-shadow */ + inset 0 -1px 0 0 var(--borderColor-default), + inset 0 1px 0 0 var(--borderColor-default); + } } - } - - @media screen and (min-width: 768px) { - margin-right: 0 !important; - margin-left: 0 !important; - } -} -.VerticalDivider { - position: relative; - height: 100%; - - &:where([data-variant='none']) { - display: none; - } - - &:where([data-variant='line']) { - display: block; - width: 1px; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); + @media screen and (min-width: 768px) { + margin-right: 0 !important; + margin-left: 0 !important; + } } - &:where([data-variant='filled']) { - display: block; - width: var(--base-size-8); - background-color: var(--bgColor-inset); - box-shadow: - /* stylelint-disable-next-line primer/box-shadow */ - inset -1px 0 0 0 var(--borderColor-default), - inset 1px 0 0 0 var(--borderColor-default); - } + .VerticalDivider { + position: relative; + height: 100%; - /* Narrow viewport */ - @media (--viewportRange-narrow) { - &:where([data-variant-narrow='none']) { + &:where([data-variant='none']) { display: none; } - &:where([data-variant-narrow='line']) { + &:where([data-variant='line']) { display: block; width: 1px; /* stylelint-disable-next-line primer/colors */ background-color: var(--borderColor-default); } - &:where([data-variant-narrow='filled']) { + &:where([data-variant='filled']) { display: block; width: var(--base-size-8); background-color: var(--bgColor-inset); box-shadow: - /* stylelint-disable-next-line primer/box-shadow */ + /* stylelint-disable-next-line primer/box-shadow */ inset -1px 0 0 0 var(--borderColor-default), inset 1px 0 0 0 var(--borderColor-default); } - } - - /* Regular viewport */ - @media (--viewportRange-regular) { - &:where([data-variant-regular='none']) { - display: none; - } - &:where([data-variant-regular='line']) { - display: block; - width: 1px; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); - } - - &:where([data-variant-regular='filled']) { - display: block; - width: var(--base-size-8); - background-color: var(--bgColor-inset); - box-shadow: + /* Narrow viewport */ + @media (--viewportRange-narrow) { + &:where([data-variant-narrow='none']) { + display: none; + } + + &:where([data-variant-narrow='line']) { + display: block; + width: 1px; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + } + + &:where([data-variant-narrow='filled']) { + display: block; + width: var(--base-size-8); + background-color: var(--bgColor-inset); + box-shadow: /* stylelint-disable-next-line primer/box-shadow */ - inset -1px 0 0 0 var(--borderColor-default), - inset 1px 0 0 0 var(--borderColor-default); + inset -1px 0 0 0 var(--borderColor-default), + inset 1px 0 0 0 var(--borderColor-default); + } + } + + /* Regular viewport */ + @media (--viewportRange-regular) { + &:where([data-variant-regular='none']) { + display: none; + } + + &:where([data-variant-regular='line']) { + display: block; + width: 1px; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + } + + &:where([data-variant-regular='filled']) { + display: block; + width: var(--base-size-8); + background-color: var(--bgColor-inset); + box-shadow: + /* stylelint-disable-next-line primer/box-shadow */ + inset -1px 0 0 0 var(--borderColor-default), + inset 1px 0 0 0 var(--borderColor-default); + } + } + + /* Wide viewport */ + @media (--viewportRange-wide) { + &:where([data-variant-wide='none']) { + display: none; + } + + &:where([data-variant-wide='line']) { + display: block; + width: 1px; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + } + + &:where([data-variant-wide='filled']) { + display: block; + width: var(--base-size-8); + background-color: var(--bgColor-inset); + box-shadow: + /* stylelint-disable-next-line primer/box-shadow */ + inset -1px 0 0 0 var(--borderColor-default), + inset 1px 0 0 0 var(--borderColor-default); + } } } - /* Wide viewport */ - @media (--viewportRange-wide) { - &:where([data-variant-wide='none']) { + .Header { + width: 100%; + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: var(--spacing); + + &:where([data-hidden='true']) { display: none; } - &:where([data-variant-wide='line']) { - display: block; - width: 1px; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); + /* Narrow viewport */ + @media (--viewportRange-narrow) { + &:where([data-hidden-narrow='true']) { + display: none; + } } - &:where([data-variant-wide='filled']) { - display: block; - width: var(--base-size-8); - background-color: var(--bgColor-inset); - box-shadow: - /* stylelint-disable-next-line primer/box-shadow */ - inset -1px 0 0 0 var(--borderColor-default), - inset 1px 0 0 0 var(--borderColor-default); + /* Regular viewport */ + @media (--viewportRange-regular) { + &:where([data-hidden-regular='true']) { + display: none; + } } - } -} - -.Header { - width: 100%; - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--spacing); - - &:where([data-hidden='true']) { - display: none; - } - /* Narrow viewport */ - @media (--viewportRange-narrow) { - &:where([data-hidden-narrow='true']) { - display: none; + /* Wide viewport */ + @media (--viewportRange-wide) { + &:where([data-hidden-wide='true']) { + display: none; + } } } - /* Regular viewport */ - @media (--viewportRange-regular) { - &:where([data-hidden-regular='true']) { - display: none; - } + .HeaderContent { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--spacing); } - /* Wide viewport */ - @media (--viewportRange-wide) { - &:where([data-hidden-wide='true']) { - display: none; - } + .HeaderHorizontalDivider { + /* stylelint-disable-next-line primer/spacing */ + margin-top: var(--spacing); } -} - -.HeaderContent { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--spacing); -} - -.HeaderHorizontalDivider { - /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--spacing); -} -.ContentWrapper { - display: flex; + .ContentWrapper { + display: flex; - /* Hack to prevent overflowing content from pushing the pane region to the next line */ - min-width: 1px; - flex-direction: column; - order: var(--region-order-content); + /* Hack to prevent overflowing content from pushing the pane region to the next line */ + min-width: 1px; + flex-direction: column; + order: var(--region-order-content); - /* Set flex-basis to 0% to allow flex-grow to control the width of the content region. + /* Set flex-basis to 0% to allow flex-grow to control the width of the content region. Without this, the content region could wrap onto a different line than the pane region on wide viewports if its contents are too wide. */ - flex-basis: 0; - flex-grow: 1; - flex-shrink: 1; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; - &:where([data-is-hidden='true']) { - display: none; - } - - /* Narrow viewport */ - @media (--viewportRange-narrow) { - &:where([data-is-hidden-narrow='true']) { + &:where([data-is-hidden='true']) { display: none; } - } - /* Regular viewport */ - @media (--viewportRange-regular) { - &:where([data-is-hidden-regular='true']) { - display: none; + /* Narrow viewport */ + @media (--viewportRange-narrow) { + &:where([data-is-hidden-narrow='true']) { + display: none; + } } - } - /* Wide viewport */ - @media (--viewportRange-wide) { - &:where([data-is-hidden-wide='true']) { - display: none; + /* Regular viewport */ + @media (--viewportRange-regular) { + &:where([data-is-hidden-regular='true']) { + display: none; + } + } + + /* Wide viewport */ + @media (--viewportRange-wide) { + &:where([data-is-hidden-wide='true']) { + display: none; + } } } -} -/** + /** * OPTIMIZATION: Aggressive containment during drag for ContentWrapper * CSS handles most optimizations automatically via :has() selector * JavaScript only handles scroll locking (can't be done in CSS) */ -.PageLayoutContent:has(.DraggableHandle[data-dragging='true']) .ContentWrapper { - /* Add paint containment during drag - safe since user can't interact */ - contain: layout style paint; + .PageLayoutContent:has(.DraggableHandle[data-dragging='true']) .ContentWrapper { + /* Add paint containment during drag - safe since user can't interact */ + contain: layout style paint; - /* Disable interactions */ - pointer-events: none; + /* Disable interactions */ + pointer-events: none; - /* Disable transitions to prevent expensive recalculations */ - transition: none; + /* Disable transitions to prevent expensive recalculations */ + transition: none; - /* Force compositor layer for hardware acceleration */ - will-change: width; - transform: translateZ(0); -} + /* Force compositor layer for hardware acceleration */ + will-change: width; + transform: translateZ(0); + } -.Content { - width: 100%; + .Content { + width: 100%; - /* stylelint-disable-next-line primer/spacing */ - padding: var(--spacing); - margin-right: auto; - margin-left: auto; - flex-grow: 1; + /* stylelint-disable-next-line primer/spacing */ + padding: var(--spacing); + margin-right: auto; + margin-left: auto; + flex-grow: 1; - &:where([data-width='medium']) { - max-width: 768px; - } + &:where([data-width='medium']) { + max-width: 768px; + } - &:where([data-width='large']) { - max-width: 1012px; - } + &:where([data-width='large']) { + max-width: 1012px; + } - &:where([data-width='full']) { - max-width: 100%; - } + &:where([data-width='full']) { + max-width: 100%; + } - &:where([data-width='xlarge']) { - max-width: 1280px; + &:where([data-width='xlarge']) { + max-width: 1280px; + } } -} -/** + /** * OPTIMIZATION: Freeze content layout during resize drag * This prevents expensive recalculations of large content areas * while keeping content visible (just frozen in place) */ -.PageLayoutContent:has(.DraggableHandle[data-dragging='true']) .Content { - /* Full containment (without size) - isolate from layout recalculations */ - contain: layout style paint; -} - -.PaneWrapper { - display: flex; - width: 100%; - margin-right: 0; - margin-left: 0; - - &:where([data-is-hidden='true']) { - display: none; + .PageLayoutContent:has(.DraggableHandle[data-dragging='true']) .Content { + /* Full containment (without size) - isolate from layout recalculations */ + contain: layout style paint; } - /* Narrow viewport */ - @media (--viewportRange-narrow) { - &:where([data-is-hidden-narrow='true']) { - display: none; - } - - &:where([data-position-narrow='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--spacing-row); - flex-direction: column; - order: var(--region-order-pane-end); - } + .PaneWrapper { + display: flex; + width: 100%; + margin-right: 0; + margin-left: 0; - &:where([data-position-narrow='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--spacing-row); - flex-direction: column-reverse; - order: var(--region-order-pane-start); + &:where([data-is-hidden='true']) { + display: none; } - } - /* Base position (non-responsive) - applies at narrow viewports only */ - @media (--viewportRange-narrow) { - &:where([data-position='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--spacing-row); - flex-direction: column; - order: var(--region-order-pane-end); + /* Narrow viewport */ + @media (--viewportRange-narrow) { + &:where([data-is-hidden-narrow='true']) { + display: none; + } + + &:where([data-position-narrow='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-top: var(--spacing-row); + flex-direction: column; + order: var(--region-order-pane-end); + } + + &:where([data-position-narrow='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: var(--spacing-row); + flex-direction: column-reverse; + order: var(--region-order-pane-start); + } + } + + /* Base position (non-responsive) - applies at narrow viewports only */ + @media (--viewportRange-narrow) { + &:where([data-position='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-top: var(--spacing-row); + flex-direction: column; + order: var(--region-order-pane-end); + } + + &:where([data-position='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: var(--spacing-row); + flex-direction: column-reverse; + order: var(--region-order-pane-start); + } } + @media screen and (min-width: 768px) { + &:where([data-is-hidden-regular='true']) { + display: none; + } + + width: auto; + margin-top: 0 !important; + margin-bottom: 0 !important; + + &:where([data-sticky]) { + position: sticky; + /* stylelint-disable-next-line primer/spacing */ + top: var(--offset-header); + max-height: 100vh; + } + + /* Base position (non-responsive) - applies at regular+ viewports */ + &:where([data-position='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing-column); + flex-direction: row-reverse; + order: var(--region-order-pane-end); + } + + &:where([data-position='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing-column); + flex-direction: row; + order: var(--region-order-pane-start); + } + + &:where([data-position-regular='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing-column); + flex-direction: row-reverse; + order: var(--region-order-pane-end); + } + + &:where([data-position-regular='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing-column); + flex-direction: row; + order: var(--region-order-pane-start); + } + } + + @media (--viewportRange-wide) { + &:where([data-is-hidden-wide='true']) { + display: none; + } + + &:where([data-position-wide='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing-column); + flex-direction: row-reverse; + order: var(--region-order-pane-end); + } + + &:where([data-position-wide='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing-column); + flex-direction: row; + order: var(--region-order-pane-start); + } + } + } + + .PaneVerticalDivider { + /* Base position (non-responsive) */ &:where([data-position='start']) { /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--spacing-row); - flex-direction: column-reverse; - order: var(--region-order-pane-start); - } - } - - @media screen and (min-width: 768px) { - &:where([data-is-hidden-regular='true']) { - display: none; - } - - width: auto; - margin-top: 0 !important; - margin-bottom: 0 !important; - - &:where([data-sticky]) { - position: sticky; - /* stylelint-disable-next-line primer/spacing */ - top: var(--offset-header); - max-height: 100vh; + margin-left: var(--spacing); } - /* Base position (non-responsive) - applies at regular+ viewports */ &:where([data-position='end']) { /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--spacing-column); - flex-direction: row-reverse; - order: var(--region-order-pane-end); + margin-right: var(--spacing); } - &:where([data-position='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--spacing-column); - flex-direction: row; - order: var(--region-order-pane-start); - } + /* Responsive position */ + @media (--viewportRange-narrow) { + &:where([data-position-narrow='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing); + margin-right: 0; + } - &:where([data-position-regular='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--spacing-column); - flex-direction: row-reverse; - order: var(--region-order-pane-end); + &:where([data-position-narrow='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing); + margin-left: 0; + } } - &:where([data-position-regular='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--spacing-column); - flex-direction: row; - order: var(--region-order-pane-start); - } - } + @media (--viewportRange-regular) { + &:where([data-position-regular='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing); + margin-right: 0; + } - @media (--viewportRange-wide) { - &:where([data-is-hidden-wide='true']) { - display: none; + &:where([data-position-regular='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing); + margin-left: 0; + } } - &:where([data-position-wide='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--spacing-column); - flex-direction: row-reverse; - order: var(--region-order-pane-end); - } + @media (--viewportRange-wide) { + &:where([data-position-wide='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing); + margin-right: 0; + } - &:where([data-position-wide='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--spacing-column); - flex-direction: row; - order: var(--region-order-pane-start); + &:where([data-position-wide='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing); + margin-left: 0; + } } } -} -.PaneVerticalDivider { - /* Base position (non-responsive) */ - &:where([data-position='start']) { + .Pane { + width: var(--pane-width-size); /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--spacing); - } - - &:where([data-position='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--spacing); - } - - /* Responsive position */ - @media (--viewportRange-narrow) { - &:where([data-position-narrow='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--spacing); - margin-right: 0; - } - - &:where([data-position-narrow='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--spacing); - margin-left: 0; - } - } - - @media (--viewportRange-regular) { - &:where([data-position-regular='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--spacing); - margin-right: 0; - } - - &:where([data-position-regular='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--spacing); - margin-left: 0; - } - } - - @media (--viewportRange-wide) { - &:where([data-position-wide='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--spacing); - margin-right: 0; - } + padding: var(--spacing); - &:where([data-position-wide='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-right: var(--spacing); - margin-left: 0; + @media screen and (min-width: 768px) { + overflow: auto; } - } -} - -.Pane { - width: var(--pane-width-size); - /* stylelint-disable-next-line primer/spacing */ - padding: var(--spacing); - @media screen and (min-width: 768px) { - overflow: auto; - } - - &:where([data-resizable]) { - width: 100%; + &:where([data-resizable]) { + width: 100%; - @media screen and (min-width: 768px) { - width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width)); + @media screen and (min-width: 768px) { + width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width)); + } } } -} -/** + /** * OPTIMIZATION: Performance enhancements for Pane during drag * CSS handles all optimizations automatically - JavaScript only locks scroll */ -.PaneWrapper:has(.DraggableHandle[data-dragging='true']) .Pane { - /* Full containment - isolate from layout recalculations */ - contain: layout style paint; + .PaneWrapper:has(.DraggableHandle[data-dragging='true']) .Pane { + /* Full containment - isolate from layout recalculations */ + contain: layout style paint; - /* Disable interactions during drag */ - pointer-events: none; + /* Disable interactions during drag */ + pointer-events: none; - /* Disable transitions during drag */ - transition: none; + /* Disable transitions during drag */ + transition: none; - /* Force hardware acceleration */ - will-change: width, transform; - transform: translateZ(0); - backface-visibility: hidden; -} - -.PaneHorizontalDivider { - &:where([data-position='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--spacing); + /* Force hardware acceleration */ + will-change: width, transform; + transform: translateZ(0); + backface-visibility: hidden; } - &:where([data-position='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--spacing); - } - - /* Responsive position */ - @media (--viewportRange-narrow) { - &:where([data-position-narrow='start']) { + .PaneHorizontalDivider { + &:where([data-position='start']) { /* stylelint-disable-next-line primer/spacing */ margin-top: var(--spacing); - margin-bottom: 0; } - &:where([data-position-narrow='end']) { + &:where([data-position='end']) { /* stylelint-disable-next-line primer/spacing */ margin-bottom: var(--spacing); - margin-top: 0; } - } - @media (--viewportRange-regular) { - &:where([data-position-regular='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--spacing); - margin-bottom: 0; - } + /* Responsive position */ + @media (--viewportRange-narrow) { + &:where([data-position-narrow='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-top: var(--spacing); + margin-bottom: 0; + } - &:where([data-position-regular='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--spacing); - margin-top: 0; + &:where([data-position-narrow='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: var(--spacing); + margin-top: 0; + } } - } - @media (--viewportRange-wide) { - &:where([data-position-wide='start']) { - /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--spacing); - margin-bottom: 0; + @media (--viewportRange-regular) { + &:where([data-position-regular='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-top: var(--spacing); + margin-bottom: 0; + } + + &:where([data-position-regular='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: var(--spacing); + margin-top: 0; + } } - &:where([data-position-wide='end']) { - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--spacing); - margin-top: 0; + @media (--viewportRange-wide) { + &:where([data-position-wide='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-top: var(--spacing); + margin-bottom: 0; + } + + &:where([data-position-wide='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: var(--spacing); + margin-top: 0; + } } } -} - -.FooterWrapper { - width: 100%; - order: var(--region-order-footer); - /* stylelint-disable-next-line primer/spacing */ - margin-top: var(--spacing); + .FooterWrapper { + width: 100%; + order: var(--region-order-footer); - &:where([data-hidden='true']) { - display: none; - } + /* stylelint-disable-next-line primer/spacing */ + margin-top: var(--spacing); - /* Narrow viewport */ - @media (--viewportRange-narrow) { - &:where([data-hidden-narrow='true']) { + &:where([data-hidden='true']) { display: none; } - } - /* Regular viewport */ - @media (--viewportRange-regular) { - &:where([data-hidden-regular='true']) { - display: none; + /* Narrow viewport */ + @media (--viewportRange-narrow) { + &:where([data-hidden-narrow='true']) { + display: none; + } } - } - /* Wide viewport */ - @media (--viewportRange-wide) { - &:where([data-hidden-wide='true']) { - display: none; + /* Regular viewport */ + @media (--viewportRange-regular) { + &:where([data-hidden-regular='true']) { + display: none; + } + } + + /* Wide viewport */ + @media (--viewportRange-wide) { + &:where([data-hidden-wide='true']) { + display: none; + } } } -} -.FooterHorizontalDivider { - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: var(--spacing); -} + .FooterHorizontalDivider { + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: var(--spacing); + } -.FooterContent { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--spacing); -} + .FooterContent { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--spacing); + } -/** + /** * DraggableHandle - Interactive resize handle */ -.DraggableHandle { - position: absolute; - inset: 0 -2px; - cursor: col-resize; - background-color: transparent; - transition-delay: 0.1s; - - /** + .DraggableHandle { + position: absolute; + inset: 0 -2px; + cursor: col-resize; + background-color: transparent; + transition-delay: 0.1s; + + /** * OPTIMIZATION: Prevent touch scrolling and text selection during drag * This is done in CSS because it needs to be set before any pointer events */ - touch-action: none; - user-select: none; -} + touch-action: none; + user-select: none; + } -.DraggableHandle:hover { - background-color: var(--bgColor-neutral-muted); -} + .DraggableHandle:hover { + background-color: var(--bgColor-neutral-muted); + } -.DraggableHandle[data-dragging='true'] { - background-color: var(--bgColor-accent-emphasis); - cursor: col-resize; -} + .DraggableHandle[data-dragging='true'] { + background-color: var(--bgColor-accent-emphasis); + cursor: col-resize; + } -.DraggableHandle[data-dragging='true']:hover { - background-color: var(--bgColor-accent-emphasis); + .DraggableHandle[data-dragging='true']:hover { + background-color: var(--bgColor-accent-emphasis); + } } 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/ScrollableRegion/ScrollableRegion.module.css b/packages/react/src/ScrollableRegion/ScrollableRegion.module.css index cf38fe50fae..a199ee805d8 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 +@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; + position: relative; + overflow: auto; + } } diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index 22b80ae8f33..dbcfc101f1f 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -1,350 +1,352 @@ -.SegmentedControl { - /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */ - --segmented-control-icon-width: 32px; - - display: inline-flex; - - /* TODO: use primitive `control.{small|medium}.size` when it is available */ - height: 32px; - padding: 0; - margin: 0; - font-size: var(--text-body-size-medium); - background-color: var(--controlTrack-bgColor-rest); - border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent); - border-radius: var(--borderRadius-medium); - - /* Responsive full-width */ - &[data-full-width='true'] { - display: flex; - width: 100%; - - --segmented-control-icon-width: 100%; - } +@layer primer.components.SegmentedControl { + .SegmentedControl { + /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */ + --segmented-control-icon-width: 32px; - &[data-full-width='false'] { display: inline-flex; - width: auto; - - --segmented-control-icon-width: 32px; - } - @media (--viewportRange-narrow) { - &[data-full-width-narrow='true'] { + /* TODO: use primitive `control.{small|medium}.size` when it is available */ + height: 32px; + padding: 0; + margin: 0; + font-size: var(--text-body-size-medium); + background-color: var(--controlTrack-bgColor-rest); + border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent); + border-radius: var(--borderRadius-medium); + + /* Responsive full-width */ + &[data-full-width='true'] { display: flex; width: 100%; --segmented-control-icon-width: 100%; } - &[data-full-width-narrow='false'] { + &[data-full-width='false'] { display: inline-flex; width: auto; --segmented-control-icon-width: 32px; } - } - @media (--viewportRange-regular) { - &[data-full-width-regular='true'] { - display: flex; - width: 100%; + @media (--viewportRange-narrow) { + &[data-full-width-narrow='true'] { + display: flex; + width: 100%; - --segmented-control-icon-width: 100%; - } + --segmented-control-icon-width: 100%; + } - &[data-full-width-regular='false'] { - display: inline-flex; - width: auto; + &[data-full-width-narrow='false'] { + display: inline-flex; + width: auto; - --segmented-control-icon-width: 32px; + --segmented-control-icon-width: 32px; + } } - } - @media (--viewportRange-wide) { - &[data-full-width-wide='true'] { - display: flex; - width: 100%; + @media (--viewportRange-regular) { + &[data-full-width-regular='true'] { + display: flex; + width: 100%; - --segmented-control-icon-width: 100%; - } + --segmented-control-icon-width: 100%; + } - &[data-full-width-wide='false'] { - display: inline-flex; - width: auto; + &[data-full-width-regular='false'] { + display: inline-flex; + width: auto; - --segmented-control-icon-width: 32px; + --segmented-control-icon-width: 32px; + } } - &[data-full-width-regular='true']:not([data-full-width-wide='true']) { - display: inline-flex; - width: auto; + @media (--viewportRange-wide) { + &[data-full-width-wide='true'] { + display: flex; + width: 100%; - --segmented-control-icon-width: 32px; - } - } + --segmented-control-icon-width: 100%; + } - /* Hide when dropdown variant is active */ - &[data-variant='dropdown'] { - display: none; - } + &[data-full-width-wide='false'] { + display: inline-flex; + width: auto; - /* Handle hideLabels variant - hide button text */ - &[data-variant='hideLabels'] .Text { - display: none; - } + --segmented-control-icon-width: 32px; + } - @media (--viewportRange-narrow) { - &[data-variant-narrow='dropdown'] { - display: none; - } + &[data-full-width-regular='true']:not([data-full-width-wide='true']) { + display: inline-flex; + width: auto; - &[data-variant-narrow='hideLabels'] .Text { - display: none; + --segmented-control-icon-width: 32px; + } } - } - @media (--viewportRange-regular) { - &[data-variant-regular='dropdown'] { + /* Hide when dropdown variant is active */ + &[data-variant='dropdown'] { display: none; } - &[data-variant-regular='hideLabels'] .Text { + /* Handle hideLabels variant - hide button text */ + &[data-variant='hideLabels'] .Text { display: none; } - } - @media (--viewportRange-wide) { - &[data-variant-wide='dropdown'] { - display: none; + @media (--viewportRange-narrow) { + &[data-variant-narrow='dropdown'] { + display: none; + } + + &[data-variant-narrow='hideLabels'] .Text { + display: none; + } } - &[data-variant-wide='hideLabels'] .Text { - display: none; + @media (--viewportRange-regular) { + &[data-variant-regular='dropdown'] { + display: none; + } + + &[data-variant-regular='hideLabels'] .Text { + display: none; + } } - } - &:where([data-size='small']) { - /* TODO: use primitive `control.{small|medium}.size` when it is available */ - height: 28px; - font-size: var(--text-body-size-small); - } -} + @media (--viewportRange-wide) { + &[data-variant-wide='dropdown'] { + display: none; + } -.DropdownContainer { - display: none; + &[data-variant-wide='hideLabels'] .Text { + display: none; + } + } - /* Show when dropdown variant is active */ - &[data-variant='dropdown'] { - display: block; + &:where([data-size='small']) { + /* TODO: use primitive `control.{small|medium}.size` when it is available */ + height: 28px; + font-size: var(--text-body-size-small); + } } - @media (--viewportRange-narrow) { - &[data-variant-narrow='dropdown'] { + .DropdownContainer { + display: none; + + /* Show when dropdown variant is active */ + &[data-variant='dropdown'] { display: block; } - } - @media (--viewportRange-regular) { - &[data-variant-regular='dropdown'] { - display: block; + @media (--viewportRange-narrow) { + &[data-variant-narrow='dropdown'] { + display: block; + } } - } - @media (--viewportRange-wide) { - &[data-variant-wide='dropdown'] { - display: block; + @media (--viewportRange-regular) { + &[data-variant-regular='dropdown'] { + display: block; + } } - } -} -.Item { - position: relative; - display: block; - /* stylelint-disable-next-line primer/spacing */ - margin-top: -1px; - /* stylelint-disable-next-line primer/spacing */ - margin-bottom: -1px; - flex-grow: 1; + @media (--viewportRange-wide) { + &[data-variant-wide='dropdown'] { + display: block; + } + } + } - &:not(:last-child) { + .Item { + position: relative; + display: block; + /* stylelint-disable-next-line primer/spacing */ + margin-top: -1px; /* stylelint-disable-next-line primer/spacing */ - margin-right: 1px; - - &::after { - position: absolute; - top: var(--base-size-8); - right: calc(-1 * var(--base-size-2)); - bottom: var(--base-size-8); - width: 1px; - content: ''; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-default); + margin-bottom: -1px; + flex-grow: 1; + + &:not(:last-child) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: 1px; + + &::after { + position: absolute; + top: var(--base-size-8); + right: calc(-1 * var(--base-size-2)); + bottom: var(--base-size-8); + width: 1px; + content: ''; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + } + + &:has(+ [data-selected])::after, + &:where([data-selected])::after { + background-color: transparent; + } } - &:has(+ [data-selected])::after, - &:where([data-selected])::after { + &:focus-within:has(:focus-visible) { background-color: transparent; } - } - &:focus-within:has(:focus-visible) { - background-color: transparent; - } + &:first-child { + /* stylelint-disable-next-line primer/spacing */ + margin-left: -1px; + } - &:first-child { - /* stylelint-disable-next-line primer/spacing */ - margin-left: -1px; + &:last-child { + /* stylelint-disable-next-line primer/spacing */ + margin-right: -1px; + } + + .Counter { + margin-inline-start: var(--base-size-8); + display: flex; + align-items: center; + } } - &:last-child { + .Button { + /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */ + --segmented-control-button-inner-padding: 12px; + --segmented-control-button-bg-inset: 4px; + --segmented-control-outer-radius: var(--borderRadius-medium); + + width: 100%; + height: 100%; /* stylelint-disable-next-line primer/spacing */ - margin-right: -1px; - } + padding: var(--segmented-control-button-bg-inset); + font-family: inherit; + font-size: inherit; + font-weight: var(--base-text-weight-normal); + color: currentColor; + cursor: pointer; + background-color: transparent; + border-color: transparent; + border-width: 0; + /* stylelint-disable-next-line primer/borders */ + border-radius: var(--segmented-control-outer-radius); - .Counter { - margin-inline-start: var(--base-size-8); - display: flex; - align-items: center; - } -} + & svg { + fill: var(--fgColor-muted); + color: var(--fgColor-muted); + } -.Button { - /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */ - --segmented-control-button-inner-padding: 12px; - --segmented-control-button-bg-inset: 4px; - --segmented-control-outer-radius: var(--borderRadius-medium); - - width: 100%; - height: 100%; - /* stylelint-disable-next-line primer/spacing */ - padding: var(--segmented-control-button-bg-inset); - font-family: inherit; - font-size: inherit; - font-weight: var(--base-text-weight-normal); - color: currentColor; - cursor: pointer; - background-color: transparent; - border-color: transparent; - border-width: 0; - /* stylelint-disable-next-line primer/borders */ - border-radius: var(--segmented-control-outer-radius); - - & svg { - fill: var(--fgColor-muted); - color: var(--fgColor-muted); - } + /* fallback :focus state */ + &:focus:not(:disabled) { + outline: var(--base-size-2) solid var(--fgColor-accent); + outline-offset: -1px; + box-shadow: none; - /* fallback :focus state */ - &:focus:not(:disabled) { - outline: var(--base-size-2) solid var(--fgColor-accent); - outline-offset: -1px; - box-shadow: none; + /* remove fallback :focus if :focus-visible is supported */ + &:not(:focus-visible) { + outline: solid 1px transparent; + } + } - /* remove fallback :focus if :focus-visible is supported */ - &:not(:focus-visible) { - outline: solid 1px transparent; + /* default focus state */ + &:focus-visible:not(:disabled) { + outline: var(--base-size-2) solid var(--fgColor-accent); + outline-offset: -1px; + box-shadow: none; } - } - /* default focus state */ - &:focus-visible:not(:disabled) { - outline: var(--base-size-2) solid var(--fgColor-accent); - outline-offset: -1px; - box-shadow: none; - } + /* stylelint-disable-next-line selector-max-specificity */ + &:focus:focus-visible:not(:last-child)::after { + /* fixes an issue where the focus outline shows over the pseudo-element */ + width: 0; + } - /* stylelint-disable-next-line selector-max-specificity */ - &:focus:focus-visible:not(:last-child)::after { - /* fixes an issue where the focus outline shows over the pseudo-element */ - width: 0; - } + &[aria-disabled='true']:not([aria-current='true']) { + cursor: not-allowed; + color: var(--fgColor-disabled); + background-color: transparent; - &[aria-disabled='true']:not([aria-current='true']) { - cursor: not-allowed; - color: var(--fgColor-disabled); - background-color: transparent; + & svg { + fill: var(--fgColor-disabled); + color: var(--fgColor-disabled); + } + } - & svg { - fill: var(--fgColor-disabled); - color: var(--fgColor-disabled); + @media (pointer: coarse) { + &::before { + position: absolute; + top: 50%; + right: 0; + left: 0; + min-height: 44px; + content: ''; + transform: translateY(-50%); + } } } - @media (pointer: coarse) { - &::before { - position: absolute; - top: 50%; - right: 0; - left: 0; - min-height: 44px; - content: ''; - transform: translateY(-50%); - } + .IconButton { + width: var(--segmented-control-icon-width, 32px); } -} -.IconButton { - width: var(--segmented-control-icon-width, 32px); -} + .Content { + display: flex; + height: 100%; + /* stylelint-disable-next-line primer/spacing */ + padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset)); + /* stylelint-disable-next-line primer/spacing */ + padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset)); + border-color: transparent; + border-style: solid; + border-width: var(--borderWidth-thin); -.Content { - display: flex; - height: 100%; - /* stylelint-disable-next-line primer/spacing */ - padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset)); - /* stylelint-disable-next-line primer/spacing */ - padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset)); - border-color: transparent; - border-style: solid; - border-width: var(--borderWidth-thin); - - /* + /* innerRadius = outerRadius - distance/2 https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn */ - /* stylelint-disable-next-line primer/borders */ - border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2); - align-items: center; - justify-content: center; -} - -.Button[aria-current='true'] { - padding: 0; - font-weight: var(--base-text-weight-semibold); - - .Content { - /* stylelint-disable-next-line primer/spacing */ - padding-right: var(--segmented-control-button-inner-padding); - /* stylelint-disable-next-line primer/spacing */ - padding-left: var(--segmented-control-button-inner-padding); - background-color: var(--controlKnob-bgColor-rest); - border-color: var(--controlKnob-borderColor-rest); /* stylelint-disable-next-line primer/borders */ - border-radius: var(--segmented-control-outer-radius); + border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2); + align-items: center; + justify-content: center; } -} -.Button:not([aria-current='true'], [aria-disabled='true']) { - &:hover .Content { - background-color: var(--controlTrack-bgColor-hover); + .Button[aria-current='true'] { + padding: 0; + font-weight: var(--base-text-weight-semibold); + + .Content { + /* stylelint-disable-next-line primer/spacing */ + padding-right: var(--segmented-control-button-inner-padding); + /* stylelint-disable-next-line primer/spacing */ + padding-left: var(--segmented-control-button-inner-padding); + background-color: var(--controlKnob-bgColor-rest); + border-color: var(--controlKnob-borderColor-rest); + /* stylelint-disable-next-line primer/borders */ + border-radius: var(--segmented-control-outer-radius); + } } - &:active .Content { - background-color: var(--controlTrack-bgColor-active); + .Button:not([aria-current='true'], [aria-disabled='true']) { + &:hover .Content { + background-color: var(--controlTrack-bgColor-hover); + } + + &:active .Content { + background-color: var(--controlTrack-bgColor-active); + } } -} -.Text::after { - display: block; - height: 0; - overflow: hidden; - font-weight: var(--base-text-weight-semibold); - pointer-events: none; - visibility: hidden; - content: attr(data-text); - user-select: none; -} + .Text::after { + display: block; + height: 0; + overflow: hidden; + font-weight: var(--base-text-weight-semibold); + pointer-events: none; + visibility: hidden; + content: attr(data-text); + user-select: none; + } -.LeadingIcon { - margin-right: var(--base-size-4); + .LeadingIcon { + margin-right: var(--base-size-4); + } } diff --git a/packages/react/src/Select/Select.module.css b/packages/react/src/Select/Select.module.css index 86cfb01aca9..448187824cb 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: + /* 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; + background-color: inherit; + border: 0; + border-radius: inherit; + outline: none; + appearance: none; - /* 2. Prevents visible overlap of partially transparent background colors. + /* 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; + @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/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css index 3a999ad1a60..4ded19f5d5c 100644 --- a/packages/react/src/SelectPanel/SelectPanel.module.css +++ b/packages/react/src/SelectPanel/SelectPanel.module.css @@ -1,236 +1,238 @@ -.Overlay { - /* CSS variables values are passed in via styles */ - --max-height: 0; -} +@layer primer.components.SelectPanel { + .Overlay { + /* CSS variables values are passed in via styles */ + --max-height: 0; + } -.Wrapper { - display: flex; - height: inherit; - max-height: inherit; - flex-direction: column; -} + .Wrapper { + display: flex; + height: inherit; + max-height: inherit; + flex-direction: column; + } -.Header { - display: flex; - justify-content: space-between; - align-items: flex-start; - padding-top: var(--base-size-8); - padding-right: var(--base-size-8); - padding-left: var(--base-size-8); + .Header { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding-top: var(--base-size-8); + padding-right: var(--base-size-8); + padding-left: var(--base-size-8); - &:where([data-variant='fullscreen']) { - min-height: 40px; - flex-shrink: 0; + &:where([data-variant='fullscreen']) { + min-height: 40px; + flex-shrink: 0; + } } -} -.Title { - margin-left: var(--base-size-8); - font-size: var(--text-body-size-medium); -} + .Title { + margin-left: var(--base-size-8); + font-size: var(--text-body-size-medium); + } -.Wrapper[data-variant='modal'] .Title { - margin-top: var(--base-size-8); - /* styling specific to the modal variant */ -} + .Wrapper[data-variant='modal'] .Title { + margin-top: var(--base-size-8); + /* styling specific to the modal variant */ + } -/* + /* * Align SelectPanel header text with AnchoredOverlay close button * * Ensures the title properly aligns with the close button position * in anchor variant on narrow viewports. */ -.Wrapper[data-variant='anchored'] .Title { - @media screen and (--viewportRange-narrow) { - margin-top: var(--base-size-8); + .Wrapper[data-variant='anchored'] .Title { + @media screen and (--viewportRange-narrow) { + margin-top: var(--base-size-8); + } } -} -.Subtitle { - margin-left: var(--base-size-8); - font-size: var(--text-body-size-small); - color: var(--fgColor-muted); -} + .Subtitle { + margin-left: var(--base-size-8); + font-size: var(--text-body-size-small); + color: var(--fgColor-muted); + } -.Notice { - margin-top: var(--base-size-4); - margin-right: var(--base-size-8); - margin-left: var(--base-size-8); -} + .Notice { + margin-top: var(--base-size-4); + margin-right: var(--base-size-8); + margin-left: var(--base-size-8); + } -.Notice a { - color: inherit; - text-decoration: underline; -} + .Notice a { + color: inherit; + text-decoration: underline; + } -.Notice:where([data-variant='info']) { - color: var(--fgColor-accent); - background-color: var(--bgColor-accent-muted); - border-color: var(--borderColor-accent-muted); -} + .Notice:where([data-variant='info']) { + color: var(--fgColor-accent); + background-color: var(--bgColor-accent-muted); + border-color: var(--borderColor-accent-muted); + } -.Notice:where([data-variant='warning']) { - color: var(--fgColor-attention); - background-color: var(--bgColor-attention-muted); - border-color: var(--borderColor-attention-muted); -} + .Notice:where([data-variant='warning']) { + color: var(--fgColor-attention); + background-color: var(--bgColor-attention-muted); + border-color: var(--borderColor-attention-muted); + } -.Notice:where([data-variant='critical']) { - color: var(--fgColor-danger); - background-color: var(--bgColor-danger-muted); - border-color: var(--borderColor-danger-muted); -} + .Notice:where([data-variant='critical']) { + color: var(--fgColor-danger); + background-color: var(--bgColor-danger-muted); + border-color: var(--borderColor-danger-muted); + } -.Footer { - display: flex; - padding: var(--base-size-8); - border-top: var(--borderWidth-thin) solid; - border-top-color: var(--borderColor-default); -} + .Footer { + display: flex; + padding: var(--base-size-8); + border-top: var(--borderWidth-thin) solid; + border-top-color: var(--borderColor-default); + } -.FilteredActionList { - /* inheriting height and maxHeight ensures that the FilteredActionList is never taller + .FilteredActionList { + /* inheriting height and maxHeight ensures that the FilteredActionList is never taller than the Overlay (which would break scrolling the items) */ - height: inherit; - max-height: inherit; -} - -.Message { - display: flex; - height: 100%; - padding: var(--base-size-24); - text-align: center; - flex-direction: column; - justify-content: center; - align-items: center; - flex-grow: 1; - gap: var(--base-size-4); - - a { - color: inherit; - text-decoration: underline; + height: inherit; + max-height: inherit; } -} - -.MessageTitle { - font-size: var(--text-body-size-medium); - font-weight: var(--base-text-weight-semibold); -} -.MessageBody { - font-size: var(--text-body-size-small); - color: var(--fgColor-muted); - align-items: center; - gap: var(--stack-gap-condensed); -} + .Message { + display: flex; + height: 100%; + padding: var(--base-size-24); + text-align: center; + flex-direction: column; + justify-content: center; + align-items: center; + flex-grow: 1; + gap: var(--base-size-4); + + a { + color: inherit; + text-decoration: underline; + } + } -.MessageIcon { - margin-bottom: var(--base-size-8); - color: var(--fgColor-attention); + .MessageTitle { + font-size: var(--text-body-size-medium); + font-weight: var(--base-text-weight-semibold); + } - &:where([data-variant='error']) { - color: var(--fgColor-danger); + .MessageBody { + font-size: var(--text-body-size-small); + color: var(--fgColor-muted); + align-items: center; + gap: var(--stack-gap-condensed); } -} -.MessageAction { - margin-top: var(--base-size-8); -} + .MessageIcon { + margin-bottom: var(--base-size-8); + color: var(--fgColor-attention); -.ResponsiveCloseButton { - display: inline-grid; -} + &:where([data-variant='error']) { + color: var(--fgColor-danger); + } + } -.ResponsiveFooter { - display: none; - align-items: center; - padding: var(--base-size-8); - justify-content: center; + .MessageAction { + margin-top: var(--base-size-8); + } - &:where([data-display-footer='always']) { - display: flex; + .ResponsiveCloseButton { + display: inline-grid; } - &:where([data-display-footer='only-small']) { - @media screen and (--viewportRange-narrow) { + .ResponsiveFooter { + display: none; + align-items: center; + padding: var(--base-size-8); + justify-content: center; + + &:where([data-display-footer='always']) { display: flex; } - } - &[data-stretch-secondary-action='never'] { - justify-content: space-between; - } + &:where([data-display-footer='only-small']) { + @media screen and (--viewportRange-narrow) { + display: flex; + } + } - &:where([data-stretch-secondary-action='only-big']) { - @media screen and (--viewportRange-narrow) { + &[data-stretch-secondary-action='never'] { justify-content: space-between; } - } - &:where([data-stretch-save-button='only-small']) { - justify-content: space-between; - - @media screen and (--viewportRange-narrow) { - justify-content: center; + &:where([data-stretch-secondary-action='only-big']) { + @media screen and (--viewportRange-narrow) { + justify-content: space-between; + } } - } -} -.SecondaryAction { - flex-grow: 1; - align-items: stretch; - display: flex; - justify-content: center; + &:where([data-stretch-save-button='only-small']) { + justify-content: space-between; - &[data-stretch-secondary-action='never'] { - flex-grow: 0; - align-items: flex-start; + @media screen and (--viewportRange-narrow) { + justify-content: center; + } + } } - &:where([data-stretch-secondary-action='only-big']) { - @media screen and (--viewportRange-narrow) { + .SecondaryAction { + flex-grow: 1; + align-items: stretch; + display: flex; + justify-content: center; + + &[data-stretch-secondary-action='never'] { flex-grow: 0; align-items: flex-start; } - } -} - -.CancelSaveButtons { - display: flex; - gap: var(--stack-gap-condensed); - justify-content: flex-end; -} -.ResponsiveCancelSaveButtons { - display: none; + &:where([data-stretch-secondary-action='only-big']) { + @media screen and (--viewportRange-narrow) { + flex-grow: 0; + align-items: flex-start; + } + } + } - @media screen and (--viewportRange-narrow) { + .CancelSaveButtons { display: flex; gap: var(--stack-gap-condensed); justify-content: flex-end; } -} -.ResponsiveSaveButton { - display: none; + .ResponsiveCancelSaveButtons { + display: none; - @media screen and (--viewportRange-narrow) { - display: flex; + @media screen and (--viewportRange-narrow) { + display: flex; + gap: var(--stack-gap-condensed); + justify-content: flex-end; + } } - &:where([data-stretch-save-button='only-small']) { + .ResponsiveSaveButton { + display: none; + @media screen and (--viewportRange-narrow) { - flex-grow: 1; + display: flex; + } + + &:where([data-stretch-save-button='only-small']) { + @media screen and (--viewportRange-narrow) { + flex-grow: 1; + } } } -} -.Backdrop { - position: absolute; - inset: 0; - background-color: var(--overlay-backdrop-bgColor); -} + .Backdrop { + position: absolute; + inset: 0; + background-color: var(--overlay-backdrop-bgColor); + } -.TextInput { - margin: var(--base-size-8); + .TextInput { + margin: var(--base-size-8); + } } 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..95a2bfa67e9 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.SkeletonBox { + @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/Spinner/Spinner.module.css b/packages/react/src/Spinner/Spinner.module.css index 5554ed37490..b922de987c6 100644 --- a/packages/react/src/Spinner/Spinner.module.css +++ b/packages/react/src/Spinner/Spinner.module.css @@ -1,13 +1,15 @@ -.Box { - display: inline-flex; -} +@layer primer.components.Spinner { + .Box { + display: inline-flex; + } -@keyframes rotate-keyframes { - 100% { - transform: rotate(360deg); + @keyframes rotate-keyframes { + 100% { + transform: rotate(360deg); + } } -} -.SpinnerAnimation { - animation: rotate-keyframes var(--base-duration-1000) var(--base-easing-linear) infinite; + .SpinnerAnimation { + animation: rotate-keyframes var(--base-duration-1000) var(--base-easing-linear) infinite; + } } diff --git a/packages/react/src/Stack/Stack.module.css b/packages/react/src/Stack/Stack.module.css index cdb652b07b8..79a89e0aa36 100644 --- a/packages/react/src/Stack/Stack.module.css +++ b/packages/react/src/Stack/Stack.module.css @@ -1,344 +1,346 @@ -.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: 0; - } - - &[data-padding='condensed'], - &[data-padding-narrow='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--stack-padding-condensed); - } - - &[data-padding='normal'], - &[data-padding-narrow='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--stack-padding-normal); - } - - &[data-padding='spacious'], - &[data-padding-narrow='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding: 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='condensed'], - &[data-gap-narrow='condensed'] { - --stack-gap: var(--stack-gap-condensed); - } + align-items: stretch; + align-content: flex-start; + gap: var(--stack-gap, var(--stack-gap-normal)); - &[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; - } - - @media (--viewportRange-regular) { - &[data-padding-regular='none'] { + &[data-padding='none'], + &[data-padding-narrow='none'] { padding: 0; } - &[data-padding-regular='condensed'] { + &[data-padding='condensed'], + &[data-padding-narrow='condensed'] { /* stylelint-disable-next-line primer/spacing */ padding: var(--stack-padding-condensed); } - &[data-padding-regular='normal'] { + &[data-padding='normal'], + &[data-padding-narrow='normal'] { /* stylelint-disable-next-line primer/spacing */ padding: var(--stack-padding-normal); } - &[data-padding-regular='spacious'] { + &[data-padding='spacious'], + &[data-padding-narrow='spacious'] { /* stylelint-disable-next-line primer/spacing */ padding: 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='condensed'] { + &[data-gap='condensed'], + &[data-gap-narrow='condensed'] { --stack-gap: var(--stack-gap-condensed); } - &[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; } - } - @media (--viewportRange-wide) { - &[data-padding-wide='none'] { - padding: 0; - } + @media (--viewportRange-regular) { + &[data-padding-regular='none'] { + padding: 0; + } - &[data-padding-wide='condensed'] { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--stack-padding-condensed); - } + &[data-padding-regular='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--stack-padding-condensed); + } - &[data-padding-wide='normal'] { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--stack-padding-normal); - } + &[data-padding-regular='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--stack-padding-normal); + } - &[data-padding-wide='spacious'] { - /* stylelint-disable-next-line primer/spacing */ - padding: var(--stack-padding-spacious); - } + &[data-padding-regular='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--stack-padding-spacious); + } - &[data-direction-wide='horizontal'] { - flex-flow: row; - } + &[data-direction-regular='horizontal'] { + flex-flow: row; + } - &[data-direction-wide='vertical'] { - flex-flow: column; - } + &[data-direction-regular='vertical'] { + flex-flow: column; + } - &[data-gap-wide='none'] { - --stack-gap: 0; - } + &[data-gap-regular='none'] { + --stack-gap: 0; + } - &[data-gap-wide='condensed'] { - --stack-gap: var(--stack-gap-condensed); - } + &[data-gap-regular='condensed'] { + --stack-gap: var(--stack-gap-condensed); + } - &[data-gap-wide='normal'] { - --stack-gap: var(--stack-gap-normal); - } + &[data-gap-regular='normal'] { + --stack-gap: var(--stack-gap-normal); + } - &[data-gap-wide='spacious'] { - --stack-gap: var(--stack-gap-spacious); - } + &[data-gap-regular='spacious'] { + --stack-gap: var(--stack-gap-spacious); + } - &[data-align-wide='start'] { - align-items: flex-start; - } + &[data-align-regular='start'] { + align-items: flex-start; + } - &[data-align-wide='center'] { - align-items: center; - } + &[data-align-regular='center'] { + align-items: center; + } - &[data-align-wide='end'] { - align-items: flex-end; - } + &[data-align-regular='end'] { + align-items: flex-end; + } - &[data-align-wide='baseline'] { - align-items: baseline; - } + &[data-align-regular='baseline'] { + align-items: baseline; + } - &[data-justify-wide='start'] { - justify-content: flex-start; - } + &[data-justify-regular='start'] { + justify-content: flex-start; + } - &[data-justify-wide='center'] { - justify-content: center; - } + &[data-justify-regular='center'] { + justify-content: center; + } - &[data-justify-wide='end'] { - justify-content: flex-end; - } + &[data-justify-regular='end'] { + justify-content: flex-end; + } - &[data-justify-wide='space-between'] { - justify-content: space-between; - } + &[data-justify-regular='space-between'] { + justify-content: space-between; + } - &[data-justify-wide='space-evenly'] { - justify-content: space-evenly; - } + &[data-justify-regular='space-evenly'] { + justify-content: space-evenly; + } - &[data-wrap-wide='wrap'] { - flex-wrap: wrap; - } + &[data-wrap-regular='wrap'] { + flex-wrap: wrap; + } - &[data-wrap-wide='nowrap'] { - flex-wrap: nowrap; + &[data-wrap-regular='nowrap'] { + flex-wrap: nowrap; + } } - } -} -.StackItem { - flex: 0 1 auto; - min-inline-size: 0; + @media (--viewportRange-wide) { + &[data-padding-wide='none'] { + padding: 0; + } - &[data-shrink='false'], - &[data-shrink-narrow='false'] { - flex-shrink: 0; - } + &[data-padding-wide='condensed'] { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--stack-padding-condensed); + } - &[data-grow='true'], - &[data-grow-narrow='true'] { - flex-grow: 1; - } + &[data-padding-wide='normal'] { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--stack-padding-normal); + } - @media (--viewportRange-regular) { - &[data-grow-regular='true'] { - flex-grow: 1; - } + &[data-padding-wide='spacious'] { + /* stylelint-disable-next-line primer/spacing */ + padding: var(--stack-padding-spacious); + } - &[data-grow-regular='false'] { - flex-grow: 0; - } + &[data-direction-wide='horizontal'] { + flex-flow: row; + } + + &[data-direction-wide='vertical'] { + flex-flow: column; + } + + &[data-gap-wide='none'] { + --stack-gap: 0; + } + + &[data-gap-wide='condensed'] { + --stack-gap: var(--stack-gap-condensed); + } + + &[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-shrink-regular='true'] { - flex-shrink: 1; + &[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; + } } + } + + .StackItem { + flex: 0 1 auto; + min-inline-size: 0; - &[data-shrink-regular='false'] { + &[data-shrink='false'], + &[data-shrink-narrow='false'] { flex-shrink: 0; } - } - @media (--viewportRange-wide) { - &[data-grow-wide='true'] { + &[data-grow='true'], + &[data-grow-narrow='true'] { flex-grow: 1; } - &[data-grow-wide='false'] { - flex-grow: 0; - } + @media (--viewportRange-regular) { + &[data-grow-regular='true'] { + flex-grow: 1; + } + + &[data-grow-regular='false'] { + flex-grow: 0; + } - &[data-shrink-wide='true'] { - flex-shrink: 1; + &[data-shrink-regular='true'] { + flex-shrink: 1; + } + + &[data-shrink-regular='false'] { + flex-shrink: 0; + } } - &[data-shrink-wide='false'] { - flex-shrink: 0; + @media (--viewportRange-wide) { + &[data-grow-wide='true'] { + flex-grow: 1; + } + + &[data-grow-wide='false'] { + flex-grow: 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 1f31d5f0aa2..7e570a5dc45 100644 --- a/packages/react/src/StateLabel/StateLabel.module.css +++ b/packages/react/src/StateLabel/StateLabel.module.css @@ -1,104 +1,106 @@ -.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); -} - -.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); + } + + .Icon { + margin-right: var(--base-size-4); + } + + .Icon:where([data-size-small]) { + width: 1em; + } } diff --git a/packages/react/src/SubNav/SubNav.dev.module.css b/packages/react/src/SubNav/SubNav.dev.module.css index 61807842f42..a6ddb6af9b3 100644 --- a/packages/react/src/SubNav/SubNav.dev.module.css +++ b/packages/react/src/SubNav/SubNav.dev.module.css @@ -1,17 +1,19 @@ -.SubNavDev { - padding: var(--base-size-4); - border: var(--borderWidth-thick) solid var(--borderColor-default); -} +@layer primer.components.SubNav.dev { + .SubNavDev { + padding: var(--base-size-4); + border: var(--borderWidth-thick) solid var(--borderColor-default); + } -.SubNavLinksDev { - margin: var(--base-size-8); -} + .SubNavLinksDev { + margin: var(--base-size-8); + } -.SubNavLinkDev { - font-weight: var(--text-title-weight-large); - color: var(--fgColor-accent); + .SubNavLinkDev { + font-weight: var(--text-title-weight-large); + color: var(--fgColor-accent); - &:is([data-selected]) { - background-color: var(--bgColor-open-emphasis); + &:is([data-selected]) { + background-color: var(--bgColor-open-emphasis); + } } } 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/Text/Text.module.css b/packages/react/src/Text/Text.module.css index 6b7b5552bcc..b534088fed9 100644 --- a/packages/react/src/Text/Text.module.css +++ b/packages/react/src/Text/Text.module.css @@ -1,32 +1,34 @@ -.Text { - &:where([data-size='small']) { - font-size: var(--text-body-size-small); - line-height: var(--text-body-lineHeight-small); - } +@layer primer.components.Text { + .Text { + &:where([data-size='small']) { + font-size: var(--text-body-size-small); + line-height: var(--text-body-lineHeight-small); + } - &:where([data-size='medium']) { - font-size: var(--text-body-size-medium); - line-height: var(--text-body-lineHeight-medium); - } + &:where([data-size='medium']) { + font-size: var(--text-body-size-medium); + line-height: var(--text-body-lineHeight-medium); + } - &:where([data-size='large']) { - font-size: var(--text-body-size-large); - line-height: var(--text-body-lineHeight-large); - } + &:where([data-size='large']) { + font-size: var(--text-body-size-large); + line-height: var(--text-body-lineHeight-large); + } - &:where([data-weight='light']) { - font-weight: var(--base-text-weight-light); - } + &:where([data-weight='light']) { + font-weight: var(--base-text-weight-light); + } - &:where([data-weight='normal']) { - font-weight: var(--base-text-weight-normal); - } + &:where([data-weight='normal']) { + font-weight: var(--base-text-weight-normal); + } - &:where([data-weight='medium']) { - font-weight: var(--base-text-weight-medium); - } + &:where([data-weight='medium']) { + font-weight: var(--base-text-weight-medium); + } - &:where([data-weight='semibold']) { - font-weight: var(--base-text-weight-semibold); + &:where([data-weight='semibold']) { + font-weight: var(--base-text-weight-semibold); + } } } diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css index 75fa82130b9..cd0ca9bb8be 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css @@ -1,62 +1,64 @@ -.TextInputWrapper { - padding-top: var(--base-size-6); - padding-bottom: var(--base-size-6); - padding-left: var(--base-size-12); +@layer primer.components.TextInputWithTokens { + .TextInputWrapper { + padding-top: var(--base-size-6); + padding-bottom: var(--base-size-6); + padding-left: var(--base-size-12); - &:where([data-block]) { - display: flex; - width: 100%; + &:where([data-block]) { + display: flex; + width: 100%; + } + + &:where([data-token-wrapping='true']) { + overflow: auto; + } } - &:where([data-token-wrapping='true']) { - overflow: auto; + .UnstyledTextInput { + height: 100%; } -} -.UnstyledTextInput { - height: 100%; -} + .InputWrapper { + order: 1; + flex-grow: 1; + } -.InputWrapper { - order: 1; - flex-grow: 1; -} + .Container { + display: flex; + margin-bottom: calc(var(--base-size-4) * -1); + margin-left: calc(var(--base-size-4) * -1); + align-items: center; + flex-wrap: wrap; + flex-grow: 1; -.Container { - display: flex; - margin-bottom: calc(var(--base-size-4) * -1); - margin-left: calc(var(--base-size-4) * -1); - align-items: center; - flex-wrap: wrap; - flex-grow: 1; + &:where([data-prevent-token-wrapping='true']) { + flex-wrap: nowrap; + } - &:where([data-prevent-token-wrapping='true']) { - flex-wrap: nowrap; + > * { + margin-bottom: var(--base-size-4); + margin-left: var(--base-size-4); + flex-shrink: 0; + } } - > * { - margin-bottom: var(--base-size-4); - margin-left: var(--base-size-4); - flex-shrink: 0; + .OverflowCountSmall { + color: var(--fgColor-muted); + font-size: var(--text-body-size-small); } -} -.OverflowCountSmall { - color: var(--fgColor-muted); - font-size: var(--text-body-size-small); -} - -.OverflowCountMedium { - color: var(--fgColor-muted); - font-size: var(--text-body-size-medium); -} + .OverflowCountMedium { + color: var(--fgColor-muted); + font-size: var(--text-body-size-medium); + } -.OverflowCountLarge { - color: var(--fgColor-muted); - font-size: var(--text-body-size-medium); -} + .OverflowCountLarge { + color: var(--fgColor-muted); + font-size: var(--text-body-size-medium); + } -.OverflowCountXLarge { - color: var(--fgColor-muted); - font-size: var(--text-body-size-large); + .OverflowCountXLarge { + color: var(--fgColor-muted); + font-size: var(--text-body-size-large); + } } diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css index 9c0b16520c9..a336a19931f 100644 --- a/packages/react/src/Textarea/TextArea.module.css +++ b/packages/react/src/Textarea/TextArea.module.css @@ -1,34 +1,36 @@ -.TextArea { - width: 100%; - font-family: inherit; - font-size: inherit; - color: inherit; - resize: both; - background-color: transparent; - border: 0; - appearance: none; -} +@layer primer.components.TextArea { + .TextArea { + width: 100%; + font-family: inherit; + font-size: inherit; + color: inherit; + resize: both; + background-color: transparent; + border: 0; + appearance: none; + } -.TextArea:focus { - outline: 0; -} + .TextArea:focus { + outline: 0; + } -.TextArea[data-resize='none'] { - resize: none; -} + .TextArea[data-resize='none'] { + resize: none; + } -.TextArea[data-resize='both'] { - resize: both; -} + .TextArea[data-resize='both'] { + resize: both; + } -.TextArea[data-resize='horizontal'] { - resize: horizontal; -} + .TextArea[data-resize='horizontal'] { + resize: horizontal; + } -.TextArea[data-resize='vertical'] { - resize: vertical; -} + .TextArea[data-resize='vertical'] { + resize: vertical; + } -.TextArea:disabled { - resize: none; + .TextArea:disabled { + resize: none; + } } diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css index 608df26e2eb..1a3d15d792b 100644 --- a/packages/react/src/Timeline/Timeline.module.css +++ b/packages/react/src/Timeline/Timeline.module.css @@ -1,111 +1,113 @@ -.Timeline { - display: flex; - flex-direction: column; +@layer primer.components.Timeline { + .Timeline { + display: flex; + flex-direction: column; - &:where([data-clip-sidebar]) { - .TimelineItem:first-child { - padding-top: 0; + &:where([data-clip-sidebar]) { + .TimelineItem:first-child { + padding-top: 0; - &:where([data-condensed])::before { - top: var(--base-size-12); + &:where([data-condensed])::before { + top: var(--base-size-12); + } } - } - .TimelineItem:last-child { - padding-bottom: 0; + .TimelineItem:last-child { + padding-bottom: 0; - &:where([data-condensed])::before { - height: var(--base-size-12); + &:where([data-condensed])::before { + height: var(--base-size-12); + } } } } -} -.TimelineItem { - position: relative; - display: flex; - padding: var(--base-size-16) 0; - margin-left: var(--base-size-16); + .TimelineItem { + position: relative; + display: flex; + padding: var(--base-size-16) 0; + margin-left: var(--base-size-16); - &::before { - position: absolute; - top: 0; - bottom: 0; - left: 0; - display: block; - width: 2px; - content: ''; - /* stylelint-disable-next-line primer/colors */ - background-color: var(--borderColor-muted); - } + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: block; + width: 2px; + content: ''; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-muted); + } - &:where([data-condensed]) { - padding-top: var(--base-size-4); - padding-bottom: 0; + &:where([data-condensed]) { + padding-top: var(--base-size-4); + padding-bottom: 0; - &:last-child { - padding-bottom: var(--base-size-16); - } + &:last-child { + padding-bottom: var(--base-size-16); + } - .TimelineBadge { - height: 16px; - margin-top: var(--base-size-8); - margin-bottom: var(--base-size-8); - color: var(--fgColor-muted); - background-color: var(--bgColor-default); - border: 0; + .TimelineBadge { + height: 16px; + margin-top: var(--base-size-8); + margin-bottom: var(--base-size-8); + color: var(--fgColor-muted); + background-color: var(--bgColor-default); + border: 0; + } } } -} -.TimelineBadgeWrapper { - position: relative; - z-index: 1; -} + .TimelineBadgeWrapper { + position: relative; + z-index: 1; + } -.TimelineBadge { - display: flex; - width: 32px; - height: 32px; - margin-right: var(--base-size-8); - /* stylelint-disable-next-line primer/spacing */ - margin-left: -15px; - flex-shrink: 0; - overflow: hidden; - color: var(--fgColor-muted); + .TimelineBadge { + display: flex; + width: 32px; + height: 32px; + margin-right: var(--base-size-8); + /* stylelint-disable-next-line primer/spacing */ + margin-left: -15px; + flex-shrink: 0; + overflow: hidden; + color: var(--fgColor-muted); - /* TODOl not quite sure if this is the correct migration for this line */ - background-color: var(--timelineBadge-bgColor); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--bgColor-default); - border-style: solid; - border-width: var(--borderWidth-thick); - border-radius: 50%; - align-items: center; - justify-content: center; -} + /* TODOl not quite sure if this is the correct migration for this line */ + background-color: var(--timelineBadge-bgColor); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--bgColor-default); + border-style: solid; + border-width: var(--borderWidth-thick); + border-radius: 50%; + align-items: center; + justify-content: center; + } -.TimelineBody { - min-width: 0; - max-width: 100%; - margin-top: var(--base-size-4); - font-size: var(--text-body-size-medium); - color: var(--fgColor-muted); - flex: auto; -} + .TimelineBody { + min-width: 0; + max-width: 100%; + margin-top: var(--base-size-4); + font-size: var(--text-body-size-medium); + color: var(--fgColor-muted); + flex: auto; + } -.TimelineBreak { - position: relative; - z-index: 1; - height: var(--base-size-24); - margin: 0; - margin-bottom: calc(-1 * var(--base-size-16)); - margin-left: 0; - background-color: var(--bgColor-default); - border: 0; - border-top: var(--borderWidth-thicker) solid var(--borderColor-default); + .TimelineBreak { + position: relative; + z-index: 1; + height: var(--base-size-24); + margin: 0; + margin-bottom: calc(-1 * var(--base-size-16)); + margin-left: 0; + background-color: var(--bgColor-default); + border: 0; + border-top: var(--borderWidth-thicker) solid var(--borderColor-default); - &:has(+ [data-condensed]) { - margin-bottom: calc(-1 * var(--base-size-12)); + &:has(+ [data-condensed]) { + margin-bottom: calc(-1 * var(--base-size-12)); + } } } diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css index 036043cca0c..0a0da6dd8c2 100644 --- a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css +++ b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css @@ -1,267 +1,269 @@ -.ToggleSwitch { - --toggleSwitch-transition-duration: 80ms; - --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1); +@layer primer.components.ToggleSwitch { + .ToggleSwitch { + --toggleSwitch-transition-duration: 80ms; + --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1); - display: inline-flex; - align-items: center; -} + display: inline-flex; + align-items: center; + } -.ToggleSwitch:where([data-status-label-position='start']) { - flex-direction: row; -} + .ToggleSwitch:where([data-status-label-position='start']) { + flex-direction: row; + } -.ToggleSwitch:where([data-status-label-position='end']) { - flex-direction: row-reverse; -} + .ToggleSwitch:where([data-status-label-position='end']) { + flex-direction: row-reverse; + } -.LoadingSpinner { - display: inline-flex; -} + .LoadingSpinner { + display: inline-flex; + } -.LoadingSpinner:where([data-status-label-position='end']) { - margin-right: 0; - margin-left: var(--base-size-8); -} + .LoadingSpinner:where([data-status-label-position='end']) { + margin-right: 0; + margin-left: var(--base-size-8); + } -.StatusText { - margin-left: var(--base-size-8); - margin-right: var(--base-size-8); - position: relative; - color: var(--fgColor-default); - font-size: var(--text-body-size-medium); - cursor: pointer; -} + .StatusText { + margin-left: var(--base-size-8); + margin-right: var(--base-size-8); + position: relative; + color: var(--fgColor-default); + font-size: var(--text-body-size-medium); + cursor: pointer; + } -.StatusText:where([data-disabled='true']) { - cursor: not-allowed; - color: var(--fgColor-muted); -} + .StatusText:where([data-disabled='true']) { + cursor: not-allowed; + color: var(--fgColor-muted); + } -.StatusText:where([data-size='small']) { - font-size: var(--text-body-size-small); -} + .StatusText:where([data-size='small']) { + font-size: var(--text-body-size-small); + } -.StatusText:where([data-size='medium']) { - font-size: var(--text-body-size-medium); -} + .StatusText:where([data-size='medium']) { + font-size: var(--text-body-size-medium); + } -.StatusTextItem { - display: block; - text-align: right; -} + .StatusTextItem { + display: block; + text-align: right; + } -.StatusTextItem:where([data-hidden='true']) { - visibility: hidden; - height: 0; -} + .StatusTextItem:where([data-hidden='true']) { + visibility: hidden; + height: 0; + } -.SwitchButton { - cursor: pointer; - user-select: none; - appearance: none; - text-decoration: none; - padding: 0; - transition-property: background-color, border-color; - transition-duration: var(--toggleSwitch-transition-duration); - transition-timing-function: var(--toggleSwitch-transition-easing); - border-radius: var(--borderRadius-medium); - border-style: solid; - border-width: var(--borderWidth-thin); - display: block; - position: relative; - overflow: hidden; - - /* Default medium size */ - height: 32px; - width: 64px; - - /* Focus styles */ - &:focus-visible { - outline: 2px solid var(--focus-outlineColor); - outline-offset: 3px; - } - - &:focus:not(:focus-visible) { - outline: solid 1px transparent; - } - - /* Touch device support */ - @media (pointer: coarse) { - &::before { - content: ''; - position: absolute; - left: 0; - right: 0; - transform: translateY(-50%); - top: 50%; - min-height: 44px; + .SwitchButton { + cursor: pointer; + user-select: none; + appearance: none; + text-decoration: none; + padding: 0; + transition-property: background-color, border-color; + transition-duration: var(--toggleSwitch-transition-duration); + transition-timing-function: var(--toggleSwitch-transition-easing); + border-radius: var(--borderRadius-medium); + border-style: solid; + border-width: var(--borderWidth-thin); + display: block; + position: relative; + overflow: hidden; + + /* Default medium size */ + height: 32px; + width: 64px; + + /* Focus styles */ + &:focus-visible { + outline: 2px solid var(--focus-outlineColor); + outline-offset: 3px; } - } - /* Reduced motion support */ - @media (prefers-reduced-motion) { - transition: none; + &:focus:not(:focus-visible) { + outline: solid 1px transparent; + } - * { + /* Touch device support */ + @media (pointer: coarse) { + &::before { + content: ''; + position: absolute; + left: 0; + right: 0; + transform: translateY(-50%); + top: 50%; + min-height: 44px; + } + } + + /* Reduced motion support */ + @media (prefers-reduced-motion) { transition: none; + + * { + transition: none; + } } } -} -/* Size variants */ -.SwitchButton:where([data-size='small']) { - height: 24px; - width: 48px; -} + /* Size variants */ + .SwitchButton:where([data-size='small']) { + height: 24px; + width: 48px; + } -/* State variants */ -.SwitchButton:where([data-disabled='true']) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f)); - border-color: transparent; - cursor: not-allowed; - transition-property: none; + /* State variants */ + .SwitchButton:where([data-disabled='true']) { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f)); + border-color: transparent; + cursor: not-allowed; + transition-property: none; - @media (forced-colors: active) { - border-color: GrayText; + @media (forced-colors: active) { + border-color: GrayText; + } } -} -.SwitchButton:where([data-checked='false']:not([data-disabled='true'])) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2)); - border-color: var(--controlTrack-borderColor-rest); -} - -.SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover), -.SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsl(210deg, 24%, 90%, 1))); -} + .SwitchButton:where([data-checked='false']:not([data-disabled='true'])) { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2)); + border-color: var(--controlTrack-borderColor-rest); + } -.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active), -.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsl(210deg, 24%, 88%, 1))); -} + .SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover), + .SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsl(210deg, 24%, 90%, 1))); + } -.SwitchButton:where([data-checked='true']:not([data-disabled='true'])) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da)); - border-color: var(--control-checked-borderColor-rest, transparent); -} + .SwitchButton:where([data-checked='false']:not([data-disabled='true']):active), + .SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsl(210deg, 24%, 88%, 1))); + } -.SwitchButton:where([data-checked='true']:not([data-disabled='true']):hover), -.SwitchButton:where([data-checked='true']:not([data-disabled='true']):focus-visible) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca)); -} + .SwitchButton:where([data-checked='true']:not([data-disabled='true'])) { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da)); + border-color: var(--control-checked-borderColor-rest, transparent); + } -.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active), -.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba)); -} + .SwitchButton:where([data-checked='true']:not([data-disabled='true']):hover), + .SwitchButton:where([data-checked='true']:not([data-disabled='true']):focus-visible) { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca)); + } -.SwitchButtonContent { - display: flex; - align-items: center; - width: 100%; - height: 100%; - overflow: hidden; -} + .SwitchButton:where([data-checked='true']:not([data-disabled='true']):active), + .SwitchButton:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba)); + } -.IconContainer { - flex-grow: 1; - flex-shrink: 0; - flex-basis: 50%; - /* stylelint-disable-next-line primer/typography */ - line-height: 0; - transition-property: transform; - transition-duration: var(--toggleSwitch-transition-duration); - transition-timing-function: var(--toggleSwitch-transition-easing); + .SwitchButtonContent { + display: flex; + align-items: center; + width: 100%; + height: 100%; + overflow: hidden; + } - @media (prefers-reduced-motion) { - transition: none; + .IconContainer { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 50%; + /* stylelint-disable-next-line primer/typography */ + line-height: 0; + transition-property: transform; + transition-duration: var(--toggleSwitch-transition-duration); + transition-timing-function: var(--toggleSwitch-transition-easing); + + @media (prefers-reduced-motion) { + transition: none; + } } -} -.LineIconContainer { - /* stylelint-disable-next-line primer/colors */ - color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff)); -} + .LineIconContainer { + /* stylelint-disable-next-line primer/colors */ + color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff)); + } -.LineIconContainer:where([data-disabled='true']) { - /* stylelint-disable-next-line primer/colors */ - color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff)); -} + .LineIconContainer:where([data-disabled='true']) { + /* stylelint-disable-next-line primer/colors */ + color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff)); + } -.LineIconContainer:where([data-checked='true']) { - transform: translateX(0); -} + .LineIconContainer:where([data-checked='true']) { + transform: translateX(0); + } -.LineIconContainer:where([data-checked='false']) { - transform: translateX(-100%); -} + .LineIconContainer:where([data-checked='false']) { + transform: translateX(-100%); + } -.CircleIconContainer { - /* stylelint-disable-next-line primer/colors */ - color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76)); -} + .CircleIconContainer { + /* stylelint-disable-next-line primer/colors */ + color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76)); + } -.CircleIconContainer:where([data-disabled='true']) { - /* stylelint-disable-next-line primer/colors */ - color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff)); -} + .CircleIconContainer:where([data-disabled='true']) { + /* stylelint-disable-next-line primer/colors */ + color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff)); + } -.CircleIconContainer:where([data-checked='true']) { - transform: translateX(100%); -} + .CircleIconContainer:where([data-checked='true']) { + transform: translateX(100%); + } -.CircleIconContainer:where([data-checked='false']) { - transform: translateX(0); -} + .CircleIconContainer:where([data-checked='false']) { + transform: translateX(0); + } -.ToggleKnob { - /* stylelint-disable-next-line primer/colors */ - background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff)); - border-width: var(--borderWidth-thin); - border-style: solid; - /* stylelint-disable-next-line primer/colors */ - border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99)); - /* Use calc to account for 1px border around the control */ - /* stylelint-disable-next-line primer/borders */ - border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thin)); - width: 50%; - position: absolute; - top: 0; - bottom: 0; - transition-property: transform; - transition-duration: var(--toggleSwitch-transition-duration); - transition-timing-function: var(--toggleSwitch-transition-easing); - z-index: 1; - - @media (prefers-reduced-motion) { - transition: none; + .ToggleKnob { + /* stylelint-disable-next-line primer/colors */ + background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff)); + border-width: var(--borderWidth-thin); + border-style: solid; + /* stylelint-disable-next-line primer/colors */ + border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99)); + /* Use calc to account for 1px border around the control */ + /* stylelint-disable-next-line primer/borders */ + border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thin)); + width: 50%; + position: absolute; + top: 0; + bottom: 0; + transition-property: transform; + transition-duration: var(--toggleSwitch-transition-duration); + transition-timing-function: var(--toggleSwitch-transition-easing); + z-index: 1; + + @media (prefers-reduced-motion) { + transition: none; + } } -} -.ToggleKnob:where([data-checked='false']) { - transform: translateX(0); -} + .ToggleKnob:where([data-checked='false']) { + transform: translateX(0); + } -.ToggleKnob:where([data-checked='true']) { - transform: translateX(100%); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da)); -} + .ToggleKnob:where([data-checked='true']) { + transform: translateX(100%); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da)); + } -.ToggleKnob:where([data-disabled='true']) { - background-color: var(--controlKnob-bgColor-disabled); - /* stylelint-disable-next-line primer/colors */ - border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f)); + .ToggleKnob:where([data-disabled='true']) { + background-color: var(--controlKnob-bgColor-disabled); + /* stylelint-disable-next-line primer/colors */ + border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f)); - @media (forced-colors: active) { - color: GrayText; + @media (forced-colors: active) { + color: GrayText; + } } } diff --git a/packages/react/src/ToggleSwitch/ToggleSwitchStoryWrapper.module.css b/packages/react/src/ToggleSwitch/ToggleSwitchStoryWrapper.module.css index fd883a7b5c0..76205a2de56 100644 --- a/packages/react/src/ToggleSwitch/ToggleSwitchStoryWrapper.module.css +++ b/packages/react/src/ToggleSwitch/ToggleSwitchStoryWrapper.module.css @@ -1,7 +1,9 @@ -.StoryWrapper { - display: grid; - grid-template-columns: max-content auto; - max-width: 20rem; - align-items: center; - justify-content: space-between; +@layer primer.components.ToggleSwitchStoryWrapper { + .StoryWrapper { + display: grid; + grid-template-columns: max-content auto; + max-width: 20rem; + align-items: center; + justify-content: space-between; + } } diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css index e8f45ab2f76..eed18475f26 100644 --- a/packages/react/src/Token/IssueLabelToken.module.css +++ b/packages/react/src/Token/IssueLabelToken.module.css @@ -1,136 +1,138 @@ -/* stylelint-disable primer/colors */ -@define-mixin lightThemeIssueLabel { - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1)); - - background: rgb(var(--label-r), var(--label-g), var(--label-b)); - color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)); - border-color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha)); - - /* Selected state */ - &:where([data-selected='true']) { - background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%)); +@layer primer.components.IssueLabelToken { + /* stylelint-disable primer/colors */ + @define-mixin lightThemeIssueLabel { + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1)); + + background: rgb(var(--label-r), var(--label-g), var(--label-b)); + color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)); + border-color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha)); + + /* Selected state */ + &:where([data-selected='true']) { + background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%)); + } + + &:where([data-selected='true'])::after { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b)); + } + + /* Interactive hover states */ + &:where([data-cursor-is-interactive='true']:hover) { + background-image: linear-gradient(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.15)), + linear-gradient( + rgb(var(--label-r), var(--label-g), var(--label-b)), + rgb(var(--label-r), var(--label-g), var(--label-b)) + ); + box-shadow: var(--shadow-resting-medium); + } } - &:where([data-selected='true'])::after { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b)); + @define-mixin darkThemeIssueLabel { + --lightness-threshold: 0.6; + --background-alpha: 0.18; + --border-alpha: 0.3; + --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch)); + + background: rgb(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)); + color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)); + border-color: hsl( + var(--label-h), + calc(var(--label-s) * 1%), + calc((var(--label-l) + var(--lighten-by)) * 1%), + var(--border-alpha) + ); + + /* Selected state */ + &:where([data-selected='true'])::after { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 2px + hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)); + } + + /* Interactive hover states */ + &:where([data-cursor-is-interactive='true']:hover) { + background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3); + box-shadow: var(--shadow-resting-medium); + } } - /* Interactive hover states */ - &:where([data-cursor-is-interactive='true']:hover) { - background-image: linear-gradient(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.15)), - linear-gradient( - rgb(var(--label-r), var(--label-g), var(--label-b)), - rgb(var(--label-r), var(--label-g), var(--label-b)) - ); - box-shadow: var(--shadow-resting-medium); + .IssueLabel { + /* Color variables - dynamically set via inline CSS custom properties */ + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc( + ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 + ); + --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1)); + + position: relative; + border-width: var(--borderWidth-thin); + border-style: solid; } -} -@define-mixin darkThemeIssueLabel { - --lightness-threshold: 0.6; - --background-alpha: 0.18; - --border-alpha: 0.3; - --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch)); - - background: rgb(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)); - color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)); - border-color: hsl( - var(--label-h), - calc(var(--label-s) * 1%), - calc((var(--label-l) + var(--lighten-by)) * 1%), - var(--border-alpha) - ); - - /* Selected state */ - &:where([data-selected='true'])::after { - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 2px - hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)); - } + @media (prefers-color-scheme: light) { + [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel { + @mixin lightThemeIssueLabel; + } - /* Interactive hover states */ - &:where([data-cursor-is-interactive='true']:hover) { - background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3); - box-shadow: var(--shadow-resting-medium); + [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel { + @mixin darkThemeIssueLabel; + } } -} -.IssueLabel { - /* Color variables - dynamically set via inline CSS custom properties */ - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc( - ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 - ); - --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1)); - - position: relative; - border-width: var(--borderWidth-thin); - border-style: solid; -} + @media (prefers-color-scheme: dark) { + [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel { + @mixin lightThemeIssueLabel; + } -@media (prefers-color-scheme: light) { - [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel { - @mixin lightThemeIssueLabel; + [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel { + @mixin darkThemeIssueLabel; + } } - [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel { - @mixin darkThemeIssueLabel; - } -} - -@media (prefers-color-scheme: dark) { - [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel { + /* Light mode styles */ + [data-color-mode='light'] .IssueLabel { @mixin lightThemeIssueLabel; } - [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel { + /* Dark mode styles */ + [data-color-mode='dark'] .IssueLabel { @mixin darkThemeIssueLabel; } -} - -/* Light mode styles */ -[data-color-mode='light'] .IssueLabel { - @mixin lightThemeIssueLabel; -} -/* Dark mode styles */ -[data-color-mode='dark'] .IssueLabel { - @mixin darkThemeIssueLabel; -} - -/* Selected state */ + /* Selected state */ -.IssueLabel:where([data-selected='true']) { - outline: none; -} + .IssueLabel:where([data-selected='true']) { + outline: none; + } -.IssueLabel:where([data-selected='true'])::after { - content: ''; - position: absolute; - z-index: 1; - top: calc(var(--base-size-2) * -1); - right: calc(var(--base-size-2) * -1); - bottom: calc(var(--base-size-2) * -1); - left: calc(var(--base-size-2) * -1); - display: block; - pointer-events: none; - border-radius: var(--borderRadius-full); -} + .IssueLabel:where([data-selected='true'])::after { + content: ''; + position: absolute; + z-index: 1; + top: calc(var(--base-size-2) * -1); + right: calc(var(--base-size-2) * -1); + bottom: calc(var(--base-size-2) * -1); + left: calc(var(--base-size-2) * -1); + display: block; + pointer-events: none; + border-radius: var(--borderRadius-full); + } -/* Remove button styling */ -.IssueLabel:where([data-has-remove-button='true']) { - padding-right: 0; -} + /* Remove button styling */ + .IssueLabel:where([data-has-remove-button='true']) { + padding-right: 0; + } -.RemoveButton:where([data-has-multiple-action-targets='true']) { - position: relative; - z-index: 1; + .RemoveButton:where([data-has-multiple-action-targets='true']) { + position: relative; + z-index: 1; + } } diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css index 1e362cd3ca5..6e3e270c530 100644 --- a/packages/react/src/Token/Token.module.css +++ b/packages/react/src/Token/Token.module.css @@ -1,34 +1,36 @@ -.Token { - max-width: 100%; - color: var(--fgColor-muted); - background-color: var(--bgColor-neutral-muted); - border-color: var(--borderColor-muted); - border-style: solid; -} +@layer primer.components.Token { + .Token { + max-width: 100%; + color: var(--fgColor-muted); + background-color: var(--bgColor-neutral-muted); + border-color: var(--borderColor-muted); + border-style: solid; + } -.Token:where([data-interactive='true']):hover { - color: var(--fgColor-default); - background-color: var(--bgColor-neutral-muted); - box-shadow: var(--shadow-resting-medium); -} + .Token:where([data-interactive='true']):hover { + color: var(--fgColor-default); + background-color: var(--bgColor-neutral-muted); + box-shadow: var(--shadow-resting-medium); + } -.Token:where([data-is-selected='true']) { - color: var(--fgColor-default); - border-style: solid; - border-color: var(--borderColor-emphasis); -} + .Token:where([data-is-selected='true']) { + color: var(--fgColor-default); + border-style: solid; + border-color: var(--borderColor-emphasis); + } -.Token[data-is-remove-btn='true'] { - padding-right: 0; -} + .Token[data-is-remove-btn='true'] { + padding-right: 0; + } -.LeadingVisualContainer { - margin-right: var(--base-size-4); - /* stylelint-disable-next-line primer/typography */ - line-height: 0; - flex-shrink: 0; -} + .LeadingVisualContainer { + margin-right: var(--base-size-4); + /* stylelint-disable-next-line primer/typography */ + line-height: 0; + flex-shrink: 0; + } -.LargeLeadingVisual { - margin-right: var(--base-size-6); + .LargeLeadingVisual { + margin-right: var(--base-size-6); + } } diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css index ad303de6e5e..9fb18689df6 100644 --- a/packages/react/src/Token/TokenBase.module.css +++ b/packages/react/src/Token/TokenBase.module.css @@ -1,54 +1,56 @@ -.TokenBase { - position: relative; - display: inline-flex; - font-family: inherit; - font-weight: var(--base-text-weight-semibold); - text-decoration: none; - white-space: nowrap; - border-radius: var(--borderRadius-full); - align-items: center; - /* stylelint-disable-next-line primer/typography */ - line-height: 1; -} +@layer primer.components.TokenBase { + .TokenBase { + position: relative; + display: inline-flex; + font-family: inherit; + font-weight: var(--base-text-weight-semibold); + text-decoration: none; + white-space: nowrap; + border-radius: var(--borderRadius-full); + align-items: center; + /* stylelint-disable-next-line primer/typography */ + line-height: 1; + } -.TokenBase:where([data-cursor-is-interactive='true']) { - cursor: pointer; -} + .TokenBase:where([data-cursor-is-interactive='true']) { + cursor: pointer; + } -.TokenBase:where([data-cursor-is-interactive='false']) { - cursor: auto; -} + .TokenBase:where([data-cursor-is-interactive='false']) { + cursor: auto; + } -.TokenBase:where([data-size='small']) { - width: auto; - height: var(--base-size-16); - padding-right: var(--base-size-4); - padding-left: var(--base-size-4); - font-size: var(--text-body-size-small); -} + .TokenBase:where([data-size='small']) { + width: auto; + height: var(--base-size-16); + padding-right: var(--base-size-4); + padding-left: var(--base-size-4); + font-size: var(--text-body-size-small); + } -.TokenBase:where([data-size='medium']) { - width: auto; - height: var(--base-size-20); - padding-right: var(--base-size-6); - padding-left: var(--base-size-6); - font-size: var(--text-body-size-small); -} + .TokenBase:where([data-size='medium']) { + width: auto; + height: var(--base-size-20); + padding-right: var(--base-size-6); + padding-left: var(--base-size-6); + font-size: var(--text-body-size-small); + } -.TokenBase[data-size='large'] { - width: auto; - height: var(--base-size-24); - padding-right: var(--base-size-8); - padding-left: var(--base-size-8); - font-size: var(--text-body-size-medium); -} + .TokenBase[data-size='large'] { + width: auto; + height: var(--base-size-24); + padding-right: var(--base-size-8); + padding-left: var(--base-size-8); + font-size: var(--text-body-size-medium); + } -.TokenBase[data-size='xlarge'] { - width: auto; - height: var(--base-size-32); - padding-top: 0; - padding-right: var(--base-size-12); - padding-bottom: 0; - padding-left: var(--base-size-12); - font-size: var(--text-body-size-medium); + .TokenBase[data-size='xlarge'] { + width: auto; + height: var(--base-size-32); + padding-top: 0; + padding-right: var(--base-size-12); + padding-bottom: 0; + padding-left: var(--base-size-12); + font-size: var(--text-body-size-medium); + } } diff --git a/packages/react/src/Token/_RemoveTokenButton.module.css b/packages/react/src/Token/_RemoveTokenButton.module.css index 4424094c3e2..d7485a7bf47 100644 --- a/packages/react/src/Token/_RemoveTokenButton.module.css +++ b/packages/react/src/Token/_RemoveTokenButton.module.css @@ -1,48 +1,50 @@ -.TokenButton { - display: inline-flex; - padding: 0; - margin-left: var(--base-size-4); - font-family: inherit; - color: currentColor; - text-decoration: none; - cursor: pointer; - user-select: none; - background-color: transparent; - border: 0; - border-radius: var(--borderRadius-full); - justify-content: center; - align-items: center; - appearance: none; - align-self: baseline; -} +@layer primer.components.RemoveTokenButton { + .TokenButton { + display: inline-flex; + padding: 0; + margin-left: var(--base-size-4); + font-family: inherit; + color: currentColor; + text-decoration: none; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 0; + border-radius: var(--borderRadius-full); + justify-content: center; + align-items: center; + appearance: none; + align-self: baseline; + } -.TokenButton[data-size='small'] { - width: var(--base-size-16); - height: var(--base-size-16); -} + .TokenButton[data-size='small'] { + width: var(--base-size-16); + height: var(--base-size-16); + } -.TokenButton[data-size='medium'] { - width: var(--base-size-20); - height: var(--base-size-20); -} + .TokenButton[data-size='medium'] { + width: var(--base-size-20); + height: var(--base-size-20); + } -.TokenButton[data-size='large'] { - width: var(--base-size-24); - height: var(--base-size-24); - margin-left: var(--base-size-6); -} + .TokenButton[data-size='large'] { + width: var(--base-size-24); + height: var(--base-size-24); + margin-left: var(--base-size-6); + } -.TokenButton[data-size='xlarge'] { - width: var(--base-size-32); - height: var(--base-size-32); - margin-left: var(--base-size-6); -} + .TokenButton[data-size='xlarge'] { + width: var(--base-size-32); + height: var(--base-size-32); + margin-left: var(--base-size-6); + } -.TokenButton:hover, -.TokenButton:focus { - background-color: var(--control-transparent-bgColor-hover); -} + .TokenButton:hover, + .TokenButton:focus { + background-color: var(--control-transparent-bgColor-hover); + } -.TokenButton:active { - background-color: var(--control-transparent-bgColor-active); + .TokenButton:active { + background-color: var(--control-transparent-bgColor-active); + } } diff --git a/packages/react/src/Token/_TokenTextContainer.module.css b/packages/react/src/Token/_TokenTextContainer.module.css index b197cccb919..975ca960809 100644 --- a/packages/react/src/Token/_TokenTextContainer.module.css +++ b/packages/react/src/Token/_TokenTextContainer.module.css @@ -1,46 +1,48 @@ -.TokenTextContainer { - width: auto; - min-width: 0; - padding: 0; - margin: 0; - overflow: hidden; - font: inherit; - /* stylelint-disable-next-line primer/typography */ - line-height: normal; - color: inherit; +@layer primer.components.TokenTextContainer { + .TokenTextContainer { + width: auto; + min-width: 0; + padding: 0; + margin: 0; + overflow: hidden; + font: inherit; + /* stylelint-disable-next-line primer/typography */ + line-height: normal; + color: inherit; - /* reset anchor styles */ - color: currentColor; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; + /* reset anchor styles */ + color: currentColor; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; - /* reset button styles, make the cursor a pointer, and add line-height */ - background: transparent; - border: none; - flex-grow: 1; - -webkit-font-smoothing: inherit; - -moz-osx-font-smoothing: inherit; - appearance: none; -} + /* reset button styles, make the cursor a pointer, and add line-height */ + background: transparent; + border: none; + flex-grow: 1; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + appearance: none; + } -/* Position psuedo-element above text content, but below the + /* Position psuedo-element above text content, but below the remove button. This ensures the or