feat(ui/styles): add component styles

packages/varlet-vue2-ui/src/styles/docs/en-US.md

@@ -0,0 +1,26 @@
+# Elevation
+
+### Intro
+The component library provides a shadow elevation effect based on the `Material`
+specification to represent the dimensionality of an element.
+
+### Install
+
+```js
+// css
+import '@varlet/ui/es/styles/elevation.css'
+// less
+import '@varlet/ui/es/styles/elevation.less'
+```
+
+### Basic Usage
+Shadows are divided into `0-24` levels, and the higher the level, the higher the altitude.
+
+```html
+<div class="var-elevation--0"></div>
+<div class="var-elevation--1"></div>
+<div class="var-elevation--2"></div>
+......
+<div class="var-elevation--24"></div>
+```
+

packages/varlet-vue2-ui/src/styles/docs/zh-CN.md

@@ -0,0 +1,24 @@
+# 海拔效果
+
+### 介绍
+组件库提供了基于 `Material` 规范的阴影海拔效果，用来表现元素的立体感。
+
+### 引入
+
+```js
+// css
+import '@varlet/ui/es/styles/elevation.css'
+// less
+import '@varlet/ui/es/styles/elevation.less'
+```
+
+### 基本使用
+阴影程度划分为 `0-24` 个等级，等级越高海拔越高。
+
+```html
+<div class="var-elevation--0"></div>
+<div class="var-elevation--1"></div>
+<div class="var-elevation--2"></div>
+......
+<div class="var-elevation--24"></div>
+```

packages/varlet-vue2-ui/src/styles/example/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="var-styles-outer">
+    <div class="list__item" v-for="e in elevations" :class="`var-elevation--${e}`" :style="{ background }" :key="e">
+      {{ e }}
+    </div>
+  </div>
+</template>
+
+<script>
+import dark from '../../themes/dark'
+import { watchDarkMode } from '@varlet-vue2/cli/site/utils'
+
+export default {
+  name: 'RippleExample',
+
+  data() {
+    return {
+      elevations: Array.from({ length: 25 }, (_, i) => i),
+      background: dark,
+    }
+  },
+
+  created() {
+    watchDarkMode(this, dark, (themes) => {
+      this.background = themes === 'darkThemes' ? '#303030' : '#fff'
+    })
+  },
+}
+</script>
+
+<style lang="less">
+@import '../../styles/elevation';
+</style>
+
+<style scoped lang="less">
+.var-styles-outer {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 2vw;
+
+  .list__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 25vw;
+    height: 25vw;
+    color: var(--site-config-color-sub-text);
+    margin: 2vw;
+    transition: 0.25s background-color;
+  }
+}
+</style>