@esri/calcite-design-tokens 1.1.1-next.0 → 2.0.0-rc.0

package/dist/es6/global.js

@@ -0,0 +1,207 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 26 Nov 2023 08:48:21 GMT
+ */
+
+export const calciteBorderRadius = "0px";
+export const calciteBorderRadiusNone = "0px";
+export const calciteBorderRadiusSharp = "0px";
+export const calciteBorderRadiusRound = "4px";
+export const calciteBorderRadiusCircular = "50%";
+export const calciteBorderRadiusPill = "100%";
+export const calciteBorderRadiusSm = "4px";
+export const calciteBorderRadiusMd = "12px";
+export const calciteBorderRadiusLg = "16px";
+export const calciteBorderRadiusXl = "24px";
+export const calciteBorderWidthNone = "0px";
+export const calciteBorderWidthSm = "1px";
+export const calciteBorderWidthMd = "2px";
+export const calciteBorderWidthLg = "4px";
+export const calciteBoxShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0%)","type":"dropShadow"};
+export const calciteBoxShadowSm = [{"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 4%)","type":"dropShadow"},{"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 8%)","type":"dropShadow"}];
+export const calciteBoxShadowMd = [{"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 8%)","type":"dropShadow"},{"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 10%)","type":"dropShadow"}];
+export const calciteColorBrand = {"light":"#007ac2","dark":"#009af2"};
+export const calciteColorBrandHover = {"light":"#00619b","dark":"#007ac2"};
+export const calciteColorBrandPress = {"light":"#004874","dark":"#00619b"};
+export const calciteColorBrandUnderline = {"light":"rgba(0, 97, 155, 40%)","dark":"rgba(0, 160, 255, 40%)"};
+export const calciteColorBackground = {"light":"#f8f8f8","dark":"#353535"};
+export const calciteColorBackgroundTransparent = {"light":"rgba(255, 255, 255, 0%)","dark":"rgba(0, 0, 0, 0%)"};
+export const calciteColorBackgroundTransparentHover = {"light":"rgba(0, 0, 0, 4%)","dark":"rgba(255, 255, 255, 4%)"};
+export const calciteColorBackgroundTransparentPress = {"light":"rgba(0, 0, 0, 8%)","dark":"rgba(255, 255, 255, 8%)"};
+export const calciteColorBackgroundTransparentScrim = {"light":"rgba(255, 255, 255, 85%)","dark":"rgba(0, 0, 0, 85%)"};
+export const calciteColorBackgroundTransparentDismiss = {"light":"rgba(255, 255, 255, 80%)","dark":"rgba(43, 43, 43, 80%)"};
+export const calciteColorBackgroundNone = "rgba(#ffffff, 0%)";
+export const calciteColorForeground_1 = {"light":"#ffffff","dark":"#2b2b2b"};
+export const calciteColorForeground_2 = {"light":"#f3f3f3","dark":"#202020"};
+export const calciteColorForeground_3 = {"light":"#eaeaea","dark":"#151515"};
+export const calciteColorForegroundCurrent = {"light":"#c7eaff","dark":"#214155"};
+export const calciteColorText_1 = {"light":"#151515","dark":"#ffffff"};
+export const calciteColorText_2 = {"light":"#4a4a4a","dark":"#bfbfbf"};
+export const calciteColorText_3 = {"light":"#6a6a6a","dark":"#9f9f9f"};
+export const calciteColorTextInverse = {"light":"#ffffff","dark":"#151515"};
+export const calciteColorTextLink = {"light":"#00619b","dark":"#00A0FF"};
+export const calciteColorBorder_1 = {"light":"#cacaca","dark":"#555555"};
+export const calciteColorBorder_2 = {"light":"#d4d4d4","dark":"#4a4a4a"};
+export const calciteColorBorder_3 = {"light":"#dfdfdf","dark":"#404040"};
+export const calciteColorBorderInput = {"light":"#949494","dark":"#757575"};
+export const calciteColorInfo = {"light":"#00619b","dark":"#00A0FF"};
+export const calciteColorInfoHover = {"light":"#004874","dark":"#3db8ff"};
+export const calciteColorInfoPress = {"light":"#00304d","dark":"#009af2"};
+export const calciteColorSuccess = {"light":"#35ac46","dark":"#36DA43"};
+export const calciteColorSuccessHover = {"light":"#288835","dark":"#3bed52"};
+export const calciteColorSuccessPress = {"light":"#1a6324","dark":"#00b81b"};
+export const calciteColorWarning = {"light":"#edd317","dark":"#FFC900"};
+export const calciteColorWarningHover = {"light":"#d9bc00","dark":"#ffee33"};
+export const calciteColorWarningPress = {"light":"#bfa200","dark":"#f5d000"};
+export const calciteColorDanger = {"light":"#d83020","dark":"#FE583E"};
+export const calciteColorDangerHover = {"light":"#a82b1e","dark":"#ff0015"};
+export const calciteColorDangerPress = {"light":"#7c1d13","dark":"#d90012"};
+export const calciteColorInverse = {"light":"#353535","dark":"#f8f8f8"};
+export const calciteColorInverseHover = {"light":"#2b2b2b","dark":"#ffffff"};
+export const calciteColorInversePress = {"light":"#202020","dark":"#f3f3f3"};
+export const calciteContainerSizeHeightXxs = {"min":"0","max":"154px"}; // Small handheld devices and mini-windows
+export const calciteContainerSizeHeightXs = {"min":"155px","max":"328px"}; // Handheld devices
+export const calciteContainerSizeHeightSm = {"min":"329px","max":"504px"}; // Small tablets
+export const calciteContainerSizeHeightMd = {"min":"505px","max":"678px"}; // Small laptops
+export const calciteContainerSizeHeightLg = {"min":"679px","max":"854px"}; // Large laptops and desktop computers
+export const calciteContainerSizeHeightXl = {"min":"855px"}; // Projectors and televisions
+export const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
+export const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
+export const calciteContainerSizeWidthSm = {"min":"477px","max":"768px"}; // Small tablets
+export const calciteContainerSizeWidthMd = {"min":"769px","max":"1152px"}; // Small laptops
+export const calciteContainerSizeWidthLg = {"min":"1153px","max":"1440px"}; // Large laptops and desktop computers
+export const calciteContainerSizeWidthXl = {"min":"1441px"}; // Projectors and televisions
+export const calciteContainerSizeMargin = "24px";
+export const calciteContainerSizeGutter = "16px";
+export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths
+export const calciteContainerSizeContentFixed = "1440px"; // only for lg breakpoint fixed grid width
+export const calciteFontFamily = "Avenir Next LT Pro";
+export const calciteFontWeightLight = "300"; // For Avenir Next World (secondary font family)
+export const calciteFontWeightNormal = "400"; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
+export const calciteFontWeightRegular = "400";
+export const calciteFontWeightMedium = "500";
+export const calciteFontWeightSemibold = "600";
+export const calciteFontWeightBold = "700";
+export const calciteFontSizeXs = "10px";
+export const calciteFontSizeSm = "12px";
+export const calciteFontSize = "14px";
+export const calciteFontSizeMd = "16px";
+export const calciteFontSizeLg = "18px";
+export const calciteFontSizeXl = "20px";
+export const calciteFontSizeXxl = "24px";
+export const calciteFontStyleEmphasis = "italic"; // used in ratings
+export const calciteFontLineHeightFixedSm = "12px";
+export const calciteFontLineHeightFixedBase = "16px";
+export const calciteFontLineHeightFixedLg = "20px";
+export const calciteFontLineHeightFixedXl = "24px";
+export const calciteFontLineHeightRelative = "auto"; // 1
+export const calciteFontLineHeightRelativeTight = "125%"; // 1.25
+export const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375
+export const calciteFontLineHeightRelativeNormal = "150%"; // 1.5
+export const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625
+export const calciteFontLineHeightRelativeLoose = "200%"; // 2
+export const calciteFontLetterSpacingTight = "-0.4px";
+export const calciteFontLetterSpacingNormal = "0px";
+export const calciteFontLetterSpacingWide = "0.4px";
+export const calciteFontParagraphSpacingNormal = "10px";
+export const calciteFontTextDecorationNone = "none";
+export const calciteFontTextDecorationUnderline = "underline";
+export const calciteFontTextCaseNone = "none";
+export const calciteFontTextCaseUppercase = "uppercase";
+export const calciteFontTextCaseLowercase = "lowercase";
+export const calciteFontTextCaseCapitalize = "capitalize";
+export const calciteOpacityLight = "40%";
+export const calciteOpacityHalf = "50%";
+export const calciteOpacityDark = "85%";
+export const calciteOpacityFull = "100%";
+export const calciteOpacityDisabled = "50%";
+export const calciteSizeXxxs = "2px";
+export const calciteSizeXxs = "4px";
+export const calciteSizeXs = "6px";
+export const calciteSizeSm = "8px";
+export const calciteSizeSmMd = "10px";
+export const calciteSizeMdSm = "12px";
+export const calciteSizeMd = "14px";
+export const calciteSizeMdLg = "16px";
+export const calciteSizeLgMd = "20px";
+export const calciteSizeLg = "24px";
+export const calciteSizeLgXl = "32px";
+export const calciteSizeXlLg = "44px";
+export const calciteSizeXl = "48px";
+export const calciteSizeXxl = "64px";
+export const calciteSizeXxxl = "96px";
+export const calciteSpacingNone = "0px";
+export const calciteSpacingBase = "2px";
+export const calciteSpacingHalf = "6px";
+export const calciteSpacingDouble = "20px";
+export const calciteSpacingXs = "4px";
+export const calciteSpacingSm = "8px";
+export const calciteSpacingMd = "12px";
+export const calciteSpacingLg = "16px";
+export const calciteSpacingXl = "20px";
+export const calciteTypography = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0px","lineHeight":"16px","paragraphSpacing":"10px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyLight__3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"};
+export const calciteTypographyLight__2h = {"fontSize":"12px","fontWeight":"300"};
+export const calciteTypographyLight__1h = {"fontWeight":"300"};
+export const calciteTypographyLight_0h = {"fontSize":"16px","fontWeight":"300","lineHeight":"20px"};
+export const calciteTypographyLight_1h = {"fontSize":"18px","fontWeight":"300","lineHeight":"24px"};
+export const calciteTypographyRegular__3h = {"lineHeight":"12px","fontSize":"10px"};
+export const calciteTypographyRegular__2h = {"fontSize":"12px"};
+export const calciteTypographyRegular__1h = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0px","lineHeight":"16px","paragraphSpacing":"10px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyRegular_0h = {"lineHeight":"20px","fontSize":"16px"};
+export const calciteTypographyRegular_1h = {"lineHeight":"24px","fontSize":"18px"};
+export const calciteTypographyMedium__3h = {"fontWeight":"500","lineHeight":"12px","fontSize":"10px"};
+export const calciteTypographyMedium__2h = {"fontWeight":"500","fontSize":"12px"};
+export const calciteTypographyMedium__1h = {"fontWeight":"500"};
+export const calciteTypographyMedium_0h = {"fontWeight":"500","lineHeight":"20px","fontSize":"16px"};
+export const calciteTypographyMedium_1h = {"fontWeight":"500","lineHeight":"24px","fontSize":"18px"};
+export const calciteTypographyBold__3h = {"fontWeight":"600","lineHeight":"12px","fontSize":"10px"};
+export const calciteTypographyBold__2h = {"fontWeight":"600","fontSize":"12px"};
+export const calciteTypographyBold__1h = {"fontWeight":"600"};
+export const calciteTypographyBold_0h = {"fontWeight":"600","lineHeight":"20px","fontSize":"16px"};
+export const calciteTypographyBold_1h = {"fontWeight":"600","lineHeight":"24px","fontSize":"18px"};
+export const calciteTypographyWrapLight_0 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapLight_1 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapLight_2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapLight_3 = {"fontWeight":"300","lineHeight":"125%","fontSize":"24px"};
+export const calciteTypographyWrapLight__2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapLight__1 = {"fontWeight":"300","lineHeight":"137.5%"};
+export const calciteTypographyWrapRegular_0 = {"lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapRegular_1 = {"lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapRegular_2 = {"lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapRegular_3 = {"lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyWrapRegular__2 = {"lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapRegular__1 = {"lineHeight":"137.5%"};
+export const calciteTypographyWrapMedium_0 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapMedium_1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapMedium_2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapMedium_3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyWrapMedium__2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapMedium__1 = {"fontWeight":"500","lineHeight":"137.5%"};
+export const calciteTypographyWrapBold_0 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapBold_1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapBold_2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapBold_3 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyWrapBold__2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapBold__1 = {"fontWeight":"600","lineHeight":"137.5%"};
+export const calciteTypographyHierarchyDisplay_1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyHierarchyDisplay_2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyHierarchyHeading_1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyHierarchyHeading_2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyHierarchyHeading_3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyHierarchyHeading_4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyHierarchyHeading_5 = {"fontWeight":"500","lineHeight":"137.5%"};
+export const calciteTypographyHierarchyBodySnug = {"lineHeight":"137.5%"};
+export const calciteTypographyHierarchyBody = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0px","lineHeight":"16px","paragraphSpacing":"10px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyHierarchyOverline = {"lineHeight":"12px","textCase":"uppercase","fontWeight":"700"};
+export const calciteTypographyHierarchyCaption = {"lineHeight":"137.5%","fontSize":"12px"};
+export const calciteZIndexDeep = "-999999";
+export const calciteZIndex = "1";
+export const calciteZIndexSticky = "300";
+export const calciteZIndexHeader = "400";
+export const calciteZIndexToast = "500";
+export const calciteZIndexDropdown = "600";
+export const calciteZIndexOverlay = "700";
+export const calciteZIndexModal = "800";
+export const calciteZIndexPopup = "900";
+export const calciteZIndexTooltip = "901";

package/dist/js/core.d.ts

@@ -0,0 +1,466 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 26 Nov 2023 08:48:21 GMT
+ */
+
+export default tokens;
+
+declare interface DesignToken {
+  value: any;
+  name?: string;
+  comment?: string;
+  themeable?: boolean;
+  attributes?: {
+    category?: string;
+    type?: string;
+    item?: string;
+    subitem?: string;
+    state?: string;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+declare const tokens: {
+  "core": {
+    "font": {
+      "family": {
+        "primary": DesignToken,
+        "secondary": DesignToken,
+        "code": DesignToken
+      },
+      "style": {
+        "italic": DesignToken
+      },
+      "weight": {
+        "ultralight": DesignToken,
+        "thin": DesignToken,
+        "light": DesignToken,
+        "regular": DesignToken,
+        "medium": DesignToken,
+        "medium-italic": DesignToken,
+        "demi": DesignToken,
+        "bold": DesignToken,
+        "extrabold": DesignToken,
+        "black": DesignToken,
+        "heavy": DesignToken
+      },
+      "line-height": {
+        "fixed": {
+          "0": DesignToken,
+          "1": DesignToken,
+          "2": DesignToken,
+          "3": DesignToken,
+          "4": DesignToken,
+          "5": DesignToken,
+          "6": DesignToken,
+          "7": DesignToken,
+          "8": DesignToken,
+          "9": DesignToken,
+          "10": DesignToken,
+          "11": DesignToken,
+          "12": DesignToken
+        },
+        "relative": {
+          "default": DesignToken,
+          "tight": DesignToken,
+          "snug": DesignToken,
+          "normal": DesignToken,
+          "relaxed": DesignToken,
+          "loose": DesignToken
+        }
+      },
+      "size": {
+        "0": DesignToken,
+        "1": DesignToken,
+        "2": DesignToken,
+        "3": DesignToken,
+        "4": DesignToken,
+        "5": DesignToken,
+        "6": DesignToken,
+        "7": DesignToken,
+        "8": DesignToken,
+        "9": DesignToken,
+        "10": DesignToken,
+        "11": DesignToken,
+        "12": DesignToken,
+        "13": DesignToken,
+        "14": DesignToken,
+        "15": DesignToken
+      },
+      "letter-spacing": {
+        "tight": DesignToken,
+        "normal": DesignToken,
+        "wide": DesignToken
+      },
+      "paragraph-spacing": {
+        "normal": DesignToken
+      },
+      "text-decoration": {
+        "none": DesignToken,
+        "underline": DesignToken
+      },
+      "text-case": {
+        "none": DesignToken,
+        "uppercase": DesignToken,
+        "lowercase": DesignToken,
+        "capitalize": DesignToken
+      }
+    },
+    "opacity": {
+      "0": DesignToken,
+      "4": DesignToken,
+      "8": DesignToken,
+      "10": DesignToken,
+      "20": DesignToken,
+      "30": DesignToken,
+      "40": DesignToken,
+      "50": DesignToken,
+      "60": DesignToken,
+      "70": DesignToken,
+      "80": DesignToken,
+      "85": DesignToken,
+      "90": DesignToken,
+      "92": DesignToken,
+      "96": DesignToken,
+      "100": DesignToken
+    },
+    "color": {
+      "neutral": {
+        "blk-000": DesignToken,
+        "blk-005": DesignToken,
+        "blk-010": DesignToken,
+        "blk-020": DesignToken,
+        "blk-030": DesignToken,
+        "blk-040": DesignToken,
+        "blk-050": DesignToken,
+        "blk-060": DesignToken,
+        "blk-070": DesignToken,
+        "blk-080": DesignToken,
+        "blk-090": DesignToken,
+        "blk-100": DesignToken,
+        "blk-110": DesignToken,
+        "blk-120": DesignToken,
+        "blk-130": DesignToken,
+        "blk-140": DesignToken,
+        "blk-150": DesignToken,
+        "blk-160": DesignToken,
+        "blk-170": DesignToken,
+        "blk-180": DesignToken,
+        "blk-190": DesignToken,
+        "blk-200": DesignToken,
+        "blk-210": DesignToken,
+        "blk-220": DesignToken,
+        "blk-230": DesignToken,
+        "blk-235": DesignToken,
+        "blk-240": DesignToken
+      },
+      "high-saturation": {
+        "blue": {
+          "h-bb-010": DesignToken,
+          "h-bb-020": DesignToken,
+          "h-bb-030": DesignToken,
+          "h-bb-040": DesignToken,
+          "h-bb-050": DesignToken,
+          "h-bb-060": DesignToken,
+          "h-bb-070": DesignToken,
+          "h-bb-080": DesignToken,
+          "h-bb-090": DesignToken,
+          "h-bb-100": DesignToken
+        },
+        "green-blue": {
+          "h-gb-010": DesignToken,
+          "h-gb-020": DesignToken,
+          "h-gb-030": DesignToken,
+          "h-gb-040": DesignToken,
+          "h-gb-050": DesignToken,
+          "h-gb-060": DesignToken,
+          "h-gb-070": DesignToken,
+          "h-gb-080": DesignToken,
+          "h-gb-090": DesignToken,
+          "h-gb-100": DesignToken
+        },
+        "green": {
+          "h-gg-010": DesignToken,
+          "h-gg-020": DesignToken,
+          "h-gg-030": DesignToken,
+          "h-gg-040": DesignToken,
+          "h-gg-050": DesignToken,
+          "h-gg-060": DesignToken,
+          "h-gg-070": DesignToken,
+          "h-gg-080": DesignToken,
+          "h-gg-090": DesignToken,
+          "h-gg-100": DesignToken
+        },
+        "yellow-green": {
+          "h-yg-010": DesignToken,
+          "h-yg-020": DesignToken,
+          "h-yg-030": DesignToken,
+          "h-yg-040": DesignToken,
+          "h-yg-050": DesignToken,
+          "h-yg-060": DesignToken,
+          "h-yg-070": DesignToken,
+          "h-yg-080": DesignToken,
+          "h-yg-090": DesignToken,
+          "h-yg-100": DesignToken
+        },
+        "yellow": {
+          "h-yy-010": DesignToken,
+          "h-yy-020": DesignToken,
+          "h-yy-030": DesignToken,
+          "h-yy-040": DesignToken,
+          "h-yy-050": DesignToken,
+          "h-yy-060": DesignToken,
+          "h-yy-070": DesignToken,
+          "h-yy-080": DesignToken,
+          "h-yy-090": DesignToken,
+          "h-yy-100": DesignToken
+        },
+        "orange-yellow": {
+          "h-oy-010": DesignToken,
+          "h-oy-020": DesignToken,
+          "h-oy-030": DesignToken,
+          "h-oy-040": DesignToken,
+          "h-oy-050": DesignToken,
+          "h-oy-060": DesignToken,
+          "h-oy-070": DesignToken,
+          "h-oy-080": DesignToken,
+          "h-oy-090": DesignToken,
+          "h-oy-100": DesignToken
+        },
+        "orange": {
+          "h-oo-010": DesignToken,
+          "h-oo-020": DesignToken,
+          "h-oo-030": DesignToken,
+          "h-oo-040": DesignToken,
+          "h-oo-050": DesignToken,
+          "h-oo-060": DesignToken,
+          "h-oo-070": DesignToken,
+          "h-oo-080": DesignToken,
+          "h-oo-090": DesignToken,
+          "h-oo-100": DesignToken
+        },
+        "red-orange": {
+          "h-ro-010": DesignToken,
+          "h-ro-020": DesignToken,
+          "h-ro-030": DesignToken,
+          "h-ro-040": DesignToken,
+          "h-ro-050": DesignToken,
+          "h-ro-060": DesignToken,
+          "h-ro-070": DesignToken,
+          "h-ro-080": DesignToken,
+          "h-ro-090": DesignToken,
+          "h-ro-100": DesignToken
+        },
+        "red": {
+          "h-rr-010": DesignToken,
+          "h-rr-020": DesignToken,
+          "h-rr-030": DesignToken,
+          "h-rr-040": DesignToken,
+          "h-rr-050": DesignToken,
+          "h-rr-060": DesignToken,
+          "h-rr-070": DesignToken,
+          "h-rr-080": DesignToken,
+          "h-rr-090": DesignToken,
+          "h-rr-100": DesignToken
+        },
+        "pink": {
+          "h-pk-010": DesignToken,
+          "h-pk-020": DesignToken,
+          "h-pk-030": DesignToken,
+          "h-pk-040": DesignToken,
+          "h-pk-050": DesignToken,
+          "h-pk-060": DesignToken,
+          "h-pk-070": DesignToken,
+          "h-pk-080": DesignToken,
+          "h-pk-090": DesignToken,
+          "h-pk-100": DesignToken
+        },
+        "violet-red": {
+          "h-vr-010": DesignToken,
+          "h-vr-020": DesignToken,
+          "h-vr-030": DesignToken,
+          "h-vr-040": DesignToken,
+          "h-vr-050": DesignToken,
+          "h-vr-060": DesignToken,
+          "h-vr-070": DesignToken,
+          "h-vr-080": DesignToken,
+          "h-vr-090": DesignToken,
+          "h-vr-100": DesignToken
+        },
+        "violet": {
+          "h-vv-010": DesignToken,
+          "h-vv-020": DesignToken,
+          "h-vv-030": DesignToken,
+          "h-vv-040": DesignToken,
+          "h-vv-050": DesignToken,
+          "h-vv-060": DesignToken,
+          "h-vv-070": DesignToken,
+          "h-vv-080": DesignToken,
+          "h-vv-090": DesignToken,
+          "h-vv-100": DesignToken
+        }
+      },
+      "vibrant": {
+        "blue": {
+          "v-bb-120": DesignToken,
+          "v-bb-140": DesignToken,
+          "v-bb-160": DesignToken,
+          "v-bb-180": DesignToken
+        },
+        "green-blue": {
+          "v-gb-120": DesignToken,
+          "v-gb-140": DesignToken,
+          "v-gb-160": DesignToken,
+          "v-gb-180": DesignToken
+        },
+        "green": {
+          "v-gg-120": DesignToken,
+          "v-gg-140": DesignToken,
+          "v-gg-160": DesignToken,
+          "v-gg-180": DesignToken
+        },
+        "yellow-green": {
+          "v-yg-120": DesignToken,
+          "v-yg-140": DesignToken,
+          "v-yg-160": DesignToken,
+          "v-yg-180": DesignToken
+        },
+        "yellow": {
+          "v-yy-120": DesignToken,
+          "v-yy-140": DesignToken,
+          "v-yy-160": DesignToken,
+          "v-yy-180": DesignToken
+        },
+        "orange-yellow": {
+          "v-oy-120": DesignToken,
+          "v-oy-140": DesignToken,
+          "v-oy-160": DesignToken,
+          "v-oy-180": DesignToken
+        },
+        "red-orange": {
+          "v-ro-120": DesignToken,
+          "v-ro-140": DesignToken,
+          "v-ro-160": DesignToken,
+          "v-ro-180": DesignToken
+        },
+        "red": {
+          "v-rr-120": DesignToken,
+          "v-rr-140": DesignToken,
+          "v-rr-160": DesignToken,
+          "v-rr-180": DesignToken
+        },
+        "pink": {
+          "v-pk-120": DesignToken,
+          "v-pk-140": DesignToken,
+          "v-pk-160": DesignToken,
+          "v-pk-180": DesignToken
+        },
+        "violet-red": {
+          "v-vr-120": DesignToken,
+          "v-vr-140": DesignToken,
+          "v-vr-160": DesignToken,
+          "v-vr-180": DesignToken
+        },
+        "violet": {
+          "v-vv-120": DesignToken,
+          "v-vv-140": DesignToken,
+          "v-vv-160": DesignToken,
+          "v-vv-180": DesignToken
+        }
+      },
+      "dark": {
+        "green": {
+          "d-gg-410": DesignToken,
+          "d-gg-420": DesignToken,
+          "d-gg-430": DesignToken
+        },
+        "yellow": {
+          "d-yy-410": DesignToken,
+          "d-yy-420": DesignToken,
+          "d-yy-430": DesignToken
+        },
+        "red": {
+          "d-rr-410": DesignToken,
+          "d-rr-420": DesignToken,
+          "d-rr-430": DesignToken
+        },
+        "blue": {
+          "d-bb-410": DesignToken,
+          "d-bb-420": DesignToken,
+          "d-bb-430": DesignToken
+        }
+      }
+    },
+    "size": {
+      "default": {
+        "0": DesignToken,
+        "1": DesignToken,
+        "2": DesignToken,
+        "3": DesignToken,
+        "4": DesignToken,
+        "5": DesignToken,
+        "6": DesignToken,
+        "7": DesignToken,
+        "8": DesignToken,
+        "9": DesignToken,
+        "10": DesignToken,
+        "11": DesignToken,
+        "12": DesignToken,
+        "13": DesignToken,
+        "14": DesignToken,
+        "15": DesignToken,
+        "16": DesignToken,
+        "17": DesignToken,
+        "18": DesignToken,
+        "19": DesignToken,
+        "20": DesignToken,
+        "21": DesignToken,
+        "22": DesignToken,
+        "23": DesignToken,
+        "24": DesignToken,
+        "25": DesignToken,
+        "26": DesignToken,
+        "27": DesignToken,
+        "28": DesignToken,
+        "none": DesignToken
+      },
+      "relative": {
+        "half": DesignToken,
+        "full": DesignToken
+      }
+    },
+    "container-size": {
+      "0": DesignToken,
+      "154": DesignToken,
+      "320": DesignToken,
+      "328": DesignToken,
+      "476": DesignToken,
+      "504": DesignToken,
+      "678": DesignToken,
+      "768": DesignToken,
+      "854": DesignToken,
+      "1152": DesignToken,
+      "1440": DesignToken
+    },
+    "z-index": {
+      "0": DesignToken,
+      "1": DesignToken,
+      "3": DesignToken,
+      "4": DesignToken,
+      "5": DesignToken,
+      "6": DesignToken,
+      "7": DesignToken,
+      "8": DesignToken,
+      "9": DesignToken
+    },
+    "box-shadow": {
+      "0": DesignToken,
+      "1": DesignToken,
+      "2": DesignToken,
+      "3": DesignToken,
+      "4": DesignToken,
+      "none": DesignToken
+    }
+  }
+}