@primer/react-brand 0.1.0-rc.c341bbe → 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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
  */
 
 @media (pointer: coarse) { :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
  */
 
 @media (pointer: fine) { :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 16:34:26 GMT
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
  */
 
 :root {