@primer/react-brand 0.1.0-rc.ae0dfda → 0.1.0-rc.b666c59

package/lib/design-tokens/js/tokens/base/size/size.js

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BaseSize4 = "0.25rem";
+export const BaseSize8 = "0.5rem";
+export const BaseSize12 = "0.75rem";
+export const BaseSize16 = "1rem";
+export const BaseSize20 = "1.25rem";
+export const BaseSize24 = "1.5rem";
+export const BaseSize28 = "1.75rem";
+export const BaseSize32 = "2rem";
+export const BaseSize36 = "2.25rem";
+export const BaseSize40 = "2.5rem";
+export const BaseSize44 = "2.75rem";
+export const BaseSize48 = "3rem";
+export const BaseSize64 = "4rem";
+export const BaseSize80 = "5rem";
+export const BaseSize96 = "6rem";
+export const BaseSize112 = "7rem";
+export const BaseSize128 = "8rem";

package/lib/design-tokens/js/tokens/base/typography/typography.js

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BaseTextWeightLight = 300;
+export const BaseTextWeightNormal = 400;
+export const BaseTextWeightMedium = 500;
+export const BaseTextWeightSemibold = 600;
+export const BaseTextWeightBold = 700;
+export const BaseTextWeightExtrabold = 800;
+export const BaseTextWeightHeavy = 900;

package/lib/design-tokens/js/tokens/functional/size/border.js

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BrandBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";
+export const BrandBorderInsetNormal = "inset 0 0 0 max(2px, 0.125rem)";
+export const BrandBorderInsetThick = "inset 0 0 0 max(4px, 0.25rem)";
+export const BrandBorderWidthThin = "max(1px, 0.0625rem)";
+export const BrandBorderWidthNormal = "max(2px, 0.125rem)";
+export const BrandBorderWidthThick = "max(4px, 0.25rem)";
+export const BrandBorderRadiusSmall = "0.1875rem";
+export const BrandBorderRadiusMedium = "0.375rem";
+export const BrandBorderRadiusLarge = "0.75rem";
+export const BrandBorderRadiusFull = "100vh";

package/lib/design-tokens/js/tokens/functional/size/breakpoints.js

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BrandBreakpointXsmall = "20rem";
+export const BrandBreakpointSmall = "34rem";
+export const BrandBreakpointMedium = "48rem";
+export const BrandBreakpointLarge = "63.25rem";
+export const BrandBreakpointXlarge = "80rem";
+export const BrandBreakpointXxlarge = "90rem";

package/lib/design-tokens/js/tokens/functional/size/size-coarse.js

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BrandControlMinTargetAuto = "2.75rem";
+export const BrandControlStackSmallGapAuto = "1rem";
+export const BrandControlStackMediumGapAuto = "0.75rem";

package/lib/design-tokens/js/tokens/functional/size/size-fine.js

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BrandControlMinTargetAuto = "1rem";
+export const BrandControlStackSmallGapAuto = "0.5rem";
+export const BrandControlStackMediumGapAuto = "0.5rem";

package/lib/design-tokens/js/tokens/functional/size/size.js

