@mar7th/march7th-ui 1.0.0

package/demo/march7th-theme.js

@@ -0,0 +1,296 @@
+/*
+ * March7th Theme Runtime
+ * Provides reusable light/dark/system mode and dynamic hue management.
+ */
+(function (global) {
+  "use strict";
+
+  var MODE_LIGHT = "light";
+  var MODE_DARK = "dark";
+  var MODE_SYSTEM = "system";
+
+  var defaultOptions = {
+    defaultHue: 215,
+    defaultMode: MODE_SYSTEM,
+    storagePrefix: "m7-theme",
+    darkClass: "m7-dark",
+    transitionClass: "m7-theme-transitioning",
+    root: null,
+    applySystemColorScheme: true,
+    autoInit: true
+  };
+
+  var options = copy(defaultOptions);
+  var mediaQuery = null;
+  var mediaListener = null;
+  var initialized = false;
+
+  function copy(source) {
+    var target = {};
+    Object.keys(source).forEach(function (key) {
+      target[key] = source[key];
+    });
+    return target;
+  }
+
+  function assign(target) {
+    for (var i = 1; i < arguments.length; i += 1) {
+      var source = arguments[i] || {};
+      Object.keys(source).forEach(function (key) {
+        target[key] = source[key];
+      });
+    }
+    return target;
+  }
+
+  function getRoot() {
+    return options.root || global.document.documentElement;
+  }
+
+  function getStorageKey(key) {
+    return options.storagePrefix + ":" + key;
+  }
+
+  function canUseStorage() {
+    try {
+      var testKey = getStorageKey("__test__");
+      global.localStorage.setItem(testKey, "1");
+      global.localStorage.removeItem(testKey);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  function readStorage(key) {
+    if (!canUseStorage()) return null;
+    return global.localStorage.getItem(getStorageKey(key));
+  }
+
+  function writeStorage(key, value) {
+    if (!canUseStorage()) return;
+    global.localStorage.setItem(getStorageKey(key), String(value));
+  }
+
+  function removeStorage(key) {
+    if (!canUseStorage()) return;
+    global.localStorage.removeItem(getStorageKey(key));
+  }
+
+  function supportsMatchMedia() {
+    return typeof global.matchMedia === "function";
+  }
+
+  function getSystemMode() {
+    if (!supportsMatchMedia()) return MODE_LIGHT;
+    return global.matchMedia("(prefers-color-scheme: dark)").matches ? MODE_DARK : MODE_LIGHT;
+  }
+
+  function normalizeMode(mode) {
+    if (mode === MODE_LIGHT || mode === MODE_DARK || mode === MODE_SYSTEM) {
+      return mode;
+    }
+    return options.defaultMode;
+  }
+
+  function resolveMode(mode) {
+    var normalizedMode = normalizeMode(mode);
+    return normalizedMode === MODE_SYSTEM ? getSystemMode() : normalizedMode;
+  }
+
+  function normalizeHue(hue) {
+    var nextHue = Number.parseInt(hue, 10);
+    if (Number.isNaN(nextHue)) nextHue = options.defaultHue;
+    nextHue = nextHue % 360;
+    if (nextHue < 0) nextHue += 360;
+    return nextHue;
+  }
+
+  function getMode() {
+    return normalizeMode(readStorage("mode") || options.defaultMode);
+  }
+
+  function getResolvedMode() {
+    return resolveMode(getMode());
+  }
+
+  function getHue() {
+    var storedHue = readStorage("hue");
+    return normalizeHue(storedHue == null ? options.defaultHue : storedHue);
+  }
+
+  function dispatch(name, detail) {
+    if (typeof global.CustomEvent === "function") {
+      global.dispatchEvent(new CustomEvent(name, { detail: detail }));
+    }
+  }
+
+  function withTransitionProtection(callback) {
+    var root = getRoot();
+    root.classList.add(options.transitionClass);
+    callback();
+    global.requestAnimationFrame(function () {
+      global.requestAnimationFrame(function () {
+        root.classList.remove(options.transitionClass);
+      });
+    });
+  }
+
+  function applyHue(hue, shouldDispatch) {
+    var normalizedHue = normalizeHue(hue);
+    var root = getRoot();
+    root.style.setProperty("--m7-hue", String(normalizedHue));
+    root.setAttribute("data-m7-hue", String(normalizedHue));
+
+    if (shouldDispatch) {
+      dispatch("march7th-hue-change", {
+        hue: normalizedHue,
+        mode: getMode(),
+        resolvedMode: getResolvedMode()
+      });
+    }
+  }
+
+  function applyMode(mode, shouldDispatch) {
+    var normalizedMode = normalizeMode(mode);
+    var resolvedMode = resolveMode(normalizedMode);
+    var isDark = resolvedMode === MODE_DARK;
+    var root = getRoot();
+
+    root.classList.toggle(options.darkClass, isDark);
+    root.setAttribute("data-m7-mode", normalizedMode);
+    root.setAttribute("data-m7-resolved-mode", resolvedMode);
+
+    if (options.applySystemColorScheme) {
+      root.style.colorScheme = isDark ? "dark" : "light";
+    }
+
+    if (shouldDispatch) {
+      dispatch("march7th-theme-change", {
+        mode: normalizedMode,
+        resolvedMode: resolvedMode,
+        isDark: isDark,
+        hue: getHue()
+      });
+    }
+  }
+
+  function setHue(hue) {
+    var normalizedHue = normalizeHue(hue);
+    writeStorage("hue", normalizedHue);
+    applyHue(normalizedHue, true);
+  }
+
+  function setMode(mode) {
+    var normalizedMode = normalizeMode(mode);
+    if (mode !== normalizedMode) {
+      throw new Error("Invalid March7th theme mode: " + mode);
+    }
+
+    writeStorage("mode", normalizedMode);
+    withTransitionProtection(function () {
+      applyMode(normalizedMode, true);
+    });
+    setupSystemListener();
+  }
+
+  function cleanupSystemListener() {
+    if (!mediaQuery || !mediaListener) return;
+
+    if (typeof mediaQuery.removeEventListener === "function") {
+      mediaQuery.removeEventListener("change", mediaListener);
+    } else if (typeof mediaQuery.removeListener === "function") {
+      mediaQuery.removeListener(mediaListener);
+    }
+
+    mediaQuery = null;
+    mediaListener = null;
+  }
+
+  function setupSystemListener() {
+    cleanupSystemListener();
+
+    if (getMode() !== MODE_SYSTEM || !supportsMatchMedia()) return;
+
+    mediaQuery = global.matchMedia("(prefers-color-scheme: dark)");
+    mediaListener = function () {
+      withTransitionProtection(function () {
+        applyMode(MODE_SYSTEM, true);
+      });
+    };
+
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", mediaListener);
+    } else if (typeof mediaQuery.addListener === "function") {
+      mediaQuery.addListener(mediaListener);
+    }
+  }
+
+  function reset() {
+    removeStorage("mode");
+    removeStorage("hue");
+    withTransitionProtection(function () {
+      applyHue(options.defaultHue, true);
+      applyMode(options.defaultMode, true);
+    });
+    setupSystemListener();
+  }
+
+  function updateOptions(userOptions) {
+    options = assign(copy(defaultOptions), options, userOptions || {});
+    if (!options.root) options.root = global.document.documentElement;
+    options.defaultHue = normalizeHue(options.defaultHue);
+    options.defaultMode = normalizeMode(options.defaultMode);
+  }
+
+  function init(userOptions) {
+    updateOptions(userOptions);
+    applyHue(getHue(), false);
+    applyMode(getMode(), false);
+    setupSystemListener();
+    initialized = true;
+
+    dispatch("march7th-theme-ready", {
+      mode: getMode(),
+      resolvedMode: getResolvedMode(),
+      isDark: getResolvedMode() === MODE_DARK,
+      hue: getHue()
+    });
+  }
+
+  function createInlineInitializer(userOptions) {
+    var config = assign(copy(defaultOptions), userOptions || {});
+    return "(function(){var p='" + config.storagePrefix + "';var d='" + config.defaultMode + "';var h='" + config.defaultHue + "';var m=localStorage.getItem(p+':mode')||d;var v=localStorage.getItem(p+':hue')||h;var r=m==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):m;document.documentElement.style.setProperty('--m7-hue',v);document.documentElement.classList.toggle('" + config.darkClass + "',r==='dark');document.documentElement.setAttribute('data-m7-mode',m);document.documentElement.setAttribute('data-m7-resolved-mode',r);})();";
+  }
+
+  var api = {
+    init: init,
+    setMode: setMode,
+    getMode: getMode,
+    getResolvedMode: getResolvedMode,
+    setHue: setHue,
+    getHue: getHue,
+    reset: reset,
+    createInlineInitializer: createInlineInitializer,
+    constants: {
+      MODE_LIGHT: MODE_LIGHT,
+      MODE_DARK: MODE_DARK,
+      MODE_SYSTEM: MODE_SYSTEM
+    },
+    get initialized() {
+      return initialized;
+    }
+  };
+
+  global.March7thTheme = api;
+
+  if (global.document && defaultOptions.autoInit) {
+    if (global.document.readyState === "loading") {
+      global.document.addEventListener("DOMContentLoaded", function () {
+        if (!initialized) init();
+      });
+    } else {
+      init();
+    }
+  }
+})(window);

package/demo/march7th-tokens.css

@@ -0,0 +1,327 @@
+/*
+ * March7th Design Tokens
+ * Pure CSS variables for colors, spacing, radius, shadows, blur, breakpoints and responsive tokens.
+ * Usage:
+ *   <link rel="stylesheet" href="/theme/march7th-tokens.css">
+ */
+
+:root {
+  color-scheme: light;
+
+  --m7-hue: 215;                    /* 基础色调值(蓝色系)，用于动态计算其他颜色 */
+  --m7-radius-large: 1rem;          /* 大圆角半径，用于卡片、按钮等大组件 */
+  --m7-content-delay: 150ms;        /* 内容显示延迟，用于动画时序控制 */
+
+  --m7-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --m7-ease-decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --m7-duration-fast: 150ms;
+  --m7-duration-normal: 200ms;
+  --m7-duration-medium: 300ms;
+  --m7-duration-slow: 400ms;
+
+  --m7-primary: #5b8def; /* 主品牌色/强调色，随 --m7-hue 动态变化 */
+  --m7-primary: oklch(0.70 0.14 var(--m7-hue)); /* 主品牌色/强调色，随 --m7-hue 动态变化 */
+  --m7-page-bg: #f1f4f8; /* 页面整体背景色 */
+  --m7-page-bg: oklch(0.95 0.01 var(--m7-hue)); /* 页面整体背景色 */
+  --m7-card-bg: #ffffff; /* 普通卡片背景色 */
+  --m7-card-bg-transparent: rgba(255, 255, 255, 0.8); /* 半透明卡片背景色，用于毛玻璃/壁纸场景 */
+  --m7-float-panel-bg: #ffffff; /* 浮动面板/弹出层背景色 */
+
+  --m7-btn-content: #3671ba; /* 常规按钮文字/图标颜色 */
+  --m7-btn-content: oklch(0.55 0.12 var(--m7-hue)); /* 常规按钮文字/图标颜色 */
+  --m7-btn-regular-bg: #eef4fb; /* 常规按钮默认背景色 */
+  --m7-btn-regular-bg: oklch(0.95 0.025 var(--m7-hue)); /* 常规按钮默认背景色 */
+  --m7-btn-regular-bg-hover: #dcebf8; /* 常规按钮悬停背景色 */
+  --m7-btn-regular-bg-hover: oklch(0.90 0.05 var(--m7-hue)); /* 常规按钮悬停背景色 */
+  --m7-btn-regular-bg-active: #c9def2; /* 常规按钮按下背景色 */
+  --m7-btn-regular-bg-active: oklch(0.85 0.08 var(--m7-hue)); /* 常规按钮按下背景色 */
+  --m7-btn-plain-bg-hover: var(--m7-btn-regular-bg); /* 朴素按钮悬停背景色 */
+  --m7-btn-plain-bg-active: oklch(0.98 0.01 var(--m7-hue)); /* 朴素按钮按下背景色 */
+  --m7-btn-card-bg-hover: oklch(0.98 0.005 var(--m7-hue)); /* 卡片内按钮悬停背景色 */
+  --m7-btn-card-bg-active: oklch(0.90 0.03 var(--m7-hue)); /* 卡片内按钮按下背景色 */
+
+  --m7-text: #1f2937; /* 默认正文文字颜色 */
+  --m7-text: oklch(0.25 0.02 var(--m7-hue)); /* 默认正文文字颜色 */
+  --m7-text-strong: rgba(0, 0, 0, 0.9); /* 强文本颜色，用于标题/重要内容 */
+  --m7-text-regular: rgba(0, 0, 0, 0.75); /* 常规文本颜色，用于正文 */
+  --m7-text-muted: rgba(0, 0, 0, 0.5); /* 弱化文本颜色，用于摘要/说明 */
+  --m7-text-subtle: rgba(0, 0, 0, 0.3); /* 极弱文本颜色，用于辅助提示 */
+  --m7-title-active: oklch(0.60 0.10 var(--m7-hue)); /* 激活标题/当前项文字颜色 */
+  --m7-content-meta: rgba(0, 0, 0, 0.7); /* 元信息文字颜色 */
+
+  --m7-line-divider: rgba(0, 0, 0, 0.08); /* 轻量分割线颜色 */
+  --m7-line-color: rgba(0, 0, 0, 0.1); /* 普通线条/边框颜色 */
+  --m7-meta-divider: rgba(0, 0, 0, 0.2); /* 元信息分隔线颜色 */
+
+  --m7-inline-code-bg: var(--m7-btn-regular-bg); /* 行内代码背景色 */
+  --m7-inline-code-color: var(--m7-btn-content); /* 行内代码文字颜色 */
+  --m7-selection-bg: oklch(0.90 0.05 var(--m7-hue)); /* 普通文本选中背景色 */
+  --m7-codeblock-selection: oklch(0.40 0.08 var(--m7-hue)); /* 代码块内文本选中背景色 */
+  --m7-codeblock-bg: #20242b; /* 代码块背景色 */
+  --m7-codeblock-bg: oklch(0.17 0.015 var(--m7-hue)); /* 代码块背景色 */
+  --m7-codeblock-topbar-bg: #3d4652; /* 代码块顶部栏背景色 */
+  --m7-codeblock-topbar-bg: oklch(0.30 0.02 var(--m7-hue)); /* 代码块顶部栏背景色 */
+
+  --m7-link-underline: oklch(0.93 0.04 var(--m7-hue)); /* 链接下划线颜色 */
+  --m7-link-hover: oklch(0.95 0.025 var(--m7-hue)); /* 链接悬停背景/装饰色 */
+  --m7-link-active: oklch(0.90 0.05 var(--m7-hue)); /* 链接按下背景/装饰色 */
+
+  --m7-license-block-bg: rgba(0, 0, 0, 0.03); /* 许可证/说明区块背景色 */
+
+  --m7-scrollbar-bg: rgba(0, 0, 0, 0.4); /* 滚动条默认颜色 */
+  --m7-scrollbar-bg-hover: rgba(0, 0, 0, 0.5); /* 滚动条悬停颜色 */
+  --m7-scrollbar-bg-active: rgba(0, 0, 0, 0.6); /* 滚动条按下颜色 */
+
+  --m7-admonitions-color-tip: oklch(0.70 0.14 180); /* Tip 提示块语义色：青色 */
+  --m7-admonitions-color-note: oklch(0.70 0.14 250); /* Note 备注块语义色：蓝色 */
+  --m7-admonitions-color-important: oklch(0.70 0.14 310); /* Important 重要块语义色：紫色 */
+  --m7-admonitions-color-warning: oklch(0.70 0.14 60); /* Warning 警告块语义色：黄色 */
+  --m7-admonitions-color-caution: oklch(0.60 0.20 25); /* Caution 谨慎块语义色：橙红色 */
+
+  --m7-accent-pink: oklch(0.78 0.13 345); /* 三月七辅助点缀色：粉色 */
+  --m7-accent-purple: oklch(0.72 0.12 285); /* 三月七辅助点缀色：紫色 */
+  --m7-accent-ice: oklch(0.86 0.08 205); /* 三月七辅助点缀色：冰蓝色 */
+
+  --m7-toc-badge-bg: oklch(0.90 0.045 var(--m7-hue)); /* 目录徽章背景色 */
+  --m7-toc-btn-hover: oklch(0.92 0.015 var(--m7-hue)); /* 目录按钮悬停背景色 */
+  --m7-toc-btn-active: oklch(0.90 0.015 var(--m7-hue)); /* 目录按钮按下背景色 */
+  --m7-toc-item-active: oklch(0.70 0.13 var(--m7-hue)); /* 目录当前项/激活项颜色 */
+
+  --m7-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* 小阴影颜色 */
+  --m7-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* 中等阴影颜色 */
+  --m7-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* 大阴影颜色 */
+  --m7-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); /* 超大阴影颜色 */
+
+  --m7-color-selection-bar: linear-gradient( /* 主题色选择条渐变色带 */
+    to right,
+    oklch(0.80 0.10 0), /* 色相选择条：红色起点 */
+    oklch(0.80 0.10 30), /* 色相选择条：橙色 */
+    oklch(0.80 0.10 60), /* 色相选择条：黄色 */
+    oklch(0.80 0.10 90), /* 色相选择条：黄绿色 */
+    oklch(0.80 0.10 120), /* 色相选择条：绿色 */
+    oklch(0.80 0.10 150), /* 色相选择条：青绿色 */
+    oklch(0.80 0.10 180), /* 色相选择条：青色 */
+    oklch(0.80 0.10 210), /* 色相选择条：蓝青色 */
+    oklch(0.80 0.10 240), /* 色相选择条：蓝色 */
+    oklch(0.80 0.10 270), /* 色相选择条：蓝紫色 */
+    oklch(0.80 0.10 300), /* 色相选择条：紫色 */
+    oklch(0.80 0.10 330), /* 色相选择条：紫红色 */
+    oklch(0.80 0.10 360) /* 色相选择条：回到红色 */
+  );
+}
+
+:root.m7-dark {
+  color-scheme: dark;
+
+  --m7-primary: #7aa7ff; /* 主品牌色/强调色，随 --m7-hue 动态变化 */
+  --m7-primary: oklch(0.75 0.14 var(--m7-hue)); /* 主品牌色/强调色，随 --m7-hue 动态变化 */
+  --m7-page-bg: #151922; /* 页面整体背景色 */
+  --m7-page-bg: oklch(0.16 0.014 var(--m7-hue)); /* 页面整体背景色 */
+  --m7-card-bg: #242a33; /* 普通卡片背景色 */
+  --m7-card-bg: oklch(0.23 0.015 var(--m7-hue)); /* 普通卡片背景色 */
+  --m7-card-bg-transparent: rgba(23, 23, 23, 0.8); /* 半透明卡片背景色，用于毛玻璃/壁纸场景 */
+  --m7-float-panel-bg: oklch(0.19 0.015 var(--m7-hue)); /* 浮动面板/弹出层背景色 */
+
+  --m7-btn-content: oklch(0.75 0.10 var(--m7-hue)); /* 常规按钮文字/图标颜色 */
+  --m7-btn-regular-bg: oklch(0.33 0.035 var(--m7-hue)); /* 常规按钮默认背景色 */
+  --m7-btn-regular-bg-hover: oklch(0.38 0.04 var(--m7-hue)); /* 常规按钮悬停背景色 */
+  --m7-btn-regular-bg-active: oklch(0.43 0.045 var(--m7-hue)); /* 常规按钮按下背景色 */
+  --m7-btn-plain-bg-hover: var(--m7-btn-regular-bg); /* 朴素按钮悬停背景色 */
+  --m7-btn-plain-bg-active: oklch(0.28 0.025 var(--m7-hue)); /* 朴素按钮按下背景色 */
+  --m7-btn-card-bg-hover: oklch(0.27 0.018 var(--m7-hue)); /* 卡片内按钮悬停背景色 */
+  --m7-btn-card-bg-active: oklch(0.31 0.022 var(--m7-hue)); /* 卡片内按钮按下背景色 */
+
+  --m7-text: #e5e7eb; /* 默认正文文字颜色 */
+  --m7-text: oklch(0.92 0.01 var(--m7-hue)); /* 默认正文文字颜色 */
+  --m7-text-strong: rgba(255, 255, 255, 0.9); /* 强文本颜色，用于标题/重要内容 */
+  --m7-text-regular: rgba(255, 255, 255, 0.75); /* 常规文本颜色，用于正文 */
+  --m7-text-muted: rgba(255, 255, 255, 0.5); /* 弱化文本颜色，用于摘要/说明 */
+  --m7-text-subtle: rgba(255, 255, 255, 0.3); /* 极弱文本颜色，用于辅助提示 */
+  --m7-title-active: oklch(0.75 0.10 var(--m7-hue)); /* 激活标题/当前项文字颜色 */
+  --m7-content-meta: rgba(255, 255, 255, 0.6); /* 元信息文字颜色 */
+
+  --m7-line-divider: rgba(255, 255, 255, 0.08); /* 轻量分割线颜色 */
+  --m7-line-color: rgba(255, 255, 255, 0.1); /* 普通线条/边框颜色 */
+  --m7-meta-divider: rgba(255, 255, 255, 0.2); /* 元信息分隔线颜色 */
+
+  --m7-selection-bg: oklch(0.40 0.08 var(--m7-hue)); /* 普通文本选中背景色 */
+  --m7-codeblock-bg: oklch(0.17 0.015 var(--m7-hue)); /* 代码块背景色 */
+  --m7-codeblock-topbar-bg: oklch(0.12 0.015 var(--m7-hue)); /* 代码块顶部栏背景色 */
+
+  --m7-link-underline: oklch(0.40 0.08 var(--m7-hue)); /* 链接下划线颜色 */
+  --m7-link-hover: oklch(0.40 0.08 var(--m7-hue)); /* 链接悬停背景/装饰色 */
+  --m7-link-active: oklch(0.35 0.07 var(--m7-hue)); /* 链接按下背景/装饰色 */
+
+  --m7-license-block-bg: var(--m7-codeblock-bg); /* 许可证/说明区块背景色 */
+
+  --m7-scrollbar-bg: rgba(255, 255, 255, 0.4); /* 滚动条默认颜色 */
+  --m7-scrollbar-bg-hover: rgba(255, 255, 255, 0.5); /* 滚动条悬停颜色 */
+  --m7-scrollbar-bg-active: rgba(255, 255, 255, 0.6); /* 滚动条按下颜色 */
+
+  --m7-admonitions-color-tip: oklch(0.75 0.14 180); /* Tip 提示块语义色：青色 */
+  --m7-admonitions-color-note: oklch(0.75 0.14 250); /* Note 备注块语义色：蓝色 */
+  --m7-admonitions-color-important: oklch(0.75 0.14 310); /* Important 重要块语义色：紫色 */
+  --m7-admonitions-color-warning: oklch(0.75 0.14 60); /* Warning 警告块语义色：黄色 */
+  --m7-admonitions-color-caution: oklch(0.65 0.20 25); /* Caution 谨慎块语义色：橙红色 */
+
+  --m7-toc-badge-bg: var(--m7-btn-regular-bg); /* 目录徽章背景色 */
+  --m7-toc-btn-hover: oklch(0.22 0.02 var(--m7-hue)); /* 目录按钮悬停背景色 */
+  --m7-toc-btn-active: oklch(0.25 0.02 var(--m7-hue)); /* 目录按钮按下背景色 */
+  --m7-toc-item-active: oklch(0.70 0.12 var(--m7-hue)); /* 目录当前项/激活项颜色 */
+
+  --m7-color-selection-bar: linear-gradient( /* 主题色选择条渐变色带 */
+    to right,
+    oklch(0.70 0.10 0), /* 暗色选择条：红色起点 */
+    oklch(0.70 0.10 30), /* 暗色选择条：橙色 */
+    oklch(0.70 0.10 60), /* 暗色选择条：黄色 */
+    oklch(0.70 0.10 90), /* 暗色选择条：黄绿色 */
+    oklch(0.70 0.10 120), /* 暗色选择条：绿色 */
+    oklch(0.70 0.10 150), /* 暗色选择条：青绿色 */
+    oklch(0.70 0.10 180), /* 暗色选择条：青色 */
+    oklch(0.70 0.10 210), /* 暗色选择条：蓝青色 */
+    oklch(0.70 0.10 240), /* 暗色选择条：蓝色 */
+    oklch(0.70 0.10 270), /* 暗色选择条：蓝紫色 */
+    oklch(0.70 0.10 300), /* 暗色选择条：紫色 */
+    oklch(0.70 0.10 330), /* 暗色选择条：紫红色 */
+    oklch(0.70 0.10 360) /* 暗色选择条：回到红色 */
+  );
+}
+
+/* ===== March7th UI Design System Extension ===== */
+:root {
+  --m7-breakpoint-xs: 320px; /* 超小屏幕断点 */
+  --m7-breakpoint-sm: 480px; /* 小屏幕断点 */
+  --m7-breakpoint-md: 768px; /* 平板断点 */
+  --m7-breakpoint-lg: 1024px; /* 桌面断点 */
+  --m7-breakpoint-xl: 1280px; /* 大桌面断点 */
+  --m7-breakpoint-2xl: 1536px; /* 超大桌面断点 */
+
+  --m7-container-xs: 100%; /* 超小屏容器宽度 */
+  --m7-container-sm: 100%; /* 小屏容器宽度 */
+  --m7-container-md: 100%; /* 平板容器宽度 */
+  --m7-container-lg: 1024px; /* 桌面容器最大宽度 */
+  --m7-container-xl: 1280px; /* 大桌面容器最大宽度 */
+  --m7-container-2xl: 1536px; /* 超大桌面容器最大宽度 */
+  --m7-container-width: var(--m7-container-sm); /* 当前响应式容器宽度 */
+
+  --m7-spacing-xs: 0.25rem; /* 4px 微小间距 */
+  --m7-spacing-sm: 0.5rem; /* 8px 小间距 */
+  --m7-spacing-md: 0.75rem; /* 12px 中等间距 */
+  --m7-spacing-lg: 1rem; /* 16px 大间距 */
+  --m7-spacing-xl: 1.25rem; /* 20px 超大间距 */
+  --m7-spacing-2xl: 1.5rem; /* 24px 2倍间距 */
+  --m7-spacing-3xl: 2rem; /* 32px 3倍间距 */
+  --m7-spacing-4xl: 2.5rem; /* 40px 4倍间距 */
+  --m7-spacing-5xl: 3rem; /* 48px 5倍间距 */
+
+  --m7-widget-gap-mobile: var(--m7-spacing-md); /* 移动端组件间距 */
+  --m7-widget-gap-tablet: var(--m7-spacing-lg); /* 平板端组件间距 */
+  --m7-widget-gap-desktop: var(--m7-spacing-xl); /* 桌面端组件间距 */
+  --m7-widget-gap: var(--m7-widget-gap-mobile); /* 当前响应式组件间距 */
+
+  --m7-sidebar-width-mobile: 100%; /* 移动端侧栏宽度 */
+  --m7-sidebar-width-tablet: 280px; /* 平板端侧栏宽度 */
+  --m7-sidebar-width-desktop: 320px; /* 桌面端侧栏宽度 */
+  --m7-sidebar-width: var(--m7-sidebar-width-mobile); /* 当前响应式侧栏宽度 */
+
+  --m7-radius-sm: 0.25rem; /* 小圆角 */
+  --m7-radius-md: 0.375rem; /* 中等圆角 */
+  --m7-radius-lg: 0.5rem; /* 大圆角 */
+  --m7-radius-xl: 0.75rem; /* 超大圆角 */
+  --m7-radius-2xl: 1rem; /* 2倍圆角 */
+  --m7-radius-3xl: 1.5rem; /* 3倍圆角 */
+  --m7-radius-full: 9999px; /* 胶囊/圆形圆角 */
+
+  --m7-ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 加速缓动 */
+  --m7-ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* 锐利缓动 */
+  --m7-duration-slower: 500ms; /* 更慢动画 */
+  --m7-delay-none: 0ms; /* 无延迟 */
+  --m7-delay-short: 50ms; /* 短延迟 */
+  --m7-delay-medium: 100ms; /* 中等延迟 */
+  --m7-delay-long: 150ms; /* 长延迟 */
+  --m7-delay-longer: 200ms; /* 更长延迟 */
+
+  --m7-opacity-0: 0; /* 完全透明 */
+  --m7-opacity-5: 0.05; /* 5% 透明度 */
+  --m7-opacity-10: 0.1; /* 10% 透明度 */
+  --m7-opacity-20: 0.2; /* 20% 透明度 */
+  --m7-opacity-25: 0.25; /* 25% 透明度 */
+  --m7-opacity-30: 0.3; /* 30% 透明度 */
+  --m7-opacity-40: 0.4; /* 40% 透明度 */
+  --m7-opacity-50: 0.5; /* 50% 透明度 */
+  --m7-opacity-55: 0.55; /* 55% 透明度 */
+  --m7-opacity-60: 0.6; /* 60% 透明度 */
+  --m7-opacity-70: 0.7; /* 70% 透明度 */
+  --m7-opacity-75: 0.75; /* 75% 透明度 */
+  --m7-opacity-80: 0.8; /* 80% 透明度 */
+  --m7-opacity-90: 0.9; /* 90% 透明度 */
+  --m7-opacity-95: 0.95; /* 95% 透明度 */
+  --m7-opacity-100: 1; /* 完全不透明 */
+
+  --m7-blur-sm: 4px; /* 轻微毛玻璃 */
+  --m7-blur-md: 8px; /* 中等毛玻璃 */
+  --m7-blur-lg: 12px; /* 大模糊 */
+  --m7-blur-xl: 16px; /* 超大模糊 */
+  --m7-blur-2xl: 20px; /* 导航/浮层毛玻璃 */
+  --m7-blur-3xl: 24px; /* 高强度模糊 */
+
+  --m7-translate-xs: 0.125rem; /* 2px 微小移动 */
+  --m7-translate-sm: 0.25rem; /* 4px 小移动 */
+  --m7-translate-md: 0.5rem; /* 8px 中等移动 */
+  --m7-translate-lg: 0.75rem; /* 12px 大移动 */
+  --m7-translate-xl: 1rem; /* 16px 超大移动 */
+  --m7-scale-95: 0.95; /* 点击缩小反馈 */
+  --m7-scale-98: 0.98; /* 轻微缩小反馈 */
+  --m7-scale-100: 1; /* 原始尺寸 */
+  --m7-scale-105: 1.05; /* 悬停放大反馈 */
+  --m7-scale-110: 1.1; /* 强调放大反馈 */
+
+  --m7-z-dropdown: 1000; /* 下拉菜单层级 */
+  --m7-z-sticky: 1020; /* 粘性元素层级 */
+  --m7-z-fixed: 1030; /* 固定元素层级 */
+  --m7-z-modal-backdrop: 1040; /* 模态遮罩层级 */
+  --m7-z-modal: 1050; /* 模态内容层级 */
+  --m7-z-popover: 1060; /* 弹出层层级 */
+  --m7-z-tooltip: 1070; /* 提示层级 */
+  --m7-z-toast: 1080; /* 消息提示层级 */
+  --m7-gpu-transform: translateZ(0); /* GPU 加速变换 */
+}
+
+:root.m7-dark {
+  --m7-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); /* 暗色小阴影 */
+  --m7-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.24); /* 暗色中阴影 */
+  --m7-shadow-lg: 0 12px 20px rgba(0, 0, 0, 0.28); /* 暗色大阴影 */
+  --m7-shadow-xl: 0 24px 40px rgba(0, 0, 0, 0.34); /* 暗色超大阴影 */
+}
+
+@media (max-width: 767px) {
+  :root {
+    --m7-container-width: var(--m7-container-sm); /* 移动端容器宽度 */
+    --m7-widget-gap: var(--m7-widget-gap-mobile); /* 移动端组件间距 */
+    --m7-sidebar-width: var(--m7-sidebar-width-mobile); /* 移动端侧栏宽度 */
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  :root {
+    --m7-container-width: var(--m7-container-md); /* 平板端容器宽度 */
+    --m7-widget-gap: var(--m7-widget-gap-tablet); /* 平板端组件间距 */
+    --m7-sidebar-width: var(--m7-sidebar-width-tablet); /* 平板端侧栏宽度 */
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --m7-container-width: var(--m7-container-lg); /* 桌面端容器宽度 */
+    --m7-widget-gap: var(--m7-widget-gap-desktop); /* 桌面端组件间距 */
+    --m7-sidebar-width: var(--m7-sidebar-width-desktop); /* 桌面端侧栏宽度 */
+  }
+}
+
+@media (min-width: 1280px) {
+  :root { --m7-container-width: var(--m7-container-xl); /* 大桌面容器宽度 */ }
+}
+
+@media (min-width: 1536px) {
+  :root { --m7-container-width: var(--m7-container-2xl); /* 超大桌面容器宽度 */ }
+}