refactor(base-selection): new theme

src/_base/README.md

@@ -0,0 +1,6 @@
+Themeable components:
+
+- slot-machine
+- selection
+- select-menu
+- clear-button

src/_base/select-menu/src/SelectMenu.vue

@@ -25,6 +25,8 @@
         :item-size="itemSize"
         :show-scrollbar="false"
         :default-scroll-index="defaultScrollIndex"
+        :padding-top="4"
+        :padding-bottom="4"
         @resize="handleVirtualListResize"
         @scroll="handleVirtualListScroll"
       >
@@ -37,7 +39,14 @@
           <n-select-option v-else :key="tmNode.key" :tm-node="tmNode" />
         </template>
       </virtual-list>
-      <div v-else class="n-base-select-menu-option-wrapper">
+      <div
+        v-else
+        class="n-base-select-menu-option-wrapper"
+        :style="{
+          paddingTop: 4,
+          paddingBottom: 4
+        }"
+      >
         <template v-for="tmNode in tmNodes">
           <n-select-group-header
             v-if="tmNode.rawNode.type === 'group'"

src/_base/selection/src/Selection.vue

@@ -5,12 +5,10 @@
       'n-base-selection--active': active,
       'n-base-selection--selected': selected || (active && pattern),
       'n-base-selection--disabled': disabled,
-      [`n-base-selection--${size}-size`]: true,
       'n-base-selection--multiple': multiple,
-      'n-base-selection--focus': patternInputFocused,
-      'n-base-selection--bordered': bordered,
-      [`n-${theme}-theme`]: theme
+      'n-base-selection--focus': patternInputFocused
     }"
+    :style="cssVars"
     @click="handleClick"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
@@ -28,7 +26,6 @@
         <n-tag
           v-for="option in selectedOptions"
           :key="option.value"
-          :theme="theme"
           :size="size"
           closable
           :disabled="disabled"
@@ -38,7 +35,6 @@
           {{ option.label }}
         </n-tag>
         <suffix
-          :theme="theme"
           :loading="loading"
           :show-arrow="showArrow"
           :show-clear="mergedClearable && selected"
@@ -60,7 +56,6 @@
         <n-tag
           v-for="option in selectedOptions"
           :key="option.value"
-          :theme="theme"
           :size="size"
           :disabled="disabled"
           closable
@@ -88,7 +83,6 @@
           >{{ pattern ? pattern : '&nbsp;' }}</span>
         </div>
         <suffix
-          :theme="theme"
           :loading="loading"
           :show-arrow="showArrow"
           :show-clear="mergedClearable && selected"
@@ -131,7 +125,6 @@
           {{ filterablePlaceholder }}
         </div>
         <suffix
-          :theme="theme"
           :loading="loading"
           :show-arrow="showArrow"
           :show-clear="mergedClearable && selected"
@@ -157,7 +150,6 @@
           {{ placeholder }}
         </div>
         <suffix
-          :theme="theme"
           :loading="loading"
           :show-arrow="showArrow"
           :show-clear="mergedClearable && selected"
@@ -165,34 +157,31 @@
         />
       </div>
     </template>
-    <div class="n-base-selection__border" />
-    <div class="n-base-selection__state-border" />
-    <div class="n-base-selection__box-shadow" />
+    <div v-if="bordered" class="n-base-selection__border" />
+    <div v-if="bordered" class="n-base-selection__state-border" />
   </div>
 </template>
 
 <script>
+import { defineComponent, computed } from 'vue'
+import { NTag } from '../../../tag'
+import { useTheme } from '../../../_mixins'
+import { createKey } from '../../../_utils'
 import Suffix from './Suffix.vue'
-import { NTag } from '../../../tag/index.js'
-import { withCssr } from '../../../_mixins'
-import styles from './styles/index.js'
+import style from './styles/index.cssr.js'
+import { baseSelectionLight } from '../styles'
 
