@globalbrain/sefirot 2.48.0 → 3.0.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";

package/lib/styles/variables-deprecated.css

@@ -0,0 +1,336 @@
+/**
+  * DEPRECATED: These values are no longer used. Equivalent colors are defined
+  * directly in theme-aware color definitions.
+  */
+:root {
+  --c-white-soft: #fafafa;
+  --c-white-mute: #f2f2f2;
+  --c-white-elv: #fafafa;
+  --c-white-elv-up: #ffffff;
+  --c-white-elv-down: #f2f2f2;
+  --c-black: #000000;
+  --c-black-soft: #171717;
+  --c-black-mute: #1c1c1e;
+  --c-black-elv: #171717;
+  --c-black-elv-up: #1c1c1e;
+  --c-black-elv-down: #000000;
+}
+
+/**
+ * DEPRECATED: Use `--c-gray-{number}`.
+ */
+:root {
+  --c-gray: #8e8e93;
+  --c-gray-dark-1: #636366;
+  --c-gray-dark-2: #48484a;
+  --c-gray-dark-3: #3a3a3c;
+  --c-gray-dark-4: #2c2c2e;
+  --c-gray-dark-5: #1c1c1e;
+  --c-gray-light-1: #aeaeb2;
+  --c-gray-light-2: #c7c7cc;
+  --c-gray-light-3: #d1d1d6;
+  --c-gray-light-4: #e5e5ea;
+  --c-gray-light-5: #f2f2f7;
+}
+
+/**
+ * DEPRECATED: Use `--c-bg-elv-{number}`.
+ */
+:root {
+  --c-bg: var(--c-white);
+  --c-bg-soft: var(--c-white-soft);
+  --c-bg-mute: var(--c-white-mute);
+  --c-bg-elv: var(--c-white-elv);
+  --c-bg-elv-up: var(--c-white-elv-up);
+  --c-bg-elv-down: var(--c-white-elv-down);
+  --c-bg-lift-1: var(--c-white-soft);
+  --c-bg-lift-2: var(--c-white-mute);
+}
+
+.dark {
+  --c-bg-elv: var(--c-black-elv);
+  --c-bg-elv-up: var(--c-black-elv-up);
+  --c-bg-elv-down: var(--c-black-elv-down);
+  --c-bg: var(--c-black);
+  --c-bg-soft: #232429;
+  --c-bg-mute: var(--c-black-mute);
+  --c-bg-lift-1: #222226;
+  --c-bg-lift-2: #2c2c2e;
+}
+
+/**
+ * DEPRECATED: Use `--c-divider` and `--c-border-mute-1`.
+ */
+:root {
+  --c-divider-light-1: rgba(60, 60, 67, 0.29);
+  --c-divider-light-2: rgba(60, 60, 67, 0.12);
+  --c-divider-dark-1: rgba(84, 84, 88, 0.65);
+  --c-divider-dark-2: rgba(84, 84, 84, 0.48);
+}
+
+:root {
+  --c-divider: var(--c-divider-light-1);
+  --c-divider-light: var(--c-divider-light-2);
+  --c-divider-1: var(--c-divider-light-1);
+  --c-divider-2: var(--c-divider-light-2);
+}
+
+.dark {
+  --c-divider: var(--c-divider-dark-1);
+  --c-divider-light: var(--c-divider-dark-2);
+  --c-divider-1: var(--c-divider-dark-1);
+  --c-divider-2: var(--c-divider-dark-2);
+}
+
+/*
+ * DEPRECATED: Use `--c-bg-mute-X`.
+ */
+:root {
+  --c-mute: #f1f1f1;
+  --c-mute-light: #f9f9f9;
+  --c-mute-lighter: #ffffff;
+  --c-mute-dark: #e3e3e3;
+  --c-mute-darker: #d1d1d1;
+  --c-mute-dimm-1: #f1f1f1;
+  --c-mute-dimm-2: #e3e3e3;
+}
+
+.dark {
+  --c-mute: #2c2c2e;
+  --c-mute-light: #3a3a3c;
+  --c-mute-lighter: #505053;
+  --c-mute-dark: #222226;
+  --c-mute-darker: #1c1c1e;
+  --c-mute-dimm-1: #222226;
+  --c-mute-dimm-2: #2c2c2e;
+}
+
+/**
+ * DEPRECATED: Use `--c-bg-elv-4`.
+ */
+:root {
+  --c-soft: var(--c-white-soft);
+
+}
+
+.dark {
+  --c-soft: #222226;
+}
+
+/**
+ * DEPRECATED: Use functional colors instead:
+ * - `--c-border-danger-3`
+ * - `--c-text-info-1`
+ * - `--c-bg-success-2`
+ */
+:root {
+  --c-info: #0969da;
+  --c-info-light: #218bff;
+  --c-info-lighter: #54aeff;
+  --c-info-lghtest: #80ccff;
+  --c-info-dark: #0550ae;
+  --c-info-darker: #033d8b;
+  --c-info-darkest: #0a3069;
+  --c-info-dimm-1: rgba(2, 132, 199, 0.12);
+  --c-info-dimm-2: rgba(2, 132, 199, 0.2);
+  --c-info-dimm-3: rgba(2, 132, 199, 0.28);
+  --c-info-text: var(--c-info-light);
+  --c-info-text-light: var(--c-info-lighter);
+  --c-info-text-lighter: var(--c-info-lightest);
+  --c-info-text-dark: var(--c-info);
+  --c-info-text-darker: var(--c-info-dark);
+  --c-info-border: var(--c-info-light);
+  --c-info-border-light: var(--c-info-lighter);
+  --c-info-border-lighter: var(--c-info-lightest);
+  --c-info-border-dark: var(--c-info);
+  --c-info-border-darker: var(--c-info-dark);
+  --c-info-bg: var(--c-info);
+  --c-info-bg-light: var(--c-info-light);
+  --c-info-bg-lighter: var(--c-info-lighter);
+  --c-info-bg-dark: var(--c-info-dark);
+  --c-info-bg-darker: var(--c-info-darker);
+
+  --c-success: #1a7f58;
+  --c-success-light: #2da476;
+  --c-success-lighter: #4ac294;
+  --c-success-lghtest: #6fddaf;
+  --c-success-dark: #116345;
+  --c-success-darker: #044f37;
+  --c-success-darkest: #003d2b;
+  --c-success-dimm-1: rgba(5, 150, 105, 0.12);
+  --c-success-dimm-2: rgba(5, 150, 105, 0.2);
+  --c-success-dimm-3: rgba(5, 150, 105, 0.28);
+  --c-success-text: var(--c-success-light);
+  --c-success-text-light: var(--c-success-lighter);
+  --c-success-text-lighter: var(--c-success-lightest);
+  --c-success-text-dark: var(--c-success);
+  --c-success-text-darker: var(--c-success-dark);
+  --c-success-border: var(--c-success-light);
+  --c-success-border-light: var(--c-success-lighter);
+  --c-success-border-lighter: var(--c-success-lightest);
+  --c-success-border-dark: var(--c-success);
+  --c-success-border-darker: var(--c-success-dark);
+  --c-success-bg: var(--c-success);
+  --c-success-bg-light: var(--c-success-light);
+  --c-success-bg-lighter: var(--c-success-lighter);
+  --c-success-bg-dark: var(--c-success-dark);
+  --c-success-bg-darker: var(--c-success-darker);
+
+  --c-warning: #bf8700;
+  --c-warning-light: #d4a72c;
+  --c-warning-lighter: #eac54f;
+  --c-warning-lghtest: #fae17d;
+  --c-warning-dark: #9a6700;
+  --c-warning-darker: #7d4e00;
+  --c-warning-darkest: #633c01;
+  --c-warning-dimm-1: rgba(202, 138, 4, 0.12);
+  --c-warning-dimm-2: rgba(202, 138, 4, 0.2);
+  --c-warning-dimm-3: rgba(202, 138, 4, 0.28);
+  --c-warning-text: var(--c-warning-light);
+  --c-warning-text-light: var(--c-warning-lighter);
+  --c-warning-text-lighter: var(--c-warning-lightest);
+  --c-warning-text-dark: var(--c-warning);
+  --c-warning-text-darker: var(--c-warning-dark);
+  --c-warning-border: var(--c-warning-light);
+  --c-warning-border-light: var(--c-warning-lighter);
+  --c-warning-border-lighter: var(--c-warning-lightest);
+  --c-warning-border-dark: var(--c-warning);
+  --c-warning-border-darker: var(--c-warning-dark);
+  --c-warning-bg: var(--c-warning);
+  --c-warning-bg-light: var(--c-warning-light);
+  --c-warning-bg-lighter: var(--c-warning-lighter);
+  --c-warning-bg-dark: var(--c-warning-dark);
+  --c-warning-bg-darker: var(--c-warning-darker);
+
+  --c-danger: #cf222e;
+  --c-danger-light: #fa4549;
+  --c-danger-lighter: #ff8182;
+  --c-danger-lghtest: #ffaba8;
+  --c-danger-dark: #a40e26;
+  --c-danger-darker: #82071e;
+  --c-danger-darkest: #660018;
+  --c-danger-dimm-1: rgba(225, 29, 72, 0.12);
+  --c-danger-dimm-2: rgba(225, 29, 72, 0.2);
+  --c-danger-dimm-3: rgba(225, 29, 72, 0.28);
+  --c-danger-text: var(--c-danger-light);
+  --c-danger-text-light: var(--c-danger-lighter);
+  --c-danger-text-lighter: var(--c-danger-lightest);
+  --c-danger-text-dark: var(--c-danger);
+  --c-danger-text-darker: var(--c-danger-dark);
+  --c-danger-border: var(--c-danger-light);
+  --c-danger-border-light: var(--c-danger-lighter);
+  --c-danger-border-lighter: var(--c-danger-lightest);
+  --c-danger-border-dark: var(--c-danger);
+  --c-danger-border-darker: var(--c-danger-dark);
+  --c-danger-bg: var(--c-danger);
+  --c-danger-bg-light: var(--c-danger-light);
+  --c-danger-bg-lighter: var(--c-danger-lighter);
+  --c-danger-bg-dark: var(--c-danger-dark);
+  --c-danger-bg-darker: var(--c-danger-darker);
+}
+
+.dark {
+  --c-info: #1f6feb;
+  --c-info-light: #388bfd;
+  --c-info-lighter: #58a6ff;
+  --c-info-lghtest: #79c0ff;
+  --c-info-dark: #1158c7;
+  --c-info-darker: #0d419d;
+  --c-info-darkest: #0c2d6b;
+  --c-info-dimm-1: rgba(2, 132, 199, 0.12);
+  --c-info-dimm-2: rgba(2, 132, 199, 0.2);
+  --c-info-dimm-3: rgba(2, 132, 199, 0.28);
+  --c-info-text: var(--c-info-light);
+  --c-info-text-light: var(--c-info-lighter);
+  --c-info-text-lighter: var(--c-info-lightest);
+  --c-info-text-dark: var(--c-info);
+  --c-info-text-darker: var(--c-info-dark);
+  --c-info-border: var(--c-info-light);
+  --c-info-border-light: var(--c-info-lighter);
+  --c-info-border-lighter: var(--c-info-lightest);
+  --c-info-border-dark: var(--c-info);
+  --c-info-border-darker: var(--c-info-dark);
+  --c-info-bg: var(--c-info);
+  --c-info-bg-light: var(--c-info-light);
+  --c-info-bg-lighter: var(--c-info-lighter);
+  --c-info-bg-dark: var(--c-info-dark);
+  --c-info-bg-darker: var(--c-info-darker);
+
+  --c-success: #238554;
+  --c-success-light: #2ea069;
+  --c-success-lighter: #3fb978;
+  --c-success-lghtest: #56d38e;
+  --c-success-dark: #196c49;
+  --c-success-darker: #0f533a;
+  --c-success-darkest: #033a29;
+  --c-success-dimm-1: rgba(5, 150, 105, 0.12);
+  --c-success-dimm-2: rgba(5, 150, 105, 0.2);
+  --c-success-dimm-3: rgba(5, 150, 105, 0.28);
+  --c-success-text: var(--c-success-light);
+  --c-success-text-light: var(--c-success-lighter);
+  --c-success-text-lighter: var(--c-success-lightest);
+  --c-success-text-dark: var(--c-success);
+  --c-success-text-darker: var(--c-success-dark);
+  --c-success-border: var(--c-success-light);
+  --c-success-border-light: var(--c-success-lighter);
+  --c-success-border-lighter: var(--c-success-lightest);
+  --c-success-border-dark: var(--c-success);
+  --c-success-border-darker: var(--c-success-dark);
+  --c-success-bg: var(--c-success);
+  --c-success-bg-light: var(--c-success-light);
+  --c-success-bg-lighter: var(--c-success-lighter);
+  --c-success-bg-dark: var(--c-success-dark);
+  --c-success-bg-darker: var(--c-success-darker);
+
+  --c-warning: #bb8009;
+  --c-warning-light: #d29922;
+  --c-warning-lighter: #e3b341;
+  --c-warning-lghtest: #f2cc60;
+  --c-warning-dark: #9e6a03;
+  --c-warning-darker: #845306;
+  --c-warning-darkest: #693e00;
+  --c-warning-dimm-1: rgba(202, 138, 4, 0.12);
+  --c-warning-dimm-2: rgba(202, 138, 4, 0.2);
+  --c-warning-dimm-3: rgba(202, 138, 4, 0.28);
+  --c-warning-text: var(--c-warning-light);
+  --c-warning-text-light: var(--c-warning-lighter);
+  --c-warning-text-lighter: var(--c-warning-lightest);
+  --c-warning-text-dark: var(--c-warning);
+  --c-warning-text-darker: var(--c-warning-dark);
+  --c-warning-border: var(--c-warning-light);
+  --c-warning-border-light: var(--c-warning-lighter);
+  --c-warning-border-lighter: var(--c-warning-lightest);
+  --c-warning-border-dark: var(--c-warning);
+  --c-warning-border-darker: var(--c-warning-dark);
+  --c-warning-bg: var(--c-warning);
+  --c-warning-bg-light: var(--c-warning-light);
+  --c-warning-bg-lighter: var(--c-warning-lighter);
+  --c-warning-bg-dark: var(--c-warning-dark);
+  --c-warning-bg-darker: var(--c-warning-darker);
+
+  --c-danger: #da3633;
+  --c-danger-light: #f85149;
+  --c-danger-lighter: #ff7b72;
+  --c-danger-lghtest: #ffaba8;
+  --c-danger-dark: #b62324;
+  --c-danger-darker: #8e1519;
+  --c-danger-darkest: #67060c;
+  --c-danger-dimm-1: rgba(225, 29, 72, 0.12);
+  --c-danger-dimm-2: rgba(225, 29, 72, 0.2);
+  --c-danger-dimm-3: rgba(225, 29, 72, 0.28);
+  --c-danger-text: var(--c-danger-light);
+  --c-danger-text-light: var(--c-danger-lighter);
+  --c-danger-text-lighter: var(--c-danger-lightest);
+  --c-danger-text-dark: var(--c-danger);
+  --c-danger-text-darker: var(--c-danger-dark);
+  --c-danger-border: var(--c-danger-light);
+  --c-danger-border-light: var(--c-danger-lighter);
+  --c-danger-border-lighter: var(--c-danger-lightest);
+  --c-danger-border-dark: var(--c-danger);
+  --c-danger-border-darker: var(--c-danger-dark);
+  --c-danger-bg: var(--c-danger);
+  --c-danger-bg-light: var(--c-danger-light);
+  --c-danger-bg-lighter: var(--c-danger-lighter);
+  --c-danger-bg-dark: var(--c-danger-dark);
+  --c-danger-bg-darker: var(--c-danger-darker);
+}