mis-crystal-design-system 18.0.21-test-1 → 18.0.22

package/styles/mis-color-constants.scss

@@ -0,0 +1,149 @@
+//   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;
+
+: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};
+}

package/styles/mis-flex.scss

@@ -0,0 +1,321 @@
+//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;
+}

package/styles/mis-fonts.scss

@@ -0,0 +1,124 @@
+.h1 {
+    font-size: 40px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 48px;
+}
+.h2 {
+    font-size: 32px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 40px;
+}
+.h3 {
+    font-size: 28px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 36px;
+}
+.h4 {
+    font-size: 24px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 32px;
+}
+.h5-b {
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 0.25px;
+    line-height: 28px;
+}
+.h5 {
+    font-size: 20px;
+    font-weight: 400;
+    letter-spacing: 0.15px;
+    line-height: 28px;
+}
+.h6-b{
+    font-size: 16px; 
+    font-weight: 700;
+    letter-spacing: 0px;
+    line-height: 24px;
+}
+.h6{
+    font-size: 16px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 24px;
+}
+.p {
+    font-size: 16px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 180%;
+}
+.h7-b {
+    font-size: 14px; 
+    font-weight: 700;
+    letter-spacing: 0.25px;
+    line-height: 20px;
+}
+.h7 {
+    font-size: 14px; 
+    font-weight: 400;
+    letter-spacing: 0.2px;
+    line-height: 20px;
+}
+
+.h8-b {
+    font-size: 12px; 
+    font-weight: 700;
+    letter-spacing: 0.25px;
+    line-height: 18px;
+}
+.h8 {
+    font-size: 12px; 
+    font-weight: 400;
+    letter-spacing: 0.2px;
+    line-height: 18px;
+}
+.h9 {
+    font-size: 10px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 15px;
+}
+
+//button fonts ------------------------------------------------------------------
+
+.btn-lg-b {
+    font-size: 16px; 
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    line-height: 24px;
+}
+.btn-lg {
+    font-size: 16px; 
+    font-weight: 400;
+    letter-spacing: 0.2px;
+    line-height: 24px;
+}
+.btn-sm {
+    font-size: 14px; 
+    font-weight: 400;
+    letter-spacing: 0.25px;
+    line-height: 20px;
+}
+.btn-link {
+    font-size: 16px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 24px;
+}
+.display-1 {
+    font-size: 48px; 
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 56px;
+}
+.display-2 {
+    font-size: 14px; 
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    line-height: 20px;
+}