@@ -0,0 +1,52 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BrandControlMinTargetFine = "1rem";
+export const BrandControlMinTargetCoarse = "2.75rem";
+export const BrandControlXsmallSize = "1.5rem";
+export const BrandControlXsmallLineBoxHeight = "1.25rem";
+export const BrandControlXsmallPaddingBlock = "calc((1.5rem - 1.25rem) / 2)";
+export const BrandControlXsmallPaddingInlineCondensed = "0.25rem";
+export const BrandControlXsmallPaddingInlineNormal = "0.5rem";
+export const BrandControlXsmallPaddingInlineSpacious = "0.75rem";
+export const BrandControlXsmallGap = "0.25rem";
+export const BrandControlSmallSize = "1.75rem";
+export const BrandControlSmallLineBoxHeight = "1.25rem";
+export const BrandControlSmallPaddingBlock = "calc((1.75rem - 1.25rem) / 2)";
+export const BrandControlSmallPaddingInlineCondensed = "0.5rem";
+export const BrandControlSmallPaddingInlineNormal = "0.75rem";
+export const BrandControlSmallGap = "0.25rem";
+export const BrandControlMediumSize = "2rem";
+export const BrandControlMediumLineBoxHeight = "1.25rem";
+export const BrandControlMediumPaddingBlock = "calc((2rem - 1.25rem) / 2)";
+export const BrandControlMediumPaddingInlineCondensed = "0.5rem";
+export const BrandControlMediumPaddingInlineNormal = "0.75rem";
+export const BrandControlMediumPaddingInlineSpacious = "1rem";
+export const BrandControlMediumGap = "0.5rem";
+export const BrandControlLargeSize = "2.5rem";
+export const BrandControlLargeLineBoxHeight = "1.25rem";
+export const BrandControlLargePaddingBlock = "calc((2.5rem - 1.25rem) / 2)";
+export const BrandControlLargePaddingInlineNormal = "0.75rem";
+export const BrandControlLargePaddingInlineSpacious = "1rem";
+export const BrandControlLargeGap = "0.5rem";
+export const BrandControlXlargeSize = "3rem";
+export const BrandControlXlargeLineBoxHeight = "1.25rem";
+export const BrandControlXlargePaddingBlock = "calc((3rem - 1.25rem) / 2)";
+export const BrandControlXlargePaddingInlineNormal = "0.75rem";
+export const BrandControlXlargePaddingInlineSpacious = "1rem";
+export const BrandControlXlargeGap = "0.5rem";
+export const BrandStackPaddingCondensed = "0.5rem";
+export const BrandStackPaddingNormal = "1rem";
+export const BrandStackPaddingSpacious = "1.5rem";
+export const BrandStackGapCondensed = "0.5rem";
+export const BrandStackGapNormal = "1rem";
+export const BrandStackGapSpacious = "1.5rem";
+export const BrandControlStackSmallGapCondensed = "0.5rem";
+export const BrandControlStackSmallGapSpacious = "1rem";
+export const BrandControlStackMediumGapCondensed = "0.5rem";
+export const BrandControlStackMediumGapSpacious = "0.75rem";
+export const BrandControlStackLargeGapAuto = "0.5rem";
+export const BrandControlStackLargeGapCondensed = "0.5rem";
+export const BrandControlStackLargeGapSpacious = "0.75rem";

package/lib/design-tokens/js/tokens/functional/size/viewport.js

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BrandViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";
+export const BrandViewportRangeNarrowLandscape = "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))";
+export const BrandViewportRangeRegular = "(min-width: 48rem)";
+export const BrandViewportRangeWide = "(min-width: 90rem)";
+export const BrandViewportRangePortrait = "(orientation: portrait)";
+export const BrandViewportRangeLandscape = "(orientation: landscape)";

package/lib/design-tokens/js/tokens/functional/typography/typography.js

