tango-ui-cw/dist/styles/global.css

A lightweight ui library with ClayW

@import "./style.css";
@import "./utilities.css";
@import "./theme.css";

/* 
  * 这个文件定义了全局的CSS变量，主要用于主题颜色和一些常用的样式变量。
  * 通过使用CSS变量，可以方便地在整个应用中统一管理和修改主题颜色。
  * 其中，:root选择器定义了默认的颜色变量，而[data-theme="dark"]选择器则定义了暗色模式下的颜色变量。
  * 这样可以通过切换data-theme属性来实现主题的切换。
  * 另外，还定义了一些透明色、表格背景、工具提示等相关的颜色变量，以便在不同组件中使用。
  * 这些变量可以根据需要进行调整，以适应不同的设计需求和用户偏好.
  * added by clayw on 20260210
*/
:root {
  --radius: 0.625rem;
  /* 用于页面整体背景、大容器背景 */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ****** */

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  /* 按钮背景、品牌强调色、小区域 */
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --success: oklch(0.72 0.19 149);
  --success-foreground: oklch(0.985 0 0);
  --destructive-foreground: oklch(0.985 0 0);
  --input-accent: oklch(0.205 0 0);
  --modal-bg: oklch(0.985 0 0);
  --modal-ok-bg: oklch(0.205 0 0);
  --modal-ok-fg: oklch(0.985 0 0);
  --modal-cancel-bg: oklch(0.985 0 0);
  --modal-cancel-fg: oklch(0.205 0 0);
  --modal-shadow: 0 2px 10px color-mix(in oklch, var(--foreground) 10%, transparent);
  --drawer-bg: oklch(0.985 0 0);
  --drawer-ok-bg: oklch(0.205 0 0);
  --drawer-ok-fg: oklch(0.985 0 0);
  --drawer-cancel-bg: oklch(0.985 0 0);
  --drawer-cancel-fg: oklch(0.205 0 0);
  --datepicker-confirm-bg: oklch(0.205 0 0);
  --datepicker-confirm-fg: oklch(0.985 0 0);
  --datepicker-cancel-bg: oklch(0.985 0 0);
  --datepicker-cancel-fg: oklch(0.205 0 0);
  /* ****** */

  --input-bg: oklch(0.985 0 0);
  --input-shadow: 0 1px 3px color-mix(in oklch, var(--foreground) 8%, transparent);
  --input-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-accent) 25%, transparent);
  --input-error-border: oklch(0.577 0.245 27.325);
  --input-error-bg: oklch(0.97 0.014 27.325);
  --input-error-fg: oklch(0.577 0.245 27.325);
  --input-error-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-error-border) 25%, transparent);

  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* 透明色 */
  --transparent: rgba(0, 0, 0, 0);

  /* Button 主题 token，组件源码只消费变量，不直接写死颜色 */
  --button-outline-foreground: var(--foreground);
  --button-transparent-border: color-mix(in oklch, var(--foreground) 35%, transparent);
  --button-shadow-default: color-mix(in oklch, var(--foreground) 20%, transparent);
  --button-enu-bg: color-mix(in oklch, var(--background) 86%, var(--foreground) 6%);
  --button-enu-fg: var(--foreground);
  --button-enu-shadow: 4px 4px 8px color-mix(in oklch, var(--foreground) 16%, transparent), -4px -4px 8px color-mix(in oklch, var(--background) 92%, white);
  --button-enu-hover-shadow: inset 3px 3px 6px color-mix(in oklch, var(--foreground) 16%, transparent), inset -3px -3px 6px color-mix(in oklch, var(--background) 92%, white), 3px 3px 6px color-mix(in oklch, var(--foreground) 16%, transparent), -3px -3px 6px color-mix(in oklch, var(--background) 92%, white);
  --button-enu-active-shadow: inset 4px 4px 8px color-mix(in oklch, var(--foreground) 22%, transparent), inset -4px -4px 8px color-mix(in oklch, var(--background) 92%, white);
  --button-loading-light: var(--background);
  --button-loading-dark: var(--foreground);

  /* 用于Drawer组件亮色确认按钮颜色 */
  --primary-drawer: oklch(0.205 0 0);
  --primary-foreground-drawer: oklch(0.922 0 0);

  --table-background: var(--card);
  --table-hover: var(--muted-foreground);

  --tooltip-background: oklch(0.205 0 0);
  --tooltip-foreground: oklch(0.922 0 0);
  --tooltip-border: oklch(0.205 0 0);
  --tooltip-radius: var(--radius);
  --tooltip-shadow: 0 2px 8px color-mix(in oklch, var(--foreground) 12%, transparent);

  --ripple-color: oklch(0.205 0 0 / 20%);

  /* MaterialButton 主题 token */
  --material-button-ripple: color-mix(in oklch, var(--primary-foreground) 60%, transparent);

  /* Space 主题 token */
  --space-triangle-size: 50px;
  --space-triangle-color: var(--primary);
  --space-half-circle-w: 100px;
  --space-half-circle-h: 50px;
  --space-half-circle-color: var(--primary);

  /* Layout 主题 token */
  --layout-header-bg: oklch(0.88 0 0);
  --layout-header-color: oklch(0.25 0 0);
  --layout-header-height: 64px;
  --layout-footer-bg: oklch(0.88 0 0);
  --layout-footer-color: oklch(0.25 0 0);
  --layout-footer-height: 48px;
  --layout-sider-bg: oklch(0.82 0 0);
  --layout-sider-color: oklch(0.25 0 0);
  --layout-sider-width: 200px;
  --layout-toc-bg: oklch(0.92 0 0);
  --layout-toc-color: oklch(0.25 0 0);
  --layout-toc-width: 180px;
  --layout-content-bg: var(--background);
  --layout-content-color: var(--foreground);
  --layout-border: var(--border);

  /* Line 主题 token */
  --line-color: var(--border);

  /* Mark 主题 token */
  --mark-default-bg: oklch(0.92 0.07 90);
  --mark-primary-bg: oklch(0.90 0.10 250);
  --mark-success-bg: oklch(0.90 0.10 150);
  --mark-warning-bg: oklch(0.92 0.12 80);
  --mark-danger-bg: oklch(0.90 0.12 25);

  /* Notice 主题 token */
  --notice-bg: oklch(1 0 0 / 92%);
  --notice-foreground: oklch(0.205 0 0);
  --notice-radius: var(--radius);
  --notice-shadow: 0 6px 16px color-mix(in oklch, var(--foreground) 8%, transparent), 0 3px 6px -4px color-mix(in oklch, var(--foreground) 12%, transparent), 0 9px 28px 8px color-mix(in oklch, var(--foreground) 5%, transparent);
  --notice-success-text: oklch(0.52 0.17 149);
  --notice-fail-text: oklch(0.58 0.24 27);
  --notice-caution-text: oklch(0.68 0.16 60);

  /* Upload 主题 token */
  --upload-border: var(--border);
  --upload-radius: var(--radius);
  --upload-list-bg: var(--background);
  --upload-item-text: var(--foreground);
  --upload-item-hover-bg: var(--muted);
  --upload-icon-color: var(--muted-foreground);
  --upload-del-color: var(--muted-foreground);
  --upload-del-hover-bg: var(--accent);

  /* Banner 主题 token — 亮色（同色系：背景淡、边框中、图标深、文字暗） */
  --banner-info-bg: oklch(0.95 0.04 250);
  --banner-info-border: oklch(0.62 0.17 250);
  --banner-info-icon: oklch(0.52 0.17 250);
  --banner-info-text: oklch(0.30 0.09 250);

  --banner-success-bg: oklch(0.94 0.05 149);
  --banner-success-border: oklch(0.62 0.18 149);
  --banner-success-icon: oklch(0.52 0.18 149);
  --banner-success-text: oklch(0.30 0.11 149);

  --banner-warning-bg: oklch(0.96 0.06 80);
  --banner-warning-border: oklch(0.78 0.15 80);
  --banner-warning-icon: oklch(0.68 0.16 60);
  --banner-warning-text: oklch(0.38 0.11 60);

  --banner-error-bg: oklch(0.94 0.04 25);
  --banner-error-border: oklch(0.63 0.21 25);
  --banner-error-icon: oklch(0.55 0.22 25);
  --banner-error-text: oklch(0.32 0.13 25);

  --banner-close-icon: oklch(0.45 0 0);
  --banner-btn-text: oklch(0.35 0 0);
  --banner-btn-border: color-mix(in oklch, var(--foreground) 30%, transparent);
}

