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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/fonts/alliance-1.woff2 +0 -0
  3. package/fonts/alliance-2.woff2 +0 -0
  4. package/fonts/fonts.css +30 -0
  5. package/lib/Heading/Heading.d.ts +20 -0
  6. package/lib/Heading/index.d.ts +1 -0
  7. package/lib/Hero/Hero.d.ts +2 -1
  8. package/lib/MonaSans/MonaSans.d.ts +10 -0
  9. package/lib/MonaSans/index.d.ts +1 -0
  10. package/lib/Text/Text.d.ts +36 -0
  11. package/lib/Text/index.d.ts +1 -0
  12. package/lib/css/gh-variables.color.css +32 -8
  13. package/lib/css/main.css +1458 -53
  14. package/lib/css/stylesheets.d.ts +8 -0
  15. package/lib/design-tokens/css/tokens/base/size/size.css +24 -0
  16. package/lib/design-tokens/css/tokens/base/typography/typography.css +14 -0
  17. package/lib/design-tokens/css/tokens/functional/size/border.css +17 -0
  18. package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +13 -0
  19. package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +10 -0
  20. package/lib/design-tokens/css/tokens/functional/size/size-fine.css +10 -0
  21. package/lib/design-tokens/css/tokens/functional/size/size.css +54 -0
  22. package/lib/design-tokens/css/tokens/functional/size/viewport.css +6 -0
  23. package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +166 -0
  24. package/lib/design-tokens/css/tokens/functional/typography/typography.css +65 -0
  25. package/lib/design-tokens/js/module/tokens/base/size/size.js +266 -0
  26. package/lib/design-tokens/js/module/tokens/base/typography/typography.js +125 -0
  27. package/lib/design-tokens/js/module/tokens/functional/size/border.js +165 -0
  28. package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +101 -0
  29. package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +73 -0
  30. package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +73 -0
  31. package/lib/design-tokens/js/module/tokens/functional/size/size.js +824 -0
  32. package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +101 -0
  33. package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1973 -0
  34. package/lib/design-tokens/js/tokens/base/size/size.js +22 -0
  35. package/lib/design-tokens/js/tokens/base/typography/typography.js +12 -0
  36. package/lib/design-tokens/js/tokens/functional/size/border.js +15 -0
  37. package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +11 -0
  38. package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +8 -0
  39. package/lib/design-tokens/js/tokens/functional/size/size-fine.js +8 -0
  40. package/lib/design-tokens/js/tokens/functional/size/size.js +52 -0
  41. package/lib/design-tokens/js/tokens/functional/size/viewport.js +11 -0
  42. package/lib/design-tokens/js/tokens/functional/typography/typography.js +63 -0
  43. package/lib/design-tokens/ts/tokens/base/size/size.d.ts +29 -0
  44. package/lib/design-tokens/ts/tokens/base/size/size.js +28 -0
  45. package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +111 -0
  46. package/lib/design-tokens/ts/tokens/base/typography/typography.js +20 -0
  47. package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +26 -0
  48. package/lib/design-tokens/ts/tokens/functional/size/border.js +25 -0
  49. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +18 -0
  50. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +17 -0
  51. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +27 -0
  52. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +26 -0
  53. package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +27 -0
  54. package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +26 -0
  55. package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +101 -0
  56. package/lib/design-tokens/ts/tokens/functional/size/size.js +100 -0
  57. package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +18 -0
  58. package/lib/design-tokens/ts/tokens/functional/size/viewport.js +17 -0
  59. package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +92 -0
  60. package/lib/design-tokens/ts/tokens/functional/typography/typography.js +91 -0
  61. package/lib/index.d.ts +3 -0
  62. package/lib/index.js +1 -1
  63. package/package.json +12 -8
