主题样式

介绍

Teek 内置了主题色、暗黑模式、灰色模式、色弱模式等主题配置。

同时 Teek 在 v2.0.0 版本进行了样式的全面重构，通过 css 变量提供大量的主题变量，并且提供主题变量衍生布局变量，全面升级了布局样式，并且修改了 ElementPlus 的 primary、success、info、warning、danger 等主题色，实现颜色统一。

主题色

点击右上角头像 -> 我的设置 -> 主题色，就可以看到全局主题色选择器，Teek 支持不同的主题模式呈现不同的主题色选择内容。

当你希望更改这些预设的主题色时，前往 src/common/config/service/base-config.ts 的 presetsColor 属性里修改。

暗黑模式

可以在右上角头像 -> 我的设置 -> 暗黑模式进行切换暗黑模式。

暗黑模式组件切换

暗黑模式除了通过我的设置来切换，也可以通过页面的按钮来切换，Teek 封装了暗黑模式切换的组件，组件路径为 /src/components/core/switch-dark.vue，是一个 Switch 开关。

灰色模式、色弱模式

Teek 适配了灰色模式、色弱模式，可以在右上角头像 -> 我的设置 -> 灰色模式、色弱模式进行切换灰色模式、色弱模式。

Teek 默认不开启灰色模式、色弱模式，如果希望默认开启灰色模式、色弱模式，则在 src/common/config/service/base-config.ts 将 themeConfig 的 weakMode、greyMode 改为 true。

提示

灰色模式、色弱模式采用了 CSS3 的 filter 属性来全局设置，俗称滤镜，如果你想自定义更多类似的全局颜色模式，可以学习 filter 的其他用法。灰色模式、色弱模式只是 filter 属性的其中两个应用。

主题色、暗黑模式、灰色模式、色弱模式等主题功能的代码逻辑在 src/composables/core/use-theme.ts 文件里。

主题模式

Teek 提供了 6 种主题模式：

浅色模式
深蓝深色模式
暗黑深色模式
午夜深色模式
中性深色模式
跟随系统模式

可以看到有 4 种深色模式，当为跟随系统模式且系统为深色模式时，Teek 会自动切换为 中性深色模式。

新增主题模式

针对不同的主题模式，Teek 提供了不同的 scss 文件，每个 scss 文件绑定 html 上的一个 class，当切换 html 的 class 时，Teek 会自动切换主题。

浅色模式：html 的 class 为空
深蓝深色模式：html 的 class 为 dark-blue
暗黑深色模式：html 的 class 为 dark-deep
午夜深色模式：html 的 class 为 dark-midnight
中性深色模式：html 的 class 为 dark-neutral

因此如果您希望新增一个主题时，那么有如下步骤：

在 src/common/styles/var 目录下创建一个 scss 文件，然后复制现有的主题文件内容，最后修改需要的颜色变量
在 src/common/enums/service-enum.ts 的 GlobalThemeEnum 枚举里新增主题名称
在 src/common/config/service/base-config.ts 的 globalThemeClassName 属性添加让主题生效的 html 标签 class 属性值，如果希望主题色也随着主题切换而改变，则在 primaryColor 属性配置主题色，如果希望主题色预设也随着主题切换而改变，则在 presetsColor 配置主题色预设
在 src/layout/components/theme-panel/global-theme-switch/index.vue 的 globalThemeModeList 属性添加主题的切换配置，该属性可以让用户在主题面板进行主题切换

主题变量

Teek 提供了浅色模式和深色模式两类主题变量，其中深色模式又分为深蓝深色模式、暗黑深色模式、午夜深色模式、中性深色模式，可以在 src/common/styles/var/theme 目录下找到。

因为主题模式的变量过多，这里贴出浅色模式的样式变量，其他模式的样式变量也是基于这套模板进行修改。

scss

@use "../../mixins/namespace" as *;
@use "../../mixins/color-variants" as *;
@use "../../mixins/color-levels" as *;

