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

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

@@ -0,0 +1,101 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "control": {
+      "minTarget": {
+        "fine": string,
+        "coarse": string
+      },
+      "xsmall": {
+        "size": string,
+        "lineBoxHeight": string,
+        "paddingBlock": string,
+        "paddingInline": {
+          "condensed": string,
+          "normal": string,
+          "spacious": string
+        },
+        "gap": string
+      },
+      "small": {
+        "size": string,
+        "lineBoxHeight": string,
+        "paddingBlock": string,
+        "paddingInline": {
+          "condensed": string,
+          "normal": string
+        },
+        "gap": string
+      },
+      "medium": {
+        "size": string,
+        "lineBoxHeight": string,
+        "paddingBlock": string,
+        "paddingInline": {
+          "condensed": string,
+          "normal": string,
+          "spacious": string
+        },
+        "gap": string
+      },
+      "large": {
+        "size": string,
+        "lineBoxHeight": string,
+        "paddingBlock": string,
+        "paddingInline": {
+          "normal": string,
+          "spacious": string
+        },
+        "gap": string
+      },
+      "xlarge": {
+        "size": string,
+        "lineBoxHeight": string,
+        "paddingBlock": string,
+        "paddingInline": {
+          "normal": string,
+          "spacious": string
+        },
+        "gap": string
+      }
+    },
+    "stack": {
+      "padding": {
+        "condensed": string,
+        "normal": string,
+        "spacious": string
+      },
+      "gap": {
+        "condensed": string,
+        "normal": string,
+        "spacious": string
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "condensed": string,
+          "spacious": string
+        }
+      },
+      "medium": {
+        "gap": {
+          "condensed": string,
+          "spacious": string
+        }
+      },
+      "large": {
+        "gap": {
+          "auto": string,
+          "condensed": string,
+          "spacious": string
+        }
+      }
+    }
+  }
+}
+ export default tokens;

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

@@ -0,0 +1,100 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "control": {
+      "minTarget": {
+        "fine": "1rem",
+        "coarse": "2.75rem"
+      },
+      "xsmall": {
+        "size": "1.5rem",
+        "lineBoxHeight": "1.25rem",
+        "paddingBlock": "calc((1.5rem - 1.25rem) / 2)",
+        "paddingInline": {
+          "condensed": "0.25rem",
+          "normal": "0.5rem",
+          "spacious": "0.75rem"
+        },
+        "gap": "0.25rem"
+      },
+      "small": {
+        "size": "1.75rem",
+        "lineBoxHeight": "1.25rem",
+        "paddingBlock": "calc((1.75rem - 1.25rem) / 2)",
+        "paddingInline": {
+          "condensed": "0.5rem",
+          "normal": "0.75rem"
+        },
+        "gap": "0.25rem"
+      },
+      "medium": {
+        "size": "2rem",
+        "lineBoxHeight": "1.25rem",
+        "paddingBlock": "calc((2rem - 1.25rem) / 2)",
+        "paddingInline": {
+          "condensed": "0.5rem",
+          "normal": "0.75rem",
+          "spacious": "1rem"
+        },
+        "gap": "0.5rem"
+      },
+      "large": {
+        "size": "2.5rem",
+        "lineBoxHeight": "1.25rem",
+        "paddingBlock": "calc((2.5rem - 1.25rem) / 2)",
+        "paddingInline": {
+          "normal": "0.75rem",
+          "spacious": "1rem"
+        },
+        "gap": "0.5rem"
+      },
+      "xlarge": {
+        "size": "3rem",
+        "lineBoxHeight": "1.25rem",
+        "paddingBlock": "calc((3rem - 1.25rem) / 2)",
+        "paddingInline": {
+          "normal": "0.75rem",
+          "spacious": "1rem"
+        },
+        "gap": "0.5rem"
+      }
+    },
+    "stack": {
+      "padding": {
+        "condensed": "0.5rem",
+        "normal": "1rem",
+        "spacious": "1.5rem"
+      },
+      "gap": {
+        "condensed": "0.5rem",
+        "normal": "1rem",
+        "spacious": "1.5rem"
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "condensed": "0.5rem",
+          "spacious": "1rem"
+        }
+      },
+      "medium": {
+        "gap": {
+          "condensed": "0.5rem",
+          "spacious": "0.75rem"
+        }
+      },
+      "large": {
+        "gap": {
+          "auto": "0.5rem",
+          "condensed": "0.5rem",
+          "spacious": "0.75rem"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "viewportRange": {
+      "narrow": string,
+      "narrowLandscape": string,
+      "regular": string,
+      "wide": string,
+      "portrait": string,
+      "landscape": string
+    }
+  }
+}
+ export default tokens;

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

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "viewportRange": {
+      "narrow": "(max-width: calc(48rem - 0.02px))",
+      "narrowLandscape": "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
+      "regular": "(min-width: 48rem)",
+      "wide": "(min-width: 90rem)",
+      "portrait": "(orientation: portrait)",
+      "landscape": "(orientation: landscape)"
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "fontStack": {
+      "system": string,
+      "sansSerif": string,
+      "sansSerifAlt": string,
+      "monospace": string
+    },
+    "body": {
+      "fontFamily": string
+    },
+    "heading": {
+      "fontFamily": string,
+      "weight": {
+        "400": string,
+        "500": string,
+        "600": string,
+        "700": string
+      },
+      "letterSpacing": {
+        "400": string,
+        "500": string,
+        "600": string,
+        "700": string
+      }
+    },
+    "text": {
+      "weight": {
+        "100": string,
+        "200": string,
+        "300": string,
+        "400": string,
+        "500": string,
+        "600": string,
+        "700": string,
+        "800": string,
+        "900": string,
+        "1000": string
+      },
+      "size": {
+        "100": string,
+        "200": string,
+        "300": string,
+        "400": string,
+        "500": string,
+        "600": string,
+        "700": string,
+        "800": string,
+        "900": string,
+        "1000": string
+      },
+      "lineHeight": {
+        "100": string,
+        "200": string,
+        "300": string,
+        "400": string,
+        "500": string,
+        "600": string,
+        "700": string,
+        "800": string,
+        "900": string,
+        "1000": string
+      },
+      "letterSpacing": {
+        "700": string,
+        "800": string,
+        "900": string,
+        "1000": string
+      },
+      "style": {
+        "italic": {
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string,
+          "10": string
+        }
+      }
+    }
+  }
+}
+ export default tokens;

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

