@muibook/components 20.0.0 → 20.1.0

package/dist/esm/components/mui-time/index/index.js

@@ -0,0 +1,336 @@
+class x extends HTMLElement {
+  constructor() {
+    super(), this.hour = 12, this.minute = 0, this.ampm = "PM", this.attachShadow({ mode: "open" });
+    const r = /* @__PURE__ */ new Date();
+    this.hour = r.getHours(), this.minute = r.getMinutes();
+  }
+  static get observedAttributes() {
+    return ["value", "format", "step", "start", "end", "variant"];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(r) {
+    this.setAttribute("value", r ?? "");
+  }
+  focus(r) {
+    var i;
+    const s = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".selected, .slot-btn, .column");
+    s && typeof s.focus == "function" ? s.focus(r) : super.focus(r);
+  }
+  connectedCallback() {
+    this.syncAttributes(), this.render();
+  }
+  attributeChangedCallback(r, s, i) {
+    var v, d;
+    s !== i && (this.syncAttributes(), r === "value" && ((v = this.shadowRoot) != null && v.querySelector(".time-picker-container") || (d = this.shadowRoot) != null && d.querySelector(".slots-container")) ? this.updateDOMForValue() : this.render());
+  }
+  updateDOMForValue() {
+    var s, i, v, d;
+    if ((this.getAttribute("variant") || "dial") === "slots") {
+      const g = (s = this.shadowRoot) == null ? void 0 : s.querySelectorAll(".slot-btn");
+      g && g.forEach((c) => {
+        c.getAttribute("data-value") === this.getAttribute("value") ? (c.classList.add("selected"), c.setAttribute("variant", "primary"), c.setAttribute("aria-selected", "true")) : (c.classList.remove("selected"), c.removeAttribute("variant"), c.setAttribute("aria-selected", "false"));
+      });
+    } else {
+      const g = (this.getAttribute("format") || "12h") === "12h", c = this.hour % 12 || 12, b = (i = this.shadowRoot) == null ? void 0 : i.getElementById("col-hours"), m = (v = this.shadowRoot) == null ? void 0 : v.getElementById("col-minutes"), y = (d = this.shadowRoot) == null ? void 0 : d.getElementById("col-ampm");
+      b && this.scrollToValue(b, g ? c : this.hour), m && this.scrollToValue(m, this.minute), y && this.scrollToValue(y, this.ampm);
+    }
+  }
+  scrollToValue(r, s) {
+    const i = r.querySelector(`[data-value="${s}"]`);
+    if (i) {
+      const v = i.offsetTop + i.offsetHeight / 2, d = r.offsetHeight / 2;
+      r.scrollTop = v - d;
+    }
+  }
+  syncAttributes() {
+    const r = this.getAttribute("value");
+    if (r) {
+      const s = r.trim().split(" "), i = s[0].split(":");
+      i.length === 2 && (this.hour = parseInt(i[0], 10) || 0, this.minute = parseInt(i[1], 10) || 0), s[1] && (s[1].toUpperCase() === "AM" || s[1].toUpperCase() === "PM") ? this.ampm = s[1].toUpperCase() : this.ampm = this.hour >= 12 ? "PM" : "AM";
+    }
+  }
+  updateTime() {
+    const r = this.getAttribute("format") || "12h";
+    let s = "";
+    if (r === "12h") {
+      let i = this.hour % 12;
+      i === 0 && (i = 12), s = `${String(i).padStart(2, "0")}:${String(this.minute).padStart(2, "0")} ${this.ampm}`;
+    } else {
+      let i = this.hour;
+      s = `${String(i).padStart(2, "0")}:${String(this.minute).padStart(2, "0")}`;
+    }
+    this.setAttribute("value", s), this.dispatchEvent(new CustomEvent("change", { detail: { value: s }, bubbles: !0, composed: !0 }));
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    (this.getAttribute("variant") || "dial") === "slots" ? this.renderSlots() : this.renderDial();
+  }
+  renderSlots() {
+    const r = parseInt(this.getAttribute("start") || "9", 10), s = parseInt(this.getAttribute("end") || "17", 10), i = parseInt(this.getAttribute("step") || "60", 10), d = (this.getAttribute("format") || "12h") === "12h", g = [];
+    for (let e = r; e <= s; e++)
+      for (let n = 0; n < 60 && !(e === s && n > 0); n += i) {
+        let u = "", t = `${String(e).padStart(2, "0")}:${String(n).padStart(2, "0")}`;
+        if (d) {
+          const o = e >= 12 ? "PM" : "AM";
+          u = `${e % 12 === 0 ? 12 : e % 12}:${String(n).padStart(2, "0")} ${o}`;
+        } else
+          u = t;
+        g.push({ label: u, val: d ? u : t, h: e, m: n });
+      }
+    const c = this.getAttribute("value") || "", b = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          height: var(--time-picker-height);
+          font-family: inherit;
+          --time-picker-height: 24rem;
+        }
+        .slots-container {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: transparent;
+        }
+        .slots-scroll {
+          flex: 1 1 auto;
+          overflow-y: auto;
+          overflow-x: hidden;
+          margin: var(--stroke-size-200);
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-100);
+          scrollbar-width: none; /* Firefox */
+        }
+        .slots-scroll::-webkit-scrollbar {
+          display: none; /* Chrome/Safari */
+        }
+        .slot-btn {
+          width: 100%;
+          font-variant-numeric: tabular-nums;
+        }
+        :host([slotted]) .slot-btn {
+          --action-radius-small: var(--stroke-size-200);
+        }
+      </style>
+      <div class="slots-container">
+        <div class="slots-scroll">
+          ${g.map(
+        (e) => `
+            <mui-button variant="${c === e.val ? "primary" : "tertiary"}" size="small" class="slot-btn" data-value="${e.val}" data-h="${e.h}" data-m="${e.m}">
+              ${e.label}
+            </mui-button>
+          `
+      ).join("")}
+        </div>
+      </div>
+    `
+    );
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = b, this.shadowRoot.querySelectorAll(".slot-btn").forEach((e) => {
+      e.addEventListener("click", () => {
+        const n = e.getAttribute("data-value"), u = parseInt(e.getAttribute("data-h"), 10), t = parseInt(e.getAttribute("data-m"), 10);
+        this.hour = u, this.minute = t, d && (this.ampm = u >= 12 ? "PM" : "AM"), this.setAttribute("value", n), this.dispatchEvent(new CustomEvent("change", { detail: { value: n }, bubbles: !0, composed: !0 })), this.renderSlots();
+      });
+    });
+    const y = this.shadowRoot.querySelector(".slots-scroll");
+    y == null || y.addEventListener("keydown", (e) => {
+      var u, t, o;
+      const n = e;
+      if (n.key === "ArrowDown" || n.key === "ArrowUp") {
+        n.preventDefault();
+        const a = this.shadowRoot ? this.shadowRoot.activeElement : null;
+        let p = a != null && a.classList.contains("slot-btn") ? a : null;
+        if (!p) {
+          p = ((u = this.shadowRoot) == null ? void 0 : u.querySelector(".slot-btn[variant='primary']")) || ((t = this.shadowRoot) == null ? void 0 : t.querySelector(".slot-btn")), p == null || p.focus();
+          return;
+        }
+        const f = Array.from(((o = this.shadowRoot) == null ? void 0 : o.querySelectorAll(".slot-btn")) || []), A = f.indexOf(p);
+        if (A === -1) return;
+        let l = n.key === "ArrowDown" ? A + 1 : A - 1;
+        l < 0 && (l = 0), l >= f.length && (l = f.length - 1), f[l].focus();
+      }
+    }), requestAnimationFrame(() => {
+      var n;
+      const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".slot-btn.selected");
+      e && e.scrollIntoView({ behavior: "auto", block: "center" });
+    });
+  }
+  renderDial() {
+    const r = this.getAttribute("format") || "12h", s = parseInt(this.getAttribute("step") || "1", 10), i = r === "12h", v = i ? Array.from({ length: 12 }, (t, o) => o === 0 ? 12 : o) : Array.from({ length: 24 }, (t, o) => o), d = Array.from({ length: Math.floor(60 / s) }, (t, o) => o * s), g = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          font-family: inherit;
+          --time-picker-height: 24rem;
+          --time-item-height: 4rem;
+        }
+        .time-picker-container {
+          display: flex;
+          height: var(--time-picker-height);
+          background: var(--input-background);
+          border-radius: var(--time-picker-radius, var(--radius-200));
+          position: relative;
+          overflow: hidden;
+          padding: 0 var(--space-200);
+          gap: var(--space-100);
+        }
+        .time-picker-container::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: var(--space-200);
+          right: var(--space-200);
+          height: var(--time-item-height);
+          transform: translateY(-50%);
+          background: var(--action-tertiary-background-hover);
+          border-radius: var(--radius-100);
+          pointer-events: none;
+          z-index: 1;
+        }
+        /* Top and Bottom faded masks */
+        .time-picker-container::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: linear-gradient(
+            to bottom, 
+            var(--input-background) 0%, 
+            transparent 30%, 
+            transparent 70%, 
+            var(--input-background) 100%
+          );
+          pointer-events: none;
+          z-index: 2;
+        }
+        .column {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow-y: scroll;
+          scroll-snap-type: y mandatory;
+          scrollbar-width: none;
+          z-index: 2;
+          border-radius: var(--radius-100);
+        }
+        .column:focus-visible {
+          outline: 2px solid var(--action-primary-background);
+          outline-offset: -2px;
+        }
+        .column::-webkit-scrollbar {
+          display: none; /* Chrome/Safari */
+        }
+        /* Add padding to allow first and last items to reach the center */
+        .column::before,
+        .column::after {
+          content: "";
+          display: block;
+          flex: 0 0 calc(50% - (var(--time-item-height) / 2));
+        }
+        .item {
+          flex: 0 0 var(--time-item-height);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: var(--text-font-size-l);
+          color: var(--text-color);
+          scroll-snap-align: center;
+          cursor: pointer;
+          user-select: none;
+          z-index: 3;
+          position: relative;
+          font-variant-numeric: tabular-nums;
+        }
+      </style>
+      <div class="time-picker-container">
+        <!-- Hours -->
+        <div class="column" id="col-hours">
+          ${v.map((t) => `<div class="item" data-value="${t}">${String(t).padStart(2, "0")}</div>`).join("")}
+        </div>
+        <!-- Minutes -->
+        <div class="column" id="col-minutes">
+          ${d.map((t) => `<div class="item" data-value="${t}">${String(t).padStart(2, "0")}</div>`).join("")}
+        </div>
+        <!-- AM/PM -->
+        ${i ? `
+          <div class="column" id="col-ampm">
+            <div class="item" data-value="AM">AM</div>
+            <div class="item" data-value="PM">PM</div>
+          </div>
+        ` : ""}
+      </div>
+    `
+    );
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = g;
+    const c = this.shadowRoot.getElementById("col-hours"), b = this.shadowRoot.getElementById("col-minutes"), m = this.shadowRoot.getElementById("col-ampm");
+    let y;
+    const e = (t, o) => {
+      clearTimeout(y), y = setTimeout(() => {
+        const a = t.scrollTop + t.offsetHeight / 2, p = Array.from(t.querySelectorAll(".item"));
+        let f = p[0], A = 1 / 0;
+        if (p.forEach((l) => {
+          const h = l.offsetTop + l.offsetHeight / 2, w = Math.abs(a - h);
+          w < A && (A = w, f = l);
+        }), f) {
+          const l = f.getAttribute("data-value");
+          if (o === "hour") {
+            const h = parseInt(l, 10);
+            this.getAttribute("format") === "12h" ? this.hour = h === 12 && this.ampm === "AM" ? 0 : h === 12 && this.ampm === "PM" ? 12 : this.ampm === "PM" ? h + 12 : h : this.hour = h;
+          } else if (o === "minute")
+            this.minute = parseInt(l, 10);
+          else if (o === "ampm") {
+            this.ampm = l;
+            const h = this.hour % 12 || 12;
+            this.hour = l === "AM" ? h === 12 ? 0 : h : h === 12 ? 12 : h + 12;
+          }
+          this.updateTime();
+        }
+      }, 150);
+    };
+    c.addEventListener("scroll", () => e(c, "hour")), b.addEventListener("scroll", () => e(b, "minute")), m && m.addEventListener("scroll", () => e(m, "ampm"));
+    const n = (t) => {
+      t.addEventListener("click", (o) => {
+        const a = o.target.closest(".item");
+        a && a.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+    }, u = (t) => {
+      t.setAttribute("tabindex", "0"), t.addEventListener("keydown", (o) => {
+        if (o.key === "ArrowUp" || o.key === "ArrowDown") {
+          o.preventDefault();
+          const a = Array.from(t.querySelectorAll(".item")), p = t.scrollTop + t.offsetHeight / 2;
+          let f = 0, A = 1 / 0;
+          a.forEach((h, w) => {
+            const S = h.offsetTop + h.offsetHeight / 2, k = Math.abs(p - S);
+            k < A && (A = k, f = w);
+          });
+          let l = o.key === "ArrowUp" ? f - 1 : f + 1;
+          l < 0 && (l = 0), l >= a.length && (l = a.length - 1), a[l].scrollIntoView({ behavior: "smooth", block: "center" });
+        } else if (o.key === "ArrowLeft") {
+          o.preventDefault();
+          const a = t.previousElementSibling;
+          a && a.classList.contains("column") && a.focus();
+        } else if (o.key === "ArrowRight") {
+          o.preventDefault();
+          const a = t.nextElementSibling;
+          a && a.classList.contains("column") && a.focus();
+        }
+      });
+    };
+    n(c), n(b), m && n(m), u(c), u(b), m && u(m), requestAnimationFrame(() => {
+      const t = this.hour % 12 || 12;
+      this.scrollToValue(c, i ? t : this.hour), this.scrollToValue(b, this.minute), m && this.scrollToValue(m, this.ampm);
+    });
+  }
+}
+customElements.get("mui-time") || customElements.define("mui-time", x);

