diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index 76534caf9..d0eba8210 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -1,4 +1,8 @@
-@import 'classic_components.css';
+@import url('default/typography.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/shadows.css');
+@import url('default/groups.css');
 
 :root,
 :host,
@@ -203,123 +207,21 @@
   --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --wa-font-family-longform: Georgia, 'Times New Roman', serif;
 
-  /* The default type scale is roughly based on the Major Second scale (x1.125),
-   * with each value rounded to the nearest whole pixel based on a 16px root font size.
-   * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
-   * A multiplier is provided to uniformly increase or decrease all font sizes. */
-  --wa-font-size-scale: 1;
-  --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
-  --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
-  --wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
-  --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
-  --wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
-  --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
-  --wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
-  --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
-  --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */
-
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 600;
-
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-heading: var(--wa-font-weight-semibold);
-  --wa-font-weight-action: var(--wa-font-weight-semibold);
-
-  --wa-line-height-condensed: 1.2;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
-
   --wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
-  --wa-link-decoration-hover: underline;
-
-  /**
-   * Spacing
-   */
-
-  /* A multiplier is provided to uniformly increase or decrease all spacing. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
-
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* A multiplier is provided to uniformly increase or decrease all border widths. */
-  --wa-border-width-scale: 0.0625;
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  /* A multiplier is provided to uniformly increase or decrease all border radii. */
-  --wa-border-radius-scale: 0.25;
-  --wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.5rem);
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0px;
 
   /**
    * Focus
    */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
     color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
 
   /**
    * Shadows
    * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
    * A multiplier is provided for each shadow quality to uniformly scale all related values.
    */
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 4rem);
-
   --wa-shadow-offset-y-scale: 0.0625;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 4rem);
-
-  --wa-shadow-blur-scale: 0.125;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.5rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 2rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 4rem);
-
   --wa-shadow-spread-scale: 0;
-  --wa-shadow-spread-xs: calc(var(--wa-shadow-spread-scale) * 0.5rem);
-  --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 1rem);
-  --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 2rem);
-  --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 4rem);
-
-  --wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-shadow-spread-xs) var(--wa-color-shadow);
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
-    var(--wa-shadow-spread-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
-    var(--wa-shadow-spread-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
-    var(--wa-shadow-spread-l) var(--wa-color-shadow);
 
   /**
    * Transitions
@@ -335,48 +237,19 @@
    */
 
   /* Form controls */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-  --wa-form-control-border-radius: var(--wa-border-radius-s);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
   --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
   --wa-form-control-label-line-height: var(--wa-line-height-normal);
 
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
-
   --wa-form-control-height-s: 1.875rem;
   --wa-form-control-height-m: 2.5rem;
   --wa-form-control-height-l: 3.125rem;
 
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
   /* Panels */
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
   --wa-panel-border-radius: var(--wa-border-radius-s);
 
   /* Tooltips */
-  --wa-tooltip-arrow-size: 0.375rem;
-
   --wa-tooltip-background-color: var(--wa-color-text-normal);
-
-  --wa-tooltip-border-radius: var(--wa-border-radius-s);
-
   --wa-tooltip-content-color: var(--wa-color-surface-default);
-  --wa-tooltip-font-size: var(--wa-font-size-s);
-  --wa-tooltip-line-height: var(--wa-line-height-normal);
 }
 
 .wa-theme-classic-dark,
@@ -462,3 +335,143 @@
   --wa-color-neutral-on-normal: var(--wa-color-gray-70);
   --wa-color-neutral-on-loud: var(--wa-color-gray-05);
 }
