@primer/react-brand 0.1.0-rc.c341bbe → 0.2.0-rc.c749f63

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BaseTextWeightLight = 300;

package/lib/design-tokens/js/tokens/functional/colors/global.js

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+export const BrandColorTextDefault = "var(--base-color-scale-gray-9)";
+export const BrandColorTextMuted = "var(--base-color-scale-gray-6)";
+export const BrandColorTextSubtle = "var(--base-color-scale-gray-5)";
+export const BrandColorTextOnEmphasis = "var(--base-color-scale-white-0)";
+export const BrandColorNeutralEmphasisPlus = "var(--base-color-scale-gray-9)";
+export const BrandColorNeutralEmphasis = "var(--base-color-scale-gray-5)";
+export const BrandColorNeutralMuted = "hsl(var(--base-color-scale-gray-3-hsl) / 99.8%)";
+export const BrandColorNeutralSubtle = "hsl(var(--base-color-scale-gray-1-hsl) / 99.5%)";
+export const BrandColorCanvasDefault = "var(--base-color-scale-white-0)";
+export const BrandColorCanvasOverlay = "var(--base-color-scale-white-0)";
+export const BrandColorCanvasInset = "var(--base-color-scale-gray-0)";
+export const BrandColorCanvasSubtle = "var(--base-color-scale-gray-0)";
+export const BrandColorBorderDefault = "var(--base-color-scale-gray-2)";
+export const BrandColorBorderMuted = "hsl(var(--base-color-scale-gray-2-hsl) / 99.7%)";
+export const BrandColorBorderSubtle = "hsl(var(--base-color-scale-black-0-hsl) / 99.85%)";

package/lib/design-tokens/js/tokens/functional/components/hero/base.js

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+export const BrandHeroNarrowPadding = "var(--base-size-96) 0";
+export const BrandHeroRegularPadding = "var(--base-size-128) 0";

package/lib/design-tokens/js/tokens/functional/components/river/base.js

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+export const BrandRiverLayoutMarginVertical = "var(--base-size-48) 0";
+export const BrandRiverVisualShadow = "0px 100px 80px rgba(0, 0, 0, 0.0174624), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0235573), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0282784), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0339075), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.04317), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07)";
+export const BrandRiverGapColumnMedium = "var(--base-size-32)";
+export const BrandRiverGapColumnLarge = "var(--base-size-48)";
+export const BrandRiverGapHeadingBottom = "var(--base-size-8)";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BrandBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BrandBreakpointXsmall = "20rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BrandControlMinTargetAuto = "2.75rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BrandControlMinTargetAuto = "1rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BrandControlMinTargetFine = "1rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BrandViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 export const BrandFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";

package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts

