@globalbrain/sefirot 0.65.0 → 0.68.0

package/CHANGELOG.md

@@ -1,3 +1,52 @@
+# [0.68.0](https://github.com/globalbrain/sefirot/compare/v0.67.0...v0.68.0) (2021-10-25)
+
+### Bug Fixes
+
+* **modal:** fix open method not working correctly ([23d8321](https://github.com/globalbrain/sefirot/commit/23d832198dbb23df225bcd89c69f6b30e5d2ea47))
+* **modal:** interface type ([289f6f1](https://github.com/globalbrain/sefirot/commit/289f6f1ea912d0c603e0fecde1ee1a1ae495b4bd))
+* **tooltip:** set timeout when it hides tooltip ([#104](https://github.com/globalbrain/sefirot/issues/104)) ([b07df61](https://github.com/globalbrain/sefirot/commit/b07df61a322388634a8584d6186e62e76249a49f))
+
+### Features
+
+* **button:** add dark mode support ([ed5129d](https://github.com/globalbrain/sefirot/commit/ed5129d354099a142b0972ed202eb7944842e716))
+* **icon:** add 'more-vertical' and 'grab' icons ([#102](https://github.com/globalbrain/sefirot/issues/102)) ([facba32](https://github.com/globalbrain/sefirot/commit/facba32ee670620c0da67166901ba2c51b001b93))
+* **input-radio:** add dark mode support ([f2bcea7](https://github.com/globalbrain/sefirot/commit/f2bcea7d9e4f21c96c7701133c70407c866a050c))
+* **input-text:** add alignment option for text input and number input ([#103](https://github.com/globalbrain/sefirot/issues/103)) ([07ccfd1](https://github.com/globalbrain/sefirot/commit/07ccfd11f72c9eeff8db2feee422734ca01864df))
+* **input-text:** add small size and dark mode support ([14a2b10](https://github.com/globalbrain/sefirot/commit/14a2b10e6fdc98f70b80b289a46fcfa1c39d9336))
+* **input-textarea:** add dark mode support ([d124ab4](https://github.com/globalbrain/sefirot/commit/d124ab4f0ba3307cbad3ec407dfaaa0cdbb48ecc))
+* **modal:** accept component in useModal argument ([5be1176](https://github.com/globalbrain/sefirot/commit/5be1176a0618e8bd156f7719ed3dc19b68f022d1))
+* **modal:** close modal when clicking on content area ([afcd5c7](https://github.com/globalbrain/sefirot/commit/afcd5c7d6f34a329147889d205a784c941ad6eff))
+* **sheet:** add SSheet component ([f98c204](https://github.com/globalbrain/sefirot/commit/f98c2046e57a47c05f174a2313ae39300a78823d))
+
+# [0.67.0](https://github.com/globalbrain/sefirot/compare/v0.66.0...v0.67.0) (2021-09-23)
+
+### Bug Fixes
+
+* **input-number:** fix `0` value not showing correctly ([c90a6ab](https://github.com/globalbrain/sefirot/commit/c90a6abc51060dabedce25b2f4ada6d315668077))
+
+### Features
+
+* **icon:** add more icons ([6463401](https://github.com/globalbrain/sefirot/commit/646340107d8d5bedd3b3ffcbb861d2c1de80a919))
+* **input:** add error message option to inputs ([db7d5d6](https://github.com/globalbrain/sefirot/commit/db7d5d6df1c24f4cd4be5a1e184ebda87326d58c))
+* **input-text:** add `color` prop to input text and number ([#99](https://github.com/globalbrain/sefirot/issues/99)) ([f8ff9a2](https://github.com/globalbrain/sefirot/commit/f8ff9a2e00bcfc2ea2f6c704d337a425b83caa11))
+* **input-number:** add option to show separator when focus is out ([#97](https://github.com/globalbrain/sefirot/issues/97)) ([5db99c8](https://github.com/globalbrain/sefirot/commit/5db99c85bea471256f1eb6884052f8a2741ec4eb))
+* **input-textarea:** add `small` size ([645f446](https://github.com/globalbrain/sefirot/commit/645f4460ea461d4cb03be9da01768051fcb0ae5a))
+* **input-ymd:** add YMD input component ([648c496](https://github.com/globalbrain/sefirot/commit/648c496482a5561497488a6442c902fbb4cffce9))
+* **dialog:** add dark mode support ([9fb8276](https://github.com/globalbrain/sefirot/commit/9fb827684e0dda6743df33635ca54392d43df804))
+* **snackbar:** add dark mode support ([03180c7](https://github.com/globalbrain/sefirot/commit/03180c7ffeb8d8f69f75558ea8415e37a3a93262))
+
+# [0.66.0](https://github.com/globalbrain/sefirot/compare/v0.65.1...v0.66.0) (2021-09-17)
+
+### Features
+
+* **validation:** add `every` rule ([4b3ddec](https://github.com/globalbrain/sefirot/commit/4b3ddec79b8fc570a76ae62f5b0f5eaffe0c499c))
+
+## [0.65.1](https://github.com/globalbrain/sefirot/compare/v0.65.0...v0.65.1) (2021-09-13)
+
+### Bug Fixes
+
+* **button-group:** the height of each button groups is incorrect ([#96](https://github.com/globalbrain/sefirot/issues/96)) ([1303925](https://github.com/globalbrain/sefirot/commit/1303925d255df6c34d26a129d9ebc3d7145804ac))
+
 # [0.65.0](https://github.com/globalbrain/sefirot/compare/v0.64.0...v0.65.0) (2021-08-18)
 
 ### Features

package/README.md

@@ -1,20 +1,8 @@
-<p align="center">
-  <img width="128" src="https://github.com/globalbrain/sefirot/raw/master/logo-sefirot.png" alt="Sefirot">
-</p>
-
-<h1 align="center">Sefirot</h1>
-
-<p align="center">
-  <a href="https://github.com/globalbrain/sefirot/actions">
-    <img src="https://github.com/globalbrain/sefirot/workflows/Test/badge.svg" alt="GitHub Actions">
-  </a>
-  <a href="https://codecov.io/gh/globalbrain/sefirot">
-    <img src="https://codecov.io/gh/globalbrain/sefirot/branch/master/graph/badge.svg" alt="codecov">
-  </a>
-  <a href="https://github.com/globalbrain/sefirot/blob/master/LICENSE.md">
-    <img src="https://img.shields.io/npm/l/@globalbrain/sefirot.svg" alt="License">
-  </a>
-</p>
+# Sefirot
+
+[![GitHub Actions](https://github.com/globalbrain/sefirot/workflows/Test/badge.svg)](https://github.com/globalbrain/sefirot/actions)
+[![Codecov](https://codecov.io/gh/globalbrain/sefirot/branch/master/graph/badge.svg)](https://codecov.io/gh/globalbrain/sefirot)
+[![License](https://img.shields.io/npm/l/@globalbrain/sefirot.svg)](https://github.com/globalbrain/sefirot/blob/master/LICENSE.md)
 
 Sefirot is a collection of Vue Components for Global Brain Design System. Components are meant to be clean, sophisticated, and scalable.
 

package/lib/assets/styles/variables.css

@@ -1,5 +1,345 @@
-@import "./variables/colors";
-@import "./variables/easings";
-@import "./variables/shadows";
-@import "./variables/typography";
-@import "./variables/z-indexes";
+/**
+ * Colors Base
+ *
+ * These are the pure base color presets. Most of the time, you should not be
+ * using these colors directly in the theme but rather use "Colors Theme"
+ * instead because those are "Theme (light or dark)" dependant.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --c-white: #ffffff;
+  --c-white-soft: #fafafa;
+  --c-white-mute: #f2f2f2;
+
+  --c-black: #000000;
+  --c-black-deep: #171717;
+  --c-black-soft: #1c1c1e;
+  --c-black-mute: #2c2c2e;
+
+  --c-black-elevated: #1c1c1e;
+  --c-black-elevated-soft: #2c2c2e;
+  --c-black-elevated-mute: #3a3a3c;
+
+  --c-gray: #8E8E93;
+
+  --c-gray-dark-1: #636366;
+  --c-gray-dark-2: #48484a;
+  --c-gray-dark-3: #3a3a3c;
+  --c-gray-dark-4: #2c2c2e;
+  --c-gray-dark-5: #1c1c1e;
+
+  --c-gray-light-1: #aeaeb2;
+  --c-gray-light-2: #c7c7cc;
+  --c-gray-light-3: #d1d1d6;
+  --c-gray-light-4: #e5e5ea;
+  --c-gray-light-5: #f2f2f7;
+
+  --c-divider-light-1: rgba(60, 60, 67, .29);
+  --c-divider-light-2: rgba(60, 60, 67, .12);
+
+  --c-divider-dark-1: rgba(84, 84, 88, .65);
+  --c-divider-dark-2: rgba(84, 84, 88, .65);
+
+  --c-text-light-1: var(--c-black);
+  --c-text-light-2: rgba(60, 60, 67, .6);
+  --c-text-light-3: rgba(60, 60, 67, .3);
+  --c-text-light-4: rgba(60, 60, 67, .18);
+
+  --c-text-dark-1: var(--c-white);
+  --c-text-dark-2: rgba(235, 235, 245, .6);
+  --c-text-dark-3: rgba(235, 235, 245, .3);
+  --c-text-dark-4: rgba(235, 235, 245, .18);
+
+  --c-info: #3b8eed;
+  --c-info-light: #549ced;
+  --c-info-lighter: #50a2ff;
+  --c-info-dark: #3468a3;
+  --c-info-darker: #255489;
+
+  --c-success: #00b489;
+  --c-success-light: #0fcea0;
+  --c-success-lighter: #27e8ba;
+  --c-success-dark: #068f6e;
+  --c-success-darker: #086b53;
+
+  --c-warning: #ffc517;
+  --c-warning-light: #ffe417;
+  --c-warning-lighter: #ffff17;
+  --c-warning-dark: #e0ad15;
+  --c-warning-darker: #bc9112;
+  --c-warning-bg: rgba(255, 197, 23, .1);
+
+  --c-danger: #ed3c50;
+  --c-danger-light: #f43771;
+  --c-danger-lighter: #fd1d7c;
+  --c-danger-dark: #cd2d3f;
+  --c-danger-darker: #ab2131;
+
+  --c-alternative: #de41e0;
+  --c-alternative-light: #e936eb;
+  --c-alternative-lighter: #f616f8;
+  --c-alternative-dark: #823c83;
+  --c-alternative-darker: #602960;
+}
+
+/**
+ * Colors Theme
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --c-bg: var(--c-white);
+  --c-bg-soft: var(--c-white-soft);
+  --c-bg-mute: var(--c-white-mute);
+
+  --c-divider: var(--c-divider-light-1);
+  --c-divider-light: var(--c-divider-light-2);
+
+  --c-text-1: var(--c-text-light-1);
+  --c-text-2: var(--c-text-light-2);
+  --c-text-3: var(--c-text-light-3);
+  --c-text-4: var(--c-text-light-4);
+
+  --c-text-inverse-1: var(--c-text-dark-1);
+  --c-text-inverse-2: var(--c-text-dark-2);
+  --c-text-inverse-3: var(--c-text-dark-3);
+  --c-text-inverse-4: var(--c-text-dark-4);
+}
+
+.dark-mode {
+  --c-bg: var(--c-black-deep);
+  --c-bg-soft: var(--c-black-soft);
+  --c-bg-mute: var(--c-black-mute);
+
+  --c-divider: var(--c-divider-dark-1);
+  --c-divider-light: var(--c-divider-dark-2);
+
+  --c-text-1: var(--c-text-dark-1);
+  --c-text-2: var(--c-text-dark-2);
+  --c-text-3: var(--c-text-dark-3);
+  --c-text-4: var(--c-text-dark-4);
+
+  --c-text-inverse-1: var(--c-text-light-1);
+  --c-text-inverse-2: var(--c-text-light-2);
+  --c-text-inverse-3: var(--c-text-light-3);
+  --c-text-inverse-4: var(--c-text-light-4);
+}
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --font-family-base: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-primary: "interstate", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-number: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-mono: "source-code-pro", "Menlo", "Monaco", "Consolas", "Courier New", monospace;
+}
+
+/**
+ * Shadows
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --shadow-depth-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
+  --shadow-depth-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
+  --shadow-depth-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
+  --shadow-depth-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
+  --shadow-depth-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);
+}
+
+/**
+ * Z Indexes
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --z-index-tooltip: 1000;
+  --z-index-dropdown: 2000;
+  --z-index-screen: 3000;
+  --z-index-backdrop: 4000;
+  --z-index-modal: 4100;
+  --z-index-snackbar: 5000;
+}
+
+/**
+ * Easings
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
+  --ease-in-back: cubic-bezier(1, -.75, 1, 1);
+
+  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
+  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
+  --ease-out-back: cubic-bezier(.175, .885, .320, 1.275);
+  --ease-out-back-quint: cubic-bezier(.175, .885, .280, 1.5);
+
+  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+}
+
+/**
+ * Component: Preloader
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --preloader-color: var(--c-black);
+}
+
+.dark-mode {
+  --preloader-color: var(--c-white);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --button-primary-text: var(--c-text-inverse-1);
+  --button-primary-bg: var(--c-black);
+  --button-primary-bg-hover: var(--c-gray-dark-4);
+  --button-primary-bg-focus: var(--c-gray-dark-3);
+  --button-primary-inverse-text: var(--c-text-1);
+  --button-primary-inverse-bg: var(--c-white);
+  --button-primary-inverse-bg-hover: var(--c-white-mute);
+  --button-primary-inverse-bg-focus: var(--c-gray-light-4);
+
+  --button-secondary-text: var(--c-text-1);
+  --button-secondary-border: var(--c-black);
+  --button-secondary-bg-hover: var(--c-white-mute);
+  --button-secondary-bg-focus: var(--c-gray-light-4);
+  --button-secondary-inverse-text: var(--c-text-inverse-1);
+  --button-secondary-inverse-border: var(--c-white);
+  --button-secondary-inverse-bg-hover: var(--c-gray-dark-4);
+  --button-secondary-inverse-bg-focus: var(--c-gray-dark-3);
+
+  --button-tertiary-text: var(--c-text-1);
+  --button-tertiary-bg: var(--c-white-mute);
+  --button-tertiary-bg-hover: var(--c-gray-light-4);
+  --button-tertiary-bg-focus: var(--c-gray-light-3);
+  --button-tertiary-inverse-text: var(--c-text-inverse-1);
+  --button-tertiary-inverse-bg: var(--c-black-mute);
+  --button-tertiary-inverse-bg-hover: var(--c-gray-dark-3);
+  --button-tertiary-inverse-bg-focus: var(--c-gray-dark-2);
+
+  --button-text-text: var(--c-text-1);
+  --button-text-bg-hover: var(--c-white-mute);
+  --button-text-bg-focus: var(--c-gray-light-4);
+  --button-text-inverse-text: var(--c-text-inverse-1);
+  --button-text-inverse-bg: var(--c-black-mute);
+  --button-text-inverse-bg-hover: var(--c-gray-dark-3);
+  --button-text-inverse-bg-focus: var(--c-gray-dark-2);
+
+  --button-mute-text: var(--c-text-2);
+  --button-mute-text-hover: var(--c-text-1);
+  --button-mute-bg-hover: var(--c-white-mute);
+  --button-mute-bg-focus: var(--c-gray-light-4);
+  --button-mute-inverse-text: var(--c-text-inverse-2);
+  --button-mute-inverse-text-hover: var(--c-text-inverse-1);
+  --button-mute-inverse-bg-hover: var(--c-gray-dark-3);
+  --button-mute-inverse-bg-focus: var(--c-gray-dark-2);
+}
+
+.dark-mode {
+  --button-primary-text: var(--c-text-inverse-1);
+  --button-primary-bg: var(--c-white);
+  --button-primary-bg-hover: var(--c-gray-light-3);
+  --button-primary-bg-focus: var(--c-gray-light-1);
+  --button-primary-inverse-text: var(--c-text-1);
+  --button-primary-inverse-bg: var(--c-black);
+  --button-primary-inverse-bg-hover: var(--c-gray-dark-4);
+  --button-primary-inverse-bg-focus: var(--c-gray-dark-3);
+
+  --button-secondary-border: var(--c-white);
+  --button-secondary-bg-hover: var(--c-black-mute);
+  --button-secondary-bg-focus: var(--c-gray-dark-3);
+  --button-secondary-inverse-text: var(--c-text-inverse-1);
+  --button-secondary-inverse-border: var(--c-white);
+  --button-secondary-inverse-bg-hover: var(--c-gray-dark-4);
+  --button-secondary-inverse-bg-focus: var(--c-gray-dark-3);
+
+  --button-tertiary-text: var(--c-text-1);
+  --button-tertiary-bg: var(--c-black-mute);
+  --button-tertiary-bg-hover: var(--c-gray-dark-3);
+  --button-tertiary-bg-focus: var(--c-gray-dark-1);
+  --button-tertiary-inverse-text: var(--c-text-inverse-1);
+  --button-tertiary-inverse-bg: var(--c-black-mute);
+  --button-tertiary-inverse-bg-hover: var(--c-gray-dark-3);
+  --button-tertiary-inverse-bg-focus: var(--c-gray-dark-2);
+
+  --button-text-text: var(--c-text-1);
+  --button-text-bg-hover: var(--c-black-mute);
+  --button-text-bg-focus: var(--c-gray-dark-3);
+  --button-text-inverse-text: var(--c-text-inverse-1);
+  --button-text-inverse-bg: var(--c-black-mute);
+  --button-text-inverse-bg-hover: var(--c-gray-dark-3);
+  --button-text-inverse-bg-focus: var(--c-gray-dark-2);
+
+  --button-mute-text: var(--c-text-2);
+  --button-mute-text-hover: var(--c-text-1);
+  --button-mute-bg-hover: var(--c-black-mute);
+  --button-mute-bg-focus: var(--c-gray-dark-3);
+  --button-mute-inverse-text: var(--c-text-inverse-2);
+  --button-mute-inverse-text-hover: var(--c-text-inverse-1);
+  --button-mute-inverse-bg-hover: var(--c-gray-dark-3);
+  --button-mute-inverse-bg-focus: var(--c-gray-dark-2);
+}
+
+/**
+ * Component: Inputs
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --input-label: var(--c-text-1);
+  --input-note: var(--c-text-2);
+  --input-text: var(--c-text-1);
+  --input-placeholder: var(--c-text-3);
+
+  --input-filled-bg: var(--c-bg-mute);
+  --input-filled-bg-focus: var(--c-bg);
+  --input-filled-bg-disabled: var(--c-gray-light-4);
+
+  --input-outlined-bg-disabled: var(--c-white-mute);
+  --input-outlined-border: var(--c-divider);
+
+  --input-clear-bg-disabled: var(--c-white);
+
+  --input-focus-border: var(--c-black);
+  --input-focus-bg: var(--c-white);
+
+  --input-help: var(--c-text-2);
+
+  --input-action-filled-bg: var(--c-white-mute);
+  --input-action-filled-bg-hover: var(--c-gray-light-4);
+  --input-action-filled-bg-focus: var(--c-gray-light-3);
+
+  --input-action-outlined-bg: var(--c-white-mute);
+  --input-action-outlined-border: var(--c-divider);
+  --input-action-outlined-bg-hover: var(--c-gray-light-4);
+  --input-action-outlined-bg-focus: var(--c-gray-light-3);
+}
+
+.dark-mode {
+  --input-focus-border: var(--c-gray);
+}
+
+/**
+ * Component: Card
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --card-bg: var(--c-white);
+  --card-bg-mute: var(--c-white-soft);
+  --card-shadow-depth-1: var(--shadow-depth-1);
+  --card-shadow-depth-2: var(--shadow-depth-2);
+  --card-shadow-depth-3: var(--shadow-depth-3);
+  --card-shadow-depth-4: var(--shadow-depth-4);
+  --card-shadow-depth-5: var(--shadow-depth-5);
+}
+
+/**
+ * Component: Dropdown
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --dropdown-item-hover-bg: var(--c-white-soft);
+}

package/lib/components/SButton.vue

@@ -14,7 +14,7 @@
 
     <transition name="fade">
       <span v-if="loading" key="loading" class="loader">
-        <component :is="preloaderComponent" class="loader-icon" />
+        <SIconPreloader class="loader-icon" />
       </span>
     </transition>
   </component>
@@ -22,12 +22,15 @@
 
 <script lang="ts">
 import { PropType, defineComponent, computed } from '@vue/composition-api'
-import SIconPreloaderDark from './icons/SIconPreloaderDark.vue'
-import SIconPreloaderLight from './icons/SIconPreloaderLight.vue'
+import SIconPreloader from './icons/SIconPreloader.vue'
 
 type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 
 export default defineComponent({
+  components: {
+    SIconPreloader
+  },
+
   props: {
     label: { type: String, default: null },
     tag: { type: String, default: 'button' },
@@ -57,33 +60,12 @@ export default defineComponent({
       { disabled: props.disabled }
     ])
 
-    const preloaderComponent = computed(() => {
-      if (props.mode !== 'neutral') {
-        return SIconPreloaderLight
-      }
-
-      if (!props.inverse && props.type === 'primary') {
-        return SIconPreloaderLight
-      }
-
-      if (!props.inverse && props.type !== 'primary') {
-        return SIconPreloaderDark
-      }
-
-      if (props.inverse && props.type === 'primary') {
-        return SIconPreloaderDark
-      }
-
-      return SIconPreloaderLight
-    })
-
     function handleClick(): void {
       !props.disabled && emit('click')
     }
 
     return {
       classes,
-      preloaderComponent,
       handleClick
     }
   }
@@ -115,6 +97,7 @@ export default defineComponent({
   &:active { background-color: var(--button-primary-bg-focus); }
 
   &.info {
+    color: var(--c-text-dark-1);
     background-color: var(--c-info);
 
     &:hover  { background-color: var(--c-info-dark); }
@@ -122,6 +105,7 @@ export default defineComponent({
   }
 
   &.success {
+    color: var(--c-text-dark-1);
     background-color: var(--c-success);
 
     &:hover  { background-color: var(--c-success-dark); }
@@ -129,6 +113,7 @@ export default defineComponent({
   }
 
   &.warning {
+    color: var(--c-text-dark-1);
     background-color: var(--c-warning);
 
     &:hover  { background-color: var(--c-warning-dark); }
@@ -136,6 +121,7 @@ export default defineComponent({
   }
 
   &.danger {
+    color: var(--c-text-dark-1);
     background-color: var(--c-danger);
 
     &:hover  { background-color: var(--c-danger-dark); }
@@ -209,6 +195,10 @@ export default defineComponent({
       &:active { background-color: var(--c-danger-darker); }
     }
   }
+
+  & .loader-icon >>> .bar {
+    fill: var(--c-text-inverse-1);
+  }
 }
 
 .SButton.secondary {
@@ -449,6 +439,10 @@ export default defineComponent({
   height: 40px;
   font-size: 13px;
 
+  .label {
+    transform: translateY(1px);
+  }
+
   .icon-svg {
     width: 16px;
     height: 16px;
@@ -481,7 +475,7 @@ export default defineComponent({
   font-size: 14px;
 
   .label {
-    transform: translateY(.5px);
+    transform: translateY(1px);
   }
 
   .icon-svg {
@@ -548,8 +542,8 @@ export default defineComponent({
 
 .SButton.loading {
   &.primary {
-    &:hover  { background-color: var(--c-black); }
-    &:active { background-color: var(--c-black); }
+    &:hover  { background-color: var(--button-primary-bg); }
+    &:active { background-color: var(--button-primary-bg); }
 
     &.info {
       &:hover  { background-color: var(--c-info-light); }
@@ -609,6 +603,7 @@ export default defineComponent({
   left: 50%;
   width: 32px;
   height: 32px;
+  color: var(--c-text-1);
   transform: translate(-50%, -50%);
   transition: opacity .25s, transform .25s;
 }

package/lib/components/SButtonGroup.vue

@@ -66,48 +66,66 @@ export default defineComponent({
   display: flex;
   border: 1px solid var(--c-divider);
   border-radius: 4px;
-  width: 100%;
   overflow: hidden;
 }
 
-.SButtonGroup.mini .button {
-  padding: 0 8px;
+.SButtonGroup.mini {
   height: 28px;
-  font-size: 12px;
-  font-weight: 500;
+
+  .button {
+    padding: 0 8px;
+    height: 28px;
+    font-size: 12px;
+    font-weight: 500;
+  }
 }
 
-.SButtonGroup.small .button {
-  padding: 0 10px;
+.SButtonGroup.small {
   height: 32px;
-  font-size: 12px;
-  font-weight: 500;
+
+  .button {
+    padding: 0 10px;
+    height: 32px;
+    font-size: 12px;
+    font-weight: 500;
+  }
 }
 
-.SButtonGroup.medium .button {
-  padding: 0 12px;
+.SButtonGroup.medium {
   height: 40px;
-  font-size: 13px;
-  font-weight: 500;
+
+  .button {
+    padding: 0 12px;
+    height: 40px;
+    font-size: 13px;
+    font-weight: 500;
+  }
 }
 
-.SButtonGroup.large .button {
-  padding: 0 14px;
+.SButtonGroup.large {
   height: 48px;
-  font-size: 14px;
-  font-weight: 500;
+
+  .button {
+    padding: 0 14px;
+    height: 48px;
+    font-size: 14px;
+    font-weight: 500;
+  }
 }
 
-.SButtonGroup.jumbo .button {
-  padding: 0 24px;
+.SButtonGroup.jumbo {
   height: 64px;
-  font-size: 14px;
-  font-weight: 500;
+
+  .button {
+    padding: 0 24px;
+    height: 64px;
+    font-size: 14px;
+    font-weight: 500;
+  }
 }
 
 .button {
   border-left: 1px solid transparent;
-  width: 100%;
   letter-spacing: .4px;
   color: var(--c-text-2);
   white-space: nowrap;

package/lib/components/SDialog.vue

@@ -5,7 +5,7 @@
 
     <div v-if="isTypeLoading" class="load">
       <div class="load-icon">
-        <SIconPreloaderDark class="load-svg" />
+        <SIconPreloader class="load-svg" />
       </div>
     </div>
 
@@ -25,12 +25,12 @@
 <script lang="ts">
 import { PropType, defineComponent, computed } from '@vue/composition-api'
 import { DialogType } from '../composables/Dialog'
-import SIconPreloaderDark from './icons/SIconPreloaderDark.vue'
+import SIconPreloader from './icons/SIconPreloader.vue'
 import SButton from './SButton.vue'
 
 export default defineComponent({
   components: {
-    SIconPreloaderDark,
+    SIconPreloader,
     SButton
   },
 
@@ -64,6 +64,7 @@ export default defineComponent({
 
 .SDialog {
   margin: 96px 16px;
+  border: 1px solid var(--c-divider-light);
   border-radius: 8px;
   padding: 16px 16px 8px;
   max-width: 392px;