CSS 架构

JUI 提供一套基于 CSS 变量 和 文档根类 构建的多维度的 Design Token 引擎。基于简短的代码，实现千人千面的主题模式。

文档根类

• mobile：移动端主题
• desktop：桌面端主题
• dark：暗黑主题
• light：亮主题
• j-theme-*：主题色主题
• j-radius-*：圆角主题
• j-shadow-*：阴影主题
• j-font-*：字号主题

设计令牌

tokens.css

• 工具令牌
  • 基础工具令牌：如布局、字体、动画等，具有固定值的 CSS 变量。
  • 主题工具令牌：如行高、间距等，以 --el-height-md 为例，在 mobile 和 desktop 主题下分别有不同的值。
• 色彩令牌
  • 主题色令牌
  • 业务色令牌
  • 状态色令牌

工具令牌

常用基础工具令牌。

间距

过渡时间

字号比例

组件字号

不同的 j-font-* 字号主题，提供了不同的字号比例。

默认 j-font-sm 字号主题。

字重

行高

元素高度

不同的 j-font-* 字号主题 和 不同的 desktop 设备主题，提供了不同的元素高度比例。

默认 j-font-sm 字号主题 和 desktop 设备主题。

圆角

不同的 j-radius-* 圆角主题，提供了不同的圆角比例。

默认 j-radius-md 圆角主题。

阴影

不同的 j-shadow-* 阴影主题，提供了不同的阴影比例。

默认 j-shadow-md 阴影主题。

断点

容器宽度

层级

透明度

目录结构

源码 src/css 目录下提供的是各个UI原语和组件的基础DOM样式、和它们的默认主题样式。

样式自定义

vanilla-jui 提供三种自定义样式的方案。

1. 自定义 css 主题
   • src/css/ 目录下提供的是各个UI原语和组件的基础DOM样式。
   • src/css/themes/ 目录下提供的是 UI 主题的样式文件，你可以创建自己独立的主题样式。如：newYork/。
   • src/css/themes/default/ 目录下提供的是默认主题的样式文件。
2. 自定义 tokens.css
3. 基于 tailwindcss 自定义样式（推荐）
   • 把 vanilla-jui 的 tokens.css 的多维度主题架构作为 Tailwind 等 CSS 工具的底层数据源，通过配置进行映射。
   • 优点：
     • 保持多维主题架构。
     • 基于 Tailwind 等 CSS 工具，实现更复杂的样式效果。
     • 确保最小化 CSS 打包输出。

头部脚本

放置在 HTML HEAD 中的头部脚本，防止样式抖动。

设备查询

JavaScript
(function (w, n, d) {  function m() {    var u;    if (typeof n === 'undefined') return !1;    if (n.userAgentData && typeof n.userAgentData.mobile === 'boolean')      return n.userAgentData.mobile;    u = n.userAgent || '';    if (      /\b(BlackBerry|webOS|iPhone|IEMobile|Android|Windows Phone|iPad|iPod)\b/i.test(        u      )    )      return !0;    if (typeof w === 'undefined' || typeof w.matchMedia !== 'function')      return !1;    return (      w.matchMedia('(pointer: coarse)').matches &&      w.matchMedia('(max-width: 820px)').matches    );  }  var r = d.documentElement,    b = m();  r.classList.toggle('mobile', b);  r.classList.toggle('desktop', !b);})(window, navigator, document);

主题查询

JavaScript
(function (d, k) {  var v = {      mode: 'light',      theme: 'indigo',      radius: 'sm',      shadow: 'sm',      font: 'sm',    },    m = d.cookie.match(new RegExp('(?:^|; )' + k + '=([^;]*)')),    o = v;  if (m) {    try {      var r = JSON.parse(decodeURIComponent(m[1]));      if (r && typeof r.val === 'object') o = Object.assign({}, v, r.val);    } catch (e) {      o = v;    }  }  try {    var c =        o.mode === 'auto'          ? matchMedia('(prefers-color-scheme: dark)').matches            ? 'dark'            : 'light'          : o.mode,      h = d.documentElement;    h.classList.add(      c || 'dark',      'j-theme-' + (o.theme || v.theme),      'j-radius-' + (o.radius || v.radius),      'j-shadow-' + (o.shadow || v.shadow),      'j-font-' + (o.font || v.font)    );  } catch (e) {}})(document, 'ui-theme');