monkey-style-guide-v2 0.0.5 → 0.0.7

package/assets/scss/directives/_index.scss

@@ -0,0 +1,7 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+**************************/
+
+@import 'styles';

package/assets/scss/directives/_styles.scss

@@ -0,0 +1,100 @@
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+monkey-label {
+  color: var(--mecx-color-gray-900);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.42px;
+
+  .mecx-disabled & {
+    color: var(--mecx-color-gray-400);
+  }
+}
+
+monkey-helper {
+  color: var(--mecx-color-gray-500);
+  text-align: right;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.42px;
+
+  .mecx-disabled & {
+    color: var(--mecx-color-gray-400);
+  }
+}
+
+monkey-prefix {
+  color: var(--mecx-color-gray-700);
+  font-size: 22px;
+  font-weight: normal;
+
+  .mk-i {
+    display: flex;
+  }
+
+  .mecx-disabled & {
+    color: var(--mecx-color-gray-400) !important;
+    pointer-events: none;
+  }
+}
+
+monkey-suffix {
+  color: var(--mecx-color-theme-main);
+  font-size: 22px;
+  font-weight: normal;
+  cursor: pointer;
+
+  .mk-i {
+    display: flex;
+  }
+
+  .mecx-disabled & {
+    color: var(--mecx-color-gray-400) !important;
+    pointer-events: none;
+  }
+}
+
+monkey-info {
+  color: var(--mecx-color-gray-700);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.42px;
+  display: flex;
+
+  .mecx-disabled & {
+    color: var(--mecx-color-gray-400) !important;
+    pointer-events: none;
+  }
+}
+
+monkey-error {
+  color: var(--mecx-color-error-700);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.42px;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  transform: translateY(-9px);
+  animation: slideDown 150ms ease-out forwards;
+  transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes slideDown {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/assets/scss/input/_index.scss

@@ -0,0 +1,7 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+**************************/
+
+@import 'styles';

package/assets/scss/input/_styles.scss

@@ -0,0 +1,43 @@
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+.mecx-input {
+  border: none;
+  width: 100%;
+
+  &::placeholder {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    color: var(--mecx-color-gray-400) !important;
+
+    &::placeholder {
+      color: var(--mecx-color-gray-400) !important;
+    }
+  }
+}
+
+input[type='date'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  position: relative;
+}
+
+input[type='date']::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+input[type='date']::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}

package/assets/scss/partials/_index.scss

@@ -0,0 +1,7 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import 'style-reset';
+@import 'variables';

package/assets/scss/partials/_style-reset.scss

@@ -0,0 +1,189 @@
+/*
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+Twitter: @rich_clark
+*/
+
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+body {
+  line-height: 1;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+nav ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+a {
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+  background-color: #ff9;
+  color: #000;
+  text-decoration: none;
+}
+
+/* change colours to suit your needs */
+mark {
+  background-color: #ff9;
+  color: #000;
+  font-style: italic;
+  font-weight: bold;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+abbr[title],
+dfn[title] {
+  border-bottom: 1px dotted;
+  cursor: help;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* change border colour to suit your needs */
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #cccccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+input,
+select {
+  vertical-align: middle;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}
+
+button:focus,
+button:active,
+button:hover {
+  outline: none;
+}
+
+button {
+  border: none;
+}

package/assets/scss/partials/_variables.scss

@@ -0,0 +1,178 @@
+/**************************
+ * 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: #fff,
+  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-warning: (
+  main: var(--mecx-color-warning-main),
+  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),
+  contrast: (
+    main: var(--mecx-color-warning-contrast-main),
+    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)
+  )
+);
+$mecx-question: (
+  main: var(--mecx-color-question-main),
+  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),
+  contrast: (
+    main: var(--mecx-color-question-contrast-main),
+    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)
+  )
+);
+$mecx-success: (
+  main: var(--mecx-color-success-main),
+  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),
+  contrast: (
+    main: var(--mecx-color-success-contrast-main),
+    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)
+  )
+);
+$mecx-error: (
+  main: var(--mecx-color-error-main),
+  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),
+  contrast: (
+    main: var(--mecx-color-error-contrast-main),
+    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)
+  )
+);
+$mecx-gray: (
+  50: #f8fafb,
+  100: #f1f2f3,
+  200: #e9eaec,
+  300: #d3d6da,
+  400: #bdc1c7,
+  500: #868d98,
+  600: #676e79,
+  700: #545a63,
+  800: #2f3237,
+  900: #1f2024
+);
+$mecx-align: ('left', 'center', 'right', 'justify');
+$mecx-sizes: (
+  base: 14px,
+  xxs: 14px,
+  xs: 16px,
+  sm: 18px,
+  md: 20px,
+  lg: 24px,
+  xl: 32px,
+  xxl: 40px
+);
+$mecx-lh: (
+  base: 1.6,
+  tight: 16px,
+  med: 24px,
+  dist: 32px,
+  super: 40px,
+  hiper: 48px
+);
+$mecx-weight: (
+  regular: 400,
+  medium: 500,
+  bold: 700
+);
+$mecx-spaces: (
+  xs: 8px,
+  small: 12px,
+  medium: 16px,
+  cozy: 24px
+);

package/assets/scss/table/_index.scss

@@ -0,0 +1,7 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+**************************/
+
+@import 'styles';

package/assets/scss/table/_styles.scss

@@ -0,0 +1,45 @@
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+.mecx-table {
+  width: 100%;
+  min-width: 400px;
+  height: 100%;
+  border-collapse: separate;
+
+  /*thead {
+    text-align: start;
+    width: 100%;
+    background: var(--mecx-color-gray-50);
+    position: sticky;
+    top: 0;
+    z-index: 3;
+  }
+
+  th {
+    text-align: start;
+    background: var(--mecx-color-gray-50);
+    border-bottom: 2px solid var(--mecx-color-gray-300);
+    padding: 16px 12px;
+  }
+
+  td {
+    text-align: start;
+    padding: 16px 12px;
+    border-bottom: 2px solid var(--mecx-color-gray-100);
+  }
+
+  tbody {
+    position: relative;
+    z-index: 2;
+
+    tr {
+      &:hover {
+        background: var(--mecx-color-gray-100);
+      }
+    }
+  }*/
+}

package/assets/scss/theme.scss

@@ -0,0 +1,11 @@
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+@import './partials';
+@import './typography';
+@import './input';
+@import './directives';
+@import './table';

package/assets/scss/typography/_function.scss

@@ -0,0 +1,23 @@
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+@import '../partials/variables';
+
+@function f-size($key) {
+  @return map-get($mecx-sizes, $key);
+}
+
+@function f-lh($key) {
+  @return map-get($mecx-lh, $key);
+}
+
+@function f-weight($key) {
+  @return map-get($mecx-weight, $key);
+}
+
+@function f-cl-gray($key) {
+  @return map-get($mecx-gray, $key);
+}

package/assets/scss/typography/_index.scss

@@ -0,0 +1,9 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+**************************/
+
+@import 'styles';
+@import 'mixins';
+@import 'function';