-export default {
+export default defineComponent({
   name: 'BaseSelection',
   components: {
     Suffix,
     NTag
   },
-  mixins: [withCssr(styles)],
   props: {
     bordered: {
       type: Boolean,
       default: undefined
     },
-    theme: {
-      type: String,
-      default: undefined
-    },
     active: {
       type: Boolean,
       default: false
@@ -282,6 +271,102 @@ export default {
       default: undefined
     }
   },
+  setup (props) {
+    const themeRef = useTheme(
+      'BaseSelection',
+      'BaseSelection',
+      style,
+      baseSelectionLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const { size } = props
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            borderRadius,
+            color,
+            placeholderColor,
+            textColor,
+            paddingSingle,
+            caretColor,
+            colorDisabled,
+            textColorDisabled,
+            placeholderColorDisabled,
+            colorActive,
+            boxShadowFocus,
+            boxShadowActive,
+            boxShadowHover,
+            border,
+            borderFocus,
+            borderHover,
+            borderActive,
+            // form warning
+            colorActiveWarning,
+            boxShadowFocusWarning,
+            boxShadowActiveWarning,
+            boxShadowHoverWarning,
+            borderWarning,
+            borderFocusWarning,
+            borderHoverWarning,
+            borderActiveWarning,
+            // form error
+            colorActiveError,
+            boxShadowFocusError,
+            boxShadowActiveError,
+            boxShadowHoverError,
+            borderError,
+            borderFocusError,
+            borderHoverError,
+            borderActiveError,
+            [createKey('height', size)]: height,
+            [createKey('fontSize', size)]: fontSize
+          }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--border': border,
+          '--border-active': borderActive,
+          '--border-focus': borderFocus,
+          '--border-hover': borderHover,
+          '--border-radius': borderRadius,
+          '--box-shadow-active': boxShadowActive,
+          '--box-shadow-focus': boxShadowFocus,
+          '--box-shadow-hover': boxShadowHover,
+          '--caret-color': caretColor,
+          '--color': color,
+          '--color-active': colorActive,
+          '--color-disabled': colorDisabled,
+          '--font-size': fontSize,
+          '--height': height,
+          '--padding-single': paddingSingle,
+          '--placeholder-color': placeholderColor,
+          '--placeholder-color-disabled': placeholderColorDisabled,
+          '--text-color': textColor,
+          '--text-color-disabled': textColorDisabled,
+          // form warning
+          'color-active-warning': colorActiveWarning,
+          'box-shadow-focus-warning': boxShadowFocusWarning,
+          'box-shadow-active-warning': boxShadowActiveWarning,
+          'box-shadow-hover-warning': boxShadowHoverWarning,
+          'border-warning': borderWarning,
+          'border-focus-warning': borderFocusWarning,
+          'border-hover-warning': borderHoverWarning,
+          'border-active-warning': borderActiveWarning,
+          // form error
+          'color-active-error': colorActiveError,
+          'box-shadow-focus-error': boxShadowFocusError,
+          'box-shadow-active-error': boxShadowActiveError,
+          'box-shadow-hover-error': boxShadowHoverError,
+          'border-error': borderError,
+          'border-focus-error': borderFocusError,
+          'border-hover-error': borderHoverError,
+          'border-active-error': borderActiveError
+        }
+      })
+    }
+  },
   data () {
     return {
       patternInputFocused: false,
@@ -448,5 +533,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

src/_base/selection/src/Suffix.vue

@@ -20,11 +20,12 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import NBaseClearButton from '../../clear-button'
 import NBaseLoading from '../../loading'
 import { ChevronDownIcon } from '../../icons'
 
-export default {
+export default defineComponent({
   name: 'BaseSelectionSuffix',
   components: {
     ChevronDownIcon,
@@ -53,5 +54,5 @@ export default {
       default: undefined
     }
   }
-}
+})
 </script>

src/_base/selection/src/styles/index.cssr.js

@@ -0,0 +1,349 @@
+import {
+  cRB,
+  c,
+  cB,
+  cE,
+  cM,
+  cNotM,
+  insideFormItem
+} from '../../../../_utils/cssr'
+
+// vars:
+// --bezier
+// --border
+// --border-active
+// --border-focus
+// --border-hover
+// --border-radius
+// --box-shadow-active
+// --box-shadow-focus
+// --box-shadow-hover
+// --caret-color
+// --color
+// --color-active
+// --color-disabled
+// --font-size
+// --height
+// --padding-single
+// --placeholder-color
+// --placeholder-color-disabled
+// --text-color
+// --text-color-disabled
+// ...form item vars
+export default c([
+  cB('base-selection', `
+    position: relative;
+    z-index: auto;
+    box-shadow: none;
+    width: 100%;
+    max-width: 100%;
+    display: inline-block;
+    vertical-align: bottom;
+    border-radius: var(--border-radius);
+    min-height: var(--height);
+    line-height: var(--height);
+    font-size: var(--font-size);
+  `, [
+    cE('placeholder', `
+      height: var(--height);
+      line-height: var(--height);
+    `),
+    cB('base-selection-label', `
+      height: var(--height);
+      line-height: var(--height);
+    `),
+    cB('base-selection-tags', {
+      minHeight: 'var(--height)'
+    }, [
+      cB('base-selection-input-tag', `
+        height: calc(var(--height) - 6px);
+        line-height: calc(var(--height) - 6px);
+      `)
+    ]),
+    cE('border, state-border', `
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      border: var(--border);
+      border-radius: inherit;
+      transition:
+        box-shadow .3s var(--bezier),
+        border-color .3s var(--bezier);
+    `),
+    cE('state-border', `
+      z-index: 1;
+      border-color: transparent;
+    `),
+    cE('mark', `
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 10px;
+    `),
+    cM('selected', [
+      cE('placeholder', {
+        opacity: 0
+      })
+    ]),
+    cE('placeholder', `
+      pointer-events: none;
+      position: absolute;
+      left: 14px;
+      top: 0;
+      opacity: 1;
+      transition: color .3s var(--bezier);
+      color: var(--placeholder-color);
+    `),
+    cB('base-selection-tags', `
+      cursor: pointer;
+      outline: none;
+      box-sizing: border-box;
+      position: relative;
+      z-index: auto;
+      display: flex;
+      padding: 3px 26px 0 14px;
+      flex-wrap: wrap;
+      align-items: center;
+      width: 100%;
+      vertical-align: bottom;
+      background-color: var(--color);
+      border-radius: inherit;
+      transition:
+        color .3s var(--bezier),
+        box-shadow .3s var(--bezier),
+        background-color .3s var(--bezier);
+    `, [
+      cB('tag', `
+        margin-right: 7px;
+        margin-bottom: 3px;
+        font-size: 14px;
+        max-width: 100%;
+      `, [
+        cE('content', `
+          text-overflow: ellipsis;
+          overflow: hidden;
+        `)
+      ])
+    ]),
+    cB('base-selection-label', `
+      display: inline-block;
+      width: 100%;
+      vertical-align: bottom;
+      cursor: pointer;
+      outline: none;
+      z-index: auto;
+      box-sizing: border-box;
+      position: relative;
+      transition:
+      color .3s var(--bezier),
+      box-shadow .3s var(--bezier),
+      background-color .3s var(--bezier);
+      border-radius: inherit;
+      background-color: var(--color);
+    `, [
+      cE('input', `
+        line-height: inherit;
+        outline: none;
+        cursor: pointer;
+        box-sizing: border-box;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        border:none;
+        width: 100%;
+        white-space: nowrap;
+        padding: var(--padding-single);
+        background-color: transparent;
+        color: var(--text-color);
+        transition: color .3s var(--bezier);
+      `),
+      cE('placeholder', `
+        line-height: inherit;
+        pointer-events: none;
+        position: absolute;
+        white-space: nowrap;
+        overflow: hidden;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        padding: 0 26px 0 14px;
+        color: var(--placeholder-color);
+        transition: color .3s var(--bezier);
+      `)
+    ]),
+    cNotM('disabled', [
+      cM('focus', [
+        cE('state-border', `
+          box-shadow: var(--box-shadow-focus);
+          border: var(--border-focus);
+        `)
+      ]),
+      cM('active', [
+        cE('state-border', `
+          box-shadow: var(--box-shadow-active);
+          border: var(--border-active);
+        `),
+        cB('base-selection-label', {
+          backgroundColor: 'var(--color-active)'
+        }),
+        cB('base-selection-tags', {
+          backgroundColor: 'var(--color-active)'
+        }),
+        cB('base-selection-input-tag', {
+          display: 'inline-block'
+        })
+      ]),
+      cNotM('active', [
+        cRB('base-selection-label', [
+          c('&:focus ~', [
+            cE('state-border', `
+              box-shadow: var(--box-shadow-focus)
+              border: var(--border-focus);
+            `)
+          ]),
+          c('&:hover ~', [
+            cE('state-border', `
+              box-shadow: var(--box-shadow-hover);
+              border: var(--border-hover);
+            `)
+          ])
+        ]),
+        cRB('base-selection-tags', [
+          c('&:focus ~', [
+            cE('state-border', `
+              boxShadow: var(--box-shadow-focus);
+              border: var(--border-focus);
+            `)
+          ]),
+          c('&:hover ~', [
+            cE('state-border', `
+              box-shadow: var(--box-shadow-hover);
+              border: var(--border-hover);
+            `)
+          ])
+        ])
+      ])
+    ]),
+    cM('disabled', {
+      cursor: 'not-allowed'
+    }, [
+      cB('base-selection-label', `
+        cursor: not-allowed;
+        background-color: var(--color-disabled);
+      `, [
+        cE('input', `
+          cursor: not-allowed;
+          color: var(--text-color-disabled);
+        `, [
+          cM('placeholder', {
+            color: 'var(--placeholder-color-disabled)'
+          }),
+          c('&::placeholder', {
+            color: 'var(--placeholder-color-disabled)'
+          })
+        ])
+      ]),
+      cB('base-selection-tags', `
+        cursor: now-allowed;
+        background-color: var(--color-disabled);
+      `),
+      cE('placeholder', `
+        cursor: not-allowed;
+        color: var(--placeholder-color-disabled);
+      `)
+    ]),
+    cB('base-selection-input-tag', `
+      outline: none;
+      display: none;
+      position: relative;
+      margin-bottom: 3px;
+      max-width: 100%;
+      vertical-align: bottom;
+    `, [
+      cE('input', `
+        padding: 0;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        max-width: 100%;
+        overflow: hidden;
+        width: 1em;
+        line-height: inherit;
+        cursor: pointer;
+        color: var(--text-color);
+        caret-color: var(--caret-color);
+      `),
+      cE('mirror', `
+        position: absolute;
+        padding-right: 1em;
+        left: 0;
+        top: 0;
+        white-space: pre;
+        visibility: hidden;
+        user-select: none;
+        opacity: 0;
+      `)
+    ])
+  ]),
+  ['warning', 'error'].map(status => insideFormItem(status,
+    cB('base-selection', [
+      cE('state-border', {
+        border: `var(--border-${status})`
+      }),
+      cNotM('disabled', [
+        cM('active', [
+          cE('state-border', `
+            box-shadow: var(--box-shadow-active-${status});
+            border: var(--border-active-${status});
+          `),
+          cB('base-selection-label', {
+            backgroundColor: `var(--color-active-${status})`
+          }),
+          cB('base-selection-tags', {
+            backgroundColor: `var(--box-shadow-active-${status})`
+          })
+        ]),
+        cNotM('active', [
+          cRB('base-selection-label', [
+            c('&:hover ~', [
+              cE('state-border', `
+                box-shadow: var(--box-shadow-hover-${status});
+                border: var(--border-hover-${status});
+              `)
+            ]),
+            c('&:focus ~', [
+              cE('state-border', `
+                box-shadow: var(--box-shadow-focus-${status});
+                border: var(--border-focus-${status});
+              `)
+            ])
+          ]),
+          cRB('base-selection-tags', [
+            c('&:hover ~', [
+              cE('state-border', `
+                box-shadow: var(--box-shadow-hover-${status});
+                border: var(--border-hover-${status});
+              `)
+            ]),
+            c('&:focus ~', [
+              cE('state-border', `
+                box-shadow: var(--box-shadow-focus-${status});
+                border: var(--border-hover-${status});
+              `)
+            ])
+          ]),
+          cM('focus', [
+            cE('state-border', `
+              box-shadow: var(--box-shadow-focus-${status});
+              border: var(--border-focus-${status});
+            `)
+          ])
+        ])
+      ])
+    ])
+  ))
+])

src/_base/selection/src/styles/index.js

@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'theme',
-    watch: ['theme'],
-    CNode: baseStyle
-  }
-]

