@globalbrain/sefirot 2.49.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/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/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;

package/lib/components/STableHeaderActionItem.vue

@@ -4,7 +4,7 @@ import SButton from './SButton.vue'
 
 withDefaults(defineProps<TableHeaderAction>(), {
   show: true,
-  mode: 'mute',
+  mode: 'default',
   labelMode: 'neutral'
 })
 </script>

package/lib/composables/Table.ts

@@ -1,4 +1,5 @@
 import { type Component, type MaybeRef } from 'vue'
+import { type Mode } from '../components/SButton.vue'
 import { type Day } from '../support/Day'
 import { type DropdownSection } from './Dropdown'
 
@@ -183,11 +184,11 @@ export interface TableCellActions extends TableCellBase {
 }
 
 export interface TableCellAction {
-  mode?: ColorModes
+  mode?: Mode
   icon?: any
-  iconMode?: ColorModes
+  iconMode?: Mode
   label?: string
-  labelMode?: ColorModes
+  labelMode?: Mode
   onClick(value: any, record: any): void
 }
 
@@ -199,9 +200,9 @@ export interface TableMenu {
 
 export interface TableHeaderAction {
   show?: boolean
-  mode?: ColorModes
+  mode?: Mode
   label: string
-  labelMode?: ColorModes
+  labelMode?: Mode
   onClick(): void
 }
 

package/lib/styles/base.css

@@ -13,7 +13,7 @@ body {
   font-size: 16px;
   font-weight: 400;
   color: var(--c-text-1);
-  background-color: var(--c-bg);
+  background-color: var(--c-bg-elv-1);
 }
 
 blockquote,

package/lib/styles/bootstrap.css

@@ -1,4 +1,5 @@
 @import "normalize.css";
 @import "v-calendar/dist/style.css";
+@import "./variables-deprecated";
 @import "./variables";
 @import "./base";