@@ -0,0 +1,176 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+declare const tokens: {
+  "base": {
+    "color": {
+      "scale": {
+        "gray": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "red": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "coral": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "orange": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "yellow": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "lemon": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "lime": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "green": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "teal": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "blue": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "indigo": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "purple": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "pink": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "black": {
+          "0": string
+        },
+        "white": {
+          "0": string
+        }
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/base/colors/color-scales.js

@@ -0,0 +1,175 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+module.exports = {
+  "base": {
+    "color": {
+      "scale": {
+        "gray": {
+          "0": "210 25% 98%",
+          "1": "210 24% 93%",
+          "2": "210 16% 85%",
+          "3": "210 13% 75%",
+          "4": "212 10% 62%",
+          "5": "210 8% 48%",
+          "6": "212 10% 38%",
+          "7": "212 11% 29%",
+          "8": "212 12% 22%",
+          "9": "213 13% 16%"
+        },
+        "red": {
+          "0": "4 100% 97%",
+          "1": "3 100% 91%",
+          "2": "2 100% 85%",
+          "3": "1 100% 76%",
+          "4": "359 95% 65%",
+          "5": "357 67% 50%",
+          "6": "356 71% 38%",
+          "7": "355 71% 30%",
+          "8": "354 74% 24%",
+          "9": "352 91% 17%"
+        },
+        "coral": {
+          "0": "15 100% 96%",
+          "1": "12 100% 90%",
+          "2": "12 100% 82%",
+          "3": "11 97% 72%",
+          "4": "11 81% 60%",
+          "5": "9 64% 47%",
+          "6": "9 70% 36%",
+          "7": "8 79% 28%",
+          "8": "7 91% 22%",
+          "9": "6 98% 16%"
+        },
+        "orange": {
+          "0": "28 100% 95%",
+          "1": "28 100% 85%",
+          "2": "27 100% 74%",
+          "3": "25 96% 63%",
+          "4": "24 76% 51%",
+          "5": "24 100% 37%",
+          "6": "23 100% 29%",
+          "7": "22 100% 23%",
+          "8": "22 100% 18%",
+          "9": "19 100% 14%"
+        },
+        "yellow": {
+          "0": "50 89% 89%",
+          "1": "48 87% 73%",
+          "2": "46 76% 60%",
+          "3": "44 65% 50%",
+          "4": "42 100% 37%",
+          "5": "40 100% 30%",
+          "6": "37 100% 24%",
+          "7": "36 98% 19%",
+          "8": "35 100% 15%",
+          "9": "34 90% 12%"
+        },
+        "lemon": {
+          "0": "54 95% 85%",
+          "1": "52 87% 67%",
+          "2": "51 70% 56%",
+          "3": "50 72% 45%",
+          "4": "50 98% 33%",
+          "5": "49 100% 26%",
+          "6": "48 100% 20%",
+          "7": "47 100% 16%",
+          "8": "46 100% 13%",
+          "9": "43 100% 10%"
+        },
+        "lime": {
+          "0": "75 86% 85%",
+          "1": "76 75% 70%",
+          "2": "76 59% 58%",
+          "3": "77 51% 48%",
+          "4": "78 57% 38%",
+          "5": "80 64% 29%",
+          "6": "82 66% 22%",
+          "7": "84 85% 16%",
+          "8": "86 90% 12%",
+          "9": "88 96% 9%"
+        },
+        "green": {
+          "0": "133 80% 92%",
+          "1": "134 66% 80%",
+          "2": "135 62% 65%",
+          "3": "136 50% 53%",
+          "4": "137 57% 41%",
+          "5": "137 66% 30%",
+          "6": "138 71% 23%",
+          "7": "141 90% 16%",
+          "8": "142 100% 12%",
+          "9": "143 100% 9%"
+        },
+        "teal": {
+          "0": "172 72% 92%",
+          "1": "173 58% 80%",
+          "2": "177 57% 63%",
+          "3": "177 46% 51%",
+          "4": "179 51% 41%",
+          "5": "180 66% 29%",
+          "6": "181 67% 23%",
+          "7": "182 95% 15%",
+          "8": "182 82% 13%",
+          "9": "182 80% 10%"
+        },
+        "blue": {
+          "0": "200 100% 95%",
+          "1": "203 100% 87%",
+          "2": "205 100% 77%",
+          "3": "208 100% 67%",
+          "4": "211 100% 58%",
+          "5": "212 92% 45%",
+          "6": "213 95% 36%",
+          "7": "214 96% 29%",
+          "8": "216 82% 24%",
+          "9": "217 89% 18%"
+        },
+        "indigo": {
+          "0": "229 100% 97%",
+          "1": "231 100% 92%",
+          "2": "232 100% 86%",
+          "3": "234 100% 80%",
+          "4": "234 100% 73%",
+          "5": "237 84% 64%",
+          "6": "238 61% 53%",
+          "7": "237 58% 41%",
+          "8": "235 58% 32%",
+          "9": "235 57% 23%"
+        },
+        "purple": {
+          "0": "285 100% 97%",
+          "1": "271 100% 92%",
+          "2": "267 100% 86%",
+          "3": "265 100% 80%",
+          "4": "261 92% 72%",
+          "5": "261 69% 59%",
+          "6": "261 53% 48%",
+          "7": "261 56% 38%",
+          "8": "261 59% 30%",
+          "9": "260 66% 23%"
+        },
+        "pink": {
+          "0": "330 100% 97%",
+          "1": "327 100% 91%",
+          "2": "327 100% 84%",
+          "3": "326 100% 75%",
+          "4": "325 76% 63%",
+          "5": "324 54% 49%",
+          "6": "323 59% 38%",
+          "7": "322 58% 30%",
+          "8": "320 67% 23%",
+          "9": "319 93% 16%"
+        },
+        "black": {
+          "0": "213 14% 12%"
+        },
+        "white": {
+          "0": "0 100% 100%"
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 declare const tokens: {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 module.exports = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 declare const tokens: {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "color": {
+      "text": {
+        "default": string,
+        "muted": string,
+        "subtle": string,
+        "onEmphasis": string
+      },
+      "neutral": {
+        "emphasisPlus": string,
+        "emphasis": string,
+        "muted": string,
+        "subtle": string
+      },
+      "canvas": {
+        "default": string,
+        "overlay": string,
+        "inset": string,
+        "subtle": string
+      },
+      "border": {
+        "default": string,
+        "muted": string,
+        "subtle": string
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/colors/global.js

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "color": {
+      "text": {
+        "default": "var(--base-color-scale-gray-9)",
+        "muted": "var(--base-color-scale-gray-6)",
+        "subtle": "var(--base-color-scale-gray-5)",
+        "onEmphasis": "var(--base-color-scale-white-0)"
+      },
+      "neutral": {
+        "emphasisPlus": "var(--base-color-scale-gray-9)",
+        "emphasis": "var(--base-color-scale-gray-5)",
+        "muted": "hsl(var(--base-color-scale-gray-3-hsl) / 99.8%)",
+        "subtle": "hsl(var(--base-color-scale-gray-1-hsl) / 99.5%)"
+      },
+      "canvas": {
+        "default": "var(--base-color-scale-white-0)",
+        "overlay": "var(--base-color-scale-white-0)",
+        "inset": "var(--base-color-scale-gray-0)",
+        "subtle": "var(--base-color-scale-gray-0)"
+      },
+      "border": {
+        "default": "var(--base-color-scale-gray-2)",
+        "muted": "hsl(var(--base-color-scale-gray-2-hsl) / 99.7%)",
+        "subtle": "hsl(var(--base-color-scale-black-0-hsl) / 99.85%)"
+      }
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "Hero": {
+      "narrow": {
+        "padding": string
+      },
+      "regular": {
+        "padding": string
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/components/hero/base.js

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "Hero": {
+      "narrow": {
+        "padding": "var(--base-size-96) 0"
+      },
+      "regular": {
+        "padding": "var(--base-size-128) 0"
+      }
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "River": {
+      "layout": {
+        "margin": {
+          "vertical": string
+        }
+      },
+      "visual": {
+        "shadow": string
+      },
+      "gap": {
+        "column": {
+          "medium": string,
+          "large": string
+        },
+        "heading": {
+          "bottom": string
+        }
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/components/river/base.js

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "River": {
+      "layout": {
+        "margin": {
+          "vertical": "var(--base-size-48) 0"
+        }
+      },
+      "visual": {
+        "shadow": "0px 100px 80px rgba(0, 0, 0, 0.0174624), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0235573), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0282784), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0339075), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.04317), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07)"
+      },
+      "gap": {
+        "column": {
+          "medium": "var(--base-size-32)",
+          "large": "var(--base-size-48)"
+        },
+        "heading": {
+          "bottom": "var(--base-size-8)"
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Fri, 10 Jun 2022 11:52:56 GMT
  */
 
 declare const tokens: {