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

package/lib/design-tokens/css/tokens/base/colors/color-scales.css

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

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --base-text-weight-heavy: 900;
+  --base-text-weight-extrabold: 800;
+  --base-text-weight-bold: 700;
+  --base-text-weight-semibold: 600;
+  --base-text-weight-medium: 500;
+  --base-text-weight-normal: 400;
+  --base-text-weight-light: 300;
+}

package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css

@@ -0,0 +1,58 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+:root {
+  --brand-color-text-default: var(--base-color-scale-gray-9);
+  --brand-color-text-muted: var(--base-color-scale-gray-6);
+  --brand-color-text-subtle: var(--base-color-scale-gray-5);
+  --brand-color-text-onEmphasis: var(--base-color-scale-white-0);
+  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
+  --brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
+  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+  --brand-color-canvas-default: var(--base-color-scale-white-0);
+  --brand-color-canvas-overlay: var(--base-color-scale-white-0);
+  --brand-color-canvas-inset: var(--base-color-scale-gray-0);
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-0);
+  --brand-color-border-default: var(--base-color-scale-gray-2);
+  --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+  --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+}
+
+[data-color-mode="light"] {
+  --brand-color-text-default: var(--base-color-scale-gray-9);
+  --brand-color-text-muted: var(--base-color-scale-gray-6);
+  --brand-color-text-subtle: var(--base-color-scale-gray-5);
+  --brand-color-text-onEmphasis: var(--base-color-scale-white-0);
+  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
+  --brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
+  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+  --brand-color-canvas-default: var(--base-color-scale-white-0);
+  --brand-color-canvas-overlay: var(--base-color-scale-white-0);
+  --brand-color-canvas-inset: var(--base-color-scale-gray-0);
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-0);
+  --brand-color-border-default: var(--base-color-scale-gray-2);
+  --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+  --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+}
+
+[data-color-mode="dark"] {
+  --brand-color-text-default: var(--base-color-scale-white-0);
+  --brand-color-text-muted: var(--base-color-scale-gray-3);
+  --brand-color-text-subtle: var(--base-color-scale-gray-4);
+  --brand-color-text-onEmphasis: var(--base-color-scale-black-0);
+  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-4);
+  --brand-color-neutral-emphasis: var(--base-color-scale-gray-4);
+  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-4-hsl) / 99.6%);
+  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-4-hsl) / 99.9%);
+  --brand-color-canvas-default: var(--base-color-scale-gray-9);
+  --brand-color-canvas-overlay: var(--base-color-scale-gray-8);
+  --brand-color-canvas-inset: var(--base-color-scale-black-0);
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-8);
+  --brand-color-border-default: var(--base-color-scale-gray-6);
+  --brand-color-border-muted: var(--base-color-scale-gray-7);
+  --brand-color-border-subtle: hsl(var(--base-color-scale-gray-0-hsl) / 99.9%);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+  --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+  --brand-color-border-default: var(--base-color-scale-gray-2);
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-0);
+  --brand-color-canvas-inset: var(--base-color-scale-gray-0);
+  --brand-color-canvas-overlay: var(--base-color-scale-white-0);
+  --brand-color-canvas-default: var(--base-color-scale-white-0);
+  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+  --brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
+  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
+  --brand-color-text-onEmphasis: var(--base-color-scale-white-0);
+  --brand-color-text-subtle: var(--base-color-scale-gray-5);
+  --brand-color-text-muted: var(--base-color-scale-gray-6);
+  --brand-color-text-default: var(--base-color-scale-gray-9);
+}

