igniteui-theming 14.4.0-beta.2 → 14.4.1

package/sass/themes/schemas/components/dark/_tile-manager.scss

@@ -1,207 +0,0 @@
-@use '../../../../utils/map' as *;
-@use '../light/tile-manager' as *;
-
-////
-/// @package theming
-/// @group schemas
-/// @access public
-////
-
-/// Generates a dark base tile manager schema.
-/// @type {Map}
-/// @prop {Map} hover-border-color [color: ('gray', 200)] - The border color of the tile component on hover.
-/// @prop {Map} resize-indicator [color: ('gray', 200)] - The color of the tile resize indicator.
-/// @prop {Map} placeholder-background [color: ('primary', 700, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} overlay-background [color: ('primary', 700, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
-$dark-base-tile-manager: (
-    hover-border-color: (
-        color: (
-            'gray',
-            200,
-        ),
-    ),
-
-    resize-indicator: (
-        color: (
-            'gray',
-            200,
-        ),
-    ),
-
-    placeholder-background: (
-        color: (
-            'primary',
-            700,
-            0.15,
-        ),
-    ),
-
-    overlay-background: (
-        color: (
-            'primary',
-            700,
-            0.5,
-        ),
-    ),
-);
-
-/// Generates a dark material tile manager schema.
-/// @type {Map}
-/// @requires {Map} $material-tile-manager
-/// @requires {Map} $dark-base-tile-manager
-$dark-material-tile-manager: extend($material-tile-manager, $dark-base-tile-manager);
-
-/// Generates a dark fluent tile manager schema.
-/// @type {Map}
-/// @requires {Map} $fluent-tile-manager
-/// @requires {Map} $dark-base-tile-manager
-$dark-fluent-tile-manager: extend($fluent-tile-manager, $dark-base-tile-manager);
-
-/// Generates a dark bootstrap tile manager schema.
-/// @type {Map}
-/// @prop {Map} tile-manager-background [color: ('gray', 100)] - The background color of the tile manager component.
-/// @prop {Map} border-color [color: ('gray', 200)] - The border color of the tile component on hover.
-/// @prop {Map} hover-border-color [color: ('gray', 300)] - The border color of the tile component on hover.
-/// @prop {Map} resize-indicator [color: ('gray', 300)] - The color of the tile resize indicator.
-/// @prop {Map} placeholder-background [color: ('primary', 700, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} overlay-background [color: ('primary', 700, .4)] - The background color of the ghost element that appears on top of the tile that will be swapped.
-/// @requires {Map} $bootstrap-tile-manager
-$dark-bootstrap-tile-manager: extend(
-    $bootstrap-tile-manager,
-    (
-        tile-manager-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
-        border-color: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
-        hover-border-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
-        resize-indicator: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
-        placeholder-background: (
-            color: (
-                'primary',
-                700,
-                0.15,
-            ),
-        ),
-
-        overlay-background: (
-            color: (
-                'primary',
-                700,
-                0.4,
-            ),
-        ),
-    )
-);
-
-/// Generates a dark indigo tile manager schema.
-/// @type {Map}
-/// @prop {Map} tile-background [color: ('gray', 50)] - The background color of the tile component inside the tile manager.
-/// @prop {Map} title-color [contrast-color: ('gray', 50, .9)] - The title color of the tile component.
-/// @prop {Map} header-background [color: ('gray', 50)] - The background color of the tile header component.
-/// @prop {Map} content-background [color: ('gray', 50)] - The background color of the tile component content.
-/// @prop {Map} border-color [color: ('gray', 100)] - The border color of the tile component.
-/// @prop {Map} hover-border-color [color: ('gray', 200)] - The border color of the tile component on hover.
-/// @prop {Map} placeholder-background [color: ('primary', 500, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} overlay-background [color: ('primary', 700, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
-/// @prop {Map} ghost-border [color: ('primary', 300)] - The border color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} resize-indicator [color: ('gray', 200)] - The color of the tile resize indicator.
-/// @requires {Map} $indigo-tile-manager
-$dark-indigo-tile-manager: extend(
-    $indigo-tile-manager,
-    (
-        tile-background: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-
-        title-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.9,
-            ),
-        ),
-
-        header-background: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-
-        content-background: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-
-        border-color: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
-        hover-border-color: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
-        resize-indicator: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
-        placeholder-background: (
-            color: (
-                'primary',
-                500,
-                0.15,
-            ),
-        ),
-
-        overlay-background: (
-            color: (
-                'primary',
-                700,
-                0.5,
-            ),
-        ),
-
-        ghost-border: (
-            color: (
-                'primary',
-                300,
-            ),
-        ),
-    )
-);

package/sass/themes/schemas/components/elevation/_tile-manager.scss

@@ -1,13 +0,0 @@
-////
-/// @package theming
-/// @group schemas
-/// @access public
-////
-
-/// @type Map
-/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} drag-elevation [5] - The elevation level, between 0-24, to be used for the drag state.
-$default-elevation-tile: (
-    resting-elevation: 0,
-    drag-elevation: 5,
-);

package/sass/themes/schemas/components/light/_tile-manager.scss