src/_base/selection/src/styles/themed-base.cssr.js

@@ -1,478 +0,0 @@
-import {
-  cTB,
-  cRB,
-  c,
-  cB,
-  cE,
-  cM,
-  cNotM,
-  createKey,
-  insideFormItem
-} from '../../../../_utils/cssr'
-import { formatLength } from '../../../../_utils'
-
-export default c([
-  ({ props }) => {
-    const {
-      $local,
-      $global: { cubicBezierEaseInOut }
-    } = props
-    const {
-      borderRadius,
-      color,
-      placeholderColor,
-      textColor,
-      paddingSingle,
-      boxShadowFocus,
-      boxShadowActive,
-      boxShadowHover,
-      colorActive,
-      caretColor,
-      colorDisabled,
-      textColorDisabled,
-      placeholderColorDisabled,
-      border,
-      borderFocus,
-      borderHover,
-      borderActive
-    } = $local
-    return cTB(
-      'base-selection',
-      {
-        raw: `
-          position: relative;
-          z-index: auto;
-          box-shadow: none;
-          width: 100%;
-          max-width: 100%;
-          display: inline-block;
-          vertical-align: bottom;
-        `,
-        borderRadius
-      },
-      [
-        ['small', 'medium', 'large'].map((size) => {
-          const {
-            [createKey('height', size)]: height,
-            [createKey('fontSize', size)]: fontSize
-          } = $local
-          return cM(
-            size + '-size',
-            {
-              minHeight: height,
-              lineHeight: height,
-              fontSize
-            },
-            [
-              cE('placeholder', {
-                height,
-                lineHeight: height
-              }),
-              cB('base-selection-label', {
-                height,
-                lineHeight: height
-              }),
-              cB(
-                'base-selection-tags',
-                {
-                  minHeight: height
-                },
-                [
-                  cB('base-selection-input-tag', {
-                    height: formatLength(height, { c: 1, offset: -6 }),
-                    lineHeight: formatLength(height, { c: 1, offset: -6 })
-                  })
-                ]
-              )
-            ]
-          )
-        }),
-        cM('bordered', [
-          cE('border', {
-            border
-          })
-        ]),
-        cE('border, state-border', {
-          raw: `
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            pointer-events: none;
-          `,
-          border,
-          borderColor: 'transparent',
-          borderRadius,
-          transition: `border-color .3s ${cubicBezierEaseInOut}`
-        }),
-        cE('state-border', {
-          zIndex: 1
-        }),
-        cE('box-shadow', {
-          raw: `
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            pointer-events: none;
-            z-index: 1;
-          `,
-          borderRadius,
-          transition: `box-shadow .3s ${cubicBezierEaseInOut}`
-        }),
-        cE('mark', {
-          raw: `
-            cursor: pointer;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: 10px;
-          `
-        }),
-        cM('selected', [
-          cE('placeholder', {
-            opacity: 0
-          })
-        ]),
-        cE('placeholder', {
-          raw: `
-            pointer-events: none;
-            position: absolute;
-            left: 14px;
-            top: 0;
-            opacity: 1;
-          `,
-          transition: `color .3s ${cubicBezierEaseInOut}`,
-          color: placeholderColor
-        }),
-        cB(
-          'base-selection-tags',
-          {
-            raw: `
-              cursor: pointer;
-              outline: none;
-              box-sizing: border-box;
-              position: relative;
-              z-index: auto;
-              display: flex;
-              padding: 3px 26px 0 14px;
-              flex-wrap: wrap;
-              align-items: center;
-              width: 100%;
-              vertical-align: bottom;
-            `,
-            backgroundColor: color,
-            borderRadius,
-            transition: `
-              color .3s ${cubicBezierEaseInOut},
-              box-shadow .3s ${cubicBezierEaseInOut},
-              background-color .3s ${cubicBezierEaseInOut}
-            `
-          },
-          [
-            cB(
-              'tag',
-              {
-                raw: `
-                  margin-right: 7px;
-                  margin-bottom: 3px;
-                  font-size: 14px;
-                  max-width: 100%;
-                `
-              },
-              [
-                cE('content', {
-                  raw: `
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                  `
-                })
-              ]
-            )
-          ]
-        ),
-        cB(
-          'base-selection-label',
-          {
-            raw: `
-              display: inline-block;
-              width: 100%;
-              vertical-align: bottom;
-              cursor: pointer;
-              outline: none;
-              z-index: auto;
-              box-sizing: border-box;
-              position: relative;
-            `,
-            transition: `
-              color .3s ${cubicBezierEaseInOut},
-              box-shadow .3s ${cubicBezierEaseInOut},
-              background-color .3s ${cubicBezierEaseInOut}
-            `,
-            borderRadius: borderRadius,
-            backgroundColor: color
-          },
-          [
-            cE('input', {
-              raw: `
-                line-height: inherit;
-                outline: none;
-                cursor: pointer;
-                box-sizing: border-box;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                border:none;
-                width: 100%;
-                white-space: nowrap;
-                padding: ${paddingSingle};
-                background-color: transparent;
-              `,
-              color: textColor,
-              transition: `color .3s ${cubicBezierEaseInOut}`
-            }),
-            cE('placeholder', {
-              lineHeight: 'inherit',
-              pointerEvents: 'none',
-              position: 'absolute',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-              padding: '0 26px 0 14px',
-              color: placeholderColor,
-              transition: `color .3s ${cubicBezierEaseInOut}`
-            })
-          ]
-        ),
-        cNotM('disabled', [
-          cM('focus', [
-            cE('box-shadow', {
-              boxShadow: boxShadowFocus
-            }),
-            cE('state-border', {
-              border: borderFocus
-            })
-          ]),
-          cM('active', [
-            cE('box-shadow', {
-              boxShadow: boxShadowActive
-            }),
-            cE('state-border', {
-              border: borderActive
-            }),
-            cB('base-selection-label', {
-              backgroundColor: colorActive
-            }),
-            cB('base-selection-tags', {
-              backgroundColor: colorActive
-            }),
-            cB('base-selection-input-tag', {
-              display: 'inline-block'
-            })
-          ]),
-          cNotM('active', [
-            cRB('base-selection-label', [
-              c('&:focus ~', [
-                cE('box-shadow', {
-                  boxShadow: boxShadowFocus
-                }),
-                cE('state-border', {
-                  border: borderFocus
-                })
-              ]),
-              c('&:hover ~', [
-                cE('box-shadow', {
-                  boxShadow: boxShadowHover
-                }),
-                cE('state-border', {
-                  border: borderHover
-                })
-              ])
-            ]),
-            cRB('base-selection-tags', [
-              c('&:focus ~', [
-                cE('box-shadow', {
-                  boxShadow: boxShadowFocus
-                }),
-                cE('state-border', {
-                  border: borderFocus
-                })
-              ]),
-              c('&:hover ~', [
-                cE('box-shadow', {
-                  boxShadow: boxShadowHover
-                }),
-                cE('state-border', {
-                  border: borderHover
-                })
-              ])
-            ])
-          ])
-        ]),
-        cM(
-          'disabled',
-          {
-            cursor: 'not-allowed'
-          },
-          [
-            cB(
-              'base-selection-label',
-              {
-                cursor: 'not-allowed',
-                backgroundColor: colorDisabled
-              },
-              [
-                cE(
-                  'input',
-                  {
-                    cursor: 'not-allowed',
-                    color: textColorDisabled
-                  },
-                  [
-                    cM('placeholder', {
-                      color: placeholderColorDisabled
-                    }),
-                    c('&::placeholder', {
-                      color: placeholderColorDisabled
-                    })
-                  ]
-                )
-              ]
-            ),
-            cB('base-selection-tags', {
-              cursor: 'now-allowed',
-              backgroundColor: colorDisabled
-            }),
-            cE('placeholder', {
-              cursor: 'not-allowed',
-              color: placeholderColorDisabled
-            })
-          ]
-        ),
-        cB(
-          'base-selection-input-tag',
-          {
-            raw: `
-              outline: none;
-              display: none;
-              position: relative;
-              margin-bottom: 3px;
-              max-width: 100%;
-              vertical-align: bottom;
-            `
-          },
-          [
-            cE('input', {
-              raw: `
-                padding: 0;
-                background-color: transparent;
-                outline: none;
-                border: none;
-                max-width: 100%;
-                overflow: hidden;
-                width: 1em;
-                line-height: inherit;
-                cursor: pointer;
-              `,
-              color: textColor,
-              caretColor
-            }),
-            cE('mirror', {
-              raw: `
-                position: absolute;
-                padding-right: 1em;
-                left: 0;
-                top: 0;
-                white-space: pre;
-                visibility: hidden;
-                user-select: none;
-                opacity: 0;
-              `
-            })
-          ]
-        )
-      ]
-    )
-  },
-  ({ props }) => {
-    const { $local } = props
-    return ['warning', 'error'].map((status) => {
-      return insideFormItem(
-        status,
-        cTB('base-selection', [
-          [
-            cE('state-border', {
-              border: $local[createKey('border', status)]
-            }),
-            cNotM('disabled', [
-              cM('active', [
-                cE('box-shadow', {
-                  boxShadow: $local[createKey('boxShadowActive', status)]
-                }),
-                cE('state-border', {
-                  border: $local[createKey('borderActive', status)]
-                }),
-                cB('base-selection-label', {
-                  backgroundColor: $local[createKey('colorActive', status)]
-                }),
-                cB('base-selection-tags', {
-                  backgroundColor: $local[createKey('boxShadowActive', status)]
-                })
-              ]),
-              cNotM('active', [
-                cRB('base-selection-label', [
-                  c('&:hover ~', [
-                    cE('box-shadow', {
-                      boxShadow: $local[createKey('boxShadowHover', status)]
-                    }),
-                    cE('state-border', {
-                      border: $local[createKey('borderHover', status)]
-                    })
-                  ]),
-                  c('&:focus ~', [
-                    cE('box-shadow', {
-                      boxShadow: $local[createKey('boxShadowFocus', status)]
-                    }),
-                    cE('state-border', {
-                      border: $local[createKey('borderFocus', status)]
-                    })
-                  ])
-                ]),
-                cRB('base-selection-tags', [
-                  c('&:hover ~', [
-                    cE('box-shadow', {
-                      boxShadow: $local[createKey('boxShadowHover', status)]
-                    }),
-                    cE('state-border', {
-                      border: $local[createKey('borderHover', status)]
-                    })
-                  ]),
-                  c('&:focus ~', [
-                    cE('box-shadow', {
-                      boxShadow: $local[createKey('boxShadowFocus', status)]
-                    }),
-                    cE('state-border', {
-                      border: $local[createKey('borderHover', status)]
-                    })
-                  ])
-                ]),
-                cM('focus', [
-                  cE('box-shadow', {
-                    boxShadow: $local[createKey('boxShadowFocus', status)]
-                  }),
-                  cE('state-border', {
-                    border: $local[createKey('borderFocus', status)]
-                  })
-                ])
-              ])
-            ])
-          ]
-        ])
-      )
-    })
-  }
-])

