@globalbrain/sefirot 2.48.0 → 3.0.0

package/lib/components/SCard.vue

@@ -35,11 +35,11 @@ const classes = computed(() => [
   background-color: var(--c-gutter);
 }
 
-.SCard.neutral { border-color: var(--c-divider-2); }
-.SCard.info    { border-color: var(--c-info-border); }
-.SCard.success { border-color: var(--c-success-border); }
-.SCard.warning { border-color: var(--c-warning-border); }
-.SCard.danger  { border-color: var(--c-danger-border); }
+.SCard.neutral { border-color: var(--c-divider); }
+.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); }
+.SCard.danger  { border-color: var(--c-border-danger-1); }
 
 .SCard.collapsed {
   height: 48px;

package/lib/components/SCardHeader.vue

@@ -10,6 +10,6 @@
   align-items: center;
   border-radius: 5px 5px 0 0;
   height: 48px;
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 }
 </style>

package/lib/components/SCardHeaderTitle.vue

@@ -22,8 +22,8 @@ defineProps<{
 }
 
 .SCardHeaderTitle.neutral { color: var(--c-text-1); }
-.SCardHeaderTitle.info    { color: var(--c-info-text); }
-.SCardHeaderTitle.success { color: var(--c-success-text); }
-.SCardHeaderTitle.warning { color: var(--c-warning-text); }
-.SCardHeaderTitle.danger  { color: var(--c-danger-text); }
+.SCardHeaderTitle.info    { color: var(--c-text-info-1); }
+.SCardHeaderTitle.success { color: var(--c-text-success-1); }
+.SCardHeaderTitle.warning { color: var(--c-text-warning-1); }
+.SCardHeaderTitle.danger  { color: var(--c-text-danger-1); }
 </style>

package/lib/components/SContent.vue

