diff --git a/themes/theme-b2b/src/components/DateField.styles.ts b/themes/theme-b2b/src/components/DateField.styles.ts
index 76b19670d1..cdfc4dcee9 100644
--- a/themes/theme-b2b/src/components/DateField.styles.ts
+++ b/themes/theme-b2b/src/components/DateField.styles.ts
@@ -18,7 +18,7 @@ export const DateField: ThemeComponent<'DateField'> = {
   segment: cva([
     'group/segment',
     'text-center leading-none outline-0',
-    '[data-type="literal]"' && 'p-[0.75px]',
+    'data-[type="literal"]:p-[0.75px]',
     'rounded-sm',
     'focus:bg-bg-accent focus:text-text-inverted',
     'aria-[readonly]:focus:border-border-base aria-[readonly]:focus:outline-none',
diff --git a/themes/theme-core/src/components/DateField.styles.ts b/themes/theme-core/src/components/DateField.styles.ts
index a1b415d98f..8961c71738 100644
--- a/themes/theme-core/src/components/DateField.styles.ts
+++ b/themes/theme-core/src/components/DateField.styles.ts
@@ -13,7 +13,7 @@ export const DateField: ThemeComponent<'DateField'> = {
   segment: cva([
     'group/segment',
     'text-center leading-none outline-0',
-    '[data-type="literal]"' && 'p-[0.75px]',
+    'data-[type="literal"]:p-[0.75px]',
     'rounded-sm',
     'focus:bg-bg-selected focus:text-text-inverted',
     'data-[placeholder=true]:text-text-inverted-disabled',