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

package/styles/mis-old-icon-styles.scss

@@ -107,27 +107,27 @@
 
 .ic-selection-radio-Disabled-Unselected-24:before {
     content: "\e90f";
-    color: var(--text-tertiary);
+    color: var(--text-tertiary, #929DAB);
 }
 
 .ic-selection-radio-Active-Unselected-24:before {
     content: "\e910";
-    color: var(--text-secondary);
+    color: var(--text-secondary, #6A737D);
 }
 
 .ic-selection-radio-Disabled-Selected-24:before {
     content: "\e911";
-    color: var(--text-tertiary);
+    color: var(--text-tertiary, #929DAB);
 }
 
 .ic-selection-radio-Active-Selected-24:before {
     content: "\e912";
-    color: var(--brand-primary);
+    color: var(--brand-primary, #0937B2);
 }
 
 .ic-selection-checkbox-Disabled-Neutral-24:before {
     content: "\e913";
-    color: var(--text-tertiary);
+    color: var(--text-tertiary, #929DAB);
 }
 
 .ic-selection-checkbox-Active-Neutral-24 .path1:before {
@@ -178,7 +178,7 @@
 
 .ic-ui-download-24:before {
     content: "\e920";
-    color: var(--brand-primary);
+    color: var(--brand-primary, #0937B2);
 }
 
 .ic-ui-location-24:before {
@@ -195,22 +195,22 @@
 
 .ic-ui-trend-up-24:before {
     content: "\e924";
-    color: var(--brand-success-light);
+    color: var(--brand-success-light, #4CAF50);
 }
 
 .ic-ui-error-24:before {
     content: "\e925";
-    color: var(--brand-error);
+    color: var(--brand-error, #B00020);
 }
 
 .ic-ui-trend-down-24:before {
     content: "\e926";
-    color: var(--brand-error);
+    color: var(--brand-error, #B00020);
 }
 
 .ic-ui-success-24:before {
     content: "\e927";
-    color: var(--brand-success-light);
+    color: var(--brand-success-light, #4CAF50);
 }
 
 .ic-ui-check-24:before {
@@ -219,7 +219,7 @@
 
 .ic-ui-warning-24:before {
     content: "\e929";
-    color: var(--brand-warning);
+    color: var(--brand-warning, #FF9D00);
 }
 
 .ic-rep-stay_primary_portrait-24:before {
@@ -232,7 +232,7 @@
 
 .ic-rep-night-24:before {
     content: "\e92c";
-    color: var(--text-tertiary);
+    color: var(--text-tertiary, #929DAB);
 }
 
 .ic-rep-cab-24:before {
@@ -371,7 +371,7 @@
 
 .ic-action-search-24:before {
     content: "\e94f";
-    color: var(--text-secondary);
+    color: var(--text-secondary, #6A737D);
 }
 
 .ic-action-edit-24:before {
@@ -384,12 +384,12 @@
 
 .ic-action-visibility-24:before {
     content: "\e952";
-    color: var(--text-secondary);
+    color: var(--text-secondary, #6A737D);
 }
 
 .ic-action-visibility-off-24:before {
     content: "\e953";
-    color: var(--text-secondary);
+    color: var(--text-secondary, #6A737D);
 }
 
 .ic-action-qr-24:before {
@@ -469,30 +469,30 @@
 
 .ic-plus-5:before {
     content: "\e966";
-    color: var(--brand-primary);
+    color: var(--brand-primary, #0937B2);
 }
 
 .ic-plus-4:before {
     content: "\e967";
-    color: var(--brand-primary);
+    color: var(--brand-primary, #0937B2);
 }
 
 .ic-plus-3:before {
     content: "\e968";
-    color: var(--bg-primary);
+    color: var(--bg-primary, #FFFFFF);
 }
 
 .ic-plus-2:before {
     content: "\e969";
-    color: var(--bg-primary);
+    color: var(--bg-primary, #FFFFFF);
 }
 
 .ic-plus-1:before {
     content: "\e96a";
-    color: var(--bg-primary);
+    color: var(--bg-primary, #FFFFFF);
 }
 
 .ic-plus:before {
     content: "\e96b";
-    color: var(--text-tertiary);
+    color: var(--text-tertiary, #929DAB);
 }

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

@@ -1,324 +0,0 @@
-// =============================================================================
-// 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);