@@ -24,11 +24,11 @@
 }
 
 .SContent :deep(a) {
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 

package/lib/components/SDescItem.vue

@@ -32,7 +32,7 @@ const labelWidth = computed(() => {
 }
 
 .SDesc.divider > .SDescItem {
-  border-bottom: 1px dashed var(--c-divider-1);
+  border-bottom: 1px dashed var(--c-divider);
   padding-bottom: 7px;
 }
 </style>

package/lib/components/SDescLink.vue

@@ -41,11 +41,11 @@ const link = computed(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 </style>

package/lib/components/SDescText.vue

@@ -53,11 +53,11 @@ const lineClamp = computed(() => props.lineClamp ?? 'none')
 }
 
 .value :deep(a) {
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 </style>

package/lib/components/SDropdown.vue

@@ -19,7 +19,7 @@ defineProps<{
 
 <style scoped lang="postcss">
 .SDropdown {
-  border: 1px solid var(--c-divider-2);
+  border: 1px solid var(--c-divider);
   border-radius: 6px;
   min-width: 256px;
   max-height: 384px;

package/lib/components/SDropdownSectionFilter.vue

@@ -105,11 +105,10 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   z-index: 10;
   border-bottom: 1px solid var(--c-gutter);
   padding: 8px;
-  background-color: var(--c-bg-elv-up);
 }
 
 .input {
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-divider);
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
@@ -141,7 +140,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
   &:hover,
   &:focus {
-    background-color: var(--c-mute);
+    background-color: var(--c-bg-mute-1);
   }
 }
 
@@ -155,7 +154,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
@@ -163,8 +162,8 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   transition: border-color 0.1s, background-color 0.1s;
 
   .button.active & {
-    border-color: var(--c-info-text);
-    background-color: var(--c-info);
+    border-color: var(--c-fg-info-1);
+    background-color: var(--c-fg-info-1);
   }
 }
 
@@ -184,7 +183,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 .radio {
   position: relative;
   flex-shrink: 0;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 50%;
   margin-top: 8px;
   margin-bottom: 8px;
@@ -194,7 +193,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   transition: border-color 0.25s;
 
   .button.active & {
-    border-color: var(--c-info-light);
+    border-color: var(--c-border-info-1);
   }
 }
 
@@ -209,7 +208,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info-light);
+  background-color: var(--c-fg-info-1);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;

package/lib/components/SDropdownSectionMenu.vue

@@ -38,7 +38,7 @@ defineProps<{
   transition: color 0.25s, background-color 0.25s;
 
   &:hover:not(:disabled) {
-    background-color: var(--c-mute);
+    background-color: var(--c-bg-mute-1);
   }
 
   &:disabled {

package/lib/components/SHeadLead.vue

@@ -12,11 +12,11 @@
 }
 
 .SHeadLead :deep(a) {
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 </style>

package/lib/components/SHeadTitle.vue

@@ -21,8 +21,8 @@ defineProps<{
 }
 
 .SHeadTitle.neutral { color: var(--c-text-1); }
-.SHeadTitle.info    { color: var(--c-info-text); }
-.SHeadTitle.success { color: var(--c-success-text); }
-.SHeadTitle.warning { color: var(--c-warning-text); }
-.SHeadTitle.danger  { color: var(--c-danger-text); }
+.SHeadTitle.info    { color: var(--c-text-info-1); }
+.SHeadTitle.success { color: var(--c-text-success-1); }
+.SHeadTitle.warning { color: var(--c-text-warning-1); }
+.SHeadTitle.danger  { color: var(--c-text-danger-1); }
 </style>

package/lib/components/SInputBase.vue

@@ -132,7 +132,7 @@ function getErrorMsg(validation: Validatable) {
 
   &:hover, &:focus, &:focus-within {
     .label-info {
-      color: var(--c-info-text);
+      color: var(--c-text-info-1);
     }
   }
 
@@ -191,10 +191,10 @@ function getErrorMsg(validation: Validatable) {
 
   &.neutral { color: var(--c-text-1); }
   &.mute    { color: var(--c-text-2); }
-  &.info    { color: var(--c-info-text); }
-  &.success { color: var(--c-success-text); }
-  &.warning { color: var(--c-warning-text); }
-  &.danger  { color: var(--c-danger-text); }
+  &.info    { color: var(--c-text-info-1); }
+  &.success { color: var(--c-text-success-1); }
+  &.warning { color: var(--c-text-warning-1); }
+  &.danger  { color: var(--c-text-danger-1); }
 }
 
 .check-icon {

package/lib/components/SInputCheckbox.vue

@@ -109,15 +109,15 @@ function onClick() {
 
   &:hover {
     .box {
-      border-color: var(--c-info-light);
+      border-color: var(--c-border-info-1);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-info-light);
-    background-color: var(--c-info-light);
+    border-color: var(--c-fg-info-1);
+    background-color: var(--c-fg-info-1);
   }
 
   .check {
@@ -128,7 +128,7 @@ function onClick() {
 
 .box {
   position: relative;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
@@ -151,7 +151,7 @@ function onClick() {
 .check-icon {
   width: 10px;
   height: 10px;
-  color: var(--c-white);
+  color: var(--c-white-1);
 }
 
 .text {

package/lib/components/SInputRadio.vue

@@ -89,14 +89,14 @@ function onClick() {
 
   &:hover {
     .box {
-      border-color: var(--c-info-light);
+      border-color: var(--c-border-info-1);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-info-light);
+    border-color: var(--c-fg-info-1);
   }
 
   .check {
@@ -107,7 +107,7 @@ function onClick() {
 
 .box {
   position: relative;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 50%;
   width: 16px;
   height: 16px;
@@ -126,7 +126,7 @@ function onClick() {
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info-light);
+  background-color: var(--c-fg-info-1);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;

package/lib/components/SInputSegments.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts" generic="T extends string | number | boolean">
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
+import SInputBase from './SInputBase.vue'
+import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+export interface Option<T extends string | number | boolean> {
+  label: string
+  value: T
+  mode?: Mode
+  disabled?: boolean
+}
+
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  options: Option<T>[]
+  block?: boolean
+  disabled?: boolean
+  value?: T
+  modelValue?: T
+  validation?: Validatable
+  hideError?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:model-value', value: T): void
+  (e: 'change', value: T): void
+}>()
+
+const _value = computed(() => {
+  const v = props.modelValue !== undefined
+    ? props.modelValue
+    : props.value
+
+  if (v === undefined) {
+    throw new Error('[sefirot] SInputSegments: `value` or `modelValue` is required.')
+  }
+
+  return v
+})
+
+function onSelect(value: T) {
+  emit('update:model-value', value)
+  emit('change', value)
+}
+</script>
+
+<template>
+  <SInputBase
+    class="SInputSegments"
+    :class="[size ?? 'small', { block }]"
+    :label="label"
+    :note="note"
+    :info="info"
+    :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <div class="box">
+      <SInputSegmentsOption
+        v-for="option, index in options"
+        :key="index"
+        :size="size ?? 'small'"
+        :label="option.label"
+        :value="option.value"
+        :mode="option.mode ?? 'neutral'"
+        :active="_value === option.value"
+        :disabled="disabled ? true : option.disabled ?? false"
+        @click="onSelect(option.value)"
+      />
+    </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
+  </SInputBase>
+</template>
+
+<style scoped lang="postcss">
+.SInputSegments.mini {
+  .box {
+    padding: 2px;
+    height: 32px;
+  }
+}
+
+.SInputSegments.small {
+  .box {
+    padding: 4px;
+    height: 40px;
+  }
+}
+
+.SInputSegments.medium {
+  .box {
+    padding: 4px;
+    height: 48px;
+  }
+}
+
+.SInputSegments.block {
+  .box {
+    display: flex;
+  }
+}
+
+.SInputSegments.has-error {
+  .box {
+    border-color: var(--input-error-border-color);
+  }
+}
+
+.box {
+  display: inline-flex;
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s;
+}
+</style>

package/lib/components/SInputSegmentsOption.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts" generic="T extends string | number | boolean">
+export type Size = 'mini' | 'small' | 'medium'
+export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<{
+  size: Size
+  label: string
+  value: T
+  mode: Mode
+  active: boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+function onClick() {
+  if (!props.disabled) {
+    emit('click')
+  }
+}
+</script>
+
+<template>
+  <button
+    class="SInputSegmentsOption"
+    :class="[size, mode, { active }, { disabled }]"
+    @click="onClick"
+  >
+    <span class="label">
+      {{ label }}
+    </span>
+  </button>
+</template>
+
+<style scoped lang="postcss">
+.SInputSegmentsOption {
+  position: relative;
+  display: block;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 14px;
+  color: var(--c-text-2);
+  white-space: nowrap;
+  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+
+  &.disabled {
+    color: var(--c-text-3);
+    cursor: not-allowed;
+  }
+
+  .SInputSegmentsOption + &::before {
+    position: absolute;
+    left: -1px;
+    display: block;
+    width: 1px;
+    height: 16px;
+    border-radius: 4px;
+    background-color: var(--c-divider-2);
+    content: "";
+    transition: opacity 0.25s;
+  }
+
+  .SInputSegmentsOption.active + &::before,
+  &.active::before {
+    opacity: 0;
+  }
+}
+
+.SInputSegmentsOption.mini {
+  .SInputSegmentsOption + &::before {
+    top: 4px;
+  }
+
+  .label {
+    padding: 0 12px;
+  }
+}
+
+.SInputSegmentsOption.small {
+  .SInputSegmentsOption + &::before {
+    top: 7px;
+  }
+
+  .label {
+    padding: 0 12px;
+  }
+}
+
+.SInputSegmentsOption.medium {
+  .SInputSegmentsOption + &::before {
+    top: 10px;
+  }
+
+  .label {
+    padding: 0 16px;
+  }
+}
+
+.SInputSegmentsOption.neutral.active {
+  border-color: var(--button-fill-mute-border-color);
+  color: var(--button-fill-mute-text-color);
+  background-color: var(--button-fill-mute-bg-color);
+}
+
+.SInputSegmentsOption.mute.active {
+  border-color: var(--button-fill-mute-border-color);
+  color: var(--c-text-2);
+  background-color: var(--button-fill-mute-bg-color);
+}
+
+.SInputSegmentsOption.info.active {
+  border-color: var(--button-fill-info-border-color);
+  color: var(--button-fill-info-text-color);
+  background-color: var(--button-fill-info-bg-color);
+}
+
+.SInputSegmentsOption.success.active {
+  border-color: var(--button-fill-success-border-color);
+  color: var(--button-fill-success-text-color);
+  background-color: var(--button-fill-success-bg-color);
+}
+
+.SInputSegmentsOption.warning.active {
+  border-color: var(--button-fill-warning-border-color);
+  color: var(--button-fill-warning-text-color);
+  background-color: var(--button-fill-warning-bg-color);
+}
+
+.SInputSegmentsOption.danger.active {
+  border-color: var(--button-fill-danger-border-color);
+  color: var(--button-fill-danger-text-color);
+  background-color: var(--button-fill-danger-bg-color);
+}
+
+.label {
+  display: inline-block;
+}
+</style>

package/lib/components/SSheet.vue

@@ -45,7 +45,7 @@ defineEmits<{
     box-shadow: var(--shadow-depth-5);
 
     .dark & {
-      background-color: var(--c-bg-soft);
+      background-color: var(--c-bg-elv-4);
     }
   }
 }

package/lib/components/SState.vue

@@ -28,11 +28,11 @@ const classes = computed(() => [
 .SState {
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--c-divider-2);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 6px;
   font-weight: 500;
   white-space: nowrap;
-  background-color: var(--c-mute);
+  background-color: var(--c-bg-mute-1);
 }
 
 .SState.mini {
@@ -105,23 +105,23 @@ const classes = computed(() => [
 
 .SState.mute  {
   .label     { color: var(--c-text-2); }
-  .indicator { background-color: var(--c-mute-darker); }
+  .indicator { background-color: var(--c-fg-gray-1); }
 }
 
 .SState.info  {
-  .indicator { background-color: var(--c-info-text); }
+  .indicator { background-color: var(--c-fg-info-1); }
 }
 
 .SState.success  {
-  .indicator { background-color: var(--c-success-text); }
+  .indicator { background-color: var(--c-fg-success-1); }
 }
 
 .SState.warning  {
-  .indicator { background-color: var(--c-warning-text); }
+  .indicator { background-color: var(--c-fg-warning-1); }
 }
 
 .SState.danger  {
-  .indicator { background-color: var(--c-danger-text); }
+  .indicator { background-color: var(--c-fg-danger-1); }
 }
 
 .label {

package/lib/components/STableCell.vue

@@ -126,7 +126,7 @@ const computedCell = computed<TableCell | undefined>(() =>
 
 <style scoped lang="postcss">
 .STableCell {
-  background-color: var(--c-bg-elv-up);
+  background-color: var(--c-bg-elv-3);
   transition: background-color 0.1s;
   overflow: hidden;
 

package/lib/components/STableCellAvatars.vue

@@ -33,7 +33,7 @@ const names = computed(() => {
     return `${_avatars.value[0].name}, ${_avatars.value[1].name}`
   }
 
-  return `${_avatars.value[0].name}, ${_avatars.value[1].name} +${_avatars.value.length - 1}`
+  return `${_avatars.value[0].name}, ${_avatars.value[1].name} +${_avatars.value.length - 2}`
 })
 </script>
 

package/lib/components/STableColumn.vue

@@ -148,7 +148,7 @@ function stopDialogPositionListener() {
 
 <style scoped lang="postcss">
 .STableColumn {
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 
   &.has-header {
     border-top: 1px solid var(--c-divider-2);

package/lib/components/STableHeader.vue

@@ -60,7 +60,7 @@ const resetAction = computed(() => {
   border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 
   &.borderless {
     border-radius: 0;