@antify/ui 4.1.34 → 4.1.35

package/dist/components/calendar/AntDatePicker.vue

@@ -36,15 +36,20 @@ const props = withDefaults(defineProps<{
     color: string;
   }[];
   /**
-   * Color token used for the week number column (e.g., 'base-200', 'primary-500').
+   * Color token used for weekNumberTextColor of week number column (e.g., 'base-200-font', 'primary-500-font').
    */
-  weekNumberColor?: string;
+  weekNumberTextColor?: string;
+  /**
+   * Color token used for weekNumberBackgroundColor of week number column (e.g., 'base-200', 'primary-500').
+   */
+  weekNumberBackgroundColor?: string;
 }>(), {
   showWeekend: false,
   showWeekNumbers: false,
   skeleton: false,
   specialDays: () => [],
-  weekNumberColor: 'base-200',
+  weekNumberTextColor: 'base-300-font',
+  weekNumberBackgroundColor: 'base-300',
 });
 const emit = defineEmits([
   'select',
@@ -139,16 +144,9 @@ const getColorNumber = (color: string) => {
   return match ? parseInt(match[0], 10) : null;
 };
 
-const getContrastTextColor = (colorToken: string) => {
-  const match = colorToken.match(/(\d+)/);
-  const weight = match ? parseInt(match[0], 10) : 0;
-
-  return weight < 500 ? 'var(--color-for-white-bg-font)' : '#fff';
-};
-
 const weekNumberStyles = computed(() => ({
-  backgroundColor: `var(--color-${props.weekNumberColor})`,
-  color: getContrastTextColor(props.weekNumberColor),
+  backgroundColor: `var(--color-${props.weekNumberBackgroundColor})`,
+  color: `var(--color-${props.weekNumberTextColor})`,
 }));
 
 watch(() => props.modelValue, (val) => {
@@ -199,7 +197,6 @@ onMounted(() => {
         v-for="(day, index) in weekDays"
         :key="`${day}-${index}`"
         class="text-center flex items-center justify-center rounded-md"
-        :class="[!(showWeekNumbers && index === 0) ? 'text-for-white-bg-font' : '']"
         :style="showWeekNumbers && index === 0 ? weekNumberStyles : {}"
       >
         <AntSkeleton

package/dist/components/calendar/__stories/AntDatePicker.stories.js

@@ -31,15 +31,27 @@ const meta = {
         }
       }
     },
-    weekNumberColor: {
+    weekNumberTextColor: {
       control: "text",
-      description: "Color token e.g. 'base-200', 'primary-500'. Automatically calculates contrast text color.",
+      description: "Color token e.g. 'base-300-font', 'primary-500-font'. Automatically calculates contrast text color.",
       table: {
         type: {
           summary: "string"
         },
         defaultValue: {
-          summary: "base-200"
+          summary: "base-300-font"
+        }
+      }
+    },
+    weekNumberBackgroundColor: {
+      control: "text",
+      description: "Color token e.g. 'base-300', 'primary-500'. Automatically calculates contrast text color.",
+      table: {
+        type: {
+          summary: "string"
+        },
+        defaultValue: {
+          summary: "base-300"
         }
       }
     },
@@ -113,7 +125,8 @@ const WeekNumberStyling = exports.WeekNumberStyling = {
             <AntCalendar
               v-model="value"
               :show-week-numbers="true"
-              week-number-color="primary-900"
+              week-number-text-color="primary-900-font"
+              week-number-background-color="primary-900"
             />
           </div>
 
@@ -122,7 +135,8 @@ const WeekNumberStyling = exports.WeekNumberStyling = {
             <AntCalendar
               v-model="value"
               :show-week-numbers="true"
-              week-number-color="info-100"
+              week-number-text-color="info-100-font"
+              week-number-background-color="info-100"
             />
           </div>
 
@@ -131,7 +145,8 @@ const WeekNumberStyling = exports.WeekNumberStyling = {
             <AntCalendar
               v-model="value"
               :show-week-numbers="true"
-              week-number-color="success-500"
+              week-number-text-color="success-500-font"
+              week-number-background-color="success-500"
             />
           </div>
 

package/dist/components/calendar/__stories/AntDatePicker.stories.mjs

@@ -29,15 +29,27 @@ const meta = {
         }
       }
     },
-    weekNumberColor: {
+    weekNumberTextColor: {
       control: "text",
-      description: "Color token e.g. 'base-200', 'primary-500'. Automatically calculates contrast text color.",
+      description: "Color token e.g. 'base-300-font', 'primary-500-font'. Automatically calculates contrast text color.",
       table: {
         type: {
           summary: "string"
         },
         defaultValue: {
-          summary: "base-200"
+          summary: "base-300-font"
+        }
+      }
+    },
+    weekNumberBackgroundColor: {
+      control: "text",
+      description: "Color token e.g. 'base-300', 'primary-500'. Automatically calculates contrast text color.",
+      table: {
+        type: {
+          summary: "string"
+        },
+        defaultValue: {
+          summary: "base-300"
         }
       }
     },
@@ -113,7 +125,8 @@ export const WeekNumberStyling = {
             <AntCalendar
               v-model="value"
               :show-week-numbers="true"
-              week-number-color="primary-900"
+              week-number-text-color="primary-900-font"
+              week-number-background-color="primary-900"
             />
           </div>
 
@@ -122,7 +135,8 @@ export const WeekNumberStyling = {
             <AntCalendar
               v-model="value"
               :show-week-numbers="true"
-              week-number-color="info-100"
+              week-number-text-color="info-100-font"
+              week-number-background-color="info-100"
             />
           </div>
 
@@ -131,7 +145,8 @@ export const WeekNumberStyling = {
             <AntCalendar
               v-model="value"
               :show-week-numbers="true"
-              week-number-color="success-500"
+              week-number-text-color="success-500-font"
+              week-number-background-color="success-500"
             />
           </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "4.1.34",
+  "version": "4.1.35",
   "private": false,
   "type": "module",
   "exports": {