src/_base/selection/styles/dark.js

@@ -1,58 +1,74 @@
-import create from '../../../_styles/utils/create-component-base'
-import commonVariables from './_common'
 import { changeColor } from 'seemly'
+import { commonDark } from '../../../_styles/new-common'
 import { baseClearButtonDark } from '../../clear-button/styles'
+import commonVars from './_common'
 
-export default create({
+export default {
   name: 'BaseSelection',
-  theme: 'dark',
-  peer: [baseClearButtonDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    BaseClearButton: baseClearButtonDark
+  },
+  self (vars) {
+    const {
+      borderRadius,
+      textColor2Overlay,
+      textColor4Overlay,
+      textColor5Overlay,
+      inputColorOverlay,
+      inputColorDisabledOverlay,
+      primaryColor,
+      primaryColorHover,
+      warningColor,
+      warningColorHover,
+      errorColor,
+      errorColorHover
+    } = vars
     return {
-      ...commonVariables,
-      borderRadius: vars.borderRadius,
+      ...commonVars,
+      borderRadius: borderRadius,
       // default
-      textColor: vars.textColor2Overlay,
-      textColorDisabled: vars.textColor4Overlay,
-      placeholderColor: vars.textColor4Overlay,
-      placeholderColorDisabled: vars.textColor5Overlay,
-      color: vars.inputColorOverlay,
-      colorDisabled: vars.inputColorDisabledOverlay,
-      colorActive: changeColor(vars.primaryColor, { alpha: 0.1 }),
+      textColor: textColor2Overlay,
+      textColorDisabled: textColor4Overlay,
+      placeholderColor: textColor4Overlay,
+      placeholderColorDisabled: textColor5Overlay,
+      color: inputColorOverlay,
+      colorDisabled: inputColorDisabledOverlay,
+      colorActive: changeColor(primaryColor, { alpha: 0.1 }),
       border: '1px solid transparent',
-      borderHover: `1px solid ${vars.primaryColorHover}`,
-      borderActive: `1px solid ${vars.primaryColor}`,
-      borderFocus: `1px solid ${vars.primaryColorHover}`,
+      borderHover: `1px solid ${primaryColorHover}`,
+      borderActive: `1px solid ${primaryColor}`,
+      borderFocus: `1px solid ${primaryColorHover}`,
       boxShadowHover: null,
-      boxShadowActive: `0 0 8px 0 ${changeColor(vars.primaryColor, {
+      boxShadowActive: `0 0 8px 0 ${changeColor(primaryColor, {
         alpha: 0.4
       })}`,
       boxShadowFocus: null,
-      caretColor: vars.primaryColor,
+      caretColor: primaryColor,
       // warning
-      borderWarning: `1px solid ${vars.warningColor}`,
-      borderHoverWarning: `1px solid ${vars.warningColorHover}`,
-      borderActiveWarning: `1px solid ${vars.warningColor}`,
-      borderFocusWarning: `1px solid ${vars.warningColorHover}`,
+      borderWarning: `1px solid ${warningColor}`,
+      borderHoverWarning: `1px solid ${warningColorHover}`,
+      borderActiveWarning: `1px solid ${warningColor}`,
+      borderFocusWarning: `1px solid ${warningColorHover}`,
       boxShadowHoverWarning: null,
-      boxShadowActiveWarning: ` 0 0 8px 0 ${changeColor(vars.warningColor, {
+      boxShadowActiveWarning: ` 0 0 8px 0 ${changeColor(warningColor, {
         alpha: 0.4
       })}`,
       boxShadowFocusWarning: null,
-      colorActiveWarning: changeColor(vars.warningColor, { alpha: 0.1 }),
-      caretColorWarning: vars.warningColor,
+      colorActiveWarning: changeColor(warningColor, { alpha: 0.1 }),
+      caretColorWarning: warningColor,
       // error
-      borderError: `1px solid ${vars.errorColor}`,
-      borderHoverError: `1px solid ${vars.errorColorHover}`,
-      borderActiveError: `1px solid ${vars.errorColor}`,
-      borderFocusError: `1px solid ${vars.errorColorHover}`,
+      borderError: `1px solid ${errorColor}`,
+      borderHoverError: `1px solid ${errorColorHover}`,
+      borderActiveError: `1px solid ${errorColor}`,
+      borderFocusError: `1px solid ${errorColorHover}`,
       boxShadowHoverError: null,
-      boxShadowActiveError: `0 0 8px 0 ${changeColor(vars.errorColor, {
+      boxShadowActiveError: `0 0 8px 0 ${changeColor(errorColor, {
         alpha: 0.4
       })}`,
       boxShadowFocusError: null,
-      colorActiveError: changeColor(vars.errorColor, { alpha: 0.1 }),
-      caretColorError: vars.errorColor
+      colorActiveError: changeColor(errorColor, { alpha: 0.1 }),
+      caretColorError: errorColor
     }
   }
-})
+}

src/_base/selection/styles/light.js

@@ -1,58 +1,75 @@
-import create from '../../../_styles/utils/create-component-base'
-import commonVariables from './_common'
 import { changeColor } from 'seemly'
+import { commonLight } from '../../../_styles/new-common'
 import { baseClearButtonLight } from '../../clear-button/styles'
+import commonVariables from './_common'
 
-export default create({
+export default {
   name: 'BaseSelection',
-  theme: 'light',
-  peer: [baseClearButtonLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    BaseClearButton: baseClearButtonLight
+  },
+  self (vars) {
+    const {
+      borderRadius,
+      textColor2,
+      textColor4,
+      textColor5,
+      inputColor,
+      inputColorDisabled,
+      primaryColor,
+      primaryColorHover,
+      warningColor,
+      warningColorHover,
+      errorColor,
+      errorColorHover,
+      borderColor
+    } = vars
     return {
       ...commonVariables,
-      borderRadius: vars.borderRadius,
+      borderRadius: borderRadius,
       // default
-      textColor: vars.textColor2,
-      textColorDisabled: vars.textColor4,
-      placeholderColor: vars.textColor4,
-      placeholderColorDisabled: vars.textColor5,
-      color: vars.inputColor,
-      colorDisabled: vars.inputColorDisabled,
-      colorActive: vars.inputColor,
-      border: `1px solid ${vars.borderColor}`,
-      borderHover: `1px solid ${vars.primaryColorHover}`,
-      borderActive: `1px solid ${vars.primaryColor}`,
-      borderFocus: `1px solid ${vars.primaryColorHover}`,
+      textColor: textColor2,
+      textColorDisabled: textColor4,
+      placeholderColor: textColor4,
+      placeholderColorDisabled: textColor5,
+      color: inputColor,
+      colorDisabled: inputColorDisabled,
+      colorActive: inputColor,
+      border: `1px solid ${borderColor}`,
+      borderHover: `1px solid ${primaryColorHover}`,
+      borderActive: `1px solid ${primaryColor}`,
+      borderFocus: `1px solid ${primaryColorHover}`,
       boxShadowHover: null,
-      boxShadowActive: `0 0 0 2px ${changeColor(vars.primaryColor, {
+      boxShadowActive: `0 0 0 2px ${changeColor(primaryColor, {
         alpha: 0.2
       })}`,
       boxShadowFocus: null,
-      caretColor: vars.primaryColor,
+      caretColor: primaryColor,
       // warning
-      borderWarning: `1px solid ${vars.warningColor}`,
-      borderHoverWarning: `1px solid ${vars.warningColorHover}`,
-      borderActiveWarning: `1px solid ${vars.warningColor}`,
-      borderFocusWarning: `1px solid ${vars.warningColorHover}`,
+      borderWarning: `1px solid ${warningColor}`,
+      borderHoverWarning: `1px solid ${warningColorHover}`,
+      borderActiveWarning: `1px solid ${warningColor}`,
+      borderFocusWarning: `1px solid ${warningColorHover}`,
       boxShadowHoverWarning: null,
-      boxShadowActiveWarning: `0 0 0 2px ${changeColor(vars.warningColor, {
+      boxShadowActiveWarning: `0 0 0 2px ${changeColor(warningColor, {
         alpha: 0.2
       })}`,
       boxShadowFocusWarning: null,
-      colorActiveWarning: vars.inputColor,
-      caretColorWarning: vars.warningColor,
+      colorActiveWarning: inputColor,
+      caretColorWarning: warningColor,
       // error
-      borderError: `1px solid ${vars.errorColor}`,
-      borderHoverError: `1px solid ${vars.errorColorHover}`,
-      borderActiveError: `1px solid ${vars.errorColor}`,
-      borderFocusError: `1px solid ${vars.errorColorHover}`,
+      borderError: `1px solid ${errorColor}`,
+      borderHoverError: `1px solid ${errorColorHover}`,
+      borderActiveError: `1px solid ${errorColor}`,
+      borderFocusError: `1px solid ${errorColorHover}`,
       boxShadowHoverError: null,
-      boxShadowActiveError: `0 0 0 2px ${changeColor(vars.errorColor, {
+      boxShadowActiveError: `0 0 0 2px ${changeColor(errorColor, {
         alpha: 0.2
       })}`,
       boxShadowFocusError: null,
-      colorActiveError: vars.inputColor,
-      caretColorError: vars.errorColor
+      colorActiveError: inputColor,
+      caretColorError: errorColor
     }
   }
-})
+}

src/styles.new.js

@@ -60,11 +60,12 @@ import { thingDark } from './thing/styles'
 import { timeDark } from './time/styles'
 import { timePickerDark } from './time-picker/styles'
 import { timelineDark } from './timeline/styles'
+import { tooltipDark } from './tooltip/styles'
 import { transferDark } from './transfer/styles'
 import { typographyDark } from './typography/styles'
 import { treeDark } from './tree/styles'
 import { uploadDark } from './upload/styles'
-import { tooltipDark } from './tooltip/styles'
+import { baseSelectionDark } from './_base/selection/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -133,5 +134,7 @@ export const darkTheme = {
   Transfer: transferDark,
   Tree: treeDark,
   Typography: typographyDark,
-  Upload: uploadDark
+  Upload: uploadDark,
+  // danger zone
+  BaseSelection: baseSelectionDark
 }