@primer/primitives 7.8.0 → 7.8.2-rc.e28231a

package/tokens/functional/size/breakpoints.json

@@ -0,0 +1,24 @@
+{
+  "<namespace>": {
+    "breakpoint": {
+      "xsmall": {
+        "value": "320px"
+      },
+      "small": {
+        "value": "544px"
+      },
+      "medium": {
+        "value": "768px"
+      },
+      "large": {
+        "value": "1012px"
+      },
+      "xlarge": {
+        "value": "1280px"
+      },
+      "xxlarge": {
+        "value": "1440px"
+      }
+    }
+  }
+}

package/tokens/functional/size/size-coarse.json

@@ -0,0 +1,27 @@
+{
+  "<namespace>": {
+    "control": {
+      "minTarget": {
+        "auto": {
+          "value": "{base.size.44}"
+        }
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.16}"
+          }
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.12}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/functional/size/size-fine.json

@@ -0,0 +1,27 @@
+{
+  "<namespace>": {
+    "control": {
+      "minTarget": {
+        "auto": {
+          "value": "{base.size.16}"
+        }
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.8}"
+          }
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.8}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/functional/size/size.json

@@ -0,0 +1,189 @@
+{
+  "<namespace>": {
+    "control": {
+      "minTarget": {
+        "fine": {
+          "value": "{base.size.16}"
+        },
+        "coarse": {
+          "value": "{base.size.44}"
+        }
+      },
+      "xsmall": {
+        "size": {
+          "value": "{base.size.24}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.xsmall.size} - {<namespace>.control.xsmall.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "condensed": {
+            "value": "{base.size.4}"
+          },
+          "normal": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.12}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.4}"
+        }
+      },
+      "small": {
+        "size": {
+          "value": "{base.size.28}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.small.size} - {<namespace>.control.small.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "normal": {
+            "value": "{base.size.12}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.4}"
+        }
+      },
+      "medium": {
+        "size": {
+          "value": "{base.size.32}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.medium.size} - {<namespace>.control.medium.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "normal": {
+            "value": "{base.size.12}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.8}"
+        }
+      },
+      "large": {
+        "size": {
+          "value": "{base.size.40}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.large.size} - {<namespace>.control.large.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "normal": {
+            "value": "{base.size.12}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.8}"
+        }
+      },
+      "xlarge": {
+        "size": {
+          "value": "{base.size.48}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.xlarge.size} - {<namespace>.control.xlarge.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "normal": {
+            "value": "{base.size.12}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.8}"
+        }
+      }
+    },
+    "stack": {
+      "padding": {
+        "condensed": {
+          "value": "{base.size.8}"
+        },
+        "normal": {
+          "value": "{base.size.16}"
+        },
+        "spacious": {
+          "value": "{base.size.24}"
+        }
+      },
+      "gap": {
+        "condensed": {
+          "value": "{base.size.8}"
+        },
+        "normal": {
+          "value": "{base.size.16}"
+        },
+        "spacious": {
+          "value": "{base.size.24}"
+        }
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        }
+      },
+      "medium": {
+        "gap": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.12}"
+          }
+        }
+      },
+      "large": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.8}"
+          },
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.12}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/functional/size/viewport.json

@@ -0,0 +1,24 @@
+{
+  "<namespace>": {
+    "viewportRange": {
+      "narrow": {
+        "value": "(max-width: calc({<namespace>.breakpoint.medium} - 0.02px))"
+      },
+      "narrowLandscape": {
+        "value": "(max-width: calc({<namespace>.breakpoint.large} - 0.02px) and (max-height: calc({<namespace>.breakpoint.small} - 0.02px)) and (orientation: landscape))"
+      },
+      "regular": {
+        "value": "(min-width: {<namespace>.breakpoint.medium})"
+      },
+      "wide": {
+        "value": "(min-width: {<namespace>.breakpoint.xxlarge})"
+      },
+      "portrait": {
+        "value": "(orientation: portrait)"
+      },
+      "landscape": {
+        "value": "(orientation: landscape)"
+      }
+    }
+  }
+}

package/tokens/functional/typography/typography.json

