feat(date-picker): add component tokens (#8822)

**Related Issue:** # ## Summary Adds following tokens for `calcite-date-picker` component. ``` @prop --calcite-date-picker-border-color: Specifies the border color of the component. @prop --calcite-date-picker-border-radius: Specifies the border radius of the component. @prop --calcite-date-picker-day-background-color-hover: Specifies the background color of the day when hovered. @prop --calcite-date-picker-day-background-color-selected: Specifies the background color of the day when selected. @prop --calcite-date-picker-day-background-color: Specifies the background color of the day. @prop --calcite-date-picker-day-corner-radius: Specifies the corner radius of day. @prop --calcite-date-picker-day-font-size: Specifies the font size of the day. @prop --calcite-date-picker-day-range-background-color-hover: Specifies the background color of day range when hovered. @prop --calcite-date-picker-day-range-background-color-selected: Specifies the background color of day range when selected. @prop --calcite-date-picker-day-text-color-hover: Specifies the text color of day when hovered. @prop --calcite-date-picker-day-text-color: Specifies the text color of day. @prop --calcite-date-picker-day-text-selected: Specifies the text color of day when selected. @prop --calcite-date-picker-week-headers-border-color: Specifies the border color of week headers. @prop --calcite-date-picker-week-headers-text-color: Specifies the text color of week headers.
Esri · Mar 5, 2024 · 4674100 · 4674100
1 parent dc433c9
commit 4674100
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 46 deletions.
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
@@ -1,5 +1,23 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-day-background-color-hover: Specifies the background color of component when hovered.
+ * @prop --calcite-day-background-color-selected: Specifies the background color of component when selected.
+ * @prop --calcite-day-background-color: Specifies the background color of component.
+ * @prop --calcite-day-corner-radius: Specifies the border radius of component.
+ * @prop --calcite-day-font-size: Specifies the font size of component.
+ * @prop --calcite-day-range-background-color-hovered: Specifies the background color of day range when hovered.
+ * @prop --calcite-day-range-background-color-selected: Specifies the background color of day range when selected.
+ * @prop --calcite-day-text-color-hover: Specifies the text color of component when hovered.
+ * @prop --calcite-day-text-color-selected: Specifies the text color of component when selected.
+ * @prop --calcite-day-text-color: Specifies the text color of component.
+*/
+
 :host {
-  @apply cursor-pointer flex relative text-color-3;
+  @apply cursor-pointer flex relative;
+  color: var(--calcite-day-text-color, var(--calcite-color-text-3));
 }
 
 @include disabled();
@@ -42,11 +60,11 @@
 @mixin range-part-middle() {
   &:before {
     inset-inline-end: 50%;
-    border-radius: 0;
+    border-radius: var(--calcite-corner-radius);
   }
   &:after {
     inset-inline-start: 50%;
-    border-radius: 0;
+    border-radius: var(--calcite-corner-radius);
   }
 }
 
@@ -69,77 +87,79 @@
 }
 
 .day {
-  @apply text-n2h
-    text-color-3
-    flex
+  @apply flex
     focus-base
     items-center
     justify-center
-    rounded-full
     leading-none
-    transition-default
-    z-default;
+    transition-default;
+  border-radius: var(--calcite-day-corner-radius, 9999px);
+  color: var(--calcite-day-text-color);
+  font-size: var(--calcite-day-font-size, var(--calcite-font-size));
+  z-index: var(--calcite-z-index);
   background: none;
+  background-color: var(--calcite-day-background-color, var(--calcite-color-background-none));
   box-shadow: 0 0 0 2px transparent;
   block-size: var(--calcite-internal-day-size);
   inline-size: var(--calcite-internal-day-size);
 }
 
 .text {
-  @apply mt-px mb-0;
-  margin-inline-start: theme("spacing.0");
+  @apply mb-0;
+  margin-block-start: var(--calcite-spacing-px);
 }
 
 :host([scale="s"]) {
   --calcite-internal-day-size: 27px;
 
   .day-v-wrapper {
-    @apply py-0.5;
+    padding-block: var(--calcite-spacing-base);
   }
   .day-wrapper {
     @apply p-0;
   }
   .day {
-    @apply text-n2;
+    --calcite-day-font-size: var(--calcite-font-size-sm);
   }
 }
 
 :host([scale="m"]) {
   --calcite-internal-day-size: 33px;
 
   .day-v-wrapper {
-    @apply py-1;
+    padding-block: var(--calcite-spacing-xxs);
   }
   .day-wrapper {
     @apply p-0;
   }
   .day {
-    @apply text-n1;
+    --calcite-day-font-size: var(--calcite-font-size);
   }
 }
 
 :host([scale="l"]) {
   --calcite-internal-day-size: 43px;
 
   .day-v-wrapper {
-    @apply py-1;
+    padding-block: var(--calcite-spacing-xxs);
   }
   .day-wrapper {
-    @apply px-1;
+    padding-inline: var(--calcite-spacing-xxs);
   }
   .day {
-    @apply text-0;
+    --calcite-day-font-size: var(--calcite-font-size-md);
   }
 }
 
 :host(:not([current-month])) .day {
-  @apply opacity-disabled;
+  opacity: var(--calcite-opacity-disabled);
 }
 
 :host(:hover:not([disabled]):not([selected])),
 :host([active]:not([range]):not([selected])) {
   & .day {
-    @apply bg-foreground-2 text-color-1;
+    background-color: var(--calcite-day-background-color-hover, var(--calcite-color-foreground-2));
+    color: var(--calcite-day-text-color-hover, var(--calcite-color-text-1));
   }
 }
 
