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

package/lib/css/stylesheets.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Add external stylesheets below.
+ */
+import './reset.css';
+import '../../lib/css/gh-variables.color.css';
+import '../../lib/design-tokens/css/tokens/base/size/size.css';
+import '../../lib/design-tokens/css/tokens/functional/typography/typography-responsive.css';
+import '../../lib/design-tokens/css/tokens/functional/size/breakpoints.css';

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 16:34:26 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, 09 May 2022 16:34:26 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/size/border.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 16:34:26 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, 09 May 2022 16:34:26 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, 09 May 2022 16:34:26 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, 09 May 2022 16:34:26 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, 09 May 2022 16:34:26 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, 09 May 2022 16:34:26 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, 09 May 2022 16:34:26 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);
+}

package/lib/design-tokens/js/module/tokens/base/size/size.js

@@ -0,0 +1,266 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 09 May 2022 16:34:26 GMT
+ */
+
+module.exports = {
+  "base": {
+    "size": {
+      "4": {
+        "value": "0.25rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "4px"
+        },
+        "name": "4",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "4"
+        ]
+      },
+      "8": {
+        "value": "0.5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "8px"
+        },
+        "name": "8",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "8"
+        ]
+      },
+      "12": {
+        "value": "0.75rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "12px"
+        },
+        "name": "12",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "12"
+        ]
+      },
+      "16": {
+        "value": "1rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "16px"
+        },
+        "name": "16",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "16"
+        ]
+      },
+      "20": {
+        "value": "1.25rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "20px"
+        },
+        "name": "20",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "20"
+        ]
+      },
+      "24": {
+        "value": "1.5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "24px"
+        },
+        "name": "24",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "24"
+        ]
+      },
+      "28": {
+        "value": "1.75rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "28px"
+        },
+        "name": "28",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "28"
+        ]
+      },
+      "32": {
+        "value": "2rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "32px"
+        },
+        "name": "32",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "32"
+        ]
+      },
+      "36": {
+        "value": "2.25rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "36px"
+        },
+        "name": "36",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "36"
+        ]
+      },
+      "40": {
+        "value": "2.5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "40px"
+        },
+        "name": "40",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "40"
+        ]
+      },
+      "44": {
+        "value": "2.75rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "44px"
+        },
+        "name": "44",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "44"
+        ]
+      },
+      "48": {
+        "value": "3rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "48px"
+        },
+        "name": "48",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "48"
+        ]
+      },
+      "64": {
+        "value": "4rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "64px"
+        },
+        "name": "64",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "64"
+        ]
+      },
+      "80": {
+        "value": "5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "80px"
+        },
+        "name": "80",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "80"
+        ]
+      },
+      "96": {
+        "value": "6rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "96px"
+        },
+        "name": "96",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "96"
+        ]
+      },
+      "112": {
+        "value": "7rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "112px"
+        },
+        "name": "112",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "112"
+        ]
+      },
+      "128": {
+        "value": "8rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "128px"
+        },
+        "name": "128",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "128"
+        ]
+      }
+    }
+  }
+};