@easyv/theme-variables-dzw-light 0.2.0 → 0.3.0

package/dist/index.css

@@ -1,12 +1,15 @@
 [data-ui-theme='dzw-light'] {
-  /* Reference · primary scale。深科技蓝：6 是主色，5 和 3 依次加深，1、2 只给禁用 */
-  --ui-ref-primary-1: #e8eefb;
-  --ui-ref-primary-2: #c5d4f6;
-  --ui-ref-primary-3: #12348f; /* 按下 */
-  --ui-ref-primary-5: #163eb0; /* 悬停 */
-  --ui-ref-primary-6: #1b4fdb; /* 主色 */
-  --ui-ref-primary-7: #4d78e6; /* 比主色浅，用于描边和强调 */
-  --ui-ref-primary-8: rgb(27 79 219 / 12%);
+  /*
+   * 主色色阶。锚点是 #2866df，色相锁在 262。
+   * 6 是主色，5 悬停，3 按下，7 更浅给图表和强调，1、2 只给禁用。
+   */
+  --ui-ref-primary-1: oklch(0.965 0.016 262); /* 最浅底 #eef4ff */
+  --ui-ref-primary-2: oklch(0.915 0.04 262); /* 禁用填充 #d5e4fe */
+  --ui-ref-primary-3: oklch(0.433 0.153 262); /* 按下 #1c4aa3 */
+  --ui-ref-primary-5: oklch(0.488 0.18 262); /* 悬停 #2057c4 */
+  --ui-ref-primary-6: oklch(0.543 0.196 262); /* 主色 #2866df */
+  --ui-ref-primary-7: oklch(0.643 0.176 262); /* 比主色浅，用于描边、图表和强调 #4e88f6 */
+  --ui-ref-primary-8: oklch(0.543 0.196 262 / 12%);
 
   /* Reference · success scale */
   --ui-ref-success-1: rgb(39 195 70 / 8%);
@@ -18,13 +21,13 @@
   --ui-ref-success-8: rgb(39 195 70 / 12%);
 
   /* Reference · info scale。信息色跟主色同一套蓝，避免页面上出现两种蓝 */
-  --ui-ref-info-1: rgb(27 79 219 / 8%);
-  --ui-ref-info-2: rgb(27 79 219 / 16%);
-  --ui-ref-info-3: #12348f;
-  --ui-ref-info-5: #163eb0;
-  --ui-ref-info-6: #1b4fdb;
-  --ui-ref-info-7: #4d78e6;
-  --ui-ref-info-8: rgb(27 79 219 / 12%);
+  --ui-ref-info-1: oklch(0.543 0.196 262 / 8%);
+  --ui-ref-info-2: oklch(0.543 0.196 262 / 16%);
+  --ui-ref-info-3: oklch(0.433 0.153 262);
+  --ui-ref-info-5: oklch(0.488 0.18 262);
+  --ui-ref-info-6: oklch(0.543 0.196 262);
+  --ui-ref-info-7: oklch(0.643 0.176 262);
+  --ui-ref-info-8: oklch(0.543 0.196 262 / 12%);
 
   /* Reference · warning scale */
   --ui-ref-warning-1: rgb(245 158 65 / 8%);
@@ -290,7 +293,7 @@
    */
   --ui-radio-group-segmented-track-bg: var(--ui-ref-fill-0);
   --ui-radio-group-segmented-track-border: var(--ui-ref-border-1);
-  --ui-radio-group-segmented-track-radius: 12px;
+  --ui-radio-group-segmented-track-radius: 8px;
   --ui-radio-group-segmented-track-padding: var(--ui-space-1);
   --ui-radio-group-segmented-gap: 0;
   --ui-radio-group-segmented-on: var(--ui-ref-text-2);
@@ -346,32 +349,32 @@
   --ui-control-disabled-opacity: 1;
   --ui-control-affix-leading: var(--ui-ref-text-2);
   --ui-control-affix-trailing: var(--ui-ref-text-5);
-  /* Input affix · 28px (sm) baseline: gap 8px, leading 14px, trailing 12px */
+  /* Input affix · 28px 默认控件：间距 8，前缀图标 14，后缀图标 12 */
   --ui-input-affix-gap-xs: 6px;
   --ui-input-affix-gap-mini: 7px;
   --ui-input-affix-gap-sm: 8px;
   --ui-input-affix-gap-lg: 8px;
   --ui-input-affix-leading-size-xs: 12px;
   --ui-input-affix-leading-size-mini: 14px;
-  --ui-input-affix-leading-size-sm: 16px;
+  --ui-input-affix-leading-size-sm: 14px;
   --ui-input-affix-leading-size-lg: 16px;
   --ui-input-affix-trailing-size-xs: 10px;
   --ui-input-affix-trailing-size-mini: 10px;
   --ui-input-affix-trailing-size-sm: 12px;
   --ui-input-affix-trailing-size-lg: 14px;
-  /* Select · chevron glyph scale (28px sm baseline: 12px) */
+  /* Select · 下拉箭头。默认档 12，跟 13 号字一起放进 28 高的框 */
   --ui-select-icon-size-xs: 10px;
   --ui-select-icon-size-mini: 10px;
-  --ui-select-icon-size-sm: 14px;
+  --ui-select-icon-size-sm: 12px;
   --ui-select-icon-size-lg: 14px;
-  /* DatePicker / TimePicker · trigger 图标随字号：xs/mini/sm=12px，lg=14px */
+  /* DatePicker / TimePicker · 触发器图标：默认档 12，大一号 14 */
   --ui-datepicker-icon-size-xs: 12px;
   --ui-datepicker-icon-size-mini: 12px;
-  --ui-datepicker-icon-size-sm: 14px;
+  --ui-datepicker-icon-size-sm: 12px;
   --ui-datepicker-icon-size-lg: 14px;
   --ui-timepicker-icon-size-xs: 12px;
   --ui-timepicker-icon-size-mini: 12px;
-  --ui-timepicker-icon-size-sm: 14px;
+  --ui-timepicker-icon-size-sm: 12px;
   --ui-timepicker-icon-size-lg: 14px;
   --ui-floating-border: var(--ui-ref-border-2);
 
@@ -383,39 +386,39 @@
   --ui-space-4: 16px;
   --ui-space-5: 20px;
   --ui-space-6: 24px;
-  /* 页面块之间的默认间距。这套控件更高，间距跟着放宽 */
-  --ui-layout-gap: var(--ui-space-5);
-  /* 信息密度。卡片内边距、列表行和字段间距都读这三项 */
-  --ui-density-row-height: calc(var(--ui-control-height-sm) + var(--ui-space-3) * 2);
-  --ui-density-row-padding: var(--ui-space-5);
-  --ui-density-field-gap: var(--ui-space-4);
+  /* 页面块之间 12。侧栏、三维画面、右侧指标要挤在一屏里 */
+  --ui-layout-gap: var(--ui-space-3);
+  /* 信息密度。卡片内边距 12，字段之间 8。表格至少 36 高，上下留白会让一行接近 44 */
+  --ui-density-row-height: calc(var(--ui-control-height-sm) + var(--ui-space-1) * 2);
+  --ui-density-row-padding: var(--ui-space-3);
+  --ui-density-field-gap: var(--ui-space-2);
 
   /* Radius scale · general purpose (tags, chips, etc.) */
   --ui-radius-2xs: 4px;
 
   /* Control scale · height and radius linked (Button / Select / Input) */
-  /* 默认控件是 32。整档比 28 的主题高一档：24 / 28 / 32 / 36 / 40 */
-  --ui-control-height-xs: 24px;
-  --ui-control-height-mini: 28px;
-  --ui-control-height-sm: 32px;
-  --ui-control-height-lg: 36px;
-  --ui-control-height-xl: 40px;
+  /* 默认控件是 28。整档 20 / 24 / 28 / 32 / 36，给设备树和浮层卡片让位置 */
+  --ui-control-height-xs: 20px;
+  --ui-control-height-mini: 24px;
+  --ui-control-height-sm: 28px;
+  --ui-control-height-lg: 32px;
+  --ui-control-height-xl: 36px;
 
   /* Button · icon-only glyph scale (outer frame uses control-height above) */
-  --ui-button-icon-size-icon-xs: 14px;
-  --ui-button-icon-size-icon-mini: 14px;
-  --ui-button-icon-size-icon-sm: 16px;
+  --ui-button-icon-size-icon-xs: 12px;
+  --ui-button-icon-size-icon-mini: 12px;
+  --ui-button-icon-size-icon-sm: 14px;
   --ui-button-icon-size-icon-lg: 16px;
 
-  --ui-radius-control-xs: 6px;
-  --ui-radius-control-mini: 6px;
-  --ui-radius-control-sm: 8px;
-  --ui-radius-control-lg: 8px;
+  --ui-radius-control-xs: 4px;
+  --ui-radius-control-mini: 4px;
+  --ui-radius-control-sm: 6px;
+  --ui-radius-control-lg: 6px;
   --ui-radius-control: var(--ui-radius-control-sm);
 
-  --ui-radius-menu: 8px;
-  /* 浮层容器比控件更圆一档 */
-  --ui-radius-floating: 12px;
+  --ui-radius-menu: 6px;
+  /* 下拉和卡片比控件圆 2px。再圆会像气泡，盖住三维模型 */
+  --ui-radius-floating: 8px;
   --ui-radius-tooltip: var(--ui-radius-2xs);
   --ui-tooltip-height: var(--ui-space-6);
   --ui-tooltip-line-height: var(--ui-space-5);
@@ -428,39 +431,45 @@
   --ui-z-index-tooltip: 1000;
   --ui-z-index-toast: 1100;
 
-  /* Reference · typography scale */
+  /*
+   * 字号阶梯 · 厂区总览用的紧凑档
+   * 日常阅读是 13，不是国内常见的 12 / 14 二选一。
+   * 12 号中文在告警列表和设备树上盯一整班会累；14 号再配 32 高的控件，侧栏和浮层会挡住三维模型。
+   * 13 落在中间：拉丁文产品里很常见，中文笔画多，所以说明文字停在 12，不再往下。
+   * 行高按 13 对齐到 20px 的行盒，避免半像素发虚。
+   */
   --ui-ref-font-family-sans: 'PingFang SC', ui-sans-serif, system-ui, sans-serif;
-  --ui-ref-font-size-h1: 38px;
-  --ui-ref-font-size-h2: 30px;
-  --ui-ref-font-size-h3: 24px;
-  --ui-ref-font-size-h4: 20px;
-  --ui-ref-font-size-h5: 16px;
-  --ui-ref-font-size-body-small: 14px;
-  --ui-ref-font-size-body-mini: 12px;
+  --ui-ref-font-size-h1: 28px; /* 整页结果里的大数字 */
+  --ui-ref-font-size-h2: 24px; /* 指标卡上的主数字 */
+  --ui-ref-font-size-h3: 20px; /* 图表中心数字 */
+  --ui-ref-font-size-h4: 16px; /* 页面标题 */
+  --ui-ref-font-size-h5: 14px; /* 卡片和面板标题 */
+  --ui-ref-font-size-body: 13px; /* 正文、表格、设备树、默认控件 */
+  --ui-ref-font-size-body-small: 14px; /* 大一号控件 */
+  --ui-ref-font-size-body-mini: 12px; /* 说明、时间、提示 */
   --ui-ref-font-weight-regular: 400;
   --ui-ref-font-weight-medium: 500;
 
   --ui-font-family-sans: var(--ui-ref-font-family-sans);
   --ui-font-size-h1: var(--ui-ref-font-size-h1);
-  /* 账本条里最强调的数字。舒适档用 38；紧凑主题把这一项改成 h3 */
-  --ui-font-size-display: var(--ui-ref-font-size-h1);
+  /* 最需要被扫到的数字，和指标卡同一档 */
+  --ui-font-size-display: var(--ui-ref-font-size-h2);
   --ui-font-size-h2: var(--ui-ref-font-size-h2);
   --ui-font-size-h3: var(--ui-ref-font-size-h3);
   --ui-font-size-h4: var(--ui-ref-font-size-h4);
   --ui-font-size-h5: var(--ui-ref-font-size-h5);
-  /* 正文和默认控件都是 14。更小的档和说明文字保持 12，大一号控件用 16 */
-  --ui-font-size-body: var(--ui-ref-font-size-body-small);
+  --ui-font-size-body: var(--ui-ref-font-size-body);
   --ui-font-size-body-mini: var(--ui-ref-font-size-body-mini);
   --ui-font-size-control-xs: var(--ui-ref-font-size-body-mini);
   --ui-font-size-control-mini: var(--ui-ref-font-size-body-mini);
-  --ui-font-size-control-sm: var(--ui-ref-font-size-body-small);
-  --ui-font-size-control-lg: var(--ui-ref-font-size-h5);
+  --ui-font-size-control-sm: var(--ui-ref-font-size-body); /* 28px 默认控件 */
+  --ui-font-size-control-lg: var(--ui-ref-font-size-body-small);
   --ui-font-size-caption: var(--ui-ref-font-size-body-mini);
   --ui-font-size-tooltip: var(--ui-ref-font-size-body-mini);
   --ui-font-weight-regular: var(--ui-ref-font-weight-regular);
   --ui-font-weight-medium: var(--ui-ref-font-weight-medium);
   --ui-font-weight-control: var(--ui-ref-font-weight-regular);
-  --ui-line-height-body: 1.5;
+  --ui-line-height-body: 1.53846;
 
   --ui-duration-fast: 120ms;
   --ui-duration-normal: 180ms;
@@ -478,17 +487,17 @@
   --ui-avatar-size-xs: var(--ui-control-height-xs);
   --ui-avatar-size-mini: var(--ui-control-height-mini);
   --ui-avatar-size-sm: var(--ui-control-height-lg);
-  --ui-avatar-size-lg: 44px;
+  --ui-avatar-size-lg: 40px;
   /* 占位图标相对头像直径的比例 */
   --ui-avatar-icon-size:50%;
 
-  /* 导航项比默认按钮（32）高一档 */
+  /* 设备树一行 32：比默认按钮高一点，方便点，又比 36 多放下几行设备名 */
   --ui-sidebar-item-height: var(--ui-control-height-lg);
-  /* 导航的松紧：项与项之间、内容区上下 / 左右边距、顶部和底部栏高度 */
-  --ui-sidebar-item-gap: var(--ui-space-1);
-  --ui-sidebar-padding-block: var(--ui-space-2);
-  --ui-sidebar-padding-inline: var(--ui-space-3);
-  --ui-sidebar-header-height: 64px;
+  /* 导航的松紧：项与项 2px，内容区边距收一档，顶栏 48 */
+  --ui-sidebar-item-gap: var(--ui-space-0-5);
+  --ui-sidebar-padding-block: var(--ui-space-1-5);
+  --ui-sidebar-padding-inline: var(--ui-space-2);
+  --ui-sidebar-header-height: 48px;
   --ui-menu-icon-size: var(--ui-space-4);
   --ui-menu-trailing-icon-size: var(--ui-space-3);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/theme-variables-dzw-light",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "DZW Light theme tokens",
   "sideEffects": [
     "*.css",