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

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

@@ -0,0 +1,137 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BaseColorScaleGray0 = "210 25% 98%";
+export const BaseColorScaleGray1 = "210 24% 93%";
+export const BaseColorScaleGray2 = "210 16% 85%";
+export const BaseColorScaleGray3 = "210 13% 75%";
+export const BaseColorScaleGray4 = "212 10% 62%";
+export const BaseColorScaleGray5 = "210 8% 48%";
+export const BaseColorScaleGray6 = "212 10% 38%";
+export const BaseColorScaleGray7 = "212 11% 29%";
+export const BaseColorScaleGray8 = "212 12% 22%";
+export const BaseColorScaleGray9 = "213 13% 16%";
+export const BaseColorScaleRed0 = "4 100% 97%";
+export const BaseColorScaleRed1 = "3 100% 91%";
+export const BaseColorScaleRed2 = "2 100% 85%";
+export const BaseColorScaleRed3 = "1 100% 76%";
+export const BaseColorScaleRed4 = "359 95% 65%";
+export const BaseColorScaleRed5 = "357 67% 50%";
+export const BaseColorScaleRed6 = "356 71% 38%";
+export const BaseColorScaleRed7 = "355 71% 30%";
+export const BaseColorScaleRed8 = "354 74% 24%";
+export const BaseColorScaleRed9 = "352 91% 17%";
+export const BaseColorScaleCoral0 = "15 100% 96%";
+export const BaseColorScaleCoral1 = "12 100% 90%";
+export const BaseColorScaleCoral2 = "12 100% 82%";
+export const BaseColorScaleCoral3 = "11 97% 72%";
+export const BaseColorScaleCoral4 = "11 81% 60%";
+export const BaseColorScaleCoral5 = "9 64% 47%";
+export const BaseColorScaleCoral6 = "9 70% 36%";
+export const BaseColorScaleCoral7 = "8 79% 28%";
+export const BaseColorScaleCoral8 = "7 91% 22%";
+export const BaseColorScaleCoral9 = "6 98% 16%";
+export const BaseColorScaleOrange0 = "28 100% 95%";
+export const BaseColorScaleOrange1 = "28 100% 85%";
+export const BaseColorScaleOrange2 = "27 100% 74%";
+export const BaseColorScaleOrange3 = "25 96% 63%";
+export const BaseColorScaleOrange4 = "24 76% 51%";
+export const BaseColorScaleOrange5 = "24 100% 37%";
+export const BaseColorScaleOrange6 = "23 100% 29%";
+export const BaseColorScaleOrange7 = "22 100% 23%";
+export const BaseColorScaleOrange8 = "22 100% 18%";
+export const BaseColorScaleOrange9 = "19 100% 14%";
+export const BaseColorScaleYellow0 = "50 89% 89%";
+export const BaseColorScaleYellow1 = "48 87% 73%";
+export const BaseColorScaleYellow2 = "46 76% 60%";
+export const BaseColorScaleYellow3 = "44 65% 50%";
+export const BaseColorScaleYellow4 = "42 100% 37%";
+export const BaseColorScaleYellow5 = "40 100% 30%";
+export const BaseColorScaleYellow6 = "37 100% 24%";
+export const BaseColorScaleYellow7 = "36 98% 19%";
+export const BaseColorScaleYellow8 = "35 100% 15%";
+export const BaseColorScaleYellow9 = "34 90% 12%";
+export const BaseColorScaleLemon0 = "54 95% 85%";
+export const BaseColorScaleLemon1 = "52 87% 67%";
+export const BaseColorScaleLemon2 = "51 70% 56%";
+export const BaseColorScaleLemon3 = "50 72% 45%";
+export const BaseColorScaleLemon4 = "50 98% 33%";
+export const BaseColorScaleLemon5 = "49 100% 26%";
+export const BaseColorScaleLemon6 = "48 100% 20%";
+export const BaseColorScaleLemon7 = "47 100% 16%";
+export const BaseColorScaleLemon8 = "46 100% 13%";
+export const BaseColorScaleLemon9 = "43 100% 10%";
+export const BaseColorScaleLime0 = "75 86% 85%";
+export const BaseColorScaleLime1 = "76 75% 70%";
+export const BaseColorScaleLime2 = "76 59% 58%";
+export const BaseColorScaleLime3 = "77 51% 48%";
+export const BaseColorScaleLime4 = "78 57% 38%";
+export const BaseColorScaleLime5 = "80 64% 29%";
+export const BaseColorScaleLime6 = "82 66% 22%";
+export const BaseColorScaleLime7 = "84 85% 16%";
+export const BaseColorScaleLime8 = "86 90% 12%";
+export const BaseColorScaleLime9 = "88 96% 9%";
+export const BaseColorScaleGreen0 = "133 80% 92%";
+export const BaseColorScaleGreen1 = "134 66% 80%";
+export const BaseColorScaleGreen2 = "135 62% 65%";
+export const BaseColorScaleGreen3 = "136 50% 53%";
+export const BaseColorScaleGreen4 = "137 57% 41%";
+export const BaseColorScaleGreen5 = "137 66% 30%";
+export const BaseColorScaleGreen6 = "138 71% 23%";
+export const BaseColorScaleGreen7 = "141 90% 16%";
+export const BaseColorScaleGreen8 = "142 100% 12%";
+export const BaseColorScaleGreen9 = "143 100% 9%";
+export const BaseColorScaleTeal0 = "172 72% 92%";
+export const BaseColorScaleTeal1 = "173 58% 80%";
+export const BaseColorScaleTeal2 = "177 57% 63%";
+export const BaseColorScaleTeal3 = "177 46% 51%";
+export const BaseColorScaleTeal4 = "179 51% 41%";
+export const BaseColorScaleTeal5 = "180 66% 29%";
+export const BaseColorScaleTeal6 = "181 67% 23%";
+export const BaseColorScaleTeal7 = "182 95% 15%";
+export const BaseColorScaleTeal8 = "182 82% 13%";
+export const BaseColorScaleTeal9 = "182 80% 10%";
+export const BaseColorScaleBlue0 = "200 100% 95%";
+export const BaseColorScaleBlue1 = "203 100% 87%";
+export const BaseColorScaleBlue2 = "205 100% 77%";
+export const BaseColorScaleBlue3 = "208 100% 67%";
+export const BaseColorScaleBlue4 = "211 100% 58%";
+export const BaseColorScaleBlue5 = "212 92% 45%";
+export const BaseColorScaleBlue6 = "213 95% 36%";
+export const BaseColorScaleBlue7 = "214 96% 29%";
+export const BaseColorScaleBlue8 = "216 82% 24%";
+export const BaseColorScaleBlue9 = "217 89% 18%";
+export const BaseColorScaleIndigo0 = "229 100% 97%";
+export const BaseColorScaleIndigo1 = "231 100% 92%";
+export const BaseColorScaleIndigo2 = "232 100% 86%";
+export const BaseColorScaleIndigo3 = "234 100% 80%";
+export const BaseColorScaleIndigo4 = "234 100% 73%";
+export const BaseColorScaleIndigo5 = "237 84% 64%";
+export const BaseColorScaleIndigo6 = "238 61% 53%";
+export const BaseColorScaleIndigo7 = "237 58% 41%";
+export const BaseColorScaleIndigo8 = "235 58% 32%";
+export const BaseColorScaleIndigo9 = "235 57% 23%";
+export const BaseColorScalePurple0 = "285 100% 97%";
+export const BaseColorScalePurple1 = "271 100% 92%";
+export const BaseColorScalePurple2 = "267 100% 86%";
+export const BaseColorScalePurple3 = "265 100% 80%";
+export const BaseColorScalePurple4 = "261 92% 72%";
+export const BaseColorScalePurple5 = "261 69% 59%";
+export const BaseColorScalePurple6 = "261 53% 48%";
+export const BaseColorScalePurple7 = "261 56% 38%";
+export const BaseColorScalePurple8 = "261 59% 30%";
+export const BaseColorScalePurple9 = "260 66% 23%";
+export const BaseColorScalePink0 = "330 100% 97%";
+export const BaseColorScalePink1 = "327 100% 91%";
+export const BaseColorScalePink2 = "327 100% 84%";
+export const BaseColorScalePink3 = "326 100% 75%";
+export const BaseColorScalePink4 = "325 76% 63%";
+export const BaseColorScalePink5 = "324 54% 49%";
+export const BaseColorScalePink6 = "323 59% 38%";
+export const BaseColorScalePink7 = "322 58% 30%";
+export const BaseColorScalePink8 = "320 67% 23%";
+export const BaseColorScalePink9 = "319 93% 16%";
+export const BaseColorScaleBlack0 = "213 14% 12%";
+export const BaseColorScaleWhite0 = "0 100% 100%";

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

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+export const BaseSize4 = "0.25rem";
+export const BaseSize8 = "0.5rem";
+export const BaseSize12 = "0.75rem";
+export const BaseSize16 = "1rem";
+export const BaseSize20 = "1.25rem";
+export const BaseSize24 = "1.5rem";
+export const BaseSize28 = "1.75rem";
+export const BaseSize32 = "2rem";
+export const BaseSize36 = "2.25rem";
+export const BaseSize40 = "2.5rem";
+export const BaseSize44 = "2.75rem";
+export const BaseSize48 = "3rem";
+export const BaseSize64 = "4rem";
+export const BaseSize80 = "5rem";
+export const BaseSize96 = "6rem";
+export const BaseSize112 = "7rem";
+export const BaseSize128 = "8rem";

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BaseTextWeightLight = 300;
+export const BaseTextWeightNormal = 400;
+export const BaseTextWeightMedium = 500;
+export const BaseTextWeightSemibold = 600;
+export const BaseTextWeightBold = 700;
+export const BaseTextWeightExtrabold = 800;
+export const BaseTextWeightHeavy = 900;

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

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BrandColorTextDefault = "var(--base-color-scale-gray-9)";
+export const BrandColorTextMuted = "var(--base-color-scale-gray-6)";
+export const BrandColorTextSubtle = "var(--base-color-scale-gray-5)";
+export const BrandColorTextOnEmphasis = "var(--base-color-scale-white-0)";
+export const BrandColorNeutralEmphasisPlus = "var(--base-color-scale-gray-9)";
+export const BrandColorNeutralEmphasis = "var(--base-color-scale-gray-5)";
+export const BrandColorNeutralMuted = "hsl(var(--base-color-scale-gray-3-hsl) / 99.8%)";
+export const BrandColorNeutralSubtle = "hsl(var(--base-color-scale-gray-1-hsl) / 99.5%)";
+export const BrandColorCanvasDefault = "var(--base-color-scale-white-0)";
+export const BrandColorCanvasOverlay = "var(--base-color-scale-white-0)";
+export const BrandColorCanvasInset = "var(--base-color-scale-gray-0)";
+export const BrandColorCanvasSubtle = "var(--base-color-scale-gray-0)";
+export const BrandColorBorderDefault = "var(--base-color-scale-gray-2)";
+export const BrandColorBorderMuted = "hsl(var(--base-color-scale-gray-2-hsl) / 99.7%)";
+export const BrandColorBorderSubtle = "hsl(var(--base-color-scale-black-0-hsl) / 99.85%)";

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BrandHeroNarrowPadding = "var(--base-size-96) 0";
+export const BrandHeroRegularPadding = "var(--base-size-128) 0";

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

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BrandBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";
+export const BrandBorderInsetNormal = "inset 0 0 0 max(2px, 0.125rem)";
+export const BrandBorderInsetThick = "inset 0 0 0 max(4px, 0.25rem)";
+export const BrandBorderWidthThin = "max(1px, 0.0625rem)";
+export const BrandBorderWidthNormal = "max(2px, 0.125rem)";
+export const BrandBorderWidthThick = "max(4px, 0.25rem)";
+export const BrandBorderRadiusSmall = "0.1875rem";
+export const BrandBorderRadiusMedium = "0.375rem";
+export const BrandBorderRadiusLarge = "0.75rem";
+export const BrandBorderRadiusFull = "100vh";

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

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BrandBreakpointXsmall = "20rem";
+export const BrandBreakpointSmall = "34rem";
+export const BrandBreakpointMedium = "48rem";
+export const BrandBreakpointLarge = "63.25rem";
+export const BrandBreakpointXlarge = "80rem";
+export const BrandBreakpointXxlarge = "90rem";

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+export const BrandControlMinTargetAuto = "2.75rem";
+export const BrandControlStackSmallGapAuto = "1rem";
+export const BrandControlStackMediumGapAuto = "0.75rem";

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+export const BrandControlMinTargetAuto = "1rem";
+export const BrandControlStackSmallGapAuto = "0.5rem";
+export const BrandControlStackMediumGapAuto = "0.5rem";

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

