mis-crystal-design-system 18.0.24 → 18.0.26

package/input/mis-input.component.scss

@@ -15,7 +15,7 @@
     flex-direction: row;
     flex-wrap: nowrap;
     transition: all ease-in 60ms;
-    background-color: #ffffff;
+    background-color: var(--bg-primary, $text_white);
     padding: 3px 16px; // DONE CHANGE
     gap: 16px;
     .mis-input {
@@ -36,7 +36,7 @@
       font-weight: normal;
       font-size: 16px;
       height: 24px;
-      color: #181f33;
+      color: var(--text-primary, $text_black);
       background-color: transparent;
       width: 100%;
       vertical-align: middle;
@@ -54,13 +54,13 @@
       font-weight: normal;
       font-size: 16px;
       line-height: 24px;
-      color: #6a737d;
+      color: var(--text-secondary, $text_muted);
       z-index: -1;
       transition: all ease-in 150ms;
     }
 
     &:focus-within {
-      background-color: #f5f5f5;
+      background-color: var(--bg-tertiary, $grey_bg);
     }
     &:focus-within {
       border: 1px solid $pmry_500;
@@ -69,7 +69,7 @@
     [mis-input-icon] {
       width: 18px;
       height: 18px;
-      color: #6a737d;
+      color: var(--text-secondary, $text_muted);
       font-size: 24px;
       line-height: 18px;
     }
@@ -101,19 +101,19 @@
     }
     .input-wrapper {
       border-radius: 4px;
-      border: 1px solid #e0e0e0;
+      border: 1px solid var(--border-primary, $grey_seperators);
       padding: 0;
       // input:not(:disabled) {
       //   &:hover,
       //   &:focus {
-      //     background-color: #f5f5f5;
+      //     background-color: $grey_bg;
       //   }
       // }
       &:hover {
-        background-color: #f5f5f5;
+        background-color: var(--bg-tertiary, $grey_bg);
       }
       &:focus-within {
-        border: 1px solid #0937b2;
+        border: 1px solid var(--brand-primary, $pmry_500);
       }
       input:not(:placeholder-shown) + .mis-placeholder {
         color: transparent !important;
@@ -125,7 +125,7 @@
     }
     &.has-error {
       .input-wrapper {
-        border: 1px solid #b00020 !important;
+        border: 1px solid var(--brand-error, $sem_error) !important;
       }
     }
   }
@@ -133,9 +133,9 @@
     .input-wrapper {
       padding-top: 24px;
       padding-bottom: 7px; // DONE CHANGE
-      border-bottom: 1px solid #e0e0e0;
+      border-bottom: 1px solid var(--border-primary, $grey_seperators);
       input:focus + .mis-placeholder {
-        color: #0937b2 !important;
+        color: var(--brand-primary, $pmry_500) !important;
       }
       input:not(:placeholder-shown) + .mis-placeholder,
       input:focus + .mis-placeholder {
@@ -145,9 +145,9 @@
       }
       &:focus-within {
         border: none;
-        border-bottom: 1px solid #0937b2;
+        border-bottom: 1px solid var(--brand-primary, $pmry_500);
         input::placeholder {
-          color: #6a737d;
+          color: var(--text-secondary, $text_muted);
           opacity: 1;
           font-size: 16px;
         }
@@ -155,9 +155,9 @@
     }
     &.has-error {
       .input-wrapper {
-        border-bottom: 1px solid #b00020 !important;
+        border-bottom: 1px solid var(--brand-error, $sem_error) !important;
         .mis-placeholder {
-          color: #b00020 !important;
+          color: var(--brand-error, $sem_error) !important;
         }
       }
     }
@@ -171,10 +171,10 @@
     line-height: 24px;
     height: 24px;
     font-size: 12px;
-    color: #6a737d;
+    color: var(--text-secondary, $text_muted);
     letter-spacing: 0.2px;
   }
   [mis-input-error] {
-    color: #b00020;
+    color: var(--brand-error, $sem_error);
   }
 }

