💄datePicker: use correct token for text color (#3520)

equinor · Jun 14, 2024 · f5c08b2 · f5c08b2
1 parent 06c3166
commit f5c08b2
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/packages/eds-core-react/src/components/Datepicker/fields/DateSegment.tsx b/packages/eds-core-react/src/components/Datepicker/fields/DateSegment.tsx
@@ -4,24 +4,34 @@ import {
 } from '@react-stately/datepicker'
 import { KeyboardEvent, useRef, useState } from 'react'
 import { useDateFormatter, useDateSegment } from 'react-aria'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { tokens } from '@equinor/eds-tokens'
 import { useDatePickerContext } from '../utils/context'
 
 const Segment = styled.div<{
   $placeholder: boolean
   $invalid: boolean
   $disabled: boolean
-}>`
-  color: ${tokens.typography.input.text.color};
-  font-family: ${tokens.typography.input.text.fontFamily};
-  &:focus-visible {
-    outline: 2px solid ${tokens.colors.interactive.primary__resting.rgba};
-    background-color: ${tokens.colors.ui.background__medium.rgba};
-  }
-  ${({ $disabled }) =>
-    $disabled && `color: ${tokens.colors.interactive.disabled__text.rgba};`}
-`
+}>(({ $placeholder, $disabled }) => {
+  return css`
+    font-family: ${tokens.typography.input.text.fontFamily};
+    &:focus-visible {
+      outline: 2px solid ${tokens.colors.interactive.primary__resting.rgba};
+      background-color: ${tokens.colors.ui.background__medium.rgba};
+    }
+    ${$placeholder
+      ? css({
+          color: tokens.colors.text.static_icons__tertiary.rgba,
+        })
+      : css({
+          color: tokens.colors.text.static_icons__default.rgba,
+        })}
+    ${$disabled &&
+    css`
+      color: ${tokens.colors.interactive.disabled__text.rgba};
+    `}
+  `
+})
 
 /**
  * DateSegment is used to represent a single segment of a date in the DateField (i.e. day, month, year)