diff --git a/packages/theming/sass/themes/components/chip/_chip-theme.scss b/packages/theming/sass/themes/components/chip/_chip-theme.scss
index c7c00769..daed3036 100644
--- a/packages/theming/sass/themes/components/chip/_chip-theme.scss
+++ b/packages/theming/sass/themes/components/chip/_chip-theme.scss
@@ -18,6 +18,8 @@
 /// PRIMARY TOKENS:
 /// - `$background` — The main chip background.
 /// - `$selected-background` — Selected state background.
+/// - `$outlined-background` — The outlined chip background.
+/// - `$outlined-selected-background` — The outlined selected state background.
 ///
 /// Setting just `$background` will create a complete chip theme with all states properly derived.
 ///
@@ -26,11 +28,15 @@
 ///
 /// @param {Color} $text-color [null] - The chip text color. Auto-derived from background.
 /// @param {Color} $background [null] - The chip background color. PRIMARY - derives text-color, border-color, hover/focus states.
-/// @param {Color} $border-color [null] - The chip border color. Auto-derived from background.
+/// @param {Color} $outlined-text-color [null] - The outlined chip text color. Auto-derived from the outlined-background.
+/// @param {Color} $outlined-background [null] - The outlined chip background color. PRIMARY - derives text-color, border-color, hover/focus states.
+/// @param {Color} $border-color [null] - The outlined chip border color.
 ///
 /// @param {Color} $disabled-text-color [null] - The disabled chip text color.
 /// @param {Color} $disabled-background [null] - The disabled chip background color.
-/// @param {Color} $disabled-border-color [null] - The disabled chip border color.
+/// @param {Color} $disabled-outlined-text-color [null] - The disabled outlined chip text color.
+/// @param {Color} $disabled-outlined-background [null] - The disabled outlined chip background color.
+/// @param {Color} $disabled-border-color [null] - The disabled outlined chip border color.
 ///
 /// @param {Color} $ghost-background [null] - The chip ghost background color.
 /// @param {Color} $ghost-text-color [null] - The chip ghost text color.
@@ -38,26 +44,44 @@
 ///
 /// @param {Color} $hover-text-color [null] - The chip text hover color. Auto-derived from hover-background.
 /// @param {Color} $hover-background [null] - The chip hover background color. Auto-derived from background.
-/// @param {Color} $hover-border-color [null] - The chip hover border color. Auto-derived from hover-background.
+/// @param {Color} $hover-outlined-text-color [null] - The outlined chip hover text color. Auto-derived from hover-outlined-background.
+/// @param {Color} $hover-outlined-background [null] - The outlined chip hover background color. Auto-derived from outlined-background.
+/// @param {Color} $hover-border-color [null] - The outlined chip hover border color.
 ///
 /// @param {Color} $focus-text-color [null] - The chip text focus color. Auto-derived from focus-background.
 /// @param {Color} $focus-background [null] - The chip focus background color. Auto-derived from background.
-/// @param {color} $focus-border-color [null] - The chip focus border color. Auto-derived from focus-background.
+/// @param {Color} $focus-outlined-text-color [null] - The outlined chip focus text color. Auto-derived from focus-outlined-background.
+/// @param {Color} $focus-outlined-background [null] - The outlined chip focus background color. Auto-derived from outlined-background.
+/// @param {Color} $focus-border-color [null] - The outlined chip focus border color.
+/// @param {Color} $focus-shadow-color [null] - The chip focus shadow color in Bootstrap and Indigo.
 ///
-/// @param {color} $selected-text-color [null] - The selected chip text color. Auto-derived from selected-background.
-/// @param {color} $selected-background [null] - The selected chip background color. Auto-derived from background.
-/// @param {color} $selected-border-color [null] - The selected chip border color. Auto-derived from selected-background.
+/// @param {Color} $selected-text-color [null] - The selected chip text color. Auto-derived from selected-background.
+/// @param {Color} $selected-background [null] - The selected chip background color. Auto-derived from background.
+/// @param {Color} $selected-outlined-text-color [null] - The outlined chip text color. Auto-derived from selected-outlined-background.
+/// @param {Color} $selected-outlined-background [null] - The outlined chip background color. PRIMARY - derives text-color, border-color, hover/focus states.
+/// @param {Color} $selected-border-color [null] - The selected outlined chip border color.
 ///
-/// @param {color} $hover-selected-text-color [null] - The selected chip hover text color. Auto-derived from hover-selected-background.
-/// @param {color} $hover-selected-background [null] - The selected chip hover background color. Auto-derived from selected-background.
-/// @param {color} $hover-selected-border-color [null] - The selected chip hover border color. Auto-derived from hover-selected-background.
+/// @param {Color} $hover-selected-text-color [null] - The selected chip hover text color. Auto-derived from hover-selected-background.
+/// @param {Color} $hover-selected-background [null] - The selected chip hover background color. Auto-derived from selected-background.
+/// @param {Color} $hover-selected-outlined-text-color [null] - The outlined chip hover text color. Auto-derived from hover-selected-outlined-background.
+/// @param {Color} $hover-selected-outlined-background [null] - The outlined chip hover background color. Auto-derived from selected-outlined-background.
+/// @param {Color} $hover-selected-border-color [null] - The selected outlined chip hover border color.
 ///
-/// @param {color} $focus-selected-text-color [null] - The selected chip text focus color. Auto-derived from focus-selected-background.
-/// @param {color} $focus-selected-background [null] - The selected chip focus background color. Auto-derived from selected-background.
-/// @param {color} $focus-selected-border-color [null] - The selected chip focus border color. Auto-derived from focus-selected-background.
+/// @param {Color} $focus-selected-text-color [null] - The selected chip text focus color. Auto-derived from focus-selected-background.
+/// @param {Color} $focus-selected-background [null] - The selected chip focus background color. Auto-derived from selected-background.
+/// @param {Color} $focus-selected-outlined-text-color [null] - The selected outlined chip focus text color. Auto-derived from focus-selected-outlined-background.
+/// @param {Color} $focus-selected-outlined-background [null] - The selected outlined chip focus background color. Auto-derived from selected-outlined-background.
+/// @param {Color} $focus-selected-border-color [null] - The selected outlined chip focus border color.
+/// @param {Color} $focus-selected-shadow-color [null] - The selected chip focus shadow color in Bootstrap and Indigo.
 ///
