From a01148d8e94f1cbd033ee92eafc59aea657061a8 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Sat, 9 Mar 2024 00:00:36 +0100 Subject: [PATCH] fixup! Leverage CSS cascade layers to fix and user-proof styles order --- package-lock.json | 54 +-- package.json | 2 +- src/components/Alert/Alert.module.scss | 180 ++++----- src/components/Badge/Badge.module.scss | 200 +++++----- src/components/Button/_base.scss | 232 +++++------ src/components/Button/_priorities.scss | 268 ++++++------- .../ButtonGroup/ButtonGroup.module.scss | 46 +-- src/components/Card/Card.module.scss | 130 +++--- .../CheckboxField/CheckboxField.module.scss | 110 +++--- .../FileInputField/FileInputField.module.scss | 90 ++--- .../FormLayout/FormLayout.module.scss | 58 +-- .../FormLayoutCustomField.module.scss | 92 ++--- src/components/Grid/Grid.module.scss | 65 +-- .../InputGroup/InputGroup.module.scss | 152 +++---- src/components/Modal/Modal.module.scss | 114 +++--- src/components/Modal/ModalBody.module.scss | 30 +- .../Modal/ModalCloseButton.module.scss | 18 +- src/components/Modal/ModalContent.module.scss | 6 +- src/components/Modal/ModalFooter.module.scss | 54 +-- src/components/Modal/ModalHeader.module.scss | 46 +-- src/components/Modal/ModalTitle.module.scss | 12 +- src/components/Paper/Paper.module.scss | 26 +- src/components/Popover/Popover.module.scss | 374 +++++++++--------- .../Popover/PopoverWrapper.module.scss | 6 +- src/components/Radio/Radio.module.scss | 140 +++---- .../ScrollView/ScrollView.module.scss | 328 +++++++-------- .../SelectField/SelectField.module.scss | 204 +++++----- src/components/Table/Table.module.scss | 36 +- src/components/Tabs/Tabs.module.scss | 40 +- src/components/Tabs/TabsItem.module.scss | 184 ++++----- src/components/Text/Text.module.scss | 56 +-- src/components/TextArea/TextArea.module.scss | 176 +++++---- .../TextField/TextField.module.scss | 200 +++++----- src/components/TextLink/TextLink.module.scss | 22 +- src/components/Toggle/Toggle.module.scss | 110 +++--- src/components/Toolbar/Toolbar.module.scss | 156 ++++---- 36 files changed, 2048 insertions(+), 1969 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e9e5e24..f018a1d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,8 @@ "packages": { "": { "name": "@react-ui-org/react-ui", - "version": "0.52.0", + "version": "0.54.0", + "hasInstallScript": true, "license": "MIT", "dependencies": { "normalize.css": "^8.0.1" @@ -30,7 +31,7 @@ "babel-jest": "^29.6.4", "babel-loader": "^9.1.3", "core-js": "^3.32.1", - "css-loader": "^6.8.1", + "css-loader": "^6.9.1", "eslint": "^8.48.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.28.1", @@ -5319,19 +5320,19 @@ } }, "node_modules/css-loader": { - "version": "6.8.1", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", - "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.10.0.tgz", + "integrity": "sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==", "dev": true, "dependencies": { "icss-utils": "^5.1.0", - "postcss": "^8.4.21", + "postcss": "^8.4.33", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.3", - "postcss-modules-scope": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.4", + "postcss-modules-scope": "^3.1.1", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", - "semver": "^7.3.8" + "semver": "^7.5.4" }, "engines": { "node": ">= 12.13.0" @@ -5341,7 +5342,16 @@ "url": "https://opencollective.com/webpack" }, "peerDependencies": { + "@rspack/core": "0.x || 1.x", "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } } }, "node_modules/css-loader/node_modules/lru-cache": { @@ -10814,9 +10824,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", - "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "dev": true, "funding": [ { @@ -11404,9 +11414,9 @@ } }, "node_modules/postcss": { - "version": "8.4.29", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz", - "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==", + "version": "8.4.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", + "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", "dev": true, "funding": [ { @@ -11423,7 +11433,7 @@ } ], "dependencies": { - "nanoid": "^3.3.6", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -11505,9 +11515,9 @@ } }, "node_modules/postcss-modules-local-by-default": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz", - "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz", + "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==", "dev": true, "dependencies": { "icss-utils": "^5.0.0", @@ -11522,9 +11532,9 @@ } }, "node_modules/postcss-modules-scope": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", - "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz", + "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.4" diff --git a/package.json b/package.json index 6ccb038d..7e3d7ada 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "babel-jest": "^29.6.4", "babel-loader": "^9.1.3", "core-js": "^3.32.1", - "css-loader": "^6.8.1", + "css-loader": "^6.9.1", "eslint": "^8.48.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.28.1", diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss index da962be1..285e7476 100644 --- a/src/components/Alert/Alert.module.scss +++ b/src/components/Alert/Alert.module.scss @@ -6,93 +6,95 @@ @use "theme"; @use "tools"; -.root { - position: relative; - display: flex; - align-items: flex-start; - width: 100%; - color: var(--rui-local-color); - border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width; - border-style: solid; - border-color: var(--rui-local-foreground-color); - border-radius: theme.$border-radius; - background-color: var(--rui-local-background-color); -} - -.icon, -.message { - padding: theme.$padding; -} - -.close, -.icon { - height: settings.$min-height; - color: var(--rui-local-foreground-color); -} - -.icon { - display: flex; - flex: none; - align-items: center; - justify-content: center; - padding-right: 0; -} - -.message { - flex-grow: 1; - font-weight: theme.$font-weight; - font-size: settings.$font-size; - line-height: settings.$line-height; -} - -.message a, -.message strong { - font-weight: theme.$emphasis-font-weight; - color: var(--rui-local-foreground-color); -} - -.close { - @include reset.button(); - @include accessibility.min-tap-target(); - - padding: theme.$padding; - font-size: map.get(typography.$font-size-values, 4); - line-height: 1; -} - -.closeSign { - position: relative; - top: -0.1em; -} - -.isRootColorSuccess { - @include tools.color(success); -} - -.isRootColorWarning { - @include tools.color(warning); -} - -.isRootColorDanger { - @include tools.color(danger); -} - -.isRootColorHelp { - @include tools.color(help); -} - -.isRootColorInfo { - @include tools.color(info); -} - -.isRootColorNote { - @include tools.color(note); -} - -.isRootColorLight { - @include tools.color(light); -} - -.isRootColorDark { - @include tools.color(dark); +@layer components.alert { + .root { + position: relative; + display: flex; + align-items: flex-start; + width: 100%; + color: var(--rui-local-color); + border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width; + border-style: solid; + border-color: var(--rui-local-foreground-color); + border-radius: theme.$border-radius; + background-color: var(--rui-local-background-color); + } + + .icon, + .message { + padding: theme.$padding; + } + + .close, + .icon { + height: settings.$min-height; + color: var(--rui-local-foreground-color); + } + + .icon { + display: flex; + flex: none; + align-items: center; + justify-content: center; + padding-right: 0; + } + + .message { + flex-grow: 1; + font-weight: theme.$font-weight; + font-size: settings.$font-size; + line-height: settings.$line-height; + } + + .message a, + .message strong { + font-weight: theme.$emphasis-font-weight; + color: var(--rui-local-foreground-color); + } + + .close { + @include reset.button(); + @include accessibility.min-tap-target(); + + padding: theme.$padding; + font-size: map.get(typography.$font-size-values, 4); + line-height: 1; + } + + .closeSign { + position: relative; + top: -0.1em; + } + + .isRootColorSuccess { + @include tools.color(success); + } + + .isRootColorWarning { + @include tools.color(warning); + } + + .isRootColorDanger { + @include tools.color(danger); + } + + .isRootColorHelp { + @include tools.color(help); + } + + .isRootColorInfo { + @include tools.color(info); + } + + .isRootColorNote { + @include tools.color(note); + } + + .isRootColorLight { + @include tools.color(light); + } + + .isRootColorDark { + @include tools.color(dark); + } } diff --git a/src/components/Badge/Badge.module.scss b/src/components/Badge/Badge.module.scss index f5520ebf..a78c7022 100644 --- a/src/components/Badge/Badge.module.scss +++ b/src/components/Badge/Badge.module.scss @@ -5,103 +5,105 @@ $_badge-size: 1.25rem; -.root { - display: inline-block; - min-width: $_badge-size; - height: $_badge-size; - padding: 0.25rem 0.35rem; - overflow: hidden; - font-weight: map.get(typography.$font-weight-values, bold); - font-size: typography.$font-size-smaller; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - color: var(--rui-local-color); - border-radius: math.div($_badge-size, 2); - background-color: var(--rui-local-background-color); - box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)}); -} - -.isRootColorSuccess { - --rui-local-color: var(--rui-color-feedback-on-success); - --rui-local-background-color: var(--rui-color-feedback-success); -} - -.isRootColorWarning { - --rui-local-color: var(--rui-color-feedback-on-warning); - --rui-local-background-color: var(--rui-color-feedback-warning); -} - -.isRootColorDanger { - --rui-local-color: var(--rui-color-feedback-on-danger); - --rui-local-background-color: var(--rui-color-feedback-danger); -} - -.isRootColorHelp { - --rui-local-color: var(--rui-color-feedback-on-help); - --rui-local-background-color: var(--rui-color-feedback-help); -} - -.isRootColorInfo { - --rui-local-color: var(--rui-color-feedback-on-info); - --rui-local-background-color: var(--rui-color-feedback-info); -} - -.isRootColorNote { - --rui-local-color: var(--rui-color-feedback-on-note); - --rui-local-background-color: var(--rui-color-feedback-note); -} - -.isRootColorLight { - --rui-local-color: var(--rui-color-neutral-on-light); - --rui-local-background-color: var(--rui-color-neutral-light); - --rui-local-box-shadow: none; -} - -.isRootColorDark { - --rui-local-color: var(--rui-color-neutral-on-dark); - --rui-local-background-color: var(--rui-color-neutral-dark); - --rui-local-box-shadow: none; -} - -.isRootPriorityOutline { - --rui-local-background-color: transparent; - --rui-local-box-shadow: none; - - padding-top: 0.1875rem; - padding-bottom: 0.1875rem; - border: borders.$width solid currentcolor; -} - -.isRootPriorityOutline.isRootColorSuccess { - --rui-local-color: var(--rui-color-feedback-success); -} - -.isRootPriorityOutline.isRootColorWarning { - --rui-local-color: var(--rui-color-feedback-warning); -} - -.isRootPriorityOutline.isRootColorDanger { - --rui-local-color: var(--rui-color-feedback-danger); -} - -.isRootPriorityOutline.isRootColorHelp { - --rui-local-color: var(--rui-color-feedback-help); -} - -.isRootPriorityOutline.isRootColorInfo { - --rui-local-color: var(--rui-color-feedback-info); -} - -.isRootPriorityOutline.isRootColorNote { - --rui-local-color: var(--rui-color-feedback-note); -} - -.isRootPriorityOutline.isRootColorLight { - --rui-local-color: var(--rui-color-neutral-light); -} - -.isRootPriorityOutline.isRootColorDark { - --rui-local-color: var(--rui-color-neutral-dark); +@layer components.badge { + .root { + display: inline-block; + min-width: $_badge-size; + height: $_badge-size; + padding: 0.25rem 0.35rem; + overflow: hidden; + font-weight: map.get(typography.$font-weight-values, bold); + font-size: typography.$font-size-smaller; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + color: var(--rui-local-color); + border-radius: math.div($_badge-size, 2); + background-color: var(--rui-local-background-color); + box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)}); + } + + .isRootColorSuccess { + --rui-local-color: var(--rui-color-feedback-on-success); + --rui-local-background-color: var(--rui-color-feedback-success); + } + + .isRootColorWarning { + --rui-local-color: var(--rui-color-feedback-on-warning); + --rui-local-background-color: var(--rui-color-feedback-warning); + } + + .isRootColorDanger { + --rui-local-color: var(--rui-color-feedback-on-danger); + --rui-local-background-color: var(--rui-color-feedback-danger); + } + + .isRootColorHelp { + --rui-local-color: var(--rui-color-feedback-on-help); + --rui-local-background-color: var(--rui-color-feedback-help); + } + + .isRootColorInfo { + --rui-local-color: var(--rui-color-feedback-on-info); + --rui-local-background-color: var(--rui-color-feedback-info); + } + + .isRootColorNote { + --rui-local-color: var(--rui-color-feedback-on-note); + --rui-local-background-color: var(--rui-color-feedback-note); + } + + .isRootColorLight { + --rui-local-color: var(--rui-color-neutral-on-light); + --rui-local-background-color: var(--rui-color-neutral-light); + --rui-local-box-shadow: none; + } + + .isRootColorDark { + --rui-local-color: var(--rui-color-neutral-on-dark); + --rui-local-background-color: var(--rui-color-neutral-dark); + --rui-local-box-shadow: none; + } + + .isRootPriorityOutline { + --rui-local-background-color: transparent; + --rui-local-box-shadow: none; + + padding-top: 0.1875rem; + padding-bottom: 0.1875rem; + border: borders.$width solid currentcolor; + } + + .isRootPriorityOutline.isRootColorSuccess { + --rui-local-color: var(--rui-color-feedback-success); + } + + .isRootPriorityOutline.isRootColorWarning { + --rui-local-color: var(--rui-color-feedback-warning); + } + + .isRootPriorityOutline.isRootColorDanger { + --rui-local-color: var(--rui-color-feedback-danger); + } + + .isRootPriorityOutline.isRootColorHelp { + --rui-local-color: var(--rui-color-feedback-help); + } + + .isRootPriorityOutline.isRootColorInfo { + --rui-local-color: var(--rui-color-feedback-info); + } + + .isRootPriorityOutline.isRootColorNote { + --rui-local-color: var(--rui-color-feedback-note); + } + + .isRootPriorityOutline.isRootColorLight { + --rui-local-color: var(--rui-color-neutral-light); + } + + .isRootPriorityOutline.isRootColorDark { + --rui-local-color: var(--rui-color-neutral-dark); + } } diff --git a/src/components/Button/_base.scss b/src/components/Button/_base.scss index 7f725df9..de235821 100644 --- a/src/components/Button/_base.scss +++ b/src/components/Button/_base.scss @@ -7,151 +7,153 @@ @use "theme"; @use "tools"; -.root { - @include tools.button(); -} +@layer components.button { + .root { + @include tools.button(); + } -.label { - display: block; -} + .label { + display: block; + } -.beforeLabel, -.afterLabel, -.startCorner, -.endCorner, -.feedbackIcon { - display: flex; - align-items: baseline; - justify-content: center; -} + .beforeLabel, + .afterLabel, + .startCorner, + .endCorner, + .feedbackIcon { + display: flex; + align-items: baseline; + justify-content: center; + } -.startCorner, -.endCorner { - position: absolute; - top: -0.35rem; - z-index: 2; -} + .startCorner, + .endCorner { + position: absolute; + top: -0.35rem; + z-index: 2; + } -.startCorner { - left: 0; - margin-left: -0.35rem; -} + .startCorner { + left: 0; + margin-left: -0.35rem; + } -.endCorner { - right: 0; - margin-right: -0.35rem; -} + .endCorner { + right: 0; + margin-right: -0.35rem; + } -.feedbackIcon { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - align-items: center; -} + .feedbackIcon { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + align-items: center; + } -.isRootSizeSmall { - @include tools.button-size(small); -} + .isRootSizeSmall { + @include tools.button-size(small); + } -.isRootSizeMedium { - @include tools.button-size(medium); -} + .isRootSizeMedium { + @include tools.button-size(medium); + } -.isRootSizeLarge { - @include tools.button-size(large); -} + .isRootSizeLarge { + @include tools.button-size(large); + } -.isRootBlock { - width: 100%; -} + .isRootBlock { + width: 100%; + } -.hasRootFeedback:disabled { - opacity: theme.$feedback-opacity; - cursor: theme.$feedback-cursor; -} + .hasRootFeedback:disabled { + opacity: theme.$feedback-opacity; + cursor: theme.$feedback-cursor; + } -.hasRootFeedback .label, -.hasRootFeedback .beforeLabel, -.hasRootFeedback .afterLabel { - color: transparent; -} + .hasRootFeedback .label, + .hasRootFeedback .beforeLabel, + .hasRootFeedback .afterLabel { + color: transparent; + } -.isRootInButtonGroup, -.isRootInInputGroup { - z-index: map.get(settings.$group-z-indexes, button); + .isRootInButtonGroup, + .isRootInInputGroup { + z-index: map.get(settings.$group-z-indexes, button); - &:not(:first-child) { - border-start-start-radius: var(--rui-local-inner-border-radius); - border-end-start-radius: var(--rui-local-inner-border-radius); - } + &:not(:first-child) { + border-start-start-radius: var(--rui-local-inner-border-radius); + border-end-start-radius: var(--rui-local-inner-border-radius); + } - &:not(:last-child) { - border-start-end-radius: var(--rui-local-inner-border-radius); - border-end-end-radius: var(--rui-local-inner-border-radius); + &:not(:last-child) { + border-start-end-radius: var(--rui-local-inner-border-radius); + border-end-end-radius: var(--rui-local-inner-border-radius); + } } -} -.isRootInButtonGroup:not(:first-child) { - margin-inline-start: var(--rui-local-gap); // 1. -} + .isRootInButtonGroup:not(:first-child) { + margin-inline-start: var(--rui-local-gap); // 1. + } -.isRootInButtonGroup:focus, -.isRootInButtonGroup:not(:disabled):hover { - z-index: map.get(settings.$group-z-indexes, button-hover); -} + .isRootInButtonGroup:focus, + .isRootInButtonGroup:not(:disabled):hover { + z-index: map.get(settings.$group-z-indexes, button-hover); + } -.isRootInButtonGroup .startCorner, -.isRootInInputGroup .startCorner, -.isRootInButtonGroup .endCorner, -.isRootInInputGroup .endCorner { - z-index: map.get(settings.$group-z-indexes, button-overflowing-elements); -} + .isRootInButtonGroup .startCorner, + .isRootInInputGroup .startCorner, + .isRootInButtonGroup .endCorner, + .isRootInInputGroup .endCorner { + z-index: map.get(settings.$group-z-indexes, button-overflowing-elements); + } -.hasLabelHidden, -.hasLabelVisibleSm, -.hasLabelVisibleMd, -.hasLabelVisibleLg, -.hasLabelVisibleXl, -.hasLabelVisibleX2l, -.hasLabelVisibleX3l { - @include tools.hide-label(); -} + .hasLabelHidden, + .hasLabelVisibleSm, + .hasLabelVisibleMd, + .hasLabelVisibleLg, + .hasLabelVisibleXl, + .hasLabelVisibleX2l, + .hasLabelVisibleX3l { + @include tools.hide-label(); + } -.hasLabelVisibleSm { - @include breakpoint.up(sm) { - @include tools.show-label(); + .hasLabelVisibleSm { + @include breakpoint.up(sm) { + @include tools.show-label(); + } } -} -.hasLabelVisibleMd { - @include breakpoint.up(md) { - @include tools.show-label(); + .hasLabelVisibleMd { + @include breakpoint.up(md) { + @include tools.show-label(); + } } -} -.hasLabelVisibleLg { - @include breakpoint.up(lg) { - @include tools.show-label(); + .hasLabelVisibleLg { + @include breakpoint.up(lg) { + @include tools.show-label(); + } } -} -.hasLabelVisibleXl { - @include breakpoint.up(xl) { - @include tools.show-label(); + .hasLabelVisibleXl { + @include breakpoint.up(xl) { + @include tools.show-label(); + } } -} -.hasLabelVisibleX2l { - @include breakpoint.up(x2l) { - @include tools.show-label(); + .hasLabelVisibleX2l { + @include breakpoint.up(x2l) { + @include tools.show-label(); + } } -} -.hasLabelVisibleX3l { - @include breakpoint.up(x3l) { - @include tools.show-label(); + .hasLabelVisibleX3l { + @include breakpoint.up(x3l) { + @include tools.show-label(); + } } } diff --git a/src/components/Button/_priorities.scss b/src/components/Button/_priorities.scss index 08ec823c..eb94ce6a 100644 --- a/src/components/Button/_priorities.scss +++ b/src/components/Button/_priorities.scss @@ -3,145 +3,147 @@ @use "theme"; @use "tools"; -.isRootPriorityFilled.isRootColorPrimary { - @include tools.button-color(filled, primary); -} - -.isRootPriorityFilled.isRootColorSecondary { - @include tools.button-color(filled, secondary); -} - -.isRootPriorityFilled.isRootColorSelected { - @include tools.button-color(filled, selected); -} - -.isRootPriorityFilled.isRootColorSuccess { - @include tools.button-color(filled, success); -} - -.isRootPriorityFilled.isRootColorWarning { - @include tools.button-color(filled, warning); -} - -.isRootPriorityFilled.isRootColorDanger { - @include tools.button-color(filled, danger); -} - -.isRootPriorityFilled.isRootColorHelp { - @include tools.button-color(filled, help); -} - -.isRootPriorityFilled.isRootColorInfo { - @include tools.button-color(filled, info); -} - -.isRootPriorityFilled.isRootColorNote { - @include tools.button-color(filled, note); -} - -.isRootPriorityFilled.isRootColorLight { - @include tools.button-color(filled, light); -} - -.isRootPriorityFilled.isRootColorDark { - @include tools.button-color(filled, dark); -} - -.isRootPriorityOutline.isRootColorPrimary { - @include tools.button-color(outline, primary); -} - -.isRootPriorityOutline.isRootColorSecondary { - @include tools.button-color(outline, secondary); -} - -.isRootPriorityOutline.isRootColorSelected { - @include tools.button-color(outline, selected); -} - -.isRootPriorityOutline.isRootColorSuccess { - @include tools.button-color(outline, success); -} +@layer components.button { + .isRootPriorityFilled.isRootColorPrimary { + @include tools.button-color(filled, primary); + } -.isRootPriorityOutline.isRootColorWarning { - @include tools.button-color(outline, warning); -} - -.isRootPriorityOutline.isRootColorDanger { - @include tools.button-color(outline, danger); -} + .isRootPriorityFilled.isRootColorSecondary { + @include tools.button-color(filled, secondary); + } -.isRootPriorityOutline.isRootColorHelp { - @include tools.button-color(outline, help); -} + .isRootPriorityFilled.isRootColorSelected { + @include tools.button-color(filled, selected); + } -.isRootPriorityOutline.isRootColorInfo { - @include tools.button-color(outline, info); -} + .isRootPriorityFilled.isRootColorSuccess { + @include tools.button-color(filled, success); + } -.isRootPriorityOutline.isRootColorNote { - @include tools.button-color(outline, note); -} + .isRootPriorityFilled.isRootColorWarning { + @include tools.button-color(filled, warning); + } -.isRootPriorityOutline.isRootColorLight { - @include tools.button-color(outline, light); -} + .isRootPriorityFilled.isRootColorDanger { + @include tools.button-color(filled, danger); + } -.isRootPriorityOutline.isRootColorDark { - @include tools.button-color(outline, dark); -} + .isRootPriorityFilled.isRootColorHelp { + @include tools.button-color(filled, help); + } -.isRootPriorityFlat.isRootColorPrimary { - @include tools.button-color(flat, primary); -} - -.isRootPriorityFlat.isRootColorSecondary { - @include tools.button-color(flat, secondary); -} - -.isRootPriorityFlat.isRootColorSelected { - @include tools.button-color(flat, selected); -} - -.isRootPriorityFlat.isRootColorSuccess { - @include tools.button-color(flat, success); -} - -.isRootPriorityFlat.isRootColorWarning { - @include tools.button-color(flat, warning); -} - -.isRootPriorityFlat.isRootColorDanger { - @include tools.button-color(flat, danger); -} - -.isRootPriorityFlat.isRootColorHelp { - @include tools.button-color(flat, help); -} - -.isRootPriorityFlat.isRootColorInfo { - @include tools.button-color(flat, info); -} - -.isRootPriorityFlat.isRootColorNote { - @include tools.button-color(flat, note); -} - -.isRootPriorityFlat.isRootColorLight { - @include tools.button-color(flat, light); -} - -.isRootPriorityFlat.isRootColorDark { - @include tools.button-color(flat, dark); -} + .isRootPriorityFilled.isRootColorInfo { + @include tools.button-color(filled, info); + } -.isRootInButtonGroup:not(:first-child)::before { - content: ""; - position: absolute; - top: calc(-1 * #{theme.$border-width}); - bottom: calc(-1 * #{theme.$border-width}); - left: calc(-1 * #{theme.$border-width}); - z-index: map.get(settings.$group-z-indexes, separator); - border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color); - transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%)); + .isRootPriorityFilled.isRootColorNote { + @include tools.button-color(filled, note); + } + + .isRootPriorityFilled.isRootColorLight { + @include tools.button-color(filled, light); + } + + .isRootPriorityFilled.isRootColorDark { + @include tools.button-color(filled, dark); + } + + .isRootPriorityOutline.isRootColorPrimary { + @include tools.button-color(outline, primary); + } + + .isRootPriorityOutline.isRootColorSecondary { + @include tools.button-color(outline, secondary); + } + + .isRootPriorityOutline.isRootColorSelected { + @include tools.button-color(outline, selected); + } + + .isRootPriorityOutline.isRootColorSuccess { + @include tools.button-color(outline, success); + } + + .isRootPriorityOutline.isRootColorWarning { + @include tools.button-color(outline, warning); + } + + .isRootPriorityOutline.isRootColorDanger { + @include tools.button-color(outline, danger); + } + + .isRootPriorityOutline.isRootColorHelp { + @include tools.button-color(outline, help); + } + + .isRootPriorityOutline.isRootColorInfo { + @include tools.button-color(outline, info); + } + + .isRootPriorityOutline.isRootColorNote { + @include tools.button-color(outline, note); + } + + .isRootPriorityOutline.isRootColorLight { + @include tools.button-color(outline, light); + } + + .isRootPriorityOutline.isRootColorDark { + @include tools.button-color(outline, dark); + } + + .isRootPriorityFlat.isRootColorPrimary { + @include tools.button-color(flat, primary); + } + + .isRootPriorityFlat.isRootColorSecondary { + @include tools.button-color(flat, secondary); + } + + .isRootPriorityFlat.isRootColorSelected { + @include tools.button-color(flat, selected); + } + + .isRootPriorityFlat.isRootColorSuccess { + @include tools.button-color(flat, success); + } + + .isRootPriorityFlat.isRootColorWarning { + @include tools.button-color(flat, warning); + } + + .isRootPriorityFlat.isRootColorDanger { + @include tools.button-color(flat, danger); + } + + .isRootPriorityFlat.isRootColorHelp { + @include tools.button-color(flat, help); + } + + .isRootPriorityFlat.isRootColorInfo { + @include tools.button-color(flat, info); + } + + .isRootPriorityFlat.isRootColorNote { + @include tools.button-color(flat, note); + } + + .isRootPriorityFlat.isRootColorLight { + @include tools.button-color(flat, light); + } + + .isRootPriorityFlat.isRootColorDark { + @include tools.button-color(flat, dark); + } + + .isRootInButtonGroup:not(:first-child)::before { + content: ""; + position: absolute; + top: calc(-1 * #{theme.$border-width}); + bottom: calc(-1 * #{theme.$border-width}); + left: calc(-1 * #{theme.$border-width}); + z-index: map.get(settings.$group-z-indexes, separator); + border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color); + transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%)); + } } diff --git a/src/components/ButtonGroup/ButtonGroup.module.scss b/src/components/ButtonGroup/ButtonGroup.module.scss index c07129aa..8f8d304c 100644 --- a/src/components/ButtonGroup/ButtonGroup.module.scss +++ b/src/components/ButtonGroup/ButtonGroup.module.scss @@ -3,31 +3,33 @@ @use "theme"; -.root { - --rui-local-inner-border-radius: #{theme.$inner-border-radius}; +@layer components.button-group { + .root { + --rui-local-inner-border-radius: #{theme.$inner-border-radius}; - display: inline-flex; // 1. -} + display: inline-flex; // 1. + } -.isRootPriorityFilled { - --rui-local-gap: #{theme.$filled-gap}; - --rui-local-separator-width: #{theme.$filled-separator-width}; - --rui-local-separator-color: #{theme.$filled-separator-color}; -} + .isRootPriorityFilled { + --rui-local-gap: #{theme.$filled-gap}; + --rui-local-separator-width: #{theme.$filled-separator-width}; + --rui-local-separator-color: #{theme.$filled-separator-color}; + } -.isRootPriorityOutline { - --rui-local-gap: #{theme.$outline-gap}; - --rui-local-separator-width: #{theme.$outline-separator-width}; - --rui-local-separator-color: #{theme.$outline-separator-color}; -} + .isRootPriorityOutline { + --rui-local-gap: #{theme.$outline-gap}; + --rui-local-separator-width: #{theme.$outline-separator-width}; + --rui-local-separator-color: #{theme.$outline-separator-color}; + } -.isRootPriorityFlat { - --rui-local-gap: #{theme.$flat-gap}; - --rui-local-separator-width: #{theme.$flat-separator-width}; - --rui-local-separator-color: #{theme.$flat-separator-color}; -} + .isRootPriorityFlat { + --rui-local-gap: #{theme.$flat-gap}; + --rui-local-separator-width: #{theme.$flat-separator-width}; + --rui-local-separator-color: #{theme.$flat-separator-color}; + } -.isRootBlock { - display: flex; - width: 100%; + .isRootBlock { + display: flex; + width: 100%; + } } diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index 2aeae20a..046c9be3 100644 --- a/src/components/Card/Card.module.scss +++ b/src/components/Card/Card.module.scss @@ -3,68 +3,70 @@ @use "theme"; @use "tools"; -.root { - --rui-local-padding: #{theme.$padding}; - - display: flex; - flex-direction: column; - min-width: 0; // 1. - color: var(--rui-local-color); - border: theme.$border-width solid var(--rui-local-border-color); - border-radius: theme.$border-radius; - background-color: var(--rui-local-background-color); -} - -.body { - flex: 1 0 auto; - padding: var(--rui-local-padding); -} - -.footer { - padding: var(--rui-local-padding); -} - -.isRootDense { - --rui-local-padding: #{theme.$dense-padding}; -} - -.isRootRaised { - box-shadow: theme.$raised-box-shadow; -} - -.isRootColorSuccess { - @include tools.color(success); -} - -.isRootColorWarning { - @include tools.color(warning); -} - -.isRootColorDanger { - @include tools.color(danger); -} - -.isRootColorHelp { - @include tools.color(help); -} - -.isRootColorInfo { - @include tools.color(info); -} - -.isRootColorNote { - @include tools.color(note); -} - -.isRootColorLight { - @include tools.color(light); -} - -.isRootColorDark { - @include tools.color(dark); -} - -.isRootDisabled { - background-color: theme.$disabled-background-color; - opacity: theme.$disabled-opacity; +@layer components.card { + .root { + --rui-local-padding: #{theme.$padding}; + + display: flex; + flex-direction: column; + min-width: 0; // 1. + color: var(--rui-local-color); + border: theme.$border-width solid var(--rui-local-border-color); + border-radius: theme.$border-radius; + background-color: var(--rui-local-background-color); + } + + .body { + flex: 1 0 auto; + padding: var(--rui-local-padding); + } + + .footer { + padding: var(--rui-local-padding); + } + + .isRootDense { + --rui-local-padding: #{theme.$dense-padding}; + } + + .isRootRaised { + box-shadow: theme.$raised-box-shadow; + } + + .isRootColorSuccess { + @include tools.color(success); + } + + .isRootColorWarning { + @include tools.color(warning); + } + + .isRootColorDanger { + @include tools.color(danger); + } + + .isRootColorHelp { + @include tools.color(help); + } + + .isRootColorInfo { + @include tools.color(info); + } + + .isRootColorNote { + @include tools.color(note); + } + + .isRootColorLight { + @include tools.color(light); + } + + .isRootColorDark { + @include tools.color(dark); + } + + .isRootDisabled { + background-color: theme.$disabled-background-color; + opacity: theme.$disabled-opacity; + } } diff --git a/src/components/CheckboxField/CheckboxField.module.scss b/src/components/CheckboxField/CheckboxField.module.scss index b9eb8afb..d8625888 100644 --- a/src/components/CheckboxField/CheckboxField.module.scss +++ b/src/components/CheckboxField/CheckboxField.module.scss @@ -4,58 +4,60 @@ @use "../../styles/tools/form-fields/variants"; @use "../../styles/tools/accessibility"; -// Foundation -.root { - @include foundation.root(); - @include inline-field-layout.root(); - @include inline-field-elements.min-tap-target($type: checkbox); - @include variants.visual(check); -} - -.label { - @include foundation.label(); -} - -.field { - @include inline-field-layout.field($type: checkbox); -} - -.input { - @include inline-field-elements.check-input($type: checkbox); -} - -.helpText, -.validationText { - @include foundation.help-text(); -} - -.isRootRequired .label { - @include foundation.label-required(); -} - -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} - -.isRootStateValid { - @include variants.validation(valid); -} - -.isRootStateWarning { - @include variants.validation(warning); -} - -// Invisible label -.isLabelHidden { - @include accessibility.hide-text(); -} - -// Layouts -.hasRootLabelBefore { - @include inline-field-layout.has-label-before(); -} - -.isRootInFormLayout { - @include inline-field-layout.in-form-layout(); +@layer components.checkbox-field { + // Foundation + .root { + @include foundation.root(); + @include inline-field-layout.root(); + @include inline-field-elements.min-tap-target($type: checkbox); + @include variants.visual(check); + } + + .label { + @include foundation.label(); + } + + .field { + @include inline-field-layout.field($type: checkbox); + } + + .input { + @include inline-field-elements.check-input($type: checkbox); + } + + .helpText, + .validationText { + @include foundation.help-text(); + } + + .isRootRequired .label { + @include foundation.label-required(); + } + + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } + + .isRootStateValid { + @include variants.validation(valid); + } + + .isRootStateWarning { + @include variants.validation(warning); + } + + // Invisible label + .isLabelHidden { + @include accessibility.hide-text(); + } + + // Layouts + .hasRootLabelBefore { + @include inline-field-layout.has-label-before(); + } + + .isRootInFormLayout { + @include inline-field-layout.in-form-layout(); + } } diff --git a/src/components/FileInputField/FileInputField.module.scss b/src/components/FileInputField/FileInputField.module.scss index 58391aae..fe1da776 100644 --- a/src/components/FileInputField/FileInputField.module.scss +++ b/src/components/FileInputField/FileInputField.module.scss @@ -4,60 +4,62 @@ @use "../../styles/tools/form-fields/variants"; @use "../../styles/tools/accessibility"; -// Foundation -.root { - @include foundation.root(); -} +@layer components.file-input-field { + // Foundation + .root { + @include foundation.root(); + } -.label { - @include foundation.label(); -} + .label { + @include foundation.label(); + } -.inputContainer { - @include box-field-elements.input-container(); -} + .inputContainer { + @include box-field-elements.input-container(); + } -.helpText, -.validationText { - @include foundation.help-text(); -} + .helpText, + .validationText { + @include foundation.help-text(); + } -.isRootRequired .label { - @include foundation.label-required(); -} + .isRootRequired .label { + @include foundation.label-required(); + } -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } -.isRootStateValid { - @include variants.validation(valid); -} + .isRootStateValid { + @include variants.validation(valid); + } -.isRootStateWarning { - @include variants.validation(warning); -} + .isRootStateWarning { + @include variants.validation(warning); + } -// Invisible label -.isLabelHidden { - @include accessibility.hide-text(); -} + // Invisible label + .isLabelHidden { + @include accessibility.hide-text(); + } -// Layouts -.isRootLayoutVertical, -.isRootLayoutHorizontal { - @include box-field-layout.vertical(); -} + // Layouts + .isRootLayoutVertical, + .isRootLayoutHorizontal { + @include box-field-layout.vertical(); + } -.isRootLayoutHorizontal { - @include box-field-layout.horizontal(); -} + .isRootLayoutHorizontal { + @include box-field-layout.horizontal(); + } -.isRootFullWidth { - @include box-field-layout.full-width(); -} + .isRootFullWidth { + @include box-field-layout.full-width(); + } -.isRootInFormLayout { - @include box-field-layout.in-form-layout(); + .isRootInFormLayout { + @include box-field-layout.in-form-layout(); + } } diff --git a/src/components/FormLayout/FormLayout.module.scss b/src/components/FormLayout/FormLayout.module.scss index 98277ef3..4e13aa17 100644 --- a/src/components/FormLayout/FormLayout.module.scss +++ b/src/components/FormLayout/FormLayout.module.scss @@ -18,41 +18,43 @@ @use "../../styles/tools/spacing"; @use "theme"; -.root { - --rui-local-field-width: 1fr; +@layer components.form-layout { + .root { + --rui-local-field-width: 1fr; - @include spacing.bottom(layouts); -} + @include spacing.bottom(layouts); + } -.isRootFieldLayoutVertical, -.isRootFieldLayoutHorizontal { - display: grid; - grid-template-columns: var(--rui-local-field-width); - grid-row-gap: theme.$row-gap; -} + .isRootFieldLayoutVertical, + .isRootFieldLayoutHorizontal { + display: grid; + grid-template-columns: var(--rui-local-field-width); + grid-row-gap: theme.$row-gap; + } -.isRootFieldLayoutHorizontal { - @include breakpoint.up(forms.$horizontal-breakpoint) { - grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1. + .isRootFieldLayoutHorizontal { + @include breakpoint.up(forms.$horizontal-breakpoint) { + grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1. + } } -} -.hasRootLabelWidthDefault { - --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2. -} + .hasRootLabelWidthDefault { + --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2. + } -.hasRootLabelWidthAuto { - --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4. -} + .hasRootLabelWidthAuto { + --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4. + } -.hasRootLabelWidthLimited { - --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4. -} + .hasRootLabelWidthLimited { + --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4. + } -.hasRootLabelWidthCustom { - --rui-local-label-width: var(--rui-custom-label-width); // 3. -} + .hasRootLabelWidthCustom { + --rui-local-label-width: var(--rui-custom-label-width); // 3. + } -.isRootAutoWidth { - --rui-local-field-width: min-content; + .isRootAutoWidth { + --rui-local-field-width: min-content; + } } diff --git a/src/components/FormLayout/FormLayoutCustomField.module.scss b/src/components/FormLayout/FormLayoutCustomField.module.scss index f4bec812..e41383e5 100644 --- a/src/components/FormLayout/FormLayoutCustomField.module.scss +++ b/src/components/FormLayout/FormLayoutCustomField.module.scss @@ -3,61 +3,63 @@ @use "../../styles/tools/form-fields/box-field-sizes"; @use "../../styles/tools/form-fields/variants"; -// Foundation -.root { - @include box-field-layout.in-form-layout(); - @include variants.visual(custom); -} +@layer components.form-layout { + // Foundation + .root { + @include box-field-layout.in-form-layout(); + @include variants.visual(custom); + } -.label { - @include foundation.label(); -} + .label { + @include foundation.label(); + } -.isRootRequired .label { - @include foundation.label-required(); -} + .isRootRequired .label { + @include foundation.label-required(); + } -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } -.isRootStateValid { - @include variants.validation(valid); -} + .isRootStateValid { + @include variants.validation(valid); + } -.isRootStateWarning { - @include variants.validation(warning); -} + .isRootStateWarning { + @include variants.validation(warning); + } -// Layouts -.isRootLayoutVertical, -.isRootLayoutHorizontal { - @include box-field-layout.vertical(); -} + // Layouts + .isRootLayoutVertical, + .isRootLayoutHorizontal { + @include box-field-layout.vertical(); + } -.isRootLayoutHorizontal { - @include box-field-layout.horizontal(); -} + .isRootLayoutHorizontal { + @include box-field-layout.horizontal(); + } -.isRootLayoutVertical .field, -.isRootLayoutHorizontal .field { - width: auto; -} + .isRootLayoutVertical .field, + .isRootLayoutHorizontal .field { + width: auto; + } -.isRootFullWidth .field { - justify-self: stretch; -} + .isRootFullWidth .field { + justify-self: stretch; + } -// Sizes -.isRootSizeSmall { - @include box-field-sizes.size(small); -} + // Sizes + .isRootSizeSmall { + @include box-field-sizes.size(small); + } -.isRootSizeMedium { - @include box-field-sizes.size(medium); -} + .isRootSizeMedium { + @include box-field-sizes.size(medium); + } -.isRootSizeLarge { - @include box-field-sizes.size(large); + .isRootSizeLarge { + @include box-field-sizes.size(large); + } } diff --git a/src/components/Grid/Grid.module.scss b/src/components/Grid/Grid.module.scss index f954ab0a..76e314ed 100644 --- a/src/components/Grid/Grid.module.scss +++ b/src/components/Grid/Grid.module.scss @@ -25,39 +25,42 @@ @use "settings"; @use "tools"; -.root { - @include tools.assign-responsive-custom-properties(settings.$grid-responsive-properties); // 1. - @include spacing.bottom(layouts); - - display: grid; - grid-template-columns: var(--rui-local-columns); // 2. - grid-template-rows: var(--rui-local-rows); // 2. - grid-auto-flow: var(--rui-local-auto-flow); // 2. - grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2. - align-content: var(--rui-local-align-content); // 2. - align-items: var(--rui-local-align-items); // 2. - justify-content: var(--rui-local-justify-content); // 2. - justify-items: var(--rui-local-justify-items); // 2. -} +@layer components.grid { + .root { + @include tools.assign-responsive-custom-properties(settings.$grid-responsive-properties); // 1. + @include spacing.bottom(layouts); -// stylelint-disable-next-line selector-max-universal -- Reset any previously added margins. -.root > * { - margin-block: 0; -} + display: grid; + grid-template-columns: var(--rui-local-columns); // 2. + grid-template-rows: var(--rui-local-rows); // 2. + grid-auto-flow: var(--rui-local-auto-flow); // 2. + grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2. + align-content: var(--rui-local-align-content); // 2. + align-items: var(--rui-local-align-items); // 2. + justify-content: var(--rui-local-justify-content); // 2. + justify-items: var(--rui-local-justify-items); // 2. + } -.span { - @include tools.assign-responsive-custom-properties(settings.$grid-span-responsive-properties); // 1. + // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins. + .root > * { + margin-block: 0; + } - grid-column: span var(--rui-local-column-span); // 2. - grid-row: span var(--rui-local-row-span); // 2. -} + .span { + @include tools.assign-responsive-custom-properties(settings.$grid-span-responsive-properties); // 1. + + grid-column: span var(--rui-local-column-span); // 2. + grid-row: span var(--rui-local-row-span); // 2. + } + + // stylelint-disable selector-no-qualifying-type + dl.root, + ol.root, + ul.root { + padding-left: 0; + margin-left: 0; + list-style: none; + } -// stylelint-disable selector-no-qualifying-type -dl.root, -ol.root, -ul.root { - padding-left: 0; - margin-left: 0; - list-style: none; + // stylelint-enable selector-no-qualifying-type } -// stylelint-enable selector-no-qualifying-type diff --git a/src/components/InputGroup/InputGroup.module.scss b/src/components/InputGroup/InputGroup.module.scss index a0ff0107..0c6d80e1 100644 --- a/src/components/InputGroup/InputGroup.module.scss +++ b/src/components/InputGroup/InputGroup.module.scss @@ -13,79 +13,81 @@ @use "../../styles/tools/reset"; @use "theme"; -.root { - @include foundation.root(); - @include foundation.fieldset(); -} - -// 4. -.legend { - @include accessibility.hide-text(); -} - -// 4. -.label { - @include foundation.label(); -} - -.inputGroup { - --rui-local-inner-border-radius: #{theme.$inner-border-radius}; - - display: flex; // 2. - gap: theme.$gap; -} - -// 1. -.validationText { - @include reset.list(); - @include foundation.help-text(); -} - -.isRootRequired .label { - @include foundation.label-required(); -} - -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} - -.isRootStateValid { - @include variants.validation(valid); -} - -.isRootStateWarning { - @include variants.validation(warning); -} - -// Layouts -.isRootLayoutVertical, -.isRootLayoutHorizontal { - @include box-field-layout.vertical(); -} - -.isRootLayoutVertical .field, -.isRootLayoutHorizontal .field { - max-width: none; // 3. -} - -.isRootLayoutHorizontal { - @include box-field-layout.horizontal(); -} - -.isRootInFormLayout { - @include box-field-layout.in-form-layout($is-fieldset: true); -} - -// Sizes -.isRootSizeSmall { - @include box-field-sizes.size(small, $has-input: false); -} - -.isRootSizeMedium { - @include box-field-sizes.size(medium, $has-input: false); -} - -.isRootSizeLarge { - @include box-field-sizes.size(large, $has-input: false); +@layer components.input-group { + .root { + @include foundation.root(); + @include foundation.fieldset(); + } + + // 4. + .legend { + @include accessibility.hide-text(); + } + + // 4. + .label { + @include foundation.label(); + } + + .inputGroup { + --rui-local-inner-border-radius: #{theme.$inner-border-radius}; + + display: flex; // 2. + gap: theme.$gap; + } + + // 1. + .validationText { + @include reset.list(); + @include foundation.help-text(); + } + + .isRootRequired .label { + @include foundation.label-required(); + } + + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } + + .isRootStateValid { + @include variants.validation(valid); + } + + .isRootStateWarning { + @include variants.validation(warning); + } + + // Layouts + .isRootLayoutVertical, + .isRootLayoutHorizontal { + @include box-field-layout.vertical(); + } + + .isRootLayoutVertical .field, + .isRootLayoutHorizontal .field { + max-width: none; // 3. + } + + .isRootLayoutHorizontal { + @include box-field-layout.horizontal(); + } + + .isRootInFormLayout { + @include box-field-layout.in-form-layout($is-fieldset: true); + } + + // Sizes + .isRootSizeSmall { + @include box-field-sizes.size(small, $has-input: false); + } + + .isRootSizeMedium { + @include box-field-sizes.size(medium, $has-input: false); + } + + .isRootSizeLarge { + @include box-field-sizes.size(large, $has-input: false); + } } diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss index 1a1f3237..95db9249 100644 --- a/src/components/Modal/Modal.module.scss +++ b/src/components/Modal/Modal.module.scss @@ -7,72 +7,74 @@ @use "settings"; @use "theme"; -.root { - --rui-local-outer-spacing: #{theme.$outer-spacing-xs}; - --rui-local-max-width: calc(100% - (2 * var(--rui-local-outer-spacing))); - --rui-local-max-height: calc(100% - (2 * var(--rui-local-outer-spacing))); +@layer components.modal { + .root { + --rui-local-outer-spacing: #{theme.$outer-spacing-xs}; + --rui-local-max-width: calc(100% - (2 * var(--rui-local-outer-spacing))); + --rui-local-max-height: calc(100% - (2 * var(--rui-local-outer-spacing))); - position: fixed; - left: 50%; - z-index: settings.$z-index; - display: flex; - flex-direction: column; - max-width: var(--rui-local-max-width); - max-height: var(--rui-local-max-height); - overflow-y: auto; - overscroll-behavior: contain; - border-radius: settings.$border-radius; - background: theme.$background; - box-shadow: theme.$box-shadow; - transform: translateX(-50%); + position: fixed; + left: 50%; + z-index: settings.$z-index; + display: flex; + flex-direction: column; + max-width: var(--rui-local-max-width); + max-height: var(--rui-local-max-height); + overflow-y: auto; + overscroll-behavior: contain; + border-radius: settings.$border-radius; + background: theme.$background; + box-shadow: theme.$box-shadow; + transform: translateX(-50%); - @include breakpoint.up(sm) { - --rui-local-outer-spacing: #{theme.$outer-spacing-sm}; + @include breakpoint.up(sm) { + --rui-local-outer-spacing: #{theme.$outer-spacing-sm}; + } } -} -.backdrop { - position: fixed; - top: 0; - left: 0; - z-index: settings.$backdrop-z-index; - width: 100vw; - height: 100vh; - background: theme.$backdrop-background; -} + .backdrop { + position: fixed; + top: 0; + left: 0; + z-index: settings.$backdrop-z-index; + width: 100vw; + height: 100vh; + background: theme.$backdrop-background; + } -.isRootSizeSmall { - width: map.get(theme.$sizes, small, width); -} + .isRootSizeSmall { + width: map.get(theme.$sizes, small, width); + } -.isRootSizeMedium { - width: map.get(theme.$sizes, medium, width); -} + .isRootSizeMedium { + width: map.get(theme.$sizes, medium, width); + } -.isRootSizeLarge { - width: map.get(theme.$sizes, large, width); -} + .isRootSizeLarge { + width: map.get(theme.$sizes, large, width); + } -.isRootSizeFullscreen { - width: map.get(theme.$sizes, fullscreen, width); - height: map.get(theme.$sizes, fullscreen, height); -} + .isRootSizeFullscreen { + width: map.get(theme.$sizes, fullscreen, width); + height: map.get(theme.$sizes, fullscreen, height); + } -.isRootSizeFullscreen .content { - height: 100%; -} + .isRootSizeFullscreen .content { + height: 100%; + } -.isRootSizeAuto { - width: auto; - min-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, min-width)}); - max-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, max-width)}); -} + .isRootSizeAuto { + width: auto; + min-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, min-width)}); + max-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, max-width)}); + } -.isRootPositionCenter { - top: 50%; - transform: translate(-50%, -50%); -} + .isRootPositionCenter { + top: 50%; + transform: translate(-50%, -50%); + } -.isRootPositionTop { - top: var(--rui-local-outer-spacing); + .isRootPositionTop { + top: var(--rui-local-outer-spacing); + } } diff --git a/src/components/Modal/ModalBody.module.scss b/src/components/Modal/ModalBody.module.scss index 6ac5e6e7..06f2340c 100644 --- a/src/components/Modal/ModalBody.module.scss +++ b/src/components/Modal/ModalBody.module.scss @@ -1,18 +1,20 @@ -.root { - flex: 1 1 auto; -} +@layer components.modal { + .root { + flex: 1 1 auto; + } -.isRootScrollingAuto, -.isRootScrollingCustom { - min-height: 0; -} + .isRootScrollingAuto, + .isRootScrollingCustom { + min-height: 0; + } -.isRootScrollingAuto { - overflow-y: auto; - overscroll-behavior: contain; -} + .isRootScrollingAuto { + overflow-y: auto; + overscroll-behavior: contain; + } -.isRootScrollingCustom { - display: flex; - flex-direction: column; + .isRootScrollingCustom { + display: flex; + flex-direction: column; + } } diff --git a/src/components/Modal/ModalCloseButton.module.scss b/src/components/Modal/ModalCloseButton.module.scss index f4733cf6..13b15cc9 100644 --- a/src/components/Modal/ModalCloseButton.module.scss +++ b/src/components/Modal/ModalCloseButton.module.scss @@ -4,15 +4,17 @@ @use "../../styles/tools/reset"; @use "../../styles/tools/spacing"; -.root { - @include reset.button(); - @include accessibility.min-tap-target(); +@layer components.modal { + .root { + @include reset.button(); + @include accessibility.min-tap-target(); - font-size: map.get(typography.$font-size-values, 4); - line-height: 1; - color: inherit; + font-size: map.get(typography.$font-size-values, 4); + line-height: 1; + color: inherit; - &:disabled { - cursor: var(--rui-cursor-not-allowed); + &:disabled { + cursor: var(--rui-cursor-not-allowed); + } } } diff --git a/src/components/Modal/ModalContent.module.scss b/src/components/Modal/ModalContent.module.scss index 144760c5..049f01b0 100644 --- a/src/components/Modal/ModalContent.module.scss +++ b/src/components/Modal/ModalContent.module.scss @@ -1,5 +1,7 @@ @use "theme"; -.root { - padding: theme.$padding-y theme.$padding-x; +@layer components.modal { + .root { + padding: theme.$padding-y theme.$padding-x; + } } diff --git a/src/components/Modal/ModalFooter.module.scss b/src/components/Modal/ModalFooter.module.scss index aa00fd0a..922d2c19 100644 --- a/src/components/Modal/ModalFooter.module.scss +++ b/src/components/Modal/ModalFooter.module.scss @@ -1,35 +1,37 @@ @use "settings"; @use "theme"; -.root { - display: flex; - flex: none; - flex-wrap: wrap; - gap: theme.$footer-gap; - align-items: center; - padding: theme.$padding-y theme.$padding-x; - border-top: theme.$separator-width solid theme.$separator-color; - border-bottom-right-radius: settings.$border-radius; - border-bottom-left-radius: settings.$border-radius; - background: theme.$footer-background; -} +@layer components.modal { + .root { + display: flex; + flex: none; + flex-wrap: wrap; + gap: theme.$footer-gap; + align-items: center; + padding: theme.$padding-y theme.$padding-x; + border-top: theme.$separator-width solid theme.$separator-color; + border-bottom-right-radius: settings.$border-radius; + border-bottom-left-radius: settings.$border-radius; + background: theme.$footer-background; + } -.isRootJustifiedToStart { - justify-content: flex-start; -} + .isRootJustifiedToStart { + justify-content: flex-start; + } -.isRootJustifiedToCenter { - justify-content: center; -} + .isRootJustifiedToCenter { + justify-content: center; + } -.isRootJustifiedToEnd { - justify-content: flex-end; -} + .isRootJustifiedToEnd { + justify-content: flex-end; + } -.isRootJustifiedToSpaceBetween { - justify-content: space-between; -} + .isRootJustifiedToSpaceBetween { + justify-content: space-between; + } -.isRootJustifiedToStretch { - display: block; + .isRootJustifiedToStretch { + display: block; + } } diff --git a/src/components/Modal/ModalHeader.module.scss b/src/components/Modal/ModalHeader.module.scss index e6170848..116d55d5 100644 --- a/src/components/Modal/ModalHeader.module.scss +++ b/src/components/Modal/ModalHeader.module.scss @@ -1,30 +1,32 @@ @use "theme"; -.root { - display: flex; - flex: none; - gap: theme.$header-gap; - align-items: baseline; - padding: theme.$padding-y theme.$padding-x; - border-bottom: theme.$separator-width solid theme.$separator-color; -} +@layer components.modal { + .root { + display: flex; + flex: none; + gap: theme.$header-gap; + align-items: baseline; + padding: theme.$padding-y theme.$padding-x; + border-bottom: theme.$separator-width solid theme.$separator-color; + } -.isRootJustifiedToStart { - justify-content: flex-start; -} + .isRootJustifiedToStart { + justify-content: flex-start; + } -.isRootJustifiedToCenter { - justify-content: center; -} + .isRootJustifiedToCenter { + justify-content: center; + } -.isRootJustifiedToEnd { - justify-content: flex-end; -} + .isRootJustifiedToEnd { + justify-content: flex-end; + } -.isRootJustifiedToSpaceBetween { - justify-content: space-between; -} + .isRootJustifiedToSpaceBetween { + justify-content: space-between; + } -.isRootJustifiedToStretch { - display: block; + .isRootJustifiedToStretch { + display: block; + } } diff --git a/src/components/Modal/ModalTitle.module.scss b/src/components/Modal/ModalTitle.module.scss index 1893c27c..face49d1 100644 --- a/src/components/Modal/ModalTitle.module.scss +++ b/src/components/Modal/ModalTitle.module.scss @@ -1,10 +1,12 @@ @use "settings"; -.root { - margin-block: 0; - font-size: settings.$title-font-size; +@layer components.modal { + .root { + margin-block: 0; + font-size: settings.$title-font-size; - &:not(:last-child) { - margin-bottom: 0; + &:not(:last-child) { + margin-bottom: 0; + } } } diff --git a/src/components/Paper/Paper.module.scss b/src/components/Paper/Paper.module.scss index 736c48cf..550eda82 100644 --- a/src/components/Paper/Paper.module.scss +++ b/src/components/Paper/Paper.module.scss @@ -1,17 +1,19 @@ @use "theme"; -.root { - padding: theme.$padding; - border: theme.$border-width solid theme.$border-color; - border-radius: theme.$border-radius; - background-color: theme.$background-color; -} +@layer components.paper { + .root { + padding: theme.$padding; + border: theme.$border-width solid theme.$border-color; + border-radius: theme.$border-radius; + background-color: theme.$background-color; + } -.isRootMuted { - background-color: theme.$muted-background-color; - opacity: theme.$muted-opacity; -} + .isRootMuted { + background-color: theme.$muted-background-color; + opacity: theme.$muted-opacity; + } -.isRootRaised { - box-shadow: theme.$raised-box-shadow; + .isRootRaised { + box-shadow: theme.$raised-box-shadow; + } } diff --git a/src/components/Popover/Popover.module.scss b/src/components/Popover/Popover.module.scss index f6b5a7f9..b4a746bb 100644 --- a/src/components/Popover/Popover.module.scss +++ b/src/components/Popover/Popover.module.scss @@ -4,233 +4,235 @@ @use "theme"; -.root { - position: absolute; - width: max-content; - max-width: theme.$max-width; - padding: theme.$padding; - text-align: left; - white-space: normal; - word-break: normal; - word-wrap: break-word; - color: theme.$color; - border: theme.$border-width solid theme.$border-color; - border-radius: theme.$border-radius; - background-color: theme.$background-color; - box-shadow: theme.$box-shadow; -} - -.arrow { - position: absolute; - width: theme.$arrow-width; - height: theme.$arrow-height; - transform-origin: center bottom; - - &::before, - &::after { - content: ""; +@layer components.popover { + .root { position: absolute; - display: block; - border-style: solid; - border-color: transparent; + width: max-content; + max-width: theme.$max-width; + padding: theme.$padding; + text-align: left; + white-space: normal; + word-break: normal; + word-wrap: break-word; + color: theme.$color; + border: theme.$border-width solid theme.$border-color; + border-radius: theme.$border-radius; + background-color: theme.$background-color; + box-shadow: theme.$box-shadow; } - &::before { - bottom: 0; - border-width: theme.$arrow-height theme.$arrow-height 0; - border-top-color: theme.$border-color; + .arrow { + position: absolute; + width: theme.$arrow-width; + height: theme.$arrow-height; + transform-origin: center bottom; + + &::before, + &::after { + content: ""; + position: absolute; + display: block; + border-style: solid; + border-color: transparent; + } + + &::before { + bottom: 0; + border-width: theme.$arrow-height theme.$arrow-height 0; + border-top-color: theme.$border-color; + } + + &::after { + bottom: theme.$border-width; + border-width: theme.$arrow-height theme.$arrow-height 0; + border-top-color: theme.$background-color; + } } - &::after { - bottom: theme.$border-width; - border-width: theme.$arrow-height theme.$arrow-height 0; - border-top-color: theme.$background-color; + // Sides + .isRootAtTop { + bottom: 100%; } -} -// Sides -.isRootAtTop { - bottom: 100%; -} - -.isRootAtBottom { - top: 100%; -} + .isRootAtBottom { + top: 100%; + } -.isRootAtLeft { - right: 100%; -} + .isRootAtLeft { + right: 100%; + } -.isRootAtRight { - left: 100%; -} + .isRootAtRight { + left: 100%; + } -// Arrows -.isRootAtTop > .arrow { - top: 100%; -} + // Arrows + .isRootAtTop > .arrow { + top: 100%; + } -.isRootAtBottom > .arrow { - bottom: 100%; -} + .isRootAtBottom > .arrow { + bottom: 100%; + } -.isRootAtLeft > .arrow { - left: 100%; -} + .isRootAtLeft > .arrow { + left: 100%; + } -.isRootAtRight > .arrow { - right: 100%; -} + .isRootAtRight > .arrow { + right: 100%; + } -// Side alignments: top -.isRootAtTop.isRootAtCenter { - left: 50%; - transform: translate(-50%, #{-1 * theme.$arrow-height}); -} + // Side alignments: top + .isRootAtTop.isRootAtCenter { + left: 50%; + transform: translate(-50%, #{-1 * theme.$arrow-height}); + } -.isRootAtTop.isRootAtStart { - left: 0; - transform: translate(0, #{-1 * theme.$arrow-height}); -} + .isRootAtTop.isRootAtStart { + left: 0; + transform: translate(0, #{-1 * theme.$arrow-height}); + } -.isRootAtTop.isRootAtEnd { - right: 0; - transform: translate(0, #{-1 * theme.$arrow-height}); -} + .isRootAtTop.isRootAtEnd { + right: 0; + transform: translate(0, #{-1 * theme.$arrow-height}); + } -.isRootAtTop.isRootAtCenter > .arrow { - left: 50%; - transform: translate(-50%, 0) rotateZ(0); -} + .isRootAtTop.isRootAtCenter > .arrow { + left: 50%; + transform: translate(-50%, 0) rotateZ(0); + } -.isRootAtTop.isRootAtStart > .arrow { - left: theme.$arrow-corner-offset; - transform: translate(0, 0) rotateZ(0); -} + .isRootAtTop.isRootAtStart > .arrow { + left: theme.$arrow-corner-offset; + transform: translate(0, 0) rotateZ(0); + } -.isRootAtTop.isRootAtEnd > .arrow { - right: theme.$arrow-corner-offset; - transform: translate(0, 0) rotateZ(0); -} + .isRootAtTop.isRootAtEnd > .arrow { + right: theme.$arrow-corner-offset; + transform: translate(0, 0) rotateZ(0); + } -// Side alignments: bottom -.isRootAtBottom.isRootAtCenter { - left: 50%; - transform: translate(-50%, #{theme.$arrow-height}); -} + // Side alignments: bottom + .isRootAtBottom.isRootAtCenter { + left: 50%; + transform: translate(-50%, #{theme.$arrow-height}); + } -.isRootAtBottom.isRootAtStart { - left: 0; - transform: translate(0, #{theme.$arrow-height}); -} + .isRootAtBottom.isRootAtStart { + left: 0; + transform: translate(0, #{theme.$arrow-height}); + } -.isRootAtBottom.isRootAtEnd { - right: 0; - transform: translate(0, #{theme.$arrow-height}); -} + .isRootAtBottom.isRootAtEnd { + right: 0; + transform: translate(0, #{theme.$arrow-height}); + } -.isRootAtBottom.isRootAtCenter > .arrow { - left: 50%; - transform: translate(-50%, -100%) rotateZ(180deg); -} + .isRootAtBottom.isRootAtCenter > .arrow { + left: 50%; + transform: translate(-50%, -100%) rotateZ(180deg); + } -.isRootAtBottom.isRootAtStart > .arrow { - left: theme.$arrow-corner-offset; - transform: translate(0, -100%) rotateZ(180deg); -} + .isRootAtBottom.isRootAtStart > .arrow { + left: theme.$arrow-corner-offset; + transform: translate(0, -100%) rotateZ(180deg); + } -.isRootAtBottom.isRootAtEnd > .arrow { - right: theme.$arrow-corner-offset; - transform: translate(0, -100%) rotateZ(180deg); -} + .isRootAtBottom.isRootAtEnd > .arrow { + right: theme.$arrow-corner-offset; + transform: translate(0, -100%) rotateZ(180deg); + } -// Side alignments: left -.isRootAtLeft.isRootAtCenter { - top: 50%; - transform: translate(#{-1 * theme.$arrow-height}, -50%); -} + // Side alignments: left + .isRootAtLeft.isRootAtCenter { + top: 50%; + transform: translate(#{-1 * theme.$arrow-height}, -50%); + } -.isRootAtLeft.isRootAtStart { - top: 0; - transform: translate(#{-1 * theme.$arrow-height}, 0); -} + .isRootAtLeft.isRootAtStart { + top: 0; + transform: translate(#{-1 * theme.$arrow-height}, 0); + } -.isRootAtLeft.isRootAtEnd { - bottom: 0; - transform: translate(#{-1 * theme.$arrow-height}, 0); -} + .isRootAtLeft.isRootAtEnd { + bottom: 0; + transform: translate(#{-1 * theme.$arrow-height}, 0); + } -.isRootAtLeft.isRootAtCenter > .arrow { - top: 50%; - transform: translate(0, -100%) rotateZ(-90deg); -} + .isRootAtLeft.isRootAtCenter > .arrow { + top: 50%; + transform: translate(0, -100%) rotateZ(-90deg); + } -.isRootAtLeft.isRootAtStart > .arrow { - top: theme.$arrow-corner-offset; - transform: translate(0, 0) rotateZ(-90deg); -} + .isRootAtLeft.isRootAtStart > .arrow { + top: theme.$arrow-corner-offset; + transform: translate(0, 0) rotateZ(-90deg); + } -.isRootAtLeft.isRootAtEnd > .arrow { - bottom: theme.$arrow-corner-offset; - transform: translate(0, -100%) rotateZ(-90deg); -} + .isRootAtLeft.isRootAtEnd > .arrow { + bottom: theme.$arrow-corner-offset; + transform: translate(0, -100%) rotateZ(-90deg); + } -// Side alignments: right -.isRootAtRight.isRootAtCenter { - top: 50%; - transform: translate(#{theme.$arrow-height}, -50%); -} + // Side alignments: right + .isRootAtRight.isRootAtCenter { + top: 50%; + transform: translate(#{theme.$arrow-height}, -50%); + } -.isRootAtRight.isRootAtStart { - top: 0; - transform: translate(#{theme.$arrow-height}, 0); -} + .isRootAtRight.isRootAtStart { + top: 0; + transform: translate(#{theme.$arrow-height}, 0); + } -.isRootAtRight.isRootAtEnd { - bottom: 0; - transform: translate(#{theme.$arrow-height}, 0); -} + .isRootAtRight.isRootAtEnd { + bottom: 0; + transform: translate(#{theme.$arrow-height}, 0); + } -.isRootAtRight.isRootAtCenter > .arrow { - top: 50%; - transform: translate(0, -100%) rotateZ(90deg); -} + .isRootAtRight.isRootAtCenter > .arrow { + top: 50%; + transform: translate(0, -100%) rotateZ(90deg); + } -.isRootAtRight.isRootAtStart > .arrow { - top: theme.$arrow-corner-offset; - transform: translate(0, 0) rotateZ(90deg); -} + .isRootAtRight.isRootAtStart > .arrow { + top: theme.$arrow-corner-offset; + transform: translate(0, 0) rotateZ(90deg); + } -.isRootAtRight.isRootAtEnd > .arrow { - bottom: theme.$arrow-corner-offset; - transform: translate(0, -100%) rotateZ(90deg); -} + .isRootAtRight.isRootAtEnd > .arrow { + bottom: theme.$arrow-corner-offset; + transform: translate(0, -100%) rotateZ(90deg); + } -// Controlled placement -.isRootControlled.isRootAtTop, -.isRootControlled.isRootAtBottom, -.isRootControlled.isRootAtLeft, -.isRootControlled.isRootAtRight { - inset: unset; // 1. -} + // Controlled placement + .isRootControlled.isRootAtTop, + .isRootControlled.isRootAtBottom, + .isRootControlled.isRootAtLeft, + .isRootControlled.isRootAtRight { + inset: unset; // 1. + } -.isRootControlled.isRootAtTop { - transform: translate(0, #{-1 * theme.$arrow-height}); // 2. -} + .isRootControlled.isRootAtTop { + transform: translate(0, #{-1 * theme.$arrow-height}); // 2. + } -.isRootControlled.isRootAtBottom { - transform: translate(0, #{theme.$arrow-height}); // 2. -} + .isRootControlled.isRootAtBottom { + transform: translate(0, #{theme.$arrow-height}); // 2. + } -.isRootControlled.isRootAtLeft { - transform: translate(#{-1 * theme.$arrow-height}, 0); // 2. -} + .isRootControlled.isRootAtLeft { + transform: translate(#{-1 * theme.$arrow-height}, 0); // 2. + } -.isRootControlled.isRootAtRight { - transform: translate(#{theme.$arrow-height}, 0); // 2. -} + .isRootControlled.isRootAtRight { + transform: translate(#{theme.$arrow-height}, 0); // 2. + } -.isRootControlled.isRootAtLeft.isRootAtStart, -.isRootControlled.isRootAtRight.isRootAtStart { - top: 0; // 3. + .isRootControlled.isRootAtLeft.isRootAtStart, + .isRootControlled.isRootAtRight.isRootAtStart { + top: 0; // 3. + } } diff --git a/src/components/Popover/PopoverWrapper.module.scss b/src/components/Popover/PopoverWrapper.module.scss index 3010bbfd..6df2ee52 100644 --- a/src/components/Popover/PopoverWrapper.module.scss +++ b/src/components/Popover/PopoverWrapper.module.scss @@ -1,3 +1,5 @@ -.root { - position: relative; +@layer components.popover { + .root { + position: relative; + } } diff --git a/src/components/Radio/Radio.module.scss b/src/components/Radio/Radio.module.scss index b0dae8c8..4d7d0372 100644 --- a/src/components/Radio/Radio.module.scss +++ b/src/components/Radio/Radio.module.scss @@ -11,73 +11,75 @@ @use "../../styles/tools/reset"; @use "../../styles/tools/spacing"; -// Foundation -.root { - @include foundation.root(); - @include foundation.fieldset(); - @include variants.visual(check); -} - -// 1. -.legend { - @include accessibility.hide-text(); -} - -// 1. -.label, -.optionLabel { - @include foundation.label(); -} - -.options { - @include reset.list(); -} - -.option { - @include inline-field-layout.field($type: radio); - @include inline-field-elements.min-tap-target($type: radio); -} - -.input { - @include inline-field-elements.check-input($type: radio); -} - -.helpText, -.validationText { - @include foundation.help-text(); -} - -.isRootRequired .label { - @include foundation.label-required(); -} - -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} - -.isRootStateValid { - @include variants.validation(valid); -} - -.isRootStateWarning { - @include variants.validation(warning); -} - -// Layouts -.isRootLayoutVertical, -.isRootLayoutHorizontal { - @include box-field-layout.vertical($has-list: true); -} - -.isRootLayoutHorizontal { - @include box-field-layout.horizontal($has-min-tap-target: true); -} - -.isRootFullWidth { - @include box-field-layout.full-width(); -} - -.isRootInFormLayout { - @include box-field-layout.in-form-layout($is-fieldset: true); +@layer components.radio { + // Foundation + .root { + @include foundation.root(); + @include foundation.fieldset(); + @include variants.visual(check); + } + + // 1. + .legend { + @include accessibility.hide-text(); + } + + // 1. + .label, + .optionLabel { + @include foundation.label(); + } + + .options { + @include reset.list(); + } + + .option { + @include inline-field-layout.field($type: radio); + @include inline-field-elements.min-tap-target($type: radio); + } + + .input { + @include inline-field-elements.check-input($type: radio); + } + + .helpText, + .validationText { + @include foundation.help-text(); + } + + .isRootRequired .label { + @include foundation.label-required(); + } + + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } + + .isRootStateValid { + @include variants.validation(valid); + } + + .isRootStateWarning { + @include variants.validation(warning); + } + + // Layouts + .isRootLayoutVertical, + .isRootLayoutHorizontal { + @include box-field-layout.vertical($has-list: true); + } + + .isRootLayoutHorizontal { + @include box-field-layout.horizontal($has-min-tap-target: true); + } + + .isRootFullWidth { + @include box-field-layout.full-width(); + } + + .isRootInFormLayout { + @include box-field-layout.in-form-layout($is-fieldset: true); + } } diff --git a/src/components/ScrollView/ScrollView.module.scss b/src/components/ScrollView/ScrollView.module.scss index 21212b6b..d8e92fce 100644 --- a/src/components/ScrollView/ScrollView.module.scss +++ b/src/components/ScrollView/ScrollView.module.scss @@ -34,198 +34,200 @@ $_arrow-inner-spacing: spacing.of(2); $_arrow-outer-spacing: spacing.of(4); -.root { - position: relative; // 2. - display: flex; - flex-direction: column; - width: 100%; -} +@layer components.scroll-view { + .root { + position: relative; // 2. + display: flex; + flex-direction: column; + width: 100%; + } -// 1. -.scrollingShadows { - position: absolute; // 2. - width: 100%; // 2. - height: 100%; // 2. - overflow: hidden; // 2. - pointer-events: none; // 2. + // 1. + .scrollingShadows { + position: absolute; // 2. + width: 100%; // 2. + height: 100%; // 2. + overflow: hidden; // 2. + pointer-events: none; // 2. + + &::before, + &::after { + @include transition.add((visibility, opacity, transform)); + + content: ""; + position: absolute; + z-index: 2; // 2. + display: block; + visibility: hidden; + opacity: 0; + } + + &::before { + background: var(--rui-local-start-shadow-background); + } + + &::after { + background: var(--rui-local-end-shadow-background); + } + } - &::before, - &::after { + .viewport { + z-index: 1; // 2. + width: 100%; + scroll-behavior: smooth; + } + + .arrowPrev, + .arrowNext { + @include reset.button(); + @include accessibility.min-tap-target(); @include transition.add((visibility, opacity, transform)); - content: ""; - position: absolute; - z-index: 2; // 2. - display: block; + position: absolute; // 3. + z-index: 3; // 3. + display: flex; + align-items: center; + justify-content: center; visibility: hidden; opacity: 0; } - &::before { - background: var(--rui-local-start-shadow-background); + .arrowIcon { + @include caret.create(); } - &::after { - background: var(--rui-local-end-shadow-background); + .isRootVertical { + height: 100%; + min-height: 0; // 6. } -} - -.viewport { - z-index: 1; // 2. - width: 100%; - scroll-behavior: smooth; -} - -.arrowPrev, -.arrowNext { - @include reset.button(); - @include accessibility.min-tap-target(); - @include transition.add((visibility, opacity, transform)); - - position: absolute; // 3. - z-index: 3; // 3. - display: flex; - align-items: center; - justify-content: center; - visibility: hidden; - opacity: 0; -} - -.arrowIcon { - @include caret.create(); -} - -.isRootVertical { - height: 100%; - min-height: 0; // 6. -} -.isRootVertical .viewport { - height: 100%; - overflow-x: clip; // 7., 8. - overflow-y: auto; // 2. -} + .isRootVertical .viewport { + height: 100%; + overflow-x: clip; // 7., 8. + overflow-y: auto; // 2. + } -.isRootVertical .arrowPrev { - top: 0; - right: 0; - left: 0; - width: 100%; - padding-top: $_arrow-outer-spacing; - padding-bottom: $_arrow-inner-spacing; - color: var(--rui-local-prev-arrow-color); - transform: translateY(var(--rui-local-prev-arrow-initial-offset)); -} + .isRootVertical .arrowPrev { + top: 0; + right: 0; + left: 0; + width: 100%; + padding-top: $_arrow-outer-spacing; + padding-bottom: $_arrow-inner-spacing; + color: var(--rui-local-prev-arrow-color); + transform: translateY(var(--rui-local-prev-arrow-initial-offset)); + } -.isRootVertical .arrowPrev .arrowIcon { - @include caret.rotate(180); -} + .isRootVertical .arrowPrev .arrowIcon { + @include caret.rotate(180); + } -.isRootVertical .arrowNext { - right: 0; - bottom: 0; - left: 0; - width: 100%; - padding-top: $_arrow-inner-spacing; - padding-bottom: $_arrow-outer-spacing; - color: var(--rui-local-next-arrow-color); - transform: translateY(calc(-1 * var(--rui-local-next-arrow-initial-offset))); -} + .isRootVertical .arrowNext { + right: 0; + bottom: 0; + left: 0; + width: 100%; + padding-top: $_arrow-inner-spacing; + padding-bottom: $_arrow-outer-spacing; + color: var(--rui-local-next-arrow-color); + transform: translateY(calc(-1 * var(--rui-local-next-arrow-initial-offset))); + } -.isRootHorizontal { - min-width: 0; // 6. -} + .isRootHorizontal { + min-width: 0; // 6. + } -.isRootHorizontal .arrowPrev { - top: 0; - bottom: 0; - left: 0; - padding-right: $_arrow-inner-spacing; - padding-left: $_arrow-outer-spacing; - transform: translateX(var(--rui-local-prev-arrow-initial-offset)); -} + .isRootHorizontal .arrowPrev { + top: 0; + bottom: 0; + left: 0; + padding-right: $_arrow-inner-spacing; + padding-left: $_arrow-outer-spacing; + transform: translateX(var(--rui-local-prev-arrow-initial-offset)); + } -.isRootHorizontal .arrowPrev .arrowIcon { - @include caret.rotate(90); -} + .isRootHorizontal .arrowPrev .arrowIcon { + @include caret.rotate(90); + } -.isRootHorizontal .arrowNext { - top: 0; - right: 0; - bottom: 0; - padding-right: $_arrow-outer-spacing; - padding-left: $_arrow-inner-spacing; - transform: translateX(calc(-1 * var(--rui-local-next-arrow-initial-offset))); -} + .isRootHorizontal .arrowNext { + top: 0; + right: 0; + bottom: 0; + padding-right: $_arrow-outer-spacing; + padding-left: $_arrow-inner-spacing; + transform: translateX(calc(-1 * var(--rui-local-next-arrow-initial-offset))); + } -.isRootHorizontal .arrowNext .arrowIcon { - @include caret.rotate(270); -} + .isRootHorizontal .arrowNext .arrowIcon { + @include caret.rotate(270); + } -.isRootVertical .scrollingShadows::before, -.isRootVertical .scrollingShadows::after { - right: 0; - left: 0; - width: auto; -} + .isRootVertical .scrollingShadows::before, + .isRootVertical .scrollingShadows::after { + right: 0; + left: 0; + width: auto; + } -.isRootVertical .scrollingShadows::before { - top: 0; - height: var(--rui-local-start-shadow-size); - transform: translateY(var(--rui-local-start-shadow-initial-offset)); -} + .isRootVertical .scrollingShadows::before { + top: 0; + height: var(--rui-local-start-shadow-size); + transform: translateY(var(--rui-local-start-shadow-initial-offset)); + } -.isRootVertical .scrollingShadows::after { - bottom: 0; - height: var(--rui-local-end-shadow-size); - transform: translateY(calc(-1 * var(--rui-local-end-shadow-initial-offset))); -} + .isRootVertical .scrollingShadows::after { + bottom: 0; + height: var(--rui-local-end-shadow-size); + transform: translateY(calc(-1 * var(--rui-local-end-shadow-initial-offset))); + } -.isRootHorizontal .viewport { - overflow-x: auto; // 2. - overflow-y: clip; // 5., 7., 8. -} + .isRootHorizontal .viewport { + overflow-x: auto; // 2. + overflow-y: clip; // 5., 7., 8. + } -.isRootHorizontal .content { - display: inline-flex; // 4. - min-width: 100%; - overflow: clip; // 8. - vertical-align: top; -} + .isRootHorizontal .content { + display: inline-flex; // 4. + min-width: 100%; + overflow: clip; // 8. + vertical-align: top; + } -.isRootHorizontal .scrollingShadows::before, -.isRootHorizontal .scrollingShadows::after { - top: 0; - bottom: 0; - height: auto; -} + .isRootHorizontal .scrollingShadows::before, + .isRootHorizontal .scrollingShadows::after { + top: 0; + bottom: 0; + height: auto; + } -.isRootHorizontal .scrollingShadows::before { - left: 0; - width: var(--rui-local-start-shadow-size); - transform: translateX(var(--rui-local-start-shadow-initial-offset)); -} + .isRootHorizontal .scrollingShadows::before { + left: 0; + width: var(--rui-local-start-shadow-size); + transform: translateX(var(--rui-local-start-shadow-initial-offset)); + } -.isRootHorizontal .scrollingShadows::after { - right: 0; - width: var(--rui-local-end-shadow-size); - transform: translateX(calc(-1 * var(--rui-local-end-shadow-initial-offset))); -} + .isRootHorizontal .scrollingShadows::after { + right: 0; + width: var(--rui-local-end-shadow-size); + transform: translateX(calc(-1 * var(--rui-local-end-shadow-initial-offset))); + } -.isRootScrolledAtStart .scrollingShadows::before, -.isRootScrolledAtStart .arrowPrev { - visibility: visible; - opacity: 1; - transform: translate(0, 0); -} + .isRootScrolledAtStart .scrollingShadows::before, + .isRootScrolledAtStart .arrowPrev { + visibility: visible; + opacity: 1; + transform: translate(0, 0); + } -.isRootScrolledAtEnd .scrollingShadows::after, -.isRootScrolledAtEnd .arrowNext { - visibility: visible; - opacity: 1; - transform: translate(0, 0); -} + .isRootScrolledAtEnd .scrollingShadows::after, + .isRootScrolledAtEnd .arrowNext { + visibility: visible; + opacity: 1; + transform: translate(0, 0); + } -.hasRootScrollbarDisabled .viewport { - @include scrollbar.hide(); + .hasRootScrollbarDisabled .viewport { + @include scrollbar.hide(); + } } diff --git a/src/components/SelectField/SelectField.module.scss b/src/components/SelectField/SelectField.module.scss index b10b83c8..d97161af 100644 --- a/src/components/SelectField/SelectField.module.scss +++ b/src/components/SelectField/SelectField.module.scss @@ -5,105 +5,107 @@ @use "../../styles/tools/form-fields/variants"; @use "../../styles/tools/accessibility"; -// Foundation -.root { - @include foundation.root(); -} - -.label { - @include foundation.label(); -} - -.inputContainer { - @include box-field-elements.input-container(); -} - -.input { - @include box-field-elements.input(); - @include box-field-elements.input-select(); - @include box-field-elements.input-select-option(); -} - -.caret { - @include box-field-elements.caret(); -} - -.caretIcon { - @include box-field-elements.caret-icon(); -} - -.bottomLine { - @include box-field-elements.bottom-line(); -} - -.helpText, -.validationText { - @include foundation.help-text(); -} - -.isRootRequired .label { - @include foundation.label-required(); -} - -// Variants -.isRootVariantFilled { - @include variants.visual(box, $variant: filled, $has-caret: true); -} - -.isRootVariantOutline { - @include variants.visual(box, $variant: outline, $has-caret: true); -} - -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} - -.isRootStateValid { - @include variants.validation(valid); -} - -.isRootStateWarning { - @include variants.validation(warning); -} - -// Invisible label -.isLabelHidden { - @include accessibility.hide-text(); -} - -// Layouts -.isRootLayoutVertical, -.isRootLayoutHorizontal { - @include box-field-layout.vertical(); -} - -.isRootLayoutHorizontal { - @include box-field-layout.horizontal(); -} - -.isRootFullWidth { - @include box-field-layout.full-width(); -} - -.isRootInFormLayout { - @include box-field-layout.in-form-layout(); -} - -// Sizes -.isRootSizeSmall { - @include box-field-sizes.size(small); -} - -.isRootSizeMedium { - @include box-field-sizes.size(medium); -} - -.isRootSizeLarge { - @include box-field-sizes.size(large); -} - -// Groups -.isRootGrouped { - @include box-field-elements.in-group-layout(); +@layer components.select-field { + // Foundation + .root { + @include foundation.root(); + } + + .label { + @include foundation.label(); + } + + .inputContainer { + @include box-field-elements.input-container(); + } + + .input { + @include box-field-elements.input(); + @include box-field-elements.input-select(); + @include box-field-elements.input-select-option(); + } + + .caret { + @include box-field-elements.caret(); + } + + .caretIcon { + @include box-field-elements.caret-icon(); + } + + .bottomLine { + @include box-field-elements.bottom-line(); + } + + .helpText, + .validationText { + @include foundation.help-text(); + } + + .isRootRequired .label { + @include foundation.label-required(); + } + + // Variants + .isRootVariantFilled { + @include variants.visual(box, $variant: filled, $has-caret: true); + } + + .isRootVariantOutline { + @include variants.visual(box, $variant: outline, $has-caret: true); + } + + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } + + .isRootStateValid { + @include variants.validation(valid); + } + + .isRootStateWarning { + @include variants.validation(warning); + } + + // Invisible label + .isLabelHidden { + @include accessibility.hide-text(); + } + + // Layouts + .isRootLayoutVertical, + .isRootLayoutHorizontal { + @include box-field-layout.vertical(); + } + + .isRootLayoutHorizontal { + @include box-field-layout.horizontal(); + } + + .isRootFullWidth { + @include box-field-layout.full-width(); + } + + .isRootInFormLayout { + @include box-field-layout.in-form-layout(); + } + + // Sizes + .isRootSizeSmall { + @include box-field-sizes.size(small); + } + + .isRootSizeMedium { + @include box-field-sizes.size(medium); + } + + .isRootSizeLarge { + @include box-field-sizes.size(large); + } + + // Groups + .isRootGrouped { + @include box-field-elements.in-group-layout(); + } } diff --git a/src/components/Table/Table.module.scss b/src/components/Table/Table.module.scss index 97e8c5e3..b912d1ce 100644 --- a/src/components/Table/Table.module.scss +++ b/src/components/Table/Table.module.scss @@ -1,28 +1,30 @@ @use "../../styles/tools/transition"; @use "settings"; -.table { - width: 100%; - border-collapse: collapse; -} +@layer components.table { + .table { + width: 100%; + border-collapse: collapse; + } -.tableRow, -.tableHeadRow { - @include transition.add((background-color)); -} + .tableRow, + .tableHeadRow { + @include transition.add((background-color)); + } -.tableRow { - background-color: settings.$background-color; + .tableRow { + background-color: settings.$background-color; - &:hover { - background-color: settings.$hover-background-color; + &:hover { + background-color: settings.$hover-background-color; + } } -} - -.tableHeadRow { - background-color: settings.$head-background-color; - &:hover { + .tableHeadRow { background-color: settings.$head-background-color; + + &:hover { + background-color: settings.$head-background-color; + } } } diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss index 3f724a22..b489b549 100644 --- a/src/components/Tabs/Tabs.module.scss +++ b/src/components/Tabs/Tabs.module.scss @@ -4,26 +4,28 @@ @use "../../styles/tools/reset"; @use "theme"; -.list { - @include reset.list(); +@layer components.tabs { + .list { + @include reset.list(); - position: relative; - display: inline-flex; - min-width: 100%; - padding-right: theme.$padding-x; - padding-left: theme.$padding-x; - overflow-y: clip; // 1. - white-space: nowrap; + position: relative; + display: inline-flex; + min-width: 100%; + padding-right: theme.$padding-x; + padding-left: theme.$padding-x; + overflow-y: clip; // 1. + white-space: nowrap; - // 2. - &::after { - content: ""; - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - height: theme.$border-bottom-width; - background-color: theme.$border-bottom-color; + // 2. + &::after { + content: ""; + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + height: theme.$border-bottom-width; + background-color: theme.$border-bottom-color; + } } } diff --git a/src/components/Tabs/TabsItem.module.scss b/src/components/Tabs/TabsItem.module.scss index 29e2efb4..fcbde8fe 100644 --- a/src/components/Tabs/TabsItem.module.scss +++ b/src/components/Tabs/TabsItem.module.scss @@ -5,113 +5,115 @@ @use "../../styles/tools/transition"; @use "theme"; -.root { - @include transition.add(transform); - - position: relative; // 1. - z-index: 1; // 1. - flex: none; - padding-top: calc(-1 * #{theme.$item-active-shift-y}); - margin-bottom: theme.$item-active-shift-y; - transform: translateY(0); - - &:hover, - &:focus-within { - transform: translateY(theme.$item-hover-shift-y); - } - - &:not(:last-child) { - margin-right: theme.$gap-xs; - } +@layer components.tabs { + .root { + @include transition.add(transform); + + position: relative; // 1. + z-index: 1; // 1. + flex: none; + padding-top: calc(-1 * #{theme.$item-active-shift-y}); + margin-bottom: theme.$item-active-shift-y; + transform: translateY(0); + + &:hover, + &:focus-within { + transform: translateY(theme.$item-hover-shift-y); + } - @include breakpoint.up(sm) { &:not(:last-child) { - margin-right: theme.$gap-sm; + margin-right: theme.$gap-xs; } - } - @include breakpoint.up(md) { - &:not(:last-child) { - margin-right: theme.$gap-md; + @include breakpoint.up(sm) { + &:not(:last-child) { + margin-right: theme.$gap-sm; + } } - } -} -.link { - @include reset.link(); - @include transition.add((color, border-color, background-color, box-shadow)); - - display: block; - padding: theme.$item-padding-xs; - font-weight: theme.$item-font-weight; - line-height: 1; - text-decoration: none; - color: theme.$item-color; - border: theme.$item-border-width solid; - border-color: theme.$item-border-color; - border-top-left-radius: theme.$item-border-radius; - border-top-right-radius: theme.$item-border-radius; - background-color: theme.$item-background-color; - box-shadow: theme.$item-box-shadow; - - &:hover, - &:focus { - font-weight: theme.$item-hover-font-weight; - color: theme.$item-hover-color; - border-width: theme.$item-hover-border-width; - border-color: theme.$item-hover-border-color; - background-color: theme.$item-hover-background-color; - box-shadow: theme.$item-hover-box-shadow; + @include breakpoint.up(md) { + &:not(:last-child) { + margin-right: theme.$gap-md; + } + } } - @include breakpoint.up(sm) { - padding: theme.$item-padding-sm; - } + .link { + @include reset.link(); + @include transition.add((color, border-color, background-color, box-shadow)); + + display: block; + padding: theme.$item-padding-xs; + font-weight: theme.$item-font-weight; + line-height: 1; + text-decoration: none; + color: theme.$item-color; + border: theme.$item-border-width solid; + border-color: theme.$item-border-color; + border-top-left-radius: theme.$item-border-radius; + border-top-right-radius: theme.$item-border-radius; + background-color: theme.$item-background-color; + box-shadow: theme.$item-box-shadow; + + &:hover, + &:focus { + font-weight: theme.$item-hover-font-weight; + color: theme.$item-hover-color; + border-width: theme.$item-hover-border-width; + border-color: theme.$item-hover-border-color; + background-color: theme.$item-hover-background-color; + box-shadow: theme.$item-hover-box-shadow; + } - @include breakpoint.up(md) { - padding: theme.$item-padding-md; + @include breakpoint.up(sm) { + padding: theme.$item-padding-sm; + } + + @include breakpoint.up(md) { + padding: theme.$item-padding-md; + } } -} -.linkContent { - @include transition.add(transform); + .linkContent { + @include transition.add(transform); - display: flex; - align-items: center; - transform: translateY(0); -} + display: flex; + align-items: center; + transform: translateY(0); + } -.label:not(:first-child) { - margin-left: theme.$item-icon-gap; -} + .label:not(:first-child) { + margin-left: theme.$item-icon-gap; + } -.label:not(:last-child) { - margin-right: theme.$item-icon-gap; -} + .label:not(:last-child) { + margin-right: theme.$item-icon-gap; + } -.isRootActive, -.isRootActive:hover, -.isRootActive:focus-within { - z-index: 2; // 1. - transform: translateY(theme.$item-active-shift-y); -} + .isRootActive, + .isRootActive:hover, + .isRootActive:focus-within { + z-index: 2; // 1. + transform: translateY(theme.$item-active-shift-y); + } -.isRootActive .link { - font-weight: theme.$item-active-font-weight; - color: theme.$item-active-color; - border-width: theme.$item-active-border-width; - border-color: theme.$item-active-border-color; - background-color: theme.$item-active-background-color; - box-shadow: theme.$item-active-box-shadow; -} + .isRootActive .link { + font-weight: theme.$item-active-font-weight; + color: theme.$item-active-color; + border-width: theme.$item-active-border-width; + border-color: theme.$item-active-border-color; + background-color: theme.$item-active-background-color; + box-shadow: theme.$item-active-box-shadow; + } -.link:hover .linkContent, -.link:focus .linkContent { - transform: translateY(theme.$item-hover-label-shift-y); -} + .link:hover .linkContent, + .link:focus .linkContent { + transform: translateY(theme.$item-hover-label-shift-y); + } -.isRootActive .link .linkContent, -.isRootActive .link:hover .linkContent, -.isRootActive .link:focus .linkContent { - transform: translateY(theme.$item-active-label-shift-y); + .isRootActive .link .linkContent, + .isRootActive .link:hover .linkContent, + .isRootActive .link:focus .linkContent { + transform: translateY(theme.$item-active-label-shift-y); + } } diff --git a/src/components/Text/Text.module.scss b/src/components/Text/Text.module.scss index ecd178d3..1cd0e3c0 100644 --- a/src/components/Text/Text.module.scss +++ b/src/components/Text/Text.module.scss @@ -5,36 +5,38 @@ // 2. Different approaches are used for single and multiline texts because the latter approach // doesn't always work for single-line texts. -.isRootClampSingleLine { - display: block; // 2. - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} +@layer components.text { + .isRootClampSingleLine { + display: block; // 2. + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } -// stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix -.isRootClampMultiLine { - display: -webkit-box; // 2. - -webkit-line-clamp: var(--rui-custom-lines); - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; -} -// stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix + // stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix + .isRootClampMultiLine { + display: -webkit-box; // 2. + -webkit-line-clamp: var(--rui-custom-lines); + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + // stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix -.isRootHyphensAuto { - hyphens: auto; -} + .isRootHyphensAuto { + hyphens: auto; + } -.isRootHyphensManual { - hyphens: manual; -} + .isRootHyphensManual { + hyphens: manual; + } -.isRootWordWrappingAnywhere { - word-break: break-all; -} + .isRootWordWrappingAnywhere { + word-break: break-all; + } -.isRootWordWrappingLongWords { - word-break: break-word; // 1. - overflow-wrap: anywhere; + .isRootWordWrappingLongWords { + word-break: break-word; // 1. + overflow-wrap: anywhere; + } } diff --git a/src/components/TextArea/TextArea.module.scss b/src/components/TextArea/TextArea.module.scss index 219d9c1d..49b57f50 100644 --- a/src/components/TextArea/TextArea.module.scss +++ b/src/components/TextArea/TextArea.module.scss @@ -5,91 +5,93 @@ @use "../../styles/tools/form-fields/variants"; @use "../../styles/tools/accessibility"; -// Foundation -.root { - @include foundation.root(); -} - -.label { - @include foundation.label(); -} - -.inputContainer { - @include box-field-elements.input-container(); -} - -.input { - @include box-field-elements.input(); - @include box-field-elements.input-textarea(); -} - -.bottomLine { - @include box-field-elements.bottom-line(); -} - -.helpText, -.validationText { - @include foundation.help-text(); -} - -.isRootRequired .label { - @include foundation.label-required(); -} - -// Visual variants -.isRootVariantFilled { - @include variants.visual(box, $variant: filled); -} - -.isRootVariantOutline { - @include variants.visual(box, $variant: outline); -} - -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} - -.isRootStateValid { - @include variants.validation(valid); -} - -.isRootStateWarning { - @include variants.validation(warning); -} - -// Invisible label -.isLabelHidden { - @include accessibility.hide-text(); -} - -// Layouts -.isRootLayoutVertical, -.isRootLayoutHorizontal { - @include box-field-layout.vertical(); -} - -.isRootLayoutHorizontal { - @include box-field-layout.horizontal(); -} - -.isRootFullWidth { - @include box-field-layout.full-width(); -} - -.isRootInFormLayout { - @include box-field-layout.in-form-layout(); -} - -// Sizes -.isRootSizeSmall { - @include box-field-sizes.size(small, $is-multiline: true); -} - -.isRootSizeMedium { - @include box-field-sizes.size(medium, $is-multiline: true); -} - -.isRootSizeLarge { - @include box-field-sizes.size(large, $is-multiline: true); +@layer components.text-area { + // Foundation + .root { + @include foundation.root(); + } + + .label { + @include foundation.label(); + } + + .inputContainer { + @include box-field-elements.input-container(); + } + + .input { + @include box-field-elements.input(); + @include box-field-elements.input-textarea(); + } + + .bottomLine { + @include box-field-elements.bottom-line(); + } + + .helpText, + .validationText { + @include foundation.help-text(); + } + + .isRootRequired .label { + @include foundation.label-required(); + } + + // Visual variants + .isRootVariantFilled { + @include variants.visual(box, $variant: filled); + } + + .isRootVariantOutline { + @include variants.visual(box, $variant: outline); + } + + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } + + .isRootStateValid { + @include variants.validation(valid); + } + + .isRootStateWarning { + @include variants.validation(warning); + } + + // Invisible label + .isLabelHidden { + @include accessibility.hide-text(); + } + + // Layouts + .isRootLayoutVertical, + .isRootLayoutHorizontal { + @include box-field-layout.vertical(); + } + + .isRootLayoutHorizontal { + @include box-field-layout.horizontal(); + } + + .isRootFullWidth { + @include box-field-layout.full-width(); + } + + .isRootInFormLayout { + @include box-field-layout.in-form-layout(); + } + + // Sizes + .isRootSizeSmall { + @include box-field-sizes.size(small, $is-multiline: true); + } + + .isRootSizeMedium { + @include box-field-sizes.size(medium, $is-multiline: true); + } + + .isRootSizeLarge { + @include box-field-sizes.size(large, $is-multiline: true); + } } diff --git a/src/components/TextField/TextField.module.scss b/src/components/TextField/TextField.module.scss index 5cfb34a3..d88598f8 100644 --- a/src/components/TextField/TextField.module.scss +++ b/src/components/TextField/TextField.module.scss @@ -5,103 +5,105 @@ @use "../../styles/tools/form-fields/variants"; @use "../../styles/tools/accessibility"; -// Foundation -.root { - @include foundation.root(); -} - -.label { - @include foundation.label(); -} - -.inputContainer { - @include box-field-elements.input-container(); -} - -.input { - @include box-field-elements.input(); -} - -.bottomLine { - @include box-field-elements.bottom-line(); -} - -.helpText, -.validationText { - @include foundation.help-text(); -} - -.hasRootCustomInputSize .input { - @include box-field-elements.input-size(); -} - -.isRootRequired .label { - @include foundation.label-required(); -} - -// Variants -.isRootVariantFilled { - @include variants.visual(box, $variant: filled); -} - -.isRootVariantOutline { - @include variants.visual(box, $variant: outline); -} - -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} - -.isRootStateValid { - @include variants.validation(valid); -} - -.isRootStateWarning { - @include variants.validation(warning); -} - -// Invisible label -.isLabelHidden { - @include accessibility.hide-text(); -} - -// Layouts -.isRootLayoutVertical, -.isRootLayoutHorizontal { - @include box-field-layout.vertical(); -} - -.isRootLayoutHorizontal { - @include box-field-layout.horizontal(); -} - -.isRootFullWidth { - @include box-field-layout.full-width(); -} - -.isRootInFormLayout { - @include box-field-layout.in-form-layout(); -} - -.hasRootSmallInput.isRootLayoutHorizontal { - @include box-field-layout.horizontal-with-small-input(); -} - -// Sizes -.isRootSizeSmall { - @include box-field-sizes.size(small); -} - -.isRootSizeMedium { - @include box-field-sizes.size(medium); -} - -.isRootSizeLarge { - @include box-field-sizes.size(large); -} - -// Groups -.isRootGrouped { - @include box-field-elements.in-group-layout(); +@layer components.text-field { + // Foundation + .root { + @include foundation.root(); + } + + .label { + @include foundation.label(); + } + + .inputContainer { + @include box-field-elements.input-container(); + } + + .input { + @include box-field-elements.input(); + } + + .bottomLine { + @include box-field-elements.bottom-line(); + } + + .helpText, + .validationText { + @include foundation.help-text(); + } + + .hasRootCustomInputSize .input { + @include box-field-elements.input-size(); + } + + .isRootRequired .label { + @include foundation.label-required(); + } + + // Variants + .isRootVariantFilled { + @include variants.visual(box, $variant: filled); + } + + .isRootVariantOutline { + @include variants.visual(box, $variant: outline); + } + + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } + + .isRootStateValid { + @include variants.validation(valid); + } + + .isRootStateWarning { + @include variants.validation(warning); + } + + // Invisible label + .isLabelHidden { + @include accessibility.hide-text(); + } + + // Layouts + .isRootLayoutVertical, + .isRootLayoutHorizontal { + @include box-field-layout.vertical(); + } + + .isRootLayoutHorizontal { + @include box-field-layout.horizontal(); + } + + .isRootFullWidth { + @include box-field-layout.full-width(); + } + + .isRootInFormLayout { + @include box-field-layout.in-form-layout(); + } + + .hasRootSmallInput.isRootLayoutHorizontal { + @include box-field-layout.horizontal-with-small-input(); + } + + // Sizes + .isRootSizeSmall { + @include box-field-sizes.size(small); + } + + .isRootSizeMedium { + @include box-field-sizes.size(medium); + } + + .isRootSizeLarge { + @include box-field-sizes.size(large); + } + + // Groups + .isRootGrouped { + @include box-field-elements.in-group-layout(); + } } diff --git a/src/components/TextLink/TextLink.module.scss b/src/components/TextLink/TextLink.module.scss index f3d81900..4e44942f 100644 --- a/src/components/TextLink/TextLink.module.scss +++ b/src/components/TextLink/TextLink.module.scss @@ -1,16 +1,18 @@ @use "theme"; -.root { - text-decoration: theme.$text-decoration; - color: theme.$color; +@layer components.text-link { + .root { + text-decoration: theme.$text-decoration; + color: theme.$color; - &:hover { - text-decoration: theme.$hover-text-decoration; - color: theme.$hover-color; - } + &:hover { + text-decoration: theme.$hover-text-decoration; + color: theme.$hover-color; + } - &:active { - text-decoration: theme.$active-text-decoration; - color: theme.$active-color; + &:active { + text-decoration: theme.$active-text-decoration; + color: theme.$active-color; + } } } diff --git a/src/components/Toggle/Toggle.module.scss b/src/components/Toggle/Toggle.module.scss index 4e34fd8d..68846cbf 100644 --- a/src/components/Toggle/Toggle.module.scss +++ b/src/components/Toggle/Toggle.module.scss @@ -4,58 +4,60 @@ @use "../../styles/tools/form-fields/variants"; @use "../../styles/tools/accessibility"; -// Foundation -.root { - @include foundation.root(); - @include inline-field-layout.root(); - @include inline-field-elements.min-tap-target($type: toggle); - @include variants.visual(check); -} - -.label { - @include foundation.label(); -} - -.field { - @include inline-field-layout.field($type: toggle); -} - -.input { - @include inline-field-elements.check-input($type: toggle); -} - -.helpText, -.validationText { - @include foundation.help-text(); -} - -.isRootRequired .label { - @include foundation.label-required(); -} - -// States -.isRootStateInvalid { - @include variants.validation(invalid); -} - -.isRootStateValid { - @include variants.validation(valid); -} - -.isRootStateWarning { - @include variants.validation(warning); -} - -// Invisible label -.isLabelHidden { - @include accessibility.hide-text(); -} - -// Layouts -.hasRootLabelBefore { - @include inline-field-layout.has-label-before(); -} - -.isRootInFormLayout { - @include inline-field-layout.in-form-layout(); +@layer components.toggle { + // Foundation + .root { + @include foundation.root(); + @include inline-field-layout.root(); + @include inline-field-elements.min-tap-target($type: toggle); + @include variants.visual(check); + } + + .label { + @include foundation.label(); + } + + .field { + @include inline-field-layout.field($type: toggle); + } + + .input { + @include inline-field-elements.check-input($type: toggle); + } + + .helpText, + .validationText { + @include foundation.help-text(); + } + + .isRootRequired .label { + @include foundation.label-required(); + } + + // States + .isRootStateInvalid { + @include variants.validation(invalid); + } + + .isRootStateValid { + @include variants.validation(valid); + } + + .isRootStateWarning { + @include variants.validation(warning); + } + + // Invisible label + .isLabelHidden { + @include accessibility.hide-text(); + } + + // Layouts + .hasRootLabelBefore { + @include inline-field-layout.has-label-before(); + } + + .isRootInFormLayout { + @include inline-field-layout.in-form-layout(); + } } diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss index 207dde29..d7dcc624 100644 --- a/src/components/Toolbar/Toolbar.module.scss +++ b/src/components/Toolbar/Toolbar.module.scss @@ -3,81 +3,83 @@ @use "../../styles/tools/spacing"; @use "theme"; -.toolbar, -.group { - display: flex; - flex-wrap: wrap; - gap: theme.$gap; -} - -.toolbar { - @include spacing.bottom(layouts); -} - -.item { - display: flex; // 1. - flex: none; - flex-direction: column; // 1. -} - -.isItemFlexible { - flex: 1; - min-width: 0; -} - -.isToolbarAlignedToTop, -.isGroupAlignedToTop { - align-items: flex-start; -} - -.isToolbarAlignedToMiddle, -.isGroupAlignedToMiddle { - align-items: center; -} - -.isToolbarAlignedToBottom, -.isGroupAlignedToBottom { - align-items: flex-end; -} - -.isToolbarAlignedToBaseline, -.isGroupAlignedToBaseline { - align-items: baseline; -} - -.isToolbarJustifiedToStart, -.isGroupJustifiedToStart { - justify-content: flex-start; -} - -.isToolbarJustifiedToCenter, -.isGroupJustifiedToCenter { - justify-content: center; -} - -.isToolbarJustifiedToEnd, -.isGroupJustifiedToEnd { - justify-content: flex-end; -} - -.isToolbarJustifiedToSpaceBetween, -.isGroupJustifiedToSpaceBetween { - justify-content: space-between; -} - -.isToolbarDense, -.isGroupDense, -.isToolbarDense .group, -.isGroupDense .group { - gap: theme.$gap-dense; -} - -.isToolbarNowrap, -.isGroupNowrap { - flex-wrap: nowrap; -} - -.isToolbarNowrap > .item:not(.isItemFlexible), -.isGroupNowrap > .item:not(.isItemFlexible) { - flex: 0 1 auto; +@layer components.toolbar { + .toolbar, + .group { + display: flex; + flex-wrap: wrap; + gap: theme.$gap; + } + + .toolbar { + @include spacing.bottom(layouts); + } + + .item { + display: flex; // 1. + flex: none; + flex-direction: column; // 1. + } + + .isItemFlexible { + flex: 1; + min-width: 0; + } + + .isToolbarAlignedToTop, + .isGroupAlignedToTop { + align-items: flex-start; + } + + .isToolbarAlignedToMiddle, + .isGroupAlignedToMiddle { + align-items: center; + } + + .isToolbarAlignedToBottom, + .isGroupAlignedToBottom { + align-items: flex-end; + } + + .isToolbarAlignedToBaseline, + .isGroupAlignedToBaseline { + align-items: baseline; + } + + .isToolbarJustifiedToStart, + .isGroupJustifiedToStart { + justify-content: flex-start; + } + + .isToolbarJustifiedToCenter, + .isGroupJustifiedToCenter { + justify-content: center; + } + + .isToolbarJustifiedToEnd, + .isGroupJustifiedToEnd { + justify-content: flex-end; + } + + .isToolbarJustifiedToSpaceBetween, + .isGroupJustifiedToSpaceBetween { + justify-content: space-between; + } + + .isToolbarDense, + .isGroupDense, + .isToolbarDense .group, + .isGroupDense .group { + gap: theme.$gap-dense; + } + + .isToolbarNowrap, + .isGroupNowrap { + flex-wrap: nowrap; + } + + .isToolbarNowrap > .item:not(.isItemFlexible), + .isGroupNowrap > .item:not(.isItemFlexible) { + flex: 0 1 auto; + } }