// 浅色主题变量
:root {
  // === 核心背景色 ===
  --#{$teek-namespace}-bg-color: #ffffff; // 元素级别背景色
  --#{$teek-namespace}-bg-color-page: #f6f8fc; // 页面级别背景颜色

  // === 功能色 ===
  @include generate-color-variants("primary", #395ae3);
  @include generate-color-variants("success", #0b9e40);
  @include generate-color-variants("warning", #e68a00);
  @include generate-color-variants("danger", #d93126);
  @include generate-color-variants("error", #dd5c27);

  // === 次级色 ===
  @include generate-color-variants("info", #1890ff);
  @include generate-color-variants("secondary", #42aaff);

  // === 基本色 ===
  --#{$teek-namespace}-color: #ffffff;
  --#{$teek-namespace}-light: #f9f9f9;
  --#{$teek-namespace}-dark: #1e2129;

  // === 背景色 ===
  --#{$teek-namespace}-bg-primary: #e6ecff;
  --#{$teek-namespace}-bg-primary-rgb: 230, 236, 255;
  --#{$teek-namespace}-bg-success: #e0f5d6;
  --#{$teek-namespace}-bg-success-rgb: 224, 245, 214;
  --#{$teek-namespace}-bg-warning: #fff2e0;
  --#{$teek-namespace}-bg-warning-rgb: 255, 242, 224;
  --#{$teek-namespace}-bg-danger: #ffe0d9;
  --#{$teek-namespace}-bg-danger-rgb: 255, 224, 217;
  --#{$teek-namespace}-bg-error: #ffe5d9;
  --#{$teek-namespace}-bg-error-rgb: 255, 229, 217;
  --#{$teek-namespace}-bg-info: #e4ebff;
  --#{$teek-namespace}-bg-info-rgb: 228, 235, 255;
  --#{$teek-namespace}-bg-secondary: #d5edfa;
  --#{$teek-namespace}-bg-secondary-rgb: 213, 237, 250;

  // === 中性背景 ===
  --#{$teek-namespace}-bg-neutral: #f5f7fa;
  --#{$teek-namespace}-bg-neutral-rgb: 245, 247, 250;
  --#{$teek-namespace}-bg-neutral-light: #f9fafc;
  --#{$teek-namespace}-bg-neutral-dark: #eef0f5;

  // === 灰度色，适用于背景色 | 悬停色 ===
  --#{$teek-namespace}-gray-100: #f0f0f2;
  --#{$teek-namespace}-gray-100-rgb: 240, 240, 242;
  --#{$teek-namespace}-gray-200: #e4e5eb;
  --#{$teek-namespace}-gray-200-rgb: 228, 229, 235;
  --#{$teek-namespace}-gray-300: #d7d9e0;
  --#{$teek-namespace}-gray-300-rgb: 215, 217, 224;
  --#{$teek-namespace}-gray-400: #bfc1cc;
  --#{$teek-namespace}-gray-400-rgb: 191, 193, 204;
  --#{$teek-namespace}-gray-500: #b1b3c1;
  --#{$teek-namespace}-gray-500-rgb: 177, 179, 193;
  --#{$teek-namespace}-gray-600: #7d7f8d;
  --#{$teek-namespace}-gray-600-rgb: 125, 127, 141;
  --#{$teek-namespace}-gray-700: #4d505e;
  --#{$teek-namespace}-gray-700-rgb: 77, 80, 94;
  --#{$teek-namespace}-gray-800: #20222b;
  --#{$teek-namespace}-gray-800-rgb: 32, 34, 43;
  --#{$teek-namespace}-gray-900: #141721;
  --#{$teek-namespace}-gray-900-rgb: 20, 23, 33;

  // === 文本色 ===
  --#{$teek-namespace}-text-muted: #99a1b7;
  --#{$teek-namespace}-text-gray-100: var(--#{$teek-namespace}-gray-100);
  --#{$teek-namespace}-text-gray-200: var(--#{$teek-namespace}-gray-200);
  --#{$teek-namespace}-text-gray-300: var(--#{$teek-namespace}-gray-300);
  --#{$teek-namespace}-text-gray-400: var(--#{$teek-namespace}-gray-400);
  --#{$teek-namespace}-text-gray-500: var(--#{$teek-namespace}-gray-500);
  --#{$teek-namespace}-text-gray-600: var(--#{$teek-namespace}-gray-600);
  --#{$teek-namespace}-text-gray-700: var(--#{$teek-namespace}-gray-700);
  --#{$teek-namespace}-text-gray-800: var(--#{$teek-namespace}-gray-800);
  --#{$teek-namespace}-text-gray-900: var(--#{$teek-namespace}-gray-900);

  // === 边框色 ===
  --#{$teek-namespace}-border-color: #eaebf1;
  --#{$teek-namespace}-border-dashed-color: #dbdfe9;

  // === 阴影色 ===
  --#{$teek-namespace}-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgb(0 0 0 / 4%);
  --#{$teek-namespace}-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgb(0 0 0 / 5%);
  --#{$teek-namespace}-box-shadow-md: 0 0.5rem 1.5rem 0.5rem rgb(0 0 0 / 7.5%);
  --#{$teek-namespace}-box-shadow-lg: 0 1rem 2rem 1rem rgb(0 0 0 / 10%);

  // === 卡片色 ===
  --#{$teek-namespace}-root-card-box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 15%);
  --#{$teek-namespace}-root-card-border-color: #f1f1f4;

  // === 动画色 ===
  --#{$teek-namespace}-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --#{$teek-namespace}-transition-duration-fast: var(--#{$el-namespace}-transition-duration-fast);
  --#{$teek-namespace}-transition-duration: var(--#{$el-namespace}-transition-duration);
}

如果你有自己的主题色，可以自行修改浅色和深色的主题色变量。

内置布局变量

Teek 并没有在布局组件里直接写死样式，如写死菜单的宽度，顶部的宽度等，而是提供了一套变量，你可以在 src/common/styles/var/layout.scss 目录下找到。

scss

@use "../mixins/namespace" as *;

// --#{$teek-namespace} 等于 --tk

// 布局主题变量
:root {
  // 顶部栏
  --#{$teek-namespace}-layout-header-bg-color: var(--#{$teek-namespace}-bg-color-page);
  --#{$teek-namespace}-layout-header-text-color: var(--#{$teek-namespace}-text-gray-600);
  --#{$teek-namespace}-layout-header-icon-size: 22px;
  --#{$teek-namespace}-layout-header-line: none;

  // 顶部左侧面包屑
  --#{$teek-namespace}-layout-header-breadcrumb-link-color: var(--#{$teek-namespace}-text-gray-500);
  --#{$teek-namespace}-layout-header-breadcrumb-text-color: var(--#{$teek-namespace}-text-gray-700);
  --#{$teek-namespace}-layout-logo-title-color: var(--#{$teek-namespace}-text-gray-800);

  // 页签栏
  --#{$teek-namespace}-layout-tab-bg-color: var(--#{$teek-namespace}-bg-color-page);
  --#{$teek-namespace}-layout-tab-item-bg-color: var(--#{$teek-namespace}-bg-color);
  --#{$teek-namespace}-layout-tab-item-border-color: var(--#{$teek-namespace}-border-color);
  --#{$teek-namespace}-layout-tab-height: 38px;
  --#{$teek-namespace}-layout-tab-text-color: var(--#{$teek-namespace}-text-gray-600);
  --#{$teek-namespace}-layout-tab-line: none;
  --#{$teek-namespace}-layout-tab-text-size: 13px;
  --#{$teek-namespace}-layout-tab-icon-size: 14px;
  --#{$teek-namespace}-layout-tab-dot-size: 11px;

  // 侧边栏
  --#{$teek-namespace}-layout-aside-bg-color: var(--#{$teek-namespace}-bg-color);
  --#{$teek-namespace}-layout-aside-bg-active-color: var(--#{$el-namespace}-color-primary-light-9);
  --#{$teek-namespace}-layout-aside-bg-hover-color: var(--#{$el-namespace}-color-primary-light-9);
  --#{$teek-namespace}-layout-aside-left-bg-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-text-color: var(--#{$teek-namespace}-text-gray-700);
  --#{$teek-namespace}-layout-aside-text-active-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-text-hover-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-icon-color: var(--#{$teek-namespace}-text-gray-700);
  --#{$teek-namespace}-layout-aside-icon-active-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-line: 1px solid var(--#{$teek-namespace}-border-color);
  --#{$teek-namespace}-layout-aside-text-active-weight: 700;
  --#{$teek-namespace}-layout-aside-text-size: 14px;
  --#{$teek-namespace}-layout-aside-icon-size: 20px;
  --#{$teek-namespace}-layout-aside-arrow-size: 13px;
  --#{$teek-namespace}-layout-aside-item-height: 46px;
  --#{$teek-namespace}-layout-aside-sub-item-height: 40px;

  // columns 布局侧边栏
  --#{$teek-namespace}-layout-columns-aside-width: 72px;
  --#{$teek-namespace}-layout-columns-aside-item-height: 72px;

  // 内容区
  --#{$teek-namespace}-layout-page-bg-color: var(--#{$teek-namespace}-bg-color-page);
}

// 深色布局主题变量
:root.dark {
  --#{$teek-namespace}-layout-aside-text-color: var(--#{$el-namespace}-text-color-regular);
  --#{$teek-namespace}-layout-aside-icon-color: var(--#{$el-namespace}-text-color-regular);
  --#{$teek-namespace}-layout-aside-text-active-weight: 400;
}

Teek 预设的部分布局变量如果不符合你的要求，请自行修改。

卡片变量

Teek 预设了一套企业级卡片变量以及 5 个卡片原子类，帮助开发者快速构建卡片。

卡片样式文件在 src/common/styles/var/card.scss 中。

scss

@use "../mixins/namespace" as *;

/* ===== 卡片主题变量 ===== */
:root {
  // 卡片边框（primary > accent > regular > base）
  --#{$teek-namespace}-card-border-color-primary: rgb(var(--#{$teek-namespace}-gray-400-rgb), 0.9);
  --#{$teek-namespace}-card-border-color-accent: rgb(var(--#{$teek-namespace}-gray-400-rgb), 0.7);
  --#{$teek-namespace}-card-border-color-regular: rgb(var(--#{$teek-namespace}-gray-400-rgb), 0.5);
  --#{$teek-namespace}-card-border-color-base: var(--#{$teek-namespace}-border-color);
  --#{$teek-namespace}-card-border-color-dashed: var(--#{$teek-namespace}-border-dashed-color);

  // 阴影与悬停（hover > select > base > root > mini）
  --#{$teek-namespace}-card-shadow-hover: var(--#{$teek-namespace}-box-shadow-lg);
  --#{$teek-namespace}-card-shadow-select: var(--#{$teek-namespace}-box-shadow-md);
  --#{$teek-namespace}-card-shadow-base: var(--#{$teek-namespace}-card-box-shadow-md);
  --#{$teek-namespace}-card-shadow-root: var(--#{$teek-namespace}-root-card-box-shadow);
  --#{$teek-namespace}-card-shadow-mini: 0px 0px 4px 0px rgb(0 0 0 / 4%);

  // 悬停增强效果
  --#{$teek-namespace}-card-transform-hover: translateY(-4px);
  --#{$teek-namespace}-card-transition-duration: var(--#{$el-namespace}-transition-duration, 0.3s);
  --#{$teek-namespace}-card-easing: var(--#{$teek-namespace}-easing);
}

:root.dark {
  // 卡片边框
  --#{$teek-namespace}-card-border-color-primary: rgb(var(--#{$teek-namespace}-gray-700-rgb), 0.85);
  --#{$teek-namespace}-card-border-color-accent: rgb(var(--#{$teek-namespace}-gray-600-rgb), 0.75);
  --#{$teek-namespace}-card-border-color-regular: rgb(var(--#{$teek-namespace}-gray-500-rgb), 0.6);

  // 阴影与悬停
  --#{$teek-namespace}-card-shadow-mini: 0px 0px 6px 0px rgb(0 0 0 / 15%);
}

/* ===== 卡片组件系统 ===== */

// 边框混合宏
@mixin card-border($type: "base") {
  @if $type == "base" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-base);
  } @else if $type == "dashed" {
    border: 1px dashed var(--#{$teek-namespace}-card-border-color-dashed);
  } @else if $type == "primary" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-primary);
  } @else if $type == "regular" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-regular);
  } @else if $type == "accent" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-accent);
  } @else if $type == "none" {
    border: none;
  }
}

