@capillarytech/blaze-ui 5.23.3-beta.3 → 5.23.3-beta.4

package/styled/index.js

@@ -1,3 +1,148 @@
-// Re-export from variables for convenience
-// Consumers can import: import * as styledVars from '@capillarytech/blaze-ui/styled'
-export * from "./variables";
+import { BG_01, BG_02, BG_03, BG_08, BORDER_WIDTH_1, BORDER_WIDTH_2, BUTTON_HEIGHT, CAP_BLACK, CAP_BLACK_ALPHA01, CAP_BLUE, CAP_BLUE01, CAP_BLUE02, CAP_COLOR_01, CAP_COLOR_02, CAP_COLOR_03, CAP_COLOR_04, CAP_COLOR_05, CAP_COLOR_06, CAP_COLOR_07, CAP_COLOR_08, CAP_COLOR_09, CAP_COLOR_10, CAP_COLOR_11, CAP_COLOR_12, CAP_COLOR_13, CAP_COLOR_14, CAP_COLOR_15, CAP_COLOR_16, CAP_COLOR_17, CAP_COLOR_18, CAP_COLOR_19, CAP_COLOR_20, CAP_COLOR_21, CAP_COLOR_22, CAP_COLOR_23, CAP_COLOR_24, CAP_COLOR_25, CAP_COLOR_26, CAP_COLOR_27, CAP_G01, CAP_G02, CAP_G03, CAP_G04, CAP_G05, CAP_G06, CAP_G07, CAP_G08, CAP_G09, CAP_G10, CAP_G11, CAP_G12, CAP_G13, CAP_G14, CAP_G15, CAP_G16, CAP_G17, CAP_G18, CAP_G19, CAP_G20, CAP_GREEN01, CAP_GREEN02, CAP_ICON, CAP_ORANGE, CAP_ORANGE01, CAP_ORANGE02, CAP_PALE_GREY, CAP_PINK, CAP_PRIMARY, CAP_PURPLE, CAP_PURPLE01, CAP_PURPLE02, CAP_PURPLE03, CAP_PURPLE04, CAP_RED, CAP_RED01, CAP_RED02, CAP_RED03, CAP_SECONDARY, CAP_SPACE_00, CAP_SPACE_01, CAP_SPACE_02, CAP_SPACE_03, CAP_SPACE_04, CAP_SPACE_06, CAP_SPACE_08, CAP_SPACE_12, CAP_SPACE_16, CAP_SPACE_18, CAP_SPACE_19, CAP_SPACE_20, CAP_SPACE_23, CAP_SPACE_24, CAP_SPACE_28, CAP_SPACE_32, CAP_SPACE_36, CAP_SPACE_40, CAP_SPACE_42, CAP_SPACE_44, CAP_SPACE_48, CAP_SPACE_52, CAP_SPACE_56, CAP_SPACE_60, CAP_SPACE_64, CAP_SPACE_72, CAP_SPACE_80, CAP_WHITE, CAP_WHITE_OVERLAY, CAP_YELLOW, CAP_YELLOW01, CAP_YELLOW02, COLOR_ERROR, COLOR_INFO, COLOR_SUCCESS, COLOR_WARNING, DEFAULT_LINE_HEIGHT, FONT_COLOR_01, FONT_COLOR_02, FONT_COLOR_03, FONT_COLOR_04, FONT_COLOR_05, FONT_COLOR_06, FONT_FAMILY, FONT_SIZE_L, FONT_SIZE_M, FONT_SIZE_S, FONT_SIZE_VL, FONT_SIZE_VS, FONT_WEIGHT_MEDIUM, FONT_WEIGHT_REGULAR, ICON_SIZE_L, ICON_SIZE_M, ICON_SIZE_S, ICON_SIZE_XS, INPUT_HEIGHT, NORMAL_LINE_HEIGHT, RADIUS_04, RADIUS_08, SPACING_04, SPACING_08, SPACING_12, SPACING_16, SPACING_24, SPACING_32, TRANSITION_ALL, USER_INITIALS_COLOR_CODES } from "../styles/_variables.js";
+export {
+  BG_01,
+  BG_02,
+  BG_03,
+  BG_08,
+  BORDER_WIDTH_1,
+  BORDER_WIDTH_2,
+  BUTTON_HEIGHT,
+  CAP_BLACK,
+  CAP_BLACK_ALPHA01,
+  CAP_BLUE,
+  CAP_BLUE01,
+  CAP_BLUE02,
+  CAP_COLOR_01,
+  CAP_COLOR_02,
+  CAP_COLOR_03,
+  CAP_COLOR_04,
+  CAP_COLOR_05,
+  CAP_COLOR_06,
+  CAP_COLOR_07,
+  CAP_COLOR_08,
+  CAP_COLOR_09,
+  CAP_COLOR_10,
+  CAP_COLOR_11,
+  CAP_COLOR_12,
+  CAP_COLOR_13,
+  CAP_COLOR_14,
+  CAP_COLOR_15,
+  CAP_COLOR_16,
+  CAP_COLOR_17,
+  CAP_COLOR_18,
+  CAP_COLOR_19,
+  CAP_COLOR_20,
+  CAP_COLOR_21,
+  CAP_COLOR_22,
+  CAP_COLOR_23,
+  CAP_COLOR_24,
+  CAP_COLOR_25,
+  CAP_COLOR_26,
+  CAP_COLOR_27,
+  CAP_G01,
+  CAP_G02,
+  CAP_G03,
+  CAP_G04,
+  CAP_G05,
+  CAP_G06,
+  CAP_G07,
+  CAP_G08,
+  CAP_G09,
+  CAP_G10,
+  CAP_G11,
+  CAP_G12,
+  CAP_G13,
+  CAP_G14,
+  CAP_G15,
+  CAP_G16,
+  CAP_G17,
+  CAP_G18,
+  CAP_G19,
+  CAP_G20,
+  CAP_GREEN01,
+  CAP_GREEN02,
+  CAP_ICON,
+  CAP_ORANGE,
+  CAP_ORANGE01,
+  CAP_ORANGE02,
+  CAP_PALE_GREY,
+  CAP_PINK,
+  CAP_PRIMARY,
+  CAP_PURPLE,
+  CAP_PURPLE01,
+  CAP_PURPLE02,
+  CAP_PURPLE03,
+  CAP_PURPLE04,
+  CAP_RED,
+  CAP_RED01,
+  CAP_RED02,
+  CAP_RED03,
+  CAP_SECONDARY,
+  CAP_SPACE_00,
+  CAP_SPACE_01,
+  CAP_SPACE_02,
+  CAP_SPACE_03,
+  CAP_SPACE_04,
+  CAP_SPACE_06,
+  CAP_SPACE_08,
+  CAP_SPACE_12,
+  CAP_SPACE_16,
+  CAP_SPACE_18,
+  CAP_SPACE_19,
+  CAP_SPACE_20,
+  CAP_SPACE_23,
+  CAP_SPACE_24,
+  CAP_SPACE_28,
+  CAP_SPACE_32,
+  CAP_SPACE_36,
+  CAP_SPACE_40,
+  CAP_SPACE_42,
+  CAP_SPACE_44,
+  CAP_SPACE_48,
+  CAP_SPACE_52,
+  CAP_SPACE_56,
+  CAP_SPACE_60,
+  CAP_SPACE_64,
+  CAP_SPACE_72,
+  CAP_SPACE_80,
+  CAP_WHITE,
+  CAP_WHITE_OVERLAY,
+  CAP_YELLOW,
+  CAP_YELLOW01,
+  CAP_YELLOW02,
+  COLOR_ERROR,
+  COLOR_INFO,
+  COLOR_SUCCESS,
+  COLOR_WARNING,
+  DEFAULT_LINE_HEIGHT,
+  FONT_COLOR_01,
+  FONT_COLOR_02,
+  FONT_COLOR_03,
+  FONT_COLOR_04,
+  FONT_COLOR_05,
+  FONT_COLOR_06,
+  FONT_FAMILY,
+  FONT_SIZE_L,
+  FONT_SIZE_M,
+  FONT_SIZE_S,
+  FONT_SIZE_VL,
+  FONT_SIZE_VS,
+  FONT_WEIGHT_MEDIUM,
+  FONT_WEIGHT_REGULAR,
+  ICON_SIZE_L,
+  ICON_SIZE_M,
+  ICON_SIZE_S,
+  ICON_SIZE_XS,
+  INPUT_HEIGHT,
+  NORMAL_LINE_HEIGHT,
+  RADIUS_04,
+  RADIUS_08,
+  SPACING_04,
+  SPACING_08,
+  SPACING_12,
+  SPACING_16,
+  SPACING_24,
+  SPACING_32,
+  TRANSITION_ALL,
+  USER_INITIALS_COLOR_CODES
+};

