feat: add current page tokens for pagination

ecomfe · Nov 21, 2023 · 3ad5263 · 3ad5263
1 parent 5e6a194
commit 3ad5263
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/packages/less-plugin-dls/CHANGELOG.md b/packages/less-plugin-dls/CHANGELOG.md
@@ -1,5 +1,9 @@
 > ⚠️ - Breaking Changes
 
+## 11.8.0
+
+- Add tokens for pagination's current page.
+
 ## 11.7.1
 
 - Fix rating selected symbol color token.

diff --git a/packages/less-plugin-dls/package.json b/packages/less-plugin-dls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "less-plugin-dls",
-  "version": "11.7.1",
+  "version": "11.8.0",
   "description": "Less plugin for Baidu Light DLS.",
   "main": "dist/index.js",
   "scripts": {

diff --git a/packages/less-plugin-dls/test/specs/pagination/pagination.css b/packages/less-plugin-dls/test/specs/pagination/pagination.css
@@ -19,4 +19,9 @@ div {
   -dls-pagination-page-item-background-color-focus: #f6f7fa;
   -dls-pagination-page-item-background-color-active: #e2e6f0;
   -dls-pagination-page-item-background-color-disabled: #fff;
+  -dls-pagination-page-item-background-color-current: #ebf2ff;
+  -dls-pagination-page-item-background-color-current-hover: #dce9ff;
+  -dls-pagination-page-item-background-color-current-focus: #dce9ff;
+  -dls-pagination-page-item-background-color-current-active: #bfd7ff;
+  -dls-pagination-page-item-background-color-current-disabled: #ebf2ff;
 }
diff --git a/packages/less-plugin-dls/test/specs/pagination/pagination.less b/packages/less-plugin-dls/test/specs/pagination/pagination.less
@@ -19,4 +19,9 @@ div {
   -dls-pagination-page-item-background-color-focus: @dls-pagination-page-item-background-color-focus;
   -dls-pagination-page-item-background-color-active: @dls-pagination-page-item-background-color-active;
   -dls-pagination-page-item-background-color-disabled: @dls-pagination-page-item-background-color-disabled;
+  -dls-pagination-page-item-background-color-current: @dls-pagination-page-item-background-color-current;
+  -dls-pagination-page-item-background-color-current-hover: @dls-pagination-page-item-background-color-current-hover;
+  -dls-pagination-page-item-background-color-current-focus: @dls-pagination-page-item-background-color-current-focus;
+  -dls-pagination-page-item-background-color-current-active: @dls-pagination-page-item-background-color-current-active;
+  -dls-pagination-page-item-background-color-current-disabled: @dls-pagination-page-item-background-color-current-disabled;
 }
diff --git a/packages/less-plugin-dls/tokens/components/pagination.less b/packages/less-plugin-dls/tokens/components/pagination.less
@@ -34,4 +34,8 @@
 @dls-pagination-page-item-background-color-active: @dls-background-color-pressable-active;
 @dls-pagination-page-item-background-color-disabled: @dls-pagination-page-item-background-color;
 
-/* Use primary button styles for current page styles */
+@dls-pagination-page-item-background-color-current: @dls-background-color-current;
+@dls-pagination-page-item-background-color-current-hover: @dls-background-color-current-hover;
+@dls-pagination-page-item-background-color-current-focus: @dls-pagination-page-item-background-color-current-hover;
+@dls-pagination-page-item-background-color-current-active: @dls-background-color-current-active;
+@dls-pagination-page-item-background-color-current-disabled: @dls-background-color-current-disabled;
diff --git a/packages/less-plugin-dls/tokens/global.less b/packages/less-plugin-dls/tokens/global.less
@@ -89,16 +89,16 @@
 @dls-color-gray-11: #000;
 
 @dls-color-translucent-0: transparent;
-@dls-color-translucent-1: fade(#3a55a6, 7%);
-@dls-color-translucent-2: fade(#3a57a6, 10%);
-@dls-color-translucent-3: fade(#365299, 15%);
-@dls-color-translucent-4: fade(#314c8c, 20%);
-@dls-color-translucent-5: fade(#3c5385, 30%);
-@dls-color-translucent-6: fade(#536280, 50%);
-@dls-color-translucent-7: fade(#505a6b, 80%);
-@dls-color-translucent-8: fade(#2d3440, 80%);
-@dls-color-translucent-9: fade(#13161a, 90%);
-@dls-color-translucent-10: fade(#040405, 95%);
+@dls-color-translucent-1: rgba(58, 85, 166, 0.07);
+@dls-color-translucent-2: rgba(58, 87, 166, 0.1);
+@dls-color-translucent-3: rgba(54, 82, 153, 0.15);
+@dls-color-translucent-4: rgba(49, 76, 140, 0.2);
+@dls-color-translucent-5: rgba(60, 83, 133, 0.3);
+@dls-color-translucent-6: rgba(83, 98, 128, 0.5);
+@dls-color-translucent-7: rgba(80, 90, 107, 0.8);
+@dls-color-translucent-8: rgba(45, 52, 64, 0.8);
+@dls-color-translucent-9: rgba(19, 22, 26, 0.9);
+@dls-color-translucent-10: rgba(4, 4, 5, 0.95);
 @dls-color-translucent-11: #000;
 
 /**