@primer/primitives 7.15.0 → 7.15.1

package/tokens-next-private/docs/functional/themes/light-high-contrast.json

@@ -4731,6 +4731,64 @@
     "attributes": {},
     "path": ["button", "danger", "shadow", "selected"]
   },
+  "button-inactive-fgColor-rest": {
+    "value": "#0e1116",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-inactive-fgColor-rest",
+    "attributes": {},
+    "path": ["button", "inactive", "fgColor", "rest"]
+  },
+  "button-inactive-bgColor-rest": {
+    "value": "#ced5dc",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.gray.2}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "button-inactive-bgColor-rest",
+    "attributes": {},
+    "path": ["button", "inactive", "bgColor", "rest"]
+  },
   "buttonCounter-default-bgColor-rest": {
     "value": "#66707b33",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/light-tritanopia.json

@@ -4711,6 +4711,64 @@
     "attributes": {},
     "path": ["button", "danger", "shadow", "selected"]
   },
+  "button-inactive-fgColor-rest": {
+    "value": "#636c76",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-inactive-fgColor-rest",
+    "attributes": {},
+    "path": ["button", "inactive", "fgColor", "rest"]
+  },
+  "button-inactive-bgColor-rest": {
+    "value": "#d0d7de",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.gray.2}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "button-inactive-bgColor-rest",
+    "attributes": {},
+    "path": ["button", "inactive", "bgColor", "rest"]
+  },
   "buttonCounter-default-bgColor-rest": {
     "value": "#afb8c133",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/light.json

@@ -4711,6 +4711,64 @@
     "attributes": {},
     "path": ["button", "danger", "shadow", "selected"]
   },
