手摸手教你使用Design Token

一、什么是Design Token？

Design Token 是一个设计系统中用来存储视觉属性的键值对。它是一种将设计中的各种属性（如颜色、字体大小、间距等）抽象成一系列可复用的值的方式。这些值可以在整个设计系统中被多个组件或界面所共享和引用，确保设计的一致性和可维护性。
Design Token 通常与前端开发紧密相关，因为在构建用户界面时，开发者需要将这些设计属性转化为代码中的变量。通过使用 Design Token，设计师和开发者可以更容易地协作，确保设计在不同的平台和设备上的一致性，同时也便于后期进行设计迭代和维护。
Design Token 可以分为以下几种类型：

1. 颜色（Color）：定义了设计中使用的各种颜色值。
2. 尺寸（Size）：定义了元素的高度、宽度、边距、填充等数值。
3. 字体（Font）：定义了字体家族、大小、粗细、行高等属性。
4. 间距（Spacing）：定义了元素之间的间隔。
5. 动画（Animation）：定义了动画的持续时间、缓动函数等属性。
   使用 Design Token 有助于提高设计效率和一致性，同时也为前端开发提供了便利。
   

二、如何使用Design Token

1.通过vue3+pinia+vant使用Design Token

创建一个 Pinia store 来管理你的 Design Tokens

// 假设我们有一个 designTokens.js 文件，其中包含了所有的设计 token
import designTokens from './designTokens';
import { ref } from 'vue';
import { defineStore } from 'pinia';
const useThemeStore = defineStore('theme', () => {
	const themeVars = ref(designTokens)
	//暴露designTokens变量
	return { themeVars};
})
export default useThemeStore;

在App.vue中导入到van-config-provider组件中
点击查看van-config-provider的使用方法

<template>
	<van-config-provider   theme-vars-scope="global"  :theme-vars="themeStore.themeVars">
		<!--放置路由或组件 -->
	</van-config-provider>
</template>
<script setup>
//引入
import useThemeStore from '@/stores/theme'
const router = useRouter();
const themeStore = useThemeStore()
</script>
<style lang="scss" scoped>
//在css中使用
.message-cell-right {
	width: 48px;
	background: var(--van-primary-color);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-weight: 500;
	font-size: var(--van-font-xl-size);
	color: var(--van-white);
	line-height: var(--van-font-xl-line-height);
	> img {
		width: 28px;
		height: 28px;
	}
}
</style>

2.通过vue3+pinia使用Design Token

创建一个 Pinia store 来管理你的 Design Tokens

// 假设我们有一个 designTokens.js 文件，其中包含了所有的设计 token
import designTokens from './designTokens';
import { ref } from 'vue';
import { defineStore } from 'pinia';
const useThemeStore = defineStore('theme', () => {
	const themeVars = ref(designTokens)
	//暴露designTokens变量
	return { themeVars};
})
export default useThemeStore;

在 Vue 组件中动态地将 Pinia store 中的 Design Tokens 应用到 CSS 变量中，这样它们就可以在你的样式表中使用了

// 假设我们有一个 designTokens.js 文件，其中包含了所有的设计 token
<template>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</template>

<script>
import useThemeStore from '@/stores/theme'

export default {
  setup() {
    const themeStore = useThemeStore();

    // 将 Design Tokens 应用到 CSS 变量中
    const applyDesignTokens = () => {
      const { colors, spacing } = themeStore.themeVars;

      // 应用颜色
      Object.entries(colors).forEach(([name, value]) => {
        document.documentElement.style.setProperty(`--color-${name}`, value);
      });

      // 应用间距
      Object.entries(spacing).forEach(([name, value]) => {
        document.documentElement.style.setProperty(`--spacing-${name}`, value);
      });
    };

    // 组件加载时应用一次 Design Tokens
    applyDesignTokens();

    // 监听 Design Tokens 变化，并在变化时重新应用
    designTokensStore.$subscribe(() => {
      applyDesignTokens();
    });

    return {
      designTokensStore,
    };
  },
};
</script>

<style>
.container {
  padding: var(--spacing-medium);
  background-color: var(--color-primary);
  color: var(--color-secondary);
}
</style>

在这个示例中，我们首先在组件加载时应用一次 Design Tokens，并且通过监听 Pinia store 中的 Design Tokens 的变化来在变化时重新应用它们。这样，无论何时 Design Tokens 发生变化，应用程序中的样式都会自动更新以反映这些变化。

在 CSS 中，我们使用 var(–变量名) 语法来引用 CSS 变量，这样就可以直接使用 Design Tokens。

3.通过vue2+vuex使用Design Token

创建一个 Vuex store 来管理你的 Design Tokens

// 假设我们有一个 designTokens.js 文件，其中包含了所有的设计 token
import designTokens from './designTokens';
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    themeVars:designTokens,
  },
});

在 Vue 组件中使用这些 Design Tokens，并将它们应用到 CSS 变量中：

<template>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</template>

<script>
import store from './store';

export default {
  created() {
    // 将 Design Tokens 应用到 CSS 变量中
    this.applyDesignTokens();
  },
  methods: {
    applyDesignTokens() {
      const { colors, spacing } = store.state.themeVars;

      // 应用颜色
      Object.entries(colors).forEach(([name, value]) => {
        document.documentElement.style.setProperty(`--color-${name}`, value);
      });

      // 应用间距
      Object.entries(spacing).forEach(([name, value]) => {
        document.documentElement.style.setProperty(`--spacing-${name}`, value);
      });
    },
  },
};
</script>

<style>
.container {
  padding: var(--spacing-medium);
  background-color: var(--color-primary);
  color: var(--color-secondary);
}
</style>

三、为什么使用Design Token？

使用 Design Token 有多个好处，尤其是在构建和维护大型应用程序或设计系统时。以下是一些主要原因：

1. 一致性： Design Token 可以确保整个应用程序或设计系统中的视觉元素保持一致。设计师和开发者可以确保按钮、颜色、字体等在不同页面和组件中看起来和行为都是一样的。
2. 可维护性： 当需要更改设计时，只需更新 Design Token 中的值，这些更改就会自动应用到整个应用程序中。这样可以减少重复的工作，并减少错误。
3. 可扩展性： Design Token 允许设计系统轻松扩展。添加新的设计元素或主题时，只需添加新的 Token 即可。
4. 跨平台兼容性： Design Token 可以在网页、移动应用和桌面应用之间共享，确保跨平台的设计一致性。
5. 协作： 设计师和开发者可以使用相同的语言和工具来讨论和实现设计。Design Token 作为一种通用的设计语言，可以减少沟通障碍。
6. 主题和品牌化： Design Token 可以用来定义品牌的视觉元素，如颜色和字体。这使得创建和切换不同的主题变得容易。
7. 性能： 通过使用 Design Token，可以减少样式表的重复代码，从而减少文件大小，提高加载性能。
8. 辅助功能： Design Token 可以帮助确保颜色对比度等辅助功能属性符合标准，从而提高应用程序的可访问性。
9. 动态样式： Design Token 可以与状态管理结合使用，允许根据用户交互或应用状态动态更改样式。
   总之，Design Token 提供了一种高效、一致且可维护的方式来管理和应用设计中的视觉属性，有助于提升设计质量和开发效率。