@@ -0,0 +1,52 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BrandControlMinTargetFine = "1rem";
+export const BrandControlMinTargetCoarse = "2.75rem";
+export const BrandControlXsmallSize = "1.5rem";
+export const BrandControlXsmallLineBoxHeight = "1.25rem";
+export const BrandControlXsmallPaddingBlock = "calc((1.5rem - 1.25rem) / 2)";
+export const BrandControlXsmallPaddingInlineCondensed = "0.25rem";
+export const BrandControlXsmallPaddingInlineNormal = "0.5rem";
+export const BrandControlXsmallPaddingInlineSpacious = "0.75rem";
+export const BrandControlXsmallGap = "0.25rem";
+export const BrandControlSmallSize = "1.75rem";
+export const BrandControlSmallLineBoxHeight = "1.25rem";
+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 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 BrandControlLargePaddingInlineNormal = "0.75rem";
+export const BrandControlLargePaddingInlineSpacious = "1rem";
+export const BrandControlLargeGap = "0.5rem";
+export const BrandControlXlargeSize = "3rem";
+export const BrandControlXlargeLineBoxHeight = "1.25rem";
+export const BrandControlXlargePaddingBlock = "calc((3rem - 1.25rem) / 2)";
+export const BrandControlXlargePaddingInlineNormal = "0.75rem";
+export const BrandControlXlargePaddingInlineSpacious = "1rem";
+export const BrandControlXlargeGap = "0.5rem";
+export const BrandStackPaddingCondensed = "0.5rem";
+export const BrandStackPaddingNormal = "1rem";
+export const BrandStackPaddingSpacious = "1.5rem";
+export const BrandStackGapCondensed = "0.5rem";
+export const BrandStackGapNormal = "1rem";
+export const BrandStackGapSpacious = "1.5rem";
+export const BrandControlStackSmallGapCondensed = "0.5rem";
+export const BrandControlStackSmallGapSpacious = "1rem";
+export const BrandControlStackMediumGapCondensed = "0.5rem";
+export const BrandControlStackMediumGapSpacious = "0.75rem";
+export const BrandControlStackLargeGapAuto = "0.5rem";
+export const BrandControlStackLargeGapCondensed = "0.5rem";
+export const BrandControlStackLargeGapSpacious = "0.75rem";

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

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BrandViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";
+export const BrandViewportRangeNarrowLandscape = "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))";
+export const BrandViewportRangeRegular = "(min-width: 48rem)";
+export const BrandViewportRangeWide = "(min-width: 90rem)";
+export const BrandViewportRangePortrait = "(orientation: portrait)";
+export const BrandViewportRangeLandscape = "(orientation: landscape)";

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