package/dist/esm/components/mui-time-picker/index.js

@@ -0,0 +1,126 @@
+import "../mui-dropdown/index.js";
+import "../mui-input/index.js";
+import "../mui-time/index/index.js";
+import "../mui-icons/timer/index.js";
+class c extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t ?? "");
+  }
+  focus(t) {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("mui-input");
+    e && typeof e.focus == "function" ? e.focus(t) : super.focus(t);
+  }
+  connectedCallback() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+          box-sizing: border-box;
+        }
+        ::slotted(.time-pane) {
+          flex: 1 1 auto;
+          min-width: 160px;
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
+}
+customElements.get("mui-time-picker-popover") || customElements.define("mui-time-picker-popover", c);
+class m extends HTMLElement {
+  constructor() {
+    super(), this.selectedTime = "", this.initialized = !1, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["value", "type", "label", "hide-label", "optional", "size", "variant"];
+  }
+  connectedCallback() {
+    this.syncAttributes(), this.render(), this.setupListeners(), this.initialized = !0;
+  }
+  attributeChangedCallback(t, e, i) {
+    var n, s;
+    if (e !== i)
+      if (t === "value") {
+        if (this.syncAttributes(), this.initialized) {
+          const o = (n = this.shadowRoot) == null ? void 0 : n.querySelector("mui-input"), u = (s = this.shadowRoot) == null ? void 0 : s.querySelector("mui-time");
+          o && o.setAttribute("value", this.getAttribute("value") || ""), u && this.selectedTime && u.setAttribute("value", this.selectedTime);
+        }
+      } else
+        this.render(), this.setupListeners();
+  }
+  syncAttributes() {
+    this.selectedTime = this.getAttribute("value") || "";
+  }
+  setupListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector("mui-time"), e = this.shadowRoot.querySelector("mui-input"), i = () => {
+      this.setAttribute("value", this.selectedTime), e && e.setAttribute("value", this.selectedTime), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.selectedTime }, bubbles: !0, composed: !0 }));
+    };
+    t && t.addEventListener("change", (s) => {
+      const o = s.detail;
+      o && o.value && (this.selectedTime = o.value, i(), (this.getAttribute("type") || "time") === "timeslot" && requestAnimationFrame(() => {
+        var a;
+        const r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("mui-dropdown");
+        r && typeof r.close == "function" && r.close();
+      }));
+    });
+    const n = this.shadowRoot.querySelector("mui-time-picker-popover");
+    n && n.addEventListener("click", (s) => {
+      s.stopPropagation();
+    });
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("value") || "", e = this.getAttribute("type") || "time", i = this.getAttribute("label") || "", n = this.hasAttribute("hide-label") ? "hide-label" : "", s = this.hasAttribute("optional") ? "optional" : "", o = this.getAttribute("size") || "medium", u = this.getAttribute("variant") || "", a = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+        }
+        .time-pane {
+          padding: var(--space-200);
+          height: 310px;
+        }
+        mui-dropdown {
+          width: 100%;
+          --dropdown-min-width: auto;
+        }
+      </style>
+      <mui-dropdown persistent>
+        <mui-input 
+          slot="action" 
+          value="${t}"
+          label="${i}"
+          size="${o}"
+          variant="${u}"
+          ${n}
+          ${s}
+          readonly>
+          <mui-button slot="after"><mui-icon-timer></mui-icon-timer></mui-button>
+        </mui-input>
+
+        <mui-time-picker-popover>
+          <div class="time-pane">
+            <mui-time variant="${e === "timeslot" ? "slots" : "wheels"}" value="${this.selectedTime}" slotted style="--time-picker-radius: var(--stroke-size-200);"></mui-time>
+          </div>
+        </mui-time-picker-popover>
+      </mui-dropdown>
+    `
+    );
+    this.shadowRoot.innerHTML = a;
+  }
+}
+customElements.get("mui-time-picker") || customElements.define("mui-time-picker", m);

package/dist/esm/components/mui-video-thumbnail/index.js

@@ -44,7 +44,7 @@ class n extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getThemedSrc(), t = this.getAttribute("alt") || "", a = this.getAttribute("aspect-ratio") || "var(--video-thumbnail-aspect-ratio, 16 / 9)", r = this.getAttribute("loading") || "lazy", i = this.getAttribute("decoding") || "async", o = this.hasAttribute("play") && !this.hasAttribute("hide-play"), s = this.hasAttribute("overlay");
+    const e = this.getThemedSrc(), t = this.getAttribute("alt") || "", a = this.getAttribute("aspect-ratio") || "var(--video-thumbnail-aspect-ratio, 16 / 9)", i = this.getAttribute("loading") || "lazy", r = this.getAttribute("decoding") || "async", o = this.hasAttribute("play") && !this.hasAttribute("hide-play"), s = this.hasAttribute("overlay");
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -133,7 +133,7 @@ class n extends HTMLElement {
           width: var(--video-thumbnail-play-size, var(--action-icon-only-size-large));
           height: var(--video-thumbnail-play-size, var(--action-icon-only-size-large));
           border-radius: var(--video-thumbnail-play-size, var(--action-icon-only-size-large));
-          background: var(--video-thumbnail-play-background, var(--black-opacity-60));
+          background: var(--video-thumbnail-play-background, var(--black-opacity-80));
           color: var(--video-thumbnail-play-color, var(--white));
           opacity: var(--video-thumbnail-play-opacity, 0);
           transform: translate(-50%, -50%);
@@ -153,7 +153,7 @@ class n extends HTMLElement {
           display: none;
         }
 
-        .play mui-icon-play-rectangle {
+        .play mui-icon-play-fill {
           fill: currentColor;
         }
 
@@ -170,10 +170,10 @@ class n extends HTMLElement {
 
       <div class="media">
         <figure class="frame" style="--video-thumbnail-aspect-ratio-active: ${this.escapeAttribute(a)}">
-          ${e ? `<img class="image" src="${this.escapeAttribute(e)}" alt="${this.escapeAttribute(t)}" loading="${this.escapeAttribute(r)}" decoding="${this.escapeAttribute(i)}" />` : '<slot name="image"></slot>'}
+          ${e ? `<img class="image" src="${this.escapeAttribute(e)}" alt="${this.escapeAttribute(t)}" loading="${this.escapeAttribute(i)}" decoding="${this.escapeAttribute(r)}" />` : '<slot name="image"></slot>'}
           ${s ? '<span class="overlay" aria-hidden="true"></span>' : ""}
           <span class="play" aria-hidden="true" ${o ? "" : "hidden"}>
-            <mui-icon-play-rectangle size="large"></mui-icon-play-rectangle>
+            <mui-icon-play-fill size="large"></mui-icon-play-fill>
           </span>
         </figure>
         <slot name="meta"></slot>

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Sun, 31 May 2026 05:18:09 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Mon, 06 Jul 2026 06:17:20 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */
@@ -41,6 +41,7 @@
 
 :where(html) {
   --font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-size-10: 0.9rem;
   --font-size-15: 1.1rem;
   --font-size-25: 1.2rem;
   --font-size-50: 1.4rem;
@@ -58,6 +59,7 @@
   --font-weight-500: 500;
   --font-weight-600: 600;
   --font-weight-700: 700;
+  --line-height-10: 1.5;
   --line-height-15: 1.63636364;
   --line-height-25: 1.5;
   --line-height-50: 1.5;
@@ -97,19 +99,21 @@
   --white-opacity-80: oklch(100% 0.00011 271.152 / 0.8);
   --white-opacity-90: oklch(100% 0.00011 271.152 / 0.9);
   --white-opacity-100: oklch(100% 0.00011 271.152);
-  --grey-100: oklch(97.015% 0.00011 271.152);
-  --grey-150: oklch(94.047% 0.00009 271.152);
+  --grey-50: oklch(96.015% 0.00011 271.152);
+  --grey-100: oklch(94.047% 0.00009 271.152);
   --grey-200: oklch(92.191% 0.0001 271.152);
   --grey-300: oklch(84.522% 0.0001 271.152);
   --grey-400: oklch(73.802% 0.00008 271.152);
   --grey-500: oklch(62.675% 0.00007 271.152);
   --grey-600: oklch(51.028% 0.00006 271.152);
   --grey-700: oklch(44.953% 0.00005 271.152);
-  --grey-800: oklch(38.666% 0.00004 271.152);
-  --grey-900: oklch(32.109% 0.00004 271.152);
-  --grey-1000: oklch(25.197% 0.00003 271.152);
-  --grey-1100: oklch(17.764% 0.00002 271.152);
-  --grey-1200: oklch(11.492% 0.00001 271.152);
+  --grey-800: oklch(40.666% 0.00004 271.152);
+  --grey-900: oklch(35.109% 0.00004 271.152);
+  --grey-1000: oklch(28.5% 0.00003 271.152);
+  --grey-1100: oklch(25.197% 0.00003 271.152);
+  --grey-1200: oklch(21.4% 0.00002 271.152);
+  --grey-1300: oklch(17.764% 0.00002 271.152);
+  --grey-1400: oklch(11.492% 0.00001 271.152);
   --red-100: oklch(98% 0.03 25.0);
   --red-200: oklch(95% 0.10 25.0);
   --red-300: oklch(82% 0.14 25.0);