diff --git a/.changeset/angry-cycles-smell.md b/.changeset/angry-cycles-smell.md new file mode 100644 index 0000000000..7e518f7a8d --- /dev/null +++ b/.changeset/angry-cycles-smell.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Use legacy shadow for all floating shadows diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 6450767ebf..e12aeda885 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -90,7 +90,7 @@ $SelectMenu-max-height: 480px !default; font-size: $font-size-small; border-color: var(--borderColor-default, var(--color-border-default)); border-radius: $border-radius; - box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow)); + box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow)); animation-name: SelectMenu-modal-animation--sm; } } diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index ddb22a752a..7bec315b26 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -6,7 +6,7 @@ color: var(--fgColor-default, var(--color-fg-default)); background-color: var(--bgColor-default, var(--color-canvas-default)); border-radius: $border-radius; - box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-small, var(--color-overlay-shadow)); + box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow)); @include breakpoint(sm) { width: max-content; @@ -53,7 +53,7 @@ .Toast--loading { color: var(--fgColor-default, var(--color-fg-default)); - box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-small, var(--color-overlay-shadow)); + box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow)); .Toast-icon { background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis)); @@ -62,7 +62,7 @@ .Toast--error { color: var(--fgColor-default, var(--color-fg-default)); - box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-small, var(--color-overlay-shadow)); + box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow)); .Toast-icon { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)); @@ -71,7 +71,7 @@ .Toast--warning { color: var(--fgColor-default, var(--color-fg-default)); - box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-small, var(--color-overlay-shadow)); + box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow)); .Toast-icon { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)); @@ -80,7 +80,7 @@ .Toast--success { color: var(--fgColor-default, var(--color-fg-default)); - box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-small, var(--color-overlay-shadow)); + box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow)); .Toast-icon { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));