@drumee/ui-styles 1.0.0

package/src/vars/color.scss

@@ -0,0 +1,133 @@
+:root {
+
+  /*green color variants   */
+  --egreen: #18a3ac;
+  --egreen-dark: #16959e;
+  --egreen-light: #5DBEC4;
+  --egreen-soft: #18AC72;
+  --egreen-watergreen: #32d89a;
+  --egreen-soft-light: #45CC97;
+
+  /*green color variants */
+
+  /*gray color variants */
+  --egrey-3d: #d3d3d3;
+  --egrey-d8: #152235;
+  --egrey-26: #262626;
+  --egrey-2f: #2F2F2F;
+  --egrey-3f: #3F3F3F;
+  --egrey-4a: #4A4A4A;
+  --egrey-49: #494949;
+  --egrey-6d: #6D8096;
+  --egrey-62: #626262;
+  --egrey-78: #787B7F;
+  --egrey-89: #89929E;
+  --egrey-b6: #B6BFCA;
+  --egrey-3c: #cecece;
+  --egrey-b7: #b7cedd;
+  --egrey-f1: #EFF0F1;
+  --egrey-e8: #DDE2E8;
+  --egrey-d6: #D6D6D6;
+  --egrey-b8: #b8b8b8;
+  --egrey-8d: #d8d8d8;
+  --white-f2: #f2f2f2;
+
+  /*gray color variants */
+
+  /*orange color variants */
+  --eorange: #FA8540;
+  --eorange-crusta: #FA8A48;
+  --eorange-light: #F99B64;
+  --eorange-dark: #FF7479;
+  --eorange-sunset: #EA4D44;
+  --orange-lighter: #f87c59;
+  --orange-carrot: #EF6500;
+  --orange-sunsetorange: #fd635b;
+
+  /*orange color variants */
+
+  /*white color variants */
+  --white: #FFFFFF;
+  --ewhite: #FFFFFF;
+  --white-fb: #FBFBFB;
+  --white-f2: #F2F2F2;
+  --white-f6: #F1F1F6;
+  --white-f7: #F7F7F7;
+  --white-f8: #F8FAFC;
+  --white-f9: #F7F7F9;
+  /*white color variants */
+
+  /*violet color variants */
+  --eviolet: #879BFF;
+  --eviolet-dark: #476390;
+  --eviolet-light: #6a85ff;
+  /*violet color variants */
+
+  /*mauve color variants*/
+  --emauve: #C647D5;
+  --emauve-light: #E86CFF;
+  --emauve-lighter: #d66fe8;
+  --emauve-dark: #ab47bc;
+  /*mauve color variants*/
+
+  /*pink color variants */
+  --drumee-pink: #FF3466;
+  --epink: #FF4578;
+  /*pink color variants */
+
+  /*blue color variants */
+  --eblue: #4A90E2;
+  --blue-midnight: #000099;
+  --ultramarine: #1F0E93;
+  --blue: #1D8AEA; //#1E81F9;
+  --blue-light: #68B4FF; //#57A7FF;
+  /*blue color variants */
+
+  /*red color variants */
+  --red-brick: #D23244;
+  /*red color variants */
+
+
+  /************************************************************
+                        NEW COLORS
+************************************************************/
+
+  --drumee-pink: #ff3466;
+  --darker-pink: #f32855;
+  --navy-color: #00495c;
+  /* main background*/
+
+  /** main-colors **/
+  --main-pink: #d02c54;
+  --gradient-left: #004f64;
+  --gradient-right: #0a6277;
+  --main-blue: #0089db;
+  --main-green: #00c0a8;
+  --main-yellow: #fdd835;
+  /** main-colors **/
+
+  /*additional-colors**/
+  --add-pink: --drumee-pink;
+  --add-blue: #329cf8;
+  --add-green: #04dec2;
+  --add-grey: #7d97a2;
+  --add-light-grey: #b7cedd;
+  --dark-blue: #003e4f;
+  --add-yellow: #beba48;
+  --add-soft-green: #008c14;
+  --add-orange: #e0984e;
+  --add-soft-blue: #00b1d0;
+  /*additional-colors**/
+
+  /**grey add colors**/
+  --main-grey: #787878;
+  /**grey add colors**/
+
+  /**insert block**/
+  --main-bg: --navy-color;
+  /* main bbackground*/
+
+  --btn-secondary: --btn-rollback-text;
+  --btn-rollback-text-hover: #879BFF;
+
+}

