@globalbrain/sefirot 0.70.1 → 0.73.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [0.73.0](https://github.com/globalbrain/sefirot/compare/v0.72.0...v0.73.0) (2022-02-24)
+
+### Bug Fixes
+
+* broken style on dark mode ([#110](https://github.com/globalbrain/sefirot/issues/110)) ([d667227](https://github.com/globalbrain/sefirot/commit/d667227bfce1ebce61cbe6fc0f420565c72a43ea))
+
+### Features
+
+* **icon:** add circle icon ([#118](https://github.com/globalbrain/sefirot/issues/118)) ([489cace](https://github.com/globalbrain/sefirot/commit/489cace7220b3e55c259817e2a17f26bc0dfa27d))
+* **icon:** add mail icon ([#116](https://github.com/globalbrain/sefirot/issues/116)) ([dcce170](https://github.com/globalbrain/sefirot/commit/dcce1703f389d0bcaf864ab846a8be675e16d1a6))
+
+# [0.72.0](https://github.com/globalbrain/sefirot/compare/v0.71.0...v0.72.0) (2021-12-01)
+
+### Features
+
+* **icon:** add `copy` icon ([#109](https://github.com/globalbrain/sefirot/issues/109)) ([a5dfd72](https://github.com/globalbrain/sefirot/commit/a5dfd726691baecc454efb7b14c9b0028305577b))
+* **input-select:** add `small` size and `nullable` option ([b416612](https://github.com/globalbrain/sefirot/commit/b416612e8c2881920499dc36deb7f7c2b74d9bd3))
+* **input-checkbox:** add size option to input checkbox ([cfddd90](https://github.com/globalbrain/sefirot/commit/cfddd9003685a4b4984f69bafaead92bc84219e3))
+
+# [0.71.0](https://github.com/globalbrain/sefirot/compare/v0.70.1...v0.71.0) (2021-11-18)
+
+### Features
+
+* **icon:** add `send` icon ([683a57a](https://github.com/globalbrain/sefirot/commit/683a57ad712952b1de122c35a8113cf8f1a738ee))
+
 ## [0.70.1](https://github.com/globalbrain/sefirot/compare/v0.70.0...v0.70.1) (2021-11-17)
 
 ### Bug Fixes

package/lib/assets/styles/variables.css

@@ -298,11 +298,12 @@
   --input-filled-bg-focus: var(--c-bg);
   --input-filled-bg-disabled: var(--c-gray-light-4);
 
+  --input-outlined-bg-focus: var(--c-bg);
   --input-outlined-bg-disabled: var(--c-white-mute);
   --input-outlined-border: var(--c-divider);
   --input-outlined-border-focus: var(--c-black);
 
-  --input-clear-bg-disabled: var(--c-white);
+  --input-clear-bg-disabled: var(--c-bg);
 
   --input-focus-border: var(--c-black);
   --input-focus-bg: var(--c-white);
@@ -323,6 +324,12 @@
   --input-outlined-bg-disabled: var(--c-black-mute);
   --input-outlined-border-focus: var(--c-gray);
 
+  --input-filled-bg-disabled: var(--c-gray-dark-3);
+
+  --input-action-outlined-bg: var(--c-black-mute);
+  --input-action-outlined-bg-hover: var(--c-gray-dark-3);
+  --input-action-outlined-bg-focus: var(--c-gray-dark-2);
+
   --input-focus-border: var(--c-gray);
 }
 
@@ -331,8 +338,8 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --card-bg: var(--c-white);
-  --card-bg-mute: var(--c-white-soft);
+  --card-bg: var(--c-bg);
+  --card-bg-mute: var(--c-bg-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);

package/lib/components/SGrid.vue

@@ -120,7 +120,7 @@ export default defineComponent({
     padding: 16px 12px 12px;
     font-size: 12px;
     font-weight: 700;
-    color: var(--c-text-light-2);
+    color: var(--c-text-2);
   }
 }
 
@@ -148,7 +148,7 @@ export default defineComponent({
     }
 
     &:hover {
-      background-color: var(--c-white-soft);
+      background-color: var(--c-bg-soft);
     }
 
     &.clickable {
@@ -162,7 +162,7 @@ export default defineComponent({
     padding: 0 12px;
     line-height: 20px;
     font-size: 14px;
-    color: var(--c-text-light-1);
+    color: var(--c-text-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -190,7 +190,7 @@ export default defineComponent({
     width: 100%;
     font-size: 12px;
     font-weight: 500;
-    color: var(--c-text-light-2);
+    color: var(--c-text-2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/lib/components/SInputCheckbox.vue

@@ -1,6 +1,7 @@
 <template>
   <SInputBase
     class="SInputCheckbox"
+    :class="[size]"
     :name="name"
     :label="label"
     :note="note"
@@ -27,6 +28,8 @@ import { Validation } from '../validation/Validation'
 import SIconCheck from './icons/SIconCheck.vue'
 import SInputBase from './SInputBase.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SIconCheck,
@@ -39,6 +42,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },
@@ -75,15 +79,15 @@ export default defineComponent({
 
   &:hover {
     .box {
-      border-color: var(--c-black);
+      border-color: var(--input-focus-border);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-black);
-    background-color: var(--c-black);
+    border-color: var(--c-text-1);
+    background-color: var(--c-text-1);
     box-shadow: var(--shadow-depth-3);
   }
 
@@ -117,7 +121,7 @@ export default defineComponent({
 .check-icon {
   width: 10px;
   height: 10px;
-  fill: var(--c-white);
+  fill: var(--c-text-inverse-1);
 }
 
 .text {

package/lib/components/SInputCheckboxes.vue

@@ -1,6 +1,7 @@
 <template>
   <SInputBase
     class="SInputCheckboxes"
+    :class="[size]"
     :name="name"
     :label="label"
     :note="note"
@@ -21,10 +22,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SInputBase,
@@ -37,6 +40,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputDate.vue

@@ -136,9 +136,13 @@ export default defineComponent({
   .input {
     background-color: var(--input-filled-bg);
 
+    &:hover {
+      border-color: var(--input-focus-border);
+    }
+
     &:focus {
       border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
+      background-color: var(--input-filled-bg-focus);
     }
   }
 
@@ -150,10 +154,14 @@ export default defineComponent({
 .SInputDate.outlined {
   .input {
     border-color: var(--input-outlined-border);
+    background-color: transparent;
+
+    &:hover {
+      border-color: var(--input-focus-border);
+    }
 
     &:focus {
       border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
     }
   }
 

package/lib/components/SInputRadio.vue

@@ -19,9 +19,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SInputBase
@@ -33,6 +35,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputRadios.vue

@@ -26,7 +26,7 @@ import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+type Size = 'mini' | 'small' | 'medium'
 
 export default defineComponent({
   components: {
@@ -40,7 +40,7 @@ export default defineComponent({
   },
 
   props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputSelect.vue

@@ -20,12 +20,12 @@
         @change="emitChange"
       >
         <option
-          v-if="placeholder"
-          value=""
+          v-if="placeholder || nullable"
+          :value="JSON.stringify({ value: null })"
           :selected="isNotSelected"
-          disabled
+          :disabled="!nullable"
         >
-          {{ placeholder }}
+          {{ placeholder || 'Please select' }}
         </option>
 
         <option
@@ -54,8 +54,8 @@ import SIconChevronUp from './icons/SIconChevronUp.vue'
 import SIconChevronDown from './icons/SIconChevronDown.vue'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'medium' | 'mini'
-type Mode = 'filled' | 'outlined'
+type Size = 'mini' | 'small' | 'medium'
+type Mode = 'outlined' | 'filled'
 
 interface Option {
   label: string
@@ -76,30 +76,29 @@ export default defineComponent({
   },
 
   props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    mode: { type: String as PropType<Mode>, default: 'filled' },
+    size: { type: String as PropType<Size>, default: 'small' },
+    mode: { type: String as PropType<Mode>, default: 'outlined' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },
     help: { type: String, default: null },
     placeholder: { type: String, default: null },
+    options: { type: Array as PropType<Option[]>, required: true },
+    nullable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     errorMessage: { type: Boolean, default: true },
-    options: { type: Array as PropType<Option[]>, required: true },
-    validation: { type: Object, default: null },
-    value: { type: [String, Number, Boolean], default: null }
+    value: { type: [String, Number, Boolean], default: null },
+    validation: { type: Object, default: null }
   },
 
   setup(props, { emit }) {
     const isFocused = ref(false)
 
-    const classes = computed(() => ({
-      medium: props.size === 'medium',
-      mini: props.size === 'mini',
-      filled: props.mode === 'filled',
-      outlined: props.mode === 'outlined',
-      disabled: props.disabled
-    }))
+    const classes = computed(() => [
+      props.size,
+      props.mode,
+      { disabled: props.disabled }
+    ])
 
     const isNotSelected = computed(() => {
       return props.value === undefined || props.value === null || props.value === ''
@@ -118,7 +117,7 @@ export default defineComponent({
     }
 
     function emitChange(e: SyntheticInputEvent): void {
-      props.validation && props.validation.$touch()
+      props.validation?.$touch()
 
       const option = JSON.parse(e.target.value)
 
@@ -158,6 +157,23 @@ export default defineComponent({
   }
 }
 
+.SInputSelect.small {
+  .box {
+    height: 40px;
+  }
+
+  .select {
+    padding: 7px 30px 5px 12px;
+    line-height: 24px;
+    font-size: 16px;
+  }
+
+  .icon {
+    top: 7px;
+    right: 10px;
+  }
+}
+
 .SInputSelect.medium {
   .box {
     height: 48px;

package/lib/components/SInputText.vue

@@ -518,7 +518,7 @@ export default defineComponent({
 
   .input-area:focus + .input {
     border-color: var(--input-focus-border);
-    background-color: var(--input-filled-bg-focus);
+    background-color: var(--input-outlined-bg-focus);
   }
 
   &.disabled .box:hover .input {

package/lib/components/SInputTextarea.vue

@@ -115,9 +115,13 @@ export default defineComponent({
   .input {
     background-color: var(--input-filled-bg);
 
+    &:hover {
+      border-color: var(--input-focus-border);
+    }
+
     &:focus {
       border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
+      background-color: var(--input-filled-bg-focus);
     }
   }
 
@@ -152,6 +156,7 @@ export default defineComponent({
 .SInputTextarea.clear {
   .input {
     padding: 0;
+    background-color: transparent;
   }
 
   &.disabled .input {

package/lib/components/SPlaceholderBlank.vue

@@ -3,7 +3,7 @@
     <transition name="fade">
       <div v-if="!loaded" class="loader">
         <div class="icon">
-          <SIconPreloaderDark class="icon-svg" />
+          <SIconPreloader class="icon-svg" />
         </div>
       </div>
     </transition>
@@ -16,11 +16,11 @@
 
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api'
-import SIconPreloaderDark from './icons/SIconPreloaderDark.vue'
+import SIconPreloader from './icons/SIconPreloader.vue'
 
 export default defineComponent({
   components: {
-    SIconPreloaderDark
+    SIconPreloader
   },
 
   props: {

package/lib/components/SSheetHeaderTitle.vue

@@ -11,7 +11,7 @@
   margin: 0;
   padding: 14px 16px 10px;
   line-height: 20px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
 }
 </style>

package/lib/components/SSheetMedium.vue

@@ -8,17 +8,7 @@
 @import "@/assets/styles/variables";
 
 .SSheetMedium {
-  padding: 24px 16px;
-
-  @media (min-width: 768px) {
-    padding: 24px;
-  }
-}
-
-.SSheet.small .SSheetMedium {
-  @media (min-width: 768px) {
-    padding: 24px 16px;
-  }
+  padding: 16px;
 }
 
 .SSheetMedium >>> h1 {

package/lib/components/SSnackbar.vue

@@ -11,7 +11,7 @@
         <SButton
           :type="action.type"
           :label="action.label"
-          inverse
+          :inverse="$colorMode.value === 'light'"
           @click="action.callback"
         />
       </div>

package/lib/components/icons/SIconCircle.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12,23A11,11,0,1,1,23,12,11,11,0,0,1,12,23ZM12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Z" />
+  </svg>
+</template>

package/lib/components/icons/SIconCopy.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M20,23H11a2.9,2.9,0,0,1-3-3V11a2.9,2.9,0,0,1,3-3h9a2.9,2.9,0,0,1,3,3v9A2.9,2.9,0,0,1,20,23ZM11,10a.9.9,0,0,0-1,1v9a.9.9,0,0,0,1,1h9a.9.9,0,0,0,1-1V11a.9.9,0,0,0-1-1Z" />
+    <path d="M5,16H4a2.9,2.9,0,0,1-3-3V4A2.9,2.9,0,0,1,4,1h9a2.9,2.9,0,0,1,3,3V5a1,1,0,0,1-2,0V4a.9.9,0,0,0-1-1H4A.9.9,0,0,0,3,4v9a.9.9,0,0,0,1,1H5a1,1,0,0,1,0,2Z" />
+  </svg>
+</template>

package/lib/components/icons/SIconMail.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M20,21H4a3,3,0,0,1-3-3V6A3,3,0,0,1,4,3H20a3,3,0,0,1,3,3V18A3,3,0,0,1,20,21ZM4,5A1,1,0,0,0,3,6V18a1,1,0,0,0,1,1H20a1,1,0,0,0,1-1V6a1,1,0,0,0-1-1Z" />
+    <path d="M12,14a1,1,0,0,1-.57-.18l-10-7A1,1,0,1,1,2.57,5.18L12,11.78l9.43-6.6a1,1,0,1,1,1.14,1.64l-10,7A1,1,0,0,1,12,14Z" />
+  </svg>
+</template>

package/lib/components/icons/SIconSend.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M23,1.9c0-0.1,0-0.2-0.1-0.3c0,0,0-0.1,0-0.1c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3-0.1C22,1,22,1,22,1c-0.1,0-0.2,0-0.3,0.1l-20,7C1.3,8.2,1,8.5,1,9c0,0.4,0.2,0.8,0.6,1l8.6,3.8l3.8,8.6c0.2,0.4,0.5,0.6,0.9,0.6c0,0,0,0,0,0c0.4,0,0.8-0.3,0.9-0.7l7-20C23,2.2,23,2.1,23,1.9C23,2,23,2,23,1.9z M18.2,4.4l-7.4,7.4L4.7,9.1L18.2,4.4z M14.9,19.3l-2.7-6.1l7.4-7.4L14.9,19.3z" />
+  </svg>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "0.70.1",
+  "version": "0.73.0",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"