@globalbrain/sefirot 2.18.0 → 2.20.0

package/lib/components/SButton.vue

@@ -81,7 +81,7 @@ function handleClick(): void {
   </component>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SButton {
   position: relative;
   display: inline-flex;
@@ -156,7 +156,7 @@ function handleClick(): void {
 }
 
 .SButton.fill {
-  font-weight: 600;
+  font-weight: 500;
 
   &.neutral {
     border-color: var(--button-fill-neutral-border-color);

package/lib/components/SButtonGroup.vue

@@ -1,148 +1,17 @@
-<script setup lang="ts">
-import { PropType, computed } from 'vue'
-
-export interface ButtonGroupItem {
-  label: string
-  value: string
-  mode?: Mode
-}
-
-export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
-
-const props = defineProps({
-  items: { type: Array as PropType<ButtonGroupItem[]>, required: true },
-  size: { type: String as PropType<Size>, default: 'medium' },
-  modelValue: { type: String, default: null }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const classes = computed(() => [props.size])
-
-function getButtonClasses(button: ButtonGroupItem) {
-  return [
-    { active: button.value === props.modelValue },
-    button.mode ?? 'neutral'
-  ]
-}
-
-function handleClick(value: string) {
-  emit('update:modelValue', value)
-}
-</script>
-
 <template>
-  <div class="SButtonGroup" :class="classes">
-    <button
-      v-for="item in items"
-      :key="item.value"
-      class="button"
-      :class="getButtonClasses(item)"
-      @click="handleClick(item.value)"
-    >
-      <span class="content">
-        {{ item.label }}
-      </span>
-    </button>
+  <div class="SButtonGroup">
+    <slot />
   </div>
 </template>
 
-<style lang="postcss" scoped>
-.SButtonGroup {
-  display: flex;
-  width: fit-content;
-  border: 1px solid var(--c-divider);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.SButtonGroup.mini {
-  height: 28px;
-
-  .button {
-    padding: 0 8px;
-    height: 28px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.small {
-  height: 32px;
-
-  .button {
-    padding: 0 10px;
-    height: 32px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.medium {
-  height: 40px;
-
-  .button {
-    padding: 0 12px;
-    height: 40px;
-    font-size: 13px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.large {
-  height: 48px;
-
-  .button {
-    padding: 0 14px;
-    height: 48px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.jumbo {
-  height: 64px;
-
-  .button {
-    padding: 0 24px;
-    height: 64px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-}
-
-.button {
-  border-left: 1px solid transparent;
-  letter-spacing: .4px;
-  color: var(--c-text-2);
-  white-space: nowrap;
-  transition: color .25s, background-color .25s;
-
-  &:hover {
-    color: var(--c-text-1);
-  }
-}
-
-.button:not(:first-child) {
-  border-left: 1px solid var(--c-divider);
-}
-
-.button.active {
-  color: var(--c-text-dark-1);
-}
+<style scoped lang="postcss">
+.SButtonGroup :slotted(.SButton) {
+  border-left-width: 0;
+  border-radius: 0;
 
-.button.neutral.active { background-color: var(--c-black); }
-.button.info.active    { background-color: var(--c-info); }
-.button.success.active { background-color: var(--c-success); }
-.button.warning.active { background-color: var(--c-warning); }
-.button.danger.active  { background-color: var(--c-danger); }
+  &:first-child { border-left-width: 1px; }
 
-.content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+  &:first-child { border-radius: 6px 0 0 6px; }
+  &:last-child  { border-radius: 0 6px 6px 0; }
 }
 </style>

package/lib/components/SDropdownSectionFilter.vue

@@ -102,13 +102,12 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 32px;
   background-color: var(--c-bg);
   transition: border-color 0.25s;
 
   &::placeholder {
-    font-weight: 500;
     color: var(--c-text-3);
   }
 

package/lib/components/SDropdownSectionFilterItemAvatar.vue

@@ -32,7 +32,7 @@ defineProps<{
   display: inline-block;
   padding-left: 8px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/components/SDropdownSectionFilterItemText.vue

@@ -22,6 +22,6 @@ defineProps<{
   display: inline-block;
   line-height: 20px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

package/lib/components/SDropdownSectionMenu.vue

@@ -29,7 +29,7 @@ defineProps<{
   text-align: left;
   line-height: 32px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   transition: color 0.25s, background-color 0.25s;
 
   &:hover {

package/lib/components/SInputBase.vue

@@ -114,7 +114,6 @@ function getErrorMsg(validation: Validatable) {
   align-items: baseline;
   width: 100%;
   line-height: 16px;
-  font-weight: 500;
   cursor: pointer;
   transition: color 0.25s;
 }
@@ -126,6 +125,7 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .label-text-value {
+  font-weight: 500;
   color: var(--input-label-color);
 }
 
@@ -144,7 +144,7 @@ function getErrorMsg(validation: Validatable) {
   display: inline-block;
   margin-left: 8px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--c-text-2);
 }
 
@@ -158,7 +158,7 @@ function getErrorMsg(validation: Validatable) {
   padding: 6px 0 0 0;
   line-height: 18px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--input-error-text-color);
   transition: opacity 0.25s, transform 0.25s;
 }
@@ -168,7 +168,7 @@ function getErrorMsg(validation: Validatable) {
   padding: 4px 0 0;
   line-height: 20px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--c-text-2);
 }
 

package/lib/components/SInputHMS.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, ref } from 'vue'
+import { DefineComponent, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
@@ -28,15 +28,23 @@ const props = defineProps<{
   noMinute?: boolean
   noSecond?: boolean
   disabled?: boolean
-  hideError?: boolean
-  modelValue: Value
+  value?: Value
+  modelValue?: Value
   validation?: Validatable
+  hideError?: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Value): void
+  (e: 'update:model-value', value: Value): void
+  (e: 'change', value: Value): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -66,10 +74,17 @@ function updateSecond(e: FocusEvent): void {
 }
 
 function update(type: ValueType, value: string | null) {
-  emit('update:modelValue', {
-    ...props.modelValue,
+  if (_value.value === null) {
+    return
+  }
+
+  const newValue = {
+    ..._value.value,
     [type]: value !== null ? value.padStart(2, '0') : null
-  })
+  }
+
+  emit('update:model-value', newValue)
+  emit('change', newValue)
 
   emitTouch(type)
 
@@ -114,7 +129,7 @@ function createRequiredTouched(): boolean[] {
 <template>
   <SInputBase
     class="SInputHMS"
-    :class="[size, { disabled }]"
+    :class="[size ?? 'small', { disabled }]"
     :label="label"
     :note="note"
     :info="info"
@@ -129,8 +144,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noHour"
         class="input hour"
-        :value="modelValue.hour"
+        :value="_value?.hour"
         placeholder="00"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateHour"
@@ -139,8 +155,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMinute"
         class="input minute"
-        :value="modelValue.minute"
+        :value="_value?.minute"
         placeholder="00"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateMinute"
@@ -149,8 +166,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noSecond"
         class="input second"
-        :value="modelValue.second"
+        :value="_value?.second"
         placeholder="00"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateSecond"
@@ -170,15 +188,15 @@ function createRequiredTouched(): boolean[] {
 
   .input {
     padding: 3px 0;
-    text-align: center;
-    font-size: 14px;
     width: 20px;
+    text-align: center;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .separator {
     padding: 3px 0;
     line-height: 24px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .separator::before {
@@ -189,20 +207,21 @@ function createRequiredTouched(): boolean[] {
 .SInputHMS.small {
   .container {
     padding: 0 12px;
+    min-height: 40px;
   }
 
   .input {
     flex-shrink: 0;
-    padding: 8px 0 6px;
-    text-align: center;
-    font-size: 16px;
+    padding: 7px 0 6px;
     width: 20px;
+    text-align: center;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
   .separator {
     padding: 7px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
   .separator::before {
@@ -218,14 +237,14 @@ function createRequiredTouched(): boolean[] {
   .input {
     padding: 12px 0 10px;
     text-align: center;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
     width: 24px;
   }
 
   .separator {
     padding: 11px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
   .separator::before {
@@ -240,49 +259,37 @@ function createRequiredTouched(): boolean[] {
   }
 
   .container {
-    border-color: var(--input-border);
-    background-color: var(--input-disabled-bg);
+    background-color: var(--input-disabled-bg-color);
   }
+
+  .container:hover { border-color: var(--input-border-color); }
+  .container.focus { border-color: var(--input-border-color); }
 }
 
 .SInputHMS.has-error {
   .container {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
   }
 }
 
 .container {
   display: inline-flex;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
-  &:hover {
-    border-color: var(--c-black);
-  }
-
-  &.focus,
-  &:hover.focus {
-    border-color: var(--c-info);
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &.focus,
-  .dark &:hover.focus {
-    border-color: var(--c-info);
-  }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &.focus { border-color: var(--input-focus-border-color); }
 }
 
 .input {
+  font-family: var(--font-family-number);
+  line-height: 24px;
   background-color: transparent;
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 }
 

package/lib/components/SInputRadio.vue

@@ -123,6 +123,6 @@ function onClick() {
   padding-left: 10px;
   line-height: 20px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

package/lib/components/SInputYMD.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, ref } from 'vue'
+import { DefineComponent, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
@@ -28,15 +28,31 @@ const props = defineProps<{
   noMonth?: boolean
   noDate?: boolean
   disabled?: boolean
-  hideError?: boolean
-  modelValue: Value
+  value?: Value
+  modelValue?: Value
   validation?: Validatable
+  hideError?: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Value): void
+  (e: 'update:model-value', value: Value): void
+  (e: 'change', value: Value): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
+const padValue = computed(() => {
+  return {
+    year: _value.value?.year?.toString().padStart(4, '0') ?? null,
+    month: _value.value?.month?.toString().padStart(2, '0') ?? null,
+    date: _value.value?.date?.toString().padStart(2, '0') ?? null
+  }
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -54,22 +70,29 @@ function blur() {
 }
 
 function updateYear(e: FocusEvent) {
-  update('year', Number((e.target as HTMLInputElement).value))
+  update('year', (e.target as HTMLInputElement).value)
 }
 
 function updateMonth(e: FocusEvent) {
-  update('month', Number((e.target as HTMLInputElement).value))
+  update('month', (e.target as HTMLInputElement).value)
 }
 
 function updateDate(e: FocusEvent) {
-  update('date', Number((e.target as HTMLInputElement).value))
+  update('date', (e.target as HTMLInputElement).value)
 }
 
-function update(type: ValueType, value: number) {
-  emit('update:modelValue', {
-    ...props.modelValue,
-    [type]: value === 0 ? null : value
-  })
+function update(type: ValueType, value: string) {
+  if (_value.value === null) {
+    return
+  }
+
+  const newValue = {
+    ..._value.value,
+    [type]: value ? Number(value) : null
+  }
+
+  emit('update:model-value', newValue)
+  emit('change', newValue)
 
   emitTouch(type)
 
@@ -119,9 +142,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noYear"
         class="input year"
-        type="number"
-        :value="modelValue.year"
-        placeholder="YYYY"
+        :value="padValue?.year"
+        placeholder="1998"
+        :maxlength="4"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateYear"
@@ -133,9 +156,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMonth"
         class="input month"
-        type="number"
-        :value="modelValue.month"
-        placeholder="M"
+        :value="padValue?.month"
+        placeholder="01"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateMonth"
@@ -147,9 +170,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noDate"
         class="input date"
-        type="number"
-        :value="modelValue.date"
-        placeholder="D"
+        :value="padValue?.date"
+        placeholder="14"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateDate"
@@ -159,7 +182,7 @@ function createRequiredTouched(): boolean[] {
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputYMD.mini {
   .container {
     padding: 0 4px;
@@ -168,7 +191,7 @@ function createRequiredTouched(): boolean[] {
   .input {
     padding: 3px 0;
     text-align: center;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .input.year  { width: 48px; }
@@ -178,51 +201,53 @@ function createRequiredTouched(): boolean[] {
   .separator {
     padding: 3px 0;
     line-height: 24px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 }
 
 .SInputYMD.small {
   .container {
-    padding: 0 6px;
+    padding: 0 8px;
   }
 
   .input {
-    padding: 7px 0;
+    padding: 7px 0 6px;
     text-align: center;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
-  .input.year  { width: 56px; }
+  .input.year  { margin-right: 2px; }
+  .input.year  { width: 48px; }
   .input.month { width: 32px; }
-  .input.date  { width: 40px; }
+  .input.date  { width: 32px; }
 
   .separator {
     padding: 7px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 }
 
 .SInputYMD.medium {
   .container {
-    padding: 0 4px;
+    padding: 0 8px;
   }
 
   .input {
     padding: 11px 0;
     text-align: center;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
-  .input.year  { width: 56px; }
-  .input.month { width: 40px; }
-  .input.date  { width: 40px; }
+  .input.year  { margin-right: 2px; }
+  .input.year  { width: 52px; }
+  .input.month { width: 36px; }
+  .input.date  { width: 36px; }
 
   .separator {
     padding: 11px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 }
 
@@ -233,48 +258,34 @@ function createRequiredTouched(): boolean[] {
   }
 
   .container {
-    background-color: var(--input-disabled-bg);
+    background-color: var(--input-disabled-bg-color);
   }
 }
 
 .SInputYMD.has-error {
   .container {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
   }
 }
 
 .container {
   display: inline-flex;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-bg);
-  transition: border-color 0.25s;
-
-  &:hover {
-    border-color: var(--c-black);
-  }
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s, background-color 0.25s;
 
-  &.focus,
-  &:hover.focus {
-    border-color: var(--c-info);
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &.focus,
-  .dark &:hover.focus {
-    border-color: var(--c-info);
-  }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &.focus { border-color: var(--input-focus-border-color); }
 }
 
 .input {
+  font-family: var(--font-family-number);
+  line-height: 24px;
   background-color: transparent;
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 }
 

package/lib/components/SPill.vue

@@ -53,7 +53,7 @@ function onClick() {
   display: inline-block;
   border: 1px solid transparent;
   letter-spacing: 0.4px;
-  font-weight: 600;
+  font-weight: 500;
   transition: border-color 0.25s, color 0.25s, background-color 0.25s;
 }
 

package/lib/composables/Dropdown.ts

@@ -57,6 +57,7 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
 }
 
 export interface ManualDropdownPosition {
+  container: Ref<any>
   position: Ref<'top' | 'bottom'>
   update(): void
 }
@@ -74,7 +75,7 @@ export function useManualDropdownPosition(
   const { top, bottom } = useElementBounding(el)
   const { height } = useWindowSize()
 
-  const position = ref<'top' | 'bottom'>('bottom')
+  const position = ref<'top' | 'bottom'>(initPosition ?? 'bottom')
 
   const dialogHeight = 400
 
@@ -100,6 +101,7 @@ export function useManualDropdownPosition(
   }
 
   return {
+    container: el,
     position,
     update
   }

package/lib/styles/base.css

@@ -9,17 +9,11 @@ body {
   min-width: 320px;
   min-height: 100vh;
   font-family: var(--font-family-base);
-  letter-spacing: .4px;
   line-height: 24px;
   font-size: 16px;
   font-weight: 400;
   color: var(--c-text-1);
   background-color: var(--c-bg);
-  direction: ltr;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 blockquote,
@@ -103,7 +97,6 @@ iframe,
 embed,
 object {
   display: block;
-  vertical-align: middle;
 }
 
 img,
@@ -119,6 +112,7 @@ select,
 textarea {
   border: 0;
   padding: 0;
+  letter-spacing: inherit;
   line-height: inherit;
   color: inherit;
 }
@@ -171,17 +165,20 @@ textarea {
 
 input[type="number"] {
   -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
   margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 input[type="select"],
 select {
   -webkit-appearance: none;
+  appearance: none;
 }
 
 fieldset {

package/lib/styles/variables.css

@@ -58,8 +58,8 @@
   --c-neutral-dark-dimm-2: rgba(255, 255, 255, 0.24);
 
   --c-text-light-1: #1f1f1f;
-  --c-text-light-2: rgba(60, 60, 67, 0.6);
-  --c-text-light-3: rgba(60, 60, 67, 0.3);
+  --c-text-light-2: rgba(60, 60, 67, 0.72);
+  --c-text-light-3: rgba(60, 60, 67, 0.39);
 
   --c-text-dark-1: rgba(235, 235, 245, 0.98);
   --c-text-dark-2: rgba(235, 235, 245, 0.6);
@@ -198,6 +198,8 @@
   --c-text-inverse-2: var(--c-text-dark-2);
   --c-text-inverse-3: var(--c-text-dark-3);
 
+  --c-soft: var(--c-white-soft);
+
   --c-mute: #f1f1f1;
   --c-mute-light: #f9f9f9;
   --c-mute-lighter: #ffffff;
@@ -251,6 +253,8 @@
   --c-text-inverse-2: var(--c-text-light-2);
   --c-text-inverse-3: var(--c-text-light-3);
 
+  --c-soft: #222226;
+
   --c-mute: #2c2c2e;
   --c-mute-light: #3a3a3c;
   --c-mute-lighter: #505053;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.18.0",
+  "version": "2.20.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",