package/src/vars/default.scss

@@ -0,0 +1,230 @@
+/************************************************************
+                        Drumee: colors used
+************************************************************/
+
+:root {
+  /** New default **/
+  --default-bg: #fff;
+  --default-bg-hover: #879BFF;
+  --default-bg-block: #f2f2f2;
+  --default-bg-error: #ea4d44;
+  --default-bg-caution: #ea4d44;
+  --default-bg-inactive: #89929e;
+  --default-bg-alert: #fd635b;
+  --bg-tooltips: #e8e8e8;
+  --bg-button-active: rgb(137 146 158 / 35%);
+
+  /**background-color**/
+  --default-background: #ffffff;
+  --default-background-hover: #879BFF;
+  --default-block-background: #f2f2f2;
+  --default-background-error: #ea4d44;
+  --default-background-caution: #ea4d44;
+  --default-background-inactive: #89929e;
+  --default-scrollbar-color: rgba(250, 133, 64, 0.6);
+  --default-transparent-bg: hsla(0, 0%, 78.4%, 0.5);
+  --background-tooltips: #e8e8e8;
+  --default-background-alert: #fd635b;
+  --button-background-active: rgb(137 146 158 / 35%);
+  --background-chatmessenger: #f9f9f9;
+  --multimedia-background: #262626;
+  --dock-notification: #1D8AEA;
+  --background-invitation-success: #18A3AC;
+
+  --default-transparent-black: rgb(0 0 0 / 33%);
+  --transparency-container-overlay: rgb(137 146 158 / 40%);
+
+  /**text-color**/
+  --default-text-color: #2F2F2F;
+  --tertiary-text-color: #89929e;
+  --secondary-text-color: #4a90e2;
+  --backgroundless-text-hover: #879bff;
+  --default-text-hover: #ffffff;
+  --default-text-reverse: #ffffff;
+  --default-text-title: #4a90e2;
+  --default-text-placeholder: #D0D0D0;
+  --focus-text-placeholder: #4a90e2;
+  --default-text-error: #ea4d44;
+  --default-text-caution: #ea4d44;
+  --default-text-alert: #fd635b;
+  --default-text-inactive: #89929e;
+  --default-text-success: #18A3AC;
+  --security-text-color: #fd635b;
+  --default-text-tooltips: #2F2F2F;
+  --default-text-notification: #ffffff;
+  --neutral-text-notification: #626262;
+
+  /**icon**/
+  --default-user-icon: #B6BFCA;
+  --background-user-icon: hsla(0, 0%, 78.4%, .5);
+  --transparent-background-desktop-icon: hsla(0, 0%, 78.4%, .5);
+  --default-icon-neutral: #89929e;
+  --special-icon-setting: rgb(252 252 252 / 70%);
+  --default-icon-reverse: #ffffff;
+  --default-icon-hover: #879bff;
+  --default-icon-active: #879bff;
+  --default-icon-success: #18A3AC;
+  --default-thinline-icon: #B6BFCA;
+  --default-thinline-icon-hover: #7891ff;
+  --special-tag-note-chat: #1187f6;
+  --default-icon-menu-dropdown: #879bff;
+  --contact-online-color: #32d89a;
+  --special-icon-emoji: #fa8540;
+  --special-schedule-icon: #EF6500;
+  --button-accept: #18AC72;
+
+  /** border **/
+  --default-entry-border-bottom: #dde2e8;
+  --default-border-error: #ff7479;
+  --default-separator: rgb(182 191 202 / 30%);
+  --focus-border-placeholder: #4a90e2;
+  --default-border-success: #18A3AC;
+  --default-window-header-search: hsla(0, 0%, 100%, .33);
+  --default-frame: #b6bfca;
+  --border-no-discussion: #dde2e8;
+  --default-border-alert: #fd635b;
+  --default-border-notification: rgb(137 146 158 / 70%);
+  --default-border-caution: #EA4D44;
+  --default-border-popup: #dde2e8;
+
+  /** toggle**/
+  --toggle-switch-on: #879BFF;
+  --toggle-switch-off: rgb(137 146 158 / 50%);
+  --toggle-switch-radio: #4040FF;
+  --toggle-background: rgb(137 146 158 / 35%);
+
+  /** checkbox **/
+  --default-checkbox-border: #879bff;
+  --default-checkbox-checked: rgb(64 64 255 / 70%);
+  --default-checkbox-background: #ffffff;
+  --checkbox-checked-reverse: #ffffff;
+  --checkbox-checked-border-reverse: #ffffff;
+
+  --default-radio-active: rgb(64 64 255 / 70%) --desk-scrollbar-color: rgba(250, 133, 64, 0.6);
+  --default-scrollbar-color: rgba(250, 133, 64, 0.6);
+  --desk-scrollbar-color: --default-scrollbar-color;
+
+  --x-small-width: 361px;
+  --small-width: 650px;
+  --medium-width: 990px;
+  --tablet-width: --medium-width;
+
+  --btn-rollback-text: #89929e;
+  --btn-rollback-background: #ffffff;
+  --btn-rollback-border: #DDE2E8;
+  --btn-rollback-border-hover: #879BFF;
+  --btn-rollback-text-hover: #879BFF;
+
+  // var(--btn-commit-background:
+  --btn-caution-text: #FFFFFF;
+  --btn-caution-backgroundless-text: #FF7479;
+  --btn-caution-background: #FF7479;
+  --btn-caution-border: #FF7479;
+  --btn-caution-border-hover: #ea4d44;
+  --btn-caution-text-hover: #ea4d44;
+  --btn-caution-background-hover: #ea4d44;
+
+  --btn-commit-text: #FFFFFF;
+  --btn-commit-backgroundless-text: #18A3AC;
+  --btn-commit-background: #18A3AC;
+  --btn-commit-border: #18A3AC;
+  --btn-commit-border-hover: #16959e;
+  --btn-commit-text-hover: #16959e;
+  --btn-commit-background-hover: #16959e;
+
+  /************************ progress **********************/
+  --progress-line-text: #879bff;
+  --progress-line-background: #879bff;
+  --progress-line-border: #879bff;
+  --progress-line-border-hover: #879bff;
+
+  --progress-circle-text: #879bff;
+  --progress-circle-background: #879bff;
+  --progress-circle-border: #879bff;
+  --progress-circle-border-hover: #879bff;
+
+  /************************ default **********************/
+  --main-default-text: var(--default-text-color);
+  --main-default-typo: var(--default-text-color);
+  --main-default-border: #89929e;
+  --main-caution-text: var(--default-text-caution);
+  --main-caution-typo: var(--default-text-caution);
+
+  --main-caution-border: #FF7479;
+  --main-caution-background: #FFFFFF;
+
+  /************************ toggle state **********************/
+  --state-0-text: #2F2F2F;
+  --state-0-typo: #2F2F2F;
+  --state-0-border: #89929e;
+  --state-0-background: #FFFFFF;
+  --state-1-typo: #18A3AC;
+  --state-1-text: #FFFFFF;
+  --state-1-border: #18A3AC;
+  --state-1-background: #18A3AC;
+
+
+  /************************ popup **********************/
+  --popup-text: #89929e;
+  --popup-typo: var(--popup-text);
+  --popup-background: #FFFFFF;
+
+  /* *********** checkbox************** */
+  --checkbox-unselected-color: var(--state-0-typo);
+  --checkbox-selected-color: var(--state-1-typo);
+
+    --btn-primary-color: var(--btn-commit-text);
+  --btn-primary-background: var(--btn-commit-background);
+  --btn-primary-border: var(--btn-commit-border);
+  --btn-primary-border-hover: var(--btn-commit-border-hover);
+  --btn-primary-color-hover: var(--btn-commit-text-hover);
+  --btn-primary-background-hover: var(--btn-commit-background-hover);
+
+  --btn-secondary-color: var(--btn-rollback-text);
+  --btn-secondary-border: var(--btn-rollback-border);
+  --btn-secondary-background: var(--btn-rollback-background);
+  --btn-secondary-border-hover: var(--btn-rollback-border-hover);
+  --btn-secondary-color-hover: var(--btn-rollback-text-hover);
+
+  --btn-tertiary-color: var(--btn-caution-text);
+  --btn-tertiary-background: var(--btn-caution-background);
+  --btn-tertiary-border: var(--btn-caution-border);
+  --btn-tertiary-border-hover: var(--btn-caution-border-hover);
+  --btn-tertiary-color-hover: #ea4d44;
+  --btn-tertiary-background-hover: var(--btn-caution-background-hover);
+
+  --text-btn-accept: var(--default-text-reverse);
+  --btn-rollback-text: #89929e;
+  --btn-rollback-text-hover: #879BFF;
+  --btn-signup: #18AC73;
+
+  /*background*/
+  --btn-accept: #18AC72;
+  --btn-commit: #18a3ac;
+
+  --btn-commit-background-hover: #16959e;
+  --btn-signup-background-hover: #18AC72;
+
+  --btn-delete-background: #ff7479;
+  --btn-delete-background-hover: #f3595f;
+  --btn-delete-border-hover: #16959e;
+
+  /*border*/
+
+  --action-btn-border-color: #FFFFFF;
+  --btn-commit-border-hover: #16959e;
+  --btn-rollback-border: #DDE2E8;
+  --btn-rollback-border-hover: #879BFF;
+  --btn-signup-border-hover: #18AC72;
+
+  /*shadow*/
+  --btn-box-shadow: rgb(169 186 255 / 50%);
+  --btn-cancel-box-shadow: rgb(168 255 255 / 50%);
+
+  /* ******* switch ******/
+  --switch-toggle-on: #18AC72;
+  --switch-toggle-off: #4A4A4A;
+  --switch-toggle-background: var(--toggle-background);
+  --switch-radion-toggle: #18AC72;
+
+}