@@ -0,0 +1,91 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "fontStack": {
+      "system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "sansSerif": "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "sansSerifAlt": "'Alliance2', 'Alliance2HeaderFallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
+    },
+    "body": {
+      "fontFamily": "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
+    },
+    "heading": {
+      "fontFamily": "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "weight": {
+        "400": "var(--base-text-weight-semibold)",
+        "500": "var(--base-text-weight-semibold)",
+        "600": "var(--base-text-weight-semibold)",
+        "700": "var(--base-text-weight-bold)"
+      },
+      "letterSpacing": {
+        "400": "-0.01em",
+        "500": "-0.01em",
+        "600": "-0.01em",
+        "700": "-0.01em"
+      }
+    },
+    "text": {
+      "weight": {
+        "100": "var(--base-text-weight-normal)",
+        "200": "var(--base-text-weight-normal)",
+        "300": "var(--base-text-weight-normal)",
+        "400": "var(--base-text-weight-normal)",
+        "500": "var(--base-text-weight-normal)",
+        "600": "var(--base-text-weight-normal)",
+        "700": "var(--base-text-weight-normal)",
+        "800": "var(--base-text-weight-extrabold)",
+        "900": "var(--base-text-weight-extrabold)",
+        "1000": "var(--base-text-weight-extrabold)"
+      },
+      "size": {
+        "100": "0.75rem",
+        "200": "0.875rem",
+        "300": "1rem",
+        "400": "1rem",
+        "500": "1.25rem",
+        "600": "1.5rem",
+        "700": "1.75rem",
+        "800": "2rem",
+        "900": "2.5rem",
+        "1000": "3rem"
+      },
+      "lineHeight": {
+        "100": "1.25rem",
+        "200": "1.25rem",
+        "300": "1.5rem",
+        "400": "1.5rem",
+        "500": "1.75rem",
+        "600": "2rem",
+        "700": "2.5rem",
+        "800": "2.25rem",
+        "900": "2.75rem",
+        "1000": "3.25rem"
+      },
+      "letterSpacing": {
+        "700": "-0.01em",
+        "800": "-0.01em",
+        "900": "-0.01em",
+        "1000": "-0.01em"
+      },
+      "style": {
+        "italic": {
+          "1": "'ital' 1",
+          "2": "'ital' 2",
+          "3": "'ital' 3",
+          "4": "'ital' 4",
+          "5": "'ital' 5",
+          "6": "'ital' 6",
+          "7": "'ital' 7",
+          "8": "'ital' 8",
+          "9": "'ital' 9",
+          "10": "'ital' 10"
+        }
+      }
+    }
+  }
+}