-/// @param {color} $remove-icon-color [null] - The remove icon color for the chip.
-/// @param {color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip.
+/// @param {Color} $disabled-selected-text-color [null] - The disabled selected chip text color.
+/// @param {Color} $disabled-selected-background [null] - The disabled selected chip background color.
+/// @param {Color} $disabled-selected-outlined-text-color [null] - The disabled selected outlined chip text color.
+/// @param {Color} $disabled-selected-outlined-background [null] - The disabled selected outlined chip background color.
+/// @param {Color} $disabled-selected-border-color [null] - The disabled selected outlined chip border color.
+///
+/// @param {Color} $remove-icon-color [null] - The remove icon color for the chip.
+/// @param {Color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip.
 ///
 /// @requires $light-material-schema
 ///
@@ -72,34 +96,51 @@
     $text-color: null,
     $background: null,
     $border-color: null,
+    $outlined-text-color: null,
+    $outlined-background: null,
     $ghost-background: null,
     $ghost-text-color: null,
 
     $disabled-text-color: null,
     $disabled-background: null,
+    $disabled-outlined-text-color: null,
+    $disabled-outlined-background: null,
     $disabled-border-color: null,
+    $disabled-selected-outlined-text-color: null,
+    $disabled-selected-outlined-background: null,
+    $disabled-selected-border-color: null,
 
     $hover-text-color: null,
     $hover-background: null,
+    $hover-outlined-text-color: null,
+    $hover-outlined-background: null,
     $hover-border-color: null,
 
     $focus-text-color: null,
     $focus-background: null,
+    $focus-outlined-text-color: null,
+    $focus-outlined-background: null,
     $focus-border-color: null,
-    $focus-outline-color: null,
+    $focus-shadow-color: null,
 
     $selected-text-color: null,
     $selected-background: null,
+    $selected-outlined-text-color: null,
+    $selected-outlined-background: null,
     $selected-border-color: null,
 
     $hover-selected-text-color: null,
     $hover-selected-background: null,
+    $hover-selected-outlined-text-color: null,
+    $hover-selected-outlined-background: null,
     $hover-selected-border-color: null,
 
     $focus-selected-text-color: null,
     $focus-selected-background: null,
+    $focus-selected-outlined-text-color: null,
+    $focus-selected-outlined-background: null,
     $focus-selected-border-color: null,
-    $focus-selected-outline-color: null,
+    $focus-selected-shadow-color: null,
 
     $ghost-shadow: null,
     $remove-icon-color: null,
@@ -150,10 +191,6 @@
         $ghost-text-color: adaptive-contrast(var(--ghost-background));
     }
 
-    @if not($border-color) and $background {
-        $border-color: var(--background);
-    }
-
     @if not($hover-background) and $background {
         $hover-background: dynamic-shade(var(--background));
     }
@@ -212,34 +249,38 @@
         $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
     }
 
-    @if not($hover-border-color) and $hover-background {
-        $hover-border-color: var(--hover-background);
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($focus-shadow-color) and $focus-background {
+            $focus-shadow-color: hsl(from var(--focus-background) h s l / 0.4);
+        }
+
+        @if not($focus-selected-shadow-color) and $focus-selected-background {
+            $focus-selected-shadow-color: hsl(from var(--focus-selected-background) h s l / 0.4);
+        }
     }
 
