From cff45ee082ffb9bfa10136dfef9960fbcadfd403 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Fri, 29 Jan 2021 12:46:49 +0100 Subject: [PATCH] Separate theme related Sass variables from other settings --- src/docs/_components/Placeholder/Placeholder.scss | 2 +- src/lib/components/layout/FormLayout/FormLayout.scss | 2 +- src/lib/components/ui/Alert/Alert.scss | 2 +- src/lib/components/ui/Alert/_settings.scss | 2 +- src/lib/components/ui/Badge/Badge.scss | 6 +++--- src/lib/components/ui/Button/_settings.scss | 2 +- src/lib/components/ui/CheckboxField/CheckboxField.scss | 2 +- src/lib/components/ui/Modal/Modal.scss | 2 +- src/lib/components/ui/Modal/_settings.scss | 4 ++-- src/lib/components/ui/Table/_settings.scss | 6 +++--- src/lib/components/ui/Toggle/Toggle.scss | 2 +- src/lib/styles/elements/_code.scss | 2 +- src/lib/styles/elements/_links.scss | 2 +- src/lib/styles/elements/_lists.scss | 2 +- src/lib/styles/elements/_page.scss | 4 ++-- src/lib/styles/elements/_rulers.scss | 4 ++-- src/lib/styles/elements/_small.scss | 2 +- src/lib/styles/settings/_forms.deprecated.scss | 2 +- src/lib/styles/settings/_forms.scss | 2 +- src/lib/styles/settings/_utilities.scss | 6 +++--- src/lib/styles/{settings => theme}/_borders.scss | 0 src/lib/styles/{settings => theme}/_colors.scss | 0 .../{settings/_forms-theme.scss => theme/_forms.scss} | 2 +- src/lib/styles/{settings => theme}/_links.scss | 0 src/lib/styles/{settings => theme}/_lists.scss | 0 src/lib/styles/{settings => theme}/_page.scss | 0 src/lib/styles/{settings => theme}/_spacing.scss | 0 src/lib/styles/{settings => theme}/_typography.scss | 0 src/lib/styles/tools/_forms.deprecated.scss | 2 +- src/lib/styles/tools/_spacing.scss | 2 +- src/lib/styles/tools/forms/_foundation.scss | 2 +- src/lib/styles/tools/forms/_layouts.scss | 2 +- src/lib/styles/tools/forms/_sizes.scss | 2 +- src/lib/styles/tools/forms/_variants.scss | 2 +- 34 files changed, 36 insertions(+), 36 deletions(-) rename src/lib/styles/{settings => theme}/_borders.scss (100%) rename src/lib/styles/{settings => theme}/_colors.scss (100%) rename src/lib/styles/{settings/_forms-theme.scss => theme/_forms.scss} (96%) rename src/lib/styles/{settings => theme}/_links.scss (100%) rename src/lib/styles/{settings => theme}/_lists.scss (100%) rename src/lib/styles/{settings => theme}/_page.scss (100%) rename src/lib/styles/{settings => theme}/_spacing.scss (100%) rename src/lib/styles/{settings => theme}/_typography.scss (100%) diff --git a/src/docs/_components/Placeholder/Placeholder.scss b/src/docs/_components/Placeholder/Placeholder.scss index a2b1057fa..b68467cdd 100644 --- a/src/docs/_components/Placeholder/Placeholder.scss +++ b/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 { diff --git a/src/lib/components/layout/FormLayout/FormLayout.scss b/src/lib/components/layout/FormLayout/FormLayout.scss index 5a897734d..026106a87 100644 --- a/src/lib/components/layout/FormLayout/FormLayout.scss +++ b/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 { diff --git a/src/lib/components/ui/Alert/Alert.scss b/src/lib/components/ui/Alert/Alert.scss index c1c90751d..6b450db55 100644 --- a/src/lib/components/ui/Alert/Alert.scss +++ b/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'; diff --git a/src/lib/components/ui/Alert/_settings.scss b/src/lib/components/ui/Alert/_settings.scss index 1a5266ea1..3aefdbf58 100644 --- a/src/lib/components/ui/Alert/_settings.scss +++ b/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); diff --git a/src/lib/components/ui/Badge/Badge.scss b/src/lib/components/ui/Badge/Badge.scss index c495104a0..c039a00e6 100644 --- a/src/lib/components/ui/Badge/Badge.scss +++ b/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; diff --git a/src/lib/components/ui/Button/_settings.scss b/src/lib/components/ui/Button/_settings.scss index 728818e81..855c71092 100644 --- a/src/lib/components/ui/Button/_settings.scss +++ b/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; diff --git a/src/lib/components/ui/CheckboxField/CheckboxField.scss b/src/lib/components/ui/CheckboxField/CheckboxField.scss index a86e6b151..0e3f24a69 100644 --- a/src/lib/components/ui/CheckboxField/CheckboxField.scss +++ b/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; diff --git a/src/lib/components/ui/Modal/Modal.scss b/src/lib/components/ui/Modal/Modal.scss index 571cf73be..c85a06a65 100644 --- a/src/lib/components/ui/Modal/Modal.scss +++ b/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'; diff --git a/src/lib/components/ui/Modal/_settings.scss b/src/lib/components/ui/Modal/_settings.scss index cb88c0a9f..e38135448 100644 --- a/src/lib/components/ui/Modal/_settings.scss +++ b/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); diff --git a/src/lib/components/ui/Table/_settings.scss b/src/lib/components/ui/Table/_settings.scss index f4e8e51ca..eb5b881f1 100644 --- a/src/lib/components/ui/Table/_settings.scss +++ b/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); diff --git a/src/lib/components/ui/Toggle/Toggle.scss b/src/lib/components/ui/Toggle/Toggle.scss index 20d74602e..c7f915ec1 100644 --- a/src/lib/components/ui/Toggle/Toggle.scss +++ b/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; diff --git a/src/lib/styles/elements/_code.scss b/src/lib/styles/elements/_code.scss index 7c2d9a3b3..750715fb6 100644 --- a/src/lib/styles/elements/_code.scss +++ b/src/lib/styles/elements/_code.scss @@ -1,4 +1,4 @@ -@use '../settings/colors'; +@use '../theme/colors'; code { padding: 0.15em 0.5em; diff --git a/src/lib/styles/elements/_links.scss b/src/lib/styles/elements/_links.scss index a9ca2c7c9..2671d7e1a 100644 --- a/src/lib/styles/elements/_links.scss +++ b/src/lib/styles/elements/_links.scss @@ -1,4 +1,4 @@ -@use '../settings/links'; +@use '../theme/links'; a { text-decoration: links.$decoration; diff --git a/src/lib/styles/elements/_lists.scss b/src/lib/styles/elements/_lists.scss index f67844ba3..0da10fbf1 100644 --- a/src/lib/styles/elements/_lists.scss +++ b/src/lib/styles/elements/_lists.scss @@ -1,4 +1,4 @@ -@use '../settings/lists'; +@use '../theme/lists'; ol, ul { diff --git a/src/lib/styles/elements/_page.scss b/src/lib/styles/elements/_page.scss index 63bea51d5..1feb808f2 100644 --- a/src/lib/styles/elements/_page.scss +++ b/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%; diff --git a/src/lib/styles/elements/_rulers.scss b/src/lib/styles/elements/_rulers.scss index cf171799b..f9f78ce02 100644 --- a/src/lib/styles/elements/_rulers.scss +++ b/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; diff --git a/src/lib/styles/elements/_small.scss b/src/lib/styles/elements/_small.scss index ea51a7ba8..20bb42a8b 100644 --- a/src/lib/styles/elements/_small.scss +++ b/src/lib/styles/elements/_small.scss @@ -1,4 +1,4 @@ -@use '../settings/typography'; +@use '../theme/typography'; small { font-size: typography.$size-small; diff --git a/src/lib/styles/settings/_forms.deprecated.scss b/src/lib/styles/settings/_forms.deprecated.scss index f21689a31..4bfa83a9a 100644 --- a/src/lib/styles/settings/_forms.deprecated.scss +++ b/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; diff --git a/src/lib/styles/settings/_forms.scss b/src/lib/styles/settings/_forms.scss index 3a9e9a87d..2dec042cc 100644 --- a/src/lib/styles/settings/_forms.scss +++ b/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); diff --git a/src/lib/styles/settings/_utilities.scss b/src/lib/styles/settings/_utilities.scss index e50b80c60..cfbe43410 100644 --- a/src/lib/styles/settings/_utilities.scss +++ b/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': ( diff --git a/src/lib/styles/settings/_borders.scss b/src/lib/styles/theme/_borders.scss similarity index 100% rename from src/lib/styles/settings/_borders.scss rename to src/lib/styles/theme/_borders.scss diff --git a/src/lib/styles/settings/_colors.scss b/src/lib/styles/theme/_colors.scss similarity index 100% rename from src/lib/styles/settings/_colors.scss rename to src/lib/styles/theme/_colors.scss diff --git a/src/lib/styles/settings/_forms-theme.scss b/src/lib/styles/theme/_forms.scss similarity index 96% rename from src/lib/styles/settings/_forms-theme.scss rename to src/lib/styles/theme/_forms.scss index af570f536..e917fd88b 100644 --- a/src/lib/styles/settings/_forms-theme.scss +++ b/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); diff --git a/src/lib/styles/settings/_links.scss b/src/lib/styles/theme/_links.scss similarity index 100% rename from src/lib/styles/settings/_links.scss rename to src/lib/styles/theme/_links.scss diff --git a/src/lib/styles/settings/_lists.scss b/src/lib/styles/theme/_lists.scss similarity index 100% rename from src/lib/styles/settings/_lists.scss rename to src/lib/styles/theme/_lists.scss diff --git a/src/lib/styles/settings/_page.scss b/src/lib/styles/theme/_page.scss similarity index 100% rename from src/lib/styles/settings/_page.scss rename to src/lib/styles/theme/_page.scss diff --git a/src/lib/styles/settings/_spacing.scss b/src/lib/styles/theme/_spacing.scss similarity index 100% rename from src/lib/styles/settings/_spacing.scss rename to src/lib/styles/theme/_spacing.scss diff --git a/src/lib/styles/settings/_typography.scss b/src/lib/styles/theme/_typography.scss similarity index 100% rename from src/lib/styles/settings/_typography.scss rename to src/lib/styles/theme/_typography.scss diff --git a/src/lib/styles/tools/_forms.deprecated.scss b/src/lib/styles/tools/_forms.deprecated.scss index a2571468d..4a4607b26 100644 --- a/src/lib/styles/tools/_forms.deprecated.scss +++ b/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() { diff --git a/src/lib/styles/tools/_spacing.scss b/src/lib/styles/tools/_spacing.scss index bac22b166..10886e6cd 100644 --- a/src/lib/styles/tools/_spacing.scss +++ b/src/lib/styles/tools/_spacing.scss @@ -1,4 +1,4 @@ -@use '../settings/spacing'; +@use '../theme/spacing'; @function of($value) { @if ($value % 1 != 0) { diff --git a/src/lib/styles/tools/forms/_foundation.scss b/src/lib/styles/tools/forms/_foundation.scss index d0710494b..0d96eea45 100644 --- a/src/lib/styles/tools/forms/_foundation.scss +++ b/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'; diff --git a/src/lib/styles/tools/forms/_layouts.scss b/src/lib/styles/tools/forms/_layouts.scss index fe4e88603..c467befe0 100644 --- a/src/lib/styles/tools/forms/_layouts.scss +++ b/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() { diff --git a/src/lib/styles/tools/forms/_sizes.scss b/src/lib/styles/tools/forms/_sizes.scss index beb1123f1..09f505d2c 100644 --- a/src/lib/styles/tools/forms/_sizes.scss +++ b/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); diff --git a/src/lib/styles/tools/forms/_variants.scss b/src/lib/styles/tools/forms/_variants.scss index 2731df55d..bc21326dd 100644 --- a/src/lib/styles/tools/forms/_variants.scss +++ b/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;