// 阴影混合宏
@mixin card-shadow($type: "base") {
  @if $type == "base" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-base);
  } @else if $type == "xs" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-xs);
  } @else if $type == "sm" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-sm);
  } @else if $type == "md" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-md);
  } @else if $type == "lg" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-lg);
  } @else if $type == "hover" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-hover);
  } @else if $type == "root" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-root);
  } @else if $type == "mini" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-mini);
  } @else if $type == "select" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-select);
  } @else if $type == "none" {
    box-shadow: none;
  }
}

// 卡片基础效果占位符
%card-base {
  box-sizing: border-box;
  background-color: var(--#{$teek-namespace}-bg-color);

  // 添加响应式圆角，最小为 2px，最大为 12px
  border-radius: clamp(2px, calc(var(--#{$teek-namespace}-radius) * 0.5 + 2px), 12px) !important;
  transition: all var(--#{$teek-namespace}-card-transition-duration) ease !important;

  // 悬停效果整合
  &.hover {
    @extend %card-hover;
  }

  // 添加 Tab 键聚焦效果
  &:focus-visible {
    z-index: 5;
    outline: none;
    box-shadow: var(--#{$teek-namespace}-card-shadow-select);
  }

  // 当与 el-card 组件同时使用时，去除 el-card 的 padding
  &.#{$el-namespace}-card {
    padding: 0;
  }

  // 原子类系统
  @extend %card-atomic;

  // 滚动条扩展
  @extend %card-scrollbar;

  // 可访问性扩展
  @extend %card-accessibility;
}

// ===== 悬停效果占位符 =====
%card-hover {
  cursor: pointer;
  transition: transform var(--#{$teek-namespace}-card-transition-duration) var(--#{$teek-namespace}-card-easing), box-shadow
      var(--#{$teek-namespace}-card-transition-duration) var(--#{$teek-namespace}-card-easing);

  &:hover {
    box-shadow: var(--#{$teek-namespace}-card-shadow-hover);
    transform: var(--#{$teek-namespace}-card-transform-hover);
  }
}

// ===== 卡片原子类系统占位符 =====
%card-atomic {
  // 内边距原子类
  @each $size in (0, 4, 8, 12, 16, 24, 32) {
    &.pd-#{$size} {
      padding: #{$size * 0.0625}rem !important; // 除以 16 得到 rem
    }
  }

  // 边框原子类
  @each $type in (base, dashed, primary, regular, accent, none) {
    &.border-#{$type} {
      @include card-border($type);
    }
  }

  // 阴影原子类
  @each $type in (default, xs, sm, md, lg, root, mini, hover, select, none) {
    &.shadow-#{$type} {
      @include card-shadow($type);
    }
  }
}

// ===== 卡片滚动条占位符，在默认主题滚动条下进行部分修改 =====
%card-scrollbar {
  // Webkit 滚动条默认隐藏
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  // 滚动条轨道样式
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    display: none;
  }

  // 悬停时显示滚动条
  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }
}

// ===== 卡片可访问性占位符 =====
%card-accessibility {
  // 减少动画模式适配
  @media (prefers-reduced-motion: reduce) {
    transition: none !important;
    animation: none !important;

    &.hover {
      transform: none !important;
    }
  }

  // 高对比度模式适配
  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    color: white !important;
    background-color: black !important;
  }

  @media (prefers-contrast: more) and (prefers-color-scheme: light) {
    color: black !important;
    background-color: white !important;
  }

  @media (prefers-contrast: more) {
    border: 2px solid currentcolor !important;
    transition: outline 0.2s ease;

    &:focus-within {
      outline: auto !important;
    }

    &.border-none {
      outline: 2px solid currentcolor;
      outline-offset: -1px;
      border: none !important;
    }

    &:hover {
      outline: 2px dashed currentcolor;
    }

    &:focus-within {
      outline: 3px double currentcolor !important;
      outline-offset: 2px;
      box-shadow: none !important;
    }
  }
}

/* ===== 预设卡片类型 ===== */

// 标准卡片
.#{$teek-namespace}-card-standard {
  @extend %card-base;
  @include card-border("regular");
  @include card-shadow("root");

  // 默认值
  padding: 20px;
  overflow: auto;
}

// 突出卡片
.#{$teek-namespace}-card-elevated {
  @extend %card-base;
  @include card-border("none"); // 无边框突出阴影效果
  @include card-shadow("default");

  // 默认值
  padding: 24px;
  overflow: visible; // 允许特殊效果溢出
}

// 极简卡片（默认卡片）
.#{$teek-namespace}-card-minimal {
  @extend %card-base;
  @include card-border("base");
  @include card-shadow("mini");

  // 默认值
  padding: 16px;
  overflow: auto;
}