-    @if not($focus-border-color) and $focus-background {
-        $focus-border-color: var(--focus-background);
+    @if not($outlined-text-color) and $outlined-background {
+        $outlined-text-color: adaptive-contrast(var(--outlined-background));
     }
 
-    @if not($selected-border-color) and $selected-background {
-        $selected-border-color: var(--selected-background);
+    @if not($hover-outlined-text-color) and $hover-outlined-background {
+        $hover-outlined-text-color: adaptive-contrast(var(--hover-outlined-background));
     }
 
-    @if not($hover-selected-border-color) and $hover-selected-background {
-        $hover-selected-border-color: var(--hover-selected-background);
+    @if not($focus-outlined-text-color) and $focus-outlined-background {
+        $focus-outlined-text-color: adaptive-contrast(var(--focus-outlined-background));
     }
 
-    @if not($focus-selected-border-color) and $focus-selected-background {
-        $focus-selected-border-color: var(--focus-selected-background);
+    @if not($selected-outlined-text-color) and $selected-outlined-background {
+        $selected-outlined-text-color: adaptive-contrast(var(--selected-outlined-background));
     }
 
-    @if $variant == 'bootstrap' or $variant == 'indigo' {
-        @if not($focus-outline-color) and $focus-background {
-            $focus-outline-color: hsl(from var(--focus-background) h s l / 0.4);
-        }
+    @if not($hover-selected-outlined-text-color) and $hover-selected-outlined-background {
+        $hover-selected-outlined-text-color: adaptive-contrast(var(--hover-selected-outlined-background));
+    }
 
-        @if not($focus-selected-outline-color) and $focus-selected-background {
-            $focus-selected-outline-color: hsl(from var(--focus-selected-background) h s l / 0.4);
-        }
+    @if not($focus-selected-outlined-text-color) and $focus-selected-outlined-background {
+        $focus-selected-outlined-text-color: adaptive-contrast(var(--focus-selected-outlined-background));
     }
 
     @if not($ghost-shadow) {
@@ -256,38 +297,55 @@
             text-color: $text-color,
             background: $background,
             border-color: $border-color,
+            outlined-text-color: $outlined-text-color,
+            outlined-background: $outlined-background,
             ghost-background: $ghost-background,
             ghost-text-color: $ghost-text-color,
 
             disabled-text-color: $disabled-text-color,
             disabled-background: $disabled-background,
+            disabled-outlined-text-color: $disabled-outlined-text-color,
+            disabled-outlined-background: $disabled-outlined-background,
             disabled-border-color: $disabled-border-color,
+            disabled-selected-outlined-text-color: $disabled-selected-outlined-text-color,
+            disabled-selected-outlined-background: $disabled-selected-outlined-background,
+            disabled-selected-border-color: $disabled-selected-border-color,
 
             hover-text-color: $hover-text-color,
             hover-background: $hover-background,
+            hover-outlined-text-color: $hover-outlined-text-color,
+            hover-outlined-background: $hover-outlined-background,
             hover-border-color: $hover-border-color,
 
             focus-text-color: $focus-text-color,
             focus-background: $focus-background,
+            focus-outlined-text-color: $focus-outlined-text-color,
+            focus-outlined-background: $focus-outlined-background,
             focus-border-color: $focus-border-color,
 
             selected-text-color: $selected-text-color,
             selected-background: $selected-background,
+            selected-outlined-text-color: $selected-outlined-text-color,
+            selected-outlined-background: $selected-outlined-background,
             selected-border-color: $selected-border-color,
 
             hover-selected-text-color: $hover-selected-text-color,
             hover-selected-background: $hover-selected-background,
+            hover-selected-outlined-text-color: $hover-selected-outlined-text-color,
+            hover-selected-outlined-background: $hover-selected-outlined-background,
             hover-selected-border-color: $hover-selected-border-color,
 
             focus-selected-text-color: $focus-selected-text-color,
             focus-selected-background: $focus-selected-background,
+            focus-selected-outlined-text-color: $focus-selected-outlined-text-color,
+            focus-selected-outlined-background: $focus-selected-outlined-background,
             focus-selected-border-color: $focus-selected-border-color,
 
             ghost-elevation: $ghost-shadow,
             remove-icon-color: $remove-icon-color,
             remove-icon-color-focus: $remove-icon-color-focus,
-            focus-selected-outline-color: $focus-selected-outline-color,
-            focus-outline-color: $focus-outline-color,
+            focus-selected-shadow-color: $focus-selected-shadow-color,
+            focus-shadow-color: $focus-shadow-color,
             size: $size,
         )
     );
diff --git a/packages/theming/sass/themes/schemas/components/dark/_chip.scss b/packages/theming/sass/themes/schemas/components/dark/_chip.scss
index 28f8e700..ffd34d37 100644
--- a/packages/theming/sass/themes/schemas/components/dark/_chip.scss
+++ b/packages/theming/sass/themes/schemas/components/dark/_chip.scss
@@ -25,9 +25,81 @@ $dark-material-chip: extend($material-chip, $dark-base-chip);
 
 /// Generates a dark fluent chip schema.
 /// @type Map
+/// @prop {Map} hover-outlined-background [color: ('gray', 200, 0.30)] - The outlined chip hover background color.
+/// @prop {Map} focus-outlined-background [color: ('primary', 600, 0.20)] - The outlined chip focus background color.
+/// @prop {Map} focus-border-color [color: ('primary', 200)] - The outlined chip focus border color.
+/// @prop {Map} selected-border-color [color: ('primary', 200)] - The selected outlined chip border color.
+/// @prop {Map} hover-selected-outlined-background [color: ('primary', 600, 0.20)] - The selected outlined chip hover background color.
+/// @prop {Map} hover-selected-border-color [color: ('primary', 200)] - The selected outlined chip hover border color.
+/// @prop {Map} focus-selected-outlined-background [color: ('primary', 800, 0.50)] - The selected outlined chip focus background color.
+/// @prop {Map} focus-selected-border-color [color: ('primary', 200)] - The selected outlined chip focus border color.
 /// @requires $fluent-chip
 /// @requires $dark-base-chip
-$dark-fluent-chip: extend($fluent-chip, $dark-base-chip);
+$dark-fluent-chip: extend(
+    $fluent-chip,
+    $dark-base-chip,
+    (
+        hover-outlined-background: (
+            color: (
+                'gray',
+                200,
+                0.3,
+            ),
+        ),
+
+        focus-outlined-background: (
+            color: (
+                'primary',
+                600,
+                0.2,
+            ),
+        ),
+
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        selected-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        hover-selected-outlined-background: (
+            color: (
+                'primary',
+                600,
+                0.2,
+            ),
+        ),
+
+        hover-selected-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        focus-selected-outlined-background: (
+            color: (
+                'primary',
+                800,
+                0.5,
+            ),
+        ),
+
+        focus-selected-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark bootstrap chip schema.
 /// @type Map
@@ -35,8 +107,10 @@ $dark-fluent-chip: extend($fluent-chip, $dark-base-chip);
 /// @prop {Map} hover-text-color [contrast-color: ('gray', 100)] - The chip text hover color.
 /// @prop {Map} hover-selected-background [color: ('gray', 100)] - The selected chip hover background color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('gray', 100)] - The selected chip hover text color.
-/// @prop {Map} focus-outline-color [color: ('gray', 300, 0.38)] - The chip focus outline color.
-/// @prop {Map} focus-selected-outline-color [color: ('gray', 300, 0.38)] - The selected chip focus outline color.
+/// @prop {Map} focus-shadow-color [color: ('gray', 300, 0.38)] - The chip focus shadow color.
+/// @prop {Map} focus-selected-shadow-color [color: ('gray', 300, 0.38)] - The selected chip focus shadow color.
+/// @prop {Map} hover-outlined-background [color: ('gray', 100, 0.30)] - The outlined chip hover background color.
+/// @prop {Map} hover-selected-outlined-background [color: ('gray', 100, 0.30)] - The selected outlined chip hover background color.
 /// @requires $bootstrap-chip
 /// @requires $dark-base-chip
 $dark-bootstrap-chip: extend(
@@ -71,7 +145,7 @@ $dark-bootstrap-chip: extend(
             ),
         ),
 
-        focus-outline-color: (
+        focus-shadow-color: (
             color: (
                 'gray',
                 300,
@@ -79,67 +153,143 @@ $dark-bootstrap-chip: extend(
             ),
         ),
 
-        focus-selected-outline-color: (
+        focus-selected-shadow-color: (
             color: (
                 'gray',
                 300,
                 0.38,
             ),
         ),
+
+        hover-outlined-background: (
+            color: (
+                'gray',
+                100,
+                0.3,
+            ),
+        ),
+
+        hover-selected-outlined-background: (
+            color: (
+                'gray',
+                100,
+                0.3,
+            ),
+        ),
     )
 );
 
 /// Generates a dark indigo chip schema.
 /// @type Map
-/// @prop {Map} text-color [contrast-color: ('gray', 50, .8)] - The chip text color.
-/// @prop {Map} hover-text-color [contrast-color: ('gray', 50)] - The chip text hover color.
-/// @prop {Map} focus-text-color [contrast-color: ('gray', 50, .8)] - The focused chip text color.
+/// @prop {Map} hover-text-color [color: ('gray', 50)] - The chip text hover color.
+/// @prop {Map} focus-text-color [color: ('gray', 800)] - The focused chip text color.
 ///
-/// @prop {Map} background [contrast-color: ('gray', 50, .05)] - The chip background color.
-/// @prop {Map} hover-background [contrast-color: ('gray', 50, .1)] - The chip hover background color.
-/// @prop {Map} focus-background [contrast-color: ('gray', 50, .05)] - The focused chip background color.
+/// @prop {Map} background [color: ('gray', 300)] - The chip background color.
+/// @prop {Map} hover-background [color: ('gray', 400)] - The chip hover background color.
+/// @prop {Map} focus-background [color: ('gray', 300)] - The focused chip background color.
 ///
 /// @prop {Map} border-color [color: ('gray', 100)] - The chip border color.
-/// @prop {Map} hover-border-color [color: ('gray', 200)] - The chip hover border color.
-/// @prop {Map} focus-border-color [color: ('gray', 100)] - The chip focus border color.
-/// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The chip focus outline color.
+/// @prop {Map} focus-shadow-color [contrast-color: ('gray', 50, .2)] - The chip focus shadow color.
 ///
 /// @prop {Map} ghost-background [color: ('gray', 100)] - The chip ghost background color.
 /// @prop {Map} ghost-text-color [contrast-color: ('gray', 100, .8)] - The chip ghost text color.
 ///
 /// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The disabled chip text color.
 /// @prop {Map} disabled-background [contrast-color: ('gray', 50, .05)] - The disabled chip background color.
-/// @prop {Map} disabled-border-color [ color: ('gray', 50)] - The disabled chip border color.
+/// @prop {Map} disabled-selected-text-color [contrast-color: ('gray', 50, .20)] - The selected disabled chip text color.
+///
+/// @prop {Map} outlined-background [contrast-color: ('gray', 50, .05)] - The outlined chip  background color.
+/// @prop {Map} outlined-text-color [contrast-color: ('gray', 50, .80)] - The outlined chip text color.
+/// @prop {Map} border-color [color: ('gray', 100)] - The chip border color.
+/// @prop {Map} selected-outlined-text-color [contrast-color: ('gray', 50)] - The selected outlined chip text color.
+///
+/// @prop {Map} hover-outlined-background [contrast-color: ('gray', 50, .10)] - The outlined chip hover background color.
+/// @prop {Map} hover-outlined-text-color [contrast-color: ('gray', 50)] - The outlined chip hover text color.
+/// @prop {Map} hover-border-color [color: ('gray', 200)] - The outlined chip hover border color.
+/// @prop {Map} hover-selected-outlined-text-color [contrast-color: ('gray', 50)] - The selected outlined chip hover text color.
+///
+/// @prop {Map} focus-outlined-background [contrast-color: ('gray', 50, .05)] - The outlined chip focus background color.
+/// @prop {Map} focus-outlined-text-color [contrast-color: ('gray', 50, .80)] - The outlined chip focus text color.
+/// @prop {Map} focus-border-color [color: ('gray', 100)] - The outlined chip focus border color.
+/// @prop {Map} focus-selected-outlined-text-color [contrast-color: ('gray', 50)] - The selected outlined chip focus text color.
+///
+/// @prop {Map} disabled-outlined-background [contrast-color: ('gray', 50, .05)] - The outlined chip disabled background color.
+/// @prop {Map} disabled-outlined-text-color [contrast-color: ('gray', 50, .20)] - The outlined chip disabled text color.
+/// @prop {Map} disabled-border-color [color: ('gray', 50)] - The outlined disabled chip border color.
+/// @prop {Map} disabled-selected-outlined-text-color [contrast-color: ('gray', 50)] - The selected outlined chip disabled text color.
 /// @requires $indigo-chip
 /// @requires $dark-base-chip
 $dark-indigo-chip: extend(
     $indigo-chip,
     $dark-base-chip,
     (
-        text-color: (
-            contrast-color: (
+        hover-text-color: (
+            color: (
                 'gray',
                 50,
+            ),
+        ),
+
+        focus-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        hover-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        focus-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        ghost-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        ghost-text-color: (
+            contrast-color: (
+                'gray',
+                100,
                 0.8,
             ),
         ),
 
-        hover-text-color: (
+        focus-shadow-color: (
             contrast-color: (
                 'gray',
                 50,
+                0.2,
             ),
         ),
 
-        focus-text-color: (
+        disabled-text-color: (
             contrast-color: (
                 'gray',
                 50,
-                0.8,
+                0.2,
             ),
         ),
 
-        background: (
+        disabled-background: (
             contrast-color: (
                 'gray',
                 50,
@@ -147,15 +297,15 @@ $dark-indigo-chip: extend(
             ),
         ),
 
-        hover-background: (
+        disabled-selected-text-color: (
             contrast-color: (
                 'gray',
                 50,
-                0.1,
+                0.2,
             ),
         ),
 
-        focus-background: (
+        outlined-background: (
             contrast-color: (
                 'gray',
                 50,
@@ -163,25 +313,40 @@ $dark-indigo-chip: extend(
             ),
         ),
 
-        ghost-background: (
+        outlined-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
+        border-color: (
             color: (
                 'gray',
                 100,
             ),
         ),
 
-        ghost-text-color: (
+        selected-outlined-text-color: (
             contrast-color: (
                 'gray',
-                100,
-                0.8,
+                50,
             ),
         ),
 
-        border-color: (
-            color: (
+        hover-outlined-background: (
+            contrast-color: (
                 'gray',
-                100,
+                50,
+                0.1,
+            ),
+        ),
+
+        hover-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                50,
             ),
         ),
 
@@ -192,6 +357,29 @@ $dark-indigo-chip: extend(
             ),
         ),
 
+        hover-selected-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        focus-outlined-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.05,
+            ),
+        ),
+
+        focus-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
         focus-border-color: (
             color: (
                 'gray',
@@ -199,27 +387,26 @@ $dark-indigo-chip: extend(
             ),
         ),
 
-        focus-outline-color: (
+        focus-selected-outlined-text-color: (
             contrast-color: (
                 'gray',
                 50,
-                0.2,
             ),
         ),
 
-        disabled-text-color: (
+        disabled-outlined-background: (
             contrast-color: (
                 'gray',
                 50,
-                0.2,
+                0.05,
             ),
         ),
 
-        disabled-background: (
+        disabled-outlined-text-color: (
             contrast-color: (
                 'gray',
                 50,
-                0.05,
+                0.2,
             ),
         ),
 
@@ -229,5 +416,12 @@ $dark-indigo-chip: extend(
                 50,
             ),
         ),
+
+        disabled-selected-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
     )
 );
diff --git a/packages/theming/sass/themes/schemas/components/light/_chip.scss b/packages/theming/sass/themes/schemas/components/light/_chip.scss
index b195e056..663b6028 100644
--- a/packages/theming/sass/themes/schemas/components/light/_chip.scss
+++ b/packages/theming/sass/themes/schemas/components/light/_chip.scss
@@ -12,39 +12,55 @@
 /// @type Map
 /// @prop {List} border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for chip.
 /// @prop {Map} background [color: ('gray', 200)] - The chip background color.
-/// @prop {Color} border-color [transparent] - The chip border color.
-/// @prop {Map} ghost-background [color: ('gray', 400))] - The chip ghost background color.
-/// @prop {Map} ghost-text-color [contrast-color: ('gray', 400))] - The chip ghost text color.
+/// @prop {Map} border-color [contrast-color: ('gray', 100)] - The chip border color.
+/// @prop {Map} ghost-background [color: ('gray', 400)] - The chip ghost background color.
+/// @prop {Map} ghost-text-color [contrast-color: ('gray', 400)] - The chip ghost text color.
 /// @prop {Map} hover-text-color [contrast-color: ('gray', 400)] - The chip text hover color.
 /// @prop {Map} hover-background [color: ('gray', 400)] - The chip hover background color.
-/// @prop {Color} hover-border-color [transparent] - The chip hover border color.
+/// @prop {Map} hover-border-color [contrast-color: ('gray', 100)] - The chip hover border color.
 /// @prop {Map} selected-text-color [contrast-color: ('gray', 300)] - The selected chip text color.
 /// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
-/// @prop {Color} selected-border-color [transparent] - The selected chip border color.
+/// @prop {Map} selected-border-color [contrast-color: ('gray', 100)] - The selected chip border color.
 /// @prop {Map} focus-text-color [contrast-color: ('gray', 500)] - The focused chip text color.
-/// @prop {Color} focus-border-color [transparent] - The chip focus border color.
+/// @prop {Map} focus-border-color [contrast-color: ('gray', 100)] - The chip focus border color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('gray', 400)] - The selected chip hover text color.
 /// @prop {Map} hover-selected-background [color: ('gray', 400)] - The selected chip hover background color.
-/// @prop {Color} hover-selected-border-color [transparent] - The selected chip hover border color.
-/// @prop {Color} focus-selected-border-color [transparent] - The selected chip focus border color.
+/// @prop {Map} hover-selected-border-color [contrast-color: ('gray', 100)] - The selected chip hover border color.
+/// @prop {Map} focus-selected-border-color [contrast-color: ('gray', 100)] - The selected chip focus border color.
 /// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {color} remove-icon-color ["'currentColor'"] - The remove icon color for the chip.
 /// @prop {Color} remove-icon-color-focus ["'currentColor'"] - The remove icon color on focus for the chip.
 /// @prop {Map} disabled-text-color [color: ('gray', 500)] - The disabled chip text color.
 /// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled chip background color.
-/// @prop {Map} disabled-border-color [color: ('gray', 200)] - The disabled chip border color.
+/// @prop {Map} disabled-border-color [color: ('gray', 500, 0.30)] - The disabled chip border color.
 /// @prop {List} size [(rem(20px), rem(24px), rem(32px))] - The size used for the chip height.
 /// @prop {Number} default-size [2] - The default size used for the chip component.
 /// @prop {Map} typography [text: (value: 'body-2')] - The typography styles used for the component.
+/// @prop {Map} disabled-selected-text-color [color: ('gray', 500)] - The selected disabled chip text color.
+/// @prop {Map} disabled-selected-background [color: ('gray', 200)] - The selected disabled chip background color.
+/// @prop {Color} outlined-background [transparent] - The outlined chip background color.
+/// @prop {Map} outlined-text-color [contrast-color: ('gray', 100)] - The outlined chip text color.
+/// @prop {Color} selected-outlined-background [transparent] - The outlined chip background color.
+/// @prop {Map} selected-outlined-text-color [contrast-color: ('gray', 100)] - The outlined chip text color.
+/// @prop {Map} hover-outlined-text-color [contrast-color: ('gray', 100)] - The outlined chip hover text color.
+/// @prop {Map} hover-selected-outlined-text-color [contrast-color: ('gray', 100)] - The outlined chip hover text color.
+/// @prop {Map} focus-outlined-text-color [contrast-color: ('gray', 100)] - The outlined chip focus text color.
+/// @prop {Map} focus-selected-outlined-text-color [contrast-color: ('gray', 100)] - The outlined chip focus text color.
+/// @prop {Map} disabled-outlined-text-color [color: ('gray', 500)] - The outlined chip text color.
+/// @prop {Map} disabled-outlined-background [color: ('gray', 500, 0.30)] - The outlined chip background color.
+/// @prop {Map} disabled-selected-outlined-background [color: ('gray', 200, 0.30)] - The outlined chip background color.
+/// @prop {Map} disabled-selected-outlined-text-color [color: ('gray', 500)] - The outlined chip text color.
+/// @prop {Map} disabled-selected-border-color [color: ('gray', 500, 0.30)] - The outlined chip text color.
+///
 /// @requires $default-elevation-chip
 $light-chip: extend(
     $default-elevation-chip,
     (
         remove-icon-color: "'currentColor'",
 
-        focus-outline-color: transparent,
+        focus-shadow-color: transparent,
 
-        focus-selected-outline-color: transparent,
+        focus-selected-shadow-color: transparent,
 
         remove-icon-color-focus: "'currentColor'",
 
@@ -55,8 +71,6 @@ $light-chip: extend(
             ),
         ),
 
-        border-color: transparent,
-
         ghost-background: (
             color: (
                 'gray',
@@ -85,8 +99,6 @@ $light-chip: extend(
             ),
         ),
 
-        hover-border-color: transparent,
-
         focus-text-color: (
             contrast-color: (
                 'gray',
@@ -94,8 +106,6 @@ $light-chip: extend(
             ),
         ),
 
-        focus-border-color: transparent,
-
         selected-text-color: (
             contrast-color: (
                 'gray',
@@ -110,8 +120,6 @@ $light-chip: extend(
             ),
         ),
 
-        selected-border-color: transparent,
-
         hover-selected-text-color: (
             contrast-color: (
                 'gray',
@@ -126,10 +134,6 @@ $light-chip: extend(
             ),
         ),
 
-        hover-selected-border-color: transparent,
-
-        focus-selected-border-color: transparent,
-
         border-radius: (
             border-radius: (
                 rem(16px),
@@ -152,7 +156,14 @@ $light-chip: extend(
             ),
         ),
 
-        disabled-border-color: (
+        disabled-selected-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        disabled-selected-background: (
             color: (
                 'gray',
                 200,
@@ -175,6 +186,140 @@ $light-chip: extend(
             ),
         ),
 
+        outlined-background: transparent,
+
+        outlined-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        border-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        selected-outlined-background: transparent,
+
+        selected-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        selected-border-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        hover-border-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        hover-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        hover-selected-border-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        hover-selected-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        focus-border-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        focus-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        focus-selected-border-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        focus-selected-outlined-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        disabled-outlined-background: (
+            color: (
+                'gray',
+                200,
+                0.3,
+            ),
+        ),
+
+        disabled-outlined-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        disabled-border-color: (
+            color: (
+                'gray',
+                500,
+                0.3,
+            ),
+        ),
+
+        disabled-selected-outlined-background: (
+            color: (
+                'gray',
+                200,
+                0.3,
+            ),
+        ),
+
+        disabled-selected-outlined-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        disabled-selected-border-color: (
+            color: (
+                'gray',
+                500,
+                0.3,
+            ),
+        ),
+
         _meta: (
             name: 'chip',
             variant: 'light',
@@ -190,6 +335,10 @@ $light-chip: extend(
 /// @prop {Map} selected-background [color: ('gray', 300)] - The selected chip background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 500)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [color: ('gray', 500)] - The selected chip focus background color.
+/// @prop {Map} hover-outlined-background [color: ('gray', 400, 0.16)] - The outlined chip hover background color.
+/// @prop {Map} hover-selected-outlined-background [color: ('gray', 400, 0.16)] - The selected outlined chip hover background color.
+/// @prop {Map} focus-outlined-background [color: ('gray', 500, 0.30)] - The outlined chip focus background color.
+/// @prop {Map} focus-selected-outlined-background [color: ('gray', 500, 0.30)] - The selected outlined chip focus background color.
 /// @requires $light-chip
 /// @requires $default-elevation-chip
 $material-chip: extend(
@@ -238,6 +387,38 @@ $material-chip: extend(
             ),
         ),
 
+        hover-outlined-background: (
+            color: (
+                'gray',
+                400,
+                0.16,
+            ),
+        ),
+
+        hover-selected-outlined-background: (
+            color: (
+                'gray',
+                400,
+                0.16,
+            ),
+        ),
+
+        focus-outlined-background: (
+            color: (
+                'gray',
+                500,
+                0.3,
+            ),
+        ),
+
+        focus-selected-outlined-background: (
+            color: (
+                'gray',
+                500,
+                0.3,
+            ),
+        ),
+
         _meta: (
             theme: 'material',
         ),
@@ -257,9 +438,19 @@ $material-chip: extend(
 /// @prop {Map} hover-selected-text-color [contrast-color: ('primary', 700)] - The selected chip hover text color.
 /// @prop {Map} hover-selected-background [color: ('primary', 600)] - The selected chip hover background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 700)] - The selected chip text focus color.
-/// @prop {Map} focus-selected-background [color: ('primary', 500)] - The selected chip focus background color.
+/// @prop {Map} focus-selected-background [color: ('primary', 800)] - The selected chip focus background color.
 /// @prop {Map} typography [text: (value: 'subtitle-2')] - The typography styles used for the component.
 /// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+/// @prop {Map} outlined-text-color [color: ('gray', 700)] - The outlined chip text color.
+/// @prop {Map} border-color [color: ('gray', 700)] - The outlined chip border color.
+/// @prop {Map} selected-border-color [color: ('primary', 600)] - The selected outlined chip border color.
+/// @prop {Map} hover-outlined-background [color: ('gray', 200, 0.16)] - The outlined chip hover background color.
+/// @prop {Map} hover-selected-outlined-background [color: ('primary', 600, 0.16)] - The selected outlined chip hover background color.
+/// @prop {Map} hover-selected-border-color [color: ('primary', 600)] - The selected outlined chip hover border color.
+/// @prop {Map} focus-outlined-background [color: ('primary', 600, 0.16)] - The outlined chip focus background color.
+/// @prop {Map} focus-border-color [color: ('primary', 600)] - The outlined chip focus border color.
+/// @prop {Map} focus-selected-outlined-background [color: ('primary', 800, 0.30)] - The selected outlined chip focus background color.
+/// @prop {Map} focus-selected-border-color [color: ('primary', 600)] - The selected outlined chip focus border color.
 /// @requires $light-chip
 /// @requires $fluent-elevation-chip
 $fluent-chip: extend(
@@ -356,6 +547,80 @@ $fluent-chip: extend(
             ),
         ),
 
+        outlined-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        selected-border-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        hover-outlined-background: (
+            color: (
+                'gray',
+                200,
+                0.16,
+            ),
+        ),
+
+        hover-selected-outlined-background: (
+            color: (
+                'primary',
+                600,
+                0.16,
+            ),
+        ),
+
+        hover-selected-border-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        focus-outlined-background: (
+            color: (
+                'primary',
+                600,
+                0.16,
+            ),
+        ),
+
+        focus-border-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        focus-selected-outlined-background: (
+            color: (
+                'primary',
+                800,
+                0.3,
+            ),
+        ),
+
+        focus-selected-border-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
         ),
@@ -373,8 +638,12 @@ $fluent-chip: extend(
 /// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 200)] - The selected chip text focus color.
 /// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for chip.
-/// @prop {Map} focus-outline-color [color: ('gray', 500, 0.38)] - The chip focus outline color.
-/// @prop {Map} focus-selected-outline-color [color: ('gray', 500, 0.38)] - The selected chip focus outline color.
+/// @prop {Map} focus-shadow-color [color: ('gray', 500, 0.38)] - The chip focus shadow color.
+/// @prop {Map} focus-selected-shadow-color [color: ('gray', 500, 0.38)] - The selected chip focus shadow color.
+/// @prop {Map} hover-outlined-background [color: ('gray', 400, 0.30)] - The outlined chip hover background color.
+/// @prop {Map} hover-selected-outlined-background [color: ('gray', 400, 0.30)] - The selected outlined chip hover background color.
+/// @prop {Color} focus-outlined-background [transparent] - The outlined chip focus background color.
+/// @prop {Color} focus-selected-outlined-background [transparent] - The selected outlined chip focus background color.
 /// @requires $light-chip
 /// @requires $bootstrap-elevation-chip
 $bootstrap-chip: extend(
@@ -402,7 +671,7 @@ $bootstrap-chip: extend(
             ),
         ),
 
-        focus-outline-color: (
+        focus-shadow-color: (
             color: (
                 'gray',
                 500,
@@ -410,7 +679,7 @@ $bootstrap-chip: extend(
             ),
         ),
 
-        focus-selected-outline-color: (
+        focus-selected-shadow-color: (
             color: (
                 'gray',
                 500,
@@ -454,6 +723,26 @@ $bootstrap-chip: extend(
             ),
         ),
 
+        hover-outlined-background: (
+            color: (
+                'gray',
+                400,
+                0.3,
+            ),
+        ),
+
+        hover-selected-outlined-background: (
+            color: (
+                'gray',
+                400,
+                0.3,
+            ),
+        ),
+
+        focus-outlined-background: transparent,
+
+        focus-selected-outlined-background: transparent,
+
         _meta: (
             theme: 'bootstrap',
         ),
@@ -464,18 +753,15 @@ $bootstrap-chip: extend(
 /// @type Map
 /// @prop {List} size [(rem(20px), rem(24px), rem(28px))] - The size used for the chip height.
 /// @prop {Number} ghost-elevation [1] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
-/// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
+/// @prop {Map} text-color [color: ('gray', 800)] - The chip text color.
 /// @prop {Map} hover-text-color [color: ('gray', 900)] - The chip text hover color.
-/// @prop {Map} focus-text-color [color: ('gray', 700)] - The focused chip text color.
+/// @prop {Map} focus-text-color [color: ('gray', 800)] - The focused chip text color.
 ///
-/// @prop {Map} background [color: ('gray', 50)] - The chip background color.
-/// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
-/// @prop {Map} focus-background [color: ('gray', 50)] - The focused chip background color.
+/// @prop {Map} background [color: ('gray', 400)] - The chip background color.
+/// @prop {Map} hover-background [color: ('gray', 500)] - The chip hover background color.
+/// @prop {Map} focus-background [color: ('gray', 400)] - The focused chip background color.
 ///
-/// @prop {Map} border-color [color: ('gray', 400)] - The chip border color.
-/// @prop {Map} hover-border-color [color: ('gray', 500)] - The chip hover border color.
-/// @prop {Map} focus-border-color [color: ('gray', 400)] - The chip focus border color.
-/// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The chip focus outline color.
+/// @prop {Map} focus-shadow-color [color: ('gray', 900, .15)] - The chip focus shadow color.
 ///
 /// @prop {Map} selected-text-color [contrast-color: ('primary', 900)] - The selected chip text color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('primary', 900)] - The selected chip hover text color.
@@ -483,17 +769,42 @@ $bootstrap-chip: extend(
 /// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 900)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [color: ('primary', 500)] - The selected chip focus background color.
 ///
-/// @prop {Map} selected-border-color [color: ('primary', 500)] - The selected chip border color.
-/// @prop {Map} hover-selected-border-color [color: ('primary', 400)] - The selected chip hover border color.
-/// @prop {Map} focus-selected-border-color [color: ('primary', 500)] - The selected chip focus border color.
-/// @prop {Map} focus-selected-outline-color [color: ('primary', 400, .5)] - The selected chip focus outline color.
+/// @prop {Map} focus-selected-shadow-color [color: ('primary', 400, .5)] - The selected chip focus shadow color.
 ///
 /// @prop {Map} ghost-background [color: ('gray', 200)] - The chip ghost background color.
 /// @prop {Map} ghost-text-color [color: ('gray', 700)] - The chip ghost text color.
 ///
 /// @prop {Map} disabled-text-color [color: ('gray', 900, .2)] - The disabled chip text color.
-/// @prop {Map} disabled-background [contrast-color: ('gray', 900)] - The disabled chip background color.
-/// @prop {Map} disabled-border-color [ color: ('gray', 300)] - The disabled chip border color.
+/// @prop {Map} disabled-selected-text-color [contrast-color: ('primary', 900, .4)] - The selected disabled chip text color.
+/// @prop {Map} disabled-selected-background [color: ('primary', 400, .5)] - The selected disabled chip background color.
+///
+/// @prop {Map} outlined-background [color: ('gray', 50)] - The outlined chip background color.
+/// @prop {Map} outlined-text-color [color: ('gray', 700)] - The outlined chip text color.
+/// @prop {Map} border-color [color: ('gray', 400)] - The chip border color.
+/// @prop {Map} selected-outlined-text-color [color: ('gray', 900)] - The selected outlined chip text color.
+/// @prop {Map} selected-border-color [color: ('primary', 400)] - The selected outlined chip border color.
+///
+/// @prop {Map} hover-outlined-background [color: ('gray', 200)] - The outlined chip hover background color.
+/// @prop {Map} hover-outlined-text-color [color: ('gray', 900)] - The outlined chip hover text color.
+/// @prop {Map} hover-border-color [color: ('gray', 500)] - The outlined chip hover border color.
+/// @prop {Map} hover-selected-outlined-background [color: ('primary', 400, .3)] - The selected outlined chip hover background color.
+/// @prop {Map} hover-selected-outlined-text-color [color: ('gray', 900)] - The selected outlined chip hover text color.
+/// @prop {Map} hover-selected-border-color [color: ('primary', 400)] - The selected outlined chip hover border color.
+///
+/// @prop {Map} focus-outlined-background [color: ('gray', 50)] - The outlined chip focus background color.
+/// @prop {Map} focus-outlined-text-color [color: ('gray', 700)] - The outlined chip focus text color.
+/// @prop {Map} focus-border-color [color: ('gray', 400)] - The outlined chip focus border color.
+/// @prop {Color} focus-selected-outlined-background [transparent] - The selected outlined chip focus background color.
+/// @prop {Map} focus-selected-outlined-text-color [color: ('gray', 900)] - The selected outlined chip focus text color.
+/// @prop {Map} focus-selected-border-color [color: ('primary', 400)] - The selected chip focus border color.
+///
+/// @prop {Map} disabled-outlined-background [contrast-color: ('primary', 900)] - The outlined chip disabled background color.
+/// @prop {Map} disabled-outlined-text-color [color: ('gray', 900, .2)] - The outlined chip disabled text color.
+/// @prop {Map} disabled-border-color [ color: ('gray', 300)] - The outlined disabled chip border color.
+/// @prop {Color} disabled-selected-outlined-background [transparent] - The selected outlined chip disabled background color.
+/// @prop {Map} disabled-selected-outlined-text-color [color: ('gray', 900)] - The selected outlined chip disabled text color.
+/// @prop {Map} disabled-selected-border-color [color: ('primary', 400)] - The selected outlined chip disabled border color.
+///
 /// @requires $light-chip
 /// @requires $indigo-elevation-chip
 $indigo-chip: extend(
@@ -511,7 +822,7 @@ $indigo-chip: extend(
         text-color: (
             color: (
                 'gray',
-                700,
+                800,
             ),
         ),
 
@@ -525,11 +836,11 @@ $indigo-chip: extend(
         focus-text-color: (
             color: (
                 'gray',
-                700,
+                800,
             ),
         ),
 
-        focus-outline-color: (
+        focus-shadow-color: (
             color: (
                 'gray',
                 900,
@@ -540,21 +851,21 @@ $indigo-chip: extend(
         background: (
             color: (
                 'gray',
-                50,
+                400,
             ),
         ),
 
         hover-background: (
             color: (
                 'gray',
-                200,
+                500,
             ),
         ),
 
         focus-background: (
             color: (
                 'gray',
-                50,
+                400,
             ),
         ),
 
@@ -614,7 +925,7 @@ $indigo-chip: extend(
             ),
         ),
 
-        focus-selected-outline-color: (
+        focus-selected-shadow-color: (
             color: (
                 'primary',
                 400,
@@ -625,7 +936,7 @@ $indigo-chip: extend(
         selected-border-color: (
             color: (
                 'primary',
-                500,
+                400,
             ),
         ),
 
@@ -639,7 +950,7 @@ $indigo-chip: extend(
         focus-selected-border-color: (
             color: (
                 'primary',
-                500,
+                400,
             ),
         ),
 
@@ -665,10 +976,34 @@ $indigo-chip: extend(
             ),
         ),
 
-        disabled-background: (
+        disabled-selected-text-color: (
             contrast-color: (
+                'primary',
+                900,
+                0.4,
+            ),
+        ),
+
+        disabled-selected-background: (
+            color: (
+                'primary',
+                400,
+                0.5,
+            ),
+        ),
+
+        disabled-outlined-background: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+
+        disabled-outlined-text-color: (
+            color: (
                 'gray',
                 900,
+                0.2,
             ),
         ),
 
@@ -679,6 +1014,97 @@ $indigo-chip: extend(
             ),
         ),
 
+        disabled-selected-outlined-background: transparent,
+
+        disabled-selected-outlined-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        disabled-selected-border-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        outlined-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        outlined-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        selected-outlined-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        hover-outlined-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        hover-outlined-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        hover-selected-outlined-background: (
+            color: (
+                'primary',
+                400,
+                0.3,
+            ),
+        ),
+
+        hover-selected-outlined-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        focus-outlined-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        focus-outlined-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        focus-selected-outlined-background: (
+            transparent,
+        ),
+
+        focus-selected-outlined-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
         _meta: (
             theme: 'indigo',
         ),