@@ -153,9 +173,9 @@
 }
 
 :host([selected]) .day {
-  @apply font-medium;
-  background-color: var(--calcite-color-brand);
-  color: var(--calcite-color-foreground-1);
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-day-text-color-selected, var(--calcite-color-text-inverse));
+  background-color: var(--calcite-day-background-color-selected, var(--calcite-color-brand));
 }
 
 :host(:focus:not([disabled])),
@@ -171,9 +191,8 @@
   .day-wrapper {
     @include range-part-middle();
   }
-
   .day {
-    @apply text-color-1;
+    color: var(--calcite-day-text-color-hover, var(--calcite-color-text-1));
   }
 }
 
@@ -182,7 +201,7 @@
   .day-wrapper {
     &:before,
     &:after {
-      background-color: var(--calcite-color-foreground-current);
+      background-color: var(--calcite-day-range-background-color-selected, var(--calcite-color-foreground-current));
     }
   }
 }
@@ -191,7 +210,7 @@
   .day-wrapper {
     &:before,
     &:after {
-      @apply bg-foreground-2;
+      background-color: var(--calcite-day-range-background-color-hovered, var(--calcite-color-foreground-2));
     }
   }
 }
@@ -240,7 +259,7 @@
 
 @media (forced-colors: active) {
   .day {
-    @apply rounded-none;
+    border-radius: var(--calcite-corner-radius);
   }
 
   :host([selected]) {

diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
@@ -1,24 +1,42 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-date-picker-month-day-background-color-hover: Specifies the background color of day when hovered.
+ * @prop --calcite-date-picker-month-day-background-color-selected: Specifies the background color of day range when selected.
+ * @prop --calcite-date-picker-month-day-background-color: Specifies the background color of day.
+ * @prop --calcite-date-picker-month-day-corner-radius: Specifies the border radius of day.
+ * @prop --calcite-date-picker-month-day-font-size: Specifies the font size of day.
+ * @prop --calcite-date-picker-month-day-range-background-color-hovered: Specifies the background color of day range when hovered.
+ * @prop --calcite-date-picker-month-day-range-background-color-selected: Specifies the background color of day range when selected.
+ * @prop --calcite-date-picker-month-day-text-color-hover: Specifies the text color of day when hovered.
+ * @prop --calcite-date-picker-month-day-text-color: Specifies the text color of day.
+ * @prop --calcite-date-picker-month-day-text-selected: Specifies the text color of day when selected.
+ * @prop --calcite-date-picker-month-week-headers-border-color: Specifies the border color of week headers.
+ * @prop --calcite-date-picker-month-week-headers-text-color: Specifies the text color of week headers.
+*/
+
 @include base-component();
 
 .calendar {
-  @apply mb-1;
+  margin-block-end: var(--calcite-spacing-xxs);
 }
 
 .week-headers {
-  @apply border-color-3
-    flex
-    border-0
-    border-t
-    border-solid
-    py-0
-    px-1;
+  @apply flex border-solid py-0;
+  border-width: var(--calcite-border-width-none);
+  border-block-start-width: var(--calcite-border-width-sm);
+  border-color: var(--calcite-date-picker-month-week-headers-border-color, var(--calcite-color-border-3));
+  padding-inline: var(--calcite-spacing-xxs);
 }
 
 .week-header {
-  @apply text-color-3
-    text-center
-    font-bold;
+  @apply text-center px-0;
+  color: var(--calcite-date-picker-month-week-headers-text-color, var(--calcite-color-text-3));
+  font-weight: var(--calcite-font-weight-semibold);
   inline-size: calc(100% / 7);
+  line-height: var(--calcite-font-line-height-fixed-base);
 }
 
 .day {
@@ -33,23 +51,42 @@
 }
 
 :host([scale="s"]) .week-header {
-  @apply text-n2h px-0 pt-2 pb-3;
+  font-size: var(--calcite-font-size-sm);
+  padding-block-start: var(--calcite-spacing-sm);
+  padding-block-end: var(--calcite-spacing-md);
 }
 
 :host([scale="m"]) .week-header {
-  @apply text-n2h px-0 pt-3 pb-4;
+  font-size: var(--calcite-font-size-sm);
+  padding-block-start: var(--calcite-spacing-md);
+  padding-block-end: var(--calcite-spacing-xl);
 }
 
 :host([scale="l"]) .week-header {
-  @apply text-n1h px-0 pt-4 pb-5;
+  font-size: var(--calcite-font-size);
+  padding-block-start: var(--calcite-spacing-xl);
+  padding-block-end: var(--calcite-spacing-xxl);
 }
 
 .week-days {
   @apply flex
     flex-row
     py-0;
-  padding-inline: 6px;
+  padding-inline: var(--calcite-spacing-xs);
   &:focus {
     @apply outline-none;
   }
 }
+
+calcite-date-picker-day {
+  --calcite-day-text-color: var(--calcite-date-picker-month-day-text-color);
+  --calcite-day-text-color-hover: var(--calcite-date-picker-month-day-text-color-hover);
+  --calcite-day-text-color-selected: var(--calcite-date-picker-month-day-text-selected);
+  --calcite-day-font-size: var(--calcite-date-picker-month-day-font-size);
+  --calcite-day-background-color: var(--calcite-date-picker-month-day-background-color);
+  --calcite-day-background-color-hover: var(--calcite-date-picker-month-day-background-color-hover);
+  --calcite-day-background-color-selected: var(--calcite-date-picker-month-day-background-color-selected);
+  --calcite-day-corner-radius: var(--calcite-date-picker-month-day-corner-radius);
+  --calcite-day-range-background-color-selected: var(--calcite-date-picker-month-day-range-background-color-selected);
+  --calcite-day-range-background-color-hovered: var(--calcite-date-picker-month-day-range-background-color-hovered);
+}
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -1,13 +1,34 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-date-picker-border-color: Specifies the border color of the component.
+ * @prop --calcite-date-picker-border-radius: Specifies the border radius of the component.
+ * @prop --calcite-date-picker-day-background-color-hover: Specifies the background color of the day when hovered.
+ * @prop --calcite-date-picker-day-background-color-selected: Specifies the background color of the day when selected.
+ * @prop --calcite-date-picker-day-background-color: Specifies the background color of the day.
+ * @prop --calcite-date-picker-day-corner-radius: Specifies the corner radius of day.
+ * @prop --calcite-date-picker-day-font-size: Specifies the font size of the day.
+ * @prop --calcite-date-picker-day-range-background-color-hover: Specifies the background color of day range when hovered.
+ * @prop --calcite-date-picker-day-range-background-color-selected: Specifies the background color of day range when selected.
+ * @prop --calcite-date-picker-day-text-color-hover: Specifies the text color of day when hovered.
+ * @prop --calcite-date-picker-day-text-color: Specifies the text color of day.
+ * @prop --calcite-date-picker-day-text-selected: Specifies the text color of day when selected.
+ * @prop --calcite-date-picker-week-headers-border-color: Specifies the border color of week headers.
+ * @prop --calcite-date-picker-week-headers-text-color: Specifies the text color of week headers.
+ */
+
 :host {
   @extend %component-host;
   @apply align-top
-    border
-    border-color-1
     border-solid
     inline-block
     overflow-visible
-    rounded-none
     w-auto;
+  border-radius: var(--calcite-date-picker-border-radius, var(--calcite-corner-radius));
+  border-color: var(--calcite-date-picker-border-color, var(--calcite-color-border-1));
+  border-width: var(--calcite-border-width-sm);
 }
 
 :host([scale="s"]) {
@@ -28,4 +49,23 @@
   max-inline-size: 600px;
 }
 
+calcite-date-picker-month {
+  --calcite-date-picker-month-week-headers-border-color: var(--calcite-date-picker-week-headers-border-color);
+  --calcite-date-picker-month-week-headers-text-color: var(--calcite-date-picker-week-headers-text-color);
+  --calcite-date-picker-month-day-text-color: var(--calcite-date-picker-day-text-color);
+  --calcite-date-picker-month-day-text-color-hover: var(--calcite-date-picker-day-text-color-hover);
+  --calcite-date-picker-month-day-text-selected: var(--calcite-date-picker-day-text-selected);
+  --calcite-date-picker-month-day-font-size: var(--calcite-date-picker-day-font-size);
+  --calcite-date-picker-month-day-background-color: var(--calcite-date-picker-day-background-color);
+  --calcite-date-picker-month-day-background-color-hover: var(--calcite-date-picker-day-background-color-hover);
+  --calcite-date-picker-month-day-background-color-selected: var(--calcite-date-picker-day-background-color-selected);
+  --calcite-date-picker-month-day-corner-radius: var(--calcite-date-picker-day-corner-radius);
+  --calcite-date-picker-month-day-range-background-color-selected: var(
+    --calcite-date-picker-day-range-background-color-selected
+  );
+  --calcite-date-picker-month-day-range-background-color-hovered: var(
+    --calcite-date-picker-day-range-background-color-hover
+  );
+}
+
 @include base-component();