From 01351af46fa2d6d0cbbaf3814f7d353a341e8592 Mon Sep 17 00:00:00 2001 From: Benjamin Rasmussen Date: Tue, 5 Dec 2023 23:27:27 +0100 Subject: [PATCH] Re-factor and streamline the SCSS basics. This is a major overhaul and refactoring of all the basics. It moves shared items out of the individual stories, and into mixins, variables and other base files. One of the major things is that it streamlines typography: It introduces a variables.typography.scss file, that defines all the typographies, and a @include typography($VARIABLE) to use them. This way, we can keep track of typographies, and have a single place to look when we make new modules. This way, we also have an easy way of quality-secure against figma. All of this is the first step. There is still a lot of stuff that needs to be fixed. To begin with, I've made sure that all existing classes still work. E.g. '.text-h1' will still compile to the same, but in SCSS we cant use %text-h1 anymore. A future step is to look through all the stuff I've marked as 'legacy', and tweak/remove/edit the classes throughout dpl-cms, react and other places. --- .github/workflows/lint.yml | 54 +-- base.scss | 14 +- docs/scss.md | 48 ++ package.json | 12 +- .../advanced-search/advanced-search.scss | 40 +- src/stories/Blocks/article/article.scss | 2 +- .../Blocks/autosuggest/autosuggest.scss | 4 +- src/stories/Blocks/event-page/event-page.scss | 2 +- src/stories/Blocks/footer/footer.scss | 36 +- src/stories/Blocks/header/header.scss | 72 +-- .../material-banner/material-banner.scss | 22 +- .../material-manifestation-item.scss | 26 +- .../material-page/material-page-skeleton.scss | 21 +- .../Blocks/material-page/material-page.scss | 2 +- .../Blocks/status-loans/status-loans.scss | 2 +- .../status-userprofile.scss | 2 +- src/stories/Introduction.stories.mdx | 4 +- src/stories/Library/Arrows/arrows.scss | 43 +- .../Library/Buttons/button-ui/buttons-ui.scss | 4 +- .../Library/Buttons/button/buttons.scss | 40 +- .../Buttons/icon-button/icon-button.scss | 4 +- .../Buttons/row-button/row-button.scss | 2 +- .../Buttons/toggle-button/toggle-button.scss | 8 +- .../Library/Forms/checkbox/checkbox.scss | 22 +- src/stories/Library/Forms/input/input.scss | 18 +- .../Icons/icon-favourite/icon-favourite.scss | 24 +- .../Library/Lists/fee-list/fee-list.scss | 4 +- .../Lists/list-dashboard/list-dashboard.scss | 20 +- .../list-description/list-description.scss | 16 +- .../Lists/list-details/list-details.scss | 26 +- .../Library/Lists/list-empty/list-empty.scss | 11 +- .../list-find-on-shelf.scss | 14 +- .../Lists/list-materials/list-materials.scss | 28 +- .../list-reservation/list-reservation.scss | 55 +-- .../Library/Modals/modal-cta/modal-cta.scss | 2 +- .../Modals/modal-details/modal-details.scss | 18 +- .../modal-facet-browser/facet-browser.scss | 4 +- .../modal-find-on-shelf.scss | 8 +- .../Modals/modal-header/modal-header.scss | 12 +- .../Library/Modals/modal-loan/modal-loan.scss | 8 +- .../Modals/modal-pause/modal-pause.scss | 27 +- .../Modals/modal-profile/modal-profile.scss | 22 +- .../Modals/modal-reservation/reservation.scss | 25 +- .../Modals/modal-search/modal-search.scss | 4 +- .../Library/Modals/modal-text/modal-text.scss | 18 +- src/stories/Library/Modals/modal.scss | 29 +- src/stories/Library/accordion/accordion.scss | 20 +- .../article-header/article-header.scss | 15 +- .../autosuggest-material.scss | 32 +- .../autosuggest-text/autosuggest-text.scss | 10 +- .../availability-label.scss | 8 +- .../Library/boxed-text/boxed-text.scss | 2 +- .../Library/breadcrumb/breadcrumb.scss | 8 +- .../breakpoints/Breakpoints.stories.tsx | 19 - .../Library/breakpoints/Breakpoints.tsx | 50 -- .../Library/breakpoints/breakpoints.scss | 44 -- .../Library/button-box/button-box.scss | 12 +- src/stories/Library/campaign/campaign.scss | 15 +- .../card-list-item-skeleton.scss | 10 +- .../card-list-item/card-list-item.scss | 20 +- .../card-list-page-skeleton.scss | 4 +- .../card-list-page/card-list-page.scss | 8 +- .../Library/card-list-page/facet-line.scss | 19 +- .../Library/card-list-page/result-pager.scss | 10 +- .../card-list-page/search-result-zero.scss | 2 +- src/stories/Library/colors/color-classes.scss | 197 -------- .../Library/colors/color-variables.scss | 50 -- src/stories/Library/counter/counter.scss | 11 +- src/stories/Library/cover/cover.scss | 12 +- .../dashboard-page/dashboard-page.scss | 4 +- .../Library/disclosure/disclosure.scss | 20 +- src/stories/Library/dropdown/dropdown.scss | 19 +- .../event-description/event-description.scss | 17 +- .../Library/event-header/event-header.scss | 31 +- .../image-credited/image-credited.scss | 2 +- .../input-with-dropdown.scss | 14 +- .../Library/instant-loan/instant-loan.scss | 6 +- .../Library/layout/Spacing.stories.tsx | 18 - src/stories/Library/layout/Spacing.tsx | 97 ---- src/stories/Library/layout/spacing.scss | 121 ----- .../Library/link-filters/link-filters.scss | 13 +- src/stories/Library/links/links.scss | 40 +- .../Library/list-buttons/list-buttons.scss | 10 +- .../loan-list-page/loan-list-page.scss | 4 +- src/stories/Library/logo/logo.scss | 11 +- .../Library/material-card/material-card.scss | 16 +- .../material-description.scss | 6 +- .../material-header/material-header.scss | 18 +- .../material-periodical-select.scss | 4 +- .../Library/multiselect/multiselect.scss | 20 +- src/stories/Library/number/number.scss | 12 +- .../Library/patron-info/patron-info.scss | 48 +- .../Library/patron-page/patron-page.scss | 4 +- .../pause-reservation/pause-reservation.scss | 16 +- .../pincode-container/pincode-container.scss | 6 +- .../Library/progress-bar/progress-bar.scss | 4 +- src/stories/Library/promo-bar/promo-bar.scss | 4 +- .../Library/recommenders/recommenders.scss | 32 +- .../reservation-list-page.scss | 4 +- src/stories/Library/review/review.scss | 9 +- src/stories/Library/shadows/shadows.scss | 6 +- .../Library/status-label/status-label.scss | 38 +- src/stories/Library/tag/tag.scss | 14 +- .../Library/typography/typography.scss | 449 ------------------ .../warning-status/warning-status.scss | 16 +- src/styles/scss/container.scss | 10 - src/styles/scss/internal.scss | 11 +- src/styles/scss/legacy.scss | 5 + src/styles/scss/legacy/animations.legacy.scss | 12 + src/styles/scss/legacy/colors.legacy.scss | 163 +++++++ .../scss/legacy/pagefold.legacy.scss} | 13 +- src/styles/scss/legacy/spacings.legacy.scss | 80 ++++ src/styles/scss/legacy/typography.legacy.scss | 93 ++++ src/styles/scss/reset.scss | 10 - src/styles/scss/shared.scss | 33 +- src/styles/scss/tools.scss | 11 + src/styles/scss/tools/mixins.media-query.scss | 72 +++ src/styles/scss/tools/mixins.misc.scss | 52 ++ src/styles/scss/tools/mixins.tools.scss | 55 +++ src/styles/scss/tools/placeholder.scss | 50 ++ .../scss/tools/variables.breakpoints.scss | 8 + src/styles/scss/tools/variables.colors.scss | 50 ++ src/styles/scss/tools/variables.fonts.scss | 75 +++ src/styles/scss/tools/variables.layout.scss | 3 + src/styles/scss/tools/variables.spacings.scss | 25 + .../scss/tools/variables.typography.scss | 279 +++++++++++ .../scss/tools/variables.z-indexes.scss} | 0 127 files changed, 1786 insertions(+), 1934 deletions(-) create mode 100644 docs/scss.md delete mode 100644 src/stories/Library/breakpoints/Breakpoints.stories.tsx delete mode 100644 src/stories/Library/breakpoints/Breakpoints.tsx delete mode 100644 src/stories/Library/breakpoints/breakpoints.scss delete mode 100644 src/stories/Library/colors/color-classes.scss delete mode 100644 src/stories/Library/colors/color-variables.scss delete mode 100644 src/stories/Library/layout/Spacing.stories.tsx delete mode 100644 src/stories/Library/layout/Spacing.tsx delete mode 100644 src/stories/Library/layout/spacing.scss delete mode 100644 src/stories/Library/typography/typography.scss delete mode 100644 src/styles/scss/container.scss create mode 100644 src/styles/scss/legacy.scss create mode 100644 src/styles/scss/legacy/animations.legacy.scss create mode 100644 src/styles/scss/legacy/colors.legacy.scss rename src/{stories/Library/pagefold/pagefold.scss => styles/scss/legacy/pagefold.legacy.scss} (77%) create mode 100644 src/styles/scss/legacy/spacings.legacy.scss create mode 100644 src/styles/scss/legacy/typography.legacy.scss create mode 100644 src/styles/scss/tools.scss create mode 100644 src/styles/scss/tools/mixins.media-query.scss create mode 100644 src/styles/scss/tools/mixins.misc.scss create mode 100644 src/styles/scss/tools/mixins.tools.scss create mode 100644 src/styles/scss/tools/placeholder.scss create mode 100644 src/styles/scss/tools/variables.breakpoints.scss create mode 100644 src/styles/scss/tools/variables.colors.scss create mode 100644 src/styles/scss/tools/variables.fonts.scss create mode 100644 src/styles/scss/tools/variables.layout.scss create mode 100644 src/styles/scss/tools/variables.spacings.scss create mode 100644 src/styles/scss/tools/variables.typography.scss rename src/{stories/Library/layout/z-index.scss => styles/scss/tools/variables.z-indexes.scss} (100%) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 500c67ab5..972603c12 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -7,7 +7,8 @@ on: - main jobs: - css_stylelint: + css-lint: + name: CSS Linter runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -16,10 +17,11 @@ jobs: node-version-file: '.nvmrc' - run: yarn install --frozen-lockfile - - name: Run Stylelint - run: yarn css:stylelint -- -f github + - name: Run css:lint + run: yarn css:lint - js_eslint: + js-lint: + name: JS Linter runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -28,49 +30,19 @@ jobs: node-version-file: '.nvmrc' - run: yarn install --frozen-lockfile - - name: Run eslint - run: yarn js:eslint + - name: Run js:lint + run: yarn js:lint - css_prettier: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version-file: '.nvmrc' - - - run: yarn install --frozen-lockfile - - - name: Run Prettier - run: yarn css:prettier -- --check - - js_prettier: + markdown-linkt: + name: Markdown Linter + if: '!github.event.deleted' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version-file: '.nvmrc' - - run: yarn install --frozen-lockfile - - name: Run Prettier - run: yarn js:prettier -- --check - - markdownlint: - name: Lint markdown - if: '!github.event.deleted' - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version-file: '.nvmrc' - cache: 'yarn' - - name: Install Dependencies - run: yarn install - - name: Install problem matcher - uses: xt0rted/markdownlint-problem-matcher@v2 - - name: Lint markdown - run: yarn lint:markdown + - name: Run markdown:lint + run: yarn markdown:lint diff --git a/base.scss b/base.scss index 050459a62..94cf5422c 100644 --- a/base.scss +++ b/base.scss @@ -1,24 +1,18 @@ @import "./src/styles/scss/reset"; -@import "./src/stories/Library/colors/color-variables"; @import "./src/styles/scss/skeleton"; -@import "./src/styles/scss/container"; +@import "./src/styles/scss/tools"; -// The imports below are not advised to be moved around, because -// they cross-reference various defined variables between each other. +// Legacy - utility classes and other stuff that needs to be cleaned later. +@import "./src/styles/scss/legacy"; // Library -@import "./src/stories/Library/breakpoints/breakpoints"; -@import "./src/stories/Library/typography/typography"; @import "./src/stories/Library/links/links"; @import "./src/stories/Library/link-filters/link-filters"; @import "./src/stories/Library/Arrows/arrows"; @import "./src/stories/Library/Buttons/button/buttons"; @import "./src/stories/Library/Buttons/button-ui/buttons-ui"; -@import "./src/stories/Library/layout/spacing"; -@import "./src/stories/Library/layout/z-index"; @import "./src/stories/Library/tag/tag"; @import "./src/stories/Library/logo/logo"; -@import "./src/stories/Library/pagefold/pagefold"; @import "./src/stories/Library/dropdown/dropdown"; @import "./src/stories/Library/breadcrumb/breadcrumb"; @import "./src/stories/Library/status-label/status-label"; @@ -123,5 +117,3 @@ @import "./src/styles/scss/shared"; @import "./src/styles/scss/internal"; -// Should be last to make it easier to overwrite. -@import "./src/stories/Library/colors/color-classes"; diff --git a/docs/scss.md b/docs/scss.md new file mode 100644 index 000000000..7c685bf8f --- /dev/null +++ b/docs/scss.md @@ -0,0 +1,48 @@ +# SCSS strategy + +In December 2023, we have aimed to streamline the way we write SCSS. +Some of these rules have not been applied on previous code, but moving forward, +this is what we aim to do. + +## BEM naming convention + +### Examples of do's and dont's + +Assuming we have a Counter block: + +- Styling must be placed in a correspondingly named file `counter.scss` +- `.counter__title` ✅ +- `&__title` ❌ (`&__` should be avoided, to avoid massive indention.) +- `.counter-title` ❌ (Must start with `.FILE-NAME__`) +- `.counter__title__text` ❌ (Only one level) + +#### Variants and modifiers + +Sometimes you'll want to add variants to CSS-only classes. This can be done +using **modifier classes** - e.g. `.counter--large`, `.counter__title--large`. +**These classes must not be set alone.** E.g. `.counter__title--large` must not +exist on an element without also having `.counter__title`. + +## Mixins, placeholder and variables + +Shared tooling is saved in [src/styles/scss/tools](../src/styles/scss/tools), +NOT in individual stories. + +### Typography + +Typography is defined in +[src/styles/scss/tools/variables.typography.scss](../src/styles/scss/tools/variables.typography.scss). +These variables, all starting with `$typo__`, can be used, using a mixin, +`@include typography($typo__h2);` in stories. +Generally speaking, font styling should be avoided directly in stories, rather +adding new variants in the `variables.typography.scss` file. +This way, we can better keep track of what is available, and avoid duplicate +styling in the future. + +## Legacy classes + +In the future, we want to apply these rules to old code too. Until then, +the old classes are supported using the files +in [src/styles/scss/legacy](../src/styles/scss/legacy). + +These classes should **not be used in new components** diff --git a/package.json b/package.json index ee6f88020..96551a081 100644 --- a/package.json +++ b/package.json @@ -16,14 +16,16 @@ "css:lint": "concurrently 'yarn:css:stylelint' 'yarn:css:prettier -- --check' --raw", "css:lint:watch": "chokidar 'src/**/*.scss' -c 'yarn css:lint'", "css:format": "concurrently 'yarn:css:stylelint -- --fix' 'yarn:css:prettier -- --write' --max-processes 1 --raw", - "css:build": "sass base.scss:src/styles/css/base.css", + "css:build": "sass base.scss:src/styles/css/base.css --style compressed", "css:watch": "yarn css:build -- --watch", + "markdown:lint": "markdownlint-cli2", + "markdown:format": "markdownlint-cli2-fix", "watch": "concurrently 'yarn:js:lint:watch' 'yarn:css:lint:watch'", - "dev": "concurrently --raw \"yarn storybook\" \"yarn css:watch\" \"yarn watch\"", + "dev": "concurrently --raw 'yarn storybook' 'yarn css:watch' 'yarn watch'", "chromatic": "npx chromatic --exit-zero-on-changes", - "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint'", - "lint:markdown": "markdownlint-cli2", - "lint:markdown:fix": "markdownlint-cli2-fix" + "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint' 'yarn:markdown:lint'", + "format": "concurrently 'yarn:js:format' 'yarn:css:format' 'yarn:markdown:format'" + }, "browserslist": { "production": [ diff --git a/src/stories/Blocks/advanced-search/advanced-search.scss b/src/stories/Blocks/advanced-search/advanced-search.scss index e5c644b26..bd00de0be 100644 --- a/src/stories/Blocks/advanced-search/advanced-search.scss +++ b/src/stories/Blocks/advanced-search/advanced-search.scss @@ -2,9 +2,9 @@ width: 100%; padding: 40px $s-md; - background-color: $c-global-primary; + background-color: $color__global-primary; - @include breakpoint-m { + @include media-query__medium { width: 100%; padding: $s-4xl 157px 64px 157px; } @@ -12,19 +12,19 @@ &__title { margin-bottom: $s-xl; - @include breakpoint-m { + @include media-query__medium { margin-bottom: 48px; } } &__clauses { - @extend %text-button-placeholder; + @include typography($typo__button); display: flex; flex-direction: row; align-items: center; margin: 0 0 $s-md $s-xl; - @include breakpoint-m { + @include media-query__medium { margin: 0 0 $s-lg $s-xl; } } @@ -32,10 +32,10 @@ &__clause { display: inline-block; margin-right: $s-xl; - color: $c-text-primary-black; + color: $color__text-primary-black; &.advanced-search__clause--grey { - color: $c-global-tertiary-2; + color: $color__global-tertiary-2; } } @@ -51,7 +51,7 @@ &__filter { width: 100%; - @include breakpoint-s { + @include media-query__small { width: 260px; margin-right: $s-lg; } @@ -63,7 +63,7 @@ flex-direction: column; justify-content: flex-end; - @include breakpoint-s { + @include media-query__small { flex-direction: row; } } @@ -72,7 +72,7 @@ align-self: center; margin-bottom: $s-lg; - @include breakpoint-s { + @include media-query__small { align-self: center; margin-bottom: 0; } @@ -81,7 +81,7 @@ &__search-button { width: 100%; - @include breakpoint-s { + @include media-query__small { margin-left: $s-lg; width: 266px; } @@ -89,19 +89,19 @@ &__divider { height: 1px; - background-color: $c-global-tertiary-1; + background-color: $color__global-tertiary-1; margin: $s-2xl 0; width: 100%; } &__cql-input { - @extend %text-body-medium-regular-placeholder; - border: solid 1px $c-global-tertiary-1; + @include typography($typo__body-placeholder); + border: solid 1px $color__global-tertiary-1; width: 100%; margin-bottom: 46px; padding: $s-md; resize: none; - background-color: $c-global-primary; + background-color: $color__global-primary; } } @@ -113,7 +113,7 @@ &__input { width: 100%; - @include breakpoint-m { + @include media-query__medium { padding-right: $s-4xl; margin-bottom: 48px; } @@ -121,18 +121,18 @@ &__preview { padding: $s-xl 48px $s-xl 64px; - background-color: $c-global-secondary; + background-color: $color__global-secondary; flex-direction: column; align-self: flex-start; display: none; - @include breakpoint-m { + @include media-query__medium { display: flex; width: 300px; min-width: 300px; padding: $s-2xl $s-xl; } - @include breakpoint-l { + @include media-query__large { padding: $s-xl 48px $s-xl 64px; width: 420px; min-width: 420px; @@ -144,7 +144,7 @@ width: 100%; margin-bottom: 48px; - @include breakpoint-m { + @include media-query__medium { display: none; } } diff --git a/src/stories/Blocks/article/article.scss b/src/stories/Blocks/article/article.scss index 9485ace79..e7a43242b 100644 --- a/src/stories/Blocks/article/article.scss +++ b/src/stories/Blocks/article/article.scss @@ -1,3 +1,3 @@ .article { - background-color: $c-global-primary; + background-color: $color__global-primary; } diff --git a/src/stories/Blocks/autosuggest/autosuggest.scss b/src/stories/Blocks/autosuggest/autosuggest.scss index 504ac3edb..9473bebe9 100644 --- a/src/stories/Blocks/autosuggest/autosuggest.scss +++ b/src/stories/Blocks/autosuggest/autosuggest.scss @@ -1,6 +1,6 @@ .autosuggest { - background-color: $c-global-primary; - outline: 1px solid $c-global-tertiary-1; + background-color: $color__global-primary; + outline: 1px solid $color__global-tertiary-1; position: absolute; left: 0; right: 0; diff --git a/src/stories/Blocks/event-page/event-page.scss b/src/stories/Blocks/event-page/event-page.scss index 325e53a3d..583f93dc8 100644 --- a/src/stories/Blocks/event-page/event-page.scss +++ b/src/stories/Blocks/event-page/event-page.scss @@ -1,3 +1,3 @@ .event-page { - background-color: $c-global-primary; + background-color: $color__global-primary; } diff --git a/src/stories/Blocks/footer/footer.scss b/src/stories/Blocks/footer/footer.scss index 841b421f5..c9ee96671 100644 --- a/src/stories/Blocks/footer/footer.scss +++ b/src/stories/Blocks/footer/footer.scss @@ -7,7 +7,7 @@ display: none; } - @include breakpoint-s { + @include media-query__small { .footer__mobile { display: none; } @@ -37,10 +37,10 @@ } .internal-pagefold-parent { - background-color: $c-global-secondary; + background-color: $color__global-secondary; - @include breakpoint-m { - padding: 56px 100px 24px; + @include media-query__medium { + padding: 56px $s-5xl $s-lg; } } } @@ -56,15 +56,15 @@ width: 82px; .dropdown__select { - background-color: $c-global-secondary; - height: 32px; + background-color: $color__global-secondary; + height: $s-xl; padding: 0 12px; min-width: 82px; } .dropdown__arrows { - height: 32px; - width: 32px; + height: $s-xl; + width: $s-xl; } } @@ -78,16 +78,16 @@ display: flex; li { - padding-bottom: 16px; + padding-bottom: $s-md; } - @include breakpoint-s { + @include media-query__small { li { padding-bottom: 0; } a { - padding-right: 24px; + padding-right: $s-lg; } a:last-child { @@ -100,33 +100,33 @@ display: flex; a { - padding-right: 24px; + padding-right: $s-lg; } } // Separator .footer__separator { - border-bottom: 1px solid $c-global-tertiary-1; - margin: #{$s-24}px 0; + border-bottom: 1px solid $color__global-tertiary-1; + margin: $s-lg 0; } // Separator mobile tweaks .footer__mobile .footer__separator { - margin: #{$s-24}px -50px; + margin: $s-lg (-50px); } // Link tweaks .footer__column-link { - margin-top: #{$s-16}px; + margin-top: $s-md; } .footer__site-info-link { text-decoration: none; - @extend %text-links-placeholder; + @include typography($typo__links); } .footer__column-phone { - color: $c-text-primary-black; + color: $color__text-primary-black; text-decoration: none; } diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss index 295c6852c..0e19c8a07 100644 --- a/src/stories/Blocks/header/header.scss +++ b/src/stories/Blocks/header/header.scss @@ -1,28 +1,28 @@ .header { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 100%; display: grid; grid-template-columns: 1fr; - background-color: $c-global-primary; + background-color: $color__global-primary; position: sticky; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; z-index: $z-20; - @include breakpoint-s { + @include media-query__small { grid-template-columns: 1fr 105px; } - @include breakpoint-m { + @include media-query__medium { grid-template-columns: 250px 1fr 105px; } } .header__logo-desktop { display: none; - border-right: 1px solid $c-global-tertiary-1; - @include breakpoint-m { + border-right: 1px solid $color__global-tertiary-1; + @include media-query__medium { display: block; } } @@ -41,13 +41,13 @@ } .header__menu-first { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; display: grid; grid-template-columns: 1fr auto auto; } .header__menu-navigation-logo { - margin-left: 16px; + margin-left: $s-md; display: flex; align-items: center; } @@ -55,7 +55,7 @@ .header__menu-navigation { display: none; - @include breakpoint-m { + @include media-query__medium { display: flex; padding: 0 12px; height: 100%; @@ -65,13 +65,13 @@ .header__menu-navigation-mobile { display: flex; - @include breakpoint-s { + @include media-query__small { .pagefold-triangle-small { display: none; } } - @include breakpoint-m { + @include media-query__medium { display: none; } } @@ -80,7 +80,7 @@ display: flex; justify-content: center; align-items: center; - border-right: 1px solid $c-global-tertiary-1; + border-right: 1px solid $color__global-tertiary-1; } .header__menu-navigation-item:hover { @@ -93,13 +93,13 @@ height: 100%; display: flex; align-items: center; - color: $c-text-primary-black; + color: $color__text-primary-black; } .header__menu-profile, .header__menu-bookmarked { position: relative; - border-left: 1px solid $c-global-tertiary-1; + border-left: 1px solid $color__global-tertiary-1; a { width: 100%; @@ -117,20 +117,20 @@ text-overflow: ellipsis; overflow: hidden; width: 100%; - padding: 0 4px; + padding: 0 $s-xs; text-align: center; } - @include breakpoint-s { + @include media-query__small { span { - bottom: 4px; + bottom: $s-xs; } } .header__notification { position: absolute; - width: 8px; - height: 8px; + width: $s-sm; + height: $s-sm; border-radius: 100%; transform: translateX(10px) translateY(-12px); } @@ -148,20 +148,20 @@ } .header__menu-search-input { + @include typography($typo__body-placeholder); + width: 100%; height: 100%; - padding: 0 24px; + padding: 0 $s-lg; border: 0 solid transparent; background-color: transparent; - font-size: 16px; - @extend %text-body-medium-regular-placeholder; ::placeholder { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } &:focus { - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; border: 0 solid transparent; outline: none; } @@ -180,16 +180,16 @@ } .header__menu-dropdown { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); position: absolute; right: 0; top: 58px; - background-color: $c-global-primary; + background-color: $color__global-primary; padding: $s-xs 0; - outline: $c-global-tertiary-1 solid 1px; + outline: $color__global-tertiary-1 solid 1px; z-index: $z-10; - @include breakpoint-s { + @include media-query__small { padding: $s-sm 0; right: 0; top: 72px; @@ -202,12 +202,12 @@ cursor: pointer; &:hover { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } .header__menu-dropdown-item--highlighted { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } .header__menu-dropdown-icon { @@ -217,10 +217,10 @@ } .header__clock { - border-left: 1px solid $c-global-tertiary-1; + border-left: 1px solid $color__global-tertiary-1; display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } @@ -238,7 +238,7 @@ justify-content: center; align-items: center; - @include breakpoint-s { + @include media-query__small { height: 70px; width: 70px; } @@ -262,13 +262,13 @@ height: 100vh; grid-template-columns: 384px 1fr; - @include breakpoint-s { + @include media-query__small { grid-template-columns: 384px 1fr; } } .header__overlay-main { - background-color: $c-global-primary; + background-color: $color__global-primary; } .header__overlay-backdrop { @@ -282,7 +282,7 @@ } .header__overlay-menu-item { - margin-bottom: 8px; + margin-bottom: $s-sm; } // The kebab casing conflicts with our naming convention. diff --git a/src/stories/Blocks/material-banner/material-banner.scss b/src/stories/Blocks/material-banner/material-banner.scss index ec045f72c..5416a714c 100644 --- a/src/stories/Blocks/material-banner/material-banner.scss +++ b/src/stories/Blocks/material-banner/material-banner.scss @@ -1,13 +1,13 @@ .material-banner__header { position: relative; - padding: 24px; + padding: $s-lg; - @include breakpoint-s { - padding: 24px 45px; + @include media-query__small { + padding: $s-lg 45px; } - @include breakpoint-m { - padding: 50px 0 45px 100px; + @include media-query__medium { + padding: 50px 0 45px $s-5xl; } } @@ -15,7 +15,7 @@ display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { flex-direction: row; align-items: flex-end; justify-content: space-between; @@ -23,14 +23,14 @@ } .material-banner__menu { - margin-top: 16px; + margin-top: $s-md; padding-right: 20px; .link-filters { display: none; } - @include breakpoint-m { + @include media-query__medium { position: absolute; top: 88px; right: 20px; @@ -48,7 +48,7 @@ position: relative; } - @include breakpoint-l { + @include media-query__large { position: unset; top: unset; right: unset; @@ -68,11 +68,11 @@ background-color: #f6f5f0; } - @include breakpoint-s { + @include media-query__small { grid-template-columns: repeat(3, 1fr); } - @include breakpoint-l { + @include media-query__large { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } diff --git a/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss b/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss index 2dc3a2a33..24183fcfd 100644 --- a/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss +++ b/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss @@ -6,7 +6,7 @@ display: grid; cursor: pointer; - @include breakpoint-s { + @include media-query__small { min-height: 184px; grid-template-columns: min-content minmax(0, 634px) 1fr; grid-template-rows: 40px auto; @@ -14,13 +14,13 @@ } &:hover { - filter: drop-shadow(0 4px 20px rgba(72, 72, 72, 0.1)); + filter: drop-shadow(0 $s-xs 20px rgba(72, 72, 72, 0.1)); } &__cover { display: none; - @include breakpoint-s { + @include media-query__small { display: block; grid-column: 1/2; grid-row: 1/3; @@ -34,23 +34,23 @@ } &__text { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; - @include breakpoint-s { + @include media-query__small { grid-column: 2/3; } } &__title { - color: $c-text-primary-black; + color: $color__text-primary-black; margin-top: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; - @include breakpoint-s { - margin-top: 16px; + @include media-query__small { + margin-top: $s-md; max-width: 100%; } } @@ -62,7 +62,7 @@ gap: 9px; img { - width: 16px; + width: $s-md; } &.expanded { @@ -72,22 +72,22 @@ } & p.text-small-caption { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } } &__buttons { - @include breakpoint-s { + @include media-query__small { display: flex; flex-direction: column; align-items: center; justify-self: end; } .reserve-button { - margin-top: 16px; + margin-top: $s-md; max-width: 158px; - @include breakpoint-s { + @include media-query__small { margin-top: 0; } } diff --git a/src/stories/Blocks/material-page/material-page-skeleton.scss b/src/stories/Blocks/material-page/material-page-skeleton.scss index a0fc73290..31a54aec6 100644 --- a/src/stories/Blocks/material-page/material-page-skeleton.scss +++ b/src/stories/Blocks/material-page/material-page-skeleton.scss @@ -1,19 +1,10 @@ // Since we are using the Skeleton Screen Css classes connected to the existing styling // we deliberately not follow the BEM naming convention here. -/* stylelint-disable plugin/stylelint-bem-namics */ -/* stylelint-disable max-nesting-depth */ - -.material-page { - &.ssc { - .material-header { - &__content { - height: 605px; - // Favorite icon. - .ssc-square { - height: 30px; - width: 30px; - } - } - } +.material-page.ssc .material-header__content { + height: 605px; + // Favorite icon. + .ssc-square { + height: 30px; + width: 30px; } } diff --git a/src/stories/Blocks/material-page/material-page.scss b/src/stories/Blocks/material-page/material-page.scss index 06b594860..4a3fdd67e 100644 --- a/src/stories/Blocks/material-page/material-page.scss +++ b/src/stories/Blocks/material-page/material-page.scss @@ -1,6 +1,6 @@ .material-page { padding-bottom: $s-2xl; - @include breakpoint-s { + @include media-query__small { padding-bottom: $s-6xl; } } diff --git a/src/stories/Blocks/status-loans/status-loans.scss b/src/stories/Blocks/status-loans/status-loans.scss index 41ea82cce..e4768b2d4 100644 --- a/src/stories/Blocks/status-loans/status-loans.scss +++ b/src/stories/Blocks/status-loans/status-loans.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { width: 50%; } } diff --git a/src/stories/Blocks/status-userprofile/status-userprofile.scss b/src/stories/Blocks/status-userprofile/status-userprofile.scss index 8a9419356..3a2e2bf2c 100644 --- a/src/stories/Blocks/status-userprofile/status-userprofile.scss +++ b/src/stories/Blocks/status-userprofile/status-userprofile.scss @@ -4,7 +4,7 @@ column-gap: 25px; align-items: unset; - @include breakpoint-s { + @include media-query__small { align-items: baseline; flex-direction: row; row-gap: 25px; diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx index a4dff225b..79c858684 100644 --- a/src/stories/Introduction.stories.mdx +++ b/src/stories/Introduction.stories.mdx @@ -9,7 +9,7 @@ import { Meta } from "@storybook/addon-docs"; font-size: 13px; color: #999; letter-spacing: 6px; - line-height: 24px; + line-height: $s-lg; text-transform: uppercase; margin-bottom: 12px; margin-top: 40px; @@ -86,7 +86,7 @@ import { Meta } from "@storybook/addon-docs"; font-weight: 700; background: #E7FDD8; color: #66BF3C; - padding: 4px 12px; + padding: $s-xs 12px; margin-right: 10px; vertical-align: top; } diff --git a/src/stories/Library/Arrows/arrows.scss b/src/stories/Library/Arrows/arrows.scss index d3d967dbe..90fa15110 100644 --- a/src/stories/Library/Arrows/arrows.scss +++ b/src/stories/Library/Arrows/arrows.scss @@ -1,6 +1,6 @@ -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@mixin icon-arrow-animated($direction, $size, $scaleX, $translatePx, $origin) { +// BEM plugin does not support interpolation. +// stylelint-disable plugin/stylelint-bem-namics +@mixin _icon-arrow-animated($direction, $size, $scaleX, $translatePx, $origin) { .arrow__hover--#{$direction}-#{$size} { cursor: pointer; @@ -32,40 +32,13 @@ } } } -/* stylelint-enable plugin/stylelint-bem-namics */ +// stylelint-enable plugin/stylelint-bem-namics -@include icon-arrow-animated("right", "large", 1.165, 25px, left); -@include icon-arrow-animated("right", "small", 1.5, 30px, left); -@include icon-arrow-animated("left", "large", 1.165, -25px, right); -@include icon-arrow-animated("left", "small", 1.5, -30px, right); +@include _icon-arrow-animated("right", "large", 1.165, 25px, left); +@include _icon-arrow-animated("right", "small", 1.5, 30px, left); +@include _icon-arrow-animated("left", "large", 1.165, -25px, right); +@include _icon-arrow-animated("left", "small", 1.5, -30px, right); .arrow__link { text-decoration: none; } - -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@mixin arrow($className) { - // Hide arrow - .#{$className} > { - svg { - width: 35px; - visibility: hidden; - opacity: 0; - margin-right: 20px; - } - } - // Show arrow on hover - .#{$className} { - &:hover { - svg { - @include breakpoint-s { - visibility: visible; - opacity: 1; - align-self: center; - justify-self: end; - } - } - } - } -} diff --git a/src/stories/Library/Buttons/button-ui/buttons-ui.scss b/src/stories/Library/Buttons/button-ui/buttons-ui.scss index faac8e942..e18eab2cc 100644 --- a/src/stories/Library/Buttons/button-ui/buttons-ui.scss +++ b/src/stories/Library/Buttons/button-ui/buttons-ui.scss @@ -1,5 +1,5 @@ -$c-btn-border-active: $c-text-primary-black; -$c-btn-border-disabled: $c-global-tertiary-2; +$color__btn-border-active: $color__text-primary-black; +$color__btn-border-disabled: $color__global-tertiary-2; .btn-ui { background-color: transparent; diff --git a/src/stories/Library/Buttons/button/buttons.scss b/src/stories/Library/Buttons/button/buttons.scss index 7a697f392..f8003cd7c 100644 --- a/src/stories/Library/Buttons/button/buttons.scss +++ b/src/stories/Library/Buttons/button/buttons.scss @@ -1,13 +1,13 @@ -$c-btn-border-active: $c-text-primary-black; -$c-btn-border-disabled: $c-global-tertiary-2; +$color__btn-border-active: $color__text-primary-black; +$color__btn-border-disabled: $color__global-tertiary-2; .btn-icon { - margin-left: 16px; + margin-left: $s-md; color: inherit; } .btn-collapsible { - margin-left: 16px; + margin-left: $s-md; display: none; } @@ -16,13 +16,13 @@ $c-btn-border-disabled: $c-global-tertiary-2; align-items: center; justify-content: center; border-radius: 0; - border: 1px solid $c-btn-border-active; + border: 1px solid $color__btn-border-active; cursor: pointer; white-space: nowrap; transition: background-color 0.4s ease-in-out, color 0.2s ease-in-out, opacity 0.4s ease-in-out; - @extend %text-button-placeholder; + @include typography($typo__button); &:hover { .btn-collapsible { @@ -31,24 +31,24 @@ $c-btn-border-disabled: $c-global-tertiary-2; } &[disabled] { - border: 1px solid $c-btn-border-disabled; - color: $c-btn-border-disabled; - fill: $c-btn-border-disabled; + border: 1px solid $color__btn-border-disabled; + color: $color__btn-border-disabled; + fill: $color__btn-border-disabled; cursor: not-allowed; .arrow__body { - stroke: $c-btn-border-disabled; + stroke: $color__btn-border-disabled; } .arrow__head { - fill: $c-btn-border-disabled; + fill: $color__btn-border-disabled; } } } .btn-xlarge { height: 48px; - padding: 8px 86px; + padding: $s-sm 86px; } .btn-large { @@ -63,17 +63,17 @@ $c-btn-border-disabled: $c-global-tertiary-2; .btn-small { height: 40px; - padding: 0 32px; + padding: 0 $s-xl; } .btn-xsmall { - height: 32px; - padding: 0 24px; + height: $s-xl; + padding: 0 $s-lg; } .btn-filled:not([disabled]) { - background-color: $c-text-primary-black; - color: $c-text-primary-white; + background-color: $color__text-primary-black; + color: $color__text-primary-white; &:hover { opacity: 0.7; @@ -82,10 +82,10 @@ $c-btn-border-disabled: $c-global-tertiary-2; .btn-outline { background-color: transparent; - color: $c-text-primary-black; + color: $color__text-primary-black; &:not([disabled]):hover { - background-color: $c-text-primary-black; - color: $c-text-primary-white; + background-color: $color__text-primary-black; + color: $color__text-primary-white; } } diff --git a/src/stories/Library/Buttons/icon-button/icon-button.scss b/src/stories/Library/Buttons/icon-button/icon-button.scss index e79d04d55..6caf3ac25 100644 --- a/src/stories/Library/Buttons/icon-button/icon-button.scss +++ b/src/stories/Library/Buttons/icon-button/icon-button.scss @@ -3,10 +3,10 @@ cursor: pointer; &--selected { - fill: $c-global-tertiary-2; + fill: $color__global-tertiary-2; } &.dpl-icon-button:focus { - outline: $c-text-primary-black 5px auto; + outline: $color__text-primary-black 5px auto; } } diff --git a/src/stories/Library/Buttons/row-button/row-button.scss b/src/stories/Library/Buttons/row-button/row-button.scss index 916be7242..c89ade0c8 100644 --- a/src/stories/Library/Buttons/row-button/row-button.scss +++ b/src/stories/Library/Buttons/row-button/row-button.scss @@ -1,6 +1,6 @@ .row-button { height: 40px; - background-color: $c-global-secondary; + background-color: $color__global-secondary; padding: 9px $s-md; display: flex; align-items: center; diff --git a/src/stories/Library/Buttons/toggle-button/toggle-button.scss b/src/stories/Library/Buttons/toggle-button/toggle-button.scss index e550300e0..e02f8640e 100644 --- a/src/stories/Library/Buttons/toggle-button/toggle-button.scss +++ b/src/stories/Library/Buttons/toggle-button/toggle-button.scss @@ -1,7 +1,7 @@ .dpl-toggle-button { border-radius: 34px; - width: 44px; - height: 24px; + width: $s-2xl; + height: $s-lg; position: relative; border: 0px; cursor: pointer; @@ -18,7 +18,7 @@ } &--inactive { - background-color: $c-global-tertiary-2; + background-color: $color__global-tertiary-2; &::before { left: 2px; @@ -26,7 +26,7 @@ } &--active { - background-color: $c-signal-success; + background-color: $color__signal-success; &::before { right: 2px; diff --git a/src/stories/Library/Forms/checkbox/checkbox.scss b/src/stories/Library/Forms/checkbox/checkbox.scss index a840298e2..c85d558f1 100644 --- a/src/stories/Library/Forms/checkbox/checkbox.scss +++ b/src/stories/Library/Forms/checkbox/checkbox.scss @@ -11,7 +11,7 @@ .checkbox__label { user-select: none; cursor: pointer; - padding: 6px 8px 6px 0; + padding: 6px $s-sm 6px 0; overflow: hidden; transition: all 0.3s ease; display: flex; @@ -28,9 +28,9 @@ flex: 0 0 18px; width: 18px; height: 18px; - border-radius: 4px; + border-radius: $s-xs; transform: scale(1); - border: 1px solid $c-global-tertiary-2; + border: 1px solid $color__global-tertiary-2; transition: all 0.3s ease; } @@ -40,18 +40,18 @@ left: 2px; fill: none; stroke: #fff; - stroke-dasharray: 16px; - stroke-dashoffset: 16px; + stroke-dasharray: $s-md; + stroke-dashoffset: $s-md; transition: all 0.3s ease; transform: translate3d(0, 0, 0); } .checkbox__label .checkbox__text { - padding-left: 8px; + padding-left: $s-sm; line-height: 18px; &--validation { - color: $c-signal-alert; + color: $color__signal-alert; } &--hide-visually { @@ -68,13 +68,13 @@ } .checkbox__label:hover .checkbox__icon:first-of-type { - border-color: $c-text-secondary-gray; + border-color: $color__text-secondary-gray; } /* stylelint-disable selector-max-compound-selectors */ .checkbox__input:checked + .checkbox__label .checkbox__icon:first-of-type { - background: $c-text-secondary-gray; - border-color: $c-text-secondary-gray; + background: $color__text-secondary-gray; + border-color: $color__text-secondary-gray; animation: zoom-in-out 0.3s ease; svg { @@ -85,7 +85,7 @@ .checkbox__input:focus + .checkbox__label { // TODO: Determine a proper design for elements in focus. // This is a temporary solution to make it easier to test keyboard navigation. - outline: solid 1px $c-text-secondary-gray; + outline: solid 1px $color__text-secondary-gray; outline-offset: 0; } diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss index ed36cd810..097f6b3db 100644 --- a/src/stories/Library/Forms/input/input.scss +++ b/src/stories/Library/Forms/input/input.scss @@ -3,14 +3,14 @@ flex-direction: column; label { - @extend %text-body-medium-medium; - color: $c-text-secondary-gray; + @include typography($typo__body-medium); + color: $color__text-secondary-gray; } input { background-color: transparent; border: none; - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; height: 40px; &:focus { @@ -20,15 +20,15 @@ } &__description { - color: $c-text-secondary-gray; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__text-secondary-gray; + @include typography($typo__body-small); + margin-top: $s-md; } &__validation { - color: $c-signal-alert; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__signal-alert; + @include typography($typo__body-small); + margin-top: $s-md; } /* Chrome, Safari, Edge, Opera */ diff --git a/src/stories/Library/Icons/icon-favourite/icon-favourite.scss b/src/stories/Library/Icons/icon-favourite/icon-favourite.scss index 9866eaed4..64d60deca 100644 --- a/src/stories/Library/Icons/icon-favourite/icon-favourite.scss +++ b/src/stories/Library/Icons/icon-favourite/icon-favourite.scss @@ -1,26 +1,26 @@ .icon-favourite { cursor: pointer; - height: 24px; - width: 24px; - color: $c-text-primary-black; - stroke: $c-text-primary-black; + height: $s-lg; + width: $s-lg; + color: $color__text-primary-black; + stroke: $color__text-primary-black; fill: none; &--filled { - color: $c-identity-primary; - stroke: $c-identity-primary; - fill: $c-identity-primary; + color: $color__identity-primary; + stroke: $color__identity-primary; + fill: $color__identity-primary; } } .icon-favourite--bright { - color: $c-text-primary-white; - stroke: $c-text-primary-white; + color: $color__text-primary-white; + stroke: $color__text-primary-white; fill: none; } .icon-favourite--bright-filled { - stroke: $c-text-primary-white; - color: $c-text-primary-white; - fill: $c-text-primary-white; + stroke: $color__text-primary-white; + color: $color__text-primary-white; + fill: $color__text-primary-white; } diff --git a/src/stories/Library/Lists/fee-list/fee-list.scss b/src/stories/Library/Lists/fee-list/fee-list.scss index 62965c282..04d8a72e7 100644 --- a/src/stories/Library/Lists/fee-list/fee-list.scss +++ b/src/stories/Library/Lists/fee-list/fee-list.scss @@ -1,8 +1,8 @@ .fee-list-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/Lists/list-dashboard/list-dashboard.scss b/src/stories/Library/Lists/list-dashboard/list-dashboard.scss index cf957ac24..518c2f4cd 100644 --- a/src/stories/Library/Lists/list-dashboard/list-dashboard.scss +++ b/src/stories/Library/Lists/list-dashboard/list-dashboard.scss @@ -3,15 +3,15 @@ align-items: center; background: #fff; position: relative; - padding: 16px; + padding: $s-md; text-decoration: none; & .status-label { margin-left: auto; } - @include breakpoint-s { - padding: 16px 24px; + @include media-query__small { + padding: $s-md $s-lg; & .status-label { margin-left: unset; @@ -26,11 +26,11 @@ } .list-dashboard__title { - margin-left: 8px; - margin-right: 16px; + margin-left: $s-sm; + margin-right: $s-md; - @include breakpoint-s { - margin-left: 24px; + @include media-query__small { + margin-left: $s-lg; } } @@ -38,8 +38,8 @@ position: absolute; top: -4px; right: -4px; - width: 8px; - height: 8px; + width: $s-sm; + height: $s-sm; background: #d63649; border-radius: 100%; } @@ -50,7 +50,7 @@ margin-left: auto; width: 90px; // Avoids extending beyond the edge of the box. - @include breakpoint-s { + @include media-query__small { display: block; } } diff --git a/src/stories/Library/Lists/list-description/list-description.scss b/src/stories/Library/Lists/list-description/list-description.scss index bb6e3db9d..528485dfb 100644 --- a/src/stories/Library/Lists/list-description/list-description.scss +++ b/src/stories/Library/Lists/list-description/list-description.scss @@ -1,7 +1,8 @@ dl.list-description { - @extend %text-small-caption; + @include typography($typo__small-caption); + max-width: 420px; - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; .list-description__item { display: grid; @@ -10,20 +11,21 @@ dl.list-description { .list-description__key, .list-description__value { - padding: 2px 4px; + padding: 2px $s-xs; } .list-description__value { display: grid; - @include breakpoint-s { + @include media-query__small() { display: flex; flex-wrap: wrap; gap: $s-sm; } } .link-tag { - @extend %text-small-caption; - color: $c-text-primary-black; + @include typography($typo__small-caption); + + color: $color__text-primary-black; } } @@ -42,7 +44,7 @@ dl.list-description.list-description--event { font-weight: bold; } - @include breakpoint-s { + @include media-query__small() { grid-template-columns: 1fr; gap: $s-xs; diff --git a/src/stories/Library/Lists/list-details/list-details.scss b/src/stories/Library/Lists/list-details/list-details.scss index 74dfcd09f..569d92211 100644 --- a/src/stories/Library/Lists/list-details/list-details.scss +++ b/src/stories/Library/Lists/list-details/list-details.scss @@ -2,24 +2,24 @@ display: flex; align-items: center; min-height: 72px; - padding: 16px; - background-color: $c-text-primary-white; + padding: $s-md; + background-color: $color__text-primary-white; - @include breakpoint-s { + @include media-query__small { height: 96px; - padding: 16px 32px; + padding: $s-md $s-xl; } } .list-details__icon { - margin-top: 8px; - margin-right: 16px; - width: 24px; + margin-top: $s-sm; + margin-right: $s-md; + width: $s-lg; - @include breakpoint-s { + @include media-query__small { margin-top: 0; - margin-right: 32px; - width: 32px; + margin-right: $s-xl; + width: $s-xl; } } @@ -28,7 +28,7 @@ display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { flex-direction: row; display: flex; justify-content: space-between; @@ -37,7 +37,7 @@ .list-details__dropdown { margin-top: $s-md; - @include breakpoint-s { + @include media-query__small { margin-top: 0; } } @@ -45,7 +45,7 @@ .list-details__menu { margin-top: $s-md; - @include breakpoint-s { + @include media-query__small { margin-top: 0; } } diff --git a/src/stories/Library/Lists/list-empty/list-empty.scss b/src/stories/Library/Lists/list-empty/list-empty.scss index 737f2f465..9a0e164c3 100644 --- a/src/stories/Library/Lists/list-empty/list-empty.scss +++ b/src/stories/Library/Lists/list-empty/list-empty.scss @@ -5,13 +5,12 @@ flex-direction: column; justify-content: center; align-items: center; - border: 1px dotted $c-text-secondary-gray; + border: 1px dotted $color__text-secondary-gray; text-align: left; - @extend %color-secondary-gray; - @extend %p-4; - @extend %pt-48; - @extend %pb-48; - @extend %text-body-large; + color: $color__text-secondary-gray; + padding: 48px $s-xs; + + @include typography($typo__body-large); &__links { display: flex; diff --git a/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss b/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss index 63001c237..ca863a030 100644 --- a/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss +++ b/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss @@ -1,10 +1,10 @@ .find-on-shelf { - background-color: $c-global-secondary; + background-color: $color__global-secondary; &__header-row { display: none; - @include breakpoint-s { + @include media-query__small { display: flex; height: $s-xl; align-items: center; @@ -17,7 +17,7 @@ } &__item-count-header { - @include breakpoint-s { + @include media-query__small { margin-left: auto; } } @@ -25,11 +25,11 @@ &__row { display: flex; flex-direction: column; - border-top: solid 1px $c-global-primary; + border-top: solid 1px $color__global-primary; padding: $s-lg $s-md; gap: $s-md; - @include breakpoint-s { + @include media-query__small { padding: 0 $s-xl 0 $s-xl; flex-direction: row; min-height: 110px; @@ -41,7 +41,7 @@ &__material-text { max-width: 600px; - @include breakpoint-s { + @include media-query__small { // Both width and min-width need to be here to prevent flex shrink & stretch. width: 404px; min-width: 404px; @@ -49,7 +49,7 @@ } &__item-count-text { - @include breakpoint-s { + @include media-query__small { margin-left: auto; overflow-y: visible; } diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss index 0b7ef4fd8..f2ed95ba4 100644 --- a/src/stories/Library/Lists/list-materials/list-materials.scss +++ b/src/stories/Library/Lists/list-materials/list-materials.scss @@ -1,12 +1,12 @@ .list-materials { display: flex; min-height: 96px; - padding: 16px; - background-color: $c-text-primary-white; + padding: $s-md; + background-color: $color__text-primary-white; justify-content: space-between; - @include breakpoint-s { - padding: 16px 32px; + @include media-query__small { + padding: $s-md 32px; align-items: center; flex-direction: row; } @@ -26,8 +26,8 @@ } .list-materials__content__header { - @extend %ellipsis-two-lines; - @extend %text-header-h5; + @extend %text-ellipsis-two-lines; + @include typography($typo__h5); } .list-materials--disabled { @@ -46,20 +46,20 @@ flex-direction: row; margin-top: 0; align-items: center; - grid-gap: 16px; + grid-gap: $s-md; } .list-materials__status__note-desktop { - @extend %text-small-caption; + @include typography($typo__small-caption); display: none; - @include breakpoint-s { + @include media-query__small { display: flex; } } .list-materials__status__note-mobile { - @extend %text-small-caption; + @include typography($typo__small-caption); display: flex; - @include breakpoint-s { + @include media-query__small { display: none; } } @@ -68,14 +68,14 @@ display: inline-flex; gap: 8; - @include breakpoint-s { + @include media-query__small { display: flex; flex-direction: row; } } .list-materials__content-status-label { - @include breakpoint-s { + @include media-query__small { display: none; } } @@ -86,7 +86,7 @@ cursor: pointer; display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss index 830c44ee0..f325a0977 100644 --- a/src/stories/Library/Lists/list-reservation/list-reservation.scss +++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss @@ -1,4 +1,4 @@ -$list-reservation-space-mobile: 16px; +$list-reservation-space-mobile: $s-md; $list-reservation-space-desktop: 24px; .list-reservation-container { @@ -6,23 +6,25 @@ $list-reservation-space-desktop: 24px; } .list-reservation { - background-color: $c-text-primary-white; + @include show-svg-on-hover(".list-reservation__status"); + + background-color: $color__text-primary-white; border: 0; width: 100%; display: grid; grid-template-columns: 1fr; - box-shadow: 0 4px 20px rgb(0 0 0 / 10%); + box-shadow: 0 $s-xs 20px rgb(0 0 0 / 10%); position: relative; padding: $list-reservation-space-mobile; - @include breakpoint-s { + @include media-query__small { grid-template-columns: 1fr 1fr; height: 184px; padding: $list-reservation-space-desktop; } &:hover { - filter: drop-shadow(0 4px 20px rgb(72 72 72 / 10%)); + filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 10%)); } } @@ -45,6 +47,8 @@ $list-reservation-space-desktop: 24px; } .list-reservation__note { + @include typography($typo__small-caption); + // To make it easy to click min-height: 20px; cursor: pointer; @@ -52,25 +56,21 @@ $list-reservation-space-desktop: 24px; align-self: baseline; border: 0; display: block; - margin-top: 4px; + margin-top: $s-xs; white-space: break-spaces; text-decoration: underline; padding-left: 0; - @extend %text-small-caption; - @extend %color-secondary-gray; } .list-reservation__note--desktop { - @extend %text-body-small-regular; display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } .list-reservation__note--mobile { - @extend %text-body-small-regular; - @include breakpoint-s { + @include media-query__small { display: none; } } @@ -83,7 +83,7 @@ $list-reservation-space-desktop: 24px; align-items: baseline; justify-content: space-between; - @include breakpoint-s { + @include media-query__small { margin-left: $list-reservation-space-desktop; } } @@ -98,7 +98,7 @@ $list-reservation-space-desktop: 24px; margin-bottom: $s-md; } - @include breakpoint-s { + @include media-query__small { margin-top: 0; p { font-size: 12px; @@ -108,7 +108,7 @@ $list-reservation-space-desktop: 24px; } .list-reservation__header { - @extend %text-header-h4; + @include typography($typo__h4); padding: 0; cursor: pointer; @@ -119,7 +119,7 @@ $list-reservation-space-desktop: 24px; } .list-reservation__header__text { - @extend %ellipsis-two-lines; + @extend %text-ellipsis-two-lines; } .list-reservation__status { @@ -128,25 +128,16 @@ $list-reservation-space-desktop: 24px; align-items: flex-end; grid-template-columns: auto 1fr auto; - svg { - display: none; - @include breakpoint-s { - display: flex; - } - } - - @include breakpoint-s { + @include media-query__small { align-items: center; } } -@include arrow("list-reservation__status"); - .list-reservation__counter { display: none; margin: $s-xs; - @include breakpoint-s { + @include media-query__small { width: 92px; display: block; } @@ -154,10 +145,10 @@ $list-reservation-space-desktop: 24px; .list-reservation__deadline { display: inline-grid; - grid-row-gap: 8px; + grid-row-gap: $s-sm; margin-left: 2px; - @include breakpoint-s { + @include media-query__small { margin-left: 15px; } } @@ -174,9 +165,9 @@ $list-reservation-space-desktop: 24px; width: 100%; position: absolute; bottom: 0; - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; perspective: 500px; - box-shadow: 0 4px 20px rgb(72 72 72 / 10%); + box-shadow: 0 $s-xs 20px rgb(72 72 72 / 10%); } .list-reservation--stacked { @@ -192,7 +183,7 @@ $list-reservation-space-desktop: 24px; @extend %list-stacked; content: " "; - transform: translateY(16px) scale(0.9); + transform: translateY($s-md) scale(0.9); z-index: $-z-10; } diff --git a/src/stories/Library/Modals/modal-cta/modal-cta.scss b/src/stories/Library/Modals/modal-cta/modal-cta.scss index 0471e4727..7f2f9aa8e 100644 --- a/src/stories/Library/Modals/modal-cta/modal-cta.scss +++ b/src/stories/Library/Modals/modal-cta/modal-cta.scss @@ -16,5 +16,5 @@ .modal-cta__link { display: flex; justify-content: center; - margin-top: 16px; + margin-top: $s-md; } diff --git a/src/stories/Library/Modals/modal-details/modal-details.scss b/src/stories/Library/Modals/modal-details/modal-details.scss index 899ffa3a3..e3b0bf103 100644 --- a/src/stories/Library/Modals/modal-details/modal-details.scss +++ b/src/stories/Library/Modals/modal-details/modal-details.scss @@ -16,7 +16,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px; max-width: 100%; padding-bottom: $s-2xl; - @include breakpoint-s { + @include media-query__small { margin: 0; padding-bottom: 0; } @@ -27,7 +27,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px; flex-direction: column; align-items: flex-start; - @include breakpoint-s { + @include media-query__small { align-items: center; flex-direction: row; padding-top: 96px; @@ -37,7 +37,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px; .modal-details__cover { margin: 48px 0; - @include breakpoint-s { + @include media-query__small { margin: 0; } } @@ -45,15 +45,15 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px; .modal-details__material { margin: 0; - @include breakpoint-s { + @include media-query__small { margin: 0 46px; } } .modal-details__tags { display: flex; - grid-column-gap: 8px; - margin-bottom: 16px; + grid-column-gap: $s-sm; + margin-bottom: $s-md; } /* @@ -76,7 +76,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px; justify-content: flex-end; display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { display: none; } } @@ -90,14 +90,14 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px; .modal-details__buttons--hide-on-mobile { display: none; - @include breakpoint-s { + @include media-query__small { display: flex; flex-direction: row; } } .modal-details__buttons__full-width { - @include breakpoint-s { + @include media-query__small { width: 100%; } } diff --git a/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss b/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss index 54ad4d3dc..0a21d0311 100644 --- a/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss +++ b/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss @@ -5,7 +5,7 @@ min-height: 120px; padding-left: $s-xl; padding-top: $s-xl; - @include breakpoint-s { + @include media-query__small { min-height: 144px; padding-left: $s-2xl; padding-top: $s-2xl; @@ -32,7 +32,7 @@ margin-bottom: $s-xl; margin-right: $s-md; - @include breakpoint-s { + @include media-query__small { margin-right: $s-2xl; } } diff --git a/src/stories/Library/Modals/modal-find-on-shelf/modal-find-on-shelf.scss b/src/stories/Library/Modals/modal-find-on-shelf/modal-find-on-shelf.scss index b49bc99a7..d8fe3fe0d 100644 --- a/src/stories/Library/Modals/modal-find-on-shelf/modal-find-on-shelf.scss +++ b/src/stories/Library/Modals/modal-find-on-shelf/modal-find-on-shelf.scss @@ -3,14 +3,14 @@ overflow-y: scroll; align-items: flex-start; - @include breakpoint-m { + @include media-query__medium { padding: $s-4xl $s-7xl; } &__headline { margin: 0 $s-md $s-2xl $s-md; - @include breakpoint-m { + @include media-query__medium { margin: 0 $s-md 96px 0; } } @@ -18,7 +18,7 @@ &__caption { margin: 0 0 $s-md $s-md; - @include breakpoint-m { + @include media-query__medium { margin: 0 0 $s-sm 0; } } @@ -29,7 +29,7 @@ width: 100%; margin: 0 0 $s-2xl 0; - @include breakpoint-m { + @include media-query__medium { flex-direction: row; gap: $s-lg; max-width: 800px; diff --git a/src/stories/Library/Modals/modal-header/modal-header.scss b/src/stories/Library/Modals/modal-header/modal-header.scss index bc1e9246b..0635deee3 100644 --- a/src/stories/Library/Modals/modal-header/modal-header.scss +++ b/src/stories/Library/Modals/modal-header/modal-header.scss @@ -4,9 +4,9 @@ grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; row-gap: 12px; - column-gap: 24px; - padding: 32px; - border-bottom: 1px solid $c-global-tertiary-1; + column-gap: $s-lg; + padding: $s-xl; + border-bottom: 1px solid $color__global-tertiary-1; &__avatar { grid-area: avatar; @@ -25,15 +25,15 @@ grid-area: link; } - @include breakpoint-s { + @include media-query__small { grid-template-areas: "avatar name" "avatar link"; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; padding: { top: 40px; - right: 80px; + right: $s-4xl; bottom: 40px; - left: 80px; + left: $s-4xl; } } } diff --git a/src/stories/Library/Modals/modal-loan/modal-loan.scss b/src/stories/Library/Modals/modal-loan/modal-loan.scss index 5065474d8..88e9f55a8 100644 --- a/src/stories/Library/Modals/modal-loan/modal-loan.scss +++ b/src/stories/Library/Modals/modal-loan/modal-loan.scss @@ -18,12 +18,12 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px; .modal-loan__list-container { display: grid; - grid-row-gap: 100px; + grid-row-gap: $s-5xl; } .modal-loan__list { position: relative; - margin-top: 24px; + margin-top: $s-lg; padding-bottom: 10px; } @@ -34,9 +34,9 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px; .modal-loan__list-materials { display: grid; - grid-row-gap: 8px; + grid-row-gap: $s-sm; } .modal-loan__list-materials--bottom-buttons-visible { - padding-bottom: #{$s-75}px; + padding-bottom: $s-4xl; } diff --git a/src/stories/Library/Modals/modal-pause/modal-pause.scss b/src/stories/Library/Modals/modal-pause/modal-pause.scss index fdacce0e1..cd63d2b31 100644 --- a/src/stories/Library/Modals/modal-pause/modal-pause.scss +++ b/src/stories/Library/Modals/modal-pause/modal-pause.scss @@ -6,12 +6,12 @@ $modal-pause-container-width: 550px; } .modal-pause__container { - margin: 0 24px; + margin: 0 $s-lg; padding-top: 96px; max-width: $modal-pause-container-width; width: 100%; - @include breakpoint-s { + @include media-query__small { margin: 0 45px; } } @@ -21,30 +21,23 @@ $modal-pause-container-width: 550px; justify-content: center; } -.modal-pause__text-link { - .link-tag { - font-size: 14px; - padding-left: 5px; - } -} - .datepickers { - @include breakpoint-s { + @include media-query__small { display: flex; justify-content: space-between; } input { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; box-sizing: border-box; - background-color: $c-global-primary; + background-color: $color__global-primary; min-width: 100%; height: 50px; padding: 0 10px; - color: $c-text-secondary-gray; - @extend %text-button-placeholder; + color: $color__text-secondary-gray; + @include typography($typo__button); - @include breakpoint-s { + @include media-query__small { min-width: 250px; padding: 0 20px; } @@ -56,12 +49,12 @@ $modal-pause-container-width: 550px; width: 100%; margin-bottom: $s-lg; - @include breakpoint-s { + @include media-query__small { margin-bottom: 0; } &:first-of-type { - @include breakpoint-s { + @include media-query__small { margin-right: $s-lg; } } diff --git a/src/stories/Library/Modals/modal-profile/modal-profile.scss b/src/stories/Library/Modals/modal-profile/modal-profile.scss index c96708a34..504643f5d 100644 --- a/src/stories/Library/Modals/modal-profile/modal-profile.scss +++ b/src/stories/Library/Modals/modal-profile/modal-profile.scss @@ -3,26 +3,26 @@ flex-direction: column; &__notifications:has[div] { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; - padding: 32px; + padding: $s-xl; - @include breakpoint-s { + @include media-query__small { padding: { top: 40px; - right: 80px; + right: $s-4xl; bottom: 40px; - left: 80px; + left: $s-4xl; } } } &__notification-item { - margin-bottom: 8px; + margin-bottom: $s-sm; } &__notification-item .list-dashboard { - padding: 8px; + padding: $s-sm; } &__notification-item .number { @@ -36,19 +36,19 @@ display: flex; flex-direction: column; justify-content: space-between; - padding: 32px; + padding: $s-xl; } &__links .link-filters { display: flex; flex-direction: column; - row-gap: 24px; + row-gap: $s-lg; } &__btn-logout { - margin: 0 32px; + margin: 0 $s-xl; - @include breakpoint-s { + @include media-query__small { display: flex; justify-content: flex-end; diff --git a/src/stories/Library/Modals/modal-reservation/reservation.scss b/src/stories/Library/Modals/modal-reservation/reservation.scss index 5c0e8e532..0292ba943 100644 --- a/src/stories/Library/Modals/modal-reservation/reservation.scss +++ b/src/stories/Library/Modals/modal-reservation/reservation.scss @@ -1,5 +1,5 @@ .reservation-modal { - background-color: $c-global-primary; + background-color: $color__global-primary; width: 100%; } @@ -17,23 +17,23 @@ display: flex; flex-direction: column; margin-bottom: $s-md; - @include breakpoint-s { + @include media-query__small { flex-direction: row; } } .reservation-modal-description { margin-top: $s-lg; - @include breakpoint-s { + @include media-query__small { margin-left: 42px; } } .reservation-modal-tag { - @extend %text-tags; - @extend %px-16; - @extend %py-4; - border: 1px solid $c-global-tertiary-1; + @include typography($typo__tags); + padding: $s-xs $s-md; + + border: 1px solid $color__global-tertiary-1; display: inline-flex; justify-content: center; align-items: center; @@ -44,9 +44,9 @@ flex-direction: column; align-items: center; gap: $s-md; - @extend %mb-24; + margin-bottom: $s-lg; - @include breakpoint-s { + @include media-query__small { justify-content: end; flex-direction: row; } @@ -62,8 +62,9 @@ display: flex; align-items: center; min-height: 96px; - gap: 35px; - @extend %px-35; + gap: $s-xl; + padding-left: $s-xl; + padding-right: $s-xl; } .reservation-modal-list-item-text { @@ -80,7 +81,7 @@ justify-content: center; &__content { - @include breakpoint-m { + @include media-query__medium { width: 45%; } } diff --git a/src/stories/Library/Modals/modal-search/modal-search.scss b/src/stories/Library/Modals/modal-search/modal-search.scss index 44d0c775b..32a937291 100644 --- a/src/stories/Library/Modals/modal-search/modal-search.scss +++ b/src/stories/Library/Modals/modal-search/modal-search.scss @@ -6,12 +6,12 @@ $MODAL_SEARCH_CONTAINER_WIDTH: 550px; } .modal-search__container { - margin: 0 24px; + margin: 0 $s-lg; padding-top: 96px; max-width: $MODAL_SEARCH_CONTAINER_WIDTH; width: 100%; - @include breakpoint-s { + @include media-query__small { margin: 0 45px; } } diff --git a/src/stories/Library/Modals/modal-text/modal-text.scss b/src/stories/Library/Modals/modal-text/modal-text.scss index 380a0a99c..4302ff44c 100644 --- a/src/stories/Library/Modals/modal-text/modal-text.scss +++ b/src/stories/Library/Modals/modal-text/modal-text.scss @@ -6,21 +6,21 @@ $MODAL_TEXT_CONTAINER_WIDTH: 550px; } .modal-text__container { - margin: 0 24px; + margin: 0 $s-lg; padding-top: 96px; - padding-bottom: 100px; + padding-bottom: $s-5xl; max-width: $MODAL_TEXT_CONTAINER_WIDTH; width: 100%; - @include breakpoint-s { + @include media-query__small { margin: 0 45px; } } .modal-text__content { display: grid; - grid-row-gap: 16px; - margin-top: 32px; + grid-row-gap: $s-md; + margin-top: $s-xl; } .modal-text__buttons { @@ -30,11 +30,11 @@ $MODAL_TEXT_CONTAINER_WIDTH: 550px; bottom: 0; height: 88px; width: 100%; - background-color: $c-global-primary; + background-color: $color__global-primary; filter: drop-shadow(4px 0 20px rgb(72 72 72 / 10%)); - @include breakpoint-s { - bottom: 100px; + @include media-query__small { + bottom: $s-5xl; width: calc(100vw - 200px); } } @@ -43,7 +43,7 @@ $MODAL_TEXT_CONTAINER_WIDTH: 550px; display: flex; justify-content: flex-end; align-items: center; - grid-column-gap: 24px; + grid-column-gap: $s-lg; max-width: 1000px; width: 100%; height: 100%; diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index 62bebad6b..957f7f012 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -1,20 +1,9 @@ -// Should be in shared.scss, but since shared is loaded later than modal.scss, we temporarily need to have a copy here -@mixin hide-visually { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - padding: 0; - border: 0; - height: 1px; - width: 1px; - overflow: hidden; -} - .modal { padding: $s-md; // This color is inherited by the component. --parent-bg-color: #f6f5f0; - background-color: $c-global-primary; + background-color: $color__global-primary; position: relative; opacity: 0; display: none; @@ -26,13 +15,13 @@ @include hide-visually; } - @include breakpoint-s { + @include media-query__small { height: calc(100vh - 200px); width: calc(100vw - 200px); - margin: 100px 0 0 100px; + margin: $s-5xl 0 0 $s-5xl; } - @include breakpoint-m { + @include media-query__medium { padding: $s-4xl $s-7xl; } @@ -90,13 +79,13 @@ z-index: $z-15; &.modal-btn-close--offset { - @include breakpoint-s { - top: 100px; - right: 100px; + @include media-query__small { + top: $s-5xl; + right: $s-5xl; } } - @include breakpoint-s { + @include media-query__small { padding: 34px; } @@ -107,7 +96,7 @@ & > img { width: 11.5px; - @include breakpoint-s { + @include media-query__small { width: 19.5px; } } diff --git a/src/stories/Library/accordion/accordion.scss b/src/stories/Library/accordion/accordion.scss index bb14e73f0..38adf554e 100644 --- a/src/stories/Library/accordion/accordion.scss +++ b/src/stories/Library/accordion/accordion.scss @@ -1,5 +1,5 @@ .accordion { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } .accordion__button-arrow { @@ -8,7 +8,7 @@ } .accordion__button { - color: $c-text-primary-black; + color: $color__text-primary-black; border-width: 0; border-color: transparent; border-radius: 0; @@ -20,10 +20,10 @@ display: flex; justify-content: space-between; align-items: center; - border-top: 1px solid $c-global-tertiary-1; + border-top: 1px solid $color__global-tertiary-1; &[aria-expanded="true"] { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; .accordion__button-arrow { transform: rotateZ(0deg); @@ -36,7 +36,7 @@ } .accordion__header { - height: 60px; + height: $s-3xl; button:focus { outline: -webkit-focus-ring-color auto 5px; @@ -47,11 +47,11 @@ display: grid; a { - line-height: 32px; - padding-left: #{$s-48}px; + line-height: $s-xl; + padding-left: $s-2xl; text-decoration: none; - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); } &[hidden] { @@ -61,10 +61,10 @@ .accordion__row:last-child { .accordion__button { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; } .accordion__body { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; } } diff --git a/src/stories/Library/article-header/article-header.scss b/src/stories/Library/article-header/article-header.scss index 30660f990..aac054810 100644 --- a/src/stories/Library/article-header/article-header.scss +++ b/src/stories/Library/article-header/article-header.scss @@ -4,7 +4,7 @@ padding: $s-4xl $s-xl; position: relative; - @include breakpoint-s { + @include media-query__small { padding: $s-4xl $s-7xl; } } @@ -14,34 +14,35 @@ left: $s-md; top: $s-sm; - @include breakpoint-s { + @include media-query__small { left: $s-2xl; top: $s-lg; } } .article-header__title { - @extend %text-header-h1; + @include typography($typo__h1); } .article-header__subtitle { - @extend %text-subtitle; + @include typography($typo__subtitle); } .article-header__title, .article-header__subtitle { - @include breakpoint-s { + @include media-query__small { max-width: 897px; } } .article-header__info { - @extend %text-body-small-regular; + @include typography($typo__body-small); } .article-header__author { + @include typography($typo__body-small); + @extend %link-tag; - @extend %text-body-small-regular; margin-left: $s-xs; } diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss index 1d8403c8a..831cf3de7 100644 --- a/src/stories/Library/autosuggest-material/autosuggest-material.scss +++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss @@ -7,53 +7,53 @@ margin-bottom: 0; } - @include breakpoint-m { + @include media-query__medium { width: calc(100% / 3); // Because the main autosuggest is a prominent feature we don't want the hover // effect to take effect on phones, as iPhones have a known bug that requires // users to double click in order to get past hover to register a click. &:hover { - background-color: $c-global-secondary; + background-color: $color__global-secondary; cursor: pointer; } } &.autosuggest__material-item--two { - @include breakpoint-m { + @include media-query__medium { width: calc(100% / 2); } } &.autosuggest__material-item--one { - @include breakpoint-m { + @include media-query__medium { width: 100%; } } &--highlight { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } // Autosuggest dividers on phones: // - between text suggestions & material suggestions &__text-item + &__material-item { - border-top: 1px solid $c-global-tertiary-1; + border-top: 1px solid $color__global-tertiary-1; margin-top: $s-lg; padding-top: $s-lg; - @include breakpoint-m { + @include media-query__medium { border: none; margin: 0; } } // - between material suggestions & text suggestions &__material-item + &__text-item { - border-top: 1px solid $c-global-tertiary-1; + border-top: 1px solid $color__global-tertiary-1; margin-top: $s-md; padding-top: $s-md; - @include breakpoint-m { + @include media-query__medium { border: none; padding-top: 0; margin-top: 0; @@ -63,9 +63,9 @@ // Autosuggest dividers on desktop: // - both dividers are rendered if both types of suggestions are present &__text-item ~ &__material-item { - @include breakpoint-m { - border-top: 1px solid $c-global-tertiary-1; - border-bottom: 1px solid $c-global-tertiary-1; + @include media-query__medium { + border-top: 1px solid $color__global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; margin: $s-lg 0; padding-top: $s-lg; padding-bottom: $s-lg; @@ -89,16 +89,16 @@ } &__title { - color: $c-text-secondary-gray; - line-height: 24px; + color: $color__text-secondary-gray; + line-height: $s-lg; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } &__author { - color: $c-text-primary-black; - line-height: 24px; + color: $color__text-primary-black; + line-height: $s-lg; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/src/stories/Library/autosuggest-text/autosuggest-text.scss b/src/stories/Library/autosuggest-text/autosuggest-text.scss index 2b3d34e7b..e555dff9a 100644 --- a/src/stories/Library/autosuggest-text/autosuggest-text.scss +++ b/src/stories/Library/autosuggest-text/autosuggest-text.scss @@ -5,30 +5,30 @@ display: flex; align-items: center; - @include breakpoint-m { + @include media-query__medium { // Because the main autosuggest is a prominent feature we don't want the hover // effect to take effect on phones, as iPhones have a known bug that requires // users to double click in order to get past hover to register a click. // For reference, go to https://github.com/common-voice/common-voice/issues/424 // or google "iphone hover issue". &:hover { - background-color: $c-global-secondary; + background-color: $color__global-secondary; cursor: pointer; } } - @include breakpoint-l { + @include media-query__large { height: 40px; padding-right: $s-lg; } &--highlight { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } &__text { - @include breakpoint-m { + @include media-query__medium { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/stories/Library/availability-label/availability-label.scss b/src/stories/Library/availability-label/availability-label.scss index 6c3018234..b2513be77 100644 --- a/src/stories/Library/availability-label/availability-label.scss +++ b/src/stories/Library/availability-label/availability-label.scss @@ -5,21 +5,21 @@ align-items: center; width: auto; height: 25px; - background-color: $c-global-primary; + background-color: $color__global-primary; white-space: nowrap; &--selected { - border: 1px solid $c-text-primary-black; + border: 1px solid $color__text-primary-black; } &--unselected { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; } &__divider { height: 14px; width: 1px; - background-color: $c-global-tertiary-1; + background-color: $color__global-tertiary-1; } &__check { diff --git a/src/stories/Library/boxed-text/boxed-text.scss b/src/stories/Library/boxed-text/boxed-text.scss index 94114fe44..6737f7034 100644 --- a/src/stories/Library/boxed-text/boxed-text.scss +++ b/src/stories/Library/boxed-text/boxed-text.scss @@ -2,6 +2,6 @@ height: $s-lg; display: flex; align-items: center; - outline: 1px solid $c-global-tertiary-1; + outline: 1px solid $color__global-tertiary-1; padding: 0 $s-sm; } diff --git a/src/stories/Library/breadcrumb/breadcrumb.scss b/src/stories/Library/breadcrumb/breadcrumb.scss index bf5d8ff00..0d887ff7c 100644 --- a/src/stories/Library/breadcrumb/breadcrumb.scss +++ b/src/stories/Library/breadcrumb/breadcrumb.scss @@ -4,16 +4,16 @@ } .text-links { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; margin-bottom: -4px; - @extend %text-links-placeholder; + @include typography($typo__links); } .arrow__body { - stroke: $c-text-secondary-gray; + stroke: $color__text-secondary-gray; } .arrow__head { - fill: $c-text-secondary-gray; + fill: $color__text-secondary-gray; } } diff --git a/src/stories/Library/breakpoints/Breakpoints.stories.tsx b/src/stories/Library/breakpoints/Breakpoints.stories.tsx deleted file mode 100644 index b5ff4e0b5..000000000 --- a/src/stories/Library/breakpoints/Breakpoints.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { withDesign } from "storybook-addon-designs"; -import { Meta } from "@storybook/react"; - -import { Breakpoints } from "./Breakpoints"; - -export default { - title: "Library / Breakpoints", - component: Breakpoints, - decorators: [withDesign], - parameters: { - design: { - type: "figma", - url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=255%3A2080", - }, - layout: "centered", - }, -} as Meta; - -export const Default = () => ; diff --git a/src/stories/Library/breakpoints/Breakpoints.tsx b/src/stories/Library/breakpoints/Breakpoints.tsx deleted file mode 100644 index 07ba6f92c..000000000 --- a/src/stories/Library/breakpoints/Breakpoints.tsx +++ /dev/null @@ -1,50 +0,0 @@ -const spaceClasses = [ - { - classPrefix: "@media (min-width: 375px) {}", - classProperty: "375px", - }, - { - classPrefix: "@media (min-width: 768px) {}", - classProperty: "768px", - }, - { - classPrefix: "@media (min-width: 1024px) {}", - classProperty: "1024px", - }, - { - classPrefix: "@media (min-width: 1440px) {}", - classProperty: "1440px", - }, - { - classPrefix: "@media (min-width: 1920px) {}", - classProperty: "1920px", - }, - { - classPrefix: "@media (min-width: 2200px) {}", - classProperty: "2200px", - }, -]; - -export const Breakpoints = () => { - return ( -
-

