From 9dfdcb32896e8b6c2813ba1d004d66dc1c3bb9c7 Mon Sep 17 00:00:00 2001 From: Sara Hill Date: Mon, 6 Nov 2023 16:00:40 -0800 Subject: [PATCH] Updated button base color tokens --- .changeset/thin-bottles-dream.md | 5 +++++ polaris-react/src/styles/shared/_buttons.scss | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/thin-bottles-dream.md diff --git a/.changeset/thin-bottles-dream.md b/.changeset/thin-bottles-dream.md new file mode 100644 index 00000000000..c7ccec6aa9b --- /dev/null +++ b/.changeset/thin-bottles-dream.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Updated `Button` base state colors to use `fill` tokens diff --git a/polaris-react/src/styles/shared/_buttons.scss b/polaris-react/src/styles/shared/_buttons.scss index 6873d72d0e8..daf379eac46 100644 --- a/polaris-react/src/styles/shared/_buttons.scss +++ b/polaris-react/src/styles/shared/_buttons.scss @@ -13,7 +13,7 @@ min-width: 28px; margin: 0; padding: var(--p-space-150) var(--p-space-300); - background: var(--p-color-bg-surface); + background: var(--p-color-bg-fill); box-shadow: var(--p-shadow-200); border-radius: var(--p-border-radius-200); color: var(--p-color-text); @@ -30,7 +30,7 @@ } &:hover { - background: var(--p-color-bg-surface-hover); + background: var(--p-color-bg-fill-hover); outline: var(--p-border-width-025) solid transparent; } @@ -50,7 +50,7 @@ } &.pressed { - background: var(--p-color-bg-fill-tertiary-active); + background: var(--p-color-bg-fill-selected); box-shadow: var(--p-shadow-inset-200); color: var(--p-color-text); border-color: var(--p-color-border-inverse);