@xihan-ui/styles 1.0.0 → 2.0.0

package/css/toggle.css

@@ -1,114 +1,145 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 toggle 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='toggle'] {
     --xh-toggle-skin: 1;
   }
 
+  /* 未按下的四档形态由家族形态矩阵按 data-xh-action-variant 给出（缺省 subtle 由连接层显式投影；solid 未按下时
+     投 ghost，只在按下时才是品牌实心）；公开槽桥接到矩阵之前：使用者槽 → 形态矩阵 → 家族缺省。
+     按下（on）是 §7.3 无滑块开关的选中面：品牌淡底 12 → 悬停 20 → 按压 28，前景 fg-on-brand-subtle，
+     私有槽在下面的 data-state='on' 块里接到桥接槽上。 */
   [data-scope='toggle'][data-part='root'] {
-    /* 私有槽位：组件令牌 → 语义令牌两级回退，变体只改这几个槽位 */
-    --xh-_bg: var(--xh-toggle-bg, transparent);
-    --xh-_bg-hover: var(--xh-toggle-bg-hover, var(--xh-bg-subtle-hover));
-    --xh-_fg: var(--xh-toggle-fg, var(--xh-fg-default));
-
-    /* 按下态：强调交给底色。前景不用品牌色——subtle-active 这一档底上任何品牌色都过不了
-       AA（浅色最好的 brand-700 只有 4.37），强调靠底、可读靠前景是更稳的分工 */
-    --xh-_bg-pressed: var(--xh-toggle-bg-pressed, var(--xh-bg-subtle-active));
-    --xh-_fg-pressed: var(--xh-toggle-fg-pressed, var(--xh-fg-default));
+    --xh-_toggle-bg-on: var(--xh-toggle-bg-on, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)));
+    --xh-_toggle-bg-on-hover: var(
+      --xh-toggle-bg-on-hover,
+      var(
+        --xh-_tone-subtle-hover,
+        var(--xh-bg-brand-subtle-hover)
+      )
+    );
+    --xh-_toggle-bg-on-active: var(
+      --xh-toggle-bg-on-active,
+      var(
+        --xh-_tone-subtle-active,
+        var(--xh-bg-brand-subtle-active)
+      )
+    );
+    --xh-_toggle-fg-on: var(--xh-toggle-fg-on, var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle)));
+    --xh-_toggle-border-on: var(--xh-toggle-border-on, transparent);
+    /* 禁用同时降级前景与表面，不靠 opacity；选中且禁用时底色掺一半中性面，选中信息不丢。 */
+    --xh-_toggle-bg-on-disabled: var(
+      --xh-toggle-bg-on-disabled,
+      color-mix(in oklab, var(--xh-_toggle-bg-on) 50%, var(--xh-bg-subtle))
+    );
+    --xh-_toggle-fg-on-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_toggle-fg-on));
+    --xh-action-bg-rest: var(--xh-toggle-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-toggle-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-toggle-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-toggle-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-disabled: var(--xh-toggle-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-toggle-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-toggle-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-toggle-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-toggle-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-fg-disabled: var(--xh-toggle-fg-disabled, var(--xh-_action-variant-fg-disabled));
+    --xh-action-border-rest: var(--xh-toggle-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-toggle-border, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-toggle-border, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-toggle-border, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-border-disabled: var(--xh-toggle-border-disabled, var(--xh-_action-variant-border-disabled));
+    --xh-action-radius: var(--xh-toggle-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-toggle-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-toggle-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-gap: var(--xh-toggle-gap, var(--xh-_action-profile-gap));
+    --xh-action-font-size: var(--xh-toggle-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-toggle-icon-size, var(--xh-_action-profile-glyph-size));
 
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-toggle-gap, var(--xh-control-gap-md));
-    block-size: var(--xh-toggle-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-toggle-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-toggle-radius, var(--xh-shape-control));
-    background: var(--xh-_bg);
-    color: var(--xh-_fg);
-    font-size: var(--xh-toggle-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-toggle-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='toggle'][data-part='root']:hover {
-    background: var(--xh-_bg-hover);
-  }
-
-  [data-scope='toggle'][data-part='root'][data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
   }
 
-  [data-scope='toggle'][data-part='root']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* —— 变体 —— */
-  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的中性配色 */
-  [data-scope='toggle'][data-part='root'][data-variant='solid'] {
-    --xh-_bg: transparent;
-    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
-    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
-    --xh-_bg-pressed: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_fg-pressed: var(--xh-_tone-on, var(--xh-fg-on-brand));
-  }
-
-  [data-scope='toggle'][data-part='root'][data-variant='subtle'] {
-    --xh-_bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
-    --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+  [data-scope='toggle'] > svg {
+    inline-size: var(--xh-toggle-icon-size, var(--xh-_action-profile-glyph-size));
+    block-size: var(--xh-toggle-icon-size, var(--xh-_action-profile-glyph-size));
+    flex: none;
+    pointer-events: none;
   }
 
+  /* outline 按下后描边仍是可操作区那一档：淡底面上没有描边就与 subtle 的按下态分不开 */
   [data-scope='toggle'][data-part='root'][data-variant='outline'] {
-    --xh-_bg: transparent;
-    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
-    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
-    --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
-
-    border-color: var(--xh-_tone-border-control, var(--xh-border-control));
+    --xh-_toggle-border-on: var(--xh-toggle-border-on, var(--xh-_tone-border-control, var(--xh-border-control)));
   }
 
-  [data-scope='toggle'][data-part='root'][data-variant='ghost'] {
-    --xh-_bg: transparent;
-    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
-    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
-    --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+  /* 按下（on）：solid 之外的三档一律品牌淡底；solid 的按下面由矩阵 solid 列给出（连接层此时投影
+     data-xh-action-variant='solid'），这里不接管。 */
+  [data-scope='toggle'][data-part='root']:not([data-variant='solid'])[data-state='on'] {
+    --xh-action-bg-rest: var(--xh-_toggle-bg-on);
+    --xh-action-bg-hover: var(--xh-_toggle-bg-on-hover);
+    --xh-action-bg-pressed: var(--xh-_toggle-bg-on-active);
+    --xh-action-bg-focus-visible: var(--xh-_toggle-bg-on);
+    --xh-action-bg-disabled: var(--xh-_toggle-bg-on-disabled);
+    --xh-action-fg-rest: var(--xh-_toggle-fg-on);
+    --xh-action-fg-hover: var(--xh-_toggle-fg-on);
+    --xh-action-fg-pressed: var(--xh-_toggle-fg-on);
+    --xh-action-fg-focus-visible: var(--xh-_toggle-fg-on);
+    --xh-action-fg-disabled: var(--xh-_toggle-fg-on-disabled);
+    --xh-action-border-rest: var(--xh-_toggle-border-on);
+    --xh-action-border-hover: var(--xh-_toggle-border-on);
+    --xh-action-border-pressed: var(--xh-_toggle-border-on);
+    --xh-action-border-focus-visible: var(--xh-_toggle-border-on);
+    --xh-action-border-disabled: var(--xh-_toggle-border-on);
   }
 
-  /* 按下态排在变体之后：两者特异度相同，后写的那条赢，
-     变体只负责给出按下档的取值，切换由这里一处完成 */
+  /* 使用者的 --xh-toggle-shadow 只落在按下面上：矩阵各态无影，淡底与阴影互斥（§5.3） */
   [data-scope='toggle'][data-part='root'][data-state='on'] {
-    --xh-_bg: var(--xh-_bg-pressed);
-    --xh-_bg-hover: var(--xh-_bg-pressed);
+    --xh-action-shadow-rest: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-hover: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-focus-visible: var(--xh-toggle-shadow, none);
+    --xh-action-shadow-disabled: none;
+  }
 
-    color: var(--xh-_fg-pressed);
+  /* solid 按下后是实心面：顶边内高光与全库实心档共用一条式子。
+     禁用同样掺一半中性面保留选中信息（与上面三档同一条规则）：矩阵 solid 列的 disabled 是中性
+     bg-subtle + fg-disabled，直接吃它就与未按下的禁用面分不开；底取实心面本身（矩阵在暗色下
+     换过的品牌实心也一并跟着）掺 --xh-bg-subtle，前景留实心面的配对前景。 */
+  [data-scope='toggle'][data-part='root'][data-variant='solid'][data-state='on'] {
+    --xh-action-bg-disabled: var(
+      --xh-toggle-bg-on-disabled,
+      color-mix(in oklab, var(--xh-_action-variant-bg-rest) 50%, var(--xh-bg-subtle))
+    );
+    --xh-action-fg-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_action-variant-fg-rest));
+    --xh-action-highlight-rest: var(--xh-_highlight-tone);
+    --xh-action-highlight-hover: var(--xh-_highlight-tone);
+    --xh-action-highlight-pressed: var(--xh-_highlight-tone);
+    --xh-action-highlight-focus-visible: var(--xh-_highlight-tone);
   }
 
-  /* —— 尺寸 —— */
-  [data-scope='toggle'][data-part='root'][data-size='sm'] {
-    block-size: var(--xh-toggle-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-toggle-px, var(--xh-control-px-sm));
-    font-size: var(--xh-toggle-font-size, var(--xh-control-font-sm));
+  /* 只有 solid 按下后才是实心面：环色与面同族画在面里看不出来，环改取面自己的前景色；
+     品牌淡底不是实心面，吃库环 */
+  [data-scope='toggle'][data-part='root'][data-variant='solid'][data-state='on']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  [data-scope='toggle'][data-part='root'][data-size='lg'] {
-    block-size: var(--xh-toggle-h, var(--xh-control-h-lg));
-    padding-inline: var(--xh-toggle-px, var(--xh-control-px-lg));
-    font-size: var(--xh-toggle-font-size, var(--xh-control-font-lg));
+  [data-scope='toggle'][data-part='root'][data-full-width] {
+    inline-size: 100%;
   }
 
-  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
-     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='toggle'][data-part='root'][hidden] {
     display: none;
   }
+
+  @media print {
+    [data-scope='toggle'][data-part='root'][data-state='on'] {
+      border-color: currentColor;
+      font-weight: var(--xh-font-weight-semibold);
+    }
+  }
 }

package/css/tone.css

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
 /*
  * 语气层：与组件无关，全库共用一份。
  *
@@ -14,6 +19,10 @@
  * 按 WCAG 的权重算出语气色的相对亮度，低于 0.179 配白字、高于配深字，shift 取反面。
  * 0.179 是白字与黑字对比度相等的那一点，解析解。
  *
+ * --xh-_tone-on 还有第二个消费者：实心面上的聚焦环取的是这块面配对的前景色（见 focus.css），
+ * 部件没写 color 的那几档直接把这一支写进环色槽。所以它同时管着字与环两件事。
+ * 环本身不接语气：语气只决定面是哪一族色，不决定环是什么色。
+ *
  * 现推是因为语气色可换肤：写死的分派只对本仓这套 600 档成立，使用者换一套调色板
  * 配对就不再成立，而门禁只验本仓的色，换肤后的失配一路绿灯。
  *
@@ -139,4 +148,42 @@
   :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='brand'] {
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
+
+  /* 语气轴对外的那一族：上面每支私有槽一对一指过来，取值恒等。
+     使用者在自己的节点上写 data-tone，就能在那个节点里取到整族颜色，
+     六族与深浅两态都跟着上面的推导走。
+     --xh-_tone-shift 是兑色的方向、不是一档颜色，不出公开令牌。
+     声明在 [data-tone] 上而不是 :root 上：值里带 var()，自定义属性的 var()
+     在「声明它的那个元素」上就替换掉了，落在 :root 上会把语气冻死在根元素。 */
+  [data-tone] {
+    --xh-tone-solid: var(--xh-_tone);
+    --xh-tone-solid-hover: var(--xh-_tone-hover);
+    --xh-tone-solid-active: var(--xh-_tone-active);
+    --xh-tone-on: var(--xh-_tone-on);
+    --xh-tone-subtle: var(--xh-_tone-subtle);
+    --xh-tone-subtle-hover: var(--xh-_tone-subtle-hover);
+    --xh-tone-subtle-active: var(--xh-_tone-subtle-active);
+    --xh-tone-fg: var(--xh-_tone-fg);
+    --xh-tone-border: var(--xh-_tone-border);
+    --xh-tone-border-control: var(--xh-_tone-border-control);
+    --xh-tone-soft: var(--xh-_tone-soft);
+  }
+
+  /* 实心面顶边的内高光：一条极浅的内阴影，把一块实心底衬出厚度。
+     全库十六处实心档共用这两条，别再逐个组件把式子抄一遍。
+
+     两条的差别只在取哪个前景色：--xh-_highlight-tone 跟着语气走（实心底上的前景色，
+     没写语气时退回品牌那一档），--xh-_highlight-brand 恒取品牌色——底色本身不跟语气走的
+     那几处（表单提交、引导主按钮、不带语气的实心标签）用它。
+
+     声明在 :where([data-scope]) 上而不是 :root 上：它俩的值里带 var()，而自定义属性的
+     var() 在「声明它的那个元素」上就替换掉了。落在 :root 上，--xh-_tone-on 与
+     --xh-fg-on-brand 就都按根元素解析，语气与嵌套主题一并冻死；逐元素声明才是现取。
+     同理它也不能收成 tokens 那边的一支令牌。 */
+  :where([data-scope]) {
+    --xh-_highlight-tone: inset 0 var(--xh-stroke-thin) 0 0
+      color-mix(in oklab, var(--xh-_tone-on, var(--xh-fg-on-brand)) 14%, transparent);
+    --xh-_highlight-brand: inset 0 var(--xh-stroke-thin) 0 0
+      color-mix(in oklab, var(--xh-fg-on-brand) 14%, transparent);
+  }
 }