@nulogy/components 14.1.2 → 14.1.4

package/dist/main.module.js

@@ -28644,7 +28644,8 @@ var Overlay$2 = styled(motion(DialogOverlay)).withConfig({
     display: "flex",
     alignItems: "flex-end",
     justifyContent: "center",
-    backgroundColor: curriedTransparentize(0.5, theme.colors.blackBlue)
+    backgroundColor: curriedTransparentize(0.5, theme.colors.blackBlue),
+    zIndex: theme.zIndices.overlay
   };
 });
 var styleFns = [width, maxWidth, height, maxHeight, space, layout];
@@ -54695,75 +54696,485 @@ var mergeThemes = function mergeThemes(theme, customTheme) {
   }, theme);
 };
 
+/* 
+  Nulogy Design System Tokens
+  THIS FILE IS AUTO-GENERATED. DO NOT EDIT MANUALLY. 
+*/
+
+/*
+|-----------------------------------------------------------------------------
+| Border radius
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_BORDER_RADIUS_SMALL = '2px';
+const DESKTOP_BORDER_RADIUS_MEDIUM = '4px';
+const DESKTOP_BORDER_RADIUS_LARGE = '8px';
+const DESKTOP_BORDER_RADIUS_CIRCLE = '50%';
+const DESKTOP_BORDER_RADIUS_ROUNDED = '9999px';
+const TABLET_BORDER_RADIUS_SMALL = '2.8px';
+const TABLET_BORDER_RADIUS_MEDIUM = '5.6px';
+const TABLET_BORDER_RADIUS_LARGE = '11.2px';
+const TABLET_BORDER_RADIUS_CIRCLE = '50%';
+const TABLET_BORDER_RADIUS_ROUNDED = '9999px';
+const PHONE_BORDER_RADIUS_SMALL = '1.8px';
+const PHONE_BORDER_RADIUS_MEDIUM = '3.6px';
+const PHONE_BORDER_RADIUS_LARGE = '7.2px';
+const PHONE_BORDER_RADIUS_CIRCLE = '50%';
+const PHONE_BORDER_RADIUS_ROUNDED = '9999px';
+
+/*
+|-----------------------------------------------------------------------------
+| Font size
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_FONT_SIZE_STANDARD_SMALLER = '12px';
+const DESKTOP_FONT_SIZE_STANDARD_SMALL = '15px';
+const DESKTOP_FONT_SIZE_STANDARD_MEDIUM = '15px';
+const DESKTOP_FONT_SIZE_STANDARD_LARGE = '21px';
+const DESKTOP_FONT_SIZE_STANDARD_LARGER = '24px';
+const DESKTOP_FONT_SIZE_STANDARD_LARGEST = '30px';
+const DESKTOP_FONT_SIZE_EXPERIMENTAL_XXS = '9px';
+const DESKTOP_FONT_SIZE_EXPERIMENTAL_XS = '12px';
+const DESKTOP_FONT_SIZE_EXPERIMENTAL_SM = '15px';
+const DESKTOP_FONT_SIZE_EXPERIMENTAL_MD = '18px';
+const DESKTOP_FONT_SIZE_EXPERIMENTAL_LG = '21px';
+const DESKTOP_FONT_SIZE_EXPERIMENTAL_XL = '24px';
+const DESKTOP_FONT_SIZE_EXPERIMENTAL_XXL = '30px';
+const DESKTOP_FONT_SIZE_SEMANTIC_HEADING_1 = '24px';
+const DESKTOP_FONT_SIZE_SEMANTIC_HEADING_2 = '21px';
+const DESKTOP_FONT_SIZE_SEMANTIC_HEADING_3 = '15px';
+const DESKTOP_FONT_SIZE_SEMANTIC_HEADING_4 = '15px';
+const DESKTOP_FONT_SIZE_SEMANTIC_BASE = '15px';
+const TABLET_FONT_SIZE_STANDARD_SMALLER = '16.8px';
+const TABLET_FONT_SIZE_STANDARD_SMALL = '21px';
+const TABLET_FONT_SIZE_STANDARD_MEDIUM = '21px';
+const TABLET_FONT_SIZE_STANDARD_LARGE = '29.4px';
+const TABLET_FONT_SIZE_STANDARD_LARGER = '33.6px';
+const TABLET_FONT_SIZE_STANDARD_LARGEST = '42px';
+const TABLET_FONT_SIZE_EXPERIMENTAL_XXS = '12.6px';
+const TABLET_FONT_SIZE_EXPERIMENTAL_XS = '16.8px';
+const TABLET_FONT_SIZE_EXPERIMENTAL_SM = '21px';
+const TABLET_FONT_SIZE_EXPERIMENTAL_MD = '25.2px';
+const TABLET_FONT_SIZE_EXPERIMENTAL_LG = '29.4px';
+const TABLET_FONT_SIZE_EXPERIMENTAL_XL = '33.6px';
+const TABLET_FONT_SIZE_EXPERIMENTAL_XXL = '42px';
+const TABLET_FONT_SIZE_SEMANTIC_HEADING_1 = '33.6px';
+const TABLET_FONT_SIZE_SEMANTIC_HEADING_2 = '29.4px';
+const TABLET_FONT_SIZE_SEMANTIC_HEADING_3 = '21px';
+const TABLET_FONT_SIZE_SEMANTIC_HEADING_4 = '21px';
+const TABLET_FONT_SIZE_SEMANTIC_BASE = '21px';
+const PHONE_FONT_SIZE_STANDARD_SMALLER = '10.8px';
+const PHONE_FONT_SIZE_STANDARD_SMALL = '13.5px';
+const PHONE_FONT_SIZE_STANDARD_MEDIUM = '13.5px';
+const PHONE_FONT_SIZE_STANDARD_LARGE = '18.9px';
+const PHONE_FONT_SIZE_STANDARD_LARGER = '21.6px';
+const PHONE_FONT_SIZE_STANDARD_LARGEST = '27px';
+const PHONE_FONT_SIZE_EXPERIMENTAL_XXS = '8.1px';
+const PHONE_FONT_SIZE_EXPERIMENTAL_XS = '10.8px';
+const PHONE_FONT_SIZE_EXPERIMENTAL_SM = '13.5px';
+const PHONE_FONT_SIZE_EXPERIMENTAL_MD = '16.2px';
+const PHONE_FONT_SIZE_EXPERIMENTAL_LG = '18.9px';
+const PHONE_FONT_SIZE_EXPERIMENTAL_XL = '21.6px';
+const PHONE_FONT_SIZE_EXPERIMENTAL_XXL = '27px';
+const PHONE_FONT_SIZE_SEMANTIC_HEADING_1 = '21.6px';
+const PHONE_FONT_SIZE_SEMANTIC_HEADING_2 = '18.9px';
+const PHONE_FONT_SIZE_SEMANTIC_HEADING_3 = '13.5px';
+const PHONE_FONT_SIZE_SEMANTIC_HEADING_4 = '13.5px';
+const PHONE_FONT_SIZE_SEMANTIC_BASE = '13.5px';
+
+/*
+|-----------------------------------------------------------------------------
+| Breakpoints
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_BREAKPOINTS_BASE_EXTRA_SMALL = '0px';
+const DESKTOP_BREAKPOINTS_BASE_SMALL = '768px';
+const DESKTOP_BREAKPOINTS_BASE_MEDIUM = '1024px';
+const DESKTOP_BREAKPOINTS_BASE_LARGE = '1360px';
+const DESKTOP_BREAKPOINTS_BASE_EXTRA_LARGE = '1920px';
+const DESKTOP_BREAKPOINTS_SEMANTIC_PHONE_PORTRAIT = '320px';
+const DESKTOP_BREAKPOINTS_SEMANTIC_PHONE_LANDSCAPE = '640px';
+const DESKTOP_BREAKPOINTS_SEMANTIC_TABLET_PORTRAIT = '768px';
+const DESKTOP_BREAKPOINTS_SEMANTIC_TABLET_LANDSCAPE = '1024px';
+const DESKTOP_BREAKPOINTS_SEMANTIC_LAPTOP = '1280px';
+const DESKTOP_BREAKPOINTS_SEMANTIC_DESKTOP = '1440px';
+const TABLET_BREAKPOINTS_BASE_EXTRA_SMALL = '0px';
+const TABLET_BREAKPOINTS_BASE_SMALL = '768px';
+const TABLET_BREAKPOINTS_BASE_MEDIUM = '1024px';
+const TABLET_BREAKPOINTS_BASE_LARGE = '1360px';
+const TABLET_BREAKPOINTS_BASE_EXTRA_LARGE = '1920px';
+const TABLET_BREAKPOINTS_SEMANTIC_PHONE_PORTRAIT = '320px';
+const TABLET_BREAKPOINTS_SEMANTIC_PHONE_LANDSCAPE = '640px';
+const TABLET_BREAKPOINTS_SEMANTIC_TABLET_PORTRAIT = '768px';
+const TABLET_BREAKPOINTS_SEMANTIC_TABLET_LANDSCAPE = '1024px';
+const TABLET_BREAKPOINTS_SEMANTIC_LAPTOP = '1280px';
+const TABLET_BREAKPOINTS_SEMANTIC_DESKTOP = '1440px';
+const PHONE_BREAKPOINTS_BASE_EXTRA_SMALL = '0px';
+const PHONE_BREAKPOINTS_BASE_SMALL = '768px';
+const PHONE_BREAKPOINTS_BASE_MEDIUM = '1024px';
+const PHONE_BREAKPOINTS_BASE_LARGE = '1360px';
+const PHONE_BREAKPOINTS_BASE_EXTRA_LARGE = '1920px';
+const PHONE_BREAKPOINTS_SEMANTIC_PHONE_PORTRAIT = '320px';
+const PHONE_BREAKPOINTS_SEMANTIC_PHONE_LANDSCAPE = '640px';
+const PHONE_BREAKPOINTS_SEMANTIC_TABLET_PORTRAIT = '768px';
+const PHONE_BREAKPOINTS_SEMANTIC_TABLET_LANDSCAPE = '1024px';
+const PHONE_BREAKPOINTS_SEMANTIC_LAPTOP = '1280px';
+const PHONE_BREAKPOINTS_SEMANTIC_DESKTOP = '1440px';
+
+/*
+|-----------------------------------------------------------------------------
+| Color
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_COLOR_BASE_BLACK = '#011E38';
+const DESKTOP_COLOR_BASE_BLACK_BLUE = '#122B47';
+const DESKTOP_COLOR_BASE_DARK_BLUE = '#00438F';
+const DESKTOP_COLOR_BASE_BLUE = '#216BEB';
+const DESKTOP_COLOR_BASE_LIGHT_BLUE = '#E1EBFA';
+const DESKTOP_COLOR_BASE_DARK_GREY = '#434D59';
+const DESKTOP_COLOR_BASE_MID_GREY = '#6C7784';
+const DESKTOP_COLOR_BASE_GREY = '#C0C8D1';
+const DESKTOP_COLOR_BASE_LIGHT_GREY = '#E4E7EB';
+const DESKTOP_COLOR_BASE_WHITE_GREY = '#F0F2F5';
+const DESKTOP_COLOR_BASE_WHITE = '#FFFFFF';
+const DESKTOP_COLOR_BASE_GREEN = '#008059';
+const DESKTOP_COLOR_BASE_LIGHT_GREEN = '#E9F7F2';
+const DESKTOP_COLOR_BASE_RED = '#CC1439';
+const DESKTOP_COLOR_BASE_LIGHT_RED = '#FAE6EA';
+const DESKTOP_COLOR_BASE_YELLOW = '#FFBB00';
+const DESKTOP_COLOR_BASE_LIGHT_YELLOW = '#FCF5E3';
+const DESKTOP_COLOR_CATEGORICAL_1 = '#19C4E6';
+const DESKTOP_COLOR_CATEGORICAL_2 = '#8033CC';
+const DESKTOP_COLOR_CATEGORICAL_3 = '#E372D0';
+const DESKTOP_COLOR_CATEGORICAL_4 = '#55DDB0';
+const DESKTOP_COLOR_CATEGORICAL_5 = '#EE5513';
+const DESKTOP_COLOR_CATEGORICAL_6 = '#D3D322';
+const TABLET_COLOR_BASE_BLACK = '#011E38';
+const TABLET_COLOR_BASE_BLACK_BLUE = '#122B47';
+const TABLET_COLOR_BASE_DARK_BLUE = '#00438F';
+const TABLET_COLOR_BASE_BLUE = '#216BEB';
+const TABLET_COLOR_BASE_LIGHT_BLUE = '#E1EBFA';
+const TABLET_COLOR_BASE_DARK_GREY = '#434D59';
+const TABLET_COLOR_BASE_MID_GREY = '#6C7784';
+const TABLET_COLOR_BASE_GREY = '#C0C8D1';
+const TABLET_COLOR_BASE_LIGHT_GREY = '#E4E7EB';
+const TABLET_COLOR_BASE_WHITE_GREY = '#F0F2F5';
+const TABLET_COLOR_BASE_WHITE = '#FFFFFF';
+const TABLET_COLOR_BASE_GREEN = '#008059';
+const TABLET_COLOR_BASE_LIGHT_GREEN = '#E9F7F2';
+const TABLET_COLOR_BASE_RED = '#CC1439';
+const TABLET_COLOR_BASE_LIGHT_RED = '#FAE6EA';
+const TABLET_COLOR_BASE_YELLOW = '#FFBB00';
+const TABLET_COLOR_BASE_LIGHT_YELLOW = '#FCF5E3';
+const TABLET_COLOR_CATEGORICAL_1 = '#19C4E6';
+const TABLET_COLOR_CATEGORICAL_2 = '#8033CC';
+const TABLET_COLOR_CATEGORICAL_3 = '#E372D0';
+const TABLET_COLOR_CATEGORICAL_4 = '#55DDB0';
+const TABLET_COLOR_CATEGORICAL_5 = '#EE5513';
+const TABLET_COLOR_CATEGORICAL_6 = '#D3D322';
+const PHONE_COLOR_BASE_BLACK = '#011E38';
+const PHONE_COLOR_BASE_BLACK_BLUE = '#122B47';
+const PHONE_COLOR_BASE_DARK_BLUE = '#00438F';
+const PHONE_COLOR_BASE_BLUE = '#216BEB';
+const PHONE_COLOR_BASE_LIGHT_BLUE = '#E1EBFA';
+const PHONE_COLOR_BASE_DARK_GREY = '#434D59';
+const PHONE_COLOR_BASE_MID_GREY = '#6C7784';
+const PHONE_COLOR_BASE_GREY = '#C0C8D1';
+const PHONE_COLOR_BASE_LIGHT_GREY = '#E4E7EB';
+const PHONE_COLOR_BASE_WHITE_GREY = '#F0F2F5';
+const PHONE_COLOR_BASE_WHITE = '#FFFFFF';
+const PHONE_COLOR_BASE_GREEN = '#008059';
+const PHONE_COLOR_BASE_LIGHT_GREEN = '#E9F7F2';
+const PHONE_COLOR_BASE_RED = '#CC1439';
+const PHONE_COLOR_BASE_LIGHT_RED = '#FAE6EA';
+const PHONE_COLOR_BASE_YELLOW = '#FFBB00';
+const PHONE_COLOR_BASE_LIGHT_YELLOW = '#FCF5E3';
+const PHONE_COLOR_CATEGORICAL_1 = '#19C4E6';
+const PHONE_COLOR_CATEGORICAL_2 = '#8033CC';
+const PHONE_COLOR_CATEGORICAL_3 = '#E372D0';
+const PHONE_COLOR_CATEGORICAL_4 = '#55DDB0';
+const PHONE_COLOR_CATEGORICAL_5 = '#EE5513';
+const PHONE_COLOR_CATEGORICAL_6 = '#D3D322';
+
+/*
+|-----------------------------------------------------------------------------
+| Font family
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_FONT_FAMILY_BASE = "'IBM Plex Sans', sans-serif";
+const DESKTOP_FONT_FAMILY_MONO = "'IBM Plex Mono', monospace";
+const DESKTOP_FONT_FAMILY_SC = "'Noto Sans SC', sans-serif";
+const TABLET_FONT_FAMILY_BASE = "'IBM Plex Sans', sans-serif";
+const TABLET_FONT_FAMILY_MONO = "'IBM Plex Mono', monospace";
+const TABLET_FONT_FAMILY_SC = "'Noto Sans SC', sans-serif";
+const PHONE_FONT_FAMILY_BASE = "'IBM Plex Sans', sans-serif";
+const PHONE_FONT_FAMILY_MONO = "'IBM Plex Mono', monospace";
+const PHONE_FONT_FAMILY_SC = "'Noto Sans SC', sans-serif";
+
+/*
+|-----------------------------------------------------------------------------
+| Font weight
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_FONT_WEIGHT_LIGHT = 300;
+const DESKTOP_FONT_WEIGHT_NORMAL = 400;
+const DESKTOP_FONT_WEIGHT_MEDIUM = 500;
+const DESKTOP_FONT_WEIGHT_BOLD = 600;
+const TABLET_FONT_WEIGHT_LIGHT = 300;
+const TABLET_FONT_WEIGHT_NORMAL = 400;
+const TABLET_FONT_WEIGHT_MEDIUM = 500;
+const TABLET_FONT_WEIGHT_BOLD = 600;
+const PHONE_FONT_WEIGHT_LIGHT = 300;
+const PHONE_FONT_WEIGHT_NORMAL = 400;
+const PHONE_FONT_WEIGHT_MEDIUM = 500;
+const PHONE_FONT_WEIGHT_BOLD = 600;
+
+/*
+|-----------------------------------------------------------------------------
+| Line height
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_LINE_HEIGHT_BASE = '1.3333';
+const DESKTOP_LINE_HEIGHT_BASE_RELAXED = '1.6';
+const DESKTOP_LINE_HEIGHT_SMALL_TEXT_BASE = '1.3333';
+const DESKTOP_LINE_HEIGHT_SMALL_TEXT_COMPRESSED = '1.3333';
+const DESKTOP_LINE_HEIGHT_SMALL_RELAXED = '1.6';
+const DESKTOP_LINE_HEIGHT_SMALLER_TEXT = '1.3333';
+const DESKTOP_LINE_HEIGHT_SMALLER_RELAXED = '1.6667';
+const DESKTOP_LINE_HEIGHT_HEADING_1 = '1.3333';
+const DESKTOP_LINE_HEIGHT_HEADING_2 = '1.3333';
+const DESKTOP_LINE_HEIGHT_HEADING_3 = '1.6';
+const DESKTOP_LINE_HEIGHT_HEADING_4 = '1.3333';
+const DESKTOP_LINE_HEIGHT_TITLE = '1.3333';
+const DESKTOP_LINE_HEIGHT_SECTION_TITLE = '1.3333';
+const DESKTOP_LINE_HEIGHT_SUBSECTION_TITLE = '1.6';
+const TABLET_LINE_HEIGHT_BASE = '1.3333';
+const TABLET_LINE_HEIGHT_BASE_RELAXED = '1.6';
+const TABLET_LINE_HEIGHT_SMALL_TEXT_BASE = '1.3333';
+const TABLET_LINE_HEIGHT_SMALL_TEXT_COMPRESSED = '1.3333';
+const TABLET_LINE_HEIGHT_SMALL_RELAXED = '1.6';
+const TABLET_LINE_HEIGHT_SMALLER_TEXT = '1.3333';
+const TABLET_LINE_HEIGHT_SMALLER_RELAXED = '1.6667';
+const TABLET_LINE_HEIGHT_HEADING_1 = '1.3333';
+const TABLET_LINE_HEIGHT_HEADING_2 = '1.3333';
+const TABLET_LINE_HEIGHT_HEADING_3 = '1.6';
+const TABLET_LINE_HEIGHT_HEADING_4 = '1.3333';
+const TABLET_LINE_HEIGHT_TITLE = '1.3333';
+const TABLET_LINE_HEIGHT_SECTION_TITLE = '1.3333';
+const TABLET_LINE_HEIGHT_SUBSECTION_TITLE = '1.6';
+const PHONE_LINE_HEIGHT_BASE = '1.3333';
+const PHONE_LINE_HEIGHT_BASE_RELAXED = '1.6';
+const PHONE_LINE_HEIGHT_SMALL_TEXT_BASE = '1.3333';
+const PHONE_LINE_HEIGHT_SMALL_TEXT_COMPRESSED = '1.3333';
+const PHONE_LINE_HEIGHT_SMALL_RELAXED = '1.6';
+const PHONE_LINE_HEIGHT_SMALLER_TEXT = '1.3333';
+const PHONE_LINE_HEIGHT_SMALLER_RELAXED = '1.6667';
+const PHONE_LINE_HEIGHT_HEADING_1 = '1.3333';
+const PHONE_LINE_HEIGHT_HEADING_2 = '1.3333';
+const PHONE_LINE_HEIGHT_HEADING_3 = '1.6';
+const PHONE_LINE_HEIGHT_HEADING_4 = '1.3333';
+const PHONE_LINE_HEIGHT_TITLE = '1.3333';
+const PHONE_LINE_HEIGHT_SECTION_TITLE = '1.3333';
+const PHONE_LINE_HEIGHT_SUBSECTION_TITLE = '1.6';
+
+/*
+|-----------------------------------------------------------------------------
+| Shadow
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_SHADOW_SMALL = '0px 1px 2px 0px rgba(1, 30, 56, 0.25)';
+const DESKTOP_SHADOW_MEDIUM = '0px 3px 8px 0px rgba(1, 30, 56, 0.18)';
+const DESKTOP_SHADOW_LARGE = '0px 6px 12px 2px rgba(1, 30, 56, 0.15)';
+const DESKTOP_SHADOW_FOCUS = '0px 0px 5px 0px rgba(33, 107, 235, .9)';
+const DESKTOP_SHADOW_ERROR = '0px 0px 5px 0px rgba(204, 20, 57, .9)';
+const TABLET_SHADOW_SMALL = '0px 1px 2px 0px rgba(1, 30, 56, 0.25)';
+const TABLET_SHADOW_MEDIUM = '0px 3px 8px 0px rgba(1, 30, 56, 0.18)';
+const TABLET_SHADOW_LARGE = '0px 6px 12px 2px rgba(1, 30, 56, 0.15)';
+const TABLET_SHADOW_FOCUS = '0px 0px 5px 0px rgba(33, 107, 235, .9)';
+const TABLET_SHADOW_ERROR = '0px 0px 5px 0px rgba(204, 20, 57, .9)';
+const PHONE_SHADOW_SMALL = '0px 1px 2px 0px rgba(1, 30, 56, 0.25)';
+const PHONE_SHADOW_MEDIUM = '0px 3px 8px 0px rgba(1, 30, 56, 0.18)';
+const PHONE_SHADOW_LARGE = '0px 6px 12px 2px rgba(1, 30, 56, 0.15)';
+const PHONE_SHADOW_FOCUS = '0px 0px 5px 0px rgba(33, 107, 235, .9)';
+const PHONE_SHADOW_ERROR = '0px 0px 5px 0px rgba(204, 20, 57, .9)';
+
+/*
+|-----------------------------------------------------------------------------
+| Space
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_SPACE_NONE = '0px';
+const DESKTOP_SPACE_X_0 = '0px';
+const DESKTOP_SPACE_X_0_25 = '2px';
+const DESKTOP_SPACE_HALF = '4px';
+const DESKTOP_SPACE_X_0_5 = '4px';
+const DESKTOP_SPACE_X_0_75 = '6px';
+const DESKTOP_SPACE_X_1 = '8px';
+const DESKTOP_SPACE_X_1_25 = '10px';
+const DESKTOP_SPACE_X_1_5 = '12px';
+const DESKTOP_SPACE_X_1_75 = '14px';
+const DESKTOP_SPACE_X_2 = '16px';
+const DESKTOP_SPACE_X_2_5 = '20px';
+const DESKTOP_SPACE_X_3 = '24px';
+const DESKTOP_SPACE_X_4 = '32px';
+const DESKTOP_SPACE_X_5 = '40px';
+const DESKTOP_SPACE_X_6 = '48px';
+const DESKTOP_SPACE_X_7 = '56px';
+const DESKTOP_SPACE_X_8 = '64px';
+const DESKTOP_SPACE_X_9 = '72px';
+const DESKTOP_SPACE_X_10 = '80px';
+const DESKTOP_SPACE_X_11 = '88px';
+const DESKTOP_SPACE_X_12 = '96px';
+const TABLET_SPACE_NONE = '0px';
+const TABLET_SPACE_X_0 = '0px';
+const TABLET_SPACE_X_0_25 = '2.8px';
+const TABLET_SPACE_HALF = '5.6px';
+const TABLET_SPACE_X_0_5 = '5.6px';
+const TABLET_SPACE_X_0_75 = '8.4px';
+const TABLET_SPACE_X_1 = '11.2px';
+const TABLET_SPACE_X_1_25 = '14px';
+const TABLET_SPACE_X_1_5 = '16.8px';
+const TABLET_SPACE_X_1_75 = '19.6px';
+const TABLET_SPACE_X_2 = '22.4px';
+const TABLET_SPACE_X_2_5 = '28px';
+const TABLET_SPACE_X_3 = '33.6px';
+const TABLET_SPACE_X_4 = '44.8px';
+const TABLET_SPACE_X_5 = '56px';
+const TABLET_SPACE_X_6 = '67.2px';
+const TABLET_SPACE_X_7 = '78.4px';
+const TABLET_SPACE_X_8 = '89.6px';
+const TABLET_SPACE_X_9 = '100.8px';
+const TABLET_SPACE_X_10 = '112px';
+const TABLET_SPACE_X_11 = '123.2px';
+const TABLET_SPACE_X_12 = '134.4px';
+const PHONE_SPACE_NONE = '0px';
+const PHONE_SPACE_X_0 = '0px';
+const PHONE_SPACE_X_0_25 = '1.8px';
+const PHONE_SPACE_HALF = '3.6px';
+const PHONE_SPACE_X_0_5 = '3.6px';
+const PHONE_SPACE_X_0_75 = '5.4px';
+const PHONE_SPACE_X_1 = '7.2px';
+const PHONE_SPACE_X_1_25 = '9px';
+const PHONE_SPACE_X_1_5 = '10.8px';
+const PHONE_SPACE_X_1_75 = '12.6px';
+const PHONE_SPACE_X_2 = '14.4px';
+const PHONE_SPACE_X_2_5 = '18px';
+const PHONE_SPACE_X_3 = '21.6px';
+const PHONE_SPACE_X_4 = '28.8px';
+const PHONE_SPACE_X_5 = '36px';
+const PHONE_SPACE_X_6 = '43.2px';
+const PHONE_SPACE_X_7 = '50.4px';
+const PHONE_SPACE_X_8 = '57.6px';
+const PHONE_SPACE_X_9 = '64.8px';
+const PHONE_SPACE_X_10 = '72px';
+const PHONE_SPACE_X_11 = '79.2px';
+const PHONE_SPACE_X_12 = '86.4px';
+
+/*
+|-----------------------------------------------------------------------------
+| Z index
+|-----------------------------------------------------------------------------
+*/
+const DESKTOP_Z_INDEX_CONTENT = 100;
+const DESKTOP_Z_INDEX_TABS_SCROLL_INDICATOR = 200;
+const DESKTOP_Z_INDEX_TABS_BAR = 210;
+const DESKTOP_Z_INDEX_OVERLAY = 1000;
+const DESKTOP_Z_INDEX_ABOVE_OVERLAY = 1010;
+const DESKTOP_Z_INDEX_TABLE_HEADER = 10;
+const DESKTOP_Z_INDEX_MODAL_HEADER_AND_FOOTER = 2;
+const DESKTOP_Z_INDEX_OPEN_CONTROL = 1000;
+const DESKTOP_Z_INDEX_NAV_BAR = 900;
+const DESKTOP_Z_INDEX_SIDEBAR = 800;
+const TABLET_Z_INDEX_CONTENT = 100;
+const TABLET_Z_INDEX_TABS_SCROLL_INDICATOR = 200;
+const TABLET_Z_INDEX_TABS_BAR = 210;
+const TABLET_Z_INDEX_OVERLAY = 1000;
+const TABLET_Z_INDEX_ABOVE_OVERLAY = 1010;
+const TABLET_Z_INDEX_TABLE_HEADER = 10;
+const TABLET_Z_INDEX_MODAL_HEADER_AND_FOOTER = 2;
+const TABLET_Z_INDEX_OPEN_CONTROL = 1000;
+const TABLET_Z_INDEX_NAV_BAR = 900;
+const TABLET_Z_INDEX_SIDEBAR = 800;
+const PHONE_Z_INDEX_CONTENT = 100;
+const PHONE_Z_INDEX_TABS_SCROLL_INDICATOR = 200;
+const PHONE_Z_INDEX_TABS_BAR = 210;
+const PHONE_Z_INDEX_OVERLAY = 1000;
+const PHONE_Z_INDEX_ABOVE_OVERLAY = 1010;
+const PHONE_Z_INDEX_TABLE_HEADER = 10;
+const PHONE_Z_INDEX_MODAL_HEADER_AND_FOOTER = 2;
+const PHONE_Z_INDEX_OPEN_CONTROL = 1000;
+const PHONE_Z_INDEX_NAV_BAR = 900;
+const PHONE_Z_INDEX_SIDEBAR = 800;
+
 var themes = {
   legacy: {
     colors: {
-      black: "#011e38",
-      blackBlue: "#122b47",
-      darkBlue: "#00438f",
-      blue: "#216beb",
-      lightBlue: "#e1ebfa",
-      darkGrey: "#434d59",
-      midGrey: "#6c7784",
-      grey: "#c0c8d1",
-      lightGrey: "#e4e7eb",
-      whiteGrey: "#f0f2f5",
-      white: "#ffffff",
-      yellow: "#ffbb00",
-      lightYellow: "#fcf5e3",
-      green: "#008059",
-      lightGreen: "#e9f7f2",
-      red: "#cc1439",
-      lightRed: "#fae6ea",
-      categorical1: "#19c4e6",
-      categorical2: "#8033cc",
-      categorical3: "#e372d0",
-      categorical4: "#55ddb0",
-      categorical5: "#ee5513",
-      categorical6: "#d3d322"
+      black: DESKTOP_COLOR_BASE_BLACK,
+      blackBlue: DESKTOP_COLOR_BASE_BLACK_BLUE,
+      darkBlue: DESKTOP_COLOR_BASE_DARK_BLUE,
+      blue: DESKTOP_COLOR_BASE_BLUE,
+      lightBlue: DESKTOP_COLOR_BASE_LIGHT_BLUE,
+      darkGrey: DESKTOP_COLOR_BASE_DARK_GREY,
+      midGrey: DESKTOP_COLOR_BASE_MID_GREY,
+      grey: DESKTOP_COLOR_BASE_GREY,
+      lightGrey: DESKTOP_COLOR_BASE_LIGHT_GREY,
+      whiteGrey: DESKTOP_COLOR_BASE_WHITE_GREY,
+      white: DESKTOP_COLOR_BASE_WHITE,
+      yellow: DESKTOP_COLOR_BASE_YELLOW,
+      lightYellow: DESKTOP_COLOR_BASE_LIGHT_YELLOW,
+      green: DESKTOP_COLOR_BASE_GREEN,
+      lightGreen: DESKTOP_COLOR_BASE_LIGHT_GREEN,
+      red: DESKTOP_COLOR_BASE_RED,
+      lightRed: DESKTOP_COLOR_BASE_LIGHT_RED,
+      categorical1: DESKTOP_COLOR_CATEGORICAL_1,
+      categorical2: DESKTOP_COLOR_CATEGORICAL_2,
+      categorical3: DESKTOP_COLOR_CATEGORICAL_3,
+      categorical4: DESKTOP_COLOR_CATEGORICAL_4,
+      categorical5: DESKTOP_COLOR_CATEGORICAL_5,
+      categorical6: DESKTOP_COLOR_CATEGORICAL_6
     },
     fontWeights: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      bold: 600
+      light: DESKTOP_FONT_WEIGHT_LIGHT,
+      normal: DESKTOP_FONT_WEIGHT_NORMAL,
+      medium: DESKTOP_FONT_WEIGHT_MEDIUM,
+      bold: DESKTOP_FONT_WEIGHT_BOLD
     },
     fonts: {
-      base: "'IBM Plex Sans', sans-serif",
-      mono: "'IBM Plex Mono', monospace",
-      sc: "'Noto Sans SC', sans-serif"
+      base: DESKTOP_FONT_FAMILY_BASE,
+      mono: DESKTOP_FONT_FAMILY_MONO,
+      sc: DESKTOP_FONT_FAMILY_SC
     },
     shadows: {
-      small: "0px 1px 2px 0px rgba(1, 30, 56, 0.25)",
-      medium: "0px 3px 8px 0px rgba(1, 30, 56, 0.18)",
-      large: "0px 6px 12px 2px rgba(1, 30, 56, 0.15)",
-      focus: "0px 0px 5px 0px rgba(33, 107, 235, .9)",
-      error: "0px 0px 5px 0px rgba(204, 20, 57, .9)"
+      small: DESKTOP_SHADOW_SMALL,
+      medium: DESKTOP_SHADOW_MEDIUM,
+      large: DESKTOP_SHADOW_LARGE,
+      focus: DESKTOP_SHADOW_FOCUS,
+      error: DESKTOP_SHADOW_ERROR
     },
     breakpoints: {
-      extraSmall: "0px",
-      small: "768px",
-      medium: "1024px",
-      large: "1360px",
-      extraLarge: "1920px",
-      phonePortrait: "320px",
-      phoneLandscape: "640px",
-      tabletPortrait: "768px",
-      tabletLandscape: "1024px",
-      laptop: "1280px",
-      desktop: "1440px"
+      extraSmall: DESKTOP_BREAKPOINTS_BASE_EXTRA_SMALL,
+      small: DESKTOP_BREAKPOINTS_BASE_SMALL,
+      medium: DESKTOP_BREAKPOINTS_BASE_MEDIUM,
+      large: DESKTOP_BREAKPOINTS_BASE_LARGE,
+      extraLarge: DESKTOP_BREAKPOINTS_BASE_EXTRA_LARGE,
+      phonePortrait: DESKTOP_BREAKPOINTS_SEMANTIC_PHONE_PORTRAIT,
+      phoneLandscape: DESKTOP_BREAKPOINTS_SEMANTIC_PHONE_LANDSCAPE,
+      tabletPortrait: DESKTOP_BREAKPOINTS_SEMANTIC_TABLET_PORTRAIT,
+      tabletLandscape: DESKTOP_BREAKPOINTS_SEMANTIC_TABLET_LANDSCAPE,
+      laptop: DESKTOP_BREAKPOINTS_SEMANTIC_LAPTOP,
+      desktop: DESKTOP_BREAKPOINTS_SEMANTIC_DESKTOP
     },
     zIndices: {
-      content: 100,
-      tabsScollIndicator: 200,
-      tabsBar: 210,
-      overlay: 1000,
-      aboveOverlay: 1010,
-      tableHeader: 10,
-      modalHeaderAndFooter: 2,
-      openControl: 1000,
-      navBar: 900,
-      sidebar: 800
+      content: DESKTOP_Z_INDEX_CONTENT,
+      tabsScollIndicator: DESKTOP_Z_INDEX_TABS_SCROLL_INDICATOR,
+      tabsBar: DESKTOP_Z_INDEX_TABS_BAR,
+      overlay: DESKTOP_Z_INDEX_OVERLAY,
+      aboveOverlay: DESKTOP_Z_INDEX_ABOVE_OVERLAY,
+      tableHeader: DESKTOP_Z_INDEX_TABLE_HEADER,
+      modalHeaderAndFooter: DESKTOP_Z_INDEX_MODAL_HEADER_AND_FOOTER,
+      openControl: DESKTOP_Z_INDEX_OPEN_CONTROL,
+      navBar: DESKTOP_Z_INDEX_NAV_BAR,
+      sidebar: DESKTOP_Z_INDEX_SIDEBAR
     },
     fontSizes: {
       smaller: "12px",
@@ -54802,545 +55213,545 @@ var themes = {
       subsectionTitle: "1.33"
     },
     space: {
-      none: "0px",
-      half: "4px",
-      x0: "0px",
-      x0_25: "2px",
-      x0_5: "4px",
-      x0_75: "6px",
-      x1: "8px",
-      x1_25: "10px",
-      x1_5: "12px",
-      x1_75: "14px",
-      x2: "16px",
-      x2_5: "20px",
-      x3: "24px",
-      x4: "32px",
-      x5: "40px",
-      x6: "48px",
-      x7: "56px",
-      x8: "64px",
-      x9: "72px",
-      x10: "80px",
-      x11: "88px",
-      x12: "96px"
+      none: DESKTOP_SPACE_NONE,
+      half: DESKTOP_SPACE_HALF,
+      x0: DESKTOP_SPACE_X_0,
+      x0_25: DESKTOP_SPACE_X_0_25,
+      x0_5: DESKTOP_SPACE_X_0_5,
+      x0_75: DESKTOP_SPACE_X_0_75,
+      x1: DESKTOP_SPACE_X_1,
+      x1_25: DESKTOP_SPACE_X_1_25,
+      x1_5: DESKTOP_SPACE_X_1_5,
+      x1_75: DESKTOP_SPACE_X_1_75,
+      x2: DESKTOP_SPACE_X_2,
+      x2_5: DESKTOP_SPACE_X_2_5,
+      x3: DESKTOP_SPACE_X_3,
+      x4: DESKTOP_SPACE_X_4,
+      x5: DESKTOP_SPACE_X_5,
+      x6: DESKTOP_SPACE_X_6,
+      x7: DESKTOP_SPACE_X_7,
+      x8: DESKTOP_SPACE_X_8,
+      x9: DESKTOP_SPACE_X_9,
+      x10: DESKTOP_SPACE_X_10,
+      x11: DESKTOP_SPACE_X_11,
+      x12: DESKTOP_SPACE_X_12
     },
     sizes: {
-      none: "0px",
-      half: "4px",
-      x0: "0px",
-      x0_25: "2px",
-      x0_5: "4px",
-      x0_75: "6px",
-      x1: "8px",
-      x1_25: "10px",
-      x1_5: "12px",
-      x1_75: "14px",
-      x2: "16px",
-      x2_5: "20px",
-      x3: "24px",
-      x4: "32px",
-      x5: "40px",
-      x6: "48px",
-      x7: "56px",
-      x8: "64px",
-      x9: "72px",
-      x10: "80px",
-      x11: "88px",
-      x12: "96px"
+      none: DESKTOP_SPACE_NONE,
+      half: DESKTOP_SPACE_HALF,
+      x0: DESKTOP_SPACE_X_0,
+      x0_25: DESKTOP_SPACE_X_0_25,
+      x0_5: DESKTOP_SPACE_X_0_5,
+      x0_75: DESKTOP_SPACE_X_0_75,
+      x1: DESKTOP_SPACE_X_1,
+      x1_25: DESKTOP_SPACE_X_1_25,
+      x1_5: DESKTOP_SPACE_X_1_5,
+      x1_75: DESKTOP_SPACE_X_1_75,
+      x2: DESKTOP_SPACE_X_2,
+      x2_5: DESKTOP_SPACE_X_2_5,
+      x3: DESKTOP_SPACE_X_3,
+      x4: DESKTOP_SPACE_X_4,
+      x5: DESKTOP_SPACE_X_5,
+      x6: DESKTOP_SPACE_X_6,
+      x7: DESKTOP_SPACE_X_7,
+      x8: DESKTOP_SPACE_X_8,
+      x9: DESKTOP_SPACE_X_9,
+      x10: DESKTOP_SPACE_X_10,
+      x11: DESKTOP_SPACE_X_11,
+      x12: DESKTOP_SPACE_X_12
     },
     radii: {
-      small: "2px",
-      medium: "4px",
-      large: "8px",
-      circle: "50%",
-      rounded: "9999px"
+      small: DESKTOP_BORDER_RADIUS_SMALL,
+      medium: DESKTOP_BORDER_RADIUS_MEDIUM,
+      large: DESKTOP_BORDER_RADIUS_LARGE,
+      circle: DESKTOP_BORDER_RADIUS_CIRCLE,
+      rounded: DESKTOP_BORDER_RADIUS_ROUNDED
     },
     borders: []
   },
   experimental: {
     colors: {
-      black: "#011e38",
-      blackBlue: "#122b47",
-      darkBlue: "#00438f",
-      blue: "#216beb",
-      lightBlue: "#e1ebfa",
-      darkGrey: "#434d59",
-      midGrey: "#6c7784",
-      grey: "#c0c8d1",
-      lightGrey: "#e4e7eb",
-      whiteGrey: "#f0f2f5",
-      white: "#ffffff",
-      yellow: "#ffbb00",
-      lightYellow: "#fcf5e3",
-      green: "#008059",
-      lightGreen: "#e9f7f2",
-      red: "#cc1439",
-      lightRed: "#fae6ea",
-      categorical1: "#19c4e6",
-      categorical2: "#8033cc",
-      categorical3: "#e372d0",
-      categorical4: "#55ddb0",
-      categorical5: "#ee5513",
-      categorical6: "#d3d322"
+      black: DESKTOP_COLOR_BASE_BLACK,
+      blackBlue: DESKTOP_COLOR_BASE_BLACK_BLUE,
+      darkBlue: DESKTOP_COLOR_BASE_DARK_BLUE,
+      blue: DESKTOP_COLOR_BASE_BLUE,
+      lightBlue: DESKTOP_COLOR_BASE_LIGHT_BLUE,
+      darkGrey: DESKTOP_COLOR_BASE_DARK_GREY,
+      midGrey: DESKTOP_COLOR_BASE_MID_GREY,
+      grey: DESKTOP_COLOR_BASE_GREY,
+      lightGrey: DESKTOP_COLOR_BASE_LIGHT_GREY,
+      whiteGrey: DESKTOP_COLOR_BASE_WHITE_GREY,
+      white: DESKTOP_COLOR_BASE_WHITE,
+      yellow: DESKTOP_COLOR_BASE_YELLOW,
+      lightYellow: DESKTOP_COLOR_BASE_LIGHT_YELLOW,
+      green: DESKTOP_COLOR_BASE_GREEN,
+      lightGreen: DESKTOP_COLOR_BASE_LIGHT_GREEN,
+      red: DESKTOP_COLOR_BASE_RED,
+      lightRed: DESKTOP_COLOR_BASE_LIGHT_RED,
+      categorical1: DESKTOP_COLOR_CATEGORICAL_1,
+      categorical2: DESKTOP_COLOR_CATEGORICAL_2,
+      categorical3: DESKTOP_COLOR_CATEGORICAL_3,
+      categorical4: DESKTOP_COLOR_CATEGORICAL_4,
+      categorical5: DESKTOP_COLOR_CATEGORICAL_5,
+      categorical6: DESKTOP_COLOR_CATEGORICAL_6
     },
     fontWeights: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      bold: 600
+      light: DESKTOP_FONT_WEIGHT_LIGHT,
+      normal: DESKTOP_FONT_WEIGHT_NORMAL,
+      medium: DESKTOP_FONT_WEIGHT_MEDIUM,
+      bold: DESKTOP_FONT_WEIGHT_BOLD
     },
     fonts: {
-      base: "'IBM Plex Sans', sans-serif",
-      mono: "'IBM Plex Mono', monospace",
-      sc: "'Noto Sans SC', sans-serif"
+      base: DESKTOP_FONT_FAMILY_BASE,
+      mono: DESKTOP_FONT_FAMILY_MONO,
+      sc: DESKTOP_FONT_FAMILY_SC
     },
     shadows: {
-      small: "0px 1px 2px 0px rgba(1, 30, 56, 0.25)",
-      medium: "0px 3px 8px 0px rgba(1, 30, 56, 0.18)",
-      large: "0px 6px 12px 2px rgba(1, 30, 56, 0.15)",
-      focus: "0px 0px 5px 0px rgba(33, 107, 235, .9)",
-      error: "0px 0px 5px 0px rgba(204, 20, 57, .9)"
+      small: DESKTOP_SHADOW_SMALL,
+      medium: DESKTOP_SHADOW_MEDIUM,
+      large: DESKTOP_SHADOW_LARGE,
+      focus: DESKTOP_SHADOW_FOCUS,
+      error: DESKTOP_SHADOW_ERROR
     },
     breakpoints: {
-      extraSmall: "0px",
-      small: "768px",
-      medium: "1024px",
-      large: "1360px",
-      extraLarge: "1920px",
-      phonePortrait: "320px",
-      phoneLandscape: "640px",
-      tabletPortrait: "768px",
-      tabletLandscape: "1024px",
-      laptop: "1280px",
-      desktop: "1440px"
+      extraSmall: DESKTOP_BREAKPOINTS_BASE_EXTRA_SMALL,
+      small: DESKTOP_BREAKPOINTS_BASE_SMALL,
+      medium: DESKTOP_BREAKPOINTS_BASE_MEDIUM,
+      large: DESKTOP_BREAKPOINTS_BASE_LARGE,
+      extraLarge: DESKTOP_BREAKPOINTS_BASE_EXTRA_LARGE,
+      phonePortrait: DESKTOP_BREAKPOINTS_SEMANTIC_PHONE_PORTRAIT,
+      phoneLandscape: DESKTOP_BREAKPOINTS_SEMANTIC_PHONE_LANDSCAPE,
+      tabletPortrait: DESKTOP_BREAKPOINTS_SEMANTIC_TABLET_PORTRAIT,
+      tabletLandscape: DESKTOP_BREAKPOINTS_SEMANTIC_TABLET_LANDSCAPE,
+      laptop: DESKTOP_BREAKPOINTS_SEMANTIC_LAPTOP,
+      desktop: DESKTOP_BREAKPOINTS_SEMANTIC_DESKTOP
     },
     zIndices: {
-      content: 100,
-      tabsScollIndicator: 200,
-      tabsBar: 210,
-      overlay: 1000,
-      aboveOverlay: 1010,
-      tableHeader: 10,
-      modalHeaderAndFooter: 2,
-      openControl: 1000,
-      navBar: 900,
-      sidebar: 800
+      content: DESKTOP_Z_INDEX_CONTENT,
+      tabsScollIndicator: DESKTOP_Z_INDEX_TABS_SCROLL_INDICATOR,
+      tabsBar: DESKTOP_Z_INDEX_TABS_BAR,
+      overlay: DESKTOP_Z_INDEX_OVERLAY,
+      aboveOverlay: DESKTOP_Z_INDEX_ABOVE_OVERLAY,
+      tableHeader: DESKTOP_Z_INDEX_TABLE_HEADER,
+      modalHeaderAndFooter: DESKTOP_Z_INDEX_MODAL_HEADER_AND_FOOTER,
+      openControl: DESKTOP_Z_INDEX_OPEN_CONTROL,
+      navBar: DESKTOP_Z_INDEX_NAV_BAR,
+      sidebar: DESKTOP_Z_INDEX_SIDEBAR
     },
     fontSizes: {
-      smaller: "12px",
-      small: "15px",
-      medium: "15px",
-      large: "21px",
-      larger: "24px",
-      largest: "30px",
-      xxs: "9px",
-      xs: "12px",
-      sm: "15px",
-      md: "18px",
-      lg: "21px",
-      xl: "24px",
-      xxl: "30px",
-      heading1: "24px",
-      heading2: "21px",
-      heading3: "18px",
-      heading4: "15px",
-      base: "15px"
+      smaller: DESKTOP_FONT_SIZE_STANDARD_SMALLER,
+      small: DESKTOP_FONT_SIZE_STANDARD_SMALL,
+      medium: DESKTOP_FONT_SIZE_STANDARD_MEDIUM,
+      large: DESKTOP_FONT_SIZE_STANDARD_LARGE,
+      larger: DESKTOP_FONT_SIZE_STANDARD_LARGER,
+      largest: DESKTOP_FONT_SIZE_STANDARD_LARGEST,
+      base: DESKTOP_FONT_SIZE_SEMANTIC_BASE,
+      xxs: DESKTOP_FONT_SIZE_EXPERIMENTAL_XXS,
+      xs: DESKTOP_FONT_SIZE_EXPERIMENTAL_XS,
+      sm: DESKTOP_FONT_SIZE_EXPERIMENTAL_SM,
+      md: DESKTOP_FONT_SIZE_EXPERIMENTAL_MD,
+      lg: DESKTOP_FONT_SIZE_EXPERIMENTAL_LG,
+      xl: DESKTOP_FONT_SIZE_EXPERIMENTAL_XL,
+      xxl: DESKTOP_FONT_SIZE_EXPERIMENTAL_XXL,
+      heading1: DESKTOP_FONT_SIZE_SEMANTIC_HEADING_1,
+      heading2: DESKTOP_FONT_SIZE_SEMANTIC_HEADING_2,
+      heading3: DESKTOP_FONT_SIZE_SEMANTIC_HEADING_3,
+      heading4: DESKTOP_FONT_SIZE_SEMANTIC_HEADING_4
     },
     lineHeights: {
-      base: "1.3333333333333333",
-      baseRelaxed: "1.6",
-      smallTextBase: "1.3333333333333333",
-      smallTextCompressed: "1.3333333333333333",
-      smallRelaxed: "1.6",
-      smallerText: "1.3333333333333333",
-      smallerRelaxed: "1.6666666666666667",
-      heading1: "1.3333333333333333",
-      heading2: "1.3333333333333333",
-      heading3: "1.3333333333333333",
-      heading4: "1.3333333333333333",
-      title: "1.3333333333333333",
-      sectionTitle: "1.3333333333333333",
-      subsectionTitle: "1.3333333333333333"
+      base: DESKTOP_LINE_HEIGHT_BASE,
+      baseRelaxed: DESKTOP_LINE_HEIGHT_BASE_RELAXED,
+      smallTextBase: DESKTOP_LINE_HEIGHT_SMALL_TEXT_BASE,
+      smallTextCompressed: DESKTOP_LINE_HEIGHT_SMALL_TEXT_COMPRESSED,
+      smallRelaxed: DESKTOP_LINE_HEIGHT_SMALL_RELAXED,
+      smallerText: DESKTOP_LINE_HEIGHT_SMALLER_TEXT,
+      smallerRelaxed: DESKTOP_LINE_HEIGHT_SMALLER_RELAXED,
+      heading1: DESKTOP_LINE_HEIGHT_HEADING_1,
+      heading2: DESKTOP_LINE_HEIGHT_HEADING_2,
+      heading3: DESKTOP_LINE_HEIGHT_HEADING_3,
+      heading4: DESKTOP_LINE_HEIGHT_HEADING_4,
+      title: DESKTOP_LINE_HEIGHT_TITLE,
+      sectionTitle: DESKTOP_LINE_HEIGHT_SECTION_TITLE,
+      subsectionTitle: DESKTOP_LINE_HEIGHT_SUBSECTION_TITLE
     },
     space: {
-      none: "0px",
-      x0: "0px",
-      x0_25: "2px",
-      half: "4px",
-      x0_5: "4px",
-      x0_75: "6px",
-      x1: "8px",
-      x1_25: "10px",
-      x1_5: "12px",
-      x1_75: "14px",
-      x2: "16px",
-      x2_5: "20px",
-      x3: "24px",
-      x4: "32px",
-      x5: "40px",
-      x6: "48px",
-      x7: "56px",
-      x8: "64px",
-      x9: "72px",
-      x10: "80px",
-      x11: "88px",
-      x12: "96px"
+      none: DESKTOP_SPACE_NONE,
+      x0: DESKTOP_SPACE_X_0,
+      x0_25: DESKTOP_SPACE_X_0_25,
+      half: DESKTOP_SPACE_HALF,
+      x0_5: DESKTOP_SPACE_X_0_5,
+      x0_75: DESKTOP_SPACE_X_0_75,
+      x1: DESKTOP_SPACE_X_1,
+      x1_25: DESKTOP_SPACE_X_1_25,
+      x1_5: DESKTOP_SPACE_X_1_5,
+      x1_75: DESKTOP_SPACE_X_1_75,
+      x2: DESKTOP_SPACE_X_2,
+      x2_5: DESKTOP_SPACE_X_2_5,
+      x3: DESKTOP_SPACE_X_3,
+      x4: DESKTOP_SPACE_X_4,
+      x5: DESKTOP_SPACE_X_5,
+      x6: DESKTOP_SPACE_X_6,
+      x7: DESKTOP_SPACE_X_7,
+      x8: DESKTOP_SPACE_X_8,
+      x9: DESKTOP_SPACE_X_9,
+      x10: DESKTOP_SPACE_X_10,
+      x11: DESKTOP_SPACE_X_11,
+      x12: DESKTOP_SPACE_X_12
     },
     sizes: {
-      none: "0px",
-      x0: "0px",
-      x0_25: "2px",
-      half: "4px",
-      x0_5: "4px",
-      x0_75: "6px",
-      x1: "8px",
-      x1_25: "10px",
-      x1_5: "12px",
-      x1_75: "14px",
-      x2: "16px",
-      x2_5: "20px",
-      x3: "24px",
-      x4: "32px",
-      x5: "40px",
-      x6: "48px",
-      x7: "56px",
-      x8: "64px",
-      x9: "72px",
-      x10: "80px",
-      x11: "88px",
-      x12: "96px"
+      none: DESKTOP_SPACE_NONE,
+      x0: DESKTOP_SPACE_X_0,
+      x0_25: DESKTOP_SPACE_X_0_25,
+      half: DESKTOP_SPACE_HALF,
+      x0_5: DESKTOP_SPACE_X_0_5,
+      x0_75: DESKTOP_SPACE_X_0_75,
+      x1: DESKTOP_SPACE_X_1,
+      x1_25: DESKTOP_SPACE_X_1_25,
+      x1_5: DESKTOP_SPACE_X_1_5,
+      x1_75: DESKTOP_SPACE_X_1_75,
+      x2: DESKTOP_SPACE_X_2,
+      x2_5: DESKTOP_SPACE_X_2_5,
+      x3: DESKTOP_SPACE_X_3,
+      x4: DESKTOP_SPACE_X_4,
+      x5: DESKTOP_SPACE_X_5,
+      x6: DESKTOP_SPACE_X_6,
+      x7: DESKTOP_SPACE_X_7,
+      x8: DESKTOP_SPACE_X_8,
+      x9: DESKTOP_SPACE_X_9,
+      x10: DESKTOP_SPACE_X_10,
+      x11: DESKTOP_SPACE_X_11,
+      x12: DESKTOP_SPACE_X_12
     },
     radii: {
-      small: "2px",
-      medium: "4px",
-      large: "8px",
-      circle: "50%",
-      rounded: "9999px"
+      small: DESKTOP_BORDER_RADIUS_SMALL,
+      medium: DESKTOP_BORDER_RADIUS_MEDIUM,
+      large: DESKTOP_BORDER_RADIUS_LARGE,
+      circle: DESKTOP_BORDER_RADIUS_CIRCLE,
+      rounded: DESKTOP_BORDER_RADIUS_ROUNDED
     },
     borders: []
   },
   tablet: {
     colors: {
-      black: "#011e38",
-      blackBlue: "#122b47",
-      darkBlue: "#00438f",
-      blue: "#216beb",
-      lightBlue: "#e1ebfa",
-      darkGrey: "#434d59",
-      midGrey: "#6c7784",
-      grey: "#c0c8d1",
-      lightGrey: "#e4e7eb",
-      whiteGrey: "#f0f2f5",
-      white: "#ffffff",
-      yellow: "#ffbb00",
-      lightYellow: "#fcf5e3",
-      green: "#008059",
-      lightGreen: "#e9f7f2",
-      red: "#cc1439",
-      lightRed: "#fae6ea",
-      categorical1: "#19c4e6",
-      categorical2: "#8033cc",
-      categorical3: "#e372d0",
-      categorical4: "#55ddb0",
-      categorical5: "#ee5513",
-      categorical6: "#d3d322"
+      black: TABLET_COLOR_BASE_BLACK,
+      blackBlue: TABLET_COLOR_BASE_BLACK_BLUE,
+      darkBlue: TABLET_COLOR_BASE_DARK_BLUE,
+      blue: TABLET_COLOR_BASE_BLUE,
+      lightBlue: TABLET_COLOR_BASE_LIGHT_BLUE,
+      darkGrey: TABLET_COLOR_BASE_DARK_GREY,
+      midGrey: TABLET_COLOR_BASE_MID_GREY,
+      grey: TABLET_COLOR_BASE_GREY,
+      lightGrey: TABLET_COLOR_BASE_LIGHT_GREY,
+      whiteGrey: TABLET_COLOR_BASE_WHITE_GREY,
+      white: TABLET_COLOR_BASE_WHITE,
+      yellow: TABLET_COLOR_BASE_YELLOW,
+      lightYellow: TABLET_COLOR_BASE_LIGHT_YELLOW,
+      green: TABLET_COLOR_BASE_GREEN,
+      lightGreen: TABLET_COLOR_BASE_LIGHT_GREEN,
+      red: TABLET_COLOR_BASE_RED,
+      lightRed: TABLET_COLOR_BASE_LIGHT_RED,
+      categorical1: TABLET_COLOR_CATEGORICAL_1,
+      categorical2: TABLET_COLOR_CATEGORICAL_2,
+      categorical3: TABLET_COLOR_CATEGORICAL_3,
+      categorical4: TABLET_COLOR_CATEGORICAL_4,
+      categorical5: TABLET_COLOR_CATEGORICAL_5,
+      categorical6: TABLET_COLOR_CATEGORICAL_6
     },
     fontWeights: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      bold: 600
+      light: TABLET_FONT_WEIGHT_LIGHT,
+      normal: TABLET_FONT_WEIGHT_NORMAL,
+      medium: TABLET_FONT_WEIGHT_MEDIUM,
+      bold: TABLET_FONT_WEIGHT_BOLD
     },
     fonts: {
-      base: "'IBM Plex Sans', sans-serif",
-      mono: "'IBM Plex Mono', monospace",
-      sc: "'Noto Sans SC', sans-serif"
+      base: TABLET_FONT_FAMILY_BASE,
+      mono: TABLET_FONT_FAMILY_MONO,
+      sc: TABLET_FONT_FAMILY_SC
     },
     shadows: {
-      small: "0px 1px 2px 0px rgba(1, 30, 56, 0.25)",
-      medium: "0px 3px 8px 0px rgba(1, 30, 56, 0.18)",
-      large: "0px 6px 12px 2px rgba(1, 30, 56, 0.15)",
-      focus: "0px 0px 5px 0px rgba(33, 107, 235, .9)",
-      error: "0px 0px 5px 0px rgba(204, 20, 57, .9)"
+      small: TABLET_SHADOW_SMALL,
+      medium: TABLET_SHADOW_MEDIUM,
+      large: TABLET_SHADOW_LARGE,
+      focus: TABLET_SHADOW_FOCUS,
+      error: TABLET_SHADOW_ERROR
     },
     breakpoints: {
-      extraSmall: "0px",
-      small: "768px",
-      medium: "1024px",
-      large: "1360px",
-      extraLarge: "1920px",
-      phonePortrait: "320px",
-      phoneLandscape: "640px",
-      tabletPortrait: "768px",
-      tabletLandscape: "1024px",
-      laptop: "1280px",
-      desktop: "1440px"
+      extraSmall: TABLET_BREAKPOINTS_BASE_EXTRA_SMALL,
+      small: TABLET_BREAKPOINTS_BASE_SMALL,
+      medium: TABLET_BREAKPOINTS_BASE_MEDIUM,
+      large: TABLET_BREAKPOINTS_BASE_LARGE,
+      extraLarge: TABLET_BREAKPOINTS_BASE_EXTRA_LARGE,
+      phonePortrait: TABLET_BREAKPOINTS_SEMANTIC_PHONE_PORTRAIT,
+      phoneLandscape: TABLET_BREAKPOINTS_SEMANTIC_PHONE_LANDSCAPE,
+      tabletPortrait: TABLET_BREAKPOINTS_SEMANTIC_TABLET_PORTRAIT,
+      tabletLandscape: TABLET_BREAKPOINTS_SEMANTIC_TABLET_LANDSCAPE,
+      laptop: TABLET_BREAKPOINTS_SEMANTIC_LAPTOP,
+      desktop: TABLET_BREAKPOINTS_SEMANTIC_DESKTOP
     },
     zIndices: {
-      content: 100,
-      tabsScollIndicator: 200,
-      tabsBar: 210,
-      overlay: 1000,
-      aboveOverlay: 1010,
-      tableHeader: 10,
-      modalHeaderAndFooter: 2,
-      openControl: 1000,
-      navBar: 900,
-      sidebar: 800
+      content: TABLET_Z_INDEX_CONTENT,
+      tabsScollIndicator: TABLET_Z_INDEX_TABS_SCROLL_INDICATOR,
+      tabsBar: TABLET_Z_INDEX_TABS_BAR,
+      overlay: TABLET_Z_INDEX_OVERLAY,
+      aboveOverlay: TABLET_Z_INDEX_ABOVE_OVERLAY,
+      tableHeader: TABLET_Z_INDEX_TABLE_HEADER,
+      modalHeaderAndFooter: TABLET_Z_INDEX_MODAL_HEADER_AND_FOOTER,
+      openControl: TABLET_Z_INDEX_OPEN_CONTROL,
+      navBar: TABLET_Z_INDEX_NAV_BAR,
+      sidebar: TABLET_Z_INDEX_SIDEBAR
     },
     fontSizes: {
-      smaller: "16.799999999999997px",
-      small: "21px",
-      medium: "21px",
-      large: "29.4px",
-      larger: "33.599999999999994px",
-      largest: "42px",
-      xxs: "12.6px",
-      xs: "16.799999999999997px",
-      sm: "21px",
-      md: "25.2px",
-      lg: "29.4px",
-      xl: "33.599999999999994px",
-      xxl: "42px",
-      heading1: "33.599999999999994px",
-      heading2: "29.4px",
-      heading3: "25.2px",
-      heading4: "21px",
-      base: "21px"
+      smaller: TABLET_FONT_SIZE_STANDARD_SMALLER,
+      small: TABLET_FONT_SIZE_STANDARD_SMALL,
+      medium: TABLET_FONT_SIZE_STANDARD_MEDIUM,
+      large: TABLET_FONT_SIZE_STANDARD_LARGE,
+      larger: TABLET_FONT_SIZE_STANDARD_LARGER,
+      largest: TABLET_FONT_SIZE_STANDARD_LARGEST,
+      xxs: TABLET_FONT_SIZE_EXPERIMENTAL_XXS,
+      xs: TABLET_FONT_SIZE_EXPERIMENTAL_XS,
+      sm: TABLET_FONT_SIZE_EXPERIMENTAL_SM,
+      md: TABLET_FONT_SIZE_EXPERIMENTAL_MD,
+      lg: TABLET_FONT_SIZE_EXPERIMENTAL_LG,
+      xl: TABLET_FONT_SIZE_EXPERIMENTAL_XL,
+      xxl: TABLET_FONT_SIZE_EXPERIMENTAL_XXL,
+      heading1: TABLET_FONT_SIZE_SEMANTIC_HEADING_1,
+      heading2: TABLET_FONT_SIZE_SEMANTIC_HEADING_2,
+      heading3: TABLET_FONT_SIZE_SEMANTIC_HEADING_3,
+      heading4: TABLET_FONT_SIZE_SEMANTIC_HEADING_4,
+      base: TABLET_FONT_SIZE_SEMANTIC_BASE
     },
     lineHeights: {
-      base: "1.3333333333333333",
-      baseRelaxed: "1.5999999999999996",
-      smallTextBase: "1.3333333333333333",
-      smallTextCompressed: "1.3333333333333333",
-      smallRelaxed: "1.5999999999999996",
-      smallerText: "1.3333333333333335",
-      smallerRelaxed: "1.666666666666667",
-      heading1: "1.3333333333333335",
-      heading2: "1.3333333333333333",
-      heading3: "1.333333333333333",
-      heading4: "1.3333333333333333",
-      title: "1.3333333333333335",
-      sectionTitle: "1.3333333333333333",
-      subsectionTitle: "1.333333333333333"
+      base: TABLET_LINE_HEIGHT_BASE,
+      baseRelaxed: TABLET_LINE_HEIGHT_BASE_RELAXED,
+      smallTextBase: TABLET_LINE_HEIGHT_SMALL_TEXT_BASE,
+      smallTextCompressed: TABLET_LINE_HEIGHT_SMALL_TEXT_COMPRESSED,
+      smallRelaxed: TABLET_LINE_HEIGHT_SMALL_RELAXED,
+      smallerText: TABLET_LINE_HEIGHT_SMALLER_TEXT,
+      smallerRelaxed: TABLET_LINE_HEIGHT_SMALLER_RELAXED,
+      heading1: TABLET_LINE_HEIGHT_HEADING_1,
+      heading2: TABLET_LINE_HEIGHT_HEADING_2,
+      heading3: TABLET_LINE_HEIGHT_HEADING_3,
+      heading4: TABLET_LINE_HEIGHT_HEADING_4,
+      title: TABLET_LINE_HEIGHT_TITLE,
+      sectionTitle: TABLET_LINE_HEIGHT_SECTION_TITLE,
+      subsectionTitle: TABLET_LINE_HEIGHT_SUBSECTION_TITLE
     },
     space: {
-      none: "0px",
-      x0: "0px",
-      x0_25: "2.8px",
-      half: "5.6px",
-      x0_5: "5.6px",
-      x0_75: "8.399999999999999px",
-      x1: "11.2px",
-      x1_25: "14px",
-      x1_5: "16.799999999999997px",
-      x1_75: "19.599999999999998px",
-      x2: "22.4px",
-      x2_5: "28px",
-      x3: "33.599999999999994px",
-      x4: "44.8px",
-      x5: "56px",
-      x6: "67.19999999999999px",
-      x7: "78.39999999999999px",
-      x8: "89.6px",
-      x9: "100.8px",
-      x10: "112px",
-      x11: "123.19999999999999px",
-      x12: "134.39999999999998px"
+      none: TABLET_SPACE_NONE,
+      x0: TABLET_SPACE_X_0,
+      x0_25: TABLET_SPACE_X_0_25,
+      half: TABLET_SPACE_HALF,
+      x0_5: TABLET_SPACE_X_0_5,
+      x0_75: TABLET_SPACE_X_0_75,
+      x1: TABLET_SPACE_X_1,
+      x1_25: TABLET_SPACE_X_1_25,
+      x1_5: TABLET_SPACE_X_1_5,
+      x1_75: TABLET_SPACE_X_1_75,
+      x2: TABLET_SPACE_X_2,
+      x2_5: TABLET_SPACE_X_2_5,
+      x3: TABLET_SPACE_X_3,
+      x4: TABLET_SPACE_X_4,
+      x5: TABLET_SPACE_X_5,
+      x6: TABLET_SPACE_X_6,
+      x7: TABLET_SPACE_X_7,
+      x8: TABLET_SPACE_X_8,
+      x9: TABLET_SPACE_X_9,
+      x10: TABLET_SPACE_X_10,
+      x11: TABLET_SPACE_X_11,
+      x12: TABLET_SPACE_X_12
     },
     sizes: {
-      none: "0px",
-      x0: "0px",
-      x0_25: "2.8px",
-      half: "5.6px",
-      x0_5: "5.6px",
-      x0_75: "8.399999999999999px",
-      x1: "11.2px",
-      x1_25: "14px",
-      x1_5: "16.799999999999997px",
-      x1_75: "19.599999999999998px",
-      x2: "22.4px",
-      x2_5: "28px",
-      x3: "33.599999999999994px",
-      x4: "44.8px",
-      x5: "56px",
-      x6: "67.19999999999999px",
-      x7: "78.39999999999999px",
-      x8: "89.6px",
-      x9: "100.8px",
-      x10: "112px",
-      x11: "123.19999999999999px",
-      x12: "134.39999999999998px"
+      none: TABLET_SPACE_NONE,
+      x0: TABLET_SPACE_X_0,
+      x0_25: TABLET_SPACE_X_0_25,
+      half: TABLET_SPACE_HALF,
+      x0_5: TABLET_SPACE_X_0_5,
+      x0_75: TABLET_SPACE_X_0_75,
+      x1: TABLET_SPACE_X_1,
+      x1_25: TABLET_SPACE_X_1_25,
+      x1_5: TABLET_SPACE_X_1_5,
+      x1_75: TABLET_SPACE_X_1_75,
+      x2: TABLET_SPACE_X_2,
+      x2_5: TABLET_SPACE_X_2_5,
+      x3: TABLET_SPACE_X_3,
+      x4: TABLET_SPACE_X_4,
+      x5: TABLET_SPACE_X_5,
+      x6: TABLET_SPACE_X_6,
+      x7: TABLET_SPACE_X_7,
+      x8: TABLET_SPACE_X_8,
+      x9: TABLET_SPACE_X_9,
+      x10: TABLET_SPACE_X_10,
+      x11: TABLET_SPACE_X_11,
+      x12: TABLET_SPACE_X_12
     },
     radii: {
-      small: "2.8px",
-      medium: "5.6px",
-      large: "11.2px",
-      circle: "50%",
-      rounded: "9999px"
+      small: TABLET_BORDER_RADIUS_SMALL,
+      medium: TABLET_BORDER_RADIUS_MEDIUM,
+      large: TABLET_BORDER_RADIUS_LARGE,
+      circle: TABLET_BORDER_RADIUS_CIRCLE,
+      rounded: TABLET_BORDER_RADIUS_ROUNDED
     },
     borders: []
   },
   phone: {
     colors: {
-      black: "#011e38",
-      blackBlue: "#122b47",
-      darkBlue: "#00438f",
-      blue: "#216beb",
-      lightBlue: "#e1ebfa",
-      darkGrey: "#434d59",
-      midGrey: "#6c7784",
-      grey: "#c0c8d1",
-      lightGrey: "#e4e7eb",
-      whiteGrey: "#f0f2f5",
-      white: "#ffffff",
-      yellow: "#ffbb00",
-      lightYellow: "#fcf5e3",
-      green: "#008059",
-      lightGreen: "#e9f7f2",
-      red: "#cc1439",
-      lightRed: "#fae6ea",
-      categorical1: "#19c4e6",
-      categorical2: "#8033cc",
-      categorical3: "#e372d0",
-      categorical4: "#55ddb0",
-      categorical5: "#ee5513",
-      categorical6: "#d3d322"
+      black: PHONE_COLOR_BASE_BLACK,
+      blackBlue: PHONE_COLOR_BASE_BLACK_BLUE,
+      darkBlue: PHONE_COLOR_BASE_DARK_BLUE,
+      blue: PHONE_COLOR_BASE_BLUE,
+      lightBlue: PHONE_COLOR_BASE_LIGHT_BLUE,
+      darkGrey: PHONE_COLOR_BASE_DARK_GREY,
+      midGrey: PHONE_COLOR_BASE_MID_GREY,
+      grey: PHONE_COLOR_BASE_GREY,
+      lightGrey: PHONE_COLOR_BASE_LIGHT_GREY,
+      whiteGrey: PHONE_COLOR_BASE_WHITE_GREY,
+      white: PHONE_COLOR_BASE_WHITE,
+      yellow: PHONE_COLOR_BASE_YELLOW,
+      lightYellow: PHONE_COLOR_BASE_LIGHT_YELLOW,
+      green: PHONE_COLOR_BASE_GREEN,
+      lightGreen: PHONE_COLOR_BASE_LIGHT_GREEN,
+      red: PHONE_COLOR_BASE_RED,
+      lightRed: PHONE_COLOR_BASE_LIGHT_RED,
+      categorical1: PHONE_COLOR_CATEGORICAL_1,
+      categorical2: PHONE_COLOR_CATEGORICAL_2,
+      categorical3: PHONE_COLOR_CATEGORICAL_3,
+      categorical4: PHONE_COLOR_CATEGORICAL_4,
+      categorical5: PHONE_COLOR_CATEGORICAL_5,
+      categorical6: PHONE_COLOR_CATEGORICAL_6
     },
     fontWeights: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      bold: 600
+      light: PHONE_FONT_WEIGHT_LIGHT,
+      normal: PHONE_FONT_WEIGHT_NORMAL,
+      medium: PHONE_FONT_WEIGHT_MEDIUM,
+      bold: PHONE_FONT_WEIGHT_BOLD
     },
     fonts: {
-      base: "'IBM Plex Sans', sans-serif",
-      mono: "'IBM Plex Mono', monospace",
-      sc: "'Noto Sans SC', sans-serif"
+      base: PHONE_FONT_FAMILY_BASE,
+      mono: PHONE_FONT_FAMILY_MONO,
+      sc: PHONE_FONT_FAMILY_SC
     },
     shadows: {
-      small: "0px 1px 2px 0px rgba(1, 30, 56, 0.25)",
-      medium: "0px 3px 8px 0px rgba(1, 30, 56, 0.18)",
-      large: "0px 6px 12px 2px rgba(1, 30, 56, 0.15)",
-      focus: "0px 0px 5px 0px rgba(33, 107, 235, .9)",
-      error: "0px 0px 5px 0px rgba(204, 20, 57, .9)"
+      small: PHONE_SHADOW_SMALL,
+      medium: PHONE_SHADOW_MEDIUM,
+      large: PHONE_SHADOW_LARGE,
+      focus: PHONE_SHADOW_FOCUS,
+      error: PHONE_SHADOW_ERROR
     },
     breakpoints: {
-      extraSmall: "0px",
-      small: "768px",
-      medium: "1024px",
-      large: "1360px",
-      extraLarge: "1920px",
-      phonePortrait: "320px",
-      phoneLandscape: "640px",
-      tabletPortrait: "768px",
-      tabletLandscape: "1024px",
-      laptop: "1280px",
-      desktop: "1440px"
+      extraSmall: PHONE_BREAKPOINTS_BASE_EXTRA_SMALL,
+      small: PHONE_BREAKPOINTS_BASE_SMALL,
+      medium: PHONE_BREAKPOINTS_BASE_MEDIUM,
+      large: PHONE_BREAKPOINTS_BASE_LARGE,
+      extraLarge: PHONE_BREAKPOINTS_BASE_EXTRA_LARGE,
+      phonePortrait: PHONE_BREAKPOINTS_SEMANTIC_PHONE_PORTRAIT,
+      phoneLandscape: PHONE_BREAKPOINTS_SEMANTIC_PHONE_LANDSCAPE,
+      tabletPortrait: PHONE_BREAKPOINTS_SEMANTIC_TABLET_PORTRAIT,
+      tabletLandscape: PHONE_BREAKPOINTS_SEMANTIC_TABLET_LANDSCAPE,
+      laptop: PHONE_BREAKPOINTS_SEMANTIC_LAPTOP,
+      desktop: PHONE_BREAKPOINTS_SEMANTIC_DESKTOP
     },
     zIndices: {
-      content: 100,
-      tabsScollIndicator: 200,
-      tabsBar: 210,
-      overlay: 1000,
-      aboveOverlay: 1010,
-      tableHeader: 10,
-      modalHeaderAndFooter: 2,
-      openControl: 1000,
-      navBar: 900,
-      sidebar: 800
+      content: PHONE_Z_INDEX_CONTENT,
+      tabsScollIndicator: PHONE_Z_INDEX_TABS_SCROLL_INDICATOR,
+      tabsBar: PHONE_Z_INDEX_TABS_BAR,
+      overlay: PHONE_Z_INDEX_OVERLAY,
+      aboveOverlay: PHONE_Z_INDEX_ABOVE_OVERLAY,
+      tableHeader: PHONE_Z_INDEX_TABLE_HEADER,
+      modalHeaderAndFooter: PHONE_Z_INDEX_MODAL_HEADER_AND_FOOTER,
+      openControl: PHONE_Z_INDEX_OPEN_CONTROL,
+      navBar: PHONE_Z_INDEX_NAV_BAR,
+      sidebar: PHONE_Z_INDEX_SIDEBAR
     },
     fontSizes: {
-      smaller: "10.8px",
-      small: "13.5px",
-      medium: "13.5px",
-      large: "18.900000000000002px",
-      larger: "21.6px",
-      largest: "27px",
-      xxs: "8.1px",
-      xs: "10.8px",
-      sm: "13.5px",
-      md: "16.2px",
-      lg: "18.900000000000002px",
-      xl: "21.6px",
-      xxl: "27px",
-      heading1: "21.6px",
-      heading2: "18.900000000000002px",
-      heading3: "16.2px",
-      heading4: "13.5px",
-      base: "13.5px"
+      smaller: PHONE_FONT_SIZE_STANDARD_SMALLER,
+      small: PHONE_FONT_SIZE_STANDARD_SMALL,
+      medium: PHONE_FONT_SIZE_STANDARD_MEDIUM,
+      large: PHONE_FONT_SIZE_STANDARD_LARGE,
+      larger: PHONE_FONT_SIZE_STANDARD_LARGER,
+      largest: PHONE_FONT_SIZE_STANDARD_LARGEST,
+      xxs: PHONE_FONT_SIZE_EXPERIMENTAL_XXS,
+      xs: PHONE_FONT_SIZE_EXPERIMENTAL_XS,
+      sm: PHONE_FONT_SIZE_EXPERIMENTAL_SM,
+      md: PHONE_FONT_SIZE_EXPERIMENTAL_MD,
+      lg: PHONE_FONT_SIZE_EXPERIMENTAL_LG,
+      xl: PHONE_FONT_SIZE_EXPERIMENTAL_XL,
+      xxl: PHONE_FONT_SIZE_EXPERIMENTAL_XXL,
+      heading1: PHONE_FONT_SIZE_SEMANTIC_HEADING_1,
+      heading2: PHONE_FONT_SIZE_SEMANTIC_HEADING_2,
+      heading3: PHONE_FONT_SIZE_SEMANTIC_HEADING_3,
+      heading4: PHONE_FONT_SIZE_SEMANTIC_HEADING_4,
+      base: PHONE_FONT_SIZE_SEMANTIC_BASE
     },
     lineHeights: {
-      base: "1.3333333333333333",
-      baseRelaxed: "1.6",
-      smallTextBase: "1.3333333333333333",
-      smallTextCompressed: "1.3333333333333333",
-      smallRelaxed: "1.6",
-      smallerText: "1.3333333333333333",
-      smallerRelaxed: "1.6666666666666665",
-      heading1: "1.3333333333333333",
-      heading2: "1.333333333333333",
-      heading3: "1.3333333333333335",
-      heading4: "1.3333333333333333",
-      title: "1.3333333333333333",
-      sectionTitle: "1.333333333333333",
-      subsectionTitle: "1.3333333333333335"
+      base: PHONE_LINE_HEIGHT_BASE,
+      baseRelaxed: PHONE_LINE_HEIGHT_BASE_RELAXED,
+      smallTextBase: PHONE_LINE_HEIGHT_SMALL_TEXT_BASE,
+      smallTextCompressed: PHONE_LINE_HEIGHT_SMALL_TEXT_COMPRESSED,
+      smallRelaxed: PHONE_LINE_HEIGHT_SMALL_RELAXED,
+      smallerText: PHONE_LINE_HEIGHT_SMALLER_TEXT,
+      smallerRelaxed: PHONE_LINE_HEIGHT_SMALLER_RELAXED,
+      heading1: PHONE_LINE_HEIGHT_HEADING_1,
+      heading2: PHONE_LINE_HEIGHT_HEADING_2,
+      heading3: PHONE_LINE_HEIGHT_HEADING_3,
+      heading4: PHONE_LINE_HEIGHT_HEADING_4,
+      title: PHONE_LINE_HEIGHT_TITLE,
+      sectionTitle: PHONE_LINE_HEIGHT_SECTION_TITLE,
+      subsectionTitle: PHONE_LINE_HEIGHT_SUBSECTION_TITLE
     },
     space: {
-      none: "0px",
-      x0: "0px",
-      x0_25: "1.8px",
-      half: "3.6px",
-      x0_5: "3.6px",
-      x0_75: "5.4px",
-      x1: "7.2px",
-      x1_25: "9px",
-      x1_5: "10.8px",
-      x1_75: "12.6px",
-      x2: "14.4px",
-      x2_5: "18px",
-      x3: "21.6px",
-      x4: "28.8px",
-      x5: "36px",
-      x6: "43.2px",
-      x7: "50.4px",
-      x8: "57.6px",
-      x9: "64.8px",
-      x10: "72px",
-      x11: "79.2px",
-      x12: "86.4px"
+      none: PHONE_SPACE_NONE,
+      x0: PHONE_SPACE_X_0,
+      x0_25: PHONE_SPACE_X_0_25,
+      half: PHONE_SPACE_HALF,
+      x0_5: PHONE_SPACE_X_0_5,
+      x0_75: PHONE_SPACE_X_0_75,
+      x1: PHONE_SPACE_X_1,
+      x1_25: PHONE_SPACE_X_1_25,
+      x1_5: PHONE_SPACE_X_1_5,
+      x1_75: PHONE_SPACE_X_1_75,
+      x2: PHONE_SPACE_X_2,
+      x2_5: PHONE_SPACE_X_2_5,
+      x3: PHONE_SPACE_X_3,
+      x4: PHONE_SPACE_X_4,
+      x5: PHONE_SPACE_X_5,
+      x6: PHONE_SPACE_X_6,
+      x7: PHONE_SPACE_X_7,
+      x8: PHONE_SPACE_X_8,
+      x9: PHONE_SPACE_X_9,
+      x10: PHONE_SPACE_X_10,
+      x11: PHONE_SPACE_X_11,
+      x12: PHONE_SPACE_X_12
     },
     sizes: {
-      none: "0px",
-      x0: "0px",
-      x0_25: "1.8px",
-      half: "3.6px",
-      x0_5: "3.6px",
-      x0_75: "5.4px",
-      x1: "7.2px",
-      x1_25: "9px",
-      x1_5: "10.8px",
-      x1_75: "12.6px",
-      x2: "14.4px",
-      x2_5: "18px",
-      x3: "21.6px",
-      x4: "28.8px",
-      x5: "36px",
-      x6: "43.2px",
-      x7: "50.4px",
-      x8: "57.6px",
-      x9: "64.8px",
-      x10: "72px",
-      x11: "79.2px",
-      x12: "86.4px"
+      none: PHONE_SPACE_NONE,
+      x0: PHONE_SPACE_X_0,
+      x0_25: PHONE_SPACE_X_0_25,
+      half: PHONE_SPACE_HALF,
+      x0_5: PHONE_SPACE_X_0_5,
+      x0_75: PHONE_SPACE_X_0_75,
+      x1: PHONE_SPACE_X_1,
+      x1_25: PHONE_SPACE_X_1_25,
+      x1_5: PHONE_SPACE_X_1_5,
+      x1_75: PHONE_SPACE_X_1_75,
+      x2: PHONE_SPACE_X_2,
+      x2_5: PHONE_SPACE_X_2_5,
+      x3: PHONE_SPACE_X_3,
+      x4: PHONE_SPACE_X_4,
+      x5: PHONE_SPACE_X_5,
+      x6: PHONE_SPACE_X_6,
+      x7: PHONE_SPACE_X_7,
+      x8: PHONE_SPACE_X_8,
+      x9: PHONE_SPACE_X_9,
+      x10: PHONE_SPACE_X_10,
+      x11: PHONE_SPACE_X_11,
+      x12: PHONE_SPACE_X_12
     },
     radii: {
-      small: "1.8px",
-      medium: "3.6px",
-      large: "7.2px",
-      circle: "50%",
-      rounded: "9999px"
+      small: PHONE_BORDER_RADIUS_SMALL,
+      medium: PHONE_BORDER_RADIUS_MEDIUM,
+      large: PHONE_BORDER_RADIUS_LARGE,
+      circle: PHONE_BORDER_RADIUS_CIRCLE,
+      rounded: PHONE_BORDER_RADIUS_ROUNDED
     },
     borders: []
   }