Update base color to avoid transparency (#2369)

# Pull Request

## 🤨 Rationale

- Update RGBA code to HEX (base) color to avoid transparency in calendar
component


![git-2](https://github.com/user-attachments/assets/b89b1be7-fc9a-449e-aab8-37aee63dc34d)

## 👩‍💻 Implementation

- Added HEX (base) colors for the calendar theme-aware tokens.
- Updated the `calendarEventBackgroundHoverStaticColor ` to have HEX
(base) colors to avoid transparency.

## 🧪 Testing

NA

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

change/@ni-nimble-components-cd11a25d-60af-4885-bea7-45694aae848f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update color tokens for hover state in mobiscroll component",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-tokens-a7990744-3d63-4394-83e6-2d47e3236c1e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update color tokens for hover state in mobiscroll component'",
+  "packageName": "@ni/nimble-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/theme-provider/design-tokens.ts

@@ -117,7 +117,9 @@ import {
     PowerGreen10,
     DigitalGreenDark110,
     Black82,
-    Black22
+    Black22,
+    PowerGreen30,
+    DigitalGreenLight30
 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { Theme } from './types';
 import { tokenNames, styleNameFromTokenName } from './design-token-names';
@@ -384,9 +386,9 @@ export const calendarEventBackgroundHoverStaticColor = DesignToken.create<string
     )
 ).withDefault((element: HTMLElement) => getColorForTheme(
     element,
-    hexToRgbaCssColor(DigitalGreenLight, 0.3),
-    hexToRgbaCssColor(PowerGreen, 0.3),
-    hexToRgbaCssColor(PowerGreen, 0.3)
+    DigitalGreenLight30,
+    PowerGreen30,
+    PowerGreen30
 ));
 
 export const calendarEventBackgroundHoverDynamicColor = DesignToken.create<string>(

packages/nimble-tokens/source/styledictionary/properties/colors.json

@@ -92,6 +92,10 @@
       "value": "#E6F5F0ff",
       "type": "color"
     },
+    "DigitalGreenLight30": {
+      "value": "#B3E1D1ff",
+      "type": "color"
+    },
     "Brand85": {
       "value": "#26A97Cff",
       "type": "color"
@@ -144,6 +148,10 @@
       "value": "#364941ff",
       "type": "color"
     },
+    "PowerGreen30": {
+      "value": "#356D54ff",
+      "type": "color"
+    },
     "Black22": {
       "value": "#E6E6E6ff",
       "type": "color"

packages/storybook/.storybook/preview.js

@@ -105,5 +105,5 @@ configureActions({
     depth: 1
 });
 
-// Update the GUID on this line to trigger a turbosnap full rebuild: 6cfef34a-5839-43ea-8588-0cb891bcf7b8
+// Update the GUID on this line to trigger a turbosnap full rebuild: bfa27769-2b92-4ceb-bf2d-c1bc27f391c4
 // See https://www.chromatic.com/docs/turbosnap/#full-rebuilds