@@ -0,0 +1,63 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+export const BrandFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandFontStackSansSerif = "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandFontStackSansSerifAlt = "'Alliance2', 'Alliance2HeaderFallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandFontStackMonospace = "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace";
+export const BrandBodyFontFamily = "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandHeadingFontFamily = "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandHeadingWeight400 = "var(--base-text-weight-semibold)";
+export const BrandHeadingWeight500 = "var(--base-text-weight-semibold)";
+export const BrandHeadingWeight600 = "var(--base-text-weight-semibold)";
+export const BrandHeadingWeight700 = "var(--base-text-weight-bold)";
+export const BrandHeadingLetterSpacing400 = "-0.01em";
+export const BrandHeadingLetterSpacing500 = "-0.01em";
+export const BrandHeadingLetterSpacing600 = "-0.01em";
+export const BrandHeadingLetterSpacing700 = "-0.01em";
+export const BrandTextWeight100 = "var(--base-text-weight-normal)";
+export const BrandTextWeight200 = "var(--base-text-weight-normal)";
+export const BrandTextWeight300 = "var(--base-text-weight-normal)";
+export const BrandTextWeight400 = "var(--base-text-weight-normal)";
+export const BrandTextWeight500 = "var(--base-text-weight-normal)";
+export const BrandTextWeight600 = "var(--base-text-weight-normal)";
+export const BrandTextWeight700 = "var(--base-text-weight-normal)";
+export const BrandTextWeight800 = "var(--base-text-weight-extrabold)";
+export const BrandTextWeight900 = "var(--base-text-weight-extrabold)";
+export const BrandTextWeight1000 = "var(--base-text-weight-extrabold)";
+export const BrandTextSize100 = "0.75rem";
+export const BrandTextSize200 = "0.875rem";
+export const BrandTextSize300 = "1rem";
+export const BrandTextSize400 = "1rem";
+export const BrandTextSize500 = "1.25rem";
+export const BrandTextSize600 = "1.5rem";
+export const BrandTextSize700 = "1.75rem";
+export const BrandTextSize800 = "2rem";
+export const BrandTextSize900 = "2.5rem";
+export const BrandTextSize1000 = "3rem";
+export const BrandTextLineHeight100 = "1.25rem";
+export const BrandTextLineHeight200 = "1.25rem";
+export const BrandTextLineHeight300 = "1.5rem";
+export const BrandTextLineHeight400 = "1.5rem";
+export const BrandTextLineHeight500 = "1.75rem";
+export const BrandTextLineHeight600 = "2rem";
+export const BrandTextLineHeight700 = "2.5rem";
+export const BrandTextLineHeight800 = "2.25rem";
+export const BrandTextLineHeight900 = "2.75rem";
+export const BrandTextLineHeight1000 = "3.25rem";
+export const BrandTextLetterSpacing700 = "-0.01em";
+export const BrandTextLetterSpacing800 = "-0.01em";
+export const BrandTextLetterSpacing900 = "-0.01em";
+export const BrandTextLetterSpacing1000 = "-0.01em";
+export const BrandTextStyleItalic1 = "'ital' 1";
+export const BrandTextStyleItalic2 = "'ital' 2";
+export const BrandTextStyleItalic3 = "'ital' 3";
+export const BrandTextStyleItalic4 = "'ital' 4";
+export const BrandTextStyleItalic5 = "'ital' 5";
+export const BrandTextStyleItalic6 = "'ital' 6";
+export const BrandTextStyleItalic7 = "'ital' 7";
+export const BrandTextStyleItalic8 = "'ital' 8";
+export const BrandTextStyleItalic9 = "'ital' 9";
+export const BrandTextStyleItalic10 = "'ital' 10";

