Separate theme related Sass variables from other settings

src/docs/_components/Placeholder/Placeholder.scss

@@ -1,4 +1,4 @@
-@use '../../../lib/styles/settings/colors';
+@use '../../../lib/styles/theme/colors';
 @use '../../../lib/styles/tools/spacing';
 
 .root {

src/lib/components/layout/FormLayout/FormLayout.scss

@@ -13,8 +13,8 @@
 //    (a global default which can be customised per use).
 
 @use '../../../styles/settings/forms' as settings;
-@use '../../../styles/settings/forms-theme' as theme;
 @use '../../../styles/settings/layouts';
+@use '../../../styles/theme/forms' as theme;
 @use '../../../styles/tools/breakpoint';
 
 .root {

src/lib/components/ui/Alert/Alert.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/settings/typography';
+@use '../../../styles/theme/typography';
 @use '../../../styles/tools/reset';
 @use 'settings';
 @use 'theme';

src/lib/components/ui/Alert/_settings.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/settings/typography';
+@use '../../../styles/theme/typography';
 @use 'theme';
 
 $font-size: map-get(typography.$size-values, 0);

src/lib/components/ui/Badge/Badge.scss

@@ -1,6 +1,6 @@
-@use '../../../styles/settings/borders';
-@use '../../../styles/settings/colors';
-@use '../../../styles/settings/typography';
+@use '../../../styles/theme/borders';
+@use '../../../styles/theme/colors';
+@use '../../../styles/theme/typography';
 
 $_badge-size: 1.25rem;
 

src/lib/components/ui/Button/_settings.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/settings/typography';
+@use '../../../styles/theme/typography';
 @use '../../../styles/tools/spacing';
 
 $font-family: typography.$font-family-base;

src/lib/components/ui/CheckboxField/CheckboxField.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/settings/borders';
 @use '../../../styles/settings/forms.deprecated' as deprecated-settings;
+@use '../../../styles/theme/borders';
 @use '../../../styles/tools/accessibility';
 @use '../../../styles/tools/forms/foundation';
 @use '../../../styles/tools/forms.deprecated' as deprecated-tools;

src/lib/components/ui/Modal/Modal.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/settings/typography';
+@use '../../../styles/theme/typography';
 @use '../../../styles/tools/breakpoint';
 @use '../../../styles/tools/reset';
 @use '../../../styles/tools/spacing';

src/lib/components/ui/Modal/_settings.scss

@@ -1,6 +1,6 @@
-@use '../../../styles/settings/borders';
-@use '../../../styles/settings/typography';
 @use '../../../styles/settings/z-indexes';
+@use '../../../styles/theme/borders';
+@use '../../../styles/theme/typography';
 @use '../../../styles/tools/spacing';
 
 $padding-x: spacing.of(5);

src/lib/components/ui/Table/_settings.scss

@@ -1,6 +1,6 @@
-@use '../../../styles/settings/borders';
-@use '../../../styles/settings/colors';
-@use '../../../styles/settings/typography';
+@use '../../../styles/theme/borders';
+@use '../../../styles/theme/colors';
+@use '../../../styles/theme/typography';
 @use '../../../styles/tools/spacing';
 
 $cell-padding-x: spacing.of(3);

src/lib/components/ui/Toggle/Toggle.scss

@@ -1,6 +1,6 @@
-@use '../../../styles/settings/borders';
 @use '../../../styles/settings/colors.deprecated' as deprecated-colors;
 @use '../../../styles/settings/forms.deprecated' as deprecated-settings;
+@use '../../../styles/theme/borders';
 @use '../../../styles/tools/accessibility';
 @use '../../../styles/tools/forms/foundation';
 @use '../../../styles/tools/forms.deprecated' as deprecated-tools;

src/lib/styles/elements/_code.scss

@@ -1,4 +1,4 @@
-@use '../settings/colors';
+@use '../theme/colors';
 
 code {
   padding: 0.15em 0.5em;

src/lib/styles/elements/_links.scss

@@ -1,4 +1,4 @@
-@use '../settings/links';
+@use '../theme/links';
 
 a {
   text-decoration: links.$decoration;

src/lib/styles/elements/_lists.scss

@@ -1,4 +1,4 @@
-@use '../settings/lists';
+@use '../theme/lists';
 
 ol,
 ul {

src/lib/styles/elements/_page.scss

@@ -1,5 +1,5 @@
-@use '../settings/page';
-@use '../settings/typography';
+@use '../theme/page';
+@use '../theme/typography';
 
 html {
   width: 100%;

src/lib/styles/elements/_rulers.scss

@@ -1,5 +1,5 @@
-@use '../settings/borders';
-@use '../settings/colors';
+@use '../theme/borders';
+@use '../theme/colors';
 
 hr {
   border: 0;

src/lib/styles/elements/_small.scss

@@ -1,4 +1,4 @@
-@use '../settings/typography';
+@use '../theme/typography';
 
 small {
   font-size: typography.$size-small;

src/lib/styles/settings/_forms.deprecated.scss

@@ -1,6 +1,6 @@
 // ⚠️ Deprecated for new components.
 
-@use 'colors';
+@use '../theme/colors';
 @use 'colors.deprecated' as deprecated-colors;
 
 $form-focus-outline-color: deprecated-colors.$blue-lighter;

src/lib/styles/settings/_forms.scss

@@ -1,8 +1,8 @@
 // 1. Input `line-height` is specified in `rem` so inputs do not break when their font size gets
 //    changed later.
 
+@use '../theme/typography';
 @use '../tools/spacing';
-@use 'typography';
 
 $field-font-family: typography.$font-family-base;
 $field-font-weight: map-get(typography.$font-weight-values, regular);

src/lib/styles/settings/_utilities.scss

@@ -1,6 +1,6 @@
-@use 'colors';
-@use 'spacing';
-@use 'typography';
+@use '../theme/colors';
+@use '../theme/spacing';
+@use '../theme/typography';
 
 $map: (
   'display': (

src/lib/styles/settings/_forms-theme.scss → src/lib/styles/theme/_forms.scss

@@ -1,5 +1,5 @@
 // Variant specific theme options are obtained dynamically because there is way too many of them to
-// maintain manually. See `tools/forms/_variants.scss` for details.
+// maintain manually. See `settings/_forms.scss` and `tools/forms/_variants.scss` for details.
 
 $field-input-width: var(--rui-form-field-input-width);
 $field-input-min-width: var(--rui-form-field-input-min-width);

src/lib/styles/tools/_forms.deprecated.scss

@@ -1,9 +1,9 @@
 // ⚠️ Deprecated for new components.
 
-@use '../settings/borders';
 @use '../settings/colors.deprecated' as deprecated-colors;
 @use '../settings/forms' as settings;
 @use '../settings/forms.deprecated' as deprecated-settings;
+@use '../theme/borders';
 @use 'breakpoint';
 
 @mixin disabled-state() {

src/lib/styles/tools/_spacing.scss

@@ -1,4 +1,4 @@
-@use '../settings/spacing';
+@use '../theme/spacing';
 
 @function of($value) {
   @if ($value % 1 != 0) {

src/lib/styles/tools/forms/_foundation.scss

@@ -8,7 +8,7 @@
 // 6. Don't let text alignment be affected by a parent.
 
 @use '../../settings/forms' as settings;
-@use '../../settings/forms-theme' as theme;
+@use '../../theme/forms' as theme;
 @use '../../tools/caret';
 @use '../spacing';
 @use '../transition';

src/lib/styles/tools/forms/_layouts.scss

@@ -32,7 +32,7 @@
 //    for more.
 
 @use '../../settings/forms' as settings;
-@use '../../settings/forms-theme' as theme;
+@use '../../theme/forms' as theme;
 @use '../breakpoint';
 
 @mixin field-layout-vertical() {

src/lib/styles/tools/forms/_sizes.scss

@@ -1,4 +1,4 @@
-@use '../../settings/forms-theme' as theme;
+@use '../../theme/forms' as theme;
 
 @mixin field-size($size, $is-multiline: false) {
   $size-properties: map-get(theme.$field-sizes, $size);

src/lib/styles/tools/forms/_variants.scss

@@ -9,8 +9,8 @@
 // 3. `.input:focus` is added just in case `:focus-within` doesn't work.
 
 @use 'sass:list';
-@use '../../settings/forms-theme' as theme;
 @use '../../settings/forms' as settings;
+@use '../../theme/forms' as theme;
 
 @mixin _disabled-state() {
   opacity: theme.$field-disabled-opacity;