mis-crystal-design-system 18.0.21 → 18.0.22-test-dynamic-theme

package/styles/mis-dynamic-theme-color-var.scss

@@ -0,0 +1,324 @@
+// =============================================================================
+// DYNAMIC THEME SYSTEM
+// =============================================================================
+// Centralized color variables with SCSS fallbacks and CSS variables for runtime updates.
+// =============================================================================
+
+// =============================================================================
+// BRAND COLOR VARIABLES (SCSS TOKENS)
+// =============================================================================
+
+// Primary Brand Colors
+$brand-primary: #0937B2 !default;
+$brand-primary-light: #3C68D0 !default;
+$brand-primary-dark: #062A99 !default;
+$brand-primary-darker: #041F80 !default;
+$brand-primary-lighter: #638FE7 !default;
+$brand-primary-lightest: #CBDDFB !default;
+$brand-primary-hover: #F0F3FA !default;
+$brand-primary-active: #DAE1F3 !default;
+
+// Secondary Brand Colors
+$brand-secondary: #ED711C !default;
+$brand-secondary-light: #F09E65 !default;
+$brand-secondary-dark: #B23600 !default;
+$brand-secondary-lighter: #FFC6F2 !default;
+
+// Accent Colors
+$brand-accent: #10ADAE !default;
+$brand-accent-light: #16CBBC !default;
+$brand-accent-dark: #035F6B !default;
+$brand-accent-lighter: #ACDADA !default;
+
+// Semantic Colors
+$brand-success: #38AF49 !default;
+$brand-success-light: #4CAF50 !default;
+$brand-success-dark: #216531 !default;
+$brand-success-lighter: #E4F5E9 !default;
+$brand-success-lightest: #F1FFF3 !default;
+
+$brand-error: #B00020 !default;
+$brand-error-light: #F04E4E !default;
+$brand-error-dark: #A60060 !default;
+$brand-error-lighter: #FAE1EA !default;
+$brand-error-lightest: #FDF2F2 !default;
+
+$brand-warning: #FF9D00 !default;
+$brand-warning-light: #D4900C !default;
+$brand-warning-dark: #624000 !default;
+$brand-warning-lighter: #F4E7C3 !default;
+$brand-warning-lightest: #FAEFED !default;
+
+$brand-info: #0091FF !default;
+$brand-info-light: #35A1FF !default;
+$brand-info-dark: #0087B2 !default;
+$brand-info-lighter: #CFECF9 !default;
+
+// Text Colors
+$text-primary: #181F33 !default;
+$text-secondary: #6A737D !default;
+$text-tertiary: #929DAB !default;
+$text-disabled: #C8CDD3 !default;
+
+$text-primary-87: rgba(24, 31, 51, 0.87) !default;
+$text-primary-60: rgba(24, 31, 51, 0.60) !default;
+$text-primary-38: rgba(24, 31, 51, 0.38) !default;
+$text-primary-12: rgba(24, 31, 51, 0.12) !default;
+
+// Background Colors
+$bg-primary: #FFFFFF !default;
+$bg-secondary: #FAFAFA !default;
+$bg-tertiary: #F5F5F5 !default;
+
+$bg-overlay: rgba(0, 0, 0, 0.32) !default;
+$bg-overlay-light: rgba(0, 0, 0, 0.12) !default;
+$bg-overlay-lighter: rgba(0, 0, 0, 0.08) !default;
+$bg-overlay-lightest: rgba(0, 0, 0, 0.04) !default;
+
+// Border Colors
+$border-primary: #E0E0E0 !default;
+$border-secondary: #D6DCE2 !default;
+$border-tertiary: #C8CDD3 !default;
+$border-light: #F1F4F8 !default;
+
+$border-primary-12: rgba(0, 0, 0, 0.12) !default;
+$border-primary-08: rgba(0, 0, 0, 0.08) !default;
+$border-primary-06: rgba(0, 0, 0, 0.06) !default;
+
+// Shadows
+$shadow-primary: rgba(0, 0, 0, 0.12) !default;
+$shadow-secondary: rgba(0, 0, 0, 0.08) !default;
+$shadow-tertiary: rgba(0, 0, 0, 0.04) !default;
+$shadow-light: rgba(0, 0, 0, 0.06) !default;
+
+// Status
+$status-available: #929DAB !default;
+$status-unavailable: #CCD3DA !default;
+$status-hotseat: #857BFF !default;
+$status-multiteam: #10ADAE !default;
+$status-selected: #10ADAE !default;
+$status-upcoming: #D4900C !default;
+
+$status-room: #38AF49 !default;
+$status-room-booked: #B23600 !default;
+$status-room-unavailable: #181F33 !default;
+
+// Team
+$team-color-1: #F8C52E !default;
+$team-color-2: #FA8E20 !default;
+$team-color-3: #987CDD !default;
+$team-color-4: #16CBBC !default;
+$team-color-5: #E65010 !default;
+$team-color-6: #A60060 !default;
+$team-color-7: #ED323B !default;
+$team-color-8: #35A1FF !default;
+$team-color-9: #80D348 !default;
+
+// =============================================================================
+// CSS CUSTOM PROPERTIES (EXPORTED FOR RUNTIME THEMING)
+// =============================================================================
+
+:root {
+  // loop all tokens into CSS vars
+  --brand-primary: #{$brand-primary};
+  --brand-primary-light: #{$brand-primary-light};
+  --brand-primary-dark: #{$brand-primary-dark};
+  --brand-primary-darker: #{$brand-primary-darker};
+  --brand-primary-lighter: #{$brand-primary-lighter};
+  --brand-primary-lightest: #{$brand-primary-lightest};
+  --brand-primary-hover: #{$brand-primary-hover};
+  --brand-primary-active: #{$brand-primary-active};
+
+  --brand-secondary: #{$brand-secondary};
+  --brand-secondary-light: #{$brand-secondary-light};
+  --brand-secondary-dark: #{$brand-secondary-dark};
+  --brand-secondary-lighter: #{$brand-secondary-lighter};
+
+  --brand-accent: #{$brand-accent};
+  --brand-accent-light: #{$brand-accent-light};
+  --brand-accent-dark: #{$brand-accent-dark};
+  --brand-accent-lighter: #{$brand-accent-lighter};
+
+  --brand-success: #{$brand-success};
+  --brand-success-light: #{$brand-success-light};
+  --brand-success-dark: #{$brand-success-dark};
+  --brand-success-lighter: #{$brand-success-lighter};
+  --brand-success-lightest: #{$brand-success-lightest};
+
+  --brand-error: #{$brand-error};
+  --brand-error-light: #{$brand-error-light};
+  --brand-error-dark: #{$brand-error-dark};
+  --brand-error-lighter: #{$brand-error-lighter};
+  --brand-error-lightest: #{$brand-error-lightest};
+
+  --brand-warning: #{$brand-warning};
+  --brand-warning-light: #{$brand-warning-light};
+  --brand-warning-dark: #{$brand-warning-dark};
+  --brand-warning-lighter: #{$brand-warning-lighter};
+  --brand-warning-lightest: #{$brand-warning-lightest};
+
+  --brand-info: #{$brand-info};
+  --brand-info-light: #{$brand-info-light};
+  --brand-info-dark: #{$brand-info-dark};
+  --brand-info-lighter: #{$brand-info-lighter};
+
+  --text-primary: #{$text-primary};
+  --text-secondary: #{$text-secondary};
+  --text-tertiary: #{$text-tertiary};
+  --text-disabled: #{$text-disabled};
+  --text-primary-87: #{$text-primary-87};
+  --text-primary-60: #{$text-primary-60};
+  --text-primary-38: #{$text-primary-38};
+  --text-primary-12: #{$text-primary-12};
+
+  --bg-primary: #{$bg-primary};
+  --bg-secondary: #{$bg-secondary};
+  --bg-tertiary: #{$bg-tertiary};
+  --bg-overlay: #{$bg-overlay};
+  --bg-overlay-light: #{$bg-overlay-light};
+  --bg-overlay-lighter: #{$bg-overlay-lighter};
+  --bg-overlay-lightest: #{$bg-overlay-lightest};
+
+  --border-primary: #{$border-primary};
+  --border-secondary: #{$border-secondary};
+  --border-tertiary: #{$border-tertiary};
+  --border-light: #{$border-light};
+  --border-primary-12: #{$border-primary-12};
+  --border-primary-08: #{$border-primary-08};
+  --border-primary-06: #{$border-primary-06};
+
+  --shadow-primary: #{$shadow-primary};
+  --shadow-secondary: #{$shadow-secondary};
+  --shadow-tertiary: #{$shadow-tertiary};
+  --shadow-light: #{$shadow-light};
+
+  --status-available: #{$status-available};
+  --status-unavailable: #{$status-unavailable};
+  --status-hotseat: #{$status-hotseat};
+  --status-multiteam: #{$status-multiteam};
+  --status-selected: #{$status-selected};
+  --status-upcoming: #{$status-upcoming};
+  --status-room: #{$status-room};
+  --status-room-booked: #{$status-room-booked};
+  --status-room-unavailable: #{$status-room-unavailable};
+
+  --team-color-1: #{$team-color-1};
+  --team-color-2: #{$team-color-2};
+  --team-color-3: #{$team-color-3};
+  --team-color-4: #{$team-color-4};
+  --team-color-5: #{$team-color-5};
+  --team-color-6: #{$team-color-6};
+  --team-color-7: #{$team-color-7};
+  --team-color-8: #{$team-color-8};
+  --team-color-9: #{$team-color-9};
+}
+
+// =============================================================================
+// UTILITY CLASSES
+// =============================================================================
+
+.brand-primary-bg { background-color: var(--brand-primary); }
+.brand-secondary-bg { background-color: var(--brand-secondary); }
+.brand-accent-bg { background-color: var(--brand-accent); }
+.brand-success-bg { background-color: var(--brand-success); }
+.brand-error-bg { background-color: var(--brand-error); }
+.brand-warning-bg { background-color: var(--brand-warning); }
+.brand-info-bg { background-color: var(--brand-info); }
+
+.brand-primary-text { color: var(--brand-primary); }
+.brand-secondary-text { color: var(--brand-secondary); }
+.brand-accent-text { color: var(--brand-accent); }
+.brand-success-text { color: var(--brand-success); }
+.brand-error-text { color: var(--brand-error); }
+.brand-warning-text { color: var(--brand-warning); }
+.brand-info-text { color: var(--brand-info); }
+
+.brand-primary-border { border-color: var(--brand-primary); }
+.brand-secondary-border { border-color: var(--brand-secondary); }
+.brand-accent-border { border-color: var(--brand-accent); }
+.brand-success-border { border-color: var(--brand-success); }
+.brand-error-border { border-color: var(--brand-error); }
+.brand-warning-border { border-color: var(--brand-warning); }
+.brand-info-border { border-color: var(--brand-info); }
+
+// =============================================================================
+// MIXINS
+// =============================================================================
+
+@mixin brand-primary-gradient($direction: to right) {
+  background: linear-gradient($direction, var(--brand-primary), var(--brand-primary-light));
+}
+
+@mixin brand-secondary-gradient($direction: to right) {
+  background: linear-gradient($direction, var(--brand-secondary), var(--brand-secondary-light));
+}
+
+@mixin brand-accent-gradient($direction: to right) {
+  background: linear-gradient($direction, var(--brand-accent), var(--brand-accent-light));
+}
+
+@mixin brand-shadow($intensity: 1) {
+  @if $intensity == 1 {
+    box-shadow: 0 2px 4px var(--shadow-light);
+  } @else if $intensity == 2 {
+    box-shadow: 0 4px 8px var(--shadow-secondary);
+  } @else if $intensity == 3 {
+    box-shadow: 0 8px 16px var(--shadow-primary);
+  }
+}
+
+@mixin brand-border($width: 1px, $style: solid, $color: var(--border-primary)) {
+  border: $width $style $color;
+}
+
+// =============================================================================
+// VARIATIONS (Dark / High Contrast)
+// =============================================================================
+
+[data-theme="dark"] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2d2d2d;
+  --bg-tertiary: #404040;
+  --text-primary: #ffffff;
+  --text-secondary: #cccccc;
+  --border-primary: #404040;
+}
+
+[data-theme="high-contrast"] {
+  --brand-primary: #000000;
+  --brand-secondary: #ffffff;
+  --text-primary: #000000;
+  --text-secondary: #ffffff;
+  --bg-primary: #ffffff;
+  --bg-secondary: #000000;
+}
+
+// =============================================================================
+// LEGACY TOKENS (for backward compatibility)
+// =============================================================================
+
+$pmry_500: var(--brand-primary);
+$pmry_400: var(--brand-primary-light);
+$pmry_600: var(--brand-primary-dark);
+$pmry_300: var(--brand-primary-lighter);
+$pmry_100: var(--brand-primary-lightest);
+
+$sec_orange: var(--brand-secondary);
+$sec_teal: var(--brand-accent);
+$sec_purple: #815FD5;
+
+$sem_error: var(--brand-error);
+$sem_success: var(--brand-success);
+$sem_warning: var(--brand-warning);
+$sem_info: var(--brand-info);
+
+$text_black: var(--text-primary);
+$text_muted: var(--text-secondary);
+$text_white: var(--bg-primary);
+
+$grey_bg: var(--bg-tertiary);
+$grey_bg-1: var(--bg-secondary);
+$grey_seperators: var(--border-primary);
+$grey_disabled: var(--border-tertiary);
+$grey_hover: var(--bg-overlay-lightest);
+$grey_pressed: var(--bg-overlay-light);

