@globalbrain/sefirot 2.40.0 → 2.42.0

package/lib/components/SCard.vue

@@ -1,17 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { provideCardState } from '../composables/Card'
 
 export type Size = 'small' | 'medium' | 'large'
+export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
-defineProps<{
+const props = defineProps<{
   size?: Size
+  mode?: Mode
 }>()
 
 const { isCollapsed } = provideCardState()
+
+const classes = computed(() => [
+  props.size,
+  props.mode ?? 'neutral',
+  { collapsed: isCollapsed.value }
+])
 </script>
 
 <template>
-  <div class="SCard" :class="[size, { collapsed: isCollapsed }]">
+  <div class="SCard" :class="classes">
     <slot />
   </div>
 </template>
@@ -20,11 +29,17 @@ const { isCollapsed } = provideCardState()
 .SCard {
   display: grid;
   gap: 1px;
-  border: 1px solid var(--c-divider-2);
+  border: 1px solid transparent;
   border-radius: 6px;
   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.collapsed {
   height: 48px;
   overflow: hidden;

package/lib/components/SCardHeaderTitle.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+defineProps<{
+  mode?: Mode
+}>()
+</script>
+
 <template>
-  <p class="SCardHeaderTitle">
+  <p class="SCardHeaderTitle" :class="[mode ?? 'neutral']">
     <slot />
   </p>
 </template>
@@ -12,4 +20,10 @@
   font-size: 14px;
   font-weight: 600;
 }
+
+.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); }
 </style>

package/lib/components/SDropdownSectionFilter.vue

@@ -115,6 +115,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   padding: 0 8px;
   width: 100%;
   font-size: 14px;
+  font-family: var(--input-value-font-family);
   line-height: 32px;
   background-color: var(--input-bg-color);
   transition: border-color 0.25s;

package/lib/components/SGrid.vue

@@ -8,8 +8,8 @@ const props = defineProps<{
 
 const styles = computed(() => {
   return {
-    gridTemplateColumns: `repeat(${props.cols ?? 1}, minmax(0, 1fr))`,
-    gap: `${props.gap ?? 0}px`
+    '--grid-template-columns': `repeat(${props.cols ?? 1}, minmax(0, 1fr))`,
+    '--gap': `${props.gap ?? 0}px`
   }
 })
 </script>
@@ -23,5 +23,7 @@ const styles = computed(() => {
 <style scoped lang="postcss">
 .SGrid {
   display: grid;
+  grid-template-columns: var(--grid-template-columns);
+  gap: var(--gap);
 }
 </style>

package/lib/components/SHeadTitle.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+defineProps<{
+  mode?: Mode
+}>()
+</script>
+
 <template>
-  <div class="SHeadTitle">
+  <div class="SHeadTitle" :class="[mode]">
     <slot />
   </div>
 </template>
@@ -11,4 +19,10 @@
   font-weight: 500;
   color: var(--c-text-1);
 }
+
+.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); }
 </style>

package/lib/components/SInputHMS.vue

@@ -308,7 +308,7 @@ function createRequiredTouched(): boolean[] {
 }
 
 .input {
-  font-family: var(--font-family-number);
+  font-family: var(--input-value-font-family, var(--font-family-number));
   line-height: 24px;
   background-color: transparent;
 

package/lib/components/SInputText.vue

@@ -393,6 +393,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   width: 100%;
   background-color: transparent;
   cursor: text;
+  font-family: var(--input-value-font-family);
 
   &.neutral:not(.hide) { color: var(--input-value-color); }
   &.info:not(.hide)    { color: var(--c-info-text); }

package/lib/components/SInputTextarea.vue

@@ -147,6 +147,7 @@ function emitBlur(e: FocusEvent): void {
   border: 1px solid var(--input-border-color);
   border-radius: 6px;
   width: 100%;
+  font-family: var(--input-value-font-family);
   font-weight: 400;
   background-color: var(--input-bg-color);
   transition: border-color 0.25s, background-color 0.25s;

package/lib/components/SInputYMD.vue

@@ -302,6 +302,7 @@ function createRequiredTouched(): boolean[] {
 
 .input {
   line-height: 24px;
+  font-family: var(--input-value-font-family, var(--font-family-number));
   font-feature-settings: "tnum";
   background-color: transparent;
 

package/package.json

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