stp-ui-kit 0.0.44 → 0.0.46

package/src/styles/_variables.scss

@@ -1,441 +1,444 @@
-// New STP Design System
-
-// Breakpoints
-$lg: 1200px;
-$md: 1000px;
-$sm: 700px;
-$mobile: 480px;
-
-// Spacing
-$spacing: 4px;
-$space-0: 0 * $spacing;
-$space-025: 0.25 * $spacing;
-$space-050: 0.5 * $spacing;
-$space-100: 1 * $spacing;
-$space-150: 1.5 * $spacing;
-$space-200: 2 * $spacing;
-$space-300: 3 * $spacing;
-$space-350: 3.5 * $spacing;
-$space-400: 4 * $spacing;
-$space-500: 5 * $spacing;
-$space-550: 5.5 * $spacing;
-$space-600: 6 * $spacing;
-$space-750: 7.5 * $spacing;
-$space-800: 8 * $spacing;
-$space-1000: 10 * $spacing;
-$space-1100: 11 * $spacing;
-$space-1200: 12 * $spacing;
-$space-1300: 13 * $spacing;
-$space-1600: 16 * $spacing;
-$space-2000: 20 * $spacing;
-$space-2400: 24 * $spacing;
-$space-3200: 32 * $spacing;
-
-// Shadow
-$shadow-0: 0 0 0 0 #00000000;
-$shadow-100: 0 1px 0 0 #1a1a1a12;
-$shadow-200: 0 3px 1px -1px #1a1a1a12;
-$shadow-300: 0 4px 6px -2px #1a1a1a33;
-$shadow-400: 0 8px 16px -4px #1a1a1a38;
-$shadow-500: 0 12px 20px -8px #1a1a1a3d;
-$shadow-600: 0 20px 20px -8px #1a1a1a47;
-
-.shadow-0 {
-  box-shadow: $shadow-0;
-}
-.shadow-100 {
-  box-shadow: $shadow-100;
-}
-.shadow-200 {
-  box-shadow: $shadow-200;
-}
-.shadow-300 {
-  box-shadow: $shadow-300;
-}
-.shadow-400 {
-  box-shadow: $shadow-400;
-}
-.shadow-500 {
-  box-shadow: $shadow-500;
-}
-.shadow-600 {
-  box-shadow: $shadow-600;
-}
-
-// Border
-
-$border-radius-0: 0 * $spacing;
-$border-radius-200: 2 * $spacing;
-$border-radius-full: 50%;
-
-$border-width-025: 0.25 * $spacing;
-
-// Typography
-
-$font-family-sans: "Inter";
-
-$font-weight-regular: 450;
-$font-weight-medium: 550;
-$font-weight-semibold: 650;
-$font-weight-bold: 700;
-
-$font-letter-spacing-denser: -0.3px;
-$font-letter-spacing-dense: -0.2px;
-$font-letter-spacing-normal: 0px;
-
-$font-size-300: 12px;
-$font-size-350: 14px;
-$font-size-400: 16px;
-$font-size-500: 20px;
-$font-size-600: 24px;
-$font-size-750: 30px;
-
-$font-line-height-400: 16px;
-$font-line-height-500: 20px;
-$font-line-height-600: 24px;
-$font-line-height-800: 32px;
-$font-line-height-1000: 40px;
-
-//Colors
-$color-neutral-00: #ffffff;
-$color-neutral-50: #f8f9fa;
-$color-neutral-100: #f1f3f6;
-$color-neutral-150: #ebeef2;
-$color-neutral-200: #e4e8ed;
-$color-neutral-250: #dee1e7;
-$color-neutral-300: #d2d5dc;
-$color-neutral-350: #c5c8d0;
-$color-neutral-400: #b9bcc5;
-$color-neutral-450: #acafb8;
-$color-neutral-500: #9fa2ab;
-$color-neutral-550: #92959e;
-$color-neutral-600: #868892;
-$color-neutral-650: #797b85;
-$color-neutral-700: #6c6e78;
-$color-neutral-750: #5f616b;
-$color-neutral-800: #52545d;
-$color-neutral-850: #444750;
-$color-neutral-900: #373a42;
-$color-neutral-950: #020817;
-
-$color-red-50: #fef2f2;
-$color-red-100: #fee2e2;
-$color-red-200: #fecaca;
-$color-red-300: #fca5a5;
-$color-red-400: #f87171;
-$color-red-500: #ef4444;
-$color-red-600: #dc2626;
-$color-red-700: #b91c1c;
-$color-red-800: #991b1b;
-$color-red-900: #7f1d1d;
-$color-red-950: #450a0a;
-
-$color-amber-50: #fffbeb;
-$color-amber-100: #fef3c7;
-$color-amber-200: #fde68a;
-$color-amber-300: #fcd34d;
-$color-amber-400: #fbbf24;
-$color-amber-500: #f59e0b;
-$color-amber-600: #d97706;
-$color-amber-700: #b45309;
-$color-amber-800: #92400e;
-$color-amber-900: #78350f;
-$color-amber-950: #451a03;
-
-$color-green-50: #f0fdf4;
-$color-green-100: #dcfce7;
-$color-green-200: #bbf7d0;
-$color-green-300: #86efac;
-$color-green-400: #4ade80;
-$color-green-500: #22c55e;
-$color-green-600: #16a34a;
-$color-green-700: #15803d;
-$color-green-800: #166534;
-$color-green-900: #14532d;
-$color-green-950: #052e16;
-
-$color-blue-50: #eff6ff;
-$color-blue-100: #dbeafe;
-$color-blue-200: #bfdbfe;
-$color-blue-300: #93c5fd;
-$color-blue-400: #60a5fa;
-$color-blue-500: #3b82f6;
-$color-blue-600: #2563eb;
-$color-blue-700: #1d4ed8;
-$color-blue-800: #1e40af;
-$color-blue-900: #1e3a8a;
-$color-blue-950: #172554;
-
-$color-violet-50: #f5f3ff;
-$color-violet-100: #ede9fe;
-$color-violet-200: #ddd6fe;
-$color-violet-300: #c4b5fd;
-$color-violet-400: #a78bfa;
-$color-violet-500: #8b5cf6;
-$color-violet-600: #8b5cf6;
-$color-violet-700: #8b5cf6;
-$color-violet-800: #5b21b6;
-$color-violet-900: #4c1d95;
-$color-violet-950: #2e1065;
-
-$color-teal-50: #f0fdfa;
-$color-teal-100: #ccfbf1;
-$color-teal-200: #99f6e4;
-$color-teal-300: #5eead4;
-$color-teal-400: #2dd4bf;
-$color-teal-500: #14b8a6;
-$color-teal-600: #0d9488;
-$color-teal-700: #0f766e;
-$color-teal-800: #115e59;
-$color-teal-900: #115e59;
-$color-teal-950: #042f2e;
-
-$color-fuchsia-50: #fdf4ff;
-$color-fuchsia-100: #fae8ff;
-$color-fuchsia-200: #f5d0fe;
-$color-fuchsia-300: #f0abfc;
-$color-fuchsia-400: #e879f9;
-$color-fuchsia-500: #d946ef;
-$color-fuchsia-600: #c026d3;
-$color-fuchsia-700: #c026d3;
-$color-fuchsia-800: #86198f;
-$color-fuchsia-900: #701a75;
-$color-fuchsia-950: #4a044e;
-
-//Primary tokens
-
-$text: $color-neutral-900;
-$text-secondary: $color-neutral-700;
-$text-inverse: $color-neutral-00;
-$text-disabled: $color-neutral-600;
-$text-on-fill-brand: $color-neutral-00;
-$text-critical: $color-red-800;
-$text-warning: $color-amber-800;
-$text-warning-on-bg-fill: $color-amber-950;
-$text-emphasis: $color-blue-800;
-$text-emphasis-hover: $color-blue-900;
-$text-emphasis-on-press: $color-blue-950;
-$text-emphasis-selected: $color-blue-950;
-
-$link: $color-blue-800;
-$link-hover: $color-blue-900;
-$link-on-press: $color-blue-950;
-
-$bg: $color-neutral-50;
-$bg-inverse: $color-neutral-950;
-$bg-surface: $color-neutral-00;
-
-$surface: $color-neutral-00;
-$surface-inverse: $color-neutral-850;
-$surface-hover: $color-neutral-100;
-$surface-on-press: $color-neutral-200;
-$surface-selected: $color-neutral-200;
-$surface-critical: $color-red-50;
-$surface-warning: $color-amber-50;
-$surface-secondary: $color-neutral-100;
-$surface-secondary-hover: $color-neutral-200;
-$surface-secondary-on-press: $color-neutral-200;
-$surface-secondary-selected: $color-neutral-300;
-
-$fill: $color-neutral-00;
-$fill-hover: $color-neutral-200;
-$fill-on-press: $color-neutral-300;
-$fill-selected: $color-neutral-300;
-$fill-disabled: $color-neutral-250;
-$fill-brand: $color-blue-600;
-$fill-brand-hover: $color-blue-700;
-$fill-brand-on-press: $color-blue-800;
-$fill-brand-selected: $color-blue-900;
-$fill-brand-disabled: $color-neutral-400;
-$fill-warning: $color-amber-300;
-
-$border: $color-neutral-250;
-$border-active: $color-neutral-700;
-$border-disabled: $color-neutral-250;
-$border-critical: $color-red-700;
-$border-input: $color-neutral-400;
-$border-input-active: $color-neutral-700;
-$border-input-disabled: $color-neutral-250;
-
-$surface: $color-neutral-00;
-$surface-hover: $color-neutral-100;
-$surface-on-press: $color-neutral-200;
-$surface-selected: $color-neutral-200;
-$surface-secondary: $color-neutral-100;
-$surface-secondary-hover: $color-neutral-200;
-$surface-secondary-on-press: $color-neutral-200;
-$surface-secondary-selected: $color-neutral-300;
-
-$fill: $color-neutral-00;
-$fill-hover: $color-neutral-200;
-$fill-on-press: $color-neutral-300;
-$fill-selected: $color-neutral-300;
-$fill-disabled: $color-neutral-250;
-$fill-brand: $color-blue-600;
-$fill-brand-hover: $color-blue-700;
-$fill-brand-on-press: $color-blue-800;
-$fill-brand-selected: $color-blue-900;
-$fill-brand-disabled: $color-neutral-400;
-$fill-critical: $color-red-700;
-$fill-critical-secondary: $color-red-50;
-$fill-critical-selected: $color-red-900;
-
-$icon: $color-neutral-800;
-$icon-secondary: $color-neutral-600;
-$icon-disabled: $color-neutral-450;
-$icon-on-bg-fill-brand: $color-blue-100;
-$icon-warning: $color-amber-700;
-$icon-critical: $color-red-800;
-$icon-emphasis: $color-blue-800;
-$icon-emphasis-hover: $color-blue-900;
-$icon-emphasis-on-press: $color-blue-950;
-$icon-emphasis-selected: $color-blue-950;
-
-$input-bg-surface: $color-neutral-00;
-$input-bg-surface-hover: $color-neutral-100;
-$input-bg-surface-active: $color-neutral-00;
-$input-bg-surface-disabled: $color-neutral-250;
-
-$nav-bg: $color-neutral-150;
-$nav-bg-surface: $color-neutral-150;
-$nav-bg-surface-hover: $color-neutral-50;
-$nav-bg-surface-on-press: $color-neutral-00;
-$nav-bg-surface-selected: $color-neutral-00;
-$nav-bg-surface-selected-no-hover: $color-neutral-200;
-
-$backdrop: #00000030;
-
-$button-group-gap: $space-200;
-$card-padding: $space-400;
-$card-padding-mobile: $space-300;
-$card-gap: $space-500;
-$card-gap-mobile: $space-400;
-$icon-text-gap: $space-200;
-
-// Old STP Design System(do not use)
-$white: #ffffff;
-$white_background: #fefefe;
-$white_blue: #f3f7ff;
-$white_silver: #f4f4f4;
-$black: #000000;
-$blue_text: #2a2f48;
-$blue_gray: #6e738a;
-$blue_silver: #4d4d4d;
-$blue_navy: #4ba5ec;
-$black_transparent: rgba(0, 0, 0, 0.08);
-$light_gray: #d8d7d7;
-$light: #eeeeee;
-$light_filter: rgba(255, 255, 255, 0.9);
-$shadow: rgba(0, 0, 0, 0.23);
-$harmonies: #b6d7ff;
-$blue_royal: #8dacfc;
-$alice_blue: #ecf5ff;
-$black_medium: #4a4c54;
-$black_gray: #666668;
-$white_dark: #f0f4ff;
-$blue_very_light: #e1e3f1;
-$white_smoke: #f3f2f2;
-$black_ghost: rgba(75, 75, 75, 0.9);
-$modal_background: rgba(19, 20, 23, 0.5);
-$red: #ee3153;
-$yellow: #ffc100;
-$light-yellow: #fff8e7;
-$darker-light-yellow: #f5e6c7;
-$green: #00d742;
-$green_gray: #18bc46;
-$blue_dark: #233240;
-$blue_dark_hover: #0153b4;
-$blue_tabs_hover: #d8ecfb;
-$secondary_dark: #51606f;
-$text_dark: #06253c;
-$blue_secondary: #5ab2f9;
-$blue-background: #e8f2ff;
-$blue-border: #b9c8da;
-$blue-icon: #4ba5ec;
-$blue-icon-light: #61d9ff;
-$gray-info: #8392a3;
-$gray-language-tab: #d5e4f7;
-$blue-dark-tab: #3a4857;
-$black_light: #06253c;
-$input_focus: #4ba5ec;
-$blue_secondary_placholder: #9eadbe;
-$gray_placeholder: #51606f;
-$profile_complete_card_background: #fcfcfc;
-$gray_light: #f5f5f5;
-$white_blue: #ebf6ff;
-$light-green: #ecfdf3;
-$dark-green: #12b76a;
-$light-blue: #eff8ff;
-$light-gray: #a0aec0;
-$red_danger: #eb5757;
-$red_danger_bg: #fffbfa;
-$light-red: #fff1f3;
-$dark-red: #c01048;
-$light-purple: #eef4ff;
-$dark-purple: #3538cd;
-$grey-bg: #fafafa;
-$grey-text: #718096;
-$grey-border: #e2e8f0;
-$blue_heading: #08314c;
-$midnight-blue: #003e64;
-$dark_card_blue: #d1e5fd;
-$grey_text_lms: #828282;
-$grey_bg_lms: #f0f0f0;
-$grey_bg_lms_icon: #f7fafc;
-$grey_lms_header: #ececec;
-$green_correct: #6fcf97;
-$green_bg: #f8fdfa;
-$blue-box: #008fff;
-$purple-box: #ae2db1;
-$blue-box-filler: #cee5ff;
-$grey_pdf: #f2f2f0;
-$pink: #cebdff;
-$grey_voice: #e1e1e1;
-$gray_border: #eaecf0;
-$dark_gray: #475467;
-$btn_gray: #ced4da;
-$blue_bg: #e9f4fd;
-$gray_progress: #e0e0de;
-$gray_button: #ced4da;
-$gray_bg_mobile: #f9fafb;
-$gray_divider: #d0d5dd;
-$blue_light: #c6e1f6;
-$gray_tabs: #667085;
-$gray_card: #f3f5f6;
-$dark_text: #344054;
-$mobile_bg: #f0f0f0;
-$gray_tabs_bg: #dde1e5;
-$gray_tabs_text: #667a8b;
-$gray_border_two: #f1f1f1;
-$red: #df5440;
-$red_line: #e83354;
-$pearl-green: #d8fe67;
-$blue_linear: #173c83;
-$blue_gradient: #0d2532;
-$yellow_light: #ffcb66;
-$gray_proftest: #eef0f2;
-$gray_bars: #e4e7ec;
-$yellow_border: #ffb552;
-$yellow_background: #f8e8c0;
-$gray_not_activated: #dadbdf;
-$black_almost: #0e1d2a;
-$gray_proftest: #eef0f2;
-$gray_bars: #e4e7ec;
-$gray_price: #f3f4f6;
-$gray_admin: #e9edf7;
-$gray_admin_text: #718096;
-$gray_admin_light: #f8fafd;
-$gray_black_notif_text: #1a202c;
-$black_notif_text: #151c22;
-$gray_notif_date: #737373;
-$gray_feedback_question: #8897a5;
-$kaspi_red: #f14634;
-$halloween: #ef8014;
-$blue_support: #007aff;
-$blue_new: #135ba3;
-$blue_bg_dark: #d0e4f7;
-$blue_bg_light: #e8f4ff;
-$gray_new: #f0f0f0;
-$blue_new_gradient: linear-gradient(94.4deg, #173c83 0%, #0d2532 100%);
-$orange_gradient: linear-gradient(105.28deg, #ffcb0f 0%, #ff8a0d 100%);
-$yellow_gradient: linear-gradient(105.28deg, #ffcb0f 0%, #ff9c32 100%);
+// New STP Design System
+
+// Breakpoints
+$lg: 1200px;
+$md: 1000px;
+$sm: 700px;
+$mobile: 480px;
+
+// Spacing
+$spacing: 4px;
+$space-0: 0 * $spacing;
+$space-025: 0.25 * $spacing;
+$space-050: 0.5 * $spacing;
+$space-100: 1 * $spacing;
+$space-150: 1.5 * $spacing;
+$space-200: 2 * $spacing;
+$space-300: 3 * $spacing;
+$space-350: 3.5 * $spacing;
+$space-400: 4 * $spacing;
+$space-500: 5 * $spacing;
+$space-550: 5.5 * $spacing;
+$space-600: 6 * $spacing;
+$space-750: 7.5 * $spacing;
+$space-800: 8 * $spacing;
+$space-1000: 10 * $spacing;
+$space-1100: 11 * $spacing;
+$space-1200: 12 * $spacing;
+$space-1300: 13 * $spacing;
+$space-1600: 16 * $spacing;
+$space-2000: 20 * $spacing;
+$space-2400: 24 * $spacing;
+$space-3200: 32 * $spacing;
+
+// Shadow
+$shadow-0: 0 0 0 0 #00000000;
+$shadow-100: 0 1px 0 0 #1a1a1a12;
+$shadow-200: 0 3px 1px -1px #1a1a1a12;
+$shadow-300: 0 4px 6px -2px #1a1a1a33;
+$shadow-400: 0 8px 16px -4px #1a1a1a38;
+$shadow-500: 0 12px 20px -8px #1a1a1a3d;
+$shadow-600: 0 20px 20px -8px #1a1a1a47;
+
+.shadow-0 {
+  box-shadow: $shadow-0;
+}
+.shadow-100 {
+  box-shadow: $shadow-100;
+}
+.shadow-200 {
+  box-shadow: $shadow-200;
+}
+.shadow-300 {
+  box-shadow: $shadow-300;
+}
+.shadow-400 {
+  box-shadow: $shadow-400;
+}
+.shadow-500 {
+  box-shadow: $shadow-500;
+}
+.shadow-600 {
+  box-shadow: $shadow-600;
+}
+
+// Border
+
+$border-radius-0: 0 * $spacing;
+$border-radius-200: 2 * $spacing;
+$border-radius-full: 50%;
+
+$border-width-025: 0.25 * $spacing;
+
+// Typography
+
+$font-family-sans: "Inter";
+
+$font-weight-regular: 450;
+$font-weight-medium: 550;
+$font-weight-semibold: 650;
+$font-weight-bold: 700;
+
+$font-letter-spacing-denser: -0.3px;
+$font-letter-spacing-dense: -0.2px;
+$font-letter-spacing-normal: 0px;
+
+$font-size-300: 12px;
+$font-size-350: 14px;
+$font-size-400: 16px;
+$font-size-500: 20px;
+$font-size-600: 24px;
+$font-size-750: 30px;
+
+$font-line-height-400: 16px;
+$font-line-height-500: 20px;
+$font-line-height-600: 24px;
+$font-line-height-800: 32px;
+$font-line-height-1000: 40px;
+
+//Colors
+$color-neutral-00: #ffffff;
+$color-neutral-50: #f8f9fa;
+$color-neutral-100: #f1f3f6;
+$color-neutral-150: #ebeef2;
+$color-neutral-200: #e4e8ed;
+$color-neutral-250: #dee1e7;
+$color-neutral-300: #d2d5dc;
+$color-neutral-350: #c5c8d0;
+$color-neutral-400: #b9bcc5;
+$color-neutral-450: #acafb8;
+$color-neutral-500: #9fa2ab;
+$color-neutral-550: #92959e;
+$color-neutral-600: #868892;
+$color-neutral-650: #797b85;
+$color-neutral-700: #6c6e78;
+$color-neutral-750: #5f616b;
+$color-neutral-800: #52545d;
+$color-neutral-850: #444750;
+$color-neutral-900: #373a42;
+$color-neutral-950: #020817;
+
+$color-red-50: #fef2f2;
+$color-red-100: #fee2e2;
+$color-red-200: #fecaca;
+$color-red-300: #fca5a5;
+$color-red-400: #f87171;
+$color-red-500: #ef4444;
+$color-red-600: #dc2626;
+$color-red-700: #b91c1c;
+$color-red-800: #991b1b;
+$color-red-900: #7f1d1d;
+$color-red-950: #450a0a;
+
+$color-amber-50: #fffbeb;
+$color-amber-100: #fef3c7;
+$color-amber-200: #fde68a;
+$color-amber-300: #fcd34d;
+$color-amber-400: #fbbf24;
+$color-amber-500: #f59e0b;
+$color-amber-600: #d97706;
+$color-amber-700: #b45309;
+$color-amber-800: #92400e;
+$color-amber-900: #78350f;
+$color-amber-950: #451a03;
+
+$color-green-50: #f0fdf4;
+$color-green-100: #dcfce7;
+$color-green-200: #bbf7d0;
+$color-green-300: #86efac;
+$color-green-400: #4ade80;
+$color-green-500: #22c55e;
+$color-green-600: #16a34a;
+$color-green-700: #15803d;
+$color-green-800: #166534;
+$color-green-900: #14532d;
+$color-green-950: #052e16;
+
+$color-blue-50: #eff6ff;
+$color-blue-100: #dbeafe;
+$color-blue-200: #bfdbfe;
+$color-blue-300: #93c5fd;
+$color-blue-400: #60a5fa;
+$color-blue-500: #3b82f6;
+$color-blue-600: #2563eb;
+$color-blue-700: #1d4ed8;
+$color-blue-800: #1e40af;
+$color-blue-900: #1e3a8a;
+$color-blue-950: #172554;
+
+$color-violet-50: #f5f3ff;
+$color-violet-100: #ede9fe;
+$color-violet-200: #ddd6fe;
+$color-violet-300: #c4b5fd;
+$color-violet-400: #a78bfa;
+$color-violet-500: #8b5cf6;
+$color-violet-600: #8b5cf6;
+$color-violet-700: #8b5cf6;
+$color-violet-800: #5b21b6;
+$color-violet-900: #4c1d95;
+$color-violet-950: #2e1065;
+
+$color-teal-50: #f0fdfa;
+$color-teal-100: #ccfbf1;
+$color-teal-200: #99f6e4;
+$color-teal-300: #5eead4;
+$color-teal-400: #2dd4bf;
+$color-teal-500: #14b8a6;
+$color-teal-600: #0d9488;
+$color-teal-700: #0f766e;
+$color-teal-800: #115e59;
+$color-teal-900: #115e59;
+$color-teal-950: #042f2e;
+
+$color-fuchsia-50: #fdf4ff;
+$color-fuchsia-100: #fae8ff;
+$color-fuchsia-200: #f5d0fe;
+$color-fuchsia-300: #f0abfc;
+$color-fuchsia-400: #e879f9;
+$color-fuchsia-500: #d946ef;
+$color-fuchsia-600: #c026d3;
+$color-fuchsia-700: #c026d3;
+$color-fuchsia-800: #86198f;
+$color-fuchsia-900: #701a75;
+$color-fuchsia-950: #4a044e;
+
+//Primary tokens
+
+$text: $color-neutral-900;
+$text-secondary: $color-neutral-700;
+$text-inverse: $color-neutral-00;
+$text-disabled: $color-neutral-600;
+$text-on-fill-brand: $color-neutral-00;
+$text-critical: $color-red-800;
+$text-warning: $color-amber-800;
+$text-warning-on-bg-fill: $color-amber-950;
+$text-emphasis: $color-blue-800;
+$text-emphasis-hover: $color-blue-900;
+$text-emphasis-on-press: $color-blue-950;
+$text-emphasis-selected: $color-blue-950;
+$text-success: $color-green-800;
+
+$link: $color-blue-800;
+$link-hover: $color-blue-900;
+$link-on-press: $color-blue-950;
+
+$bg: $color-neutral-50;
+$bg-inverse: $color-neutral-950;
+
+$surface: $color-neutral-00;
+$surface-inverse: $color-neutral-850;
+$surface-hover: $color-neutral-100;
+$surface-on-press: $color-neutral-200;
+$surface-selected: $color-neutral-200;
+$surface-critical: $color-red-50;
+$surface-warning: $color-amber-50;
+$surface-secondary: $color-neutral-100;
+$surface-secondary-hover: $color-neutral-200;
+$surface-secondary-on-press: $color-neutral-200;
+$surface-secondary-selected: $color-neutral-300;
+$surface-success: $color-green-50;
+
+$fill: $color-neutral-00;
+$fill-hover: $color-neutral-200;
+$fill-on-press: $color-neutral-300;
+$fill-selected: $color-neutral-300;
+$fill-disabled: $color-neutral-250;
+$fill-brand: $color-blue-600;
+$fill-brand-hover: $color-blue-700;
+$fill-brand-on-press: $color-blue-800;
+$fill-brand-selected: $color-blue-900;
+$fill-brand-disabled: $color-neutral-400;
+$fill-warning: $color-amber-300;
+
+$border: $color-neutral-250;
+$border-active: $color-neutral-700;
+$border-disabled: $color-neutral-250;
+$border-critical: $color-red-700;
+$border-input: $color-neutral-400;
+$border-input-active: $color-neutral-700;
+$border-input-disabled: $color-neutral-250;
+$border-success: $color-green-700;
+$border-warning: $color-amber-700;
+
+$surface: $color-neutral-00;
+$surface-hover: $color-neutral-100;
+$surface-on-press: $color-neutral-200;
+$surface-selected: $color-neutral-200;
+$surface-secondary: $color-neutral-100;
+$surface-secondary-hover: $color-neutral-200;
+$surface-secondary-on-press: $color-neutral-200;
+$surface-secondary-selected: $color-neutral-300;
+
+$fill: $color-neutral-00;
+$fill-hover: $color-neutral-200;
+$fill-on-press: $color-neutral-300;
+$fill-selected: $color-neutral-300;
+$fill-disabled: $color-neutral-250;
+$fill-brand: $color-blue-600;
+$fill-brand-hover: $color-blue-700;
+$fill-brand-on-press: $color-blue-800;
+$fill-brand-selected: $color-blue-900;
+$fill-brand-disabled: $color-neutral-400;
+$fill-critical: $color-red-700;
+$fill-critical-secondary: $color-red-50;
+$fill-critical-selected: $color-red-900;
+
+$icon: $color-neutral-800;
+$icon-secondary: $color-neutral-600;
+$icon-disabled: $color-neutral-450;
+$icon-on-bg-fill-brand: $color-blue-100;
+$icon-warning: $color-amber-700;
+$icon-critical: $color-red-800;
+$icon-emphasis: $color-blue-800;
+$icon-emphasis-hover: $color-blue-900;
+$icon-emphasis-on-press: $color-blue-950;
+$icon-emphasis-selected: $color-blue-950;
+
+$input-bg-surface: $color-neutral-00;
+$input-bg-surface-hover: $color-neutral-100;
+$input-bg-surface-active: $color-neutral-00;
+$input-bg-surface-disabled: $color-neutral-250;
+
+$nav-bg: $color-neutral-150;
+$nav-bg-surface: $color-neutral-150;
+$nav-bg-surface-hover: $color-neutral-50;
+$nav-bg-surface-on-press: $color-neutral-00;
+$nav-bg-surface-selected: $color-neutral-00;
+$nav-bg-surface-selected-no-hover: $color-neutral-200;
+
+$backdrop: #00000030;
+
+$button-group-gap: $space-200;
+$card-padding: $space-400;
+$card-padding-mobile: $space-300;
+$card-gap: $space-500;
+$card-gap-mobile: $space-400;
+$icon-text-gap: $space-200;
+
+// Old STP Design System(do not use)
+$white: #ffffff;
+$white_background: #fefefe;
+$white_blue: #f3f7ff;
+$white_silver: #f4f4f4;
+$black: #000000;
+$blue_text: #2a2f48;
+$blue_gray: #6e738a;
+$blue_silver: #4d4d4d;
+$blue_navy: #4ba5ec;
+$black_transparent: rgba(0, 0, 0, 0.08);
+$light_gray: #d8d7d7;
+$light: #eeeeee;
+$light_filter: rgba(255, 255, 255, 0.9);
+$shadow: rgba(0, 0, 0, 0.23);
+$harmonies: #b6d7ff;
+$blue_royal: #8dacfc;
+$alice_blue: #ecf5ff;
+$black_medium: #4a4c54;
+$black_gray: #666668;
+$white_dark: #f0f4ff;
+$blue_very_light: #e1e3f1;
+$white_smoke: #f3f2f2;
+$black_ghost: rgba(75, 75, 75, 0.9);
+$modal_background: rgba(19, 20, 23, 0.5);
+$red: #ee3153;
+$yellow: #ffc100;
+$light-yellow: #fff8e7;
+$darker-light-yellow: #f5e6c7;
+$green: #00d742;
+$green_gray: #18bc46;
+$blue_dark: #233240;
+$blue_dark_hover: #0153b4;
+$blue_tabs_hover: #d8ecfb;
+$secondary_dark: #51606f;
+$text_dark: #06253c;
+$blue_secondary: #5ab2f9;
+$blue-background: #e8f2ff;
+$blue-border: #b9c8da;
+$blue-icon: #4ba5ec;
+$blue-icon-light: #61d9ff;
+$gray-info: #8392a3;
+$gray-language-tab: #d5e4f7;
+$blue-dark-tab: #3a4857;
+$black_light: #06253c;
+$input_focus: #4ba5ec;
+$blue_secondary_placholder: #9eadbe;
+$gray_placeholder: #51606f;
+$profile_complete_card_background: #fcfcfc;
+$gray_light: #f5f5f5;
+$white_blue: #ebf6ff;
+$light-green: #ecfdf3;
+$dark-green: #12b76a;
+$light-blue: #eff8ff;
+$light-gray: #a0aec0;
+$red_danger: #eb5757;
+$red_danger_bg: #fffbfa;
+$light-red: #fff1f3;
+$dark-red: #c01048;
+$light-purple: #eef4ff;
+$dark-purple: #3538cd;
+$grey-bg: #fafafa;
+$grey-text: #718096;
+$grey-border: #e2e8f0;
+$blue_heading: #08314c;
+$midnight-blue: #003e64;
+$dark_card_blue: #d1e5fd;
+$grey_text_lms: #828282;
+$grey_bg_lms: #f0f0f0;
+$grey_bg_lms_icon: #f7fafc;
+$grey_lms_header: #ececec;
+$green_correct: #6fcf97;
+$green_bg: #f8fdfa;
+$blue-box: #008fff;
+$purple-box: #ae2db1;
+$blue-box-filler: #cee5ff;
+$grey_pdf: #f2f2f0;
+$pink: #cebdff;
+$grey_voice: #e1e1e1;
+$gray_border: #eaecf0;
+$dark_gray: #475467;
+$btn_gray: #ced4da;
+$blue_bg: #e9f4fd;
+$gray_progress: #e0e0de;
+$gray_button: #ced4da;
+$gray_bg_mobile: #f9fafb;
+$gray_divider: #d0d5dd;
+$blue_light: #c6e1f6;
+$gray_tabs: #667085;
+$gray_card: #f3f5f6;
+$dark_text: #344054;
+$mobile_bg: #f0f0f0;
+$gray_tabs_bg: #dde1e5;
+$gray_tabs_text: #667a8b;
+$gray_border_two: #f1f1f1;
+$red: #df5440;
+$red_line: #e83354;
+$pearl-green: #d8fe67;
+$blue_linear: #173c83;
+$blue_gradient: #0d2532;
+$yellow_light: #ffcb66;
+$gray_proftest: #eef0f2;
+$gray_bars: #e4e7ec;
+$yellow_border: #ffb552;
+$yellow_background: #f8e8c0;
+$gray_not_activated: #dadbdf;
+$black_almost: #0e1d2a;
+$gray_proftest: #eef0f2;
+$gray_bars: #e4e7ec;
+$gray_price: #f3f4f6;
+$gray_admin: #e9edf7;
+$gray_admin_text: #718096;
+$gray_admin_light: #f8fafd;
+$gray_black_notif_text: #1a202c;
+$black_notif_text: #151c22;
+$gray_notif_date: #737373;
+$gray_feedback_question: #8897a5;
+$kaspi_red: #f14634;
+$halloween: #ef8014;
+$blue_support: #007aff;
+$blue_new: #135ba3;
+$blue_bg_dark: #d0e4f7;
+$blue_bg_light: #e8f4ff;
+$gray_new: #f0f0f0;
+$blue_new_gradient: linear-gradient(94.4deg, #173c83 0%, #0d2532 100%);
+$orange_gradient: linear-gradient(105.28deg, #ffcb0f 0%, #ff8a0d 100%);
+$yellow_gradient: linear-gradient(105.28deg, #ffcb0f 0%, #ff9c32 100%);