@gsc-basic/components 1.0.1 → 1.0.2

package/dist/es/src/Grid/src/components/ColumnFilter.css

@@ -0,0 +1 @@
+[data-v-30969a59],[data-v-30969a59]:before,[data-v-30969a59]:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }[data-v-30969a59]::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.absolute[data-v-30969a59]{position:absolute}.left-0[data-v-30969a59]{left:0}.top-full[data-v-30969a59]{top:100%}.z-20[data-v-30969a59]{z-index:20}.mt-2[data-v-30969a59]{margin-top:.5rem}.mt-3[data-v-30969a59]{margin-top:.75rem}.min-w-44[data-v-30969a59]{min-width:11rem}.flex[data-v-30969a59]{display:flex}.justify-end[data-v-30969a59]{justify-content:flex-end}.gap-2[data-v-30969a59]{gap:.5rem}.p-3[data-v-30969a59]{padding:.75rem}

package/dist/es/src/Grid/src/components/ColumnFilter.vue.js

@@ -0,0 +1,61 @@
+import { ref as b, watch as k, createElementBlock as o, openBlock as n, withModifiers as v, withDirectives as g, createElementVNode as s, toDisplayString as r, unref as c, Fragment as _, renderList as w, vModelSelect as x, withKeys as F, vModelText as C } from "vue";
+import { useLocale as S } from "../../../hooks/useLocale.js";
+import './ColumnFilter.css';/* empty css                  */
+import V from "../../../../_virtual/_plugin-vue_export-helper.js";
+const h = { value: "" }, K = ["value"], M = ["onKeydown"], B = { class: "mt-3 flex gap-2 justify-end" }, D = {
+  __name: "ColumnFilter",
+  props: { value: [String, Number], type: { type: String, default: "text" }, options: Array },
+  emits: ["update:value", "apply", "clear"],
+  setup(u, { emit: y }) {
+    const p = u, a = y, { t: i } = S(), e = b(p.value ?? "");
+    k(() => p.value, (m) => {
+      e.value = m ?? "";
+    });
+    function d() {
+      a("update:value", e.value), a("apply");
+    }
+    function f() {
+      e.value = "", a("update:value", ""), a("clear");
+    }
+    return (m, l) => (n(), o("div", {
+      class: "gsc-popover absolute top-full left-0 mt-2 min-w-44 p-3 z-20",
+      onClick: l[2] || (l[2] = v(() => {
+      }, ["stop"]))
+    }, [
+      u.type === "select" ? g((n(), o("select", {
+        key: 0,
+        "onUpdate:modelValue": l[0] || (l[0] = (t) => e.value = t),
+        class: "gsc-control"
+      }, [
+        s("option", h, r(c(i)("gsc.grid.columnFilter.all")), 1),
+        (n(!0), o(_, null, w(u.options || [], (t) => (n(), o("option", {
+          key: t.value,
+          value: t.value
+        }, r(t.label), 9, K))), 128))
+      ], 512)), [
+        [x, e.value]
+      ]) : g((n(), o("input", {
+        key: 1,
+        "onUpdate:modelValue": l[1] || (l[1] = (t) => e.value = t),
+        type: "text",
+        class: "gsc-control",
+        onKeydown: F(v(d, ["prevent"]), ["enter"])
+      }, null, 40, M)), [
+        [C, e.value]
+      ]),
+      s("div", B, [
+        s("button", {
+          class: "gsc-btn gsc-btn-default",
+          onClick: f
+        }, r(c(i)("gsc.grid.columnFilter.clear")), 1),
+        s("button", {
+          class: "gsc-btn gsc-btn-primary",
+          onClick: d
+        }, r(c(i)("gsc.grid.columnFilter.apply")), 1)
+      ])
+    ]));
+  }
+}, j = /* @__PURE__ */ V(D, [["__scopeId", "data-v-30969a59"]]);
+export {
+  j as default
+};

package/dist/es/src/Grid/src/components/ColumnSettings.css

