diff --git a/sass/themes/schemas/components/dark/_index.scss b/sass/themes/schemas/components/dark/_index.scss
index 5dd6170e..50f2eed4 100644
--- a/sass/themes/schemas/components/dark/_index.scss
+++ b/sass/themes/schemas/components/dark/_index.scss
@@ -43,6 +43,7 @@
 @use './query-builder' as *;
 @use './radio' as *;
 @use './rating' as *;
+@use './resize-indicator' as *;
 @use './ripple' as *;
 @use './scrollbar' as *;
 @use './select' as *;
@@ -52,6 +53,7 @@
 @use './stepper' as *;
 @use './switch' as *;
 @use './tabs' as *;
+@use './tile-manager' as *;
 @use './time-picker' as *;
 @use './toast' as *;
 @use './tooltip' as *;
@@ -103,6 +105,7 @@ $dark-material-schema: (
     query-builder: $dark-material-query-builder,
     radio: $dark-material-radio,
     rating: $dark-material-rating,
+    resize-indicator: $dark-material-resize-indicator,
     ripple: $dark-material-ripple,
     scrollbar: $dark-material-scrollbar,
     select: $dark-material-select,
@@ -112,6 +115,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,
@@ -168,6 +172,7 @@ $dark-fluent-schema: (
     query-builder: $dark-fluent-query-builder,
     radio: $dark-fluent-radio,
     rating: $dark-fluent-rating,
+    resize-indicator: $dark-fluent-resize-indicator,
     ripple: $dark-fluent-ripple,
     scrollbar: $dark-fluent-scrollbar,
     select: $dark-fluent-select,
@@ -177,6 +182,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,
@@ -233,6 +239,7 @@ $dark-bootstrap-schema: (
     query-builder: $dark-bootstrap-query-builder,
     radio: $dark-bootstrap-radio,
     rating: $dark-bootstrap-rating,
+    resize-indicator: $dark-bootstrap-resize-indicator,
     ripple: $dark-bootstrap-ripple,
     scrollbar: $dark-bootstrap-scrollbar,
     select: $dark-bootstrap-select,
@@ -242,6 +249,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,
@@ -298,6 +306,7 @@ $dark-indigo-schema: (
     query-builder: $dark-indigo-query-builder,
     radio: $dark-indigo-radio,
     rating: $dark-indigo-rating,
+    resize-indicator: $dark-indigo-resize-indicator,
     ripple: $dark-indigo-ripple,
     scrollbar: $dark-indigo-scrollbar,
     select: $dark-indigo-select,
@@ -307,6 +316,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,
diff --git a/sass/themes/schemas/components/dark/_resize-indicator.scss b/sass/themes/schemas/components/dark/_resize-indicator.scss
new file mode 100644
index 00000000..0afbf9ed
--- /dev/null
+++ b/sass/themes/schemas/components/dark/_resize-indicator.scss
@@ -0,0 +1,69 @@
+@use '../../../../utils/map' as *;
+@use '../light/resize-indicator' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark base resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $light-resize-indicator
+$dark-base-resize-indicator: $light-resize-indicator;
+
+/// Generates a dark material resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $dark-base-resize-indicator
+$dark-material-resize-indicator: extend(
+    $dark-base-resize-indicator,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
+
+/// Generates a dark fluent resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $dark-base-resize-indicator
+$dark-fluent-resize-indicator: extend(
+    $dark-base-resize-indicator,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
+
+/// Generates a dark bootstrap resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $dark-base-resize-indicator
+$dark-bootstrap-resize-indicator: extend(
+    $dark-base-resize-indicator,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
+
+/// Generates a dark indigo resize indicator schema.
+/// @type {Map}
+/// @prop {Map} resize-indicator [color: ('primary', 300)] - The color of the resize indicator.
+$dark-indigo-resize-indicator: (
+    resize-indicator: (
+        color: (
+            'primary',
+            300,
+        ),
+    ),
+
+    _meta: (
+        theme: 'indigo',
+        variant: 'dark',
+    ),
+);
diff --git a/sass/themes/schemas/components/dark/_tile-manager.scss b/sass/themes/schemas/components/dark/_tile-manager.scss
new file mode 100644
index 00000000..a8f9b528
--- /dev/null
+++ b/sass/themes/schemas/components/dark/_tile-manager.scss
@@ -0,0 +1,211 @@
+@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} 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,
+        ),
+    ),
+
+    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,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
+
+/// 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,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
+
+/// Generates a dark bootstrap tile manager schema.
+/// @type {Map}
+/// @prop {Map} 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} 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,
+    (
+        background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        hover-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        placeholder-background: (
+            color: (
+                'primary',
+                700,
+                0.15,
+            ),
+        ),
+
+        overlay-background: (
+            color: (
+                'primary',
+                700,
+                0.4,
+            ),
+        ),
+
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
+
+/// 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.
+/// @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,
+            ),
+        ),
+
+        placeholder-background: (
+            color: (
+                'primary',
+                500,
+                0.15,
+            ),
+        ),
+
+        overlay-background: (
+            color: (
+                'primary',
+                700,
+                0.5,
+            ),
+        ),
+
+        ghost-border: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
+    )
+);
diff --git a/sass/themes/schemas/components/elevation/_tile-manager.scss b/sass/themes/schemas/components/elevation/_tile-manager.scss
new file mode 100644
index 00000000..bb4d6321
--- /dev/null
+++ b/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,
+);
diff --git a/sass/themes/schemas/components/light/_index.scss b/sass/themes/schemas/components/light/_index.scss
index 7f41fa63..0138bd43 100644
--- a/sass/themes/schemas/components/light/_index.scss
+++ b/sass/themes/schemas/components/light/_index.scss
@@ -43,6 +43,7 @@
 @use './query-builder' as *;
 @use './radio' as *;
 @use './rating' as *;
