From f5c08b2a7eecaeb4af44e37dd10d1b4f310a2575 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oove@equinor.com>
Date: Fri, 14 Jun 2024 10:25:32 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84datePicker:=20use=20correct=20token?=
 =?UTF-8?q?=20for=20text=20color=20(#3520)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Datepicker/fields/DateSegment.tsx         | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 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
index 433da5f9a0..8fdf735a2f 100644
--- a/packages/eds-core-react/src/components/Datepicker/fields/DateSegment.tsx
+++ b/packages/eds-core-react/src/components/Datepicker/fields/DateSegment.tsx
@@ -4,7 +4,7 @@ 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'
 
@@ -12,16 +12,26 @@ 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)