@@ -0,0 +1 @@
+[data-v-b8d5ba69],[data-v-b8d5ba69]:before,[data-v-b8d5ba69]:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }[data-v-b8d5ba69]::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.absolute[data-v-b8d5ba69]{position:absolute}.relative[data-v-b8d5ba69]{position:relative}.right-0[data-v-b8d5ba69]{right:0}.z-20[data-v-b8d5ba69]{z-index:20}.mt-1[data-v-b8d5ba69]{margin-top:.25rem}.mt-2[data-v-b8d5ba69]{margin-top:.5rem}.max-h-64[data-v-b8d5ba69]{max-height:16rem}.w-72[data-v-b8d5ba69]{width:18rem}.flex[data-v-b8d5ba69]{display:flex}.table[data-v-b8d5ba69]{display:table}.cursor-pointer[data-v-b8d5ba69]{cursor:pointer}.items-center[data-v-b8d5ba69]{align-items:center}.justify-between[data-v-b8d5ba69]{justify-content:space-between}.gap-2[data-v-b8d5ba69]{gap:.5rem}.overflow-auto[data-v-b8d5ba69]{overflow:auto}.truncate[data-v-b8d5ba69]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-md[data-v-b8d5ba69]{border-radius:.375rem}.hover\:bg-\[rgba\(0\,0\,0\,0\.02\)\][data-v-b8d5ba69]:hover{--un-bg-opacity:.02;background-color:#00000005;background-color:rgba(0,0,0,var(--un-bg-opacity))}.p-2[data-v-b8d5ba69]{padding:.5rem}.px-2[data-v-b8d5ba69]{padding-left:.5rem;padding-right:.5rem}.py-1[data-v-b8d5ba69]{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5[data-v-b8d5ba69]{padding-top:.375rem;padding-bottom:.375rem}.pr-1[data-v-b8d5ba69]{padding-right:.25rem}.pt-2[data-v-b8d5ba69]{padding-top:.5rem}.text-sm[data-v-b8d5ba69]{font-size:.875rem;line-height:1.25rem}.text-\[rgba\(0\,0\,0\,0\.88\)\][data-v-b8d5ba69]{--un-text-opacity:.88;color:#000000e0;color:rgba(0,0,0,var(--un-text-opacity))}.font-medium[data-v-b8d5ba69]{font-weight:500}

package/dist/es/src/Grid/src/components/ColumnSettings.vue.js

@@ -0,0 +1,86 @@
+import { ref as v, computed as h, onMounted as k, onBeforeUnmount as _, createElementBlock as r, openBlock as u, createElementVNode as t, createCommentVNode as x, toDisplayString as s, unref as c, withModifiers as y, Fragment as C, renderList as S } from "vue";
+import { useLocale as w } from "../../../hooks/useLocale.js";
+import './ColumnSettings.css';/* empty css                    */
+import E from "../../../../_virtual/_plugin-vue_export-helper.js";
+const V = { class: "relative" }, A = { class: "flex items-center justify-between px-2 py-1" }, L = { class: "text-sm font-medium text-[rgba(0,0,0,0.88)]" }, D = { class: "max-h-64 overflow-auto pr-1 mt-1" }, j = ["checked", "onChange"], B = ["title"], I = { class: "mt-2 flex items-center justify-between gap-2 gsc-divider-top pt-2" }, M = {
+  __name: "ColumnSettings",
+  props: {
+    table: { type: Object, required: !0 }
+  },
+  setup(g) {
+    const m = g, o = v(!1), { t: i } = w(), a = h(() => {
+      try {
+        return m.table.getAllLeafColumns?.() || [];
+      } catch {
+        return [];
+      }
+    });
+    function p() {
+      a.value.forEach((l) => l.toggleVisibility(!0));
+    }
+    function b() {
+      a.value.forEach((l) => l.toggleVisibility(!1));
+    }
+    function d() {
+      o.value = !1;
+    }
+    return k(() => {
+      document.addEventListener("click", d);
+    }), _(() => {
+      document.removeEventListener("click", d);
+    }), (l, n) => (u(), r("div", V, [
+      t("button", {
+        type: "button",
+        class: "gsc-btn gsc-btn-default",
+        onClick: n[0] || (n[0] = (e) => o.value = !o.value)
+      }, s(c(i)("gsc.grid.columnSettings.trigger")), 1),
+      o.value ? (u(), r("div", {
+        key: 0,
+        class: "gsc-popover absolute right-0 mt-2 w-72 p-2 z-20",
+        onClick: n[2] || (n[2] = y(() => {
+        }, ["stop"]))
+      }, [
+        t("div", A, [
+          t("div", L, s(c(i)("gsc.grid.columnSettings.title")), 1),
+          t("button", {
+            type: "button",
+            class: "gsc-btn gsc-btn-text",
+            onClick: n[1] || (n[1] = (e) => o.value = !1)
+          }, s(c(i)("gsc.grid.columnSettings.close")), 1)
+        ]),
+        t("div", D, [
+          (u(!0), r(C, null, S(a.value, (e) => (u(), r("label", {
+            key: e.id,
+            class: "flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-[rgba(0,0,0,0.02)] cursor-pointer"
+          }, [
+            t("input", {
+              type: "checkbox",
+              class: "gsc-checkbox",
+              checked: e.getIsVisible(),
+              onChange: (f) => e.toggleVisibility(!!f.target.checked)
+            }, null, 40, j),
+            t("span", {
+              class: "text-sm truncate",
+              title: String(e.columnDef?.header ?? e.id)
+            }, s(String(e.columnDef?.header ?? e.id)), 9, B)
+          ]))), 128))
+        ]),
+        t("div", I, [
+          t("button", {
+            type: "button",
+            class: "gsc-btn gsc-btn-default px-2",
+            onClick: p
+          }, s(c(i)("gsc.grid.columnSettings.checkAll")), 1),
+          t("button", {
+            type: "button",
+            class: "gsc-btn gsc-btn-default px-2",
+            onClick: b
+          }, s(c(i)("gsc.grid.columnSettings.uncheckAll")), 1)
+        ])
+      ])) : x("", !0)
+    ]));
+  }
+}, F = /* @__PURE__ */ E(M, [["__scopeId", "data-v-b8d5ba69"]]);
+export {
+  F as default
+};

package/dist/es/src/Grid/src/components/DataTable.css

@@ -0,0 +1 @@
+[data-v-94c3d799],[data-v-94c3d799]:before,[data-v-94c3d799]:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }[data-v-94c3d799]::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-material-symbols\:filter-alt-outline[data-v-94c3d799]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' vertical-align='-0.125em' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11 20q-.425 0-.712-.288T10 19v-6L4.2 5.6q-.375-.5-.112-1.05T5 4h14q.65 0 .913.55T19.8 5.6L14 13v6q0 .425-.288.713T13 20zm1-7.7L16.95 6h-9.9zm0 0'/%3E%3C/svg%3E");-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' vertical-align='-0.125em' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11 20q-.425 0-.712-.288T10 19v-6L4.2 5.6q-.375-.5-.112-1.05T5 4h14q.65 0 .913.55T19.8 5.6L14 13v6q0 .425-.288.713T13 20zm1-7.7L16.95 6h-9.9zm0 0'/%3E%3C/svg%3E") no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' vertical-align='-0.125em' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11 20q-.425 0-.712-.288T10 19v-6L4.2 5.6q-.375-.5-.112-1.05T5 4h14q.65 0 .913.55T19.8 5.6L14 13v6q0 .425-.288.713T13 20zm1-7.7L16.95 6h-9.9zm0 0'/%3E%3C/svg%3E") no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;vertical-align:-.125em;display:inline-block;width:1em;height:1em}.absolute[data-v-94c3d799]{position:absolute}.relative[data-v-94c3d799]{position:relative}.sticky[data-v-94c3d799]{position:sticky}.right-0[data-v-94c3d799]{right:0}.top-0[data-v-94c3d799]{top:0}.z-10[data-v-94c3d799]{z-index:10}.ml-auto[data-v-94c3d799]{margin-left:auto}.mt-0\.5[data-v-94c3d799]{margin-top:.125rem}.h-6[data-v-94c3d799]{height:1.5rem}.h-full[data-v-94c3d799]{height:100%}.min-w-0[data-v-94c3d799]{min-width:0}.w-2[data-v-94c3d799]{width:.5rem}.w-full[data-v-94c3d799]{width:100%}.flex[data-v-94c3d799]{display:flex}.flex-1[data-v-94c3d799]{flex:1 1 0%}.shrink-0[data-v-94c3d799]{flex-shrink:0}.table[data-v-94c3d799]{display:table}.cursor-pointer[data-v-94c3d799]{cursor:pointer}.cursor-grab[data-v-94c3d799]{cursor:grab}.cursor-col-resize[data-v-94c3d799]{cursor:col-resize}.select-none[data-v-94c3d799]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.items-start[data-v-94c3d799]{align-items:flex-start}.items-center[data-v-94c3d799]{align-items:center}.gap-1[data-v-94c3d799]{gap:.25rem}.gap-2[data-v-94c3d799]{gap:.5rem}.overflow-auto[data-v-94c3d799]{overflow:auto}.truncate[data-v-94c3d799]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-words[data-v-94c3d799]{overflow-wrap:break-word}.px[data-v-94c3d799]{padding-left:1rem;padding-right:1rem}.px-2[data-v-94c3d799]{padding-left:.5rem;padding-right:.5rem}.px-3[data-v-94c3d799]{padding-left:.75rem;padding-right:.75rem}.py-10[data-v-94c3d799]{padding-top:2.5rem;padding-bottom:2.5rem}.text-center[data-v-94c3d799]{text-align:center}.align-top[data-v-94c3d799]{vertical-align:top}.text-sm[data-v-94c3d799]{font-size:.875rem;line-height:1.25rem}.text-xs[data-v-94c3d799]{font-size:.75rem;line-height:1rem}.text-\[rgba\(0\,0\,0\,0\.25\)\][data-v-94c3d799]{--un-text-opacity:.25;color:#00000040;color:rgba(0,0,0,var(--un-text-opacity))}.text-\[rgba\(0\,0\,0\,0\.45\)\][data-v-94c3d799],.hover\:text-\[rgba\(0\,0\,0\,0\.45\)\][data-v-94c3d799]:hover{--un-text-opacity:.45;color:#00000073;color:rgba(0,0,0,var(--un-text-opacity))}.filter[data-v-94c3d799]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}