package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+:root {
+  --brand-Button-background-base: var(--base-color-scale-black-0);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
+  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
+  --brand-Button-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-focus: hsl(var(--base-color-scale-black-0-hsl) / 15%) 0 0 0 4px;
+}
+
+[data-color-mode="light"] {
+  --brand-Button-background-base: var(--base-color-scale-black-0);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
+  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
+  --brand-Button-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-focus: hsl(var(--base-color-scale-black-0-hsl) / 15%) 0 0 0 4px;
+}
+
+[data-color-mode="dark"] {
+  --brand-Button-background-base: var(--base-color-scale-white-0);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-white-0);
+  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-white-0);
+  --brand-Button-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+  --brand-Button-shadow-focus: hsl(var(--base-color-scale-white-0-hsl) / 25%) 0 0 0 4px;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --brand-Hero-regular-padding: var(--base-size-128) 0;
+  --brand-Hero-narrow-padding: var(--base-size-96) 0;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --brand-borderRadius-full: 100vh;
+  --brand-borderRadius-large: 0.75rem;
+  --brand-borderRadius-medium: 0.375rem;
+  --brand-borderRadius-small: 0.1875rem;
+  --brand-borderWidth-thick: max(4px, 0.25rem);
+  --brand-borderWidth-normal: max(2px, 0.125rem);
+  --brand-borderWidth-thin: max(1px, 0.0625rem);
+  --brand-borderInset-thick: inset 0 0 0 var(--brand-borderWidth-thick);
+  --brand-borderInset-normal: inset 0 0 0 var(--brand-borderWidth-normal);
+  --brand-borderInset-thin: inset 0 0 0 var(--brand-borderWidth-thin);
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --brand-breakpoint-xxlarge: 90rem;
+  --brand-breakpoint-xlarge: 80rem;
+  --brand-breakpoint-large: 63.25rem;
+  --brand-breakpoint-medium: 48rem;
+  --brand-breakpoint-small: 34rem;
+  --brand-breakpoint-xsmall: 20rem;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+@media (pointer: coarse) { :root {
+  --brand-controlStack-medium-gap-auto: var(--base-size-12);
+  --brand-controlStack-small-gap-auto: var(--base-size-16);
+  --brand-control-minTarget-auto: var(--base-size-44);
+}}

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+@media (pointer: fine) { :root {
+  --brand-controlStack-medium-gap-auto: var(--base-size-8);
+  --brand-controlStack-small-gap-auto: var(--base-size-8);
+  --brand-control-minTarget-auto: var(--base-size-16);
+}}

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

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --brand-controlStack-large-gap-spacious: var(--base-size-12);
+  --brand-controlStack-large-gap-condensed: var(--base-size-8);
+  --brand-controlStack-large-gap-auto: var(--base-size-8);
+  --brand-controlStack-medium-gap-spacious: var(--base-size-12);
+  --brand-controlStack-medium-gap-condensed: var(--base-size-8);
+  --brand-controlStack-small-gap-spacious: var(--base-size-16);
+  --brand-controlStack-small-gap-condensed: var(--base-size-8);
+  --brand-stack-gap-spacious: var(--base-size-24);
+  --brand-stack-gap-normal: var(--base-size-16);
+  --brand-stack-gap-condensed: var(--base-size-8);
+  --brand-stack-padding-spacious: var(--base-size-24);
+  --brand-stack-padding-normal: var(--base-size-16);
+  --brand-stack-padding-condensed: var(--base-size-8);
+  --brand-control-xlarge-gap: var(--base-size-8);
+  --brand-control-xlarge-paddingInline-spacious: var(--base-size-16);
+  --brand-control-xlarge-paddingInline-normal: var(--base-size-12);
+  --brand-control-xlarge-lineBoxHeight: var(--base-size-20);
+  --brand-control-xlarge-size: var(--base-size-48);
+  --brand-control-large-gap: var(--base-size-8);
+  --brand-control-large-paddingInline-spacious: var(--base-size-16);
+  --brand-control-large-paddingInline-normal: var(--base-size-12);
+  --brand-control-large-lineBoxHeight: var(--base-size-20);
+  --brand-control-large-size: var(--base-size-40);
+  --brand-control-medium-gap: var(--base-size-8);
+  --brand-control-medium-paddingInline-spacious: var(--base-size-16);
+  --brand-control-medium-paddingInline-normal: var(--base-size-12);
+  --brand-control-medium-paddingInline-condensed: var(--base-size-8);
+  --brand-control-medium-lineBoxHeight: var(--base-size-20);
+  --brand-control-medium-size: var(--base-size-32);
+  --brand-control-small-gap: var(--base-size-4);
+  --brand-control-small-paddingInline-normal: var(--base-size-12);
+  --brand-control-small-paddingInline-condensed: var(--base-size-8);
+  --brand-control-small-lineBoxHeight: var(--base-size-20);
+  --brand-control-small-size: var(--base-size-28);
+  --brand-control-xsmall-gap: var(--base-size-4);
+  --brand-control-xsmall-paddingInline-spacious: var(--base-size-12);
+  --brand-control-xsmall-paddingInline-normal: var(--base-size-8);
+  --brand-control-xsmall-paddingInline-condensed: var(--base-size-4);
+  --brand-control-xsmall-lineBoxHeight: var(--base-size-20);
+  --brand-control-xsmall-size: var(--base-size-24);
+  --brand-control-minTarget-coarse: var(--base-size-44);
+  --brand-control-minTarget-fine: var(--base-size-16);
+  --brand-control-xlarge-paddingBlock: calc((var(--brand-control-xlarge-size) - var(--brand-control-xlarge-lineBoxHeight)) / 2);
+  --brand-control-large-paddingBlock: calc((var(--brand-control-large-size) - var(--brand-control-large-lineBoxHeight)) / 2);
+  --brand-control-medium-paddingBlock: calc((var(--brand-control-medium-size) - var(--brand-control-medium-lineBoxHeight)) / 2);
+  --brand-control-small-paddingBlock: calc((var(--brand-control-small-size) - var(--brand-control-small-lineBoxHeight)) / 2);
+  --brand-control-xsmall-paddingBlock: calc((var(--brand-control-xsmall-size) - var(--brand-control-xsmall-lineBoxHeight)) / 2);
+}

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

@@ -0,0 +1,6 @@
+@custom-media --brand-viewportRange-narrow-viewport (max-width: calc(48rem - 0.02px));
+@custom-media --brand-viewportRange-narrowLandscape-viewport (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
+@custom-media --brand-viewportRange-regular-viewport (min-width: 48rem);
+@custom-media --brand-viewportRange-wide-viewport (min-width: 90rem);
+@custom-media --brand-viewportRange-portrait-viewport (orientation: portrait);
+@custom-media --brand-viewportRange-landscape-viewport (orientation: landscape);

package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css

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

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

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