npm - @primer/react-brand - Versions diffs - 0.3.0 → 0.4.0-rc.420e2e9 - Mend

@primer/react-brand 0.3.0 → 0.4.0-rc.420e2e9

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 (135) hide show

package/lib/design-tokens/js/module/tokens/functional/components/control/base.js ADDED Viewed

@@ -0,0 +1,195 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
+ */
+module.exports = {
+  "brand": {
+    "control": {
+      "medium": {
+        "size": {
+          "value": "2.5rem",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "40px"
+          },
+          "name": "size",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "medium",
+            "size"
+          ]
+        },
+        "padding": {
+          "value": "0.625rem",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "10px"
+          },
+          "name": "padding",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "medium",
+            "padding"
+          ]
+        },
+        "fontWeight": {
+          "value": "var(--brand-text-weight-200)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--brand-text-weight-200)"
+          },
+          "name": "fontWeight",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "medium",
+            "fontWeight"
+          ]
+        },
+        "fontSize": {
+          "value": "var(--brand-text-size-200)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--brand-text-size-200)"
+          },
+          "name": "fontSize",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "medium",
+            "fontSize"
+          ]
+        }
+      },
+      "large": {
+        "size": {
+          "value": "var(--base-size-48)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--base-size-48)"
+          },
+          "name": "size",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "large",
+            "size"
+          ]
+        },
+        "padding": {
+          "value": "var(--base-size-12)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--base-size-12)"
+          },
+          "name": "padding",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "large",
+            "padding"
+          ]
+        },
+        "fontWeight": {
+          "value": "var(--brand-text-weight-300)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--brand-text-weight-300)"
+          },
+          "name": "fontWeight",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "large",
+            "fontWeight"
+          ]
+        },
+        "fontSize": {
+          "value": "var(--brand-text-size-300)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--brand-text-size-300)"
+          },
+          "name": "fontSize",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "large",
+            "fontSize"
+          ]
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "var(--brand-borderRadius-medium)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--brand-borderRadius-medium)"
+          },
+          "name": "radius",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "border",
+            "radius"
+          ]
+        }
+      },
+      "animation": {
+        "duration": {
+          "value": "80ms",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "80ms"
+          },
+          "name": "duration",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "animation",
+            "duration"
+          ]
+        },
+        "easing": {
+          "value": "cubic-bezier(0.33, 1, 0.68, 1)",
+          "filePath": "tokens/functional/components/control/base.json",
+          "isSource": true,
+          "original": {
+            "value": "cubic-bezier(0.33, 1, 0.68, 1)"
+          },
+          "name": "easing",
+          "attributes": {},
+          "path": [
+            "brand",
+            "control",
+            "animation",
+            "easing"
+          ]
+        }
+      }
+    }
+  }
+};