@@ -1,280 +0,0 @@
-@use '../../../../utils/map' as *;
-@use '../../../../typography/functions' as *;
-@use '../elevation/tile-manager' as *;
-
-////
-/// @package theming
-/// @group schemas
-/// @access public
-////
-
-/// Generates a light base tile manager schema.
-/// @type {Map}
-/// @prop {Map} tile-manager-background [color: ('gray', 100)] - The background color of the tile manager component.
-/// @prop {Map} tile-background [color: ('surface', 500)] - The background color of the tile component inside the tile manager.
-/// @prop {Map} title-color [color: ('gray', 900)] - The title color of the tile component.
-/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the tile header component.
-/// @prop {Map} content-background [color: ('surface', 500)] - The background color of the tile component content.
-/// @prop {Map} content-color [color: ('gray', 700)] - The text color of the tile component content.
-/// @prop {Color} border-color [transparent] - The border color of the tile component.
-/// @prop {Map} hover-border-color [color: ('gray', 400)] - The border color of the tile component on hover.
-/// @prop {Map} resize-indicator [color: ('gray', 400)] - The color of the tile resize indicator.
-/// @prop {Map} placeholder-background [color: ('primary', 100, .3)] - The background color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} overlay-background [color: ('primary', 100, .6)] - The background color of the ghost element that appears on top of the tile that will be swapped.
-/// @prop {Map} ghost-border [color: ('primary', 500)] - The border color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Color} divider-color [transparent] - The color of the divider component inside the tile header.
-/// @prop {Number} border-radius [rem(4px)] - The border radius of the tile component.
-/// @prop {Number} default-size [2] - The default size used for the tile manager component.
-/// @requires {Map} $default-elevation-tile
-$light-tile-manager: extend(
-    $default-elevation-tile,
-    (
-        tile-manager-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
-        tile-background: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-
-        title-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-
-        header-background: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-
-        content-background: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-
-        content-color: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
-
-        border-color: transparent,
-
-        hover-border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
-        resize-indicator: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
-        placeholder-background: (
-            color: (
-                'primary',
-                100,
-                0.3,
-            ),
-        ),
-
-        overlay-background: (
-            color: (
-                'primary',
-                100,
-                0.6,
-            ),
-        ),
-
-        ghost-border: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-
-        divider-color: transparent,
-        border-radius: rem(4px),
-        default-size: 2,
-    )
-);
-
-/// Generates a material tile manager schema.
-/// @type {Map}
-/// @requires {Map} $light-tile-manager
-$material-tile-manager: $light-tile-manager;
-
-/// Generates a fluent tile manager schema.
-/// @type {Map}
-/// @prop {Map} placeholder-background [color: ('primary', 100, .2)] - The background color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} overlay-background [color: ('primary', 100, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
-/// @prop {Number} border-radius [0] - The border radius of the tile component.
-/// @requires {Map} $light-tile-manager
-$fluent-tile-manager: extend(
-    $light-tile-manager,
-    $default-elevation-tile,
-    (
-        placeholder-background: (
-            color: (
-                'primary',
-                100,
-                0.2,
-            ),
-        ),
-
-        overlay-background: (
-            color: (
-                'primary',
-                100,
-                0.5,
-            ),
-        ),
-
-        border-radius: 0,
-    )
-);
-
-/// Generates a bootstrap tile manager schema.
-/// @type {Map}
-/// @prop {Map} tile-manager-background [color: ('gray', 200)] - The background color of the tile manager component.
-/// @prop {Map} border-color [color: ('gray', 300)] - The border color of the tile component.
-/// @prop {Map} placeholder-background [color: ('primary', 300, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} overlay-background [color: ('primary', 300, .4)] - The background color of the ghost element that appears on top of the tile that will be swapped.
-/// @requires {Map} $light-tile-manager
-$bootstrap-tile-manager: extend(
-    $light-tile-manager,
-    $default-elevation-tile,
-    (
-        tile-manager-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
-        border-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
-        placeholder-background: (
-            color: (
-                'primary',
-                300,
-                0.15,
-            ),
-        ),
-
-        overlay-background: (
-            color: (
-                'primary',
-                300,
-                0.4,
-            ),
-        ),
-    )
-);
-
-/// Generates an indigo tile manager schema.
-/// @type {Map}
-/// @prop {Map} tile-manager-background [color: ('surface', 500)] - The background color of the tile manager component.
-/// @prop {Map} tile-background [contrast-color: ('gray', 900)] - The background color of the tile component inside the tile manager.
-/// @prop {Map} title-color [color: ('gray', 800)] - The title color of the tile component.
-/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The background color of the tile header component.
-/// @prop {Map} content-background [contrast-color: ('gray', 900)] - The background color of the tile component content.
-/// @prop {Map} border-color [color: ('gray', 400)] - The border color of the tile component.
-/// @prop {Map} hover-border-color [color: ('gray', 500)] - The border color of the tile component on hover.
-/// @prop {Map} placeholder-background [color: ('primary', 100, .2)] - The background color of the ghost element that appears during drag and drop and while resizing.
-/// @prop {Map} resize-indicator [color: ('gray', 500)] - The color of the tile resize indicator.
-/// @prop {Number} border-radius [rem(6px)] - The border radius of the tile component.
-/// @requires {Map} $light-tile-manager
-$indigo-tile-manager: extend(
-    $light-tile-manager,
-    $default-elevation-tile,
-    (
-        tile-manager-background: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-
-        tile-background: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-
-        title-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
-
-        header-background: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-
-        content-background: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-
-        border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
-        hover-border-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
-        placeholder-background: (
-            color: (
-                'primary',
-                100,
-                0.2,
-            ),
-        ),
-
-        resize-indicator: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
-        border-radius: rem(6px),
-    )
-);