New "rangeHover" and "activeDateHover" interaction tokens, calendar t…

…okens structure update
linode · Aug 22, 2024 · de5f3b3 · de5f3b3
1 parent 9926ed3
commit de5f3b3
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/tokens/$themes.json b/tokens/$themes.json
@@ -916,7 +916,6 @@
       "component.calendar.border": "5ec91dccd162d8a00dcdce33e32be5745a4b7b7d",
       "component.calendar.icon": "d65f2396f09f79e5d294db3bf6c58a2a19a1a32f",
       "component.calendar.selectedItem.text": "ced254d26a11d9fcefd4270d255f053bed36d342",
-      "component.calendar.selectedItem.background": "30c1fba78f48c8b10623f20796104e9ff11913b0",
       "component.calendar.hoverItem.background": "064b4925c17995fa3b6d48dcccebfaf40eea9da2",
       "component.calendar.hoverItem.text": "cdb70bec5834e382331afe4c1c7f01283e67583a",
       "component.calendar.presetArea.background": "a09ecdebf160c7045c5ffc26ee80a751dd072c7c",
@@ -1427,7 +1426,8 @@
       "global.spacing.60": "6666b8e43bf3acd2074fc625f082f833994c5ad7",
       "global.spacing.70": "fcfd1090d30c71d7c647a1048f49a9b240f08bb4",
       "global.spacing.80": "d36813c2828b1cf7511a16bb09c9fbf3efd21d5d",
-      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17"
+      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17",
+      "component.calendar.selectedItem.background.default": "30c1fba78f48c8b10623f20796104e9ff11913b0"
     },
     "group": "CDS"
   },
@@ -2349,7 +2349,6 @@
       "component.calendar.border": "5ec91dccd162d8a00dcdce33e32be5745a4b7b7d",
       "component.calendar.icon": "d65f2396f09f79e5d294db3bf6c58a2a19a1a32f",
       "component.calendar.selectedItem.text": "ced254d26a11d9fcefd4270d255f053bed36d342",
-      "component.calendar.selectedItem.background": "30c1fba78f48c8b10623f20796104e9ff11913b0",
       "component.calendar.hoverItem.background": "064b4925c17995fa3b6d48dcccebfaf40eea9da2",
       "component.calendar.hoverItem.text": "cdb70bec5834e382331afe4c1c7f01283e67583a",
       "component.calendar.presetArea.background": "a09ecdebf160c7045c5ffc26ee80a751dd072c7c",
@@ -2861,7 +2860,8 @@
       "global.spacing.70": "fcfd1090d30c71d7c647a1048f49a9b240f08bb4",
       "global.spacing.80": "d36813c2828b1cf7511a16bb09c9fbf3efd21d5d",
       "component.calendar.text.default": "db3b28b40f83fe091f9990f3e4037b852d039297",
-      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17"
+      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17",
+      "component.calendar.selectedItem.background.default": "30c1fba78f48c8b10623f20796104e9ff11913b0"
     },
     "group": "CDS"
   },
@@ -3783,7 +3783,6 @@
       "component.calendar.border": "5ec91dccd162d8a00dcdce33e32be5745a4b7b7d",
       "component.calendar.icon": "d65f2396f09f79e5d294db3bf6c58a2a19a1a32f",
       "component.calendar.selectedItem.text": "ced254d26a11d9fcefd4270d255f053bed36d342",
-      "component.calendar.selectedItem.background": "30c1fba78f48c8b10623f20796104e9ff11913b0",
       "component.calendar.hoverItem.background": "064b4925c17995fa3b6d48dcccebfaf40eea9da2",
       "component.calendar.hoverItem.text": "cdb70bec5834e382331afe4c1c7f01283e67583a",
       "component.calendar.presetArea.background": "a09ecdebf160c7045c5ffc26ee80a751dd072c7c",
@@ -4295,7 +4294,8 @@
       "global.spacing.70": "fcfd1090d30c71d7c647a1048f49a9b240f08bb4",
       "global.spacing.80": "d36813c2828b1cf7511a16bb09c9fbf3efd21d5d",
       "component.calendar.text.default": "db3b28b40f83fe091f9990f3e4037b852d039297",
-      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17"
+      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17",
+      "component.calendar.selectedItem.background.default": "30c1fba78f48c8b10623f20796104e9ff11913b0"
     },
     "group": "CDS"
   },
@@ -5218,7 +5218,6 @@
       "component.calendar.border": "5ec91dccd162d8a00dcdce33e32be5745a4b7b7d",
       "component.calendar.icon": "d65f2396f09f79e5d294db3bf6c58a2a19a1a32f",
       "component.calendar.selectedItem.text": "ced254d26a11d9fcefd4270d255f053bed36d342",
-      "component.calendar.selectedItem.background": "30c1fba78f48c8b10623f20796104e9ff11913b0",
       "component.calendar.hoverItem.background": "064b4925c17995fa3b6d48dcccebfaf40eea9da2",
       "component.calendar.hoverItem.text": "cdb70bec5834e382331afe4c1c7f01283e67583a",
       "component.calendar.presetArea.background": "a09ecdebf160c7045c5ffc26ee80a751dd072c7c",
@@ -5730,7 +5729,8 @@
       "global.spacing.70": "fcfd1090d30c71d7c647a1048f49a9b240f08bb4",
       "global.spacing.80": "d36813c2828b1cf7511a16bb09c9fbf3efd21d5d",
       "component.calendar.text.default": "db3b28b40f83fe091f9990f3e4037b852d039297",
-      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17"
+      "component.badge.subtle.info.background": "53dd68ea94bea64a5e0dc03b47f1ff14db210c17",
+      "component.calendar.selectedItem.background.default": "30c1fba78f48c8b10623f20796104e9ff11913b0"
     },
     "group": "CDS"
   }

diff --git a/tokens/alias/dark.json b/tokens/alias/dark.json
@@ -232,6 +232,14 @@
         "disabled": {
           "value": "{global.color.neutrals.80}",
           "type": "color"
+        },
+        "rangeHover": {
+          "value": "{global.color.neutrals.70}",
+          "type": "color"
+        },
+        "activeDateHover": {
+          "value": "{global.color.brand.50}",
+          "type": "color"
         }
       }
     },

diff --git a/tokens/alias/light.json b/tokens/alias/light.json
@@ -355,6 +355,16 @@
         "disabled": {
           "value": "{global.color.neutrals.10}",
           "type": "color"
+        },
+        "rangeHover": {
+          "value": "{global.color.brand.30}",
+          "type": "color",
+          "description": "Hover color for a calendar date range"
+        },
+        "activeDateHover": {
+          "value": "{global.color.brand.80}",
+          "type": "color",
+          "description": "Hover color for an active calendar date"
         }
       }
     },

diff --git a/tokens/components/calendar/calendar.json b/tokens/components/calendar/calendar.json
@@ -29,8 +29,14 @@
           "type": "color"
         },
         "background": {
-          "value": "{alias.interaction.background.active}",
-          "type": "color"
+          "default": {
+            "value": "{alias.interaction.background.active}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{alias.interaction.background.activeDateHover}",
+            "type": "color"
+          }
         }
       },
       "hoverItem": {
@@ -43,6 +49,22 @@
           "type": "color"
         }
       },
+      "dateRange": {
+        "text": {
+          "value": "{alias.content.text.primary.default}",
+          "type": "color"
+        },
+        "background": {
+          "default": {
+            "value": "{alias.interaction.background.elevated}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{alias.interaction.background.rangeHover}",
+            "type": "color"
+          }
+        }
+      },
       "presetArea": {
         "background": {
           "value": "{alias.interaction.background.secondary}",