From e466d3f027c86f3b424d577de81a1c73126ae743 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 19 Sep 2023 08:20:00 +0200 Subject: [PATCH] Leverage CSS cascade layers to fix and user-proof styles order As long as `layers.scss` (layers order definition) is called first, our Sass styles can be imported in any order. It solves the incorrect (but unavoidable, due to the way we compile CSS) call order of styles in our `index.js`. Also, developers can now extend the CSS cascade instead of just prepending or appending their styles to ours. For example: ```css /* My custom app styles */ @layer foundation.elements { code { background-color: silver; } } ``` --- 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 +- src/docs/contribute/css.md | 26 +- src/docs/getting-started/usage.md | 47 +- src/foundation.scss | 39 +- src/helpers.scss | 20 +- src/index.js | 8 +- src/index.scss | 7 + src/layers.scss | 4 + src/theme.scss | 2078 +++++++++-------- 44 files changed, 3185 insertions(+), 3061 deletions(-) create mode 100644 src/index.scss create mode 100644 src/layers.scss diff --git a/package-lock.json b/package-lock.json index 0e9e5e24..f0aa2cec 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.10.0", "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..c84bc3d2 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.10.0", "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; + } } diff --git a/src/docs/contribute/css.md b/src/docs/contribute/css.md index 8b87bb65..7cb9a025 100644 --- a/src/docs/contribute/css.md +++ b/src/docs/contribute/css.md @@ -77,6 +77,30 @@ There are three simple rules to follow when organizing React UI CSS: └── theme.scss Default theme, a collection of hundreds of CSS custom properties ``` +### Cascade Layers + +React UI CSS is organized into [cascade layers], each with its own specificity +level. The layers are as follows: + +1. `@layer theme` — a collection of hundreds of [CSS custom properties] that + define the look and feel of your UI. +2. `@layer foundation` — mandatory ground-zero CSS for components and other + styling. Includes sublayers like `@layer foundation.generic` and + `@layer foundation.elements`. +3. `@layer helpers` — small styling abstractions that can be used across the + whole UI. +4. `@layer components` — component styles are written as CSS modules which + output into this layer. Also, each component has its own cascade layer, e.g. + `@layer components.modal`. +5. `@layer utilities` — tiny classes to control selected CSS properties, + forcing them with `!important`. + +Any custom CSS can be added to the end of the cascade, but it's recommended to +use any of the existing layers to keep the CSS organized. + +👉 With `!important` styles, layered styles take precedence over unlayered +styles. + ## CSS Modules For components, React UI leverages [CSS modules] (not to be confused with @@ -237,9 +261,9 @@ according to [Browserslist] configuration stored in `.browserslistrc`. [stylelint-config-visionapps-order]: https://github.com/visionappscz/stylelint-config-visionapps-order [stylelint-config-css-modules]: https://github.com/pascalduez/stylelint-config-css-modules [Web Components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components -[ITCSS]: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ [foundation CSS layer]: /docs/getting-started/usage#foundation-css [foundation-css-source]: https://github.com/react-ui-org/react-ui/blob/master/src/foundation.scss +[cascade layers]: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers [CSS modules]: https://github.com/css-modules/css-modules [modular CSS specification]: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS#css_modules [modern browsers]: /docs/getting-started/browsers-and-devices diff --git a/src/docs/getting-started/usage.md b/src/docs/getting-started/usage.md index fbeb39b3..c9b1a238 100644 --- a/src/docs/getting-started/usage.md +++ b/src/docs/getting-started/usage.md @@ -28,28 +28,28 @@ performance). ## CSS -React UI honors [ITCSS][itcss] principles to make sure that its CSS code base -will work and perform well even in large scale. There are four CSS layers: - -1. **Theme:** a collection of hundreds of CSS custom properties that define the - look of your app. See [Theming][theming] for more. -2. **Foundation:** mandatory ground-zero CSS for React UI components. Includes - global resets and fixes rendering inconsistencies across browsers with - `normalize.css`. (Not to be confused with the Foundation CSS framework.) -3. **Components:** React UI components' styles. Components utilize [CSS modules] - to avoid class name conflicts and to keep the class names scoped. -4. **CSS helpers:** tiny CSS classes that can handle details like - [typography][typography], [spacing][spacing], [colors][colors], etc. Class - name notation is [inspired by Bootstrap][bootstrap-utilities], so if you are - familiar with Bootstrap, you will feel at home here. - -All layers are written in Sass and compiled to CSS. You can import them all in -a **ready-to-use CSS bundle** like this: +React UI styles are written in Sass and compiled to CSS. You can import them +in a **ready-to-use CSS bundle** like this: ```js import '@react-ui-org/react-ui/dist/react-ui.css'; ``` +Under the hood, there are several CSS layers: + +1. **Layers definition:** establish [CSS cascade layers]. +2. **Theme:** a collection of hundreds of [design tokens] that define the look + and feel of your app. See [Theming] for more. +3. **Foundation:** mandatory ground-zero CSS for React UI components. Includes + global resets and fixes rendering inconsistencies across browsers with + `normalize.css`. (Not to be confused with the Foundation CSS framework!) +4. **Components:** React UI components' styles. Components utilize [CSS modules] + to avoid class name conflicts and to keep the class names scoped. +5. **CSS helpers:** tiny CSS classes (helpers and utilities) that can handle + details like [typography], [spacing], [colors], etc. Class name notation is + [inspired by Bootstrap utilities][bootstrap-utilities], so if you are + familiar with Bootstrap, you will feel at home here. + ### Sass 👉 As of now, we don't provide a way to import the Sass files directly. @@ -67,7 +67,7 @@ import { Button } from '@react-ui-org/react-ui'; ### Controlled vs. Uncontrolled While you may find out some components are working for you as uncontrolled, we -currently support only [controlled components][controlled-components]. +currently support only [controlled components]. ## Full Example @@ -118,11 +118,12 @@ React UI is also available on CDN: 👉 Consider using a specific version instead of `latest` in production. -[itcss]: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ -[theming]: /docs/customize/theming/overview -[controlled-components]: https://reactjs.org/docs/forms.html#controlled-components +[CSS cascade layers]: /docs/contribute/css#cascade-layers +[design tokens]: /docs/foundation/design-tokens +[Theming]: /docs/customize/theming/overview +[CSS modules]: /docs/contribute/css#css-modules [typography]: /docs/css-helpers/typography [spacing]: /docs/css-helpers/spacing [colors]: /docs/css-helpers/colors -[bootstrap-utilities]: https://getbootstrap.com/docs/5.1/utilities/ -[CSS modules]: https://github.com/css-modules/css-modules +[bootstrap-utilities]: https://getbootstrap.com/docs/5.3/utilities/api/ +[controlled components]: https://reactjs.org/docs/forms.html#controlled-components diff --git a/src/foundation.scss b/src/foundation.scss index 0fd9e967..c0a8fed7 100644 --- a/src/foundation.scss +++ b/src/foundation.scss @@ -1,28 +1,33 @@ // Mandatory themeable CSS layer to prepare ground for components. -// Structured according to ITCSS methodology, ie. most importantly in ascending specificity. + +@use "sass:meta"; // -// 1. Generic -// ========== +// Generic +// ======= // // Ground-zero styles. -@use "styles/generic/box-sizing"; -@use "normalize.css/normalize.css"; -@use "styles/generic/focus"; -@use "styles/generic/forms"; -@use "styles/generic/reset"; -@use "styles/generic/shared"; +@layer foundation.generic { + @include meta.load-css("styles/generic/box-sizing"); + @include meta.load-css("normalize.css/normalize.css"); + @include meta.load-css("styles/generic/focus"); + @include meta.load-css("styles/generic/forms"); + @include meta.load-css("styles/generic/reset"); + @include meta.load-css("styles/generic/shared"); +} // -// 2. Elements -// =========== +// Elements +// ======== // // Unclassed HTML elements (type selectors). -@use "styles/elements/code"; -@use "styles/elements/links"; -@use "styles/elements/lists"; -@use "styles/elements/page"; -@use "styles/elements/rulers"; -@use "styles/elements/small"; +@layer foundation.elements { + @include meta.load-css("styles/elements/code"); + @include meta.load-css("styles/elements/links"); + @include meta.load-css("styles/elements/lists"); + @include meta.load-css("styles/elements/page"); + @include meta.load-css("styles/elements/rulers"); + @include meta.load-css("styles/elements/small"); +} diff --git a/src/helpers.scss b/src/helpers.scss index 00d6128c..7910ebf7 100644 --- a/src/helpers.scss +++ b/src/helpers.scss @@ -1,22 +1,26 @@ // Optional layer with helper CSS classes to easily adjust visual details. -// Structured according to ITCSS methodology, ie. most importantly in ascending specificity. -// This file should be imported as the very last of your stylesheets. + +@use "sass:meta"; // -// 1. Helpers -// ========== +// Helpers +// ======= // // General purpose helpers for common situations. They can compose multiple CSS rules to do a bit // more complicated tasks. -@use "styles/helpers/animation"; +@layer helpers { + @include meta.load-css("styles/helpers/animation"); +} // -// 2. Utilities -// ============ +// Utilities +// ========= // // Utility classes to tweak small details like typography, margins or padding. They do just one // thing: they set a single CSS rule and use the otherwise disallowed `!important` to enforce it. // Also they are often responsive (can be adjusted for individual breakpoints). -@use "styles/utilities"; +@layer utilities { + @include meta.load-css("styles/utilities"); +} diff --git a/src/index.js b/src/index.js index 44f73d0c..921bc8e1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,7 @@ // Global definitions -// These need to be imported here to be placed in the distribution CSS file. -// Component styles are imported in the component files themselves. -import './theme.scss'; -import './foundation.scss'; -import './helpers.scss'; +// The styles need to be imported here to be placed in the distribution CSS file. +// Component styles are imported in the components themselves below. +import './index.scss'; // Components export { Alert } from './components/Alert'; diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 00000000..963a3a9c --- /dev/null +++ b/src/index.scss @@ -0,0 +1,7 @@ +// First establish cascade layers: +@forward "layers"; // Must come first for the cascade layers to work as intended. + +// Then import the rest of the files, already organized by layer: +@forward "theme"; +@forward "foundation"; +@forward "helpers"; diff --git a/src/layers.scss b/src/layers.scss new file mode 100644 index 00000000..e6cd23ae --- /dev/null +++ b/src/layers.scss @@ -0,0 +1,4 @@ +// Establish CSS cascade layers. +// ⚠️ WARNING: This file must be called before other React UI styles for the cascade layers to work as intended. + +@layer theme, foundation, helpers, components, utilities; diff --git a/src/theme.scss b/src/theme.scss index 57aacdaf..ae0ebb51 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -4,1042 +4,1044 @@ @use "styles/theme-constants/colors"; @use "styles/theme-constants/svg"; -:root, -:host { - // ============================================================================================ // - // GLOBAL TOKENS // - // ============================================================================================ // - - // - // Dimensions - // ========== - - // Borders - --rui-dimension-border-width-1: 1px; - - // Breakpoints - // - // ⚠️ Breakpoints are read-only in CSS. Custom properties cannot be used within media queries - // since media query is not a property. - // https://www.w3.org/TR/css-variables-1/#using-variables - --rui-dimension-breakpoint-xs: #{breakpoints.$xs}; - --rui-dimension-breakpoint-sm: #{breakpoints.$sm}; - --rui-dimension-breakpoint-md: #{breakpoints.$md}; - --rui-dimension-breakpoint-lg: #{breakpoints.$lg}; - --rui-dimension-breakpoint-xl: #{breakpoints.$xl}; - --rui-dimension-breakpoint-x2l: #{breakpoints.$x2l}; - --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l}; - - // Radii - --rui-dimension-radius-1: 0.125rem; - --rui-dimension-radius-2: 0.25rem; - - // Spacing - --rui-dimension-space-0: 0; - --rui-dimension-space-1: 0.25rem; - --rui-dimension-space-2: 0.5rem; - --rui-dimension-space-3: 0.75rem; - --rui-dimension-space-4: 1rem; - --rui-dimension-space-5: 1.5rem; - --rui-dimension-space-6: 2rem; - --rui-dimension-space-7: 2.5rem; - - // - // Font Families - // ============= - - --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif; - --rui-font-family-monospace: - "SFMono-Regular", - "Menlo", - "Monaco", - "Consolas", - "Liberation Mono", - "Courier New", - monospace; - - // - // Font Weights - // ============ - - --rui-font-weight-base: 400; - --rui-font-weight-light: 300; - --rui-font-weight-bold: 700; - - // - // Ratios - // ====== - - --rui-ratio-opacity-medium: 0.5; - - // - // Shadows - // ======= - - --rui-shadow-1: 0 0.01rem 0.65rem -0.1rem rgb(0 0 0 / 30%); - --rui-shadow-2: 0.2rem 0.25rem 1.2rem -0.1rem rgb(0 0 0 / 15%); - - // - // Other - // ===== - - // ⚠️ Non-standard token types! - // The DTF specification is still in the draft status, and the following token types have proven necessary. - // - // To be honest, some of these tokens are NOT context agnostic as required by the global tokens category. - // These will be probably superseded by semantic typography styles in the future. - - // Font sizes - --rui-font-size-base: 100%; - --rui-font-size-small: 0.889rem; - --rui-font-size-smaller: 0.75rem; - --rui-font-size-code: 85%; - - // Modular scale ratio: 1.125 / 8:9 / major second - --rui-font-size-1: 1rem; - --rui-font-size-2: 1.125rem; - --rui-font-size-3: 1.266rem; - --rui-font-size-4: 1.424rem; - --rui-font-size-5: 1.602rem; - --rui-font-size-6: 1.802rem; - - // Line heights - --rui-line-height-base: 1.5; - --rui-line-height-small: 1.25; - - // Text decorations - --rui-text-decoration-link: none; - --rui-text-decoration-link-hover: underline; - --rui-text-decoration-link-active: underline; - - // List styles - --rui-list-style-unordered: square; - - // Cursors - --rui-cursor-not-allowed: not-allowed; - - // ============================================================================================ // - // SEMANTIC TOKENS // - // ============================================================================================ // - - // - // Borders - // ======= - - --rui-border-focus-ring: var(--rui-dimension-space-1) solid #{colors.$focus}; - - // - // Colors - // ====== - - // 👉 Actual color values are stored in separate SCSS so they can be generated programmatically. - - // Text colors - --rui-color-text-primary: #{colors.$black}; - --rui-color-text-primary-disabled: #{colors.$gray-300}; - --rui-color-text-secondary: #{colors.$gray-500}; - --rui-color-text-secondary-disabled: #{colors.$gray-300}; - --rui-color-text-link: #{colors.$note}; - --rui-color-text-link-hover: #{colors.$note-dark}; - --rui-color-text-link-active: #{colors.$note-darker}; - - // Action colors - --rui-color-action-primary: #{colors.$primary}; - --rui-color-action-primary-hover: #{colors.$primary-dark}; - --rui-color-action-primary-active: #{colors.$primary-darker}; - --rui-color-action-on-primary: #{colors.$on-primary}; - --rui-color-action-secondary: #{colors.$secondary}; - --rui-color-action-secondary-hover: #{colors.$secondary-dark}; - --rui-color-action-secondary-active: #{colors.$secondary-darker}; - --rui-color-action-on-secondary: #{colors.$on-secondary}; - --rui-color-action-selected: #{colors.$selected}; - --rui-color-action-selected-hover: #{colors.$selected-dark}; - --rui-color-action-selected-active: #{colors.$selected-darker}; - --rui-color-action-on-selected: #{colors.$on-selected}; - - // Feedback colors - --rui-color-feedback-success: #{colors.$success}; - --rui-color-feedback-success-hover: #{colors.$success-dark}; - --rui-color-feedback-success-active: #{colors.$success-darker}; - --rui-color-feedback-on-success: #{colors.$on-success}; - --rui-color-feedback-warning: #{colors.$warning}; - --rui-color-feedback-warning-hover: #{colors.$warning-dark}; - --rui-color-feedback-warning-active: #{colors.$warning-darker}; - --rui-color-feedback-on-warning: #{colors.$on-warning}; - --rui-color-feedback-danger: #{colors.$danger}; - --rui-color-feedback-danger-hover: #{colors.$danger-dark}; - --rui-color-feedback-danger-active: #{colors.$danger-darker}; - --rui-color-feedback-on-danger: #{colors.$on-danger}; - --rui-color-feedback-help: #{colors.$help}; - --rui-color-feedback-help-hover: #{colors.$help-dark}; - --rui-color-feedback-help-active: #{colors.$help-darker}; - --rui-color-feedback-on-help: #{colors.$on-help}; - --rui-color-feedback-info: #{colors.$info}; - --rui-color-feedback-info-hover: #{colors.$info-dark}; - --rui-color-feedback-info-active: #{colors.$info-darker}; - --rui-color-feedback-on-info: #{colors.$on-info}; - --rui-color-feedback-note: #{colors.$note}; - --rui-color-feedback-note-hover: #{colors.$note-dark}; - --rui-color-feedback-note-active: #{colors.$note-darker}; - --rui-color-feedback-on-note: #{colors.$on-note}; - - // Neutral colors - --rui-color-neutral-light: #{colors.$white}; - --rui-color-neutral-light-hover: #{colors.$gray-50}; - --rui-color-neutral-light-active: #{colors.$gray-100}; - --rui-color-neutral-on-light: #{colors.$gray-700}; - --rui-color-neutral-dark: #{colors.$gray-700}; - --rui-color-neutral-dark-hover: #{colors.$gray-800}; - --rui-color-neutral-dark-active: #{colors.$gray-900}; - --rui-color-neutral-on-dark: #{colors.$white}; - - // Background colors - --rui-color-background-base: #{colors.$gray-50}; - --rui-color-background-layer-1: #{colors.$white}; - --rui-color-background-layer-2: #{colors.$white}; - --rui-color-background-basic: #{colors.$white}; - --rui-color-background-disabled: #{colors.$gray-50}; - --rui-color-background-interactive: #{colors.$transparent}; - --rui-color-background-interactive-hover: #{colors.$gray-50}; - --rui-color-background-interactive-active: #{colors.$gray-100}; - --rui-color-background-primary: #{colors.$primary-light}; - --rui-color-background-secondary: #{colors.$secondary-light}; - --rui-color-background-selected: #{colors.$selected-light}; - --rui-color-background-success: #{colors.$success-light}; - --rui-color-background-warning: #{colors.$warning-light}; - --rui-color-background-danger: #{colors.$danger-light}; - --rui-color-background-help: #{colors.$help-light}; - --rui-color-background-info: #{colors.$info-light}; - --rui-color-background-note: #{colors.$note-light}; - --rui-color-background-light: #{colors.$gray-100}; - --rui-color-background-dark: #{colors.$gray-600}; - - // Border colors - --rui-color-border-primary: #{colors.$gray-200}; - --rui-color-border-primary-hover: #{colors.$gray-500}; - --rui-color-border-primary-active: #{colors.$selected-darker}; - --rui-color-border-secondary: #{colors.$gray-100}; - - // - // Dimensions - // ========== - - // Accessibility - --rui-dimension-focus-ring-offset: var(--rui-dimension-border-width-1); - --rui-dimension-tap-target-size: var(--rui-dimension-space-7); - - // Shared bottom spacings - --rui-dimension-space-bottom-base: var(--rui-dimension-space-5); - --rui-dimension-space-bottom-headings: var(--rui-dimension-space-5); - --rui-dimension-space-bottom-layouts: var(--rui-dimension-space-5); - - // - // Ratios - // ====== - - --rui-ratio-disabled-opacity: var(--rui-ratio-opacity-medium); - - // - // Shadows - // ======= - - // 1. Use `initial`, `revert` or `unset` to keep the original box shadow of the component. - - --rui-shadow-layer-1: var(--rui-shadow-1); - --rui-shadow-layer-2: var(--rui-shadow-2); - --rui-shadow-focus-ring: initial; // 1. - - // ============================================================================================ // - // COMPONENT TOKENS // - // ============================================================================================ // - - // - // Alert - // ===== - - // Alert: common properties - --rui-Alert__padding: var(--rui-dimension-space-3); - --rui-Alert__font-weight: var(--rui-font-weight-base); - --rui-Alert__border-width: var(--rui-dimension-border-width-1); - --rui-Alert__border-radius: var(--rui-dimension-radius-2); - --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold); - --rui-Alert__stripe__width: var(--rui-dimension-border-width-1); - - // Alert: variant: success - --rui-Alert--success__color: var(--rui-color-text-primary); - --rui-Alert--success__foreground-color: var(--rui-color-feedback-success); - --rui-Alert--success__background-color: var(--rui-color-background-success); - - // Alert: variant: warning - --rui-Alert--warning__color: var(--rui-color-text-primary); - --rui-Alert--warning__foreground-color: var(--rui-color-feedback-warning); - --rui-Alert--warning__background-color: var(--rui-color-background-warning); - - // Alert: variant: danger - --rui-Alert--danger__color: var(--rui-color-text-primary); - --rui-Alert--danger__foreground-color: var(--rui-color-feedback-danger); - --rui-Alert--danger__background-color: var(--rui-color-background-danger); - - // Alert: variant: info - --rui-Alert--info__color: var(--rui-color-text-primary); - --rui-Alert--info__foreground-color: var(--rui-color-feedback-info); - --rui-Alert--info__background-color: var(--rui-color-background-info); - - // Alert: variant: help - --rui-Alert--help__color: var(--rui-color-text-primary); - --rui-Alert--help__foreground-color: var(--rui-color-feedback-help); - --rui-Alert--help__background-color: var(--rui-color-background-help); - - // Alert: variant: note - --rui-Alert--note__color: var(--rui-color-text-primary); - --rui-Alert--note__foreground-color: var(--rui-color-feedback-note); - --rui-Alert--note__background-color: var(--rui-color-background-note); - - // Alert: variant: light - --rui-Alert--light__color: var(--rui-color-neutral-on-light); - --rui-Alert--light__foreground-color: var(--rui-color-neutral-on-light); - --rui-Alert--light__background-color: var(--rui-color-background-light); - - // Alert: variant: dark - --rui-Alert--dark__color: var(--rui-color-neutral-on-dark); - --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark); - --rui-Alert--dark__background-color: var(--rui-color-background-dark); - - // - // Button - // ====== - - // Buttons: common properties - --rui-Button__font-weight: var(--rui-font-weight-base); - --rui-Button__letter-spacing: 0; - --rui-Button__text-transform: none; - --rui-Button__border-width: var(--rui-dimension-border-width-1); - --rui-Button__border-radius: var(--rui-dimension-radius-2); - --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity); - --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed); - --rui-Button--feedback__opacity: 1; - --rui-Button--feedback__cursor: var(--rui-cursor-not-allowed); - - // Buttons: filled priority - - // Buttons: filled priority: primary variant - --rui-Button--filled--primary--default__color: var(--rui-color-action-on-primary); - --rui-Button--filled--primary--default__border-color: var(--rui-color-action-primary); - --rui-Button--filled--primary--default__background: var(--rui-color-action-primary); - --rui-Button--filled--primary--default__box-shadow: none; - --rui-Button--filled--primary--hover__color: var(--rui-color-action-on-primary); - --rui-Button--filled--primary--hover__border-color: var(--rui-color-action-primary-hover); - --rui-Button--filled--primary--hover__background: var(--rui-color-action-primary-hover); - --rui-Button--filled--primary--hover__box-shadow: none; - --rui-Button--filled--primary--active__color: var(--rui-color-action-on-primary); - --rui-Button--filled--primary--active__border-color: var(--rui-color-action-primary-active); - --rui-Button--filled--primary--active__background: var(--rui-color-action-primary-active); - --rui-Button--filled--primary--active__box-shadow: none; - - // Buttons: filled priority: secondary variant - --rui-Button--filled--secondary--default__color: var(--rui-color-action-on-secondary); - --rui-Button--filled--secondary--default__border-color: var(--rui-color-action-secondary); - --rui-Button--filled--secondary--default__background: var(--rui-color-action-secondary); - --rui-Button--filled--secondary--default__box-shadow: none; - --rui-Button--filled--secondary--hover__color: var(--rui-color-action-on-secondary); - --rui-Button--filled--secondary--hover__border-color: var(--rui-color-action-secondary-hover); - --rui-Button--filled--secondary--hover__background: var(--rui-color-action-secondary-hover); - --rui-Button--filled--secondary--hover__box-shadow: none; - --rui-Button--filled--secondary--active__color: var(--rui-color-action-on-secondary); - --rui-Button--filled--secondary--active__border-color: var(--rui-color-action-secondary-active); - --rui-Button--filled--secondary--active__background: var(--rui-color-action-secondary-active); - --rui-Button--filled--secondary--active__box-shadow: none; - - // Buttons: filled priority: selected variant - --rui-Button--filled--selected--default__color: var(--rui-color-action-on-selected); - --rui-Button--filled--selected--default__border-color: var(--rui-color-action-selected); - --rui-Button--filled--selected--default__background: var(--rui-color-action-selected); - --rui-Button--filled--selected--default__box-shadow: none; - --rui-Button--filled--selected--hover__color: var(--rui-color-action-on-selected); - --rui-Button--filled--selected--hover__border-color: var(--rui-color-action-selected-hover); - --rui-Button--filled--selected--hover__background: var(--rui-color-action-selected-hover); - --rui-Button--filled--selected--hover__box-shadow: none; - --rui-Button--filled--selected--active__color: var(--rui-color-action-on-selected); - --rui-Button--filled--selected--active__border-color: var(--rui-color-action-selected-active); - --rui-Button--filled--selected--active__background: var(--rui-color-action-selected-active); - --rui-Button--filled--selected--active__box-shadow: none; - - // Buttons: filled priority: success variant - --rui-Button--filled--success--default__color: var(--rui-color-feedback-on-success); - --rui-Button--filled--success--default__border-color: var(--rui-color-feedback-success); - --rui-Button--filled--success--default__background: var(--rui-color-feedback-success); - --rui-Button--filled--success--default__box-shadow: none; - --rui-Button--filled--success--hover__color: var(--rui-color-feedback-on-success); - --rui-Button--filled--success--hover__border-color: var(--rui-color-feedback-success-hover); - --rui-Button--filled--success--hover__background: var(--rui-color-feedback-success-hover); - --rui-Button--filled--success--hover__box-shadow: none; - --rui-Button--filled--success--active__color: var(--rui-color-feedback-on-success); - --rui-Button--filled--success--active__border-color: var(--rui-color-feedback-success-active); - --rui-Button--filled--success--active__background: var(--rui-color-feedback-success-active); - --rui-Button--filled--success--active__box-shadow: none; - - // Buttons: filled priority: warning variant - --rui-Button--filled--warning--default__color: var(--rui-color-feedback-on-warning); - --rui-Button--filled--warning--default__border-color: var(--rui-color-feedback-warning); - --rui-Button--filled--warning--default__background: var(--rui-color-feedback-warning); - --rui-Button--filled--warning--default__box-shadow: none; - --rui-Button--filled--warning--hover__color: var(--rui-color-feedback-on-warning); - --rui-Button--filled--warning--hover__border-color: var(--rui-color-feedback-warning-hover); - --rui-Button--filled--warning--hover__background: var(--rui-color-feedback-warning-hover); - --rui-Button--filled--warning--hover__box-shadow: none; - --rui-Button--filled--warning--active__color: var(--rui-color-feedback-on-warning); - --rui-Button--filled--warning--active__border-color: var(--rui-color-feedback-warning-active); - --rui-Button--filled--warning--active__background: var(--rui-color-feedback-warning-active); - --rui-Button--filled--warning--active__box-shadow: none; - - // Buttons: filled priority: danger variant - --rui-Button--filled--danger--default__color: var(--rui-color-feedback-on-danger); - --rui-Button--filled--danger--default__border-color: var(--rui-color-feedback-danger); - --rui-Button--filled--danger--default__background: var(--rui-color-feedback-danger); - --rui-Button--filled--danger--default__box-shadow: none; - --rui-Button--filled--danger--hover__color: var(--rui-color-feedback-on-danger); - --rui-Button--filled--danger--hover__border-color: var(--rui-color-feedback-danger-hover); - --rui-Button--filled--danger--hover__background: var(--rui-color-feedback-danger-hover); - --rui-Button--filled--danger--hover__box-shadow: none; - --rui-Button--filled--danger--active__color: var(--rui-color-feedback-on-danger); - --rui-Button--filled--danger--active__border-color: var(--rui-color-feedback-danger-active); - --rui-Button--filled--danger--active__background: var(--rui-color-feedback-danger-active); - --rui-Button--filled--danger--active__box-shadow: none; - - // Buttons: filled priority: help variant - --rui-Button--filled--help--default__color: var(--rui-color-feedback-on-help); - --rui-Button--filled--help--default__border-color: var(--rui-color-feedback-help); - --rui-Button--filled--help--default__background: var(--rui-color-feedback-help); - --rui-Button--filled--help--default__box-shadow: none; - --rui-Button--filled--help--hover__color: var(--rui-color-feedback-on-help); - --rui-Button--filled--help--hover__border-color: var(--rui-color-feedback-help-hover); - --rui-Button--filled--help--hover__background: var(--rui-color-feedback-help-hover); - --rui-Button--filled--help--hover__box-shadow: none; - --rui-Button--filled--help--active__color: var(--rui-color-feedback-on-help); - --rui-Button--filled--help--active__border-color: var(--rui-color-feedback-help-active); - --rui-Button--filled--help--active__background: var(--rui-color-feedback-help-active); - --rui-Button--filled--help--active__box-shadow: none; - - // Buttons: filled priority: info variant - --rui-Button--filled--info--default__color: var(--rui-color-feedback-on-info); - --rui-Button--filled--info--default__border-color: var(--rui-color-feedback-info); - --rui-Button--filled--info--default__background: var(--rui-color-feedback-info); - --rui-Button--filled--info--default__box-shadow: none; - --rui-Button--filled--info--hover__color: var(--rui-color-feedback-on-info); - --rui-Button--filled--info--hover__border-color: var(--rui-color-feedback-info-hover); - --rui-Button--filled--info--hover__background: var(--rui-color-feedback-info-hover); - --rui-Button--filled--info--hover__box-shadow: none; - --rui-Button--filled--info--active__color: var(--rui-color-feedback-on-info); - --rui-Button--filled--info--active__border-color: var(--rui-color-feedback-info-active); - --rui-Button--filled--info--active__background: var(--rui-color-feedback-info-active); - --rui-Button--filled--info--active__box-shadow: none; - - // Buttons: filled priority: note variant - --rui-Button--filled--note--default__color: var(--rui-color-feedback-on-note); - --rui-Button--filled--note--default__border-color: var(--rui-color-feedback-note); - --rui-Button--filled--note--default__background: var(--rui-color-feedback-note); - --rui-Button--filled--note--default__box-shadow: none; - --rui-Button--filled--note--hover__color: var(--rui-color-feedback-on-note); - --rui-Button--filled--note--hover__border-color: var(--rui-color-feedback-note-hover); - --rui-Button--filled--note--hover__background: var(--rui-color-feedback-note-hover); - --rui-Button--filled--note--hover__box-shadow: none; - --rui-Button--filled--note--active__color: var(--rui-color-feedback-on-note); - --rui-Button--filled--note--active__border-color: var(--rui-color-feedback-note-active); - --rui-Button--filled--note--active__background: var(--rui-color-feedback-note-active); - --rui-Button--filled--note--active__box-shadow: none; - - // Buttons: filled priority: light variant - --rui-Button--filled--light--default__color: var(--rui-color-neutral-on-light); - --rui-Button--filled--light--default__border-color: var(--rui-color-neutral-light); - --rui-Button--filled--light--default__background: var(--rui-color-neutral-light); - --rui-Button--filled--light--default__box-shadow: none; - --rui-Button--filled--light--hover__color: var(--rui-color-neutral-on-light); - --rui-Button--filled--light--hover__border-color: var(--rui-color-neutral-light-hover); - --rui-Button--filled--light--hover__background: var(--rui-color-neutral-light-hover); - --rui-Button--filled--light--hover__box-shadow: none; - --rui-Button--filled--light--active__color: var(--rui-color-neutral-on-light); - --rui-Button--filled--light--active__border-color: var(--rui-color-neutral-light-active); - --rui-Button--filled--light--active__background: var(--rui-color-neutral-light-active); - --rui-Button--filled--light--active__box-shadow: none; - - // Buttons: filled priority: dark variant - --rui-Button--filled--dark--default__color: var(--rui-color-neutral-on-dark); - --rui-Button--filled--dark--default__border-color: var(--rui-color-neutral-dark); - --rui-Button--filled--dark--default__background: var(--rui-color-neutral-dark); - --rui-Button--filled--dark--default__box-shadow: none; - --rui-Button--filled--dark--hover__color: var(--rui-color-neutral-on-dark); - --rui-Button--filled--dark--hover__border-color: var(--rui-color-neutral-dark-hover); - --rui-Button--filled--dark--hover__background: var(--rui-color-neutral-dark-hover); - --rui-Button--filled--dark--hover__box-shadow: none; - --rui-Button--filled--dark--active__color: var(--rui-color-neutral-on-dark); - --rui-Button--filled--dark--active__border-color: var(--rui-color-neutral-dark-active); - --rui-Button--filled--dark--active__background: var(--rui-color-neutral-dark-active); - --rui-Button--filled--dark--active__box-shadow: none; - - // Buttons: outline priority - - // Buttons: outline priority: primary variant - --rui-Button--outline--primary--default__color: var(--rui-color-action-primary); - --rui-Button--outline--primary--default__border-color: var(--rui-color-action-primary); - --rui-Button--outline--primary--default__background: transparent; - --rui-Button--outline--primary--hover__color: var(--rui-color-action-on-primary); - --rui-Button--outline--primary--hover__border-color: var(--rui-color-action-primary-hover); - --rui-Button--outline--primary--hover__background: var(--rui-color-action-primary-hover); - --rui-Button--outline--primary--active__color: var(--rui-color-action-on-primary); - --rui-Button--outline--primary--active__border-color: var(--rui-color-action-primary-active); - --rui-Button--outline--primary--active__background: var(--rui-color-action-primary-active); - - // Buttons: outline priority: secondary variant - --rui-Button--outline--secondary--default__color: var(--rui-color-action-secondary); - --rui-Button--outline--secondary--default__border-color: var(--rui-color-action-secondary); - --rui-Button--outline--secondary--default__background: transparent; - --rui-Button--outline--secondary--hover__color: var(--rui-color-action-on-secondary); - --rui-Button--outline--secondary--hover__border-color: var(--rui-color-action-secondary-hover); - --rui-Button--outline--secondary--hover__background: var(--rui-color-action-secondary-hover); - --rui-Button--outline--secondary--active__color: var(--rui-color-action-on-secondary); - --rui-Button--outline--secondary--active__border-color: var(--rui-color-action-secondary-active); - --rui-Button--outline--secondary--active__background: var(--rui-color-action-secondary-active); - - // Buttons: outline priority: selected variant - --rui-Button--outline--selected--default__color: var(--rui-color-action-selected); - --rui-Button--outline--selected--default__border-color: var(--rui-color-action-selected); - --rui-Button--outline--selected--default__background: var(--rui-color-background-selected); - --rui-Button--outline--selected--hover__color: var(--rui-color-action-on-selected); - --rui-Button--outline--selected--hover__border-color: var(--rui-color-action-selected-hover); - --rui-Button--outline--selected--hover__background: var(--rui-color-action-selected-hover); - --rui-Button--outline--selected--active__color: var(--rui-color-action-on-selected); - --rui-Button--outline--selected--active__border-color: var(--rui-color-action-selected-active); - --rui-Button--outline--selected--active__background: var(--rui-color-action-selected-active); - - // Buttons: outline priority: success variant - --rui-Button--outline--success--default__color: var(--rui-color-feedback-success); - --rui-Button--outline--success--default__border-color: var(--rui-color-feedback-success); - --rui-Button--outline--success--default__background: transparent; - --rui-Button--outline--success--hover__color: var(--rui-color-feedback-on-success); - --rui-Button--outline--success--hover__border-color: var(--rui-color-feedback-success-hover); - --rui-Button--outline--success--hover__background: var(--rui-color-feedback-success-hover); - --rui-Button--outline--success--active__color: var(--rui-color-feedback-on-success); - --rui-Button--outline--success--active__border-color: var(--rui-color-feedback-success-active); - --rui-Button--outline--success--active__background: var(--rui-color-feedback-success-active); - - // Buttons: outline priority: warning variant - --rui-Button--outline--warning--default__color: var(--rui-color-feedback-warning); - --rui-Button--outline--warning--default__border-color: var(--rui-color-feedback-warning); - --rui-Button--outline--warning--default__background: transparent; - --rui-Button--outline--warning--hover__color: var(--rui-color-feedback-on-warning); - --rui-Button--outline--warning--hover__border-color: var(--rui-color-feedback-warning-hover); - --rui-Button--outline--warning--hover__background: var(--rui-color-feedback-warning-hover); - --rui-Button--outline--warning--active__color: var(--rui-color-feedback-on-warning); - --rui-Button--outline--warning--active__border-color: var(--rui-color-feedback-warning-active); - --rui-Button--outline--warning--active__background: var(--rui-color-feedback-warning-active); - - // Buttons: outline priority: danger variant - --rui-Button--outline--danger--default__color: var(--rui-color-feedback-danger); - --rui-Button--outline--danger--default__border-color: var(--rui-color-feedback-danger); - --rui-Button--outline--danger--default__background: transparent; - --rui-Button--outline--danger--hover__color: var(--rui-color-feedback-on-danger); - --rui-Button--outline--danger--hover__border-color: var(--rui-color-feedback-danger-hover); - --rui-Button--outline--danger--hover__background: var(--rui-color-feedback-danger-hover); - --rui-Button--outline--danger--active__color: var(--rui-color-feedback-on-danger); - --rui-Button--outline--danger--active__border-color: var(--rui-color-feedback-danger-active); - --rui-Button--outline--danger--active__background: var(--rui-color-feedback-danger-active); - - // Buttons: outline priority: help variant - --rui-Button--outline--help--default__color: var(--rui-color-feedback-help); - --rui-Button--outline--help--default__border-color: var(--rui-color-feedback-help); - --rui-Button--outline--help--default__background: transparent; - --rui-Button--outline--help--hover__color: var(--rui-color-feedback-on-help); - --rui-Button--outline--help--hover__border-color: var(--rui-color-feedback-help-hover); - --rui-Button--outline--help--hover__background: var(--rui-color-feedback-help-hover); - --rui-Button--outline--help--active__color: var(--rui-color-feedback-on-help); - --rui-Button--outline--help--active__border-color: var(--rui-color-feedback-help-active); - --rui-Button--outline--help--active__background: var(--rui-color-feedback-help-active); - - // Buttons: outline priority: info variant - --rui-Button--outline--info--default__color: var(--rui-color-feedback-info); - --rui-Button--outline--info--default__border-color: var(--rui-color-feedback-info); - --rui-Button--outline--info--default__background: transparent; - --rui-Button--outline--info--hover__color: var(--rui-color-feedback-on-info); - --rui-Button--outline--info--hover__border-color: var(--rui-color-feedback-info-hover); - --rui-Button--outline--info--hover__background: var(--rui-color-feedback-info-hover); - --rui-Button--outline--info--active__color: var(--rui-color-feedback-on-info); - --rui-Button--outline--info--active__border-color: var(--rui-color-feedback-info-active); - --rui-Button--outline--info--active__background: var(--rui-color-feedback-info-active); - - // Buttons: outline priority: note variant - --rui-Button--outline--note--default__color: var(--rui-color-feedback-note); - --rui-Button--outline--note--default__border-color: var(--rui-color-feedback-note); - --rui-Button--outline--note--default__background: transparent; - --rui-Button--outline--note--hover__color: var(--rui-color-feedback-on-note); - --rui-Button--outline--note--hover__border-color: var(--rui-color-feedback-note-hover); - --rui-Button--outline--note--hover__background: var(--rui-color-feedback-note-hover); - --rui-Button--outline--note--active__color: var(--rui-color-feedback-on-note); - --rui-Button--outline--note--active__border-color: var(--rui-color-feedback-note-active); - --rui-Button--outline--note--active__background: var(--rui-color-feedback-note-active); - - // Buttons: outline priority: light variant - --rui-Button--outline--light--default__color: var(--rui-color-neutral-light); - --rui-Button--outline--light--default__border-color: var(--rui-color-neutral-light); - --rui-Button--outline--light--default__background: transparent; - --rui-Button--outline--light--hover__color: var(--rui-color-neutral-on-light); - --rui-Button--outline--light--hover__border-color: var(--rui-color-neutral-light-hover); - --rui-Button--outline--light--hover__background: var(--rui-color-neutral-light-hover); - --rui-Button--outline--light--active__color: var(--rui-color-neutral-on-light); - --rui-Button--outline--light--active__border-color: var(--rui-color-neutral-light-active); - --rui-Button--outline--light--active__background: var(--rui-color-neutral-light-active); - - // Buttons: outline priority: dark variant - --rui-Button--outline--dark--default__color: var(--rui-color-neutral-dark); - --rui-Button--outline--dark--default__border-color: var(--rui-color-neutral-dark); - --rui-Button--outline--dark--default__background: transparent; - --rui-Button--outline--dark--hover__color: var(--rui-color-neutral-on-dark); - --rui-Button--outline--dark--hover__border-color: var(--rui-color-neutral-dark-hover); - --rui-Button--outline--dark--hover__background: var(--rui-color-neutral-dark-hover); - --rui-Button--outline--dark--active__color: var(--rui-color-neutral-on-dark); - --rui-Button--outline--dark--active__border-color: var(--rui-color-neutral-dark-active); - --rui-Button--outline--dark--active__background: var(--rui-color-neutral-dark-active); - - // Buttons: flat - - // Buttons: flat priority: primary variant - --rui-Button--flat--primary--default__color: var(--rui-color-action-primary); - --rui-Button--flat--primary--default__background: transparent; - --rui-Button--flat--primary--hover__color: var(--rui-color-action-primary-hover); - --rui-Button--flat--primary--hover__background: var(--rui-color-background-primary); - --rui-Button--flat--primary--active__color: var(--rui-color-action-primary-active); - --rui-Button--flat--primary--active__background: var(--rui-color-background-primary); - - // Buttons: flat priority: secondary variant - --rui-Button--flat--secondary--default__color: var(--rui-color-action-secondary); - --rui-Button--flat--secondary--default__background: transparent; - --rui-Button--flat--secondary--hover__color: var(--rui-color-action-secondary-hover); - --rui-Button--flat--secondary--hover__background: var(--rui-color-background-secondary); - --rui-Button--flat--secondary--active__color: var(--rui-color-action-secondary-active); - --rui-Button--flat--secondary--active__background: var(--rui-color-background-secondary); - - // Buttons: flat priority: selected variant - --rui-Button--flat--selected--default__color: var(--rui-color-action-selected); - --rui-Button--flat--selected--default__background: var(--rui-color-background-selected); - --rui-Button--flat--selected--hover__color: var(--rui-color-action-selected-hover); - --rui-Button--flat--selected--hover__background: var(--rui-color-background-selected); - --rui-Button--flat--selected--active__color: var(--rui-color-action-selected-active); - --rui-Button--flat--selected--active__background: var(--rui-color-background-selected); - - // Buttons: flat priority: success variant - --rui-Button--flat--success--default__color: var(--rui-color-feedback-success); - --rui-Button--flat--success--default__background: transparent; - --rui-Button--flat--success--hover__color: var(--rui-color-feedback-success-hover); - --rui-Button--flat--success--hover__background: var(--rui-color-background-success); - --rui-Button--flat--success--active__color: var(--rui-color-feedback-success-active); - --rui-Button--flat--success--active__background: var(--rui-color-background-success); - - // Buttons: flat priority: warning variant - --rui-Button--flat--warning--default__color: var(--rui-color-feedback-warning); - --rui-Button--flat--warning--default__background: transparent; - --rui-Button--flat--warning--hover__color: var(--rui-color-feedback-warning-hover); - --rui-Button--flat--warning--hover__background: var(--rui-color-background-warning); - --rui-Button--flat--warning--active__color: var(--rui-color-feedback-warning-active); - --rui-Button--flat--warning--active__background: var(--rui-color-background-warning); - - // Buttons: flat priority: danger variant - --rui-Button--flat--danger--default__color: var(--rui-color-feedback-danger); - --rui-Button--flat--danger--default__background: transparent; - --rui-Button--flat--danger--hover__color: var(--rui-color-feedback-danger-hover); - --rui-Button--flat--danger--hover__background: var(--rui-color-background-danger); - --rui-Button--flat--danger--active__color: var(--rui-color-feedback-danger-active); - --rui-Button--flat--danger--active__background: var(--rui-color-background-danger); - - // Buttons: flat priority: help variant - --rui-Button--flat--help--default__color: var(--rui-color-feedback-help); - --rui-Button--flat--help--default__background: transparent; - --rui-Button--flat--help--hover__color: var(--rui-color-feedback-help-hover); - --rui-Button--flat--help--hover__background: var(--rui-color-background-help); - --rui-Button--flat--help--active__color: var(--rui-color-feedback-help-active); - --rui-Button--flat--help--active__background: var(--rui-color-background-help); - - // Buttons: flat priority: info variant - --rui-Button--flat--info--default__color: var(--rui-color-feedback-info); - --rui-Button--flat--info--default__background: transparent; - --rui-Button--flat--info--hover__color: var(--rui-color-feedback-info-hover); - --rui-Button--flat--info--hover__background: var(--rui-color-background-info); - --rui-Button--flat--info--active__color: var(--rui-color-feedback-info-active); - --rui-Button--flat--info--active__background: var(--rui-color-background-info); - - // Buttons: flat priority: note variant - --rui-Button--flat--note--default__color: var(--rui-color-feedback-note); - --rui-Button--flat--note--default__background: transparent; - --rui-Button--flat--note--hover__color: var(--rui-color-feedback-note-hover); - --rui-Button--flat--note--hover__background: var(--rui-color-background-note); - --rui-Button--flat--note--active__color: var(--rui-color-feedback-note-active); - --rui-Button--flat--note--active__background: var(--rui-color-background-note); - - // Buttons: flat priority: light variant - --rui-Button--flat--light--default__color: var(--rui-color-neutral-light); - --rui-Button--flat--light--default__background: transparent; - --rui-Button--flat--light--hover__color: var(--rui-color-neutral-light-hover); - --rui-Button--flat--light--hover__background: var(--rui-color-background-dark); - --rui-Button--flat--light--active__color: var(--rui-color-neutral-light-active); - --rui-Button--flat--light--active__background: var(--rui-color-background-dark); - - // Buttons: flat priority: dark variant - --rui-Button--flat--dark--default__color: var(--rui-color-neutral-dark); - --rui-Button--flat--dark--default__background: transparent; - --rui-Button--flat--dark--hover__color: var(--rui-color-neutral-dark-hover); - --rui-Button--flat--dark--hover__background: var(--rui-color-background-light); - --rui-Button--flat--dark--active__color: var(--rui-color-neutral-dark-active); - --rui-Button--flat--dark--active__background: var(--rui-color-background-light); - - // Buttons: sizes - - // Buttons: sizes: small - --rui-Button--small__height: 1.75rem; - --rui-Button--small__padding-y: var(--rui-dimension-space-1); - --rui-Button--small__padding-x: var(--rui-dimension-space-3); - --rui-Button--small__font-size: var(--rui-font-size-small); - - // Buttons: sizes: medium - --rui-Button--medium__height: 2.25rem; - --rui-Button--medium__padding-y: var(--rui-dimension-space-1); - --rui-Button--medium__padding-x: var(--rui-dimension-space-4); - --rui-Button--medium__font-size: var(--rui-font-size-1); - - // Buttons: sizes: large - --rui-Button--large__height: 2.75rem; - --rui-Button--large__padding-y: var(--rui-dimension-space-2); - --rui-Button--large__padding-x: var(--rui-dimension-space-5); - --rui-Button--large__font-size: var(--rui-font-size-2); - - // - // ButtonGroup - // =========== - - --rui-ButtonGroup__inner-border-radius: 0; - - // ButtonGroup: filled buttons - --rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width)); - --rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width); - --rui-ButtonGroup--filled__separator__color: currentcolor; - - // ButtonGroup: outline buttons - --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width)); - --rui-ButtonGroup--outline__separator__width: 0; - --rui-ButtonGroup--outline__separator__color: transparent; - - // ButtonGroup: flat buttons - --rui-ButtonGroup--flat__gap: var(--rui-Button__border-width); - --rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap); - --rui-ButtonGroup--flat__separator__color: currentcolor; - - // - // Card - // ==== - - --rui-Card__padding: var(--rui-dimension-space-4); - --rui-Card__border-width: var(--rui-dimension-border-width-1); - --rui-Card__border-radius: var(--rui-dimension-radius-2); - --rui-Card--dense__padding: var(--rui-dimension-space-2); - --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1); - --rui-Card--disabled__background-color: var(--rui-color-background-disabled); - --rui-Card--disabled__opacity: var(--rui-ratio-disabled-opacity); - - // Card: variant: success - --rui-Card--success__color: var(--rui-color-text-primary); - --rui-Card--success__border-color: var(--rui-color-feedback-success); - --rui-Card--success__background-color: var(--rui-color-background-layer-1); - - // Card: variant: warning - --rui-Card--warning__color: var(--rui-color-text-primary); - --rui-Card--warning__border-color: var(--rui-color-feedback-warning); - --rui-Card--warning__background-color: var(--rui-color-background-layer-1); - - // Card: variant: danger - --rui-Card--danger__color: var(--rui-color-text-primary); - --rui-Card--danger__border-color: var(--rui-color-feedback-danger); - --rui-Card--danger__background-color: var(--rui-color-background-layer-1); - - // Card: variant: info - --rui-Card--info__color: var(--rui-color-text-primary); - --rui-Card--info__border-color: var(--rui-color-feedback-info); - --rui-Card--info__background-color: var(--rui-color-background-layer-1); - - // Card: variant: help - --rui-Card--help__color: var(--rui-color-text-primary); - --rui-Card--help__border-color: var(--rui-color-feedback-help); - --rui-Card--help__background-color: var(--rui-color-background-layer-1); - - // Card: variant: note - --rui-Card--note__color: var(--rui-color-text-primary); - --rui-Card--note__border-color: var(--rui-color-feedback-note); - --rui-Card--note__background-color: var(--rui-color-background-layer-1); - - // Card: variant: light - --rui-Card--light__color: var(--rui-color-text-primary); - --rui-Card--light__border-color: var(--rui-color-neutral-light); - --rui-Card--light__background-color: var(--rui-color-background-layer-1); - - // Card: variant: dark - --rui-Card--dark__color: var(--rui-color-neutral-on-dark); - --rui-Card--dark__border-color: var(--rui-color-neutral-on-dark); - --rui-Card--dark__background-color: var(--rui-color-background-dark); - - // - // Form Fields - // =========== - // - // 1. Please note that `min-width` values under cca 150 px do not take effect due to default input - // width defined in browsers unless `width` (same or smaller) is also defined. - // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size - // - // 2. Append non-breaking space and asterisk to required filed labels. - // - // 3. Avoid using `fit-content()` for label width, it behaves differently in Chrome vs. FF for - // inline grid. - - // Forms fields: common properties - --rui-FormField__label__color: inherit; - --rui-FormField__label__font-size: var(--rui-font-size-1); - --rui-FormField__help-text__font-size: var(--rui-font-size-small); - --rui-FormField__help-text__font-style: normal; - --rui-FormField__help-text__color: var(--rui-color-text-secondary); - --rui-FormField--required__label__color: inherit; - --rui-FormField--required__sign: "\00a0*"; // 2. - --rui-FormField--required__sign__color: var(--rui-color-text-secondary); - - // Form fields: horizontal layout - --rui-FormField--horizontal__label__text-align: left; - --rui-FormField--horizontal__label__min-width: 0; - --rui-FormField--horizontal__label__width: minmax(auto, 50%); // 3. - --rui-FormField--horizontal__label__vertical-alignment: initial; - --rui-FormField--horizontal__field__vertical-alignment: initial; - --rui-FormField--horizontal--full-width__label__width: fit-content(50%); - - // Forms fields: disabled state - --rui-FormField--disabled__cursor: var(--rui-cursor-not-allowed); - --rui-FormField--disabled__opacity: var(--rui-ratio-disabled-opacity); - - // Form fields: validation states: invalid - --rui-FormField--invalid--default__border-color: var(--rui-color-feedback-danger); - --rui-FormField--invalid--default__background: var(--rui-color-background-danger); - --rui-FormField--invalid--default__check-background-color: var(--rui-FormField--invalid--default__background); - --rui-FormField--invalid--default__surrounding-text-color: var(--rui-color-feedback-danger); - --rui-FormField--invalid--checked__check-background-color: var(--rui-FormField--invalid--default__border-color); - - // Form fields: validation states: valid - --rui-FormField--valid--default__border-color: var(--rui-color-feedback-success); - --rui-FormField--valid--default__background: var(--rui-color-background-success); - --rui-FormField--valid--default__check-background-color: var(--rui-FormField--valid--default__background); - --rui-FormField--valid--default__surrounding-text-color: var(--rui-color-feedback-success); - --rui-FormField--valid--checked__check-background-color: var(--rui-FormField--valid--default__border-color); - - // Form fields: validation states: warning - --rui-FormField--warning--default__border-color: var(--rui-color-feedback-warning-hover); - --rui-FormField--warning--default__background: var(--rui-color-background-warning); - --rui-FormField--warning--default__check-background-color: var(--rui-FormField--warning--default__background); - --rui-FormField--warning--default__surrounding-text-color: var(--rui-color-feedback-warning-active); - --rui-FormField--warning--checked__check-background-color: var(--rui-FormField--warning--default__border-color); - - // Form fields: box fields - --rui-FormField--box__border-width: var(--rui-dimension-border-width-1); - --rui-FormField--box__border-radius: var(--rui-dimension-radius-2); - --rui-FormField--box__input__width: auto; // 1. - --rui-FormField--box__input__min-width: 240px; // 1. - --rui-FormField--box__placeholder__color: var(--rui-color-text-secondary); - --rui-FormField--box--select__caret__border-style: none; - --rui-FormField--box--select__caret__background: transparent; - --rui-FormField--box--select__option--disabled__color: var(--rui-color-text-primary-disabled); - - // Form fields: box field sizes: small - --rui-FormField--box--small__height: var(--rui-Button--small__height); - --rui-FormField--box--small__padding-y: 0.0625rem; - --rui-FormField--box--small__padding-x: var(--rui-dimension-space-2); - --rui-FormField--box--small__font-size: var(--rui-font-size-small); - - // Form fields: box field sizes: medium - --rui-FormField--box--medium__height: var(--rui-Button--medium__height); - --rui-FormField--box--medium__padding-y: 0.3125rem; - --rui-FormField--box--medium__padding-x: var(--rui-dimension-space-3); - --rui-FormField--box--medium__font-size: var(--rui-font-size-1); - - // Form fields: box field sizes: large - --rui-FormField--box--large__height: var(--rui-Button--large__height); - --rui-FormField--box--large__padding-y: 0.5625rem; - --rui-FormField--box--large__padding-x: var(--rui-dimension-space-4); - --rui-FormField--box--large__font-size: var(--rui-font-size-2); - - // Form fields: box field variants: filled variant interaction states - --rui-FormField--box--filled--default__color: var(--rui-color-text-primary); - --rui-FormField--box--filled--default__border-color: var(--rui-color-border-primary); - --rui-FormField--box--filled--default__background: var(--rui-color-background-basic); - --rui-FormField--box--filled--default__box-shadow: none; - --rui-FormField--box--filled--hover__border-color: var(--rui-color-border-primary-hover); - --rui-FormField--box--filled--focus__border-color: var(--rui-color-border-primary-active); - - // Form fields: box field variants: outline variant interaction states - --rui-FormField--box--outline--default__color: var(--rui-color-text-primary); - --rui-FormField--box--outline--default__border-color: var(--rui-color-border-primary); - --rui-FormField--box--outline--default__background: var(--rui-color-background-basic); - --rui-FormField--box--outline--default__box-shadow: none; - --rui-FormField--box--outline--hover__border-color: var(--rui-color-border-primary-hover); - --rui-FormField--box--outline--focus__border-color: var(--rui-color-border-primary-active); - - // Form fields: check fields - --rui-FormField--check__input__size: 1.125rem; - --rui-FormField--check__input__border-width: var(--rui-FormField--box__border-width); - --rui-FormField--check__input--focus__box-shadow: var(--rui-shadow-focus-ring); - --rui-FormField--check__tap-target-size: var(--rui-dimension-tap-target-size); - - // Form fields: check fields, component specific - --rui-FormField--check__input--checkbox__border-radius: var(--rui-FormField--box__border-radius); - --rui-FormField--check__input--checkbox--checked__background-image: #{svg.$checkbox-checked}; - --rui-FormField--check__input--radio__border-radius: 50%; - --rui-FormField--check__input--radio--checked__background-image: #{svg.$radio-checked}; - --rui-FormField--check__input--toggle__width: 2.25rem; - --rui-FormField--check__input--toggle__border-radius: 0.5625rem; - --rui-FormField--check__input--toggle__background-size: contain; - --rui-FormField--check__input--toggle--default__background-image: #{svg.$toggle}; - --rui-FormField--check__input--toggle--default__background-position: left center; - --rui-FormField--check__input--toggle--checked__background-image: #{svg.$toggle-checked}; - --rui-FormField--check__input--toggle--checked__background-position: right center; - - // Form fields: check fields interaction states - --rui-FormField--check--default__border-color: var(--rui-color-border-primary); - --rui-FormField--check--default__check-background-color: var(--rui-color-background-basic); - --rui-FormField--check--checked__border-color: var(--rui-color-action-selected); - --rui-FormField--check--checked__check-background-color: var(--rui-color-action-selected); - - // - // FormLayout - // ========== - - --rui-FormLayout__row-gap: var(--rui-dimension-space-4); - --rui-FormLayout--horizontal__label__width: 10em; - --rui-FormLayout--horizontal__label__width--auto: auto; - --rui-FormLayout--horizontal__label__width--limited: fit-content(50%); - - // - // InputGroup - // ======= - - --rui-InputGroup__gap: var(--rui-dimension-space-1); - --rui-InputGroup__inner-border-radius: var(--rui-dimension-radius-1); - - // - // Modal - // ===== - - --rui-Modal__padding-x: var(--rui-dimension-space-4); - --rui-Modal__padding-y: var(--rui-dimension-space-4); - --rui-Modal__background: var(--rui-color-background-layer-2); - --rui-Modal__box-shadow: var(--rui-shadow-layer-2); - --rui-Modal__separator__width: var(--rui-dimension-border-width-1); - --rui-Modal__separator__color: var(--rui-color-border-secondary); - --rui-Modal__header__gap: var(--rui-dimension-space-2); - --rui-Modal__outer-spacing--xs: var(--rui-dimension-space-2); - --rui-Modal__outer-spacing--sm: var(--rui-dimension-space-6); - --rui-Modal__footer__background: var(--rui-Modal__background); - --rui-Modal__footer__gap: var(--rui-dimension-space-2); - --rui-Modal__backdrop__background: rgb(0 0 0 / 50%); - --rui-Modal--auto__min-width: 18rem; - --rui-Modal--auto__max-width: 60rem; - --rui-Modal--small__width: 20rem; - --rui-Modal--medium__width: 40rem; - --rui-Modal--large__width: 60rem; - --rui-Modal--fullscreen__width: 100%; - --rui-Modal--fullscreen__height: 100%; - - // - // Paper - // ===== - - --rui-Paper__padding: var(--rui-dimension-space-4); - --rui-Paper__border-width: 0; - --rui-Paper__border-color: transparent; - --rui-Paper__border-radius: var(--rui-dimension-radius-2); - --rui-Paper__background-color: var(--rui-color-background-layer-1); - --rui-Paper--muted__background-color: var(--rui-color-background-disabled); - --rui-Paper--muted__opacity: var(--rui-ratio-disabled-opacity); - --rui-Paper--raised__box-shadow: var(--rui-shadow-layer-1); - - // - // Popover - // ======= - - --rui-Popover__max-width: 15rem; - --rui-Popover__padding: var(--rui-dimension-space-3); - --rui-Popover__border-width: 0; - --rui-Popover__border-color: transparent; - --rui-Popover__border-radius: var(--rui-dimension-radius-2); - --rui-Popover__color: var(--rui-color-text-primary); - --rui-Popover__background-color: var(--rui-color-background-layer-2); - --rui-Popover__box-shadow: var(--rui-shadow-layer-2); - - // - // Tabs - // ==== - - --rui-Tabs__border-bottom-width: var(--rui-dimension-border-width-1); - --rui-Tabs__border-bottom-color: var(--rui-color-border-primary); - --rui-Tabs__gap--xs: var(--rui-dimension-space-1); - --rui-Tabs__gap--sm: var(--rui-dimension-space-1); - --rui-Tabs__gap--md: var(--rui-dimension-space-1); - --rui-Tabs__padding-x: 0; - - // Tabs items - --rui-Tabs__item__padding--xs: var(--rui-dimension-space-3); - --rui-Tabs__item__padding--sm: var(--rui-dimension-space-4); - --rui-Tabs__item__padding--md: var(--rui-dimension-space-4); - --rui-Tabs__item__font-weight: inherit; - --rui-Tabs__item__color: var(--rui-color-text-secondary); - --rui-Tabs__item__border-width: var(--rui-dimension-border-width-1); - --rui-Tabs__item__border-color: - var(--rui-color-border-secondary) - var(--rui-color-border-secondary) - transparent - var(--rui-color-border-secondary); - --rui-Tabs__item__border-radius: var(--rui-dimension-radius-2); - --rui-Tabs__item__background-color: var(--rui-color-background-layer-1); - --rui-Tabs__item__box-shadow: none; - --rui-Tabs__item__icon__gap: var(--rui-dimension-space-2); - - // Tabs items: hover - --rui-Tabs__item--hover__font-weight: var(--rui-Tabs__item__font-weight); - --rui-Tabs__item--hover__color: var(--rui-Tabs__item__color); - --rui-Tabs__item--hover__border-width: var(--rui-Tabs__item__border-width); - --rui-Tabs__item--hover__border-color: var(--rui-Tabs__item__border-color); - --rui-Tabs__item--hover__background-color: var(--rui-Tabs__item__background-color); - --rui-Tabs__item--hover__box-shadow: var(--rui-Tabs__item__box-shadow); - --rui-Tabs__item--hover__shift-y: -0.15rem; - --rui-Tabs__item--hover__label__shift-y: 0; - - // Tabs items: active - --rui-Tabs__item--active__font-weight: inherit; - --rui-Tabs__item--active__color: var(--rui-color-text-primary); - --rui-Tabs__item--active__border-width: var(--rui-Tabs__item__border-width); - --rui-Tabs__item--active__border-color: - var(--rui-Tabs__border-bottom-color) - var(--rui-Tabs__border-bottom-color) - transparent - var(--rui-Tabs__border-bottom-color); - --rui-Tabs__item--active__background-color: var(--rui-Tabs__item__background-color); - --rui-Tabs__item--active__box-shadow: var(--rui-Tabs__item__box-shadow); - --rui-Tabs__item--active__shift-y: -0.25em; - --rui-Tabs__item--active__label__shift-y: 0; - - // - // TextLink - // ======== - - --rui-TextLink__color: var(--rui-color-text-link); - --rui-TextLink__text-decoration: var(--rui-text-decoration-link); - --rui-TextLink--hover__color: var(--rui-color-text-link-hover); - --rui-TextLink--hover__text-decoration: var(--rui-text-decoration-link-hover); - --rui-TextLink--active__color: var(--rui-color-text-link-active); - --rui-TextLink--active__text-decoration: var(--rui-text-decoration-link-active); - - // - // Toolbar - // ======= - - --rui-Toolbar__gap: var(--rui-dimension-space-4); - --rui-Toolbar__gap--dense: var(--rui-dimension-space-2); +@layer theme { + :root, + :host { + // ============================================================================================ // + // GLOBAL TOKENS // + // ============================================================================================ // + + // + // Dimensions + // ========== + + // Borders + --rui-dimension-border-width-1: 1px; + + // Breakpoints + // + // ⚠️ Breakpoints are read-only in CSS. Custom properties cannot be used within media queries + // since media query is not a property. + // https://www.w3.org/TR/css-variables-1/#using-variables + --rui-dimension-breakpoint-xs: #{breakpoints.$xs}; + --rui-dimension-breakpoint-sm: #{breakpoints.$sm}; + --rui-dimension-breakpoint-md: #{breakpoints.$md}; + --rui-dimension-breakpoint-lg: #{breakpoints.$lg}; + --rui-dimension-breakpoint-xl: #{breakpoints.$xl}; + --rui-dimension-breakpoint-x2l: #{breakpoints.$x2l}; + --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l}; + + // Radii + --rui-dimension-radius-1: 0.125rem; + --rui-dimension-radius-2: 0.25rem; + + // Spacing + --rui-dimension-space-0: 0; + --rui-dimension-space-1: 0.25rem; + --rui-dimension-space-2: 0.5rem; + --rui-dimension-space-3: 0.75rem; + --rui-dimension-space-4: 1rem; + --rui-dimension-space-5: 1.5rem; + --rui-dimension-space-6: 2rem; + --rui-dimension-space-7: 2.5rem; + + // + // Font Families + // ============= + + --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif; + --rui-font-family-monospace: + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + monospace; + + // + // Font Weights + // ============ + + --rui-font-weight-base: 400; + --rui-font-weight-light: 300; + --rui-font-weight-bold: 700; + + // + // Ratios + // ====== + + --rui-ratio-opacity-medium: 0.5; + + // + // Shadows + // ======= + + --rui-shadow-1: 0 0.01rem 0.65rem -0.1rem rgb(0 0 0 / 30%); + --rui-shadow-2: 0.2rem 0.25rem 1.2rem -0.1rem rgb(0 0 0 / 15%); + + // + // Other + // ===== + + // ⚠️ Non-standard token types! + // The DTF specification is still in the draft status, and the following token types have proven necessary. + // + // To be honest, some of these tokens are NOT context agnostic as required by the global tokens category. + // These will be probably superseded by semantic typography styles in the future. + + // Font sizes + --rui-font-size-base: 100%; + --rui-font-size-small: 0.889rem; + --rui-font-size-smaller: 0.75rem; + --rui-font-size-code: 85%; + + // Modular scale ratio: 1.125 / 8:9 / major second + --rui-font-size-1: 1rem; + --rui-font-size-2: 1.125rem; + --rui-font-size-3: 1.266rem; + --rui-font-size-4: 1.424rem; + --rui-font-size-5: 1.602rem; + --rui-font-size-6: 1.802rem; + + // Line heights + --rui-line-height-base: 1.5; + --rui-line-height-small: 1.25; + + // Text decorations + --rui-text-decoration-link: none; + --rui-text-decoration-link-hover: underline; + --rui-text-decoration-link-active: underline; + + // List styles + --rui-list-style-unordered: square; + + // Cursors + --rui-cursor-not-allowed: not-allowed; + + // ============================================================================================ // + // SEMANTIC TOKENS // + // ============================================================================================ // + + // + // Borders + // ======= + + --rui-border-focus-ring: var(--rui-dimension-space-1) solid #{colors.$focus}; + + // + // Colors + // ====== + + // 👉 Actual color values are stored in separate SCSS so they can be generated programmatically. + + // Text colors + --rui-color-text-primary: #{colors.$black}; + --rui-color-text-primary-disabled: #{colors.$gray-300}; + --rui-color-text-secondary: #{colors.$gray-500}; + --rui-color-text-secondary-disabled: #{colors.$gray-300}; + --rui-color-text-link: #{colors.$note}; + --rui-color-text-link-hover: #{colors.$note-dark}; + --rui-color-text-link-active: #{colors.$note-darker}; + + // Action colors + --rui-color-action-primary: #{colors.$primary}; + --rui-color-action-primary-hover: #{colors.$primary-dark}; + --rui-color-action-primary-active: #{colors.$primary-darker}; + --rui-color-action-on-primary: #{colors.$on-primary}; + --rui-color-action-secondary: #{colors.$secondary}; + --rui-color-action-secondary-hover: #{colors.$secondary-dark}; + --rui-color-action-secondary-active: #{colors.$secondary-darker}; + --rui-color-action-on-secondary: #{colors.$on-secondary}; + --rui-color-action-selected: #{colors.$selected}; + --rui-color-action-selected-hover: #{colors.$selected-dark}; + --rui-color-action-selected-active: #{colors.$selected-darker}; + --rui-color-action-on-selected: #{colors.$on-selected}; + + // Feedback colors + --rui-color-feedback-success: #{colors.$success}; + --rui-color-feedback-success-hover: #{colors.$success-dark}; + --rui-color-feedback-success-active: #{colors.$success-darker}; + --rui-color-feedback-on-success: #{colors.$on-success}; + --rui-color-feedback-warning: #{colors.$warning}; + --rui-color-feedback-warning-hover: #{colors.$warning-dark}; + --rui-color-feedback-warning-active: #{colors.$warning-darker}; + --rui-color-feedback-on-warning: #{colors.$on-warning}; + --rui-color-feedback-danger: #{colors.$danger}; + --rui-color-feedback-danger-hover: #{colors.$danger-dark}; + --rui-color-feedback-danger-active: #{colors.$danger-darker}; + --rui-color-feedback-on-danger: #{colors.$on-danger}; + --rui-color-feedback-help: #{colors.$help}; + --rui-color-feedback-help-hover: #{colors.$help-dark}; + --rui-color-feedback-help-active: #{colors.$help-darker}; + --rui-color-feedback-on-help: #{colors.$on-help}; + --rui-color-feedback-info: #{colors.$info}; + --rui-color-feedback-info-hover: #{colors.$info-dark}; + --rui-color-feedback-info-active: #{colors.$info-darker}; + --rui-color-feedback-on-info: #{colors.$on-info}; + --rui-color-feedback-note: #{colors.$note}; + --rui-color-feedback-note-hover: #{colors.$note-dark}; + --rui-color-feedback-note-active: #{colors.$note-darker}; + --rui-color-feedback-on-note: #{colors.$on-note}; + + // Neutral colors + --rui-color-neutral-light: #{colors.$white}; + --rui-color-neutral-light-hover: #{colors.$gray-50}; + --rui-color-neutral-light-active: #{colors.$gray-100}; + --rui-color-neutral-on-light: #{colors.$gray-700}; + --rui-color-neutral-dark: #{colors.$gray-700}; + --rui-color-neutral-dark-hover: #{colors.$gray-800}; + --rui-color-neutral-dark-active: #{colors.$gray-900}; + --rui-color-neutral-on-dark: #{colors.$white}; + + // Background colors + --rui-color-background-base: #{colors.$gray-50}; + --rui-color-background-layer-1: #{colors.$white}; + --rui-color-background-layer-2: #{colors.$white}; + --rui-color-background-basic: #{colors.$white}; + --rui-color-background-disabled: #{colors.$gray-50}; + --rui-color-background-interactive: #{colors.$transparent}; + --rui-color-background-interactive-hover: #{colors.$gray-50}; + --rui-color-background-interactive-active: #{colors.$gray-100}; + --rui-color-background-primary: #{colors.$primary-light}; + --rui-color-background-secondary: #{colors.$secondary-light}; + --rui-color-background-selected: #{colors.$selected-light}; + --rui-color-background-success: #{colors.$success-light}; + --rui-color-background-warning: #{colors.$warning-light}; + --rui-color-background-danger: #{colors.$danger-light}; + --rui-color-background-help: #{colors.$help-light}; + --rui-color-background-info: #{colors.$info-light}; + --rui-color-background-note: #{colors.$note-light}; + --rui-color-background-light: #{colors.$gray-100}; + --rui-color-background-dark: #{colors.$gray-600}; + + // Border colors + --rui-color-border-primary: #{colors.$gray-200}; + --rui-color-border-primary-hover: #{colors.$gray-500}; + --rui-color-border-primary-active: #{colors.$selected-darker}; + --rui-color-border-secondary: #{colors.$gray-100}; + + // + // Dimensions + // ========== + + // Accessibility + --rui-dimension-focus-ring-offset: var(--rui-dimension-border-width-1); + --rui-dimension-tap-target-size: var(--rui-dimension-space-7); + + // Shared bottom spacings + --rui-dimension-space-bottom-base: var(--rui-dimension-space-5); + --rui-dimension-space-bottom-headings: var(--rui-dimension-space-5); + --rui-dimension-space-bottom-layouts: var(--rui-dimension-space-5); + + // + // Ratios + // ====== + + --rui-ratio-disabled-opacity: var(--rui-ratio-opacity-medium); + + // + // Shadows + // ======= + + // 1. Use `initial`, `revert` or `unset` to keep the original box shadow of the component. + + --rui-shadow-layer-1: var(--rui-shadow-1); + --rui-shadow-layer-2: var(--rui-shadow-2); + --rui-shadow-focus-ring: initial; // 1. + + // ============================================================================================ // + // COMPONENT TOKENS // + // ============================================================================================ // + + // + // Alert + // ===== + + // Alert: common properties + --rui-Alert__padding: var(--rui-dimension-space-3); + --rui-Alert__font-weight: var(--rui-font-weight-base); + --rui-Alert__border-width: var(--rui-dimension-border-width-1); + --rui-Alert__border-radius: var(--rui-dimension-radius-2); + --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold); + --rui-Alert__stripe__width: var(--rui-dimension-border-width-1); + + // Alert: variant: success + --rui-Alert--success__color: var(--rui-color-text-primary); + --rui-Alert--success__foreground-color: var(--rui-color-feedback-success); + --rui-Alert--success__background-color: var(--rui-color-background-success); + + // Alert: variant: warning + --rui-Alert--warning__color: var(--rui-color-text-primary); + --rui-Alert--warning__foreground-color: var(--rui-color-feedback-warning); + --rui-Alert--warning__background-color: var(--rui-color-background-warning); + + // Alert: variant: danger + --rui-Alert--danger__color: var(--rui-color-text-primary); + --rui-Alert--danger__foreground-color: var(--rui-color-feedback-danger); + --rui-Alert--danger__background-color: var(--rui-color-background-danger); + + // Alert: variant: info + --rui-Alert--info__color: var(--rui-color-text-primary); + --rui-Alert--info__foreground-color: var(--rui-color-feedback-info); + --rui-Alert--info__background-color: var(--rui-color-background-info); + + // Alert: variant: help + --rui-Alert--help__color: var(--rui-color-text-primary); + --rui-Alert--help__foreground-color: var(--rui-color-feedback-help); + --rui-Alert--help__background-color: var(--rui-color-background-help); + + // Alert: variant: note + --rui-Alert--note__color: var(--rui-color-text-primary); + --rui-Alert--note__foreground-color: var(--rui-color-feedback-note); + --rui-Alert--note__background-color: var(--rui-color-background-note); + + // Alert: variant: light + --rui-Alert--light__color: var(--rui-color-neutral-on-light); + --rui-Alert--light__foreground-color: var(--rui-color-neutral-on-light); + --rui-Alert--light__background-color: var(--rui-color-background-light); + + // Alert: variant: dark + --rui-Alert--dark__color: var(--rui-color-neutral-on-dark); + --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark); + --rui-Alert--dark__background-color: var(--rui-color-background-dark); + + // + // Button + // ====== + + // Buttons: common properties + --rui-Button__font-weight: var(--rui-font-weight-base); + --rui-Button__letter-spacing: 0; + --rui-Button__text-transform: none; + --rui-Button__border-width: var(--rui-dimension-border-width-1); + --rui-Button__border-radius: var(--rui-dimension-radius-2); + --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity); + --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed); + --rui-Button--feedback__opacity: 1; + --rui-Button--feedback__cursor: var(--rui-cursor-not-allowed); + + // Buttons: filled priority + + // Buttons: filled priority: primary variant + --rui-Button--filled--primary--default__color: var(--rui-color-action-on-primary); + --rui-Button--filled--primary--default__border-color: var(--rui-color-action-primary); + --rui-Button--filled--primary--default__background: var(--rui-color-action-primary); + --rui-Button--filled--primary--default__box-shadow: none; + --rui-Button--filled--primary--hover__color: var(--rui-color-action-on-primary); + --rui-Button--filled--primary--hover__border-color: var(--rui-color-action-primary-hover); + --rui-Button--filled--primary--hover__background: var(--rui-color-action-primary-hover); + --rui-Button--filled--primary--hover__box-shadow: none; + --rui-Button--filled--primary--active__color: var(--rui-color-action-on-primary); + --rui-Button--filled--primary--active__border-color: var(--rui-color-action-primary-active); + --rui-Button--filled--primary--active__background: var(--rui-color-action-primary-active); + --rui-Button--filled--primary--active__box-shadow: none; + + // Buttons: filled priority: secondary variant + --rui-Button--filled--secondary--default__color: var(--rui-color-action-on-secondary); + --rui-Button--filled--secondary--default__border-color: var(--rui-color-action-secondary); + --rui-Button--filled--secondary--default__background: var(--rui-color-action-secondary); + --rui-Button--filled--secondary--default__box-shadow: none; + --rui-Button--filled--secondary--hover__color: var(--rui-color-action-on-secondary); + --rui-Button--filled--secondary--hover__border-color: var(--rui-color-action-secondary-hover); + --rui-Button--filled--secondary--hover__background: var(--rui-color-action-secondary-hover); + --rui-Button--filled--secondary--hover__box-shadow: none; + --rui-Button--filled--secondary--active__color: var(--rui-color-action-on-secondary); + --rui-Button--filled--secondary--active__border-color: var(--rui-color-action-secondary-active); + --rui-Button--filled--secondary--active__background: var(--rui-color-action-secondary-active); + --rui-Button--filled--secondary--active__box-shadow: none; + + // Buttons: filled priority: selected variant + --rui-Button--filled--selected--default__color: var(--rui-color-action-on-selected); + --rui-Button--filled--selected--default__border-color: var(--rui-color-action-selected); + --rui-Button--filled--selected--default__background: var(--rui-color-action-selected); + --rui-Button--filled--selected--default__box-shadow: none; + --rui-Button--filled--selected--hover__color: var(--rui-color-action-on-selected); + --rui-Button--filled--selected--hover__border-color: var(--rui-color-action-selected-hover); + --rui-Button--filled--selected--hover__background: var(--rui-color-action-selected-hover); + --rui-Button--filled--selected--hover__box-shadow: none; + --rui-Button--filled--selected--active__color: var(--rui-color-action-on-selected); + --rui-Button--filled--selected--active__border-color: var(--rui-color-action-selected-active); + --rui-Button--filled--selected--active__background: var(--rui-color-action-selected-active); + --rui-Button--filled--selected--active__box-shadow: none; + + // Buttons: filled priority: success variant + --rui-Button--filled--success--default__color: var(--rui-color-feedback-on-success); + --rui-Button--filled--success--default__border-color: var(--rui-color-feedback-success); + --rui-Button--filled--success--default__background: var(--rui-color-feedback-success); + --rui-Button--filled--success--default__box-shadow: none; + --rui-Button--filled--success--hover__color: var(--rui-color-feedback-on-success); + --rui-Button--filled--success--hover__border-color: var(--rui-color-feedback-success-hover); + --rui-Button--filled--success--hover__background: var(--rui-color-feedback-success-hover); + --rui-Button--filled--success--hover__box-shadow: none; + --rui-Button--filled--success--active__color: var(--rui-color-feedback-on-success); + --rui-Button--filled--success--active__border-color: var(--rui-color-feedback-success-active); + --rui-Button--filled--success--active__background: var(--rui-color-feedback-success-active); + --rui-Button--filled--success--active__box-shadow: none; + + // Buttons: filled priority: warning variant + --rui-Button--filled--warning--default__color: var(--rui-color-feedback-on-warning); + --rui-Button--filled--warning--default__border-color: var(--rui-color-feedback-warning); + --rui-Button--filled--warning--default__background: var(--rui-color-feedback-warning); + --rui-Button--filled--warning--default__box-shadow: none; + --rui-Button--filled--warning--hover__color: var(--rui-color-feedback-on-warning); + --rui-Button--filled--warning--hover__border-color: var(--rui-color-feedback-warning-hover); + --rui-Button--filled--warning--hover__background: var(--rui-color-feedback-warning-hover); + --rui-Button--filled--warning--hover__box-shadow: none; + --rui-Button--filled--warning--active__color: var(--rui-color-feedback-on-warning); + --rui-Button--filled--warning--active__border-color: var(--rui-color-feedback-warning-active); + --rui-Button--filled--warning--active__background: var(--rui-color-feedback-warning-active); + --rui-Button--filled--warning--active__box-shadow: none; + + // Buttons: filled priority: danger variant + --rui-Button--filled--danger--default__color: var(--rui-color-feedback-on-danger); + --rui-Button--filled--danger--default__border-color: var(--rui-color-feedback-danger); + --rui-Button--filled--danger--default__background: var(--rui-color-feedback-danger); + --rui-Button--filled--danger--default__box-shadow: none; + --rui-Button--filled--danger--hover__color: var(--rui-color-feedback-on-danger); + --rui-Button--filled--danger--hover__border-color: var(--rui-color-feedback-danger-hover); + --rui-Button--filled--danger--hover__background: var(--rui-color-feedback-danger-hover); + --rui-Button--filled--danger--hover__box-shadow: none; + --rui-Button--filled--danger--active__color: var(--rui-color-feedback-on-danger); + --rui-Button--filled--danger--active__border-color: var(--rui-color-feedback-danger-active); + --rui-Button--filled--danger--active__background: var(--rui-color-feedback-danger-active); + --rui-Button--filled--danger--active__box-shadow: none; + + // Buttons: filled priority: help variant + --rui-Button--filled--help--default__color: var(--rui-color-feedback-on-help); + --rui-Button--filled--help--default__border-color: var(--rui-color-feedback-help); + --rui-Button--filled--help--default__background: var(--rui-color-feedback-help); + --rui-Button--filled--help--default__box-shadow: none; + --rui-Button--filled--help--hover__color: var(--rui-color-feedback-on-help); + --rui-Button--filled--help--hover__border-color: var(--rui-color-feedback-help-hover); + --rui-Button--filled--help--hover__background: var(--rui-color-feedback-help-hover); + --rui-Button--filled--help--hover__box-shadow: none; + --rui-Button--filled--help--active__color: var(--rui-color-feedback-on-help); + --rui-Button--filled--help--active__border-color: var(--rui-color-feedback-help-active); + --rui-Button--filled--help--active__background: var(--rui-color-feedback-help-active); + --rui-Button--filled--help--active__box-shadow: none; + + // Buttons: filled priority: info variant + --rui-Button--filled--info--default__color: var(--rui-color-feedback-on-info); + --rui-Button--filled--info--default__border-color: var(--rui-color-feedback-info); + --rui-Button--filled--info--default__background: var(--rui-color-feedback-info); + --rui-Button--filled--info--default__box-shadow: none; + --rui-Button--filled--info--hover__color: var(--rui-color-feedback-on-info); + --rui-Button--filled--info--hover__border-color: var(--rui-color-feedback-info-hover); + --rui-Button--filled--info--hover__background: var(--rui-color-feedback-info-hover); + --rui-Button--filled--info--hover__box-shadow: none; + --rui-Button--filled--info--active__color: var(--rui-color-feedback-on-info); + --rui-Button--filled--info--active__border-color: var(--rui-color-feedback-info-active); + --rui-Button--filled--info--active__background: var(--rui-color-feedback-info-active); + --rui-Button--filled--info--active__box-shadow: none; + + // Buttons: filled priority: note variant + --rui-Button--filled--note--default__color: var(--rui-color-feedback-on-note); + --rui-Button--filled--note--default__border-color: var(--rui-color-feedback-note); + --rui-Button--filled--note--default__background: var(--rui-color-feedback-note); + --rui-Button--filled--note--default__box-shadow: none; + --rui-Button--filled--note--hover__color: var(--rui-color-feedback-on-note); + --rui-Button--filled--note--hover__border-color: var(--rui-color-feedback-note-hover); + --rui-Button--filled--note--hover__background: var(--rui-color-feedback-note-hover); + --rui-Button--filled--note--hover__box-shadow: none; + --rui-Button--filled--note--active__color: var(--rui-color-feedback-on-note); + --rui-Button--filled--note--active__border-color: var(--rui-color-feedback-note-active); + --rui-Button--filled--note--active__background: var(--rui-color-feedback-note-active); + --rui-Button--filled--note--active__box-shadow: none; + + // Buttons: filled priority: light variant + --rui-Button--filled--light--default__color: var(--rui-color-neutral-on-light); + --rui-Button--filled--light--default__border-color: var(--rui-color-neutral-light); + --rui-Button--filled--light--default__background: var(--rui-color-neutral-light); + --rui-Button--filled--light--default__box-shadow: none; + --rui-Button--filled--light--hover__color: var(--rui-color-neutral-on-light); + --rui-Button--filled--light--hover__border-color: var(--rui-color-neutral-light-hover); + --rui-Button--filled--light--hover__background: var(--rui-color-neutral-light-hover); + --rui-Button--filled--light--hover__box-shadow: none; + --rui-Button--filled--light--active__color: var(--rui-color-neutral-on-light); + --rui-Button--filled--light--active__border-color: var(--rui-color-neutral-light-active); + --rui-Button--filled--light--active__background: var(--rui-color-neutral-light-active); + --rui-Button--filled--light--active__box-shadow: none; + + // Buttons: filled priority: dark variant + --rui-Button--filled--dark--default__color: var(--rui-color-neutral-on-dark); + --rui-Button--filled--dark--default__border-color: var(--rui-color-neutral-dark); + --rui-Button--filled--dark--default__background: var(--rui-color-neutral-dark); + --rui-Button--filled--dark--default__box-shadow: none; + --rui-Button--filled--dark--hover__color: var(--rui-color-neutral-on-dark); + --rui-Button--filled--dark--hover__border-color: var(--rui-color-neutral-dark-hover); + --rui-Button--filled--dark--hover__background: var(--rui-color-neutral-dark-hover); + --rui-Button--filled--dark--hover__box-shadow: none; + --rui-Button--filled--dark--active__color: var(--rui-color-neutral-on-dark); + --rui-Button--filled--dark--active__border-color: var(--rui-color-neutral-dark-active); + --rui-Button--filled--dark--active__background: var(--rui-color-neutral-dark-active); + --rui-Button--filled--dark--active__box-shadow: none; + + // Buttons: outline priority + + // Buttons: outline priority: primary variant + --rui-Button--outline--primary--default__color: var(--rui-color-action-primary); + --rui-Button--outline--primary--default__border-color: var(--rui-color-action-primary); + --rui-Button--outline--primary--default__background: transparent; + --rui-Button--outline--primary--hover__color: var(--rui-color-action-on-primary); + --rui-Button--outline--primary--hover__border-color: var(--rui-color-action-primary-hover); + --rui-Button--outline--primary--hover__background: var(--rui-color-action-primary-hover); + --rui-Button--outline--primary--active__color: var(--rui-color-action-on-primary); + --rui-Button--outline--primary--active__border-color: var(--rui-color-action-primary-active); + --rui-Button--outline--primary--active__background: var(--rui-color-action-primary-active); + + // Buttons: outline priority: secondary variant + --rui-Button--outline--secondary--default__color: var(--rui-color-action-secondary); + --rui-Button--outline--secondary--default__border-color: var(--rui-color-action-secondary); + --rui-Button--outline--secondary--default__background: transparent; + --rui-Button--outline--secondary--hover__color: var(--rui-color-action-on-secondary); + --rui-Button--outline--secondary--hover__border-color: var(--rui-color-action-secondary-hover); + --rui-Button--outline--secondary--hover__background: var(--rui-color-action-secondary-hover); + --rui-Button--outline--secondary--active__color: var(--rui-color-action-on-secondary); + --rui-Button--outline--secondary--active__border-color: var(--rui-color-action-secondary-active); + --rui-Button--outline--secondary--active__background: var(--rui-color-action-secondary-active); + + // Buttons: outline priority: selected variant + --rui-Button--outline--selected--default__color: var(--rui-color-action-selected); + --rui-Button--outline--selected--default__border-color: var(--rui-color-action-selected); + --rui-Button--outline--selected--default__background: var(--rui-color-background-selected); + --rui-Button--outline--selected--hover__color: var(--rui-color-action-on-selected); + --rui-Button--outline--selected--hover__border-color: var(--rui-color-action-selected-hover); + --rui-Button--outline--selected--hover__background: var(--rui-color-action-selected-hover); + --rui-Button--outline--selected--active__color: var(--rui-color-action-on-selected); + --rui-Button--outline--selected--active__border-color: var(--rui-color-action-selected-active); + --rui-Button--outline--selected--active__background: var(--rui-color-action-selected-active); + + // Buttons: outline priority: success variant + --rui-Button--outline--success--default__color: var(--rui-color-feedback-success); + --rui-Button--outline--success--default__border-color: var(--rui-color-feedback-success); + --rui-Button--outline--success--default__background: transparent; + --rui-Button--outline--success--hover__color: var(--rui-color-feedback-on-success); + --rui-Button--outline--success--hover__border-color: var(--rui-color-feedback-success-hover); + --rui-Button--outline--success--hover__background: var(--rui-color-feedback-success-hover); + --rui-Button--outline--success--active__color: var(--rui-color-feedback-on-success); + --rui-Button--outline--success--active__border-color: var(--rui-color-feedback-success-active); + --rui-Button--outline--success--active__background: var(--rui-color-feedback-success-active); + + // Buttons: outline priority: warning variant + --rui-Button--outline--warning--default__color: var(--rui-color-feedback-warning); + --rui-Button--outline--warning--default__border-color: var(--rui-color-feedback-warning); + --rui-Button--outline--warning--default__background: transparent; + --rui-Button--outline--warning--hover__color: var(--rui-color-feedback-on-warning); + --rui-Button--outline--warning--hover__border-color: var(--rui-color-feedback-warning-hover); + --rui-Button--outline--warning--hover__background: var(--rui-color-feedback-warning-hover); + --rui-Button--outline--warning--active__color: var(--rui-color-feedback-on-warning); + --rui-Button--outline--warning--active__border-color: var(--rui-color-feedback-warning-active); + --rui-Button--outline--warning--active__background: var(--rui-color-feedback-warning-active); + + // Buttons: outline priority: danger variant + --rui-Button--outline--danger--default__color: var(--rui-color-feedback-danger); + --rui-Button--outline--danger--default__border-color: var(--rui-color-feedback-danger); + --rui-Button--outline--danger--default__background: transparent; + --rui-Button--outline--danger--hover__color: var(--rui-color-feedback-on-danger); + --rui-Button--outline--danger--hover__border-color: var(--rui-color-feedback-danger-hover); + --rui-Button--outline--danger--hover__background: var(--rui-color-feedback-danger-hover); + --rui-Button--outline--danger--active__color: var(--rui-color-feedback-on-danger); + --rui-Button--outline--danger--active__border-color: var(--rui-color-feedback-danger-active); + --rui-Button--outline--danger--active__background: var(--rui-color-feedback-danger-active); + + // Buttons: outline priority: help variant + --rui-Button--outline--help--default__color: var(--rui-color-feedback-help); + --rui-Button--outline--help--default__border-color: var(--rui-color-feedback-help); + --rui-Button--outline--help--default__background: transparent; + --rui-Button--outline--help--hover__color: var(--rui-color-feedback-on-help); + --rui-Button--outline--help--hover__border-color: var(--rui-color-feedback-help-hover); + --rui-Button--outline--help--hover__background: var(--rui-color-feedback-help-hover); + --rui-Button--outline--help--active__color: var(--rui-color-feedback-on-help); + --rui-Button--outline--help--active__border-color: var(--rui-color-feedback-help-active); + --rui-Button--outline--help--active__background: var(--rui-color-feedback-help-active); + + // Buttons: outline priority: info variant + --rui-Button--outline--info--default__color: var(--rui-color-feedback-info); + --rui-Button--outline--info--default__border-color: var(--rui-color-feedback-info); + --rui-Button--outline--info--default__background: transparent; + --rui-Button--outline--info--hover__color: var(--rui-color-feedback-on-info); + --rui-Button--outline--info--hover__border-color: var(--rui-color-feedback-info-hover); + --rui-Button--outline--info--hover__background: var(--rui-color-feedback-info-hover); + --rui-Button--outline--info--active__color: var(--rui-color-feedback-on-info); + --rui-Button--outline--info--active__border-color: var(--rui-color-feedback-info-active); + --rui-Button--outline--info--active__background: var(--rui-color-feedback-info-active); + + // Buttons: outline priority: note variant + --rui-Button--outline--note--default__color: var(--rui-color-feedback-note); + --rui-Button--outline--note--default__border-color: var(--rui-color-feedback-note); + --rui-Button--outline--note--default__background: transparent; + --rui-Button--outline--note--hover__color: var(--rui-color-feedback-on-note); + --rui-Button--outline--note--hover__border-color: var(--rui-color-feedback-note-hover); + --rui-Button--outline--note--hover__background: var(--rui-color-feedback-note-hover); + --rui-Button--outline--note--active__color: var(--rui-color-feedback-on-note); + --rui-Button--outline--note--active__border-color: var(--rui-color-feedback-note-active); + --rui-Button--outline--note--active__background: var(--rui-color-feedback-note-active); + + // Buttons: outline priority: light variant + --rui-Button--outline--light--default__color: var(--rui-color-neutral-light); + --rui-Button--outline--light--default__border-color: var(--rui-color-neutral-light); + --rui-Button--outline--light--default__background: transparent; + --rui-Button--outline--light--hover__color: var(--rui-color-neutral-on-light); + --rui-Button--outline--light--hover__border-color: var(--rui-color-neutral-light-hover); + --rui-Button--outline--light--hover__background: var(--rui-color-neutral-light-hover); + --rui-Button--outline--light--active__color: var(--rui-color-neutral-on-light); + --rui-Button--outline--light--active__border-color: var(--rui-color-neutral-light-active); + --rui-Button--outline--light--active__background: var(--rui-color-neutral-light-active); + + // Buttons: outline priority: dark variant + --rui-Button--outline--dark--default__color: var(--rui-color-neutral-dark); + --rui-Button--outline--dark--default__border-color: var(--rui-color-neutral-dark); + --rui-Button--outline--dark--default__background: transparent; + --rui-Button--outline--dark--hover__color: var(--rui-color-neutral-on-dark); + --rui-Button--outline--dark--hover__border-color: var(--rui-color-neutral-dark-hover); + --rui-Button--outline--dark--hover__background: var(--rui-color-neutral-dark-hover); + --rui-Button--outline--dark--active__color: var(--rui-color-neutral-on-dark); + --rui-Button--outline--dark--active__border-color: var(--rui-color-neutral-dark-active); + --rui-Button--outline--dark--active__background: var(--rui-color-neutral-dark-active); + + // Buttons: flat + + // Buttons: flat priority: primary variant + --rui-Button--flat--primary--default__color: var(--rui-color-action-primary); + --rui-Button--flat--primary--default__background: transparent; + --rui-Button--flat--primary--hover__color: var(--rui-color-action-primary-hover); + --rui-Button--flat--primary--hover__background: var(--rui-color-background-primary); + --rui-Button--flat--primary--active__color: var(--rui-color-action-primary-active); + --rui-Button--flat--primary--active__background: var(--rui-color-background-primary); + + // Buttons: flat priority: secondary variant + --rui-Button--flat--secondary--default__color: var(--rui-color-action-secondary); + --rui-Button--flat--secondary--default__background: transparent; + --rui-Button--flat--secondary--hover__color: var(--rui-color-action-secondary-hover); + --rui-Button--flat--secondary--hover__background: var(--rui-color-background-secondary); + --rui-Button--flat--secondary--active__color: var(--rui-color-action-secondary-active); + --rui-Button--flat--secondary--active__background: var(--rui-color-background-secondary); + + // Buttons: flat priority: selected variant + --rui-Button--flat--selected--default__color: var(--rui-color-action-selected); + --rui-Button--flat--selected--default__background: var(--rui-color-background-selected); + --rui-Button--flat--selected--hover__color: var(--rui-color-action-selected-hover); + --rui-Button--flat--selected--hover__background: var(--rui-color-background-selected); + --rui-Button--flat--selected--active__color: var(--rui-color-action-selected-active); + --rui-Button--flat--selected--active__background: var(--rui-color-background-selected); + + // Buttons: flat priority: success variant + --rui-Button--flat--success--default__color: var(--rui-color-feedback-success); + --rui-Button--flat--success--default__background: transparent; + --rui-Button--flat--success--hover__color: var(--rui-color-feedback-success-hover); + --rui-Button--flat--success--hover__background: var(--rui-color-background-success); + --rui-Button--flat--success--active__color: var(--rui-color-feedback-success-active); + --rui-Button--flat--success--active__background: var(--rui-color-background-success); + + // Buttons: flat priority: warning variant + --rui-Button--flat--warning--default__color: var(--rui-color-feedback-warning); + --rui-Button--flat--warning--default__background: transparent; + --rui-Button--flat--warning--hover__color: var(--rui-color-feedback-warning-hover); + --rui-Button--flat--warning--hover__background: var(--rui-color-background-warning); + --rui-Button--flat--warning--active__color: var(--rui-color-feedback-warning-active); + --rui-Button--flat--warning--active__background: var(--rui-color-background-warning); + + // Buttons: flat priority: danger variant + --rui-Button--flat--danger--default__color: var(--rui-color-feedback-danger); + --rui-Button--flat--danger--default__background: transparent; + --rui-Button--flat--danger--hover__color: var(--rui-color-feedback-danger-hover); + --rui-Button--flat--danger--hover__background: var(--rui-color-background-danger); + --rui-Button--flat--danger--active__color: var(--rui-color-feedback-danger-active); + --rui-Button--flat--danger--active__background: var(--rui-color-background-danger); + + // Buttons: flat priority: help variant + --rui-Button--flat--help--default__color: var(--rui-color-feedback-help); + --rui-Button--flat--help--default__background: transparent; + --rui-Button--flat--help--hover__color: var(--rui-color-feedback-help-hover); + --rui-Button--flat--help--hover__background: var(--rui-color-background-help); + --rui-Button--flat--help--active__color: var(--rui-color-feedback-help-active); + --rui-Button--flat--help--active__background: var(--rui-color-background-help); + + // Buttons: flat priority: info variant + --rui-Button--flat--info--default__color: var(--rui-color-feedback-info); + --rui-Button--flat--info--default__background: transparent; + --rui-Button--flat--info--hover__color: var(--rui-color-feedback-info-hover); + --rui-Button--flat--info--hover__background: var(--rui-color-background-info); + --rui-Button--flat--info--active__color: var(--rui-color-feedback-info-active); + --rui-Button--flat--info--active__background: var(--rui-color-background-info); + + // Buttons: flat priority: note variant + --rui-Button--flat--note--default__color: var(--rui-color-feedback-note); + --rui-Button--flat--note--default__background: transparent; + --rui-Button--flat--note--hover__color: var(--rui-color-feedback-note-hover); + --rui-Button--flat--note--hover__background: var(--rui-color-background-note); + --rui-Button--flat--note--active__color: var(--rui-color-feedback-note-active); + --rui-Button--flat--note--active__background: var(--rui-color-background-note); + + // Buttons: flat priority: light variant + --rui-Button--flat--light--default__color: var(--rui-color-neutral-light); + --rui-Button--flat--light--default__background: transparent; + --rui-Button--flat--light--hover__color: var(--rui-color-neutral-light-hover); + --rui-Button--flat--light--hover__background: var(--rui-color-background-dark); + --rui-Button--flat--light--active__color: var(--rui-color-neutral-light-active); + --rui-Button--flat--light--active__background: var(--rui-color-background-dark); + + // Buttons: flat priority: dark variant + --rui-Button--flat--dark--default__color: var(--rui-color-neutral-dark); + --rui-Button--flat--dark--default__background: transparent; + --rui-Button--flat--dark--hover__color: var(--rui-color-neutral-dark-hover); + --rui-Button--flat--dark--hover__background: var(--rui-color-background-light); + --rui-Button--flat--dark--active__color: var(--rui-color-neutral-dark-active); + --rui-Button--flat--dark--active__background: var(--rui-color-background-light); + + // Buttons: sizes + + // Buttons: sizes: small + --rui-Button--small__height: 1.75rem; + --rui-Button--small__padding-y: var(--rui-dimension-space-1); + --rui-Button--small__padding-x: var(--rui-dimension-space-3); + --rui-Button--small__font-size: var(--rui-font-size-small); + + // Buttons: sizes: medium + --rui-Button--medium__height: 2.25rem; + --rui-Button--medium__padding-y: var(--rui-dimension-space-1); + --rui-Button--medium__padding-x: var(--rui-dimension-space-4); + --rui-Button--medium__font-size: var(--rui-font-size-1); + + // Buttons: sizes: large + --rui-Button--large__height: 2.75rem; + --rui-Button--large__padding-y: var(--rui-dimension-space-2); + --rui-Button--large__padding-x: var(--rui-dimension-space-5); + --rui-Button--large__font-size: var(--rui-font-size-2); + + // + // ButtonGroup + // =========== + + --rui-ButtonGroup__inner-border-radius: 0; + + // ButtonGroup: filled buttons + --rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width)); + --rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width); + --rui-ButtonGroup--filled__separator__color: currentcolor; + + // ButtonGroup: outline buttons + --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width)); + --rui-ButtonGroup--outline__separator__width: 0; + --rui-ButtonGroup--outline__separator__color: transparent; + + // ButtonGroup: flat buttons + --rui-ButtonGroup--flat__gap: var(--rui-Button__border-width); + --rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap); + --rui-ButtonGroup--flat__separator__color: currentcolor; + + // + // Card + // ==== + + --rui-Card__padding: var(--rui-dimension-space-4); + --rui-Card__border-width: var(--rui-dimension-border-width-1); + --rui-Card__border-radius: var(--rui-dimension-radius-2); + --rui-Card--dense__padding: var(--rui-dimension-space-2); + --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1); + --rui-Card--disabled__background-color: var(--rui-color-background-disabled); + --rui-Card--disabled__opacity: var(--rui-ratio-disabled-opacity); + + // Card: variant: success + --rui-Card--success__color: var(--rui-color-text-primary); + --rui-Card--success__border-color: var(--rui-color-feedback-success); + --rui-Card--success__background-color: var(--rui-color-background-layer-1); + + // Card: variant: warning + --rui-Card--warning__color: var(--rui-color-text-primary); + --rui-Card--warning__border-color: var(--rui-color-feedback-warning); + --rui-Card--warning__background-color: var(--rui-color-background-layer-1); + + // Card: variant: danger + --rui-Card--danger__color: var(--rui-color-text-primary); + --rui-Card--danger__border-color: var(--rui-color-feedback-danger); + --rui-Card--danger__background-color: var(--rui-color-background-layer-1); + + // Card: variant: info + --rui-Card--info__color: var(--rui-color-text-primary); + --rui-Card--info__border-color: var(--rui-color-feedback-info); + --rui-Card--info__background-color: var(--rui-color-background-layer-1); + + // Card: variant: help + --rui-Card--help__color: var(--rui-color-text-primary); + --rui-Card--help__border-color: var(--rui-color-feedback-help); + --rui-Card--help__background-color: var(--rui-color-background-layer-1); + + // Card: variant: note + --rui-Card--note__color: var(--rui-color-text-primary); + --rui-Card--note__border-color: var(--rui-color-feedback-note); + --rui-Card--note__background-color: var(--rui-color-background-layer-1); + + // Card: variant: light + --rui-Card--light__color: var(--rui-color-text-primary); + --rui-Card--light__border-color: var(--rui-color-neutral-light); + --rui-Card--light__background-color: var(--rui-color-background-layer-1); + + // Card: variant: dark + --rui-Card--dark__color: var(--rui-color-neutral-on-dark); + --rui-Card--dark__border-color: var(--rui-color-neutral-on-dark); + --rui-Card--dark__background-color: var(--rui-color-background-dark); + + // + // Form Fields + // =========== + // + // 1. Please note that `min-width` values under cca 150 px do not take effect due to default input + // width defined in browsers unless `width` (same or smaller) is also defined. + // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size + // + // 2. Append non-breaking space and asterisk to required filed labels. + // + // 3. Avoid using `fit-content()` for label width, it behaves differently in Chrome vs. FF for + // inline grid. + + // Forms fields: common properties + --rui-FormField__label__color: inherit; + --rui-FormField__label__font-size: var(--rui-font-size-1); + --rui-FormField__help-text__font-size: var(--rui-font-size-small); + --rui-FormField__help-text__font-style: normal; + --rui-FormField__help-text__color: var(--rui-color-text-secondary); + --rui-FormField--required__label__color: inherit; + --rui-FormField--required__sign: "\00a0*"; // 2. + --rui-FormField--required__sign__color: var(--rui-color-text-secondary); + + // Form fields: horizontal layout + --rui-FormField--horizontal__label__text-align: left; + --rui-FormField--horizontal__label__min-width: 0; + --rui-FormField--horizontal__label__width: minmax(auto, 50%); // 3. + --rui-FormField--horizontal__label__vertical-alignment: initial; + --rui-FormField--horizontal__field__vertical-alignment: initial; + --rui-FormField--horizontal--full-width__label__width: fit-content(50%); + + // Forms fields: disabled state + --rui-FormField--disabled__cursor: var(--rui-cursor-not-allowed); + --rui-FormField--disabled__opacity: var(--rui-ratio-disabled-opacity); + + // Form fields: validation states: invalid + --rui-FormField--invalid--default__border-color: var(--rui-color-feedback-danger); + --rui-FormField--invalid--default__background: var(--rui-color-background-danger); + --rui-FormField--invalid--default__check-background-color: var(--rui-FormField--invalid--default__background); + --rui-FormField--invalid--default__surrounding-text-color: var(--rui-color-feedback-danger); + --rui-FormField--invalid--checked__check-background-color: var(--rui-FormField--invalid--default__border-color); + + // Form fields: validation states: valid + --rui-FormField--valid--default__border-color: var(--rui-color-feedback-success); + --rui-FormField--valid--default__background: var(--rui-color-background-success); + --rui-FormField--valid--default__check-background-color: var(--rui-FormField--valid--default__background); + --rui-FormField--valid--default__surrounding-text-color: var(--rui-color-feedback-success); + --rui-FormField--valid--checked__check-background-color: var(--rui-FormField--valid--default__border-color); + + // Form fields: validation states: warning + --rui-FormField--warning--default__border-color: var(--rui-color-feedback-warning-hover); + --rui-FormField--warning--default__background: var(--rui-color-background-warning); + --rui-FormField--warning--default__check-background-color: var(--rui-FormField--warning--default__background); + --rui-FormField--warning--default__surrounding-text-color: var(--rui-color-feedback-warning-active); + --rui-FormField--warning--checked__check-background-color: var(--rui-FormField--warning--default__border-color); + + // Form fields: box fields + --rui-FormField--box__border-width: var(--rui-dimension-border-width-1); + --rui-FormField--box__border-radius: var(--rui-dimension-radius-2); + --rui-FormField--box__input__width: auto; // 1. + --rui-FormField--box__input__min-width: 240px; // 1. + --rui-FormField--box__placeholder__color: var(--rui-color-text-secondary); + --rui-FormField--box--select__caret__border-style: none; + --rui-FormField--box--select__caret__background: transparent; + --rui-FormField--box--select__option--disabled__color: var(--rui-color-text-primary-disabled); + + // Form fields: box field sizes: small + --rui-FormField--box--small__height: var(--rui-Button--small__height); + --rui-FormField--box--small__padding-y: 0.0625rem; + --rui-FormField--box--small__padding-x: var(--rui-dimension-space-2); + --rui-FormField--box--small__font-size: var(--rui-font-size-small); + + // Form fields: box field sizes: medium + --rui-FormField--box--medium__height: var(--rui-Button--medium__height); + --rui-FormField--box--medium__padding-y: 0.3125rem; + --rui-FormField--box--medium__padding-x: var(--rui-dimension-space-3); + --rui-FormField--box--medium__font-size: var(--rui-font-size-1); + + // Form fields: box field sizes: large + --rui-FormField--box--large__height: var(--rui-Button--large__height); + --rui-FormField--box--large__padding-y: 0.5625rem; + --rui-FormField--box--large__padding-x: var(--rui-dimension-space-4); + --rui-FormField--box--large__font-size: var(--rui-font-size-2); + + // Form fields: box field variants: filled variant interaction states + --rui-FormField--box--filled--default__color: var(--rui-color-text-primary); + --rui-FormField--box--filled--default__border-color: var(--rui-color-border-primary); + --rui-FormField--box--filled--default__background: var(--rui-color-background-basic); + --rui-FormField--box--filled--default__box-shadow: none; + --rui-FormField--box--filled--hover__border-color: var(--rui-color-border-primary-hover); + --rui-FormField--box--filled--focus__border-color: var(--rui-color-border-primary-active); + + // Form fields: box field variants: outline variant interaction states + --rui-FormField--box--outline--default__color: var(--rui-color-text-primary); + --rui-FormField--box--outline--default__border-color: var(--rui-color-border-primary); + --rui-FormField--box--outline--default__background: var(--rui-color-background-basic); + --rui-FormField--box--outline--default__box-shadow: none; + --rui-FormField--box--outline--hover__border-color: var(--rui-color-border-primary-hover); + --rui-FormField--box--outline--focus__border-color: var(--rui-color-border-primary-active); + + // Form fields: check fields + --rui-FormField--check__input__size: 1.125rem; + --rui-FormField--check__input__border-width: var(--rui-FormField--box__border-width); + --rui-FormField--check__input--focus__box-shadow: var(--rui-shadow-focus-ring); + --rui-FormField--check__tap-target-size: var(--rui-dimension-tap-target-size); + + // Form fields: check fields, component specific + --rui-FormField--check__input--checkbox__border-radius: var(--rui-FormField--box__border-radius); + --rui-FormField--check__input--checkbox--checked__background-image: #{svg.$checkbox-checked}; + --rui-FormField--check__input--radio__border-radius: 50%; + --rui-FormField--check__input--radio--checked__background-image: #{svg.$radio-checked}; + --rui-FormField--check__input--toggle__width: 2.25rem; + --rui-FormField--check__input--toggle__border-radius: 0.5625rem; + --rui-FormField--check__input--toggle__background-size: contain; + --rui-FormField--check__input--toggle--default__background-image: #{svg.$toggle}; + --rui-FormField--check__input--toggle--default__background-position: left center; + --rui-FormField--check__input--toggle--checked__background-image: #{svg.$toggle-checked}; + --rui-FormField--check__input--toggle--checked__background-position: right center; + + // Form fields: check fields interaction states + --rui-FormField--check--default__border-color: var(--rui-color-border-primary); + --rui-FormField--check--default__check-background-color: var(--rui-color-background-basic); + --rui-FormField--check--checked__border-color: var(--rui-color-action-selected); + --rui-FormField--check--checked__check-background-color: var(--rui-color-action-selected); + + // + // FormLayout + // ========== + + --rui-FormLayout__row-gap: var(--rui-dimension-space-4); + --rui-FormLayout--horizontal__label__width: 10em; + --rui-FormLayout--horizontal__label__width--auto: auto; + --rui-FormLayout--horizontal__label__width--limited: fit-content(50%); + + // + // InputGroup + // ======= + + --rui-InputGroup__gap: var(--rui-dimension-space-1); + --rui-InputGroup__inner-border-radius: var(--rui-dimension-radius-1); + + // + // Modal + // ===== + + --rui-Modal__padding-x: var(--rui-dimension-space-4); + --rui-Modal__padding-y: var(--rui-dimension-space-4); + --rui-Modal__background: var(--rui-color-background-layer-2); + --rui-Modal__box-shadow: var(--rui-shadow-layer-2); + --rui-Modal__separator__width: var(--rui-dimension-border-width-1); + --rui-Modal__separator__color: var(--rui-color-border-secondary); + --rui-Modal__header__gap: var(--rui-dimension-space-2); + --rui-Modal__outer-spacing--xs: var(--rui-dimension-space-2); + --rui-Modal__outer-spacing--sm: var(--rui-dimension-space-6); + --rui-Modal__footer__background: var(--rui-Modal__background); + --rui-Modal__footer__gap: var(--rui-dimension-space-2); + --rui-Modal__backdrop__background: rgb(0 0 0 / 50%); + --rui-Modal--auto__min-width: 18rem; + --rui-Modal--auto__max-width: 60rem; + --rui-Modal--small__width: 20rem; + --rui-Modal--medium__width: 40rem; + --rui-Modal--large__width: 60rem; + --rui-Modal--fullscreen__width: 100%; + --rui-Modal--fullscreen__height: 100%; + + // + // Paper + // ===== + + --rui-Paper__padding: var(--rui-dimension-space-4); + --rui-Paper__border-width: 0; + --rui-Paper__border-color: transparent; + --rui-Paper__border-radius: var(--rui-dimension-radius-2); + --rui-Paper__background-color: var(--rui-color-background-layer-1); + --rui-Paper--muted__background-color: var(--rui-color-background-disabled); + --rui-Paper--muted__opacity: var(--rui-ratio-disabled-opacity); + --rui-Paper--raised__box-shadow: var(--rui-shadow-layer-1); + + // + // Popover + // ======= + + --rui-Popover__max-width: 15rem; + --rui-Popover__padding: var(--rui-dimension-space-3); + --rui-Popover__border-width: 0; + --rui-Popover__border-color: transparent; + --rui-Popover__border-radius: var(--rui-dimension-radius-2); + --rui-Popover__color: var(--rui-color-text-primary); + --rui-Popover__background-color: var(--rui-color-background-layer-2); + --rui-Popover__box-shadow: var(--rui-shadow-layer-2); + + // + // Tabs + // ==== + + --rui-Tabs__border-bottom-width: var(--rui-dimension-border-width-1); + --rui-Tabs__border-bottom-color: var(--rui-color-border-primary); + --rui-Tabs__gap--xs: var(--rui-dimension-space-1); + --rui-Tabs__gap--sm: var(--rui-dimension-space-1); + --rui-Tabs__gap--md: var(--rui-dimension-space-1); + --rui-Tabs__padding-x: 0; + + // Tabs items + --rui-Tabs__item__padding--xs: var(--rui-dimension-space-3); + --rui-Tabs__item__padding--sm: var(--rui-dimension-space-4); + --rui-Tabs__item__padding--md: var(--rui-dimension-space-4); + --rui-Tabs__item__font-weight: inherit; + --rui-Tabs__item__color: var(--rui-color-text-secondary); + --rui-Tabs__item__border-width: var(--rui-dimension-border-width-1); + --rui-Tabs__item__border-color: + var(--rui-color-border-secondary) + var(--rui-color-border-secondary) + transparent + var(--rui-color-border-secondary); + --rui-Tabs__item__border-radius: var(--rui-dimension-radius-2); + --rui-Tabs__item__background-color: var(--rui-color-background-layer-1); + --rui-Tabs__item__box-shadow: none; + --rui-Tabs__item__icon__gap: var(--rui-dimension-space-2); + + // Tabs items: hover + --rui-Tabs__item--hover__font-weight: var(--rui-Tabs__item__font-weight); + --rui-Tabs__item--hover__color: var(--rui-Tabs__item__color); + --rui-Tabs__item--hover__border-width: var(--rui-Tabs__item__border-width); + --rui-Tabs__item--hover__border-color: var(--rui-Tabs__item__border-color); + --rui-Tabs__item--hover__background-color: var(--rui-Tabs__item__background-color); + --rui-Tabs__item--hover__box-shadow: var(--rui-Tabs__item__box-shadow); + --rui-Tabs__item--hover__shift-y: -0.15rem; + --rui-Tabs__item--hover__label__shift-y: 0; + + // Tabs items: active + --rui-Tabs__item--active__font-weight: inherit; + --rui-Tabs__item--active__color: var(--rui-color-text-primary); + --rui-Tabs__item--active__border-width: var(--rui-Tabs__item__border-width); + --rui-Tabs__item--active__border-color: + var(--rui-Tabs__border-bottom-color) + var(--rui-Tabs__border-bottom-color) + transparent + var(--rui-Tabs__border-bottom-color); + --rui-Tabs__item--active__background-color: var(--rui-Tabs__item__background-color); + --rui-Tabs__item--active__box-shadow: var(--rui-Tabs__item__box-shadow); + --rui-Tabs__item--active__shift-y: -0.25em; + --rui-Tabs__item--active__label__shift-y: 0; + + // + // TextLink + // ======== + + --rui-TextLink__color: var(--rui-color-text-link); + --rui-TextLink__text-decoration: var(--rui-text-decoration-link); + --rui-TextLink--hover__color: var(--rui-color-text-link-hover); + --rui-TextLink--hover__text-decoration: var(--rui-text-decoration-link-hover); + --rui-TextLink--active__color: var(--rui-color-text-link-active); + --rui-TextLink--active__text-decoration: var(--rui-text-decoration-link-active); + + // + // Toolbar + // ======= + + --rui-Toolbar__gap: var(--rui-dimension-space-4); + --rui-Toolbar__gap--dense: var(--rui-dimension-space-2); + } }