refactor(project): removing packages/tokens (#11769)

* refactor(tokens): remove tokens

* Remove tokens/breadcrumb.

* refactor(tokens): remove tokens/button

* refactor(tokens): remove tokens/carousel

* refactor(tokens): removing tokens/checkbox

* refactor(tokens): removing tokens/collapse

* refactor(tokens): removing tokens/dialog

* refactor(tokens): removing tokens/pagination

* refactor(tokens): removing tokens/radio

* refactor(tokens): removing tokens/row

* refactor(tokens): removing tokens/scrollbar

* refactor(tokens): removing tokens/slider

* refactor(tokens): removing tokens/tabs

* refactor(tokens): removing tokens/upload

* refactor(tokens): removing tokens/popper

* refactor(tokens): removing tokens/tooltip

* refactor(tokens): removing tokens/tooltip-v2

* refactor(tokens): removing tokens/date-picker

* refactor(project): removing tokens/experimentals

* Remove tokens/experimentals
* Remove package/tokens
* Remove tokens related parts

* refactor(project): removing packages/tokens completely

* chore: update import statement

package.json

@@ -52,7 +52,6 @@
     "@element-plus/locale": "workspace:*",
     "@element-plus/test-utils": "workspace:*",
     "@element-plus/theme-chalk": "workspace:*",
-    "@element-plus/tokens": "workspace:*",
     "@element-plus/utils": "workspace:*",
     "@floating-ui/dom": "^1.0.1",
     "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",

packages/components/breadcrumb/index.ts

@@ -11,6 +11,7 @@ export default ElBreadcrumb
 
 export * from './src/breadcrumb'
 export * from './src/breadcrumb-item'
+export * from './src/constants'
 export type {
   BreadcrumbInstance,
   BreadcrumbItemInstance,

packages/components/breadcrumb/src/breadcrumb-item.vue

@@ -20,8 +20,8 @@
 <script lang="ts" setup>
 import { getCurrentInstance, inject, ref, toRefs } from 'vue'
 import ElIcon from '@element-plus/components/icon'
-import { breadcrumbKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
+import { breadcrumbKey } from './constants'
 import { breadcrumbItemProps } from './breadcrumb-item'
 
 import type { Router } from 'vue-router'

packages/components/breadcrumb/src/breadcrumb.vue

@@ -11,9 +11,8 @@
 
 <script lang="ts" setup>
 import { onMounted, provide, ref } from 'vue'
-import { breadcrumbKey } from '@element-plus/tokens'
-
 import { useNamespace } from '@element-plus/hooks'
+import { breadcrumbKey } from './constants'
 import { breadcrumbProps } from './breadcrumb'
 
 defineOptions({

packages/components/breadcrumb/src/constants.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue'
-import type { BreadcrumbProps } from '@element-plus/components/breadcrumb'
+import type { BreadcrumbProps } from './breadcrumb'
 
 export const breadcrumbKey: InjectionKey<BreadcrumbProps> =
   Symbol('breadcrumbKey')

packages/components/button/index.ts

@@ -9,4 +9,5 @@ export const ElButtonGroup = withNoopInstall(ButtonGroup)
 export default ElButton
 
 export * from './src/button'
+export * from './src/constants'
 export type { ButtonInstance, ButtonGroupInstance } from './src/instance'

packages/components/button/src/button-group.vue

@@ -5,9 +5,9 @@
 </template>
 <script lang="ts" setup>
 import { provide, reactive, toRef } from 'vue'
-import { buttonGroupContextKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
 import { buttonGroupProps } from './button-group'
+import { buttonGroupContextKey } from './constants'
 
 defineOptions({
   name: 'ElButtonGroup',

packages/components/button/src/constants.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
 
-import type { ButtonProps } from '@element-plus/components/button'
+import type { ButtonProps } from './button'
 
 export interface ButtonGroupContext {
   size?: ButtonProps['size']

packages/components/button/src/use-button.ts

@@ -6,7 +6,7 @@ import {
 } from '@element-plus/components/form'
 import { useGlobalConfig } from '@element-plus/components/config-provider'
 import { useDeprecated } from '@element-plus/hooks'
-import { buttonGroupContextKey } from '@element-plus/tokens'
+import { buttonGroupContextKey } from './constants'
 
 import type { SetupContext } from 'vue'
 import type { ButtonEmits, ButtonProps } from './button'

packages/components/carousel/index.ts

@@ -12,5 +12,6 @@ export const ElCarouselItem = withNoopInstall(CarouselItem)
 
 export * from './src/carousel'
 export * from './src/carousel-item'
+export * from './src/constants'
 
 export type { CarouselInstance, CarouselItemInstance } from './src/instance'

packages/components/carousel/src/constants.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref } from 'vue'
 
-import type { CarouselItemProps } from '@element-plus/components/carousel'
+import type { CarouselItemProps } from './carousel-item'
 
 export type CarouselItemStates = {
   hover: boolean

packages/components/carousel/src/use-carousel-item.ts

@@ -8,7 +8,7 @@ import {
   unref,
 } from 'vue'
 import { debugWarn, isUndefined } from '@element-plus/utils'
-import { carouselContextKey } from '@element-plus/tokens'
+import { carouselContextKey } from './constants'
 
 import type { CarouselItemProps } from './carousel-item'
 

packages/components/carousel/src/use-carousel.ts

@@ -12,11 +12,11 @@ import {
 import { throttle } from 'lodash-unified'
 import { useResizeObserver } from '@vueuse/core'
 import { debugWarn, isString } from '@element-plus/utils'
-import { carouselContextKey } from '@element-plus/tokens'
 import { useOrderedChildren } from '@element-plus/hooks'
+import { carouselContextKey } from './constants'
 
 import type { SetupContext } from 'vue'
-import type { CarouselItemContext } from '@element-plus/tokens'
+import type { CarouselItemContext } from './constants'
 import type { CarouselEmits, CarouselProps } from './carousel'
 
 const THROTTLE_TIME = 300

packages/components/checkbox/index.ts

@@ -15,3 +15,4 @@ export const ElCheckboxGroup = withNoopInstall(CheckboxGroup)
 
 export * from './src/checkbox-group'
 export * from './src/checkbox'
+export * from './src/constants'

packages/components/checkbox/src/checkbox-button.vue

@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import { computed, inject, useSlots } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { checkboxGroupContextKey } from '@element-plus/tokens'
+import { checkboxGroupContextKey } from './constants'
 import { useCheckbox } from './composables'
 import { checkboxEmits, checkboxProps } from './checkbox'
 

packages/components/checkbox/src/checkbox-group.vue

@@ -17,9 +17,10 @@ import { pick } from 'lodash-unified'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { debugWarn } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import { checkboxGroupContextKey } from '@element-plus/tokens'
 import { useFormItem, useFormItemInputId } from '@element-plus/components/form'
 import { checkboxGroupEmits, checkboxGroupProps } from './checkbox-group'
+import { checkboxGroupContextKey } from './constants'
+
 import type { CheckboxGroupValueType } from './checkbox-group'
 
 defineOptions({

packages/components/checkbox/src/composables/use-checkbox-disabled.ts

@@ -1,7 +1,7 @@
 import { computed, inject } from 'vue'
 import { useFormDisabled } from '@element-plus/components/form'
 import { isUndefined } from '@element-plus/utils'
-import { checkboxGroupContextKey } from '@element-plus/tokens'
+import { checkboxGroupContextKey } from '../constants'
 
 import type { CheckboxModel, CheckboxStatus } from '../composables'
 

packages/components/checkbox/src/composables/use-checkbox-event.ts

@@ -1,7 +1,7 @@
 import { computed, getCurrentInstance, inject, nextTick, watch } from 'vue'
 import { useFormItem } from '@element-plus/components/form'
-import { checkboxGroupContextKey } from '@element-plus/tokens'
 import { debugWarn } from '@element-plus/utils'
+import { checkboxGroupContextKey } from '../constants'
 
 import type { useFormItemInputId } from '@element-plus/components/form'
 import type { CheckboxProps } from '../checkbox'

packages/components/checkbox/src/composables/use-checkbox-model.ts

@@ -1,7 +1,7 @@
 import { computed, getCurrentInstance, inject, ref } from 'vue'
 import { isArray, isUndefined } from '@element-plus/utils'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { checkboxGroupContextKey } from '@element-plus/tokens'
+import { checkboxGroupContextKey } from '../constants'
 
 import type { CheckboxProps } from '../checkbox'
 

packages/components/checkbox/src/composables/use-checkbox-status.ts

@@ -2,7 +2,7 @@ import { computed, inject, ref, toRaw } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { useFormSize } from '@element-plus/components/form'
 import { isArray, isBoolean, isObject } from '@element-plus/utils'
-import { checkboxGroupContextKey } from '@element-plus/tokens'
+import { checkboxGroupContextKey } from '../constants'
 
 import type { ComponentInternalInstance } from 'vue'
 import type { CheckboxProps } from '../checkbox'

packages/components/checkbox/src/constants.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, ToRefs, WritableComputedRef } from 'vue'
-import type { CheckboxGroupProps } from '@element-plus/components'
+import type { CheckboxGroupProps } from './checkbox-group'
 
 type CheckboxGroupContext = {
   modelValue?: WritableComputedRef<any>

packages/components/col/src/col.vue

@@ -8,7 +8,7 @@
 import { computed, inject } from 'vue'
 import { isNumber, isObject } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import { rowContextKey } from '@element-plus/tokens'
+import { rowContextKey } from '@element-plus/components/row'
 import { colProps } from './col'
 import type { CSSProperties } from 'vue'
 

packages/components/collapse/index.ts

@@ -11,4 +11,5 @@ export const ElCollapseItem = withNoopInstall(CollapseItem)
 
 export * from './src/collapse'
 export * from './src/collapse-item'
+export * from './src/constants'
 export type { CollapseInstance, CollapseItemInstance } from './src/instance'

packages/components/collapse/src/constants.ts

@@ -1,5 +1,5 @@
-import type { CollapseActiveName } from '@element-plus/components/collapse'
 import type { InjectionKey, Ref } from 'vue'
+import type { CollapseActiveName } from './collapse'
 
 export interface CollapseContext {
   activeNames: Ref<CollapseActiveName[]>

packages/components/collapse/src/use-collapse-item.ts

@@ -1,7 +1,7 @@
 import { computed, inject, ref, unref } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { generateId } from '@element-plus/utils'
-import { collapseContextKey } from '@element-plus/tokens'
+import { collapseContextKey } from './constants'
 
 import type { CollapseItemProps } from './collapse-item'
 

packages/components/collapse/src/use-collapse.ts

@@ -2,7 +2,7 @@ import { computed, provide, ref, watch } from 'vue'
 import { ensureArray } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { collapseContextKey } from '@element-plus/tokens'
+import { collapseContextKey } from './constants'
 
 import type { SetupContext } from 'vue'
 import type {

packages/components/config-provider/src/config-provider-props.ts

@@ -2,11 +2,14 @@ import { buildProps, definePropType } from '@element-plus/utils'
 import { useFormSizeProp } from '@element-plus/components/form'
 
 import type { ExtractPropTypes } from 'vue'
-import type { ExperimentalFeatures } from '@element-plus/tokens'
 import type { Language } from '@element-plus/locale'
 import type { ButtonConfigContext } from '@element-plus/components/button'
 import type { MessageConfigContext } from '@element-plus/components/message'
 
+export type ExperimentalFeatures = {
+  // TO BE Defined
+}
+
 export const configProviderProps = buildProps({
   /**
    * @description Controlling if the users want a11y features

packages/components/date-picker/index.ts

@@ -11,3 +11,4 @@ _DatePicker.install = (app: App) => {
 
 export default _DatePicker
 export const ElDatePicker = _DatePicker
+export * from './src/constants'

packages/components/date-picker/src/composables/use-range-picker.ts

@@ -1,8 +1,8 @@
 import { getCurrentInstance, inject, ref, unref, watch } from 'vue'
 import { isArray } from '@element-plus/utils'
-import { ROOT_PICKER_INJECTION_KEY } from '@element-plus/tokens'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { getDefaultValue, isValidRange } from '../utils'
+import { ROOT_PICKER_INJECTION_KEY } from '../constants'
 import { useShortcut } from './use-shortcut'
 
 import type { Ref } from 'vue'

packages/components/date-picker/src/date-picker-com/basic-cell-render.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, inject } from 'vue'
-import { ROOT_PICKER_INJECTION_KEY } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
+import { ROOT_PICKER_INJECTION_KEY } from '../constants'
 import { basicCellProps } from '../props/basic-cell'
 
 export default defineComponent({

packages/components/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -214,7 +214,7 @@ import {
   DArrowLeft,
   DArrowRight,
 } from '@element-plus/icons-vue'
-import { TOOLTIP_INJECTION_KEY } from '@element-plus/tokens'
+import { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'
 import { panelDatePickProps } from '../props/panel-date-pick'
 import DateTable from './basic-date-table.vue'
 import MonthTable from './basic-month-table.vue'

packages/components/date-picker/src/date-picker.tsx

@@ -9,13 +9,13 @@ import dayOfYear from 'dayjs/plugin/dayOfYear.js'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter.js'
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore.js'
 import { useNamespace } from '@element-plus/hooks'
-import { ROOT_PICKER_INJECTION_KEY } from '@element-plus/tokens'
 import {
   CommonPicker,
   DEFAULT_FORMATS_DATE,
   DEFAULT_FORMATS_DATEPICKER,
   timePickerDefaultProps,
 } from '@element-plus/components/time-picker'
+import { ROOT_PICKER_INJECTION_KEY } from './constants'
 
 import { datePickerProps } from './props/date-picker'
 import { getPanel } from './panel-utils'

packages/components/dialog/index.ts

@@ -6,3 +6,4 @@ export default ElDialog
 
 export * from './src/use-dialog'
 export * from './src/dialog'
+export * from './src/constants'

packages/components/dialog/src/constants.ts

@@ -1,11 +1,11 @@
 import type { CSSProperties, ComputedRef, InjectionKey, Ref } from 'vue'
-import type { useNamespace } from '@element-plus/hooks'
+import type { UseNamespaceReturn } from '@element-plus/hooks'
 
 export type DialogContext = {
   dialogRef: Ref<HTMLElement | undefined>
   headerRef: Ref<HTMLElement | undefined>
   bodyId: Ref<string>
-  ns: ReturnType<typeof useNamespace>
+  ns: UseNamespaceReturn
   rendered: Ref<boolean>
   style: ComputedRef<CSSProperties>
 }

packages/components/dialog/src/dialog-content.vue

@@ -45,7 +45,7 @@ import { ElIcon } from '@element-plus/components/icon'
 import { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'
 import { useDraggable, useLocale } from '@element-plus/hooks'
 import { CloseComponents, composeRefs } from '@element-plus/utils'
-import { dialogInjectionKey } from '@element-plus/tokens'
+import { dialogInjectionKey } from './constants'
 import { dialogContentEmits, dialogContentProps } from './dialog-content'
 
 const { t } = useLocale()

packages/components/dialog/src/dialog.vue

@@ -74,9 +74,9 @@
 import { computed, provide, ref, useSlots } from 'vue'
 import { ElOverlay } from '@element-plus/components/overlay'
 import { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'
-import { dialogInjectionKey } from '@element-plus/tokens'
 import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElDialogContent from './dialog-content.vue'
+import { dialogInjectionKey } from './constants'
 import { dialogEmits, dialogProps } from './dialog'
 import { useDialog } from './use-dialog'
 

packages/components/form/__tests__/form.test.tsx

@@ -22,7 +22,7 @@ import FormItem from '../src/form-item.vue'
 import DynamicDomainForm, { formatDomainError } from '../mocks/mock-data'
 
 import type { VueWrapper } from '@vue/test-utils'
-import type { FormRules } from '@element-plus/tokens'
+import type { FormRules } from '@element-plus/components/form'
 
 type FormInstance = InstanceType<typeof Form>
 type FormItemInstance = InstanceType<typeof FormItem>

packages/components/pagination/index.ts

@@ -6,3 +6,4 @@ export const ElPagination = withInstall(Pagination)
 export default ElPagination
 
 export * from './src/pagination'
+export * from './src/constants'

packages/components/pagination/src/pagination.ts

@@ -17,7 +17,7 @@ import {
   mutable,
 } from '@element-plus/utils'
 import { useLocale, useNamespace } from '@element-plus/hooks'
-import { elPaginationKey } from '@element-plus/tokens'
+import { elPaginationKey } from './constants'
 
 import Prev from './components/prev.vue'
 import Next from './components/next.vue'

packages/components/pagination/src/usePagination.ts

@@ -1,4 +1,4 @@
 import { inject } from 'vue'
-import { elPaginationKey } from '@element-plus/tokens'
+import { elPaginationKey } from './constants'
 
 export const usePagination = () => inject(elPaginationKey, {})

packages/components/popper/__tests__/arrow.test.tsx

@@ -1,7 +1,7 @@
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { POPPER_CONTENT_INJECTION_KEY } from '@element-plus/tokens'
+import { POPPER_CONTENT_INJECTION_KEY } from '@element-plus/components/popper'
 import ElArrow from '../src/arrow.vue'
 
 import type { VueWrapper } from '@vue/test-utils'

packages/components/popper/__tests__/content.test.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
+import { POPPER_INJECTION_KEY } from '@element-plus/components/popper'
 import ElContent from '../src/content.vue'
 
 import type { VueWrapper } from '@vue/test-utils'

packages/components/popper/__tests__/popper.test.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, inject, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
+import { POPPER_INJECTION_KEY } from '@element-plus/components/popper'
 import ElPopper from '../src/popper.vue'
 
 const AXIOM = 'rem is the best girl'

packages/components/popper/__tests__/trigger.test.tsx

@@ -1,7 +1,7 @@
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
+import { POPPER_INJECTION_KEY } from '@element-plus/components/popper'
 import ElTrigger from '../src/trigger.vue'
 
 import type { VueWrapper } from '@vue/test-utils'

packages/components/popper/index.ts

@@ -14,5 +14,6 @@ export * from './src/popper'
 export * from './src/trigger'
 export * from './src/content'
 export * from './src/arrow'
+export * from './src/constants'
 
 export type { Placement, Options } from '@popperjs/core'

packages/components/popper/src/arrow.vue

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, watch } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { POPPER_CONTENT_INJECTION_KEY } from '@element-plus/tokens'
+import { POPPER_CONTENT_INJECTION_KEY } from './constants'
 import { popperArrowProps } from './arrow'
 
 defineOptions({

packages/components/popper/src/composables/use-content.ts

@@ -1,10 +1,10 @@
 import { computed, inject, onMounted, ref, unref, watch } from 'vue'
 import { isUndefined } from 'lodash-unified'
 import { usePopper } from '@element-plus/hooks'
-import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
+import { POPPER_INJECTION_KEY } from '../constants'
 import { buildPopperOptions, unwrapMeasurableEl } from '../utils'
-import type { Modifier } from '@popperjs/core'
 
+import type { Modifier } from '@popperjs/core'
 import type { PartialOptions } from '@element-plus/hooks'
 import type { PopperContentProps } from '../content'
 

packages/components/popper/src/content.ts

@@ -3,7 +3,7 @@ import { buildProps, definePropType } from '@element-plus/utils'
 
 import type { ExtractPropTypes, StyleValue } from 'vue'
 import type { Options, Placement } from '@popperjs/core'
-import type { Measurable } from '@element-plus/tokens'
+import type { Measurable } from './constants'
 import type Content from './content.vue'
 
 type ClassObjectType = Record<string, boolean>

packages/components/popper/src/content.vue

@@ -37,9 +37,9 @@ import {
 import { NOOP } from '@vue/shared'
 import { isNil } from 'lodash-unified'
 import ElFocusTrap from '@element-plus/components/focus-trap'
-import { POPPER_CONTENT_INJECTION_KEY } from '@element-plus/tokens'
 import { formItemContextKey } from '@element-plus/components/form'
 import { isElement } from '@element-plus/utils'
+import { POPPER_CONTENT_INJECTION_KEY } from './constants'
 import { popperContentEmits, popperContentProps } from './content'
 import {
   usePopperContent,

packages/components/popper/src/popper.vue

@@ -4,11 +4,11 @@
 
 <script lang="ts" setup>
 import { computed, provide, ref } from 'vue'
-import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
+import { POPPER_INJECTION_KEY } from './constants'
 import { popperProps } from './popper'
 
 import type { Instance as PopperInstance } from '@popperjs/core'
-import type { ElPopperInjectionContext } from '@element-plus/tokens'
+import type { ElPopperInjectionContext } from './constants'
 
 defineOptions({
   name: 'ElPopper',

packages/components/popper/src/trigger.ts

@@ -1,6 +1,6 @@
 import { buildProps, definePropType } from '@element-plus/utils'
 
-import type { Measurable } from '@element-plus/tokens'
+import type { Measurable } from './constants'
 import type Trigger from './trigger.vue'
 
 export const popperTriggerProps = buildProps({

packages/components/popper/src/trigger.vue

@@ -17,8 +17,8 @@ import { isNil } from 'lodash-unified'
 import { unrefElement } from '@vueuse/core'
 import { ElOnlyChild } from '@element-plus/components/slot'
 import { useForwardRef } from '@element-plus/hooks'
-import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
 import { isElement } from '@element-plus/utils'
+import { POPPER_INJECTION_KEY } from './constants'
 import { popperTriggerProps } from './trigger'
 
 import type { WatchStopHandle } from 'vue'

packages/components/popper/src/utils.ts

@@ -3,7 +3,7 @@ import { isClient, unrefElement } from '@vueuse/core'
 import type { ComponentPublicInstance } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import type { Modifier } from '@popperjs/core'
-import type { Measurable } from '@element-plus/tokens'
+import type { Measurable } from './constants'
 import type { PopperCoreConfigProps } from './content'
 
 export const buildPopperOptions = (

packages/components/radio/index.ts

@@ -15,3 +15,4 @@ export const ElRadioButton = withNoopInstall(RadioButton)
 export * from './src/radio'
 export * from './src/radio-group'
 export * from './src/radio-button'
+export * from './src/constants'

packages/components/radio/src/constants.ts

@@ -1,5 +1,5 @@
-import type { RadioGroupProps } from '@element-plus/components'
 import type { InjectionKey } from 'vue'
+import type { RadioGroupProps } from './radio-group'
 
 export interface RadioGroupContext extends RadioGroupProps {
   changeEvent: (val: RadioGroupProps['modelValue']) => void

packages/components/radio/src/radio-group.vue

@@ -24,11 +24,12 @@ import {
 } from 'vue'
 import { useFormItem, useFormItemInputId } from '@element-plus/components/form'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { radioGroupKey } from '@element-plus/tokens'
 import { useId, useNamespace } from '@element-plus/hooks'
 import { debugWarn } from '@element-plus/utils'
 import { radioGroupEmits, radioGroupProps } from './radio-group'
-import type { RadioGroupProps } from '..'
+import { radioGroupKey } from './constants'
+
+import type { RadioGroupProps } from './radio-group'
 
 defineOptions({
   name: 'ElRadioGroup',

packages/components/radio/src/use-radio.ts

@@ -1,7 +1,8 @@
 import { computed, inject, ref } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { radioGroupKey } from '@element-plus/tokens'
 import { useFormDisabled, useFormSize } from '@element-plus/components/form'
+import { radioGroupKey } from './constants'
+
 import type { SetupContext } from 'vue'
 import type { RadioEmits, RadioProps } from './radio'
 

packages/components/row/index.ts

@@ -5,3 +5,4 @@ export const ElRow = withInstall(Row)
 export default ElRow
 
 export * from './src/row'
+export * from './src/constants'

packages/components/row/src/row.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { rowContextKey } from '@element-plus/tokens'
+import { rowContextKey } from './constants'
 import { rowProps } from './row'
 import type { CSSProperties } from 'vue'
 

packages/components/scrollbar/index.ts

@@ -8,3 +8,4 @@ export default ElScrollbar
 export * from './src/util'
 export * from './src/scrollbar'
 export * from './src/thumb'
+export * from './src/constants'

packages/components/scrollbar/src/scrollbar.vue

@@ -35,10 +35,10 @@ import {
 } from 'vue'
 import { useEventListener, useResizeObserver } from '@vueuse/core'
 import { addUnit, debugWarn, isNumber, isObject } from '@element-plus/utils'
-import { scrollbarContextKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
 import { GAP } from './util'
 import Bar from './bar.vue'
+import { scrollbarContextKey } from './constants'
 import { scrollbarEmits, scrollbarProps } from './scrollbar'
 import type { BarInstance } from './bar'
 import type { CSSProperties, StyleValue } from 'vue'

packages/components/scrollbar/src/thumb.vue

@@ -19,9 +19,9 @@
 <script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'
 import { isClient, useEventListener } from '@vueuse/core'
-import { scrollbarContextKey } from '@element-plus/tokens'
 import { throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
+import { scrollbarContextKey } from './constants'
 import { BAR_MAP, renderThumbStyle } from './util'
 import { thumbProps } from './thumb'
 

packages/components/slider/index.ts

@@ -6,3 +6,4 @@ export const ElSlider = withInstall(Slider)
 export default ElSlider
 
 export * from './src/slider'
+export * from './src/constants'

packages/components/slider/src/composables/use-slider-button.ts

@@ -1,7 +1,8 @@
 import { computed, inject, nextTick, ref, watch } from 'vue'
 import { debounce } from 'lodash-unified'
 import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { sliderContextKey } from '@element-plus/tokens'
+import { sliderContextKey } from '../constants'
+
 import type { CSSProperties, ComputedRef, Ref, SetupContext } from 'vue'
 import type { SliderProps } from '../slider'
 import type {

packages/components/slider/src/constants.ts

@@ -1,5 +1,5 @@
-import type { SliderProps } from '@element-plus/components'
 import type { ComputedRef, InjectionKey, Ref, ToRefs } from 'vue'
+import type { SliderProps } from './slider'
 
 export interface SliderContext extends ToRefs<SliderProps> {
   precision: ComputedRef<number>

packages/components/slider/src/slider.vue

@@ -112,7 +112,7 @@ import { computed, provide, reactive, toRefs } from 'vue'
 import ElInputNumber from '@element-plus/components/input-number'
 import { useFormItemInputId, useFormSize } from '@element-plus/components/form'
 import { useLocale, useNamespace } from '@element-plus/hooks'
-import { sliderContextKey } from '@element-plus/tokens'
+import { sliderContextKey } from './constants'
 import { sliderEmits, sliderProps } from './slider'
 import SliderButton from './button.vue'
 import SliderMarker from './marker'

packages/components/tabs/__tests__/tabs.test.tsx

@@ -6,7 +6,7 @@ import Tabs from '../src/tabs'
 import TabPane from '../src/tab-pane.vue'
 import TabNav from '../src/tab-nav'
 import type { TabPaneName } from '../src/tabs'
-import type { TabsPaneContext } from '@element-plus/tokens'
+import type { TabsPaneContext } from '@element-plus/components/tabs'
 
 const Comp = defineComponent({
   components: {

packages/components/tabs/index.ts

@@ -12,3 +12,4 @@ export * from './src/tabs'
 export * from './src/tab-bar'
 export * from './src/tab-nav'
 export * from './src/tab-pane'
+export * from './src/constants'

packages/components/tabs/src/constants.ts

@@ -1,5 +1,6 @@
-import type { TabPaneProps, TabsProps } from '@element-plus/components/tabs'
 import type { ComputedRef, InjectionKey, Ref, Slots, UnwrapRef } from 'vue'
+import type { TabsProps } from './tabs'
+import type { TabPaneProps } from './tab-pane'
 
 export type TabsPaneContext = UnwrapRef<{
   uid: number

packages/components/tabs/src/tab-bar.ts

@@ -1,6 +1,6 @@
 import { buildProps, definePropType, mutable } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
-import type { TabsPaneContext } from '@element-plus/tokens'
+import type { TabsPaneContext } from './constants'
 import type TabBar from './tab-bar.vue'
 
 export const tabBarProps = buildProps({

packages/components/tabs/src/tab-bar.vue

@@ -10,8 +10,8 @@
 import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { capitalize, throwError } from '@element-plus/utils'
-import { tabsRootContextKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
+import { tabsRootContextKey } from './constants'
 import { tabBarProps } from './tab-bar'
 
 import type { CSSProperties } from 'vue'

packages/components/tabs/src/tab-nav.tsx

@@ -24,11 +24,12 @@ import {
 import { EVENT_CODE } from '@element-plus/constants'
 import { ElIcon } from '@element-plus/components/icon'
 import { ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue'
-import { tabsRootContextKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
 import TabBar from './tab-bar.vue'
+import { tabsRootContextKey } from './constants'
+
 import type { CSSProperties, ExtractPropTypes } from 'vue'
-import type { TabsPaneContext } from '@element-plus/tokens'
+import type { TabsPaneContext } from './constants'
 import type { TabPaneName } from './tabs'
 
 interface Scrollable {

packages/components/tabs/src/tab-pane.vue

@@ -25,9 +25,9 @@ import {
   watch,
 } from 'vue'
 import { eagerComputed } from '@vueuse/core'
-import { tabsRootContextKey } from '@element-plus/tokens'
 import { throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
+import { tabsRootContextKey } from './constants'
 import { tabPaneProps } from './tab-pane'
 
 const COMPONENT_NAME = 'ElTabPane'

packages/components/tabs/src/tabs.tsx

@@ -18,16 +18,16 @@ import {
 import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import ElIcon from '@element-plus/components/icon'
 import { Plus } from '@element-plus/icons-vue'
-import { tabsRootContextKey } from '@element-plus/tokens'
 import {
   useDeprecated,
   useNamespace,
   useOrderedChildren,
 } from '@element-plus/hooks'
+import { tabsRootContextKey } from './constants'
 import TabNav from './tab-nav'
 
 import type { TabNavInstance } from './tab-nav'
-import type { TabsPaneContext } from '@element-plus/tokens'
+import type { TabsPaneContext } from './constants'
 import type { ExtractPropTypes } from 'vue'
 import type { Awaitable } from '@element-plus/utils'
 

packages/components/tooltip-v2/index.ts

@@ -7,5 +7,6 @@ export * from './src/content'
 export * from './src/root'
 export * from './src/tooltip'
 export * from './src/trigger'
+export * from './src/constants'
 
 export default ElTooltipV2

packages/components/tooltip-v2/src/arrow.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { tooltipV2ContentKey, tooltipV2RootKey } from '@element-plus/tokens'
+import { tooltipV2ContentKey, tooltipV2RootKey } from './constants'
 import { tooltipV2ArrowProps, tooltipV2ArrowSpecialProps } from './arrow'
 
 import type { CSSProperties } from 'vue'

packages/components/tooltip-v2/src/constants.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from 'vue'
-import type { useNamespace } from '@element-plus/hooks'
+import type { UseNamespaceReturn } from '@element-plus/hooks'
 
 export type TooltipV2Context = {
   onClose: () => void
@@ -7,7 +7,7 @@ export type TooltipV2Context = {
   onOpen: () => void
   contentId: Ref<string>
   triggerRef: Ref<HTMLElement | null>
-  ns: ReturnType<typeof useNamespace>
+  ns: UseNamespaceReturn
 }
 
 export type TooltipV2ContentContext = {

packages/components/tooltip-v2/src/content.vue

@@ -16,7 +16,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, provide, ref, unref, watch } from 'vue'
 import { offset } from '@floating-ui/dom'
-import { tooltipV2ContentKey, tooltipV2RootKey } from '@element-plus/tokens'
 import {
   arrowMiddleware,
   useFloating,
@@ -24,6 +23,7 @@ import {
   useZIndex,
 } from '@element-plus/hooks'
 import ElVisuallyHidden from '@element-plus/components/visual-hidden'
+import { tooltipV2ContentKey, tooltipV2RootKey } from './constants'
 import { tooltipV2ContentProps } from './content'
 import { tooltipV2CommonProps } from './common'
 

packages/components/tooltip-v2/src/root.vue

@@ -15,7 +15,7 @@ import {
 import { useTimeoutFn } from '@vueuse/core'
 import { useId, useNamespace } from '@element-plus/hooks'
 import { isNumber, isPropAbsent } from '@element-plus/utils'
-import { TOOLTIP_V2_OPEN, tooltipV2RootKey } from '@element-plus/tokens'
+import { TOOLTIP_V2_OPEN, tooltipV2RootKey } from './constants'
 import { tooltipV2RootProps } from './root'
 
 defineOptions({

packages/components/tooltip-v2/src/trigger.vue

@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { inject, onBeforeUnmount, watch } from 'vue'
 import { composeEventHandlers } from '@element-plus/utils'
-import { tooltipV2RootKey } from '@element-plus/tokens'
+import { tooltipV2RootKey } from './constants'
 import ForwardRef from './forward-ref'
 import { tooltipV2TriggerProps } from './trigger'
 import { tooltipV2CommonProps } from './common'

packages/components/tooltip/__tests__/content.test.tsx

@@ -10,7 +10,7 @@ import {
   it,
 } from 'vitest'
 import { usePopperContainer } from '@element-plus/hooks'
-import { TOOLTIP_INJECTION_KEY } from '@element-plus/tokens'
+import { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'
 import { genTooltipProvides } from '../test-helper/provides'
 import ElTooltipContent from '../src/content.vue'
 

packages/components/tooltip/__tests__/trigger.test.tsx

@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it } from 'vitest'
 import { EVENT_CODE } from '@element-plus/constants'
-import { TOOLTIP_INJECTION_KEY } from '@element-plus/tokens'
+import { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'
 import ElTooltipTrigger from '../src/trigger.vue'
 import { genTooltipProvides } from '../test-helper/provides'
 

packages/components/tooltip/index.ts

@@ -5,4 +5,5 @@ export const ElTooltip = withInstall(Tooltip)
 export * from './src/tooltip'
 export * from './src/trigger'
 export * from './src/content'
+export * from './src/constants'
 export default ElTooltip

packages/components/tooltip/src/constants.ts

@@ -1,6 +1,6 @@
-import type { Arrayable } from '../utils/typescript'
+import type { Arrayable } from '@element-plus/utils'
 import type { InjectionKey, Ref } from 'vue'
-import type { TooltipTriggerType } from '@element-plus/components/tooltip'
+import type { TooltipTriggerType } from './trigger'
 
 export type ElTooltipInjectionContext = {
   controlled: Ref<boolean>

packages/components/tooltip/src/content.vue

@@ -50,7 +50,7 @@ import { onClickOutside } from '@vueuse/core'
 import { useNamespace, usePopperContainerId } from '@element-plus/hooks'
 import { composeEventHandlers } from '@element-plus/utils'
 import { ElPopperContent } from '@element-plus/components/popper'
-import { TOOLTIP_INJECTION_KEY } from '@element-plus/tokens'
+import { TOOLTIP_INJECTION_KEY } from './constants'
 import { useTooltipContentProps } from './content'
 
 defineOptions({

packages/components/tooltip/src/tooltip.vue

@@ -66,7 +66,7 @@ import {
   useId,
   usePopperContainer,
 } from '@element-plus/hooks'
-import { TOOLTIP_INJECTION_KEY } from '@element-plus/tokens'
+import { TOOLTIP_INJECTION_KEY } from './constants'
 import { tooltipEmits, useTooltipModelToggle, useTooltipProps } from './tooltip'
 import ElTooltipTrigger from './trigger.vue'
 import ElTooltipContent from './content.vue'

packages/components/tooltip/src/trigger.vue

@@ -21,7 +21,7 @@ import { inject, ref, toRef, unref } from 'vue'
 import { ElPopperTrigger } from '@element-plus/components/popper'
 import { composeEventHandlers } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import { TOOLTIP_INJECTION_KEY } from '@element-plus/tokens'
+import { TOOLTIP_INJECTION_KEY } from './constants'
 import { useTooltipTriggerProps } from './trigger'
 import { whenTrigger } from './utils'
 import type { OnlyChildExpose } from '@element-plus/components/slot'

packages/components/upload/__tests__/upload-dragger.test.tsx

@@ -1,7 +1,7 @@
 import { computed, provide } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'
-import { uploadContextKey } from '@element-plus/tokens'
+import { uploadContextKey } from '@element-plus/components/upload'
 import UploadDragger from '../src/upload-dragger.vue'
 
 const AXIOM = 'Rem is the best girl'

packages/components/upload/index.ts

@@ -8,3 +8,4 @@ export * from './src/upload'
 export * from './src/upload-content'
 export * from './src/upload-list'
 export * from './src/upload-dragger'
+export * from './src/constants'

packages/components/upload/src/upload-dragger.vue

@@ -12,8 +12,8 @@
 import { inject, ref } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { useFormDisabled } from '@element-plus/components/form'
-import { uploadContextKey } from '@element-plus/tokens'
 import { throwError } from '@element-plus/utils/error'
+import { uploadContextKey } from './constants'
 import { uploadDraggerEmits, uploadDraggerProps } from './upload-dragger'
 
 const COMPONENT_NAME = 'ElUploadDrag'

packages/components/upload/src/upload.vue

@@ -54,13 +54,13 @@ import {
   toRef,
   useSlots,
 } from 'vue'
-import { uploadContextKey } from '@element-plus/tokens'
 import { useFormDisabled } from '@element-plus/components/form'
-
+import { uploadContextKey } from './constants'
 import UploadList from './upload-list.vue'
 import UploadContent from './upload-content.vue'
 import { useHandlers } from './use-handlers'
 import { uploadProps } from './upload'
+
 import type {
   UploadContentInstance,
   UploadContentProps,

packages/element-plus/index.ts

@@ -3,7 +3,6 @@ export * from '@element-plus/components'
 export * from '@element-plus/constants'
 export * from '@element-plus/directives'
 export * from '@element-plus/hooks'
-export * from '@element-plus/tokens'
 export * from './make-installer'
 
 export const install = installer.install

packages/hooks/__tests__/use-form-item.test.tsx

@@ -2,12 +2,11 @@ import { defineComponent, provide } from 'vue'
 import { NOOP } from '@vue/shared'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import { ElButton } from '@element-plus/components'
+import { ElButton, buttonGroupContextKey } from '@element-plus/components'
 import {
   formContextKey,
   formItemContextKey,
 } from '@element-plus/components/form'
-import { buttonGroupContextKey } from '@element-plus/tokens'
 
 import type {
   FormContext,

packages/tokens/experimental-features.ts

@@ -1,3 +0,0 @@
-export type ExperimentalFeatures = {
-  // TO BE Defined
-}