refactor(theme): change final gray var name in case of naming conflic…

…t [deploy docs]
lejunyang · Nov 6, 2024 · ec79533 · ec79533
1 parent 816f932
commit ec79533
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 4,190 deletions.
diff --git a/.changeset/theme.md b/.changeset/theme.md
@@ -3,6 +3,10 @@
 ---
 
 
+## Changes
+
+- change final gray var name in case of naming conflict
+
 ## Bug Fixes
 
 - `theme/form-item`: fix vertical align issue of checkbox-group and radio-group in form-item

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -2,7 +2,8 @@ name: Packages build
 
 on:
   push:
-
+    branches:
+      - main
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -5,7 +5,7 @@ on:
   workflow_dispatch:
     inputs:
       run-id:
-        required: false
+        required: true
         type: string
   workflow_call:
     inputs:

diff --git a/packages/theme/src/custom/generate.ts b/packages/theme/src/custom/generate.ts
@@ -31,8 +31,8 @@ export const importCustomDynamicColors = createImportDynamicStyle('common', (vm,
     return getHostStyle([
       ...accentScale.map((c, i) => [getVarName('accent', i + 1), c] as const),
       ...accentScaleAlpha.map((c, i) => [getVarName('accent', 'a' + (i + 1)), c] as const),
-      ...grayScale.map((c, i) => [getVarName('gray', i + 1), c] as const),
-      ...grayScaleAlpha.map((c, i) => [getVarName('gray', 'a' + (i + 1)), c] as const),
+      ...grayScale.map((c, i) => [getVarName('accent-gray', i + 1), c] as const),
+      ...grayScaleAlpha.map((c, i) => [getVarName('accent-gray', 'a' + (i + 1)), c] as const),
       [getVarName('color', 'surface', 'accent'), accentSurface],
       [getVarName('accent', '9', 'contrast'), accentContrast],
       [getVarName('color', 'focus'), accentScale[7]],

diff --git a/packages/theme/src/scss/common/colors.scss b/packages/theme/src/scss/common/colors.scss
diff --git a/packages/theme/src/scss/common/index.scss b/packages/theme/src/scss/common/index.scss
@@ -1,7 +1,6 @@
 @use '../mixins/config.scss' as *;
 @use '../mixins/theme.scss' as *;
 
-// @use './colors.scss' as *;
 @use './keyframes.scss' as *;
 @use './radius.scss' as *;
 @use './shadow.scss' as *;

diff --git a/packages/theme/src/scss/components/tabs/basic.scss b/packages/theme/src/scss/components/tabs/basic.scss
@@ -177,3 +177,8 @@
     );
   }
 }
+
+// in case leaving element is hidden by isN(active)
+.v-leave-active {
+  z-index: 1;
+}
diff --git a/packages/theme/src/scss/mixins/config.scss b/packages/theme/src/scss/mixins/config.scss
@@ -26,8 +26,8 @@ $contrast-color-map: (
 $color-name: 'color' !default;
 $accent-name: 'accent' !default;
 $default-accent-color: 'indigo' !default;
-$gray-name: 'gray' !default;
-$gray-color-name: #{$gray-name + '-color'} !default;
+$gray-name: 'accent-gray' !default;
+$gray-color-name: 'gray-color' !default;
 $gray-color-list: ('mauve' 'slate' 'sage' 'olive' 'sand') !default;
 $default-gray-color: 'slate' !default;
 $status-color-map: (

diff --git a/src/components/CompThemePanel.tsx b/src/components/CompThemePanel.tsx
@@ -34,7 +34,7 @@ export default defineComponent({
       gridTemplateColumns: `auto repeat(${variants.length}, 1fr)`,
     } as const;
     const grayTipStyle = {
-      color: 'var(--l-gray-9)',
+      color: 'var(--l-accent-gray-9)',
       fontSize: '12px',
       whiteSpace: 'nowrap',
     } as const;

diff --git a/src/components/Palette.vue b/src/components/Palette.vue
@@ -20,7 +20,7 @@
       <l-divider style="grid-column: span 12"></l-divider>
       <span v-for="scale in scales" class="gray">{{ scale }}</span>
       <div v-for="scale in scales" class="color-block" :style="`background-color: var(--l-accent-${scale});`"></div>
-      <div v-for="scale in scales" class="color-block" :style="`background-color: var(--l-gray-${scale});`"></div>
+      <div v-for="scale in scales" class="color-block" :style="`background-color: var(--l-accent-gray-${scale});`"></div>
     </div>
     <details class="details custom-block" style="text-align: start">
       <summary>使用说明</summary>
@@ -149,11 +149,11 @@ h1 {
   background: var(--l-color-picker-picked-color, var(--l-accent-a4));
   cursor: pointer;
   border-radius: var(--l-radius-4);
-  outline: 1px solid var(--l-gray-a8);
+  outline: 1px solid var(--l-accent-gray-a8);
   outline-offset: 1px;
 }
 .gray {
-  color: var(--l-gray-9);
+  color: var(--l-accent-gray-9);
   font-size: 12px;
 }
 h6 {

diff --git a/src/components/ThemeConfigPanel.vue b/src/components/ThemeConfigPanel.vue
@@ -115,7 +115,7 @@ const toggleAppearanceWithTransition = inject('toggle-appearance', () => {});
   flex-direction: column;
   gap: 10px;
   .size-radio-label {
-    color: var(--l-gray-12);
+    color: var(--l-accent-gray-12);
   }
   .radius-radio {
     &[data-checked] .wrapper {
@@ -130,7 +130,7 @@ const toggleAppearanceWithTransition = inject('toggle-appearance', () => {});
       outline: 2px solid var(--l-accent-9);
     }
     .wrapper {
-      outline: 1px solid var(---l-gray-7);
+      outline: 1px solid var(---l-accent-gray-7);
       padding: 12px;
     }
   }
@@ -145,7 +145,7 @@ const toggleAppearanceWithTransition = inject('toggle-appearance', () => {});
   .radius-text {
     text-align: center;
     font-size: 14px;
-    color: var(--l-gray-9);
+    color: var(--l-accent-gray-9);
   }
   .radius-full {
     border-start-start-radius: 80%;

diff --git a/src/docs/components/popover/plugins.vue.tsx b/src/docs/components/popover/plugins.vue.tsx
@@ -13,11 +13,11 @@ export default () => (
       <l-switch v-update-checked:checked={shift.value} />
     </div>
     <div class="w-full" style="height: 200px; overflow: auto;">
-      <div style="width: 1000px; height: 500px; position: relative; background-color: var(--l-gray-3);">
+      <div style="width: 1000px; height: 500px; position: relative; background-color: var(--l-accent-gray-3);">
         <l-popover
           style="position: absolute; top: 140px; left: 100px;"
           open
-          type='normal'
+          type="normal"
           flip={flip.value}
           shift={shift.value}
         >

diff --git a/src/docs/components/scroll-view/_devViewScroll.vue b/src/docs/components/scroll-view/_devViewScroll.vue
@@ -50,7 +50,7 @@ const scroll = () => {
   position: relative;
   width: 100%;
   overflow-y: auto;
-  border: 1px solid var(--l-gray-a8);
+  border: 1px solid var(--l-accent-gray-a8);
 }
 .block {
   width: 100px;
@@ -70,13 +70,13 @@ const scroll = () => {
   animation-range: v-bind(rangeStart) v-bind(rangeEnd);
 }
 .example {
-  outline: 1px dashed var(--l-gray-a8);
+  outline: 1px dashed var(--l-accent-gray-a8);
   transform: translateX(200px);
 }
 .vline {
   position: absolute;
   width: 1px;
-  background: var(--l-gray-a8);
+  background: var(--l-accent-gray-a8);
   top: 0;
   height: 300px;
 }

diff --git a/src/docs/guides/usage/index.md b/src/docs/guides/usage/index.md
@@ -9,12 +9,12 @@ lang: zh-CN
 
 目前只发布了 alpha 版本，提供以下库：
 
-- `@lun-web/utils`：js 工具函数库
-- `@lun-web/core`：提供组件功能的钩子函数库
-- `@lun-web/plugins`: 为 JSX 或 Vue template 提供自定义指令
-- `@lun-web/components`：组件库，其依赖于上面三个
-- `@lun-web/theme`：主题库，其依赖于组件库
-- `@lun-web/react`：为 react19 之前的版本封装的组件库，详细见下文[React 中使用](#react-中使用)
+- [`@lun-web/utils`](https://www.npmjs.com/package/@lun-web/utils)：js 工具函数库
+- [`@lun-web/core`](https://www.npmjs.com/package/@lun-web/core)：提供组件功能的钩子函数库
+- [`@lun-web/plugins`](https://www.npmjs.com/package/@lun-web/plugins): 为 JSX 或 Vue template 提供自定义指令
+- [`@lun-web/components`](https://www.npmjs.com/package/@lun-web/components)：组件库，其依赖于上面三个
+- [`@lun-web/theme`](https://www.npmjs.com/package/@lun-web/theme)：主题库，其依赖于组件库
+- [`@lun-web/react`](https://www.npmjs.com/package/@lun-web/react)：为 react19 之前的版本封装的组件库，详细见下文[React 中使用](#react-中使用)
 
 根据需要并安装对应的库