// 紧凑卡片
.#{$teek-namespace}-card-compact {
  @extend %card-base;
  @include card-border("none");
  @include card-shadow("mini");

  // 默认值
  min-height: 40px;
  padding: 8px;
  overflow: auto;
}

// 禁用卡片
.#{$teek-namespace}-card-disabled {
  position: relative;
  pointer-events: none;
  opacity: 0.5;

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    background: repeating-linear-gradient(
      45deg,
      rgb(0 0 0 / 5%),
      rgb(0 0 0 / 5%) 2px,
      transparent 2px,
      transparent 4px
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288

卡片原子类

在上面的卡片样式中可以找到 Teek 预设的 5 个原子类：

.#{$teek-namespace}-card-standard：标准卡片
.#{$teek-namespace}-card-elevated：突出卡片
.#{$teek-namespace}-card-minimal：极简卡片
.#{$teek-namespace}-card-compact：紧凑卡片
.#{$teek-namespace}-card-disabled：禁用卡片

其中 .#{$teek-namespace} 是一个变量，默认为 tk。

你这个利用这 5 个原子类快速构建一个卡片：

vue

<template>
  <!-- 标准卡片 -->
  <div class="tk-card-standard"></div>
  <!-- 突出卡片 -->
  <div class="tk-card-elevated"></div>
  <!-- 极简卡片 -->
  <div class="tk-card-minimal"></div>
  <!-- 紧凑卡片 -->
  <div class="tk-card-compact"></div>
  <!-- 禁用卡片 -->
  <div class="tk-card-disabled"></div>
</template>

除此之外，你可以使用卡片变量系统的辅助原子类来修改默认的卡片样式：

vue

<template>
  <div class="tk-card-minimal pd-16 border-primary"></div>
</template>

辅助原子类如下：

内边距原子类：pd-{size}，size 可选值：0, 4, 8, 12, 16, 24, 32
边框原子类： border-{type}，type 可选值：base, dashed, primary, regular, accent, none，最终根据 type 值生成对应的边框样式：

scss

@mixin card-border($type: "base") {
  @if $type == "base" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-base);
  } @else if $type == "dashed" {
    border: 1px dashed var(--#{$teek-namespace}-card-border-color-dashed);
  } @else if $type == "primary" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-primary);
  } @else if $type == "regular" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-regular);
  } @else if $type == "accent" {
    border: 1px solid var(--#{$teek-namespace}-card-border-color-accent);
  } @else if $type == "none" {
    border: none;
  }
}

