monkey-style-guide 2.0.170 → 2.0.171

package/assets/scss/partials/_typography.scss

@@ -1,149 +1,149 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import 'variables.scss';
-
-* {
-  font-family: $mecx-font-name, arial, sans-serif;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-
-button {
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 16px;
-  text-align: center;
-}
-
-p,
-.p {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 19px;
-}
-
-h4,
-.h4 {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 23px;
-}
-
-h3,
-.h3 {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 28px;
-}
-
-h2,
-.h2 {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 34px;
-  line-height: 38px;
-}
-
-h1,
-.h1 {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 40;
-  line-height: 46px;
-}
-
-.text-italic {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-size: 16px;
-  font-style: italic;
-}
-
-.text-semibold {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-weight: 600;
-  font-size: 16px;
-}
-
-.text-bold {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-weight: 700;
-  font-size: 16px;
-}
-
-.text-strong {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-weight: 800;
-  font-size: 16px;
-}
-
-.text-cap {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-size: 16px;
-  text-transform: capitalize;
-}
-
-.text-lowercase {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-size: 16px;
-  text-transform: lowercase;
-}
-
-.text-uppercase {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  font-size: 16px;
-  text-transform: uppercase;
-}
-
-.text-boxed {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  border-radius: 2px;
-  padding: 4px 8px;
-  margin: 0 8px;
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.text-truncate {
-  color: map-get($mecx-theme, main);
-  font-family: $mecx-font-name, arial, sans-serif;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.text-nowrap {
-  white-space: nowrap;
-}
-
-.text-muted {
-  color: #c5c5c5;
-  font-family: $mecx-font-name, arial, sans-serif;
-}
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import 'variables.scss';
+
+* {
+  font-family: $mecx-font-name, arial, sans-serif;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+button {
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+}
+
+p,
+.p {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 19px;
+}
+
+h4,
+.h4 {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 23px;
+}
+
+h3,
+.h3 {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 28px;
+}
+
+h2,
+.h2 {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 34px;
+  line-height: 38px;
+}
+
+h1,
+.h1 {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 40;
+  line-height: 46px;
+}
+
+.text-italic {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-size: 16px;
+  font-style: italic;
+}
+
+.text-semibold {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.text-bold {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.text-strong {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-weight: 800;
+  font-size: 16px;
+}
+
+.text-cap {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-size: 16px;
+  text-transform: capitalize;
+}
+
+.text-lowercase {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-size: 16px;
+  text-transform: lowercase;
+}
+
+.text-uppercase {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+
+.text-boxed {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  border-radius: 2px;
+  padding: 4px 8px;
+  margin: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.text-truncate {
+  color: map-get($mecx-theme, main);
+  font-family: $mecx-font-name, arial, sans-serif;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.text-muted {
+  color: #c5c5c5;
+  font-family: $mecx-font-name, arial, sans-serif;
+}

package/assets/scss/partials/_variables.scss

@@ -1,184 +1,184 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-$mecx-theme: (
-  main: var(--mecx-color-theme-main),
-  50: #ffffff,
-  100: var(--mecx-color-theme-100),
-  200: var(--mecx-color-theme-200),
-  300: var(--mecx-color-theme-300),
-  400: var(--mecx-color-theme-400),
-  500: var(--mecx-color-theme-500),
-  600: var(--mecx-color-theme-600),
-  700: var(--mecx-color-theme-700),
-  800: var(--mecx-color-theme-800),
-  900: var(--mecx-color-theme-900),
-  A100: var(--mecx-color-theme-A100),
-  A200: var(--mecx-color-theme-A200),
-  A400: var(--mecx-color-theme-A400),
-  A700: var(--mecx-color-theme-A700),
-  contrast: (
-    main: var(--mecx-color-theme-contrast-main),
-    50: var(--mecx-color-theme-contrast-50),
-    100: var(--mecx-color-theme-contrast-100),
-    200: var(--mecx-color-theme-contrast-200),
-    300: var(--mecx-color-theme-contrast-300),
-    400: var(--mecx-color-theme-contrast-400),
-    500: var(--mecx-color-theme-contrast-500),
-    600: var(--mecx-color-theme-contrast-600),
-    700: var(--mecx-color-theme-contrast-700),
-    800: var(--mecx-color-theme-contrast-800),
-    900: var(--mecx-color-theme-contrast-900),
-    A100: var(--mecx-color-theme-contrast-A100),
-    A200: var(--mecx-color-theme-contrast-A200),
-    A400: var(--mecx-color-theme-contrast-A400),
-    A700: var(--mecx-color-theme-contrast-A700),
-  ),
-);
-
-$mecx-dark-primary-text: #000000;
-$mecx-light-primary-text: #f8f8f8;
-
-$mecx-error: (
-  main: var(--mecx-color-error-main),
-  50: #ffffff,
-  100: var(--mecx-color-error-100),
-  200: var(--mecx-color-error-200),
-  300: var(--mecx-color-error-300),
-  400: var(--mecx-color-error-400),
-  500: var(--mecx-color-error-500),
-  600: var(--mecx-color-error-600),
-  700: var(--mecx-color-error-700),
-  800: var(--mecx-color-error-800),
-  900: var(--mecx-color-error-900),
-  A100: var(--mecx-color-error-A100),
-  A200: var(--mecx-color-error-A200),
-  A400: var(--mecx-color-error-A400),
-  A700: var(--mecx-color-error-A700),
-  contrast: (
-    main: var(--mecx-color-error-contrast-main),
-    50: var(--mecx-color-error-contrast-50),
-    100: var(--mecx-color-error-contrast-100),
-    200: var(--mecx-color-error-contrast-200),
-    300: var(--mecx-color-error-contrast-300),
-    400: var(--mecx-color-error-contrast-400),
-    500: var(--mecx-color-error-contrast-500),
-    600: var(--mecx-color-error-contrast-600),
-    700: var(--mecx-color-error-contrast-700),
-    800: var(--mecx-color-error-contrast-800),
-    900: var(--mecx-color-error-contrast-900),
-    A100: var(--mecx-color-error-contrast-A100),
-    A200: var(--mecx-color-error-contrast-A200),
-    A400: var(--mecx-color-error-contrast-A400),
-    A700: var(--mecx-color-error-contrast-A700),
-  ),
-);
-
-$mecx-warning: (
-  main: var(--mecx-color-warning-main),
-  50: #ffffff,
-  100: var(--mecx-color-warning-100),
-  200: var(--mecx-color-warning-200),
-  300: var(--mecx-color-warning-300),
-  400: var(--mecx-color-warning-400),
-  500: var(--mecx-color-warning-500),
-  600: var(--mecx-color-warning-600),
-  700: var(--mecx-color-warning-700),
-  800: var(--mecx-color-warning-800),
-  900: var(--mecx-color-warning-900),
-  A100: var(--mecx-color-warning-A100),
-  A200: var(--mecx-color-warning-A200),
-  A400: var(--mecx-color-warning-A400),
-  A700: var(--mecx-color-warning-A700),
-  contrast: (
-    main: var(--mecx-color-warning-contrast-main),
-    50: var(--mecx-color-warning-contrast-50),
-    100: var(--mecx-color-warning-contrast-100),
-    200: var(--mecx-color-warning-contrast-200),
-    300: var(--mecx-color-warning-contrast-300),
-    400: var(--mecx-color-warning-contrast-400),
-    500: var(--mecx-color-warning-contrast-500),
-    600: var(--mecx-color-warning-contrast-600),
-    700: var(--mecx-color-warning-contrast-700),
-    800: var(--mecx-color-warning-contrast-800),
-    900: var(--mecx-color-warning-contrast-900),
-    A100: var(--mecx-color-warning-contrast-A100),
-    A200: var(--mecx-color-warning-contrast-A200),
-    A400: var(--mecx-color-warning-contrast-A400),
-    A700: var(--mecx-color-warning-contrast-A700),
-  ),
-);
-
-$mecx-success: (
-  main: var(--mecx-color-success-main),
-  50: #ffffff,
-  100: var(--mecx-color-success-100),
-  200: var(--mecx-color-success-200),
-  300: var(--mecx-color-success-300),
-  400: var(--mecx-color-success-400),
-  500: var(--mecx-color-success-500),
-  600: var(--mecx-color-success-600),
-  700: var(--mecx-color-success-700),
-  800: var(--mecx-color-success-800),
-  900: var(--mecx-color-success-900),
-  A100: var(--mecx-color-success-A100),
-  A200: var(--mecx-color-success-A200),
-  A400: var(--mecx-color-success-A400),
-  A700: var(--mecx-color-success-A700),
-  contrast: (
-    main: var(--mecx-color-success-contrast-main),
-    50: var(--mecx-color-success-contrast-50),
-    100: var(--mecx-color-success-contrast-100),
-    200: var(--mecx-color-success-contrast-200),
-    300: var(--mecx-color-success-contrast-300),
-    400: var(--mecx-color-success-contrast-400),
-    500: var(--mecx-color-success-contrast-500),
-    600: var(--mecx-color-success-contrast-600),
-    700: var(--mecx-color-success-contrast-700),
-    800: var(--mecx-color-success-contrast-800),
-    900: var(--mecx-color-success-contrast-900),
-    A100: var(--mecx-color-success-contrast-A100),
-    A200: var(--mecx-color-success-contrast-A200),
-    A400: var(--mecx-color-success-contrast-A400),
-    A700: var(--mecx-color-success-contrast-A700),
-  ),
-);
-
-$mecx-question: (
-  main: var(--mecx-color-question-main),
-  50: #ffffff,
-  100: var(--mecx-color-question-100),
-  200: var(--mecx-color-question-200),
-  300: var(--mecx-color-question-300),
-  400: var(--mecx-color-question-400),
-  500: var(--mecx-color-question-500),
-  600: var(--mecx-color-question-600),
-  700: var(--mecx-color-question-700),
-  800: var(--mecx-color-question-800),
-  900: var(--mecx-color-question-900),
-  A100: var(--mecx-color-question-A100),
-  A200: var(--mecx-color-question-A200),
-  A400: var(--mecx-color-question-A400),
-  A700: var(--mecx-color-question-A700),
-  contrast: (
-    main: var(--mecx-color-question-contrast-main),
-    50: var(--mecx-color-question-contrast-50),
-    100: var(--mecx-color-question-contrast-100),
-    200: var(--mecx-color-question-contrast-200),
-    300: var(--mecx-color-question-contrast-300),
-    400: var(--mecx-color-question-contrast-400),
-    500: var(--mecx-color-question-contrast-500),
-    600: var(--mecx-color-question-contrast-600),
-    700: var(--mecx-color-question-contrast-700),
-    800: var(--mecx-color-question-contrast-800),
-    900: var(--mecx-color-question-contrast-900),
-    A100: var(--mecx-color-question-contrast-A100),
-    A200: var(--mecx-color-question-contrast-A200),
-    A400: var(--mecx-color-question-contrast-A400),
-    A700: var(--mecx-color-question-contrast-A700),
-  ),
-);
-
-$mecx-font-name: var(--mecx-font-name);
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+$mecx-theme: (
+  main: var(--mecx-color-theme-main),
+  50: #ffffff,
+  100: var(--mecx-color-theme-100),
+  200: var(--mecx-color-theme-200),
+  300: var(--mecx-color-theme-300),
+  400: var(--mecx-color-theme-400),
+  500: var(--mecx-color-theme-500),
+  600: var(--mecx-color-theme-600),
+  700: var(--mecx-color-theme-700),
+  800: var(--mecx-color-theme-800),
+  900: var(--mecx-color-theme-900),
+  A100: var(--mecx-color-theme-A100),
+  A200: var(--mecx-color-theme-A200),
+  A400: var(--mecx-color-theme-A400),
+  A700: var(--mecx-color-theme-A700),
+  contrast: (
+    main: var(--mecx-color-theme-contrast-main),
+    50: var(--mecx-color-theme-contrast-50),
+    100: var(--mecx-color-theme-contrast-100),
+    200: var(--mecx-color-theme-contrast-200),
+    300: var(--mecx-color-theme-contrast-300),
+    400: var(--mecx-color-theme-contrast-400),
+    500: var(--mecx-color-theme-contrast-500),
+    600: var(--mecx-color-theme-contrast-600),
+    700: var(--mecx-color-theme-contrast-700),
+    800: var(--mecx-color-theme-contrast-800),
+    900: var(--mecx-color-theme-contrast-900),
+    A100: var(--mecx-color-theme-contrast-A100),
+    A200: var(--mecx-color-theme-contrast-A200),
+    A400: var(--mecx-color-theme-contrast-A400),
+    A700: var(--mecx-color-theme-contrast-A700),
+  ),
+);
+
+$mecx-dark-primary-text: #000000;
+$mecx-light-primary-text: #f8f8f8;
+
+$mecx-error: (
+  main: var(--mecx-color-error-main),
+  50: #ffffff,
+  100: var(--mecx-color-error-100),
+  200: var(--mecx-color-error-200),
+  300: var(--mecx-color-error-300),
+  400: var(--mecx-color-error-400),
+  500: var(--mecx-color-error-500),
+  600: var(--mecx-color-error-600),
+  700: var(--mecx-color-error-700),
+  800: var(--mecx-color-error-800),
+  900: var(--mecx-color-error-900),
+  A100: var(--mecx-color-error-A100),
+  A200: var(--mecx-color-error-A200),
+  A400: var(--mecx-color-error-A400),
+  A700: var(--mecx-color-error-A700),
+  contrast: (
+    main: var(--mecx-color-error-contrast-main),
+    50: var(--mecx-color-error-contrast-50),
+    100: var(--mecx-color-error-contrast-100),
+    200: var(--mecx-color-error-contrast-200),
+    300: var(--mecx-color-error-contrast-300),
+    400: var(--mecx-color-error-contrast-400),
+    500: var(--mecx-color-error-contrast-500),
+    600: var(--mecx-color-error-contrast-600),
+    700: var(--mecx-color-error-contrast-700),
+    800: var(--mecx-color-error-contrast-800),
+    900: var(--mecx-color-error-contrast-900),
+    A100: var(--mecx-color-error-contrast-A100),
+    A200: var(--mecx-color-error-contrast-A200),
+    A400: var(--mecx-color-error-contrast-A400),
+    A700: var(--mecx-color-error-contrast-A700),
+  ),
+);
+
+$mecx-warning: (
+  main: var(--mecx-color-warning-main),
+  50: #ffffff,
+  100: var(--mecx-color-warning-100),
+  200: var(--mecx-color-warning-200),
+  300: var(--mecx-color-warning-300),
+  400: var(--mecx-color-warning-400),
+  500: var(--mecx-color-warning-500),
+  600: var(--mecx-color-warning-600),
+  700: var(--mecx-color-warning-700),
+  800: var(--mecx-color-warning-800),
+  900: var(--mecx-color-warning-900),
+  A100: var(--mecx-color-warning-A100),
+  A200: var(--mecx-color-warning-A200),
+  A400: var(--mecx-color-warning-A400),
+  A700: var(--mecx-color-warning-A700),
+  contrast: (
+    main: var(--mecx-color-warning-contrast-main),
+    50: var(--mecx-color-warning-contrast-50),
+    100: var(--mecx-color-warning-contrast-100),
+    200: var(--mecx-color-warning-contrast-200),
+    300: var(--mecx-color-warning-contrast-300),
+    400: var(--mecx-color-warning-contrast-400),
+    500: var(--mecx-color-warning-contrast-500),
+    600: var(--mecx-color-warning-contrast-600),
+    700: var(--mecx-color-warning-contrast-700),
+    800: var(--mecx-color-warning-contrast-800),
+    900: var(--mecx-color-warning-contrast-900),
+    A100: var(--mecx-color-warning-contrast-A100),
+    A200: var(--mecx-color-warning-contrast-A200),
+    A400: var(--mecx-color-warning-contrast-A400),
+    A700: var(--mecx-color-warning-contrast-A700),
+  ),
+);
+
+$mecx-success: (
+  main: var(--mecx-color-success-main),
+  50: #ffffff,
+  100: var(--mecx-color-success-100),
+  200: var(--mecx-color-success-200),
+  300: var(--mecx-color-success-300),
+  400: var(--mecx-color-success-400),
+  500: var(--mecx-color-success-500),
+  600: var(--mecx-color-success-600),
+  700: var(--mecx-color-success-700),
+  800: var(--mecx-color-success-800),
+  900: var(--mecx-color-success-900),
+  A100: var(--mecx-color-success-A100),
+  A200: var(--mecx-color-success-A200),
+  A400: var(--mecx-color-success-A400),
+  A700: var(--mecx-color-success-A700),
+  contrast: (
+    main: var(--mecx-color-success-contrast-main),
+    50: var(--mecx-color-success-contrast-50),
+    100: var(--mecx-color-success-contrast-100),
+    200: var(--mecx-color-success-contrast-200),
+    300: var(--mecx-color-success-contrast-300),
+    400: var(--mecx-color-success-contrast-400),
+    500: var(--mecx-color-success-contrast-500),
+    600: var(--mecx-color-success-contrast-600),
+    700: var(--mecx-color-success-contrast-700),
+    800: var(--mecx-color-success-contrast-800),
+    900: var(--mecx-color-success-contrast-900),
+    A100: var(--mecx-color-success-contrast-A100),
+    A200: var(--mecx-color-success-contrast-A200),
+    A400: var(--mecx-color-success-contrast-A400),
+    A700: var(--mecx-color-success-contrast-A700),
+  ),
+);
+
+$mecx-question: (
+  main: var(--mecx-color-question-main),
+  50: #ffffff,
+  100: var(--mecx-color-question-100),
+  200: var(--mecx-color-question-200),
+  300: var(--mecx-color-question-300),
+  400: var(--mecx-color-question-400),
+  500: var(--mecx-color-question-500),
+  600: var(--mecx-color-question-600),
+  700: var(--mecx-color-question-700),
+  800: var(--mecx-color-question-800),
+  900: var(--mecx-color-question-900),
+  A100: var(--mecx-color-question-A100),
+  A200: var(--mecx-color-question-A200),
+  A400: var(--mecx-color-question-A400),
+  A700: var(--mecx-color-question-A700),
+  contrast: (
+    main: var(--mecx-color-question-contrast-main),
+    50: var(--mecx-color-question-contrast-50),
+    100: var(--mecx-color-question-contrast-100),
+    200: var(--mecx-color-question-contrast-200),
+    300: var(--mecx-color-question-contrast-300),
+    400: var(--mecx-color-question-contrast-400),
+    500: var(--mecx-color-question-contrast-500),
+    600: var(--mecx-color-question-contrast-600),
+    700: var(--mecx-color-question-contrast-700),
+    800: var(--mecx-color-question-contrast-800),
+    900: var(--mecx-color-question-contrast-900),
+    A100: var(--mecx-color-question-contrast-A100),
+    A200: var(--mecx-color-question-contrast-A200),
+    A400: var(--mecx-color-question-contrast-A400),
+    A700: var(--mecx-color-question-contrast-A700),
+  ),
+);
+
+$mecx-font-name: var(--mecx-font-name);