CSS breakpoints / sizes

-
- {spaceClasses.map((spaceClass) => ( -
-
- 
-                {spaceClass.classPrefix}
-
-
-
- {spaceClass.classProperty} -
-
- ))} -
-
- ); -}; - -export default Breakpoints; diff --git a/src/stories/Library/breakpoints/breakpoints.scss b/src/stories/Library/breakpoints/breakpoints.scss deleted file mode 100644 index c3fbe98b3..000000000 --- a/src/stories/Library/breakpoints/breakpoints.scss +++ /dev/null @@ -1,44 +0,0 @@ -/** Breakpoints **/ -$screen-xs: 375px; -$screen-s: 768px; -$screen-m: 1024px; -$screen-l: 1440px; -$screen-xl: 1920px; -$screen-xxl: 2200px; - -/** Breakpoint mixin's **/ -@mixin breakpoint-xs { - @media (min-width: $screen-xs) { - @content; - } -} - -@mixin breakpoint-s { - @media (min-width: $screen-s) { - @content; - } -} - -@mixin breakpoint-m { - @media (min-width: $screen-m) { - @content; - } -} - -@mixin breakpoint-l { - @media (min-width: $screen-l) { - @content; - } -} - -@mixin breakpoint-xl { - @media (min-width: $screen-xl) { - @content; - } -} - -@mixin breakpoint-xxl { - @media (min-width: $screen-xxl) { - @content; - } -} diff --git a/src/stories/Library/button-box/button-box.scss b/src/stories/Library/button-box/button-box.scss index 3c33b0421..cedf79be3 100644 --- a/src/stories/Library/button-box/button-box.scss +++ b/src/stories/Library/button-box/button-box.scss @@ -1,12 +1,12 @@ .button-box { - background-color: $c-global-primary; + background-color: $color__global-primary; display: flex; justify-content: flex-end; margin-top: 40px; flex-direction: column; margin-bottom: 10px; - @include breakpoint-s { + @include media-query__small { align-items: center; flex-direction: row; } @@ -21,10 +21,10 @@ margin-bottom: 0px; z-index: $z-20; - @include breakpoint-s { + @include media-query__small { padding: $s-lg $s-7xl $s-lg 0; - bottom: 100px; - right: 100px; - left: 100px; + bottom: $s-5xl; + right: $s-5xl; + left: $s-5xl; } } diff --git a/src/stories/Library/campaign/campaign.scss b/src/stories/Library/campaign/campaign.scss index e3cc9125a..68a626a72 100644 --- a/src/stories/Library/campaign/campaign.scss +++ b/src/stories/Library/campaign/campaign.scss @@ -1,9 +1,9 @@ .campaign { - background-color: $c-global-tertiary-2; + background-color: $color__global-tertiary-2; display: grid; grid-template-rows: 150px auto; - @include breakpoint-s { + @include media-query__small { height: 150px; display: flex; } @@ -13,12 +13,12 @@ width: 100%; object-fit: cover; - @include breakpoint-s { + @include media-query__small { max-width: 30%; } &.campaign__image--full-width { - @include breakpoint-s { + @include media-query__small { max-width: 100%; min-width: 100%; } @@ -26,10 +26,11 @@ } &__title { - @extend %text-header-h4; + @include typography($typo__h4); + margin: $s-lg; align-self: center; - color: $c-text-primary-white; + color: $color__text-primary-white; &.campaign__title--none { display: none; @@ -38,7 +39,7 @@ } .campaign--reverse { - @include breakpoint-s { + @include media-query__small { flex-direction: row-reverse; } } diff --git a/src/stories/Library/card-list-item/card-list-item-skeleton.scss b/src/stories/Library/card-list-item/card-list-item-skeleton.scss index e4ef423cc..9210a6b76 100644 --- a/src/stories/Library/card-list-item/card-list-item-skeleton.scss +++ b/src/stories/Library/card-list-item/card-list-item-skeleton.scss @@ -1,7 +1,3 @@ -// Since we are using the Skeleton Screen Css classes connected to the existing styling -// we deliberately not follow the BEM naming convention here. -/* stylelint-disable plugin/stylelint-bem-namics */ - .card-list-item { &.ssc { grid-template-columns: min-content 1fr; @@ -10,13 +6,11 @@ width: 95px; } .ssc-head-line { - @extend %mt-16; + margin-top: $s-md; } - @include breakpoint-s { + @include media-query__small { .ssc-wrapper { width: 50%; } } } - -/* stylelint-enable plugin/stylelint-bem-namics */ diff --git a/src/stories/Library/card-list-item/card-list-item.scss b/src/stories/Library/card-list-item/card-list-item.scss index 70ca7a46e..ce2975c42 100644 --- a/src/stories/Library/card-list-item/card-list-item.scss +++ b/src/stories/Library/card-list-item/card-list-item.scss @@ -1,14 +1,16 @@ .card-list-item { + @include show-svg-on-hover; + background-color: #fff; - padding: 16px 24px; + padding: $s-md $s-lg; display: grid; grid-template-columns: min-content 1fr; - gap: 22px 16px; + gap: 22px $s-md; cursor: pointer; text-decoration: none; min-height: 184px; - @include breakpoint-s { + @include media-query__small { gap: 0; column-gap: $s-lg; padding: $s-lg; @@ -16,16 +18,14 @@ } &:hover { - filter: drop-shadow(0 4px 20px rgb(72 72 72 / 10%)); + filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 10%)); } } -@include arrow("card-list-item"); - .card-list-item__cover { grid-row: span 2; - @include breakpoint-s { + @include media-query__small { grid-row: auto; } } @@ -37,7 +37,7 @@ flex-wrap: wrap; gap: 6px; - @include breakpoint-s { + @include media-query__small { grid-column: 3; } } @@ -58,11 +58,11 @@ } } - @include breakpoint-s { + @include media-query__small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - margin-top: 16px; + margin-top: $s-md; overflow: hidden; text-overflow: ellipsis; line-height: calc(120% + 2px); diff --git a/src/stories/Library/card-list-page/card-list-page-skeleton.scss b/src/stories/Library/card-list-page/card-list-page-skeleton.scss index 99e069794..e5fb70b93 100644 --- a/src/stories/Library/card-list-page/card-list-page-skeleton.scss +++ b/src/stories/Library/card-list-page/card-list-page-skeleton.scss @@ -1,14 +1,14 @@ .card-list-page__skeleton-facet-line { &--mobile { display: block; - @include breakpoint-s { + @include media-query__small { display: none; } } &--desktop { display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } diff --git a/src/stories/Library/card-list-page/card-list-page.scss b/src/stories/Library/card-list-page/card-list-page.scss index 51f065d45..faf450cc1 100644 --- a/src/stories/Library/card-list-page/card-list-page.scss +++ b/src/stories/Library/card-list-page/card-list-page.scss @@ -1,13 +1,13 @@ .card-list-page { - background: $c-global-primary; - padding: 16px; + background: $color__global-primary; + padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-4xl 157px $s-2xl; } &__list { display: grid; - gap: 16px; + gap: $s-md; } } diff --git a/src/stories/Library/card-list-page/facet-line.scss b/src/stories/Library/card-list-page/facet-line.scss index a0ce99b88..13478330a 100644 --- a/src/stories/Library/card-list-page/facet-line.scss +++ b/src/stories/Library/card-list-page/facet-line.scss @@ -1,17 +1,10 @@ -.facet-line { - &__item { - display: inline-block; - @extend %mr-8; - @extend %mt-8; - } +.facet-line-selected-terms__item, +.facet-line__item { + display: inline-block; + margin-right: $s-sm; + margin-top: $s-md; } .facet-line-selected-terms { - @extend %mt-16; - - &__item { - display: inline-block; - @extend %mr-8; - @extend %mt-8; - } + margin-top: $s-md; } diff --git a/src/stories/Library/card-list-page/result-pager.scss b/src/stories/Library/card-list-page/result-pager.scss index 28d95419b..8b98afb0c 100644 --- a/src/stories/Library/card-list-page/result-pager.scss +++ b/src/stories/Library/card-list-page/result-pager.scss @@ -1,13 +1,13 @@ .result-pager { &__title { text-align: center; - margin-top: 24px; - margin-bottom: 16px; + margin-top: $s-lg; + margin-bottom: $s-md; } } .result-pager--margin-bottom { - margin-bottom: 100px; + margin-bottom: $s-5xl; margin-top: 0px; } // Override button css (Center + Width) @@ -15,13 +15,13 @@ margin: 0 auto; width: 100%; - @include breakpoint-s { + @include media-query__small { max-width: 253px; } } .result-pager--margin-bottom > .btn-primary { - @include breakpoint-s { + @include media-query__small { margin-bottom: 90px; } } diff --git a/src/stories/Library/card-list-page/search-result-zero.scss b/src/stories/Library/card-list-page/search-result-zero.scss index b6630123a..b7ad035d9 100644 --- a/src/stories/Library/card-list-page/search-result-zero.scss +++ b/src/stories/Library/card-list-page/search-result-zero.scss @@ -1,5 +1,5 @@ .search-result-zero { - border: 1px dashed $c-text-secondary-gray; + border: 1px dashed $color__text-secondary-gray; height: 240px; display: grid; place-content: center; diff --git a/src/stories/Library/colors/color-classes.scss b/src/stories/Library/colors/color-classes.scss deleted file mode 100644 index 512b4b1ef..000000000 --- a/src/stories/Library/colors/color-classes.scss +++ /dev/null @@ -1,197 +0,0 @@ -// *** Global colors *** -// Background -%bg-global-primary, -.bg-global-primary { - background-color: $c-global-primary; -} - -%bg-global-secondary, -.bg-global-secondary { - background-color: $c-global-secondary; -} - -%bg-global-tertiary-1, -.bg-global-tertiary-1 { - background-color: $c-global-tertiary-1; -} - -%bg-global-tertiary-2, -.bg-global-tertiary-2 { - background-color: $c-global-tertiary-2; -} - -// Border -%border-global-primary, -.border-global-primary { - border: 1px solid $c-global-primary; - stroke: $c-global-primary; -} - -%border-global-secondary, -.border-global-secondary { - border: 1px solid $c-global-secondary; - stroke: $c-global-secondary; -} - -%border-global-tertiary-1, -.border-global-tertiary-1 { - border: 1px solid $c-global-tertiary-1; - stroke: $c-global-tertiary-1; -} - -%border-global-tertiary-2, -.border-global-tertiary-2 { - border: 1px solid $c-global-tertiary-2; - stroke: $c-global-tertiary-2; -} - -// *** Identity colors *** -// Background -%bg-identity-primary, -.bg-identity-primary { - background-color: $c-identity-primary; - fill: $c-identity-primary; -} - -// Border -%border-identity-primary, -.border-identity-primary { - border: 1px solid $c-identity-primary; - stroke: $c-identity-primary; -} - -// Color -%color-identity-primary, -.color-identity-primary { - color: $c-identity-primary; -} - -%color-secondary-gray, -.color-secondary-gray { - color: $c-text-secondary-gray; -} - -// *** Identity color tints *** -// Background -%bg-identity-tint-20, -.bg-identity-tint-20 { - background-color: var(--tint-color-20); -} - -%bg-identity-tint-40, -.bg-identity-tint-40 { - background-color: var(--tint-color-40); -} - -%bg-identity-tint-80, -.bg-identity-tint-80 { - background-color: var(--tint-color-80); -} - -%bg-identity-tint-100, -.bg-identity-tint-100 { - background-color: var(--tint-color-100); -} - -%bg-identity-tint-120, -.bg-identity-tint-120 { - background-color: var(--tint-color-120); -} - -// *** Text colors *** -// Color -%color-primary-white, -.color-primary-white { - color: $c-text-primary-white; -} - -%color-primary-black, -.color-primary-black { - color: $c-text-primary-black; -} - -%border-primary-white, -border-primary-white { - border: 1px solid $c-text-primary-white; - stroke: $c-text-primary-white; -} - -%border-primary-black, -.border-primary-black { - border: 1px solid $c-text-primary-black; - stroke: $c-text-primary-black; -} - -%border-secondary-gray, -.border-secondary-gray { - border: 1px solid $c-text-secondary-gray; - stroke: $c-text-secondary-gray; -} - -// Only used internally for bg-color in Colors comp. -%bg-color-primary-white, -.bg-color-primary-white { - background-color: $c-text-primary-white; -} - -%bg-color-primary-black, -.bg-color-primary-black { - background-color: $c-text-primary-black; -} - -%bg-color-secondary-gray, -.bg-color-secondary-gray { - background-color: $c-text-secondary-gray; -} - -// *** Signal colors *** -// Background -%bg-signal-success, -.bg-signal-success { - background-color: $c-signal-success; -} - -%bg-signal-aware, -.bg-signal-aware { - background-color: $c-signal-aware; -} - -%bg-signal-alert, -.bg-signal-alert { - background-color: $c-signal-alert; -} - -// Border -%border-signal-success, -.border-signal-success { - border: 1px solid $c-signal-success; - stroke: $c-signal-success; -} - -%border-signal-aware, -.border-signal-aware { - border: 1px solid $c-signal-aware; - stroke: $c-signal-aware; -} - -%border-signal-alert, -.border-signal-alert { - border: 1px solid $c-signal-alert; - stroke: $c-signal-alert; -} - -// Color -%color-signal-success, -.color-signal-success { - color: $c-signal-success; -} - -%color-signal-aware, -.color-signal-aware { - color: $c-signal-aware; -} - -%color-signal-alert, -.color-signal-alert { - color: $c-signal-alert; -} diff --git a/src/stories/Library/colors/color-variables.scss b/src/stories/Library/colors/color-variables.scss deleted file mode 100644 index abd7f83e1..000000000 --- a/src/stories/Library/colors/color-variables.scss +++ /dev/null @@ -1,50 +0,0 @@ -// Global colors -$c-global-primary: #f6f5f0; -$c-global-secondary: #eee9e5; -$c-global-tertiary-1: #dbdbdb; -$c-global-tertiary-2: #707070; -$c-identity-primary: hsl( - var(--identity-color-h), - var(--identity-color-s), - var(--identity-color-l), - 1 -); - -$c-text-primary-white: #fff; -$c-text-primary-black: #000; -$c-text-secondary-gray: #484848; - -$c-signal-success: #068802; -$c-signal-aware: #f7bf42; -$c-signal-alert: #d5364a; - -// *** CSS variables for identity color tints *** -:root { - // Identity color tones - --identity-color-h: 145; - --identity-color-s: 22%; - --identity-color-l: 35%; - --identity-color: var(--identity-color-h), var(--identity-color-s), - var(--identity-color-l); - --tint-color-20: hsl(var(--identity-color), 0.2); - --tint-color-40: hsl(var(--identity-color), 0.4); - --tint-color-80: hsl(var(--identity-color), 0.8); - --tint-color-100: hsl(var(--identity-color), 1); - --tint-color-120: hsl( - var(--identity-color-h), - calc(var(--identity-color-s) - 1%), - calc(var(--identity-color-l) - 8%) - ); - - // Global colors - --c-global-primary: #f6f5f0; - --c-global-secondary: #eee9e5; - --c-global-tertiary-1: #dbdbdb; - --c-global-tertiary-2: #949494; - --c-text-primary-white: #fff; - --c-text-primary-black: #000; - --c-text-secondary-gray: #484848; - --c-signal-success: #068802; - --c-signal-aware: #f7bf42; - --c-signal-alert: #d5364a; -} diff --git a/src/stories/Library/counter/counter.scss b/src/stories/Library/counter/counter.scss index a72c20cc0..e5401bb4a 100644 --- a/src/stories/Library/counter/counter.scss +++ b/src/stories/Library/counter/counter.scss @@ -6,15 +6,17 @@ justify-content: center; align-items: center; border-radius: 100%; -} -.counter__value { - font-family: "Noto Sans JP", sans-serif; + font-family: $font__body; font-size: 22px; font-style: normal; font-weight: 400; line-height: 26px; letter-spacing: 0; +} + +.counter__value { + line-height: 1em; text-align: center; img { @@ -23,12 +25,9 @@ } .counter__label { - font-family: "Noto Sans JP", sans-serif; font-size: 12px; - font-style: normal; font-weight: 500; line-height: 19px; - letter-spacing: 0; text-align: center; text-transform: capitalize; } diff --git a/src/stories/Library/cover/cover.scss b/src/stories/Library/cover/cover.scss index 2c732d2d8..b6992c411 100644 --- a/src/stories/Library/cover/cover.scss +++ b/src/stories/Library/cover/cover.scss @@ -13,35 +13,35 @@ $MATERIAL_XLARGE_DESKTOP: 460px; &-xsmall { border-radius: 3px; height: $MATERIAL_XSMALL_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_XSMALL_DESKTOP; } } &-small { height: $MATERIAL_SMALL_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_SMALL_DESKTOP; } } &-medium { height: $MATERIAL_LARGE_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_LARGE_DESKTOP; } } &-large { height: $MATERIAL_LARGE_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_LARGE_DESKTOP; } } &-xlarge { height: $MATERIAL_XLARGE_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_XLARGE_DESKTOP; } } @@ -83,7 +83,7 @@ a.cover { } &.cover__img--shadow { - filter: drop-shadow(0 4px 40px rgb(0 0 0 / 15%)); + filter: drop-shadow(0 $s-xs 40px rgb(0 0 0 / 15%)); } } // In this case we do not want to use kebab case diff --git a/src/stories/Library/dashboard-page/dashboard-page.scss b/src/stories/Library/dashboard-page/dashboard-page.scss index a4515f34d..3275f20d9 100644 --- a/src/stories/Library/dashboard-page/dashboard-page.scss +++ b/src/stories/Library/dashboard-page/dashboard-page.scss @@ -1,9 +1,9 @@ .dashboard-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; position: relative; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/disclosure/disclosure.scss b/src/stories/Library/disclosure/disclosure.scss index 58f7954b1..3e413109a 100644 --- a/src/stories/Library/disclosure/disclosure.scss +++ b/src/stories/Library/disclosure/disclosure.scss @@ -1,13 +1,13 @@ .disclosure { width: auto; - border: solid 1px $c-global-tertiary-1; + border: solid 1px $color__global-tertiary-1; border-top: none; &:first-of-type { - border-top: solid 1px $c-global-tertiary-1; + border-top: solid 1px $color__global-tertiary-1; } - @include breakpoint-s { + @include media-query__small { margin: 0 133px; } @@ -15,7 +15,7 @@ width: 100%; margin: 0; - @include breakpoint-s { + @include media-query__small { margin: 0; } } @@ -28,13 +28,13 @@ cursor: pointer; padding-left: $s-md; - @include breakpoint-s { + @include media-query__small { padding-left: $s-xl; } &.disclosure__headline--no-padding { padding-left: $s-xl; - @include breakpoint-s { + @include media-query__small { padding-left: $s-2xl; } } @@ -46,14 +46,14 @@ max-height: 84px; overflow-y: hidden; - @include breakpoint-s { + @include media-query__small { width: 685px; } &--shorter { width: 197px; - @include breakpoint-s { + @include media-query__small { width: 404px; } } @@ -67,7 +67,7 @@ justify-content: center; margin-right: $s-md; - @include breakpoint-s { + @include media-query__small { margin-left: -#{$s-sm}; margin-right: $s-lg; } @@ -81,7 +81,7 @@ margin-left: auto; margin-right: $s-md; - @include breakpoint-s { + @include media-query__small { margin-right: $s-xl; } diff --git a/src/stories/Library/dropdown/dropdown.scss b/src/stories/Library/dropdown/dropdown.scss index 0a89d0c09..5632985d4 100644 --- a/src/stories/Library/dropdown/dropdown.scss +++ b/src/stories/Library/dropdown/dropdown.scss @@ -1,17 +1,17 @@ .dropdown { width: 100%; position: relative; - border-color: $c-text-primary-black; + border-color: $color__text-primary-black; &--grey-borders { - border-color: $c-global-tertiary-1; + border-color: $color__global-tertiary-1; } } .dropdown__desktop { width: 100%; - @include breakpoint-m { + @include media-query__medium { width: 50%; } } @@ -24,7 +24,7 @@ height: 50px; cursor: pointer; background-color: transparent; - color: $c-text-primary-black; + color: $color__text-primary-black; border-radius: 0; border: 1px solid; border-color: inherit; @@ -32,11 +32,11 @@ text-overflow: ellipsis; white-space: nowrap; - @extend %text-button-placeholder; + @include typography($typo__button); &:focus { outline: none; - border-color: $c-text-primary-black; + border-color: $color__text-primary-black; } } @@ -45,7 +45,7 @@ background-color: #f9f9f9; height: 400px; - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); } .dropdown__arrows { @@ -64,19 +64,18 @@ } .dropdown__arrow--bottom { - margin-top: 4px; + margin-top: $s-xs; transform: rotateZ(180deg); } .dropdown__select--inline { - @extend %text-tags; + @include typography($typo__tags); height: 100%; padding: $s-sm $s-md; min-width: 200px; } .dropdown__select--inline-body-font { - @extend %text-body-medium-regular-placeholder; height: 100%; padding: $s-sm $s-3xl $s-sm $s-md; min-width: 200px; diff --git a/src/stories/Library/event-description/event-description.scss b/src/stories/Library/event-description/event-description.scss index 695089e31..86a6b92be 100644 --- a/src/stories/Library/event-description/event-description.scss +++ b/src/stories/Library/event-description/event-description.scss @@ -1,7 +1,9 @@ .event-description { - @include container(medium); padding: $s-md; - @include breakpoint-s { + max-width: $layout__max-width; + margin: 0 auto; + + @include media-query__small { padding: $s-xl $s-4xl; display: grid; column-gap: $s-xl; @@ -10,21 +12,22 @@ } .event-description__title { - @extend %text-header-h4; + @include typography($typo__h4); margin-bottom: $s-md; - @include breakpoint-s { + @include media-query__small { grid-column: 1 / -1; margin-bottom: $s-lg; } } .event-description__description { - @extend %text-body-large; + @include typography($typo__body-large); + line-height: 24px; margin-bottom: $s-md; - @include breakpoint-s { + @include media-query__small { line-height: 32px; } } @@ -32,7 +35,7 @@ .event-description__links { margin-bottom: $s-2xl; - @include breakpoint-s { + @include media-query__small { margin-bottom: 0; } } diff --git a/src/stories/Library/event-header/event-header.scss b/src/stories/Library/event-header/event-header.scss index 5a1e4a563..9ea786a1b 100644 --- a/src/stories/Library/event-header/event-header.scss +++ b/src/stories/Library/event-header/event-header.scss @@ -1,10 +1,12 @@ .event-header { - @include container(medium); - border-bottom: 1px solid $c-global-tertiary-1; + max-width: $layout__max-width; + margin: 0 auto; + + border-bottom: 1px solid $color__global-tertiary-1; display: grid; gap: $s-lg; padding-bottom: $s-2xl; - @include breakpoint-s { + @include media-query__small { grid-template-columns: 2fr 1fr; gap: 0; padding-bottom: 0; @@ -14,7 +16,7 @@ .event-header__content, .event-header__visual { padding: 0 $s-md; - @include breakpoint-s { + @include media-query__small { padding: $s-2xl; } } @@ -29,7 +31,7 @@ ". title ." "btn btn btn"; - @include breakpoint-s { + @include media-query__small { padding-top: $s-3xl; grid-template-columns: 1fr; } @@ -39,26 +41,29 @@ grid-area: tag; width: max-content; margin-bottom: $s-md; - @include breakpoint-s { + @include media-query__small { margin-bottom: $s-lg; } } .event-header__date { + @include typography($typo__h4); + grid-area: date; - @extend %text-header-h4; display: block; margin-bottom: $s-md; - @include breakpoint-s { + @include media-query__small { margin-bottom: $s-sm; } } .event-header__title { + @include typography($typo__h1); + grid-area: title; - @extend %text-header-h1; margin-bottom: $s-xl; - @include breakpoint-s { + + @include media-query__small { margin-bottom: $s-5xl; } } @@ -67,15 +72,15 @@ grid-area: btn; width: 100%; text-decoration: none; - @include breakpoint-s { + @include media-query__small { width: auto; } } .event-header__visual { - @include breakpoint-s { + @include media-query__small { grid-column: 1/2; grid-row: 1/2; - border-right: 1px solid $c-global-tertiary-1; + border-right: 1px solid $color__global-tertiary-1; } } diff --git a/src/stories/Library/image-credited/image-credited.scss b/src/stories/Library/image-credited/image-credited.scss index 12c847caa..10f7a7cec 100644 --- a/src/stories/Library/image-credited/image-credited.scss +++ b/src/stories/Library/image-credited/image-credited.scss @@ -3,7 +3,7 @@ } .image-credited__info { - @extend %text-small-caption; + @include typography($typo__small-caption); margin-top: $s-md; display: flex; justify-content: space-between; diff --git a/src/stories/Library/input-with-dropdown/input-with-dropdown.scss b/src/stories/Library/input-with-dropdown/input-with-dropdown.scss index 2f38d3418..8cdac5f80 100644 --- a/src/stories/Library/input-with-dropdown/input-with-dropdown.scss +++ b/src/stories/Library/input-with-dropdown/input-with-dropdown.scss @@ -6,22 +6,22 @@ margin-bottom: $s-md; padding-right: 48px; - @include breakpoint-s { + @include media-query__small { margin-bottom: $s-lg; flex-direction: row; - padding-right: 0px; + padding-right: 0; height: 48px; } - @include breakpoint-m { + @include media-query__medium { margin-bottom: $s-lg; } &__input { - @extend %text-body-small-regular; + @include typography($typo__body-small); width: 100%; min-height: 48px; - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; padding-left: $s-md; background-color: transparent; } @@ -32,7 +32,7 @@ min-height: 48px; margin-top: -1px; - @include breakpoint-s { + @include media-query__small { width: 200px; margin: 0 0 0 -1px; } @@ -45,7 +45,7 @@ top: 12px; right: $s-sm; - @include breakpoint-s { + @include media-query__small { margin: 0 $s-md $s-lg $s-md; position: relative; } diff --git a/src/stories/Library/instant-loan/instant-loan.scss b/src/stories/Library/instant-loan/instant-loan.scss index b61f54285..8d3ef42a3 100644 --- a/src/stories/Library/instant-loan/instant-loan.scss +++ b/src/stories/Library/instant-loan/instant-loan.scss @@ -3,11 +3,11 @@ } .instant-loan-summary { - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; display: flex; flex-direction: column; gap: $s-lg; - @include breakpoint-s { + @include media-query__small { flex-direction: row; } // Flips arrow icon with class .instant-loan-arrow @@ -31,7 +31,7 @@ } .instant-loan-branch { - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; min-height: $s-4xl; display: grid; grid-template-columns: 1fr max-content 1fr; diff --git a/src/stories/Library/layout/Spacing.stories.tsx b/src/stories/Library/layout/Spacing.stories.tsx deleted file mode 100644 index 0cc23ccc6..000000000 --- a/src/stories/Library/layout/Spacing.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { withDesign } from "storybook-addon-designs"; -import { Meta } from "@storybook/react"; - -import { Spacing } from "./Spacing"; - -export default { - title: "Library / Spacing", - component: Spacing, - decorators: [withDesign], - parameters: { - design: { - type: "figma", - url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=255%3A2080", - }, - }, -} as Meta; - -export const Default = () => ; diff --git a/src/stories/Library/layout/Spacing.tsx b/src/stories/Library/layout/Spacing.tsx deleted file mode 100644 index 9fcd92389..000000000 --- a/src/stories/Library/layout/Spacing.tsx +++ /dev/null @@ -1,97 +0,0 @@ -const scaleValues = [8, 16, 24, 32, 48, 64, 80, 96, 112]; - -const spaceClasses = [ - { - classPrefix: "m", - classProperty: "margin", - }, - { - classPrefix: "mx", - classProperty: "margin-left, margin-right", - }, - { - classPrefix: "my", - classProperty: "margin-top, margin-bottom", - }, - { - classPrefix: "ml", - classProperty: "margin-left", - }, - { - classPrefix: "mr", - classProperty: "margin-right", - }, - { - classPrefix: "mb", - classProperty: "margin-bottom", - }, - { - classPrefix: "mt", - classProperty: "margin-top", - }, - { - classPrefix: "p", - classProperty: "padding", - }, - { - classPrefix: "px", - classProperty: "padding-left, padding-right", - }, - { - classPrefix: "py", - classProperty: "padding-top, padding-bottom", - }, - { - classPrefix: "pl", - classProperty: "padding-left", - }, - { - classPrefix: "pr", - classProperty: "padding-right", - }, - { - classPrefix: "pb", - classProperty: "padding-bottom", - }, - { - classPrefix: "pt", - classProperty: "padding-top", - }, -]; - -export const Spacing = () => { - return ( -
-
-

Scale Values

-
- {scaleValues.map((scaleValue) => ( -
-
{scaleValue}px
-
-
- ))} -
-
-
-

CSS Classes / CSS properties

-
- {spaceClasses.map((spaceClass) => ( -
-
- 
-                  {`.${spaceClass.classPrefix}-[SCALE_VALUE]`}
-
-
-
- {spaceClass.classProperty} -
-
- ))} -
-
-
- ); -}; - -export default Spacing; diff --git a/src/stories/Library/layout/spacing.scss b/src/stories/Library/layout/spacing.scss deleted file mode 100644 index ad745166d..000000000 --- a/src/stories/Library/layout/spacing.scss +++ /dev/null @@ -1,121 +0,0 @@ -$s-4: 4; -$s-8: 8; -$s-16: 16; -$s-22: 22; -$s-24: 24; -$s-32: 32; -$s-35: 35; -$s-48: 48; -$s-64: 64; -$s-75: 75; -$s-80: 80; -$s-96: 96; -$s-112: 112; -$s-215: 215; - -$s-xs: 4px; -$s-sm: 8px; -$s-md: 16px; -$s-lg: 24px; -$s-xl: 32px; -$s-2xl: 44px; -$s-3xl: 60px; -$s-4xl: 80px; -$s-5xl: 100px; -$s-6xl: 112px; -$s-7xl: 215px; - -$spacers: ( - $s-4, - $s-8, - $s-16, - $s-22, - $s-24, - $s-32, - $s-35, - $s-48, - $s-64, - $s-80, - $s-96, - $s-112, - $s-215 -); - -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@each $space in $spacers { - %m-#{$space}, - .m-#{$space} { - margin: #{$space}px; - } - - %mx-#{$space}, - .mx-#{$space} { - margin-left: #{$space}px; - margin-right: #{$space}px; - } - - %my-#{$space}, - .my-#{$space} { - margin-top: #{$space}px; - margin-bottom: #{$space}px; - } - - %ml-#{$space}, - .ml-#{$space} { - margin-left: #{$space}px; - } - - %mr-#{$space}, - .mr-#{$space} { - margin-right: #{$space}px; - } - - %mb-#{$space}, - .mb-#{$space} { - margin-bottom: #{$space}px; - } - - %mt-#{$space}, - .mt-#{$space} { - margin-top: #{$space}px; - } - - %p-#{$space}, - .p-#{$space} { - padding: #{$space}px; - } - - %px-#{$space}, - .px-#{$space} { - padding-left: #{$space}px; - padding-right: #{$space}px; - } - - %py-#{$space}, - .py-#{$space} { - padding-top: #{$space}px; - padding-bottom: #{$space}px; - } - - %pl-#{$space}, - .pl-#{$space} { - padding-left: #{$space}px; - } - - %pr-#{$space}, - .pr-#{$space} { - padding-right: #{$space}px; - } - - %pb-#{$space}, - .pb-#{$space} { - padding-bottom: #{$space}px; - } - - %pt-#{$space}, - .pt-#{$space} { - padding-top: #{$space}px; - } -} -/* stylelint-enable plugin/stylelint-bem-namics */ diff --git a/src/stories/Library/link-filters/link-filters.scss b/src/stories/Library/link-filters/link-filters.scss index 8eddb893c..1bcabbf24 100644 --- a/src/stories/Library/link-filters/link-filters.scss +++ b/src/stories/Library/link-filters/link-filters.scss @@ -1,6 +1,6 @@ .link-filters { display: flex; - grid-column-gap: 24px; + grid-column-gap: $s-lg; } .link-filters__tag-wrapper:last-child { @@ -9,10 +9,8 @@ } .link-filters__tag { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-small); - font-size: 14px; - line-height: 18px; text-transform: uppercase; text-decoration: none; padding-bottom: 0; @@ -27,12 +25,11 @@ } .link-filters__counter { - font-size: 14px; - line-height: 18px; + @include typography($typo__body-small); + position: relative; top: -8px; - padding-left: 8px; - @extend %text-body-medium-regular-placeholder; + padding-left: $s-sm; } .link-filters__tag:active { diff --git a/src/stories/Library/links/links.scss b/src/stories/Library/links/links.scss index 6adf20761..caa02d2aa 100644 --- a/src/stories/Library/links/links.scss +++ b/src/stories/Library/links/links.scss @@ -1,41 +1,13 @@ -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@mixin link($className) { - %#{$className}, - .#{$className} { - text-decoration: none; - color: $c-text-primary-black; - display: inline-block; - width: fit-content; - - @extend %text-body-medium-regular-placeholder; - } - // Hide arrow - %#{$className}::after, - .#{$className}::after { - display: block; - content: ""; - border-bottom: solid 1px; - transform: scaleX(1); - transition: transform 300ms ease-in-out; - transform-origin: 100% 50%; - padding-bottom: 2px; - } - // Show arrow on hover - %#{$className}:hover::after, - .#{$className}:hover::after { - transform: scaleX(0); - transform-origin: 100% 0%; - } +.link-tag { + @extend %link-tag; } -@include link("link-tag"); -@include link("button-link"); - .button-link { - color: $c-text-primary-white; + @extend %button-link; + + color: $color__text-primary-white; } .button-link--bright { - color: $c-text-primary-black; + color: $color__text-primary-black; } diff --git a/src/stories/Library/list-buttons/list-buttons.scss b/src/stories/Library/list-buttons/list-buttons.scss index 95b9b11da..94d141bd7 100644 --- a/src/stories/Library/list-buttons/list-buttons.scss +++ b/src/stories/Library/list-buttons/list-buttons.scss @@ -1,7 +1,7 @@ .dpl-list-buttons { display: flex; justify-content: space-between; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); } .dpl-list-buttons__header { @@ -14,11 +14,11 @@ } .dpl-list-buttons__power { + @include typography($typo__small-caption); + margin-left: 2px; height: 30px; vertical-align: super; - font-size: 12px; - @extend %text-body-medium-regular-placeholder; } .dpl-list-buttons__buttons { @@ -28,14 +28,14 @@ } .dpl-list-buttons__buttons__button { - @extend %ml-32; + margin-left: $s-xl; display: flex; } .dpl-list-buttons__buttons__button--hide-on-mobile { display: none; - @include breakpoint-s { + @include media-query__small { display: flex; } } diff --git a/src/stories/Library/loan-list-page/loan-list-page.scss b/src/stories/Library/loan-list-page/loan-list-page.scss index 89ca5c3c6..2f6c596b0 100644 --- a/src/stories/Library/loan-list-page/loan-list-page.scss +++ b/src/stories/Library/loan-list-page/loan-list-page.scss @@ -1,9 +1,9 @@ .loan-list-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md $s-md $s-4xl $s-md; position: sticky; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/logo/logo.scss b/src/stories/Library/logo/logo.scss index 90f038398..eb7f1a969 100644 --- a/src/stories/Library/logo/logo.scss +++ b/src/stories/Library/logo/logo.scss @@ -1,14 +1,5 @@ .logo-fallback { - font-family: "Noto Sans JP", sans-serif; - font-size: 14px; - font-style: normal; - line-height: 18px; - text-align: left; - - @include breakpoint-m { - font-size: 24px; - line-height: 27px; - } + @include typography($typo__body-small); } .logo-fallback__text-name { diff --git a/src/stories/Library/material-card/material-card.scss b/src/stories/Library/material-card/material-card.scss index b1deb46bf..d232675a6 100644 --- a/src/stories/Library/material-card/material-card.scss +++ b/src/stories/Library/material-card/material-card.scss @@ -1,5 +1,5 @@ .material-card { - padding: 16px; + padding: $s-md; max-width: 500px; text-decoration: none; height: 100%; @@ -15,21 +15,21 @@ justify-content: center; .cover { - margin-top: 8px; + margin-top: $s-sm; } } .material-card__texts { - margin-top: 16px; + margin-top: $s-md; display: grid; - @include breakpoint-s { - margin-top: 32px; + @include media-query__small { + margin-top: $s-xl; } } .material-card__description { - @extend %text-body-small-regular; + @include typography($typo__body-small); white-space: nowrap; overflow: hidden; @@ -38,5 +38,7 @@ } .material-card__title { - @extend %text-body-small-medium; + @include typography($typo__body-small); + + font-weight: $font__weight--semi-bold; } diff --git a/src/stories/Library/material-description/material-description.scss b/src/stories/Library/material-description/material-description.scss index 3e10ced58..0cd887492 100644 --- a/src/stories/Library/material-description/material-description.scss +++ b/src/stories/Library/material-description/material-description.scss @@ -3,8 +3,8 @@ padding-top: $s-3xl; padding-bottom: $s-2xl; - & > h2.text-header-h4 { - font-size: $s-lg; + > h2.text-header-h4 { + font-size: 24px; } &__content { @@ -12,7 +12,7 @@ line-height: 160%; } - @include breakpoint-m { + @include media-query__medium { padding-top: $s-4xl; padding-left: $s-7xl; padding-bottom: $s-5xl; diff --git a/src/stories/Library/material-header/material-header.scss b/src/stories/Library/material-header/material-header.scss index 354305a84..778b2a9af 100644 --- a/src/stories/Library/material-header/material-header.scss +++ b/src/stories/Library/material-header/material-header.scss @@ -1,14 +1,14 @@ .material-header { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; padding-bottom: 56px; - @include breakpoint-m { + @include media-query__medium { min-height: 800px; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 0; } - @include breakpoint-l { + @include media-query__large { min-height: 650px; } @@ -22,19 +22,19 @@ display: grid; place-content: center; - @include breakpoint-m { + @include media-query__medium { padding: 0; } } &__content { - padding: 16px; + padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-4xl $s-2xl $s-4xl $s-7xl; grid-column: 1/2; grid-row: 1/2; - border-right: 1px solid $c-global-tertiary-1; + border-right: 1px solid $color__global-tertiary-1; } & > h1 { @@ -55,13 +55,13 @@ // Spacing between buttons &__button > * + * { - margin-top: 8px; + margin-top: $s-sm; } // set all buttons to the full width &__button > * { width: 100%; - @include breakpoint-m { + @include media-query__medium { width: 346px; max-width: 346px; } diff --git a/src/stories/Library/material-header/material-periodical-select.scss b/src/stories/Library/material-header/material-periodical-select.scss index 9b6f26448..c79ba5265 100644 --- a/src/stories/Library/material-header/material-periodical-select.scss +++ b/src/stories/Library/material-header/material-periodical-select.scss @@ -2,13 +2,13 @@ $icon-position: 10px; .material-periodical { display: flex; - gap: 24px; + gap: $s-lg; margin-bottom: 48px; } .material-periodical-select { display: flex; - gap: 8px; + gap: $s-sm; &__border-container { position: relative; diff --git a/src/stories/Library/multiselect/multiselect.scss b/src/stories/Library/multiselect/multiselect.scss index 8bab09bf3..b2cc4f0c8 100644 --- a/src/stories/Library/multiselect/multiselect.scss +++ b/src/stories/Library/multiselect/multiselect.scss @@ -6,10 +6,10 @@ display: flex; align-items: center; flex-direction: row; - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; &__selected { - @extend %text-button-placeholder; + @include typography($typo__button); width: 100%; white-space: nowrap; overflow: hidden; @@ -19,10 +19,10 @@ } &__opener { - width: 44px; - min-width: 44px; + width: $s-2xl; + min-width: $s-2xl; height: 48px; - border-left: 1px solid $c-global-tertiary-1; + border-left: 1px solid $color__global-tertiary-1; display: flex; align-items: center; cursor: pointer; @@ -33,16 +33,16 @@ } &__options { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); width: 100%; padding: $s-md 0; position: absolute; top: 47px; - background-color: $c-global-primary; + background-color: $color__global-primary; z-index: 1; display: flex; flex-direction: column; - outline: 1px solid $c-global-tertiary-1; + outline: 1px solid $color__global-tertiary-1; } &__option { @@ -53,7 +53,7 @@ cursor: pointer; &.multiselect__option--highlighted { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } @@ -64,7 +64,7 @@ } &__caption { - @extend %text-small-caption; + @include typography($typo__small-caption); width: 100%; height: $s-lg; margin-bottom: $s-sm; diff --git a/src/stories/Library/number/number.scss b/src/stories/Library/number/number.scss index 95fba8b72..053e0f330 100644 --- a/src/stories/Library/number/number.scss +++ b/src/stories/Library/number/number.scss @@ -7,27 +7,27 @@ align-items: center; border: 2px solid transparent; border-radius: 100%; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); - @include breakpoint-s { + @include media-query__small { min-width: 56px; width: 56px; height: 56px; } &--danger { - border-color: $c-signal-alert; + border-color: $color__signal-alert; } &--warning { - border-color: $c-signal-aware; + border-color: $color__signal-aware; } &--info { - border-color: $c-signal-success; + border-color: $color__signal-success; } &--neutral { - border-color: $c-text-secondary-gray; + border-color: $color__text-secondary-gray; } } diff --git a/src/stories/Library/patron-info/patron-info.scss b/src/stories/Library/patron-info/patron-info.scss index db165a694..82512ee3a 100644 --- a/src/stories/Library/patron-info/patron-info.scss +++ b/src/stories/Library/patron-info/patron-info.scss @@ -1,29 +1,29 @@ .dpl-patron-info { - @extend %color-secondary-gray; - @extend %bg-global-secondary; - @extend %pb-32; + color: $color__text-secondary-gray; + background-color: $color__global-secondary; + padding-bottom: $s-xl; &__label { - @extend %text-body-large; - @extend %ml-32; - @extend %pt-32; + @include typography($typo__body-large); + margin-left: $s-xl; + padding-top: $s-xl; } &__text { - @extend %text-body-medium-medium; - @extend %ml-32; + @include typography($typo__body-medium); + margin-left: $s-xl; } } .patron-buttons { display: flex; - @extend %mt-32; + margin-top: $s-xl; } .contact-info-flex { display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { flex-direction: row; } } @@ -31,7 +31,7 @@ .patron-page-info { width: 100%; - @include breakpoint-s { + @include media-query__small { width: 75%; } } @@ -39,35 +39,35 @@ .patron__input { display: flex; flex-direction: column; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); label { - @extend %text-body-medium-medium; - color: $c-text-secondary-gray; + @include typography($typo__body-medium); + color: $color__text-secondary-gray; } input { background-color: transparent; border: none; - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; height: 40px; &:focus { - border-bottom-color: $c-text-primary-black; + border-bottom-color: $color__text-primary-black; outline: none; } } &__description { - color: $c-text-secondary-gray; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__text-secondary-gray; + @include typography($typo__body-small); + margin-top: $s-sm; } &__validation { - color: $c-signal-alert; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__signal-alert; + @include typography($typo__body-small); + margin-top: $s-sm; } input::-webkit-outer-spin-button, @@ -84,12 +84,12 @@ width: 100%; &:first-of-type { - @include breakpoint-s { + @include media-query__small { margin-right: $s-lg; } } - @include breakpoint-m { + @include media-query__medium { width: 50%; } } diff --git a/src/stories/Library/patron-page/patron-page.scss b/src/stories/Library/patron-page/patron-page.scss index aa5873278..a73b88d37 100644 --- a/src/stories/Library/patron-page/patron-page.scss +++ b/src/stories/Library/patron-page/patron-page.scss @@ -1,8 +1,8 @@ .dpl-patron-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/pause-reservation/pause-reservation.scss b/src/stories/Library/pause-reservation/pause-reservation.scss index 3e5f93e86..e5396930a 100644 --- a/src/stories/Library/pause-reservation/pause-reservation.scss +++ b/src/stories/Library/pause-reservation/pause-reservation.scss @@ -1,10 +1,10 @@ .dpl-pause-reservation-component { - background-color: $c-global-secondary; + background-color: $color__global-secondary; min-height: 72px; position: relative; display: flex; align-items: center; - @extend %p-16; + padding: $s-md; @extend %pagefold-parent--medium; &__pagefold { @@ -20,25 +20,25 @@ justify-content: center; gap: $s-sm; - @include breakpoint-xs { + @include media-query__x-small { justify-content: start; } &__reservation-icon { justify-content: center; - @include breakpoint-s { + @include media-query__small { padding-left: 48px; } } &__text { - @extend %text-body-large; + @include typography($typo__body-large); } &__badge { - background-color: $c-global-primary; + background-color: $color__global-primary; padding: $s-xs $s-sm; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); } &__button { @@ -46,7 +46,7 @@ flex: 1; justify-content: center; - @include breakpoint-xs { + @include media-query__x-small { justify-content: flex-end; } } diff --git a/src/stories/Library/pincode-container/pincode-container.scss b/src/stories/Library/pincode-container/pincode-container.scss index 46fb958fe..ebbf41be9 100644 --- a/src/stories/Library/pincode-container/pincode-container.scss +++ b/src/stories/Library/pincode-container/pincode-container.scss @@ -2,15 +2,15 @@ display: flex; flex-wrap: wrap; - @include breakpoint-m { + @include media-query__medium { flex-wrap: nowrap; .dpl-input:first-of-type { - margin-right: 8px; + margin-right: $s-sm; } .dpl-input:last-of-type { - margin-left: 8px; + margin-left: $s-sm; } } } diff --git a/src/stories/Library/progress-bar/progress-bar.scss b/src/stories/Library/progress-bar/progress-bar.scss index 667e55977..56796fc11 100644 --- a/src/stories/Library/progress-bar/progress-bar.scss +++ b/src/stories/Library/progress-bar/progress-bar.scss @@ -2,12 +2,12 @@ &__progress-bar { display: flex; width: 100%; - height: 16px; + height: $s-md; } &__header { display: flex; justify-content: space-between; - column-gap: 8px; + column-gap: $s-sm; } } diff --git a/src/stories/Library/promo-bar/promo-bar.scss b/src/stories/Library/promo-bar/promo-bar.scss index 0c5d6281a..895b36cce 100644 --- a/src/stories/Library/promo-bar/promo-bar.scss +++ b/src/stories/Library/promo-bar/promo-bar.scss @@ -1,6 +1,6 @@ .promo-bar { min-height: $s-2xl; - background-color: $c-global-secondary; + background-color: $color__global-secondary; display: flex; align-items: center; gap: $s-md; @@ -10,7 +10,7 @@ } &.promo-bar--dark { - color: $c-text-primary-white; + color: $color__text-primary-white; background-color: #5a5f63; } } diff --git a/src/stories/Library/recommenders/recommenders.scss b/src/stories/Library/recommenders/recommenders.scss index 954691338..e2a586c5f 100644 --- a/src/stories/Library/recommenders/recommenders.scss +++ b/src/stories/Library/recommenders/recommenders.scss @@ -1,16 +1,16 @@ .recommender { - background-color: $c-global-tertiary-2; - color: $c-text-primary-white; - border-color: $c-text-secondary-gray; + background-color: $color__global-tertiary-2; + color: $color__text-primary-white; + border-color: $color__text-secondary-gray; &--bright { - background-color: $c-global-primary; - color: $c-text-primary-black; - border-color: $c-global-tertiary-1; + background-color: $color__global-primary; + color: $color__text-primary-black; + border-color: $color__global-tertiary-1; } /* stylelint-disable max-nesting-depth */ &--triple-desktop { - @include breakpoint-m { + @include media-query__medium { .simple-material { &:last-of-type { display: none; @@ -20,7 +20,7 @@ } &--padding-desktop { - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } @@ -29,7 +29,7 @@ text-align: center; padding: $s-lg; - @include breakpoint-m { + @include media-query__medium { padding-bottom: $s-6xl; } } @@ -38,7 +38,7 @@ text-align: left; padding-left: $s-md; - @include breakpoint-m { + @include media-query__medium { padding-left: $s-4xl; } } @@ -56,7 +56,7 @@ grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; - @include breakpoint-m { + @include media-query__medium { grid-template-columns: 33.33% 33.33% 33.33%; } } @@ -66,14 +66,14 @@ grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; - @include breakpoint-m { + @include media-query__medium { grid-template-columns: 25% 25% 25% 25%; } } } .simple-material { - border: 1px solid $c-text-secondary-gray; + border: 1px solid $color__text-secondary-gray; padding: 30px; display: flex; width: 100%; @@ -81,7 +81,7 @@ height: 350px; &--bright { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; } &__favourite { @@ -106,7 +106,7 @@ } &__title { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); text-decoration: none; display: block; overflow: hidden; @@ -120,7 +120,7 @@ } &__author { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); font-weight: 500; overflow: hidden; white-space: nowrap; diff --git a/src/stories/Library/reservation-list-page/reservation-list-page.scss b/src/stories/Library/reservation-list-page/reservation-list-page.scss index 1810ac654..d24a986ca 100644 --- a/src/stories/Library/reservation-list-page/reservation-list-page.scss +++ b/src/stories/Library/reservation-list-page/reservation-list-page.scss @@ -1,8 +1,8 @@ .reservation-list-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/review/review.scss b/src/stories/Library/review/review.scss index 567867704..b673b7edb 100644 --- a/src/stories/Library/review/review.scss +++ b/src/stories/Library/review/review.scss @@ -9,7 +9,7 @@ } &__meta { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } &__heart { @@ -23,12 +23,13 @@ } &__headline { - color: $c-text-secondary-gray; - @extend %text-small-caption-bold; + color: $color__text-secondary-gray; + @include typography($typo__small-caption); + font-weight: 700; } &__body { max-width: 545px; - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } } diff --git a/src/stories/Library/shadows/shadows.scss b/src/stories/Library/shadows/shadows.scss index 6ce1fd5b4..456162636 100644 --- a/src/stories/Library/shadows/shadows.scss +++ b/src/stories/Library/shadows/shadows.scss @@ -3,10 +3,10 @@ $shadows: "low" "medium" "0px 0px 3px hsla(0deg, 0%, 0%, 0.03), 0 1px 16px hsla(0deg, 0%, 0%, 0.1), 3px 0px 6px hsla(0deg, 0%, 0%, 0.03)", "high" - "0px 0px 3px hsla(0deg, 0%, 0%, 0.04), 0 1px 16px hsla(0deg, 0%, 0%, 0.2), 6px 0px 24px hsla(0deg, 0%, 0%, 0.06)"; + "0px 0px 3px hsla(0deg, 0%, 0%, 0.04), 0 1px 16px hsla(0deg, 0%, 0%, 0.2), 6px 0px 24px hsla(0deg, 0%, 0%, 0.06)"; /* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ +// stylelint-disable plugin/stylelint-bem-namics @each $name, $shadow in $shadows { .shadow-#{$name} { box-shadow: #{$shadow}; @@ -19,4 +19,4 @@ $shadows: "low" } } } -/* stylelint-enable plugin/stylelint-bem-namics */ +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/stories/Library/status-label/status-label.scss b/src/stories/Library/status-label/status-label.scss index 1167a7730..5f62e535d 100644 --- a/src/stories/Library/status-label/status-label.scss +++ b/src/stories/Library/status-label/status-label.scss @@ -1,49 +1,41 @@ .status-label { + @include typography($typo__label); + min-height: 28px; - padding: 0 4px; + padding: 0 $s-xs; display: inline-flex; justify-content: center; align-items: center; - font-size: 10px; - line-height: 11px; //keep text inside when it is wrapped + text-transform: uppercase; + font-weight: $font__weight--semi-bold; - @include breakpoint-s { + @include media-query__small { padding: 0 16px; } &--danger { - @extend %text-button-placeholder; - - background-color: $c-signal-alert; - color: $c-text-primary-white; + background-color: $color__signal-alert; + color: $color__text-primary-white; } &--warning { - @extend %text-button-placeholder; - - background-color: $c-signal-aware; - color: $c-text-secondary-gray; + background-color: $color__signal-aware; + color: $color__text-secondary-gray; } &--info { - @extend %text-button-placeholder; - - background-color: $c-signal-success; - color: $c-text-primary-white; + background-color: $color__signal-success; + color: $color__text-primary-white; } &--neutral { - @extend %text-button-placeholder; - - background-color: $c-global-primary; - color: $c-text-secondary-gray; + background-color: $color__global-primary; + color: $color__text-secondary-gray; } &--outline { - @extend %text-button-placeholder; - background-color: transparent; border: 1px solid #dbdbdb; - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } } diff --git a/src/stories/Library/tag/tag.scss b/src/stories/Library/tag/tag.scss index cf6561375..717c3f1b8 100644 --- a/src/stories/Library/tag/tag.scss +++ b/src/stories/Library/tag/tag.scss @@ -2,22 +2,22 @@ display: inline-flex; justify-content: center; align-items: center; - border: 1px solid $c-global-tertiary-1; - padding: 8px 16px; - @extend %text-tags; + border: 1px solid $color__global-tertiary-1; + padding: $s-sm $s-md; + @include typography($typo__tags); &.tag--fill { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } &.tag--small { - height: 32px; - padding: 0 8px; + height: $s-xl; + padding: 0 $s-sm; } &.tag--large { height: 40px; - padding: 0 16px; + padding: 0 $s-md; } } diff --git a/src/stories/Library/typography/typography.scss b/src/stories/Library/typography/typography.scss deleted file mode 100644 index deb4e5ff5..000000000 --- a/src/stories/Library/typography/typography.scss +++ /dev/null @@ -1,449 +0,0 @@ -// Since we host the fonts ourselves, they may need to be updated in the future -// We use this online open source tool to retrieve fonts & their css definition: https://gwfh.mranftl.com/fonts -/* noto-sans-jp-regular - latin */ -@font-face { - font-display: swap; - font-family: "Noto Sans JP"; - font-style: normal; - font-weight: 400; - src: url("../fonts/noto-sans-jp-v42-latin-regular.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/noto-sans-jp-v42-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* noto-sans-jp-500 - latin */ -@font-face { - font-display: swap; - font-family: "Noto Sans JP"; - font-style: normal; - font-weight: 500; - src: url("../fonts/noto-sans-jp-v42-latin-500.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/noto-sans-jp-v42-latin-500.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* noto-sans-jp-700 - latin */ -@font-face { - font-display: swap; - font-family: "Noto Sans JP"; - font-style: normal; - font-weight: 700; - src: url("../fonts/noto-sans-jp-v42-latin-700.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/noto-sans-jp-v42-latin-700.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* lora-regular - latin */ -@font-face { - font-display: swap; - font-family: "Lora"; - font-style: normal; - font-weight: 400; - src: url("../fonts/lora-v26-latin-regular.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/lora-v26-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* lora-italic - latin */ -@font-face { - font-display: swap; - font-family: "Lora"; - font-style: italic; - font-weight: 400; - src: url("../fonts/lora-v26-latin-italic.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/lora-v26-latin-italic.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -/* gochi-hand-regular - latin */ -@font-face { - font-display: swap; - font-family: "Gochi Hand"; - font-style: normal; - font-weight: 400; - src: url("../fonts/gochi-hand-v19-latin-regular.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/gochi-hand-v19-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -// styleName: Desktop/H1; -%text-header-h1, -.text-header-h1 { - font-family: Lora, serif; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 40px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 52px; - } - - @include breakpoint-xl { - font-size: 58px; - } -} - -//styleName: Desktop/H2; -.text-header-h2 { - font-family: Lora, serif; - font-style: normal; - font-weight: 400; - font-size: 28px; - line-height: 32px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 42px; - } - - @include breakpoint-xl { - font-size: 44px; - } -} - -//styleName: Desktop/H3; -.text-header-h3 { - font-family: Lora, serif; - font-size: 24px; - font-style: normal; - font-weight: 400; - line-height: 32px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 32px; - } - - @include breakpoint-xl { - font-size: 34px; - } -} - -//styleName: Desktop/H4; -%text-header-h4, -.text-header-h4 { - font-family: Lora, serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 24px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 24px; - } - - @include breakpoint-xl { - font-size: 26px; - } -} - -//styleName: Desktop/H5; -%text-header-h5, -.text-header-h5 { - font-family: Lora, serif; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 24px; - letter-spacing: 0; - text-align: left; -} - -//styleName: Desktop/Subtitle; -%text-subtitle, -.text-subtitle { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 32px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 24px; - } - - @include breakpoint-xl { - font-size: 26px; - } -} - -//styleName: Desktop/Accent; -.text-accent { - font-family: "Gochi Hand", cursive; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 120%; - text-align: left; - - @include breakpoint-xl { - font-size: 26px; - } -} - -// styleName: Desktop/Body Copy - L -%text-body-large, -.text-body-large { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 42px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 18px; - } - - @include breakpoint-xl { - font-size: 20px; - } -} - -//styleName: Desktop/Body Copy - M - regular; -%text-body-medium-regular-placeholder, -.text-body-medium-regular { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 32px; - text-align: left; - color: $c-text-secondary-gray; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 16px; - } - - @include breakpoint-xl { - font-size: 18px; - } -} - -//styleName: Desktop/Body Copy - M - medium; -%text-body-medium-medium, -.text-body-medium-medium { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 160%; - text-align: left; - - @include breakpoint-m { - font-size: 16px; - } - - @include breakpoint-xl { - font-size: 18px; - } -} - -//styleName: Desktop/Body Copy - S - regular; -%text-body-small-regular, -.text-body-small-regular { - font-family: "Noto Sans JP", sans-serif; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 16px; - letter-spacing: 0; - text-align: left; -} - -//styleName: Desktop/Body Copy - S - medium; -%text-body-small-medium, -.text-body-small-medium { - font-family: "Noto Sans JP", sans-serif; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 16px; - letter-spacing: 0; - text-align: left; -} - -// Using the placeholder selector, recommended by this rule -// https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-extend-no-missing-placeholder/README.md -//styleName: Desktop/Button text; -%text-button-placeholder, -.text-button { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 24px; - letter-spacing: 0.02em; - text-align: left; - text-transform: uppercase; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 16px; - line-height: 19px; - } -} - -//styleName: Desktop/Links; -%text-links-placeholder, -.text-links { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 24px; - text-align: left; - - @include breakpoint-s { - line-height: 150%; - } - - @include breakpoint-xl { - font-size: 16px; - } -} - -//styleName: Desktop/Tags; -%text-tags, -.text-tags { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 500; - font-size: 12px; - line-height: 120%; - letter-spacing: 0.02em; - text-align: left; - text-transform: uppercase; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 14px; - } -} - -//styleName: Desktop/Small Text - Caption; -%text-small-caption, -.text-small-caption { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 10px; - line-height: 16px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 12px; - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 14px; - line-height: 130%; - } -} - -//styleName: Desktop/Small Text - Caption Bold; -%text-small-caption-bold, -.text-small-caption-bold { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 700; - font-size: 10px; - line-height: 16px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 12px; - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 14px; - line-height: 130%; - } -} - -//styleName: Desktop/Label; -%text-label, -.text-label { - font-family: "Noto Sans JP", sans-serif; - font-size: 10px; - font-style: normal; - line-height: 24px; - letter-spacing: 0.02em; - text-align: left; -} - -.text-label-normal { - @extend %text-label; - - font-weight: 400; -} - -.text-label-semibold { - @extend %text-label; - font-weight: 500; -} - -.text-label-bold { - @extend %text-label; - font-weight: 700; -} - -.text-truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; -} - -%ellipsis-two-lines, -.ellipsis-two-lines { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/src/stories/Library/warning-status/warning-status.scss b/src/stories/Library/warning-status/warning-status.scss index ea4e480ad..154300bbd 100644 --- a/src/stories/Library/warning-status/warning-status.scss +++ b/src/stories/Library/warning-status/warning-status.scss @@ -2,22 +2,22 @@ display: flex; align-items: center; justify-content: space-between; - padding: 16px; + padding: $s-md; - @include breakpoint-s { - padding: 16px 32px; + @include media-query__small { + padding: $s-md $s-xl; } } .warning-bar__icon { - margin-right: 16px; + margin-right: $s-md; } .warning-bar__left { display: flex; align-items: start; - @include breakpoint-s { + @include media-query__small { align-items: center; } } @@ -28,9 +28,9 @@ } .warning-bar__owes { - margin-right: 8px; + margin-right: $s-sm; - @include breakpoint-s { - margin-right: 24px; + @include media-query__small { + margin-right: $s-lg; } } diff --git a/src/styles/scss/container.scss b/src/styles/scss/container.scss deleted file mode 100644 index 3b0f52559..000000000 --- a/src/styles/scss/container.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin container($size) { - margin: 0 auto; - @if $size == small { - max-width: 768px; - } @else if $size == medium { - max-width: 1024px; - } @else if $size == large { - max-width: 1440px; - } -} diff --git a/src/styles/scss/internal.scss b/src/styles/scss/internal.scss index 9fbd9fc9a..a841a5d96 100644 --- a/src/styles/scss/internal.scss +++ b/src/styles/scss/internal.scss @@ -49,13 +49,13 @@ } .internal-spacing-css-inner-prefix { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 200px; height: 60px; } .internal-spacing-css-inner-property { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 250px; height: 60px; } @@ -66,13 +66,13 @@ // Breakpoints .internal-breakpoints-css-inner-prefix { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 250px; height: 60px; } .internal-breakpoints-css-inner-property { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 90px; height: 60px; } @@ -85,7 +85,7 @@ code { font-family: monospace; background-color: #f5f8fa; - padding: 4px; + padding: $s-xs; border-radius: 2px; font-size: 90%; line-height: 1.45; @@ -136,6 +136,7 @@ code { flex-direction: column; row-gap: 24px; } + .shadow-box-item { padding: 24px; } diff --git a/src/styles/scss/legacy.scss b/src/styles/scss/legacy.scss new file mode 100644 index 000000000..102a33766 --- /dev/null +++ b/src/styles/scss/legacy.scss @@ -0,0 +1,5 @@ +@import "legacy/spacings.legacy"; +@import "legacy/animations.legacy"; +@import "legacy/pagefold.legacy"; +@import "legacy/typography.legacy"; +@import "legacy/colors.legacy"; diff --git a/src/styles/scss/legacy/animations.legacy.scss b/src/styles/scss/legacy/animations.legacy.scss new file mode 100644 index 000000000..cfb94276a --- /dev/null +++ b/src/styles/scss/legacy/animations.legacy.scss @@ -0,0 +1,12 @@ +// Remove all animations and transitions for people that prefer not to see them. +// @todo this has to be re-visited, as using * is really bad performance. +// Instead, we should consider setting a `has-animations` class on the body, +// using JS, that we can listen for when adding animations. +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/src/styles/scss/legacy/colors.legacy.scss b/src/styles/scss/legacy/colors.legacy.scss new file mode 100644 index 000000000..15f3f0b2c --- /dev/null +++ b/src/styles/scss/legacy/colors.legacy.scss @@ -0,0 +1,163 @@ +// *** Global colors *** +// Background +.bg-global-primary { + background-color: $color__global-primary; +} + +.bg-global-secondary { + background-color: $color__global-secondary; +} + +.bg-global-tertiary-1 { + background-color: $color__global-tertiary-1; +} + +.bg-global-tertiary-2 { + background-color: $color__global-tertiary-2; +} + +// Border +.border-global-primary { + border: 1px solid $color__global-primary; + stroke: $color__global-primary; +} + +.border-global-secondary { + border: 1px solid $color__global-secondary; + stroke: $color__global-secondary; +} + +.border-global-tertiary-1 { + border: 1px solid $color__global-tertiary-1; + stroke: $color__global-tertiary-1; +} + +.border-global-tertiary-2 { + border: 1px solid $color__global-tertiary-2; + stroke: $color__global-tertiary-2; +} + +// *** Identity colors *** +// Background +.bg-identity-primary { + background-color: $color__identity-primary; + fill: $color__identity-primary; +} + +// Border +.border-identity-primary { + border: 1px solid $color__identity-primary; + stroke: $color__identity-primary; +} + +// Color +.color-identity-primary { + color: $color__identity-primary; +} + +.color-secondary-gray { + color: $color__text-secondary-gray; +} + +// *** Identity color tints *** +// Background +.bg-identity-tint-20 { + background-color: var(--tint-color-20); +} + +.bg-identity-tint-40 { + background-color: var(--tint-color-40); +} + +.bg-identity-tint-80 { + background-color: var(--tint-color-80); +} + +.bg-identity-tint-100 { + background-color: var(--tint-color-100); +} + +.bg-identity-tint-120 { + background-color: var(--tint-color-120); +} + +// *** Text colors *** +// Color +.color-primary-white { + color: $color__text-primary-white; +} + +.color-primary-black { + color: $color__text-primary-black; +} + +.border-primary-white { + border: 1px solid $color__text-primary-white; + stroke: $color__text-primary-white; +} + +.border-primary-black { + border: 1px solid $color__text-primary-black; + stroke: $color__text-primary-black; +} + +.border-secondary-gray { + border: 1px solid $color__text-secondary-gray; + stroke: $color__text-secondary-gray; +} + +// Only used internally for bg-color in Colors comp. +.bg-color-primary-white { + background-color: $color__text-primary-white; +} + +.bg-color-primary-black { + background-color: $color__text-primary-black; +} + +.bg-color-secondary-gray { + background-color: $color__text-secondary-gray; +} + +// *** Signal colors *** +// Background +.bg-signal-success { + background-color: $color__signal-success; +} + +.bg-signal-aware { + background-color: $color__signal-aware; +} + +.bg-signal-alert { + background-color: $color__signal-alert; +} + +// Border +.border-signal-success { + border: 1px solid $color__signal-success; + stroke: $color__signal-success; +} + +.border-signal-aware { + border: 1px solid $color__signal-aware; + stroke: $color__signal-aware; +} + +.border-signal-alert { + border: 1px solid $color__signal-alert; + stroke: $color__signal-alert; +} + +// Color +.color-signal-success { + color: $color__signal-success; +} + +.color-signal-aware { + color: $color__signal-aware; +} + +.color-signal-alert { + color: $color__signal-alert; +} diff --git a/src/stories/Library/pagefold/pagefold.scss b/src/styles/scss/legacy/pagefold.legacy.scss similarity index 77% rename from src/stories/Library/pagefold/pagefold.scss rename to src/styles/scss/legacy/pagefold.legacy.scss index 87d16adc0..cf872fcea 100644 --- a/src/stories/Library/pagefold/pagefold.scss +++ b/src/styles/scss/legacy/pagefold.legacy.scss @@ -12,8 +12,8 @@ $pagefold-map: ( "xlarge": 56, ); -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ +// BEM plugin does not support interpolation. +// stylelint-disable plugin/stylelint-bem-namics @each $size, $triangle-width in $pagefold-map { .m-#{$size} { margin: #{$size}px; @@ -45,7 +45,7 @@ $pagefold-map: ( .pagefold-triangle--#{$size} { width: #{$triangle-width}px; height: #{$triangle-width}px; - background-color: $c-identity-primary; + background-color: $color__identity-primary; position: absolute; top: 0; left: 0; @@ -53,12 +53,13 @@ $pagefold-map: ( .pagefold-triangle { &--success { - background-color: $c-signal-success; + background-color: $color__signal-success; } &--alert { - background-color: $c-signal-alert; + background-color: $color__signal-alert; } } } -/* stylelint-enable plugin/stylelint-bem-namics */ + +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/styles/scss/legacy/spacings.legacy.scss b/src/styles/scss/legacy/spacings.legacy.scss new file mode 100644 index 000000000..b97a545cf --- /dev/null +++ b/src/styles/scss/legacy/spacings.legacy.scss @@ -0,0 +1,80 @@ +// stylelint-disable plugin/stylelint-bem-namics +$legacy_spacings: ( + 4: $s-xs, + 8: $s-sm, + 16: $s-md, + 22: 22px, + 24: $s-lg, + 32: $s-xl, + 35: 35px, + 48: 48px, + 64: 64px, + 80: $s-4xl, + 96: 96px, + 112: $s-6xl, + 215: $s-7xl, +); + +@each $key, $space in $legacy_spacings { + .m-#{$key} { + margin: $space; + } + + .mx-#{$key} { + margin-left: $space; + margin-right: $space; + } + + .my-#{$key} { + margin-top: $space; + margin-bottom: $space; + } + + .ml-#{$key} { + margin-left: $space; + } + + .mr-#{$key} { + margin-right: $space; + } + + .mb-#{$key} { + margin-bottom: $space; + } + + .mt-#{$key} { + margin-top: $space; + } + + .p-#{$key} { + padding: $space; + } + + .px-#{$key} { + padding-left: $space; + padding-right: $space; + } + + .py-#{$key} { + padding-top: $space; + padding-bottom: $space; + } + + .pl-#{$key} { + padding-left: $space; + } + + .pr-#{$key} { + padding-right: $space; + } + + .pb-#{$key} { + padding-bottom: $space; + } + + .pt-#{$key} { + padding-top: $space; + } +} + +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/styles/scss/legacy/typography.legacy.scss b/src/styles/scss/legacy/typography.legacy.scss new file mode 100644 index 000000000..33604f5a8 --- /dev/null +++ b/src/styles/scss/legacy/typography.legacy.scss @@ -0,0 +1,93 @@ +.text-header-h1 { + @include typography($typo__h1); +} + +.text-header-h2 { + @include typography($typo__h2); +} + +.text-header-h3 { + @include typography($typo__h3); +} + +.text-header-h4 { + @include typography($typo__h4); +} + +.text-header-h5 { + @include typography($typo__h5); +} + +.text-subtitle { + @include typography($typo__subtitle); +} + +.text-accent { + @include typography($typo__accent); +} + +.text-body-large { + @include typography($typo__body-large); +} + +.text-body-medium-regular { + @include typography($typo__body-placeholder); +} + +.text-body-medium-medium { + @include typography($typo__body-medium); +} + +.text-body-small-regular { + @include typography($typo__body-small); +} + +.text-body-small-medium { + @include typography($typo__body-small); + + font-weight: bold; +} + +.text-button { + @include typography($typo__button); +} + +.text-links { + @include typography($typo__links); +} + +.text-tags { + @include typography($typo__tags); +} + +.text-small-caption { + @include typography($typo__small-caption); +} + +.text-small-caption-bold { + @include typography($typo__small-caption); + font-weight: bold; +} + +.text-label, +.text-label-normal { + @include typography($typo__label); +} + +.text-label-semibold { + @include typography($typo__label); + font-weight: 500; +} + +.text-label-bold { + @include typography($typo__label); + font-weight: 700; +} + +.text-truncate { + @extend %text-truncate; +} + +.ellipsis-two-lines { + @extend %text-ellipsis-two-lines; +} diff --git a/src/styles/scss/reset.scss b/src/styles/scss/reset.scss index 55dd890ce..5e284f15f 100644 --- a/src/styles/scss/reset.scss +++ b/src/styles/scss/reset.scss @@ -70,13 +70,3 @@ input[type="reset"] { border: inherit; background-color: inherit; } - -/* Remove all animations and transitions for people that prefer not to see them */ -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} diff --git a/src/styles/scss/shared.scss b/src/styles/scss/shared.scss index 1f05ac972..1866fd7ab 100644 --- a/src/styles/scss/shared.scss +++ b/src/styles/scss/shared.scss @@ -2,40 +2,18 @@ text-decoration: inherit; } -/** - * Hide element visually but not from screen readers. - * - * https://www.accessibility-developer-guide.com/examples/hiding-elements/visually/ - * - * The class is intentionally called .hide-visually and not .visually-hidden. - * Drupal which is a known consumer of the design system also has a - * .visually-hidden class where the implementation is a bit different. - * To avoid any conflicts we call our class something else. - * - * https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/modules/system/css/components/hidden.module.css#L18-33 - */ -@mixin hide-visually { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - padding: 0; - border: 0; - height: 1px; - width: 1px; - overflow: hidden; -} - .hide-visually { @include hide-visually; &--on-desktop { - @include breakpoint-s { + @include media-query__name("small") { @include hide-visually; } } } .hide-on-desktop { - @include breakpoint-s { + @include media-query__name("small") { display: none; } } @@ -91,13 +69,14 @@ .focus-styling { &:focus { outline: none; - border: 1px solid $c-text-primary-black; + border: 1px solid $color__text-primary-black; } + &__input { &:focus { outline: none; - border: 1px solid $c-text-primary-black; - background-color: $c-text-primary-white; + border: 1px solid $color__text-primary-black; + background-color: $color__text-primary-white; } } } diff --git a/src/styles/scss/tools.scss b/src/styles/scss/tools.scss new file mode 100644 index 000000000..48e8820ff --- /dev/null +++ b/src/styles/scss/tools.scss @@ -0,0 +1,11 @@ +@import "tools/variables.fonts"; +@import "tools/variables.z-indexes"; +@import "tools/variables.layout"; +@import "tools/variables.spacings"; +@import "tools/variables.colors"; +@import "tools/variables.breakpoints"; +@import "tools/variables.typography"; +@import "tools/mixins.tools"; +@import "tools/mixins.media-query"; +@import "tools/mixins.misc"; +@import "tools/placeholder"; diff --git a/src/styles/scss/tools/mixins.media-query.scss b/src/styles/scss/tools/mixins.media-query.scss new file mode 100644 index 000000000..9a9977600 --- /dev/null +++ b/src/styles/scss/tools/mixins.media-query.scss @@ -0,0 +1,72 @@ +/** Create media query, based on unit (e.g. PX) value. + * + * If you want to go by names (e.g. "medium"), use media-query__name(). + */ +@mixin media-query($breakpoint, $definition: "min-width") { + // If we're meassuring by max-width, we want to remove a + // pixel as the variables are the max width of the device. + @if ($definition == "max-width") { + $breakpoint: $breakpoint - 1; + } + + @media screen and ($definition: $breakpoint) { + @content; + } +} + +/** Trigger media query, by using name as a parameter. + * + * Useful if you have the breakpoint name as a variable, as you cant use + * variables in mixin include names. + * + * @param {string} $breakpoint-name — E.g. 'mobile'. + */ +@mixin media-query__name($breakpoint-name, $definition: "min-width") { + // We're going mobile-first, so no MQ necessary here. + @if ($breakpoint-name == "mobile") { + @content; + } @else { + $breakpoint: map_get($breakpoints, $breakpoint-name); + + @include media-query($breakpoint, $definition) { + @content; + } + } +} + +// Defining explicit aliases for media queries, for editor auto-complete. +@mixin media-query__x-small($definition: "min-width") { + @include media-query__name("x-small", $definition) { + @content; + } +} + +@mixin media-query__small($definition: "min-width") { + @include media-query__name("small", $definition) { + @content; + } +} + +@mixin media-query__medium($definition: "min-width") { + @include media-query__name("medium", $definition) { + @content; + } +} + +@mixin media-query__large($definition: "min-width") { + @include media-query__name("large", $definition) { + @content; + } +} + +@mixin media-query__x-large($definition: "min-width") { + @include media-query__name("x-large", $definition) { + @content; + } +} + +@mixin media-query__xx-large($definition: "min-width") { + @include media-query__name("xx-large", $definition) { + @content; + } +} diff --git a/src/styles/scss/tools/mixins.misc.scss b/src/styles/scss/tools/mixins.misc.scss new file mode 100644 index 000000000..08bc6e8cd --- /dev/null +++ b/src/styles/scss/tools/mixins.misc.scss @@ -0,0 +1,52 @@ +// Hide element visually but not from screen readers. +// https://www.accessibility-developer-guide.com/examples/hiding-elements/visually/ +// --- +// The class is intentionally called .hide-visually and not .visually-hidden. +// Drupal which is a known consumer of the design system also has a +// .visually-hidden class where the implementation is a bit different. +// To avoid any conflicts we call our class something else. +// //https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/modules/system/css/components/hidden.module.css#L18-33 +/** + * + * + * + * + */ +@mixin hide-visually { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; +} + +/** + * Add styling, that only shows svg arrow when hovering. + * + * @todo - this needs to be cleaned up, as it currently targets all SVGs. + * It is also a problem that we need to do the $icon-container, which can be + * fixed by actually adding a class to the svg - or, a common wrapper class. + */ +@mixin show-svg-on-hover($icon-container: "") { + // stylelint-disable-next-line plugin/stylelint-bem-namics + #{$icon-container} > svg { + visibility: hidden; + opacity: 0; + margin-right: 40px; + align-self: center; + + transition: opacity 0.5s ease-in-out; + + @include media-query__small("max-width") { + display: none; + } + } + + // stylelint-disable-next-line plugin/stylelint-bem-namics + &:hover #{$icon-container} > svg { + visibility: visible; + opacity: 1; + } +} diff --git a/src/styles/scss/tools/mixins.tools.scss b/src/styles/scss/tools/mixins.tools.scss new file mode 100644 index 000000000..504eea79b --- /dev/null +++ b/src/styles/scss/tools/mixins.tools.scss @@ -0,0 +1,55 @@ +/** + * Set styling across breakpoints, with possibility to exclude. + * + * Example usage of this mixin, where margin-top is excluded: + * @include map-styling($map, (excludes: ('margin-top')); + * + * @param {map} $map. + * @param {options} $options - List of options. Supports: + * - excludes : list - List of properties to ignore + */ +@mixin map-styling($map, $options: ()) { + $excludes: if( + map_has_key($options, "excludes"), + map_get($options, "excludes"), + () + ); + + @each $breakpoint-name, $map-values in $map { + $map-inner: map_get($map, $breakpoint-name); + + @include media-query__name($breakpoint-name) { + @each $property, $value in $map-inner { + @if not(index($excludes, $property)) { + #{$property}: $value; + } + } + } + } +} + +/** + * Set styling for a font variant, across breakpoints. + * + * @see mixin map-styling(). + * Example usage of this mixin, where line-height is excluded: + * @iinclude typography($font__h4, (excludes: ('line-height')); + * + * @param {map} $font. See available maps in _variables.typography.scss. + * @param {options} $options - List of options. Supports: + * - excludes : list - List of properties to ignore + */ +@mixin typography($font, $options: ()) { + $excludes: if( + map_has_key($options, "excludes"), + map_get($options, "excludes"), + () + ); + + @include map-styling( + $font, + ( + excludes: $excludes, + ) + ); +} diff --git a/src/styles/scss/tools/placeholder.scss b/src/styles/scss/tools/placeholder.scss new file mode 100644 index 000000000..1d4fa465d --- /dev/null +++ b/src/styles/scss/tools/placeholder.scss @@ -0,0 +1,50 @@ +// stylelint-disable plugin/stylelint-bem-namics +%text-ellipsis-two-lines { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; +} + +%text-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} + +%link-tag { + @include typography($typo__body-placeholder); + + text-decoration: none; + color: $color__text-primary-black; + display: inline-block; + width: fit-content; + + // Hide arrow + &::after { + display: block; + content: ""; + border-bottom: solid 1px; + transform: scaleX(1); + transition: transform 300ms ease-in-out; + transform-origin: 100% 50%; + padding-bottom: 2px; + } + + // Show arrow on hover + &:hover::after { + transform: scaleX(0); + transform-origin: 100% 0; + } +} + +%button-link { + @extend %link-tag; + + @include typography($typo__body-small); +} + +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/styles/scss/tools/variables.breakpoints.scss b/src/styles/scss/tools/variables.breakpoints.scss new file mode 100644 index 000000000..a7462042e --- /dev/null +++ b/src/styles/scss/tools/variables.breakpoints.scss @@ -0,0 +1,8 @@ +$breakpoints: ( + "x-small": 375px, + "small": 768px, + "medium": 1024px, + "large": 1440px, + "x-large": 1920px, + "xx-large": 2200px, +); diff --git a/src/styles/scss/tools/variables.colors.scss b/src/styles/scss/tools/variables.colors.scss new file mode 100644 index 000000000..22770c0f1 --- /dev/null +++ b/src/styles/scss/tools/variables.colors.scss @@ -0,0 +1,50 @@ +// Global colors +$color__global-primary: #f6f5f0; +$color__global-secondary: #eee9e5; +$color__global-tertiary-1: #dbdbdb; +$color__global-tertiary-2: #707070; +$color__identity-primary: hsl( + var(--identity-color-h), + var(--identity-color-s), + var(--identity-color-l), + 1 +); + +$color__text-primary-white: #fff; +$color__text-primary-black: #000; +$color__text-secondary-gray: #484848; + +$color__signal-success: #068802; +$color__signal-aware: #f7bf42; +$color__signal-alert: #d5364a; + +// *** CSS variables for identity color tints *** +:root { + // Identity color tones + --identity-color-h: 145; + --identity-color-s: 22%; + --identity-color-l: 35%; + --identity-color: var(--identity-color-h), var(--identity-color-s), + var(--identity-color-l); + --tint-color-20: hsl(var(--identity-color), 0.2); + --tint-color-40: hsl(var(--identity-color), 0.4); + --tint-color-80: hsl(var(--identity-color), 0.8); + --tint-color-100: hsl(var(--identity-color), 1); + --tint-color-120: hsl( + var(--identity-color-h), + calc(var(--identity-color-s) - 1%), + calc(var(--identity-color-l) - 8%) + ); + + // Global colors + --c-global-primary: $color__global-primary; + --c-global-secondary: $color__global-secondary; + --c-global-tertiary-1: $color__global-tertiary-1; + --c-global-tertiary-2: $color__global-tertiary-2; + --c-text-primary-white: $color__text-primary-white; + --c-text-primary-black: $color__text-primary-black; + --c-text-secondary-gray: $color__text-secondary-gray; + --c-signal-success: $color__signal-success; + --c-signal-aware: $color__signal-aware; + --c-signal-alert: $color__signal-alert; +} diff --git a/src/styles/scss/tools/variables.fonts.scss b/src/styles/scss/tools/variables.fonts.scss new file mode 100644 index 000000000..a18df9f35 --- /dev/null +++ b/src/styles/scss/tools/variables.fonts.scss @@ -0,0 +1,75 @@ +$font__title: "Lora", serif; +$font__body: "Noto Sans JP", sans-serif; +$font__accent: "Gochi Hand", cursive; +$font__weight--normal: 400; +$font__weight--semi-bold: 500; +$font__weight--bold: 700; + +// Since we host the fonts ourselves, they may need to be updated in the future +// We use this online open source tool to retrieve fonts & their css definition: +// https://gwfh.mranftl.com/fonts +/* noto-sans-jp-regular - latin */ +@font-face { + font-display: swap; + font-family: "Noto Sans JP"; + font-style: normal; + font-weight: 400; + src: url("../fonts/noto-sans-jp-v42-latin-regular.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/noto-sans-jp-v42-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* noto-sans-jp-500 - latin */ +@font-face { + font-display: swap; + font-family: "Noto Sans JP"; + font-style: normal; + font-weight: 500; + src: url("../fonts/noto-sans-jp-v42-latin-500.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/noto-sans-jp-v42-latin-500.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* noto-sans-jp-700 - latin */ +@font-face { + font-display: swap; + font-family: "Noto Sans JP"; + font-style: normal; + font-weight: 700; + src: url("../fonts/noto-sans-jp-v42-latin-700.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/noto-sans-jp-v42-latin-700.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* lora-regular - latin */ +@font-face { + font-display: swap; + font-family: "Lora"; + font-style: normal; + font-weight: 400; + src: url("../fonts/lora-v26-latin-regular.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/lora-v26-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* lora-italic - latin */ +@font-face { + font-display: swap; + font-family: "Lora"; + font-style: italic; + font-weight: 400; + src: url("../fonts/lora-v26-latin-italic.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/lora-v26-latin-italic.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* gochi-hand-regular - latin */ +@font-face { + font-display: swap; + font-family: "Gochi Hand"; + font-style: normal; + font-weight: 400; + src: url("../fonts/gochi-hand-v19-latin-regular.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/gochi-hand-v19-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} diff --git a/src/styles/scss/tools/variables.layout.scss b/src/styles/scss/tools/variables.layout.scss new file mode 100644 index 000000000..75b2f9d13 --- /dev/null +++ b/src/styles/scss/tools/variables.layout.scss @@ -0,0 +1,3 @@ +$layout__max-width: 1024px; +$layout__max-width--small: 768px; +$layout__max-width--large: 1440px; diff --git a/src/styles/scss/tools/variables.spacings.scss b/src/styles/scss/tools/variables.spacings.scss new file mode 100644 index 000000000..6cac1090a --- /dev/null +++ b/src/styles/scss/tools/variables.spacings.scss @@ -0,0 +1,25 @@ +$s-xs: 4px; +$s-sm: 8px; +$s-md: 16px; +$s-lg: 24px; +$s-xl: 32px; +$s-2xl: 44px; +$s-3xl: 60px; +$s-4xl: 80px; +$s-5xl: 100px; +$s-6xl: 112px; +$s-7xl: 215px; + +$spacings: ( + xs: $s-xs, + sm: $s-sm, + md: $s-md, + lg: $s-lg, + xl: $s-xl, + 2xl: $s-2xl, + 3xl: $s-3xl, + 4xl: $s-4xl, + 5xl: $s-5xl, + 6xl: $s-6xl, + 7xl: $s-7xl, +); diff --git a/src/styles/scss/tools/variables.typography.scss b/src/styles/scss/tools/variables.typography.scss new file mode 100644 index 000000000..21a8b0910 --- /dev/null +++ b/src/styles/scss/tools/variables.typography.scss @@ -0,0 +1,279 @@ +// "Title / Header 1" +$typo__h1: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 32px, + line-height: 40px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 52px, + ), + x-large: ( + font-size: 58px, + ), +); + +// "Header 2" +$typo__h2: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 28px, + line-height: 32px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 42px, + ), + x-large: ( + font-size: 44px, + ), +); + +// "Header 3" +$typo__h3: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 24px, + line-height: 32px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 32px, + ), + x-large: ( + font-size: 34px, + ), +); + +// "Header 4" +$typo__h4: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 18px, + line-height: 24px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 24px, + ), + x-large: ( + font-size: 26px, + ), +); + +// "Header 5" +$typo__h5: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 20px, + line-height: 24px, + ), +); + +// "Subtitle" +$typo__subtitle: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 18px, + line-height: 32px, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 24px, + ), + x-large: ( + font-size: 26px, + ), +); + +// "Accent" +$typo__accent: ( + mobile: ( + font-family: $font__accent, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 24px, + line-height: 120%, + ), + x-large: ( + font-size: 26px, + ), +); + +// "Body Copy - L" +$typo__body-large: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 16px, + line-height: 42px, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 18px, + ), + x-large: ( + font-size: 20px, + ), +); + +// "Body Copy - M" +$typo__body-placeholder: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 14px, + line-height: 32px, + color: $color__text-secondary-gray, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 16px, + ), + x-large: ( + font-size: 18px, + ), +); + +// "Body Copy - M - medium" +$typo__body-medium: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--semi-bold, + font-size: 14px, + line-height: 160%, + ), + medium: ( + font-size: 16px, + ), + x-large: ( + font-size: 18px, + ), +); + +// "Body Copy - S" +$typo__body-small: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 14px, + line-height: 16px, + ), +); + +// "Button text" +$typo__button: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--semi-bold, + font-size: 14px, + line-height: 24px, + letter-spacing: 0.02em, + text-transform: uppercase, + ), + small: ( + line-height: 120%, + ), + x-large: ( + font-size: 16px, + line-height: 19px, + ), +); + +// "Links" +$typo__links: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 14px, + line-height: 24px, + ), + small: ( + line-height: 150%, + ), + x-large: ( + font-size: 16px, + ), +); + +// "Tags" +$typo__tags: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--semi-bold, + font-size: 12px, + line-height: 120%, + letter-spacing: 0.02em, + text-transform: uppercase, + ), + small: ( + line-height: 120%, + ), + x-large: ( + font-size: 14px, + ), +); + +// "Small Text - Caption" +$typo__small-caption: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 10px, + line-height: 16px, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 12px, + line-height: 120%, + ), +); + +// "Label" +$typo__label: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 10px, + line-height: 18px, + letter-spacing: 0.02em, + ), +); diff --git a/src/stories/Library/layout/z-index.scss b/src/styles/scss/tools/variables.z-indexes.scss similarity index 100% rename from src/stories/Library/layout/z-index.scss rename to src/styles/scss/tools/variables.z-indexes.scss