From df3dbff1bde1dce9050a107e991af2d54c8c841e Mon Sep 17 00:00:00 2001 From: Michael Hewson Date: Fri, 8 Nov 2024 15:17:14 -0800 Subject: [PATCH 1/5] adding a report generator for style lint errors and warnings --- .stylelintrc | 63 +++++++++++++---- lint-report-generator.js | 142 +++++++++++++++++++++++++++++++++++++++ package.json | 15 +++-- 3 files changed, 203 insertions(+), 17 deletions(-) create mode 100644 lint-report-generator.js diff --git a/.stylelintrc b/.stylelintrc index 1101ec33b..00644410b 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,19 +1,58 @@ { - "extends": "stylelint-config-recommended-scss", + "extends": [ + "stylelint-config-recommended-scss", + "stylelint-config-standard-scss" + ], "ignoreFiles": [ - "**/*.js", - "**/*.snap", - "**/*.vars.pcss" + "**/*.js", + "**/*.snap", + "**/*.vars.pcss" ], "plugins": [ - "stylelint-scss" + "stylelint-scss" ], "rules": { - "at-rule-disallowed-list": ["debug"], - "no-empty-source": null, - "no-descending-specificity": null, - "selector-pseudo-class-no-unknown": [true, { - "ignorePseudoClasses": ["global"] - }] + "at-rule-disallowed-list": ["debug"], + "no-empty-source": null, + "no-descending-specificity": null, + "selector-pseudo-class-no-unknown": [ + true, + { + "ignorePseudoClasses": ["global"] + } + ], + "scss/at-extend-no-missing-placeholder": true, + "scss/comment-no-loud": true, + "scss/function-color-relative": true, + "scss/at-if-no-null": true, + "scss/dollar-variable-no-missing-interpolation": true, + "scss/selector-no-redundant-nesting-selector": true, + "scss/at-import-partial-extension": null, + "scss/at-mixin-pattern": "^[a-z][a-zA-Z0-9]+$", + "scss/at-function-pattern": "^[a-z][a-zA-Z0-9]+$", + "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", + "scss/percent-placeholder-pattern": "^[a-z][a-zA-Z0-9]+$", + "function-disallowed-list": [ + "rgb", + "rgba", + "hsl", + "hsla" + ], + "color-function-notation": "modern", + "alpha-value-notation": [ + "percentage", + { + "exceptProperties": ["opacity"] + } + ], + "color-hex-length": ["short", { "severity": "warning" }], + "comment-empty-line-before": [true, { "severity": "warning" }], + "selector-class-pattern": [ + "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$", + { + "message": "Expected class selector to follow BEM naming convention (selector-class-pattern)" + } + ] } -} \ No newline at end of file + } + \ No newline at end of file diff --git a/lint-report-generator.js b/lint-report-generator.js new file mode 100644 index 000000000..925fd7dce --- /dev/null +++ b/lint-report-generator.js @@ -0,0 +1,142 @@ +// lint-report-generator.mjs +import stylelint from 'stylelint'; +import fs from 'fs'; +import { join, relative } from 'path'; +import { fileURLToPath } from 'url'; +import { dirname } from 'path'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +/** + * Formats the current date as YYYY-MM-DD + */ +const getFormattedDate = () => { + const date = new Date(); + return date.toISOString().split('T')[0]; +}; + +/** + * Creates directory if it doesn't exist + */ +const ensureDirectoryExists = (dirPath) => { + if (!fs.existsSync(dirPath)) { + fs.mkdirSync(dirPath, { recursive: true }); + } +}; + +/** + * Processes stylelint results into a structured format + */ +const processStylelintResults = (styleResults) => { + return styleResults.results.reduce((acc, file) => { + if (file.warnings.length > 0) { + const relativePath = relative(process.cwd(), file.source); + acc.push({ + file: relativePath, + warnings: file.warnings.map(w => ({ + line: w.line, + column: w.column, + rule: w.rule, + text: w.text, + severity: w.severity + })) + }); + } + return acc; + }, []); +}; + +/** + * Generates markdown content from warnings + */ +const generateMarkdownContent = (styleWarnings, reportDate) => { + let mdReport = `# Stylelint Warning Report (${reportDate})\n\n`; + mdReport += `## Summary\n\n`; + + const totalWarnings = styleWarnings.reduce((sum, file) => + sum + file.warnings.length, 0); + + mdReport += `- Total files with warnings: ${styleWarnings.length}\n`; + mdReport += `- Total warnings: ${totalWarnings}\n\n`; + + if (styleWarnings.length === 0) { + mdReport += 'No style warnings found.\n\n'; + return mdReport; + } + + mdReport += `## Detailed Warnings\n\n`; + styleWarnings.forEach(file => { + mdReport += `### ${file.file}\n\n`; + mdReport += '| Line:Col | Rule | Message |\n'; + mdReport += '|----------|------|---------||\n'; + file.warnings.forEach(warning => { + const escapedText = warning.text.replace(/\|/g, '\\|'); + mdReport += `| ${warning.line}:${warning.column} | \`${warning.rule}\` | ${escapedText} |\n`; + }); + mdReport += '\n'; + }); + + return mdReport; +}; + +/** + * Main function to generate lint reports + */ +const generateLintReport = async () => { + try { + const reportDate = getFormattedDate(); + const reportDir = join(process.cwd(), 'reports'); + + ensureDirectoryExists(reportDir); + + const styleResults = await stylelint.lint({ + files: 'src/**/*.scss', + formatter: 'json' + }); + + const styleWarnings = processStylelintResults(styleResults); + const mdReport = generateMarkdownContent(styleWarnings, reportDate); + + const reportPath = join(reportDir, `stylelint-report-${reportDate}.md`); + const jsonReportPath = join(reportDir, `stylelint-report-${reportDate}.json`); + + fs.writeFileSync(reportPath, mdReport); + fs.writeFileSync(jsonReportPath, JSON.stringify({ + date: reportDate, + styleWarnings + }, null, 2)); + + const summary = { + totalFiles: styleWarnings.length, + totalWarnings: styleWarnings.reduce((sum, file) => + sum + file.warnings.length, 0), + reportPath, + jsonReportPath + }; + + console.log(` +Reports generated successfully: +- Markdown: ${summary.reportPath} +- JSON: ${summary.jsonReportPath} +Summary: +- Total files with warnings: ${summary.totalFiles} +- Total warnings: ${summary.totalWarnings} + `); + + return summary; + + } catch (error) { + console.error('Error generating lint report:', error); + throw error; + } +}; + +// Execute if called directly +if (import.meta.url === `file://${__filename}`) { + generateLintReport().catch(error => { + process.exit(1); + }); +} + +export default generateLintReport; \ No newline at end of file diff --git a/package.json b/package.json index a775d7176..c451eb5e0 100644 --- a/package.json +++ b/package.json @@ -47,10 +47,14 @@ "e2e": "nightwatch --config test/e2e/nightwatch.conf.js", "test": "npm-run-all unit e2e", "clean": "rm -rf dist", - "lint": "npm-run-all lint:js lint:styles lint:types", + "lint": "npm-run-all --continue-on-error lint:js lint:styles lint:types lint:report", "lint:js": "eslint src --ext .js,.vue,.ts,.mjs", "lint:styles": "stylelint src/**/*.scss", + "lint:styles:fix": "stylelint 'src/**/*.scss' --fix", + "lint:styles:report": "stylelint src/**/*.scss --custom-formatter=./stylelint-report-formatter.js", "lint:types": "vue-tsc --noEmit", + "lint:report": "node lint-report-generator.mjs", + "lint:full": "npm-run-all lint lint:report", "prepush": "npm-run-all lint unit", "create": "node generator.js", "prerelease": "npm-publish-prerelease" @@ -94,13 +98,14 @@ "postcss": "^8.4.31", "postcss-calc": "^8.0.0", "postcss-pxtorem": "^6.0.0", - "postcss-scss": "^4.0.0", + "postcss-scss": "^4.0.9", "puppeteer": "22.15.0", "sass": "^1.32.11", "sinon": "^11.1.0", - "stylelint": "^16.1.0", - "stylelint-config-recommended-scss": "^14.0.0", - "stylelint-scss": "^6.0.0", + "stylelint": "^16.10.0", + "stylelint-config-recommended-scss": "^14.1.0", + "stylelint-config-standard-scss": "^13.1.0", + "stylelint-scss": "^6.8.1", "ts-node": "^10.9.1", "typescript": "^5.1.6", "vite": "^5.0.1", From be5725a3e62e8bfb94951d450298b27ed63152b2 Mon Sep 17 00:00:00 2001 From: Michael Hewson Date: Fri, 8 Nov 2024 15:27:17 -0800 Subject: [PATCH 2/5] adding a report generator for style lint errors and warnings --- .gitignore | 5 ++++- lint-report-generator.js | 8 +++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index a8eb433ad..b4eef13f3 100644 --- a/.gitignore +++ b/.gitignore @@ -52,4 +52,7 @@ src/**/package-lock\.json unmigrated/ ## Dev output for hosting -pages \ No newline at end of file +pages + +# Ignore reports directory +/reports/ \ No newline at end of file diff --git a/lint-report-generator.js b/lint-report-generator.js index 925fd7dce..39fba1e6f 100644 --- a/lint-report-generator.js +++ b/lint-report-generator.js @@ -1,3 +1,5 @@ +/* eslint-env node */ + // lint-report-generator.mjs import stylelint from 'stylelint'; import fs from 'fs'; @@ -72,7 +74,10 @@ const generateMarkdownContent = (styleWarnings, reportDate) => { mdReport += '|----------|------|---------||\n'; file.warnings.forEach(warning => { const escapedText = warning.text.replace(/\|/g, '\\|'); - mdReport += `| ${warning.line}:${warning.column} | \`${warning.rule}\` | ${escapedText} |\n`; + mdReport += ` + | ${warning.line}:${warning.column} + | \`${warning.rule}\` + | ${escapedText} |\n`; }); mdReport += '\n'; }); @@ -135,6 +140,7 @@ Summary: // Execute if called directly if (import.meta.url === `file://${__filename}`) { generateLintReport().catch(error => { + console.error('An error occurred:', error); process.exit(1); }); } From 455b2631edcb082ee6b8e4e9ae9dd73ea9cef9df Mon Sep 17 00:00:00 2001 From: Michael Hewson Date: Fri, 8 Nov 2024 16:20:57 -0800 Subject: [PATCH 3/5] update to reduce the stylelistic errors until we resolve the actual sass warnings --- .stylelintrc | 30 +++++++------------ ...-generator.js => lint-report-generator.mjs | 0 src/styles/cdr-reset.scss | 9 +++++- 3 files changed, 18 insertions(+), 21 deletions(-) rename lint-report-generator.js => lint-report-generator.mjs (100%) diff --git a/.stylelintrc b/.stylelintrc index 00644410b..dd8da75b9 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -22,31 +22,21 @@ } ], "scss/at-extend-no-missing-placeholder": true, - "scss/comment-no-loud": true, + "scss/comment-no-loud": null, "scss/function-color-relative": true, "scss/at-if-no-null": true, "scss/dollar-variable-no-missing-interpolation": true, "scss/selector-no-redundant-nesting-selector": true, "scss/at-import-partial-extension": null, - "scss/at-mixin-pattern": "^[a-z][a-zA-Z0-9]+$", - "scss/at-function-pattern": "^[a-z][a-zA-Z0-9]+$", - "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", - "scss/percent-placeholder-pattern": "^[a-z][a-zA-Z0-9]+$", - "function-disallowed-list": [ - "rgb", - "rgba", - "hsl", - "hsla" - ], - "color-function-notation": "modern", - "alpha-value-notation": [ - "percentage", - { - "exceptProperties": ["opacity"] - } - ], - "color-hex-length": ["short", { "severity": "warning" }], - "comment-empty-line-before": [true, { "severity": "warning" }], + "scss/at-mixin-pattern": null, + "scss/at-function-pattern": null, + "scss/dollar-variable-pattern": null, + "scss/percent-placeholder-pattern": null, + "function-disallowed-list": null, + "color-function-notation": null, + "alpha-value-notation": null, + "color-hex-length": null, + "custom-property-pattern": null, "selector-class-pattern": [ "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$", { diff --git a/lint-report-generator.js b/lint-report-generator.mjs similarity index 100% rename from lint-report-generator.js rename to lint-report-generator.mjs diff --git a/src/styles/cdr-reset.scss b/src/styles/cdr-reset.scss index 11a720fad..3f21a62f7 100644 --- a/src/styles/cdr-reset.scss +++ b/src/styles/cdr-reset.scss @@ -1,4 +1,6 @@ -@import '../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens'; +/* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */ + +@use '../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens'; html { -webkit-box-sizing: border-box; @@ -27,6 +29,7 @@ html { body { /* cdr-text-default */ + font-family: Graphik, "Graphik fallback", "Helvetica Neue", sans-serif; font-style: normal; font-weight: 400; @@ -34,9 +37,13 @@ body { font-size: 1.6rem; line-height: 1.5; margin: 0; + /* cdr-color-text-primary */ + color: rgba(12, 11, 8, 0.75); + /* cdr-color-background-primary */ + background-color: #ffffff; } From 5ad7e40d2954950179d6650246846f5fc0d28fd5 Mon Sep 17 00:00:00 2001 From: Michael Hewson Date: Mon, 11 Nov 2024 09:58:13 -0800 Subject: [PATCH 4/5] formatting and comment spacing changes --- package-lock.json | 279 ++++++++++-------- .../abstract/styles/CdrAbstract.module.scss | 6 +- .../accordion/styles/CdrAccordion.module.scss | 17 +- .../styles/CdrAccordionGroup.module.scss | 2 +- .../banner/styles/CdrBanner.module.scss | 45 ++- .../banner/styles/vars/CdrBanner.vars.scss | 6 + .../styles/CdrBreadcrumb.module.scss | 4 +- .../styles/vars/CdrBreadcrumb.vars.scss | 1 + .../button/styles/CdrButton.module.scss | 5 +- .../button/styles/vars/CdrButton.vars.scss | 54 +++- .../caption/styles/CdrCaption.module.scss | 5 +- .../caption/styles/vars/CdrCaption.vars.scss | 1 - .../card/styles/CdrCard.module.scss | 5 +- .../card/styles/vars/CdrCard.vars.scss | 4 + .../checkbox/styles/CdrCheckbox.module.scss | 14 +- .../styles/vars/CdrCheckbox.vars.scss | 7 + .../chip/styles/CdrChip.module.scss | 6 +- .../chip/styles/CdrChipGroup.module.scss | 4 +- .../chip/styles/vars/CdrChip.vars.scss | 16 +- .../chip/styles/vars/CdrChipGroup.vars.scss | 11 +- .../styles/CdrChoreographer.module.scss | 5 +- .../container/styles/CdrContainer.module.scss | 2 +- .../formError/styles/CdrFormError.module.scss | 5 +- .../styles/vars/CdrFormError.vars.scss | 2 + .../formGroup/styles/CdrFormGroup.module.scss | 7 +- .../styles/vars/CdrFormGroup.vars.scss | 15 +- .../styles/CdrFulfillmentTile.module.scss | 8 +- .../CdrFulfillmentTileContent.module.scss | 2 +- .../CdrFulfillmentTileHeader.module.scss | 2 +- .../styles/CdrFulfillmentTileIcon.module.scss | 4 +- .../CdrFulfillmentTileLayout.module.scss | 6 +- .../styles/vars/CdrFulfillmentTile.vars.scss | 4 +- .../vars/CdrFulfillmentTileContent.vars.scss | 3 +- .../vars/CdrFulfillmentTileHeader.vars.scss | 2 +- .../vars/CdrFulfillmentTileIcon.vars.scss | 2 +- .../grid/styles/CdrGrid.module.scss | 7 +- .../grid/styles/vars/CdrGrid.vars.scss | 2 +- .../icon/styles/CdrIcon.module.scss | 3 +- .../image/styles/CdrImg.module.scss | 2 +- .../input/styles/CdrInput.module.scss | 19 +- .../input/styles/vars/CdrInput.vars.scss | 30 +- .../kicker/styles/CdrKicker.module.scss | 5 +- .../styles/CdrLabelStandalone.module.scss | 11 +- .../styles/vars/CdrLabelStandalone.vars.scss | 2 + .../styles/CdrLabelWrapper.module.scss | 8 +- .../styles/vars/CdrLabelWrapper.vars.scss | 14 +- .../CdrHeadingSubheadingBlock.module.scss | 9 +- .../styles/CdrLandingLead.module.scss | 11 +- .../link/styles/CdrLink.module.scss | 5 +- .../link/styles/vars/CdrLink.vars.scss | 2 + .../list/styles/CdrList.module.scss | 5 +- .../list/styles/vars/CdrList.vars.scss | 3 + .../modal/styles/CdrModal.module.scss | 17 +- .../styles/CdrPagination.module.scss | 13 +- .../picture/styles/CdrPicture.module.scss | 4 +- .../popover/styles/CdrPopover.module.scss | 12 +- .../popup/styles/CdrPopup.module.scss | 6 +- .../popup/styles/vars/CdrPopup.vars.scss | 8 +- .../quote/styles/CdrQuote.module.scss | 7 +- .../quote/styles/vars/CdrQuote.vars.scss | 6 +- .../radio/styles/CdrRadio.module.scss | 9 +- .../radio/styles/vars/CdrRadio.vars.scss | 4 +- .../rating/styles/CdrRating.module.scss | 10 +- .../select/styles/CdrSelect.module.scss | 15 +- .../select/styles/vars/CdrSelect.vars.scss | 11 + .../skeleton/styles/CdrSkeleton.module.scss | 4 +- .../styles/CdrSkeletonBone.module.scss | 14 +- .../styles/vars/CdrSkeleton.vars.scss | 5 + .../styles/CdrSplitSurface.module.scss | 6 +- .../styles/vars/CdrSplitSurface.vars.scss | 5 + .../surface/styles/CdrSurface.module.scss | 4 +- .../surface/styles/vars/CdrSurface.vars.scss | 2 +- .../styles/CdrSurfaceSelection.module.scss | 4 +- .../CdrSurfaceSelectionLayout.module.scss | 6 +- .../styles/vars/CdrSurfaceSelection.vars.scss | 29 +- .../vars/CdrSurfaceSelectionLayout.vars.scss | 2 +- .../switch/styles/CdrSwitch.module.scss | 23 +- .../table/styles/CdrTable.module.scss | 4 +- .../table/styles/vars/CdrTable.vars.scss | 5 +- .../tabs/styles/CdrTabPanel.module.scss | 6 +- .../tabs/styles/CdrTabs.module.scss | 25 +- .../text/presets/styles/CdrBody.module.scss | 3 +- .../presets/styles/CdrEyebrow.module.scss | 3 +- .../styles/CdrHeadingDisplay.module.scss | 3 +- .../presets/styles/CdrHeadingSans.module.scss | 3 +- .../styles/CdrHeadingSerif.module.scss | 3 +- .../presets/styles/CdrPresets.module.scss | 6 +- .../styles/CdrSubheadingSans.module.scss | 3 +- .../presets/styles/CdrUtilitySans.module.scss | 3 +- .../styles/CdrUtilitySerif.module.scss | 3 +- .../text/styles/CdrText.module.scss | 4 +- .../title/styles/CdrTitle.module.scss | 14 +- .../toast/styles/CdrToast.module.scss | 32 +- .../toast/styles/vars/CdrToast.vars.scss | 7 + .../styles/CdrToggleButton.module.scss | 11 +- .../styles/CdrToggleGroup.module.scss | 3 +- .../tooltip/styles/CdrTooltip.module.scss | 8 +- src/styles/cdr-reset.scss | 6 +- src/styles/settings/fluid.vars.scss | 7 + src/styles/settings/index.scss | 7 +- 100 files changed, 750 insertions(+), 344 deletions(-) diff --git a/package-lock.json b/package-lock.json index 35abbcd63..e5b96afb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,13 +51,14 @@ "postcss": "^8.4.31", "postcss-calc": "^8.0.0", "postcss-pxtorem": "^6.0.0", - "postcss-scss": "^4.0.0", + "postcss-scss": "^4.0.9", "puppeteer": "22.15.0", "sass": "^1.32.11", "sinon": "^11.1.0", - "stylelint": "^16.1.0", - "stylelint-config-recommended-scss": "^14.0.0", - "stylelint-scss": "^6.0.0", + "stylelint": "^16.10.0", + "stylelint-config-recommended-scss": "^14.1.0", + "stylelint-config-standard-scss": "^13.1.0", + "stylelint-scss": "^6.8.1", "ts-node": "^10.9.1", "typescript": "^5.1.6", "vite": "^5.0.1", @@ -1960,9 +1961,9 @@ } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz", - "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz", + "integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==", "dev": true, "funding": [ { @@ -1975,16 +1976,16 @@ } ], "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^2.4.1" + "@csstools/css-tokenizer": "^3.0.3" } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz", - "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz", + "integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==", "dev": true, "funding": [ { @@ -1997,13 +1998,13 @@ } ], "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" } }, "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.13", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz", - "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz", + "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==", "dev": true, "funding": [ { @@ -2016,17 +2017,17 @@ } ], "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.7.1", - "@csstools/css-tokenizer": "^2.4.1" + "@csstools/css-parser-algorithms": "^3.0.1", + "@csstools/css-tokenizer": "^3.0.1" } }, "node_modules/@csstools/selector-specificity": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz", - "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-4.0.0.tgz", + "integrity": "sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==", "dev": true, "funding": [ { @@ -2039,10 +2040,10 @@ } ], "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" }, "peerDependencies": { - "postcss-selector-parser": "^6.0.13" + "postcss-selector-parser": "^6.1.0" } }, "node_modules/@dual-bundle/import-meta-resolve": { @@ -5877,21 +5878,21 @@ } }, "node_modules/css-functions-list": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz", - "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz", + "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==", "dev": true, "engines": { "node": ">=12 || >=16" } }, "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.0.1.tgz", + "integrity": "sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==", "dev": true, "dependencies": { - "mdn-data": "2.0.30", + "mdn-data": "2.12.1", "source-map-js": "^1.0.1" }, "engines": { @@ -6112,12 +6113,12 @@ "dev": true }, "node_modules/debug": { - "version": "4.3.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", - "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", "dev": true, "dependencies": { - "ms": "2.1.2" + "ms": "^2.1.3" }, "engines": { "node": ">=6.0" @@ -6128,6 +6129,12 @@ } } }, + "node_modules/debug/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, "node_modules/decamelize": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz", @@ -9800,9 +9807,9 @@ } }, "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.1.tgz", + "integrity": "sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==", "dev": true }, "node_modules/memorystream": { @@ -9848,9 +9855,9 @@ } }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { "braces": "^3.0.3", @@ -11335,9 +11342,9 @@ "dev": true }, "node_modules/picocolors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -11423,9 +11430,9 @@ } }, "node_modules/postcss": { - "version": "8.4.40", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz", - "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==", + "version": "8.4.48", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.48.tgz", + "integrity": "sha512-GCRK8F6+Dl7xYniR5a4FYbpBzU8XnZVeowqsQFYdcXuSbChgiks7qybSkbvnaeqv0G0B+dd9/jJgH8kkLDQeEA==", "funding": [ { "type": "opencollective", @@ -11442,8 +11449,8 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.1", - "source-map-js": "^1.2.0" + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -11478,15 +11485,15 @@ } }, "node_modules/postcss-resolve-nested-selector": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.4.tgz", - "integrity": "sha512-R6vHqZWgVnTAPq0C+xjyHfEZqfIYboCBVSy24MjxEDm+tIh1BU4O6o7DP7AA7kHzf136d+Qc5duI4tlpHjixDw==", + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz", + "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==", "dev": true }, "node_modules/postcss-safe-parser": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", - "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz", + "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==", "dev": true, "funding": [ { @@ -11536,9 +11543,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", - "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -12739,9 +12746,9 @@ } }, "node_modules/source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "engines": { "node": ">=0.10.0" } @@ -13034,9 +13041,9 @@ "dev": true }, "node_modules/stylelint": { - "version": "16.8.1", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.8.1.tgz", - "integrity": "sha512-O8aDyfdODSDNz/B3gW2HQ+8kv8pfhSu7ZR7xskQ93+vI6FhKKGUJMQ03Ydu+w3OvXXE0/u4hWU4hCPNOyld+OA==", + "version": "16.10.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.10.0.tgz", + "integrity": "sha512-z/8X2rZ52dt2c0stVwI9QL2AFJhLhbPkyfpDFcizs200V/g7v+UYY6SNcB9hKOLcDDX/yGLDsY/pX08sLkz9xQ==", "dev": true, "funding": [ { @@ -13049,42 +13056,41 @@ } ], "dependencies": { - "@csstools/css-parser-algorithms": "^2.7.1", - "@csstools/css-tokenizer": "^2.4.1", - "@csstools/media-query-list-parser": "^2.1.13", - "@csstools/selector-specificity": "^3.1.1", + "@csstools/css-parser-algorithms": "^3.0.1", + "@csstools/css-tokenizer": "^3.0.1", + "@csstools/media-query-list-parser": "^3.0.1", + "@csstools/selector-specificity": "^4.0.0", "@dual-bundle/import-meta-resolve": "^4.1.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", "cosmiconfig": "^9.0.0", - "css-functions-list": "^3.2.2", - "css-tree": "^2.3.1", - "debug": "^4.3.6", + "css-functions-list": "^3.2.3", + "css-tree": "^3.0.0", + "debug": "^4.3.7", "fast-glob": "^3.3.2", "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^9.0.0", + "file-entry-cache": "^9.1.0", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^5.3.1", + "ignore": "^6.0.2", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", "known-css-properties": "^0.34.0", "mathml-tag-names": "^2.1.3", "meow": "^13.2.0", - "micromatch": "^4.0.7", + "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "picocolors": "^1.0.1", - "postcss": "^8.4.40", - "postcss-resolve-nested-selector": "^0.1.4", - "postcss-safe-parser": "^7.0.0", - "postcss-selector-parser": "^6.1.1", + "postcss": "^8.4.47", + "postcss-resolve-nested-selector": "^0.1.6", + "postcss-safe-parser": "^7.0.1", + "postcss-selector-parser": "^6.1.2", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", - "strip-ansi": "^7.1.0", - "supports-hyperlinks": "^3.0.0", + "supports-hyperlinks": "^3.1.0", "svg-tags": "^1.0.0", "table": "^6.8.2", "write-file-atomic": "^5.0.1" @@ -13141,37 +13147,73 @@ } } }, - "node_modules/stylelint-scss": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.5.0.tgz", - "integrity": "sha512-yOnYlr71wrTPT3rYyUurgTj6Rw7JUtzsZQsiPEjvs+k/yqoYHdweqpw6XN/ARpxjAuvJpddoMUvV8aAIpvUwTg==", + "node_modules/stylelint-config-standard": { + "version": "36.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz", + "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], "dependencies": { - "css-tree": "2.3.1", - "is-plain-object": "5.0.0", - "known-css-properties": "^0.34.0", - "postcss-media-query-parser": "^0.2.3", - "postcss-resolve-nested-selector": "^0.1.4", - "postcss-selector-parser": "^6.1.1", - "postcss-value-parser": "^4.2.0" + "stylelint-config-recommended": "^14.0.1" }, "engines": { "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^16.0.2" + "stylelint": "^16.1.0" } }, - "node_modules/stylelint/node_modules/ansi-regex": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", - "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "node_modules/stylelint-config-standard-scss": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz", + "integrity": "sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==", + "dev": true, + "dependencies": { + "stylelint-config-recommended-scss": "^14.0.0", + "stylelint-config-standard": "^36.0.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "postcss": "^8.3.3", + "stylelint": "^16.3.1" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + } + } + }, + "node_modules/stylelint-scss": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.8.1.tgz", + "integrity": "sha512-al+5eRb72bKrFyVAY+CLWKUMX+k+wsDCgyooSfhISJA2exqnJq1PX1iIIpdrvhu3GtJgNJZl9/BIW6EVSMCxdg==", "dev": true, + "dependencies": { + "css-tree": "^3.0.0", + "is-plain-object": "^5.0.0", + "known-css-properties": "^0.34.0", + "mdn-data": "^2.11.1", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.6", + "postcss-selector-parser": "^6.1.2", + "postcss-value-parser": "^4.2.0" + }, "engines": { - "node": ">=12" + "node": ">=18.12.0" }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" + "peerDependencies": { + "stylelint": "^16.0.2" } }, "node_modules/stylelint/node_modules/balanced-match": { @@ -13181,9 +13223,9 @@ "dev": true }, "node_modules/stylelint/node_modules/file-entry-cache": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz", - "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.1.0.tgz", + "integrity": "sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==", "dev": true, "dependencies": { "flat-cache": "^5.0.0" @@ -13231,27 +13273,21 @@ "node": ">=6" } }, + "node_modules/stylelint/node_modules/ignore": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz", + "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/stylelint/node_modules/ini": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, - "node_modules/stylelint/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "dev": true, - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, "node_modules/stylelint/node_modules/which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", @@ -13277,9 +13313,9 @@ } }, "node_modules/supports-hyperlinks": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", - "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.1.0.tgz", + "integrity": "sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==", "dev": true, "dependencies": { "has-flag": "^4.0.0", @@ -13287,6 +13323,9 @@ }, "engines": { "node": ">=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/supports-preserve-symlinks-flag": { diff --git a/src/components/abstract/styles/CdrAbstract.module.scss b/src/components/abstract/styles/CdrAbstract.module.scss index aa1752a67..5038fcafd 100644 --- a/src/components/abstract/styles/CdrAbstract.module.scss +++ b/src/components/abstract/styles/CdrAbstract.module.scss @@ -1,8 +1,9 @@ -@import '../../../styles/settings/index.scss'; -@import '../../../styles/settings/fluid.vars.scss'; +@import '../../../styles/settings/index'; +@import '../../../styles/settings/fluid.vars'; .cdr-abstract { @include cdr-text-subheading-sans-500; + color: var(--cdr-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); margin: 0; font-size: var(--cdr-type-scale-1); @@ -11,6 +12,7 @@ @container (max-width: 720px) { @include cdr-text-body-500; + font-size: var(--cdr-type-scale-0); line-height: calc(var(--cdr-type-scale-0) * var(--cdr-body-line-height-ratio)); } diff --git a/src/components/accordion/styles/CdrAccordion.module.scss b/src/components/accordion/styles/CdrAccordion.module.scss index 5ab0babf9..04d18cff9 100644 --- a/src/components/accordion/styles/CdrAccordion.module.scss +++ b/src/components/accordion/styles/CdrAccordion.module.scss @@ -1,12 +1,15 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; + //@import url('@rei/cedar/dist/style/cdr-icon.css'); -@import '../../icon/styles/CdrIcon.module.scss'; +@import '../../icon/styles/CdrIcon.module'; + //@import url('@rei/cedar/dist/style/cdr-accordion-group.css'); -@import './CdrAccordionGroup.module.scss'; +@import './CdrAccordionGroup.module'; .cdr-accordion { //ITEM_DOC: Border color of cdr-accordion --cdr-accordion-border: 1px solid var(--cdr-accordion-border-color, var(--cdr-color-border-primary, #{$cdr-color-border-primary})); + border-top: var(--cdr-accordion-border); border-bottom: var(--cdr-accordion-border); position: relative; @@ -19,9 +22,11 @@ &__button { @include cdr-text-utility-sans-strong-300; + //ITEM_DOC: Background color of a cdr-accordion header button background-color: var(--cdr-accordion-button-background-color, transparent); border: none; + //ITEM_DOC: Text color of a cdr-accordion header button color: var(--cdr-accordion-button-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); cursor: pointer; @@ -50,14 +55,17 @@ font-weight: unset; font-style: unset; font-size: unset; + &--unwrapped { @include cdr-text-heading-sans-400; + margin: $cdr-space-one-x 0; } } &__icon { margin-left: $cdr-space-one-x; + //ITEM_DOC: Fill color of icons on a cdr-accordion. This is used for the caret which changes orientation when the accordion collapses and expands fill: var(--cdr-accordion-icon-fill, var(--cdr-color-icon-default, #{$cdr-color-icon-default})); transition: transform $cdr-duration-3-x $cdr-timing-function-ease-out; @@ -80,8 +88,10 @@ &__content { @include cdr-text-body-300; + //ITEM_DOC: Background color of cdr-accordion content background-color: var(--cdr-accordion-content-background-color, transparent); + //ITEM_DOC: Text color of cdr-accordion content color: var(--cdr-accordion-content-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); padding: $cdr-space-half-x $cdr-space-one-x $cdr-space-one-x; @@ -106,6 +116,7 @@ &--unwrap { padding: 0; } + /* Border-Aligned ========== */ &--border-aligned { diff --git a/src/components/accordion/styles/CdrAccordionGroup.module.scss b/src/components/accordion/styles/CdrAccordionGroup.module.scss index c041ac088..9967aac90 100644 --- a/src/components/accordion/styles/CdrAccordionGroup.module.scss +++ b/src/components/accordion/styles/CdrAccordionGroup.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-accordion-group { display: block; diff --git a/src/components/banner/styles/CdrBanner.module.scss b/src/components/banner/styles/CdrBanner.module.scss index 3ba94782a..cf7b3cdc2 100644 --- a/src/components/banner/styles/CdrBanner.module.scss +++ b/src/components/banner/styles/CdrBanner.module.scss @@ -1,19 +1,22 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrBanner.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrBanner.vars'; .cdr-banner { @include cdr-banner-base-mixin; + display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main info-action" "message-body info-action" ; + &__wrapper { &--prominence { box-shadow: $cdr-prominence-raised; } } + &__main { display: grid; grid-area: main; @@ -21,11 +24,12 @@ grid-template-areas: "icon-left message icon-right"; min-height: 3.2rem; } + &__icon-left { grid-area: icon-left; display: inherit; - align-items: center; - justify-items: center; + place-items: center center; + & svg { max-height: 2.2rem; max-width: 2.2rem; @@ -36,57 +40,70 @@ } } + &__message { display: inherit; grid-area: message; padding: 0 $cdr-space-half-x; align-items: center; } + &__message-body { grid-area: message-body; + //ITEM_DOC: Message body background color background-color: var(--cdr-banner-message-body-background-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})); padding: $cdr-space-half-x; } + &__icon-right { display: inherit; align-items: center; grid-area: icon-right; + & svg { max-height: 2rem; max-width: 2rem; + //ITEM_DOC: Right icon fill color fill: var(--cdr-banner-icon-right-fill, var(--cdr-color-text-emphasis, #{$cdr-color-text-emphasis})) !important; } } + &__info-action { display: inherit; grid-area: info-action; - align-content: center; - justify-content: center; + place-content: center center; max-height: 3.2rem; width: 4rem; + & svg { max-height: 2.2rem; max-width: 2.2rem; + //ITEM_DOC: Info action icon fill color fill: var(--cdr-banner-info-action-fill, var(--cdr-color-text-link-rest, #{$cdr-color-text-link-rest})) !important; } } + &--default { & .cdr-banner__main { @include cdr-banner-default-mixin; + & .cdr-banner__icon-left { //ITEM_DOC: Left icon background color for default banner background-color: var(--cdr-banner-default-icon-left-background-color, var(--cdr-color-background-message-default-02, #{$cdr-color-background-message-default-02})); + svg { //ITEM_DOC: Left icon fill color for default banner fill: var(--cdr-banner-default-icon-left-fill, var(--cdr-color-icon-message-default, #{$cdr-color-icon-message-default})); } } } + & .cdr-banner__wrapper { border-left: $left-border; + //ITEM_DOC: Wrapper border left color for default banner border-left-color: var(--cdr-banner-default-wrapper-border-left-color, var(--cdr-color-border-message-default-01, #{$cdr-color-border-message-default-01})); } @@ -95,17 +112,21 @@ &--info { & .cdr-banner__main { @include cdr-banner-info-mixin; + & .cdr-banner__icon-left { //ITEM_DOC: Left icon background color for info banner background-color: var(--cdr-banner-info-icon-left-background-color, var(--cdr-color-background-message-info-02, #{$cdr-color-background-message-info-02})); + svg { //ITEM_DOC: Left icon fill color for info banner fill: var(--cdr-banner-info-icon-left-fill, var(--cdr-color-icon-message-info, #{$cdr-color-icon-message-info})); } } } + & .cdr-banner__wrapper { border-left: $left-border; + //ITEM_DOC: Wrapper border left color for info banner border-left-color: var(--cdr-banner-info-wrapper-border-left-color, var(--cdr-color-border-message-info-01, #{$cdr-color-border-message-info-01})); } @@ -114,17 +135,21 @@ &--warning { & .cdr-banner__main { @include cdr-banner-warning-mixin; + & .cdr-banner__icon-left { //ITEM_DOC: Left icon background color for warning banner background-color: var(--cdr-banner-warning-icon-left-background-color, var(--cdr-color-background-message-warning-02, #{$cdr-color-background-message-warning-02})); + svg { //ITEM_DOC: Left icon fill color for warning banner fill: var(--cdr-banner-warning-icon-left-fill, var(--cdr-color-icon-message-warning, #{$cdr-color-icon-message-warning})); } } } + & .cdr-banner__wrapper { border-left: $left-border; + //ITEM_DOC: Wrapper border left color for warning banner border-left-color: var(--cdr-banner-warning-wrapper-border-left-color, var(--cdr-color-border-message-warning-01, #{$cdr-color-border-message-warning-01})); } @@ -133,17 +158,21 @@ &--success { & .cdr-banner__main { @include cdr-banner-success-mixin; + & .cdr-banner__icon-left { //ITEM_DOC: Left icon background color for success banner background-color: var(--cdr-banner-success-icon-left-background-color, var(--cdr-color-background-message-success-02, #{$cdr-color-background-message-success-02})); + svg { //ITEM_DOC: Left icon fill color for success banner fill: var(--cdr-banner-success-icon-left-fill, var(--cdr-color-icon-message-success, #{$cdr-color-icon-message-success})); } } } + & .cdr-banner__wrapper { border-left: $left-border; + //ITEM_DOC: Wrapper border left color for success banner border-left-color: var(--cdr-banner-success-wrapper-border-left-color, var(--cdr-color-border-message-success-01, #{$cdr-color-border-message-success-01})); } @@ -152,17 +181,21 @@ &--error { & .cdr-banner__main { @include cdr-banner-error-mixin; + & .cdr-banner__icon-left { //ITEM_DOC: Left icon background color for error banner background-color: var(--cdr-banner-error-icon-left-background-color, var(--cdr-color-background-message-error-02, #{$cdr-color-background-message-error-02})); + svg { //ITEM_DOC: Left icon fill color for error banner fill: var(--cdr-banner-error-icon-left-fill, var(--cdr-color-icon-message-error, #{$cdr-color-icon-message-error})); } } } + & .cdr-banner__wrapper { border-left: $left-border; + //ITEM_DOC: Wrapper border left color for error banner border-left-color: var(--cdr-banner-error-wrapper-border-left-color, var(--cdr-color-border-message-error-01, #{$cdr-color-border-message-error-01})); } diff --git a/src/components/banner/styles/vars/CdrBanner.vars.scss b/src/components/banner/styles/vars/CdrBanner.vars.scss index 66a5316f3..0ac19e1f2 100644 --- a/src/components/banner/styles/vars/CdrBanner.vars.scss +++ b/src/components/banner/styles/vars/CdrBanner.vars.scss @@ -2,6 +2,7 @@ $left-border: 0.4rem solid; @mixin cdr-banner-base-mixin() { position: relative; + @include cdr-text-utility-sans-200; } @@ -9,6 +10,7 @@ $left-border: 0.4rem solid; //ITEM_DOC: Background color for a default cdr-banner background-color: var(--cdr-banner-default-background-color, var(--cdr-color-background-message-default-01, #{$cdr-color-background-message-default-01})); outline: thin solid; + //ITEM_DOC: Outline color for a default cdr-banner outline-color: var(--cdr-banner-default-outline-color, var(--cdr-color-border-message-default-02, #{$cdr-color-border-message-default-02})); outline-offset: -1px; @@ -18,6 +20,7 @@ $left-border: 0.4rem solid; //ITEM_DOC: Background color for an info cdr-banner background-color: var(--cdr-banner-info-background-color, var(--cdr-color-background-message-info-01, #{$cdr-color-background-message-info-01})); outline: thin solid; + //ITEM_DOC: Outline color for an info cdr-banner outline-color: var(--cdr-banner-info-outline-color, var(--cdr-color-border-message-info-02, #{$cdr-color-border-message-info-02})); outline-offset: -1px; @@ -27,6 +30,7 @@ $left-border: 0.4rem solid; //ITEM_DOC: Background color for a success cdr-banner background-color: var(--cdr-banner-success-background-color, var(--cdr-color-background-message-success-01, #{$cdr-color-background-message-success-01})); outline: thin solid; + //ITEM_DOC: Outline color for a success cdr-banner outline-color: var(--cdr-banner-success-outline-color, var(--cdr-color-border-message-success-02, #{$cdr-color-border-message-success-02})); outline-offset: -1px; @@ -36,6 +40,7 @@ $left-border: 0.4rem solid; //ITEM_DOC: Background color for a warning cdr-banner background-color: var(--cdr-banner-warning-background-color, var(--cdr-color-background-message-warning-01, #{$cdr-color-background-message-warning-01})); outline: thin solid; + //ITEM_DOC: Outline color for a warning cdr-banner outline-color: var(--cdr-banner-warning-outline-color, var(--cdr-color-border-message-warning-02, #{$cdr-color-border-message-warning-02})); outline-offset: -1px; @@ -45,6 +50,7 @@ $left-border: 0.4rem solid; //ITEM_DOC: Background color for an error cdr-banner background-color: var(--cdr-banner-error-background-color, var(--cdr-color-background-message-error-01, #{$cdr-color-background-message-error-01})); outline: thin solid; + //ITEM_DOC: Outline color for an error cdr-banner outline-color: var(--cdr-banner-error-outline-color, var(--cdr-color-border-message-error-02, #{$cdr-color-border-message-error-02})); outline-offset: -1px; diff --git a/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss b/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss index acdd706b0..9248a029e 100644 --- a/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss +++ b/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrBreadcrumb.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrBreadcrumb.vars'; .cdr-breadcrumb { line-height: 1; diff --git a/src/components/breadcrumb/styles/vars/CdrBreadcrumb.vars.scss b/src/components/breadcrumb/styles/vars/CdrBreadcrumb.vars.scss index ed9a9ddd8..8d6042783 100644 --- a/src/components/breadcrumb/styles/vars/CdrBreadcrumb.vars.scss +++ b/src/components/breadcrumb/styles/vars/CdrBreadcrumb.vars.scss @@ -6,6 +6,7 @@ @mixin cdr-breadcrumb-item-linked-mixin() { text-decoration: none; color: inherit; + &:hover, &:active, &:focus { diff --git a/src/components/button/styles/CdrButton.module.scss b/src/components/button/styles/CdrButton.module.scss index 080357b31..8986cbc5f 100644 --- a/src/components/button/styles/CdrButton.module.scss +++ b/src/components/button/styles/CdrButton.module.scss @@ -1,5 +1,6 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrButton.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrButton.vars'; + .cdr-button { @include cdr-button-base-mixin; diff --git a/src/components/button/styles/vars/CdrButton.vars.scss b/src/components/button/styles/vars/CdrButton.vars.scss index 2bb2e47b7..c632792da 100644 --- a/src/components/button/styles/vars/CdrButton.vars.scss +++ b/src/components/button/styles/vars/CdrButton.vars.scss @@ -31,7 +31,6 @@ text-decoration: none; text-transform: none; vertical-align: middle; - transition: box-shadow $cdr-duration-2-x $cdr-timing-function-ease, background-color $cdr-duration-2-x $cdr-timing-function-ease, color $cdr-duration-2-x $cdr-timing-function-ease, fill $cdr-duration-2-x $cdr-timing-function-ease; &:hover, &:active, &:focus { @@ -53,10 +52,13 @@ @mixin cdr-button-primary-mixin() { //ITEM_DOC: Primary button's background color background-color: var(--cdr-button-primary-background-color-rest, var(--cdr-color-background-button-primary-rest, #{$cdr-color-background-button-primary-rest})); + //ITEM_DOC: Primary button's box shadow which serves as a border box-shadow: inset 0 0 0 1px var(--cdr-button-primary-box-shadow-color-rest, var(--cdr-color-border-button-primary-rest, #{$cdr-color-border-button-primary-rest})); + //ITEM_DOC: Primary button's text color color: var(--cdr-button-primary-text-color, var(--cdr-color-text-button-primary, #{$cdr-color-text-button-primary})); + //ITEM_DOC: Primary button's fill color fill: var(--cdr-button-primary-fill-color, var(--cdr-color-text-button-primary, #{$cdr-color-text-button-primary})); @@ -64,10 +66,13 @@ &:focus { //ITEM_DOC: Primary button's text color when hovered or focused color: var(--cdr-button-primary-text-color-interaction, var(--cdr-color-text-button-primary-hover, #{$cdr-color-text-button-primary-hover})); + //ITEM_DOC: Primary button's fill color when hovered or focused fill: var(--cdr-button-primary-fill-color-interaction, var(--cdr-color-text-button-primary-hover, #{$cdr-color-text-button-primary-hover})); + //ITEM_DOC: Primary button's background color when hovered or focused background-color: var(--cdr-button-primary-background-color-interaction, var(--cdr-color-background-button-primary-hover, #{$cdr-color-background-button-primary-hover})); + //ITEM_DOC: Primary button's box shadow when hovered or focused box-shadow: inset 0 0 0 3px var(--cdr-button-primary-box-shadow-color-interaction, var(--cdr-color-border-button-primary-hover, #{$cdr-color-border-button-primary-hover})), $cdr-prominence-raised; } @@ -75,10 +80,13 @@ &:active { //ITEM_DOC: Primary button's text color when active color: var(--cdr-button-primary-text-color-active, var(--cdr-color-text-button-primary-active, #{$cdr-color-text-button-primary-active})); + //ITEM_DOC: Primary button's fill color when active fill: var(--cdr-button-primary-fill-color-active, var(--cdr-color-text-button-primary-active, #{$cdr-color-text-button-primary-active})); + //ITEM_DOC: Primary button's background color when active background-color: var(--cdr-button-primary-background-color-active, var(--cdr-color-background-button-primary-active, #{$cdr-color-background-button-primary-active})); + //ITEM_DOC: Primary button's box shadow when active. //ITEM_DOC: Primary button's inset box shadow when active box-shadow: inset 0 0 0 3px var(--cdr-button-primary-box-shadow-color-active, var(--cdr-color-border-button-primary-active, #{$cdr-color-border-button-primary-active})), inset 0 0 0 5px var(--cdr-button-primary-box-shadow-color-active-inset, var(--cdr-color-border-button-primary-active-inset, #{$cdr-color-border-button-primary-active-inset})); } @@ -86,10 +94,13 @@ &[disabled] { //ITEM_DOC: Primary button's background color when disabled background-color: var(--cdr-button-primary-background-color-disabled, var(--cdr-color-background-button-default-disabled, #{$cdr-color-background-button-default-disabled})); + //ITEM_DOC: Primary button's border color when disabled box-shadow: inset 0 0 0 1px var(--cdr-button-primary-box-shadow-color-disabled, var(--cdr-color-border-button-default-disabled, #{$cdr-color-border-button-default-disabled})); + //ITEM_DOC: Primary button's text color when disabled color: var(--cdr-button-primary-text-color-disabled, var(--cdr-color-text-button-primary-disabled, #{$cdr-color-text-button-primary-disabled})); + //ITEM_DOC: Primary button's fill color when disabled fill: var(--cdr-button-primary-fill-color-disabled, var(--cdr-color-text-button-primary-disabled, #{$cdr-color-text-button-primary-disabled})); } @@ -98,10 +109,13 @@ @mixin cdr-button-secondary-mixin() { //ITEM_DOC: Secondary button's background color background-color: var(--cdr-button-secondary-background-color-rest, var(--cdr-color-background-button-secondary-rest, #{$cdr-color-background-button-secondary-rest})); + //ITEM_DOC: Secondary button's box shadow which serves as a border box-shadow: inset 0 0 0 1px var(--cdr-button-secondary-box-shadow-color-rest, var(--cdr-color-border-button-secondary-rest, #{$cdr-color-border-button-secondary-rest})); + //ITEM_DOC: Secondary button's text color color: var(--cdr-button-secondary-text-color, var(--cdr-color-text-button-secondary, #{$cdr-color-text-button-secondary})); + //ITEM_DOC: Secondary button's fill color fill: var(--cdr-button-secondary-fill-color, var(--cdr-color-icon-default, #{$cdr-color-icon-default})); @@ -109,10 +123,13 @@ &:focus { //ITEM_DOC: Secondary button's text color when hovered or focused color: var(--cdr-button-secondary-text-color-interaction, var(--cdr-color-text-button-secondary-hover, #{$cdr-color-text-button-secondary-hover})); + //ITEM_DOC: Secondary button's fill color when hovered or focused fill: var(--cdr-button-secondary-fill-color-interaction, var(--cdr-color-text-button-secondary-hover, #{$cdr-color-text-button-secondary-hover})); + //ITEM_DOC: Secondary button's background color when hovered or focused background-color: var(--cdr-button-secondary-background-color-interaction, var(--cdr-color-background-button-secondary-hover, #{$cdr-color-background-button-secondary-hover})); + //ITEM_DOC: Secondary button's box shadow when hovered or focused box-shadow: inset 0 0 0 3px var(--cdr-button-secondary-box-shadow-color-interaction, var(--cdr-color-border-button-secondary-hover, #{$cdr-color-border-button-secondary-hover})), $cdr-prominence-raised; } @@ -120,10 +137,13 @@ &:active { //ITEM_DOC: Secondary button's text color when active color: var(--cdr-button-secondary-text-color-active, var(--cdr-color-text-button-secondary-active, #{$cdr-color-text-button-secondary-active})); + //ITEM_DOC: Secondary button's fill color when active fill: var(--cdr-button-secondary-fill-color-active, var(--cdr-color-text-button-secondary-active, #{$cdr-color-text-button-secondary-active})); + //ITEM_DOC: Secondary button's background color when active background-color: var(--cdr-button-secondary-background-color-active, var(--cdr-color-background-button-secondary-active, #{$cdr-color-background-button-secondary-active})); + //ITEM_DOC: Secondary button's box shadow when active. //ITEM_DOC: Secondary button's inset box shadow when active box-shadow: inset 0 0 0 3px var(--cdr-button-secondary-box-shadow-color-active, var(--cdr-color-border-button-secondary-active, #{$cdr-color-border-button-secondary-active})), inset 0 0 0 5px var(--cdr-button-secondary-border-color-active-inset, var(--cdr-color-border-button-secondary-active-inset, #{$cdr-color-border-button-secondary-active-inset})); } @@ -131,10 +151,13 @@ &[disabled] { //ITEM_DOC: Secondary button's background color when disabled background-color: var(--cdr-button-secondary-background-color-disabled, var(--cdr-color-background-button-secondary-disabled, #{$cdr-color-background-button-secondary-disabled})); + //ITEM_DOC: Secondary button's box shadow color when disabled. The box shadow serves as a border box-shadow: inset 0 0 0 1px var(--cdr-button-secondary-box-shadow-color-disabled, var(--cdr-color-border-button-default-disabled, #{$cdr-color-border-button-default-disabled})); + //ITEM_DOC: Secondary button's text color when disabled color: var(--cdr-button-secondary-text-color-disabled, var(--cdr-color-text-button-secondary-disabled, #{$cdr-color-text-button-secondary-disabled})); + //ITEM_DOC: Secondary button's fill color when disabled fill: var(--cdr-button-secondary-fill-color-disabled, var(--cdr-color-text-button-secondary-disabled, #{$cdr-color-text-button-secondary-disabled})); } @@ -143,10 +166,13 @@ @mixin cdr-button-dark-mixin() { //ITEM_DOC: Dark button's background color background-color: var(--cdr-button-dark-background-color-rest, var(--cdr-color-background-button-dark-rest, #{$cdr-color-background-button-dark-rest})); + //ITEM_DOC: Dark button's box shadow which serves as a border box-shadow: inset 0 0 0 1px var(--cdr-button-dark-box-shadow-color-rest, var(--cdr-color-border-button-dark-rest, #{$cdr-color-border-button-dark-rest})); + //ITEM_DOC: Dark button's text color color: var(--cdr-button-dark-text-color, var(--cdr-color-text-button-dark, #{$cdr-color-text-button-dark})); + //ITEM_DOC: Dark button's fill color fill: var(--cdr-button-dark-fill-color, var(--cdr-color-text-button-dark, #{$cdr-color-text-button-dark})); @@ -154,10 +180,13 @@ &:focus { //ITEM_DOC: Dark button's text color when hovered or focused color: var(--cdr-button-dark-text-color-interaction, var(--cdr-color-text-button-dark-hover, #{$cdr-color-text-button-dark-hover})); + //ITEM_DOC: Dark button's fill color when hovered or focused fill: var(--cdr-button-dark-fill-color-interaction, var(--cdr-color-text-button-dark-hover, #{$cdr-color-text-button-dark-hover})); + //ITEM_DOC: Dark button's background color when hovered or focused background-color: var(--cdr-button-dark-background-color-interaction, var(--cdr-color-background-button-dark-hover, #{$cdr-color-background-button-dark-hover})); + //ITEM_DOC: Dark button's box shadow when hovered or focused box-shadow: inset 0 0 0 3px var(--cdr-button-dark-box-shadow-color-interaction, var(--cdr-color-border-button-dark-hover, #{$cdr-color-border-button-dark-hover})), $cdr-prominence-raised; } @@ -165,10 +194,13 @@ &:active { //ITEM_DOC: Dark button's text color when active color: var(--cdr-button-dark-text-color-active, var(--cdr-color-text-button-dark-active, #{$cdr-color-text-button-dark-active})); + //ITEM_DOC: Dark button's fill color when active fill: var(--cdr-button-dark-fill-color-active, var(--cdr-color-text-button-dark-active, #{$cdr-color-text-button-dark-active})); + //ITEM_DOC: Dark button's background color when active background-color: var(--cdr-button-dark-background-color-active, var(--cdr-color-background-button-dark-active, #{$cdr-color-background-button-dark-active})); + //ITEM_DOC: Dark button's box shadow when active. The box shadow serves as a border. //ITEM_DOC: Dark button's inset box shadow when active. The box shadow serves as a border box-shadow: inset 0 0 0 3px var(--cdr-button-dark-box-shadow-color-active, var(--cdr-color-border-button-dark-active, #{$cdr-color-border-button-dark-active})), inset 0 0 0 5px var(--cdr-button-dark-box-shadow-color-active-inset, var(--cdr-color-border-button-dark-active-inset, #{$cdr-color-border-button-dark-active-inset})); } @@ -176,10 +208,13 @@ &[disabled] { //ITEM_DOC: Dark button's background color when disabled background-color: var(--cdr-button-dark-background-color-disabled, var(--cdr-color-background-button-default-disabled, #{$cdr-color-background-button-default-disabled})); + //ITEM_DOC: Dark button's box shadow color when disabled. The box shadow serves as a border box-shadow: inset 0 0 0 1px var(--cdr-button-dark-box-shadow-color-disabled, var(--cdr-color-border-button-default-disabled, #{$cdr-color-border-button-default-disabled})); + //ITEM_DOC: Dark button's text color when disabled color: var(--cdr-button-dark-text-color-disabled, var(--cdr-color-text-button-dark-disabled, #{$cdr-color-text-button-dark-disabled})); + //ITEM_DOC: Dark button's fill color when disabled fill: var(--cdr-button-dark-fill-color-disabled, var(--cdr-color-text-button-dark-disabled, #{$cdr-color-text-button-dark-disabled})); } @@ -188,10 +223,13 @@ @mixin cdr-button-sale-mixin() { //ITEM_DOC: Sale button's background color background-color: var(--cdr-button-sale-background-color-rest, var(--cdr-color-background-button-sale-rest, #{$cdr-color-background-button-sale-rest})); + //ITEM_DOC: Sale button's box shadow which serves as a border box-shadow: inset 0 0 0 1px var(--cdr-button-sale-box-shadow-color-rest, var(--cdr-color-border-button-sale-rest, #{$cdr-color-border-button-sale-rest})); + //ITEM_DOC: Sale button's text color color: var(--cdr-button-sale-text-color, var(--cdr-color-text-button-sale, #{$cdr-color-text-button-sale})); + //ITEM_DOC: Sale button's fill color fill: var(--cdr-button-sale-fill-color, var(--cdr-color-text-button-sale, #{$cdr-color-text-button-sale})); @@ -199,10 +237,13 @@ &:focus { //ITEM_DOC: Sale button's text color when hovered or focused color: var(--cdr-button-sale-text-color-interaction, var(--cdr-color-text-button-sale-hover, #{$cdr-color-text-button-sale-hover})); + //ITEM_DOC: Sale button's fill color when hovered or focused fill: var(--cdr-button-sale-fill-color-interaction, var(--cdr-color-text-button-sale-hover, #{$cdr-color-text-button-sale-hover})); + //ITEM_DOC: Sale button's background color when hovered or focused background-color: var(--cdr-button-sale-background-color-interaction, var(--cdr-color-background-button-sale-hover, #{$cdr-color-background-button-sale-hover})); + //ITEM_DOC: Sale button's box shadow when hovered or focused. The box shadow serves as a border box-shadow: inset 0 0 0 3px var(--cdr-button-sale-box-shadow-color-interaction, var(--cdr-color-border-button-sale-hover, #{$cdr-color-border-button-sale-hover})), $cdr-prominence-raised; } @@ -210,10 +251,13 @@ &:active { //ITEM_DOC: Sale button's text color when active color: var(--cdr-button-sale-text-color-active, var(--cdr-color-text-button-sale-active, #{$cdr-color-text-button-sale-active})); + //ITEM_DOC: Sale button's fill color when active fill: var(--cdr-button-sale-fill-color-active, var(--cdr-color-text-button-sale-active, #{$cdr-color-text-button-sale-active})); + //ITEM_DOC: Sale button's background color when active background-color: var(--cdr-button-sale-background-color-active, var(--cdr-color-background-button-sale-active, #{$cdr-color-background-button-sale-active})); + //ITEM_DOC: Sale button's box shadow when active. The box shadow serves as a border. //ITEM_DOC: Sale button's inset box shadow when active. The box shadow serves as a border box-shadow: inset 0 0 0 3px var(--cdr-button-sale-box-shadow-color-active, var(--cdr-color-border-button-sale-active, #{$cdr-color-border-button-sale-active})), inset 0 0 0 5px var(--cdr-button-sale-box-shadow-color-active-inset, var(--cdr-color-border-button-sale-active-inset, #{$cdr-color-border-button-sale-active-inset})); } @@ -221,10 +265,13 @@ &[disabled] { //ITEM_DOC: Sale button's background color when disabled background-color: var(--cdr-button-sale-background-color-disabled, var(--cdr-color-background-button-default-disabled, #{$cdr-color-background-button-default-disabled})); + //ITEM_DOC: Sale button's border color when disabled box-shadow: inset 0 0 0 1px var(--cdr-button-sale-box-shadow-color-disabled, var(--cdr-color-border-button-default-disabled, #{$cdr-color-border-button-default-disabled})); + //ITEM_DOC: Sale button's text color when disabled color: var(--cdr-button-sale-text-color-disabled, var(--cdr-color-text-button-sale-disabled, #{$cdr-color-text-button-sale-disabled})); + //ITEM_DOC: Sale button's fill color when disabled fill: var(--cdr-button-sale-fill-color-disabled, var(--cdr-color-text-button-sale-disabled, #{$cdr-color-text-button-sale-disabled})); } @@ -234,6 +281,7 @@ @mixin cdr-button-link-mixin() { //ITEM_DOC: Link variant of cdr-button's text color color: var(--cdr-button-link-text-color, var(--cdr-color-text-link-rest, #{$cdr-color-text-link-rest})); + //ITEM_DOC: Link variant of cdr-button's fill color fill: var(--cdr-button-link-fill-color, var(--cdr-color-text-link-rest, #{$cdr-color-text-link-rest})); background-color: transparent; @@ -248,6 +296,7 @@ &:hover { //ITEM_DOC: Link variant of cdr-button's text color when hovered color: var(--cdr-button-link-text-color-hover, var(--cdr-color-text-link-hover, #{$cdr-color-text-link-hover})); + //ITEM_DOC: Link variant of cdr-button's text decoration when hovered text-decoration: none; } @@ -438,6 +487,7 @@ @mixin cdr-button-small-mixin() { @include cdr-button-base-text-mixin-small; + padding: $cdr-space-inset-three-quarter-x-squish; width: auto; @@ -470,6 +520,7 @@ @mixin cdr-button-medium-mixin() { @include cdr-button-base-text-mixin-medium; + padding: $cdr-space-inset-one-x-squish; width: auto; @@ -502,6 +553,7 @@ @mixin cdr-button-large-mixin() { @include cdr-button-base-text-mixin-medium; + padding: $cdr-space-inset-one-and-a-half-x-squish; width: auto; diff --git a/src/components/caption/styles/CdrCaption.module.scss b/src/components/caption/styles/CdrCaption.module.scss index de03d2aa9..0298fb740 100644 --- a/src/components/caption/styles/CdrCaption.module.scss +++ b/src/components/caption/styles/CdrCaption.module.scss @@ -9,8 +9,9 @@ :Base - CdrCaption ========================================================================== */ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrCaption.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrCaption.vars'; + .cdr-caption { @include cdr-caption-container-mixin; diff --git a/src/components/caption/styles/vars/CdrCaption.vars.scss b/src/components/caption/styles/vars/CdrCaption.vars.scss index 2e7b03fea..2d2bd3f7f 100644 --- a/src/components/caption/styles/vars/CdrCaption.vars.scss +++ b/src/components/caption/styles/vars/CdrCaption.vars.scss @@ -10,7 +10,6 @@ font-weight: 400; letter-spacing: 0.08px; line-height: 2.2rem; - margin: 0; //ITEM_DOC: Text color of a cdr-caption diff --git a/src/components/card/styles/CdrCard.module.scss b/src/components/card/styles/CdrCard.module.scss index 2a910654d..ba387852e 100644 --- a/src/components/card/styles/CdrCard.module.scss +++ b/src/components/card/styles/CdrCard.module.scss @@ -1,5 +1,6 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrCard.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrCard.vars'; + .cdr-card { @include cdr-card-base-mixin; } diff --git a/src/components/card/styles/vars/CdrCard.vars.scss b/src/components/card/styles/vars/CdrCard.vars.scss index dfce14a24..57fc8dd5e 100644 --- a/src/components/card/styles/vars/CdrCard.vars.scss +++ b/src/components/card/styles/vars/CdrCard.vars.scss @@ -1,9 +1,11 @@ @mixin cdr-card-base-mixin() { position: relative; + //ITEM_DOC: Background color of a cdr-card background-color: var(--cdr-card-base-background-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})); border-radius: $cdr-radius-softer; box-shadow: $cdr-prominence-raised; + //ITEM_DOC: Text color of a cdr-card color: var(--cdr-card-base-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); container: card / inline-size; @@ -22,12 +24,14 @@ @mixin cdr-card-link-mixin() { position: static; + //ITEM_DOC: Link text color of a cdr-card color: var(--cdr-card-link-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})) !important; text-decoration: none !important; &:hover { text-decoration: underline !important; + //ITEM_DOC: Link hover text color of a cdr-card color: var(--cdr-card-link-hover-color, var(--cdr-color-text-link-hover, #{$cdr-color-text-link-hover})) !important; } diff --git a/src/components/checkbox/styles/CdrCheckbox.module.scss b/src/components/checkbox/styles/CdrCheckbox.module.scss index 5bb34b621..472b5f34b 100644 --- a/src/components/checkbox/styles/CdrCheckbox.module.scss +++ b/src/components/checkbox/styles/CdrCheckbox.module.scss @@ -1,12 +1,13 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrCheckbox.vars.scss'; -@import '../../labelWrapper/styles/CdrLabelWrapper.module.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrCheckbox.vars'; +@import '../../labelWrapper/styles/CdrLabelWrapper.module'; .cdr-checkbox { &__svg-box { position: relative; right: 2.8rem; top: 2rem; + svg { fill: transparent; position: absolute; @@ -17,12 +18,14 @@ z-index: 1; } } + /* Checked ========== */ &__input:checked { & ~ .cdr-label-wrapper__figure { @include cdr-form-figure-checkbox-checked-mixin; } + & ~ .cdr-checkbox__svg-box { svg { //ITEM_DOC: Fill color of the checkbox check icon when checked @@ -69,6 +72,7 @@ ========== */ &[indeterminate] ~ .cdr-label-wrapper__figure { box-shadow: inset 0 0 0 2px $cdr-color-border-input-default-selected-hover; + &::after { background-color: $cdr-color-icon-checkbox-default-selected-hover; } @@ -79,15 +83,16 @@ /* Disabled ========== */ &__input:disabled { - & ~ .cdr-label-wrapper__figure { @include cdr-form-figure-checkbox-disabled-mixin; } + & ~ .cdr-checkbox__svg-box { svg { fill: transparent !important; } } + /* Disabled + Checked ========== */ &:checked { @@ -132,6 +137,7 @@ fill: var(--cdr-form-figure-checkbox-fill-active , var(--cdr-color-icon-checkbox-default-selected-active)) } } + .cdr-checkbox__input[indeterminate] ~ .cdr-label-wrapper__figure::after { content: none; } diff --git a/src/components/checkbox/styles/vars/CdrCheckbox.vars.scss b/src/components/checkbox/styles/vars/CdrCheckbox.vars.scss index 84c6c66eb..1813e5cfd 100644 --- a/src/components/checkbox/styles/vars/CdrCheckbox.vars.scss +++ b/src/components/checkbox/styles/vars/CdrCheckbox.vars.scss @@ -3,6 +3,7 @@ @mixin cdr-form-figure-checkbox-checked-mixin() { //ITEM_DOC: Box-shadow color of a checked cdr-checkbox box-shadow: inset 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-checked, var(--cdr-color-border-input-default-selected, #{$cdr-color-border-input-default-selected})); + //ITEM_DOC: Background color of a checked cdr-checkbox background-color: var(--cdr-form-figure-checkbox-background-color-checked, var(--cdr-color-background-input-default-selected, #{$cdr-color-background-input-default-selected})); background-repeat: no-repeat; @@ -10,8 +11,10 @@ @mixin cdr-form-figure-checkbox-hover-mixin() { cursor: pointer; + //ITEM_DOC: Box-shadow color of a hovered cdr-checkbox box-shadow: inset 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-hover, var(--cdr-color-border-input-default-hover, #{$cdr-color-border-input-default-hover})), 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-hover, var(--cdr-color-border-input-default-hover, #{$cdr-color-border-input-default-hover})); + //ITEM_DOC: Background color of a hovered cdr-checkbox background-color: var(--cdr-form-figure-checkbox-background-hover, var(--cdr-color-background-input-default-hover, #{$cdr-color-background-input-default-hover})); } @@ -19,6 +22,7 @@ @mixin cdr-form-figure-checkbox-checked-hover-mixin() { //ITEM_DOC: Box-shadow color of a checked and hovered cdr-checkbox box-shadow: inset 0 0 0 1px var(--cdr-form-figure-checkbox-checked-box-shadow-hover, var(--cdr-color-border-input-default-selected-hover, #{$cdr-color-border-input-default-selected-hover})), 0 0 0 1px var(--cdr-form-figure-checkbox-checked-hover-box-shadow, var(--cdr-color-border-input-default-selected-hover, #{$cdr-color-border-input-default-selected-hover})); + //ITEM_DOC: Background color of a checked and hovered cdr-checkbox background-color: var(--cdr-form-figure-checkbox-checked-background-hover, var(--cdr-color-background-input-default-selected-hover, #{$cdr-color-background-input-default-selected-hover})); } @@ -26,6 +30,7 @@ @mixin cdr-form-figure-checkbox-disabled-mixin() { //ITEM_DOC: Box-shadow color of a cdr-checkbox when disabled box-shadow: inset 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-disabled, var(--cdr-color-border-input-default-disabled, #{$cdr-color-border-input-default-disabled})) !important; + //ITEM_DOC: Background color of a cdr-checkbox when disabled background-color: var(--cdr-form-figure-checkbox-background-disabled, var(--cdr-color-background-input-default-disabled, #{$cdr-color-background-input-default-disabled})) !important; background-image: none !important; @@ -39,6 +44,7 @@ @mixin cdr-form-figure-checkbox-active-mixin() { //ITEM_DOC: Box-shadow color of a cdr-checkbox when active box-shadow: inset 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-active, var(--cdr-color-border-input-default-active, #{$cdr-color-border-input-default-active})), 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-active, var(--cdr-color-border-input-default-active, #{$cdr-color-border-input-default-active})); + //ITEM_DOC: Background color of a cdr-checkbox when active background-color: var(--cdr-form-figure-checkbox-background-active, var(--cdr-color-background-input-default-active, #{$cdr-color-background-input-default-active})); } @@ -46,6 +52,7 @@ @mixin cdr-form-figure-checkbox-focus-mixin() { //ITEM_DOC: Box-shadow color of a cdr-checkbox when focused box-shadow: inset 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-focus, var(--cdr-color-border-input-default-active, #{$cdr-color-border-input-default-active})), 0 0 0 1px var(--cdr-form-figure-checkbox-box-shadow-focus, var(--cdr-color-border-input-default-active, #{$cdr-color-border-input-default-active})); + //ITEM_DOC: Background color of a cdr-checkbox when focused background-color: var(--cdr-form-figure-checkbox-background-focus, var(--cdr-color-background-input-default-focus, #{$cdr-color-background-input-default-focus})); } diff --git a/src/components/chip/styles/CdrChip.module.scss b/src/components/chip/styles/CdrChip.module.scss index 2703c159e..51721b906 100644 --- a/src/components/chip/styles/CdrChip.module.scss +++ b/src/components/chip/styles/CdrChip.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrChip.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrChip.vars'; .cdr-chip { @include cdr-chip-base-mixin; @@ -7,6 +7,7 @@ .cdr-chip__icon-left { @include cdr-chip-icon-left-mixin; + & svg { fill: inherit; } @@ -14,6 +15,7 @@ .cdr-chip__icon-right { @include cdr-chip-icon-right-mixin; + & svg { fill: inherit; } diff --git a/src/components/chip/styles/CdrChipGroup.module.scss b/src/components/chip/styles/CdrChipGroup.module.scss index 21cba6dc8..d1bdf65ee 100644 --- a/src/components/chip/styles/CdrChipGroup.module.scss +++ b/src/components/chip/styles/CdrChipGroup.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrChipGroup.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrChipGroup.vars'; .cdr-chip-group { @include cdr-chip-group-base-mixin; diff --git a/src/components/chip/styles/vars/CdrChip.vars.scss b/src/components/chip/styles/vars/CdrChip.vars.scss index 25ca8c1b0..527d46f56 100644 --- a/src/components/chip/styles/vars/CdrChip.vars.scss +++ b/src/components/chip/styles/vars/CdrChip.vars.scss @@ -9,13 +9,15 @@ //ITEM_DOC: Text color of a cdr-chip color: var(--cdr-chip-text-color, var(--cdr-color-text-chip-default, #{$cdr-color-text-chip-default})); + //ITEM_DOC: Fill color of a cdr-chip fill: var(--cdr-chip-fill-color, var(--cdr-color-text-chip-default, #{$cdr-color-text-chip-default})); + //ITEM_DOC: Background color of a cdr-chip background-color: var(--cdr-chip-background-color-rest, var(--cdr-color-background-chip-default-rest, #{$cdr-color-background-chip-default-rest})); + //ITEM_DOC: Box-shadow color of a cdr-chip box-shadow: inset 0 0 0 1px var(--cdr-chip-box-shadow-color-rest, var(--cdr-color-border-chip-default-rest, #{$cdr-color-border-chip-default-rest})); - cursor: pointer; font-family: $cdr-font-family-sans; font-size: 14px; @@ -26,10 +28,13 @@ &:disabled, &:disabled:hover, &:disabled:focus { cursor: not-allowed !important; + //ITEM_DOC: Background color of a cdr-chip when disabled background-color: var(--cdr-chip-background-color-disabled, var(--cdr-color-background-chip-default-disabled, #{$cdr-color-background-chip-default-disabled})) !important; + //ITEM_DOC: Box-shadow color of a cdr-chip when disabled box-shadow: inset 0 0 0 1px var(--cdr-chip-box-shadow-color-disabled, var(--cdr-color-border-chip-default-disabled, #{$cdr-color-border-chip-default-disabled})) !important; + //ITEM_DOC: Text color of a cdr-chip when disabled color: var(--cdr-chip-text-color-disabled, var(--cdr-color-text-chip-disabled, #{$cdr-color-text-chip-disabled})) !important; } @@ -37,6 +42,7 @@ &:hover { //ITEM_DOC: Background color of a cdr-chip on hover background-color: var(--cdr-chip-background-color-hover, var(--cdr-color-background-chip-default-hover, #{$cdr-color-background-chip-default-hover})); + //ITEM_DOC: Box-shadow color of a cdr-chip on hover box-shadow: inset 0 0 0 2px var(--cdr-chip-box-shadow-color-hover, var(--cdr-color-border-chip-default-hover, #{$cdr-color-border-chip-default-hover})); } @@ -44,8 +50,10 @@ &:focus { outline: none; outline-offset: 0; + //ITEM_DOC: Background color of a cdr-chip on focus background-color: var(--cdr-chip-background-color-focus, var(--cdr-color-background-chip-default-focus, #{$cdr-color-background-chip-default-focus})); + //ITEM_DOC: Box-shadow color of a cdr-chip on focus box-shadow: inset 0 0 0 3px var(--cdr-chip-box-shadow-color-focus, var(--cdr-color-border-chip-default-focus, #{$cdr-color-border-chip-default-focus})), $cdr-prominence-raised; } @@ -53,14 +61,17 @@ &:active { //ITEM_DOC: Background color of a cdr-chip when active background-color: var(--cdr-chip-background-color-active, var(--cdr-color-background-chip-default-active, #{$cdr-color-background-chip-default-active})); + //ITEM_DOC: Box-shadow color of a cdr-chip when active box-shadow: inset 0 0 0 3px var(--cdr-chip-box-shadow-color-active, var(--cdr-color-border-chip-default-active, #{$cdr-color-border-chip-default-active})), $cdr-prominence-raised; } &[aria-pressed="true"], &[aria-checked="true"] { font-weight: 500; + //ITEM_DOC: Background color of a cdr-chip when selected background-color: var(--cdr-chip-background-color-selected-rest, var(--cdr-color-background-chip-default-selected, #{$cdr-color-background-chip-default-selected})); + //ITEM_DOC: Box-shadow color of a cdr-chip when selected box-shadow: inset 0 0 0 2px var(--cdr-chip-box-shadow-color-selected-rest, var(--cdr-color-border-chip-default-selected-rest, #{$cdr-color-border-chip-default-selected-rest})); } @@ -68,6 +79,7 @@ &[aria-pressed="true"]:hover, &[aria-checked="true"]:hover { //ITEM_DOC: Background color of a cdr-chip when selected and hovered background-color: var(--cdr-chip-background-color-selected-hover, var(--cdr-color-background-chip-default-selected-hover, #{$cdr-color-background-chip-default-selected-hover})); + //ITEM_DOC: Box-shadow color of a cdr-chip when selected and hovered box-shadow: inset 0 0 0 2px var(--cdr-chip-box-shadow-color-selected-hover, var(--cdr-color-border-chip-default-selected-hover, #{$cdr-color-border-chip-default-selected-hover})); } @@ -75,6 +87,7 @@ &[aria-pressed="true"]:focus, &[aria-checked="true"]:focus { //ITEM_DOC: Background color of a cdr-chip when selected and focused background-color: var(--cdr-chip-background-color-selected-focus, var(--cdr-color-background-chip-default-selected-focus, #{$cdr-color-background-chip-default-selected-focus})); + //ITEM_DOC: Box-shadow color of a cdr-chip when selected and focused box-shadow: inset 0 0 0 3px var(--cdr-chip-box-shadow-color-selected-focus, var(--cdr-color-border-chip-default-selected-focus, #{$cdr-color-border-chip-default-selected-focus})), $cdr-prominence-raised; } @@ -82,6 +95,7 @@ &[aria-pressed="true"]:active, &[aria-checked="true"]:active { //ITEM_DOC: Background color of a cdr-chip when selected and active background-color: var(--cdr-chip-background-color-selected-active, var(--cdr-color-background-chip-default-selected-active, #{$cdr-color-background-chip-default-selected-active})); + //ITEM_DOC: Box-shadow color of a cdr-chip when selected and active box-shadow: inset 0 0 0 3px var(--cdr-chip-box-shadow-color-selected-focus, var(--cdr-color-border-chip-default-selected-focus, #{$cdr-color-border-chip-default-selected-focus})), $cdr-prominence-raised; } diff --git a/src/components/chip/styles/vars/CdrChipGroup.vars.scss b/src/components/chip/styles/vars/CdrChipGroup.vars.scss index 3a89216cc..a03f15374 100644 --- a/src/components/chip/styles/vars/CdrChipGroup.vars.scss +++ b/src/components/chip/styles/vars/CdrChipGroup.vars.scss @@ -1,18 +1,15 @@ @mixin cdr-chip-group-base-mixin() { border: none; - - margin-inline-start: 0; - margin-inline-end: 0; - padding-block-start: 0; - padding-inline-start: 0; - padding-inline-end: 0; - padding-block-end: 0; + margin-inline: 0; + padding-block: 0; + padding-inline: 0; legend { padding-inline-start: 0; margin-bottom: $cdr-space-half-x; } } + @mixin cdr-chip-group-content-mixin() { & > button:not(:last-child) { margin-right: $cdr-space-half-x; diff --git a/src/components/choreographer/styles/CdrChoreographer.module.scss b/src/components/choreographer/styles/CdrChoreographer.module.scss index 8d3bc3a27..8592ead68 100644 --- a/src/components/choreographer/styles/CdrChoreographer.module.scss +++ b/src/components/choreographer/styles/CdrChoreographer.module.scss @@ -1,17 +1,20 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-choreographer { &__kicker { display: block; padding: 1.6rem 2.4rem; } + &__title { padding: 0 2.4rem; margin-bottom: 0.8rem!important; } + &__rating { padding: 0 2.4rem; } + &__abstract { padding: 0 2.4rem; } diff --git a/src/components/container/styles/CdrContainer.module.scss b/src/components/container/styles/CdrContainer.module.scss index d5564ee0a..75bb85220 100644 --- a/src/components/container/styles/CdrContainer.module.scss +++ b/src/components/container/styles/CdrContainer.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-container { @include cdr-text-default; diff --git a/src/components/formError/styles/CdrFormError.module.scss b/src/components/formError/styles/CdrFormError.module.scss index d1678907a..5440b9745 100644 --- a/src/components/formError/styles/CdrFormError.module.scss +++ b/src/components/formError/styles/CdrFormError.module.scss @@ -1,8 +1,9 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrFormError.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrFormError.vars'; .cdr-form-error { @include cdr-form-error-base-mixin; + &__icon { @include cdr-form-error-icon-mixin; } diff --git a/src/components/formError/styles/vars/CdrFormError.vars.scss b/src/components/formError/styles/vars/CdrFormError.vars.scss index 382039764..684703d4e 100644 --- a/src/components/formError/styles/vars/CdrFormError.vars.scss +++ b/src/components/formError/styles/vars/CdrFormError.vars.scss @@ -1,7 +1,9 @@ @mixin cdr-form-error-base-mixin() { @include cdr-text-utility-sans-300; + //ITEM_DOC: Text color of a cdr-form-error color: var(--cdr-form-error-text-color, var(--cdr-color-text-input-error, #{$cdr-color-text-input-error})); + //ITEM_DOC: Fill color of a cdr-form-error fill: var(--cdr-form-error-fill-color, var(--cdr-color-text-input-error, #{$cdr-color-text-input-error})); margin-top: $cdr-space-quarter-x; diff --git a/src/components/formGroup/styles/CdrFormGroup.module.scss b/src/components/formGroup/styles/CdrFormGroup.module.scss index 11256f9eb..35ea88298 100644 --- a/src/components/formGroup/styles/CdrFormGroup.module.scss +++ b/src/components/formGroup/styles/CdrFormGroup.module.scss @@ -1,7 +1,8 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrFormGroup.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrFormGroup.vars'; + //@import '~@rei/cedar/dist/style/cdr-form-error.css'; -@import '../../formError/styles/CdrFormError.module.scss'; +@import '../../formError/styles/CdrFormError.module'; .cdr-form-group { @include cdr-form-group-base-mixin; diff --git a/src/components/formGroup/styles/vars/CdrFormGroup.vars.scss b/src/components/formGroup/styles/vars/CdrFormGroup.vars.scss index 47dd3e6f0..11d73d696 100644 --- a/src/components/formGroup/styles/vars/CdrFormGroup.vars.scss +++ b/src/components/formGroup/styles/vars/CdrFormGroup.vars.scss @@ -1,13 +1,10 @@ @mixin cdr-form-group-base-mixin() { @include cdr-text-heading-sans-300; - border: none; - margin-inline-start: 0; - margin-inline-end: 0; - padding-block-start: 0; - padding-inline-start: 0; - padding-inline-end: 0; - padding-block-end: 0; + border: none; + margin-inline: 0; + padding-block: 0; + padding-inline: 0; legend { padding-inline-start: 0; @@ -18,8 +15,10 @@ @mixin cdr-form-group-error-mixin() { //ITEM_DOC: Box-shadow color of a cdr-form-group error box-shadow: inset 0 0 0 1px var(--cdr-form-group-error-box-shadow, var(--cdr-color-border-input-error, #{$cdr-color-border-input-error})); + //ITEM_DOC: Background color of a cdr-form-group error background-color: var(--cdr-form-group-error-background-color, var(--cdr-color-background-input-error, #{$cdr-color-background-input-error})); + &:hover { //ITEM_DOC: Background color of a cdr-form-group error on hover background-color: var(--cdr-form-group-error-background-hover, transparent); @@ -33,6 +32,7 @@ @mixin cdr-form-group-disabled-mixin() { cursor: not-allowed; + //ITEM_DOC: Text color of a disabled cdr-form-group color: var(--cdr-form-group-disabled-text-color, var(--cdr-color-text-disabled, #{$cdr-color-text-disabled})); } @@ -42,6 +42,7 @@ border-radius: $cdr-radius-softer; display: flex; flex-direction: column; + & > * { flex: 1 1 0; } diff --git a/src/components/fulfillmentTile/styles/CdrFulfillmentTile.module.scss b/src/components/fulfillmentTile/styles/CdrFulfillmentTile.module.scss index c088da5cd..eedaeeabb 100644 --- a/src/components/fulfillmentTile/styles/CdrFulfillmentTile.module.scss +++ b/src/components/fulfillmentTile/styles/CdrFulfillmentTile.module.scss @@ -1,6 +1,6 @@ -@import '../../surfaceSelection/styles/vars/CdrSurfaceSelection.vars.scss'; -@import '../../surface/styles/vars/CdrSurface.vars.scss'; -@import './vars/CdrFulfillmentTile.vars.scss'; +@import '../../surfaceSelection/styles/vars/CdrSurfaceSelection.vars'; +@import '../../surface/styles/vars/CdrSurface.vars'; +@import './vars/CdrFulfillmentTile.vars'; .cdr-fulfillment-tile { @include cdr-surface-base-mixin( @@ -14,5 +14,5 @@ $fulfillment-tile-border-colors, $fulfillment-tile-component ); - @include cdr-fulfillment-tile-base-mixin(); + @include cdr-fulfillment-tile-base-mixin; } diff --git a/src/components/fulfillmentTile/styles/CdrFulfillmentTileContent.module.scss b/src/components/fulfillmentTile/styles/CdrFulfillmentTileContent.module.scss index 51366911e..c0bb80b51 100644 --- a/src/components/fulfillmentTile/styles/CdrFulfillmentTileContent.module.scss +++ b/src/components/fulfillmentTile/styles/CdrFulfillmentTileContent.module.scss @@ -1,4 +1,4 @@ -@import './vars/CdrFulfillmentTileContent.vars.scss'; +@import './vars/CdrFulfillmentTileContent.vars'; .cdr-fulfillment-tile-content { @include cdr-fulfillment-tile-content-base-mixin; diff --git a/src/components/fulfillmentTile/styles/CdrFulfillmentTileHeader.module.scss b/src/components/fulfillmentTile/styles/CdrFulfillmentTileHeader.module.scss index 79b4870c8..e551fde6d 100644 --- a/src/components/fulfillmentTile/styles/CdrFulfillmentTileHeader.module.scss +++ b/src/components/fulfillmentTile/styles/CdrFulfillmentTileHeader.module.scss @@ -1,4 +1,4 @@ -@import './vars/CdrFulfillmentTileHeader.vars.scss'; +@import './vars/CdrFulfillmentTileHeader.vars'; .cdr-fulfillment-tile-header { @include cdr-fulfillment-tile-header-base-mixin; diff --git a/src/components/fulfillmentTile/styles/CdrFulfillmentTileIcon.module.scss b/src/components/fulfillmentTile/styles/CdrFulfillmentTileIcon.module.scss index bb116d0f3..4dc13c706 100644 --- a/src/components/fulfillmentTile/styles/CdrFulfillmentTileIcon.module.scss +++ b/src/components/fulfillmentTile/styles/CdrFulfillmentTileIcon.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrFulfillmentTileIcon.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrFulfillmentTileIcon.vars'; .cdr-fulfillment-tile-icon { @include cdr-fulfillment-tile-icon-base-mixin; diff --git a/src/components/fulfillmentTile/styles/CdrFulfillmentTileLayout.module.scss b/src/components/fulfillmentTile/styles/CdrFulfillmentTileLayout.module.scss index b0cac0f28..2ecd2f373 100644 --- a/src/components/fulfillmentTile/styles/CdrFulfillmentTileLayout.module.scss +++ b/src/components/fulfillmentTile/styles/CdrFulfillmentTileLayout.module.scss @@ -1,6 +1,6 @@ -@import '../../surfaceSelection/styles/vars/CdrSurfaceSelectionLayout.vars.scss'; -@import '../../surface/styles/vars/CdrSurface.vars.scss'; +@import '../../surfaceSelection/styles/vars/CdrSurfaceSelectionLayout.vars'; +@import '../../surface/styles/vars/CdrSurface.vars'; .cdr-fulfillment-tile-layout { - @include cdr-surface-selection-layout-base-mixin(); + @include cdr-surface-selection-layout-base-mixin; } diff --git a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTile.vars.scss b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTile.vars.scss index 4f417e12e..18cecb821 100644 --- a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTile.vars.scss +++ b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTile.vars.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@import '../../../../styles/settings/index.scss'; -@import '../../../surfaceSelection/styles/vars/CdrSurfaceSelection.vars.scss'; +@import '../../../../styles/settings/index'; +@import '../../../surfaceSelection/styles/vars/CdrSurfaceSelection.vars'; $fulfillment-tile-component: 'fulfillment-tile'; $fulfillment-tile-background-colors: $surface-selection-background-colors; diff --git a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileContent.vars.scss b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileContent.vars.scss index fbbb395bd..3fea37707 100644 --- a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileContent.vars.scss +++ b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileContent.vars.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/settings/index.scss'; +@import '../../../../styles/settings/index'; @mixin cdr-fulfillment-tile-content-base-mixin() { width: 100%; @@ -10,6 +10,7 @@ strong { --cdr-utility-sans-font-weight: 600; + font-weight: var(--cdr-utility-sans-font-weight); } } diff --git a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileHeader.vars.scss b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileHeader.vars.scss index 2be463179..8a2a7f2d3 100644 --- a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileHeader.vars.scss +++ b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileHeader.vars.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/settings/index.scss'; +@import '../../../../styles/settings/index'; @mixin cdr-fulfillment-tile-header-base-mixin() { align-items: center; diff --git a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileIcon.vars.scss b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileIcon.vars.scss index 360f9875e..122f041f2 100644 --- a/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileIcon.vars.scss +++ b/src/components/fulfillmentTile/styles/vars/CdrFulfillmentTileIcon.vars.scss @@ -9,7 +9,7 @@ position: relative; fill: var(--cdr-fulfillment-tile-icon-fill); - &:after { + &::after { content: ''; position: absolute; top: 0; diff --git a/src/components/grid/styles/CdrGrid.module.scss b/src/components/grid/styles/CdrGrid.module.scss index ce6612aca..70c8be4da 100644 --- a/src/components/grid/styles/CdrGrid.module.scss +++ b/src/components/grid/styles/CdrGrid.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrGrid.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrGrid.vars'; .cdr-grid { @include cdr-grid-base-mixin; @@ -37,6 +37,7 @@ @include cdr-grid-gutter-large-mixin; } } + @include cdr-sm-mq-only { &--gutter-none\@sm { @include cdr-grid-gutter-none-mixin; @@ -54,6 +55,7 @@ @include cdr-grid-gutter-large-mixin; } } + @include cdr-md-mq-only { &--gutter-none\@md { @include cdr-grid-gutter-none-mixin; @@ -71,6 +73,7 @@ @include cdr-grid-gutter-large-mixin; } } + @include cdr-lg-mq-only { &--gutter-none\@lg { @include cdr-grid-gutter-none-mixin; diff --git a/src/components/grid/styles/vars/CdrGrid.vars.scss b/src/components/grid/styles/vars/CdrGrid.vars.scss index 133119170..7000936e0 100644 --- a/src/components/grid/styles/vars/CdrGrid.vars.scss +++ b/src/components/grid/styles/vars/CdrGrid.vars.scss @@ -7,7 +7,7 @@ } @mixin cdr-grid-gutter-none-mixin() { - gap: 0 0; + gap: 0; } @mixin cdr-grid-gutter-small-mixin() { diff --git a/src/components/icon/styles/CdrIcon.module.scss b/src/components/icon/styles/CdrIcon.module.scss index 2ef408a6c..772a43d91 100644 --- a/src/components/icon/styles/CdrIcon.module.scss +++ b/src/components/icon/styles/CdrIcon.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-icon { display: inline-block; @@ -6,6 +6,7 @@ flex: 0 0 auto; width: $cdr-icon-size; height: $cdr-icon-size; + //ITEM_DOC: Fill color of an icon fill: var(--cdr-icon-fill-default, var(--cdr-color-icon-default, #{$cdr-color-icon-default})); diff --git a/src/components/image/styles/CdrImg.module.scss b/src/components/image/styles/CdrImg.module.scss index 11055a419..55853c177 100644 --- a/src/components/image/styles/CdrImg.module.scss +++ b/src/components/image/styles/CdrImg.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-image { max-inline-size: 100%; diff --git a/src/components/input/styles/CdrInput.module.scss b/src/components/input/styles/CdrInput.module.scss index a46dfe71b..c88d2ba15 100644 --- a/src/components/input/styles/CdrInput.module.scss +++ b/src/components/input/styles/CdrInput.module.scss @@ -1,7 +1,8 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrInput.vars.scss'; -@import '../../labelStandalone/styles/CdrLabelStandalone.module.scss'; -@import '../../formError/styles/CdrFormError.module.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrInput.vars'; +@import '../../labelStandalone/styles/CdrLabelStandalone.module'; +@import '../../formError/styles/CdrFormError.module'; + /* ========================================================================== # INPUT LABEL ========================================================================== */ @@ -12,8 +13,10 @@ & ~ & { position: relative; margin-left: -4px; + &::before { content: ''; + //ITEM_DOC: Background color of the cdr-button label background-color: var(--cdr-input-label-background-color, var(--cdr-color-border-input-default, #{$cdr-color-border-input-default})); position: absolute; @@ -31,18 +34,21 @@ &:focus-within { //ITEM_DOC: Background color of the cdr-input label in hover, active, focus, and focus-within states background-color: var(--cdr-input-label-background-interaction, var(--cdr-color-background-input-default-active, #{$cdr-color-background-input-default-active})); + //ITEM_DOC: Box-shadow color of the cdr-input label in hover, active, focus, and focus-within states box-shadow: inset 0 0 0 2px var(--cdr-input-label-box-shadow-interaction, var(--cdr-color-border-input-default-focus, #{$cdr-color-border-input-default-focus})); outline: none; + //ITEM_DOC: Fill color of the cdr-input label in hover, active, focus, and focus-within states fill: var(--cdr-input-label-fill-interaction, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); + svg { box-shadow: none; fill: var(--cdr-input-label-svg-fill-interaction, var(--cdr-color-text-primary, #{$cdr-color-text-primary})) !important; } &::before { - width: 0px; + width: 0; } } @@ -59,6 +65,7 @@ .cdr-input { @include cdr-input-base-mixin; + /* Style variants ========================================================================== */ @@ -163,6 +170,7 @@ &__helper-text { @include cdr-input-helper-text-mixin; + display: inline-block; margin-top: $cdr-space-quarter-x; } @@ -175,6 +183,7 @@ .cdr-input-wrap { position: relative; flex-grow: 1; + //ITEM_DOC: Fill color of the cdr-input wrapper fill: var(--cdr-input-wrap-fill, var(--cdr-color-icon-default, #{$cdr-color-icon-default})); } diff --git a/src/components/input/styles/vars/CdrInput.vars.scss b/src/components/input/styles/vars/CdrInput.vars.scss index 9de05b8e3..a668e4742 100644 --- a/src/components/input/styles/vars/CdrInput.vars.scss +++ b/src/components/input/styles/vars/CdrInput.vars.scss @@ -1,14 +1,18 @@ @mixin cdr-input-base-mixin() { @include cdr-text-utility-sans-300; + font-weight: 500; + //ITEM_DOC: Text color of a cdr-input by default color: var(--cdr-input-text-color-default, var(--cdr-color-text-input-default, #{$cdr-color-text-input-default})); border: 0; + //ITEM_DOC: Background color of a cdr-input by default background-color: var(--cdr-input-background-color-default, var(--cdr-color-background-input-default, #{$cdr-color-background-input-default})); + //ITEM_DOC: Box-shadow color of a cdr-input by default box-shadow: inset 0 0 0 1px var(--cdr-input-box-shadow-default, var(--cdr-color-border-input-default, #{$cdr-color-border-input-default})); - border-radius: $cdr-radius-softer; + //ITEM_DOC: Fill color of an icon in a cdr-input fill: var(--cdr-input-icon-fill, var(--cdr-color-icon-default, #{$cdr-color-icon-default})); border-radius: $cdr-radius-softer; @@ -18,37 +22,45 @@ width: 100%; overflow: visible; margin: 0; - -webkit-appearance: none!important; + appearance: none!important; - &[type=number]::-webkit-inner-spin-button, - &[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - -moz-appearance: none; + &[type="number"]::-webkit-inner-spin-button, + &[type="number"]::-webkit-outer-spin-button { + appearance: none; + appearance: none; appearance: none; margin: 0; } + &:active, &:focus { outline: none; + //ITEM_DOC: Box shadow of a focused or active cdr-input box-shadow: inset 0 0 0 2px var(--cdr-input-box-shadow-focus, var(--cdr-color-border-input-default-focus, #{$cdr-color-border-input-default-focus})), $cdr-prominence-raised; } + &::placeholder { @include cdr-text-utility-sans-300; + color: var(--cdr-input-placeholder-text-color, var(--cdr-color-text-input-placeholder, #{$cdr-color-text-input-placeholder})); } &[disabled] { //ITEM_DOC: Background color of a disabled cdr-input background-color: var(--cdr-input-background-color-disabled, var(--cdr-color-background-input-default-disabled, #{$cdr-color-background-input-default-disabled})); + //ITEM_DOC: Text color of a disabled cdr-input color: var(--cdr-input-text-color-disabled, var(--cdr-color-text-input-disabled, #{$cdr-color-text-input-disabled})); + //ITEM_DOC: Box-shadow color of a disabled cdr-input box-shadow: inset 0 0 0 1px var(--cdr-input-box-shadow-disabled, var(--cdr-color-border-input-default-disabled, #{$cdr-color-border-input-default-disabled})); + &:hover { box-shadow: inset 0 0 0 1px var(--cdr-input-box-shadow-disabled-hover, var(--cdr-color-border-input-default-disabled, #{$cdr-color-border-input-default-disabled})); cursor: not-allowed; } + &::placeholder { color: var(--cdr-input-placeholder-text-color-disabled, var(--cdr-color-text-input-disabled, #{$cdr-color-text-input-disabled})); } @@ -58,6 +70,7 @@ @mixin cdr-input-primary-mixin() { //ITEM_DOC: Background color of a default cdr-input background-color: var(--cdr-input-background-color-default, var(--cdr-color-background-input-default, #{$cdr-color-background-input-default})); + &:active, &:focus { //ITEM_DOC: Background color of a default cdr-input in active or focus state @@ -68,6 +81,7 @@ @mixin cdr-input-secondary-mixin() { //ITEM_DOC: Background color of a secondary cdr-input background-color: var(--cdr-input-background-color-secondary, var(--cdr-color-background-input-secondary, #{$cdr-color-background-input-secondary})); + &:active, &:focus { //ITEM_DOC: Background color of a secondary cdr-input in active or focus state @@ -78,15 +92,18 @@ @mixin cdr-input-error-mixin() { //ITEM_DOC: Background color of a cdr-input in error state background-color: var(--cdr-input-error-background-color, var(--cdr-color-background-input-error, #{$cdr-color-background-input-error})); + //ITEM_DOC: Box-shadow color of a cdr-input in error state box-shadow: inset 0 0 0 1px var(--cdr-input-error-box-shadow, var(--cdr-color-border-input-error, #{$cdr-color-border-input-error})); } @mixin cdr-input-large-mixin() { @include cdr-text-utility-sans-400; + line-height: $cdr-space-half-x + $cdr-text-utility-sans-400-height; padding-left: $cdr-space-half-x; height: $cdr-form-input-height-large; + &::placeholder { line-height: $cdr-space-half-x + $cdr-text-utility-sans-400-height; } @@ -94,6 +111,7 @@ @mixin cdr-input-helper-text-mixin() { @include cdr-text-utility-sans-200; + //ITEM_DOC: Text color of a cdr-input's helper text color: var(--cdr-input-helper-text-color, var(--cdr-color-text-input-help, #{$cdr-color-text-input-help})); } diff --git a/src/components/kicker/styles/CdrKicker.module.scss b/src/components/kicker/styles/CdrKicker.module.scss index 1744f1669..7b4b7cf57 100644 --- a/src/components/kicker/styles/CdrKicker.module.scss +++ b/src/components/kicker/styles/CdrKicker.module.scss @@ -1,8 +1,9 @@ -@import '../../../styles/settings/index.scss'; -@import '../../../styles/settings/fluid.vars.scss'; +@import '../../../styles/settings/index'; +@import '../../../styles/settings/fluid.vars'; .cdr-kicker { @include cdr-text-eyebrow-100; + color: var(--cdr-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); font-size: var(--cdr-type-scale--1); line-height: calc(var(--cdr-type-scale--1) * var(--cdr-heading-display-line-height-ratio)); diff --git a/src/components/labelStandalone/styles/CdrLabelStandalone.module.scss b/src/components/labelStandalone/styles/CdrLabelStandalone.module.scss index be59454bb..de137a104 100644 --- a/src/components/labelStandalone/styles/CdrLabelStandalone.module.scss +++ b/src/components/labelStandalone/styles/CdrLabelStandalone.module.scss @@ -1,9 +1,8 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrLabelStandalone.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrLabelStandalone.vars'; .cdr-label-standalone { display: grid; - grid-template-areas: "label label info" "input input input" @@ -16,9 +15,11 @@ &__label { @include cdr-label-standalone-label-mixin; + &--sr-only { @include cdr-display-sr-only; } + &--disabled { @include cdr-label-standalone-disabled-mixin; @@ -38,10 +39,10 @@ &__info { @include cdr-label-standalone-info-mixin; + grid-area: info; order: 2; - align-self: end; - justify-self: end; + place-self: end end; } &__post-content { diff --git a/src/components/labelStandalone/styles/vars/CdrLabelStandalone.vars.scss b/src/components/labelStandalone/styles/vars/CdrLabelStandalone.vars.scss index 089995e24..b19fc5384 100644 --- a/src/components/labelStandalone/styles/vars/CdrLabelStandalone.vars.scss +++ b/src/components/labelStandalone/styles/vars/CdrLabelStandalone.vars.scss @@ -1,5 +1,6 @@ @mixin cdr-label-standalone-label-mixin() { @include cdr-text-utility-sans-200; + //ITEM_DOC: Text color of a standalone label color: var(--cdr-label-standalone-text-color, var(--cdr-color-text-input-label, #{$cdr-color-text-input-label})); margin: 0; @@ -17,6 +18,7 @@ @mixin cdr-label-standalone-helper-mixin() { @include cdr-text-utility-sans-200; + //ITEM_DOC: Text color of a standalone helper label color: var(--cdr-label-standalone-helper-text-color, var(--cdr-color-text-input-help, #{$cdr-color-text-input-help})); margin-top: $cdr-space-eighth-x; diff --git a/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss b/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss index d842d5502..e997d3fe6 100644 --- a/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss +++ b/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss @@ -1,12 +1,12 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrLabelWrapper.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrLabelWrapper.vars'; .cdr-label-wrapper { @include cdr-label-wrapper-base-mixin; + display: flex; align-items: flex-start; flex-grow: 1; - position: relative; user-select: none; @@ -31,6 +31,7 @@ &--disabled { @include cdr-label-wrapper-disabled-mixin; + .cdr-label-wrapper__figure { cursor: not-allowed !important; } @@ -50,6 +51,7 @@ & > .cdr-label-wrapper__figure { display: none; } + & > .cdr-checkbox__svg-box svg { fill: transparent !important; } diff --git a/src/components/labelWrapper/styles/vars/CdrLabelWrapper.vars.scss b/src/components/labelWrapper/styles/vars/CdrLabelWrapper.vars.scss index 3e6106a51..484fda3b5 100644 --- a/src/components/labelWrapper/styles/vars/CdrLabelWrapper.vars.scss +++ b/src/components/labelWrapper/styles/vars/CdrLabelWrapper.vars.scss @@ -1,10 +1,13 @@ @mixin cdr-label-wrapper-base-mixin() { @include cdr-text-utility-sans-300; + padding: $cdr-space-half-x; padding-left: calc(#{$cdr-form-figure-size-medium} + #{$cdr-space-one-x}); padding-right: $cdr-space-three-quarter-x; + //ITEM_DOC: Text color of a label wrapper color: var(--cdr-label-wrapper-text-color, var(--cdr-color-text-input-label, #{$cdr-color-text-input-label})); + //ITEM_DOC: Background color of a label wrapper background-color: var(--cdr-label-wrapper-background-color, var(--cdr-color-background-input-default, #{$cdr-color-background-input-default})); border-radius: $cdr-radius-softer; @@ -23,6 +26,7 @@ &:focus-within { //ITEM_DOC: Background color of a primary label wrapper when it has focus within background-color: var(--cdr-label-wrapper-primary-background-color-focus, var(--cdr-color-background-label-default-focus, #{$cdr-color-background-label-default-focus})); + //ITEM_DOC: Box shadow color of a primary label wrapper when it has focus within box-shadow: inset 0 0 0 2px var(--cdr-label-wrapper-primary-focus-box-shadow-color, var(--cdr-color-border-label-default-focus, #{$cdr-color-border-label-default-focus})); } @@ -36,6 +40,7 @@ @mixin cdr-label-wrapper-secondary-mixin() { //ITEM_DOC: Background color of a secondary label wrapper background-color: var(--cdr-label-wrapper-secondary-background-color, var(--cdr-color-background-input-default, #{$cdr-color-background-input-default})); + &:hover { //ITEM_DOC: Background color of a secondary label wrapper when hovered background-color: var(--cdr-label-wrapper-secondary-background-color-hover, var(--cdr-color-background-label-secondary-hover, #{$cdr-color-background-label-secondary-hover})); @@ -66,16 +71,19 @@ @mixin cdr-label-wrapper-small-mixin() { @include cdr-text-utility-sans-200; + padding-left: calc(#{$cdr-form-figure-size-small} + #{$cdr-space-one-x}); } @mixin cdr-label-wrapper-medium-mixin() { @include cdr-text-utility-sans-300; + padding-left: calc(#{$cdr-form-figure-size-medium} + #{$cdr-space-one-x}); } @mixin cdr-label-wrapper-large-mixin() { @include cdr-text-utility-sans-300; + padding-left: calc(#{$cdr-form-figure-size-large} + #{$cdr-space-one-x}); } @@ -113,6 +121,7 @@ top: 11px; width: $cdr-form-figure-size-medium; height: $cdr-form-figure-size-medium; + &::after { width: calc(#{$cdr-form-figure-size-medium} / 4); height: calc(#{$cdr-form-figure-size-medium} / 4); @@ -121,8 +130,10 @@ position: absolute; left: $cdr-space-half-x; border-radius: $cdr-radius-softer; + //ITEM_DOC: Background color of a form figure background-color: var(--cdr-form-figure-background-color, var(--cdr-color-background-input-default, #{$cdr-color-background-input-default})); + //ITEM_DOC: Box shadow color of a form figure box-shadow: 0 0 0 1px var(--cdr-form-figure-box-shadow-color, var(--cdr-color-border-input-default, #{$cdr-color-border-input-default})); transition: box-shadow $cdr-duration-2-x $cdr-timing-function-ease; @@ -160,10 +171,11 @@ width: 2rem; height: 2rem; } + .cdr-checkbox__svg-box svg { width: 2rem; height: 2rem; - left: 0rem; + left: 0; top: -1.7rem; } } diff --git a/src/components/landingLead/styles/CdrHeadingSubheadingBlock.module.scss b/src/components/landingLead/styles/CdrHeadingSubheadingBlock.module.scss index 337606c83..6524e60ec 100644 --- a/src/components/landingLead/styles/CdrHeadingSubheadingBlock.module.scss +++ b/src/components/landingLead/styles/CdrHeadingSubheadingBlock.module.scss @@ -1,13 +1,14 @@ -@import '../../../styles/settings/index.scss'; -@import '../../text/presets/styles/CdrHeadingDisplay.module.scss'; -@import '../../text/presets/styles/CdrSubheadingSans.module.scss'; +@import '../../../styles/settings/index'; +@import '../../text/presets/styles/CdrHeadingDisplay.module'; +@import '../../text/presets/styles/CdrSubheadingSans.module'; .cdr-heading-subheading-block { &__heading { display: block; - margin: 0 0 $cdr-space-one-x 0; + margin: 0 0 $cdr-space-one-x; max-width: 40ch; } + &__subheading { display: block; margin-top: $cdr-space-three-quarter-x!important; diff --git a/src/components/landingLead/styles/CdrLandingLead.module.scss b/src/components/landingLead/styles/CdrLandingLead.module.scss index ce0be0940..6c250f57b 100644 --- a/src/components/landingLead/styles/CdrLandingLead.module.scss +++ b/src/components/landingLead/styles/CdrLandingLead.module.scss @@ -1,21 +1,26 @@ -@import '../../../styles/settings/index.scss'; -@import '../../image/styles/CdrImg.module.scss'; -@import './CdrHeadingSubheadingBlock.module.scss'; +@import '../../../styles/settings/index'; +@import '../../image/styles/CdrImg.module'; +@import './CdrHeadingSubheadingBlock.module'; .cdr-landing-lead { //ITEM_DOC: Color of the landing-leads surface layer. Passes to underlying split-surface component --cdr-split-surface-surface-color: var(--cdr-landing-lead-surface-color, var(--cdr-color-surface-primary, #{$cdr-color-surface-primary})); + &__image { --cdr-img-aspect-ratio: 4 / 1; --cdr-img-object-fit: cover; + width: 100%; + @include cdr-sm-mq-down { --cdr-img-aspect-ratio: 4 / 3; } } + &__copy-block { padding: $cdr-space-two-x; + @include cdr-md-mq-down { padding: $cdr-space-two-x; } diff --git a/src/components/link/styles/CdrLink.module.scss b/src/components/link/styles/CdrLink.module.scss index b3931a96e..da705b61a 100644 --- a/src/components/link/styles/CdrLink.module.scss +++ b/src/components/link/styles/CdrLink.module.scss @@ -9,8 +9,9 @@ :Style variants :Standalone ========================================================================== */ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrLink.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrLink.vars'; + .cdr-link { @include cdr-link-base-mixin; } diff --git a/src/components/link/styles/vars/CdrLink.vars.scss b/src/components/link/styles/vars/CdrLink.vars.scss index b4b8484f1..4af954667 100644 --- a/src/components/link/styles/vars/CdrLink.vars.scss +++ b/src/components/link/styles/vars/CdrLink.vars.scss @@ -6,8 +6,10 @@ background-color: transparent; border: 0; margin: 0; + //ITEM_DOC: Color of the link text color: var(--cdr-link-text-color, var(--cdr-color-text-link-rest, #{$cdr-color-text-link-rest})); + //ITEM_DOC: Color of the link fill fill: var(--cdr-link-fill-color, var(--cdr-color-text-link-rest, #{$cdr-color-text-link-rest})); cursor: pointer; diff --git a/src/components/list/styles/CdrList.module.scss b/src/components/list/styles/CdrList.module.scss index b3910f85f..044753c09 100644 --- a/src/components/list/styles/CdrList.module.scss +++ b/src/components/list/styles/CdrList.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrList.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrList.vars'; .cdr-list { @include cdr-list-base-mixin; @@ -92,6 +92,7 @@ &::before { content: '\2022'; + //ITEM_DOC: Color of the unordered inline list item prefix color: var(--cdr-list-inline-text-color, var(--cdr-color-text-secondary, #{$cdr-color-text-secondary})); display: block; diff --git a/src/components/list/styles/vars/CdrList.vars.scss b/src/components/list/styles/vars/CdrList.vars.scss index ac6f54eb7..70498821c 100644 --- a/src/components/list/styles/vars/CdrList.vars.scss +++ b/src/components/list/styles/vars/CdrList.vars.scss @@ -44,6 +44,7 @@ &::before { content: '\2013'; position: absolute; + //ITEM_DOC: Color of the nested ordered cdr-list item prefix color: var(--cdr-list-ordered-nested-prefix-color, var(--cdr-color-text-secondary, #{$cdr-color-text-secondary})); left: 0; @@ -60,6 +61,7 @@ position: relative; margin-left: -1em; padding-right: $cdr-space-half-x; + //ITEM_DOC: Color of the unordered cdr-list item prefix color: var(--cdr-list-unordered-prefix-color, var(--cdr-color-text-secondary, #{$cdr-color-text-secondary})); } @@ -75,6 +77,7 @@ position: relative; margin-left: -1em; padding-right: $cdr-space-half-x; + //ITEM_DOC: Color of the nested unordered cdr-list item prefix color: var(--cdr-list-unordered-nested-prefix-color, var(--cdr-color-text-secondary, #{$cdr-color-text-secondary})); } diff --git a/src/components/modal/styles/CdrModal.module.scss b/src/components/modal/styles/CdrModal.module.scss index 3401c231d..e09f584f5 100644 --- a/src/components/modal/styles/CdrModal.module.scss +++ b/src/components/modal/styles/CdrModal.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; $modal-animation-duration: 150ms; @@ -9,13 +9,10 @@ $modal-animation-duration: 150ms; } } - bottom: 0; + inset: 0; height: 100%; - left: 0; overflow-y: scroll; position: fixed; - right: 0; - top: 0; visibility: visible; z-index: 9999; @@ -23,12 +20,9 @@ $modal-animation-duration: 150ms; //ITEM_DOC: Background color of the modal overlay background-color: var(--cdr-modal-overlay-background-color, var(--cdr-color-background-modal-overlay, #{$cdr-color-background-modal-overlay})); backdrop-filter: blur($cdr-space-one-x); - bottom: 0; - left: 0; + inset: 0; opacity: 1; position: fixed; - right: 0; - top: 0; transition: opacity $modal-animation-duration; z-index: 0; } @@ -43,6 +37,7 @@ $modal-animation-duration: 150ms; &__contentWrap { align-items: flex-start; + //ITEM_DOC: Background color of the content wrap background-color: var(--cdr-modal-content-wrap-background-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})); display: flex; @@ -57,6 +52,7 @@ $modal-animation-duration: 150ms; transition: opacity $modal-animation-duration $modal-animation-duration; width: 100%; z-index: 0; + &:focus { outline: 0; } @@ -80,10 +76,13 @@ $modal-animation-duration: 150ms; padding-bottom: $cdr-space-one-x; justify-content: space-between; } + &__title { flex: auto; + @include cdr-text-heading-serif-600; } + &__close-button { flex: none; align-self: center; diff --git a/src/components/pagination/styles/CdrPagination.module.scss b/src/components/pagination/styles/CdrPagination.module.scss index 586e97801..84f39ac19 100644 --- a/src/components/pagination/styles/CdrPagination.module.scss +++ b/src/components/pagination/styles/CdrPagination.module.scss @@ -1,6 +1,6 @@ -@import '../../../styles/settings/index.scss'; -@import '../../icon/styles/CdrIcon.module.scss'; -@import '../../select/styles/CdrSelect.module.scss'; +@import '../../../styles/settings/index'; +@import '../../icon/styles/CdrIcon.module'; +@import '../../select/styles/CdrSelect.module'; .cdr-pagination { display: flex; @@ -28,9 +28,10 @@ background-color: transparent; border: none; - padding: 0; + //ITEM_DOC: Text color of a cdr-pagination link color: var(--cdr-pagination-link-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); + //ITEM_DOC: Fill color of a cdr-pagination link fill: var(--cdr-pagination-link-fill-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); display: block; @@ -49,7 +50,7 @@ &--current { position: relative; - &:after { + &::after { content: ''; position: absolute; bottom: 0; @@ -57,6 +58,7 @@ transform: translateX(-50%); height: 2px; width: 80%; + //ITEM_DOC: Background color of the keyline for the current cdr-pagination link background-color: var(--cdr-pagination-link-current-background-color-keyline, var(--cdr-color-background-pagination-keyline, #{$cdr-color-background-pagination-keyline})); } @@ -71,6 +73,7 @@ &#{&}--disabled { //ITEM_DOC: Text color of a disabled cdr-pagination link color: var(--cdr-pagination-link-text-color-disabled, var(--cdr-color-text-disabled, #{$cdr-color-text-disabled})); + //ITEM_DOC: Fill color of a disabled cdr-pagination link fill: var(--cdr-pagination-link-fill-color-disabled, var(--cdr-color-text-disabled, #{$cdr-color-text-disabled})); cursor: not-allowed; diff --git a/src/components/picture/styles/CdrPicture.module.scss b/src/components/picture/styles/CdrPicture.module.scss index f2a2f9f6c..6280d043c 100644 --- a/src/components/picture/styles/CdrPicture.module.scss +++ b/src/components/picture/styles/CdrPicture.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import '../../image/styles/CdrImg.module.scss'; +@import '../../../styles/settings/index'; +@import '../../image/styles/CdrImg.module'; .cdr-picture { max-inline-size: 100%; diff --git a/src/components/popover/styles/CdrPopover.module.scss b/src/components/popover/styles/CdrPopover.module.scss index d854b1ae8..6797c1eef 100644 --- a/src/components/popover/styles/CdrPopover.module.scss +++ b/src/components/popover/styles/CdrPopover.module.scss @@ -1,12 +1,13 @@ -@import '../../popup/styles/CdrPopup.module.scss'; -@import '../../button/styles/CdrButton.module.scss'; -@import '../../icon/styles/CdrIcon.module.scss'; -@import '../../../styles/settings/index.scss'; +@import '../../popup/styles/CdrPopup.module'; +@import '../../button/styles/CdrButton.module'; +@import '../../icon/styles/CdrIcon.module'; +@import '../../../styles/settings/index'; .cdr-popover{ &--position { position: relative; } + &--wrapper { width: max-content; height: max-content; @@ -15,8 +16,10 @@ display: none; } } + &__title { @include cdr-text-heading-serif-400; + margin-bottom: $cdr-space-half-x; margin-right: $cdr-space-half-x; } @@ -26,6 +29,7 @@ padding-left: $cdr-space-one-x; display: flex; } + &__content { flex: auto; } diff --git a/src/components/popup/styles/CdrPopup.module.scss b/src/components/popup/styles/CdrPopup.module.scss index 74b517f6a..f141c3914 100644 --- a/src/components/popup/styles/CdrPopup.module.scss +++ b/src/components/popup/styles/CdrPopup.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrPopup.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrPopup.vars'; .cdr-popup { opacity: 0; @@ -17,8 +17,10 @@ animation-duration: $animation-duration; animation-timing-function: $timing-function; animation-fill-mode: forwards; + //ITEM_DOC: Background color of cdr-popup content background: var(--cdr-popup-content-background, var(--cdr-color-background-primary, #{$cdr-color-background-primary})); + //ITEM_DOC: Border color of cdr-popup content border: 1px solid var(--cdr-popup-content-border-color, var(--cdr-color-border-secondary, #{$cdr-color-border-secondary})); border-radius: $cdr-radius-softer; diff --git a/src/components/popup/styles/vars/CdrPopup.vars.scss b/src/components/popup/styles/vars/CdrPopup.vars.scss index f9cd1908f..7172e6bd3 100644 --- a/src/components/popup/styles/vars/CdrPopup.vars.scss +++ b/src/components/popup/styles/vars/CdrPopup.vars.scss @@ -1,7 +1,6 @@ $arrow-size: 1rem; $arrow-spacing: #{$arrow-size + $cdr-space-quarter-x + 0.1rem}; $content-spacing: calc(100% + #{$arrow-size} + #{$cdr-space-quarter-x}); - $animation-duration: $cdr-duration-2-x; $timing-function: $cdr-timing-function-ease-out; @@ -24,6 +23,7 @@ $timing-function: $cdr-timing-function-ease-out; top: 100%; } } + @keyframes :global(popup-enter-down) { from { top: 100%; @@ -63,6 +63,7 @@ $timing-function: $cdr-timing-function-ease-out; bottom: 100%; } } + @keyframes :global(popup-enter-up) { from { bottom: 100%; @@ -82,6 +83,7 @@ $timing-function: $cdr-timing-function-ease-out; top: 0; } } + @keyframes :global(popup-arrow-enter-up) { from { top: 0; @@ -101,6 +103,7 @@ $timing-function: $cdr-timing-function-ease-out; right: 100%; } } + @keyframes :global(popup-enter-left) { from { right: 100%; @@ -120,6 +123,7 @@ $timing-function: $cdr-timing-function-ease-out; left: 0; } } + @keyframes :global(popup-arrow-enter-left) { from { left: 0; @@ -139,6 +143,7 @@ $timing-function: $cdr-timing-function-ease-out; left: 100%; } } + @keyframes :global(popup-enter-right) { from { left: 100%; @@ -158,6 +163,7 @@ $timing-function: $cdr-timing-function-ease-out; right: 0; } } + @keyframes :global(popup-arrow-enter-right) { from { right: 0; diff --git a/src/components/quote/styles/CdrQuote.module.scss b/src/components/quote/styles/CdrQuote.module.scss index 4a526dec5..77a8c1d35 100644 --- a/src/components/quote/styles/CdrQuote.module.scss +++ b/src/components/quote/styles/CdrQuote.module.scss @@ -1,7 +1,7 @@ //@import url('@rei/cedar/dist/style/cdr-text.css'); -@import '../../text/styles/CdrText.module.scss'; -@import '../../../styles/settings/index.scss'; -@import './vars/CdrQuote.vars.scss'; +@import '../../text/styles/CdrText.module'; +@import '../../../styles/settings/index'; +@import './vars/CdrQuote.vars'; /* ========================================================================== # Cdrquote @@ -20,6 +20,7 @@ &--pull { @include cdr-quote-pull-container; + .cdr-quote__summary { @include cdr-quote-pull-content; } diff --git a/src/components/quote/styles/vars/CdrQuote.vars.scss b/src/components/quote/styles/vars/CdrQuote.vars.scss index 643e2fec7..12e7b844e 100644 --- a/src/components/quote/styles/vars/CdrQuote.vars.scss +++ b/src/components/quote/styles/vars/CdrQuote.vars.scss @@ -2,8 +2,10 @@ margin: 0; padding: $cdr-space-inset-one-x-stretch; line-height: 1; + & cite { @include cdr-text-utility-sans-100; + //ITEM_DOC: Text color of a cdr-quote citation color: var(--cdr-quote-cite-text-color, var(--cdr-color-text-secondary, #{$cdr-color-text-secondary})); display: block; @@ -16,6 +18,7 @@ font-size: 2.4rem; line-height: 3.6rem; letter-spacing: -.08rem; + //ITEM_DOC: Text color of cdr-quote content color: var(--cdr-quote-content-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); margin: 0; @@ -32,11 +35,12 @@ @mixin cdr-quote-pull-container() { border-style: solid; + //ITEM_DOC: Border color of a cdr-quote pull container border-color: var(--cdr-quote-pull-container-border-color, var(--cdr-color-border-primary, #{$cdr-color-border-primary})); @include cdr-xs-mq { - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: $cdr-space-inset-one-x-stretch; margin: 0 0 $cdr-space-one-x; } diff --git a/src/components/radio/styles/CdrRadio.module.scss b/src/components/radio/styles/CdrRadio.module.scss index da2ab0e96..b4afea68e 100644 --- a/src/components/radio/styles/CdrRadio.module.scss +++ b/src/components/radio/styles/CdrRadio.module.scss @@ -1,7 +1,9 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrRadio.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrRadio.vars'; + //@import url('@rei/cedar/dist/style/cdr-label-wrapper.css'); -@import '../../labelWrapper/styles/CdrLabelWrapper.module.scss'; +@import '../../labelWrapper/styles/CdrLabelWrapper.module'; + .cdr-radio { /* Figure ========== */ @@ -33,7 +35,6 @@ /* Disabled ========== */ &__input:disabled { - & ~ .cdr-label-wrapper__figure { @include cdr-form-figure-radio-disabled-mixin; } diff --git a/src/components/radio/styles/vars/CdrRadio.vars.scss b/src/components/radio/styles/vars/CdrRadio.vars.scss index 8b8bd3de2..cd940ba2e 100644 --- a/src/components/radio/styles/vars/CdrRadio.vars.scss +++ b/src/components/radio/styles/vars/CdrRadio.vars.scss @@ -1,5 +1,6 @@ @mixin cdr-form-figure-radio-base-mixin() { border-radius: 100%; + &::after { content: ''; position: absolute; @@ -27,6 +28,7 @@ @mixin cdr-form-figure-radio-hover-mixin() { cursor: pointer; + //ITEM_DOC: Box-shadow color of cdr-radio on hover box-shadow: inset 0 0 0 1px var(--cdr-radio-box-shadow-color-hover, var(--cdr-color-border-input-default-hover, #{$cdr-color-border-input-default-hover})), 0 0 0 1px var(--cdr-radio-box-shadow-color-hover, var(--cdr-color-border-input-default-hover, #{$cdr-color-border-input-default-hover})); @@ -51,7 +53,7 @@ //ITEM_DOC: Background color of cdr-radio when disabled background-color: var(--cdr-radio-background-color-disabled, var(--cdr-color-background-input-default-disabled, #{$cdr-color-background-input-default-disabled})) !important; - &:after { + &::after { //ITEM_DOC: Background color of the inner circle of cdr-radio when disabled background-color: var(--cdr-radio-inner-circle-background-color-disabled, var(--cdr-color-background-input-default-disabled, #{$cdr-color-background-input-default-disabled})) !important; } diff --git a/src/components/rating/styles/CdrRating.module.scss b/src/components/rating/styles/CdrRating.module.scss index 59415fd6a..286180e13 100644 --- a/src/components/rating/styles/CdrRating.module.scss +++ b/src/components/rating/styles/CdrRating.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; $rating-color: #2b6692; $empty-star: '\2606'; @@ -51,7 +51,6 @@ $filled-star: '\2605'; align-items: center; position: relative; line-height: 1; - color: $cdr-color-text-rating-default; /* Elements @@ -129,6 +128,7 @@ $filled-star: '\2605'; &--filled { //ITEM_DOC: Fill color of a filled star fill: var(--cdr-rating-star-filled-fill-color, #FFD280); + //ITEM_DOC: Stroke color of a filled star stroke: var(--cdr-rating-star-filled-stroke-color, #BD7B2D); } @@ -136,6 +136,7 @@ $filled-star: '\2605'; &--empty { //ITEM_DOC: Fill color of an empty star fill: var(--cdr-rating-star-empty-fill-color, #F9F8F6); + //ITEM_DOC: Stroke color of an empty star stroke: var(--cdr-rating-star-empty-stroke-color, #BD7B2D); } @@ -144,10 +145,12 @@ $filled-star: '\2605'; width: $cdr-icon-size-sm; height: $cdr-icon-size-sm; } + &--medium { width: $cdr-icon-size; height: $cdr-icon-size; } + &--large { width: $cdr-icon-size-lg; height: $cdr-icon-size-lg; @@ -203,6 +206,7 @@ $filled-star: '\2605'; height: $cdr-icon-size-lg; } } + @include cdr-lg-mq-only { &--small\@lg { width: $cdr-icon-size-sm; @@ -235,7 +239,7 @@ $filled-star: '\2605'; ========== */ &--medium { - @include cdr-rating-medium(); + @include cdr-rating-medium; } /* Small diff --git a/src/components/select/styles/CdrSelect.module.scss b/src/components/select/styles/CdrSelect.module.scss index d0a74ac5d..d4cded603 100644 --- a/src/components/select/styles/CdrSelect.module.scss +++ b/src/components/select/styles/CdrSelect.module.scss @@ -1,8 +1,9 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrSelect.vars.scss'; -@import '../../icon/styles/CdrIcon.module.scss'; -@import '../../labelStandalone/styles/CdrLabelStandalone.module.scss'; -@import '../../formError/styles/CdrFormError.module.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrSelect.vars'; +@import '../../icon/styles/CdrIcon.module'; +@import '../../labelStandalone/styles/CdrLabelStandalone.module'; +@import '../../formError/styles/CdrFormError.module'; + /* ========================================================================== # CdrSelect @@ -22,8 +23,8 @@ @include cdr-select-base-mixin; /* Hide Browser Styled Drowpdown Arrow */ - -webkit-appearance: none; - -moz-appearance: none; + appearance: none; + appearance: none; appearance: none; &::-ms-expand { diff --git a/src/components/select/styles/vars/CdrSelect.vars.scss b/src/components/select/styles/vars/CdrSelect.vars.scss index 1dcea6b73..4cc6cdb77 100644 --- a/src/components/select/styles/vars/CdrSelect.vars.scss +++ b/src/components/select/styles/vars/CdrSelect.vars.scss @@ -1,10 +1,14 @@ @mixin cdr-select-base-mixin() { @include cdr-text-utility-sans-300; + font-weight: 500; + //ITEM_DOC: Background color of cdr-select background: var(--cdr-select-background-color, var(--cdr-color-background-input-default, #{$cdr-color-background-input-default})); + //ITEM_DOC: Text color of cdr-select color: var(--cdr-select-text-color, var(--cdr-color-text-input-default, #{$cdr-color-text-input-default})); + //ITEM_DOC: Box-shadow color of cdr-select box-shadow: inset 0 0 0 1px var(--cdr-select-box-shadow-color, var(--cdr-color-border-input-default, #{$cdr-color-border-input-default})); border: 0; @@ -20,8 +24,10 @@ &[disabled] { //ITEM_DOC: Background color of a disabled cdr-select background-color: var(--cdr-select-background-color-disabled, var(--cdr-color-background-input-default-disabled, #{$cdr-color-background-input-default-disabled})); + //ITEM_DOC: Text color of a disabled cdr-select color: var(--cdr-select-text-color-disabled, var(--cdr-color-text-input-disabled, #{$cdr-color-text-input-disabled})); + //ITEM_DOC: Box-shadow color of a disabled cdr-select box-shadow: inset 0 0 0 1px var(--cdr-select-box-shadow-color-disabled, var(--cdr-color-border-input-default-disabled, #{$cdr-color-border-input-default-disabled})); @@ -43,6 +49,7 @@ @include cdr-text-utility-sans-300; font-style: normal; + //ITEM_DOC: Text color of cdr-select prompt color: var(--cdr-select-prompt-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); @@ -51,8 +58,10 @@ color: var(--cdr-select-prompt-text-color-disabled, var(--cdr-color-text-input-disabled, #{$cdr-color-text-input-disabled})); } } + @mixin cdr-select-large-mixin() { @include cdr-text-utility-sans-400; + height: $cdr-form-input-height-large; padding-left: $cdr-space-half-x; } @@ -60,6 +69,7 @@ @mixin cdr-select-primary-mixin() { //ITEM_DOC: Background color of a primary cdr-select background-color: var(--cdr-select-primary-background-color, var(--cdr-color-background-input-default, #{$cdr-color-background-input-default})); + &:active, &:focus { //ITEM_DOC: Background color of a primary cdr-select when active or focused @@ -81,6 +91,7 @@ @mixin cdr-select-error-mixin() { //ITEM_DOC: Background color of a cdr-select error background-color: var(--cdr-select-background-color-error, var(--cdr-color-background-input-error, #{$cdr-color-background-input-error})); + //ITEM_DOC: Box-shadow color of a cdr-select error box-shadow: inset 0 0 0 1px var(--cdr-select-box-shadow-color-error, var(--cdr-color-border-input-error, #{$cdr-color-border-input-error})); } diff --git a/src/components/skeleton/styles/CdrSkeleton.module.scss b/src/components/skeleton/styles/CdrSkeleton.module.scss index ecdc3f4ba..e1458acd2 100644 --- a/src/components/skeleton/styles/CdrSkeleton.module.scss +++ b/src/components/skeleton/styles/CdrSkeleton.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrSkeleton.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrSkeleton.vars'; .cdr-skeleton { @include cdr-skeleton-base-mixin; diff --git a/src/components/skeleton/styles/CdrSkeletonBone.module.scss b/src/components/skeleton/styles/CdrSkeletonBone.module.scss index 01b50d63e..b069b431c 100644 --- a/src/components/skeleton/styles/CdrSkeletonBone.module.scss +++ b/src/components/skeleton/styles/CdrSkeletonBone.module.scss @@ -1,39 +1,49 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrSkeleton.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrSkeleton.vars'; .cdr-skeleton-bone { @include cdr-skeleton-bone-mixin; + &__shimmer { @include cdr-skeleton-shimmer-mixin; } + &--line { block-size: 1.6rem; margin: $cdr-space-quarter-x 0; flex: none; + &:nth-child(1) { width: 100%; } + &:nth-child(2) { width: 55%; } + &:nth-child(3) { width: 85%; } + &:nth-child(4) { width: 65%; } + &:nth-child(5) { width: 35%; } } + &--heading { block-size: 3.2rem; flex: none; } + &--rectangle { overflow: hidden; padding-top: 75%; } + &--square { overflow: hidden; padding-top: 100%; diff --git a/src/components/skeleton/styles/vars/CdrSkeleton.vars.scss b/src/components/skeleton/styles/vars/CdrSkeleton.vars.scss index d11427a0b..5da214656 100644 --- a/src/components/skeleton/styles/vars/CdrSkeleton.vars.scss +++ b/src/components/skeleton/styles/vars/CdrSkeleton.vars.scss @@ -5,14 +5,17 @@ min-block-size: 1rem; flex-direction: column; } + @mixin cdr-skeleton-bone-mixin() { flex: 1 1 auto; border-radius: $cdr-radius-soft; + // warm-gray-300 //ITEM_DOC: Skeleton bone background color background: var(--cdr-skeleton-bone-background-color, #edeae3); background-size: 1200px 100%; } + @mixin cdr-skeleton-shimmer-mixin() { @media (prefers-reduced-motion: no-preference) { // warm-gray-300 => warm-gray-100 => warm-gray-300 @@ -21,10 +24,12 @@ animation: shimmer 3s $cdr-timing-function-linear; animation-iteration-count: infinite; } + @keyframes shimmer { 0% { background-position: -1200px 0; } + 100% { background-position: 1200px 0; } diff --git a/src/components/splitSurface/styles/CdrSplitSurface.module.scss b/src/components/splitSurface/styles/CdrSplitSurface.module.scss index 991d4a1d9..0bfad8e08 100644 --- a/src/components/splitSurface/styles/CdrSplitSurface.module.scss +++ b/src/components/splitSurface/styles/CdrSplitSurface.module.scss @@ -1,11 +1,13 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrSplitSurface.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrSplitSurface.vars'; .cdr-split-surface { @include cdr-split-surface-base-mixin; + &__top { @include cdr-split-surface-spacing-mixin; } + &__bottom { @include cdr-split-surface-spacing-mixin; } diff --git a/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss b/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss index 5cb617ca1..c828589ac 100644 --- a/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss +++ b/src/components/splitSurface/styles/vars/CdrSplitSurface.vars.scss @@ -1,6 +1,7 @@ @mixin cdr-split-surface-base-mixin() { width: 100%; line-height: 0; + &--top { //ITEM_DOC: Color of the split-surface's surface layer background: linear-gradient( @@ -8,6 +9,7 @@ transparent 50% 100%, ); } + &--bottom { background: linear-gradient( transparent 0 50%, @@ -18,12 +20,15 @@ @mixin cdr-split-surface-spacing-mixin() { padding: 0 $cdr-space-four-x; + @include cdr-lg-mq-down { padding: 0 $cdr-space-three-x; } + @include cdr-md-mq-down { padding: 0 $cdr-space-two-x; } + @include cdr-sm-mq-down { padding: 0 $cdr-space-one-x; } diff --git a/src/components/surface/styles/CdrSurface.module.scss b/src/components/surface/styles/CdrSurface.module.scss index a458921e8..899241ebd 100644 --- a/src/components/surface/styles/CdrSurface.module.scss +++ b/src/components/surface/styles/CdrSurface.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrSurface.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrSurface.vars'; .cdr-surface { @include cdr-surface-base-mixin( diff --git a/src/components/surface/styles/vars/CdrSurface.vars.scss b/src/components/surface/styles/vars/CdrSurface.vars.scss index 8d8b9fc5d..deefbf241 100644 --- a/src/components/surface/styles/vars/CdrSurface.vars.scss +++ b/src/components/surface/styles/vars/CdrSurface.vars.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@import '../../../../styles/settings/index.scss'; +@import '../../../../styles/settings/index'; $surface-component: 'surface'; $surface-background-colors: ( diff --git a/src/components/surfaceSelection/styles/CdrSurfaceSelection.module.scss b/src/components/surfaceSelection/styles/CdrSurfaceSelection.module.scss index 27e1c21ce..5a18d036e 100644 --- a/src/components/surfaceSelection/styles/CdrSurfaceSelection.module.scss +++ b/src/components/surfaceSelection/styles/CdrSurfaceSelection.module.scss @@ -1,5 +1,5 @@ -@import './vars/CdrSurfaceSelection.vars.scss'; -@import '../../surface/styles/vars/CdrSurface.vars.scss'; +@import './vars/CdrSurfaceSelection.vars'; +@import '../../surface/styles/vars/CdrSurface.vars'; .cdr-surface-selection { @include cdr-surface-base-mixin( diff --git a/src/components/surfaceSelection/styles/CdrSurfaceSelectionLayout.module.scss b/src/components/surfaceSelection/styles/CdrSurfaceSelectionLayout.module.scss index 242582f0c..27392f06b 100644 --- a/src/components/surfaceSelection/styles/CdrSurfaceSelectionLayout.module.scss +++ b/src/components/surfaceSelection/styles/CdrSurfaceSelectionLayout.module.scss @@ -1,6 +1,6 @@ -@import './vars/CdrSurfaceSelectionLayout.vars.scss'; -@import '../../surface/styles/vars/CdrSurface.vars.scss'; +@import './vars/CdrSurfaceSelectionLayout.vars'; +@import '../../surface/styles/vars/CdrSurface.vars'; .cdr-surface-selection-layout { - @include cdr-surface-selection-layout-base-mixin(); + @include cdr-surface-selection-layout-base-mixin; } diff --git a/src/components/surfaceSelection/styles/vars/CdrSurfaceSelection.vars.scss b/src/components/surfaceSelection/styles/vars/CdrSurfaceSelection.vars.scss index c66cb617d..84029c46d 100644 --- a/src/components/surfaceSelection/styles/vars/CdrSurfaceSelection.vars.scss +++ b/src/components/surfaceSelection/styles/vars/CdrSurfaceSelection.vars.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/settings/index.scss'; +@import '../../../../styles/settings/index'; $surface-selection-component: 'surface-selection'; $surface-selection-modifiers: 'default'; @@ -67,6 +67,7 @@ $surface-selection-border-colors: ( @include cdr-border-width-mixin($component, 'sixteenth-x'); @include cdr-border-style-mixin($component, 'solid'); @include cdr-radius-mixin($component, 'softest'); + border: none; cursor: pointer; appearance: none; @@ -77,7 +78,7 @@ $surface-selection-border-colors: ( padding: $cdr-space-inset-half-x-stretch; transition: all var(--cdr-duration-1-x) var(--cdr-timing-function-ease); - @include cdr-surface-selection-loading-mixin() { + @include cdr-surface-selection-loading-mixin { pointer-events: none; .cdr-#{$component}__layout { @@ -108,17 +109,19 @@ $surface-selection-border-colors: ( pointer-events: none; } - @include cdr-surface-selection-disabled-mixin() { + @include cdr-surface-selection-disabled-mixin { cursor: not-allowed !important; + @include cdr-border-style-mixin($component, 'dashed'); } - @include cdr-surface-selection-active-mixin() { + @include cdr-surface-selection-active-mixin { outline: none; + @include cdr-border-width-mixin($component, 'three-sixteenth-x'); } - @include cdr-surface-selection-checked-mixin() { + @include cdr-surface-selection-checked-mixin { @include cdr-border-width-mixin($component, 'three-sixteenth-x'); } @@ -135,35 +138,41 @@ $surface-selection-border-colors: ( $modifier: 'default' ) { $state: 'rest'; + @include cdr-background-mixin($background-colors, $component, $modifier, $state); @include cdr-border-color-mixin($border-colors, $component, $modifier, $state); - @include cdr-surface-selection-hover-mixin() { + @include cdr-surface-selection-hover-mixin { $state: 'hover'; + @include cdr-background-mixin($background-colors, $component, $modifier, $state); @include cdr-border-color-mixin($border-colors, $component, $modifier, $state); } - @include cdr-surface-selection-active-mixin() { + @include cdr-surface-selection-active-mixin { $state: 'active'; + @include cdr-background-mixin($background-colors, $component, $modifier, $state); @include cdr-border-color-mixin($border-colors, $component, $modifier, $state); } - @include cdr-surface-selection-checked-mixin() { + @include cdr-surface-selection-checked-mixin { $state: 'checked'; + @include cdr-background-mixin($background-colors, $component, $modifier, $state); @include cdr-border-color-mixin($border-colors, $component, $modifier, $state); } - @include cdr-surface-selection-disabled-mixin() { + @include cdr-surface-selection-disabled-mixin { $state: 'disabled'; + @include cdr-background-mixin($background-colors, $component, $modifier, $state); @include cdr-border-color-mixin($border-colors, $component, $modifier, $state); } - @include cdr-surface-selection-loading-mixin() { + @include cdr-surface-selection-loading-mixin { $state: 'loading'; + @include cdr-background-mixin($background-colors, $component, $modifier, $state); } } diff --git a/src/components/surfaceSelection/styles/vars/CdrSurfaceSelectionLayout.vars.scss b/src/components/surfaceSelection/styles/vars/CdrSurfaceSelectionLayout.vars.scss index b81f71a89..6d00a6be6 100644 --- a/src/components/surfaceSelection/styles/vars/CdrSurfaceSelectionLayout.vars.scss +++ b/src/components/surfaceSelection/styles/vars/CdrSurfaceSelectionLayout.vars.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/settings/index.scss'; +@import '../../../../styles/settings/index'; @mixin cdr-surface-selection-layout-base-mixin() { display: flex; diff --git a/src/components/switch/styles/CdrSwitch.module.scss b/src/components/switch/styles/CdrSwitch.module.scss index a798502fd..bdabba1ab 100644 --- a/src/components/switch/styles/CdrSwitch.module.scss +++ b/src/components/switch/styles/CdrSwitch.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-switch { display: flex; @@ -9,8 +9,10 @@ padding: 0; position: relative; overflow: hidden; + //ITEM_DOC: Border of the cdr-switch button border: 0.1rem solid var(--cdr-switch-border-color, var(--cdr-color-border-secondary, #{$cdr-color-border-secondary})); + //ITEM_DOC: Background color of the cdr-switch button background-color: var(--cdr-switch-background-color, var(--cdr-color-background-switch-default-rest, #{$cdr-color-background-switch-default-rest})); @@ -23,6 +25,7 @@ //ITEM_DOC: Box-shadow of the cdr-switch button on focus box-shadow: 0 0 0 0.2rem var(--cdr-switch-box-shadow-color-focus, var(--cdr-color-border-secondary, #{$cdr-color-border-secondary})); outline: none; + //ITEM_DOC: Background color of the cdr-switch button on focus background-color: var(--cdr-switch-background-color-focus, var(--cdr-color-background-switch-default-focus, #{$cdr-color-background-switch-default-focus})); @@ -42,6 +45,7 @@ &:hover:not(:focus) { //ITEM_DOC: Border of the cdr-switch button on hover when not in focus border: 0.1rem solid var(--cdr-switch-hover-border-color, var(--cdr-color-border-switch-default-hover, #{$cdr-color-border-switch-default-hover})); + //ITEM_DOC: Background color of the cdr-switch button on hover when not in focus background-color: var(--cdr-switch-background-color-hover, var(--cdr-color-background-switch-default-hover, #{$cdr-color-background-switch-default-hover})); @@ -60,6 +64,7 @@ &[aria-checked="true"] { border: none; + //ITEM_DOC: Background color of the cdr-switch button when it is checked background-color: var(--cdr-switch-background-color-checked, var(--cdr-color-background-switch-selected-default-rest, #{$cdr-color-background-switch-selected-default-rest})); @@ -71,6 +76,7 @@ &:focus { //ITEM_DOC: Box-shadow of the cdr-switch button when it is checked and in focus box-shadow: 0 0 0 0.2rem var(--cdr-switch-box-shadow-color-checked-focus, var(--cdr-color-border-secondary, #{$cdr-color-border-secondary})); + //ITEM_DOC: Background color of the cdr-switch button when it is checked and in focus background-color: var(--cdr-switch-background-color-checked-focus, var(--cdr-color-background-switch-selected-default-focus, #{$cdr-color-background-switch-selected-default-focus})); outline: none; @@ -79,6 +85,7 @@ &::before { //ITEM_DOC: Border of the cdr-switch handle when it is checked and in focus border: 0.1rem solid var(--cdr-switch-handle-border-color-checked-focus, var(--cdr-color-border-switch-handle-default-focus, #{$cdr-color-border-switch-handle-default-focus})); + //ITEM_DOC: Background color of the cdr-switch handle when it is checked and in focus background-color: var(--cdr-switch-handle-background-color-checked-focus, var(--cdr-color-background-switch-handle-selected-default-focus, #{$cdr-color-background-switch-handle-selected-default-focus})); } @@ -93,6 +100,7 @@ .cdr-switch__handle { &::before { border: none; + //ITEM_DOC: Background color of the cdr-switch handle when it is checked background-color: var(--cdr-switch-handle-background-color-checked, var(--cdr-color-background-switch-handle-selected-default-rest, #{$cdr-color-background-switch-handle-selected-default-rest})); } @@ -101,6 +109,7 @@ &:hover:not(:focus) { //ITEM_DOC: Border of the cdr-switch button when it is checked and on hover but not in focus border: 0.1rem solid var(--cdr-switch-border-color-checked-hover, var(--cdr-color-border-secondary, #{$cdr-color-border-secondary})); + //ITEM_DOC: Background color of the cdr-switch button when it is checked and on hover but not in focus background-color: var(--cdr-switch-background-color-checked-hover, var(--cdr-color-background-switch-selected-default-hover, #{$cdr-color-background-switch-selected-default-hover})); @@ -121,27 +130,27 @@ &__label { margin: 0 $cdr-space-quarter-x; + @include cdr-text-utility-sans-300; } &__handle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - -webkit-transition: $cdr-duration-3-x $cdr-timing-function-ease-out; + inset: 0; + transition: $cdr-duration-3-x $cdr-timing-function-ease-out; transition: $cdr-duration-3-x $cdr-timing-function-ease-out; &::before { position: absolute; content: ""; + //ITEM_DOC: Border color of the cdr-switch handle border: 0.1rem solid var(--cdr-switch-handle-border, var(--cdr-color-border-secondary, #{$cdr-color-border-secondary})); + //ITEM_DOC: Background color of the cdr-switch handle background-color: var(--cdr-switch-handle-background-color-rest, var(--cdr-color-background-switch-handle-default-rest, #{$cdr-color-background-switch-handle-default-rest})); - -webkit-transition: left $cdr-duration-3-x $cdr-timing-function-ease-out, right $cdr-duration-3-x $cdr-timing-function-ease-out; + transition: left $cdr-duration-3-x $cdr-timing-function-ease-out, right $cdr-duration-3-x $cdr-timing-function-ease-out; transition: left $cdr-duration-3-x $cdr-timing-function-ease-out, right $cdr-duration-3-x $cdr-timing-function-ease-out; } } diff --git a/src/components/table/styles/CdrTable.module.scss b/src/components/table/styles/CdrTable.module.scss index 2eb0fa2dc..2b0ecdc53 100644 --- a/src/components/table/styles/CdrTable.module.scss +++ b/src/components/table/styles/CdrTable.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrTable.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrTable.vars'; .cdr-table { @include cdr-table-base-mixin; diff --git a/src/components/table/styles/vars/CdrTable.vars.scss b/src/components/table/styles/vars/CdrTable.vars.scss index 68e832235..72564ab70 100644 --- a/src/components/table/styles/vars/CdrTable.vars.scss +++ b/src/components/table/styles/vars/CdrTable.vars.scss @@ -1,11 +1,12 @@ @mixin cdr-table-base-text-mixin() { @include cdr-text-utility-sans-200; + //ITEM_DOC: Color of the cdr-table base text color: var(--cdr-table-base-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); } @mixin cdr-table-base-mixin() { - @include cdr-table-base-text-mixin(); + @include cdr-table-base-text-mixin; border: none; border-collapse: collapse; @@ -35,6 +36,7 @@ caption { @include cdr-text-utility-sans-strong-300; + text-align: left; margin-bottom: $cdr-space-half-x; } @@ -61,6 +63,7 @@ @mixin cdr-table-border-mixin() { //ITEM_DOC: Default border color of the table --table-border-default: 1px solid var(--cdr-table-border-color-default, var(--cdr-color-border-table-default, #{$cdr-color-border-table-default})); + //ITEM_DOC: Head border color of the table --table-border-head: 1px solid var(--cdr-table-head-border-default, var(--cdr-color-border-table-head, #{$cdr-color-border-table-head})); diff --git a/src/components/tabs/styles/CdrTabPanel.module.scss b/src/components/tabs/styles/CdrTabPanel.module.scss index c1dea05af..ac9ad1733 100644 --- a/src/components/tabs/styles/CdrTabPanel.module.scss +++ b/src/components/tabs/styles/CdrTabPanel.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-tab-panel { width: 100%; @@ -63,6 +63,7 @@ :global { animation-name: enter-left; } + @include cdr-tab-panel-animation; } @@ -70,6 +71,7 @@ :global { animation-name: enter-right; } + @include cdr-tab-panel-animation; } @@ -77,6 +79,7 @@ :global { animation-name: exit-left; } + @include cdr-tab-panel-animation; } @@ -84,5 +87,6 @@ :global { animation-name: exit-right; } + @include cdr-tab-panel-animation; } diff --git a/src/components/tabs/styles/CdrTabs.module.scss b/src/components/tabs/styles/CdrTabs.module.scss index fafc6db1e..83b50342f 100644 --- a/src/components/tabs/styles/CdrTabs.module.scss +++ b/src/components/tabs/styles/CdrTabs.module.scss @@ -1,6 +1,7 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; + //@import url('@rei/cedar/dist/style/cdr-tab-panel.css'); -@import './CdrTabPanel.module.scss'; +@import './CdrTabPanel.module'; @mixin cdr-tabs-base-header-item-label() { font-family: $cdr-font-family-sans; @@ -29,13 +30,14 @@ /* https://davidwalsh.name/osx-overflow */ ::-webkit-scrollbar { - -webkit-appearance: none; + appearance: none; width: 7px; } + ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); - -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); + box-shadow: 0 0 1px rgba(255, 255, 255, .5); } &__header-container { @@ -43,6 +45,7 @@ overflow-x: auto; margin: 0; padding: 0; + //ITEM_DOC: Keyline color of the cdr-tabs header container border-bottom: 1px solid var(--cdr-tabs-header-container-keyline-color, var(--cdr-color-border-tab-keyline-rest, #{$cdr-color-border-tab-keyline-rest})); -webkit-overflow-scrolling: touch; @@ -56,6 +59,7 @@ padding: 0; position: relative; cursor: pointer; + &:first-of-type { margin-left: 0; } @@ -65,11 +69,14 @@ & + & { margin-left: $cdr-space-one-x; } + @include cdr-tabs-base-header-item-label; + border: none; flex-grow: 1; background-color: transparent; display: block; + //ITEM_DOC: Text color in a tab color: var(--cdr-tabs-tab-text-color, var(--cdr-color-text-tab-rest, #{$cdr-color-text-tab-rest})); font-weight: 300; @@ -98,6 +105,7 @@ &:hover, &:focus { text-decoration: none; + //ITEM_DOC: Text color of a tab on active, focus, or hover color: var(--cdr-tabs-tab-text-color-interaction, var(--cdr-color-text-tab-hover, #{$cdr-color-text-tab-hover})); } @@ -105,6 +113,7 @@ &--disabled { border: none; background-color: transparent; + //ITEM_DOC: Text color of a disabled tab color: var(--cdr-tabs-tab-text-color-disabled, var(--cdr-color-text-tab-disabled, #{$cdr-color-text-tab-disabled})); @@ -123,7 +132,7 @@ &__gradient { transition: opacity $cdr-duration-2-x ease; - -webkit-transition: opacity $cdr-duration-2-x ease; + transition: opacity $cdr-duration-2-x ease; position: absolute; z-index: 100; top: 0; @@ -154,6 +163,7 @@ margin-top: -$cdr-space-quarter-x; box-sizing: border-box; border: none; + //ITEM_DOC: Background color of the cdr-tabs keyline background-color: var(--cdr-tabs-keyline-background-color, var(--cdr-color-border-tab-keyline-active, #{$cdr-color-border-tab-keyline-active})); transition: $cdr-duration-4-x $cdr-timing-function-ease-out; @@ -162,8 +172,7 @@ &__content-container { position: relative; flex: 1 1 auto; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; } .fade-enter-active, @@ -186,6 +195,7 @@ padding: $cdr-space-inset-three-quarter-x-squish; } + .cdr-tabs__header-item { & + & { margin-left: $cdr-space-half-x; @@ -217,6 +227,7 @@ .cdr-tabs__header:first-of-type { margin-left: auto; } + .cdr-tabs__header:last-of-type { margin-right: auto; } diff --git a/src/components/text/presets/styles/CdrBody.module.scss b/src/components/text/presets/styles/CdrBody.module.scss index ded07619a..25cfcda24 100644 --- a/src/components/text/presets/styles/CdrBody.module.scss +++ b/src/components/text/presets/styles/CdrBody.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-body { @include cdr-text-base-mixin; @include cdr-text-body-400; + font-size: var(--cdr-body-font-size); line-height: var(--cdr-body-line-height); font-weight: var(--cdr-body-font-weight); diff --git a/src/components/text/presets/styles/CdrEyebrow.module.scss b/src/components/text/presets/styles/CdrEyebrow.module.scss index 78cc31c2e..5a6716ab5 100644 --- a/src/components/text/presets/styles/CdrEyebrow.module.scss +++ b/src/components/text/presets/styles/CdrEyebrow.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-eyebrow { @include cdr-text-base-mixin; @include cdr-text-eyebrow-100; + font-size: var(--cdr-type-scale--1); line-height: var(--cdr-eyebrow-line-height-ratio); } \ No newline at end of file diff --git a/src/components/text/presets/styles/CdrHeadingDisplay.module.scss b/src/components/text/presets/styles/CdrHeadingDisplay.module.scss index c70150a5f..a9bec3eae 100644 --- a/src/components/text/presets/styles/CdrHeadingDisplay.module.scss +++ b/src/components/text/presets/styles/CdrHeadingDisplay.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-heading-display { @include cdr-text-base-mixin; @include cdr-text-heading-display-1600; + font-size: var(--cdr-heading-display-font-size); line-height: var(--cdr-heading-display-line-height); } \ No newline at end of file diff --git a/src/components/text/presets/styles/CdrHeadingSans.module.scss b/src/components/text/presets/styles/CdrHeadingSans.module.scss index 701c1c364..efd542627 100644 --- a/src/components/text/presets/styles/CdrHeadingSans.module.scss +++ b/src/components/text/presets/styles/CdrHeadingSans.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-heading-sans { @include cdr-text-base-mixin; @include cdr-text-heading-sans-600; + font-size: var(--cdr-heading-sans-font-size); line-height: var(--cdr-heading-sans-line-height); } \ No newline at end of file diff --git a/src/components/text/presets/styles/CdrHeadingSerif.module.scss b/src/components/text/presets/styles/CdrHeadingSerif.module.scss index 50428ddda..16c68c23d 100644 --- a/src/components/text/presets/styles/CdrHeadingSerif.module.scss +++ b/src/components/text/presets/styles/CdrHeadingSerif.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-heading-serif { @include cdr-text-base-mixin; @include cdr-text-heading-serif-1200; + font-size: var(--cdr-heading-serif-font-size); line-height: var(--cdr-heading-serif-line-height); font-weight: var(--cdr-heading-serif-font-weight); diff --git a/src/components/text/presets/styles/CdrPresets.module.scss b/src/components/text/presets/styles/CdrPresets.module.scss index f7df654d4..5ffb5cd2f 100644 --- a/src/components/text/presets/styles/CdrPresets.module.scss +++ b/src/components/text/presets/styles/CdrPresets.module.scss @@ -1,3 +1,3 @@ -@import '../../../../styles/settings/index.scss'; -@import '../../styles/vars/CdrText.vars.scss'; -@import '../../../../styles/settings/fluid.vars.scss'; \ No newline at end of file +@import '../../../../styles/settings/index'; +@import '../../styles/vars/CdrText.vars'; +@import '../../../../styles/settings/fluid.vars'; \ No newline at end of file diff --git a/src/components/text/presets/styles/CdrSubheadingSans.module.scss b/src/components/text/presets/styles/CdrSubheadingSans.module.scss index 7251bca2c..8887ad806 100644 --- a/src/components/text/presets/styles/CdrSubheadingSans.module.scss +++ b/src/components/text/presets/styles/CdrSubheadingSans.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-subheading-sans { @include cdr-text-base-mixin; @include cdr-text-subheading-sans-600; + font-size: var(--cdr-subheading-sans-font-size); line-height: var(--cdr-subheading-sans-line-height); } \ No newline at end of file diff --git a/src/components/text/presets/styles/CdrUtilitySans.module.scss b/src/components/text/presets/styles/CdrUtilitySans.module.scss index 0a33e5fab..8cdf0135f 100644 --- a/src/components/text/presets/styles/CdrUtilitySans.module.scss +++ b/src/components/text/presets/styles/CdrUtilitySans.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-utility-sans { @include cdr-text-base-mixin; @include cdr-text-utility-sans-800; + font-size: var(--cdr-utility-sans-font-size); line-height: var(--cdr-utility-sans-line-height); font-weight: var(--cdr-utility-sans-font-weight); diff --git a/src/components/text/presets/styles/CdrUtilitySerif.module.scss b/src/components/text/presets/styles/CdrUtilitySerif.module.scss index b6193757b..36e7c8541 100644 --- a/src/components/text/presets/styles/CdrUtilitySerif.module.scss +++ b/src/components/text/presets/styles/CdrUtilitySerif.module.scss @@ -1,8 +1,9 @@ -@import './CdrPresets.module.scss'; +@import './CdrPresets.module'; .cdr-utility-serif { @include cdr-text-base-mixin; @include cdr-text-utility-serif-800; + font-size: var(--cdr-utility-serif-font-size); line-height: var(--cdr-utility-serif-line-height); font-weight: var(--cdr-utility-serif-font-weight); diff --git a/src/components/text/styles/CdrText.module.scss b/src/components/text/styles/CdrText.module.scss index 2e5153200..013b5ffe9 100644 --- a/src/components/text/styles/CdrText.module.scss +++ b/src/components/text/styles/CdrText.module.scss @@ -1,5 +1,5 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrText.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrText.vars'; .cdr-text { @include cdr-text-base-mixin; diff --git a/src/components/title/styles/CdrTitle.module.scss b/src/components/title/styles/CdrTitle.module.scss index 23d9470f9..ec7436748 100644 --- a/src/components/title/styles/CdrTitle.module.scss +++ b/src/components/title/styles/CdrTitle.module.scss @@ -1,8 +1,9 @@ -@import '../../../styles/settings/index.scss'; -@import '../../../styles/settings/fluid.vars.scss'; +@import '../../../styles/settings/index'; +@import '../../../styles/settings/fluid.vars'; .cdr-title { @include cdr-text-heading-display-1200; + color: var(--cdr-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary})); margin: 0; font-size: var(--cdr-type-scale-4); @@ -10,26 +11,35 @@ @container (min-width: 720px) and (max-width: 900px) { @include cdr-text-heading-serif-800; + font-size: var(--cdr-type-scale-3); line-height: calc(var(--cdr-type-scale-3) * var(--cdr-heading-serif-line-height-ratio)); } + @container (min-width: 540px) and (max-width: 720px) { @include cdr-text-heading-serif-800; + font-size: var(--cdr-type-scale-2); line-height: calc(var(--cdr-type-scale-2) * var(--cdr-heading-serif-line-height-ratio)); } + @container (min-width: 360px) and (max-width: 540px) { @include cdr-text-heading-sans-500; + font-size: var(--cdr-type-scale-1); line-height: calc(var(--cdr-type-scale-1) * var(--cdr-heading-sans-line-height-ratio)); } + @container (min-width: 180px) and (max-width: 360px) { @include cdr-text-heading-sans-500; + font-size: var(--cdr-type-scale-0); line-height: calc(var(--cdr-type-scale-0) * var(--cdr-heading-sans-line-height-ratio)); } + @container (max-width: 180px) { @include cdr-text-heading-sans-500; + font-size: var(--cdr-type-scale--1); line-height: calc(var(--cdr-type-scale--1) * var(--cdr-heading-sans-line-height-ratio)); } diff --git a/src/components/toast/styles/CdrToast.module.scss b/src/components/toast/styles/CdrToast.module.scss index 3855d92df..ef5e541f7 100644 --- a/src/components/toast/styles/CdrToast.module.scss +++ b/src/components/toast/styles/CdrToast.module.scss @@ -1,7 +1,7 @@ -@import '../../button/styles/CdrButton.module.scss'; -@import '../../icon/styles/CdrIcon.module.scss'; -@import '../../../styles/settings/index.scss'; -@import './vars/CdrToast.vars.scss'; +@import '../../button/styles/CdrButton.module'; +@import '../../icon/styles/CdrIcon.module'; +@import '../../../styles/settings/index'; +@import './vars/CdrToast.vars'; .cdr-toast { @include cdr-toast-base-mixin; @@ -11,12 +11,15 @@ opacity: 0; transform: translateX(2.4rem); } + &--toast-enter-active { transition: all $cdr-duration-5-x $timing-function; } + &--toast-leave-to { opacity: 0; } + &--toast-leave-active { transition: opacity $cdr-duration-2-x $timing-function; } @@ -33,8 +36,8 @@ width: 3.2rem; grid-area: icon-left; display: grid; - align-items: center; - justify-items: center; + place-items: center center; + & svg { max-height: 2.2rem; max-width: 2.2rem; @@ -58,9 +61,11 @@ align-content: center; grid-area: close-button; max-height: 3.2rem; + & svg { height: 2.2rem; width: 2.2rem; + //ITEM_DOC: Fill color of the cdr-toast close button icon fill: var(--cdr-toast-close-button-fill, var(--cdr-color-text-emphasis, #{$cdr-color-text-emphasis})) !important; } @@ -69,30 +74,36 @@ &--default { & .cdr-toast__main { @include cdr-toast-default-mixin; + & .cdr-toast__icon-left { //ITEM_DOC: Default background color of the cdr-toast icon-left background-color: var(--cdr-toast-icon-left-background-color-default, var(--cdr-color-background-message-default-02, #{$cdr-color-background-message-default-02})); + svg { //ITEM_DOC: Default fill color of the cdr-toast icon-left fill: var(--cdr-toast-icon-left-fill-default, var(--cdr-color-icon-message-default, #{$cdr-color-icon-message-default})); } } } + border-left-color: $cdr-color-border-message-default-01; } &--info { & .cdr-toast__main { @include cdr-toast-info-mixin; + & .cdr-toast__icon-left { //ITEM_DOC: Info background color of the cdr-toast icon-left background-color: var(--cdr-toast-icon-left-background-color-info, var(--cdr-color-background-message-info-02, #{$cdr-color-background-message-info-02})); + svg { //ITEM_DOC: Info fill color of the cdr-toast icon-left fill: var(--cdr-toast-icon-left-fill-info, var(--cdr-color-icon-message-info, #{$cdr-color-icon-message-info})); } } } + //ITEM_DOC: Info border-left color of the cdr-toast border-left-color: var(--cdr-toast-border-left-color-info, var(--cdr-color-border-message-info-01, #{$cdr-color-border-message-info-01})); } @@ -100,15 +111,18 @@ &--warning { & .cdr-toast__main { @include cdr-toast-warning-mixin; + & .cdr-toast__icon-left { //ITEM_DOC: Warning background color of the cdr-toast icon-left background-color: var(--cdr-toast-icon-left-background-color-warning, var(--cdr-color-background-message-warning-02, #{$cdr-color-background-message-warning-02})); + svg { //ITEM_DOC: Warning fill color of the cdr-toast icon-left fill: var(--cdr-toast-icon-left-fill-warning, var(--cdr-color-icon-message-warning, #{$cdr-color-icon-message-warning})); } } } + //ITEM_DOC: Warning border-left color of the cdr-toast border-left-color: var(--cdr-toast-border-left-color-warning, var(--cdr-color-border-message-warning-01, #{$cdr-color-border-message-warning-01})); } @@ -116,15 +130,18 @@ &--success { & .cdr-toast__main { @include cdr-toast-success-mixin; + & .cdr-toast__icon-left { //ITEM_DOC: Success background color of the cdr-toast icon-left background-color: var(--cdr-toast-icon-left-background-color-success, var(--cdr-color-background-message-success-02, #{$cdr-color-background-message-success-02})); + svg { //ITEM_DOC: Success fill color of the cdr-toast icon-left fill: var(--cdr-toast-icon-left-fill-success, var(--cdr-color-icon-message-success, #{$cdr-color-icon-message-success})); } } } + //ITEM_DOC: Success border-left color of the cdr-toast border-left-color: var(--cdr-toast-border-left-color-success, var(--cdr-color-border-message-success-01, #{$cdr-color-border-message-success-01})); } @@ -132,15 +149,18 @@ &--error { & .cdr-toast__main { @include cdr-toast-error-mixin; + & .cdr-toast__icon-left { //ITEM_DOC: Error background color of the cdr-toast icon-left background-color: var(--cdr-toast-icon-left-background-color-error, var(--cdr-color-background-message-error-02, #{$cdr-color-background-message-error-02})); + svg { //ITEM_DOC: Error fill color of the cdr-toast icon-left fill: var(--cdr-toast-icon-left-fill-error, var(--cdr-color-icon-message-error, #{$cdr-color-icon-message-error})); } } } + //ITEM_DOC: Error border-left color of the cdr-toast border-left-color: var(--cdr-toast-border-left-color-error, var(--cdr-color-border-message-error-01, #{$cdr-color-border-message-error-01})); } diff --git a/src/components/toast/styles/vars/CdrToast.vars.scss b/src/components/toast/styles/vars/CdrToast.vars.scss index 304a8c7de..108ce81d5 100644 --- a/src/components/toast/styles/vars/CdrToast.vars.scss +++ b/src/components/toast/styles/vars/CdrToast.vars.scss @@ -5,15 +5,19 @@ $timing-function: $cdr-timing-function-ease-out; border-left: 0.4rem solid; box-shadow: $cdr-prominence-floating; margin-bottom: $cdr-space-one-x; + @include cdr-text-utility-sans-200; + @include cdr-sm-mq-up { width: 39rem; } } + @mixin cdr-toast-default-mixin() { //ITEM_DOC: Default background color of cdr-toast background-color: var(--cdr-toast-background-color-default, var(--cdr-color-background-message-default-01, #{$cdr-color-background-message-default-01})); outline: thin solid; + //ITEM_DOC: Default outline color of cdr-toast outline-color: var(--cdr-toast-outline-color-default, var(--cdr-color-border-message-default-02, #{$cdr-color-border-message-default-02})); outline-offset: -1px; @@ -31,6 +35,7 @@ $timing-function: $cdr-timing-function-ease-out; //ITEM_DOC: Success background color of cdr-toast background-color: var(--cdr-toast-background-color-success, var(--cdr-color-background-message-success-01, #{$cdr-color-background-message-success-01})); outline: thin solid; + //ITEM_DOC: Success outline color of cdr-toast outline-color: var(--cdr-toast-outline-color-success, var(--cdr-color-border-message-success-02, #{$cdr-color-border-message-success-02})); outline-offset: -1px; @@ -40,6 +45,7 @@ $timing-function: $cdr-timing-function-ease-out; //ITEM_DOC: Warning background color of cdr-toast background-color: var(--cdr-toast-background-color-warning, var(--cdr-color-background-message-warning-01, #{$cdr-color-background-message-warning-01})); outline: thin solid; + //ITEM_DOC: Warning outline color of cdr-toast outline-color: var(--cdr-toast-outline-color-warning, var(--cdr-color-border-message-warning-02, #{$cdr-color-border-message-warning-02})); outline-offset: -1px; @@ -49,6 +55,7 @@ $timing-function: $cdr-timing-function-ease-out; //ITEM_DOC: Error background color of cdr-toast background-color: var(--cdr-toast-background-color-error, var(--cdr-color-background-message-error-01, #{$cdr-color-background-message-error-01})); outline: thin solid; + //ITEM_DOC: Error outline color of cdr-toast outline-color: var(--cdr-toast-outline-color-error, var(--cdr-color-border-message-error-02, #{$cdr-color-border-message-error-02})); outline-offset: -1px; diff --git a/src/components/toggleButton/styles/CdrToggleButton.module.scss b/src/components/toggleButton/styles/CdrToggleButton.module.scss index a796e2225..65e9dd3d8 100644 --- a/src/components/toggleButton/styles/CdrToggleButton.module.scss +++ b/src/components/toggleButton/styles/CdrToggleButton.module.scss @@ -1,16 +1,19 @@ -@import '../../../styles/settings/index.scss'; -@import './vars/CdrToggleButton.vars.scss'; +@import '../../../styles/settings/index'; +@import './vars/CdrToggleButton.vars'; .cdr-toggle-button { &__item { @include cdr-toggle-button-base-text-mixin-medium; + display: flex; justify-content: center; gap: .3rem; border: .2rem solid transparent; border-radius: .3rem; + //ITEM_DOC: Default text color of the cdr-toggle-button color: var(--cdr-toggle-button-color-default-rest, var(--cdr-color-text-toggle-button-default-rest, #{$cdr-color-text-toggle-button-default-rest})); + //ITEM_DOC: Default background color of the cdr-toggle-button background-color: var(--cdr-toggle-button-background-color-default-rest, var(--cdr-color-background-toggle-button-default-rest, #{$cdr-color-background-toggle-button-default-rest})); width: 100%; @@ -20,8 +23,10 @@ outline: none; padding: 0.7rem 1.3rem; border-radius: .3rem; + //ITEM_DOC: Focus border color of the cdr-toggle-button border: .3rem solid var(--cdr-toggle-button-border-color-default-focus, var(--cdr-color-border-toggle-button-default-focus, #{$cdr-color-border-toggle-button-default-focus})); + //ITEM_DOC: Focus background color of the cdr-toggle-button background-color: var(--cdr-toggle-button-background-color-default-focus, var(--cdr-color-background-toggle-button-default-focus, #{$cdr-color-background-toggle-button-default-focus})); } @@ -35,6 +40,7 @@ //ITEM_DOC: Selected background color of the cdr-toggle-button at rest background-color: var(--cdr-toggle-button-background-color-default-selected-rest, var(--cdr-color-background-toggle-button-default-selected-rest, #{$cdr-color-background-toggle-button-default-selected-rest})); padding: 0.8rem 1.4rem; + //ITEM_DOC: Selected border color of the cdr-toggle-button at rest border: .2rem solid var(--cdr-toggle-button-border-color-default-selected-rest, var(--cdr-color-border-toggle-button-default-selected-rest, #{$cdr-color-border-toggle-button-default-selected-rest})); border-radius: .2rem; @@ -48,6 +54,7 @@ &:focus { padding: 0.7rem 1.3rem; + //ITEM_DOC: Selected border color of the cdr-toggle-button on focus border: .3rem solid var(--cdr-toggle-button-border-color-default-selected-focus, var(--cdr-color-border-toggle-button-default-selected-focus, #{$cdr-color-border-toggle-button-default-selected-focus})); border-radius: .2rem; diff --git a/src/components/toggleButton/styles/CdrToggleGroup.module.scss b/src/components/toggleButton/styles/CdrToggleGroup.module.scss index 3246cf064..5a8155196 100644 --- a/src/components/toggleButton/styles/CdrToggleGroup.module.scss +++ b/src/components/toggleButton/styles/CdrToggleGroup.module.scss @@ -1,9 +1,10 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; .cdr-toggle-group { //ITEM_DOC: Border color of the cdr-toggle-group border: .1rem solid var(--cdr-toggle-group-border-color, var(--cdr-color-border-primary, #{$cdr-color-border-primary})); border-radius: .4rem; + //ITEM_DOC: Default background color of the cdr-toggle-group background-color: var(--cdr-toggle-group-background-color-default-rest, var(--cdr-color-background-toggle-group-default-rest, #{$cdr-color-background-toggle-group-default-rest})); display: grid; diff --git a/src/components/tooltip/styles/CdrTooltip.module.scss b/src/components/tooltip/styles/CdrTooltip.module.scss index 7a0695d99..1e4e235d2 100644 --- a/src/components/tooltip/styles/CdrTooltip.module.scss +++ b/src/components/tooltip/styles/CdrTooltip.module.scss @@ -1,6 +1,7 @@ -@import '../../../styles/settings/index.scss'; +@import '../../../styles/settings/index'; + //@import url('@rei/cedar/dist/style/cdr-popup.css'); -@import '../../popup/styles/CdrPopup.module.scss'; +@import '../../popup/styles/CdrPopup.module'; .cdr-tooltip--position { position: relative; @@ -16,10 +17,13 @@ .cdr-popup__content { @include cdr-text-utility-sans-strong-100; + //ITEM_DOC: Background color of the cdr-popup background: var(--cdr-popup-background-color-default, var(--cdr-color-background-tooltip-default, #{$cdr-color-background-tooltip-default})); + //ITEM_DOC: Text color of the cdr-popup color: var(--cdr-popup-text-color-default, var(--cdr-color-text-tooltip-default, #{$cdr-color-text-tooltip-default})); + //ITEM_DOC: Border color of the cdr-popup border: 1px solid var(--cdr-popup-border-color-default, var(--cdr-color-border-tooltip-default, #{$cdr-color-border-tooltip-default})); padding: $cdr-space-inset-three-quarter-x-squish; diff --git a/src/styles/cdr-reset.scss b/src/styles/cdr-reset.scss index 3f21a62f7..0613b2dec 100644 --- a/src/styles/cdr-reset.scss +++ b/src/styles/cdr-reset.scss @@ -1,6 +1,6 @@ /* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */ -@use '../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens'; +@import '../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens'; html { -webkit-box-sizing: border-box; @@ -23,7 +23,7 @@ html { box-sizing: inherit; } -@-ms-viewport { +@viewport { width: device-width; } @@ -37,7 +37,7 @@ body { font-size: 1.6rem; line-height: 1.5; margin: 0; - + /* cdr-color-text-primary */ color: rgba(12, 11, 8, 0.75); diff --git a/src/styles/settings/fluid.vars.scss b/src/styles/settings/fluid.vars.scss index b7af5425d..94178a6ee 100644 --- a/src/styles/settings/fluid.vars.scss +++ b/src/styles/settings/fluid.vars.scss @@ -1,7 +1,10 @@ // type + /* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.20&maxFontSize=20&maxWidth=1232&maxRatio=1.25&steps=-1%2C0%2C1%2C2%2C3%2C4%2C5%2C6%2C7&baseStep=0&prefix=cdr-type-scale&decimals=2&useRems=on&remValue=10&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1247 */ // space + /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1232,20,1.25,7,1,&s=0.75|0.5|0.25|0.2|0.15|0.25|0.2,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ + /* TODO our rem is still base 10 set via reset font-size: 62.5%; at some point this should be removed and rem values recaculated */ :root { @@ -42,6 +45,7 @@ --cdr-space-scale-6: clamp(2.4rem, 2.2rem + 0.66cqi, 3rem); --cdr-space-scale-7: clamp(3.2rem, 2.9rem + 0.88cqi, 4rem); --cdr-space-scale-8: clamp(4.8rem, 4.4rem + 1.31cqi, 6rem); + /* One-up pairs */ --cdr-space-scale-0--1: clamp(0.2rem, 0.1rem + 0.223cqi, 0.4rem); --cdr-space-scale-3--4: clamp(0.4rem, 0.2rem + 0.66cqi, 1rem); @@ -50,6 +54,7 @@ } + /** Remove once Safari < 16 is no longer a target */ @supports not (container-type: inline-size) { :root { @@ -62,6 +67,7 @@ --cdr-type-scale-5: clamp(3.98rem, 2.33vw + 3.24rem, 6.1rem); --cdr-type-scale-6: clamp(4.78rem, 3.13vw + 3.78rem, 7.63rem); --cdr-type-scale-7: clamp(5.73rem, 4.17vw + 4.4rem, 9.54rem); + // space --cdr-space-scale-0: clamp(0.2rem, 0.2rem + 0.11vw, 0.3rem); --cdr-space-scale-1: clamp(0.3rem, 0.3rem + 0.11vw, 0.4rem); @@ -72,6 +78,7 @@ --cdr-space-scale-6: clamp(2.4rem, 2.2rem + 0.66vw, 3rem); --cdr-space-scale-7: clamp(3.2rem, 2.9rem + 0.88vw, 4rem); --cdr-space-scale-8: clamp(4.8rem, 4.4rem + 1.31vw, 6rem); + /* One-up pairs */ --cdr-space-scale-0--1: clamp(0.2rem, 0.1rem + 0.223vw, 0.4rem); --cdr-space-scale-3--4: clamp(0.4rem, 0.2rem + 0.66vw, 1rem); diff --git a/src/styles/settings/index.scss b/src/styles/settings/index.scss index b6241195f..73b95ce4a 100644 --- a/src/styles/settings/index.scss +++ b/src/styles/settings/index.scss @@ -1,7 +1,8 @@ $cdr-warn: false; + @use 'sass:map'; @use 'sass:list'; -@import '../../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss'; +@import '../../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens'; @import './alignment.vars'; @import './options.vars'; @import './visibility.vars'; @@ -15,9 +16,7 @@ $border-widths: ( 'quarter-x': $cdr-space-inset-quarter-x, 'three-eighth-x': $cdr-space-inset-three-eighth-x, ); - $border-styles: 'dotted', 'dashed', 'solid'; - $radii: ( 'sharp': $cdr-radius-sharp, 'soft': $cdr-radius-soft, @@ -25,7 +24,6 @@ $radii: ( 'softest': $cdr-radius-softest, 'round': $cdr-radius-round, ); - $shadows: ( 'flat': $cdr-prominence-flat, 'raised': $cdr-prominence-raised, @@ -112,6 +110,7 @@ $shadows: ( --cdr-#{$component}-radius, var(--cdr-radius-#{$key}, #{map.get($radii, $key)}) ); + border-radius: var(--cdr-#{$component}-radius-default); overflow: hidden; } From 552160648e4167de87264f7ceecc09c665dc3872 Mon Sep 17 00:00:00 2001 From: Michael Hewson Date: Thu, 14 Nov 2024 13:25:07 -0800 Subject: [PATCH 5/5] adding padding top/bottom to the --message for banner to ensure wrapping text does not loose padding --- src/components/banner/styles/CdrBanner.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/banner/styles/CdrBanner.module.scss b/src/components/banner/styles/CdrBanner.module.scss index cf7b3cdc2..aa1a3e601 100644 --- a/src/components/banner/styles/CdrBanner.module.scss +++ b/src/components/banner/styles/CdrBanner.module.scss @@ -44,7 +44,7 @@ &__message { display: inherit; grid-area: message; - padding: 0 $cdr-space-half-x; + padding: $cdr-space-half-x; align-items: center; }