@globalbrain/sefirot 4.38.1 → 4.40.0

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import SDivider from './SDivider.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputSegments from './SInputSegments.vue'
 
 export type { Color, Size } from './SInputBase.vue'
+
 export interface Props extends BaseProps {
   placeholder?: string
   disabled?: boolean
@@ -29,10 +31,10 @@ const emit = defineEmits<{
 }>()
 
 const sizePaddingYDict = {
-  sm: 12,
-  md: 14,
-  mini: 12,
-  small: 14,
+  sm: 6,
+  md: 10,
+  mini: 6,
+  small: 10,
   medium: 22
 }
 
@@ -67,6 +69,8 @@ const style = computed(() => {
   return `field-sizing:content;${minHeight}${maxHeight}`
 })
 
+const isPreview = ref(false)
+
 function emitInput(e: Event): void {
   const v = (e.target as HTMLInputElement).value || null
   emit('update:model-value', v)
@@ -80,8 +84,6 @@ function emitBlur(e: FocusEvent): void {
   emit('update:model-value', v)
   emit('blur', v)
 }
-
-const isPreview = ref(false)
 </script>
 
 <template>
@@ -115,11 +117,11 @@ const isPreview = ref(false)
             size="mini"
           />
         </div>
-
         <div v-if="$slots.actions && !isPreview" class="actions">
           <slot name="actions" />
         </div>
       </div>
+      <SDivider v-if="preview !== undefined || $slots.actions" />
       <textarea
         v-show="!isPreview"
         :id="name"
@@ -145,70 +147,6 @@ const isPreview = ref(false)
 </template>
 
 <style scoped lang="postcss">
-.box {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  flex-grow: 1;
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
-  width: 100%;
-  background-color: var(--c-gutter);
-  overflow: hidden;
-  transition: border-color 0.25s;
-
-  &:has(.input:hover) {
-    border-color: var(--input-hover-border-color);
-  }
-
-  &:has(.input:focus) {
-    border-color: var(--input-focus-border-color);
-  }
-}
-
-.control {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding: 0 8px;
-  height: 48px;
-  background-color: var(--c-bg-1);
-}
-
-.preview {
-  flex-grow: 1;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.input,
-.prose {
-  display: block;
-  flex-grow: 1;
-  width: 100%;
-  font-family: var(--input-value-font-family);
-  font-weight: 400;
-  background-color: var(--input-bg-color);
-}
-
-.input {
-  &::placeholder {
-    color: var(--input-placeholder-color);
-  }
-}
-
-.prose {
-  background-color: var(--c-bg-elv-3);
-
-  &.empty {
-    color: var(--input-placeholder-color);
-  }
-}
-
 .SInputTextarea.sm,
 .SInputTextarea.mini {
   .input,
@@ -260,7 +198,8 @@ const isPreview = ref(false)
   flex-grow: 1;
 }
 
-.SInputTextarea.disabled {
+.SInputTextarea.disabled,
+.SInputTextarea.disabled:hover {
   .box {
     border-color: var(--input-disabled-border-color);
   }
@@ -272,15 +211,69 @@ const isPreview = ref(false)
   }
 }
 
-.SInputTextarea.has-error {
-  .box {
-    border-color: var(--input-error-border-color);
-  }
+.SInputTextarea.has-error .box {
+  border-color: var(--input-error-border-color);
 }
 
-.SInputTextarea.has-warning {
-  .box {
-    border-color: var(--input-warning-border-color);
+.SInputTextarea.has-warning .box {
+  border-color: var(--input-warning-border-color);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  border: 1px solid var(--input-border-color);
+  border-radius: 8px;
+  width: 100%;
+  box-shadow: var(--input-box-shadow);
+  background-color: var(--input-bg-color);
+  overflow: hidden;
+  transition: border-color 0.25s;
+
+  &:has(.input:hover) {
+    border-color: var(--input-hover-border-color);
+  }
+
+  &:has(.input:focus) {
+    border-color: var(--input-focus-border-color);
   }
 }
+
+.control {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0 8px;
+  height: 48px;
+  background-color: var(--c-bg-1);
+}
+
+.preview {
+  flex-grow: 1;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.input,
+.prose {
+  display: block;
+  flex-grow: 1;
+  width: 100%;
+  font-family: var(--input-value-font-family);
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.input::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.prose.empty {
+  color: var(--input-placeholder-color);
+}
 </style>