package/styles/_variables.js

@@ -1,199 +1,321 @@
-/* Color Palette */
-//========================
-
-// Primary colors
-export var CAP_PRIMARY = {
-  base: '#47af46',
-  hover: '#1f9a1d',
-  disabled: '#a1d8a0'
+const CAP_PRIMARY = {
+  base: "#47af46",
+  hover: "#1f9a1d",
+  disabled: "#a1d8a0"
 };
-
-// Secondary colors
-export var CAP_SECONDARY = {
-  base: '#2466ea',
-  light: 'rgba(36, 102, 234, 0.1)'
+const CAP_SECONDARY = {
+  base: "#2466ea",
+  light: "rgba(36, 102, 234, 0.1)"
+};
+const NORMAL_LINE_HEIGHT = "normal";
+const DEFAULT_LINE_HEIGHT = "1.5";
+const CAP_ORANGE = "#f87d23";
+const CAP_ORANGE01 = "#ffe5d2";
+const CAP_ORANGE02 = "#fa7d02";
+const CAP_YELLOW = "#fec52e";
+const CAP_YELLOW01 = "#e8bc25";
+const CAP_YELLOW02 = "#f9d438";
+const CAP_BLUE = "#23cccc";
+const CAP_PURPLE = "#8517e5";
+const CAP_PINK = "#e51fa3";
+const CAP_RED = "#ea213a";
+const CAP_ICON = "#7a869a";
+const CAP_PALE_GREY = "#e9f0fe";
+const CAP_BLUE01 = "#2466eb";
+const CAP_BLUE02 = "#1d61ee";
+const CAP_RED01 = "#e51fa3";
+const CAP_RED02 = "#f5222d";
+const CAP_RED03 = "#ed1b34";
+const CAP_PURPLE01 = "#6563ff";
+const CAP_PURPLE02 = "#a451ff";
+const CAP_PURPLE03 = "#f2e7fe";
+const CAP_PURPLE04 = "#d4e1fc";
+const CAP_GREEN01 = "#6bb56b";
+const CAP_GREEN02 = "#ecf7ec";
+const CAP_G01 = "#091e42";
+const CAP_G02 = "#253858";
+const CAP_G03 = "#42526e";
+const CAP_G04 = "#5e6c84";
+const CAP_G05 = "#97a0af";
+const CAP_G06 = "#b3bac5";
+const CAP_G07 = "#dfe2e7";
+const CAP_G08 = "#ebecf0";
+const CAP_G09 = "#f4f5f7";
+const CAP_G10 = "#fafbfc";
+const CAP_G11 = "#7a869a";
+const CAP_G12 = "#e8e8e8";
+const CAP_G13 = "#ecece7";
+const CAP_G14 = "#e9f0fd";
+const CAP_G15 = "#efefef";
+const CAP_G16 = "#2a2a2a";
+const CAP_G17 = "#5d6b85";
+const CAP_G18 = "#dcdee2";
+const CAP_G19 = "#8a9ab2";
+const CAP_G20 = "#c2c2c2";
+const CAP_WHITE = "#ffffff";
+const CAP_WHITE_OVERLAY = "rgba(255, 255, 255, 0.8)";
+const CAP_BLACK = "#000000";
+const CAP_BLACK_ALPHA01 = "#00000022";
+const COLOR_ERROR = "#ff4d4f";
+const COLOR_SUCCESS = "#52c41a";
+const COLOR_WARNING = "#faad14";
+const COLOR_INFO = "#1890ff";
+const CAP_COLOR_01 = "#dbefda";
+const CAP_COLOR_02 = "#fee5d3";
+const CAP_COLOR_03 = "#e83135";
+const CAP_COLOR_04 = "#fff4d6";
+const CAP_COLOR_05 = "#fbd3d8";
+const CAP_COLOR_06 = "#42B040";
+const CAP_COLOR_07 = "#E9F0FC";
+const CAP_COLOR_08 = "#faf9f4";
+const CAP_COLOR_09 = "#7765d5";
+const CAP_COLOR_10 = "#f79600";
+const CAP_COLOR_11 = "#2388de";
+const CAP_COLOR_12 = "#efba00";
+const CAP_COLOR_13 = "#bcd0fa";
+const CAP_COLOR_14 = "#9BC79A";
+const CAP_COLOR_15 = "#F6BA8E";
+const CAP_COLOR_16 = "#d9d9d9";
+const CAP_COLOR_17 = "#1d61ee";
+const CAP_COLOR_18 = "#d0d7ff";
+const CAP_COLOR_19 = "#44ddff";
+const CAP_COLOR_20 = "#4a67ff";
+const CAP_COLOR_21 = "#ace0ff";
+const CAP_COLOR_22 = "#DBB7F9";
+const CAP_COLOR_23 = "#F8BAE4";
+const CAP_COLOR_24 = "#BCD0FA";
+const CAP_COLOR_25 = "#ACE1F1";
+const CAP_COLOR_26 = "#FFE9AD";
+const CAP_COLOR_27 = "#F4F7FE";
+const BG_01 = "#faf9f4";
+const BG_02 = "#fefcf0";
+const BG_03 = "#ebf8ff";
+const BG_08 = "#ecf7ec";
+const FONT_FAMILY = '"Roboto", sans-serif';
+const FONT_WEIGHT_REGULAR = 400;
+const FONT_WEIGHT_MEDIUM = 500;
+const FONT_COLOR_01 = "#091e42";
+const FONT_COLOR_02 = "#5e6c84";
+const FONT_COLOR_03 = "#97a0af";
+const FONT_COLOR_04 = "#b3bac5";
+const FONT_COLOR_05 = "#2466ea";
+const FONT_COLOR_06 = "#ffffff";
+const FONT_SIZE_VL = "1.714rem";
+const FONT_SIZE_L = "1.143rem";
+const FONT_SIZE_M = "1rem";
+const FONT_SIZE_S = "0.857rem";
+const FONT_SIZE_VS = "0.714rem";
+const ICON_SIZE_XS = "0.857rem";
+const ICON_SIZE_S = "1.143rem";
+const ICON_SIZE_M = "1.714rem";
+const ICON_SIZE_L = "2.286rem";
+const SPACING_04 = "0.286rem";
+const SPACING_08 = "0.571rem";
+const SPACING_12 = "0.857rem";
+const SPACING_16 = "1.143rem";
+const SPACING_24 = "1.714rem";
+const SPACING_32 = "2.286rem";
+const CAP_SPACE_00 = "0rem";
+const CAP_SPACE_01 = "0.071rem";
+const CAP_SPACE_02 = "0.142rem";
+const CAP_SPACE_03 = "0.214rem";
+const CAP_SPACE_04 = "0.285rem";
+const CAP_SPACE_06 = "0.428rem";
+const CAP_SPACE_08 = "0.571rem";
+const CAP_SPACE_12 = "0.857rem";
+const CAP_SPACE_16 = "1.142rem";
+const CAP_SPACE_18 = "1.285rem";
+const CAP_SPACE_19 = "1.3rem";
+const CAP_SPACE_20 = "1.428rem";
+const CAP_SPACE_23 = "1.614rem";
+const CAP_SPACE_24 = "1.714rem";
+const CAP_SPACE_28 = "2rem";
+const CAP_SPACE_32 = "2.285rem";
+const CAP_SPACE_36 = "2.571rem";
+const CAP_SPACE_40 = "2.857rem";
+const CAP_SPACE_42 = "3rem";
+const CAP_SPACE_44 = "3.142rem";
+const CAP_SPACE_48 = "3.428rem";
+const CAP_SPACE_52 = "3.714rem";
+const CAP_SPACE_56 = "4rem";
+const CAP_SPACE_60 = "4.286rem";
+const CAP_SPACE_64 = "4.571rem";
+const CAP_SPACE_72 = "5.143rem";
+const CAP_SPACE_80 = "5.714rem";
+const INPUT_HEIGHT = "2.286rem";
+const BUTTON_HEIGHT = "2.857rem";
+const RADIUS_04 = "0.286rem";
+const RADIUS_08 = "0.571rem";
+const BORDER_WIDTH_1 = "0.071rem";
+const BORDER_WIDTH_2 = "0.143rem";
+const TRANSITION_ALL = "all 0.3s ease";
+const USER_INITIALS_COLOR_CODES = [
+  "#5F6C82",
+  "#7A8698",
+  "#AC5822",
+  "#DD712D",
+  "#B1892D",
+  "#357935",
+  "#449C44",
+  "#1E4C41",
+  "#228F8E",
+  "#284AB0",
+  "#3360E1",
+  "#5C1C9D",
+  "#7726CB",
+  "#74121F",
+  "#A21A2D",
+  "#49260E",
+  "#7B3F17",
+  "#0254B8",
+  "#1A79CF",
+  "#9E1D71",
+  "#CC2692"
+];
+export {
+  BG_01,
+  BG_02,
+  BG_03,
+  BG_08,
+  BORDER_WIDTH_1,
+  BORDER_WIDTH_2,
+  BUTTON_HEIGHT,
+  CAP_BLACK,
+  CAP_BLACK_ALPHA01,
+  CAP_BLUE,
+  CAP_BLUE01,
+  CAP_BLUE02,
+  CAP_COLOR_01,
+  CAP_COLOR_02,
+  CAP_COLOR_03,
+  CAP_COLOR_04,
+  CAP_COLOR_05,
+  CAP_COLOR_06,
+  CAP_COLOR_07,
+  CAP_COLOR_08,
+  CAP_COLOR_09,
+  CAP_COLOR_10,
+  CAP_COLOR_11,
+  CAP_COLOR_12,
+  CAP_COLOR_13,
+  CAP_COLOR_14,
+  CAP_COLOR_15,
+  CAP_COLOR_16,
+  CAP_COLOR_17,
+  CAP_COLOR_18,
+  CAP_COLOR_19,
+  CAP_COLOR_20,
+  CAP_COLOR_21,
+  CAP_COLOR_22,
+  CAP_COLOR_23,
+  CAP_COLOR_24,
+  CAP_COLOR_25,
+  CAP_COLOR_26,
+  CAP_COLOR_27,
+  CAP_G01,
+  CAP_G02,
+  CAP_G03,
+  CAP_G04,
+  CAP_G05,
+  CAP_G06,
+  CAP_G07,
+  CAP_G08,
+  CAP_G09,
+  CAP_G10,
+  CAP_G11,
+  CAP_G12,
+  CAP_G13,
+  CAP_G14,
+  CAP_G15,
+  CAP_G16,
+  CAP_G17,
+  CAP_G18,
+  CAP_G19,
+  CAP_G20,
+  CAP_GREEN01,
+  CAP_GREEN02,
+  CAP_ICON,
+  CAP_ORANGE,
+  CAP_ORANGE01,
+  CAP_ORANGE02,
+  CAP_PALE_GREY,
+  CAP_PINK,
+  CAP_PRIMARY,
+  CAP_PURPLE,
+  CAP_PURPLE01,
+  CAP_PURPLE02,
+  CAP_PURPLE03,
+  CAP_PURPLE04,
+  CAP_RED,
+  CAP_RED01,
+  CAP_RED02,
+  CAP_RED03,
+  CAP_SECONDARY,
+  CAP_SPACE_00,
+  CAP_SPACE_01,
+  CAP_SPACE_02,
+  CAP_SPACE_03,
+  CAP_SPACE_04,
+  CAP_SPACE_06,
+  CAP_SPACE_08,
+  CAP_SPACE_12,
+  CAP_SPACE_16,
+  CAP_SPACE_18,
+  CAP_SPACE_19,
+  CAP_SPACE_20,
+  CAP_SPACE_23,
+  CAP_SPACE_24,
+  CAP_SPACE_28,
+  CAP_SPACE_32,
+  CAP_SPACE_36,
+  CAP_SPACE_40,
+  CAP_SPACE_42,
+  CAP_SPACE_44,
+  CAP_SPACE_48,
+  CAP_SPACE_52,
+  CAP_SPACE_56,
+  CAP_SPACE_60,
+  CAP_SPACE_64,
+  CAP_SPACE_72,
+  CAP_SPACE_80,
+  CAP_WHITE,
+  CAP_WHITE_OVERLAY,
+  CAP_YELLOW,
+  CAP_YELLOW01,
+  CAP_YELLOW02,
+  COLOR_ERROR,
+  COLOR_INFO,
+  COLOR_SUCCESS,
+  COLOR_WARNING,
+  DEFAULT_LINE_HEIGHT,
+  FONT_COLOR_01,
+  FONT_COLOR_02,
+  FONT_COLOR_03,
+  FONT_COLOR_04,
+  FONT_COLOR_05,
+  FONT_COLOR_06,
+  FONT_FAMILY,
+  FONT_SIZE_L,
+  FONT_SIZE_M,
+  FONT_SIZE_S,
+  FONT_SIZE_VL,
+  FONT_SIZE_VS,
+  FONT_WEIGHT_MEDIUM,
+  FONT_WEIGHT_REGULAR,
+  ICON_SIZE_L,
+  ICON_SIZE_M,
+  ICON_SIZE_S,
+  ICON_SIZE_XS,
+  INPUT_HEIGHT,
+  NORMAL_LINE_HEIGHT,
+  RADIUS_04,
+  RADIUS_08,
+  SPACING_04,
+  SPACING_08,
+  SPACING_12,
+  SPACING_16,
+  SPACING_24,
+  SPACING_32,
+  TRANSITION_ALL,
+  USER_INITIALS_COLOR_CODES
 };
-export var NORMAL_LINE_HEIGHT = 'normal';
-export var DEFAULT_LINE_HEIGHT = '1.5';
-
-// Custom colors
-export var CAP_ORANGE = '#f87d23';
-export var CAP_ORANGE01 = '#ffe5d2';
-export var CAP_ORANGE02 = '#fa7d02';
-export var CAP_YELLOW = '#fec52e';
-export var CAP_YELLOW01 = '#e8bc25';
-export var CAP_YELLOW02 = '#f9d438';
-export var CAP_BLUE = '#23cccc';
-export var CAP_PURPLE = '#8517e5';
-export var CAP_PINK = '#e51fa3';
-export var CAP_RED = '#ea213a';
-export var CAP_ICON = '#7a869a';
-export var CAP_PALE_GREY = '#e9f0fe';
-export var CAP_BLUE01 = '#2466eb';
-export var CAP_BLUE02 = '#1d61ee';
-export var CAP_RED01 = '#e51fa3';
-export var CAP_RED02 = '#f5222d';
-export var CAP_RED03 = '#ed1b34';
-export var CAP_PURPLE01 = '#6563ff';
-export var CAP_PURPLE02 = '#a451ff';
-export var CAP_PURPLE03 = '#f2e7fe';
-export var CAP_PURPLE04 = '#d4e1fc';
-export var CAP_GREEN01 = '#6bb56b';
-export var CAP_GREEN02 = '#ecf7ec';
-
-// Grey colors
-export var CAP_G01 = '#091e42';
-export var CAP_G02 = '#253858';
-export var CAP_G03 = '#42526e';
-export var CAP_G04 = '#5e6c84';
-export var CAP_G05 = '#97a0af';
-export var CAP_G06 = '#b3bac5';
-export var CAP_G07 = '#dfe2e7';
-export var CAP_G08 = '#ebecf0';
-export var CAP_G09 = '#f4f5f7';
-export var CAP_G10 = '#fafbfc';
-export var CAP_G11 = '#7a869a';
-export var CAP_G12 = '#e8e8e8';
-export var CAP_G13 = '#ecece7';
-export var CAP_G14 = '#e9f0fd';
-export var CAP_G15 = '#efefef';
-export var CAP_G16 = '#2a2a2a';
-export var CAP_G17 = '#5d6b85';
-export var CAP_G18 = '#dcdee2';
-export var CAP_G19 = '#8a9ab2';
-export var CAP_G20 = '#c2c2c2';
-export var CAP_WHITE = '#ffffff';
-export var CAP_WHITE_OVERLAY = 'rgba(255, 255, 255, 0.8)';
-export var CAP_BLACK = '#000000';
-export var CAP_BLACK_ALPHA01 = '#00000022';
-
-// Semantic colors
-export var COLOR_ERROR = '#ff4d4f';
-export var COLOR_SUCCESS = '#52c41a';
-export var COLOR_WARNING = '#faad14';
-export var COLOR_INFO = '#1890ff';
-
-// Color variants (CAP_COLOR_01 to CAP_COLOR_27)
-export var CAP_COLOR_01 = '#dbefda';
-export var CAP_COLOR_02 = '#fee5d3';
-export var CAP_COLOR_03 = '#e83135';
-export var CAP_COLOR_04 = '#fff4d6';
-export var CAP_COLOR_05 = '#fbd3d8';
-export var CAP_COLOR_06 = '#42B040';
-export var CAP_COLOR_07 = '#E9F0FC';
-export var CAP_COLOR_08 = '#faf9f4';
-export var CAP_COLOR_09 = '#7765d5';
-export var CAP_COLOR_10 = '#f79600';
-export var CAP_COLOR_11 = '#2388de';
-export var CAP_COLOR_12 = '#efba00';
-export var CAP_COLOR_13 = '#bcd0fa';
-export var CAP_COLOR_14 = '#9BC79A';
-export var CAP_COLOR_15 = '#F6BA8E';
-export var CAP_COLOR_16 = '#d9d9d9';
-export var CAP_COLOR_17 = '#1d61ee';
-export var CAP_COLOR_18 = '#d0d7ff';
-export var CAP_COLOR_19 = '#44ddff';
-export var CAP_COLOR_20 = '#4a67ff';
-export var CAP_COLOR_21 = '#ace0ff';
-export var CAP_COLOR_22 = '#DBB7F9';
-export var CAP_COLOR_23 = '#F8BAE4';
-export var CAP_COLOR_24 = '#BCD0FA';
-export var CAP_COLOR_25 = '#ACE1F1';
-export var CAP_COLOR_26 = '#FFE9AD';
-export var CAP_COLOR_27 = '#F4F7FE';
-
-// Background Colors
-export var BG_01 = '#faf9f4';
-export var BG_02 = '#fefcf0';
-export var BG_03 = '#ebf8ff';
-export var BG_08 = '#ecf7ec';
-
-/* Fonts */
-// ==============
-export var FONT_FAMILY = '"Roboto", sans-serif';
-export var FONT_WEIGHT_REGULAR = 400;
-export var FONT_WEIGHT_MEDIUM = 500;
-
-// Font colors
-export var FONT_COLOR_01 = '#091e42';
-export var FONT_COLOR_02 = '#5e6c84';
-export var FONT_COLOR_03 = '#97a0af';
-export var FONT_COLOR_04 = '#b3bac5';
-export var FONT_COLOR_05 = '#2466ea';
-export var FONT_COLOR_06 = '#ffffff';
-
-// Font sizes (1rem = 14px)
-export var FONT_SIZE_VL = '1.714rem'; // 24px
-export var FONT_SIZE_L = '1.143rem'; // 16px
-export var FONT_SIZE_M = '1rem'; // 14px
-export var FONT_SIZE_S = '0.857rem'; // 12px
-export var FONT_SIZE_VS = '0.714rem'; // 10px
-
-// Icon sizes (1rem = 14px)
-export var ICON_SIZE_XS = '0.857rem'; // 12px
-export var ICON_SIZE_S = '1.143rem'; // 16px
-export var ICON_SIZE_M = '1.714rem'; // 24px
-export var ICON_SIZE_L = '2.286rem'; // 32px
-
-/* Spacing */
-// ==============
-// Note: 1rem = 14px as base font size
-export var SPACING_04 = '0.286rem'; // 4px
-export var SPACING_08 = '0.571rem'; // 8px
-export var SPACING_12 = '0.857rem'; // 12px
-export var SPACING_16 = '1.143rem'; // 16px
-export var SPACING_24 = '1.714rem'; // 24px
-export var SPACING_32 = '2.286rem'; // 32px;
-
-// CAP_SPACE values (using rem units - 1rem = 14px in old system)
-export var CAP_SPACE_00 = '0rem';
-export var CAP_SPACE_01 = '0.071rem'; // ~1px
-export var CAP_SPACE_02 = '0.142rem'; // ~2px
-export var CAP_SPACE_03 = '0.214rem'; // ~3px
-export var CAP_SPACE_04 = '0.285rem'; // ~4px
-export var CAP_SPACE_06 = '0.428rem'; // ~6px
-export var CAP_SPACE_08 = '0.571rem'; // ~8px
-export var CAP_SPACE_12 = '0.857rem'; // ~12px
-export var CAP_SPACE_16 = '1.142rem'; // ~16px
-export var CAP_SPACE_18 = '1.285rem'; // ~18px
-export var CAP_SPACE_19 = '1.3rem'; // ~18.2px
-export var CAP_SPACE_20 = '1.428rem'; // ~20px
-export var CAP_SPACE_23 = '1.614rem'; // ~22.6px
-export var CAP_SPACE_24 = '1.714rem'; // ~24px
-export var CAP_SPACE_28 = '2rem'; // ~28px
-export var CAP_SPACE_32 = '2.285rem'; // ~32px
-export var CAP_SPACE_36 = '2.571rem'; // ~36px
-export var CAP_SPACE_40 = '2.857rem'; // ~40px
-export var CAP_SPACE_42 = '3rem'; // ~42px
-export var CAP_SPACE_44 = '3.142rem'; // ~44px
-export var CAP_SPACE_48 = '3.428rem'; // ~48px
-export var CAP_SPACE_52 = '3.714rem'; // ~52px
-export var CAP_SPACE_56 = '4rem'; // ~56px
-export var CAP_SPACE_60 = '4.286rem'; // ~60px
-export var CAP_SPACE_64 = '4.571rem'; // ~64px
-export var CAP_SPACE_72 = '5.143rem'; // ~72px
-export var CAP_SPACE_80 = '5.714rem'; // ~80px
-
-/* Component Heights */
-// ==============
-export var INPUT_HEIGHT = '2.286rem'; // 32px
-export var BUTTON_HEIGHT = '2.857rem'; // 40px
-
-/* Border Radius */
-// ==============
-export var RADIUS_04 = '0.286rem'; // 4px
-export var RADIUS_08 = '0.571rem'; // 8px
-
-/* Border Width */
-// ==============
-export var BORDER_WIDTH_1 = '0.071rem'; // 1px
-export var BORDER_WIDTH_2 = '0.143rem'; // 2px
-
-/* Transition */
-// ==============
-export var TRANSITION_ALL = 'all 0.3s ease';
-
-/* User Initials Color Codes */
-// ==============
-// Color palette for user avatar backgrounds based on user ID
-export var USER_INITIALS_COLOR_CODES = ['#5F6C82', '#7A8698', '#AC5822', '#DD712D', '#B1892D', '#357935', '#449C44', '#1E4C41', '#228F8E', '#284AB0', '#3360E1', '#5C1C9D', '#7726CB', '#74121F', '#A21A2D', '#49260E', '#7B3F17', '#0254B8', '#1A79CF', '#9E1D71', '#CC2692'];