package/lib/index.d.ts

@@ -1,2 +1,5 @@
+export * from './css/stylesheets';
 export * from './Hero';
+export * from './Text';
+export * from './Heading';
 export * from './ThemeProvider';

package/lib/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],r):"object"==typeof exports?exports["@primer/react-brand"]=r(require("react")):e["@primer/react-brand"]=r(e.React)}(this,(function(e){return(()=>{"use strict";var r={418:e=>{var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},o=0;o<10;o++)r["_"+String.fromCharCode(o)]=o;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach((function(e){t[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,s,l=n(e),c=1;c<arguments.length;c++){for(var u in i=Object(arguments[c]))o.call(i,u)&&(l[u]=i[u]);if(r){s=r(i);for(var d=0;d<s.length;d++)t.call(i,s[d])&&(l[s[d]]=i[s[d]])}}return l}},251:(e,r,o)=>{o(418);var t=o(697),n=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;n=a("react.element"),a("react.fragment")}var i=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,r,o){var t,a={},c=null,u=null;for(t in void 0!==o&&(c=""+o),void 0!==r.key&&(c=""+r.key),void 0!==r.ref&&(u=r.ref),r)s.call(r,t)&&!l.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:c,ref:u,props:a,_owner:i.current}}r.jsx=c,r.jsxs=c},893:(e,r,o)=>{e.exports=o(251)},697:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{ColorModesEnum:()=>_,Hero:()=>d,ThemeContext:()=>p,ThemeProvider:()=>m,useTheme:()=>v});var e=t(893);function r(e){var o,t,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(o=0;o<e.length;o++)e[o]&&(t=r(e[o]))&&(n&&(n+=" "),n+=t);else for(o in e)e[o]&&(n&&(n+=" "),n+=o);return n}function o(){for(var e,o,t=0,n="";t<arguments.length;)(e=arguments[t++])&&(o=r(e))&&(n&&(n+=" "),n+=o);return n}const a={Hero:"Hero-module__Hero___-LIGB","Hero--align-start":"Hero-module__Hero--align-start___+ux3o","Hero--align-center":"Hero-module__Hero--align-center___L5ing","Hero-heading":"Hero-module__Hero-heading___Ns+oe","Hero--size-small":"Hero-module__Hero--size-small___lTdu6","Hero--size-large":"Hero-module__Hero--size-large___LjSYu","Hero-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=t(697),s=t.n(i);function l({className:r,expanded:t=!1}){return(0,e.jsxs)("svg",{className:o("ExpandableArrow-module__ExpandableArrow___Zzb6R",t&&"ExpandableArrow-module__ExpandableArrow--expanded___02I33",r),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[(0,e.jsx)("path",{fill:"currentColor",d:"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"}),(0,e.jsx)("path",{className:o("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",t&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const c={LinkButton:"LinkButton-module__LinkButton___73d6V","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___bd7ZC","LinkButton--primary":"LinkButton-module__LinkButton--primary___5T51r","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___Oc3L1"};function u({variant:r="secondary",className:t,children:n,onMouseEnter:a,onMouseLeave:i,onFocus:u,onBlur:d,..._}){const[f,p]=s().useState(!1),[m,h]=s().useState(!1);return(0,e.jsxs)("a",{className:o(c.LinkButton,c[`LinkButton--${r}`],t),onMouseEnter:e=>{p(!0),a?.(e)},onMouseLeave:e=>{p(!1),i?.(e)},onFocus:e=>{h(!0),u?.(e)},onBlur:e=>{h(!1),d?.(e)},..._,children:[n,(0,e.jsx)(l,{className:c["LinkButton-arrow"],expanded:f||m})]})}function d({heading:r,description:t,primaryAction:n,secondaryAction:i,align:s="start",size:l="large"}){return(0,e.jsxs)("div",{className:o(a.Hero,a[`Hero--align-${s}`],a[`Hero--size-${l}`]),children:[(0,e.jsx)("h1",{className:a["Hero-heading"],children:r}),t?(0,e.jsx)("p",{className:a["Hero-description"],children:t}):null,(0,e.jsxs)("div",{className:a["Hero-actions"],children:[(0,e.jsx)(u,{variant:"primary",href:n.href,children:n.text}),i?(0,e.jsx)(u,{variant:"secondary",href:i.href,children:i.text}):null]})]})}var _;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(_||(_={}));const f=_.LIGHT,p=(0,i.createContext)({colorMode:f,availableColorModes:Object.values(_)});function m({colorMode:r=f,children:o,...t}){const[n,a]=(0,i.useState)(r),s=(0,i.useMemo)((()=>Object.values(_)),[]);return(0,i.useEffect)((()=>(r===_.AUTO?a(b()):n!==r&&a(r),y(a))),[r,n,a]),(0,e.jsx)(p.Provider,{value:{colorMode:n,availableColorModes:s},children:(0,e.jsx)("div",{"data-color-mode":n,...t,children:o})})}const h=()=>window.matchMedia(`(prefers-color-scheme: ${_.DARK})`),b=()=>h().matches?_.DARK:_.LIGHT,y=e=>{const r=h(),o=r=>e(r.matches?_.DARK:_.LIGHT);return r.addEventListener("change",o),()=>r.removeEventListener("change",o)},v=()=>(0,i.useContext)(p)})(),n})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],t):"object"==typeof exports?exports["@primer/react-brand"]=t(require("react")):e["@primer/react-brand"]=t(e.React)}(this,(function(e){return(()=>{"use strict";var t={418:e=>{var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function o(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,l,s=o(e),_=1;_<arguments.length;_++){for(var d in i=Object(arguments[_]))r.call(i,d)&&(s[d]=i[d]);if(t){l=t(i);for(var u=0;u<l.length;u++)n.call(i,l[u])&&(s[l[u]]=i[l[u]])}}return s}},251:(e,t,r)=>{r(418);var n=r(697),o=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;o=a("react.element"),a("react.fragment")}var i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l=Object.prototype.hasOwnProperty,s={key:!0,ref:!0,__self:!0,__source:!0};function _(e,t,r){var n,a={},_=null,d=null;for(n in void 0!==r&&(_=""+r),void 0!==t.key&&(_=""+t.key),void 0!==t.ref&&(d=t.ref),t)l.call(t,n)&&!s.hasOwnProperty(n)&&(a[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===a[n]&&(a[n]=t[n]);return{$$typeof:o,type:e,key:_,ref:d,props:a,_owner:i.current}}t.jsx=_,t.jsxs=_},893:(e,t,r)=>{e.exports=r(251)},697:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{ColorModesEnum:()=>O,Heading:()=>L,HeadingSizes:()=>b,HeadingTags:()=>H,Hero:()=>j,Text:()=>x,TextSizes:()=>d,TextTags:()=>u,TextVariants:()=>c,ThemeContext:()=>w,ThemeProvider:()=>B,classMap:()=>v,defaultHeadingTag:()=>y,defaultTextSize:()=>p,defaultTextTag:()=>m,defaultTextVariant:()=>f,useTheme:()=>S});var e=n(893);function t(e){var r,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(r=0;r<e.length;r++)e[r]&&(n=t(e[r]))&&(o&&(o+=" "),o+=n);else for(r in e)e[r]&&(o&&(o+=" "),o+=r);return o}function r(){for(var e,r,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(r=t(e))&&(o&&(o+=" "),o+=r);return o}const a={Hero:"Hero-module__Hero___-LIGB","Hero--align-start":"Hero-module__Hero--align-start___+ux3o","Hero--align-center":"Hero-module__Hero--align-center___L5ing","Hero-heading":"Hero-module__Hero-heading___Ns+oe","Hero-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=n(697),l=n.n(i);function s({className:t,expanded:n=!1}){return(0,e.jsxs)("svg",{className:r("ExpandableArrow-module__ExpandableArrow___Zzb6R",n&&"ExpandableArrow-module__ExpandableArrow--expanded___02I33",t),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[(0,e.jsx)("path",{fill:"currentColor",d:"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"}),(0,e.jsx)("path",{className:r("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",n&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const _={Text:"Text-module__Text___TZM3g","Text--default":"Text-module__Text--default___cDtXM","Text--muted":"Text-module__Text--muted___+aYSJ","Text--700":"Text-module__Text--700___K4B6u","Text--600":"Text-module__Text--600___GROsL","Text--500":"Text-module__Text--500___ljKQp","Text--400":"Text-module__Text--400___jiw28","Text--300":"Text-module__Text--300___iZZEy","Text--200":"Text-module__Text--200___EUSWb","Text--100":"Text-module__Text--100___kOhhP"},d=["700","600","500","400","300","200","100"],u=["p","span","div"],c=["default","muted"],m=u[1],p=d[3],f=c[0];function x({as:t=m,className:n,children:o,size:a=p,variant:i=f,...l}){const s=r(_.Text,_[`Text--${i}`],_[`Text--${a}`],n);return"p"===t?(0,e.jsx)("p",{className:s,...l,children:o}):"div"===t?(0,e.jsx)("div",{className:s,...l,children:o}):(0,e.jsx)("span",{className:s,...l,children:o})}const h={LinkButton:"LinkButton-module__LinkButton___73d6V","LinkButton--label":"LinkButton-module__LinkButton--label___-NRnw","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___bd7ZC","LinkButton--primary":"LinkButton-module__LinkButton--primary___5T51r","LinkButton--label-primary":"LinkButton-module__LinkButton--label-primary___TSZx+","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___Oc3L1"};function g({variant:t="secondary",className:n,children:o,onMouseEnter:a,onMouseLeave:i,onFocus:_,onBlur:d,...u}){const[c,m]=l().useState(!1),[p,f]=l().useState(!1);return(0,e.jsxs)("a",{className:r(h.LinkButton,h[`LinkButton--${t}`],n),onMouseEnter:e=>{m(!0),a?.(e)},onMouseLeave:e=>{m(!1),i?.(e)},onFocus:e=>{f(!0),_?.(e)},onBlur:e=>{f(!1),d?.(e)},...u,children:[(0,e.jsx)(x,{as:"span",size:"400",className:r(h["LinkButton--label"],"primary"===t&&h["LinkButton--label-primary"]),children:o}),(0,e.jsx)(s,{className:h["LinkButton-arrow"],expanded:c||p})]})}const T={Heading:"Heading-module__Heading___D-P9Z","Heading--1":"Heading-module__Heading--1___2biru","Heading--2":"Heading-module__Heading--2___7UT78","Heading--3":"Heading-module__Heading--3___zFRZy","Heading--4":"Heading-module__Heading--4___6NI2U","Heading--5":"Heading-module__Heading--5___Wb4zR","Heading--6":"Heading-module__Heading--6___6GNA5"},b=["1","2","3","4","5","6"],H=["h1","h2","h3","h4","h5","h6"],y=H[1],v={h1:b[0],h2:b[1],h3:b[2],h4:b[3],h5:b[4],h6:b[5]};function L({className:t,children:n,as:o=y,...a}){const i=r(t,T.Heading,T[`Heading--${v[o]}`]),s=l().useCallback((({...e})=>H.includes(o)?l().createElement(o,e,n):(console.error(`Heading: 'as' prop must be one of ${H.join(", ")}`),null)),[o,n]);return(0,e.jsx)(s,{className:i,...a,children:n})}function j({className:t,heading:n,description:o,primaryAction:i,secondaryAction:l,align:s="start"}){return(0,e.jsxs)("div",{className:r(a.Hero,a[`Hero--align-${s}`],t),children:[(0,e.jsx)(L,{className:a["Hero-heading"],as:"h1",children:n}),o?(0,e.jsx)(x,{className:a["Hero-description"],as:"p",size:"400",variant:"muted",children:o}):null,(0,e.jsxs)("div",{className:a["Hero-actions"],children:[(0,e.jsx)(g,{variant:"primary",href:i.href,children:i.text}),l?(0,e.jsx)(g,{variant:"secondary",href:l.href,children:l.text}):null]})]})}var O;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(O||(O={}));const k=O.LIGHT,w=(0,i.createContext)({colorMode:k,availableColorModes:Object.values(O)});function B({colorMode:t=k,children:r,...n}){const[o,a]=(0,i.useState)(t),l=(0,i.useMemo)((()=>Object.values(O)),[]);return(0,i.useEffect)((()=>(t===O.AUTO?a(E()):o!==t&&a(t),M(a))),[t,o,a]),(0,e.jsx)(w.Provider,{value:{colorMode:o,availableColorModes:l},children:(0,e.jsx)("div",{"data-color-mode":o,...n,children:r})})}const N=()=>window.matchMedia(`(prefers-color-scheme: ${O.DARK})`),E=()=>N().matches?O.DARK:O.LIGHT,M=e=>{const t=N(),r=t=>e(t.matches?O.DARK:O.LIGHT);return t.addEventListener("change",r),()=>t.removeEventListener("change",r)},S=()=>(0,i.useContext)(w)})(),o})()}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.1.0-rc.ae0dfda",
+  "version": "0.1.0",
   "author": "GitHub, Inc.",
   "license": "MIT",
   "bugs": {
@@ -13,28 +13,28 @@
   },
   "engines": {
     "npm": ">=8.0.0",
-    "node": ">=14.0.0"
+    "node": ">=16.0.0"
   },
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
-    "lib"
+    "lib",
+    "fonts"
   ],
   "scripts": {
-    "build": "npm run clean && npm run build:css-types && npm run build:css-vars && webpack",
-    "build:css-vars": "ts-node --skipIgnore ./scripts/build-css-variables.ts",
+    "build": "npm run clean && npm run build:css-types && npm run build:tokens && webpack",
+    "build:css-types": "tcm -p 'src/**/*.module.css' .",
     "build:types": "tsc --project tsconfig.build.json",
     "build:storybook": "scripts/build-storybook",
     "build:docs": "scripts/build-docs",
     "build:docs:preview": "scripts/build-docs preview",
-    "build:css-types": "tcm -p 'src/**/*.css' .",
+    "build:tokens": "node scripts/build-tokens.js",
     "check": "tsc --noEmit",
     "clean": "rm -rf lib",
     "format": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css,json}'",
     "format:fix": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css,json}'",
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
-    "postinstall": "cd docs && npm i",
     "release": "npm run build && changeset publish",
     "start": "npm run build && npm run start:storybook & npm run start:docs",
     "start:storybook": "start-storybook -p 6006",
@@ -42,7 +42,6 @@
     "start:css-types": "tcm -w -p 'src/**/*.css' .",
     "test": "jest"
   },
-  "prettier": "@github/prettier-config",
   "peerDependencies": {
     "react": ">=17.0.0 <= 18.0.0",
     "react-dom": ">=17.0.0 <= 18.0.0"
@@ -52,14 +51,14 @@
     "@changesets/cli": "^2.21.0",
     "@github/prettier-config": "^0.0.4",
     "@primer/octicons-react": "^17.0.0",
-    "@primer/primitives": "^7.5.1",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/react": "^6.4.19",
+    "@primer/primitives": "^7.8.3",
+    "@storybook/addon-actions": "^6.5.3",
+    "@storybook/addon-essentials": "^6.5.3",
+    "@storybook/addon-interactions": "^6.5.3",
+    "@storybook/addon-links": "^6.5.3",
+    "@storybook/builder-webpack5": "^6.5.3",
+    "@storybook/manager-webpack5": "^6.5.3",
+    "@storybook/react": "^6.5.3",
     "@storybook/testing-library": "^0.0.9",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
@@ -73,16 +72,18 @@
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "autoprefixer": "^9.8.8",
-    "css-loader": "^5.2.7",
+    "color2k": "^2.0.0",
     "cross-env": "7.0.2",
+    "css-loader": "^5.2.7",
     "eslint": "^8.12.0",
+    "eslint-import-resolver-typescript": "^2.7.0",
     "eslint-plugin-github": "^4.3.6",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-mdx": "^1.17.0",
     "eslint-plugin-primer-react": "^0.7.4",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-import-resolver-typescript": "^2.7.0",
+    "fast-glob": "^3.2.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-axe": "^6.0.0",
@@ -94,6 +95,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook-css-modules-preset": "^1.1.1",
+    "style-dictionary": "^3.7.0",
     "style-loader": "^3.3.1",
     "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.7",

package/CHANGELOG.md

@@ -1,23 +0,0 @@
-# @primer/react-brand
-
-## 0.1.0
-
-### Minor Changes
-
-- [#19](https://github.com/primer/react-brand/pull/19) [`3b22e9e`](https://github.com/primer/react-brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
-
-### Patch Changes
-
-- [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
-
-## 0.0.3
-
-### Patch Changes
-
-- [#18](https://github.com/primer/react-brand/pull/18) [`0835830`](https://github.com/primer/react-brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
-
-## 0.0.2
-
-### Patch Changes
-
-- [#2](https://github.com/primer/react-brand/pull/2) [`ab01a8a`](https://github.com/primer/react-brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)