@globalbrain/sefirot 4.38.0 → 4.39.0

package/lib/components/SAvatar.vue

@@ -55,7 +55,7 @@ const tooltipPosition = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--c-bg-elv-1);
+  background-color: var(--c-bg-1);
   border-radius: 50%;
   overflow: hidden;
 }
@@ -115,6 +115,11 @@ const tooltipPosition = computed(() => {
 }
 
 .SAvatar.no-image {
-  border: 1px solid var(--c-border-mute-1);
+  border: 1px solid var(--c-border);
+  background-color: var(--c-bg-3);
+
+  .dark & {
+    border-color: transparent;
+  }
 }
 </style>

package/lib/components/SAvatarStack.vue

@@ -42,11 +42,12 @@ const count = computed(() => {
 .SAvatarStack {
   display: flex;
 
-  :slotted(.SAvatar), :deep(.SAvatar), .more {
+  :slotted(.SAvatar),
+  :deep(.SAvatar),
+  .more {
     flex-shrink: 0;
-    border: 2px solid var(--c-bg-elv-2);
-    border-radius: 50%;
     overflow: hidden;
+    box-shadow: 0 0 0 2px var(--c-bg-1);
   }
 
   &.mini > :deep(*):not(:last-child)   { margin-right: -6px; }
@@ -62,7 +63,7 @@ const count = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--c-bg-mute-1);
+  background-color: var(--c-bg-3);
   border-radius: 50%;
   line-height: 1;
   color: var(--c-text-2);

package/lib/components/SButton.vue

@@ -152,11 +152,12 @@ function onClick(): void {
   letter-spacing: 0;
   text-align: center;
   border: 1px solid var(--button-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   color: var(--button-text-color);
   background-color: var(--button-bg-color);
   overflow: hidden;
   white-space: nowrap;
+  box-shadow: var(--button-box-shadow, none);
   transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 
   &:hover {
@@ -356,6 +357,7 @@ function onClick(): void {
     --button-text-color: var(--button-fill-default-text-color);
     --button-bg-color: var(--button-fill-default-bg-color);
     --button-count-bg-color: var(--button-fill-default-count-bg-color);
+    --button-box-shadow: var(--button-fill-default-box-shadow);
     --button-hover-border-color: var(--button-fill-default-hover-border-color);
     --button-hover-text-color: var(--button-fill-default-hover-text-color);
     --button-hover-bg-color: var(--button-fill-default-hover-bg-color);

package/lib/components/SCard.vue

@@ -2,19 +2,26 @@
 import { computed } from 'vue'
 import { provideCardState } from '../composables/Card'
 
+export interface Props {
+  size?: Size
+  mode?: Mode
+  muted?: boolean
+}
+
 export type Size = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
-  size?: Size
-  mode?: Mode
-}>()
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  mode: 'neutral'
+})
 
 const { isCollapsed } = provideCardState()
 
 const classes = computed(() => [
   props.size,
-  props.mode ?? 'neutral',
+  props.mode,
+  { muted: props.muted },
   { collapsed: isCollapsed.value }
 ])
 </script>
@@ -25,17 +32,18 @@ const classes = computed(() => [
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SCard {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
+  position: relative;
+  display: flex;
+  flex-direction: column;
   gap: 1px;
   border: 1px solid transparent;
-  border-radius: 6px;
-  background-color: var(--c-gutter);
+  border-radius: 12px;
+  background-color: var(--c-divider);
 }
 
-.SCard.neutral { border-color: var(--c-divider); }
+.SCard.neutral { border-color: var(--c-border); }
 .SCard.info    { border-color: var(--c-border-info-1); }
 .SCard.success { border-color: var(--c-border-success-1); }
 .SCard.warning { border-color: var(--c-border-warning-1); }
@@ -46,62 +54,25 @@ const classes = computed(() => [
   overflow: hidden;
 }
 
-.SModal > .SCard {
-  margin: 12px 12px 128px;
-  box-shadow: var(--shadow-depth-3);
-  transition: opacity 0.25s, transform 0.25s;
-
-  @media (min-width: 512px) {
-    margin: 24px 24px 128px;
-  }
-
-  @media (min-width: 768px) {
-    margin: 48px 48px 128px;
-  }
-
-  &.small {
-    @media (min-width: 560px) {
-      margin: 24px auto 128px;
-      max-width: 512px;
-    }
-
-    @media (min-width: 768px) {
-      margin: 48px auto 128px;
-    }
-  }
-
-  &.medium {
-    @media (min-width: 736px) {
-      margin: 48px auto 128px;
-      max-width: 640px;
-    }
-  }
-
-  &.large {
-    @media (min-width: 864px) {
-      margin: 48px auto 128px;
-      max-width: 768px;
-    }
-  }
+.SCard :deep(> .SCardBlock:first-child),
+.SCard :deep(> .SCardClose + .SCardBlock) {
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
+}
 
-  &.xlarge {
-    @media (min-width: 1056px) {
-      margin: 48px auto 128px;
-      max-width: 960px;
-    }
-  }
+.SCard :deep(> .SCardBlock:last-child) {
+  border-bottom-right-radius: 11px;
+  border-bottom-left-radius: 11px;
+}
 
-  &.xxlarge {
-    @media (min-width: 1248px) {
-      margin: 48px auto 128px;
-      max-width: 1152px;
-    }
-  }
+.SCard.muted :deep(> .SCardBlock) {
+  background-color: var(--c-bg-2);
 }
 
-.SModal.fade-enter-from > .SCard,
-.SModal.fade-leave-to > .SCard {
-  opacity: 0;
-  transform: translateY(8px);
+.SCard :deep(> .SCardClose) {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
 }
 </style>

package/lib/components/SCardBlock.vue

@@ -5,6 +5,9 @@ import { type CardBlockSize, provideCardBlockSize } from '../composables/Card'
 export type { CardBlockSize as Size }
 
 export type Bg =
+  | '1'
+  | '2'
+  | '3'
   | 'elv-1'
   | 'elv-2'
   | 'elv-3'
@@ -15,7 +18,7 @@ const props = withDefaults(defineProps<{
   size?: CardBlockSize
   bg?: Bg
 }>(), {
-  bg: 'elv-3'
+  bg: '1'
 })
 
 const _bg = computed(() => {
@@ -31,23 +34,13 @@ provideCardBlockSize(computed(() => props.size ?? null))
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SCardBlock {
   &.compact { padding: 12px; }
   &.wide    { padding: 16px; }
   &.xwide   { padding: 24px; }
 }
 
-.SCard > .SCardBlock:first-child {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.SCard > .SCardBlock:last-child {
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
-
 .SCardBlock.xsmall,
 .SCardBlock.small,
 .SCardBlock.medium,

package/lib/components/SCardClose.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import IconX from '~icons/ph/x'
+import SButton from './SButton.vue'
+
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <div class="SCardClose">
+    <SButton
+      size="sm"
+      type="text"
+      mode="mute"
+      :icon="IconX"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardFooter.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="SCardFooter">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.SCardFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  border-radius: 0 0 11px 11px;
+  background-color: var(--c-bg-2);
+}
+</style>

package/lib/components/SContent.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SContent {
   display: flex;
   flex-direction: column;
@@ -18,7 +18,7 @@
   max-width: 720px;
   line-height: 36px;
   font-size: 24px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--c-text-1);
 }
 
@@ -27,9 +27,9 @@
   margin: 16px 0 0;
   padding: 0;
   max-width: 720px;
-  line-height: 32px;
+  line-height: 28px;
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--c-text-1);
 }
 
@@ -38,9 +38,20 @@
   margin: 16px 0 0;
   padding: 0;
   max-width: 720px;
-  line-height: 28px;
+  line-height: 30px;
   font-size: 18px;
-  font-weight: 500;
+  font-weight: 600;
+  color: var(--c-text-1);
+}
+
+.SContent :deep(h4),
+.SContent :deep(.h4) {
+  margin: 16px 0 0;
+  padding: 0;
+  max-width: 720px;
+  line-height: 28px;
+  font-size: 16px;
+  font-weight: 600;
   color: var(--c-text-1);
 }
 
@@ -49,7 +60,9 @@
 .SContent :deep(h2:first-child),
 .SContent :deep(.h2:first-child),
 .SContent :deep(h3:first-child),
-.SContent :deep(.h3:first-child) {
+.SContent :deep(.h3:first-child),
+.SContent :deep(h4:first-child),
+.SContent :deep(.h4:first-child) {
   margin-top: 0;
 }
 
@@ -124,16 +137,16 @@
 .SContent :deep(table) {
   margin: 8px 0;
   border-style: hidden;
-  border-radius: 6px;
+  border-radius: 8px;
   text-align: left;
   font-size: 14px;
   color: var(--c-text-1);
   overflow: clip;
-  box-shadow: 0 0 0 1px var(--c-divider);
+  box-shadow: 0 0 0 1px var(--c-border);
 }
 
 .SContent :deep(table tr:hover td) {
-  background-color: var(--c-bg-elv-4);
+  background-color: var(--c-bg-2);
 }
 
 .SContent :deep(table thead > tr > th) {
@@ -142,18 +155,17 @@
 
 .SContent :deep(table th),
 .SContent :deep(table td) {
-  border: 1px solid var(--c-gutter);
+  border: 1px solid var(--c-divider);
   padding: 8px 16px;
   height: 40px;
   vertical-align: top;
   text-wrap: pretty;
-  background-color: var(--c-bg-elv-3);
   overflow-wrap: break-word;
 }
 
 .SContent :deep(table th) {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--c-text-2);
   text-wrap: balance;
 }

package/lib/components/SInputCheckbox.vue

@@ -132,6 +132,7 @@ function onClick() {
   width: 16px;
   height: 16px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 }
 

package/lib/components/SInputDate.vue

@@ -113,7 +113,7 @@ function onBlur() {
 .SInputDate.md {
   .input {
     padding: 6px 10px;
-    max-width: 120px;
+    max-width: 128px;
     height: 36px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
@@ -165,11 +165,12 @@ function onBlur() {
 .input {
   display: block;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   font-weight: 400;
   font-feature-settings: 'tnum';
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 
   &::placeholder {

package/lib/components/SInputDropdown.vue

@@ -192,10 +192,11 @@ function onSelect(value: OptionValue) {
   display: flex;
   align-items: center;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   color: var(--input-text);
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   cursor: pointer;
   transition: border-color 0.25s, background-color 0.25s;
 

package/lib/components/SInputFile.vue

@@ -203,6 +203,7 @@ function onChange(e: Event) {
   border: 1px solid var(--input-border-color);
   border-radius: 6px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   cursor: pointer;
   transition: border-color 0.25s;
 
@@ -211,8 +212,7 @@ function onChange(e: Event) {
   }
 
   &:hover .button {
-    border-color: var(--c-border-mute-2);
-    background-color: var(--c-bg-mute-2);
+    background-color: var(--button-fill-default-hover-bg-color);
   }
 }
 
@@ -221,10 +221,11 @@ function onChange(e: Event) {
 }
 
 .button {
-  border: 1px solid var(--c-border-mute-1);
+  border: 1px solid var(--button-fill-default-border-color);
   border-radius: 3px;
   color: var(--c-text-1);
-  background-color: var(--c-bg-mute-1);
+  background-color: var(--button-fill-default-bg-color);
+  box-shadow: var(--button-fill-default-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 }
 

package/lib/components/SInputFileUpload.vue

@@ -265,7 +265,7 @@ function toFileObjects(files: File[]) {
   align-items: center;
   gap: 16px;
   border: 1px dashed var(--c-border-mute-1);
-  border-radius: 3px;
+  border-radius: 8px;
   padding: 24px 0;
   min-height: 192px;
   text-align: center;

package/lib/components/SInputHMS.vue

@@ -308,8 +308,9 @@ function createRequiredTouched(): boolean[] {
 .container {
   display: inline-flex;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s;
 
   &:hover { border-color: var(--input-hover-border-color); }

package/lib/components/SInputRadio.vue

@@ -112,6 +112,7 @@ function onClick() {
   width: 16px;
   height: 16px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s;
 }
 

package/lib/components/SInputSelect.vue

@@ -186,10 +186,11 @@ function emitChange(e: any): void {
 .box {
   position: relative;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   color: var(--input-value-color);
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   cursor: pointer;
   transition: border-color 0.25s, background-color 0.25s;
 

package/lib/components/SInputText.vue

@@ -404,9 +404,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   flex-grow: 1;
   max-width: 100%;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   background-color: var(--input-bg-color);
-  transition: border-color 0.25s;
+  box-shadow: var(--input-box-shadow);
+  transition: border-color 0.25s, background-color 0.25s;
 
   &:hover {
     border-color: var(--input-hover-border-color);

package/lib/components/SInputTextarea.vue

@@ -151,9 +151,10 @@ const isPreview = ref(false)
   gap: 1px;
   flex-grow: 1;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   background-color: var(--c-gutter);
+  box-shadow: var(--input-box-shadow);
   overflow: hidden;
   transition: border-color 0.25s;
 

package/lib/components/SInputYMD.vue

@@ -307,8 +307,9 @@ function createRequiredTouched(): boolean[] {
 .container {
   display: inline-flex;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 
   &:hover { border-color: var(--input-hover-border-color); }

package/lib/components/SModal.vue

@@ -37,7 +37,7 @@ function onClick(e: MouseEvent) {
   </Teleport>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SModal {
   position: fixed;
   top: 0;
@@ -55,4 +55,63 @@ function onClick(e: MouseEvent) {
 .SModal.fade-leave-to {
   opacity: 0;
 }
+
+.SModal :deep(> .SCard) {
+  margin: 12px 12px 128px;
+  box-shadow: var(--shadow-depth-3);
+  transition: opacity 0.25s, transform 0.25s;
+
+  @media (min-width: 512px) {
+    margin: 24px 24px 128px;
+  }
+
+  @media (min-width: 768px) {
+    margin: 48px 48px 128px;
+  }
+
+  &.small {
+    @media (min-width: 560px) {
+      margin: 24px auto 128px;
+      max-width: 512px;
+    }
+
+    @media (min-width: 768px) {
+      margin: 48px auto 128px;
+    }
+  }
+
+  &.medium {
+    @media (min-width: 736px) {
+      margin: 48px auto 128px;
+      max-width: 640px;
+    }
+  }
+
+  &.large {
+    @media (min-width: 864px) {
+      margin: 48px auto 128px;
+      max-width: 768px;
+    }
+  }
+
+  &.xlarge {
+    @media (min-width: 1056px) {
+      margin: 48px auto 128px;
+      max-width: 960px;
+    }
+  }
+
+  &.xxlarge {
+    @media (min-width: 1248px) {
+      margin: 48px auto 128px;
+      max-width: 1152px;
+    }
+  }
+}
+
+.SModal.fade-enter-from :deep(> .SCard),
+.SModal.fade-leave-to :deep(> .SCard) {
+  opacity: 0;
+  transform: translateY(8px);
+}
 </style>

package/lib/components/SPagination.vue

@@ -55,8 +55,6 @@ const hasNext = computed(() => {
   <div class="SPagination" :class="[size, align]">
     <div class="button prev">
       <SButton
-        type="outline"
-        mode="mute"
         :size
         :lead-icon="IconCaretLeft"
         :label="t.prev"
@@ -69,8 +67,6 @@ const hasNext = computed(() => {
     </div>
     <div class="button next">
       <SButton
-        type="outline"
-        mode="mute"
         :size
         :trail-icon="IconCaretRight"
         :label="t.next"

package/lib/components/STable.vue

@@ -711,7 +711,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
   top: var(--table-head-top, auto);
   z-index: 100;
   border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
-  background-color: var(--bg-elv-2);
+  background-color: var(--c-bg-1);
   scrollbar-width: none;
   line-height: 0;
 
@@ -764,7 +764,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
 
 :deep(.row) {
   display: flex;
-  border-bottom: 1px solid var(--c-gutter);
+  border-bottom: 1px solid var(--c-divider);
 }
 
 :deep(.row.last),
@@ -783,7 +783,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding: 48px 32px;
   text-align: center;
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
@@ -796,7 +796,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
 
 .loading {
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
   overflow: hidden;
 
   .has-footer & {
@@ -863,7 +863,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
 
   :deep(.input) {
     align-items: center;
-    padding: 0 16px;
+    padding: 0 16px 0 15px;
     min-height: 40px;
     user-select: none;
   }