@globalbrain/sefirot 2.19.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/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/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/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.19.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>",