+  "button-inactive-fgColor-rest": {
+    "value": "#636c76",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-inactive-fgColor-rest",
+    "attributes": {},
+    "path": ["button", "inactive", "fgColor", "rest"]
+  },
+  "button-inactive-bgColor-rest": {
+    "value": "#d0d7de",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.gray.2}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "button-inactive-bgColor-rest",
+    "attributes": {},
+    "path": ["button", "inactive", "bgColor", "rest"]
+  },
   "buttonCounter-default-bgColor-rest": {
     "value": "#afb8c133",
     "$type": "color",

package/tokens-next-private/figma/themes/dark.json

@@ -2154,6 +2154,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/inactive/bgColor/rest",
+    "value": {
+      "r": 0.12941176470588237,
+      "g": 0.14901960784313725,
+      "b": 0.17647058823529413,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/inactive/bgColor/rest",
+    "reference": "base/color/dark/base/color/gray/7",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component (internal)",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/danger/borderColor/hover",
     "value": {
@@ -3624,6 +3640,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/inactive/fgColor/rest",
+    "value": {
+      "r": 0.49019607843137253,
+      "g": 0.5215686274509804,
+      "b": 0.5647058823529412,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/inactive/fgColor/rest",
+    "reference": "mode/fgColor/muted",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component (internal)",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/danger/borderColor/active",
     "value": {

package/tokens-next-private/figma/themes/light.json

@@ -2095,6 +2095,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/inactive/bgColor/rest",
+    "value": {
+      "r": 0.8156862745098039,
+      "g": 0.8431372549019608,
+      "b": 0.8705882352941177,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/inactive/bgColor/rest",
+    "reference": "base/color/light/base/color/gray/2",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component (internal)",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/danger/borderColor/hover",
     "value": {
@@ -3513,6 +3529,22 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/inactive/fgColor/rest",
+    "value": {
+      "r": 0.38823529411764707,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/inactive/fgColor/rest",
+    "reference": "mode/fgColor/muted",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component (internal)",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/danger/borderColor/active",
     "value": {

package/tokens-next-private/scss/functional/themes/dark-colorblind.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #30363d;
 $button-danger-borderColor-hover: #f0f6fc1a;
 $button-danger-borderColor-active: #f0f6fc1a;
 $button-danger-shadow-selected: 0px 0px 0px 0px #000000;
+$button-inactive-fgColor-rest: #7d8590;
+$button-inactive-bgColor-rest: #21262d;
 $buttonCounter-default-bgColor-rest: #30363d;
 $buttonCounter-invisible-bgColor-rest: #30363d;
 $buttonCounter-primary-bgColor-rest: #04260f33;

package/tokens-next-private/scss/functional/themes/dark-dimmed.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #444c56;
 $button-danger-borderColor-hover: #cdd9e51a;
 $button-danger-borderColor-active: #cdd9e51a;
 $button-danger-shadow-selected: 0px 0px 0px 0px #000000;
+$button-inactive-fgColor-rest: #6d7986;
+$button-inactive-bgColor-rest: #373e47;
 $buttonCounter-default-bgColor-rest: #444c56;
 $buttonCounter-invisible-bgColor-rest: #444c56;
 $buttonCounter-primary-bgColor-rest: #11341733;

package/tokens-next-private/scss/functional/themes/dark-high-contrast.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #7a828e;
 $button-danger-borderColor-hover: #ffffff1a;
 $button-danger-borderColor-active: #ffffff1a;
 $button-danger-shadow-selected: 0px 0px 0px 0px #000000;
+$button-inactive-fgColor-rest: #f0f3f6;
+$button-inactive-bgColor-rest: #272b33;
 $buttonCounter-default-bgColor-rest: #525964;
 $buttonCounter-invisible-bgColor-rest: #525964;
 $buttonCounter-primary-bgColor-rest: #01040926;

package/tokens-next-private/scss/functional/themes/dark-tritanopia.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #30363d;
 $button-danger-borderColor-hover: #f0f6fc1a;
 $button-danger-borderColor-active: #f0f6fc1a;
 $button-danger-shadow-selected: 0px 0px 0px 0px #000000;
+$button-inactive-fgColor-rest: #7d8590;
+$button-inactive-bgColor-rest: #21262d;
 $buttonCounter-default-bgColor-rest: #30363d;
 $buttonCounter-invisible-bgColor-rest: #30363d;
 $buttonCounter-primary-bgColor-rest: #04260f33;

package/tokens-next-private/scss/functional/themes/dark.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #30363d;
 $button-danger-borderColor-hover: #f0f6fc1a;
 $button-danger-borderColor-active: #f0f6fc1a;
 $button-danger-shadow-selected: 0px 0px 0px 0px #000000;
+$button-inactive-fgColor-rest: #7d8590;
+$button-inactive-bgColor-rest: #21262d;
 $buttonCounter-default-bgColor-rest: #30363d;
 $buttonCounter-invisible-bgColor-rest: #30363d;
 $buttonCounter-primary-bgColor-rest: #04260f33;

package/tokens-next-private/scss/functional/themes/light-colorblind.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #d0d7de;
 $button-danger-borderColor-hover: #1f232826;
 $button-danger-borderColor-active: #1f232826;
 $button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
+$button-inactive-fgColor-rest: #636c76;
+$button-inactive-bgColor-rest: #d0d7de;
 $buttonCounter-default-bgColor-rest: #afb8c133;
 $buttonCounter-invisible-bgColor-rest: #afb8c133;
 $buttonCounter-primary-bgColor-rest: #002d1133;

package/tokens-next-private/scss/functional/themes/light-high-contrast.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #20252c;
 $button-danger-borderColor-hover: #01040926;
 $button-danger-borderColor-active: #01040926;
 $button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
+$button-inactive-fgColor-rest: #0e1116;
+$button-inactive-bgColor-rest: #ced5dc;
 $buttonCounter-default-bgColor-rest: #66707b33;
 $buttonCounter-invisible-bgColor-rest: #66707b33;
 $buttonCounter-primary-bgColor-rest: #00230b33;

package/tokens-next-private/scss/functional/themes/light-tritanopia.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #d0d7de;
 $button-danger-borderColor-hover: #1f232826;
 $button-danger-borderColor-active: #1f232826;
 $button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
+$button-inactive-fgColor-rest: #636c76;
+$button-inactive-bgColor-rest: #d0d7de;
 $buttonCounter-default-bgColor-rest: #afb8c133;
 $buttonCounter-invisible-bgColor-rest: #afb8c133;
 $buttonCounter-primary-bgColor-rest: #002d1133;

package/tokens-next-private/scss/functional/themes/light.scss

@@ -157,6 +157,8 @@ $button-danger-borderColor-rest: #d0d7de;
 $button-danger-borderColor-hover: #1f232826;
 $button-danger-borderColor-active: #1f232826;
 $button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
+$button-inactive-fgColor-rest: #636c76;
+$button-inactive-bgColor-rest: #d0d7de;
 $buttonCounter-default-bgColor-rest: #afb8c133;
 $buttonCounter-invisible-bgColor-rest: #afb8c133;
 $buttonCounter-primary-bgColor-rest: #002d1133;

package/tokens-v2-private/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/border.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/breakpoints.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/size-coarse.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 

package/tokens-v2-private/css/tokens/functional/size/size-fine.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 

package/tokens-v2-private/css/tokens/functional/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 :root {

package/tokens-v2-private/js/module/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const BaseSize4 = "0.25rem";

package/tokens-v2-private/js/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const BaseTextWeightLight = "300";

package/tokens-v2-private/js/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const PrimerBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";

package/tokens-v2-private/js/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const PrimerBreakpointXsmall = "20rem";

package/tokens-v2-private/js/tokens/functional/size/size-coarse.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const PrimerControlMinTargetAuto = "2.75rem";

package/tokens-v2-private/js/tokens/functional/size/size-fine.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const PrimerControlMinTargetAuto = "1rem";

package/tokens-v2-private/js/tokens/functional/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const PrimerControlMinTargetFine = "1rem";

package/tokens-v2-private/js/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const PrimerViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";

package/tokens-v2-private/js/tokens/functional/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 22:23:47 GMT
+ * Generated on Tue, 14 Nov 2023 15:04:46 GMT
  */
 
 export const PrimerFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";

package/tokens-v2-private/scss/tokens/base/size/size.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 11 Oct 2023 22:23:47 GMT
+// Generated on Tue, 14 Nov 2023 15:04:46 GMT
 
 $base-size-128: 8rem;
 $base-size-112: 7rem;

package/tokens-v2-private/scss/tokens/base/typography/typography.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 11 Oct 2023 22:23:47 GMT
+// Generated on Tue, 14 Nov 2023 15:04:46 GMT
 
 $base-text-weight-semibold: 600;
 $base-text-weight-medium: 500;

package/tokens-v2-private/scss/tokens/functional/size/border.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 11 Oct 2023 22:23:47 GMT
+// Generated on Tue, 14 Nov 2023 15:04:46 GMT
 
 $primer-borderRadius-full: 100vh;
 $primer-borderRadius-large: 0.75rem;