package/src/vars/font.scss

@@ -0,0 +1,19 @@
+:root {
+  --font-light: "Armin Grotesk", sans-serif;
+  --font-light-italic: "Armin Grotesk", sans-serif;
+  --font-main: "Armin Grotesk", sans-serif;
+  --font-italic: "Armin Grotesk", sans-serif;
+  --font-medium: "Armin Grotesk", sans-serif;
+  --font-medium-italic: "Armin Grotesk", sans-serif;
+  --font-bold: "Armin Grotesk", sans-serif;
+  --font-bold-italic: "Armin Grotesk", sans-serif;
+
+  --main-typo-light: --font-light;
+  --main-typo: --font-main;
+  --main-typo-medium: --font-medium;
+  --main-typo-bold: --font-bold;
+  --main-typo-light-italic: --font-light-italic;
+  --main-typoitalic: --font-italic;
+  --main-typo-medium-italic: --font-medium-italic;
+  --main-typo-bold-italic: --font-bold-italic;
+}

package/src/vars/index.scss

@@ -0,0 +1,7 @@
+@forward './font';
+@forward './borders';
+@forward './box-shadow';
+@forward './color';
+@forward './default';
+@forward './revamp';
+@forward './z-index';

package/src/vars/revamp.scss

@@ -0,0 +1,140 @@
+:root {
+  /* Value */
+  /* number */
+  --corner-radius-0: 0rem;
+  --corner-radius-1: 0.25rem;
+  --corner-radius-2: 0.375rem;
+  --corner-radius-3: 0.5rem;
+  --corner-radius-4: 0.75rem;
+  --corner-radius-5: 1rem;
+  --corner-radius-6: 1.5rem;
+  --corner-radius-7: 2rem;
+  --corner-radius-max: 62.5rem;
+  --spacer-0: 0rem;
+  --spacer-1: 0.125rem;
+  --spacer-2: 0.25rem;
+  --spacer-3: 0.5rem;
+  --spacer-4: 0.75rem;
+  --spacer-5: 1rem;
+  --spacer-6: 1.5rem;
+  --spacer-7: 2rem;
+  --spacer-8: 2.5rem;
+  --spacer-9: 3rem;
+  --spacer-10: 4rem;
+  --spacer-11: 5rem;
+  --spacer-12: 6rem;
+  --spacer-13: 7rem;
+  --spacer-14: 9rem;
+  --spacer-15: 10rem;
+}
+
+/* Color primitives */
+:root {
+  /* HEX */
+  /* color */
+  --blue-100: #b9e8ff;
+  --blue-200: #89dcff;
+  --blue-300: #52c8ff;
+  --blue-400: #2aaaff;
+  --blue-500: #168efd;
+  --blue-600: #0c74e9;
+  --blue-700: #115cbc;
+  --blue-800: #144f94;
+  --blue-900: #11315a;
+  --gray-100: #f6f6f6;
+  --gray-200: #e7e7e7;
+  --gray-300: #d1d1d1;
+  --gray-400: #b0b0b0;
+  --gray-500: #888888;
+  --gray-600: #5d5d5d;
+  --gray-700: #4f4f4f;
+  --gray-800: #3d3d3d;
+  --gray-900: #303030;
+  --gray-black: #050505;
+  --gray-white: #ffffff;
+  --green-100: #a7f3c5;
+  --green-200: #6ee7a6;
+  --green-300: #34d382;
+  --green-400: #10b667;
+  --green-500: #059654;
+  --green-600: #047846;
+  --green-700: #065f39;
+  --green-800: #064e31;
+  --green-900: #022c1c;
+  --indigo-100: #c2cdff;
+  --indigo-200: #9cabff;
+  --indigo-300: #757eff;
+  --indigo-400: #5756ff;
+  --indigo-500: #4636f5;
+  --indigo-600: #3c2ad8;
+  --indigo-700: #3125ae;
+  --indigo-800: #2c2689;
+  --indigo-900: #1c1650;
+  --mint-100: #8bfff6;
+  --mint-200: #49fff2;
+  --mint-300: #10d7ce;
+  --mint-400: #00d1cb;
+  --mint-500: #00a9a7;
+  --mint-600: #008686;
+  --mint-700: #05696a;
+  --mint-800: #0a5657;
+  --mint-900: #003436;
+  --neutral-100: #f4f4f6;
+  --neutral-200: #ebecf0;
+  --neutral-300: #dddfe4;
+  --neutral-400: #c3c6cc;
+  --neutral-50: #f9f9fa;
+  --neutral-500: #afb3bb;
+  --neutral-600: #8c929c;
+  --neutral-700: #5b616d;
+  --neutral-800: #414651;
+  --neutral-900: #222732;
+  --neutral-950: #0a0c11;
+  --orange-100: #ffdfa5;
+  --orange-200: #ffc76d;
+  --orange-300: #ffa332;
+  --orange-400: #ff870a;
+  --orange-500: #f36900;
+  --orange-600: #cc4f02;
+  --orange-700: #a13d0b;
+  --orange-800: #82350c;
+  --orange-900: #461804;
+  --pink-100: #ffcbf3;
+  --pink-200: #ffa0e7;
+  --pink-300: #e864cb;
+  --pink-400: #ff65d5;
+  --pink-500: #fc23b8;
+  --pink-600: #ed159f;
+  --pink-700: #ce0880;
+  --pink-800: #aa0a69;
+  --pink-900: #570034;
+  --primary-100: #f4e7ff;
+  --primary-200: #ebd4ff;
+  --primary-300: #dcb2ff;
+  --primary-400: #c781ff;
+  --primary-50: #fbf5ff;
+  --primary-500: #b251fb;
+  --primary-600: #9821ee;
+  --primary-700: #881dd3;
+  --primary-800: #731dac;
+  --primary-900: #5e198a;
+  --primary-950: #410467;
+  --red-100: #ffdde4;
+  --red-200: #ff94aa;
+  --red-300: #ff6785;
+  --red-400: #ff5779;
+  --red-500: #ff2350;
+  --red-600: #f50032;
+  --red-700: #d7002c;
+  --red-800: #a90225;
+  --red-900: #500010;
+  --yellow-100: #fffd86;
+  --yellow-200: #fff441;
+  --yellow-300: #ffe50d;
+  --yellow-400: #e6c100;
+  --yellow-500: #d19d00;
+  --yellow-600: #a67102;
+  --yellow-700: #89570a;
+  --yellow-800: #74470f;
+  --yellow-900: #442504;
+}

package/src/vars/z-index.scss

@@ -0,0 +1,14 @@
+:root {
+  --z-index-lowest: -3;
+  --z-index-lower: -1;
+  --z-index-normal: 1;
+  --z-index-high: 200;
+  --z-index-higher: 1000;
+  --z-index-draft: --z-index-higher;
+  --z-index-context: 50000;
+  --always-visible: 50010;
+  --z-index-context-upper: 50010;
+  --z-index-preview: 80000;
+  --z-index-modal: 100000;
+  --z-index-highest: 200000;
+}