阴影原子类： shadow-{type}，type 为 default, xs, sm, md, lg, root, mini, hover, select, none，最终根据 type 值生成对应的阴影样式：

scss

@mixin card-shadow($type: "base") {
  @if $type == "base" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-base);
  } @else if $type == "xs" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-xs);
  } @else if $type == "sm" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-sm);
  } @else if $type == "md" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-md);
  } @else if $type == "lg" {
    box-shadow: var(--#{$teek-namespace}-box-shadow-lg);
  } @else if $type == "hover" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-hover);
  } @else if $type == "root" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-root);
  } @else if $type == "mini" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-mini);
  } @else if $type == "select" {
    box-shadow: var(--#{$teek-namespace}-card-shadow-select);
  } @else if $type == "none" {
    box-shadow: none;
  }
}

主题样式 ​

介绍 ​

主题色 ​

暗黑模式 ​

暗黑模式组件切换 ​

灰色模式、色弱模式 ​

主题模式 ​

新增主题模式 ​

主题变量 ​

内置布局变量 ​

卡片变量 ​

卡片原子类 ​

主题样式

介绍

主题色

暗黑模式

暗黑模式组件切换

灰色模式、色弱模式

主题模式

新增主题模式

主题变量

内置布局变量

卡片变量

卡片原子类