@tasco-fe/theme 3.0.0 → 3.1.0-beta.0

package/dist/index.mjs

@@ -268,7 +268,7 @@ const contrastPairs = [
   {
     fg: "color-primary",
     bg: "color-surface",
-    usedBy: "CButton secondary/outline/link, m\u1EE5c \u0111ang ch\u1ECDn c\u1EE7a CTopNav, Pagination, Tabs"
+    usedBy: "CButton secondary/outline/link, m\u1EE5c \u0111ang ch\u1ECDn c\u1EE7a CTopNav, Pagination, Tabs, track/n\xFAm CSlider"
   },
   { fg: "color-primary-hover", bg: "color-surface", usedBy: "CButton secondary/outline/link :hover" },
   { fg: "color-primary", bg: "color-surface-elevated", usedBy: "CButton trong modal/drawer/popover" },
@@ -287,7 +287,7 @@ const contrastPairs = [
   {
     fg: "#fff",
     bg: "color-primary-active",
-    usedBy: "CChatMessage, c\u1ED9t sort header b\u1EA3ng; theme t\u1ED1i: header b\u1EA3ng, CCard primary, n\xFAt antdv, DatePicker"
+    usedBy: "CChatMessage, c\u1ED9t sort header b\u1EA3ng; theme t\u1ED1i: header b\u1EA3ng, CCard primary, n\xFAt antdv, DatePicker, Tag ch\u1ECDn \u0111\u01B0\u1EE3c, FloatButton, Tour"
   },
   { fg: "#fff", bg: "gradient-primary", usedBy: "CButton primary, tab \u0111ang ch\u1ECDn c\u1EE7a drawer Thi\u1EBFt l\u1EADp CTable" },
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tasco-fe/theme",
-  "version": "3.0.0",
+  "version": "3.1.0-beta.0",
   "description": "Design token + theme antdv (ConfigProvider) + CSS variables cho framework Tasco",
   "license": "MIT",
   "type": "module",
@@ -25,8 +25,8 @@
     "typescript": "^5.7.3",
     "unbuild": "^3.0.1",
     "vitest": "^3.0.0",
-    "@tasco-fe/eslint-config": "3.0.0",
-    "@tasco-fe/tsconfig": "3.0.0"
+    "@tasco-fe/eslint-config": "3.1.0-beta.0",
+    "@tasco-fe/tsconfig": "3.1.0-beta.0"
   },
   "publishConfig": {
     "access": "public",

package/styles/base.css

@@ -110,6 +110,23 @@ a {
   padding-inline: var(--tasco-table-cell-padding-inline, 8px) !important;
 }
 
+/* Slider: antdv vẽ track và viền núm bằng colorPrimaryBorder — theme tối chỉ ~1.6:1 trên nền (theme sáng ~3.8:1) → dùng
+   primary để đạt 3:1 cho thành phần UI (WCAG 1.4.11) ở cả hai theme. Trạng thái disabled của antdv có !important nên giữ nguyên. */
+.ant-slider:not(.ant-slider-disabled) .ant-slider-track {
+  background-color: var(--tasco-color-primary);
+}
+.ant-slider:not(.ant-slider-disabled):hover .ant-slider-track {
+  background-color: var(--tasco-color-primary-hover);
+}
+.ant-slider:not(.ant-slider-disabled) .ant-slider-handle::after {
+  box-shadow: 0 0 0 2px var(--tasco-color-primary);
+}
+.ant-slider:not(.ant-slider-disabled) .ant-slider-handle:hover::after,
+.ant-slider:not(.ant-slider-disabled) .ant-slider-handle:active::after,
+.ant-slider:not(.ant-slider-disabled) .ant-slider-handle:focus::after {
+  box-shadow: 0 0 0 4px var(--tasco-color-primary-hover);
+}
+
 /* Tab đang chọn in đậm cho dễ nhận biết. */
 .ant-tabs-tab-active .ant-tabs-tab-btn {
   font-weight: 700;
@@ -121,7 +138,7 @@ a {
  * chữ trắng trên nền suy ra chỉ ~4:1, không seed nào đạt ≥ 4.5:1 cho cả hai vai trò → nút primary thuần antdv
  * (Modal.confirm của useConfirm, nút Gửi của CChat…) và ô ngày đang chọn của DatePicker/RangePicker dùng primary-active.
  * CButton có gradient riêng nên loại trừ. Chỗ antdv khác còn nền colorPrimary + chữ trắng mà core chưa dùng nên chưa phủ
- * (vd Steps, Radio solid, Tag checkable, Menu theme dark, Badge.Ribbon).
+ * (vd Steps, Radio solid, Menu theme dark, Badge.Ribbon).
  * ───────────────────────────────────────────────────────────────────────── */
 :root[data-theme='dark'] .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost):not(.c-btn) {
   background: var(--tasco-color-primary-active) !important;
@@ -135,6 +152,29 @@ a {
 :root[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
   background: var(--tasco-color-primary-active) !important;
 }
+/* Tag chọn được, FloatButton primary, Tour primary: cùng lý do (chữ trắng trên colorPrimary suy ra chỉ ~4:1). */
+:root[data-theme='dark'] .ant-tag-checkable-checked,
+:root[data-theme='dark'] .ant-float-btn-primary,
+:root[data-theme='dark'] .ant-float-btn-primary .ant-float-btn-body,
+:root[data-theme='dark'] .ant-tour-primary .ant-tour-inner,
+:root[data-theme='dark'] .ant-tour-primary .ant-tour-prev-btn:not(:hover) {
+  background: var(--tasco-color-primary-active) !important;
+}
+:root[data-theme='dark'] .ant-tag-checkable-checked:hover,
+:root[data-theme='dark'] .ant-float-btn-primary .ant-float-btn-body:hover {
+  filter: brightness(1.12);
+}
+:root[data-theme='dark'] .ant-tour-primary {
+  --antd-arrow-background-color: var(--tasco-color-primary-active);
+}
+/* Nút "Tiếp" của Tour primary: chữ colorPrimary trên nền trắng → dùng tông tối của primary. */
+:root[data-theme='dark'] .ant-tour-primary .ant-tour-next-btn {
+  color: var(--tasco-color-primary-active) !important;
+}
+/* Calendar toàn màn: ô đang chọn nhận nền primary-active từ rule DatePicker ở trên → số ngày phải trắng. */
+:root[data-theme='dark'] .ant-picker-calendar-full .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-calendar-date-value {
+  color: #fff !important;
+}
 
 /* ─────────────────────────────────────────────────────────────────────────
  * Nút primary danger thuần antdv (vd `okButtonProps: { danger: true }` của Modal/Popconfirm) — cả hai theme.
@@ -174,6 +214,11 @@ a {
 :root[data-theme='dark'] .ant-tabs .ant-tabs-ink-bar {
   background: var(--tasco-color-primary) !important;
 }
+/* Mục đang xem của Anchor, Tag chọn được khi hover. */
+:root[data-theme='dark'] .ant-anchor-wrapper .ant-anchor-link-active > .ant-anchor-link-title,
+:root[data-theme='dark'] .ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
+  color: var(--tasco-color-primary) !important;
+}
 :root[data-theme='dark'] .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled) {
   color: var(--tasco-color-error) !important;
 }