package/lib/design-tokens/ts/tokens/base/size/size.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+declare const tokens: {
+  "base": {
+    "size": {
+      "4": string,
+      "8": string,
+      "12": string,
+      "16": string,
+      "20": string,
+      "24": string,
+      "28": string,
+      "32": string,
+      "36": string,
+      "40": string,
+      "44": string,
+      "48": string,
+      "64": string,
+      "80": string,
+      "96": string,
+      "112": string,
+      "128": string
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/base/size/size.js

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+module.exports = {
+  "base": {
+    "size": {
+      "4": "0.25rem",
+      "8": "0.5rem",
+      "12": "0.75rem",
+      "16": "1rem",
+      "20": "1.25rem",
+      "24": "1.5rem",
+      "28": "1.75rem",
+      "32": "2rem",
+      "36": "2.25rem",
+      "40": "2.5rem",
+      "44": "2.75rem",
+      "48": "3rem",
+      "64": "4rem",
+      "80": "5rem",
+      "96": "6rem",
+      "112": "7rem",
+      "128": "8rem"
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+declare const tokens: {
+  "base": {
+    "text": {
+      "weight": {
+        "light": {
+          "value": 300,
+          "filePath": "tokens/base/typography/typography.json",
+          "isSource": true,
+          "original": {
+            "value": 300
+          },
+          "name": "light",
+          "attributes": {},
+          "path": [
+            "base",
+            "text",
+            "weight",
+            "light"
+          ]
+        },
+        "normal": {
+          "value": 400,
+          "filePath": "tokens/base/typography/typography.json",
+          "isSource": true,
+          "original": {
+            "value": 400
+          },
+          "name": "normal",
+          "attributes": {},
+          "path": [
+            "base",
+            "text",
+            "weight",
+            "normal"
+          ]
+        },
+        "medium": {},
+        "semibold": {
+          "value": 600,
+          "filePath": "tokens/base/typography/typography.json",
+          "isSource": true,
+          "original": {
+            "value": 600
+          },
+          "name": "semibold",
+          "attributes": {},
+          "path": [
+            "base",
+            "text",
+            "weight",
+            "semibold"
+          ]
+        },
+        "bold": {
+          "value": 700,
+          "filePath": "tokens/base/typography/typography.json",
+          "isSource": true,
+          "original": {
+            "value": 700
+          },
+          "name": "bold",
+          "attributes": {},
+          "path": [
+            "base",
+            "text",
+            "weight",
+            "bold"
+          ]
+        },
+        "extrabold": {
+          "value": 800,
+          "filePath": "tokens/base/typography/typography.json",
+          "isSource": true,
+          "original": {
+            "value": 800
+          },
+          "name": "extrabold",
+          "attributes": {},
+          "path": [
+            "base",
+            "text",
+            "weight",
+            "extrabold"
+          ]
+        },
+        "heavy": {
+          "value": 900,
+          "filePath": "tokens/base/typography/typography.json",
+          "isSource": true,
+          "original": {
+            "value": 900
+          },
+          "name": "heavy",
+          "attributes": {},
+          "path": [
+            "base",
+            "text",
+            "weight",
+            "heavy"
+          ]
+        }
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/base/typography/typography.js

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+module.exports = {
+  "base": {
+    "text": {
+      "weight": {
+        "light": 300,
+        "normal": 400,
+        "medium": 500,
+        "semibold": 600,
+        "bold": 700,
+        "extrabold": 800,
+        "heavy": 900
+      }
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/functional/size/border.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "borderInset": {
+      "thin": string,
+      "normal": string,
+      "thick": string
+    },
+    "borderWidth": {
+      "thin": string,
+      "normal": string,
+      "thick": string
+    },
+    "borderRadius": {
+      "small": string,
+      "medium": string,
+      "large": string,
+      "full": string
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/size/border.js

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "borderInset": {
+      "thin": "inset 0 0 0 max(1px, 0.0625rem)",
+      "normal": "inset 0 0 0 max(2px, 0.125rem)",
+      "thick": "inset 0 0 0 max(4px, 0.25rem)"
+    },
+    "borderWidth": {
+      "thin": "max(1px, 0.0625rem)",
+      "normal": "max(2px, 0.125rem)",
+      "thick": "max(4px, 0.25rem)"
+    },
+    "borderRadius": {
+      "small": "0.1875rem",
+      "medium": "0.375rem",
+      "large": "0.75rem",
+      "full": "100vh"
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "breakpoint": {
+      "xsmall": string,
+      "small": string,
+      "medium": string,
+      "large": string,
+      "xlarge": string,
+      "xxlarge": string
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "breakpoint": {
+      "xsmall": "20rem",
+      "small": "34rem",
+      "medium": "48rem",
+      "large": "63.25rem",
+      "xlarge": "80rem",
+      "xxlarge": "90rem"
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "control": {
+      "minTarget": {
+        "auto": string
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": string
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": string
+        }
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "control": {
+      "minTarget": {
+        "auto": "2.75rem"
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": "1rem"
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": "0.75rem"
+        }
+      }
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "control": {
+      "minTarget": {
+        "auto": string
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": string
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": string
+        }
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/size/size-fine.js

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 19:42:41 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "control": {
+      "minTarget": {
+        "auto": "1rem"
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": "0.5rem"
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": "0.5rem"
+        }
+      }
+    }
+  }
+}