chore: rename sass method get-css-var to value

.prettierrc.js

@@ -0,0 +1 @@
+export { default } from '@vexip-ui/prettier-config'

.stylelintrc.js

@@ -2,6 +2,6 @@
  * @type {import('stylelint').Config}
  */
 export default {
-  extends: ["@vexip-ui/stylelint-config"],
-  plugins: ["stylelint-prettier"],
-};
+  extends: ['@vexip-ui/stylelint-config'],
+  plugins: ['stylelint-prettier']
+}

package.json

@@ -2,10 +2,10 @@
   "name": "vexip-ui",
   "version": "2.3.13",
   "type": "module",
+  "packageManager": "[email protected]",
   "license": "MIT",
   "author": "qmhc",
   "description": "A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good",
-  "packageManager": "[email protected]",
   "scripts": {
     "bootstrap": "tsx scripts/bootstrap.ts",
     "deploy:docs": "tsx scripts/deploy-docs.ts",
@@ -115,6 +115,9 @@
     "meta-data.json",
     "types.d.ts"
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "keywords": [
     "flex",
     "components",
@@ -133,9 +136,6 @@
     "url": "https://github.com/vexip-ui/vexip-ui/issues"
   },
   "homepage": "https://www.vexipui.com",
-  "engines": {
-    "node": ">=18"
-  },
   "dependencies": {
     "@vexip-ui/bem-helper": "workspace:*",
     "@vexip-ui/config": "workspace:*",
@@ -210,12 +210,12 @@
   },
   "pnpm": {
     "peerDependencyRules": {
+      "allowAny": [
+        "@csstools/*"
+      ],
       "ignoreMissing": [
         "@algolia/client-search",
         "vue"
-      ],
-      "allowAny": [
-        "@csstools/*"
       ]
     },
     "patchedDependencies": {

scripts/constant.ts

@@ -2,13 +2,13 @@ import { resolve } from 'node:path'
 import { existsSync, readdirSync, statSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 
-export { default as prettierConfig } from '../.prettierrc'
+export { default as prettierConfig } from '@vexip-ui/prettier-config'
 
 export const rootDir = resolve(fileURLToPath(import.meta.url), '../..')
 
 export const componentsDir = resolve(rootDir, 'components')
 
-export const components = readdirSync(componentsDir).filter((f) => {
+export const components = readdirSync(componentsDir).filter(f => {
   const path = resolve(componentsDir, f)
 
   if (!statSync(path).isDirectory()) {

style/alert.scss

@@ -1,33 +1,33 @@
-@use "sass:map";
+@use 'sass:map';
 
-@use "./shared" as *;
-@use "./design" as *;
+@use './shared' as *;
+@use './design' as *;
 
 $alert: () !default;
 $alert: map.merge(
   (
-    bg-color: get-css-var("fill-color-background"),
-    b-color: get-css-var("border-color-base"),
-    border: get-css-var("border-shape") get-css-var("alert-b-color"),
-    radius: get-css-var("radius-base"),
-    icon-color: get-css-var("content-color-primary"),
-    text-color: get-css-var("content-color-base"),
-    title-font-size: get-css-var("font-size-primary"),
-    title-color: get-css-var("content-color-primary"),
-    close-color: get-css-var("content-color-placeholder"),
-    close-color-hover: get-css-var("content-color-normal"),
-    icon-width: 40px,
+    bg-color: value('fill-color-background'),
+    b-color: value('border-color-base'),
+    border: value('border-shape') value('alert-b-color'),
+    radius: value('radius-base'),
+    icon-color: value('content-color-primary'),
+    text-color: value('content-color-base'),
+    title-font-size: value('font-size-primary'),
+    title-color: value('content-color-primary'),
+    close-color: value('content-color-placeholder'),
+    close-color-hover: value('content-color-normal'),
+    icon-width: 40px
   ),
   $alert
 );
 
 .#{$namespace}-alert {
   &-vars {
-    @include define-preset-values("alert", $alert);
+    @include define-preset-values('alert', $alert);
   }
 
   @mixin define-alert-style($style-map) {
-    @include define-preset-style("alert", $style-map);
+    @include define-preset-style('alert', $style-map);
   }
 
   @include basis {
@@ -36,21 +36,21 @@ $alert: map.merge(
     align-items: center;
     padding: 8px 14px;
     margin-bottom: 14px;
-    background-color: get-css-var("alert-bg-color");
-    border: get-css-var("alert-border");
-    border-radius: get-css-var("alert-radius");
+    background-color: value('alert-bg-color');
+    border: value('alert-border');
+    border-radius: value('alert-radius');
   }
 
   &--has-title {
     padding: 10px 14px;
   }
 
   &--has-icon {
-    padding-inline-start: get-css-var("alert-icon-width");
+    padding-inline-start: value('alert-icon-width');
   }
 
   &--has-icon#{&}--has-title {
-    @include define-css-var("alert-icon-width", 56px);
+    @include define-css-var('alert-icon-width', 56px);
   }
 
   &--no-border {
@@ -64,7 +64,7 @@ $alert: map.merge(
   }
 
   &--colorful-text {
-    color: get-css-var("alert-text-color");
+    color: value('alert-text-color');
   }
 
   &__wrapper {
@@ -77,8 +77,8 @@ $alert: map.merge(
 
   &__title {
     margin-bottom: 4px;
-    font-size: get-css-var("alert-title-font-size");
-    color: get-css-var("alert-title-color");
+    font-size: value('alert-title-font-size');
+    color: value('alert-title-color');
   }
 
   &__icon {
@@ -89,8 +89,8 @@ $alert: map.merge(
     display: flex;
     align-items: center;
     justify-content: center;
-    width: get-css-var("alert-icon-width");
-    color: get-css-var("alert-icon-color");
+    width: value('alert-icon-width');
+    color: value('alert-icon-color');
   }
 
   &--has-title &__icon {
@@ -104,16 +104,16 @@ $alert: map.merge(
     align-items: center;
     padding: 3px 0;
     margin-inline-start: 6px;
-    color: get-css-var("alert-close-color");
+    color: value('alert-close-color');
     cursor: pointer;
     background-color: transparent;
     border: 0;
     outline: 0;
-    transition: get-css-var("transition-color");
+    transition: value('transition-color');
 
     &:hover,
     &:focus {
-      color: get-css-var("alert-close-color-hover");
+      color: value('alert-close-color-hover');
     }
   }
 
@@ -152,18 +152,18 @@ $alert: map.merge(
     &--#{$type} {
       @include define-alert-style(
         (
-          bg-color: "color" $type "opacity-8",
-          b-color: "color" $type "opacity-5",
-          icon-color: "color" $type "dark-2",
+          bg-color: 'color' $type 'opacity-8',
+          b-color: 'color' $type 'opacity-5',
+          icon-color: 'color' $type 'dark-2'
         )
       );
     }
 
     &--colorful-text#{&}--#{$type} {
       @include define-alert-style(
         (
-          text-color: "color" $type "dark-2",
-          title-color: "color" $type "dark-2",
+          text-color: 'color' $type 'dark-2',
+          title-color: 'color' $type 'dark-2'
         )
       );
     }

style/anchor.scss

@@ -1,39 +1,37 @@
-@use "sass:map";
+@use 'sass:map';
 
-@use "./shared" as *;
-@use "./design" as *;
+@use './shared' as *;
+@use './design' as *;
 
 $anchor: () !default;
 $anchor: map.merge(
   (
-    link-color: get-css-var("content-color-base"),
-    link-color-hover: get-css-var("color-primary-light-1"),
-    link-color-active: get-css-var("color-primary-base"),
+    link-color: value('content-color-base'),
+    link-color-hover: value('color-primary-light-1'),
+    link-color-active: value('color-primary-base'),
     track-width: 2px,
     track-style: solid,
-    track-color: get-css-var("border-color-light-2"),
-    track: get-css-var("anchor-track-width") get-css-var("anchor-track-style")
-      get-css-var("anchor-track-color"),
-    track-color-active: get-css-var("anchor-link-color-active"),
+    track-color: value('border-color-light-2'),
+    track: value('anchor-track-width') value('anchor-track-style') value('anchor-track-color'),
+    track-color-active: value('anchor-link-color-active'),
     pointer-size: 8px,
-    pointer-bg-color: get-css-var("color-white"),
-    pointer-b-color: get-css-var("anchor-link-color-active"),
-    pointer-border: get-css-var("border-shape")
-      get-css-var("anchor-pointer-b-color"),
+    pointer-bg-color: value('color-white'),
+    pointer-b-color: value('anchor-link-color-active'),
+    pointer-border: value('border-shape') value('anchor-pointer-b-color')
   ),
   $anchor
 );
 
 .#{$namespace}-anchor {
   &-vars {
-    @include define-preset-values("anchor", $anchor);
+    @include define-preset-values('anchor', $anchor);
   }
 
   @include basis {
     position: relative;
     display: flex;
     flex-direction: column;
-    padding-inline-start: calc(get-css-var("anchor-pointer-size") * 0.5);
+    padding-inline-start: calc(value('anchor-pointer-size') * 0.5);
     vertical-align: middle;
   }
 
@@ -48,35 +46,34 @@ $anchor: map.merge(
 
   &__link {
     padding: 4px 14px;
-    margin-inline-start: calc(get-css-var("anchor-track-width") * -1);
-    color: get-css-var("anchor-link-color");
+    margin-inline-start: calc(value('anchor-track-width') * -1);
+    color: value('anchor-link-color');
     text-decoration: none;
     cursor: pointer;
-    border-inline-start: get-css-var("anchor-track");
-    transition: get-css-var("transition-color"),
-      get-css-var("transition-border");
+    border-inline-start: value('anchor-track');
+    transition: value('transition-color'), value('transition-border');
 
     &:hover {
-      color: get-css-var("anchor-link-color-hover");
+      color: value('anchor-link-color-hover');
     }
 
     &--active {
-      color: get-css-var("anchor-link-color-active");
+      color: value('anchor-link-color-active');
     }
   }
 
   &--no-marker &__link--active {
-    border-inline-start-color: get-css-var("track-color-active");
+    border-inline-start-color: value('track-color-active');
   }
 
   &__marker {
     position: absolute;
-    inset-inline-start: calc(get-css-var("anchor-pointer-size") * 0.5 - 1px);
+    inset-inline-start: calc(value('anchor-pointer-size') * 0.5 - 1px);
     display: flex;
     align-items: center;
     justify-content: center;
     will-change: top;
-    transition: top get-css-var("transition-base");
+    transition: top value('transition-base');
     transform: translate3d(-50%, -50%, 0);
 
     @include rtl {
@@ -85,10 +82,10 @@ $anchor: map.merge(
   }
 
   &__pointer {
-    width: get-css-var("anchor-pointer-size");
-    height: get-css-var("anchor-pointer-size");
-    background-color: get-css-var("anchor-pointer-bg-color");
-    border: get-css-var("anchor-pointer-border");
-    border-radius: get-css-var("anchor-pointer-size");
+    width: value('anchor-pointer-size');
+    height: value('anchor-pointer-size');
+    background-color: value('anchor-pointer-bg-color');
+    border: value('anchor-pointer-border');
+    border-radius: value('anchor-pointer-size');
   }
 }

style/animation/badge-zoom.scss

@@ -18,14 +18,14 @@ $-name: '#{$namespace}-badge-zoom';
     &-enter-active {
       animation: {
         name: #{$-name}-in;
-        duration: get-css-var('transition-duration');
+        duration: value('transition-duration');
       }
     }
 
     &-leave-active {
       animation: {
         name: #{$-name}-out;
-        duration: get-css-var('transition-duration');
+        duration: value('transition-duration');
       }
     }
   }

style/animation/drop.scss

@@ -18,14 +18,14 @@ $-name: '#{$namespace}-drop';
     &-enter-active {
       animation: {
         name: #{$-name}-in;
-        duration: get-css-var('transition-duration');
+        duration: value('transition-duration');
       }
     }
 
     &-leave-active {
       animation: {
         name: #{$-name}-out;
-        duration: get-css-var('transition-duration');
+        duration: value('transition-duration');
       }
     }
   }

style/animation/ease.scss

@@ -18,14 +18,14 @@ $-name: '#{$namespace}-ease';
     &-enter-active {
       animation: {
         name: #{$-name}-in;
-        duration: get-css-var('transition-duration');
+        duration: value('transition-duration');
       }
     }
 
     &-leave-active {
       animation: {
         name: #{$-name}-out;
-        duration: get-css-var('transition-duration');
+        duration: value('transition-duration');
       }
     }
   }