package/modal/modal.scss

@@ -5,5 +5,5 @@
   // transition: all 300ms ease-out;
 }
 .mis-modal-overlay {
-  background: rgba(0, 0, 0, 0.32);
+  background: var(--bg-overlay, rgba(0, 0, 0, 0.32));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "18.0.24",
+  "version": "18.0.26",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",
@@ -34,24 +34,12 @@
       "esm": "./esm2022/analytics/mis-crystal-design-system-analytics.mjs",
       "default": "./fesm2022/mis-crystal-design-system-analytics.mjs"
     },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "esm2022": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
-      "esm": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
-      "default": "./fesm2022/mis-crystal-design-system-checkbox.mjs"
-    },
     "./async-search-dropdown": {
       "types": "./async-search-dropdown/index.d.ts",
       "esm2022": "./esm2022/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.mjs",
       "esm": "./esm2022/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.mjs",
       "default": "./fesm2022/mis-crystal-design-system-async-search-dropdown.mjs"
     },
-    "./button": {
-      "types": "./button/index.d.ts",
-      "esm2022": "./esm2022/button/mis-crystal-design-system-button.mjs",
-      "esm": "./esm2022/button/mis-crystal-design-system-button.mjs",
-      "default": "./fesm2022/mis-crystal-design-system-button.mjs"
-    },
     "./chip": {
       "types": "./chip/index.d.ts",
       "esm2022": "./esm2022/chip/mis-crystal-design-system-chip.mjs",
@@ -64,6 +52,18 @@
       "esm": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
       "default": "./fesm2022/mis-crystal-design-system-datepicker_v2.mjs"
     },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "esm2022": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
+      "esm": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
+      "default": "./fesm2022/mis-crystal-design-system-checkbox.mjs"
+    },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "esm2022": "./esm2022/button/mis-crystal-design-system-button.mjs",
+      "esm": "./esm2022/button/mis-crystal-design-system-button.mjs",
+      "default": "./fesm2022/mis-crystal-design-system-button.mjs"
+    },
     "./daterangepicker_v2": {
       "types": "./daterangepicker_v2/index.d.ts",
       "esm2022": "./esm2022/daterangepicker_v2/mis-crystal-design-system-daterangepicker_v2.mjs",
@@ -88,6 +88,12 @@
       "esm": "./esm2022/dynamic-form/mis-crystal-design-system-dynamic-form.mjs",
       "default": "./fesm2022/mis-crystal-design-system-dynamic-form.mjs"
     },
+    "./dynamic-theme": {
+      "types": "./dynamic-theme/index.d.ts",
+      "esm2022": "./esm2022/dynamic-theme/mis-crystal-design-system-dynamic-theme.mjs",
+      "esm": "./esm2022/dynamic-theme/mis-crystal-design-system-dynamic-theme.mjs",
+      "default": "./fesm2022/mis-crystal-design-system-dynamic-theme.mjs"
+    },
     "./fab": {
       "types": "./fab/index.d.ts",
       "esm2022": "./esm2022/fab/mis-crystal-design-system-fab.mjs",

package/styles/mis-color-constants.scss

@@ -72,6 +72,116 @@ $MR_solid_pink: #FFC6F2;
 $tr_hover: #F0F3FA;
 $tr_pressed: #DAE1F3;
 
+
+//--------------------------WIS DYNAMIC THEME COLOR VARS--------------------------------
+
+// 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;
+
+
 :root{
   //   PRIMARY_COLORS -----------------------
   --pmry-200 : #{$pmry_200};
@@ -146,4 +256,98 @@ $tr_pressed: #DAE1F3;
   //transparency -----------------------------
   --tr-hover :#{$tr_hover};
   --tr-pressed :#{$tr_pressed};
+
+
+  //--------------------------WIS DYNAMIC THEME COLOR 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};
 }