[data-theme="dark"] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.922 0 0);
  --success: oklch(0.62 0.19 149);
  --success-foreground: oklch(0.985 0 0);
  --destructive-foreground: oklch(0.985 0 0);
  --input-accent: oklch(0.985 0 0);
  --modal-bg: oklch(0.205 0 0);
  --modal-ok-bg: oklch(0.985 0 0);
  --modal-ok-fg: oklch(0.205 0 0);
  --modal-cancel-bg: oklch(0.205 0 0);
  --modal-cancel-fg: oklch(0.985 0 0);
  --modal-shadow: 0 2px 10px color-mix(in oklch, black 40%, transparent);
  --drawer-bg: oklch(0.205 0 0);
  --drawer-ok-bg: oklch(0.985 0 0);
  --drawer-ok-fg: oklch(0.205 0 0);
  --drawer-cancel-bg: oklch(0.205 0 0);
  --drawer-cancel-fg: oklch(0.985 0 0);
  --datepicker-confirm-bg: oklch(0.985 0 0);
  --datepicker-confirm-fg: oklch(0.205 0 0);
  --datepicker-cancel-bg: oklch(0.205 0 0);
  --datepicker-cancel-fg: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);

  /* 用于Drawer组件暗色确认按钮颜色 */
  --primary-drawer: oklch(0.985 0 0);
  --primary-foreground-drawer: oklch(0.205 0 0);

  --button-outline-foreground: var(--foreground);
  --button-transparent-border: color-mix(in oklch, var(--foreground) 45%, transparent);
  --button-shadow-default: color-mix(in oklch, var(--foreground) 35%, transparent);
  --button-enu-bg: color-mix(in oklch, var(--background) 78%, var(--foreground) 20%);
  --button-enu-fg: var(--foreground);
  --button-enu-shadow: 4px 4px 8px color-mix(in oklch, black 40%, transparent), -4px -4px 8px color-mix(in oklch, white 14%, transparent);
  --button-enu-hover-shadow: inset 3px 3px 6px color-mix(in oklch, black 45%, transparent), inset -3px -3px 6px color-mix(in oklch, white 16%, transparent), 3px 3px 6px color-mix(in oklch, black 45%, transparent), -3px -3px 6px color-mix(in oklch, white 16%, transparent);
  --button-enu-active-shadow: inset 4px 4px 8px color-mix(in oklch, black 52%, transparent), inset -4px -4px 8px color-mix(in oklch, white 20%, transparent);
  --button-loading-light: var(--background);
  --button-loading-dark: var(--foreground);

  --table-background: var(--card);
  --table-hover: var(--muted-foreground);

  --tooltip-background: oklch(0.922 0 0);
  --tooltip-foreground: oklch(0.205 0 0);
  --tooltip-border: oklch(0.922 0 0);
  --tooltip-radius: var(--radius);
  --tooltip-shadow: 0 2px 8px color-mix(in oklch, black 30%, transparent);

  --input-bg: oklch(0.205 0 0);
  --input-shadow: 0 1px 3px color-mix(in oklch, black 30%, transparent);
  --input-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-accent) 25%, transparent);
  --input-error-border: oklch(0.704 0.191 22.216);
  --input-error-bg: oklch(0.24 0.04 25);
  --input-error-fg: oklch(0.704 0.191 22.216);
  --input-error-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-error-border) 25%, transparent);

  /* Banner 主题 token — 暗色（同色系：背景深、边框中暗、图标亮、文字亮） */
  --banner-info-bg: oklch(0.24 0.06 250);
  --banner-info-border: oklch(0.45 0.15 250);
  --banner-info-icon: oklch(0.65 0.18 250);
  --banner-info-text: oklch(0.83 0.07 250);

  --banner-success-bg: oklch(0.24 0.06 149);
  --banner-success-border: oklch(0.45 0.15 149);
  --banner-success-icon: oklch(0.65 0.19 149);
  --banner-success-text: oklch(0.83 0.08 149);

  --banner-warning-bg: oklch(0.27 0.06 80);
  --banner-warning-border: oklch(0.50 0.13 80);
  --banner-warning-icon: oklch(0.72 0.15 60);
  --banner-warning-text: oklch(0.83 0.08 60);

  --banner-error-bg: oklch(0.24 0.05 25);
  --banner-error-border: oklch(0.45 0.16 25);
  --banner-error-icon: oklch(0.65 0.22 25);
  --banner-error-text: oklch(0.83 0.08 25);

  --banner-close-icon: oklch(0.7 0 0);
  --banner-btn-text: oklch(0.8 0 0);
  --banner-btn-border: color-mix(in oklch, var(--foreground) 40%, transparent);

  --material-button-ripple: color-mix(in oklch, var(--primary-foreground) 60%, transparent);

  /* Space 主题 token */
  --space-triangle-size: 50px;
  --space-triangle-color: var(--primary);
  --space-half-circle-w: 100px;
  --space-half-circle-h: 50px;
  --space-half-circle-color: var(--primary);

  /* Layout 主题 token */
  --layout-header-bg: oklch(0.28 0 0);
  --layout-header-color: oklch(0.85 0 0);
  --layout-header-height: 64px;
  --layout-footer-bg: oklch(0.28 0 0);
  --layout-footer-color: oklch(0.85 0 0);
  --layout-footer-height: 48px;
  --layout-sider-bg: oklch(0.22 0 0);
  --layout-sider-color: oklch(0.85 0 0);
  --layout-sider-width: 200px;
  --layout-toc-bg: oklch(0.26 0 0);
  --layout-toc-color: oklch(0.85 0 0);
  --layout-toc-width: 180px;
  --layout-content-bg: var(--background);
  --layout-content-color: var(--foreground);
  --layout-border: var(--border);

  /* Line 主题 token */
  --line-color: var(--border);

  /* Mark 主题 token（暗色：饱和度更高、亮度更低） */
  --mark-default-bg: oklch(0.50 0.10 90);
  --mark-primary-bg: oklch(0.45 0.15 250);
  --mark-success-bg: oklch(0.45 0.15 150);
  --mark-warning-bg: oklch(0.50 0.15 80);
  --mark-danger-bg: oklch(0.45 0.15 25);

  /* Notice 主题 token */
  --notice-bg: oklch(0.205 0 0 / 92%);
  --notice-foreground: oklch(0.985 0 0);
  --notice-radius: var(--radius);
  --notice-shadow: 0 6px 16px color-mix(in oklch, black 40%, transparent), 0 3px 6px -4px color-mix(in oklch, black 30%, transparent), 0 9px 28px 8px color-mix(in oklch, black 20%, transparent);
  --notice-success-text: oklch(0.72 0.19 149);
  --notice-fail-text: oklch(0.70 0.19 22);
  --notice-caution-text: oklch(0.78 0.15 60);

  /* Upload 主题 token */
  --upload-border: var(--border);
  --upload-radius: var(--radius);
  --upload-list-bg: var(--background);
  --upload-item-text: var(--foreground);
  --upload-item-hover-bg: var(--muted);
  --upload-icon-color: var(--muted-foreground);
  --upload-del-color: var(--muted-foreground);
  --upload-del-hover-bg: var(--accent);
}

/* Layout 响应式：窄屏下 Sider/Toc 变全宽 */
@media (max-width: 768px) {
  :root,
  [data-theme="dark"] {
    --layout-sider-width: 100%;
    --layout-toc-width: 100%;
    --layout-header-height: 48px;
    --layout-footer-height: 40px;
  }
}

/* Notice 动画 */
@keyframes noticeSlideDown {
  0% { transform: translateX(-50%) translateY(-50px); opacity: 0; }
  80% { transform: translateX(-50%) translateY(4px); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes noticeSlideUpFade {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(-20px); opacity: 0; }
}
@keyframes noticeSlideFromBottom {
  from { transform: translateX(0); opacity: 0; }
  to { transform: translateX(2%); opacity: 1; }
}
@keyframes noticeSlideToBottom {
  from { transform: translateX(2%); opacity: 1; }
  to { transform: translateX(0); opacity: 0; }
}