@veltra/styles 1.4.0 → 1.6.0

package/dist/_mixins.scss

@@ -178,7 +178,7 @@ $namespace: 'u' !default;
 }
 
 @mixin lg {
-  @media screen and (min-width: breakpoint( md)) and (max-width: breakpoint(lg)) {
+  @media screen and (min-width: breakpoint(md)) and (max-width: breakpoint(lg)) {
     @content;
   }
 }

package/dist/_vars.scss

@@ -11,18 +11,11 @@ $sizes: (small, default, large);
 
 // 颜色类别
 $color-types: (
-  // 品牌色
   primary,
-  // 成功色
   success,
-  // 警告色
   warning,
-  // 危险色
   danger,
-  // 信息
   info,
-  // 禁用色
   disabled,
-  // 默认色
-  default
+  default // 品牌色 // 成功色 // 警告色 // 危险色 // 信息 // 禁用色 // 默认色
 );

package/dist/animations/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/animations/index.js

@@ -0,0 +1 @@
+import "./shine.css";

package/dist/animations/shine.css

@@ -0,0 +1,24 @@
+.u-shine {
+  background: linear-gradient(100deg, var(--u-text-color-assist) 30%, var(--u-text-color-title) 50%, var(--u-text-color-assist) 70%);
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: u-shine var(--u-shine-duration, 2.4s) linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .u-shine {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@keyframes u-shine {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}

package/dist/animations/shine.scss

@@ -0,0 +1,31 @@
+// 全局文字扫光效果：背景渐变扫过文字（background-clip: text，纯 CSS + GPU 合成）。
+// 任意元素添加 `u-shine` 类即可使用；通过 `--u-shine-duration` 覆盖动画时长。
+.u-shine {
+  background: linear-gradient(
+    100deg,
+    var(--u-text-color-assist) 30%,
+    var(--u-text-color-title) 50%,
+    var(--u-text-color-assist) 70%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: u-shine var(--u-shine-duration, 2.4s) linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@keyframes u-shine {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}

package/dist/normalize/index.d.ts

@@ -1 +1 @@
-export { };
+export {}

package/dist/transitions/index.d.ts

@@ -1 +1 @@
-export { };
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/styles",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "files": [
     "dist",
     "src"
@@ -9,12 +9,18 @@
   "sideEffects": [
     "**/*.css",
     "**/*.scss",
+    "src/animations/index.ts",
+    "dist/animations/index.js",
     "src/normalize/index.ts",
     "dist/normalize/index.js",
     "src/transitions/index.ts",
     "dist/transitions/index.js"
   ],
   "exports": {
+    "./animations": {
+      "import": "./dist/animations/index.js",
+      "default": "./dist/animations/index.js"
+    },
     "./transitions": {
       "import": "./dist/transitions/index.js",
       "default": "./dist/transitions/index.js"
@@ -36,8 +42,8 @@
   },
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
-    "@veltra/compositions": "1.4.0",
-    "@veltra/utils": "1.4.0",
-    "vue": ">=3.5.40"
+    "@veltra/compositions": "^1.6.0",
+    "@veltra/utils": "^1.6.0",
+    "vue": ">=3.5.41"
   }
 }

package/src/_mixins.scss

@@ -178,7 +178,7 @@ $namespace: 'u' !default;
 }
 
 @mixin lg {
-  @media screen and (min-width: breakpoint( md)) and (max-width: breakpoint(lg)) {
+  @media screen and (min-width: breakpoint(md)) and (max-width: breakpoint(lg)) {
     @content;
   }
 }

package/src/_vars.scss

@@ -11,18 +11,11 @@ $sizes: (small, default, large);
 
 // 颜色类别
 $color-types: (
-  // 品牌色
   primary,
-  // 成功色
   success,
-  // 警告色
   warning,
-  // 危险色
   danger,
-  // 信息
   info,
-  // 禁用色
   disabled,
-  // 默认色
-  default
+  default // 品牌色 // 成功色 // 警告色 // 危险色 // 信息 // 禁用色 // 默认色
 );

package/src/animations/index.ts

@@ -0,0 +1 @@
+import './shine.scss'

package/src/animations/shine.scss

@@ -0,0 +1,31 @@
+// 全局文字扫光效果：背景渐变扫过文字（background-clip: text，纯 CSS + GPU 合成）。
+// 任意元素添加 `u-shine` 类即可使用；通过 `--u-shine-duration` 覆盖动画时长。
+.u-shine {
+  background: linear-gradient(
+    100deg,
+    var(--u-text-color-assist) 30%,
+    var(--u-text-color-title) 50%,
+    var(--u-text-color-assist) 70%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: u-shine var(--u-shine-duration, 2.4s) linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@keyframes u-shine {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}