feat(Color): init Color

.vscode/settings.json

@@ -7,5 +7,6 @@
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "references.preferredLocation": "peek"
 }

components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     'Card.story': typeof import('./src/components/Data/card.story.vue')['default']
     'Cascader.story': typeof import('./src/components/Form/cascader.story.vue')['default']
     'Checkbox.story': typeof import('./src/components/Form/checkbox.story.vue')['default']
+    'Color.story': typeof import('./src/components/Basic/Color/color.story.vue')['default']
     'ColorPicker.story': typeof import('./src/components/Form/colorPicker.story.vue')['default']
     'Container.story': typeof import('./src/components/Basic/Container/container.story.vue')['default']
     'DatePicker.story': typeof import('./src/components/Form/datePicker.story.vue')['default']
@@ -74,15 +75,17 @@ declare module '@vue/runtime-core' {
     'Empty.story': typeof import('./src/components/Data/empty.story.vue')['default']
     HstColor: typeof import('./src/controls-components/HstColor.vue')['default']
     'Icon.story': typeof import('./src/components/Basic/Icon/icon.story.vue')['default']
-    'Iconsads.story': typeof import('./src/components/Basic/Icon/iconsads.story.vue')['default']
     'Input.story': typeof import('./src/components/Form/input.story.vue')['default']
     'InputNumber.story': typeof import('./src/components/Form/inputNumber.story.vue')['default']
     'Link.story': typeof import('./src/components/Basic/Link/link.story.vue')['default']
+    MainColor: typeof import('./src/components/Basic/Color/main-color.vue')['default']
+    NeutralColor: typeof import('./src/components/Basic/Color/neutral-color.vue')['default']
     'Pagination.story': typeof import('./src/components/Data/pagination.story.vue')['default']
     'Progress.story': typeof import('./src/components/Data/progress.story.vue')['default']
     'Radio.story': typeof import('./src/components/Form/radio.story.vue')['default']
     'Rate.story': typeof import('./src/components/Form/rate.story.vue')['default']
     'Result.story': typeof import('./src/components/Data/result.story.vue')['default']
+    SecondaryColors: typeof import('./src/components/Basic/Color/secondary-colors.vue')['default']
     'Select.story': typeof import('./src/components/Form/Select/select.story.vue')['default']
     'Skeleton.story': typeof import('./src/components/Data/skeleton.story.vue')['default']
     'Space.story': typeof import('./src/components/Basic/space.story.vue')['default']

histoire.config.ts

@@ -40,4 +40,5 @@ export default defineConfig({
     responsiveDisabled: true,
     autoPropsDisabled: true,
   },
+  sandboxDarkClass: 'dark',
 })

package.json

@@ -25,10 +25,11 @@
     "commander": "^9.4.1",
     "consola": "^2.15.3",
     "eslint": "^8.25.0",
-    "histoire": "npm:histoire@latest",
+    "histoire": "0.11.5",
     "inquirer": "^9.1.3",
     "lint-staged": "^13.0.3",
     "pathe": "^0.3.9",
+    "sass": "^1.55.0",
     "simple-git-hooks": "^2.8.1",
     "tsx": "^3.10.4",
     "typescript": "^4.6.4",

src/components/Basic/Color/color.story.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <Story
+    title="Basic/Color"
+    :layout="{
+      type: 'single',
+      iframe: true,
+    }"
+    icon="carbon:container-software"
+  >
+    <Variant title="Basic Usage" source=" ">
+      <h1>
+        Color
+      </h1>
+      <p>
+        Element Plus uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
+      </p>
+      <h2>Main Color</h2>
+      <p>
+        The main color of Element Plus is bright and friendly blue.
+      </p>
+      <MainColor />
+      <h2>Secondary Color</h2>
+      <p>
+        Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
+      </p>
+      <SecondaryColors />
+      <h2>
+        Neutral Color
+      </h2>
+      <p>
+        Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
+      </p>
+      <NeutralColor />
+    </Variant>
+  </Story>
+</template>
+
+<style lang="scss">
+.demo-color-box {
+  position: relative;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 8px 0;
+  height: 112px;
+  box-sizing: border-box;
+  color: var(--el-color-white);
+  font-size: 14px;
+
+  .bg-color-sub {
+    width: 100%;
+    height: 40px;
+    left: 0;
+    bottom: 0;
+    position: absolute;
+
+    .bg-blue-sub-item {
+      height: 100%;
+      display: inline-block;
+
+      &:first-child {
+        border-radius: 0 0 0 var(--el-border-radius-base);
+      }
+    }
+
+    .bg-secondary-sub-item {
+      height: 100%;
+      display: inline-block;
+      &:first-child {
+        border-radius: 0 0 0 var(--el-border-radius-base);
+      }
+    }
+  }
+
+  .value {
+    margin-top: 2px;
+  }
+}
+
+.demo-color-box-lite {
+  color: var(--el-text-color-primary);
+}
+</style>

src/components/Basic/Color/main-color.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useCopyColor } from '@utils'
+
+const primary = useCssVar('--el-color-primary')
+const colorLevel = [3, 5, 7, 8, 9].map(i => `light-${i}`)
+colorLevel.unshift('dark-2')
+
+const { copyColor } = useCopyColor()
+</script>
+
+<template>
+  <el-row :gutter="12">
+    <el-col :span="10" :xs="{ span: 12 }">
+      <div class="demo-color-box" :style="{ background: primary }">
+        Brand Color
+        <div class="value" text="xs">
+          {{ primary.toUpperCase() }}
+        </div>
+        <div class="bg-color-sub" :style="{ background: primary }">
+          <div
+            v-for="level in colorLevel"
+            :key="level"
+            class="bg-blue-sub-item cursor-pointer hover:shadow"
+            :style="{
+              width: `${100 / 6}%`,
+              background: `var(--el-color-primary-${level})`,
+            }"
+            @click="copyColor(`primary-${level}`)"
+          />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>