@nulogy/components 14.1.2 → 14.1.4

package/dist/main.js

@@ -28661,7 +28661,8 @@
         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];
@@ -54712,75 +54713,485 @@
       }, 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",
@@ -54819,545 +55230,545 @@
           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: []
       }