@globalbrain/sefirot 0.72.0 → 0.73.0

package/CHANGELOG.md

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

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

@@ -79,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);
   }
 
@@ -121,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/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/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/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/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/package.json

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