diff --git a/.changeset/moody-scissors-greet.md b/.changeset/moody-scissors-greet.md new file mode 100644 index 00000000000..8e5a21cc34e --- /dev/null +++ b/.changeset/moody-scissors-greet.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Updated `Checkbox` icon to use tokens vs hard coded value diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss index 3a99026709d..0890537d272 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.scss +++ b/polaris-react/src/components/Checkbox/Checkbox.scss @@ -62,6 +62,11 @@ transform var(--p-motion-duration-150) var(--p-motion-ease-out); opacity: 1; + /* stylelint-disable-next-line selector-max-combinators -- need to target svg from icons package */ + svg { + fill: var(--p-color-text-brand-on-bg-fill); + } + &.animated { transition: initial; } @@ -86,7 +91,7 @@ // stylelint-disable-next-line selector-max-combinators -- target disabled icon color ~ .Icon svg { - fill: var(--p-color-checkbox-icon-disabled); + color: var(--p-color-checkbox-icon-disabled); } } @@ -141,7 +146,7 @@ } svg { - fill: var(--p-color-text-brand-on-bg-fill); + color: var(--p-color-text-brand-on-bg-fill); position: absolute; top: 0; @@ -158,7 +163,7 @@ // stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators, selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY .error { .Icon svg { - fill: var(--p-color-text-critical-on-bg-fill); + color: var(--p-color-text-critical-on-bg-fill); } .Input { diff --git a/polaris-react/src/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/Checkbox/Checkbox.tsx index d9274c99402..7d7a0c90fd2 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.tsx +++ b/polaris-react/src/components/Checkbox/Checkbox.tsx @@ -141,7 +141,7 @@ export const Checkbox = forwardRef( transform="translate(2 2.980376)" opacity="0" fill="none" - stroke="#fff" + stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"