+@use './resize-indicator' as *;
 @use './ripple' as *;
 @use './scrollbar' as *;
 @use './select' as *;
@@ -52,6 +53,7 @@
 @use './stepper' as *;
 @use './switch' as *;
 @use './tabs' as *;
+@use './tile-manager' as *;
 @use './time-picker' as *;
 @use './toast' as *;
 @use './tooltip' as *;
@@ -103,6 +105,7 @@ $light-material-schema: (
     query-builder: $material-query-builder,
     radio: $material-radio,
     rating: $material-rating,
+    resize-indicator: $material-resize-indicator,
     ripple: $material-ripple,
     scrollbar: $material-scrollbar,
     select: $material-select,
@@ -112,6 +115,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,
@@ -168,6 +172,7 @@ $light-fluent-schema: (
     query-builder: $fluent-query-builder,
     radio: $fluent-radio,
     rating: $fluent-rating,
+    resize-indicator: $fluent-resize-indicator,
     ripple: $fluent-ripple,
     scrollbar: $fluent-scrollbar,
     select: $fluent-select,
@@ -177,6 +182,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,
@@ -233,6 +239,7 @@ $light-bootstrap-schema: (
     query-builder: $bootstrap-query-builder,
     radio: $bootstrap-radio,
     rating: $bootstrap-rating,
+    resize-indicator: $bootstrap-resize-indicator,
     ripple: $bootstrap-ripple,
     scrollbar: $bootstrap-scrollbar,
     select: $bootstrap-select,
@@ -242,6 +249,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,
@@ -298,6 +306,7 @@ $light-indigo-schema: (
     query-builder: $indigo-query-builder,
     radio: $indigo-radio,
     rating: $indigo-rating,
+    resize-indicator: $indigo-resize-indicator,
     ripple: $indigo-ripple,
     scrollbar: $indigo-scrollbar,
     select: $indigo-select,
@@ -307,6 +316,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,
diff --git a/sass/themes/schemas/components/light/_resize-indicator.scss b/sass/themes/schemas/components/light/_resize-indicator.scss
new file mode 100644
index 00000000..971ae1e6
--- /dev/null
+++ b/sass/themes/schemas/components/light/_resize-indicator.scss
@@ -0,0 +1,70 @@
+@use '../../../../utils/map' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light base resize indicator schema.
+/// @prop {Map} resize-indicator [color: ('primary', 500)] - The color of the resize indicator.
+$light-resize-indicator: (
+    resize-indicator: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+);
+
+/// Generates a material resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $light-resize-indicator
+$material-resize-indicator: extend(
+    $light-resize-indicator,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'light',
+        ),
+    )
+);
+
+/// Generates a fluent resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $light-resize-indicator
+$fluent-resize-indicator: extend(
+    $light-resize-indicator,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'light',
+        ),
+    )
+);
+
+/// Generates a bootstrap resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $light-resize-indicator
+$bootstrap-resize-indicator: extend(
+    $light-resize-indicator,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'light',
+        ),
+    )
+);
+
+/// Generates an indigo resize indicator schema.
+/// @type {Map}
+/// @requires {Map} $light-resize-indicator
+$indigo-resize-indicator: extend(
+    $light-resize-indicator,
+    (
+        _meta: (
+            theme: 'indigo',
+            variant: 'light',
+        ),
+    )
+);
diff --git a/sass/themes/schemas/components/light/_tile-manager.scss b/sass/themes/schemas/components/light/_tile-manager.scss
new file mode 100644
index 00000000..26ecfc06
--- /dev/null
+++ b/sass/themes/schemas/components/light/_tile-manager.scss
@@ -0,0 +1,286 @@
+@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} 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} 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,
+    (
+        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,
+            ),
+        ),
+
+        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: extend(
+    $light-tile-manager,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'light',
+        ),
+    )
+);
+
+/// 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,
+
+        _meta: (
+            theme: 'fluent',
+            variant: 'light',
+        ),
+    )
+);
+
+/// Generates a bootstrap tile manager schema.
+/// @type {Map}
+/// @prop {Map} 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,
+    (
+        background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        placeholder-background: (
+            color: (
+                'primary',
+                300,
+                0.15,
+            ),
+        ),
+
+        overlay-background: (
+            color: (
+                'primary',
+                300,
+                0.4,
+            ),
+        ),
+
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'light',
+        ),
+    )
+);
+
+/// Generates an indigo tile manager schema.
+/// @type {Map}
+/// @prop {Map} 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 {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,
+    (
+        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,
+            ),
+        ),
+
+        border-radius: rem(6px),
+        _meta: (
+            theme: 'indigo',
+            variant: 'light',
+        ),
+    )
+);