feat: add style-provider

packages/varlet-ui/src/cell/cell.less

@@ -12,32 +12,45 @@
 @cell-icon-right: 8px;
 @cell-extra-left: 8px;
 
+:root {
+  --cell-font-size: @cell-font-size;
+  --cell-desc-font-size: @cell-desc-font-size;
+  --cell-desc-color: @cell-desc-color;
+  --cell-padding: @cell-padding;
+  --cell-min-height: @cell-min-height;
+  --cell-border-color: @cell-border-color;
+  --cell-border-left: @cell-border-left;
+  --cell-border-right: @cell-border-right;
+  --cell-icon-right: @cell-icon-right;
+  --cell-extra-left: @cell-extra-left;
+}
+
 .var-cell {
   align-items: center;
   display: flex;
-  min-height: @cell-min-height;
+  min-height: var(--cell-min-height);
   outline: none;
-  padding: @cell-padding;
+  padding: var(--cell-padding);
   position: relative;
   box-sizing: border-box;
-  font-size: @cell-font-size;
+  font-size: var(--cell-font-size);
 
   &--border {
     &:after {
       position: absolute;
       box-sizing: border-box;
       content: ' ';
       pointer-events: none;
-      right: @cell-border-right;
+      right: var(--cell-border-right);
       bottom: 0;
-      left: @cell-border-left;
-      border-bottom: 1px solid @cell-border-color;
+      left: var(--cell-border-left);
+      border-bottom: 1px solid var(--cell-border-color);
       transform: scaleY(0.5);
     }
   }
 
   &__icon {
-    margin-right: @cell-icon-right;
+    margin-right: var(--cell-icon-right);
     flex: 0;
   }
 
@@ -53,12 +66,12 @@
   }
 
   &__desc {
-    font-size: @cell-desc-font-size;
-    color: @cell-desc-color;
+    font-size: var(--cell-desc-font-size);
+    color: var(--cell-desc-color);
   }
 
   &__extra {
     flex: 0;
-    margin-left: @cell-extra-left;
+    margin-left: var(--cell-extra-left);
   }
 }

packages/varlet-ui/src/style-provider/example/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <var-style-provider :theme-vars="styles">
+    <var-cell border> test </var-cell>
+    <var-cell border> test </var-cell>
+  </var-style-provider>
+</template>
+
+<script>
+import Cell from '../../cell'
+import StyleProvider from '../index'
+
+export default {
+  name: 'StyleProviderExample',
+  components: {
+    [Cell.name]: Cell,
+    [StyleProvider.name]: StyleProvider,
+  },
+  setup() {
+    const styles = {
+      cellFontSize: '30px',
+      cellBorderColor: 'red'
+    }
+
+    return {
+      styles
+    }
+  },
+}
+</script>

packages/varlet-ui/src/style-provider/index.ts

@@ -0,0 +1,25 @@
+import { defineComponent, h, PropType } from 'vue'
+import { Themes } from '../../themes'
+import { isPlainObject, kebabCase } from '../utils/shared'
+
+export default defineComponent({
+  name: 'VarStyleProvider',
+  props: {
+    themeVars: Object as PropType<Partial<Record<keyof Themes, string | number>>>
+  },
+  setup(props, { slots }) {
+    if (!isPlainObject(props.themeVars)) {
+      console.error('[Varlet] style-provider: themeVars is not a Object')
+      return
+    }
+
+    const styles: Record<string, string | number> = Object.entries(props.themeVars).reduce((styles, style) => {
+      const cssVar = `--${kebabCase(style[0])}`
+      styles[cssVar] = style[1] as string | number
+
+      return styles
+    }, {} as Record<string, string | number>)
+
+    return () => h('div', { style: styles }, slots.default?.())
+  }
+})

packages/varlet-ui/src/utils/shared.ts

@@ -179,3 +179,12 @@ export const dt = (value: unknown, defaultText: string) => (value == null ? defa
 export const inBrowser = typeof window !== 'undefined'
 
 export const uniq = (arr: Array<any>) => [...new Set(arr)]
+
+export function kebabCase(str: string): string {
+  const reg = /([^-])([A-Z])/g;
+
+  return str
+    .replace(reg, '$1-$2')
+    .replace(reg, '$1-$2')
+    .toLowerCase();
+}

packages/varlet-ui/themes/cell.ts

@@ -0,0 +1,12 @@
+export interface CellTheme {
+  cellFontSize: string
+  cellDescFontSize: string
+  cellDescColor: string
+  cellPadding: string
+  cellMinHeight: string
+  cellBorderColor: string
+  cellBorderLeft: string
+  cellBorderRight: string
+  cellIconRight: string
+  cellExtraLeft: string
+}

packages/varlet-ui/themes/index.ts

@@ -0,0 +1,3 @@
+import { CellTheme } from './cell'
+
+export type Themes = CellTheme