@@ -0,0 +1,101 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 May 2022 16:34:26 GMT
4
+ */
5
+
6
+ declare const tokens: {
7
+ "brand": {
8
+ "control": {
9
+ "minTarget": {
10
+ "fine": string,
11
+ "coarse": string
12
+ },
13
+ "xsmall": {
14
+ "size": string,
15
+ "lineBoxHeight": string,
16
+ "paddingBlock": string,
17
+ "paddingInline": {
18
+ "condensed": string,
19
+ "normal": string,
20
+ "spacious": string
21
+ },
22
+ "gap": string
23
+ },
24
+ "small": {
25
+ "size": string,
26
+ "lineBoxHeight": string,
27
+ "paddingBlock": string,
28
+ "paddingInline": {
29
+ "condensed": string,
30
+ "normal": string
31
+ },
32
+ "gap": string
33
+ },
34
+ "medium": {
35
+ "size": string,
36
+ "lineBoxHeight": string,
37
+ "paddingBlock": string,
38
+ "paddingInline": {
39
+ "condensed": string,
40
+ "normal": string,
41
+ "spacious": string
42
+ },
43
+ "gap": string
44
+ },
45
+ "large": {
46
+ "size": string,
47
+ "lineBoxHeight": string,
48
+ "paddingBlock": string,
49
+ "paddingInline": {
50
+ "normal": string,
51
+ "spacious": string
52
+ },
53
+ "gap": string
54
+ },
55
+ "xlarge": {
56
+ "size": string,
57
+ "lineBoxHeight": string,
58
+ "paddingBlock": string,
59
+ "paddingInline": {
60
+ "normal": string,
61
+ "spacious": string
62
+ },
63
+ "gap": string
64
+ }
65
+ },
66
+ "stack": {
67
+ "padding": {
68
+ "condensed": string,
69
+ "normal": string,
70
+ "spacious": string
71
+ },
72
+ "gap": {
73
+ "condensed": string,
74
+ "normal": string,
75
+ "spacious": string
76
+ }
77
+ },
78
+ "controlStack": {
79
+ "small": {
80
+ "gap": {
81
+ "condensed": string,
82
+ "spacious": string
83
+ }
84
+ },
85
+ "medium": {
86
+ "gap": {
87
+ "condensed": string,
88
+ "spacious": string
89
+ }
90
+ },
91
+ "large": {
92
+ "gap": {
93
+ "auto": string,
94
+ "condensed": string,
95
+ "spacious": string
96
+ }
97
+ }
98
+ }
99
+ }
100
+ }
101
+ export default tokens;
@@ -0,0 +1,100 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 May 2022 16:34:26 GMT
4
+ */
5
+
6
+ module.exports = {
7
+ "brand": {
8
+ "control": {
9
+ "minTarget": {
10
+ "fine": "1rem",
11
+ "coarse": "2.75rem"
12
+ },
13
+ "xsmall": {
14
+ "size": "1.5rem",
15
+ "lineBoxHeight": "1.25rem",
16
+ "paddingBlock": "calc((1.5rem - 1.25rem) / 2)",
17
+ "paddingInline": {
18
+ "condensed": "0.25rem",
19
+ "normal": "0.5rem",
20
+ "spacious": "0.75rem"
21
+ },
22
+ "gap": "0.25rem"
23
+ },
24
+ "small": {
25
+ "size": "1.75rem",
26
+ "lineBoxHeight": "1.25rem",
27
+ "paddingBlock": "calc((1.75rem - 1.25rem) / 2)",
28
+ "paddingInline": {
29
+ "condensed": "0.5rem",
30
+ "normal": "0.75rem"
31
+ },
32
+ "gap": "0.25rem"
33
+ },
34
+ "medium": {
35
+ "size": "2rem",
36
+ "lineBoxHeight": "1.25rem",
37
+ "paddingBlock": "calc((2rem - 1.25rem) / 2)",
38
+ "paddingInline": {
39
+ "condensed": "0.5rem",
40
+ "normal": "0.75rem",
41
+ "spacious": "1rem"
42
+ },
43
+ "gap": "0.5rem"
44
+ },
45
+ "large": {
46
+ "size": "2.5rem",
47
+ "lineBoxHeight": "1.25rem",
48
+ "paddingBlock": "calc((2.5rem - 1.25rem) / 2)",
49
+ "paddingInline": {
50
+ "normal": "0.75rem",
51
+ "spacious": "1rem"
52
+ },
53
+ "gap": "0.5rem"
54
+ },
55
+ "xlarge": {
56
+ "size": "3rem",
57
+ "lineBoxHeight": "1.25rem",
58
+ "paddingBlock": "calc((3rem - 1.25rem) / 2)",
59
+ "paddingInline": {
60
+ "normal": "0.75rem",
61
+ "spacious": "1rem"
62
+ },
63
+ "gap": "0.5rem"
64
+ }
65
+ },
66
+ "stack": {
67
+ "padding": {
68
+ "condensed": "0.5rem",
69
+ "normal": "1rem",
70
+ "spacious": "1.5rem"
71
+ },
72
+ "gap": {
73
+ "condensed": "0.5rem",
74
+ "normal": "1rem",
75
+ "spacious": "1.5rem"
76
+ }
77
+ },
78
+ "controlStack": {
79
+ "small": {
80
+ "gap": {
81
+ "condensed": "0.5rem",
82
+ "spacious": "1rem"
83
+ }
84
+ },
85
+ "medium": {
86
+ "gap": {
87
+ "condensed": "0.5rem",
88
+ "spacious": "0.75rem"
89
+ }
90
+ },
91
+ "large": {
92
+ "gap": {
93
+ "auto": "0.5rem",
94
+ "condensed": "0.5rem",
95
+ "spacious": "0.75rem"
96
+ }
97
+ }
98
+ }
99
+ }
100
+ }
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 May 2022 16:34:26 GMT
4
+ */
5
+
6
+ declare const tokens: {
7
+ "brand": {
8
+ "viewportRange": {
9
+ "narrow": string,
10
+ "narrowLandscape": string,
11
+ "regular": string,
12
+ "wide": string,
13
+ "portrait": string,
14
+ "landscape": string
15
+ }
16
+ }
17
+ }
18
+ export default tokens;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 May 2022 16:34:26 GMT
4
+ */
5
+
6
+ module.exports = {
7
+ "brand": {
8
+ "viewportRange": {
9
+ "narrow": "(max-width: calc(48rem - 0.02px))",
10
+ "narrowLandscape": "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
11
+ "regular": "(min-width: 48rem)",
12
+ "wide": "(min-width: 90rem)",
13
+ "portrait": "(orientation: portrait)",
14
+ "landscape": "(orientation: landscape)"
15
+ }
16
+ }
17
+ }
@@ -0,0 +1,92 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 May 2022 16:34:26 GMT
4
+ */
5
+
6
+ declare const tokens: {
7
+ "brand": {
8
+ "fontStack": {
9
+ "system": string,
10
+ "sansSerif": string,
11
+ "sansSerifAlt": string,
12
+ "monospace": string
13
+ },
14
+ "body": {
15
+ "fontFamily": string
16
+ },
17
+ "heading": {
18
+ "fontFamily": string,
19
+ "weight": {
20
+ "400": string,
21
+ "500": string,
22
+ "600": string,
23
+ "700": string
24
+ },
25
+ "letterSpacing": {
26
+ "400": string,
27
+ "500": string,
28
+ "600": string,
29
+ "700": string
30
+ }
31
+ },
32
+ "text": {
33
+ "weight": {
34
+ "100": string,
35
+ "200": string,
36
+ "300": string,
37
+ "400": string,
38
+ "500": string,
39
+ "600": string,
40
+ "700": string,
41
+ "800": string,
42
+ "900": string,
43
+ "1000": string
44
+ },
45
+ "size": {
46
+ "100": string,
47
+ "200": string,
48
+ "300": string,
49
+ "400": string,
50
+ "500": string,
51
+ "600": string,
52
+ "700": string,
53
+ "800": string,
54
+ "900": string,
55
+ "1000": string
56
+ },
57
+ "lineHeight": {
58
+ "100": string,
59
+ "200": string,
60
+ "300": string,
61
+ "400": string,
62
+ "500": string,
63
+ "600": string,
64
+ "700": string,
65
+ "800": string,
66
+ "900": string,
67
+ "1000": string
68
+ },
69
+ "letterSpacing": {
70
+ "700": string,
71
+ "800": string,
72
+ "900": string,
73
+ "1000": string
74
+ },
75
+ "style": {
76
+ "italic": {
77
+ "1": string,
78
+ "2": string,
79
+ "3": string,
80
+ "4": string,
81
+ "5": string,
82
+ "6": string,
83
+ "7": string,
84
+ "8": string,
85
+ "9": string,
86
+ "10": string
87
+ }
88
+ }
89
+ }
90
+ }
91
+ }
92
+ export default tokens;
@@ -0,0 +1,91 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 May 2022 16:34:26 GMT
4
+ */
5
+
6
+ module.exports = {
7
+ "brand": {
8
+ "fontStack": {
9
+ "system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
10
+ "sansSerif": "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
11
+ "sansSerifAlt": "'Alliance2', 'Alliance2HeaderFallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
12
+ "monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
13
+ },
14
+ "body": {
15
+ "fontFamily": "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
16
+ },
17
+ "heading": {
18
+ "fontFamily": "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
19
+ "weight": {
20
+ "400": "var(--base-text-weight-semibold)",
21
+ "500": "var(--base-text-weight-semibold)",
22
+ "600": "var(--base-text-weight-semibold)",
23
+ "700": "var(--base-text-weight-bold)"
24
+ },
25
+ "letterSpacing": {
26
+ "400": "-0.01em",
27
+ "500": "-0.01em",
28
+ "600": "-0.01em",
29
+ "700": "-0.01em"
30
+ }
31
+ },
32
+ "text": {
33
+ "weight": {
34
+ "100": "var(--base-text-weight-normal)",
35
+ "200": "var(--base-text-weight-normal)",
36
+ "300": "var(--base-text-weight-normal)",
37
+ "400": "var(--base-text-weight-normal)",
38
+ "500": "var(--base-text-weight-normal)",
39
+ "600": "var(--base-text-weight-normal)",
40
+ "700": "var(--base-text-weight-normal)",
41
+ "800": "var(--base-text-weight-extrabold)",
42
+ "900": "var(--base-text-weight-extrabold)",
43
+ "1000": "var(--base-text-weight-extrabold)"
44
+ },
45
+ "size": {
46
+ "100": "0.75rem",
47
+ "200": "0.875rem",
48
+ "300": "1rem",
49
+ "400": "1rem",
50
+ "500": "1.25rem",
51
+ "600": "1.5rem",
52
+ "700": "1.75rem",
53
+ "800": "2rem",
54
+ "900": "2.5rem",
55
+ "1000": "3rem"
56
+ },
57
+ "lineHeight": {
58
+ "100": "1.25rem",
59
+ "200": "1.25rem",
60
+ "300": "1.5rem",
61
+ "400": "1.5rem",
62
+ "500": "1.75rem",
63
+ "600": "2rem",
64
+ "700": "2.5rem",
65
+ "800": "2.25rem",
66
+ "900": "2.75rem",
67
+ "1000": "3.25rem"
68
+ },
69
+ "letterSpacing": {
70
+ "700": "-0.01em",
71
+ "800": "-0.01em",
72
+ "900": "-0.01em",
73
+ "1000": "-0.01em"
74
+ },
75
+ "style": {
76
+ "italic": {
77
+ "1": "'ital' 1",
78
+ "2": "'ital' 2",
79
+ "3": "'ital' 3",
80
+ "4": "'ital' 4",
81
+ "5": "'ital' 5",
82
+ "6": "'ital' 6",
83
+ "7": "'ital' 7",
84
+ "8": "'ital' 8",
85
+ "9": "'ital' 9",
86
+ "10": "'ital' 10"
87
+ }
88
+ }
89
+ }
90
+ }
91
+ }
package/lib/index.d.ts CHANGED
@@ -1,2 +1,5 @@
1
+ export * from './css/stylesheets';
1
2
  export * from './Hero';
