diff --git a/.changeset/late-hotels-turn.md b/.changeset/late-hotels-turn.md new file mode 100644 index 00000000000..e764a6e8e0d --- /dev/null +++ b/.changeset/late-hotels-turn.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Remove `--primer` prefix from CSS var diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index e50086d2602..0e4fbc7614d 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -42,7 +42,7 @@ export type RadioProps = { const StyledRadio = styled.input` ${sharedCheckboxAndRadioStyles}; - border-radius: var(--primer-borderRadius-full, 100vh); + 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 */ &:checked { diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap index 0f4c49eb9a0..e48aa53ef97 100644 --- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap +++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap @@ -83,7 +83,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } diff --git a/src/__tests__/__snapshots__/Radio.test.tsx.snap b/src/__tests__/__snapshots__/Radio.test.tsx.snap index 334355c49b5..caad863c07d 100644 --- a/src/__tests__/__snapshots__/Radio.test.tsx.snap +++ b/src/__tests__/__snapshots__/Radio.test.tsx.snap @@ -16,7 +16,7 @@ exports[`Radio renders consistently 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap index 2f3b4b14b2d..910aef774dd 100644 --- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap +++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap @@ -83,7 +83,7 @@ exports[`RadioGroup renders consistently 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap index d57218fc2c2..2c066511224 100644 --- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap @@ -66,7 +66,7 @@ exports[`ChoiceFieldset renders a disabled list 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -288,7 +288,7 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -531,7 +531,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -1132,7 +1132,7 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -1360,7 +1360,7 @@ exports[`ChoiceFieldset renders default 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -1575,7 +1575,7 @@ exports[`ChoiceFieldset renders with a custom name and id passed 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -1794,7 +1794,7 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -2050,7 +2050,7 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); } @@ -2344,7 +2344,7 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = ` place-content: center; position: relative; width: var(--base-size-16,16px); - border-radius: var(--primer-borderRadius-full,100vh); + border-radius: var(--borderRadius-full,100vh); -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); }