feat(tile-manager): add schemas

sass/themes/schemas/components/dark/_index.scss

@@ -52,6 +52,7 @@
 @use './stepper' as *;
 @use './switch' as *;
 @use './tabs' as *;
+@use './tile-manager' as *;
 @use './time-picker' as *;
 @use './toast' as *;
 @use './tooltip' as *;
@@ -112,6 +113,7 @@ $dark-material-schema: (
     stepper: $dark-material-stepper,
     switch: $dark-material-switch,
     tabs: $dark-material-tabs,
+    tile-manager: $dark-material-tile-manager,
     time-picker: $dark-material-time-picker,
     toast: $dark-material-toast,
     tooltip: $dark-material-tooltip,
@@ -177,6 +179,7 @@ $dark-fluent-schema: (
     stepper: $dark-fluent-stepper,
     switch: $dark-fluent-switch,
     tabs: $dark-fluent-tabs,
+    tile-manager: $dark-fluent-tile-manager,
     time-picker: $dark-fluent-time-picker,
     toast: $dark-fluent-toast,
     tooltip: $dark-fluent-tooltip,
@@ -242,6 +245,7 @@ $dark-bootstrap-schema: (
     stepper: $dark-bootstrap-stepper,
     switch: $dark-bootstrap-switch,
     tabs: $dark-bootstrap-tabs,
+    tile-manager: $dark-bootstrap-tile-manager,
     time-picker: $dark-bootstrap-time-picker,
     toast: $dark-bootstrap-toast,
     tooltip: $dark-bootstrap-tooltip,
@@ -307,6 +311,7 @@ $dark-indigo-schema: (
     stepper: $dark-indigo-stepper,
     switch: $dark-indigo-switch,
     tabs: $dark-indigo-tabs,
+    tile-manager: $dark-indigo-tile-manager,
     time-picker: $dark-indigo-time-picker,
     toast: $dark-indigo-toast,
     tooltip: $dark-indigo-tooltip,

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

@@ -0,0 +1,207 @@
+@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,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,13 @@
+////
+/// @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,
+);

sass/themes/schemas/components/light/_index.scss

@@ -52,6 +52,7 @@
 @use './stepper' as *;
 @use './switch' as *;
 @use './tabs' as *;
+@use './tile-manager' as *;
 @use './time-picker' as *;
 @use './toast' as *;
 @use './tooltip' as *;
@@ -112,6 +113,7 @@ $light-material-schema: (
     stepper: $material-stepper,
     switch: $material-switch,
     tabs: $material-tabs,
+    tile-manager: $material-tile-manager,
     time-picker: $material-time-picker,
     toast: $material-toast,
     tooltip: $material-tooltip,
@@ -177,6 +179,7 @@ $light-fluent-schema: (
     stepper: $fluent-stepper,
     switch: $fluent-switch,
     tabs: $fluent-tabs,
+    tile-manager: $fluent-tile-manager,
     time-picker: $fluent-time-picker,
     toast: $fluent-toast,
     tooltip: $fluent-tooltip,
@@ -242,6 +245,7 @@ $light-bootstrap-schema: (
     stepper: $bootstrap-stepper,
     switch: $bootstrap-switch,
     tabs: $bootstrap-tabs,
+    tile-manager: $bootstrap-tile-manager,
     time-picker: $bootstrap-time-picker,
     toast: $bootstrap-toast,
     tooltip: $bootstrap-tooltip,
@@ -307,6 +311,7 @@ $light-indigo-schema: (
     stepper: $indigo-stepper,
     switch: $indigo-switch,
     tabs: $indigo-tabs,
+    tile-manager: $indigo-tile-manager,
     time-picker: $indigo-time-picker,
     toast: $indigo-toast,
     tooltip: $indigo-tooltip,