Remove --primer prefix from CSS var (#3209)

* update new name * Create late-hotels-turn.md * snaps
primer · Apr 21, 2023 · a627953 · a627953
1 parent ee33b02
commit a627953
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 13 deletions.
diff --git a/.changeset/late-hotels-turn.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
 }