diff --git a/.gitignore b/.gitignore index 5636cc6901..4844fea220 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,8 @@ npm-debug.* yarn.lock /packages/*/changelog.md .storybook/__image_snapshots__/__diff_output__ + +# Ignore css assets as these should be built on demand from sass +*.css +!packages/bpk-stylesheets/base.css +/packages/unstable__bpk-mixins diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 97f443b48e..5d00089dcb 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -21,7 +21,6 @@ const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const sassFunctions = require('../packages/bpk-mixins/sass-functions'); const postCssPlugins = require('../scripts/webpack/postCssPlugins'); const { BPK_TOKENS } = process.env; @@ -120,9 +119,6 @@ module.exports = ({ config }) => { ), ) : '', - sassOptions: { - functions: sassFunctions, - }, }, }, ], diff --git a/.stylelintignore b/.stylelintignore index 3c3629e647..873fbc5024 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1,3 @@ node_modules +packages/unstable__bpk-mixins +**/*.css diff --git a/.stylelintrc.json b/.stylelintrc.json index 9d3a54070c..c9a9cd0945 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -7,6 +7,7 @@ "resolveNestedSelectors": true } ], + "at-rule-disallowed-list": ["import"], "unit-disallowed-list": [["px"], { "ignoreProperties": { "px": ["box-shadow"] diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0b6b831049..83777c6d66 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -59,9 +59,13 @@ git checkout -b {BRANCH_NAME} npm install --registry="https://registry.npmjs.org/" ``` -If you receive an error about `ValueError: invalid mode: 'rU' while trying to load binding.gyp`, try downgrading the default python version for your shell to python 3.9 +3. Build a modern version of mixins for local development -3. Build SVGs +```sh +npm run build:unstable__bpk-mixins +``` + +4. Build SVGs ```sh npm run build @@ -105,6 +109,18 @@ We use [CSS Modules](https://github.com/css-modules/css-modules) along with [BEM When creating (S)CSS files, follow the CSS Module naming convention by using the `.module.(s)css` extension. +When creating or modifying SCSS files, follow these rules + +1. Use Modern SASS API + * Prefer `@use` instead of `@import` + * Prefer `math.div($a, $b)` instead of `$a / $b`. Add `@use sass:math` statement to the top of your file to make this function available + * Read more about [@use rule](https://sass-lang.com/documentation/at-rules/use/) and [SASS math functions](https://sass-lang.com/documentation/modules/math/) +2. Use only what you need + * Instead of blank import of all mixins, import them on demand. E.g. if you need only colour tokens, add `@use '../unstable__bpk-mixins/tokens'` statement only +3. Use `unstable__bpk-mixins` for Backpack components development + * If you need to add or modify a mixin, do it in `packages/bpk-mixins`, then execute `npm run unstable__bpk-mixins` command to make it available for Modern API + * Import mixins from `packages/unstable__bpk-mixins` only. Otherwise your code will break because Modern SASS API doesn't support `~` import syntax or slash division + #### Adding a new component If you want to add a new component: diff --git a/decisions/modern-sass-api.md b/decisions/modern-sass-api.md new file mode 100644 index 0000000000..024accee3a --- /dev/null +++ b/decisions/modern-sass-api.md @@ -0,0 +1,59 @@ +# Transition to modern SASS API + +## Decision +Backpack is transforming the way it works with SASS to align with modern SASS API used in +dart-sass and sass-embedded. Old API remains the default option, but at some point of time +in the future we will switch the default API to the new one + +* Backpack is shipped with two versions of `bpk-mixins` package + * `packages/bpk-mixins` that remains the stable option. It uses old SASS API and `@import` syntax + * `packages/unstable__bpk-mixins` is a modern SASS API version compatible with `sass` and `sass-embedded` packages, but not with `node-sass` +* In the future the package using Old API will be deprecated and removed and the one using New API will be promoted to stable +* For our own components we use `unstable__bpk-mixins` + * These mixins must be imported with `@use` at-rule + * Mixins partials must be used in a granular way (use only those partials that you need to build a particular component, see "Wrong" and "Correct" examples below) +* If you need to add or modify a mixin, do it in `packages/bpk-mixins`. Then run `npm run unstable__bpk-mixins` to generate a new modern version of the package + +## Examples + +**Wrong (1)** +``` +// BpkAwesomeComponent.module.scss + +@use '../unstable__bpk-mixins' as mixins; + +.bpk-awesome-component { + margin-right: mixins.bpk-spacing-md(); +} +``` + +**Wrong (2)** +``` +// BpkAwesomeComponent.module.scss + +@import '../bpk-mixins'; + +.bpk-awesome-component { + margin-right: bpk-spacing-md(); +} +``` + +**Correct** +``` +// BpkAwesomeComponent.module.scss + +@use '../unstable__bpk-mixins/tokens'; + +.bpk-awesome-component { + margin-right: tokens.bpk-spacing-md(); +} +``` + +## Thinking + +The main reason behind such a change is to deliver modern API to consumers in a non-breaking manner. Using `unstable` prefix +means that we can't guarantee that this package structure won't change before becoming stable. + +## Anything Else + +https://sass-lang.com/documentation/at-rules/use/#differences-from-import diff --git a/examples/bpk-component-aria-live/examples.module.css b/examples/bpk-component-aria-live/examples.module.css deleted file mode 100644 index 6c9384a037..0000000000 --- a/examples/bpk-component-aria-live/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-storybook-aria-live-demo{padding:1rem;background:#eff1f2;color:#161616;box-shadow:0 0 0 1px #c2c9cd inset;border-radius:.5rem}.bpk-storybook-aria-live-demo__chips-wrapper{margin-bottom:1rem}.bpk-storybook-aria-live-demo__select-wrapper{display:flex;margin-bottom:1rem;justify-content:space-between;align-items:center}.bpk-storybook-aria-live-demo__select{flex:0.5}.bpk-storybook-aria-live-demo__switch{flex:0.3}.bpk-storybook-aria-live-demo__chip{margin-right:1rem;margin-bottom:1rem}.bpk-storybook-aria-live-demo__aria-live{margin-top:1rem}.bpk-storybook-aria-live-demo>p{margin-top:0;margin-bottom:1rem} diff --git a/examples/bpk-component-aria-live/examples.module.scss b/examples/bpk-component-aria-live/examples.module.scss index 2d4c27850e..1b87604f82 100644 --- a/examples/bpk-component-aria-live/examples.module.scss +++ b/examples/bpk-component-aria-live/examples.module.scss @@ -16,23 +16,25 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/borders'; +@use '../../packages/unstable__bpk-mixins/radii'; .bpk-storybook-aria-live-demo { - padding: bpk-spacing-base(); - background: $bpk-canvas-contrast-day; - color: $bpk-text-primary-day; + padding: tokens.bpk-spacing-base(); + background: tokens.$bpk-canvas-contrast-day; + color: tokens.$bpk-text-primary-day; - @include bpk-border-sm($bpk-line-day); - @include bpk-border-radius-sm; + @include borders.bpk-border-sm(tokens.$bpk-line-day); + @include radii.bpk-border-radius-sm; &__chips-wrapper { - margin-bottom: bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); } &__select-wrapper { display: flex; - margin-bottom: bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); justify-content: space-between; align-items: center; } @@ -46,16 +48,16 @@ } &__chip { - margin-right: bpk-spacing-base(); - margin-bottom: bpk-spacing-base(); + margin-right: tokens.bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); } &__aria-live { - margin-top: bpk-spacing-base(); + margin-top: tokens.bpk-spacing-base(); } > p { - margin-top: $bpk-spacing-none; - margin-bottom: bpk-spacing-base(); + margin-top: tokens.$bpk-spacing-none; + margin-bottom: tokens.bpk-spacing-base(); } } diff --git a/examples/bpk-component-badge/BpkBadgeLayout.module.scss b/examples/bpk-component-badge/BpkBadgeLayout.module.scss index 886d8dbe8f..1f60f51b72 100644 --- a/examples/bpk-component-badge/BpkBadgeLayout.module.scss +++ b/examples/bpk-component-badge/BpkBadgeLayout.module.scss @@ -16,19 +16,20 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/radii'; .bpk-badge-layout { &__container { position: relative; display: flex; - min-height: bpk-spacing-xxl(); - padding: bpk-spacing-lg(); + min-height: tokens.bpk-spacing-xxl(); + padding: tokens.bpk-spacing-lg(); &--light { - background-color: $bpk-canvas-contrast-day; + background-color: tokens.$bpk-canvas-contrast-day; - @include bpk-border-radius-xs; + @include radii.bpk-border-radius-xs; } } } diff --git a/examples/bpk-component-banner-alert/examples.module.css b/examples/bpk-component-banner-alert/examples.module.css deleted file mode 100644 index cd03197cea..0000000000 --- a/examples/bpk-component-banner-alert/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-banner-alert-examples__component{margin-top:1rem} diff --git a/examples/bpk-component-banner-alert/examples.module.scss b/examples/bpk-component-banner-alert/examples.module.scss index a58c5a53d6..04dff30729 100644 --- a/examples/bpk-component-banner-alert/examples.module.scss +++ b/examples/bpk-component-banner-alert/examples.module.scss @@ -16,10 +16,10 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-banner-alert-examples { &__component { - margin-top: bpk-spacing-base(); + margin-top: tokens.bpk-spacing-base(); } } diff --git a/examples/bpk-component-barchart/examples.module.css b/examples/bpk-component-barchart/examples.module.css deleted file mode 100644 index c9e1e57ac2..0000000000 --- a/examples/bpk-component-barchart/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-heading{margin-bottom:1rem}.bpk-barchart-custom-scrollers{background:#eff1f2}.bpk-barchart-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #eff1f2, rgba(239,241,242,0));pointer-events:none;left:0}.bpk-barchart-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #eff1f2, rgba(239,241,242,0));pointer-events:none;right:0} diff --git a/examples/bpk-component-barchart/examples.module.scss b/examples/bpk-component-barchart/examples.module.scss index bbba069c89..8f9737cc04 100644 --- a/examples/bpk-component-barchart/examples.module.scss +++ b/examples/bpk-component-barchart/examples.module.scss @@ -16,22 +16,23 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/scroll-indicators'; .bpk-heading { - margin-bottom: bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); } -$custom-color: $bpk-canvas-contrast-day; +$custom-color: tokens.$bpk-canvas-contrast-day; .bpk-barchart-custom-scrollers { background: $custom-color; &--leading { - @include bpk-scroll-indicator-left($custom-color); + @include scroll-indicators.bpk-scroll-indicator-left($custom-color); } &--trailing { - @include bpk-scroll-indicator-right($custom-color); + @include scroll-indicators.bpk-scroll-indicator-right($custom-color); } } diff --git a/examples/bpk-component-bottom-sheet/examples.module.css b/examples/bpk-component-bottom-sheet/examples.module.css deleted file mode 100644 index 0872253124..0000000000 --- a/examples/bpk-component-bottom-sheet/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-bottom-sheet-paragraph{margin-bottom:0.5rem} diff --git a/examples/bpk-component-bottom-sheet/examples.module.scss b/examples/bpk-component-bottom-sheet/examples.module.scss index 19f24a8965..ddf2e3f211 100644 --- a/examples/bpk-component-bottom-sheet/examples.module.scss +++ b/examples/bpk-component-bottom-sheet/examples.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-bottom-sheet-paragraph { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); } diff --git a/examples/bpk-component-breakpoint/examples.module.css b/examples/bpk-component-breakpoint/examples.module.css deleted file mode 100644 index b29821db92..0000000000 --- a/examples/bpk-component-breakpoint/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-breakpoints-demo{border-radius:.25rem;overflow:hidden}.bpk-breakpoints-demo--active{padding:1.5rem;color:#fff;background-color:#0062e3;background-color:var(--bpk-primary-color, #0062e3)}.bpk-breakpoints-demo--inactive{padding:1.5rem;background-color:#e0e3e5} diff --git a/examples/bpk-component-breakpoint/examples.module.scss b/examples/bpk-component-breakpoint/examples.module.scss index a44197132a..d2b07c365b 100644 --- a/examples/bpk-component-breakpoint/examples.module.scss +++ b/examples/bpk-component-breakpoint/examples.module.scss @@ -16,21 +16,22 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/utils'; .bpk-breakpoints-demo { - border-radius: $bpk-border-radius-xs; + border-radius: tokens.$bpk-border-radius-xs; overflow: hidden; &--active { - padding: bpk-spacing-lg(); - color: $bpk-text-primary-inverse-day; + padding: tokens.bpk-spacing-lg(); + color: tokens.$bpk-text-primary-inverse-day; - @include bpk-apply-primary-color-to(background-color); + @include utils.bpk-apply-primary-color-to(background-color); } &--inactive { - padding: bpk-spacing-lg(); - background-color: $bpk-surface-highlight-day; + padding: tokens.bpk-spacing-lg(); + background-color: tokens.$bpk-surface-highlight-day; } } diff --git a/examples/bpk-component-button/BpkButtonStory.module.css b/examples/bpk-component-button/BpkButtonStory.module.css deleted file mode 100644 index bdbe5e9e22..0000000000 --- a/examples/bpk-component-button/BpkButtonStory.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button-story-wrapper{padding:0.25rem 0} diff --git a/examples/bpk-component-button/BpkButtonStory.module.scss b/examples/bpk-component-button/BpkButtonStory.module.scss index 069f4f6f24..84453732f0 100644 --- a/examples/bpk-component-button/BpkButtonStory.module.scss +++ b/examples/bpk-component-button/BpkButtonStory.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-button-story-wrapper { - padding: bpk-spacing-sm() 0; + padding: tokens.bpk-spacing-sm() 0; } diff --git a/examples/bpk-component-card/examples.module.css b/examples/bpk-component-card/examples.module.css deleted file mode 100644 index 559a52921f..0000000000 --- a/examples/bpk-component-card/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-examples__wrapper{width:20.5rem} diff --git a/examples/bpk-component-card/examples.module.scss b/examples/bpk-component-card/examples.module.scss index 2e2285fb50..46e91a9bf2 100644 --- a/examples/bpk-component-card/examples.module.scss +++ b/examples/bpk-component-card/examples.module.scss @@ -16,19 +16,19 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-card-examples { &__header { display: flex; - height: bpk-spacing-xxl(); - padding: bpk-spacing-md(); + height: tokens.bpk-spacing-xxl(); + padding: tokens.bpk-spacing-md(); justify-content: space-between; align-items: center; - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; } &__wrapper { - width: bpk-spacing-md() * 41; + width: tokens.bpk-spacing-md() * 41; } } diff --git a/examples/bpk-component-chip/examples.module.css b/examples/bpk-component-chip/examples.module.css deleted file mode 100644 index 3d0c07bef0..0000000000 --- a/examples/bpk-component-chip/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chip-examples__container{padding-top:1.5rem}.bpk-chip-examples__container:last-child{padding-bottom:2rem}.bpk-chip-examples__chip{margin-right:0.5rem}.bpk-chip-examples__on-dark{margin-top:1.5rem;padding:1rem;background-color:#05203c}.bpk-chip-examples__default{margin-top:1.5rem;padding:1rem;background-color:#fff}.bpk-chip-examples__on-image{margin-top:1.5rem;padding:1rem;background-color:#e0e3e5} diff --git a/examples/bpk-component-chip/examples.module.scss b/examples/bpk-component-chip/examples.module.scss index 878efccf61..db8efb0f67 100644 --- a/examples/bpk-component-chip/examples.module.scss +++ b/examples/bpk-component-chip/examples.module.scss @@ -16,36 +16,36 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-chip-examples { &__container { - padding-top: bpk-spacing-lg(); + padding-top: tokens.bpk-spacing-lg(); &:last-child { - padding-bottom: bpk-spacing-xl(); + padding-bottom: tokens.bpk-spacing-xl(); } } &__chip { - margin-right: bpk-spacing-md(); + margin-right: tokens.bpk-spacing-md(); } &__on-dark { - margin-top: bpk-spacing-lg(); - padding: bpk-spacing-base(); - background-color: $bpk-core-primary-day; + margin-top: tokens.bpk-spacing-lg(); + padding: tokens.bpk-spacing-base(); + background-color: tokens.$bpk-core-primary-day; } &__default { - margin-top: bpk-spacing-lg(); - padding: bpk-spacing-base(); - background-color: $bpk-surface-default-day; + margin-top: tokens.bpk-spacing-lg(); + padding: tokens.bpk-spacing-base(); + background-color: tokens.$bpk-surface-default-day; } &__on-image { - margin-top: bpk-spacing-lg(); - padding: bpk-spacing-base(); - background-color: $bpk-surface-highlight-day; + margin-top: tokens.bpk-spacing-lg(); + padding: tokens.bpk-spacing-base(); + background-color: tokens.$bpk-surface-highlight-day; } } diff --git a/examples/bpk-component-datepicker/examples.module.css b/examples/bpk-component-datepicker/examples.module.css deleted file mode 100644 index f77a6b7694..0000000000 --- a/examples/bpk-component-datepicker/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-datepicker__container{display:flex}.bpk-datepicker__container--item{width:100%} diff --git a/examples/bpk-component-datepicker/examples.module.scss b/examples/bpk-component-datepicker/examples.module.scss index 8b94ced4b8..fc214fc28b 100644 --- a/examples/bpk-component-datepicker/examples.module.scss +++ b/examples/bpk-component-datepicker/examples.module.scss @@ -16,8 +16,6 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; - .bpk-datepicker { &__container { display: flex; diff --git a/examples/bpk-component-dialog/examples.module.css b/examples/bpk-component-dialog/examples.module.css deleted file mode 100644 index bcb012f342..0000000000 --- a/examples/bpk-component-dialog/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-paragraph{margin-bottom:0.5rem} diff --git a/examples/bpk-component-dialog/examples.module.scss b/examples/bpk-component-dialog/examples.module.scss index f7ef1dc7cb..4561394e57 100644 --- a/examples/bpk-component-dialog/examples.module.scss +++ b/examples/bpk-component-dialog/examples.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-dialog-paragraph { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); } diff --git a/examples/bpk-component-drawer/examples.module.css b/examples/bpk-component-drawer/examples.module.css deleted file mode 100644 index ef44dc0b5f..0000000000 --- a/examples/bpk-component-drawer/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-drawer-paragraph{margin-bottom:0.5rem}.bpk-drawer-content-container{display:flex;flex-direction:column}.bpk-drawer-button{margin:auto auto 0} diff --git a/examples/bpk-component-drawer/examples.module.scss b/examples/bpk-component-drawer/examples.module.scss index 148ae6510f..d9e5f6db36 100644 --- a/examples/bpk-component-drawer/examples.module.scss +++ b/examples/bpk-component-drawer/examples.module.scss @@ -16,10 +16,10 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-drawer-paragraph { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); } .bpk-drawer-content-container { diff --git a/examples/bpk-component-fieldset/examples.module.css b/examples/bpk-component-fieldset/examples.module.css deleted file mode 100644 index 86442b555f..0000000000 --- a/examples/bpk-component-fieldset/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-fieldsets__container{display:block}.bpk-fieldsets__fieldset{margin-right:0.25rem;flex:1}html[dir='rtl'] .bpk-fieldsets__fieldset{margin-right:0;margin-left:0.25rem}.bpk-fieldsets__toggle{margin-top:1rem;text-align:right}html[dir='rtl'] .bpk-fieldsets__toggle{text-align:left} diff --git a/examples/bpk-component-fieldset/examples.module.scss b/examples/bpk-component-fieldset/examples.module.scss index 57729fb4cd..24b3006982 100644 --- a/examples/bpk-component-fieldset/examples.module.scss +++ b/examples/bpk-component-fieldset/examples.module.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/utils'; .bpk-fieldsets { &__container { @@ -24,12 +25,12 @@ } &__fieldset { - margin-right: bpk-spacing-sm(); + margin-right: tokens.bpk-spacing-sm(); flex: 1; - @include bpk-rtl { + @include utils.bpk-rtl { margin-right: 0; - margin-left: bpk-spacing-sm(); + margin-left: tokens.bpk-spacing-sm(); } } @@ -37,7 +38,7 @@ margin-top: 1rem; text-align: right; - @include bpk-rtl { + @include utils.bpk-rtl { text-align: left; } } diff --git a/examples/bpk-component-flare/examples.module.css b/examples/bpk-component-flare/examples.module.css deleted file mode 100644 index afb0d8e0d0..0000000000 --- a/examples/bpk-component-flare/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-flare-stories{padding:2rem}.bpk-flare-stories__flare-bar{width:100%;margin-bottom:2rem}.bpk-flare-stories__flare-bar--svg{fill:#05203c}.bpk-flare-stories__content-bubble{width:100%;max-width:45rem;margin-bottom:2rem;background-color:#0062e3}.bpk-flare-stories__content-bubble--image{background-image:url("https://images.unsplash.com/photo-1556873992-0b43b3ac5ec1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5730&q=80 5730w")}.bpk-flare-stories__content-bubble--full-width{width:100vw;max-width:none;margin-left:calc(-50vw + 50%)}.bpk-flare-stories__content-bubble--fixed-height{height:12.5rem}.bpk-flare-stories__content-bubble--fixed-height--large{height:45rem}.bpk-flare-stories__content{max-width:45rem;margin:2rem;color:#fff} diff --git a/examples/bpk-component-flare/examples.module.scss b/examples/bpk-component-flare/examples.module.scss index 50a4159242..f422a5cff2 100644 --- a/examples/bpk-component-flare/examples.module.scss +++ b/examples/bpk-component-flare/examples.module.scss @@ -16,17 +16,17 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-flare-stories { - padding: bpk-spacing-xl(); + padding: tokens.bpk-spacing-xl(); &__flare-bar { width: 100%; margin-bottom: 2rem; &--svg { - fill: $bpk-core-primary-day; + fill: tokens.$bpk-core-primary-day; } } @@ -34,7 +34,7 @@ width: 100%; max-width: 45rem; margin-bottom: 2rem; - background-color: $bpk-core-accent-day; + background-color: tokens.$bpk-core-accent-day; &--image { background-image: url('https://images.unsplash.com/photo-1556873992-0b43b3ac5ec1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5730&q=80 5730w'); @@ -47,7 +47,7 @@ } &--fixed-height { - height: bpk-spacing-xxl() * 5; + height: tokens.bpk-spacing-xxl() * 5; &--large { height: 45rem; @@ -57,7 +57,7 @@ &__content { max-width: 45rem; - margin: bpk-spacing-xl(); - color: $bpk-text-primary-inverse-day; + margin: tokens.bpk-spacing-xl(); + color: tokens.$bpk-text-primary-inverse-day; } } diff --git a/examples/bpk-component-form-validation/examples.module.css b/examples/bpk-component-form-validation/examples.module.css deleted file mode 100644 index 5e61b7f0ce..0000000000 --- a/examples/bpk-component-form-validation/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpkdocs-forms-page__viewport-alert{display:none}@media (max-width: 64rem){.bpkdocs-forms-page__viewport-alert{display:block}}.bpkdocs-forms-page__form{margin-bottom:1rem}@media (max-width: 64rem){.bpkdocs-forms-page__form--desktop-only{display:none}} diff --git a/examples/bpk-component-form-validation/examples.module.scss b/examples/bpk-component-form-validation/examples.module.scss index 8bb03918bd..64da0aaf64 100644 --- a/examples/bpk-component-form-validation/examples.module.scss +++ b/examples/bpk-component-form-validation/examples.module.scss @@ -16,22 +16,23 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/breakpoints'; .bpkdocs-forms-page { &__viewport-alert { display: none; - @include bpk-breakpoint-tablet { + @include breakpoints.bpk-breakpoint-tablet { display: block; } } &__form { - margin-bottom: bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); &--desktop-only { - @include bpk-breakpoint-tablet { + @include breakpoints.bpk-breakpoint-tablet { display: none; } } diff --git a/examples/bpk-component-graphic-promotion/examples.js b/examples/bpk-component-graphic-promotion/examples.js index e04d08bed0..9bdec853d6 100644 --- a/examples/bpk-component-graphic-promotion/examples.js +++ b/examples/bpk-component-graphic-promotion/examples.js @@ -25,6 +25,8 @@ import STYLES from './examples.module.scss'; const contentId = 'graphic-promo-content'; const getClassName = cssModules(STYLES); +const graphicPromoClassName = getClassName('bpk-graphic-promotion-example'); + const sponsor = { label: 'Sponsored', logo: 'https://js.skyscnr.com/sttc/bpk-content/skyland-a76916b4.png', @@ -56,7 +58,7 @@ const DefaultExample = () => ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} textAlign={TEXT_ALIGN.start} /> @@ -70,7 +72,7 @@ const CenterAlignedExample = () => ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} textAlign={TEXT_ALIGN.center} /> @@ -84,7 +86,7 @@ const RightAlignedExample = () => ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} textAlign={TEXT_ALIGN.end} /> @@ -98,7 +100,7 @@ const InvertedPortraitExample = () => ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} textAlign={TEXT_ALIGN.start} invertVertically @@ -110,7 +112,7 @@ const MinimalisticExample = () => ( headline={headline} sponsor={sponsor} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} onClick={onClick} textAlign={TEXT_ALIGN.start} @@ -122,7 +124,7 @@ const MinimalisticRightAlignedExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} onClick={onClick} textAlign={TEXT_ALIGN.end} @@ -145,7 +147,7 @@ const NonSponsoredExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} onClick={onClick} textAlign={TEXT_ALIGN.start} @@ -158,7 +160,7 @@ const NonSponsoredCenterAlignedExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} onClick={onClick} textAlign={TEXT_ALIGN.center} @@ -171,7 +173,7 @@ const NonSponsoredRightAlignedExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} style={style} onClick={onClick} textAlign={TEXT_ALIGN.end} @@ -187,7 +189,7 @@ const VisualTestExample = () => ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} textAlign={TEXT_ALIGN.start} /> ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} textAlign={TEXT_ALIGN.center} /> ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} textAlign={TEXT_ALIGN.end} /> ( sponsor={sponsor} buttonText={buttonText} onClick={onClick} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} textAlign={TEXT_ALIGN.start} invertVertically /> @@ -225,7 +227,7 @@ const VisualTestExample = () => ( headline={headline} sponsor={sponsor} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} onClick={onClick} textAlign={TEXT_ALIGN.start} /> @@ -233,7 +235,7 @@ const VisualTestExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} onClick={onClick} textAlign={TEXT_ALIGN.end} /> @@ -242,7 +244,7 @@ const VisualTestExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} onClick={onClick} textAlign={TEXT_ALIGN.start} /> @@ -251,7 +253,7 @@ const VisualTestExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} onClick={onClick} textAlign={TEXT_ALIGN.center} /> @@ -260,7 +262,7 @@ const VisualTestExample = () => ( headline={headline} subheading={subheading} buttonText={buttonText} - className={getClassName(STYLES.graphicPromo)} + className={graphicPromoClassName} onClick={onClick} textAlign={TEXT_ALIGN.end} /> diff --git a/examples/bpk-component-graphic-promotion/examples.module.css b/examples/bpk-component-graphic-promotion/examples.module.css deleted file mode 100644 index d81b1040dd..0000000000 --- a/examples/bpk-component-graphic-promotion/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@media (max-width: 43.75rem){.graphicPromo{background-image:var(--background-image-mobile)}}@media (min-width: 43.76rem) and (max-width: 50rem){.graphicPromo{background-image:var(--background-image-tablet)}}@media (min-width: 50.01rem){.graphicPromo{background-image:var(--background-image-desktop)}} diff --git a/examples/bpk-component-graphic-promotion/examples.module.scss b/examples/bpk-component-graphic-promotion/examples.module.scss index 32e5d12cb4..e830458ffc 100644 --- a/examples/bpk-component-graphic-promotion/examples.module.scss +++ b/examples/bpk-component-graphic-promotion/examples.module.scss @@ -21,17 +21,16 @@ $breakpoint-landscape-tablet-max: 50rem; $breakpoint-landscape-tablet-min: 43.76rem; $breakpoint-portrait-large-max: 43.75rem; -.graphicPromo { +.bpk-graphic-promotion-example { @media (max-width: $breakpoint-portrait-large-max) { background-image: var(--background-image-mobile); } @media (min-width: $breakpoint-landscape-tablet-min) and (max-width: $breakpoint-landscape-tablet-max) { - background-image: var(--background-image-tablet);; + background-image: var(--background-image-tablet); } @media (min-width: $breakpoint-landscape-desktop-min) { background-image: var(--background-image-desktop); } } - diff --git a/examples/bpk-component-horizontal-nav/examples.module.css b/examples/bpk-component-horizontal-nav/examples.module.css deleted file mode 100644 index aeaf8fe82c..0000000000 --- a/examples/bpk-component-horizontal-nav/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-horizontal-nav-custom-scrollers{background:#d4fff2}.bpk-horizontal-nav-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #d4fff2, rgba(212,255,242,0));pointer-events:none;left:0}.bpk-horizontal-nav-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #d4fff2, rgba(212,255,242,0));pointer-events:none;right:0}.bpk-horizontal-nav-stories__narrow-container{width:10rem;height:10rem;border-right:0.1rem lightgray solid} diff --git a/examples/bpk-component-horizontal-nav/examples.module.scss b/examples/bpk-component-horizontal-nav/examples.module.scss index 109f1838c6..f879942a0f 100644 --- a/examples/bpk-component-horizontal-nav/examples.module.scss +++ b/examples/bpk-component-horizontal-nav/examples.module.scss @@ -16,19 +16,20 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/scroll-indicators'; -$custom-color: $bpk-status-success-fill-day; +$custom-color: tokens.$bpk-status-success-fill-day; .bpk-horizontal-nav-custom-scrollers { background: $custom-color; &--leading { - @include bpk-scroll-indicator-left($custom-color); + @include scroll-indicators.bpk-scroll-indicator-left($custom-color); } &--trailing { - @include bpk-scroll-indicator-right($custom-color); + @include scroll-indicators.bpk-scroll-indicator-right($custom-color); } } diff --git a/examples/bpk-component-infinite-scroll/examples.module.css b/examples/bpk-component-infinite-scroll/examples.module.css deleted file mode 100644 index dc8108cbb0..0000000000 --- a/examples/bpk-component-infinite-scroll/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-infinite-scroll-stories__fixed-panel{height:25rem;overflow-y:scroll}.bpk-infinite-scroll-stories__list{padding:0;list-style:none}.bpk-infinite-scroll-stories__list li{display:flex;height:5rem;justify-content:center;align-items:center;background-color:#eff1f2;color:#545860}.bpk-infinite-scroll-stories__custom-component{display:flex;padding:1rem 0;justify-content:center} diff --git a/examples/bpk-component-infinite-scroll/examples.module.scss b/examples/bpk-component-infinite-scroll/examples.module.scss index 87a674c809..2385cf0353 100644 --- a/examples/bpk-component-infinite-scroll/examples.module.scss +++ b/examples/bpk-component-infinite-scroll/examples.module.scss @@ -16,11 +16,11 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-infinite-scroll-stories { &__fixed-panel { - height: bpk-spacing-xxl() * 10; + height: tokens.bpk-spacing-xxl() * 10; overflow-y: scroll; } @@ -30,17 +30,17 @@ li { display: flex; - height: bpk-spacing-xxl() * 2; + height: tokens.bpk-spacing-xxl() * 2; justify-content: center; align-items: center; - background-color: $bpk-canvas-contrast-day; - color: $bpk-text-secondary-day; + background-color: tokens.$bpk-canvas-contrast-day; + color: tokens.$bpk-text-secondary-day; } } &__custom-component { display: flex; - padding: bpk-spacing-base() 0; + padding: tokens.bpk-spacing-base() 0; justify-content: center; } } diff --git a/examples/bpk-component-info-banner/examples.module.css b/examples/bpk-component-info-banner/examples.module.css deleted file mode 100644 index 4b0cc4f3cd..0000000000 --- a/examples/bpk-component-info-banner/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-info-banner-examples__component{margin-top:1rem}.bpk-info-banner-examples__p{padding:1rem 0} diff --git a/examples/bpk-component-info-banner/examples.module.scss b/examples/bpk-component-info-banner/examples.module.scss index 5490ea07ac..66b713502d 100644 --- a/examples/bpk-component-info-banner/examples.module.scss +++ b/examples/bpk-component-info-banner/examples.module.scss @@ -16,14 +16,14 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-info-banner-examples { &__component { - margin-top: bpk-spacing-base(); + margin-top: tokens.bpk-spacing-base(); } &__p { - padding: bpk-spacing-base() 0; + padding: tokens.bpk-spacing-base() 0; } } diff --git a/examples/bpk-component-input/examples.module.css b/examples/bpk-component-input/examples.module.css deleted file mode 100644 index 903a3e9453..0000000000 --- a/examples/bpk-component-input/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-forms__viewport-alert{display:none}@media (max-width: 64rem){.bpk-forms__viewport-alert{display:block}}.bpk-forms__form{margin-bottom:0.5rem}@media (max-width: 64rem){.bpk-forms__form--desktop-only{display:none}}.bpk-forms__place{display:inline-block;width:32%;vertical-align:bottom}.bpk-forms__date{display:inline-block;width:18%;vertical-align:bottom}.bpk-forms__hotels-destination{display:inline-block;width:48%;vertical-align:bottom} diff --git a/examples/bpk-component-input/examples.module.scss b/examples/bpk-component-input/examples.module.scss index 1b8e1edde7..d3d8b673c1 100644 --- a/examples/bpk-component-input/examples.module.scss +++ b/examples/bpk-component-input/examples.module.scss @@ -16,22 +16,23 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/breakpoints'; .bpk-forms { &__viewport-alert { display: none; - @include bpk-breakpoint-tablet { + @include breakpoints.bpk-breakpoint-tablet { display: block; } } &__form { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); &--desktop-only { - @include bpk-breakpoint-tablet { + @include breakpoints.bpk-breakpoint-tablet { display: none; } } diff --git a/examples/bpk-component-loading-button/examples.module.css b/examples/bpk-component-loading-button/examples.module.css deleted file mode 100644 index ba316b5223..0000000000 --- a/examples/bpk-component-loading-button/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-loading-button-example-wrapper{padding:0.25rem 0} diff --git a/examples/bpk-component-loading-button/examples.module.scss b/examples/bpk-component-loading-button/examples.module.scss index e0d5548459..47c5ff8235 100644 --- a/examples/bpk-component-loading-button/examples.module.scss +++ b/examples/bpk-component-loading-button/examples.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-loading-button-example-wrapper { - padding: bpk-spacing-sm() 0; + padding: tokens.bpk-spacing-sm() 0; } diff --git a/examples/bpk-component-map/examples.module.css b/examples/bpk-component-map/examples.module.css deleted file mode 100644 index 72851dd646..0000000000 --- a/examples/bpk-component-map/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.pass-node-wrapper{display:flex;align-items:center}.pass-node-wrapper-text{padding-left:0.5rem}.pass-node-wrapper-icon{fill:#fff} diff --git a/examples/bpk-component-mobile-scroll-container/examples.module.css b/examples/bpk-component-mobile-scroll-container/examples.module.css deleted file mode 100644 index 851c1afcfe..0000000000 --- a/examples/bpk-component-mobile-scroll-container/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-stories-mobile-scroll-container__leading-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #0062e3, rgba(0,98,227,0));pointer-events:none;left:0}.bpk-stories-mobile-scroll-container__trailing-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #0062e3, rgba(0,98,227,0));pointer-events:none;right:0}.bpk-scroll-block{display:flex}.bpk-scroll-block__item{display:flex;min-width:12.5rem;height:12.5rem;justify-content:center;align-items:center;background-color:#eff1f2}.bpk-scroll-block__item--alternate{background-color:#e0e3e5} diff --git a/examples/bpk-component-mobile-scroll-container/examples.module.scss b/examples/bpk-component-mobile-scroll-container/examples.module.scss index bb33eb58e2..6d071bf2a5 100644 --- a/examples/bpk-component-mobile-scroll-container/examples.module.scss +++ b/examples/bpk-component-mobile-scroll-container/examples.module.scss @@ -16,15 +16,20 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/scroll-indicators'; .bpk-stories-mobile-scroll-container { &__leading-indicator { - @include bpk-scroll-indicator-left($bpk-core-accent-day); + @include scroll-indicators.bpk-scroll-indicator-left( + tokens.$bpk-core-accent-day + ); } &__trailing-indicator { - @include bpk-scroll-indicator-right($bpk-core-accent-day); + @include scroll-indicators.bpk-scroll-indicator-right( + tokens.$bpk-core-accent-day + ); } } @@ -33,14 +38,14 @@ &__item { display: flex; - min-width: bpk-spacing-xxl() * 5; - height: bpk-spacing-xxl() * 5; + min-width: tokens.bpk-spacing-xxl() * 5; + height: tokens.bpk-spacing-xxl() * 5; justify-content: center; align-items: center; - background-color: $bpk-canvas-contrast-day; + background-color: tokens.$bpk-canvas-contrast-day; &--alternate { - background-color: $bpk-surface-highlight-day; + background-color: tokens.$bpk-surface-highlight-day; } } } diff --git a/examples/bpk-component-modal-v2/examples.module.css b/examples/bpk-component-modal-v2/examples.module.css deleted file mode 100644 index bcb012f342..0000000000 --- a/examples/bpk-component-modal-v2/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-paragraph{margin-bottom:0.5rem} diff --git a/examples/bpk-component-modal-v2/examples.module.scss b/examples/bpk-component-modal-v2/examples.module.scss index f7ef1dc7cb..4561394e57 100644 --- a/examples/bpk-component-modal-v2/examples.module.scss +++ b/examples/bpk-component-modal-v2/examples.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-dialog-paragraph { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); } diff --git a/examples/bpk-component-modal/examples.module.css b/examples/bpk-component-modal/examples.module.css deleted file mode 100644 index 45365aed4f..0000000000 --- a/examples/bpk-component-modal/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-paragraph{margin-bottom:0.5rem}.bpk-modal__leading-button{color:#0062e3;fill:#0062e3}.bpk-modal__leading-button :hover{color:#545860;fill:#545860} diff --git a/examples/bpk-component-modal/examples.module.scss b/examples/bpk-component-modal/examples.module.scss index 1cf49e8f9f..b0706ddb2f 100644 --- a/examples/bpk-component-modal/examples.module.scss +++ b/examples/bpk-component-modal/examples.module.scss @@ -16,18 +16,18 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-modal-paragraph { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); } .bpk-modal__leading-button { - color: $bpk-text-link-day; - fill: $bpk-text-link-day; + color: tokens.$bpk-text-link-day; + fill: tokens.$bpk-text-link-day; :hover { - color: $bpk-text-secondary-day; - fill: $bpk-text-secondary-day; + color: tokens.$bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; } } diff --git a/examples/bpk-component-navigation-bar/examples.module.css b/examples/bpk-component-navigation-bar/examples.module.css deleted file mode 100644 index 4dbf50e020..0000000000 --- a/examples/bpk-component-navigation-bar/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar-story{padding:.0625rem .0625rem 5rem;background-color:#eff1f2}.bpk-navigation-bar-story>*{margin-bottom:1rem} diff --git a/examples/bpk-component-navigation-bar/examples.module.scss b/examples/bpk-component-navigation-bar/examples.module.scss index 528d98ff1b..52f0153953 100644 --- a/examples/bpk-component-navigation-bar/examples.module.scss +++ b/examples/bpk-component-navigation-bar/examples.module.scss @@ -16,13 +16,14 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-navigation-bar-story { - padding: $bpk-one-pixel-rem $bpk-one-pixel-rem bpk-spacing-xxl() * 2; - background-color: $bpk-canvas-contrast-day; + padding: tokens.$bpk-one-pixel-rem tokens.$bpk-one-pixel-rem + tokens.bpk-spacing-xxl() * 2; + background-color: tokens.$bpk-canvas-contrast-day; > * { - margin-bottom: bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); } } diff --git a/examples/bpk-component-nudger/BpkNudgerStory.module.css b/examples/bpk-component-nudger/BpkNudgerStory.module.css deleted file mode 100644 index ff8746ed16..0000000000 --- a/examples/bpk-component-nudger/BpkNudgerStory.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-nudger-secondary-on-dark{color:#fff}.bpk-nudger-configurable{width:7rem} diff --git a/examples/bpk-component-nudger/BpkNudgerStory.module.scss b/examples/bpk-component-nudger/BpkNudgerStory.module.scss index 4cb57a557d..f59fc36eca 100644 --- a/examples/bpk-component-nudger/BpkNudgerStory.module.scss +++ b/examples/bpk-component-nudger/BpkNudgerStory.module.scss @@ -16,10 +16,10 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-nudger-secondary-on-dark { - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; } .bpk-nudger-configurable { diff --git a/examples/bpk-component-overlay/examples.module.css b/examples/bpk-component-overlay/examples.module.css deleted file mode 100644 index 268151fadf..0000000000 --- a/examples/bpk-component-overlay/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-overlay-stories{display:flex;justify-content:space-around}.bpk-overlay-stories__overlay-story{display:flex;width:100%;padding:1rem;flex-direction:column;align-items:center}.bpk-overlay-stories__overlay--name{padding-top:1rem;color:#161616}.bpk-overlay-stories__foreground{display:flex;height:100%;justify-content:center;align-items:flex-end;color:#fff} diff --git a/examples/bpk-component-overlay/examples.module.scss b/examples/bpk-component-overlay/examples.module.scss index 9e5d1caa22..efcc2adc2f 100644 --- a/examples/bpk-component-overlay/examples.module.scss +++ b/examples/bpk-component-overlay/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-overlay-stories { display: flex; @@ -25,14 +25,14 @@ &__overlay-story { display: flex; width: 100%; - padding: bpk-spacing-base(); + padding: tokens.bpk-spacing-base(); flex-direction: column; align-items: center; } &__overlay--name { - padding-top: bpk-spacing-base(); - color: $bpk-text-primary-day; + padding-top: tokens.bpk-spacing-base(); + color: tokens.$bpk-text-primary-day; } &__foreground { @@ -40,6 +40,6 @@ height: 100%; justify-content: center; align-items: flex-end; - color: $bpk-text-primary-inverse-day; + color: tokens.$bpk-text-primary-inverse-day; } } diff --git a/examples/bpk-component-page-indicator/examples.module.css b/examples/bpk-component-page-indicator/examples.module.css deleted file mode 100644 index d21f16b20a..0000000000 --- a/examples/bpk-component-page-indicator/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-page-indicator-examples__container{display:flex;width:100%;height:5rem;justify-content:center;align-items:flex-end} diff --git a/examples/bpk-component-page-indicator/examples.module.scss b/examples/bpk-component-page-indicator/examples.module.scss index f0f852bf9a..cfd51ac6c8 100644 --- a/examples/bpk-component-page-indicator/examples.module.scss +++ b/examples/bpk-component-page-indicator/examples.module.scss @@ -15,13 +15,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-page-indicator-examples { &__container { display: flex; width: 100%; - height: 80 * $bpk-one-pixel-rem; + height: 80 * tokens.$bpk-one-pixel-rem; justify-content: center; align-items: flex-end; } diff --git a/examples/bpk-component-popover/examples.module.css b/examples/bpk-component-popover/examples.module.css deleted file mode 100644 index 27fbc6c650..0000000000 --- a/examples/bpk-component-popover/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-popover-paragraph{margin-bottom:0.25rem}.bpk-popover-spacer{display:flex;height:6.25rem;margin:1.875rem;justify-content:space-around;align-items:flex-start}.bpk-popover-target{display:inline-block} diff --git a/examples/bpk-component-popover/examples.module.scss b/examples/bpk-component-popover/examples.module.scss index 50b37693f0..16ef2b2c9f 100644 --- a/examples/bpk-component-popover/examples.module.scss +++ b/examples/bpk-component-popover/examples.module.scss @@ -16,16 +16,16 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-popover-paragraph { - margin-bottom: bpk-spacing-sm(); + margin-bottom: tokens.bpk-spacing-sm(); } .bpk-popover-spacer { display: flex; - height: 100 * $bpk-one-pixel-rem; - margin: 30 * $bpk-one-pixel-rem; + height: 100 * tokens.$bpk-one-pixel-rem; + margin: 30 * tokens.$bpk-one-pixel-rem; justify-content: space-around; align-items: flex-start; } diff --git a/examples/bpk-component-progress/examples.module.css b/examples/bpk-component-progress/examples.module.css deleted file mode 100644 index d89f231c88..0000000000 --- a/examples/bpk-component-progress/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -.bpkdocs-progress-container__flex{display:flex;justify-content:space-between;align-items:center}.bpkdocs-progress-container__flex-grow{flex-grow:1} diff --git a/examples/bpk-component-rating/examples.module.css b/examples/bpk-component-rating/examples.module.css deleted file mode 100644 index a5120370c0..0000000000 --- a/examples/bpk-component-rating/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-rating-story--img{height:1rem;margin-right:-.375rem;margin-bottom:.0625rem;margin-left:-.375rem;vertical-align:middle}.bpk-rating-story--trip{height:1rem;vertical-align:middle} diff --git a/examples/bpk-component-rating/examples.module.scss b/examples/bpk-component-rating/examples.module.scss index c57b255ca6..781ca3b11d 100644 --- a/examples/bpk-component-rating/examples.module.scss +++ b/examples/bpk-component-rating/examples.module.scss @@ -16,19 +16,19 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-rating-story { &--img { - height: bpk-spacing-base(); - margin-right: -($bpk-one-pixel-rem * 6); - margin-bottom: $bpk-one-pixel-rem; - margin-left: -($bpk-one-pixel-rem * 6); + height: tokens.bpk-spacing-base(); + margin-right: -1 * (tokens.$bpk-one-pixel-rem * 6); + margin-bottom: tokens.$bpk-one-pixel-rem; + margin-left: -1 * (tokens.$bpk-one-pixel-rem * 6); vertical-align: middle; } &--trip { - height: bpk-spacing-base(); + height: tokens.bpk-spacing-base(); vertical-align: middle; } } diff --git a/examples/bpk-component-section-header/examples.module.css b/examples/bpk-component-section-header/examples.module.css deleted file mode 100644 index b280e018c0..0000000000 --- a/examples/bpk-component-section-header/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-section-header-examples__on-dark{margin-top:1.5rem;padding:1rem;background-color:#05203c}.bpk-section-header-examples__mixed{display:flex;grid-row-gap:1rem;flex-direction:column} diff --git a/examples/bpk-component-section-header/examples.module.scss b/examples/bpk-component-section-header/examples.module.scss index 0d80e218ab..8df4465416 100644 --- a/examples/bpk-component-section-header/examples.module.scss +++ b/examples/bpk-component-section-header/examples.module.scss @@ -16,18 +16,18 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; .bpk-section-header-examples { &__on-dark { - margin-top: bpk-spacing-lg(); - padding: bpk-spacing-base(); - background-color: $bpk-surface-contrast-day; + margin-top: tokens.bpk-spacing-lg(); + padding: tokens.bpk-spacing-base(); + background-color: tokens.$bpk-surface-contrast-day; } &__mixed { display: flex; - grid-row-gap: bpk-spacing-base(); + grid-row-gap: tokens.bpk-spacing-base(); flex-direction: column; } } diff --git a/examples/bpk-component-spinner/SpinnerLayout.module.css b/examples/bpk-component-spinner/SpinnerLayout.module.css deleted file mode 100644 index e2d9c4b7d0..0000000000 --- a/examples/bpk-component-spinner/SpinnerLayout.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-spinner-layout{display:flex;flex-direction:column}.bpk-spinner-layout__spinner{display:flex;padding:1.5rem;justify-content:center}.bpk-spinner-layout__spinner--light{background-color:#05203c;border-radius:.25rem} diff --git a/examples/bpk-component-spinner/SpinnerLayout.module.scss b/examples/bpk-component-spinner/SpinnerLayout.module.scss index 7653ebece8..371c46593d 100644 --- a/examples/bpk-component-spinner/SpinnerLayout.module.scss +++ b/examples/bpk-component-spinner/SpinnerLayout.module.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/radii'; .bpk-spinner-layout { display: flex; @@ -24,13 +25,13 @@ &__spinner { display: flex; - padding: bpk-spacing-lg(); + padding: tokens.bpk-spacing-lg(); justify-content: center; &--light { - background-color: $bpk-surface-contrast-day; + background-color: tokens.$bpk-surface-contrast-day; - @include bpk-border-radius-xs; + @include radii.bpk-border-radius-xs; } } } diff --git a/examples/bpk-component-ticket/examples.module.css b/examples/bpk-component-ticket/examples.module.css deleted file mode 100644 index 4e6644a14b..0000000000 --- a/examples/bpk-component-ticket/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-stories-flight{margin-bottom:2rem}.bpk-stories-flight__stub{display:flex;padding:1rem;flex-direction:column;justify-content:center;align-items:center}.bpk-stories-flight__small{color:#545860;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-stories-flight__logo{width:4rem;height:2rem}.bpk-stories-flight__price{margin:0;font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-stories-flight__flight-overview{display:flex;margin-bottom:1rem;align-items:center;flex:1}.bpk-stories-flight__main{display:flex;height:100%;flex-direction:column}.bpk-stories-flight__from{padding:0 1.5rem;text-align:right}.bpk-stories-flight__to{padding:0 1.5rem}.bpk-stories-flight__duration{padding:0 1rem}.bpk-stories-flight__time{margin:0;font-size:1.5rem;line-height:2rem;font-weight:400} diff --git a/examples/bpk-component-ticket/examples.module.scss b/examples/bpk-component-ticket/examples.module.scss index 1c022e91d9..75e6cdb4ca 100644 --- a/examples/bpk-component-ticket/examples.module.scss +++ b/examples/bpk-component-ticket/examples.module.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/typography'; .bpk-stories-flight { margin-bottom: 2rem; @@ -30,10 +31,10 @@ } &__small { - color: $bpk-text-secondary-day; + color: tokens.$bpk-text-secondary-day; - @include bpk-text; - @include bpk-caption; + @include typography.bpk-text; + @include typography.bpk-caption; } &__logo { @@ -42,8 +43,8 @@ } &__price { - @include bpk-text; - @include bpk-heading-3; + @include typography.bpk-text; + @include typography.bpk-heading-3; } &__flight-overview { @@ -60,20 +61,20 @@ } &__from { - padding: 0 bpk-spacing-lg(); + padding: 0 tokens.bpk-spacing-lg(); text-align: right; } &__to { - padding: 0 bpk-spacing-lg(); + padding: 0 tokens.bpk-spacing-lg(); } &__duration { - padding: 0 bpk-spacing-base(); + padding: 0 tokens.bpk-spacing-base(); } &__time { - @include bpk-text; - @include bpk-subheading; + @include typography.bpk-text; + @include typography.bpk-subheading; } } diff --git a/examples/bpk-scrim-utils/examples.css b/examples/bpk-scrim-utils/examples.css deleted file mode 100644 index 28fdcf1218..0000000000 --- a/examples/bpk-scrim-utils/examples.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-scrim-utils-example__dialog{z-index:1100;width:100%;max-width:32rem;margin:auto;outline:0;background-color:#fff;opacity:1;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.5rem}.bpk-scrim-utils-example__dialog-content{padding:1rem;flex:1;overflow-y:auto}.bpk-scrim-utils-example__dialog-container{display:flex;padding:1.5rem} diff --git a/examples/bpk-scrim-utils/examples.scss b/examples/bpk-scrim-utils/examples.scss index 7ee6ac19c7..1045b33054 100644 --- a/examples/bpk-scrim-utils/examples.scss +++ b/examples/bpk-scrim-utils/examples.scss @@ -16,30 +16,32 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; +@use '../../packages/unstable__bpk-mixins/radii'; +@use '../../packages/unstable__bpk-mixins/shadows'; .bpk-scrim-utils-example { &__dialog { - z-index: $bpk-zindex-modal; + z-index: tokens.$bpk-zindex-modal; width: 100%; - max-width: $bpk-modal-max-width; + max-width: tokens.$bpk-modal-max-width; margin: auto; outline: 0; - background-color: $bpk-modal-background-color; - opacity: $bpk-modal-opacity; + background-color: tokens.$bpk-modal-background-color; + opacity: tokens.$bpk-modal-opacity; - @include bpk-box-shadow-xl; - @include bpk-border-radius-sm; + @include shadows.bpk-box-shadow-xl; + @include radii.bpk-border-radius-sm; &-content { - padding: $bpk-modal-content-padding; + padding: tokens.$bpk-modal-content-padding; flex: 1; overflow-y: auto; } &-container { display: flex; - padding: bpk-spacing-lg(); + padding: tokens.bpk-spacing-lg(); } } } diff --git a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.css b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.css deleted file mode 100644 index cdb7fd23e5..0000000000 --- a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dark-example-wrapper{border-radius:.5rem;background-color:#05203c;background-color:var(--bpk-docs-sidebar-background, #05203c)}.bpk-dark-example-wrapper--padded{padding:1rem} diff --git a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss index c2008a56fb..ecfdda5b57 100644 --- a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss +++ b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss @@ -16,17 +16,19 @@ * limitations under the License. */ -@import '../../../packages/bpk-mixins/index.scss'; +@use '../../../packages/unstable__bpk-mixins/tokens'; +@use '../../../packages/unstable__bpk-mixins/radii'; +@use '../../../packages/unstable__bpk-mixins/utils'; .bpk-dark-example-wrapper { - @include bpk-border-radius-sm; - @include bpk-themeable-property( + @include radii.bpk-border-radius-sm; + @include utils.bpk-themeable-property( background-color, --bpk-docs-sidebar-background, - $bpk-core-primary-day + tokens.$bpk-core-primary-day ); &--padded { - padding: bpk-spacing-base(); + padding: tokens.bpk-spacing-base(); } } diff --git a/package-lock.json b/package-lock.json index 2bccc72042..bd6fc359d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,13 +46,14 @@ "babel-plugin-module-resolver": "^5.0.0", "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-require-context-hook": "^1.0.0", - "backpack-node-sass": "^1.1.2", + "chokidar": "^3.5.3", "core-js": "^3.35.1", "css-loader": "^6.9.0", "d3-scale": "^4.0.2", "danger": "^11.2.0", "date-fns": "^2.28.0", "eslint_d": "^13.0.0", + "glob": "^8.1.0", "gulp": "^4.0.2", "gulp-rename": "^2.0.0", "gulp-svgmin": "^4.1.0", @@ -63,7 +64,7 @@ "lint-staged": "^15.0.2", "lodash": "^4.17.20", "mini-css-extract-plugin": "^2.8.0", - "node-sass": "^6.0.1", + "npm-run-all": "^4.1.5", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.0", "prop-types": "^15.7.2", @@ -71,7 +72,9 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-svg-loader": "^3.0.1", + "sass-embedded": "^1.70.0", "sass-loader": "^13.3.3", + "sass-migrator": "^1.8.0", "sassdoc": "^2.7.0", "storybook": "^7.6.10", "style-loader": "^3.3.3", @@ -152,6 +155,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/cli/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/@babel/code-frame": { "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", @@ -2102,6 +2125,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@bufbuild/protobuf": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.5.0.tgz", + "integrity": "sha512-0Jg+B7Vl8YGCi7c3iZ8/38iTbZrwdU7or6QZlsA9lhSrhumaXOTMsGO8gqwDuus/THEkTiY3Uxn+PEJwgsLt0w==", + "dev": true + }, "node_modules/@colors/colors": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", @@ -2395,12 +2424,6 @@ "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==", "dev": true }, - "node_modules/@gar/promisify": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", - "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==", - "dev": true - }, "node_modules/@gitbeaker/core": { "version": "35.8.1", "dev": true, @@ -2914,6 +2937,26 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/@jest/reporters/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/@jest/reporters/node_modules/has-flag": { "version": "4.0.0", "dev": true, @@ -3322,66 +3365,6 @@ "node": ">= 8" } }, - "node_modules/@npmcli/fs": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz", - "integrity": "sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==", - "dev": true, - "dependencies": { - "@gar/promisify": "^1.1.3", - "semver": "^7.3.5" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/@npmcli/fs/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@npmcli/fs/node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@npmcli/fs/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, - "node_modules/@npmcli/move-file": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-2.0.1.tgz", - "integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==", - "deprecated": "This functionality has been moved to @npmcli/fs", - "dev": true, - "dependencies": { - "mkdirp": "^1.0.4", - "rimraf": "^3.0.2" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, "node_modules/@octokit/auth-token": { "version": "2.5.0", "dev": true, @@ -11119,11 +11102,6 @@ "dev": true, "license": "BSD-3-Clause" }, - "node_modules/abbrev": { - "version": "1.1.1", - "dev": true, - "license": "ISC" - }, "node_modules/accepts": { "version": "1.3.8", "dev": true, @@ -11211,18 +11189,6 @@ "node": ">= 6.0.0" } }, - "node_modules/agentkeepalive": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz", - "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==", - "dev": true, - "dependencies": { - "humanize-ms": "^1.2.1" - }, - "engines": { - "node": ">= 8.0.0" - } - }, "node_modules/aggregate-error": { "version": "3.1.0", "dev": true, @@ -11277,14 +11243,6 @@ "ajv": "^8.8.2" } }, - "node_modules/amdefine": { - "version": "1.0.1", - "dev": true, - "license": "BSD-3-Clause OR MIT", - "engines": { - "node": ">=0.4.2" - } - }, "node_modules/ansi-align": { "version": "3.0.1", "dev": true, @@ -11446,25 +11404,11 @@ "node": ">=0.10.0" } }, - "node_modules/aproba": { - "version": "1.2.0", - "dev": true, - "license": "ISC" - }, "node_modules/archy": { "version": "1.0.0", "dev": true, "license": "MIT" }, - "node_modules/are-we-there-yet": { - "version": "1.1.7", - "dev": true, - "license": "ISC", - "dependencies": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" - } - }, "node_modules/argparse": { "version": "1.0.10", "dev": true, @@ -11781,14 +11725,6 @@ "dev": true, "license": "MIT" }, - "node_modules/asn1": { - "version": "0.2.6", - "dev": true, - "license": "MIT", - "dependencies": { - "safer-buffer": "~2.1.0" - } - }, "node_modules/assert": { "version": "2.1.0", "dev": true, @@ -11801,14 +11737,6 @@ "util": "^0.12.5" } }, - "node_modules/assert-plus": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.8" - } - }, "node_modules/assign-symbols": { "version": "1.0.0", "dev": true, @@ -11872,13 +11800,6 @@ ], "license": "MIT" }, - "node_modules/async-foreach": { - "version": "0.1.3", - "dev": true, - "engines": { - "node": "*" - } - }, "node_modules/async-limiter": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", @@ -11976,19 +11897,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/aws-sign2": { - "version": "0.7.0", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "*" - } - }, - "node_modules/aws4": { - "version": "1.12.0", - "dev": true, - "license": "MIT" - }, "node_modules/axe-core": { "version": "4.8.2", "dev": true, @@ -12306,43 +12214,6 @@ "node": ">= 16" } }, - "node_modules/babel-plugin-module-resolver/node_modules/brace-expansion": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/babel-plugin-module-resolver/node_modules/glob": { - "version": "8.1.0", - "dev": true, - "license": "ISC", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^5.0.1", - "once": "^1.3.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/babel-plugin-module-resolver/node_modules/minimatch": { - "version": "5.1.6", - "dev": true, - "license": "ISC", - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/babel-plugin-module-resolver/node_modules/resolve": { "version": "1.22.6", "dev": true, @@ -12531,533 +12402,6 @@ "node": ">= 0.10" } }, - "node_modules/backpack-node-sass": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/backpack-node-sass/-/backpack-node-sass-1.1.2.tgz", - "integrity": "sha512-8nw2Fm8E7sq1DTlj+dvwEllvYQ/juWzHCDPErFOfJ4MHIHvZudzxpHNw3zTb/y2A/cwMJ0z0WgiByWxHb4+ScQ==", - "dev": true, - "dependencies": { - "chokidar": "^3.5.3", - "fast-glob": "^3.3.1", - "find-parent-dir": "^0.3.1", - "lodash": "^4.17.21", - "node-sass": "^9.0.0", - "ora": "^5.4.1", - "yargs": "^17.7.2" - }, - "bin": { - "backpack-node-sass": "cli.js" - }, - "engines": { - "node": "^18.0.0", - "npm": "^9.0.0 || ^10.2.5" - } - }, - "node_modules/backpack-node-sass/node_modules/@npmcli/fs": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz", - "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==", - "dev": true, - "dependencies": { - "@gar/promisify": "^1.0.1", - "semver": "^7.3.5" - } - }, - "node_modules/backpack-node-sass/node_modules/@npmcli/move-file": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz", - "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==", - "deprecated": "This functionality has been moved to @npmcli/fs", - "dev": true, - "dependencies": { - "mkdirp": "^1.0.4", - "rimraf": "^3.0.2" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/backpack-node-sass/node_modules/@tootallnate/once": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", - "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", - "dev": true, - "engines": { - "node": ">= 6" - } - }, - "node_modules/backpack-node-sass/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/backpack-node-sass/node_modules/are-we-there-yet": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz", - "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==", - "dev": true, - "dependencies": { - "delegates": "^1.0.0", - "readable-stream": "^3.6.0" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/backpack-node-sass/node_modules/cacache": { - "version": "15.3.0", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz", - "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==", - "dev": true, - "dependencies": { - "@npmcli/fs": "^1.0.0", - "@npmcli/move-file": "^1.0.1", - "chownr": "^2.0.0", - "fs-minipass": "^2.0.0", - "glob": "^7.1.4", - "infer-owner": "^1.0.4", - "lru-cache": "^6.0.0", - "minipass": "^3.1.1", - "minipass-collect": "^1.0.2", - "minipass-flush": "^1.0.5", - "minipass-pipeline": "^1.2.2", - "mkdirp": "^1.0.3", - "p-map": "^4.0.0", - "promise-inflight": "^1.0.1", - "rimraf": "^3.0.2", - "ssri": "^8.0.1", - "tar": "^6.0.2", - "unique-filename": "^1.1.1" - }, - "engines": { - "node": ">= 10" - } - }, - "node_modules/backpack-node-sass/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/backpack-node-sass/node_modules/cliui": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", - "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", - "dev": true, - "dependencies": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.1", - "wrap-ansi": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/backpack-node-sass/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true - }, - "node_modules/backpack-node-sass/node_modules/gauge": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz", - "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==", - "dev": true, - "dependencies": { - "aproba": "^1.0.3 || ^2.0.0", - "color-support": "^1.1.3", - "console-control-strings": "^1.1.0", - "has-unicode": "^2.0.1", - "signal-exit": "^3.0.7", - "string-width": "^4.2.3", - "strip-ansi": "^6.0.1", - "wide-align": "^1.1.5" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/backpack-node-sass/node_modules/get-stdin": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", - "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/backpack-node-sass/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/backpack-node-sass/node_modules/http-proxy-agent": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", - "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==", - "dev": true, - "dependencies": { - "@tootallnate/once": "1", - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/backpack-node-sass/node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/backpack-node-sass/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/backpack-node-sass/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/backpack-node-sass/node_modules/minipass-fetch": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz", - "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==", - "dev": true, - "dependencies": { - "minipass": "^3.1.0", - "minipass-sized": "^1.0.3", - "minizlib": "^2.0.0" - }, - "engines": { - "node": ">=8" - }, - "optionalDependencies": { - "encoding": "^0.1.12" - } - }, - "node_modules/backpack-node-sass/node_modules/node-gyp": { - "version": "8.4.1", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz", - "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==", - "dev": true, - "dependencies": { - "env-paths": "^2.2.0", - "glob": "^7.1.4", - "graceful-fs": "^4.2.6", - "make-fetch-happen": "^9.1.0", - "nopt": "^5.0.0", - "npmlog": "^6.0.0", - "rimraf": "^3.0.2", - "semver": "^7.3.5", - "tar": "^6.1.2", - "which": "^2.0.2" - }, - "bin": { - "node-gyp": "bin/node-gyp.js" - }, - "engines": { - "node": ">= 10.12.0" - } - }, - "node_modules/backpack-node-sass/node_modules/node-gyp/node_modules/make-fetch-happen": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz", - "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==", - "dev": true, - "dependencies": { - "agentkeepalive": "^4.1.3", - "cacache": "^15.2.0", - "http-cache-semantics": "^4.1.0", - "http-proxy-agent": "^4.0.1", - "https-proxy-agent": "^5.0.0", - "is-lambda": "^1.0.1", - "lru-cache": "^6.0.0", - "minipass": "^3.1.3", - "minipass-collect": "^1.0.2", - "minipass-fetch": "^1.3.2", - "minipass-flush": "^1.0.5", - "minipass-pipeline": "^1.2.4", - "negotiator": "^0.6.2", - "promise-retry": "^2.0.1", - "socks-proxy-agent": "^6.0.0", - "ssri": "^8.0.0" - }, - "engines": { - "node": ">= 10" - } - }, - "node_modules/backpack-node-sass/node_modules/node-sass": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-9.0.0.tgz", - "integrity": "sha512-yltEuuLrfH6M7Pq2gAj5B6Zm7m+gdZoG66wTqG6mIZV/zijq3M2OO2HswtT6oBspPyFhHDcaxWpsBm0fRNDHPg==", - "dev": true, - "hasInstallScript": true, - "dependencies": { - "async-foreach": "^0.1.3", - "chalk": "^4.1.2", - "cross-spawn": "^7.0.3", - "gaze": "^1.0.0", - "get-stdin": "^4.0.1", - "glob": "^7.0.3", - "lodash": "^4.17.15", - "make-fetch-happen": "^10.0.4", - "meow": "^9.0.0", - "nan": "^2.17.0", - "node-gyp": "^8.4.1", - "sass-graph": "^4.0.1", - "stdout-stream": "^1.4.0", - "true-case-path": "^2.2.1" - }, - "bin": { - "node-sass": "bin/node-sass" - }, - "engines": { - "node": ">=16" - } - }, - "node_modules/backpack-node-sass/node_modules/npmlog": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz", - "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==", - "dev": true, - "dependencies": { - "are-we-there-yet": "^3.0.0", - "console-control-strings": "^1.1.0", - "gauge": "^4.0.3", - "set-blocking": "^2.0.0" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/backpack-node-sass/node_modules/readable-stream": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", - "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", - "dev": true, - "dependencies": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/backpack-node-sass/node_modules/sass-graph": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz", - "integrity": "sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==", - "dev": true, - "dependencies": { - "glob": "^7.0.0", - "lodash": "^4.17.11", - "scss-tokenizer": "^0.4.3", - "yargs": "^17.2.1" - }, - "bin": { - "sassgraph": "bin/sassgraph" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/backpack-node-sass/node_modules/scss-tokenizer": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz", - "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==", - "dev": true, - "dependencies": { - "js-base64": "^2.4.9", - "source-map": "^0.7.3" - } - }, - "node_modules/backpack-node-sass/node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/backpack-node-sass/node_modules/socks-proxy-agent": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz", - "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==", - "dev": true, - "dependencies": { - "agent-base": "^6.0.2", - "debug": "^4.3.3", - "socks": "^2.6.2" - }, - "engines": { - "node": ">= 10" - } - }, - "node_modules/backpack-node-sass/node_modules/ssri": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", - "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==", - "dev": true, - "dependencies": { - "minipass": "^3.1.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/backpack-node-sass/node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/backpack-node-sass/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/backpack-node-sass/node_modules/true-case-path": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz", - "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==", - "dev": true - }, - "node_modules/backpack-node-sass/node_modules/unique-filename": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", - "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==", - "dev": true, - "dependencies": { - "unique-slug": "^2.0.0" - } - }, - "node_modules/backpack-node-sass/node_modules/unique-slug": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz", - "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==", - "dev": true, - "dependencies": { - "imurmurhash": "^0.1.4" - } - }, - "node_modules/backpack-node-sass/node_modules/wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/backpack-node-sass/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, - "node_modules/backpack-node-sass/node_modules/yargs": { - "version": "17.7.2", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", - "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", - "dev": true, - "dependencies": { - "cliui": "^8.0.1", - "escalade": "^3.1.1", - "get-caller-file": "^2.0.5", - "require-directory": "^2.1.1", - "string-width": "^4.2.3", - "y18n": "^5.0.5", - "yargs-parser": "^21.1.1" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/backpack-node-sass/node_modules/yargs-parser": { - "version": "21.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", - "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", - "dev": true, - "engines": { - "node": ">=12" - } - }, "node_modules/balanced-match": { "version": "1.0.2", "dev": true, @@ -13110,14 +12454,6 @@ ], "license": "MIT" }, - "node_modules/bcrypt-pbkdf": { - "version": "1.0.2", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "tweetnacl": "^0.14.3" - } - }, "node_modules/before-after-hook": { "version": "2.2.3", "dev": true, @@ -13461,6 +12797,12 @@ "ieee754": "^1.1.13" } }, + "node_modules/buffer-builder": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", + "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==", + "dev": true + }, "node_modules/buffer-crc32": { "version": "0.2.13", "dev": true, @@ -13551,102 +12893,6 @@ "node": ">=8.0.0" } }, - "node_modules/cacache": { - "version": "16.1.3", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz", - "integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==", - "dev": true, - "dependencies": { - "@npmcli/fs": "^2.1.0", - "@npmcli/move-file": "^2.0.0", - "chownr": "^2.0.0", - "fs-minipass": "^2.1.0", - "glob": "^8.0.1", - "infer-owner": "^1.0.4", - "lru-cache": "^7.7.1", - "minipass": "^3.1.6", - "minipass-collect": "^1.0.2", - "minipass-flush": "^1.0.5", - "minipass-pipeline": "^1.2.4", - "mkdirp": "^1.0.4", - "p-map": "^4.0.0", - "promise-inflight": "^1.0.1", - "rimraf": "^3.0.2", - "ssri": "^9.0.0", - "tar": "^6.1.11", - "unique-filename": "^2.0.0" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/cacache/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/cacache/node_modules/glob": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", - "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", - "dev": true, - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^5.0.1", - "once": "^1.3.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/cacache/node_modules/lru-cache": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", - "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", - "dev": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/cacache/node_modules/minimatch": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", - "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", - "dev": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/cacache/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cacache/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/cache-base": { "version": "1.0.1", "dev": true, @@ -13729,30 +12975,6 @@ "node": ">=6" } }, - "node_modules/camelcase-keys": { - "version": "6.2.2", - "dev": true, - "license": "MIT", - "dependencies": { - "camelcase": "^5.3.1", - "map-obj": "^4.0.0", - "quick-lru": "^4.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/camelcase-keys/node_modules/quick-lru": { - "version": "4.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001584", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001584.tgz", @@ -13782,11 +13004,6 @@ "node": ">=4" } }, - "node_modules/caseless": { - "version": "0.12.0", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/cdocparser": { "version": "0.13.0", "dev": true, @@ -14609,11 +13826,6 @@ "node": "^14.18.0 || >=16.10.0" } }, - "node_modules/console-control-strings": { - "version": "1.1.0", - "dev": true, - "license": "ISC" - }, "node_modules/constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -15299,17 +14511,6 @@ "node": ">=0.10.0" } }, - "node_modules/dashdash": { - "version": "1.14.1", - "dev": true, - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0" - }, - "engines": { - "node": ">=0.10" - } - }, "node_modules/data-urls": { "version": "3.0.2", "dev": true, @@ -15783,11 +14984,6 @@ "node": ">=0.4.0" } }, - "node_modules/delegates": { - "version": "1.0.0", - "dev": true, - "license": "MIT" - }, "node_modules/depd": { "version": "2.0.0", "dev": true, @@ -16074,15 +15270,6 @@ "dev": true, "license": "MIT" }, - "node_modules/ecc-jsbn": { - "version": "0.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "jsbn": "~0.1.0", - "safer-buffer": "^2.1.0" - } - }, "node_modules/ecdsa-sig-formatter": { "version": "1.0.11", "dev": true, @@ -16154,6 +15341,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "iconv-lite": "^0.6.2" } @@ -16163,6 +15351,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -16241,8 +15430,9 @@ }, "node_modules/env-paths": { "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", "dev": true, - "license": "MIT", "engines": { "node": ">=6" } @@ -16259,12 +15449,6 @@ "node": ">=4" } }, - "node_modules/err-code": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz", - "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==", - "dev": true - }, "node_modules/error-ex": { "version": "1.3.2", "dev": true, @@ -17798,14 +16982,6 @@ "@types/yauzl": "^2.9.1" } }, - "node_modules/extsprintf": { - "version": "1.3.0", - "dev": true, - "engines": [ - "node >=0.6.0" - ], - "license": "MIT" - }, "node_modules/fancy-log": { "version": "1.3.3", "dev": true, @@ -18106,12 +17282,6 @@ "dev": true, "license": "MIT" }, - "node_modules/find-parent-dir": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.1.tgz", - "integrity": "sha512-o4UcykWV/XN9wm+jMEtWLPlV8RXCZnMhQI6F6OdHeSez7iiJWePw8ijOlskJZMsaQoGR/b7dH6lO02HhaTN7+A==", - "dev": true - }, "node_modules/find-up": { "version": "5.0.0", "dev": true, @@ -18368,14 +17538,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/forever-agent": { - "version": "0.6.1", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "*" - } - }, "node_modules/fork-ts-checker-webpack-plugin": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz", @@ -18719,75 +17881,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/gauge": { - "version": "2.7.4", - "dev": true, - "license": "ISC", - "dependencies": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" - } - }, - "node_modules/gauge/node_modules/ansi-regex": { - "version": "2.1.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/gauge/node_modules/is-fullwidth-code-point": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "number-is-nan": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/gauge/node_modules/string-width": { - "version": "1.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/gauge/node_modules/strip-ansi": { - "version": "3.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/gaze": { - "version": "1.1.3", - "dev": true, - "license": "MIT", - "dependencies": { - "globule": "^1.0.0" - }, - "engines": { - "node": ">= 4.0.0" - } - }, "node_modules/gensync": { "version": "1.0.0-beta.2", "dev": true, @@ -18913,14 +18006,6 @@ "node": ">=0.10.0" } }, - "node_modules/getpass": { - "version": "0.1.7", - "dev": true, - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0" - } - }, "node_modules/giget": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/giget/-/giget-1.2.1.tgz", @@ -18959,19 +18044,19 @@ "license": "ISC" }, "node_modules/glob": { - "version": "7.2.3", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", "dev": true, - "license": "ISC", "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", - "minimatch": "^3.1.1", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" + "minimatch": "^5.0.1", + "once": "^1.3.0" }, "engines": { - "node": "*" + "node": ">=12" }, "funding": { "url": "https://github.com/sponsors/isaacs" @@ -19008,6 +18093,26 @@ "node": ">= 0.10" } }, + "node_modules/glob-stream/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/glob-stream/node_modules/glob-parent": { "version": "3.1.0", "dev": true, @@ -19274,6 +18379,27 @@ "node": ">=0.10.0" } }, + "node_modules/glob/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/glob/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/glob2base": { "version": "0.0.12", "dev": true, @@ -19396,49 +18522,6 @@ "dev": true, "license": "MIT" }, - "node_modules/globule": { - "version": "1.3.4", - "dev": true, - "license": "MIT", - "dependencies": { - "glob": "~7.1.1", - "lodash": "^4.17.21", - "minimatch": "~3.0.2" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/globule/node_modules/glob": { - "version": "7.1.7", - "dev": true, - "license": "ISC", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/globule/node_modules/minimatch": { - "version": "3.0.8", - "dev": true, - "license": "ISC", - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, "node_modules/glogg": { "version": "1.0.2", "dev": true, @@ -19848,46 +18931,6 @@ "node": ">=0.10.0" } }, - "node_modules/har-schema": { - "version": "2.0.0", - "dev": true, - "license": "ISC", - "engines": { - "node": ">=4" - } - }, - "node_modules/har-validator": { - "version": "5.1.5", - "dev": true, - "license": "MIT", - "dependencies": { - "ajv": "^6.12.3", - "har-schema": "^2.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/har-validator/node_modules/ajv": { - "version": "6.12.6", - "dev": true, - "license": "MIT", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "node_modules/har-validator/node_modules/json-schema-traverse": { - "version": "0.4.1", - "dev": true, - "license": "MIT" - }, "node_modules/hard-rejection": { "version": "2.1.0", "dev": true, @@ -19907,25 +18950,6 @@ "node": ">= 0.4.0" } }, - "node_modules/has-ansi": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/has-ansi/node_modules/ansi-regex": { - "version": "2.1.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/has-bigints": { "version": "1.0.2", "dev": true, @@ -19989,11 +19013,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/has-unicode": { - "version": "2.0.1", - "dev": true, - "license": "ISC" - }, "node_modules/has-value": { "version": "1.0.0", "dev": true, @@ -20366,20 +19385,6 @@ "node": ">= 6" } }, - "node_modules/http-signature": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0", - "jsprim": "^1.2.2", - "sshpk": "^1.7.0" - }, - "engines": { - "node": ">=0.8", - "npm": ">=1.3.7" - } - }, "node_modules/http2-wrapper": { "version": "1.0.3", "dev": true, @@ -20412,15 +19417,6 @@ "node": ">=10.17.0" } }, - "node_modules/humanize-ms": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", - "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", - "dev": true, - "dependencies": { - "ms": "^2.0.0" - } - }, "node_modules/husky": { "version": "8.0.3", "dev": true, @@ -20507,6 +19503,12 @@ "node": ">=16.x" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "dev": true, @@ -20617,12 +19619,6 @@ "node": ">=8" } }, - "node_modules/infer-owner": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", - "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==", - "dev": true - }, "node_modules/inflight": { "version": "1.0.6", "dev": true, @@ -21052,12 +20048,6 @@ "node": ">=8" } }, - "node_modules/is-lambda": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz", - "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==", - "dev": true - }, "node_modules/is-map": { "version": "2.0.2", "dev": true, @@ -21401,11 +20391,6 @@ "node": ">=0.10.0" } }, - "node_modules/isstream": { - "version": "0.1.2", - "dev": true, - "license": "MIT" - }, "node_modules/istanbul-lib-coverage": { "version": "3.2.0", "dev": true, @@ -22177,6 +21162,26 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/jest-config/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/jest-config/node_modules/has-flag": { "version": "4.0.0", "dev": true, @@ -23048,6 +22053,26 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/jest-runtime/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/jest-runtime/node_modules/has-flag": { "version": "4.0.0", "dev": true, @@ -23491,11 +22516,6 @@ "jiti": "bin/jiti.js" } }, - "node_modules/js-base64": { - "version": "2.6.4", - "dev": true, - "license": "BSD-3-Clause" - }, "node_modules/js-tokens": { "version": "4.0.0", "dev": true, @@ -23513,11 +22533,6 @@ "js-yaml": "bin/js-yaml.js" } }, - "node_modules/jsbn": { - "version": "0.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/jscodeshift": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.15.1.tgz", @@ -23691,6 +22706,12 @@ "dev": true, "license": "MIT" }, + "node_modules/json-parse-better-errors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", + "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", + "dev": true + }, "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "dev": true, @@ -23711,11 +22732,6 @@ "dev": true, "license": "MIT" }, - "node_modules/json-stringify-safe": { - "version": "5.0.1", - "dev": true, - "license": "ISC" - }, "node_modules/json5": { "version": "2.2.3", "dev": true, @@ -23987,20 +23003,6 @@ "dev": true, "license": "ISC" }, - "node_modules/jsprim": { - "version": "1.4.2", - "dev": true, - "license": "MIT", - "dependencies": { - "assert-plus": "1.0.0", - "extsprintf": "1.3.0", - "json-schema": "0.4.0", - "verror": "1.10.0" - }, - "engines": { - "node": ">=0.6.0" - } - }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "dev": true, @@ -25130,60 +24132,6 @@ "semver": "bin/semver" } }, - "node_modules/make-fetch-happen": { - "version": "10.2.1", - "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz", - "integrity": "sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==", - "dev": true, - "dependencies": { - "agentkeepalive": "^4.2.1", - "cacache": "^16.1.0", - "http-cache-semantics": "^4.1.0", - "http-proxy-agent": "^5.0.0", - "https-proxy-agent": "^5.0.0", - "is-lambda": "^1.0.1", - "lru-cache": "^7.7.1", - "minipass": "^3.1.6", - "minipass-collect": "^1.0.2", - "minipass-fetch": "^2.0.3", - "minipass-flush": "^1.0.5", - "minipass-pipeline": "^1.2.4", - "negotiator": "^0.6.3", - "promise-retry": "^2.0.1", - "socks-proxy-agent": "^7.0.0", - "ssri": "^9.0.0" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/make-fetch-happen/node_modules/lru-cache": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", - "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", - "dev": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/make-fetch-happen/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/make-fetch-happen/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/make-iterator": { "version": "1.0.1", "dev": true, @@ -25506,40 +24454,13 @@ "map-or-similar": "^1.5.0" } }, - "node_modules/meow": { - "version": "9.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/minimist": "^1.2.0", - "camelcase-keys": "^6.2.2", - "decamelize": "^1.2.0", - "decamelize-keys": "^1.1.0", - "hard-rejection": "^2.1.0", - "minimist-options": "4.1.0", - "normalize-package-data": "^3.0.0", - "read-pkg-up": "^7.0.1", - "redent": "^3.0.0", - "trim-newlines": "^3.0.0", - "type-fest": "^0.18.0", - "yargs-parser": "^20.2.3" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/meow/node_modules/type-fest": { - "version": "0.18.1", + "node_modules/memorystream": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", + "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==", "dev": true, - "license": "(MIT OR CC0-1.0)", "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node": ">= 0.10.0" } }, "node_modules/merge-descriptors": { @@ -25712,161 +24633,6 @@ "node": ">=8" } }, - "node_modules/minipass-collect": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz", - "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==", - "dev": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/minipass-collect/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minipass-collect/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, - "node_modules/minipass-fetch": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-2.1.2.tgz", - "integrity": "sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==", - "dev": true, - "dependencies": { - "minipass": "^3.1.6", - "minipass-sized": "^1.0.3", - "minizlib": "^2.1.2" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - }, - "optionalDependencies": { - "encoding": "^0.1.13" - } - }, - "node_modules/minipass-fetch/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minipass-fetch/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, - "node_modules/minipass-flush": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz", - "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==", - "dev": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/minipass-flush/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minipass-flush/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, - "node_modules/minipass-pipeline": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz", - "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==", - "dev": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minipass-pipeline/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minipass-pipeline/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, - "node_modules/minipass-sized": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz", - "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==", - "dev": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minipass-sized/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minipass-sized/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/minizlib": { "version": "2.1.2", "dev": true, @@ -25960,7 +24726,8 @@ "node_modules/nan": { "version": "2.18.0", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true }, "node_modules/nanoid": { "version": "3.3.6", @@ -26059,6 +24826,12 @@ "dev": true, "license": "ISC" }, + "node_modules/nice-try": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", + "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", + "dev": true + }, "node_modules/no-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", @@ -26135,30 +24908,32 @@ "webidl-conversions": "^3.0.0" } }, - "node_modules/node-gyp": { - "version": "7.1.2", + "node_modules/node-int64": { + "version": "0.4.0", "dev": true, - "license": "MIT", + "license": "MIT" + }, + "node_modules/node-releases": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", + "dev": true + }, + "node_modules/normalize-package-data": { + "version": "3.0.3", + "dev": true, + "license": "BSD-2-Clause", "dependencies": { - "env-paths": "^2.2.0", - "glob": "^7.1.4", - "graceful-fs": "^4.2.3", - "nopt": "^5.0.0", - "npmlog": "^4.1.2", - "request": "^2.88.2", - "rimraf": "^3.0.2", - "semver": "^7.3.2", - "tar": "^6.0.2", - "which": "^2.0.2" - }, - "bin": { - "node-gyp": "bin/node-gyp.js" + "hosted-git-info": "^4.0.1", + "is-core-module": "^2.5.0", + "semver": "^7.3.4", + "validate-npm-package-license": "^3.0.1" }, "engines": { - "node": ">= 10.12.0" + "node": ">=10" } }, - "node_modules/node-gyp/node_modules/lru-cache": { + "node_modules/normalize-package-data/node_modules/lru-cache": { "version": "6.0.0", "dev": true, "license": "ISC", @@ -26169,7 +24944,7 @@ "node": ">=10" } }, - "node_modules/node-gyp/node_modules/semver": { + "node_modules/normalize-package-data/node_modules/semver": { "version": "7.5.4", "dev": true, "license": "ISC", @@ -26183,203 +24958,258 @@ "node": ">=10" } }, - "node_modules/node-gyp/node_modules/yallist": { + "node_modules/normalize-package-data/node_modules/yallist": { "version": "4.0.0", "dev": true, "license": "ISC" }, - "node_modules/node-int64": { - "version": "0.4.0", - "dev": true, - "license": "MIT" - }, - "node_modules/node-releases": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", - "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", - "dev": true - }, - "node_modules/node-sass": { - "version": "6.0.1", + "node_modules/normalize-path": { + "version": "3.0.0", "dev": true, - "hasInstallScript": true, "license": "MIT", - "dependencies": { - "async-foreach": "^0.1.3", - "chalk": "^1.1.1", - "cross-spawn": "^7.0.3", - "gaze": "^1.0.0", - "get-stdin": "^4.0.1", - "glob": "^7.0.3", - "lodash": "^4.17.15", - "meow": "^9.0.0", - "nan": "^2.13.2", - "node-gyp": "^7.1.0", - "npmlog": "^4.0.0", - "request": "^2.88.0", - "sass-graph": "2.2.5", - "stdout-stream": "^1.4.0", - "true-case-path": "^1.0.2" - }, - "bin": { - "node-sass": "bin/node-sass" - }, "engines": { - "node": ">=12" + "node": ">=0.10.0" } }, - "node_modules/node-sass/node_modules/ansi-regex": { - "version": "2.1.1", + "node_modules/normalize-range": { + "version": "0.1.2", "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" } }, - "node_modules/node-sass/node_modules/ansi-styles": { - "version": "2.2.1", + "node_modules/normalize-url": { + "version": "6.1.0", "dev": true, "license": "MIT", "engines": { - "node": ">=0.10.0" + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/node-sass/node_modules/chalk": { - "version": "1.1.3", + "node_modules/now-and-later": { + "version": "2.0.1", "dev": true, "license": "MIT", "dependencies": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" + "once": "^1.3.2" }, "engines": { - "node": ">=0.10.0" + "node": ">= 0.10" } }, - "node_modules/node-sass/node_modules/get-stdin": { - "version": "4.0.1", + "node_modules/npm-run-all": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz", + "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==", "dev": true, - "license": "MIT", + "dependencies": { + "ansi-styles": "^3.2.1", + "chalk": "^2.4.1", + "cross-spawn": "^6.0.5", + "memorystream": "^0.3.1", + "minimatch": "^3.0.4", + "pidtree": "^0.3.0", + "read-pkg": "^3.0.0", + "shell-quote": "^1.6.1", + "string.prototype.padend": "^3.0.0" + }, + "bin": { + "npm-run-all": "bin/npm-run-all/index.js", + "run-p": "bin/run-p/index.js", + "run-s": "bin/run-s/index.js" + }, "engines": { - "node": ">=0.10.0" + "node": ">= 4" } }, - "node_modules/node-sass/node_modules/strip-ansi": { - "version": "3.0.1", + "node_modules/npm-run-all/node_modules/cross-spawn": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", + "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", "dev": true, - "license": "MIT", "dependencies": { - "ansi-regex": "^2.0.0" + "nice-try": "^1.0.4", + "path-key": "^2.0.1", + "semver": "^5.5.0", + "shebang-command": "^1.2.0", + "which": "^1.2.9" }, "engines": { - "node": ">=0.10.0" + "node": ">=4.8" } }, - "node_modules/node-sass/node_modules/supports-color": { - "version": "2.0.0", + "node_modules/npm-run-all/node_modules/hosted-git-info": { + "version": "2.8.9", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", + "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", + "dev": true + }, + "node_modules/npm-run-all/node_modules/load-json-file": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", + "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==", "dev": true, - "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" + }, "engines": { - "node": ">=0.8.0" + "node": ">=4" } }, - "node_modules/nopt": { - "version": "5.0.0", + "node_modules/npm-run-all/node_modules/normalize-package-data": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", + "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", "dev": true, - "license": "ISC", "dependencies": { - "abbrev": "1" - }, - "bin": { - "nopt": "bin/nopt.js" + "hosted-git-info": "^2.1.4", + "resolve": "^1.10.0", + "semver": "2 || 3 || 4 || 5", + "validate-npm-package-license": "^3.0.1" + } + }, + "node_modules/npm-run-all/node_modules/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==", + "dev": true, + "dependencies": { + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1" }, "engines": { - "node": ">=6" + "node": ">=4" } }, - "node_modules/normalize-package-data": { - "version": "3.0.3", + "node_modules/npm-run-all/node_modules/path-key": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", + "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/npm-run-all/node_modules/path-type": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", + "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", "dev": true, - "license": "BSD-2-Clause", "dependencies": { - "hosted-git-info": "^4.0.1", - "is-core-module": "^2.5.0", - "semver": "^7.3.4", - "validate-npm-package-license": "^3.0.1" + "pify": "^3.0.0" }, "engines": { - "node": ">=10" + "node": ">=4" } }, - "node_modules/normalize-package-data/node_modules/lru-cache": { - "version": "6.0.0", + "node_modules/npm-run-all/node_modules/pidtree": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz", + "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==", + "dev": true, + "bin": { + "pidtree": "bin/pidtree.js" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/npm-run-all/node_modules/pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/npm-run-all/node_modules/read-pkg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", + "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==", "dev": true, - "license": "ISC", "dependencies": { - "yallist": "^4.0.0" + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" }, "engines": { - "node": ">=10" + "node": ">=4" } }, - "node_modules/normalize-package-data/node_modules/semver": { - "version": "7.5.4", + "node_modules/npm-run-all/node_modules/resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "dev": true, - "license": "ISC", "dependencies": { - "lru-cache": "^6.0.0" + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { - "semver": "bin/semver.js" + "resolve": "bin/resolve" }, - "engines": { - "node": ">=10" + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/normalize-package-data/node_modules/yallist": { - "version": "4.0.0", + "node_modules/npm-run-all/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, - "license": "ISC" + "bin": { + "semver": "bin/semver" + } }, - "node_modules/normalize-path": { - "version": "3.0.0", + "node_modules/npm-run-all/node_modules/shebang-command": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", + "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==", "dev": true, - "license": "MIT", + "dependencies": { + "shebang-regex": "^1.0.0" + }, "engines": { "node": ">=0.10.0" } }, - "node_modules/normalize-range": { - "version": "0.1.2", + "node_modules/npm-run-all/node_modules/shebang-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", + "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==", "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } }, - "node_modules/normalize-url": { - "version": "6.1.0", + "node_modules/npm-run-all/node_modules/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", "dev": true, - "license": "MIT", "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node": ">=4" } }, - "node_modules/now-and-later": { - "version": "2.0.1", + "node_modules/npm-run-all/node_modules/which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dev": true, - "license": "MIT", "dependencies": { - "once": "^1.3.2" + "isexe": "^2.0.0" }, - "engines": { - "node": ">= 0.10" + "bin": { + "which": "bin/which" } }, "node_modules/npm-run-path": { @@ -26393,17 +25223,6 @@ "node": ">=8" } }, - "node_modules/npmlog": { - "version": "4.1.2", - "dev": true, - "license": "ISC", - "dependencies": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" - } - }, "node_modules/nth-check": { "version": "2.1.1", "dev": true, @@ -26612,14 +25431,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/oauth-sign": { - "version": "0.9.0", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "*" - } - }, "node_modules/object-assign": { "version": "4.1.1", "dev": true, @@ -28226,25 +27037,6 @@ "node": ">=0.4.0" } }, - "node_modules/promise-inflight": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", - "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==", - "dev": true - }, - "node_modules/promise-retry": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz", - "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==", - "dev": true, - "dependencies": { - "err-code": "^2.0.2", - "retry": "^0.12.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/prompts": { "version": "2.4.2", "dev": true, @@ -28396,6 +27188,26 @@ "ms": "2.0.0" } }, + "node_modules/puppeteer-core/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/puppeteer-core/node_modules/https-proxy-agent": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz", @@ -29551,77 +28363,6 @@ "node": ">= 0.10" } }, - "node_modules/request": { - "version": "2.88.2", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "aws-sign2": "~0.7.0", - "aws4": "^1.8.0", - "caseless": "~0.12.0", - "combined-stream": "~1.0.6", - "extend": "~3.0.2", - "forever-agent": "~0.6.1", - "form-data": "~2.3.2", - "har-validator": "~5.1.3", - "http-signature": "~1.2.0", - "is-typedarray": "~1.0.0", - "isstream": "~0.1.2", - "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.19", - "oauth-sign": "~0.9.0", - "performance-now": "^2.1.0", - "qs": "~6.5.2", - "safe-buffer": "^5.1.2", - "tough-cookie": "~2.5.0", - "tunnel-agent": "^0.6.0", - "uuid": "^3.3.2" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/request/node_modules/form-data": { - "version": "2.3.3", - "dev": true, - "license": "MIT", - "dependencies": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.6", - "mime-types": "^2.1.12" - }, - "engines": { - "node": ">= 0.12" - } - }, - "node_modules/request/node_modules/qs": { - "version": "6.5.3", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.6" - } - }, - "node_modules/request/node_modules/tough-cookie": { - "version": "2.5.0", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "psl": "^1.1.28", - "punycode": "^2.1.1" - }, - "engines": { - "node": ">=0.8" - } - }, - "node_modules/request/node_modules/uuid": { - "version": "3.4.0", - "dev": true, - "license": "MIT", - "bin": { - "uuid": "bin/uuid" - } - }, "node_modules/require-directory": { "version": "2.1.1", "dev": true, @@ -29801,6 +28542,26 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/rimraf/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/run-applescript": { "version": "5.0.0", "dev": true, @@ -29837,6 +28598,15 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "dev": true, + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/safe-array-concat": { "version": "1.0.1", "dev": true, @@ -29904,6 +28674,26 @@ "rimraf": "2.*" } }, + "node_modules/safe-wipe/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/safe-wipe/node_modules/rimraf": { "version": "2.7.1", "dev": true, @@ -29978,169 +28768,356 @@ "which": "bin/which" } }, - "node_modules/sass-graph": { - "version": "2.2.5", + "node_modules/sass-embedded": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.70.0.tgz", + "integrity": "sha512-1sVSh5MlSdktkwC2zG9WuaVR6j7AlDxadPmZBN0wP4GhznMQTvpwNIAFhAqgjwJYhwdWFOKEdIHSQK4V8K434Q==", "dev": true, - "license": "MIT", "dependencies": { - "glob": "^7.0.0", - "lodash": "^4.0.0", - "scss-tokenizer": "^0.2.3", - "yargs": "^13.3.2" + "@bufbuild/protobuf": "^1.0.0", + "buffer-builder": "^0.2.0", + "immutable": "^4.0.0", + "rxjs": "^7.4.0", + "supports-color": "^8.1.1", + "varint": "^6.0.0" + }, + "engines": { + "node": ">=16.0.0" }, + "optionalDependencies": { + "sass-embedded-android-arm": "1.70.0", + "sass-embedded-android-arm64": "1.70.0", + "sass-embedded-android-ia32": "1.70.0", + "sass-embedded-android-x64": "1.70.0", + "sass-embedded-darwin-arm64": "1.70.0", + "sass-embedded-darwin-x64": "1.70.0", + "sass-embedded-linux-arm": "1.70.0", + "sass-embedded-linux-arm64": "1.70.0", + "sass-embedded-linux-ia32": "1.70.0", + "sass-embedded-linux-musl-arm": "1.70.0", + "sass-embedded-linux-musl-arm64": "1.70.0", + "sass-embedded-linux-musl-ia32": "1.70.0", + "sass-embedded-linux-musl-x64": "1.70.0", + "sass-embedded-linux-x64": "1.70.0", + "sass-embedded-win32-ia32": "1.70.0", + "sass-embedded-win32-x64": "1.70.0" + } + }, + "node_modules/sass-embedded-android-arm": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.70.0.tgz", + "integrity": "sha512-Vog4Z+tsDYGv7m9sZisr/P6KvqDioCMu0cinexdnXhHXReo+X6CFe79yv/zA/Xfq5HtAAmFjGD6CO/nTjoydtw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], "bin": { - "sassgraph": "bin/sassgraph" + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/ansi-regex": { - "version": "4.1.1", + "node_modules/sass-embedded-android-arm64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.70.0.tgz", + "integrity": "sha512-vMr7fruLUv/VvF7CPVF1z7Bc28a8K9Ps5nyN3UatOj+irxN1LbZIbeQua6neX2eFUsXvcg7hLZwvV3+T96Fhrw==", + "cpu": [ + "arm64" + ], "dev": true, - "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { - "node": ">=6" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/cliui": { - "version": "5.0.0", + "node_modules/sass-embedded-android-ia32": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.70.0.tgz", + "integrity": "sha512-RWEJ7sBGBCd101oSBPuePPU8yXb1iB/ME4sRhgI5xjjyIsldiuvX48saW25u1ZqCo2AVA0BTXfWpNJnhKB3b4Q==", + "cpu": [ + "ia32" + ], "dev": true, - "license": "ISC", - "dependencies": { - "string-width": "^3.1.0", - "strip-ansi": "^5.2.0", - "wrap-ansi": "^5.1.0" + "optional": true, + "os": [ + "android" + ], + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/emoji-regex": { - "version": "7.0.3", + "node_modules/sass-embedded-android-x64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.70.0.tgz", + "integrity": "sha512-u+ijV6AQR/84kjjGb3mp0aibPiXkFKqfmHxqYBMN7h2xV7EM70Yz054nVifaBr8nfC0E8aT/DurSI4nkkQ6Uvg==", + "cpu": [ + "x64" + ], "dev": true, - "license": "MIT" + "optional": true, + "os": [ + "android" + ], + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" + } }, - "node_modules/sass-graph/node_modules/find-up": { - "version": "3.0.0", + "node_modules/sass-embedded-darwin-arm64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.70.0.tgz", + "integrity": "sha512-qMs08h0nwRA1B/Ieakcg/Y6lcCEnuBnPTNEkFkBlnfj3PFVPTb50wQvDr9JLpcjXWznlBxyFrz1nZM+pXDix7Q==", + "cpu": [ + "arm64" + ], "dev": true, - "license": "MIT", - "dependencies": { - "locate-path": "^3.0.0" + "optional": true, + "os": [ + "darwin" + ], + "bin": { + "sass": "dart-sass/sass" }, "engines": { - "node": ">=6" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", + "node_modules/sass-embedded-darwin-x64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.70.0.tgz", + "integrity": "sha512-Vf8UQY3IBmsaz9L5DeJDjn19N//1n3rTquH69x29zPCd3zF2gnay38atxIZ+6h7VsZT3C6evm0y58JUJDWN1CA==", + "cpu": [ + "x64" + ], "dev": true, - "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { - "node": ">=4" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/locate-path": { - "version": "3.0.0", + "node_modules/sass-embedded-linux-arm": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.70.0.tgz", + "integrity": "sha512-U9e+k0XHwubeSIwsBYTNrTVH+0zF/ErSfuHfgTfuvlcKlhoGtFgAb7W8Qfe9FDF6TYTt0fJAJhSV2MdoExsgRA==", + "cpu": [ + "arm" + ], "dev": true, - "license": "MIT", - "dependencies": { - "p-locate": "^3.0.0", - "path-exists": "^3.0.0" + "optional": true, + "os": [ + "linux" + ], + "bin": { + "sass": "dart-sass/sass" }, "engines": { - "node": ">=6" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/p-locate": { - "version": "3.0.0", + "node_modules/sass-embedded-linux-arm64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.70.0.tgz", + "integrity": "sha512-PzhBg5xlyXcZ8FgyjqAcVtfaq462l3KeEid2OxrsOzBQgdgJb0La1tAEOpP9jz7YOOTr9A96vm609W9fRLI2Iw==", + "cpu": [ + "arm64" + ], "dev": true, - "license": "MIT", - "dependencies": { - "p-limit": "^2.0.0" + "optional": true, + "os": [ + "linux" + ], + "bin": { + "sass": "dart-sass/sass" }, "engines": { - "node": ">=6" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/path-exists": { - "version": "3.0.0", + "node_modules/sass-embedded-linux-ia32": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.70.0.tgz", + "integrity": "sha512-UOxTJywQRC/HzFQthlyNWJ07MX8EzKuTgH0N5T3XyXQTNuGeJQ8EPWY9fv1weLCjydVOEwm853F3djtUNmkCtg==", + "cpu": [ + "ia32" + ], "dev": true, - "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { - "node": ">=4" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/require-main-filename": { - "version": "2.0.0", + "node_modules/sass-embedded-linux-musl-arm": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.70.0.tgz", + "integrity": "sha512-8zudDFpAoNrQDujNYBKkq8nwl4i0jMmXcysO9Ou0llrzdY7Keok2z1aS3IbZy7AvUXtGaeYSHUi5lXdOalJ/QQ==", + "cpu": [ + "arm" + ], "dev": true, - "license": "ISC" + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } }, - "node_modules/sass-graph/node_modules/string-width": { - "version": "3.1.0", + "node_modules/sass-embedded-linux-musl-arm64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.70.0.tgz", + "integrity": "sha512-DJl1AV9W7T3SHzXFqAtyjPZy4O2g4AC6QctY5/aM42DTY/xpWOmwUBgsDzDoRbNqP7qDl+GtHLlggrLWCBP9fg==", + "cpu": [ + "arm64" + ], "dev": true, - "license": "MIT", - "dependencies": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">=6" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/strip-ansi": { - "version": "5.2.0", + "node_modules/sass-embedded-linux-musl-ia32": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.70.0.tgz", + "integrity": "sha512-CcAvT3KPc7cCJfTu1E0HzsAjE/dPQsKaXQD/nsBXNZo081R+lLR2u22wpXM2pnzMNJETRV/pDwozHoYEcPkPqQ==", + "cpu": [ + "ia32" + ], "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^4.1.0" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">=6" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/which-module": { - "version": "2.0.1", + "node_modules/sass-embedded-linux-musl-x64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.70.0.tgz", + "integrity": "sha512-g3i9PKmqTxuyrM1Yeju1s4Fj6fzAGyyfzw/LiZZtq0ZZGhJXJMVvEDog/OxQ37eYxWqq9XHFTW2PphMvukVK0g==", + "cpu": [ + "x64" + ], "dev": true, - "license": "ISC" + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } }, - "node_modules/sass-graph/node_modules/wrap-ansi": { - "version": "5.1.0", + "node_modules/sass-embedded-linux-x64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.70.0.tgz", + "integrity": "sha512-F9F2CA7C6z/ROfF0U/jtYWknbDe9S/TJoCJ5TlHafwS+SrZE1A+Czf2MWJ+8mc2NFiRjYzYxt4Ad29cuc6rrhw==", + "cpu": [ + "x64" + ], "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^3.2.0", - "string-width": "^3.0.0", - "strip-ansi": "^5.0.0" + "optional": true, + "os": [ + "linux" + ], + "bin": { + "sass": "dart-sass/sass" }, "engines": { - "node": ">=6" + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/y18n": { - "version": "4.0.3", + "node_modules/sass-embedded-win32-ia32": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.70.0.tgz", + "integrity": "sha512-TITx2QwJouhMwA0CAjCmnTNeCDL9g2fkLe9z+5rf39OdmcX9CEBrY4CNaO5REnMpgoa+o82u272ZR3oWrsUs8Q==", + "cpu": [ + "ia32" + ], "dev": true, - "license": "ISC" + "optional": true, + "os": [ + "win32" + ], + "bin": { + "sass": "dart-sass/sass.bat" + }, + "engines": { + "node": ">=14.0.0" + } }, - "node_modules/sass-graph/node_modules/yargs": { - "version": "13.3.2", + "node_modules/sass-embedded-win32-x64": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.70.0.tgz", + "integrity": "sha512-rPe8WUdARhlfgIhGcCTGbTNgd6OppcmjtBrxUNoGs3AENSREQCpaNv5d+HBOMhGUfYgXIHUSiipilFUhLWpsrQ==", + "cpu": [ + "arm64", + "x64" + ], "dev": true, - "license": "MIT", - "dependencies": { - "cliui": "^5.0.0", - "find-up": "^3.0.0", - "get-caller-file": "^2.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^2.0.0", - "set-blocking": "^2.0.0", - "string-width": "^3.0.0", - "which-module": "^2.0.0", - "y18n": "^4.0.0", - "yargs-parser": "^13.1.2" + "optional": true, + "os": [ + "win32" + ], + "bin": { + "sass": "dart-sass/sass.bat" + }, + "engines": { + "node": ">=14.0.0" } }, - "node_modules/sass-graph/node_modules/yargs-parser": { - "version": "13.1.2", + "node_modules/sass-embedded/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/sass-embedded/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "dev": true, - "license": "ISC", "dependencies": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" } }, "node_modules/sass-loader": { @@ -30180,6 +29157,18 @@ } } }, + "node_modules/sass-migrator": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/sass-migrator/-/sass-migrator-1.8.0.tgz", + "integrity": "sha512-U3KOlDU71o6vQB2xFDPL9AQLTl7waonCcih+1/QQX3Hy6gMlAL0+2RE8J+FBozogba5q248nIHeUbLGBCbQd0g==", + "dev": true, + "bin": { + "sass-migrator": "sass-migrator.js" + }, + "engines": { + "node": ">=10.12.0" + } + }, "node_modules/sassdoc": { "version": "2.7.4", "dev": true, @@ -30288,6 +29277,26 @@ "typedarray": "^0.0.6" } }, + "node_modules/sassdoc/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/sassdoc/node_modules/readable-stream": { "version": "3.6.2", "dev": true, @@ -30379,26 +29388,6 @@ "cdocparser": "^0.13.0" } }, - "node_modules/scss-tokenizer": { - "version": "0.2.3", - "dev": true, - "license": "MIT", - "dependencies": { - "js-base64": "^2.1.8", - "source-map": "^0.4.2" - } - }, - "node_modules/scss-tokenizer/node_modules/source-map": { - "version": "0.4.4", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "amdefine": ">=0.0.4" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/semver": { "version": "6.3.1", "dev": true, @@ -30578,6 +29567,15 @@ "node": ">=8" } }, + "node_modules/shell-quote": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", + "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/shortcss": { "version": "0.1.3", "dev": true, @@ -30658,16 +29656,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/smart-buffer": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", - "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==", - "dev": true, - "engines": { - "node": ">= 6.0.0", - "npm": ">= 3.0.0" - } - }, "node_modules/snapdragon": { "version": "0.8.2", "dev": true, @@ -30829,34 +29817,6 @@ "node": ">=0.10.0" } }, - "node_modules/socks": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz", - "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==", - "dev": true, - "dependencies": { - "ip": "^2.0.0", - "smart-buffer": "^4.2.0" - }, - "engines": { - "node": ">= 10.13.0", - "npm": ">= 3.0.0" - } - }, - "node_modules/socks-proxy-agent": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz", - "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==", - "dev": true, - "dependencies": { - "agent-base": "^6.0.2", - "debug": "^4.3.3", - "socks": "^2.6.2" - }, - "engines": { - "node": ">= 10" - } - }, "node_modules/source-map": { "version": "0.7.4", "dev": true, @@ -30999,60 +29959,6 @@ "dev": true, "license": "BSD-3-Clause" }, - "node_modules/sshpk": { - "version": "1.17.0", - "dev": true, - "license": "MIT", - "dependencies": { - "asn1": "~0.2.3", - "assert-plus": "^1.0.0", - "bcrypt-pbkdf": "^1.0.0", - "dashdash": "^1.12.0", - "ecc-jsbn": "~0.1.1", - "getpass": "^0.1.1", - "jsbn": "~0.1.0", - "safer-buffer": "^2.0.2", - "tweetnacl": "~0.14.0" - }, - "bin": { - "sshpk-conv": "bin/sshpk-conv", - "sshpk-sign": "bin/sshpk-sign", - "sshpk-verify": "bin/sshpk-verify" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/ssri": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz", - "integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==", - "dev": true, - "dependencies": { - "minipass": "^3.1.1" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/ssri/node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/ssri/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/stable": { "version": "0.1.8", "dev": true, @@ -31187,14 +30093,6 @@ "node": ">= 0.8" } }, - "node_modules/stdout-stream": { - "version": "1.4.1", - "dev": true, - "license": "MIT", - "dependencies": { - "readable-stream": "^2.0.1" - } - }, "node_modules/stop-iteration-iterator": { "version": "1.0.0", "dev": true, @@ -31367,6 +30265,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/string.prototype.padend": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.5.tgz", + "integrity": "sha512-DOB27b/2UTTD+4myKUFh+/fXWcu/UDyASIXfg+7VzoCNNGOfWvoyU/x5pvVHr++ztyt/oSYI1BcWBBG/hmlNjA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/string.prototype.trim": { "version": "1.2.8", "dev": true, @@ -32277,6 +31192,26 @@ "node": ">=8" } }, + "node_modules/temp/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/temp/node_modules/rimraf": { "version": "2.6.3", "dev": true, @@ -32444,6 +31379,26 @@ "node": ">=8" } }, + "node_modules/test-exclude/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/text-table": { "version": "0.2.0", "dev": true, @@ -32701,22 +31656,6 @@ "node": ">=12" } }, - "node_modules/trim-newlines": { - "version": "3.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/true-case-path": { - "version": "1.0.3", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "glob": "^7.1.2" - } - }, "node_modules/ts-api-utils": { "version": "1.0.3", "dev": true, @@ -33420,22 +32359,6 @@ "dev": true, "license": "0BSD" }, - "node_modules/tunnel-agent": { - "version": "0.6.0", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "safe-buffer": "^5.0.1" - }, - "engines": { - "node": "*" - } - }, - "node_modules/tweetnacl": { - "version": "0.14.5", - "dev": true, - "license": "Unlicense" - }, "node_modules/type": { "version": "1.2.0", "dev": true, @@ -33698,30 +32621,6 @@ "node": ">=0.10.0" } }, - "node_modules/unique-filename": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz", - "integrity": "sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==", - "dev": true, - "dependencies": { - "unique-slug": "^3.0.0" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/unique-slug": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz", - "integrity": "sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==", - "dev": true, - "dependencies": { - "imurmurhash": "^0.1.4" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, "node_modules/unique-stream": { "version": "2.3.1", "dev": true, @@ -34368,6 +33267,12 @@ "node": ">= 0.10" } }, + "node_modules/varint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz", + "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==", + "dev": true + }, "node_modules/vary": { "version": "1.1.2", "dev": true, @@ -34376,24 +33281,6 @@ "node": ">= 0.8" } }, - "node_modules/verror": { - "version": "1.10.0", - "dev": true, - "engines": [ - "node >=0.6.0" - ], - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0", - "core-util-is": "1.0.2", - "extsprintf": "^1.2.0" - } - }, - "node_modules/verror/node_modules/core-util-is": { - "version": "1.0.2", - "dev": true, - "license": "MIT" - }, "node_modules/vinyl": { "version": "2.2.1", "dev": true, @@ -34884,40 +33771,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/wide-align": { - "version": "1.1.5", - "dev": true, - "license": "ISC", - "dependencies": { - "string-width": "^1.0.2 || 2 || 3 || 4" - } - }, - "node_modules/wide-align/node_modules/emoji-regex": { - "version": "8.0.0", - "dev": true, - "license": "MIT" - }, - "node_modules/wide-align/node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/wide-align/node_modules/string-width": { - "version": "4.2.3", - "dev": true, - "license": "MIT", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/widest-line": { "version": "3.1.0", "dev": true, diff --git a/package.json b/package.json index 916af30d88..5993d9e14b 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,11 @@ "registry": "https://registry.npmjs.org/" }, "scripts": { - "build": "gulp && npm run build:sass && npm run build:stylesheets", - "build:sass": "backpack-node-sass --prefixComment=\"$(cat ./license.txt)\" && rm packages/bpk-stylesheets/index.css", - "build:stylesheets": "(cd packages/bpk-stylesheets && NODE_OPTIONS=--openssl-legacy-provider node build)", + "build": "run-s build:*", + "build:gulp": "gulp", + "build:unstable__bpk-mixins": "./scripts/scss/generate-unstable__bpk-mixins.sh", + "build:sass": "node scripts/scss/styles-prod.js && rm packages/bpk-stylesheets/index.css", + "build:stylesheets": "(cd packages/bpk-stylesheets && node build)", "check-bpk-dependencies": "node scripts/npm/check-bpk-dependencies.js", "check-react-versions": "node scripts/npm/check-react-versions.js", "check-pristine": "node scripts/check-pristine-state", @@ -41,20 +43,18 @@ "postinstall": "(cd packages && npm install)", "prettier": "prettier --config .prettierrc --write \"**/*.(js|ts|tsx)\"", "start": "npm run build && npm run storybook", - "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 9001", - "storybook:dist": "NODE_OPTIONS=--openssl-legacy-provider storybook build -c .storybook -o dist-storybook", + "storybook": "storybook dev -p 9001", + "storybook:dist": "storybook build -c .storybook -o dist-storybook", "sassdoc": "sassdoc {packages/bpk-mixins/src/**/*,node_modules/@skyscanner/bpk-svgs/dist/*,node_modules/@skyscanner/bpk-foundations-web/tokens/base.default}.scss -d dist-sassdoc -v --strict", "test": "npm run lint && npm run check-react-versions && npm run check-bpk-dependencies && npm run jest", "typecheck": "tsc", "prepare": "husky install", "percy-test": "percy storybook ./dist-storybook -i '/Visual\\stest\\s?([a-z]*)?/i'", "ts-migrate": "ts-migrate", - "transpile": "npm run build && npm run transpile:js-tasks && npm run transpile:copy", + "transpile": "npm run build && run-s transpile:*", "transpile:clean": "rimraf ./dist", - "transpile:js-tasks": "npm run transpile:js && npm run transform:js", - "transpile:js": "BABEL_ENV=dev babel packages --ignore ./packages/bpk-storybook-utils,./packages/bpk-mixins,./packages/bpk-stylesheets --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --config-file ./babel.config.js", - "transform:js": "node scripts/transpilation/transform-js-scss-css-imports.js", - "transpile:copy": "npm run transpile:copy-css && npm run transpile:copy-types && npm run transpile:copy-utils && npm run transpile:copy-package-json && npm run transpile:copy-readme", + "transpile:js": "BABEL_ENV=dev babel packages --ignore ./packages/bpk-stylesheets --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --config-file ./babel.config.js", + "transpile:imports": "node scripts/transpilation/transform-js-scss-css-imports.js", "transpile:copy-css": "node scripts/transpilation/copy-css.js", "transpile:copy-types": "node scripts/transpilation/copy-types.js", "transpile:copy-utils": "node scripts/transpilation/copy-utils.js", @@ -145,13 +145,14 @@ "babel-plugin-module-resolver": "^5.0.0", "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-require-context-hook": "^1.0.0", - "backpack-node-sass": "^1.1.2", "core-js": "^3.35.1", + "chokidar": "^3.5.3", "css-loader": "^6.9.0", "d3-scale": "^4.0.2", "danger": "^11.2.0", "date-fns": "^2.28.0", "eslint_d": "^13.0.0", + "glob": "^8.1.0", "gulp": "^4.0.2", "gulp-rename": "^2.0.0", "gulp-svgmin": "^4.1.0", @@ -162,7 +163,7 @@ "lint-staged": "^15.0.2", "lodash": "^4.17.20", "mini-css-extract-plugin": "^2.8.0", - "node-sass": "^6.0.1", + "npm-run-all": "^4.1.5", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.0", "prop-types": "^15.7.2", @@ -170,6 +171,8 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-svg-loader": "^3.0.1", + "sass-embedded": "^1.70.0", + "sass-migrator": "^1.8.0", "sass-loader": "^13.3.3", "sassdoc": "^2.7.0", "storybook": "^7.6.10", diff --git a/packages/bpk-component-accordion/src/BpkAccordion.module.css b/packages/bpk-component-accordion/src/BpkAccordion.module.css deleted file mode 100644 index 8b493f7cb8..0000000000 --- a/packages/bpk-component-accordion/src/BpkAccordion.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-accordion{margin:0}.bpk-accordion--on-dark{color:#fff} diff --git a/packages/bpk-component-accordion/src/BpkAccordion.module.scss b/packages/bpk-component-accordion/src/BpkAccordion.module.scss index 79fc2a553d..750c88e302 100644 --- a/packages/bpk-component-accordion/src/BpkAccordion.module.scss +++ b/packages/bpk-component-accordion/src/BpkAccordion.module.scss @@ -16,12 +16,12 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-accordion { margin: 0; &--on-dark { - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; } } diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.module.css b/packages/bpk-component-accordion/src/BpkAccordionItem.module.css deleted file mode 100644 index 78a2caddfa..0000000000 --- a/packages/bpk-component-accordion/src/BpkAccordionItem.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-accordion__title{height:auto}.bpk-accordion__title--collapsed{box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-accordion__title--collapsed-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,0.5) inset}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:transparent;color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir='rtl'] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{display:inline-block;flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir='rtl'] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-container--expanded{padding-bottom:1rem;box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-accordion__content-container--expanded-on-dark{padding-bottom:1rem;box-shadow:0 -1px 0 0 rgba(255,255,255,0.5) inset} diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss index 54d558214a..80160e5844 100644 --- a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss +++ b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss @@ -16,17 +16,20 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/margins'; +@use '../../unstable__bpk-mixins/utils'; .bpk-accordion { &__title { height: auto; &--collapsed { - @include bpk-border-bottom-sm($bpk-line-day); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day); &-on-dark { - @include bpk-border-bottom-sm($bpk-line-on-dark-day); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-on-dark-day); } } } @@ -36,12 +39,12 @@ padding: 0; border: 0; background-color: transparent; - color: $bpk-text-primary-day; + color: tokens.$bpk-text-primary-day; text-align: left; cursor: pointer; appearance: none; - @include bpk-rtl { + @include utils.bpk-rtl { text-align: right; } } @@ -49,7 +52,7 @@ &__flex-container { display: inline-flex; width: 100%; - margin: (bpk-spacing-base()) 0; + margin: tokens.bpk-spacing-base() 0; flex-direction: row; } @@ -58,7 +61,7 @@ flex-grow: 1; &--on-dark { - color: $bpk-canvas-day; + color: tokens.$bpk-canvas-day; } } @@ -67,18 +70,18 @@ } &__leading-icon { - @include bpk-margin-trailing(bpk-spacing-md(), true); + @include margins.bpk-margin-trailing(tokens.bpk-spacing-md(), true); } &__item-expand-icon { - fill: $bpk-text-primary-day; + fill: tokens.$bpk-text-primary-day; &--flipped { transform: scaleY(-1); } &--on-dark { - fill: $bpk-canvas-day; + fill: tokens.$bpk-canvas-day; } } @@ -86,14 +89,14 @@ margin: 0; &--expanded { - padding-bottom: bpk-spacing-base(); + padding-bottom: tokens.bpk-spacing-base(); - @include bpk-border-bottom-sm($bpk-line-day); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day); &-on-dark { - padding-bottom: bpk-spacing-base(); + padding-bottom: tokens.bpk-spacing-base(); - @include bpk-border-bottom-sm($bpk-line-on-dark-day); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-on-dark-day); } } } diff --git a/packages/bpk-component-aria-live/src/BpkAriaLive.module.css b/packages/bpk-component-aria-live/src/BpkAriaLive.module.css deleted file mode 100644 index d01dda91b1..0000000000 --- a/packages/bpk-component-aria-live/src/BpkAriaLive.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-aria-live--invisible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)} diff --git a/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss b/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss index c5f85962f1..9c13915242 100644 --- a/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss +++ b/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss @@ -16,10 +16,10 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/utils'; .bpk-aria-live { &--invisible { - @include bpk-visually-hidden; + @include utils.bpk-visually-hidden; } } diff --git a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.css b/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.css deleted file mode 100644 index 194b95b732..0000000000 --- a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:0.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:' ';display:block;margin-bottom:-.0625rem;margin-left:-0.8125rem;border:.8125rem solid transparent;border-bottom-color:#e0e3e5;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:' ';display:block;margin-bottom:-.0625rem;margin-left:-0.75rem;border:.75rem solid transparent;border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e3e5;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff1f2}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff1f2}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;margin-right:0.5rem;vertical-align:top;fill:#545860}html[dir='rtl'] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:0.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#545860;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400} diff --git a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss b/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss index 099055a8f1..2b628058bf 100644 --- a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss +++ b/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss @@ -16,9 +16,13 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/layers'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; -$arrow-size: bpk-spacing-sm() * 3; +$arrow-size: tokens.bpk-spacing-sm() * 3; .bpk-autosuggest { &__container--open { @@ -32,9 +36,9 @@ $arrow-size: bpk-spacing-sm() * 3; position: absolute; top: 100%; display: block; - z-index: $bpk-zindex-autosuggest; + z-index: tokens.$bpk-zindex-autosuggest; width: 100%; - margin-top: bpk-spacing-md() + bpk-spacing-sm(); + margin-top: tokens.bpk-spacing-md() + tokens.bpk-spacing-sm(); &::before { position: absolute; @@ -42,10 +46,11 @@ $arrow-size: bpk-spacing-sm() * 3; left: 50%; content: ' '; display: block; - margin-bottom: -$bpk-one-pixel-rem; - margin-left: -((bpk-spacing-sm() * 3) + $bpk-one-pixel-rem); - border: ($arrow-size + $bpk-one-pixel-rem) solid transparent; - border-bottom-color: $bpk-surface-highlight-day; + margin-bottom: -1 * tokens.$bpk-one-pixel-rem; + margin-left: -1 * + ((tokens.bpk-spacing-sm() * 3) + tokens.$bpk-one-pixel-rem); + border: ($arrow-size + tokens.$bpk-one-pixel-rem) solid transparent; + border-bottom-color: tokens.$bpk-surface-highlight-day; pointer-events: none; } @@ -55,10 +60,10 @@ $arrow-size: bpk-spacing-sm() * 3; left: 50%; content: ' '; display: block; - margin-bottom: -$bpk-one-pixel-rem; - margin-left: -(bpk-spacing-md() + bpk-spacing-sm()); + margin-bottom: -1 * tokens.$bpk-one-pixel-rem; + margin-left: -1 * (tokens.bpk-spacing-md() + tokens.bpk-spacing-sm()); border: $arrow-size solid transparent; - border-bottom-color: $bpk-surface-default-day; + border-bottom-color: tokens.$bpk-surface-default-day; pointer-events: none; } } @@ -71,46 +76,46 @@ $arrow-size: bpk-spacing-sm() * 3; list-style: none; overflow: hidden; - @include bpk-layer; + @include layers.bpk-layer; } &__suggestion-item { cursor: pointer; - @include bpk-text; - @include bpk-body-default; + @include typography.bpk-text; + @include typography.bpk-body-default; &:not(:last-child) { - @include bpk-border-bottom-sm($bpk-line-day); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day); } &:active { - background-color: $bpk-canvas-contrast-day; + background-color: tokens.$bpk-canvas-contrast-day; } &--highlighted { - background-color: $bpk-canvas-contrast-day; + background-color: tokens.$bpk-canvas-contrast-day; } } &__suggestion { display: table; width: 100%; - padding: bpk-spacing-base(); + padding: tokens.bpk-spacing-base(); &--indent { - padding-left: bpk-spacing-xl(); + padding-left: tokens.bpk-spacing-xl(); } &-icon { display: table-cell; - margin-right: bpk-spacing-md(); + margin-right: tokens.bpk-spacing-md(); vertical-align: top; - fill: $bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; - @include bpk-rtl { + @include utils.bpk-rtl { margin-right: 0; - margin-left: bpk-spacing-md(); + margin-left: tokens.bpk-spacing-md(); } } @@ -137,19 +142,19 @@ $arrow-size: bpk-spacing-sm() * 3; width: 100%; vertical-align: top; - @include bpk-text; - @include bpk-caption; + @include typography.bpk-text; + @include typography.bpk-caption; } &-tertiary-label { display: table-cell; align-self: center; - color: $bpk-text-secondary-day; + color: tokens.$bpk-text-secondary-day; vertical-align: top; word-break: keep-all; - @include bpk-text; - @include bpk-caption; + @include typography.bpk-text; + @include typography.bpk-caption; } } } diff --git a/packages/bpk-component-badge/src/BpkBadge.module.css b/packages/bpk-component-badge/src/BpkBadge.module.css deleted file mode 100644 index a426436b35..0000000000 --- a/packages/bpk-component-badge/src/BpkBadge.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-badge{display:inline-flex;padding:0.25rem 0.5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff1f2;color:#161616;fill:#f55d42}.bpk-badge--success{background-color:#eff1f2;color:#161616;fill:#0c838a}.bpk-badge--critical{background-color:#eff1f2;color:#161616;fill:#e70866}.bpk-badge--normal{background-color:#eff1f2;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff} diff --git a/packages/bpk-component-badge/src/BpkBadge.module.scss b/packages/bpk-component-badge/src/BpkBadge.module.scss index bf7401758b..6ee687a59d 100644 --- a/packages/bpk-component-badge/src/BpkBadge.module.scss +++ b/packages/bpk-component-badge/src/BpkBadge.module.scss @@ -16,52 +16,52 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/badges'; .bpk-badge { - @include bpk-badge; + @include badges.bpk-badge; &--centered { - @include bpk-badge--centered; + @include badges.bpk-badge--centered; } &--docked-right { - @include bpk-badge--docked-right; + @include badges.bpk-badge--docked-right; } &--docked-left { - @include bpk-badge--docked-left; + @include badges.bpk-badge--docked-left; } &--warning { - @include bpk-badge--warning; + @include badges.bpk-badge--warning; } &--success { - @include bpk-badge--success; + @include badges.bpk-badge--success; } &--critical { - @include bpk-badge--critical; + @include badges.bpk-badge--critical; } &--normal { - @include bpk-badge--normal; + @include badges.bpk-badge--normal; } &--inverse { - @include bpk-badge--inverse; + @include badges.bpk-badge--inverse; } &--outline { - @include bpk-badge--outline; + @include badges.bpk-badge--outline; } &--strong { - @include bpk-badge--strong; + @include badges.bpk-badge--strong; } &--brand { - @include bpk-badge--brand; + @include badges.bpk-badge--brand; } } diff --git a/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.css b/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.css deleted file mode 100644 index 251edc400c..0000000000 --- a/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-animate-and-fade--enter{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--enter-active{opacity:1}.bpk-animate-and-fade--leave{transition:opacity 200ms ease-in-out;opacity:1}.bpk-animate-and-fade--leave-active{transition:opacity 200ms ease-in-out;opacity:.01}.bpk-animate-and-fade--appear{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--appear-active{opacity:1} diff --git a/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss b/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss index a2c2710d4b..43e044480e 100644 --- a/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss +++ b/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss @@ -16,15 +16,15 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-animate-and-fade { $invisible: 0.01; &--enter { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: tokens.$bpk-duration-sm; } &--enter-active { @@ -32,19 +32,19 @@ } &--leave { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: 1; } &--leave-active { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: $invisible; } &--appear { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: tokens.$bpk-duration-sm; } &--appear-active { diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.css b/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.css deleted file mode 100644 index bdf1c3c969..0000000000 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-banner-alert{background-color:#fff;overflow:hidden;border-radius:.5rem}.bpk-banner-alert--primary{box-shadow:0 0 0 1px var(--bpk-banner-alert-primary-color, #0062e3) }.bpk-banner-alert--success{box-shadow:0 0 0 1px var(--bpk-banner-alert-success-color, #0c838a) }.bpk-banner-alert--warn{box-shadow:0 0 0 1px var(--bpk-banner-alert-warn-color, #f55d42) }.bpk-banner-alert--error{box-shadow:0 0 0 1px var(--bpk-banner-alert-error-color, #e70866) }.bpk-banner-alert--neutral{box-shadow:0 0 0 1px #c2c9cd }.bpk-banner-alert__header{display:flex;padding:0.5rem;flex-direction:row;align-items:center}.bpk-banner-alert__header--expandable{cursor:pointer}.bpk-no-touch-support .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#eff1f2}:global(.bpk-no-touch-support) .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#eff1f2}.bpk-banner-alert__header--expandable:active{background-color:#eff1f2}.bpk-banner-alert__icon,.bpk-banner-alert__message,.bpk-banner-alert__toggle{display:inline-block}.bpk-banner-alert__message{padding:0 0.5rem;flex-grow:1}.bpk-banner-alert__primary-icon{fill:#0062e3;fill:var(--bpk-banner-alert-primary-color, #0062e3)}.bpk-banner-alert__success-icon{fill:#0c838a;fill:var(--bpk-banner-alert-success-color, #0c838a)}.bpk-banner-alert__warn-icon{fill:#f55d42;fill:var(--bpk-banner-alert-warn-color, #f55d42)}.bpk-banner-alert__error-icon{fill:#e70866;fill:var(--bpk-banner-alert-error-color, #e70866)}.bpk-banner-alert__neutral-icon{fill:#545860}.bpk-banner-alert__toggle-button{padding:0;border:0;background-color:transparent;cursor:pointer;appearance:none}.bpk-banner-alert__expand-icon{fill:#545860}.bpk-banner-alert__expand-icon--flipped{transform:scaleY(-1)}.bpk-banner-alert__children-container{padding:0 2.5rem 0.5rem 2rem;color:#545860;margin:0;font-size:.75rem;line-height:1rem;font-weight:400} diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss b/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss index 0a86c2b8ed..12e6d7e40e 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss @@ -16,61 +16,71 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/radii'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; .bpk-banner-alert { - background-color: $bpk-surface-default-day; + background-color: tokens.$bpk-surface-default-day; overflow: hidden; - @include bpk-border-radius-sm; + @include radii.bpk-border-radius-sm; &--primary { - @include bpk-border-sm( - var(--bpk-banner-alert-primary-color, $bpk-banner-alert-primary-color), + @include borders.bpk-border-sm( + var( + --bpk-banner-alert-primary-color, + tokens.$bpk-banner-alert-primary-color + ), '' ); } &--success { - @include bpk-border-sm( - var(--bpk-banner-alert-success-color, $bpk-banner-alert-success-color), + @include borders.bpk-border-sm( + var( + --bpk-banner-alert-success-color, + tokens.$bpk-banner-alert-success-color + ), '' ); } &--warn { - @include bpk-border-sm( - var(--bpk-banner-alert-warn-color, $bpk-banner-alert-warn-color), + @include borders.bpk-border-sm( + var(--bpk-banner-alert-warn-color, tokens.$bpk-banner-alert-warn-color), '' ); } &--error { - @include bpk-border-sm( - var(--bpk-banner-alert-error-color, $bpk-banner-alert-error-color), + @include borders.bpk-border-sm( + var(--bpk-banner-alert-error-color, tokens.$bpk-banner-alert-error-color), '' ); } &--neutral { - @include bpk-border-sm($bpk-banner-alert-neutral-color, ''); + @include borders.bpk-border-sm(tokens.$bpk-banner-alert-neutral-color, ''); } &__header { display: flex; - padding: bpk-spacing-md(); + padding: tokens.bpk-spacing-md(); flex-direction: row; align-items: center; &--expandable { cursor: pointer; - @include bpk-hover { - background-color: $bpk-banner-alert-header-expandable-hover-background-color; + @include utils.bpk-hover { + background-color: tokens.$bpk-banner-alert-header-expandable-hover-background-color; } &:active { - background-color: $bpk-banner-alert-header-expandable-active-background-color; + background-color: tokens.$bpk-banner-alert-header-expandable-active-background-color; } } } @@ -83,44 +93,44 @@ } &__message { - padding: 0 bpk-spacing-md(); + padding: 0 tokens.bpk-spacing-md(); flex-grow: 1; } &__primary-icon { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-banner-alert-primary-color, - $bpk-banner-alert-primary-color + tokens.$bpk-banner-alert-primary-color ); } &__success-icon { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-banner-alert-success-color, - $bpk-banner-alert-success-color + tokens.$bpk-banner-alert-success-color ); } &__warn-icon { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-banner-alert-warn-color, - $bpk-banner-alert-warn-color + tokens.$bpk-banner-alert-warn-color ); } &__error-icon { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-banner-alert-error-color, - $bpk-banner-alert-error-color + tokens.$bpk-banner-alert-error-color ); } &__neutral-icon { - fill: $bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; } &__toggle-button { @@ -132,7 +142,7 @@ } &__expand-icon { - fill: $bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; &--flipped { transform: scaleY(-1); @@ -140,10 +150,11 @@ } &__children-container { - padding: 0 bpk-spacing-xxl() bpk-spacing-md() bpk-spacing-xl(); - color: $bpk-text-secondary-day; + padding: 0 tokens.bpk-spacing-xxl() tokens.bpk-spacing-md() + tokens.bpk-spacing-xl(); + color: tokens.$bpk-text-secondary-day; - @include bpk-text; - @include bpk-caption; + @include typography.bpk-text; + @include typography.bpk-caption; } } diff --git a/packages/bpk-component-barchart/src/BpkBarchart.module.css b/packages/bpk-component-barchart/src/BpkBarchart.module.css deleted file mode 100644 index 1ccdd78c04..0000000000 --- a/packages/bpk-component-barchart/src/BpkBarchart.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -.bpk-barchart{width:100%} diff --git a/packages/bpk-component-barchart/src/BpkBarchartBar.module.css b/packages/bpk-component-barchart/src/BpkBarchartBar.module.css deleted file mode 100644 index 100e883614..0000000000 --- a/packages/bpk-component-barchart/src/BpkBarchartBar.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-barchart-bar{fill:#c2c9cd;fill:var(--bpk-barchart-bar-background-color, #c2c9cd)}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected){cursor:pointer}.bpk-no-touch-support .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:#05203c;fill:var(--bpk-barchart-bar-hover-background-color, #05203c)}:global(.bpk-no-touch-support) .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:#05203c;fill:var(--bpk-barchart-bar-hover-background-color, #05203c)}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):active{fill:#0062e3;fill:var(--bpk-barchart-bar-active-background-color, #0062e3)}.bpk-barchart-bar--selected{fill:#0062e3;fill:var(--bpk-barchart-bar-selected-background-color, #0062e3)}.bpk-barchart-bar__rect{fill:inherit;shape-rendering:auto}.bpk-barchart-bar__rect--outlier{mask:url(#bpk-barchart__def-mask)}.bpk-barchart-bar__tappable-area{fill:transparent} diff --git a/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss b/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss index 73caf8998f..c56f080713 100644 --- a/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss +++ b/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss @@ -16,40 +16,41 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; .bpk-barchart-bar { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-barchart-bar-background-color, - $bpk-line-day + tokens.$bpk-line-day ); &--interactive:not(.bpk-barchart-bar--selected) { cursor: pointer; - @include bpk-hover { - @include bpk-themeable-property( + @include utils.bpk-hover { + @include utils.bpk-themeable-property( fill, --bpk-barchart-bar-hover-background-color, - $bpk-core-primary-day + tokens.$bpk-core-primary-day ); } &:active { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-barchart-bar-active-background-color, - $bpk-core-accent-day + tokens.$bpk-core-accent-day ); } } &--selected { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-barchart-bar-selected-background-color, - $bpk-core-accent-day + tokens.$bpk-core-accent-day ); } diff --git a/packages/bpk-component-barchart/src/BpkChartAxis.module.css b/packages/bpk-component-barchart/src/BpkChartAxis.module.css deleted file mode 100644 index 47da34a9da..0000000000 --- a/packages/bpk-component-barchart/src/BpkChartAxis.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chart__axis-tick-text{fill:#545860;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-chart__axis-label{fill:#545860;margin:0;font-size:.75rem;line-height:1rem;font-weight:400} diff --git a/packages/bpk-component-barchart/src/BpkChartAxis.module.scss b/packages/bpk-component-barchart/src/BpkChartAxis.module.scss index 162447cab2..ca8563e6ac 100644 --- a/packages/bpk-component-barchart/src/BpkChartAxis.module.scss +++ b/packages/bpk-component-barchart/src/BpkChartAxis.module.scss @@ -16,22 +16,23 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/typography'; .bpk-chart { &__axis-tick { &-text { - fill: $bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; - @include bpk-text; - @include bpk-caption; + @include typography.bpk-text; + @include typography.bpk-caption; } } &__axis-label { - fill: $bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; - @include bpk-text; - @include bpk-caption; + @include typography.bpk-text; + @include typography.bpk-caption; } } diff --git a/packages/bpk-component-barchart/src/BpkChartDataTable.module.css b/packages/bpk-component-barchart/src/BpkChartDataTable.module.css deleted file mode 100644 index da497c85e8..0000000000 --- a/packages/bpk-component-barchart/src/BpkChartDataTable.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chart-data-table{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-chart-data-table thead,.bpk-chart-data-table tbody{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)} diff --git a/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss b/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss index 025506be1a..25638471f8 100644 --- a/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss +++ b/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss @@ -16,13 +16,13 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/utils'; .bpk-chart-data-table { - @include bpk-visually-hidden; + @include utils.bpk-visually-hidden; thead, tbody { - @include bpk-visually-hidden; + @include utils.bpk-visually-hidden; } } diff --git a/packages/bpk-component-barchart/src/BpkChartGridLines.module.css b/packages/bpk-component-barchart/src/BpkChartGridLines.module.css deleted file mode 100644 index 46b195a205..0000000000 --- a/packages/bpk-component-barchart/src/BpkChartGridLines.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chart__grid-line{shape-rendering:crispedges;stroke:#c2c9cd} diff --git a/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss b/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss index 4bf4350cf0..5e428e5881 100644 --- a/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss +++ b/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss @@ -16,11 +16,11 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-chart { &__grid-line { shape-rendering: crispedges; - stroke: $bpk-line-day; + stroke: tokens.$bpk-line-day; } } diff --git a/packages/bpk-component-blockquote/src/BpkBlockquote.module.css b/packages/bpk-component-blockquote/src/BpkBlockquote.module.css deleted file mode 100644 index b7efc6f993..0000000000 --- a/packages/bpk-component-blockquote/src/BpkBlockquote.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-blockquote{margin:0 0 1rem 0;padding:1.5rem;box-shadow:2px 0 0 0 #0062e3 inset;box-shadow:2px 0 0 0 var(--bpk-blockquote-bar-color, #0062e3) inset}html[dir='rtl'] .bpk-blockquote{padding:1.5rem;border-left:0;box-shadow:-2px 0 0 0 #0062e3 inset;box-shadow:-2px 0 0 0 var(--bpk-blockquote-bar-color, #0062e3) inset}.bpk-blockquote>*:last-child{margin-bottom:0}.bpk-blockquote--extra-spacing{margin-top:2rem;margin-bottom:2rem} diff --git a/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss b/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss index d650704aab..2fe2375faa 100644 --- a/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss +++ b/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss @@ -16,12 +16,12 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/typography'; .bpk-blockquote { - @include bpk-blockquote; + @include typography.bpk-blockquote; } .bpk-blockquote--extra-spacing { - @include bpk-blockquote--extra-spacing; + @include typography.bpk-blockquote--extra-spacing; } diff --git a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.css b/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.css deleted file mode 100644 index 8f3a642b9d..0000000000 --- a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-boilerplate{display:flex} diff --git a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss b/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss index 0f41621649..e4bc1d3373 100644 --- a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss +++ b/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss @@ -16,8 +16,6 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; - .bpk-boilerplate { display: flex; } diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css deleted file mode 100644 index 8bf2d02aa4..0000000000 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-bottom-sheet--container{display:flex;padding:1.5rem}@media (max-width: 32rem){.bpk-bottom-sheet--container{padding:0;overflow:hidden}} diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.scss b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.scss index f6a18301ed..7db01aa323 100644 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.scss +++ b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.scss @@ -16,14 +16,15 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/breakpoints'; .bpk-bottom-sheet { &--container { display: flex; - padding: bpk-spacing-lg(); + padding: tokens.bpk-spacing-lg(); - @include bpk-breakpoint-mobile { + @include breakpoints.bpk-breakpoint-mobile { padding: 0; overflow: hidden; } diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css deleted file mode 100644 index bbeea62c0c..0000000000 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.5rem}@media (max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.bpk-bottom-sheet::-webkit-scrollbar{display:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media (min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.bpk-bottom-sheet--appear{animation-duration:0.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media (min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media (min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-direction:reverse;animation-duration:0.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media (min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-bottom-sheet--navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-bottom-sheet--heading{width:calc( 100% - ((3rem) * 2 + 0.25rem / 2));margin-right:auto;text-align:center;margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-bottom-sheet--close-button{position:relative;left:auto;margin-right:1.5rem}html[dir='rtl'] .bpk-bottom-sheet--close-button{right:auto;margin-right:calc(-0.25rem / 2);margin-left:1.5rem}.bpk-bottom-sheet--action-button{position:relative;right:auto;width:calc(3rem - (0.25rem));margin-right:calc(0.25rem / 2);margin-left:calc(0.25rem);word-break:break-all}html[dir='rtl'] .bpk-bottom-sheet--action-button{left:auto;margin-right:calc(0.25rem);margin-left:calc(0.25rem / 2)} diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.scss b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.scss index 1da2f675bc..c9056235c3 100644 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.scss +++ b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.scss @@ -16,22 +16,28 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/breakpoints'; +@use '../../unstable__bpk-mixins/radii'; +@use '../../unstable__bpk-mixins/shadows'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; -$close-button-width: bpk-spacing-lg() * 2; +$close-button-width: tokens.bpk-spacing-lg() * 2; .bpk-bottom-sheet { - z-index: $bpk-zindex-modal; + z-index: tokens.$bpk-zindex-modal; width: 100%; - max-width: $bpk-modal-max-width; + max-width: tokens.$bpk-modal-max-width; margin: auto; transform: scale(1); transition: - opacity $bpk-duration-sm ease-in-out, - transform $bpk-duration-sm ease-in-out; + opacity tokens.$bpk-duration-sm ease-in-out, + transform tokens.$bpk-duration-sm ease-in-out; outline: 0; - background-color: $bpk-modal-background-color; - opacity: $bpk-modal-opacity; + background-color: tokens.$bpk-modal-background-color; + opacity: tokens.$bpk-modal-opacity; // required to prevent the header extending beyond the rounded corners overflow: hidden; @@ -39,16 +45,16 @@ $close-button-width: bpk-spacing-lg() * 2; // FIX: Prevents ugly flickering when tapping inside the modal in Mobile Safari -webkit-tap-highlight-color: transparent; - @include bpk-box-shadow-xl; - @include bpk-border-radius-sm; + @include shadows.bpk-box-shadow-xl; + @include radii.bpk-border-radius-sm; - @include bpk-breakpoint-mobile { + @include breakpoints.bpk-breakpoint-mobile { position: fixed; bottom: 0; height: fit-content; max-height: 90%; margin-bottom: 0; - border-radius: $bpk-border-radius-lg $bpk-border-radius-lg 0 0; + border-radius: tokens.$bpk-border-radius-lg tokens.$bpk-border-radius-lg 0 0; overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; @@ -60,14 +66,14 @@ $close-button-width: bpk-spacing-lg() * 2; } &--content { - padding: $bpk-modal-content-padding; + padding: tokens.$bpk-modal-content-padding; flex: 1; overflow-y: auto; } &--wide { - @include bpk-breakpoint-above-mobile { - max-width: $bpk-modal-wide-max-width; + @include breakpoints.bpk-breakpoint-above-mobile { + max-width: tokens.$bpk-modal-wide-max-width; } } @@ -86,17 +92,17 @@ $close-button-width: bpk-spacing-lg() * 2; animation-name: slide-up; animation-timing-function: ease-in-out; - @include bpk-breakpoint-above-mobile { + @include breakpoints.bpk-breakpoint-above-mobile { transform: scale(0.9); - opacity: $bpk-modal-initial-opacity; + opacity: tokens.$bpk-modal-initial-opacity; animation: none; } } &--appear-active { - @include bpk-breakpoint-above-mobile { + @include breakpoints.bpk-breakpoint-above-mobile { transform: scale(1); - opacity: $bpk-modal-opacity; + opacity: tokens.$bpk-modal-opacity; } } @@ -106,7 +112,7 @@ $close-button-width: bpk-spacing-lg() * 2; animation-name: slide-up; animation-timing-function: ease-in-out; - @include bpk-breakpoint-above-mobile { + @include breakpoints.bpk-breakpoint-above-mobile { animation: none; } } @@ -114,53 +120,53 @@ $close-button-width: bpk-spacing-lg() * 2; &--header { position: sticky; top: 0; - z-index: $bpk-zindex-tooltip - 1; + z-index: tokens.$bpk-zindex-tooltip - 1; - @include bpk-border-bottom-sm($bpk-line-day); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day); } &--navigation { display: flex; justify-content: space-between; - background-color: $bpk-modal-background-color; + background-color: tokens.$bpk-modal-background-color; } &--heading { width: calc( - 100% - ((#{$close-button-width}) * 2 + #{bpk-spacing-sm()} / 2) + 100% - ((#{$close-button-width}) * 2 + #{tokens.bpk-spacing-sm() * 0.5}) ); // Treat title as if it was always surrounded by close and action to center align it margin-right: auto; text-align: center; - @include bpk-text; - @include bpk-label-1; + @include typography.bpk-text; + @include typography.bpk-label-1; } &--close-button { position: relative; // Override position: absolute coming from BpkNavigationBar left: auto; - margin-right: bpk-spacing-lg(); + margin-right: tokens.bpk-spacing-lg(); - @include bpk-rtl { + @include utils.bpk-rtl { right: auto; - margin-right: calc(-#{bpk-spacing-sm()} / 2); - margin-left: bpk-spacing-lg(); + margin-right: tokens.bpk-spacing-sm() * 0.5; + margin-left: tokens.bpk-spacing-lg(); } } &--action-button { position: relative; // Override position: absolute coming from BpkNavigationBar right: auto; - width: calc(#{$close-button-width} - (#{bpk-spacing-sm()})); - margin-right: calc(#{bpk-spacing-sm()} / 2); - margin-left: calc(#{bpk-spacing-sm()}); + width: calc(#{$close-button-width} - (#{tokens.bpk-spacing-sm()})); + margin-right: tokens.bpk-spacing-sm() * 0.5; + margin-left: tokens.bpk-spacing-sm(); word-break: break-all; - @include bpk-rtl { + @include utils.bpk-rtl { left: auto; - margin-right: calc(#{bpk-spacing-sm()}); - margin-left: calc(#{bpk-spacing-sm()} / 2); + margin-right: tokens.bpk-spacing-sm(); + margin-left: tokens.bpk-spacing-sm() * 0.5; } } } diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.css b/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.css deleted file mode 100644 index bb2c819639..0000000000 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-breadcrumb{display:flex;margin:0;padding:0;flex-wrap:wrap;list-style-type:none} diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss b/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss index b31a1eb40d..ea088522da 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss @@ -16,8 +16,6 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; - .bpk-breadcrumb { display: flex; margin: 0; diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css deleted file mode 100644 index 579b5211b9..0000000000 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-breadcrumb-item{display:flex;align-items:center;white-space:nowrap}.bpk-breadcrumb-item__link{margin:0}.bpk-breadcrumb-item__active-item{color:#545860}.bpk-breadcrumb-item__arrow{margin:0 0.25rem;fill:rgba(0,0,0,0.2)} diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss index 7bfeebf081..13ee0e14e7 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/typography'; .bpk-breadcrumb-item { display: flex; @@ -24,15 +25,15 @@ white-space: nowrap; &__link { - @include bpk-text; + @include typography.bpk-text; } &__active-item { - color: $bpk-text-secondary-day; + color: tokens.$bpk-text-secondary-day; } &__arrow { - margin: 0 bpk-spacing-sm(); - fill: $bpk-text-disabled-day; + margin: 0 tokens.bpk-spacing-sm(); + fill: tokens.$bpk-text-disabled-day; } } diff --git a/packages/bpk-component-button/src/BpkButtonBase.module.css b/packages/bpk-component-button/src/BpkButtonBase.module.css deleted file mode 100644 index c6b9c92877..0000000000 --- a/packages/bpk-component-button/src/BpkButtonBase.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-background-color, #05203c)}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, #154679)}.bpk-button:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor} diff --git a/packages/bpk-component-button/src/BpkButtonBase.module.scss b/packages/bpk-component-button/src/BpkButtonBase.module.scss index c595c44f08..86fd0a77a5 100644 --- a/packages/bpk-component-button/src/BpkButtonBase.module.scss +++ b/packages/bpk-component-button/src/BpkButtonBase.module.scss @@ -16,27 +16,26 @@ * limitations under the License. */ -/* @flow strict */ - -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button { - @include bpk-button; + @include buttons.bpk-button; &--large { - @include bpk-button--large; + @include buttons.bpk-button--large; } &--icon-only { - border-radius: $bpk-button-border-radius; + border-radius: tokens.$bpk-button-border-radius; - @include bpk-button--icon-only; + @include buttons.bpk-button--icon-only; } &--large-icon-only { - border-radius: $bpk-button-border-radius; + border-radius: tokens.$bpk-button-border-radius; - @include bpk-button--large-icon-only; + @include buttons.bpk-button--large-icon-only; } /* stylelint-disable selector-max-compound-selectors */ diff --git a/packages/bpk-component-button/src/BpkButtonDestructive.module.css b/packages/bpk-component-button/src/BpkButtonDestructive.module.css deleted file mode 100644 index 998241d318..0000000000 --- a/packages/bpk-component-button/src/BpkButtonDestructive.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5);color:#c80456;color:var(--bpk-button-destructive-text-color, #c80456);background-color:#e0e3e5;background-color:var(--bpk-button-destructive-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, #c80456)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)} diff --git a/packages/bpk-component-button/src/BpkButtonDestructive.module.scss b/packages/bpk-component-button/src/BpkButtonDestructive.module.scss index 57b8acfb87..d6aa8becb9 100644 --- a/packages/bpk-component-button/src/BpkButtonDestructive.module.scss +++ b/packages/bpk-component-button/src/BpkButtonDestructive.module.scss @@ -16,9 +16,9 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button--destructive { - @include bpk-button--secondary; - @include bpk-button--destructive; + @include buttons.bpk-button--secondary; + @include buttons.bpk-button--destructive; } diff --git a/packages/bpk-component-button/src/BpkButtonFeatured.module.css b/packages/bpk-component-button/src/BpkButtonFeatured.module.css deleted file mode 100644 index 70c0966146..0000000000 --- a/packages/bpk-component-button/src/BpkButtonFeatured.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, #fff);background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, #0062e3)}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, #024daf)}.bpk-button--featured:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)} diff --git a/packages/bpk-component-button/src/BpkButtonFeatured.module.scss b/packages/bpk-component-button/src/BpkButtonFeatured.module.scss index 35ae291dfa..4c6e639db3 100644 --- a/packages/bpk-component-button/src/BpkButtonFeatured.module.scss +++ b/packages/bpk-component-button/src/BpkButtonFeatured.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button--featured { - @include bpk-button--featured; + @include buttons.bpk-button--featured; } diff --git a/packages/bpk-component-button/src/BpkButtonLink.module.css b/packages/bpk-component-button/src/BpkButtonLink.module.css deleted file mode 100644 index 860c14cb33..0000000000 --- a/packages/bpk-component-button/src/BpkButtonLink.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0} diff --git a/packages/bpk-component-button/src/BpkButtonLink.module.scss b/packages/bpk-component-button/src/BpkButtonLink.module.scss index 598c94b89c..7f3c57c97f 100644 --- a/packages/bpk-component-button/src/BpkButtonLink.module.scss +++ b/packages/bpk-component-button/src/BpkButtonLink.module.scss @@ -16,10 +16,10 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button { &--link { - @include bpk-button--link; + @include buttons.bpk-button--link; } } diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.css b/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.css deleted file mode 100644 index 068771c175..0000000000 --- a/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,0.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255,255,255,0.2))} diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss index 6347d20f6f..32f9331495 100644 --- a/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss +++ b/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button--link-on-dark { - @include bpk-button--link-on-dark; + @include buttons.bpk-button--link-on-dark; } diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.css b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.css deleted file mode 100644 index 965797e394..0000000000 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, #161616);background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, #fff)}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-active-background-color, #c2c9cd)}.bpk-button--primary-on-dark:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)} diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss index 800c341e00..79be353e0a 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button--primary-on-dark { - @include bpk-button--primary-on-dark; + @include buttons.bpk-button--primary-on-dark; } diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.css b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.css deleted file mode 100644 index 78d2a96284..0000000000 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, #05203c)}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, #154679)}.bpk-button--primary-on-light:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)} diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss index 8c8e7436b8..3c35cf370b 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button--primary-on-light { - @include bpk-button--primary-on-light; + @include buttons.bpk-button--primary-on-light; } diff --git a/packages/bpk-component-button/src/BpkButtonSecondary.module.css b/packages/bpk-component-button/src/BpkButtonSecondary.module.css deleted file mode 100644 index eb0a24278c..0000000000 --- a/packages/bpk-component-button/src/BpkButtonSecondary.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--secondary:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)} diff --git a/packages/bpk-component-button/src/BpkButtonSecondary.module.scss b/packages/bpk-component-button/src/BpkButtonSecondary.module.scss index 7db2ae8e7d..9a7feda43e 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondary.module.scss +++ b/packages/bpk-component-button/src/BpkButtonSecondary.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button--secondary { - @include bpk-button--secondary; + @include buttons.bpk-button--secondary; } diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css deleted file mode 100644 index fa05e78adf..0000000000 --- a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, #fff);background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, #243346)}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, #010913)}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,0.2)} diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss index 1331e4d657..501887f6df 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss +++ b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/buttons'; .bpk-button--secondary-on-dark { - @include bpk-button--secondary-on-dark; + @include buttons.bpk-button--secondary-on-dark; } diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.css b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.css deleted file mode 100644 index b1edfb68fe..0000000000 --- a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-background-color, #05203c)}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, #154679)}.bpk-button:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5);color:#c80456;color:var(--bpk-button-destructive-text-color, #c80456);background-color:#e0e3e5;background-color:var(--bpk-button-destructive-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, #c80456)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, #fff);background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, #0062e3)}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, #024daf)}.bpk-button--featured:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,0.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255,255,255,0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, #161616);background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, #fff)}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-active-background-color, #c2c9cd)}.bpk-button--primary-on-dark:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, #05203c)}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, #154679)}.bpk-button--primary-on-light:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--secondary:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, #fff);background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, #243346)}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, #010913)}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,0.2)}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor} diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss index 13239500a9..9e03473de8 100644 --- a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss +++ b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss @@ -16,58 +16,59 @@ * limitations under the License. */ -@import '../../../bpk-mixins/index.scss'; +@use '../../../unstable__bpk-mixins/tokens'; +@use '../../../unstable__bpk-mixins/buttons'; .bpk-button { - @include bpk-button; + @include buttons.bpk-button; &--large { - @include bpk-button--large; + @include buttons.bpk-button--large; } &--icon-only { - border-radius: $bpk-button-border-radius; + border-radius: tokens.$bpk-button-border-radius; - @include bpk-button--icon-only; + @include buttons.bpk-button--icon-only; } &--large-icon-only { - border-radius: $bpk-button-border-radius; + border-radius: tokens.$bpk-button-border-radius; - @include bpk-button--large-icon-only; + @include buttons.bpk-button--large-icon-only; } &--destructive { - @include bpk-button--secondary; - @include bpk-button--destructive; + @include buttons.bpk-button--secondary; + @include buttons.bpk-button--destructive; } &--featured { - @include bpk-button--featured; + @include buttons.bpk-button--featured; } &--link { - @include bpk-button--link; + @include buttons.bpk-button--link; } &--link-on-dark { - @include bpk-button--link-on-dark; + @include buttons.bpk-button--link-on-dark; } &--primary-on-dark { - @include bpk-button--primary-on-dark; + @include buttons.bpk-button--primary-on-dark; } &--primary-on-light { - @include bpk-button--primary-on-light; + @include buttons.bpk-button--primary-on-light; } &--secondary { - @include bpk-button--secondary; + @include buttons.bpk-button--secondary; } &--secondary-on-dark { - @include bpk-button--secondary-on-dark; + @include buttons.bpk-button--secondary-on-dark; } /* stylelint-disable selector-max-compound-selectors */ diff --git a/packages/bpk-component-calendar/src/BpkCalendar.module.css b/packages/bpk-component-calendar/src/BpkCalendar.module.css deleted file mode 100644 index a4d66b44be..0000000000 --- a/packages/bpk-component-calendar/src/BpkCalendar.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar{display:flex;width:100%;flex-direction:column;border-radius:.5rem}.bpk-calendar--fixed{width:22.75rem}.bpk-calendar__header{margin-top:1.5rem}.bpk-calendar__grid{margin-top:1.5rem} diff --git a/packages/bpk-component-calendar/src/BpkCalendar.module.scss b/packages/bpk-component-calendar/src/BpkCalendar.module.scss index b2ab228f7a..91f5451690 100644 --- a/packages/bpk-component-calendar/src/BpkCalendar.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendar.module.scss @@ -16,25 +16,26 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; -@import 'variables.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/radii'; +@use 'variables'; .bpk-calendar { display: flex; width: 100%; flex-direction: column; - @include bpk-border-radius-sm; + @include radii.bpk-border-radius-sm; &--fixed { - width: $calendar-width; + width: variables.$calendar-width; } &__header { - margin-top: bpk-spacing-lg(); + margin-top: tokens.bpk-spacing-lg(); } &__grid { - margin-top: bpk-spacing-lg(); + margin-top: tokens.bpk-spacing-lg(); } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.module.css b/packages/bpk-component-calendar/src/BpkCalendarDate.module.css deleted file mode 100644 index 0b51fbe364..0000000000 --- a/packages/bpk-component-calendar/src/BpkCalendarDate.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.5rem;background-color:transparent;text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;font-size:1rem;line-height:1.5rem;font-weight:700;color:#161616;color:var(--bpk-calendar-date-text-color, #161616)}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#eff1f2;color:#161616;color:var(--bpk-calendar-date-text-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#eff1f2;color:#161616;color:var(--bpk-calendar-date-text-hover-color, #161616)}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#eff1f2;color:#161616;color:var(--bpk-calendar-date-text-active-color, #161616)}.bpk-calendar-date--outside{background-color:transparent;color:rgba(0,0,0,0.2)}.bpk-calendar-date--selected{cursor:default;color:#fff;color:var(--bpk-calendar-date-text-selected-color, #fff)}.bpk-calendar-date--middle{background-color:#e3f0ff;color:#161616}.bpk-calendar-date--single{background-color:#0062e3}.bpk-calendar-date--start{background-color:#0062e3}.bpk-calendar-date--end{background-color:#0062e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected){box-shadow:0 0 0 2px #0062e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, #0062e3) inset;color:#0062e3;color:var(--bpk-calendar-date-text-focus-color, #0062e3)}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:transparent;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:rgba(0,0,0,0.2)}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:rgba(0,0,0,0.2)}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:rgba(0,0,0,0.2)} diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss b/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss index fb2c1e3014..8fd68d9836 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss @@ -16,105 +16,108 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; .bpk-calendar-date { - width: $bpk-calendar-day-size; - height: $bpk-calendar-day-size; + width: tokens.$bpk-calendar-day-size; + height: tokens.$bpk-calendar-day-size; padding: 0; border: none; - border-radius: $bpk-border-radius-lg; + border-radius: tokens.$bpk-border-radius-lg; background-color: transparent; text-align: center; cursor: pointer; appearance: none; box-sizing: border-box; - @include bpk-label-1; - @include bpk-themeable-property( + @include typography.bpk-label-1; + @include utils.bpk-themeable-property( color, --bpk-calendar-date-text-color, - $bpk-text-primary-day + tokens.$bpk-text-primary-day ); - @include bpk-hover { + @include utils.bpk-hover { &:not(.bpk-calendar-date--selected) { - background-color: $bpk-canvas-contrast-day; + background-color: tokens.$bpk-canvas-contrast-day; - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-calendar-date-text-hover-color, - $bpk-text-primary-day + tokens.$bpk-text-primary-day ); } } &:not(.bpk-calendar-date--selected):active { - background-color: $bpk-canvas-contrast-day; + background-color: tokens.$bpk-canvas-contrast-day; - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-calendar-date-text-active-color, - $bpk-text-primary-day + tokens.$bpk-text-primary-day ); } &--outside { background-color: transparent; - color: $bpk-text-disabled-day; + color: tokens.$bpk-text-disabled-day; } &--selected { cursor: default; - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-calendar-date-text-selected-color, - $bpk-text-primary-inverse-day + tokens.$bpk-text-primary-inverse-day ); } &--middle { - background-color: $bpk-surface-subtle-day; - color: $bpk-text-primary-day; + background-color: tokens.$bpk-surface-subtle-day; + color: tokens.$bpk-text-primary-day; } &--single { - background-color: $bpk-core-accent-day; + background-color: tokens.$bpk-core-accent-day; } &--start { - background-color: $bpk-core-accent-day; + background-color: tokens.$bpk-core-accent-day; } &--end { - background-color: $bpk-core-accent-day; + background-color: tokens.$bpk-core-accent-day; } &--focused:not(:disabled):not(.bpk-calendar-date--selected) { - box-shadow: 0 0 0 2px $bpk-core-accent-day inset; + box-shadow: 0 0 0 2px tokens.$bpk-core-accent-day inset; box-shadow: 0 0 0 2px - var(--bpk-calendar-date-focused-border-color, $bpk-core-accent-day) inset; + var(--bpk-calendar-date-focused-border-color, tokens.$bpk-core-accent-day) + inset; - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-calendar-date-text-focus-color, - $bpk-core-accent-day + tokens.$bpk-core-accent-day ); } &:disabled, &--blocked { background-color: transparent; - color: $bpk-text-disabled-day; + color: tokens.$bpk-text-disabled-day; cursor: not-allowed; - @include bpk-hover { - color: $bpk-text-disabled-day; + @include utils.bpk-hover { + color: tokens.$bpk-text-disabled-day; } &:active { - color: $bpk-text-disabled-day; + color: tokens.$bpk-text-disabled-day; } } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css deleted file mode 100644 index f8bf99ef80..0000000000 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;text-align:center}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #e3f0ff 50%)}html[dir='rtl'] .bpk-calendar-grid__date--start{background-image:linear-gradient(to left, #fff 50%, #e3f0ff 50%)}.bpk-calendar-grid__date--middle{background-color:#e3f0ff}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #e3f0ff 50%)}html[dir='rtl'] .bpk-calendar-grid__date--end{background-image:linear-gradient(to right, #fff 50%, #e3f0ff 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem} diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss index 175e5ce42e..e93516036b 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; -@import 'variables.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; .bpk-calendar-grid { width: 100%; @@ -30,7 +30,7 @@ } &__caption { - @include bpk-visually-hidden; + @include utils.bpk-visually-hidden; } &__date { @@ -40,35 +40,35 @@ &--start { background-image: linear-gradient( to right, - $bpk-surface-default-day 50%, - $bpk-surface-subtle-day 50% + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% ); - @include bpk-rtl { + @include utils.bpk-rtl { background-image: linear-gradient( to left, - $bpk-surface-default-day 50%, - $bpk-surface-subtle-day 50% + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% ); } } &--middle { - background-color: $bpk-surface-subtle-day; + background-color: tokens.$bpk-surface-subtle-day; } &--end { background-image: linear-gradient( to left, - $bpk-surface-default-day 50%, - $bpk-surface-subtle-day 50% + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% ); - @include bpk-rtl { + @include utils.bpk-rtl { background-image: linear-gradient( to right, - $bpk-surface-default-day 50%, - $bpk-surface-subtle-day 50% + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% ); } } @@ -76,6 +76,6 @@ &__week { display: flex; - padding-top: bpk-spacing-lg(); + padding-top: tokens.bpk-spacing-lg(); } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css deleted file mode 100644 index 6685a6f981..0000000000 --- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .5rem;box-shadow:0 1px 0 0 #c2c9cd;vertical-align:middle;box-sizing:content-box;font-size:.875rem;line-height:1.25rem;font-weight:400} diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss index 044d7ee925..82eeff1bb8 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss @@ -16,8 +16,9 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; -@import 'variables.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/typography'; +@use 'variables'; .bpk-calendar-header { display: table; @@ -33,18 +34,18 @@ list-style: none; text-align: center; - @include bpk-text; - @include bpk-caption; + @include typography.bpk-text; + @include typography.bpk-caption; } &__weekday { display: table-cell; - height: $bpk-calendar-day-size; - padding: 0 $bpk-calendar-day-spacing; - box-shadow: $shadow-bottom; + height: tokens.$bpk-calendar-day-size; + padding: 0 tokens.$bpk-calendar-day-spacing; + box-shadow: variables.$shadow-bottom; vertical-align: middle; box-sizing: content-box; - @include bpk-footnote; + @include typography.bpk-footnote; } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css deleted file mode 100644 index 8750a5050b..0000000000 --- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid-transition{position:relative;overflow:hidden}.bpk-calendar-grid-transition__dummy{display:inline-block;width:22.75rem}.bpk-calendar-grid-transition__strip{left:0;display:block;z-index:0;width:68.25rem}.bpk-calendar-grid-transition__strip--transitioning{z-index:1;transition:transform 200ms ease-in-out}.bpk-calendar-grid-transition__grid{display:inline-table;width:22.75rem} diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss index 981e96ca3c..a8981e9fac 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; -@import 'variables.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use 'variables'; .bpk-calendar-grid-transition { position: relative; @@ -25,23 +25,23 @@ &__dummy { display: inline-block; - width: $calendar-width; + width: variables.$calendar-width; } &__strip { left: 0; display: block; z-index: 0; - width: 3 * $calendar-width; + width: 3 * variables.$calendar-width; &--transitioning { z-index: 1; - transition: transform $bpk-duration-sm ease-in-out; + transition: transform tokens.$bpk-duration-sm ease-in-out; } } &__grid { display: inline-table; - width: $calendar-width; + width: variables.$calendar-width; } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.module.css b/packages/bpk-component-calendar/src/BpkCalendarNav.module.css deleted file mode 100644 index c9d5cd6683..0000000000 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-nav{display:table}.bpk-calendar-nav__month{display:table-cell;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;padding:0 .5rem;text-align:center;vertical-align:middle;box-sizing:border-box}.bpk-calendar-nav__button{width:100%;height:2.25rem;padding:0.375rem 0;border:none;background:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-calendar-nudger-icon-color, #161616)}.bpk-no-touch-support .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-calendar-nudger-icon-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-calendar-nudger-icon-hover-color, #161616)}.bpk-calendar-nav__button:active{color:#161616;color:var(--bpk-calendar-nudger-icon-active-color, #161616)}.bpk-calendar-nav__button .bpk-calendar-nav__icon{fill:currentcolor}html[dir='rtl'] .bpk-calendar-nav__button .bpk-calendar-nav__icon{transform:scaleX(-1)}.bpk-calendar-nav__button:disabled{cursor:not-allowed}.bpk-calendar-nav__button:disabled .bpk-calendar-nav__icon{fill:rgba(0,0,0,0.2)}.bpk-calendar-nav__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)} diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss b/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss index 8f18126016..9d999a6031 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss @@ -16,8 +16,9 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; -@import 'variables.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/icons'; +@use '../../unstable__bpk-mixins/utils'; .bpk-calendar-nav { display: table; @@ -29,7 +30,7 @@ &__nudger { display: table-cell; - padding: 0 $bpk-calendar-day-spacing; + padding: 0 tokens.$bpk-calendar-day-spacing; text-align: center; vertical-align: middle; box-sizing: border-box; @@ -37,53 +38,53 @@ &__button { width: 100%; - height: $bpk-input-height; - padding: bpk-spacing-md() - (2 * $bpk-one-pixel-rem) 0; + height: tokens.$bpk-input-height; + padding: tokens.bpk-spacing-md() - (2 * tokens.$bpk-one-pixel-rem) 0; border: none; background: none; cursor: pointer; appearance: none; - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-calendar-nudger-icon-color, - $bpk-text-primary-day + tokens.$bpk-text-primary-day ); - @include bpk-hover { - @include bpk-themeable-property( + @include utils.bpk-hover { + @include utils.bpk-themeable-property( color, --bpk-calendar-nudger-icon-hover-color, - $bpk-text-primary-day + tokens.$bpk-text-primary-day ); } &:active { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-calendar-nudger-icon-active-color, - $bpk-text-primary-day + tokens.$bpk-text-primary-day ); } .bpk-calendar-nav__icon { fill: currentcolor; - @include bpk-icon--rtl-support; + @include icons.bpk-icon--rtl-support; } &:disabled { cursor: not-allowed; .bpk-calendar-nav__icon { - fill: $bpk-text-disabled-day; + fill: tokens.$bpk-text-disabled-day; } } } &__text { &--hidden { - @include bpk-visually-hidden; + @include utils.bpk-visually-hidden; } } } diff --git a/packages/bpk-component-calendar/src/_variables.scss b/packages/bpk-component-calendar/src/_variables.scss index c60fb3b7be..b33d32edff 100644 --- a/packages/bpk-component-calendar/src/_variables.scss +++ b/packages/bpk-component-calendar/src/_variables.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; -$shadow-bottom: 0 1px 0 0 $bpk-line-day; /* stylelint-disable-line unit-disallowed-list */ -$calendar-width: 7 * ($bpk-calendar-day-size + (2 * $bpk-calendar-day-spacing)); +$shadow-bottom: 0 1px 0 0 tokens.$bpk-line-day; /* stylelint-disable-line unit-disallowed-list */ +$calendar-width: 7 * + (tokens.$bpk-calendar-day-size + (2 * tokens.$bpk-calendar-day-spacing)); diff --git a/packages/bpk-component-card-button/src/BpkSaveButton.module.css b/packages/bpk-component-card-button/src/BpkSaveButton.module.css deleted file mode 100644 index 66db747f04..0000000000 --- a/packages/bpk-component-card-button/src/BpkSaveButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:0.5rem;border-radius:50%;background-color:transparent}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}.bpk-save-button:active{background-color:transparent}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-no-touch-support .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,0.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,0.8)} diff --git a/packages/bpk-component-card-button/src/BpkSaveButton.module.scss b/packages/bpk-component-card-button/src/BpkSaveButton.module.scss index 602144e33e..3513572f26 100644 --- a/packages/bpk-component-card-button/src/BpkSaveButton.module.scss +++ b/packages/bpk-component-card-button/src/BpkSaveButton.module.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; @keyframes heart-beat { 0%, @@ -47,13 +48,13 @@ .bpk-save-button { position: relative; - width: bpk-spacing-xxl(); - height: bpk-spacing-xxl(); - padding: bpk-spacing-md(); + width: tokens.bpk-spacing-xxl(); + height: tokens.bpk-spacing-xxl(); + padding: tokens.bpk-spacing-md(); border-radius: 50%; background-color: transparent; - @include bpk-hover { + @include utils.bpk-hover { background-color: transparent; } @@ -66,10 +67,10 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - color: $bpk-text-on-light-day; + color: tokens.$bpk-text-on-light-day; - @include bpk-hover { - color: $bpk-text-on-light-day; + @include utils.bpk-hover { + color: tokens.$bpk-text-on-light-day; } } @@ -78,8 +79,8 @@ opacity: 1; &--show { - @include bpk-hover { - transition: opacity $bpk-duration-sm ease-in-out; + @include utils.bpk-hover { + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: 0; } } @@ -89,13 +90,13 @@ } &--onDark { - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; } } &__heartIcon { z-index: 2; - color: $bpk-core-accent-day; + color: tokens.$bpk-core-accent-day; opacity: 0; &--toggle { @@ -106,43 +107,43 @@ &--show { opacity: 1; - @include bpk-hover { - color: $bpk-core-accent-day; + @include utils.bpk-hover { + color: tokens.$bpk-core-accent-day; } } &--hide { - @include bpk-hover { - transition: opacity $bpk-duration-sm ease-in-out; - color: $bpk-text-on-light-day; + @include utils.bpk-hover { + transition: opacity tokens.$bpk-duration-sm ease-in-out; + color: tokens.$bpk-text-on-light-day; opacity: 1; } } &--onDark { - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; - @include bpk-hover { - color: $bpk-text-on-dark-day; + @include utils.bpk-hover { + color: tokens.$bpk-text-on-dark-day; } } } &__small { - width: bpk-spacing-xl(); - height: bpk-spacing-xl(); - min-height: bpk-spacing-xl(); + width: tokens.bpk-spacing-xl(); + height: tokens.bpk-spacing-xl(); + min-height: tokens.bpk-spacing-xl(); } &__contained { - background-color: $bpk-private-card-button-contained-color; + background-color: tokens.$bpk-private-card-button-contained-color; - @include bpk-hover { - background-color: $bpk-private-card-button-contained-color; + @include utils.bpk-hover { + background-color: tokens.$bpk-private-card-button-contained-color; } &:active { - background-color: $bpk-private-card-button-contained-color; + background-color: tokens.$bpk-private-card-button-contained-color; } } } diff --git a/packages/bpk-component-card/src/BpkCard.module.css b/packages/bpk-component-card/src/BpkCard.module.css deleted file mode 100644 index 921874ae05..0000000000 --- a/packages/bpk-component-card/src/BpkCard.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-card--atomic-button{width:100%;padding:0;border:none;background:none;color:inherit;text-align:inherit;cursor:pointer;appearance:none}.bpk-card--padded{padding:1rem} diff --git a/packages/bpk-component-card/src/BpkCard.module.scss b/packages/bpk-component-card/src/BpkCard.module.scss index 2d2a5fece4..d7ba0a0857 100644 --- a/packages/bpk-component-card/src/BpkCard.module.scss +++ b/packages/bpk-component-card/src/BpkCard.module.scss @@ -16,10 +16,10 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/cards'; .bpk-card { - @include bpk-card; + @include cards.bpk-card; &--atomic-button { width: 100%; @@ -33,6 +33,6 @@ } &--padded { - @include bpk-card--padded; + @include cards.bpk-card--padded; } } diff --git a/packages/bpk-component-card/src/BpkCardWrapper.module.css b/packages/bpk-component-card/src/BpkCardWrapper.module.css deleted file mode 100644 index eea634123e..0000000000 --- a/packages/bpk-component-card/src/BpkCardWrapper.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-wrapper{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem;box-shadow:0 0 0 2px var(--background-color) }.bpk-no-touch-support .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card-wrapper::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card-wrapper::after{z-index:-1}}.bpk-card-wrapper:active::after{box-shadow:none}.bpk-card-wrapper--header{border-radius:.5rem .5rem 0 0;background-color:var(--background-color);cursor:default;overflow:hidden}.bpk-card-wrapper--content{position:relative;border-radius:0 0 .75rem .75rem;overflow:hidden}.bpk-card-wrapper--content::before,.bpk-card-wrapper--content::after{position:absolute;top:0;content:' ';z-index:2;width:1.5rem;height:1.5rem;background-color:transparent;box-shadow:1rem 0 0 0 var(--background-color);overflow:hidden;border-radius:.75rem}.bpk-card-wrapper--content::before{left:0;transform:rotate(225deg)}.bpk-card-wrapper--content::after{right:0;transform:rotate(-45deg)}.bpk-card-wrapper:has(.bpk-card-wrapper--header:active)::after{box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:1} diff --git a/packages/bpk-component-card/src/BpkCardWrapper.module.scss b/packages/bpk-component-card/src/BpkCardWrapper.module.scss index bc3569fa0f..85249771e1 100644 --- a/packages/bpk-component-card/src/BpkCardWrapper.module.scss +++ b/packages/bpk-component-card/src/BpkCardWrapper.module.scss @@ -16,14 +16,17 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/cards'; +@use '../../unstable__bpk-mixins/radii'; .bpk-card-wrapper { - @include bpk-card; - @include bpk-border-lg(var(--background-color), ''); + @include cards.bpk-card; + @include borders.bpk-border-lg(var(--background-color), ''); &--header { - border-radius: $bpk-border-radius-sm $bpk-border-radius-sm 0 0; + border-radius: tokens.$bpk-border-radius-sm tokens.$bpk-border-radius-sm 0 0; background-color: var(--background-color); cursor: default; overflow: hidden; @@ -31,7 +34,7 @@ &--content { position: relative; - border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md; + border-radius: 0 0 tokens.$bpk-border-radius-md tokens.$bpk-border-radius-md; overflow: hidden; &::before, @@ -40,13 +43,13 @@ top: 0; content: ' '; z-index: 2; - width: bpk-spacing-lg(); - height: bpk-spacing-lg(); + width: tokens.bpk-spacing-lg(); + height: tokens.bpk-spacing-lg(); background-color: transparent; - box-shadow: bpk-spacing-base() 0 0 0 var(--background-color); + box-shadow: tokens.bpk-spacing-base() 0 0 0 var(--background-color); overflow: hidden; - @include bpk-border-radius-md; + @include radii.bpk-border-radius-md; } &::before { @@ -62,7 +65,7 @@ &:has(.bpk-card-wrapper--header:active) { &::after { - box-shadow: $bpk-box-shadow-lg; + box-shadow: tokens.$bpk-box-shadow-lg; opacity: 1; } } diff --git a/packages/bpk-component-card/src/BpkDividedCard.module.css b/packages/bpk-component-card/src/BpkDividedCard.module.css deleted file mode 100644 index ae6021d351..0000000000 --- a/packages/bpk-component-card/src/BpkDividedCard.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-divided-card{display:flex;align-items:stretch}.bpk-divided-card--vertical{min-width:15rem;max-width:45rem;flex-direction:column}.bpk-divided-card--horizontal{min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid 0.0625rem #C2C9CD}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid 0.0625rem #C2C9CD}html[dir='rtl'] .bpk-divided-card__secondary--horizontal{border-right:solid 0.0625rem #C2C9CD;border-left:unset}.bpk-divided-card--no-elevation{box-shadow:none}.bpk-divided-card--no-elevation::after{box-shadow:none} diff --git a/packages/bpk-component-card/src/BpkDividedCard.module.scss b/packages/bpk-component-card/src/BpkDividedCard.module.scss index ae78f3df4c..ce879467e4 100644 --- a/packages/bpk-component-card/src/BpkDividedCard.module.scss +++ b/packages/bpk-component-card/src/BpkDividedCard.module.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; $min-vertical-width: 240; $max-vertical-width: 720; @@ -29,14 +30,14 @@ $fixed-secondary-width: 216; align-items: stretch; &--vertical { - min-width: $bpk-one-pixel-rem * $min-vertical-width; - max-width: $bpk-one-pixel-rem * $max-vertical-width; + min-width: tokens.$bpk-one-pixel-rem * $min-vertical-width; + max-width: tokens.$bpk-one-pixel-rem * $max-vertical-width; flex-direction: column; } &--horizontal { - min-width: $bpk-one-pixel-rem * $min-horizontal-width; - min-height: $bpk-one-pixel-rem * $min-horizontal-height; + min-width: tokens.$bpk-one-pixel-rem * $min-horizontal-width; + min-height: tokens.$bpk-one-pixel-rem * $min-horizontal-height; } &__primary { @@ -47,15 +48,15 @@ $fixed-secondary-width: 216; &__secondary { &--vertical { - border-top: $bpk-input-border; + border-top: tokens.$bpk-input-border; } &--horizontal { - width: $bpk-one-pixel-rem * $fixed-secondary-width; - border-left: $bpk-input-border; + width: tokens.$bpk-one-pixel-rem * $fixed-secondary-width; + border-left: tokens.$bpk-input-border; - @include bpk-rtl { - border-right: $bpk-input-border; + @include utils.bpk-rtl { + border-right: tokens.$bpk-input-border; border-left: unset; } } diff --git a/packages/bpk-component-checkbox/src/BpkCheckbox.module.css b/packages/bpk-component-checkbox/src/BpkCheckbox.module.css deleted file mode 100644 index d6e7b80912..0000000000 --- a/packages/bpk-component-checkbox/src/BpkCheckbox.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-checkbox{position:relative;display:inline-block;padding-left:1.75rem;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}html[dir='rtl'] .bpk-checkbox{padding-right:1.75rem;padding-left:0}.bpk-checkbox__label{vertical-align:baseline}.bpk-checkbox__label--small{margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-checkbox--white{color:#fff}.bpk-checkbox--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-checkbox--disabled--white{color:rgba(255,255,255,0.5)}.bpk-checkbox--invalid input[type='checkbox']{border:.1875rem solid #e70866}.bpk-checkbox__input{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.1875rem solid #545860;border-radius:.25rem;cursor:pointer;vertical-align:text-bottom;appearance:none}html[dir='rtl'] .bpk-checkbox__input{right:0;left:auto}@media screen\0 {.bpk-checkbox__input{background:none !important}}.bpk-checkbox__input:checked,.bpk-checkbox__input:indeterminate{background-color:#0062e3;background-color:var(--bpk-checkbox-checked-color, #0062e3);border-color:#0062e3;border-color:var(--bpk-checkbox-checked-color, #0062e3)}.bpk-checkbox__input:checked:disabled,.bpk-checkbox__input:indeterminate:disabled{border-color:rgba(0,0,0,0.2);background:none}.bpk-checkbox__input:checked:not(:indeterminate)::before,.bpk-checkbox__input:checked:not(:indeterminate)::after{position:absolute;content:'';transform:rotate(45deg);border-radius:2px;background-color:#fff}.bpk-checkbox__input:checked:not(:indeterminate)::before{top:0.4375rem;left:0;width:.5rem;height:0.1875rem}.bpk-checkbox__input:checked:not(:indeterminate)::after{top:0.125rem;left:0.4375rem;width:0.1875rem;height:0.6875rem}.bpk-checkbox__input:checked:not(:indeterminate):disabled::before,.bpk-checkbox__input:checked:not(:indeterminate):disabled::after{background-color:rgba(0,0,0,0.2)}.bpk-checkbox__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-checkbox__input-indeterminate::before{position:absolute;top:0.3125rem;left:0.125rem;content:'';width:.625rem;height:0.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox__input:disabled{cursor:inherit}.bpk-checkbox__input-white{background-color:#fff}.bpk-checkbox__asterisk{color:#e70866} diff --git a/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss b/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss index 9312d808c0..6a40ef5f35 100644 --- a/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss +++ b/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss @@ -16,48 +16,49 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/forms'; .bpk-checkbox { - @include bpk-checkbox; + @include forms.bpk-checkbox; &__label { - @include bpk-checkbox__label; + @include forms.bpk-checkbox__label; &--small { - @include bpk-checkbox__label--small; + @include forms.bpk-checkbox__label--small; } } &--white { - @include bpk-checkbox--white; + @include forms.bpk-checkbox--white; } &--disabled { - @include bpk-checkbox--disabled; + @include forms.bpk-checkbox--disabled; &--white { - color: $bpk-text-disabled-on-dark-day; + color: tokens.$bpk-text-disabled-on-dark-day; } } &--invalid { - @include bpk-checkbox--invalid; + @include forms.bpk-checkbox--invalid; } &__input { - @include bpk-checkbox__input; + @include forms.bpk-checkbox__input; &-indeterminate { &::before { position: absolute; - top: bpk-spacing-sm() + $bpk-one-pixel-rem; - left: bpk-spacing-sm() / 2; + top: tokens.bpk-spacing-sm() + tokens.$bpk-one-pixel-rem; + left: tokens.bpk-spacing-sm() * 0.5; content: ''; - width: bpk-spacing-xxl() / 4; - height: bpk-spacing-sm() - $bpk-one-pixel-rem; - border-radius: $bpk-border-size-lg; - background-color: $bpk-surface-default-day; + width: tokens.bpk-spacing-xxl() * 0.25; + height: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem; + border-radius: tokens.$bpk-border-size-lg; + background-color: tokens.$bpk-surface-default-day; } } @@ -66,11 +67,11 @@ } &-white { - background-color: $bpk-surface-default-day; + background-color: tokens.$bpk-surface-default-day; } } &__asterisk { - color: $bpk-status-danger-spot-day; + color: tokens.$bpk-status-danger-spot-day; } } diff --git a/packages/bpk-component-chip/src/BpkSelectableChip.module.css b/packages/bpk-component-chip/src/BpkSelectableChip.module.css deleted file mode 100644 index e505ac5b4b..0000000000 --- a/packages/bpk-component-chip/src/BpkSelectableChip.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir='rtl'] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-.5rem}html[dir='rtl'] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir='rtl'] .bpk-chip__trailing-accessory-view{margin-left:-.5rem}.bpk-chip--on-dark{background-color:transparent;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, #161616);background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, #fff);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#545860}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:transparent;color:#161616;box-shadow:0 0 0 1px #c2c9cd inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, #fff);background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, #05203c);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,0.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff1f2}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff1f2}.bpk-chip--on-image:active:not(:disabled){background-color:#eff1f2}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, #fff);background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, #05203c)}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, #05203c)}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, #05203c)}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, #05203c)}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,0.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}.bpk-chip--disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2);cursor:not-allowed} diff --git a/packages/bpk-component-chip/src/BpkSelectableChip.module.scss b/packages/bpk-component-chip/src/BpkSelectableChip.module.scss index ca966f1394..e3be2d244f 100644 --- a/packages/bpk-component-chip/src/BpkSelectableChip.module.scss +++ b/packages/bpk-component-chip/src/BpkSelectableChip.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/chips'; .bpk-chip { - @include bpk-chip; + @include chips.bpk-chip; } diff --git a/packages/bpk-component-close-button/src/BpkCloseButton.module.css b/packages/bpk-component-close-button/src/BpkCloseButton.module.css deleted file mode 100644 index 950f2d7d07..0000000000 --- a/packages/bpk-component-close-button/src/BpkCloseButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-.125rem;margin-left:-.125rem;padding:0;border:0;background-color:transparent;color:#545860;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc((-2.75rem / 2) + 50%);left:calc((-2.75rem / 2) + 50%);content:'';width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button:active{color:#161616}.bpk-close-button__icon{vertical-align:-.125rem;fill:currentcolor} diff --git a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss index df093f348a..15d387ae40 100644 --- a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss +++ b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss @@ -16,37 +16,38 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; -$button-padding: bpk-spacing-sm() / 2; +$button-padding: tokens.bpk-spacing-sm() * 0.5; .bpk-close-button { - width: bpk-spacing-lg(); - height: bpk-spacing-lg(); + width: tokens.bpk-spacing-lg(); + height: tokens.bpk-spacing-lg(); // The margin here is used to ensure that the icon is aligned to // the leading or trailing edge of its parent container - margin-right: -#{$button-padding}; - margin-left: -#{$button-padding}; + margin-right: -1 * $button-padding; + margin-left: -1 * $button-padding; padding: 0; border: 0; background-color: transparent; - color: $bpk-text-secondary-day; + color: tokens.$bpk-text-secondary-day; cursor: pointer; appearance: none; - @include bpk-touch-tappable; + @include utils.bpk-touch-tappable; - @include bpk-hover { - color: $bpk-text-primary-day; + @include utils.bpk-hover { + color: tokens.$bpk-text-primary-day; } &:active { - color: $bpk-text-primary-day; + color: tokens.$bpk-text-primary-day; } &__icon { - vertical-align: -#{$button-padding}; + vertical-align: -1 * $button-padding; fill: currentcolor; } } diff --git a/packages/bpk-component-code/src/BpkCode.module.css b/packages/bpk-component-code/src/BpkCode.module.css deleted file mode 100644 index daa35ac5ff..0000000000 --- a/packages/bpk-component-code/src/BpkCode.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-code{display:inline;padding:0 0.25rem;background-color:#e0e3e5;color:#161616;text-align:left;white-space:nowrap;vertical-align:bottom;border-radius:.25rem}html[dir='rtl'] .bpk-code{direction:ltr}.bpk-code--alternate{background-color:#eff1f2;text-shadow:none} diff --git a/packages/bpk-component-code/src/BpkCode.module.scss b/packages/bpk-component-code/src/BpkCode.module.scss index 1895e5eced..c6c19f9c4c 100644 --- a/packages/bpk-component-code/src/BpkCode.module.scss +++ b/packages/bpk-component-code/src/BpkCode.module.scss @@ -16,12 +16,12 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/typography'; .bpk-code { - @include bpk-code; + @include typography.bpk-code; &--alternate { - @include bpk-code--alternate; + @include typography.bpk-code--alternate; } } diff --git a/packages/bpk-component-code/src/BpkCodeBlock.module.css b/packages/bpk-component-code/src/BpkCodeBlock.module.css deleted file mode 100644 index ef73f40259..0000000000 --- a/packages/bpk-component-code/src/BpkCodeBlock.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-code--block{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-code--block::-webkit-scrollbar{display:none}.bpk-code__pre{margin:0 0 1rem;padding:1.5rem;background-color:#e0e3e5;border-radius:.25rem}.bpk-code__pre--alternate{background-color:transparent;box-shadow:0 0 0 1px #c2c9cd inset} diff --git a/packages/bpk-component-code/src/BpkCodeBlock.module.scss b/packages/bpk-component-code/src/BpkCodeBlock.module.scss index bea2b78501..9b52dd619b 100644 --- a/packages/bpk-component-code/src/BpkCodeBlock.module.scss +++ b/packages/bpk-component-code/src/BpkCodeBlock.module.scss @@ -16,18 +16,18 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/typography'; .bpk-code { &--block { - @include bpk-code--block; + @include typography.bpk-code--block; } &__pre { - @include bpk-code__pre; + @include typography.bpk-code__pre; &--alternate { - @include bpk-code__pre--alternate; + @include typography.bpk-code__pre--alternate; } } } diff --git a/packages/bpk-component-content-cards/src/BpkContentCard.module.css b/packages/bpk-component-content-cards/src/BpkContentCard.module.css deleted file mode 100644 index 59b25adf48..0000000000 --- a/packages/bpk-component-content-cards/src/BpkContentCard.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-card--link{color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media (max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media (max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media (max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media (max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media (max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:0.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#545860;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover} diff --git a/packages/bpk-component-content-cards/src/BpkContentCard.module.scss b/packages/bpk-component-content-cards/src/BpkContentCard.module.scss index f2b2010617..17e0edeee6 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCard.module.scss +++ b/packages/bpk-component-content-cards/src/BpkContentCard.module.scss @@ -16,7 +16,9 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/breakpoints'; +@use '../../unstable__bpk-mixins/typography'; .bpk-content-card { &--link { @@ -28,60 +30,62 @@ &--horizontal { display: grid; - column-gap: bpk-spacing-xxl(); - grid-template-columns: minmax(min(10%, 50%), $bpk-one-pixel-rem * 620) 40%; + column-gap: tokens.bpk-spacing-xxl(); + grid-template-columns: + minmax(min(10%, 50%), tokens.$bpk-one-pixel-rem * 620) + 40%; align-items: center; - @include bpk-breakpoint-mobile { + @include breakpoints.bpk-breakpoint-mobile { grid-template-columns: 1fr; } } &--horizontal &--image-container { width: 100%; - height: $bpk-one-pixel-rem * 420; + height: tokens.$bpk-one-pixel-rem * 420; - @include bpk-breakpoint-mobile { - max-height: $bpk-one-pixel-rem * 180; - margin-bottom: bpk-spacing-base(); + @include breakpoints.bpk-breakpoint-mobile { + max-height: tokens.$bpk-one-pixel-rem * 180; + margin-bottom: tokens.bpk-spacing-base(); } - @include bpk-breakpoint-tablet { + @include breakpoints.bpk-breakpoint-tablet { height: 100%; } } &--vertical &--image { - height: $bpk-one-pixel-rem * 460; - margin-bottom: bpk-spacing-base(); + height: tokens.$bpk-one-pixel-rem * 460; + margin-bottom: tokens.bpk-spacing-base(); - @include bpk-breakpoint-small-tablet { + @include breakpoints.bpk-breakpoint-small-tablet { width: 100%; height: auto; - max-height: $bpk-one-pixel-rem * 260; + max-height: tokens.$bpk-one-pixel-rem * 260; } - @include bpk-breakpoint-mobile { - max-height: $bpk-one-pixel-rem * 180; + @include breakpoints.bpk-breakpoint-mobile { + max-height: tokens.$bpk-one-pixel-rem * 180; } } &--headline { - margin-bottom: bpk-spacing-sm(); + margin-bottom: tokens.bpk-spacing-sm(); - @include bpk-heading-4; + @include typography.bpk-heading-4; } &--description { - color: $bpk-text-secondary-day; + color: tokens.$bpk-text-secondary-day; - @include bpk-body-default; + @include typography.bpk-body-default; } &--image { width: 100%; height: 100%; - border-radius: $bpk-border-radius-md; + border-radius: tokens.$bpk-border-radius-md; object-fit: cover; } } diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.module.css b/packages/bpk-component-content-cards/src/BpkContentCards.module.css deleted file mode 100644 index d965ae727f..0000000000 --- a/packages/bpk-component-content-cards/src/BpkContentCards.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-cards--header-text{margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media (max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}} diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss index f1fc2396ea..26f55c1948 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss +++ b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss @@ -19,16 +19,18 @@ /* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-max-compound-selectors */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/breakpoints'; +@use '../../unstable__bpk-mixins/typography'; .bpk-content-cards { &--header-text { - margin-bottom: bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); - @include bpk-heading-2; + @include typography.bpk-heading-2; - @include bpk-breakpoint-mobile { - @include bpk-heading-3; + @include breakpoints.bpk-breakpoint-mobile { + @include typography.bpk-heading-3; } } @@ -36,15 +38,15 @@ display: grid; grid-template-columns: repeat( auto-fit, - minmax($bpk-one-pixel-rem * 50, 1fr) + minmax(tokens.$bpk-one-pixel-rem * 50, 1fr) ); grid-auto-flow: column; - gap: bpk-spacing-lg(); + gap: tokens.bpk-spacing-lg(); - @include bpk-breakpoint-small-tablet { + @include breakpoints.bpk-breakpoint-small-tablet { grid-template-columns: 1fr; grid-auto-flow: row; - gap: bpk-spacing-lg(); + gap: tokens.bpk-spacing-lg(); } } } diff --git a/packages/bpk-component-datatable/src/BpkDataTable.module.css b/packages/bpk-component-datatable/src/BpkDataTable.module.css deleted file mode 100644 index 21ef0e9a0d..0000000000 --- a/packages/bpk-component-datatable/src/BpkDataTable.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-data-table{width:100%}.bpk-data-table__header-row{overflow:hidden}.bpk-data-table__row{display:flex;flex-direction:row;align-items:center;border:1px solid #c2c9cd;border-bottom:none;outline-offset:-.25rem;color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-data-table__row:last-child:not(.bpk-data-table__header-row){border-bottom:1px solid #c2c9cd}.bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{background-color:#eff1f2;cursor:pointer;box-shadow:6px 0 0 0 #0062e3 inset}html[dir='rtl'] .bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{box-shadow:-6px 0 0 0 #0062e3 inset}.bpk-data-table__row--selected{background-color:#fff7cf;box-shadow:6px 0 0 0 #0062e3 inset}html[dir='rtl'] .bpk-data-table__row--selected{box-shadow:-6px 0 0 0 #0062e3 inset}.bpk-data-table__cell{margin:1rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} diff --git a/packages/bpk-component-datatable/src/BpkDataTable.module.scss b/packages/bpk-component-datatable/src/BpkDataTable.module.scss index 3021f22cba..b33988657c 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTable.module.scss @@ -16,22 +16,25 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; -$bpk-border-size-datatable: $bpk-border-size-xl * 2; +$bpk-border-size-datatable: tokens.$bpk-border-size-xl * 2; @mixin bpk-datatable-border-left() { - @include _bpk-border-left( + @include borders.bpk-border-left( $bpk-border-size-datatable, - $bpk-core-accent-day, + tokens.$bpk-core-accent-day, inset ); } @mixin bpk-datatable-border-right() { - @include _bpk-border-right( + @include borders.bpk-border-right( $bpk-border-size-datatable, - $bpk-core-accent-day, + tokens.$bpk-core-accent-day, inset ); } @@ -47,41 +50,41 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2; display: flex; flex-direction: row; align-items: center; - border: $bpk-border-size-sm solid $bpk-line-day; + border: tokens.$bpk-border-size-sm solid tokens.$bpk-line-day; border-bottom: none; - outline-offset: -(4 * $bpk-one-pixel-rem); - color: $bpk-text-primary-day; + outline-offset: -1 * (4 * tokens.$bpk-one-pixel-rem); + color: tokens.$bpk-text-primary-day; - @include bpk-footnote; + @include typography.bpk-footnote; &:last-child:not(.bpk-data-table__header-row) { - border-bottom: $bpk-border-size-sm solid $bpk-line-day; + border-bottom: tokens.$bpk-border-size-sm solid tokens.$bpk-line-day; } &--clickable:not(.bpk-data-table__header-row):hover { - background-color: $bpk-canvas-contrast-day; + background-color: tokens.$bpk-canvas-contrast-day; cursor: pointer; @include bpk-datatable-border-left; - @include bpk-rtl { + @include utils.bpk-rtl { @include bpk-datatable-border-right; } } &--selected { - background-color: $bpk-status-warning-fill-day; + background-color: tokens.$bpk-status-warning-fill-day; @include bpk-datatable-border-left; - @include bpk-rtl { + @include utils.bpk-rtl { @include bpk-datatable-border-right; } } } &__cell { - margin: bpk-spacing-base(); + margin: tokens.bpk-spacing-base(); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.css b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.css deleted file mode 100644 index 83f11098d1..0000000000 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-data-table-column__header{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-0.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-data-table-column__header:hover{cursor:pointer}.bpk-data-table-column__sort-icons{margin:0 0 0 .75rem}html[dir='rtl'] .bpk-data-table-column__sort-icons{margin:0 .75rem 0 0}.bpk-data-table-column__sort-icon{display:block;fill:#c2c9cd}.bpk-data-table-column__sort-icon:hover{fill:#c2c9cd}.bpk-data-table-column__sort-icon--selected,.bpk-data-table-column__sort-icon--selected:hover{fill:#0062e3}.bpk-data-table-column__sort-icon--up{margin-bottom:-0.25rem} diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss index 457bec664f..cd0dbf154e 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss @@ -16,19 +16,21 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; -$bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md(); +$bpk-margin-size-sort-icons: tokens.bpk-spacing-sm() + tokens.bpk-spacing-md(); .bpk-data-table-column__header { display: flex; height: 100%; - margin: bpk-spacing-base(); + margin: tokens.bpk-spacing-base(); flex-direction: row; align-items: center; - outline-offset: -(bpk-spacing-sm()); + outline-offset: -1 * (tokens.bpk-spacing-sm()); - @include bpk-label-2; + @include typography.bpk-label-2; &:hover { cursor: pointer; @@ -38,27 +40,27 @@ $bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md(); .bpk-data-table-column__sort-icons { margin: 0 0 0 $bpk-margin-size-sort-icons; - @include bpk-rtl { + @include utils.bpk-rtl { margin: 0 $bpk-margin-size-sort-icons 0 0; } } .bpk-data-table-column__sort-icon { display: block; - fill: $bpk-line-day; + fill: tokens.$bpk-line-day; &:hover { - fill: $bpk-line-day; + fill: tokens.$bpk-line-day; } &--selected { &, &:hover { - fill: $bpk-core-accent-day; + fill: tokens.$bpk-core-accent-day; } } } .bpk-data-table-column__sort-icon--up { - margin-bottom: -(bpk-spacing-sm()); + margin-bottom: -1 * (tokens.bpk-spacing-sm()); } diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.module.css b/packages/bpk-component-datepicker/src/BpkDatepicker.module.css deleted file mode 100644 index dd9b1e037d..0000000000 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%} diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss b/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss index 6b79449bc7..ae06daee06 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss +++ b/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss @@ -16,8 +16,6 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; - .bpk-datepicker { &__calendar { margin: 0 auto; diff --git a/packages/bpk-component-description-list/src/BpkDescriptionList.module.css b/packages/bpk-component-description-list/src/BpkDescriptionList.module.css deleted file mode 100644 index e8eac0caa5..0000000000 --- a/packages/bpk-component-description-list/src/BpkDescriptionList.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-description-list{margin:0}.bpk-description-list__term{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-description-list__details{margin:0;margin-left:1.5rem}html[dir='rtl'] .bpk-description-list__details{margin-right:1.5rem;margin-left:0} diff --git a/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss b/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss index cba49ae7a1..b70656d2ea 100644 --- a/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss +++ b/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss @@ -16,21 +16,23 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; .bpk-description-list { margin: 0; &__term { - @include bpk-label-1; + @include typography.bpk-label-1; } &__details { margin: 0; - margin-left: bpk-spacing-lg(); + margin-left: tokens.bpk-spacing-lg(); - @include bpk-rtl { - margin-right: bpk-spacing-lg(); + @include utils.bpk-rtl { + margin-right: tokens.bpk-spacing-lg(); margin-left: 0; } } diff --git a/packages/bpk-component-dialog/src/BpkDialog.module.css b/packages/bpk-component-dialog/src/BpkDialog.module.css deleted file mode 100644 index d339ccbc37..0000000000 --- a/packages/bpk-component-dialog/src/BpkDialog.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-dialog__container{display:block}}.bpk-dialog__close-button{float:right;margin:0 0 1rem 1rem}html[dir='rtl'] .bpk-dialog__close-button{float:left;margin:0 1rem 1rem 0}.bpk-dialog--with-icon{margin-top:2rem}.bpk-dialog__icon{position:absolute;top:0;left:50%;display:flex;width:3.5rem;height:3.5rem;margin-top:-1.75rem;margin-left:-1.75rem;justify-content:center;align-items:center;border:4px #fff solid;border-radius:50%}.bpk-dialog__icon--primary{background-color:#0062e3}.bpk-dialog__icon--warning{background-color:#f55d42}.bpk-dialog__icon--destructive{background-color:#e70866}.bpk-dialog__icon>svg{fill:#fff} diff --git a/packages/bpk-component-dialog/src/BpkDialog.module.scss b/packages/bpk-component-dialog/src/BpkDialog.module.scss index 565e395d5f..96fc33688f 100644 --- a/packages/bpk-component-dialog/src/BpkDialog.module.scss +++ b/packages/bpk-component-dialog/src/BpkDialog.module.scss @@ -16,12 +16,13 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; .bpk-dialog { &__container { display: flex; - padding: bpk-spacing-lg(); + padding: tokens.bpk-spacing-lg(); // IE11 and below hack for buggy flexbox support @media screen\0 { @@ -31,20 +32,20 @@ &__close-button { float: right; - margin: 0 0 bpk-spacing-base() bpk-spacing-base(); + margin: 0 0 tokens.bpk-spacing-base() tokens.bpk-spacing-base(); - @include bpk-rtl { + @include utils.bpk-rtl { float: left; - margin: 0 bpk-spacing-base() bpk-spacing-base() 0; + margin: 0 tokens.bpk-spacing-base() tokens.bpk-spacing-base() 0; } } &--with-icon { - margin-top: bpk-spacing-xl(); + margin-top: tokens.bpk-spacing-xl(); } &__icon { - $size: bpk-spacing-md() * 7; + $size: tokens.bpk-spacing-md() * 7; position: absolute; top: 0; @@ -52,27 +53,28 @@ display: flex; width: $size; height: $size; - margin-top: -$size / 2; - margin-left: -$size / 2; + margin-top: -1 * $size * 0.5; + margin-left: -1 * $size * 0.5; justify-content: center; align-items: center; - border: ($bpk-border-size-lg * 2) $bpk-surface-default-day solid; + border: (tokens.$bpk-border-size-lg * 2) tokens.$bpk-surface-default-day + solid; border-radius: 50%; &--primary { - background-color: $bpk-core-accent-day; + background-color: tokens.$bpk-core-accent-day; } &--warning { - background-color: $bpk-status-warning-spot-day; + background-color: tokens.$bpk-status-warning-spot-day; } &--destructive { - background-color: $bpk-status-danger-spot-day; + background-color: tokens.$bpk-status-danger-spot-day; } > svg { - fill: $bpk-text-primary-inverse-day; + fill: tokens.$bpk-text-primary-inverse-day; } } } diff --git a/packages/bpk-component-dialog/src/BpkDialogInner.module.css b/packages/bpk-component-dialog/src/BpkDialogInner.module.css deleted file mode 100644 index 9a93afdee2..0000000000 --- a/packages/bpk-component-dialog/src/BpkDialogInner.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-inner{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.5rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#05203c} diff --git a/packages/bpk-component-dialog/src/BpkDialogInner.module.scss b/packages/bpk-component-dialog/src/BpkDialogInner.module.scss index d23a046f2e..7d35135973 100644 --- a/packages/bpk-component-dialog/src/BpkDialogInner.module.scss +++ b/packages/bpk-component-dialog/src/BpkDialogInner.module.scss @@ -16,48 +16,50 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/radii'; +@use '../../unstable__bpk-mixins/shadows'; .bpk-dialog-inner { - z-index: $bpk-zindex-modal; + z-index: tokens.$bpk-zindex-modal; width: 100%; - max-width: $bpk-modal-max-width; + max-width: tokens.$bpk-modal-max-width; margin: auto; transform: scale(1); transition: - opacity $bpk-duration-sm ease-in-out, - transform $bpk-duration-sm ease-in-out; + opacity tokens.$bpk-duration-sm ease-in-out, + transform tokens.$bpk-duration-sm ease-in-out; outline: 0; - background-color: $bpk-modal-background-color; - opacity: $bpk-modal-opacity; + background-color: tokens.$bpk-modal-background-color; + opacity: tokens.$bpk-modal-opacity; // FIX: Prevents ugly flickering when tapping inside the dialog in Mobile Safari -webkit-tap-highlight-color: transparent; - @include bpk-box-shadow-xl; - @include bpk-border-radius-sm; + @include shadows.bpk-box-shadow-xl; + @include radii.bpk-border-radius-sm; &--appear { transform: scale(0.9); - opacity: $bpk-modal-initial-opacity; + opacity: tokens.$bpk-modal-initial-opacity; } &--appear-active { transform: scale(1); - opacity: $bpk-modal-opacity; + opacity: tokens.$bpk-modal-opacity; } &__content { - padding: $bpk-modal-content-padding; + padding: tokens.$bpk-modal-content-padding; flex: 1; overflow-y: auto; } &__flare { - height: bpk-spacing-lg() * 10; + height: tokens.bpk-spacing-lg() * 10; // We inherit radius from the outer modal so they match and align correctly to the container. border-radius: inherit; - background-color: $bpk-surface-contrast-day; + background-color: tokens.$bpk-surface-contrast-day; } } diff --git a/packages/bpk-component-drawer/src/BpkDrawer.module.css b/packages/bpk-component-drawer/src/BpkDrawer.module.css deleted file mode 100644 index 861d3f239b..0000000000 --- a/packages/bpk-component-drawer/src/BpkDrawer.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-drawer__container{position:fixed} diff --git a/packages/bpk-component-drawer/src/BpkDrawer.module.scss b/packages/bpk-component-drawer/src/BpkDrawer.module.scss index be9414877a..13e9f8a169 100644 --- a/packages/bpk-component-drawer/src/BpkDrawer.module.scss +++ b/packages/bpk-component-drawer/src/BpkDrawer.module.scss @@ -16,8 +16,6 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; - .bpk-drawer__container { position: fixed; } diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.module.css b/packages/bpk-component-drawer/src/BpkDrawerContent.module.css deleted file mode 100644 index bf6e661ff7..0000000000 --- a/packages/bpk-component-drawer/src/BpkDrawerContent.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}html[dir='rtl'] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media (max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir='rtl'] .bpk-drawer--entering,html[dir='rtl'] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir='rtl'] .bpk-drawer--exiting,html[dir='rtl'] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir='rtl'] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;padding:1rem;flex:1 1 100%;overflow-y:auto} diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss b/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss index 295539e86f..6d959c93da 100644 --- a/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss +++ b/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss @@ -16,32 +16,37 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/breakpoints'; +@use '../../unstable__bpk-mixins/shadows'; +@use '../../unstable__bpk-mixins/typography'; +@use '../../unstable__bpk-mixins/utils'; .bpk-drawer { position: fixed; right: 0; display: flex; - z-index: $bpk-zindex-drawer; + z-index: tokens.$bpk-zindex-drawer; width: 90%; - max-width: 50 * bpk-spacing-md(); + max-width: 50 * tokens.bpk-spacing-md(); height: 100%; flex-direction: column; transform: translate(100%); - transition: transform $bpk-duration-sm ease; + transition: transform tokens.$bpk-duration-sm ease; outline: 0; - background: $bpk-surface-default-day; + background: tokens.$bpk-surface-default-day; overflow-y: scroll; - @include bpk-box-shadow-xl; + @include shadows.bpk-box-shadow-xl; - @include bpk-rtl { + @include utils.bpk-rtl { right: auto; left: 0; transform: translate(-100%); } - @include bpk-breakpoint-mobile { + @include breakpoints.bpk-breakpoint-mobile { width: 100%; max-width: 100%; } @@ -50,55 +55,55 @@ &--entered { transform: translate(0); - @include bpk-rtl { + @include utils.bpk-rtl { transform: translate(0); } } &--exiting { - transition: transform $bpk-duration-xs ease; + transition: transform tokens.$bpk-duration-xs ease; } &--exiting, &--exited { transform: translate(100%); - @include bpk-rtl { + @include utils.bpk-rtl { transform: translate(-100%); } } &__header { display: flex; - min-height: #{2 * bpk-spacing-base() + bpk-spacing-base()}; // keep height the same if visually hidden title - padding: bpk-spacing-base(); + min-height: #{2 * tokens.bpk-spacing-base() + tokens.bpk-spacing-base()}; // keep height the same if visually hidden title + padding: tokens.bpk-spacing-base(); justify-content: space-between; align-items: center; flex: 0 0; - @include bpk-border-bottom-sm($bpk-line-day); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day); } &__heading { - @include bpk-text; - @include bpk-label-1; + @include typography.bpk-text; + @include typography.bpk-label-1; &--visually-hidden { - @include bpk-visually-hidden; + @include utils.bpk-visually-hidden; } } &__close-button { float: right; - @include bpk-rtl { + @include utils.bpk-rtl { float: left; } } &__content { height: 100%; - padding: bpk-spacing-base(); + padding: tokens.bpk-spacing-base(); flex: 1 1 100%; overflow-y: auto; } diff --git a/packages/bpk-component-fieldset/src/BpkFieldset.module.css b/packages/bpk-component-fieldset/src/BpkFieldset.module.css deleted file mode 100644 index 3f59a68ba9..0000000000 --- a/packages/bpk-component-fieldset/src/BpkFieldset.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-fieldset{margin:0;padding:0;border:0}.bpk-fieldset__description{display:block;margin-top:0.5rem;color:#545860;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-fieldset__label{margin-bottom:0.25rem} diff --git a/packages/bpk-component-fieldset/src/BpkFieldset.module.scss b/packages/bpk-component-fieldset/src/BpkFieldset.module.scss index df263374a7..cbad8afdc9 100644 --- a/packages/bpk-component-fieldset/src/BpkFieldset.module.scss +++ b/packages/bpk-component-fieldset/src/BpkFieldset.module.scss @@ -16,7 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/typography'; .bpk-fieldset { margin: 0; @@ -25,13 +26,13 @@ &__description { display: block; - margin-top: bpk-spacing-md(); - color: $bpk-text-secondary-day; + margin-top: tokens.bpk-spacing-md(); + color: tokens.$bpk-text-secondary-day; - @include bpk-caption; + @include typography.bpk-caption; } &__label { - margin-bottom: bpk-spacing-sm(); + margin-bottom: tokens.bpk-spacing-sm(); } } diff --git a/packages/bpk-component-flare/src/bpk-content-bubble.module.css b/packages/bpk-component-flare/src/bpk-content-bubble.module.css deleted file mode 100644 index b0ede631ed..0000000000 --- a/packages/bpk-component-flare/src/bpk-content-bubble.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-bubble__pointer{width:100%;align-items:flex-end;align-self:flex-end}.bpk-content-bubble__wrapper{width:100%;height:auto;margin:0 auto;background-repeat:no-repeat;background-position:50% 60%;background-size:cover}.bpk-content-bubble__wrapper--rounded{border-radius:1.3125rem}.bpk-content-bubble__wrapper--rounded--with-pointer{border-radius:1.3125rem 1.3125rem 0 0}.bpk-content-bubble__container{display:flex;height:100%;flex-direction:column}.bpk-content-bubble__content-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto} diff --git a/packages/bpk-component-flare/src/bpk-content-bubble.module.scss b/packages/bpk-component-flare/src/bpk-content-bubble.module.scss index 9bd4aec98a..194637a104 100755 --- a/packages/bpk-component-flare/src/bpk-content-bubble.module.scss +++ b/packages/bpk-component-flare/src/bpk-content-bubble.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-content-bubble { &__pointer { @@ -34,10 +34,11 @@ background-size: cover; &--rounded { - border-radius: $bpk-flare-corner-radius; + border-radius: tokens.$bpk-flare-corner-radius; &--with-pointer { - border-radius: $bpk-flare-corner-radius $bpk-flare-corner-radius 0 0; + border-radius: tokens.$bpk-flare-corner-radius + tokens.$bpk-flare-corner-radius 0 0; } } } diff --git a/packages/bpk-component-flare/src/bpk-flare-bar.module.css b/packages/bpk-component-flare/src/bpk-flare-bar.module.css deleted file mode 100644 index 8b864302c9..0000000000 --- a/packages/bpk-component-flare/src/bpk-flare-bar.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media (max-width: 32rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:1.5rem;margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir='rtl'] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media (max-width: 32rem){.bpk-flare-bar__curve{height:1rem}}.bpk-flare-bar__rounded-corner{position:absolute;bottom:calc(1.5rem - 1px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}.bpk-flare-bar__rounded-corner--trailing{right:0;left:auto;transform:rotate(-90deg)} diff --git a/packages/bpk-component-flare/src/bpk-flare-bar.module.scss b/packages/bpk-component-flare/src/bpk-flare-bar.module.scss index acffe58bf6..c4364a9c0d 100644 --- a/packages/bpk-component-flare/src/bpk-flare-bar.module.scss +++ b/packages/bpk-component-flare/src/bpk-flare-bar.module.scss @@ -16,7 +16,9 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/breakpoints'; +@use '../../unstable__bpk-mixins/utils'; .bpk-flare-bar { &__container { @@ -27,11 +29,11 @@ // By using `display: flex` we ensure that this container is the nearest block container display: flex; min-width: 10rem; - height: $bpk-flare-height-desktop; + height: tokens.$bpk-flare-height-desktop; overflow: hidden; - @include bpk-breakpoint-mobile { - height: $bpk-flare-height-mobile; + @include breakpoints.bpk-breakpoint-mobile { + height: tokens.$bpk-flare-height-mobile; } } @@ -40,29 +42,29 @@ // stylelint-disable-next-line unit-disallowed-list bottom: -1px; width: 700rem; // required for correct behaviour in IE - height: $bpk-flare-height-desktop; + height: tokens.$bpk-flare-height-desktop; margin-left: 50%; transform: translateX(-50%); - fill: $bpk-surface-default-day; + fill: tokens.$bpk-surface-default-day; - @include bpk-rtl { + @include utils.bpk-rtl { margin-right: 50%; transform: translateX(50%); } - @include bpk-breakpoint-mobile { - height: $bpk-flare-height-mobile; + @include breakpoints.bpk-breakpoint-mobile { + height: tokens.$bpk-flare-height-mobile; } } &__rounded-corner { position: absolute; // stylelint-disable-next-line unit-disallowed-list - bottom: calc(#{bpk-spacing-lg()} - 1px); + bottom: calc(#{tokens.bpk-spacing-lg()} - 1px); left: 0; - width: $bpk-flare-corner-radius; - height: $bpk-flare-corner-radius; - fill: $bpk-surface-default-day; + width: tokens.$bpk-flare-corner-radius; + height: tokens.$bpk-flare-corner-radius; + fill: tokens.$bpk-surface-default-day; &--trailing { right: 0; diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.css b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.css deleted file mode 100644 index 2bf36c4f3a..0000000000 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto;word-break:keep-all}.bpk-floating-notification__icon{margin-right:0.5rem;margin-left:0.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:0.5rem} diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss index 07920dd8f9..0a7adc8934 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss @@ -16,28 +16,29 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/breakpoints'; .bpk-floating-notification { position: absolute; right: 0; - bottom: bpk-spacing-xl(); + bottom: tokens.bpk-spacing-xl(); left: 0; display: flex; - max-width: bpk-spacing-xxl() * 10; + max-width: tokens.bpk-spacing-xxl() * 10; margin: auto; - padding: bpk-spacing-lg(); + padding: tokens.bpk-spacing-lg(); transition: - opacity $bpk-duration-base ease-in-out, - transform $bpk-duration-base ease-in-out; - border-radius: $bpk-border-radius-md; - background: $bpk-core-primary-day; - color: $bpk-text-on-dark-day; - box-shadow: $bpk-box-shadow-xl, $bpk-box-shadow-lg; + opacity tokens.$bpk-duration-base ease-in-out, + transform tokens.$bpk-duration-base ease-in-out; + border-radius: tokens.$bpk-border-radius-md; + background: tokens.$bpk-core-primary-day; + color: tokens.$bpk-text-on-dark-day; + box-shadow: tokens.$bpk-box-shadow-xl, tokens.$bpk-box-shadow-lg; - @include bpk-breakpoint-mobile { + @include breakpoints.bpk-breakpoint-mobile { max-width: 100%; - padding: bpk-spacing-base(); + padding: tokens.bpk-spacing-base(); } &--leave { @@ -45,7 +46,7 @@ opacity: 1; &-active { - transform: translateY(bpk-spacing-xl()); + transform: translateY(tokens.bpk-spacing-xl()); opacity: 0; } @@ -55,7 +56,7 @@ } &--appear { - transform: translateY(bpk-spacing-xl()); + transform: translateY(tokens.bpk-spacing-xl()); opacity: 0; &-active { @@ -67,21 +68,21 @@ &__button { min-height: 0; padding: 0; - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; margin-inline-start: auto; word-break: keep-all; } &__icon { - margin-right: bpk-spacing-md(); - margin-left: bpk-spacing-sm(); + margin-right: tokens.bpk-spacing-md(); + margin-left: tokens.bpk-spacing-sm(); flex-shrink: 0; - transform: translateY((bpk-spacing-sm())); + transform: translateY(tokens.bpk-spacing-sm()); text-align: bottom; - fill: $bpk-text-on-dark-day; + fill: tokens.$bpk-text-on-dark-day; } &__text { - margin-inline-end: bpk-spacing-md(); + margin-inline-end: tokens.bpk-spacing-md(); } } diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.module.css b/packages/bpk-component-form-validation/src/BpkFormValidation.module.css deleted file mode 100644 index 371501e85a..0000000000 --- a/packages/bpk-component-form-validation/src/BpkFormValidation.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-form-validation{position:relative;transform:translateY(-1rem);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:0;color:#e70866;color:var(--bpk-form-validation-text-color, #e70866)}.bpk-form-validation__container{margin-top:0.5rem;font-size:.75rem}.bpk-form-validation__icon{fill:#e70866;fill:var(--bpk-form-validation-icon-fill, #e70866);margin-left:0;margin-right:.25rem}html[dir='rtl'] .bpk-form-validation__icon{margin-left:.25rem;margin-right:0}.bpk-form-validation--appear{transform:translateY(0);opacity:1}.bpk-form-validation--is-checkbox{display:inline-block} diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss b/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss index 0896b62a46..8611bc7bb0 100644 --- a/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss +++ b/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss @@ -16,29 +16,32 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/forms'; +@use '../../unstable__bpk-mixins/margins'; +@use '../../unstable__bpk-mixins/utils'; .bpk-form-validation { - @include bpk-form-validation; + @include forms.bpk-form-validation; &__container { - @include bpk-form-validation__container; + @include forms.bpk-form-validation__container; } &__icon { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( fill, --bpk-form-validation-icon-fill, - $bpk-form-validation-color + tokens.$bpk-form-validation-color ); - @include bpk-margin-trailing(bpk-spacing-sm()); + @include margins.bpk-margin-trailing(tokens.bpk-spacing-sm()); } &--appear { - @include bpk-form-validation--appear; + @include forms.bpk-form-validation--appear; } &--is-checkbox { - @include bpk-form-validation--is-checkbox; + @include forms.bpk-form-validation--is-checkbox; } } diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css deleted file mode 100644 index 1dad7bc571..0000000000 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media (max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media (min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-right:4rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir='rtl'] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media (max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir='rtl'] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media (max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir='rtl'] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir='rtl'] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media (max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media (max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media (max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media (max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media (min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media (max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media (max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media (max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.5rem;font-weight:400}@media (max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media (max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media (max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media (min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media (max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media (max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media (max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:0.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media (max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media (max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:0.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media (max-width: 48rem){.bpk-graphic-promo__cta{display:none}} diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss index 4398c0ab8a..08e3aad2bd 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss @@ -16,7 +16,11 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/breakpoints'; +@use '../../unstable__bpk-mixins/cards'; +@use '../../unstable__bpk-mixins/margins'; +@use '../../unstable__bpk-mixins/typography'; @mixin aspect-ratio($ratio) { padding-top: $ratio; @@ -68,20 +72,20 @@ } .bpk-card { - @include bpk-card; + @include cards.bpk-card; } .bpk-graphic-promo { max-width: 76.5rem; margin-right: auto; margin-left: auto; - background-color: $bpk-surface-contrast-day; + background-color: tokens.$bpk-surface-contrast-day; background-position: center; background-size: cover; - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; box-shadow: none; - @include bpk-breakpoint-small-tablet { + @include breakpoints.bpk-breakpoint-small-tablet { @include aspect-ratio(133%); } @@ -97,36 +101,36 @@ @include content-alignment; - @include bpk-breakpoint-above-tablet { + @include breakpoints.bpk-breakpoint-above-tablet { height: 28.75rem; - @include bpk-margin-leading(bpk-spacing-xxxl(), false); - @include bpk-margin-trailing(bpk-spacing-xxl(), false); + @include margins.bpk-margin-leading(tokens.bpk-spacing-xxxl(), false); + @include margins.bpk-margin-trailing(tokens.bpk-spacing-xxl(), false); /* adjusting for 1.5rem difference between margins */ &--center > * { - @include bpk-margin-trailing(bpk-spacing-lg()); + @include margins.bpk-margin-trailing(tokens.bpk-spacing-lg()); } } - @include bpk-breakpoint-tablet { + @include breakpoints.bpk-breakpoint-tablet { height: 22.5rem; - @include bpk-margin-leading(bpk-spacing-xxl(), false); - @include bpk-margin-trailing(bpk-spacing-xl(), false); + @include margins.bpk-margin-leading(tokens.bpk-spacing-xxl(), false); + @include margins.bpk-margin-trailing(tokens.bpk-spacing-xl(), false); /* adjusting for 1.5rem difference between margins */ &--center > * { - @include bpk-margin-trailing(bpk-spacing-md()); + @include margins.bpk-margin-trailing(tokens.bpk-spacing-md()); } } - @include bpk-breakpoint-small-tablet { - padding: bpk-spacing-xl(); + @include breakpoints.bpk-breakpoint-small-tablet { + padding: tokens.bpk-spacing-xl(); justify-content: space-between; @include reset-alignment; - @include bpk-margin-leading(0); + @include margins.bpk-margin-leading(0); @include fill-parent; &--inverted { @@ -134,72 +138,72 @@ } > * { - @include bpk-margin-leading(0); + @include margins.bpk-margin-leading(0); } } - @include bpk-breakpoint-small-mobile { - padding: bpk-spacing-lg(); + @include breakpoints.bpk-breakpoint-small-mobile { + padding: tokens.bpk-spacing-lg(); } } &__tagline { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); - @include bpk-heading-5; + @include typography.bpk-heading-5; - @include bpk-breakpoint-tablet { - @include bpk-label-1; + @include breakpoints.bpk-breakpoint-tablet { + @include typography.bpk-label-1; } - @include bpk-breakpoint-small-tablet { - @include bpk-subheading; + @include breakpoints.bpk-breakpoint-small-tablet { + @include typography.bpk-subheading; } - @include bpk-breakpoint-small-mobile { - @include bpk-label-1; + @include breakpoints.bpk-breakpoint-small-mobile { + @include typography.bpk-label-1; } } &__headline { - @include bpk-breakpoint-above-tablet { - @include bpk-hero-5; + @include breakpoints.bpk-breakpoint-above-tablet { + @include typography.bpk-hero-5; &:not(:last-child) { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); } } - @include bpk-breakpoint-tablet { - @include bpk-heading-1; + @include breakpoints.bpk-breakpoint-tablet { + @include typography.bpk-heading-1; &:not(:last-child) { - margin-bottom: bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-md(); } } - @include bpk-breakpoint-small-tablet { - margin-bottom: bpk-spacing-md(); + @include breakpoints.bpk-breakpoint-small-tablet { + margin-bottom: tokens.bpk-spacing-md(); } - @include bpk-breakpoint-mobile { - @include bpk-heading-2; + @include breakpoints.bpk-breakpoint-mobile { + @include typography.bpk-heading-2; } } &__subheading { - @include bpk-body-default; + @include typography.bpk-body-default; - @include bpk-breakpoint-tablet { - @include bpk-heading-5; + @include breakpoints.bpk-breakpoint-tablet { + @include typography.bpk-heading-5; } - @include bpk-breakpoint-small-tablet { - @include bpk-heading-3; + @include breakpoints.bpk-breakpoint-small-tablet { + @include typography.bpk-heading-3; } - @include bpk-breakpoint-mobile { - @include bpk-heading-5; + @include breakpoints.bpk-breakpoint-mobile { + @include typography.bpk-heading-5; } } @@ -210,15 +214,15 @@ @include text-alignment; - @include bpk-breakpoint-above-tablet { + @include breakpoints.bpk-breakpoint-above-tablet { width: 22.5rem; } - @include bpk-breakpoint-tablet { + @include breakpoints.bpk-breakpoint-tablet { width: 20rem; } - @include bpk-breakpoint-small-tablet { + @include breakpoints.bpk-breakpoint-small-tablet { width: initial; @include reset-alignment; @@ -227,29 +231,29 @@ &__sponsor-content { display: flex; - margin-bottom: bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); flex-direction: column; - @include bpk-breakpoint-small-tablet { + @include breakpoints.bpk-breakpoint-small-tablet { margin-bottom: initial; } } &__sponsor-label { - margin-bottom: bpk-spacing-sm(); + margin-bottom: tokens.bpk-spacing-sm(); - @include bpk-label-1; + @include typography.bpk-label-1; - @include bpk-breakpoint-small-tablet { - margin-bottom: bpk-spacing-md(); + @include breakpoints.bpk-breakpoint-small-tablet { + margin-bottom: tokens.bpk-spacing-md(); - @include bpk-heading-3; + @include typography.bpk-heading-3; } - @include bpk-breakpoint-small-mobile { - margin-bottom: bpk-spacing-sm(); + @include breakpoints.bpk-breakpoint-small-mobile { + margin-bottom: tokens.bpk-spacing-sm(); - @include bpk-label-1; + @include typography.bpk-label-1; } } @@ -261,9 +265,9 @@ } &__cta { - margin-top: bpk-spacing-xl(); + margin-top: tokens.bpk-spacing-xl(); - @include bpk-breakpoint-small-tablet { + @include breakpoints.bpk-breakpoint-small-tablet { display: none; } } diff --git a/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.css b/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.css deleted file mode 100644 index 0380854e9c..0000000000 --- a/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-vertical-grid--on{position:relative}.bpk-vertical-grid--on::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:9999;width:auto;height:auto;background:linear-gradient(to bottom, rgba(231,8,102,0.3) 0, transparent .0625rem) repeat left 0;background-size:0.25rem 0.25rem;pointer-events:none}.bpk-vertical-grid--on:active::after{display:none} diff --git a/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.scss b/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.scss index 4191f5f3e6..d1632d8541 100644 --- a/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.scss +++ b/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-vertical-grid { &--on { @@ -35,11 +35,11 @@ height: auto; background: linear-gradient( to bottom, - rgba($bpk-status-danger-spot-day, 0.3) 0, - transparent $bpk-one-pixel-rem + rgba(tokens.$bpk-status-danger-spot-day, 0.3) 0, + transparent tokens.$bpk-one-pixel-rem ) repeat left 0; - background-size: bpk-spacing-sm() bpk-spacing-sm(); + background-size: tokens.bpk-spacing-sm() tokens.bpk-spacing-sm(); pointer-events: none; } diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css deleted file mode 100644 index 960bb5dd47..0000000000 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-horizontal-nav--show-default-underline{box-shadow:0 1px 0 0 #c2c9cd }.bpk-horizontal-nav--show-light-underline{box-shadow:0 1px 0 0 #c2c9cd }.bpk-horizontal-nav__list{display:flex;margin:0;padding:0;align-items:stretch;list-style-type:none} diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss index fb91165317..d504f24b19 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss @@ -16,15 +16,16 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; .bpk-horizontal-nav { &--show-default-underline { - @include bpk-border-bottom-sm($bpk-line-day, ''); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day, ''); } &--show-light-underline { - @include bpk-border-bottom-sm($bpk-line-day, ''); + @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day, ''); } &__list { diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.css b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.css deleted file mode 100644 index 447b11891e..0000000000 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-horizontal-nav__item{display:inline-block;display:flex}.bpk-horizontal-nav__item--space-around{margin-right:auto;margin-left:auto}.bpk-horizontal-nav__link{display:inline-block;display:flex;padding:.875rem 1.5rem;border:0;border-radius:0;background:none;text-decoration:none;cursor:pointer;fill:currentcolor}.bpk-horizontal-nav__link--default{color:#545860;color:var(--bpk-horizontal-nav-link-color, #545860)}.bpk-no-touch-support .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e3e5 inset;color:#545860;color:var(--bpk-horizontal-nav-link-hover-color, #545860)}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e3e5 inset;color:#545860;color:var(--bpk-horizontal-nav-link-hover-color, #545860)}.bpk-horizontal-nav__link--default:active{box-shadow:0 -3px 0 0 #c2c9cd inset;color:#545860;color:var(--bpk-horizontal-nav-link-active-color, #545860)}.bpk-horizontal-nav__link--default-disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-horizontal-nav__link--default-disabled:active{color:rgba(0,0,0,0.2);box-shadow:unset}.bpk-horizontal-nav__link--default-selected{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0062e3) inset;color:#0062e3;color:var(--bpk-horizontal-nav-link-selected-color, #0062e3)}.bpk-no-touch-support .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0062e3) inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0062e3) inset}.bpk-horizontal-nav__link--default-selected:active{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0062e3) inset}.bpk-horizontal-nav__link--light{color:#fff}.bpk-no-touch-support .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light:active{box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-horizontal-nav__link--light-disabled:active{color:rgba(0,0,0,0.2);box-shadow:unset}.bpk-horizontal-nav__link--light-selected{color:#fff;box-shadow:0 -3px 0 0 #fff inset}.bpk-no-touch-support .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-selected:active{box-shadow:0 -3px 0 0 #fff inset} diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss index e7f65b7fd8..20d55cea6e 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss @@ -16,7 +16,9 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/borders'; +@use '../../unstable__bpk-mixins/utils'; .bpk-horizontal-nav { &__item { @@ -32,7 +34,8 @@ &__link { display: inline-block; display: flex; - padding: (bpk-spacing-base() - (2 * $bpk-one-pixel-rem)) bpk-spacing-lg(); + padding: (tokens.bpk-spacing-base() - (2 * tokens.$bpk-one-pixel-rem)) + tokens.bpk-spacing-lg(); border: 0; border-radius: 0; background: none; @@ -41,70 +44,78 @@ fill: currentcolor; &--default { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-horizontal-nav-link-color, - $bpk-text-secondary-day + tokens.$bpk-text-secondary-day ); - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-surface-highlight-day); - @include bpk-themeable-property( + @include utils.bpk-hover { + @include borders.bpk-border-bottom-xl( + tokens.$bpk-surface-highlight-day + ); + @include utils.bpk-themeable-property( color, --bpk-horizontal-nav-link-hover-color, - $bpk-text-secondary-day + tokens.$bpk-text-secondary-day ); } &:active { - @include bpk-border-bottom-xl($bpk-line-day); - @include bpk-themeable-property( + @include borders.bpk-border-bottom-xl(tokens.$bpk-line-day); + @include utils.bpk-themeable-property( color, --bpk-horizontal-nav-link-active-color, - $bpk-text-secondary-day + tokens.$bpk-text-secondary-day ); } &-disabled { - color: $bpk-text-disabled-day; + color: tokens.$bpk-text-disabled-day; cursor: not-allowed; &:active { - color: $bpk-text-disabled-day; + color: tokens.$bpk-text-disabled-day; box-shadow: unset; } } &-selected { - @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color); - @include bpk-border-bottom-xl( + @include borders.bpk-border-bottom-xl( + tokens.$bpk-horizontal-nav-bar-selected-color + ); + @include borders.bpk-border-bottom-xl( var( --bpk-horizontal-nav-bar-selected-color, - $bpk-horizontal-nav-bar-selected-color + tokens.$bpk-horizontal-nav-bar-selected-color ) ); - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-horizontal-nav-link-selected-color, - $bpk-text-link-day + tokens.$bpk-text-link-day ); - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color); - @include bpk-border-bottom-xl( + @include utils.bpk-hover { + @include borders.bpk-border-bottom-xl( + tokens.$bpk-horizontal-nav-bar-selected-color + ); + @include borders.bpk-border-bottom-xl( var( --bpk-horizontal-nav-bar-selected-color, - $bpk-horizontal-nav-bar-selected-color + tokens.$bpk-horizontal-nav-bar-selected-color ) ); } &:active { - @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color); - @include bpk-border-bottom-xl( + @include borders.bpk-border-bottom-xl( + tokens.$bpk-horizontal-nav-bar-selected-color + ); + @include borders.bpk-border-bottom-xl( var( --bpk-horizontal-nav-bar-selected-color, - $bpk-horizontal-nav-bar-selected-color + tokens.$bpk-horizontal-nav-bar-selected-color ) ); } @@ -112,37 +123,37 @@ } &--light { - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include utils.bpk-hover { + @include borders.bpk-border-bottom-xl(tokens.$bpk-text-on-dark-day); } &:active { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include borders.bpk-border-bottom-xl(tokens.$bpk-text-on-dark-day); } &-disabled { - color: $bpk-text-disabled-day; + color: tokens.$bpk-text-disabled-day; cursor: not-allowed; &:active { - color: $bpk-text-disabled-day; + color: tokens.$bpk-text-disabled-day; box-shadow: unset; } } &-selected { - color: $bpk-text-on-dark-day; + color: tokens.$bpk-text-on-dark-day; - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include borders.bpk-border-bottom-xl(tokens.$bpk-text-on-dark-day); - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include utils.bpk-hover { + @include borders.bpk-border-bottom-xl(tokens.$bpk-text-on-dark-day); } &:active { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include borders.bpk-border-bottom-xl(tokens.$bpk-text-on-dark-day); } } } diff --git a/packages/bpk-component-icon/src/BpkIcon.module.css b/packages/bpk-component-icon/src/BpkIcon.module.css deleted file mode 100644 index 54e7858491..0000000000 --- a/packages/bpk-component-icon/src/BpkIcon.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon--align-to-button{vertical-align:text-bottom}.bpk-icon--align-to-large-button{margin-top:0rem;vertical-align:top}html[dir='rtl'] .bpk-icon--rtl-support{transform:scaleX(-1)} diff --git a/packages/bpk-component-icon/src/BpkIcon.module.scss b/packages/bpk-component-icon/src/BpkIcon.module.scss index 31c2070717..5f2c8bfdd5 100644 --- a/packages/bpk-component-icon/src/BpkIcon.module.scss +++ b/packages/bpk-component-icon/src/BpkIcon.module.scss @@ -16,18 +16,18 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/icons'; .bpk-icon { &--align-to-button { - @include bpk-icon-sm--align-to-button; + @include icons.bpk-icon-sm--align-to-button; } &--align-to-large-button { - @include bpk-icon-lg--align-to-large-button; + @include icons.bpk-icon-lg--align-to-large-button; } &--rtl-support { - @include bpk-icon--rtl-support; + @include icons.bpk-icon--rtl-support; } } diff --git a/packages/bpk-component-icon/src/withDescription.module.css b/packages/bpk-component-icon/src/withDescription.module.css deleted file mode 100644 index 73819f7682..0000000000 --- a/packages/bpk-component-icon/src/withDescription.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)} diff --git a/packages/bpk-component-icon/src/withDescription.module.scss b/packages/bpk-component-icon/src/withDescription.module.scss index b424a6f6b4..7f2b7f5871 100644 --- a/packages/bpk-component-icon/src/withDescription.module.scss +++ b/packages/bpk-component-icon/src/withDescription.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/utils'; .bpk-icon-description { - @include bpk-visually-hidden; + @include utils.bpk-visually-hidden; } diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.module.css b/packages/bpk-component-image/src/BpkBackgroundImage.module.css deleted file mode 100644 index 46f2d76d85..0000000000 --- a/packages/bpk-component-image/src/BpkBackgroundImage.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-background-image{position:relative;display:block;max-width:100%;transition:background-color 400ms ease-in-out;background-color:#e0e3e5;overflow:hidden;transition-delay:400ms}.bpk-background-image__spinner{position:absolute;top:50%;left:50%;display:block;align-items:center;transform:translate(-50%, -50%)}.bpk-background-image__spinner--hidden{transition:opacity 400ms ease-in-out;opacity:0}.bpk-background-image__spinner--shown{transition:opacity 400ms ease-in-out;opacity:1}.bpk-background-image__img{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;transition:opacity 400ms ease-in-out}.bpk-background-image__img--hidden{opacity:0}.bpk-background-image__img--shown{opacity:1}.bpk-background-image__content{position:relative}.bpk-background-image--no-background{background-color:transparent} diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.module.scss b/packages/bpk-component-image/src/BpkBackgroundImage.module.scss index def97012a5..9120ac430c 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage.module.scss +++ b/packages/bpk-component-image/src/BpkBackgroundImage.module.scss @@ -16,20 +16,19 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; -@import './bpkImageMixins.scss'; +@use 'bpkImageMixins'; .bpk-background-image { - @include bpk-image; + @include bpkImageMixins.bpk-image; &__spinner { - @include bpk-image__spinner; + @include bpkImageMixins.bpk-image__spinner; } &__img { opacity: 0; - @include bpk-image__img; + @include bpkImageMixins.bpk-image__img; &--shown { opacity: 1; @@ -41,6 +40,6 @@ } &--no-background { - @include bpk-image--no-background; + @include bpkImageMixins.bpk-image--no-background; } } diff --git a/packages/bpk-component-image/src/BpkImage.module.css b/packages/bpk-component-image/src/BpkImage.module.css deleted file mode 100644 index 0901516e88..0000000000 --- a/packages/bpk-component-image/src/BpkImage.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-image{opacity:1;position:relative;display:block;max-width:100%;transition:background-color 400ms ease-in-out;background-color:#e0e3e5;overflow:hidden;transition-delay:400ms}.bpk-image__img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;transition:opacity 400ms ease-in-out}.bpk-image__img--hidden{opacity:0}.bpk-image__spinner{position:absolute;top:50%;left:50%;display:block;align-items:center;transform:translate(-50%, -50%)}.bpk-image__spinner--hidden{transition:opacity 400ms ease-in-out;opacity:0}.bpk-image__spinner--shown{transition:opacity 400ms ease-in-out;opacity:1}.bpk-image--no-background{background-color:transparent}.bpk-image--border-radius-sm{border-radius:.5rem} diff --git a/packages/bpk-component-image/src/BpkImage.module.scss b/packages/bpk-component-image/src/BpkImage.module.scss index 9c26d7805b..d9ecb58f9e 100644 --- a/packages/bpk-component-image/src/BpkImage.module.scss +++ b/packages/bpk-component-image/src/BpkImage.module.scss @@ -16,27 +16,27 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; -@import './bpkImageMixins.scss'; +@use '../../unstable__bpk-mixins/radii'; +@use 'bpkImageMixins'; .bpk-image { opacity: 1; - @include bpk-image; + @include bpkImageMixins.bpk-image; &__img { - @include bpk-image__img; + @include bpkImageMixins.bpk-image__img; } &__spinner { - @include bpk-image__spinner; + @include bpkImageMixins.bpk-image__spinner; } &--no-background { - @include bpk-image--no-background; + @include bpkImageMixins.bpk-image--no-background; } &--border-radius-sm { - @include bpk-border-radius-sm; + @include radii.bpk-border-radius-sm; } } diff --git a/packages/bpk-component-image/src/_bpkImageMixins.scss b/packages/bpk-component-image/src/_bpkImageMixins.scss index ffe7655898..8c02a84e73 100644 --- a/packages/bpk-component-image/src/_bpkImageMixins.scss +++ b/packages/bpk-component-image/src/_bpkImageMixins.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../bpk-mixins/tokens'; @mixin bpk-image__spinner { position: absolute; @@ -27,12 +27,12 @@ transform: translate(-50%, -50%); &--hidden { - transition: opacity $bpk-duration-base ease-in-out; + transition: opacity tokens.$bpk-duration-base ease-in-out; opacity: 0; } &--shown { - transition: opacity $bpk-duration-base ease-in-out; + transition: opacity tokens.$bpk-duration-base ease-in-out; opacity: 1; } } @@ -45,7 +45,7 @@ left: 0; display: block; width: 100%; - transition: opacity $bpk-duration-base ease-in-out; + transition: opacity tokens.$bpk-duration-base ease-in-out; &--hidden { opacity: 0; @@ -60,8 +60,8 @@ position: relative; display: block; max-width: 100%; - transition: background-color $bpk-duration-base ease-in-out; - background-color: $bpk-surface-highlight-day; + transition: background-color tokens.$bpk-duration-base ease-in-out; + background-color: tokens.$bpk-surface-highlight-day; overflow: hidden; - transition-delay: $bpk-duration-base; + transition-delay: tokens.$bpk-duration-base; } diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.css b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.css deleted file mode 100644 index bb321ee4c9..0000000000 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-sentinel{width:100%;height:1.5rem} diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss index 16d82caa06..2d9434c708 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss @@ -16,10 +16,10 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-sentinel { // this is necessary for when the user doesn't define a custom loading component width: 100%; - height: bpk-spacing-lg(); + height: tokens.bpk-spacing-lg(); } diff --git a/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.css b/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.css deleted file mode 100644 index 251edc400c..0000000000 --- a/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-animate-and-fade--enter{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--enter-active{opacity:1}.bpk-animate-and-fade--leave{transition:opacity 200ms ease-in-out;opacity:1}.bpk-animate-and-fade--leave-active{transition:opacity 200ms ease-in-out;opacity:.01}.bpk-animate-and-fade--appear{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--appear-active{opacity:1} diff --git a/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss b/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss index a2c2710d4b..43e044480e 100644 --- a/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss +++ b/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss @@ -16,15 +16,15 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-animate-and-fade { $invisible: 0.01; &--enter { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: tokens.$bpk-duration-sm; } &--enter-active { @@ -32,19 +32,19 @@ } &--leave { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: 1; } &--leave-active { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: $invisible; } &--appear { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity tokens.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: tokens.$bpk-duration-sm; } &--appear-active { diff --git a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.css b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.css deleted file mode 100644 index f31ea9f5ce..0000000000 --- a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-info-banner{padding:0.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff1f2}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:0.125rem 0}.bpk-info-banner__message{padding:0.25rem 0.5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#545860}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:transparent;cursor:pointer;appearance:none}.bpk-info-banner__expand-icon{fill:#545860}.bpk-info-banner__expand-icon--flipped{transform:scaleY(-1)}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:0.25rem 0 0.25rem}.bpk-info-banner__children-container--no-action{padding:0.25rem 0 0.5rem}.bpk-info-banner__expandable-action{padding-bottom:0.25rem} diff --git a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss index baaa77f71b..ed3925b30f 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss +++ b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss @@ -16,22 +16,24 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/radii'; +@use '../../unstable__bpk-mixins/typography'; .bpk-info-banner { - padding: bpk-spacing-md() bpk-spacing-base(); + padding: tokens.bpk-spacing-md() tokens.bpk-spacing-base(); overflow: hidden; - @include bpk-border-radius-sm; - @include bpk-text; - @include bpk-footnote; + @include radii.bpk-border-radius-sm; + @include typography.bpk-text; + @include typography.bpk-footnote; &--style-default { - background-color: $bpk-private-info-banner-default-day; + background-color: tokens.$bpk-private-info-banner-default-day; } &--style-onContrast { - background-color: $bpk-private-info-banner-on-contrast-day; + background-color: tokens.$bpk-private-info-banner-on-contrast-day; } &__header { @@ -46,28 +48,28 @@ &__icon, &__toggle { - padding: bpk-spacing-sm() / 2 0; + padding: tokens.bpk-spacing-sm() * 0.5 0; } &__message { - padding: bpk-spacing-sm() bpk-spacing-md(); + padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md(); flex-grow: 1; } &__success-icon { - fill: $bpk-private-info-banner-success-day; + fill: tokens.$bpk-private-info-banner-success-day; } &__warning-icon { - fill: $bpk-private-info-banner-warning-day; + fill: tokens.$bpk-private-info-banner-warning-day; } &__error-icon { - fill: $bpk-private-info-banner-error-day; + fill: tokens.$bpk-private-info-banner-error-day; } &__info-icon { - fill: $bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; } &__toggle-button { @@ -79,7 +81,7 @@ } &__expand-icon { - fill: $bpk-text-secondary-day; + fill: tokens.$bpk-text-secondary-day; &--flipped { transform: scaleY(-1); @@ -87,20 +89,20 @@ } &__children-container { - color: $bpk-text-primary-day; + color: tokens.$bpk-text-primary-day; - @include bpk-footnote; + @include typography.bpk-footnote; &--with-action { - padding: bpk-spacing-sm() 0 bpk-spacing-sm(); + padding: tokens.bpk-spacing-sm() 0 tokens.bpk-spacing-sm(); } &--no-action { - padding: bpk-spacing-sm() 0 bpk-spacing-md(); + padding: tokens.bpk-spacing-sm() 0 tokens.bpk-spacing-md(); } } &__expandable-action { - padding-bottom: bpk-spacing-sm(); + padding-bottom: tokens.bpk-spacing-sm(); } } diff --git a/packages/bpk-component-input/src/BpkClearButton.module.css b/packages/bpk-component-input/src/BpkClearButton.module.css deleted file mode 100644 index a98dcf0eb0..0000000000 --- a/packages/bpk-component-input/src/BpkClearButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-clear-button{padding:0;border:0;background-color:transparent;color:#545860;cursor:pointer;appearance:none}.bpk-no-touch-support .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-clear-button:active{color:#161616}.bpk-clear-button__icon{fill:currentcolor} diff --git a/packages/bpk-component-input/src/BpkClearButton.module.scss b/packages/bpk-component-input/src/BpkClearButton.module.scss index edafe260d5..2f8ae70673 100644 --- a/packages/bpk-component-input/src/BpkClearButton.module.scss +++ b/packages/bpk-component-input/src/BpkClearButton.module.scss @@ -16,22 +16,23 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; .bpk-clear-button { padding: 0; border: 0; background-color: transparent; - color: $bpk-text-secondary-day; + color: tokens.$bpk-text-secondary-day; cursor: pointer; appearance: none; - @include bpk-hover { - color: $bpk-text-primary-day; + @include utils.bpk-hover { + color: tokens.$bpk-text-primary-day; } &:active { - color: $bpk-text-primary-day; + color: tokens.$bpk-text-primary-day; } &__icon { diff --git a/packages/bpk-component-input/src/BpkInput.module.css b/packages/bpk-component-input/src/BpkInput.module.css deleted file mode 100644 index e872aaefb6..0000000000 --- a/packages/bpk-component-input/src/BpkInput.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid 0.0625rem #C2C9CD;border-radius:.25rem;background:#fff;color:#161616;appearance:none}.bpk-input::placeholder{color:#545860}.bpk-input:disabled{border-color:#eff1f2;background:#fff;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-input[type='number']{-moz-appearance:textfield}.bpk-input[type='number']::-webkit-inner-spin-button,.bpk-input[type='number']::-webkit-outer-spin-button{appearance:none}html[dir='rtl'] .bpk-input[type='number'],html[dir='rtl'] .bpk-input[type='tel'],html[dir='rtl'] .bpk-input[type='email']{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:0.5rem;height:2.25rem}html[dir='rtl'] .bpk-input__clear-button{right:inherit;left:0.5rem}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir='rtl'] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1rem 1rem}html[dir='rtl'] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;background-size:1rem 1rem;border-color:#e70866;border-color:var(--bpk-input-invalid-border-color, #e70866)}html[dir='rtl'] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--clearable{padding-right:2rem}html[dir='rtl'] .bpk-input--clearable{padding-right:.5rem;padding-left:2rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--large{height:3rem;padding-right:1rem;padding-left:1rem}.bpk-input--large.bpk-input--valid,.bpk-input--large.bpk-input--invalid,.bpk-input--large.bpk-input--clearable{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-input--large.bpk-input--valid,html[dir='rtl'] .bpk-input--large.bpk-input--invalid,html[dir='rtl'] .bpk-input--large.bpk-input--clearable{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-input--docked-last:focus{position:relative}.bpk-input--with-open-events{cursor:pointer} diff --git a/packages/bpk-component-input/src/BpkInput.module.scss b/packages/bpk-component-input/src/BpkInput.module.scss index 269ffbaa22..07c3354e7f 100644 --- a/packages/bpk-component-input/src/BpkInput.module.scss +++ b/packages/bpk-component-input/src/BpkInput.module.scss @@ -16,19 +16,20 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/forms'; .bpk-input { - @include bpk-input; + @include forms.bpk-input; &__container { - @include bpk-input__container; + @include forms.bpk-input__container; } &__clear-button { display: none; - @include bpk-input__clear-button; + @include forms.bpk-input__clear-button; &--persistent { display: inherit; @@ -36,15 +37,15 @@ } &--valid { - @include bpk-input--valid; + @include forms.bpk-input--valid; } &--invalid { - @include bpk-input--invalid; + @include forms.bpk-input--invalid; } &--clearable { - @include bpk-input--clearable; + @include forms.bpk-input--clearable; // Display the clear button when a clearable input is focused. &:focus + .bpk-input__clear-button { @@ -53,28 +54,28 @@ } &--large { - @include bpk-input--large; + @include forms.bpk-input--large; } // When persistent, set background to override any validity icons // appearing and make the clear button always display. &--persistent-clearable { - background: $bpk-input-background; + background: tokens.$bpk-input-background; } &--docked { - @include bpk-input--docked; + @include forms.bpk-input--docked; &-first { - @include bpk-input--docked-first-child; + @include forms.bpk-input--docked-first-child; } &-middle { - @include bpk-input--docked-middle-child; + @include forms.bpk-input--docked-middle-child; } &-last { - @include bpk-input--docked-last-child; + @include forms.bpk-input--docked-last-child; } } diff --git a/packages/bpk-component-label/src/BpkLabel.module.css b/packages/bpk-component-label/src/BpkLabel.module.css deleted file mode 100644 index 0fc4129f43..0000000000 --- a/packages/bpk-component-label/src/BpkLabel.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-label{display:block;color:#161616;font-size:.75rem;font-weight:700;line-height:1rem}.bpk-label--white{color:#fff}.bpk-label--invalid{color:#e70866;color:var(--bpk-form-validation-text-color, #e70866)}.bpk-label--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-label--disabled--white{color:rgba(255,255,255,0.5)}.bpk-label__asterisk{color:#e70866;color:var(--bpk-form-validation-text-color, #e70866)} diff --git a/packages/bpk-component-label/src/BpkLabel.module.scss b/packages/bpk-component-label/src/BpkLabel.module.scss index 5b101e65a4..925c2cc6cd 100644 --- a/packages/bpk-component-label/src/BpkLabel.module.scss +++ b/packages/bpk-component-label/src/BpkLabel.module.scss @@ -16,32 +16,34 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/forms'; +@use '../../unstable__bpk-mixins/utils'; .bpk-label { - @include bpk-label; + @include forms.bpk-label; &--white { - @include bpk-label--white; + @include forms.bpk-label--white; } &--invalid { - @include bpk-label--invalid; + @include forms.bpk-label--invalid; } &--disabled { - @include bpk-label--disabled; + @include forms.bpk-label--disabled; &--white { - color: $bpk-text-disabled-on-dark-day; + color: tokens.$bpk-text-disabled-on-dark-day; } } &__asterisk { - @include bpk-themeable-property( + @include utils.bpk-themeable-property( color, --bpk-form-validation-text-color, - $bpk-form-validation-color + tokens.$bpk-form-validation-color ); } } diff --git a/packages/bpk-component-link/src/BpkLink.module.css b/packages/bpk-component-link/src/BpkLink.module.css deleted file mode 100644 index 0b85266096..0000000000 --- a/packages/bpk-component-link/src/BpkLink.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-link{padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3)}.bpk-no-touch-support .bpk-link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-link--active{color:#0062e3}.bpk-link--active:visited{color:#0062e3}.bpk-link--active:active{color:#0062e3}.bpk-link--alternate{color:#fff;color:var(--bpk-link-alternate-color, #fff)}.bpk-no-touch-support .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, #fff)}:global(.bpk-no-touch-support) .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, #fff)}.bpk-link--alternate:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, #fff)}.bpk-link--alternate:active{color:#fff;color:var(--bpk-link-alternate-active-color, #fff)} diff --git a/packages/bpk-component-link/src/BpkLink.module.scss b/packages/bpk-component-link/src/BpkLink.module.scss index 4ca6b6afd7..7ae816675e 100644 --- a/packages/bpk-component-link/src/BpkLink.module.scss +++ b/packages/bpk-component-link/src/BpkLink.module.scss @@ -16,16 +16,16 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/typography'; .bpk-link { - @include bpk-link; + @include typography.bpk-link; &--active { - @include bpk-link--active; + @include typography.bpk-link--active; } &--alternate { - @include bpk-link--alternate; + @include typography.bpk-link--alternate; } } diff --git a/packages/bpk-component-list/src/BpkList.module.css b/packages/bpk-component-list/src/BpkList.module.css deleted file mode 100644 index 876f11def0..0000000000 --- a/packages/bpk-component-list/src/BpkList.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-list{margin-top:1rem;margin-bottom:1rem;padding-left:1.5rem}.bpk-list__item{margin-top:0;margin-bottom:0.25rem}.bpk-list .bpk-list{margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-bottom:0.25rem}.bpk-list .bpk-list>li{margin-bottom:0} diff --git a/packages/bpk-component-list/src/BpkList.module.scss b/packages/bpk-component-list/src/BpkList.module.scss index 49e5840740..b194ee3670 100644 --- a/packages/bpk-component-list/src/BpkList.module.scss +++ b/packages/bpk-component-list/src/BpkList.module.scss @@ -16,17 +16,17 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/typography'; .bpk-list { - @include bpk-list; + @include typography.bpk-list; &__item { - @include bpk-list-item; + @include typography.bpk-list-item; } & & { - @include bpk-list--nested; + @include typography.bpk-list--nested; /* stylelint-disable selector-max-compound-selectors */ diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.css b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.css deleted file mode 100644 index 45cbe89841..0000000000 --- a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-loading-button{position:relative;overflow:hidden}.bpk-loading-button--link{visibility:hidden}.bpk-loading-button__icon{position:absolute;display:inline-flex;visibility:visible;z-index:1;width:calc(100% - 2rem);height:calc(100% - .75rem);justify-content:center;align-items:center;background-color:inherit}.bpk-loading-button__icon--large{height:calc(100% - 1.5rem)}.bpk-loading-button__icon--icon-only{width:calc(100% - 1.25rem)}.bpk-loading-button__icon--large-icon-only{width:calc(100% - 1.5rem)}.bpk-loading-button__icon--link{width:100%;background:unset} diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss index d054cefa10..de2e63d9e4 100644 --- a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss +++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss @@ -16,16 +16,17 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-loading-button { - $button-padding-x: bpk-spacing-base() * 2; - $button-padding-y: bpk-spacing-lg() / 2; - $button-large-padding-y: bpk-spacing-lg(); - $button-icon-only-padding-x: $bpk-button-height - $bpk-icon-size-sm; // this is in order to ensure icons are centred in icon-only buttons + $button-padding-x: tokens.bpk-spacing-base() * 2; + $button-padding-y: tokens.bpk-spacing-lg() * 0.5; + $button-large-padding-y: tokens.bpk-spacing-lg(); + $button-icon-only-padding-x: tokens.$bpk-button-height - + tokens.$bpk-icon-size-sm; // this is in order to ensure icons are centred in icon-only buttons /* stylelint-disable-next-line scss/operator-no-newline-after */ - $button-large-icon-only-padding-x: $bpk-button-large-height - - $bpk-icon-size-lg; // this is in order to ensure icons are centred in icon-only buttons + $button-large-icon-only-padding-x: tokens.$bpk-button-large-height - + tokens.$bpk-icon-size-lg; // this is in order to ensure icons are centred in icon-only buttons position: relative; overflow: hidden; diff --git a/packages/bpk-component-map/src/BpkIconMarker.module.css b/packages/bpk-component-map/src/BpkIconMarker.module.css deleted file mode 100644 index 822e7db3a6..0000000000 --- a/packages/bpk-component-map/src/BpkIconMarker.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker__wrapper{position:absolute;top:-32px;left:-13px;z-index:1;padding:16px 13px;border:none;background:none}.bpk-icon-marker__wrapper--selected{top:-40px;left:-16px;z-index:2;padding:20px 16px}.bpk-icon-marker__icon{position:absolute;top:4.8px;left:5px;color:#fff}.bpk-icon-marker__icon>svg{position:absolute;width:16px !important;height:16px !important;fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--selected{top:8px;left:8px;color:#fff;color:var(--bpk-icon-marker-default-selected-color, #fff)} diff --git a/packages/bpk-component-map/src/BpkIconMarker.module.scss b/packages/bpk-component-map/src/BpkIconMarker.module.scss index 4fd20b299f..48b3cd5e83 100644 --- a/packages/bpk-component-map/src/BpkIconMarker.module.scss +++ b/packages/bpk-component-map/src/BpkIconMarker.module.scss @@ -20,7 +20,9 @@ /* stylelint-disable unit-disallowed-list */ -@import '../../bpk-mixins/index.scss'; +@use 'sass:math'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; .bpk-icon-marker { $marker-width: 26px; @@ -34,23 +36,23 @@ // set top and left properties s.t. the marker pin points to the correct coordinates. // otherwise the top-left corner of the marker would correspond to the exact coordinates making the location slightly inaccurate - top: -$marker-height; - left: -$marker-width / 2; + top: -1 * $marker-height; + left: -1 * $marker-width * 0.5; z-index: 1; - padding: $marker-height / 2 $marker-width / 2; + padding: $marker-height * 0.5 $marker-width * 0.5; border: none; // Prevent default