@@ -0,0 +1,214 @@
+{
+  "<namespace>": {
+    "fontStack": {
+      "system": {
+        "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
+      },
+      "sansSerif": {
+        "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
+      },
+      "monospace": {
+        "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
+      }
+    },
+    "text": {
+      "display": {
+        "lineBoxHeight": {
+          "value": "56px"
+        },
+        "size": {
+          "value": "40px"
+        },
+        "lineHeight": {
+          "value": "56px"
+        },
+        "weight": {
+          "value": "{base.text.weight.medium}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.display.weight}",
+            "fontSize": "{<namespace>.text.display.size}",
+            "lineHeight": "{<namespace>.text.display.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.sansSerif}"
+          },
+          "type": "typography"
+        }
+      },
+      "title": {
+        "size": {
+          "large": {
+            "value": "32px"
+          },
+          "medium": {
+            "value": "20px"
+          }
+        },
+        "lineHeight": {
+          "large": {
+            "value": "48px"
+          },
+          "medium": {
+            "value": "32px"
+          }
+        },
+        "weight": {
+          "value": "{base.text.weight.semibold}"
+        },
+        "shorthand": {
+          "large": {
+            "value": {
+              "fontWeight": "{<namespace>.text.title.weight}",
+              "fontSize": "{<namespace>.text.title.size.large}",
+              "lineHeight": "{<namespace>.text.title.lineHeight.large}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          },
+          "medium": {
+            "value": {
+              "fontWeight": "{<namespace>.text.title.weight}",
+              "fontSize": "{<namespace>.text.title.size.medium}",
+              "lineHeight": "{<namespace>.text.title.lineHeight.medium}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "subtitle": {
+        "size": {
+          "value": "20px"
+        },
+        "lineHeight": {
+          "value": "32px"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.subtitle.weight}",
+            "fontSize": "{<namespace>.text.subtitle.size}",
+            "lineHeight": "{<namespace>.text.subtitle.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.sansSerif}"
+          },
+          "type": "typography"
+        }
+      },
+      "body": {
+        "size": {
+          "large": {
+            "value": "16px"
+          },
+          "medium": {
+            "value": "14px"
+          },
+          "small": {
+            "value": "12px"
+          }
+        },
+        "lineHeight": {
+          "large": {
+            "value": "24px"
+          },
+          "medium": {
+            "value": "20px"
+          },
+          "small": {
+            "value": "20px"
+          }
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "large": {
+            "value": {
+              "fontWeight": "{<namespace>.text.body.weight}",
+              "fontSize": "{<namespace>.text.body.size.large}",
+              "lineHeight": "{<namespace>.text.body.lineHeight.large}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          },
+          "medium": {
+            "value": {
+              "fontWeight": "{<namespace>.text.body.weight}",
+              "fontSize": "{<namespace>.text.body.size.medium}",
+              "lineHeight": "{<namespace>.text.body.lineHeight.medium}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          },
+          "small": {
+            "value": {
+              "fontWeight": "{<namespace>.text.body.weight}",
+              "fontSize": "{<namespace>.text.body.size.small}",
+              "lineHeight": "{<namespace>.text.body.lineHeight.small}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "caption": {
+        "size": {
+          "value": "12px"
+        },
+        "lineHeight": {
+          "value": "16px"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.caption.weight}",
+            "fontSize": "{<namespace>.text.caption.size}",
+            "lineHeight": "{<namespace>.text.caption.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.sansSerif}"
+          },
+          "type": "typography"
+        }
+      },
+      "codeBlock": {
+        "size": {
+          "value": "13px"
+        },
+        "lineHeight": {
+          "value": "20px"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.codeBlock.weight}",
+            "fontSize": "{<namespace>.text.codeBlock.size}",
+            "lineHeight": "{<namespace>.text.codeBlock.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.monospace}"
+          },
+          "type": "typography"
+        }
+      },
+      "codeInline": {
+        "size": {
+          "value": "0.9285em"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.codeInline.weight}",
+            "fontSize": "{<namespace>.text.codeInline.size}",
+            "lineHeight": "inherit",
+            "fontFamily": "{<namespace>.fontStack.monospace}"
+          },
+          "type": "typography"
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 :root {

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
+ */
+
+@media (pointer: coarse) { :root {
+  --primer-controlStack-medium-gap-auto: var(--base-size-12);
+  --primer-controlStack-small-gap-auto: var(--base-size-16);
+  --primer-control-minTarget-auto: var(--base-size-44);
+}}

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

@@ -1,10 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 @media (pointer: fine) { :root {
-  --primer-control-minTarget-auto: 1rem;
-  --primer-controlStack-small-gap-auto: 0.5rem;
-  --primer-controlStack-medium-gap-auto: 0.5rem;
+  --primer-controlStack-medium-gap-auto: var(--base-size-8);
+  --primer-controlStack-small-gap-auto: var(--base-size-8);
+  --primer-control-minTarget-auto: var(--base-size-16);
 }}

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

@@ -1,15 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 :root {
-  --primer-stack-gap-spacious: var(--base-size-24);
-  --primer-stack-gap-normal: var(--base-size-16);
-  --primer-stack-gap-condensed: var(--base-size-8);
-  --primer-stack-padding-spacious: var(--base-size-24);
-  --primer-stack-padding-normal: var(--base-size-16);
-  --primer-stack-padding-condensed: var(--base-size-8);
   --primer-controlStack-large-gap-spacious: var(--base-size-12);
   --primer-controlStack-large-gap-condensed: var(--base-size-8);
   --primer-controlStack-large-gap-auto: var(--base-size-8);
@@ -17,6 +11,12 @@
   --primer-controlStack-medium-gap-condensed: var(--base-size-8);
   --primer-controlStack-small-gap-spacious: var(--base-size-16);
   --primer-controlStack-small-gap-condensed: var(--base-size-8);
+  --primer-stack-gap-spacious: var(--base-size-24);
+  --primer-stack-gap-normal: var(--base-size-16);
+  --primer-stack-gap-condensed: var(--base-size-8);
+  --primer-stack-padding-spacious: var(--base-size-24);
+  --primer-stack-padding-normal: var(--base-size-16);
+  --primer-stack-padding-condensed: var(--base-size-8);
   --primer-control-xlarge-gap: var(--base-size-8);
   --primer-control-xlarge-paddingInline-spacious: var(--base-size-16);
   --primer-control-xlarge-paddingInline-normal: var(--base-size-12);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 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, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 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, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 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, 20 Apr 2022 17:00:28 GMT
+ * Generated on Wed, 27 Apr 2022 17:16:26 GMT
  */
 
 module.exports = {