From f713f11ef9bb5d5222887a0868f031f3ad6ba6c9 Mon Sep 17 00:00:00 2001 From: hxtree Date: Wed, 3 Apr 2024 03:20:14 +0000 Subject: [PATCH 1/4] feat: adjust stylelint settings Signed-off-by: hxtree --- clients/design-system/.stylelintrc.json | 12 +++++++++++- clients/design-system/package.json | 2 +- .../src/components/Alert/style.module.scss | 2 +- .../src/components/AppBar/style.module.scss | 14 +++++++------- .../src/components/Article/style.module.scss | 2 +- .../src/components/Card/style.module.scss | 4 ++-- .../src/components/Hero/style.module.scss | 4 ++-- .../src/components/HeroBanner/style.module.scss | 2 +- .../src/components/Paper/style.module.scss | 6 +++--- clients/design-system/src/index.scss | 2 +- 10 files changed, 30 insertions(+), 20 deletions(-) diff --git a/clients/design-system/.stylelintrc.json b/clients/design-system/.stylelintrc.json index 41006503..f8b97c96 100644 --- a/clients/design-system/.stylelintrc.json +++ b/clients/design-system/.stylelintrc.json @@ -2,6 +2,17 @@ "extends": "stylelint-config-standard-scss", "plugins": ["stylelint-order"], "rules": { + "color-function-notation": [ + "legacy", + { + "ignore": ["with-var-inside"] + } + ], + "no-irregular-whitespace": true, + "color-no-invalid-hex": true, + "block-no-empty": true, + "unit-allowed-list": ["%", "deg", "px", "rem", "s", "ms", "vh", "vw"], + "number-max-precision": 3, "alpha-value-notation": "number", "order/order": [ "custom-properties", @@ -10,7 +21,6 @@ "rules", "at-rules" ], - "order/properties-alphabetical-order": true, "order/properties-order": [ "content", "position", diff --git a/clients/design-system/package.json b/clients/design-system/package.json index c17cf0b4..79c6fa13 100644 --- a/clients/design-system/package.json +++ b/clients/design-system/package.json @@ -24,7 +24,7 @@ "test:cov": "jest --coverage --runInBand", "watch": "tsc -w", "lint": "eslint --format visualstudio \"./src/**/*.tsx\" --fix && stylelint \"./src/**/*.scss\" --fix", - "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\" --fix-dry-run", + "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\" --fix-dry-run && stylelint \"./src/**/*.scss\" ", "size": "size-limit", "analyze": "size-limit --why", "cdk:bootstrap": "cdk bootstrap", diff --git a/clients/design-system/src/components/Alert/style.module.scss b/clients/design-system/src/components/Alert/style.module.scss index 94f5d56e..c8acc1fd 100644 --- a/clients/design-system/src/components/Alert/style.module.scss +++ b/clients/design-system/src/components/Alert/style.module.scss @@ -1,7 +1,7 @@ .alert { border: none; border-radius: 3px; - box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0; + box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0; &.alert-success { background-color: #f9fef9 !important; diff --git a/clients/design-system/src/components/AppBar/style.module.scss b/clients/design-system/src/components/AppBar/style.module.scss index 49bc847c..1491402b 100644 --- a/clients/design-system/src/components/AppBar/style.module.scss +++ b/clients/design-system/src/components/AppBar/style.module.scss @@ -2,11 +2,11 @@ @keyframes pulsate { 0% { - box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0); + box-shadow: inset 0 -3px 0 rgb(0, 0, 0, 0); } 50% { - box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2); + box-shadow: inset 0 -3px 0 rgb(0, 0, 0, 0.2); } 100% { @@ -18,7 +18,7 @@ background-color: $color-white; .navbar-menu { - box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0 + box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0 } .navbar-brand { @@ -31,8 +31,8 @@ .app-bar-light { padding: 0; - background-color: rgb(255 253 251); - box-shadow: rgb(0 0 0 / 0.12) 0 0 2px 0, rgb(0 0 0 / 0.14) 0 1.008px 2px 0; + background-color: rgb(255, 253, 251); + box-shadow: rgb(0, 0, 0, 0.12) 0 0 2px 0, rgb(0, 0, 0, 0.14) 0 1.008px 2px 0; ul { margin: 0; @@ -53,11 +53,11 @@ color: $color-blue; transition: border-color 0.5s ease; animation: pulsate 0.5s ease-in-out forwards; - box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5); + box-shadow: inset 0 -4px 0 rgb(0, 123, 255, 0.5); } &.active { - box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5); + box-shadow: inset 0 -4px 0 rgb(0, 123, 255, 0.5); color: $color-blue; } } diff --git a/clients/design-system/src/components/Article/style.module.scss b/clients/design-system/src/components/Article/style.module.scss index ceffb1be..0e7ab548 100644 --- a/clients/design-system/src/components/Article/style.module.scss +++ b/clients/design-system/src/components/Article/style.module.scss @@ -4,7 +4,7 @@ // Get the value of $spacer variable (default Bootstrap spacing unit) $spacer: spacer(); -$nugde-out-width: 3.0625rem; +$nugde-out-width: 3.063rem; .article { overflow-x: hidden; diff --git a/clients/design-system/src/components/Card/style.module.scss b/clients/design-system/src/components/Card/style.module.scss index 0e959361..3fc0e921 100644 --- a/clients/design-system/src/components/Card/style.module.scss +++ b/clients/design-system/src/components/Card/style.module.scss @@ -50,7 +50,7 @@ $card-call-out-offset: 16px; line-height: 36px; text-align: center; text-transform: uppercase; - box-shadow: 0.7rem 0.7rem .75rem rgb(0 0 0 / 0.2); + box-shadow: 0.7rem 0.7rem .75rem rgb(0, 0, 0, 0.2); &::after { content: ''; @@ -131,7 +131,7 @@ $card-call-out-offset: 16px; } &:hover { - box-shadow: 0 0 1rem rgb(0 0 0 / 0.3); + box-shadow: 0 0 1rem rgb(0, 0, 0, 0.3); .card-ribbon-text { background: linear-gradient(90deg, #eee, #ddd, #fff); diff --git a/clients/design-system/src/components/Hero/style.module.scss b/clients/design-system/src/components/Hero/style.module.scss index 6ecf96bb..864c9673 100644 --- a/clients/design-system/src/components/Hero/style.module.scss +++ b/clients/design-system/src/components/Hero/style.module.scss @@ -11,7 +11,7 @@ background-size: cover; .hero-text-wrapper { - background-color: rgb(255 255 255 / 0.4); + background-color: rgb(255, 255, 255, 0.4); h1 { background: linear-gradient(to right, $color-gray, darken($color-gray, 10%)) !important; @@ -22,7 +22,7 @@ .lead { color: $color-off-black; - font-size: 1.2em; + font-size: 1.2rem; } p { diff --git a/clients/design-system/src/components/HeroBanner/style.module.scss b/clients/design-system/src/components/HeroBanner/style.module.scss index ca638f89..fa2c59dc 100644 --- a/clients/design-system/src/components/HeroBanner/style.module.scss +++ b/clients/design-system/src/components/HeroBanner/style.module.scss @@ -24,7 +24,7 @@ $hero-banner-height: 300px; z-index: -1; width: 100%; height: 100%; - background: linear-gradient(90deg, rgb(128 80 237 / 0.9) 0%, rgb(128 80 237 / 0.9) 28%, rgb(0 141 184 / 0.5) 100%); + background: linear-gradient(90deg, rgb(128, 80, 237, 0.9) 0%, rgb(128, 80, 237, 0.9) 28%, rgb(0, 141, 184, 0.5) 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%); } diff --git a/clients/design-system/src/components/Paper/style.module.scss b/clients/design-system/src/components/Paper/style.module.scss index eaa96313..14cd1a6c 100644 --- a/clients/design-system/src/components/Paper/style.module.scss +++ b/clients/design-system/src/components/Paper/style.module.scss @@ -7,10 +7,10 @@ background-color: $color-white; // padding: 4rem 4.5rem; - background-color: rgb(255 255 255); - color: rgb(29 29 31); + background-color: rgb(255, 255, 255); + color: rgb(29, 29, 31); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0; + box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0; @each $elevation in $elevations { &.paper-elevation-#{$elevation} { diff --git a/clients/design-system/src/index.scss b/clients/design-system/src/index.scss index 309a5df1..17653afa 100644 --- a/clients/design-system/src/index.scss +++ b/clients/design-system/src/index.scss @@ -13,7 +13,7 @@ // Toggle global options $enable-gradients: true; $enable-shadows: true; -$offcanvas-box-shadow: 0 1rem 3rem rgb(0 0 0 / .175); +$offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); // Include functions first @import "bootstrap/scss/functions"; From e0208311b339d086f9a66a8a8339cca4834f76cc Mon Sep 17 00:00:00 2001 From: hxtree Date: Wed, 3 Apr 2024 03:26:38 +0000 Subject: [PATCH 2/4] feat: configure prettier to lint scss Signed-off-by: hxtree --- .lintstagedrc.json | 3 ++- .prettierrc.js | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.lintstagedrc.json b/.lintstagedrc.json index e4a3f3fb..d097abe9 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,4 +1,5 @@ { "*.ts": ["prettier --write", "eslint --format visualstudio --fix"], - "*.{json,md}": "prettier --write" + "*.{json,md}": "prettier --write", + "*.scss": ["prettier --write"] } diff --git a/.prettierrc.js b/.prettierrc.js index c3d1d164..7cf4c957 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -12,5 +12,11 @@ module.exports = { files: '**/*.md', options: { parser: 'markdown' }, }, + { + files: ['**/*.scss'], + options: { + singleQuote: false, + }, + }, ], }; From ae0414a931123b2a941e8599617525e58ba0d059 Mon Sep 17 00:00:00 2001 From: hxtree Date: Wed, 3 Apr 2024 03:29:55 +0000 Subject: [PATCH 3/4] feat: prettier scss Signed-off-by: hxtree --- .prettierrc.js | 2 +- .../src/components/Alert/style.module.scss | 46 +++++----- .../src/components/AppBar/style.module.scss | 8 +- .../src/components/Article/style.module.scss | 12 +-- .../components/BlurbPair/style.module.scss | 8 +- .../components/Breadcrumb/style.module.scss | 2 +- .../src/components/Button/style.module.scss | 22 +++-- .../src/components/Card/style.module.scss | 18 ++-- .../src/components/Hero/style.module.scss | 10 ++- .../components/HeroBanner/style.module.scss | 89 ++++++++++--------- .../src/components/Link/style.module.scss | 2 +- .../components/PageFooter/style.module.scss | 3 +- .../src/components/Paper/style.module.scss | 4 +- .../SocialMediaBar/style.module.scss | 4 +- .../src/components/Tabs/style.module.scss | 1 - .../src/components/TextField/style.scss | 4 +- .../components/Typography/style.module.scss | 42 ++++----- clients/design-system/src/index.scss | 78 ++++++++-------- clients/design-system/src/styles/_fonts.scss | 6 +- .../src/styles/utils/_bg-color.scss | 4 +- .../src/styles/utils/_color-pallette.scss | 11 +-- .../src/scss/_variables.scss | 8 +- 22 files changed, 205 insertions(+), 179 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index 7cf4c957..ccba3677 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -15,7 +15,7 @@ module.exports = { { files: ['**/*.scss'], options: { - singleQuote: false, + singleQuote: true, }, }, ], diff --git a/clients/design-system/src/components/Alert/style.module.scss b/clients/design-system/src/components/Alert/style.module.scss index c8acc1fd..c0773ed4 100644 --- a/clients/design-system/src/components/Alert/style.module.scss +++ b/clients/design-system/src/components/Alert/style.module.scss @@ -1,37 +1,37 @@ .alert { - border: none; - border-radius: 3px; - box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0; + border: none; + border-radius: 3px; + box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0; - &.alert-success { - background-color: #f9fef9 !important; + &.alert-success { + background-color: #f9fef9 !important; - svg { + svg { color: #59ca97; - } + } } - &.alert-warning { - background-color: #fefbf9 !important; + &.alert-warning { + background-color: #fefbf9 !important; - svg { - color: #f1963b; - } + svg { + color: #f1963b; + } } - &.alert-info { - background-color: #fafdff !important; + &.alert-info { + background-color: #fafdff !important; - svg { - color: #1174ff; + svg { + color: #1174ff; + } } - } - &.alert-danger { - background-color: #fffafb !important; + &.alert-danger { + background-color: #fffafb !important; - svg { - color: #bf1722; + svg { + color: #bf1722; + } } - } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/AppBar/style.module.scss b/clients/design-system/src/components/AppBar/style.module.scss index 1491402b..6eecb0b1 100644 --- a/clients/design-system/src/components/AppBar/style.module.scss +++ b/clients/design-system/src/components/AppBar/style.module.scss @@ -10,7 +10,7 @@ } 100% { - box-shadow: inset 0 -3px 0 $color-blue;; + box-shadow: inset 0 -3px 0 $color-blue; } } @@ -18,7 +18,7 @@ background-color: $color-white; .navbar-menu { - box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0 + box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0; } .navbar-brand { @@ -32,7 +32,9 @@ .app-bar-light { padding: 0; background-color: rgb(255, 253, 251); - box-shadow: rgb(0, 0, 0, 0.12) 0 0 2px 0, rgb(0, 0, 0, 0.14) 0 1.008px 2px 0; + box-shadow: + rgb(0, 0, 0, 0.12) 0 0 2px 0, + rgb(0, 0, 0, 0.14) 0 1.008px 2px 0; ul { margin: 0; diff --git a/clients/design-system/src/components/Article/style.module.scss b/clients/design-system/src/components/Article/style.module.scss index 0e7ab548..717c7a10 100644 --- a/clients/design-system/src/components/Article/style.module.scss +++ b/clients/design-system/src/components/Article/style.module.scss @@ -1,6 +1,6 @@ @import '../../styles/utils/color-pallette'; -@import "bootstrap/scss/functions"; -@import "bootstrap/scss/bootstrap"; +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/bootstrap'; // Get the value of $spacer variable (default Bootstrap spacing unit) $spacer: spacer(); @@ -12,10 +12,10 @@ $nugde-out-width: 3.063rem; background-color: $color-cta-white; & .container { - position:relative; + position: relative; &::before { - content: ""; + content: ''; position: absolute; top: 0; left: -1px; @@ -28,7 +28,7 @@ $nugde-out-width: 3.063rem; position: relative; &::before { - content: ""; + content: ''; position: absolute; top: 0; left: -(map-get($spacers, 4)) - ($nugde-out-width); @@ -38,4 +38,4 @@ $nugde-out-width: 3.063rem; } } } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/BlurbPair/style.module.scss b/clients/design-system/src/components/BlurbPair/style.module.scss index da55b51b..0b2033c9 100644 --- a/clients/design-system/src/components/BlurbPair/style.module.scss +++ b/clients/design-system/src/components/BlurbPair/style.module.scss @@ -1,5 +1,5 @@ @import '../../styles/utils/color-pallette'; -@import "bootstrap/scss/bootstrap"; +@import 'bootstrap/scss/bootstrap'; .blurb { .blurb-pair-left, @@ -24,8 +24,10 @@ } @include media-breakpoint-down(md) { - .blurb-pair-left, .blurb-pair-right { - &.border-end, &.border-start { + .blurb-pair-left, + .blurb-pair-right { + &.border-end, + &.border-start { border: none !important; } } diff --git a/clients/design-system/src/components/Breadcrumb/style.module.scss b/clients/design-system/src/components/Breadcrumb/style.module.scss index 2ed695f9..b901dc9d 100644 --- a/clients/design-system/src/components/Breadcrumb/style.module.scss +++ b/clients/design-system/src/components/Breadcrumb/style.module.scss @@ -4,4 +4,4 @@ a { color: $color-off-black; } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/Button/style.module.scss b/clients/design-system/src/components/Button/style.module.scss index 054bbb53..7bfac534 100644 --- a/clients/design-system/src/components/Button/style.module.scss +++ b/clients/design-system/src/components/Button/style.module.scss @@ -38,7 +38,8 @@ background-color: $color-primary; color: $color-white; - &:focus, &.button-selected { + &:focus, + &.button-selected { outline-color: $color-primary; } @@ -56,7 +57,7 @@ } &:hover { - border-color: lighten($color-primary, 10%); + border-color: lighten($color-primary, 10%); background-color: lighten($color-primary, 10%); > svg { @@ -70,7 +71,8 @@ background-color: transparent; color: $color-primary; - &:focus, &.button-selected { + &:focus, + &.button-selected { outline-color: $color-primary; } @@ -83,7 +85,7 @@ } &:hover { - border-color: lighten($color-primary, 10%); + border-color: lighten($color-primary, 10%); color: $color-black; } } @@ -93,7 +95,8 @@ background-color: transparent; color: $color-primary; - &:focus, &.button-selected { + &:focus, + &.button-selected { outline-color: $color-primary; } @@ -106,7 +109,8 @@ } } - &:focus, &.button-selected { + &:focus, + &.button-selected { outline-width: 3px; outline-style: solid; outline-offset: 3px; @@ -122,7 +126,8 @@ font-size: 0.8rem; } - &.button-normal, &.button-medium { + &.button-normal, + &.button-medium { padding: 10px 24px; font-size: 1rem; } @@ -146,5 +151,4 @@ } } } - -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/Card/style.module.scss b/clients/design-system/src/components/Card/style.module.scss index 3fc0e921..d1878bb6 100644 --- a/clients/design-system/src/components/Card/style.module.scss +++ b/clients/design-system/src/components/Card/style.module.scss @@ -16,14 +16,13 @@ $card-call-out-offset: 16px; } } - .card { border-radius: 1rem !important; transition: box-shadow 0.5s ease; .card-thumbnail { position: relative; - margin:0; + margin: 0; .card-img-top-wrapper { overflow: hidden; @@ -37,7 +36,9 @@ $card-call-out-offset: 16px; background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; - transition: transform 1s ease, box-shadow 1s ease; + transition: + transform 1s ease, + box-shadow 1s ease; } } @@ -50,7 +51,7 @@ $card-call-out-offset: 16px; line-height: 36px; text-align: center; text-transform: uppercase; - box-shadow: 0.7rem 0.7rem .75rem rgb(0, 0, 0, 0.2); + box-shadow: 0.7rem 0.7rem 0.75rem rgb(0, 0, 0, 0.2); &::after { content: ''; @@ -69,7 +70,8 @@ $card-call-out-offset: 16px; background-color: $card-color-primary; &::after { - border-top: $card-call-out-offset solid darken($card-color-primary, 10%); + border-top: $card-call-out-offset solid + darken($card-color-primary, 10%); } } @@ -80,7 +82,8 @@ $card-call-out-offset: 16px; background-color: $card-color-secondary; &::after { - border-top: $card-call-out-offset solid darken($card-color-secondary, 10%); + border-top: $card-call-out-offset solid + darken($card-color-secondary, 10%); } } @@ -91,7 +94,8 @@ $card-call-out-offset: 16px; background-color: $card-color-tertiary; &::after { - border-top: $card-call-out-offset solid darken($card-color-tertiary, 10%); + border-top: $card-call-out-offset solid + darken($card-color-tertiary, 10%); } } } diff --git a/clients/design-system/src/components/Hero/style.module.scss b/clients/design-system/src/components/Hero/style.module.scss index 864c9673..18346207 100644 --- a/clients/design-system/src/components/Hero/style.module.scss +++ b/clients/design-system/src/components/Hero/style.module.scss @@ -14,7 +14,11 @@ background-color: rgb(255, 255, 255, 0.4); h1 { - background: linear-gradient(to right, $color-gray, darken($color-gray, 10%)) !important; + background: linear-gradient( + to right, + $color-gray, + darken($color-gray, 10%) + ) !important; background-clip: text !important; color: transparent !important ; font-weight: bold; @@ -32,10 +36,10 @@ .toolbar { min-height: 8rem; - margin:0; + margin: 0; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; background-color: $color-blue; color: $color-white; } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/HeroBanner/style.module.scss b/clients/design-system/src/components/HeroBanner/style.module.scss index fa2c59dc..424ac400 100644 --- a/clients/design-system/src/components/HeroBanner/style.module.scss +++ b/clients/design-system/src/components/HeroBanner/style.module.scss @@ -3,51 +3,56 @@ $hero-banner-height: 300px; .hero-banner { - position: relative; - width: 100%; - - .hero-facet { - position: absolute; - z-index: -2; - width: 100%; - height: 100%; - background-color: $color-gray; - background-position: center; - background-size: cover; - clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%); - } + position: relative; + width: 100%; - .hero-gradient-overlay { - position: absolute; - top: 0; - left: 0; - z-index: -1; - width: 100%; - height: 100%; - background: linear-gradient(90deg, rgb(128, 80, 237, 0.9) 0%, rgb(128, 80, 237, 0.9) 28%, rgb(0, 141, 184, 0.5) 100%); - clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%); + .hero-facet { + position: absolute; + z-index: -2; + width: 100%; + height: 100%; + background-color: $color-gray; + background-position: center; + background-size: cover; + clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%); + } + + .hero-gradient-overlay { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + rgb(128, 80, 237, 0.9) 0%, + rgb(128, 80, 237, 0.9) 28%, + rgb(0, 141, 184, 0.5) 100% + ); + clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%); + } + + .hero-text-wrapper { + background-color: $color-dark-blue; + + h1 { + font-weight: bold; } - .hero-text-wrapper { - background-color: $color-dark-blue; - - h1 { - font-weight: bold; - } - - .lead { - color: $color-gray; - } - - p { - color: $color-gray; - } + .lead { + color: $color-gray; } - .hero-image { - background-color: $color-dark-blue; - background-repeat: no-repeat; - background-position: center center; - background-size: cover; + p { + color: $color-gray; } -} \ No newline at end of file + } + + .hero-image { + background-color: $color-dark-blue; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + } +} diff --git a/clients/design-system/src/components/Link/style.module.scss b/clients/design-system/src/components/Link/style.module.scss index 55075723..233ac2b6 100644 --- a/clients/design-system/src/components/Link/style.module.scss +++ b/clients/design-system/src/components/Link/style.module.scss @@ -4,4 +4,4 @@ a { color: $color-berkeley-blue; } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/PageFooter/style.module.scss b/clients/design-system/src/components/PageFooter/style.module.scss index e8cceccd..7607e3f6 100644 --- a/clients/design-system/src/components/PageFooter/style.module.scss +++ b/clients/design-system/src/components/PageFooter/style.module.scss @@ -25,6 +25,5 @@ border: 3px solid $color-sky-blue; opacity: 0.3; } - } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/Paper/style.module.scss b/clients/design-system/src/components/Paper/style.module.scss index 14cd1a6c..dea44929 100644 --- a/clients/design-system/src/components/Paper/style.module.scss +++ b/clients/design-system/src/components/Paper/style.module.scss @@ -1,7 +1,7 @@ @import '../../styles/utils/color-pallette'; .paper { - $elevations: 1, 2, 3, 4, 5, 6,7,8,9,10; + $elevations: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10; border-radius: 4px; background-color: $color-white; @@ -17,4 +17,4 @@ box-shadow: rgba(0, 0, 0, calc($elevation * 0.1)) 0 4px 30px 0; } } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/SocialMediaBar/style.module.scss b/clients/design-system/src/components/SocialMediaBar/style.module.scss index c3570f03..bb5e1ab9 100644 --- a/clients/design-system/src/components/SocialMediaBar/style.module.scss +++ b/clients/design-system/src/components/SocialMediaBar/style.module.scss @@ -24,7 +24,7 @@ padding: 0; li { - background-color:red; + background-color: red; a { color: $color-white; @@ -41,4 +41,4 @@ } } } -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/Tabs/style.module.scss b/clients/design-system/src/components/Tabs/style.module.scss index 204e2b13..4db72653 100644 --- a/clients/design-system/src/components/Tabs/style.module.scss +++ b/clients/design-system/src/components/Tabs/style.module.scss @@ -1,4 +1,3 @@ - .tabs { .scrollable { --webkit-overflow-scrolling: touch; diff --git a/clients/design-system/src/components/TextField/style.scss b/clients/design-system/src/components/TextField/style.scss index 472c6d25..3af8a413 100644 --- a/clients/design-system/src/components/TextField/style.scss +++ b/clients/design-system/src/components/TextField/style.scss @@ -3,10 +3,10 @@ .form-label { color: lighten($color-off-black, 30%); font-weight: bold; - font-size: 0.875rem; + font-size: 0.875rem; text-transform: uppercase; } .form-control { letter-spacing: 0.1rem; -} \ No newline at end of file +} diff --git a/clients/design-system/src/components/Typography/style.module.scss b/clients/design-system/src/components/Typography/style.module.scss index f25c10c4..0153046d 100644 --- a/clients/design-system/src/components/Typography/style.module.scss +++ b/clients/design-system/src/components/Typography/style.module.scss @@ -8,7 +8,7 @@ .center { text-align: center; - }; + } h1 { padding: 12px 0; @@ -22,7 +22,7 @@ border-radius: 5px; background-color: $color-primary; color: $color-white; - }; + } &.border { position: relative; @@ -36,7 +36,7 @@ vertical-align: center; &::before { - content: ""; + content: ''; position: absolute; top: 0; bottom: 0; @@ -45,7 +45,7 @@ height: 100%; margin: auto; border-radius: 3px; - background: linear-gradient(180deg, #31aaff 0%, #2cd0ff 100%); + background: linear-gradient(180deg, #31aaff 0%, #2cd0ff 100%); } } } @@ -65,11 +65,11 @@ padding-left: 15px; border-bottom: none; font-weight: 600; - font-size: 2rem; + font-size: 2rem; vertical-align: center; &::before { - content: ""; + content: ''; position: absolute; top: 0; bottom: 0; @@ -78,9 +78,9 @@ height: 100%; margin: auto; border-radius: 3px; - background: linear-gradient(180deg, #31aaff 0%, #2cd0ff 100%); - }; - }; + background: linear-gradient(180deg, #31aaff 0%, #2cd0ff 100%); + } + } &.fill { padding: 20px 13px; @@ -89,44 +89,44 @@ background-color: $color-primary; color: $color-white; font-weight: bold; - }; - }; + } + } h3 { font-weight: 400; - font-size: 1.7rem; + font-size: 1.7rem; font-family: $font-family-serif; - }; + } h4 { font-weight: 400; - font-size: 1.6rem; + font-size: 1.6rem; font-family: $font-family-serif; - }; + } h5 { font-weight: 400; - font-size: 1.4rem; + font-size: 1.4rem; font-family: $font-family-serif; - }; + } h6 { font-weight: 400; - font-size: 1.2rem; + font-size: 1.2rem; font-family: $font-family-serif; } p.body1 { font-weight: 400; - font-size: 1rem; + font-size: 1rem; line-height: 1.8rem; font-family: $font-family-sans-serif; } p.intro { font-weight: 400; - font-size: 1.5rem; + font-size: 1.5rem; line-height: 2rem; font-family: $font-family-sans-serif; } -} \ No newline at end of file +} diff --git a/clients/design-system/src/index.scss b/clients/design-system/src/index.scss index 17653afa..7614d465 100644 --- a/clients/design-system/src/index.scss +++ b/clients/design-system/src/index.scss @@ -16,63 +16,63 @@ $enable-shadows: true; $offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); // Include functions first -@import "bootstrap/scss/functions"; +@import 'bootstrap/scss/functions'; // Customize some defaults $body-color: #333; $body-bg: #fff; -$border-radius: .4rem; +$border-radius: 0.4rem; $success: #7952b3; // Bootstrap required -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/variables-dark"; -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/mixins"; -@import "bootstrap/scss/utilities"; -@import "bootstrap/scss/root"; -@import "bootstrap/scss/reboot"; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/variables-dark'; +@import 'bootstrap/scss/maps'; +@import 'bootstrap/scss/mixins'; +@import 'bootstrap/scss/utilities'; +@import 'bootstrap/scss/root'; +@import 'bootstrap/scss/reboot'; // Bootstrap optional -@import "bootstrap/scss/type"; +@import 'bootstrap/scss/type'; // @import "bootstrap/scss/images"; -@import "bootstrap/scss/containers"; -@import "bootstrap/scss/grid"; +@import 'bootstrap/scss/containers'; +@import 'bootstrap/scss/grid'; // @import "bootstrap/scss/tables"; -@import "bootstrap/scss/forms"; -@import "bootstrap/scss/buttons"; -@import "bootstrap/scss/transitions"; -@import "bootstrap/scss/dropdown"; -@import "bootstrap/scss/button-group"; -@import "bootstrap/scss/nav"; -@import "bootstrap/scss/navbar"; // Requires nav -@import "bootstrap/scss/card"; -@import "bootstrap/scss/breadcrumb"; -@import "bootstrap/scss/accordion"; -@import "bootstrap/scss/pagination"; -@import "bootstrap/scss/badge"; -@import "bootstrap/scss/alert"; +@import 'bootstrap/scss/forms'; +@import 'bootstrap/scss/buttons'; +@import 'bootstrap/scss/transitions'; +@import 'bootstrap/scss/dropdown'; +@import 'bootstrap/scss/button-group'; +@import 'bootstrap/scss/nav'; +@import 'bootstrap/scss/navbar'; // Requires nav +@import 'bootstrap/scss/card'; +@import 'bootstrap/scss/breadcrumb'; +@import 'bootstrap/scss/accordion'; +@import 'bootstrap/scss/pagination'; +@import 'bootstrap/scss/badge'; +@import 'bootstrap/scss/alert'; // @import "bootstrap/scss/progress"; -@import "bootstrap/scss/list-group"; -@import "bootstrap/scss/close"; -@import "bootstrap/scss/toasts"; -@import "bootstrap/scss/modal"; // Requires transitions +@import 'bootstrap/scss/list-group'; +@import 'bootstrap/scss/close'; +@import 'bootstrap/scss/toasts'; +@import 'bootstrap/scss/modal'; // Requires transitions // @import "bootstrap/scss/tooltip"; -@import "bootstrap/scss/popover"; +@import 'bootstrap/scss/popover'; // @import "bootstrap/scss/carousel"; -@import "bootstrap/scss/spinners"; -@import "bootstrap/scss/offcanvas"; // Requires transitions -@import "bootstrap/scss/placeholders"; +@import 'bootstrap/scss/spinners'; +@import 'bootstrap/scss/offcanvas'; // Requires transitions +@import 'bootstrap/scss/placeholders'; // Helpers -@import "bootstrap/scss/helpers"; +@import 'bootstrap/scss/helpers'; // Utilities -@import "bootstrap/scss/utilities/api"; +@import 'bootstrap/scss/utilities/api'; // Custom styles @import './styles/utils/color-pallette'; @@ -93,7 +93,13 @@ $success: #7952b3; @import './components/Breadcrumb/style.module'; body { - background-image: linear-gradient(to bottom, #fff 0%, #fff 300px, #fff 301px, $color-off-white 400px); + background-image: linear-gradient( + to bottom, + #fff 0%, + #fff 300px, + #fff 301px, + $color-off-white 400px + ); background-repeat: no-repeat; background-attachment: fixed; color: $color-off-black; diff --git a/clients/design-system/src/styles/_fonts.scss b/clients/design-system/src/styles/_fonts.scss index 993d69f3..e0434d5e 100644 --- a/clients/design-system/src/styles/_fonts.scss +++ b/clients/design-system/src/styles/_fonts.scss @@ -1,5 +1,5 @@ -$font-family-sans-serif: "Roboto", sans-serif; -$font-family-serif: "Playfair Display", serif; +$font-family-sans-serif: 'Roboto', sans-serif; +$font-family-serif: 'Playfair Display', serif; .font-serif { font-family: $font-family-serif; @@ -7,4 +7,4 @@ $font-family-serif: "Playfair Display", serif; .font-sans-serif { font-family: $font-family-sans-serif; -} \ No newline at end of file +} diff --git a/clients/design-system/src/styles/utils/_bg-color.scss b/clients/design-system/src/styles/utils/_bg-color.scss index d2d1c60f..0e75c82f 100644 --- a/clients/design-system/src/styles/utils/_bg-color.scss +++ b/clients/design-system/src/styles/utils/_bg-color.scss @@ -25,5 +25,5 @@ } .text-white { - color: $color-white !important -} \ No newline at end of file + color: $color-white !important; +} diff --git a/clients/design-system/src/styles/utils/_color-pallette.scss b/clients/design-system/src/styles/utils/_color-pallette.scss index 8482aa83..e098acd7 100644 --- a/clients/design-system/src/styles/utils/_color-pallette.scss +++ b/clients/design-system/src/styles/utils/_color-pallette.scss @@ -2,7 +2,7 @@ $color-gold: #ffd700; $color-sgbus-green: #71cd2f; $color-murrey: #b3105c; -$color-white: #FFF; +$color-white: #fff; $color-off-white: #f5f5fa; // #f4fafd; #f1f4f9; $color-cta-white: #e4f2ff; $color-light-gray: #dddde5; @@ -10,7 +10,7 @@ $color-gray: #9697a6; $color-off-black: #1e1e1f; $color-black: #000; $color-sky-blue: #87ceeb; -$color-blue: #0090BA; +$color-blue: #0090ba; $color-berkeley-blue: #094581; $color-dark-blue: #08062a; $color-orange: #fdb913; @@ -23,17 +23,14 @@ $color-secondary: $color-murrey; $color-tertiary: $color-gold; $color-inherit: $color-gray; - :root { - --color-berkeley-blue: $color-berkeley-blue: - --color-gold: $color-gold; + --color-berkeley-blue: $color-berkeley-blue: --color-gold: $color-gold; --color-sky-blue: $color-sky-blue; --color-sgbus-green: $color-sgbus-green; --color-murrey: $color-murrey; --color-white: $color-white; --color-black: $color-black; - --color-primary: $color-primary: - --color-secondary: $color-secondary; + --color-primary: $color-primary: --color-secondary: $color-secondary; --color-tertiary: $color-tertiary; --color-gray: $color-gray; } diff --git a/libraries/promare-gradients/src/scss/_variables.scss b/libraries/promare-gradients/src/scss/_variables.scss index 87acd2ca..9b78b1d8 100644 --- a/libraries/promare-gradients/src/scss/_variables.scss +++ b/libraries/promare-gradients/src/scss/_variables.scss @@ -49,9 +49,13 @@ $base-colors: ( $phi: (square-root(5) + 1)/2; // shades -$shade: '0' percentage(1 - 1/ ($phi * 3)), '25' percentage(1 / $phi); +$shade: + '0' percentage(1 - 1/ ($phi * 3)), + '25' percentage(1 / $phi); // tints -$tints: '75' percentage(1 / $phi), '100' percentage(1 - 1/ ($phi * 3)); +$tints: + '75' percentage(1 / $phi), + '100' percentage(1 - 1/ ($phi * 3)); // degrees make use of compass ratios using golden ratio / phi $degrees: ( From 028837bd099d8265fadb47640a181a2114c96178 Mon Sep 17 00:00:00 2001 From: hxtree Date: Wed, 3 Apr 2024 03:39:12 +0000 Subject: [PATCH 4/4] fix: missing commas Signed-off-by: hxtree --- clients/design-system/src/styles/utils/_color-pallette.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/clients/design-system/src/styles/utils/_color-pallette.scss b/clients/design-system/src/styles/utils/_color-pallette.scss index e098acd7..8562c83e 100644 --- a/clients/design-system/src/styles/utils/_color-pallette.scss +++ b/clients/design-system/src/styles/utils/_color-pallette.scss @@ -24,13 +24,15 @@ $color-tertiary: $color-gold; $color-inherit: $color-gray; :root { - --color-berkeley-blue: $color-berkeley-blue: --color-gold: $color-gold; + --color-berkeley-blue: $color-berkeley-blue; + --color-gold: $color-gold; --color-sky-blue: $color-sky-blue; --color-sgbus-green: $color-sgbus-green; --color-murrey: $color-murrey; --color-white: $color-white; --color-black: $color-black; - --color-primary: $color-primary: --color-secondary: $color-secondary; + --color-primary: $color-primary; + --color-secondary: $color-secondary; --color-tertiary: $color-tertiary; --color-gray: $color-gray; }