mis-crystal-design-system 18.1.6-test-2 → 18.1.6-test-3

package/styles/mis-color-constants.scss

@@ -1,353 +0,0 @@
-//   PRIMARY_COLORS -----------------------
-$pmry_100: #CBDDFB;
-$pmry_200: #99BAF7;
-$pmry_500: #0937B2;
-$pmry_400: #3C68D0;
-$pmry_600: #062A99;
-$pmry_700: #041F80;
-$pmry_300: #638FE7;
-$pmry_800: #021567;
-$pmry_900: #010F55;
-
-//   SECONDARY_COLORS ---------------------
-$sec_d_purple: #40447F;
-$sec_maroon: #6B034E;
-$sec_mud_red: #B23600;
-$sec_orange: #ED711C;
-$sec_purple: #815FD5;
-$sec_teal: #10ADAE;
-$sec_yellow: #D4900C;
-$sec_green: #547F40;
-$sec_bright_green: #27D22E;
-$sec_dark_teal: #035F6B;
-$sec_chocolate: #7C2F33;
-$sec_rube_pink: #C13D6D;
-$sec_cerulean: #0087B2;
-
-//SEMANTIC COLORS --------------------------
-$sem_error: #B00020;
-$sem_info: #0091FF;
-$sem_warning: #FF9D00;
-$sem_success: #38AF49;
-
-//grey -------------------------------------
-$grey_bg-1: #FAFAFA;
-$grey_bg: #F5F5F5;
-$grey_seperators: #E0E0E0;
-$grey_disabled: #C8CDD3;
-$grey_hover: #F5F7FC;
-$grey_pressed: #E6EBF7;
-$grey_row: #F5F7FC;
-
-//decor ------------------------------------
-$dec_light-yellow:#F4E7C3;
-$dec_light-purple:#DACFF9;
-$dec_light-green:#E4F5E9;
-$dec_light-green2:#F1FFF3;
-$dec_light-pink:#FAE1EA;
-$dec_:#F4CBC1;
-$dec_lt-orange:#FAEFED;
-$dec_light-blue:#CFECF9;
-$dec_row-selection:#F1FDF8;
-$dec_row-selection2:#F2FBFF;
-$dec_row-lines:#D3E1E9;
-
-//Text -------------------------------------
-$text_white: #FFFFFF;
-$text-disabled: #929DAB;
-$text_muted: #6A737D;
-$text_black: #181F33;
-
-//meeting-rooms ----------------------------
-$MR_solid_blue2: #C8D5F6;
-$MR_solid_purple: #C9C3FB;
-$MR_solid_orange: #EEAC9F;
-$MR_solid_green: #ACDADA;
-$MR_solid_brown: #E8C8AF;
-$MR_solid_yellow: #FFEFC7;
-$MR_solid_blue: #BBE6FF;
-$MR_solid_pink: #FFC6F2;
-
-//transparency -----------------------------
-$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};
-  --pmry-100 : #{$pmry_100};
-  --pmry-500 : #{$pmry_500};
-  --pmry-400 : #{$pmry_400};
-  --pmry-600 : #{$pmry_600};
-  --pmry-700 : #{$pmry_700};
-  --pmry-300 : #{$pmry_300};
-  --pmry-800 : #{$pmry_800};
-  --pmry-900 : #{$pmry_900};
-
-  //   SECONDARY_COLORS ---------------------
-  --sec-d-purple: #{$sec_d_purple};
-  --sec-maroon: #{$sec_maroon};
-  --sec-mud-red: #{$sec_mud_red};
-  --sec-orange: #{$sec_orange};
-  --sec-purple: #{$sec_purple};
-  --sec-teal: #{$sec_teal};
-  --sec-yellow: #{$sec_yellow};
-  --sec-green: #{$sec_green};
-  --sec-bright-green: #{$sec_bright_green};
-  --sec-dark-teal: #{$sec_dark_teal};
-  --sec-chocolate: #{$sec_chocolate};
-  --sec-rube-pink: #{$sec_rube_pink};
-  --sec-cerulean: #{$sec_cerulean};
-
-  //SEMANTIC COLORS --------------------------
-  --sem-error: #{$sem_error};
-  --sem-info: #{$sem_info};
-  --sem-warning: #{$sem_warning};
-  --sem-success: #{$sem_success};
-
-  //grey -------------------------------------
-  --grey-bg-1: #{$grey_bg-1};
-  --grey-bg: #{$grey_bg};
-  --grey-seperators: #{$grey_seperators};
-  --grey-disabled: #{$grey_disabled};
-  --grey-hover: #{$grey_hover};
-  --grey-pressed: #{$grey_pressed};
-  --grey-row: #{$grey_row};
-
-  //decor ------------------------------------
-  --dec-light-yellow : #{$dec_light-yellow};
-  --dec-light-purple: #{$dec_light-purple};
-  --dec-light-green: #{$dec_light-green};
-  --dec-light-green2: #{$dec_light-green2};
-  --dec-light-pink: #{$dec_light-pink};
-  --dec-: #{$dec_};
-  --dec-lt-orange: #{$dec_lt-orange};
-  --dec-light-blue: #{$dec_light-blue};
-  --dec-row-selection: #{$dec_row-selection};
-  --dec-row-selection2: #{$dec_row-selection2};
-  --dec-row-lines: #{$dec_row-lines};
-
-  //Text -------------------------------------
-  --text-white: #{$text_white};
-  --text-disabled: #{$text-disabled};
-  --text-muted: #{$text_muted};
-  --text-black: #{$text_black};
-
-  //meeting-rooms ----------------------------
-  --MR-solid-blue2 :#{$MR_solid_blue2};
-  --MR-solid-purple :#{$MR_solid_purple};
-  --MR-solid-orange :#{$MR_solid_orange};
-  --MR-solid-green :#{$MR_solid_green};
-  --MR-solid-brown :#{$MR_solid_brown};
-  --MR-solid-yellow :#{$MR_solid_yellow};
-  --MR-solid-blue :#{$MR_solid_blue};
-  --MR-solid-pink :#{$MR_solid_pink};
-
-  //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};
-}

