@globalbrain/sefirot 0.67.0 → 0.68.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [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

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/SInputBase.vue

@@ -78,6 +78,28 @@ export default defineComponent({
   }
 }
 
+.SInputBase.small {
+  .label {
+    padding-bottom: 8px;
+    font-size: 14px;
+  }
+
+  .help-text {
+    padding-top: 4px;
+  }
+}
+
+.SInputBase.medium {
+  .label {
+    padding-bottom: 8px;
+    font-size: 14px;
+  }
+
+  .help-text {
+    padding-top: 4px;
+  }
+}
+
 .SInputBase.has-error {
   .label {
     color: var(--c-danger);
@@ -86,10 +108,8 @@ export default defineComponent({
 
 .label {
   display: block;
-  padding-bottom: 10px;
   width: 100%;
   line-height: 16px;
-  font-size: 14px;
   font-weight: 500;
   color: var(--input-label);
   cursor: pointer;

package/lib/components/SInputNumber.vue

@@ -9,6 +9,7 @@
     :help="help"
     type="number"
     :placeholder="placeholder"
+    :align="align"
     :text="text"
     :text-after="textAfter"
     :action="action"
@@ -36,7 +37,7 @@
 import { defineComponent, computed, PropType } from '@vue/composition-api'
 import { isNullish } from '../support/Util'
 import { Validation } from '../validation/Validation'
-import SInputText, { Size, Mode, Color, Action } from './SInputText.vue'
+import SInputText, { Size, Mode, Align, Color, Action } from './SInputText.vue'
 
 export default defineComponent({
   components: {
@@ -51,6 +52,7 @@ export default defineComponent({
     note: { type: String, default: null },
     help: { type: String, default: null },
     placeholder: { type: String, default: null },
+    align: { type: String as PropType<Align>, default: null },
     text: { type: String, default: null },
     textAfter: { type: String, default: null },
     action: { type: Object as PropType<Action>, default: null },

package/lib/components/SInputRadio.vue

@@ -68,14 +68,14 @@ export default defineComponent({
 
   &:hover {
     .box {
-      border-color: var(--c-black);
+      border-color: var(--c-text-1);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-black);
+    border-color: var(--c-text-1);
     box-shadow: var(--shadow-depth-3);
   }
 
@@ -87,7 +87,7 @@ export default defineComponent({
 
 .box {
   position: relative;
-  border: 2px solid var(--c-gray-dark-1);
+  border: 2px solid var(--c-text-3);
   border-radius: 50%;
   width: 18px;
   height: 18px;
@@ -105,7 +105,7 @@ export default defineComponent({
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-black);
+  background-color: var(--c-text-1);
   opacity: 0;
   transform: scale(0);
   transition: opacity .25s, transform .1s;
@@ -116,5 +116,6 @@ export default defineComponent({
   padding-left: 12px;
   line-height: 20px;
   font-size: 14px;
+  font-weight: 500;
 }
 </style>