feat(DRP): initial styling

Author: SisIvanova

src/components/date-range-picker/date-range-picker.base.scss

@@ -1,5 +1,6 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
+@use '../date-picker/themes/date-picker.base.scss';
 
 :host {
     display: flex;
@@ -9,9 +10,6 @@
 [part='inputs'] {
     display: flex;
     flex-direction: row;
-    align-items: end;
-}
-
-[part='separator'] {
-    margin: 0 20px;
+    align-items: center;
+    gap: rem(8px)
 }

src/components/date-range-picker/date-range-picker.ts

@@ -8,6 +8,7 @@ import {
 } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
+import { themes } from '../../theming/theming-decorator.js';
 import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
 import {
   calendarRange,
@@ -67,6 +68,8 @@ import type {
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './date-range-picker.base.css.js';
 import IgcPredefinedRangesAreaComponent from './predefined-ranges-area.js';
+import { styles as shared } from './themes/shared/date-range-picker.common.css.js';
+import { all } from './themes/themes.js';
 import { dateRangeValidators } from './validators.js';
 
 // #region Interfaces
@@ -189,6 +192,7 @@ export interface IgcDateRangePickerComponentEventMap {
 
 // #endregion
 
+@themes(all)
 @blazorAdditionalDependencies(
   'IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent, IgcChipComponent, IgcInputComponent'
 )
@@ -199,7 +203,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   >(IgcBaseComboBoxLikeComponent)
 ) {
   public static readonly tagName = 'igc-date-range-picker';
-  public static styles = [styles]; // poc styles, TODO
+  public static styles = [styles, shared];
 
   protected static shadowRootOptions = {
     ...LitElement.shadowRootOptions,

src/components/date-range-picker/predefined-ranges-area.base.scss

@@ -0,0 +1,16 @@
+@use 'styles/common/component';
+@use 'styles/utilities' as *;
+
+:host {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: rem(8px);
+}
+
+[part='ranges'] {
+    display: flex;
+    flex-flow: wrap;
+    padding: rem(4px);
+    gap: rem(8px);
+}

src/components/date-range-picker/predefined-ranges-area.ts

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit-element';
 import { property } from 'lit/decorators.js';
+import { themes } from '../../theming/theming-decorator.js';
 import { CalendarDay } from '../calendar/model.js';
 import IgcChipComponent from '../chip/chip.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -8,6 +9,9 @@ import {
   IgcDateRangePickerResourceStringsEN,
 } from '../common/i18n/date-range-picker.resources.js';
 import type { CustomDateRange } from './date-range-picker.js';
+import { styles } from './predefined-ranges-area.base.css.js';
+import { styles as shared } from './themes/shared/predefined-ranges-area.common.css.js';
+import { all } from './themes/themes.js';
 
 /**
  * The predefined ranges area component is used within the `igc-date-range picker` element and it
@@ -16,8 +20,10 @@ import type { CustomDateRange } from './date-range-picker.js';
  *
  * @element igc-predefined-ranges-area
  */
+@themes(all)
 export default class IgcPredefinedRangesAreaComponent extends LitElement {
   public static readonly tagName = 'igc-predefined-ranges-area';
+  public static override styles = [styles, shared];
 
   /* blazorSuppress */
   public static register() {
@@ -96,10 +102,7 @@ export default class IgcPredefinedRangesAreaComponent extends LitElement {
 
   protected override render() {
     return html`
-      <div
-        class="ranges"
-        style="display: flex; flex-direction: row; gap: 5px; margin-top: 20px;"
-      >
+      <div part="ranges">
         ${this._allRanges.map(
           (range) => html`
             <igc-chip @click=${() => this._handleRangeSelect(range)}>

src/components/date-range-picker/themes/dark/_themes.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/date-range-picker' as *;
+
+$material: digest-schema($dark-material-date-range-picker);
+$bootstrap: digest-schema($dark-bootstrap-date-range-picker);
+$fluent: digest-schema($dark-fluent-date-range-picker);
+$indigo: digest-schema($dark-indigo-date-range-picker);

src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-daterangepicker');
+}

src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-daterangepicker');
+}

src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-daterangepicker');
+}

src/components/date-range-picker/themes/dark/date-range-picker.material.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $material), 'ig-daterangepicker');
+}

src/components/date-range-picker/themes/light/_themes.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/date-range-picker' as *;
+
+$base: digest-schema($light-date-range-picker);
+$material: digest-schema($material-date-range-picker);
+$bootstrap: digest-schema($bootstrap-date-range-picker);
+$fluent: digest-schema($fluent-date-range-picker);
+$indigo: digest-schema($indigo-date-range-picker);