package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/size/border.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/size/size.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {
@@ -262,22 +262,6 @@ module.exports = {
         }
       },
       "medium": {
-        "size": {
-          "value": "2rem",
-          "filePath": "tokens/functional/size/size.json",
-          "isSource": true,
-          "original": {
-            "value": "{base.size.32}"
-          },
-          "name": "size",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "medium",
-            "size"
-          ]
-        },
         "lineBoxHeight": {
           "value": "1.25rem",
           "filePath": "tokens/functional/size/size.json",
@@ -295,7 +279,7 @@ module.exports = {
           ]
         },
         "paddingBlock": {
-          "value": "calc((2rem - 1.25rem) / 2)",
+          "value": "calc((2.5rem - 1.25rem) / 2)",
           "filePath": "tokens/functional/size/size.json",
           "isSource": true,
           "original": {
@@ -381,22 +365,6 @@ module.exports = {
         }
       },
       "large": {
-        "size": {
-          "value": "2.5rem",
-          "filePath": "tokens/functional/size/size.json",
-          "isSource": true,
-          "original": {
-            "value": "{base.size.40}"
-          },
-          "name": "size",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "large",
-            "size"
-          ]
-        },
         "lineBoxHeight": {
           "value": "1.25rem",
           "filePath": "tokens/functional/size/size.json",
@@ -414,7 +382,7 @@ module.exports = {
           ]
         },
         "paddingBlock": {
-          "value": "calc((2.5rem - 1.25rem) / 2)",
+          "value": "calc((var(--base-size-48) - 1.25rem) / 2)",
           "filePath": "tokens/functional/size/size.json",
           "isSource": true,
           "original": {

package/lib/design-tokens/js/module/tokens/functional/size/viewport.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/typography/typography.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 module.exports = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BaseColorScaleGray0 = "210 25% 98%";

package/lib/design-tokens/js/tokens/base/size/size.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 export const BaseSize4 = "0.25rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BaseTextWeightLight = 300;

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

@@ -1,8 +1,16 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
+export const BrandColorSuccessFg = "var(--base-color-scale-green-5)";
+export const BrandColorSuccessEmphasis = "var(--base-color-scale-green-4)";
+export const BrandColorSuccessMuted = "hsl(var(--base-color-scale-green-3-hsl) / 60%)";
+export const BrandColorSuccessSubtle = "var(--base-color-scale-green-0)";
+export const BrandColorErrorFg = "var(--base-color-scale-red-5)";
+export const BrandColorErrorEmphasis = "var(--base-color-scale-red-5)";
+export const BrandColorErrorMuted = "hsl(var(--base-color-scale-red-3-hsl) / 60%)";
+export const BrandColorErrorSubtle = "var(--base-color-scale-red-0)";
 export const BrandColorAccentFg = "var(--base-color-scale-pink-5)";
 export const BrandColorAccentEmphasis = "var(--base-color-scale-pink-5)";
 export const BrandColorAccentMuted = "hsl(var(--base-color-scale-pink-3-hsl) / 60%)";

package/lib/design-tokens/js/tokens/functional/components/control/base.js ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
+ */
+export const BrandControlMediumSize = "2.5rem";
+export const BrandControlMediumPadding = "0.625rem";
+export const BrandControlMediumFontWeight = "var(--brand-text-weight-200)";
+export const BrandControlMediumFontSize = "var(--brand-text-size-200)";
+export const BrandControlLargeSize = "var(--base-size-48)";
+export const BrandControlLargePadding = "var(--base-size-12)";
+export const BrandControlLargeFontWeight = "var(--brand-text-weight-300)";
+export const BrandControlLargeFontSize = "var(--brand-text-size-300)";
+export const BrandControlBorderRadius = "var(--brand-borderRadius-medium)";
+export const BrandControlAnimationDuration = "80ms";
+export const BrandControlAnimationEasing = "cubic-bezier(0.33, 1, 0.68, 1)";

package/lib/design-tokens/js/tokens/functional/components/faq/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandFAQHeadingCenteredMaxWidth = "37.5rem";

package/lib/design-tokens/js/tokens/functional/components/faq/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandFAQHeadingColor = "var(--brand-color-text-default)";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandHeroNarrowPadding = "var(--base-size-96) 0";

package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandInlineLinkColorRest = "var(--base-color-scale-blue-5)";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandRiverLayoutMarginVertical = "var(--base-size-48) 0";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandBreakpointXsmall = "20rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 export const BrandControlMinTargetAuto = "2.75rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 export const BrandControlMinTargetAuto = "1rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandControlMinTargetFine = "1rem";
@@ -18,16 +18,14 @@ export const BrandControlSmallPaddingBlock = "calc((1.75rem - 1.25rem) / 2)";
 export const BrandControlSmallPaddingInlineCondensed = "0.5rem";
 export const BrandControlSmallPaddingInlineNormal = "0.75rem";
 export const BrandControlSmallGap = "0.25rem";
-export const BrandControlMediumSize = "2rem";
 export const BrandControlMediumLineBoxHeight = "1.25rem";
-export const BrandControlMediumPaddingBlock = "calc((2rem - 1.25rem) / 2)";
+export const BrandControlMediumPaddingBlock = "calc((2.5rem - 1.25rem) / 2)";
 export const BrandControlMediumPaddingInlineCondensed = "0.5rem";
 export const BrandControlMediumPaddingInlineNormal = "0.75rem";
 export const BrandControlMediumPaddingInlineSpacious = "1rem";
 export const BrandControlMediumGap = "0.5rem";
-export const BrandControlLargeSize = "2.5rem";
 export const BrandControlLargeLineBoxHeight = "1.25rem";
-export const BrandControlLargePaddingBlock = "calc((2.5rem - 1.25rem) / 2)";
+export const BrandControlLargePaddingBlock = "calc((var(--base-size-48) - 1.25rem) / 2)";
 export const BrandControlLargePaddingInlineNormal = "0.75rem";
 export const BrandControlLargePaddingInlineSpacious = "1rem";
 export const BrandControlLargeGap = "0.5rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";

package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandHeadingLineHeight400 = "1.25rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 export const BrandFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 declare const tokens: {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 module.exports = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 declare const tokens: {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 module.exports = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 declare const tokens: {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 module.exports = {