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 68ef00983..543b3d983 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,12 +11,12 @@ 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; @@ -27,8 +28,9 @@ dl.list-description { } .link-tag { - @extend %text-small-caption; - color: $c-text-primary-black; + @include typography($typo__small-caption); + + color: $color__text-primary-black; } } @@ -47,7 +49,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