@@ -0,0 +1,63 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+export const BrandFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandFontStackSansSerif = "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandFontStackSansSerifAlt = "'Alliance2', 'Alliance2HeaderFallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandFontStackMonospace = "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace";
+export const BrandBodyFontFamily = "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandHeadingFontFamily = "'Alliance1', 'Alliance1Fallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+export const BrandHeadingWeight400 = "var(--base-text-weight-semibold)";
+export const BrandHeadingWeight500 = "var(--base-text-weight-semibold)";
+export const BrandHeadingWeight600 = "var(--base-text-weight-semibold)";
+export const BrandHeadingWeight700 = "var(--base-text-weight-bold)";
+export const BrandHeadingLetterSpacing400 = "-0.01em";
+export const BrandHeadingLetterSpacing500 = "-0.01em";
+export const BrandHeadingLetterSpacing600 = "-0.01em";
+export const BrandHeadingLetterSpacing700 = "-0.01em";
+export const BrandTextWeight100 = "var(--base-text-weight-normal)";
+export const BrandTextWeight200 = "var(--base-text-weight-normal)";
+export const BrandTextWeight300 = "var(--base-text-weight-normal)";
+export const BrandTextWeight400 = "var(--base-text-weight-normal)";
+export const BrandTextWeight500 = "var(--base-text-weight-normal)";
+export const BrandTextWeight600 = "var(--base-text-weight-normal)";
+export const BrandTextWeight700 = "var(--base-text-weight-normal)";
+export const BrandTextWeight800 = "var(--base-text-weight-extrabold)";
+export const BrandTextWeight900 = "var(--base-text-weight-extrabold)";
+export const BrandTextWeight1000 = "var(--base-text-weight-extrabold)";
+export const BrandTextSize100 = "0.75rem";
+export const BrandTextSize200 = "0.875rem";
+export const BrandTextSize300 = "1rem";
+export const BrandTextSize400 = "1rem";
+export const BrandTextSize500 = "1.25rem";
+export const BrandTextSize600 = "1.5rem";
+export const BrandTextSize700 = "1.75rem";
+export const BrandTextSize800 = "2rem";
+export const BrandTextSize900 = "2.5rem";
+export const BrandTextSize1000 = "3rem";
+export const BrandTextLineHeight100 = "1.25rem";
+export const BrandTextLineHeight200 = "1.25rem";
+export const BrandTextLineHeight300 = "1.5rem";
+export const BrandTextLineHeight400 = "1.5rem";
+export const BrandTextLineHeight500 = "1.75rem";
+export const BrandTextLineHeight600 = "2rem";
+export const BrandTextLineHeight700 = "2.5rem";
+export const BrandTextLineHeight800 = "2.25rem";
+export const BrandTextLineHeight900 = "2.75rem";
+export const BrandTextLineHeight1000 = "3.25rem";
+export const BrandTextLetterSpacing700 = "-0.01em";
+export const BrandTextLetterSpacing800 = "-0.01em";
+export const BrandTextLetterSpacing900 = "-0.01em";
+export const BrandTextLetterSpacing1000 = "-0.01em";
+export const BrandTextStyleItalic1 = "'ital' 1";
+export const BrandTextStyleItalic2 = "'ital' 2";
+export const BrandTextStyleItalic3 = "'ital' 3";
+export const BrandTextStyleItalic4 = "'ital' 4";
+export const BrandTextStyleItalic5 = "'ital' 5";
+export const BrandTextStyleItalic6 = "'ital' 6";
+export const BrandTextStyleItalic7 = "'ital' 7";
+export const BrandTextStyleItalic8 = "'ital' 8";
+export const BrandTextStyleItalic9 = "'ital' 9";
+export const BrandTextStyleItalic10 = "'ital' 10";

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

@@ -0,0 +1,176 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+declare const tokens: {
+  "base": {
+    "color": {
+      "scale": {
+        "gray": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "red": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "coral": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "orange": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "yellow": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "lemon": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "lime": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "green": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "teal": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "blue": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "indigo": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "purple": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "pink": {
+          "0": string,
+          "1": string,
+          "2": string,
+          "3": string,
+          "4": string,
+          "5": string,
+          "6": string,
+          "7": string,
+          "8": string,
+          "9": string
+        },
+        "black": {
+          "0": string
+        },
+        "white": {
+          "0": string
+        }
+      }
+    }
+  }
+}
+ export default tokens;