+
+/**
+ * Component style overrides
+ */
+wa-avatar {
+  --background-color: var(--wa-color-neutral-fill-loud);
+  --content-color: var(--wa-color-neutral-on-loud);
+}
+
+wa-button,
+wa-radio-button {
+  &[size='small'] {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  &[size='medium'] {
+    font-size: var(--wa-font-size-s);
+  }
+
+  &[size='large'] {
+    font-size: var(--wa-font-size-m);
+  }
+}
+
+wa-radio-button {
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
+  --background-color-hover: var(--wa-form-control-activated-color);
+  --border-color: var(--wa-form-control-resting-color);
+  --border-color-active: var(--background-color-active);
+  --border-color-hover: var(--background-color-hover);
+  --label-color-active: var(--label-color-hover);
+  --label-color-hover: var(--wa-color-brand-on-loud);
+  --indicator-color: var(--wa-background-color);
+
+  &[checked] {
+    --background-color: var(--wa-form-control-activated-color);
+    --border-color: var(--background-color);
+    --label-color: var(--wa-color-brand-on-loud);
+  }
+}
+
+wa-breadcrumb {
+  font-size: var(--wa-font-size-s);
+}
+
+/* #region Callouts */
+wa-callout {
+  --background-color: var(--wa-color-surface-raised);
+  --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
+  --content-color: var(--wa-color-text-normal);
+  --spacing: var(--wa-space-l);
+
+  font-size: var(--wa-font-size-s);
+
+  &[variant='brand'] {
+    --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-brand-fill-loud);
+  }
+
+  &[variant='success'] {
+    --border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-success-fill-loud);
+  }
+
+  &[variant='neutral'] {
+    --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-neutral-fill-loud);
+  }
+
+  &[variant='warning'] {
+    --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-warning-fill-loud);
+  }
+
+  &[variant='danger'] {
+    --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-danger-fill-loud);
+  }
+}
+
+wa-card {
+  --background-color: var(--wa-color-surface-raised);
+}
+
+wa-carousel {
+  --box-shadow: var(--wa-shadow-xs);
+  --pagination-color-active: var(--wa-color-neutral-fill-loud);
+}
+
+wa-dialog,
+wa-drawer {
+  --spacing: var(--wa-space-l);
+}
+
+wa-input:not([filled]),
+wa-select:not([filled]),
+wa-textarea:not([filled]) {
+  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
+    color-mix(in oklab, var(--wa-color-focus), transparent 50%);
+  --wa-focus-ring-offset: 0;
+}
+
+wa-radio {
+  --background-color-checked: var(--border-color-checked);
+  --checked-icon-color: var(--wa-color-surface-default);
+  --checked-icon-scale: 0.4;
+}
+
+wa-range {
+  --thumb-gap: 0;
+}
+
+wa-switch {
+  --background-color: var(--wa-color-gray-50);
+  --border-color: var(--background-color);
+  --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
+  --thumb-color: var(--wa-color-surface-default);
+  --thumb-size: calc(var(--height) + 4px);
+  --width: calc(var(--height) * 2);
+
+  &::part(thumb) {
+    border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
+  }
+  &[checked]::part(thumb) {
+    border-color: var(--background-color-checked);
+  }
+}
+
+wa-progress-bar {
+  --height: 1rem;
+}
+
+wa-tab {
+  font-size: var(--wa-font-size-s);
+}
diff --git a/src/styles/themes/classic_components.css b/src/styles/themes/classic_components.css
deleted file mode 100644
index 18fd9883e..000000000
--- a/src/styles/themes/classic_components.css
+++ /dev/null
@@ -1,154 +0,0 @@
-/* #region Avatars */
-wa-avatar {
-  --background-color: var(--wa-color-neutral-fill-loud);
-  --content-color: var(--wa-color-neutral-on-loud);
-}
-/* #endregion */
-
-/* #region Buttons */
-wa-button,
-wa-radio-button {
-  &[size='small'] {
-    font-size: var(--wa-font-size-xs);
-  }
-
-  &[size='medium'] {
-    font-size: var(--wa-font-size-s);
-  }
-
-  &[size='large'] {
-    font-size: var(--wa-font-size-m);
-  }
-}
-
-wa-radio-button {
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
-  --background-color-hover: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-resting-color);
-  --border-color-active: var(--background-color-active);
-  --border-color-hover: var(--background-color-hover);
-  --label-color-active: var(--label-color-hover);
-  --label-color-hover: var(--wa-color-brand-on-loud);
-  --indicator-color: var(--wa-background-color);
-}
-
-wa-radio-button[checked] {
-  --background-color: var(--wa-form-control-activated-color);
-  --border-color: var(--background-color);
-  --label-color: var(--wa-color-brand-on-loud);
-}
-/* #endregion */
-
-/* #region Breadcrumbs */
-wa-breadcrumb {
-  font-size: var(--wa-font-size-s);
-}
-
-/* #region Callouts */
-wa-callout {
-  --background-color: var(--wa-color-surface-raised);
-  --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-  --content-color: var(--wa-color-text-normal);
-  --spacing: var(--wa-space-l);
-
-  font-size: var(--wa-font-size-s);
-
-  &[variant='brand'] {
-    --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-brand-fill-loud);
-  }
-
-  &[variant='success'] {
-    --border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-success-fill-loud);
-  }
-
-  &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-neutral-fill-loud);
-  }
-
-  &[variant='warning'] {
-    --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-warning-fill-loud);
-  }
-
-  &[variant='danger'] {
-    --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-danger-fill-loud);
-  }
-}
-/* #endregion */
-
-/* #region Cards */
-wa-card {
-  --background-color: var(--wa-color-surface-raised);
-}
-/* #endregion */
-
-/* #region Carousel */
-wa-carousel {
-  --box-shadow: var(--wa-shadow-xs);
-  --pagination-color-active: var(--wa-color-neutral-fill-loud);
-}
-/* #endregion */
-
-/* #region Modals */
-wa-dialog,
-wa-drawer {
-  --spacing: var(--wa-space-l);
-}
-/* #endregion */
-
-/* #region Inputs */
-wa-input:not([filled]),
-wa-select:not([filled]),
-wa-textarea:not([filled]) {
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-    color-mix(in oklab, var(--wa-color-focus), transparent 50%);
-  --wa-focus-ring-offset: 0;
-}
-
-wa-radio {
-  --background-color-checked: var(--border-color-checked);
-  --checked-icon-color: var(--wa-color-surface-default);
-  --checked-icon-scale: 0.4;
-}
-
-wa-range {
-  --thumb-gap: 0;
-}
-
-wa-switch {
-  --background-color: var(--wa-color-gray-50);
-  --border-color: var(--background-color);
-  --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
-  --thumb-color: var(--wa-color-surface-default);
-  --thumb-size: calc(var(--height) + 4px);
-  --width: calc(var(--height) * 2);
-
-  &::part(thumb) {
-    border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
-  }
-  &[checked]::part(thumb) {
-    border-color: var(--background-color-checked);
-  }
-}
-/* #endregion */
-
-/* #region Progress Indicators */
-wa-progress-bar {
-  --height: 1rem;
-}
-/* #endregion */
-
-/* #region Tabs */
-wa-tab {
-  font-size: var(--wa-font-size-s);
-}
-/* #endregion */