package/styles/mis-icons.scss

@@ -59,15 +59,15 @@
 }
 .icon-ic-ETS-OTA-16:before {
   content: "\ea24";
-  color: #ed711c;
+  color: var(--brand-secondary);
 }
 .icon-ic-ETS-OTD-16:before {
   content: "\ea25";
-  color: #0087b2;
+  color: var(--brand-info-dark);
 }
 .icon-ic-home-office-24:before {
   content: "\ea23";
-  color: #929dab;
+  color: var(--text-tertiary);
 }
 .icon-ic-device-unreachable-16:before {
   content: "\e900";
@@ -107,11 +107,11 @@
 }
 .icon-ic-ets-adhoc-32:before {
   content: "\e90b";
-  color: #b00020;
+  color: var(--brand-error);
 }
 .icon-ic-ets-help-desk-32:before {
   content: "\e90d";
-  color: #fff;
+  color: var(--bg-primary);
 }
 .icon-ic-ets-login-32 .path1:before {
   content: "\e90e";
@@ -133,27 +133,27 @@
 }
 .icon-ic-ui-WFO-outline-24:before {
   content: "\ea00";
-  color: #0087b2;
+  color: var(--brand-info-dark);
 }
 .icon-ic-ui-WFH-24-2:before {
   content: "\ea01";
-  color: #6b034e;
+  color: var(--brand-error-dark);
 }
 .icon-ic-ui-WFH-outline-24:before {
   content: "\ea02";
-  color: #6b034e;
+  color: var(--brand-error-dark);
 }
 .icon-ic-ui-WFH-24-1:before {
   content: "\ea03";
-  color: #fff;
+  color: var(--bg-primary);
 }
 .icon-ic-ui-WFO-24-2:before {
   content: "\ea04";
-  color: #0087b2;
+  color: var(--brand-info-dark);
 }
 .icon-ic-ui-WFO-24-1:before {
   content: "\ea05";
-  color: #fff;
+  color: var(--bg-primary);
 }
 .icon-ic-ui-battery-life-24:before {
   content: "\ea06";
@@ -163,7 +163,7 @@
 }
 .icon-ic-ets-bus-24-2:before {
   content: "\ea08";
-  color: #0937b2;
+  color: var(--brand-primary);
 }
 .icon-ic-ets-chat-24:before {
   content: "\ea0b";
@@ -173,18 +173,18 @@
 }
 .icon-ic-ets-walking-man-24:before {
   content: "\ea0d";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-ui-transport-24-1:before {
   content: "\ea0e";
-  color: #0937b2;
+  color: var(--brand-primary);
 }
 .icon-ic-ets-nodal-point-24:before {
   content: "\ea0f";
 }
 .icon-ic-ui-seperator-16:before {
   content: "\e94c";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-action-filter-applied-24 .path1:before {
   content: "\e910";
@@ -225,54 +225,54 @@
 }
 .icon-ic-duplicate-24:before {
   content: "\e922";
-  color: #815fd5;
+  color: var(--brand-secondary-light);
 }
 .icon-ic-eligibility-address-24:before {
   content: "\e92b";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-boy-24:before {
   content: "\e938";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-cough-24:before {
   content: "\e939";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-covid-man-24:before {
   content: "\e952";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-covid-24:before {
   content: "\e96e";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-man-24:before {
   content: "\e96f";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-sick-24:before {
   content: "\e970";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-symptoms-24:before {
   content: "\e971";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-eligibility-travel-24:before {
   content: "\e972";
-  color: #c13d6d;
+  color: var(--brand-error-light);
 }
 .icon-ic-Gigipass-loading-bg:before {
   content: "\e973";
-  color: #0087b2;
+  color: var(--brand-info-dark);
 }
 .icon-ic-map-pin-24:before {
   content: "\e974";
 }
 .icon-ic-mobile-side-menu-vaccine-24:before {
   content: "\e975";
-  color: #0937b2;
+  color: var(--brand-primary);
 }
 .icon-ic-nav-help-24:before {
   content: "\e976";
@@ -285,11 +285,11 @@
 }
 .icon-ic-new-icon-transport-Availibilty-Muted-V1-32:before {
   content: "\e98a";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-not-started-24-no-bg:before {
   content: "\e98b";
-  color: #d4900c;
+  color: var(--brand-warning-light);
 }
 .icon-ic-nre-notification-indicator-24 .path1:before {
   content: "\e98d";
@@ -338,14 +338,14 @@
 }
 .icon-ic-ui-cross-24:before {
   content: "\e9d6";
-  color: #b00020;
+  color: var(--brand-error);
 }
 .icon-ic-ui-download-24:before {
   content: "\e9eb";
 }
 .icon-ic-ui-error-24:before {
   content: "\e9f4";
-  color: #b00020;
+  color: var(--brand-error);
 }
 .icon-ic-ui-statistics-24 .path1:before {
   content: "\e9f5";
@@ -358,7 +358,7 @@
 }
 .icon-ic-ui-tick-24:before {
   content: "\e9fd";
-  color: #38af49;
+  color: var(--brand-success);
 }
 .icon-ic-ui-walked-in-24 .path1:before {
   content: "\e9fe";
@@ -392,15 +392,15 @@
 }
 .icon-ic-ui-nonveg-16:before {
   content: "\e9f9";
-  color: #b00020;
+  color: var(--brand-error);
 }
 .icon-ic-ui-veg-16:before {
   content: "\e9fa";
-  color: #38af49;
+  color: var(--brand-success);
 }
 .icon-ic-ui-vegan-16:before {
   content: "\e9fb";
-  color: #ff9d00;
+  color: var(--brand-warning);
 }
 .icon-ic-ui-Gender-24:before {
   content: "\e9ca";
@@ -419,7 +419,7 @@
 }
 .icon-ic-ui-info-24:before {
   content: "\e9cf";
-  color: #0091ff;
+  color: var(--brand-info);
 }
 .icon-ic-ui-WFO-24:before {
   content: "\e9d0";
@@ -495,15 +495,15 @@
 }
 .icon-ic-ui-trend-down-24:before {
   content: "\e9ec";
-  color: #b00020;
+  color: var(--brand-error);
 }
 .icon-ic-ui-trend-up-24:before {
   content: "\e9ed";
-  color: #38af49;
+  color: var(--brand-success);
 }
 .icon-ic-ui-warning-24:before {
   content: "\e9ee";
-  color: #ff9d00;
+  color: var(--brand-warning);
 }
 .icon-ic-ui-WFH-24:before {
   content: "\e9ef";
@@ -534,7 +534,7 @@
 }
 .icon-ic-nrs-loader-16:before {
   content: "\e9bb";
-  color: #0937b2;
+  color: var(--brand-primary);
 }
 .icon-ic-nrs-metrics-24:before {
   content: "\e9bc";
@@ -556,11 +556,11 @@
 }
 .icon-ic-duplicate-24--no-bg:before {
   content: "\e9b1";
-  color: #815fd5;
+  color: var(--brand-secondary-light);
 }
 .icon-ic-Gigipass-loading-no-bg:before {
   content: "\e9b4";
-  color: #0087b2;
+  color: var(--brand-info-dark);
 }
 .icon-ic-new-icon-transport-Availibilty-Muted-V1-24-bg .path1:before {
   content: "\e9b5";
@@ -625,7 +625,7 @@
 }
 .icon-ic-nav-meeting-fill-24:before {
   content: "\e994";
-  color: #0937b2;
+  color: var(--brand-primary);
 }
 .icon-ic-mr-projector-24:before {
   content: "\e995";
@@ -674,7 +674,7 @@
 }
 .icon-ic-nav-seat-fill-24:before {
   content: "\e9a4";
-  color: #0937b2;
+  color: var(--brand-primary);
 }
 .icon-ic--new-icon--user-permissions2-24:before {
   content: "\e96d";
@@ -694,7 +694,7 @@
 }
 .icon-ic-map-reposition-24:before {
   content: "\e97a";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-new-icon--user-group-24:before {
   content: "\e97b";
@@ -746,19 +746,19 @@
 }
 .icon-seats-available:before {
   content: "\e990";
-  color: #5cc917;
+  color: var(--brand-success);
 }
 .icon-seats-booked:before {
   content: "\e991";
-  color: #039be5;
+  color: var(--brand-info);
 }
 .icon-seats-cancelled:before {
   content: "\e992";
-  color: #ef4d1d;
+  color: var(--brand-error-light);
 }
 .icon-seats-totals:before {
   content: "\e993";
-  color: #bcbcbc;
+  color: var(--text-disabled);
 }
 .icon-ic-nav-team-24:before {
   content: "\e94a";
@@ -861,18 +861,18 @@
 }
 .icon-ic-new-icon-transport-Availibilty-V1-325:before {
   content: "\e92f";
-  color: #929dab;
+  color: var(--text-tertiary);
 }
 .icon-ic-ui-daytime-24:before {
   content: "\e930";
 }
 .icon-ic-new-icon-transport-Availibilty-Muted-V1-321:before {
   content: "\e931";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-ui--no_parking-24:before {
   content: "\e93a";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-ui-bus-24:before {
   content: "\e93b";
@@ -948,11 +948,11 @@
 }
 .icon-ic-action-drag-24:before {
   content: "\e91b";
-  color: #c8cdd3;
+  color: var(--text-disabled);
 }
 .icon-ic-action-drag:before {
   content: "\e91c";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-action-edit-24:before {
   content: "\e91d";
@@ -1046,9 +1046,9 @@
 }
 .icon-ic-action-visibility-24:before {
   content: "\ea18";
-  color: #6a737d;
+  color: var(--text-secondary);
 }
 .icon-ic-action-visibility-off-24:before {
   content: "\ea19";
-  color: #6a737d;
+  color: var(--text-secondary);
 }