refactor(themes): add styling support for datetime inputs (#2223)

Related to IgniteUI/igniteui-angular#17270

Author: simeonoff

src/components/input/themes/dark/input.shared.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+:host {
+    @include css-vars-from-theme($base);
+
+    color-scheme: dark;
+}

src/components/input/themes/light/input.shared.scss

@@ -3,4 +3,6 @@
 
 :host {
     @include css-vars-from-theme($base);
+
+    color-scheme: light;
 }

src/components/input/themes/shared/input.common.scss

@@ -33,6 +33,10 @@ $theme: $base;
     }
 }
 
+input::-webkit-datetime-edit {
+    color: inherit;
+}
+
 [part~='input']::placeholder {
     color: var-get($theme, 'placeholder-color');
 }
@@ -45,21 +49,21 @@ $theme: $base;
 }
 
 :host(:focus-within),
-:host(:not([readonly],[disabled]):hover) {
+:host(:not([readonly], [disabled]):hover) {
     [part~='input']::placeholder {
         color: var-get($theme, 'hover-placeholder-color');
     }
 }
 
-:host(:not([readonly],[disabled]):hover) {
+:host(:not([readonly], [disabled]):hover) {
     [part~='filled'] {
         [part~='input'] {
             color: var-get($theme, 'filled-text-hover-color');
         }
     }
 }
 
-:host(:not([readonly],[disabled]):focus-within) {
+:host(:not([readonly], [disabled]):focus-within) {
     [part~='filled'] {
         [part~='input'] {
             color: var-get($theme, 'focused-text-color');
@@ -99,8 +103,8 @@ $theme: $base;
     }
 }
 
-:host(:not([disabled],[readonly]):state(ig-invalid)),
-:host(:not(:disabled,[readonly]):state(ig-invalid)) {
+:host(:not([disabled], [readonly]):state(ig-invalid)),
+:host(:not(:disabled, [readonly]):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }

src/components/input/themes/shared/input.material.scss

@@ -44,7 +44,14 @@ $fs: rem(16px) !default;
     }
 }
 
-input:placeholder-shown + [part='notch'] [part='label'],
+:is(
+    input:placeholder-shown,
+    input[type='date'],
+    input[type='time'],
+    input[type='datetime-local'],
+    input[type='week'],
+    input[type='month']
+) + [part='notch'] [part='label'],
 [part~='filled'] + [part='notch'] [part='label'] {
     @include type-style('caption');
     @extend %label;
@@ -159,7 +166,14 @@ input:placeholder-shown + [part='notch'] [part='label'],
 
 :host([readonly]:not([outlined]):focus-within) {
     :not([part~='filled']) {
-        input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
+        :is(
+            input[type='date'],
+            input[type='time'],
+            input[type='datetime-local'],
+            input[type='week'],
+            input[type='month']
+        ) + [part='notch'] [part='label'],
+        input:not(:placeholder-shown)+ [part='notch'] [part='label'] {
             translate: 0;
             font-size: initial;
         }
@@ -210,7 +224,14 @@ input:placeholder-shown + [part='notch'] [part='label'],
         padding-bottom: rem(6px);
     }
 
-    input:placeholder-shown + [part='notch'] [part='label'],
+    :is(
+        input:placeholder-shown,
+        input[type='date'],
+        input[type='time'],
+        input[type='datetime-local'],
+        input[type='week'],
+        input[type='month']
+    ) + [part='notch'] [part='label'],
     [part~='filled'] + [part='notch'] [part='label'] {
         translate: 0 -73%;
     }
@@ -229,14 +250,12 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(
-    :not(
-            [outlined],
-            [type='search'],
-            [aria-haspopup='dialog'],
-            [role='combobox']
-        )[readonly]:hover
-) {
+:host(:not(
+    [outlined],
+    [type='search'],
+    [aria-haspopup='dialog'],
+    [role='combobox']
+)[readonly]:hover) {
     [part~='container'] {
         background: var-get($theme, 'box-background-focus');
         border-bottom-color: var-get($theme, 'idle-bottom-line-color');
@@ -450,6 +469,13 @@ input:placeholder-shown + [part='notch'] [part='label'],
         }
     }
 
+    :is(
+        input[type='date'],
+        input[type='time'],
+        input[type='datetime-local'],
+        input[type='week'],
+        input[type='month']
+    ) + [part='notch'],
     [part~='filled'] + [part='notch'] {
         @extend %floated-styles;
 
@@ -480,12 +506,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(
-    :not(
-            [aria-haspopup='dialog'],
-            [role='combobox']
-        )[outlined][readonly]:focus-within
-) {
+:host(:not(
+    [aria-haspopup='dialog'],
+    [role='combobox']
+)[outlined][readonly]:focus-within) {
     [part='notch'],
     [part='start'],
     [part='end'],
@@ -502,13 +526,13 @@ input:placeholder-shown + [part='notch'] [part='label'],
     :not(:state(ig-invalid), [type='search'])[readonly][outlined]:focus-within
 ) {
     :not([part~='filled']) {
-        input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
+        input:not(:placeholder-shown) + [part='notch'] [part='label'] {
             translate: 0;
             font-size: initial;
             align-self: center;
         }
 
-        input:has(:not(:placeholder-shown)) + [part='notch'] {
+        input:not(:placeholder-shown) + [part='notch'] {
             border: {
                 width: $active-border-width;
                 color: var-get($theme, 'focused-border-color');
@@ -531,6 +555,22 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
+:host([outlined]:is(
+    [type='date'],
+    [type='time'],
+    [type='datetime-local'],
+    [type='week'],
+    [type='month']
+)) {
+    [part='label'] {
+        transition: none;
+    }
+
+    [part='notch'] {
+        border-block-start-color: transparent !important;
+    }
+}
+
 :host(:not([type='search'])[outlined]:focus-within) {
     [part='start'] {
         border: {

src/components/input/themes/themes.ts

@@ -6,12 +6,13 @@ import { styles as bootstrapDark } from './dark/input.bootstrap.css.js';
 import { styles as fluentDark } from './dark/input.fluent.css.js';
 import { styles as indigoDark } from './dark/input.indigo.css.js';
 import { styles as materialDark } from './dark/input.material.css.js';
+import { styles as sharedDark } from './dark/input.shared.css.js';
 // Light Overrides
 import { styles as bootstrapLight } from './light/input.bootstrap.css.js';
 import { styles as fluentLight } from './light/input.fluent.css.js';
 import { styles as indigoLight } from './light/input.indigo.css.js';
 import { styles as materialLight } from './light/input.material.css.js';
-import { styles as shared } from './light/input.shared.css.js';
+import { styles as sharedLight } from './light/input.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/input.bootstrap.css.js';
 import { styles as fluent } from './shared/input.fluent.css.js';
@@ -20,7 +21,7 @@ import { styles as material } from './shared/input.material.css.js';
 
 const light = {
   shared: css`
-    ${shared}
+    ${sharedLight}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
@@ -38,7 +39,7 @@ const light = {
 
 const dark = {
   shared: css`
-    ${shared}
+    ${sharedDark}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}