3
+ export * from './Text';
4
+ export * from './Heading';
2
5
  export * from './ThemeProvider';
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see index.js.LICENSE.txt */
2
- !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})()}));
2
+ !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,t=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 r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[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[_]))t.call(i,d)&&(s[d]=i[d]);if(r){l=r(i);for(var u=0;u<l.length;u++)n.call(i,l[u])&&(s[l[u]]=i[l[u]])}}return s}},251:(e,r,t)=>{t(418);var n=t(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,r,t){var n,a={},_=null,d=null;for(n in void 0!==t&&(_=""+t),void 0!==r.key&&(_=""+r.key),void 0!==r.ref&&(d=r.ref),r)l.call(r,n)&&!s.hasOwnProperty(n)&&(a[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps)void 0===a[n]&&(a[n]=r[n]);return{$$typeof:o,type:e,key:_,ref:d,props:a,_owner:i.current}}r.jsx=_,r.jsxs=_},893:(e,r,t)=>{e.exports=t(251)},697:r=>{r.exports=e}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var a=t[e]={exports:{}};return r[e](a,a.exports,n),a.exports}n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),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 r(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=r(e[t]))&&(o&&(o+=" "),o+=n);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function t(){for(var e,t,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(t=r(e))&&(o&&(o+=" "),o+=t);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:r,expanded:n=!1}){return(0,e.jsxs)("svg",{className:t("ExpandableArrow-module__ExpandableArrow___Zzb6R",n&&"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:t("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:r=m,className:n,children:o,size:a=p,variant:i=f,...l}){const s=t(_.Text,_[`Text--${i}`],_[`Text--${a}`],n);return"p"===r?(0,e.jsx)("p",{className:s,...l,children:o}):"div"===r?(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:r="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:t(h.LinkButton,h[`LinkButton--${r}`],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:t(h["LinkButton--label"],"primary"===r&&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:r,children:n,as:o=y,...a}){const i=t(r,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:r,heading:n,description:o,primaryAction:i,secondaryAction:l,align:s="start",size:_="large"}){return(0,e.jsxs)("div",{className:t(a.Hero,a[`Hero--align-${s}`],a[`Hero--size-${_}`],r),children:[(0,e.jsx)(L,{className:a["Hero-heading"],as:"large"===_?"h1":"h2",children:n}),o?(0,e.jsx)(x,{className:a["Hero-description"],as:"p",size:"500",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:r=k,children:t,...n}){const[o,a]=(0,i.useState)(r),l=(0,i.useMemo)((()=>Object.values(O)),[]);return(0,i.useEffect)((()=>(r===O.AUTO?a(E()):o!==r&&a(r),M(a))),[r,o,a]),(0,e.jsx)(w.Provider,{value:{colorMode:o,availableColorModes:l},children:(0,e.jsx)("div",{"data-color-mode":o,...n,children:t})})}const N=()=>window.matchMedia(`(prefers-color-scheme: ${O.DARK})`),E=()=>N().matches?O.DARK:O.LIGHT,M=e=>{const r=N(),t=r=>e(r.matches?O.DARK:O.LIGHT);return r.addEventListener("change",t),()=>r.removeEventListener("change",t)},S=()=>(0,i.useContext)(w)})(),o})()}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/react-brand",
3
- "version": "0.1.0-rc.ae0dfda",
3
+ "version": "0.1.0-rc.c341bbe",
4
4
  "author": "GitHub, Inc.",
5
5
  "license": "MIT",
6
6
  "bugs": {
@@ -13,21 +13,23 @@
13
13
  },
14
14
  "engines": {
15
15
  "npm": ">=8.0.0",
16
- "node": ">=14.0.0"
16
+ "node": ">=16.0.0"
17
17
  },
18
18
  "main": "lib/index.js",
19
19
  "types": "lib/index.d.ts",
20
20
  "files": [
21
- "lib"
21
+ "lib",
22
+ "fonts"
22
23
  ],
23
24
  "scripts": {
24
- "build": "npm run clean && npm run build:css-types && npm run build:css-vars && webpack",
25
+ "build": "npm run clean && npm run build:css-types && npm run build:tokens && webpack",
26
+ "build:css-types": "tcm -p 'src/**/*.module.css' .",
25
27
  "build:css-vars": "ts-node --skipIgnore ./scripts/build-css-variables.ts",
26
28
  "build:types": "tsc --project tsconfig.build.json",
27
29
  "build:storybook": "scripts/build-storybook",
28
30
  "build:docs": "scripts/build-docs",
29
31
  "build:docs:preview": "scripts/build-docs preview",
30
- "build:css-types": "tcm -p 'src/**/*.css' .",
32
+ "build:tokens": "node scripts/build-tokens.js && npm run build:css-vars",
31
33
  "check": "tsc --noEmit",
32
34
  "clean": "rm -rf lib",
33
35
  "format": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css,json}'",
@@ -52,7 +54,7 @@
52
54
  "@changesets/cli": "^2.21.0",
53
55
  "@github/prettier-config": "^0.0.4",
54
56
  "@primer/octicons-react": "^17.0.0",
55
- "@primer/primitives": "^7.5.1",
57
+ "@primer/primitives": "0.0.0-20220428230003",
56
58
  "@storybook/addon-actions": "^6.4.19",
57
59
  "@storybook/addon-essentials": "^6.4.19",
58
60
  "@storybook/addon-interactions": "^6.4.19",
@@ -73,16 +75,17 @@
73
75
  "@typescript-eslint/eslint-plugin": "^5.17.0",
74
76
  "@typescript-eslint/parser": "^5.17.0",
75
77
  "autoprefixer": "^9.8.8",
76
- "css-loader": "^5.2.7",
77
78
  "cross-env": "7.0.2",
79
+ "css-loader": "^5.2.7",
78
80
  "eslint": "^8.12.0",
81
+ "eslint-import-resolver-typescript": "^2.7.0",
79
82
  "eslint-plugin-github": "^4.3.6",
80
83
  "eslint-plugin-jsx-a11y": "^6.5.1",
81
84
  "eslint-plugin-mdx": "^1.17.0",
82
85
  "eslint-plugin-primer-react": "^0.7.4",
83
86
  "eslint-plugin-react": "^7.29.4",
84
87
  "eslint-plugin-react-hooks": "^4.4.0",
85
- "eslint-import-resolver-typescript": "^2.7.0",
88
+ "fast-glob": "^3.2.11",
86
89
  "identity-obj-proxy": "^3.0.0",
87
90
  "jest": "^27.5.1",
88
91
  "jest-axe": "^6.0.0",
@@ -94,6 +97,7 @@
94
97
  "react": "^17.0.2",
95
98
  "react-dom": "^17.0.2",
96
99
  "storybook-css-modules-preset": "^1.1.1",
100
+ "style-dictionary": "^3.7.0",
97
101
  "style-loader": "^3.3.1",
98
102
  "ts-jest": "^27.1.3",
99
103
  "ts-loader": "^9.2.7",