igniteui-theming 1.4.5 → 1.4.6

package/sass/themes/schemas/components/light/_expansion-panel.scss

@@ -0,0 +1,172 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light expansion panel schema.
+/// @type {Map}
+/// @prop {Map} header-background [color: ('surface')] - The panel header background color.
+/// @prop {Map} body-background [color: ('surface')] - The panel body background color.
+/// @prop {Map} header-focus-background [color: ('gray', 100)] - The panel header focus background color.
+/// @prop {Map} header-title-color [color: ('gray', 900)] - The panel header title text color.
+/// @prop {Map} header-description-color [color: ('gray', 700)] - The panel header description text color.
+/// @prop {Map} header-icon-color [color: ('gray', 800)] - The panel header icon color.
+/// @prop {Map} body-color [color: ('gray', 900)] - The panel body text color.
+/// @prop {Map} disabled-color [color: ('gray', 500)] - The panel disabled text color.
+/// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} expanded-margin [8px] - The expansion panel margin in expanded state when positioned inside accordion.
+$light-expansion-panel: (
+    header-background: (
+        color: (
+            'surface',
+        ),
+    ),
+
+    body-background: (
+        color: (
+            'surface',
+        ),
+    ),
+
+    header-focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    header-title-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    header-description-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    header-icon-color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+
+    body-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    disabled-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+
+    expanded-margin: rem(8px),
+    border-radius: rem(0),
+);
+
+/// Generates a fluent expansion panel schema.
+/// @type {Map}
+/// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The panel disabled text color.
+/// @requires {Map} $light-expansion-panel
+$fluent-expansion-panel: extend(
+    $light-expansion-panel,
+    (
+        body-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap expansion panel schema.
+/// @type {Map}
+/// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
+/// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
+/// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-expansion-panel
+$bootstrap-expansion-panel: extend(
+    $light-expansion-panel,
+    (
+        header-title-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        header-description-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+    )
+);
+
+// Generates an indigo expansion panel schema.
+/// @type {Map}
+/// @prop {Map} header-focus-background [color: ('primary', 500, .15)] - The panel header focus background color.
+/// @prop {Map} header-description-color [color: ('gray', 500)] - The panel header description text color.
+/// @prop {Map} header-icon-color [color: ('gray', 600)] - The panel header icon color.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The panel disabled text color.
+/// @prop {Number} border-radius [3px] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-expansion-panel
+$indigo-expansion-panel: extend(
+    $light-expansion-panel,
+    (
+        header-description-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        header-icon-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        header-focus-background: (
+            color: (
+                'primary',
+                500,
+                0.15,
+            ),
+        ),
+
+        disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        border-radius: rem(3px),
+    )
+);

package/sass/themes/schemas/components/light/_grid-filtering.scss

@@ -0,0 +1,105 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light grid-filtering schema.
+/// @type {Map}
+/// @prop {Color} menu-background [color: ('surface')] - The idle menu background color.
+/// @prop {Color} toggle-background [transparent] - The idle toggle background color.
+/// @prop {Color} toggle-filtered-background [transparent] - The filtered toggle background color.
+/// @prop {Color} toggle-icon-color [inherit] - The idle toggle icon color.
+/// @prop {Color} toggle-icon-hover-color [contrast-color: ('gray', 900)] - The hover toggle icon color.
+/// @prop {Color} menu-button-disabled-text-color [initial] - The menu disabled button text color.
+/// @prop {Map} toggle-icon-active-color [contrast-color: ('secondary', 500)] - The active toggle icon color.
+/// @prop {Map} toggle-icon-filtered-color [color: ('secondary', 500)] - The filtered toggle icon color.
+/// @prop {Map} toggle-hover-background [color: ('gray', 300)] - The hover toggle background color.
+/// @prop {Map} toggle-active-background [color: ('secondary', 500)] - The active toggle background color.
+/// @prop {Map} menu-text-color [color: ('gray', 900)] - The idle menu text color.
+/// @prop {Map} menu-button-text-color [color: ('secondary', 500)] - The menu button text color.
+$light-grid-filtering: (
+    menu-background: (
+        color: (
+            'surface',
+        ),
+    ),
+    toggle-background: transparent,
+    toggle-filtered-background: transparent,
+    toggle-icon-color: inherit,
+    toggle-icon-hover-color: (
+        contrast-color: (
+            'gray',
+            900,
+        ),
+    ),
+    menu-button-disabled-text-color: initial,
+
+    toggle-icon-active-color: (
+        contrast-color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    toggle-icon-filtered-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    toggle-hover-background: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    toggle-active-background: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    menu-text-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    menu-button-text-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+);
+
+/// Generates a fluent grid-filtering schema.
+/// @type {Map}
+/// @prop {Map} menu-background [color: 'surface'] - The idle menu background color.
+/// @requires {Map} $light-grid-filtering
+$fluent-grid-filtering: extend(
+    $light-grid-filtering,
+    (
+        menu-background: (
+            color: 'surface',
+        ),
+    )
+);
+
+/// Generates a bootstrap grid-filtering schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-filtering
+$bootstrap-grid-filtering: $light-grid-filtering;
+
+/// Generates an indigo grid-filtering schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-filtering
+$indigo-grid-filtering: $light-grid-filtering;

package/sass/themes/schemas/components/light/_grid-summary.scss

@@ -0,0 +1,138 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light grid-summary schema.
+/// @type {Map}
+/// @prop {Color} background-color [inherit] - The summaries background color is inherited from the grid footer.
+/// @prop {Map} focus-background-color [color: ('gray', 100)] - The background color when a summary item is on focus.
+/// @prop {map} label-color [color: ('primary', 500)] - The summaries label color.
+/// @prop {map} label-hover-color [color: ('primary', 700)] - The summaries hover label color.
+/// @prop {Color} result-color ["'currentColor'"] - The summaries value/result color.
+/// @prop {map} border-color [color: ('gray', 400)] - The summaries border color.
+/// @prop {String} pinned-border-width [2px] - The border width of the summary panel.
+/// @prop {String} pinned-border-style [solid] - The border style of the summary panel.
+/// @prop {map} pinned-border-color [color: ('gray', 400)] - The border color of the summary panel.
+$light-grid-summary: (
+    background-color: inherit,
+
+    focus-background-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    label-color: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+
+    label-hover-color: (
+        color: (
+            'primary',
+            700,
+        ),
+    ),
+
+    result-color: "'currentColor'",
+
+    border-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+
+    pinned-border-width: 2px,
+    pinned-border-style: solid,
+    pinned-border-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+);
+
+/// Generates a fluent grid-summary schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: ('surface')] - The summaries background color is inherited from the grid footer.
+/// @prop {map} border-color [color: ('gray', 100)] - The summaries border color.
+/// @prop {map} pinned-border-color [color: ('gray', 300)] - The border color of the summary panel.
+/// @requires {Map} $light-grid-summary
+$fluent-grid-summary: extend(
+    $light-grid-summary,
+    (
+        background-color: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        pinned-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap grid-summary schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-summary
+$bootstrap-grid-summary: $light-grid-summary;
+
+/// Generates an indigo grid-summary schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: ('gray', 100)] - The summaries background color is inherited from the grid footer.
+/// @prop {map} label-hover-color [color: ('primary', 900)] - The summaries hover label color.
+/// @prop {map} border-color [color: ('primary', 50)] - The summaries border color.
+/// @prop {map} pinned-border-color [color: ('primary', 200)] - The border color of the summary panel.
+/// @requires {Map} $light-grid-summary
+$indigo-grid-summary: extend(
+    $light-grid-summary,
+    (
+        background-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        label-hover-color: (
+            color: (
+                'primary',
+                900,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        pinned-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/light/_grid-toolbar.scss

@@ -0,0 +1,117 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light grid-toolbar schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: ('gray', 50)] - The toolbar background color.
+/// @prop {Map} title-text-color [color: ('gray', 600)] - The toolbar title text color.
+/// @prop {Map} dropdown-background [color: ('surface')] - The toolbar drop-down background color.
+/// @prop {Map} item-text-color [color: ('gray', 600)] - The toolbar drop-down item text color.
+/// @prop {Map} item-hover-background [color: ('gray', 100)] - The toolbar drop-down item hover background color.
+/// @prop {Map} item-hover-text-color [color: ('gray', 600)] - The toolbar drop-down item hover text color.
+/// @prop {Map} item-focus-background [color: ('gray', 100)] - The toolbar drop-down item focus background color.
+/// @prop {Map} item-focus-text-color [color: ('gray', 600)] - The toolbar drop-down item focus text color.
+$light-grid-toolbar: (
+    background-color: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    title-text-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
+
+    dropdown-background: (
+        color: (
+            'surface',
+        ),
+    ),
+
+    item-text-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
+
+    item-hover-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    item-hover-text-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
+
+    item-focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    item-focus-text-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
+);
+
+/// Generates a fluent grid-toolbar schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: 'surface'] - The toolbar background color.
+/// @requires {Map} $light-grid-toolbar
+$fluent-grid-toolbar: extend(
+    $light-grid-toolbar,
+    (
+        background-color: (
+            color: 'surface',
+        ),
+    )
+);
+
+/// Generates a bootstrap grid-toolbar schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-toolbar
+$bootstrap-grid-toolbar: $light-grid-toolbar;
+
+/// Generates an indigo grid-toolbar schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: ('gray', 100)] - The toolbar background color.
+/// @prop {Map} title-text-color [color: ('primary', 500)] - The toolbar title text color.
+/// @requires {Map} $light-grid-toolbar
+$indigo-grid-toolbar: extend(
+    $light-grid-toolbar,
+    (
+        background-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        title-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+    )
+);