package/styles/mis-flex.scss

@@ -1,321 +0,0 @@
-//Flex---------------------------------------------------------------
-.flex {
-  display: flex;
-}
-
-//Flex Direction----------------------------------
-.flex-row {
-  flex-direction: row;
-}
-.flex-row-reverse {
-  flex-direction: row-reverse;
-}
-.flex-col {
-  flex-direction: column;
-}
-.flex-col-reverse {
-  flex-direction: column-reverse;
-}
-//Flex Basis-------------------------------------
-.basis-0 {
-  flex-basis: 0px;
-}
-.basis-1 {
-  flex-basis: 0.25rem; /* 4px */
-}
-.basis-2 {
-  flex-basis: 0.5rem; /* 8px */
-}
-.basis-3 {
-  flex-basis: 0.75rem; /* 12px */
-}
-.basis-4 {
-  flex-basis: 1rem; /* 16px */
-}
-.basis-5 {
-  flex-basis: 1.25rem; /* 20px */
-}
-.basis-6 {
-  flex-basis: 1.5rem; /* 24px */
-}
-.basis-7 {
-  flex-basis: 1.75rem; /* 28px */
-}
-.basis-8 {
-  flex-basis: 2rem; /* 32px */
-}
-.basis-9 {
-  flex-basis: 2.25rem; /* 36px */
-}
-.basis-10 {
-  flex-basis: 2.5rem; /* 40px */
-}
-.basis-11 {
-  flex-basis: 2.75rem; /* 44px */
-}
-.basis-12 {
-  flex-basis: 3rem; /* 48px */
-}
-.basis-14 {
-  flex-basis: 3.5rem; /* 56px */
-}
-.basis-16 {
-  flex-basis: 4rem; /* 64px */
-}
-.basis-20 {
-  flex-basis: 5rem; /* 80px */
-}
-.basis-24 {
-  flex-basis: 6rem; /* 96px */
-}
-.basis-28 {
-  flex-basis: 7rem; /* 112px */
-}
-.basis-32 {
-  flex-basis: 8rem; /* 128px */
-}
-.basis-36 {
-  flex-basis: 9rem; /* 144px */
-}
-.basis-40 {
-  flex-basis: 10rem; /* 160px */
-}
-.basis-44 {
-  flex-basis: 11rem; /* 176px */
-}
-.basis-48 {
-  flex-basis: 12rem; /* 192px */
-}
-.basis-52 {
-  flex-basis: 13rem; /* 208px */
-}
-.basis-56 {
-  flex-basis: 14rem; /* 224px */
-}
-.basis-60 {
-  flex-basis: 15rem; /* 240px */
-}
-.basis-64 {
-  flex-basis: 16rem; /* 256px */
-}
-.basis-72 {
-  flex-basis: 18rem; /* 288px */
-}
-.basis-80 {
-  flex-basis: 20rem; /* 320px */
-}
-.basis-96 {
-  flex-basis: 24rem; /* 384px */
-}
-.basis-auto {
-  flex-basis: auto;
-}
-.basis-px {
-  flex-basis: 1px;
-}
-.basis-0-5 {
-  flex-basis: 0.125rem; /* 2px */
-}
-.basis-1-5 {
-  flex-basis: 0.375rem; /* 6px */
-}
-.basis-2-5 {
-  flex-basis: 0.625rem; /* 10px */
-}
-.basis-3-5 {
-  flex-basis: 0.875rem; /* 14px */
-}
-.basis-50per {
-  flex-basis: 50%;
-}
-.basis-33per {
-  flex-basis: 33.333333%;
-}
-.basis-66per {
-  flex-basis: 66.666667%;
-}
-.basis-25per {
-  flex-basis: 25%;
-}
-.basis-75per {
-  flex-basis: 75%;
-}
-.basis-20per {
-  flex-basis: 20%;
-}
-.basis-40per {
-  flex-basis: 40%;
-}
-.basis-60per {
-  flex-basis: 60%;
-}
-.basis-80per {
-  flex-basis: 80%;
-}
-.basis-full {
-  flex-basis: 100%;
-}
-
-//Flex wrap----------------------------------------------------
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.flex-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-//Flex Grow and Shrink-----------------------------------------
-.grow {
-  flex-grow: 1;
-}
-.grow-0 {
-  flex-grow: 0;
-}
-.shrink {
-  flex-shrink: 1;
-}
-.shrink-0 {
-  flex-shrink: 0;
-}
-
-//Flex order---------------------------------------------------
-.order-1 {
-  order: 1;
-}
-.order-2 {
-  order: 2;
-}
-.order-3 {
-  order: 3;
-}
-.order-4 {
-  order: 4;
-}
-.order-5 {
-  order: 5;
-}
-.order-6 {
-  order: 6;
-}
-.order-7 {
-  order: 7;
-}
-.order-8 {
-  order: 8;
-}
-.order-9 {
-  order: 9;
-}
-.order-10 {
-  order: 10;
-}
-.order-11 {
-  order: 11;
-}
-.order-12 {
-  order: 12;
-}
-.order-first {
-  order: -9999;
-}
-.order-last {
-  order: 9999;
-}
-.order-none {
-  order: 0;
-}
-
-//Justify content-------------------------------------------------------
-.justify-normal {
-  justify-content: normal;
-}
-.justify-start {
-  justify-content: flex-start;
-}
-.justify-end {
-  justify-content: flex-end;
-}
-.justify-center {
-  justify-content: center;
-}
-.justify-between {
-  justify-content: space-between;
-}
-.justify-around {
-  justify-content: space-around;
-}
-.justify-evenly {
-  justify-content: space-evenly;
-}
-.justify-stretch {
-  justify-content: stretch;
-}
-
-//Align content----------------------------------------------------------
-.content-normal {
-  align-content: normal;
-}
-.content-center {
-  align-content: center;
-}
-.content-start {
-  align-content: flex-start;
-}
-.content-end {
-  align-content: flex-end;
-}
-.content-between {
-  align-content: space-between;
-}
-.content-around {
-  align-content: space-around;
-}
-.content-evenly {
-  align-content: space-evenly;
-}
-.content-baseline {
-  align-content: baseline;
-}
-.content-stretch {
-  align-content: stretch;
-}
-
-//Align items------------------------------------------------
-.items-start {
-  align-items: flex-start;
-}
-.items-end {
-  align-items: flex-end;
-}
-.items-center {
-  align-items: center;
-}
-.items-baseline {
-  align-items: baseline;
-}
-.items-stretch {
-  align-items: stretch;
-}
-
-//Align self---------------------------------------------------
-.self-auto {
-  align-self: auto;
-}
-.self-start {
-  align-self: flex-start;
-}
-.self-end {
-  align-self: flex-end;
-}
-.self-center {
-  align-self: center;
-}
-.self-stretch {
-  align-self: stretch;
-}
-.self-baseline {
-  align-self: baseline;
-}