/* ========================================================================== LUYUN 麓云茶号 · Blocksy 变量映射 -------------------------------------------------------------------------- 作用：把 design-tokens.css 的设计 Token，接到 Blocksy 自己的皮肤变量上。 这样 Blocksy 的 Header / Footer Builder、WooCommerce 组件、 以及任何引用 --theme-* 的地方，会整体跟着 Token 走， 不需要逐个选择器写覆盖。 为什么用 html:root 而不是 :root -------------------------------------------------------------------------- Blocksy 的 Customizer 颜色设置会生成一段内联样式输出在 里，形如： :root { --theme-palette-color-1: #xxxxxx; } 特异性同为 (0,1,0)。谁的规则排在后面谁生效 —— 而这取决于 wp_head 里 内联样式与 enqueue 样式的打印顺序，跨 Blocksy 版本并不稳定。 html:root 的特异性是 (0,1,1)，稳定压过 :root，与加载顺序无关。 调色板 8 位的角色（★ 已按 Blocksy 官方语义修正） -------------------------------------------------------------------------- 上一版 design-tokens.css §10 的映射表是按「重要性」排的，与 Blocksy 实际的色位角色不一致 —— 照那个填会把站点底色填成正文色、正文色填成描边色。 Blocksy 官方的角色定义是： 1 primary brand or accent 主按钮底 / 品牌色 2 secondary accent / hover 链接 / 强调 3 primary body text 正文 4 headings 标题 5 borders and separators 描边 / 分隔线 6 subtle section backgrounds 区块底 7 primary site background 站点底 8 light contrasting surfaces 浅色面 / 卡片 -> 对应关系见下方逐行注释。 ========================================================================== */ html:root { /* —— 全局调色板 8 位 —— */ --theme-palette-color-1: #1F3D2B; /* 品牌主色 · 主按钮底 = --c-ink */ --theme-palette-color-2: #B4662A; /* 强调 · 链接 = --c-amber */ --theme-palette-color-3: #6B6B5E; /* 正文 = --c-text */ --theme-palette-color-4: #1F3D2B; /* 标题 = --c-ink */ --theme-palette-color-5: #E3DCCB; /* 描边 / 分隔 = --c-line */ --theme-palette-color-6: #F1EDE3; /* 区块底 = --c-paper-deep */ --theme-palette-color-7: #F6F3EC; /* 站点底 = --c-paper */ --theme-palette-color-8: #FBF7F1; /* 浅色面 / 卡片 = --c-card */ /* —— 文字与链接 —— */ --theme-text-color: var(--fg-body); --theme-link-initial-color: var(--fg-accent); --theme-link-hover-color: var(--fg-primary); --theme-link-active-color: var(--fg-primary); --theme-selection-background-color: var(--c-ink); --theme-selection-text-color: var(--c-on-ink); --theme-headings-color: var(--fg-primary); --theme-heading-color: var(--fg-primary); --theme-border-color: var(--border-default); /* —— 按钮 —— */ --theme-button-background-initial-color: var(--action-primary-bg); --theme-button-background-hover-color: var(--action-primary-bg-hover); --theme-button-text-initial-color: var(--action-primary-fg); --theme-button-text-hover-color: var(--c-on-ink); --theme-button-border-radius: var(--r-xs); --theme-button-min-height: var(--h-btn-m); --theme-button-shadow: none; /* —— 表单控件 —— */ --theme-form-field-height: var(--h-field); --theme-form-field-border-width: var(--bw-hairline); --theme-form-field-border-initial-color: var(--border-default); --theme-form-field-border-focus-color: var(--focus-ring); --theme-form-field-background-initial-color: var(--bg-surface); --theme-form-field-background-focus-color: var(--bg-surface); --theme-form-field-border-radius: var(--r-xs); --theme-form-text-initial-color: var(--fg-primary); --theme-form-text-focus-color: var(--fg-primary); --theme-form-font-size: var(--fs-label); /* —— 布局 —— */ --theme-normal-container-max-width: var(--container); /* 1200px = 1440 − 120×2 */ --theme-narrow-container-max-width: var(--container-narrow); /* 780px 长文正文 */ --theme-content-spacing: var(--sp-6); --theme-border-radius: var(--r-md); /* —— 字体 —— */ --theme-font-family: var(--font-body); --theme-font-size: var(--fs-body); --theme-line-height: var(--lh-body); --theme-font-weight: var(--fw-regular); --theme-letter-spacing: var(--ls-normal); /* —— 图标 —— */ --theme-icon-color: var(--fg-primary); --theme-icon-hover-color: var(--fg-accent); /* —— 过渡 —— */ --theme-transition: all var(--dur-base) var(--ease-out); } /* -------------------------------------------------------------------------- 标题族的字体 —— Blocksy 的标题字体由 Customizer 的「Typography」生成，可能被后台设置覆盖。 这里再声明一次，保证无论后台怎么设，标题都是 Fraunces。 -------------------------------------------------------------------------- */ html:root { --theme-heading-1-font-family: var(--font-display); --theme-heading-2-font-family: var(--font-display); --theme-heading-3-font-family: var(--font-display); --theme-heading-4-font-family: var(--font-display); --theme-heading-5-font-family: var(--font-display); --theme-heading-6-font-family: var(--font-display); } h1, h2, h3, h4, h5, h6, .entry-title, .ct-heading, .widget-title { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); color: var(--fg-primary); }