From 785b41bb0d945503f8ee0949aed3d2812065872d Mon Sep 17 00:00:00 2001 From: Aleksandr Sannikov Date: Thu, 30 Nov 2023 15:34:56 +0000 Subject: [PATCH 01/33] [NOJIRA]: Prepare for sass-embedded --- .gitignore | 4 + package-lock.json | 372 +++++- package.json | 4 +- .../src/BpkDataTable.module.scss | 8 +- packages/bpk-mixins/README.md | 16 +- packages/bpk-mixins/src/mixins/_badges.scss | 2 +- packages/bpk-mixins/src/mixins/_borders.scss | 16 + packages/bpk-mixins/src/mixins/_buttons.scss | 1 + packages/bpk-mixins/src/mixins/_cards.scss | 3 + packages/bpk-mixins/src/mixins/_chips.scss | 5 + packages/bpk-mixins/src/mixins/_forms.scss | 2 + packages/bpk-mixins/src/mixins/_layers.scss | 29 +- packages/bpk-mixins/src/mixins/_margins.scss | 2 + packages/bpk-mixins/src/mixins/_panels.scss | 4 +- .../bpk-mixins/src/mixins/_typography.scss | 4 +- packages/bpk-mixins/src/mixins/_utils.scss | 2 + packages/unstable__bpk-mixins/README.md | 25 + packages/unstable__bpk-mixins/_badges-v2.scss | 240 ++++ packages/unstable__bpk-mixins/_badges.scss | 240 ++++ packages/unstable__bpk-mixins/_borders.scss | 268 +++++ .../unstable__bpk-mixins/_breakpoints.scss | 221 ++++ packages/unstable__bpk-mixins/_buttons.scss | 568 +++++++++ packages/unstable__bpk-mixins/_cards.scss | 94 ++ packages/unstable__bpk-mixins/_chips.scss | 240 ++++ packages/unstable__bpk-mixins/_forms.scss | 1049 +++++++++++++++++ packages/unstable__bpk-mixins/_icons.scss | 88 ++ packages/unstable__bpk-mixins/_index.scss | 38 + packages/unstable__bpk-mixins/_layers.scss | 199 ++++ packages/unstable__bpk-mixins/_margins.scss | 75 ++ packages/unstable__bpk-mixins/_panels.scss | 71 ++ packages/unstable__bpk-mixins/_radii.scss | 80 ++ .../_scroll-indicators.scss | 79 ++ packages/unstable__bpk-mixins/_shadows.scss | 58 + packages/unstable__bpk-mixins/_spinners.scss | 102 ++ .../_tokens.scss} | 12 +- .../unstable__bpk-mixins/_typography.scss | 1039 ++++++++++++++++ packages/unstable__bpk-mixins/_utils.scss | 266 +++++ packages/unstable_bpk-mixins/README.md | 25 + packages/unstable_bpk-mixins/_badges-v2.scss | 240 ++++ packages/unstable_bpk-mixins/_badges.scss | 240 ++++ packages/unstable_bpk-mixins/_bonds.scss | 19 + packages/unstable_bpk-mixins/_borders.scss | 268 +++++ .../unstable_bpk-mixins/_breakpoints.scss | 221 ++++ packages/unstable_bpk-mixins/_buttons.scss | 568 +++++++++ packages/unstable_bpk-mixins/_cards.scss | 94 ++ packages/unstable_bpk-mixins/_chips.scss | 240 ++++ packages/unstable_bpk-mixins/_forms.scss | 1049 +++++++++++++++++ packages/unstable_bpk-mixins/_icons.scss | 88 ++ packages/unstable_bpk-mixins/_index.scss | 38 + packages/unstable_bpk-mixins/_layers.scss | 199 ++++ packages/unstable_bpk-mixins/_margins.scss | 75 ++ packages/unstable_bpk-mixins/_panels.scss | 71 ++ packages/unstable_bpk-mixins/_radii.scss | 80 ++ .../_scroll-indicators.scss | 79 ++ packages/unstable_bpk-mixins/_shadows.scss | 58 + packages/unstable_bpk-mixins/_spinners.scss | 102 ++ packages/unstable_bpk-mixins/_typography.scss | 1039 ++++++++++++++++ packages/unstable_bpk-mixins/_utils.scss | 268 +++++ scripts/scss/_bonds.template.scss | 19 + scripts/scss/generate-v2.sh | 38 + scripts/scss/upgrade.sh | 14 + 61 files changed, 10604 insertions(+), 54 deletions(-) create mode 100644 packages/unstable__bpk-mixins/README.md create mode 100644 packages/unstable__bpk-mixins/_badges-v2.scss create mode 100644 packages/unstable__bpk-mixins/_badges.scss create mode 100644 packages/unstable__bpk-mixins/_borders.scss create mode 100644 packages/unstable__bpk-mixins/_breakpoints.scss create mode 100644 packages/unstable__bpk-mixins/_buttons.scss create mode 100644 packages/unstable__bpk-mixins/_cards.scss create mode 100644 packages/unstable__bpk-mixins/_chips.scss create mode 100644 packages/unstable__bpk-mixins/_forms.scss create mode 100644 packages/unstable__bpk-mixins/_icons.scss create mode 100644 packages/unstable__bpk-mixins/_index.scss create mode 100644 packages/unstable__bpk-mixins/_layers.scss create mode 100644 packages/unstable__bpk-mixins/_margins.scss create mode 100644 packages/unstable__bpk-mixins/_panels.scss create mode 100644 packages/unstable__bpk-mixins/_radii.scss create mode 100644 packages/unstable__bpk-mixins/_scroll-indicators.scss create mode 100644 packages/unstable__bpk-mixins/_shadows.scss create mode 100644 packages/unstable__bpk-mixins/_spinners.scss rename packages/{bpk-mixins/sass-functions.js => unstable__bpk-mixins/_tokens.scss} (64%) create mode 100644 packages/unstable__bpk-mixins/_typography.scss create mode 100644 packages/unstable__bpk-mixins/_utils.scss create mode 100644 packages/unstable_bpk-mixins/README.md create mode 100644 packages/unstable_bpk-mixins/_badges-v2.scss create mode 100644 packages/unstable_bpk-mixins/_badges.scss create mode 100644 packages/unstable_bpk-mixins/_bonds.scss create mode 100644 packages/unstable_bpk-mixins/_borders.scss create mode 100644 packages/unstable_bpk-mixins/_breakpoints.scss create mode 100644 packages/unstable_bpk-mixins/_buttons.scss create mode 100644 packages/unstable_bpk-mixins/_cards.scss create mode 100644 packages/unstable_bpk-mixins/_chips.scss create mode 100644 packages/unstable_bpk-mixins/_forms.scss create mode 100644 packages/unstable_bpk-mixins/_icons.scss create mode 100644 packages/unstable_bpk-mixins/_index.scss create mode 100644 packages/unstable_bpk-mixins/_layers.scss create mode 100644 packages/unstable_bpk-mixins/_margins.scss create mode 100644 packages/unstable_bpk-mixins/_panels.scss create mode 100644 packages/unstable_bpk-mixins/_radii.scss create mode 100644 packages/unstable_bpk-mixins/_scroll-indicators.scss create mode 100644 packages/unstable_bpk-mixins/_shadows.scss create mode 100644 packages/unstable_bpk-mixins/_spinners.scss create mode 100644 packages/unstable_bpk-mixins/_typography.scss create mode 100644 packages/unstable_bpk-mixins/_utils.scss create mode 100644 scripts/scss/_bonds.template.scss create mode 100755 scripts/scss/generate-v2.sh create mode 100755 scripts/scss/upgrade.sh diff --git a/.gitignore b/.gitignore index 5636cc6901..d102d408d3 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,7 @@ 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-mixins-next diff --git a/package-lock.json b/package-lock.json index 2bccc72042..9722aec4d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,7 +63,6 @@ "lint-staged": "^15.0.2", "lodash": "^4.17.20", "mini-css-extract-plugin": "^2.8.0", - "node-sass": "^6.0.1", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.0", "prop-types": "^15.7.2", @@ -71,7 +70,9 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-svg-loader": "^3.0.1", + "sass-embedded": "^1.69.5", "sass-loader": "^13.3.3", + "sass-migrator": "^1.8.0", "sassdoc": "^2.7.0", "storybook": "^7.6.10", "style-loader": "^3.3.3", @@ -2102,6 +2103,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@bufbuild/protobuf": { + "version": "1.5.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/@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", @@ -11281,6 +11288,8 @@ "version": "1.0.1", "dev": true, "license": "BSD-3-Clause OR MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.4.2" } @@ -11460,6 +11469,8 @@ "version": "1.1.7", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "delegates": "^1.0.0", "readable-stream": "^2.0.6" @@ -11785,6 +11796,8 @@ "version": "0.2.6", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "safer-buffer": "~2.1.0" } @@ -11805,6 +11818,8 @@ "version": "1.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.8" } @@ -11980,6 +11995,8 @@ "version": "0.7.0", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "engines": { "node": "*" } @@ -11987,7 +12004,9 @@ "node_modules/aws4": { "version": "1.12.0", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/axe-core": { "version": "4.8.2", @@ -13114,6 +13133,8 @@ "version": "1.0.2", "dev": true, "license": "BSD-3-Clause", + "optional": true, + "peer": true, "dependencies": { "tweetnacl": "^0.14.3" } @@ -13461,6 +13482,12 @@ "ieee754": "^1.1.13" } }, + "node_modules/buffer-builder": { + "version": "0.2.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/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, @@ -13785,7 +13812,9 @@ "node_modules/caseless": { "version": "0.12.0", "dev": true, - "license": "Apache-2.0" + "license": "Apache-2.0", + "optional": true, + "peer": true }, "node_modules/cdocparser": { "version": "0.13.0", @@ -15303,6 +15332,8 @@ "version": "1.14.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "assert-plus": "^1.0.0" }, @@ -16078,6 +16109,8 @@ "version": "0.1.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "jsbn": "~0.1.0", "safer-buffer": "^2.1.0" @@ -17804,7 +17837,9 @@ "engines": [ "node >=0.6.0" ], - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/fancy-log": { "version": "1.3.3", @@ -18372,6 +18407,8 @@ "version": "0.6.1", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "engines": { "node": "*" } @@ -18723,6 +18760,8 @@ "version": "2.7.4", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "aproba": "^1.0.3", "console-control-strings": "^1.0.0", @@ -18738,6 +18777,8 @@ "version": "2.1.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -18746,6 +18787,8 @@ "version": "1.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "number-is-nan": "^1.0.0" }, @@ -18757,6 +18800,8 @@ "version": "1.0.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -18770,6 +18815,8 @@ "version": "3.0.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "ansi-regex": "^2.0.0" }, @@ -18917,6 +18964,8 @@ "version": "0.1.7", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "assert-plus": "^1.0.0" } @@ -19852,6 +19901,8 @@ "version": "2.0.0", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "engines": { "node": ">=4" } @@ -19860,6 +19911,8 @@ "version": "5.1.5", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "ajv": "^6.12.3", "har-schema": "^2.0.0" @@ -19872,6 +19925,8 @@ "version": "6.12.6", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -19886,7 +19941,9 @@ "node_modules/har-validator/node_modules/json-schema-traverse": { "version": "0.4.1", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/hard-rejection": { "version": "2.1.0", @@ -19911,6 +19968,8 @@ "version": "2.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "ansi-regex": "^2.0.0" }, @@ -19922,6 +19981,8 @@ "version": "2.1.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -20370,6 +20431,8 @@ "version": "1.2.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "assert-plus": "^1.0.0", "jsprim": "^1.2.2", @@ -20507,6 +20570,12 @@ "node": ">=16.x" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/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, @@ -21404,7 +21473,9 @@ "node_modules/isstream": { "version": "0.1.2", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/istanbul-lib-coverage": { "version": "3.2.0", @@ -23516,7 +23587,9 @@ "node_modules/jsbn": { "version": "0.1.1", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/jscodeshift": { "version": "0.15.1", @@ -23714,7 +23787,9 @@ "node_modules/json-stringify-safe": { "version": "5.0.1", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/json5": { "version": "2.2.3", @@ -23991,6 +24066,8 @@ "version": "1.4.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "assert-plus": "1.0.0", "extsprintf": "1.3.0", @@ -26139,6 +26216,8 @@ "version": "7.1.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "env-paths": "^2.2.0", "glob": "^7.1.4", @@ -26162,6 +26241,8 @@ "version": "6.0.0", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -26173,6 +26254,8 @@ "version": "7.5.4", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -26186,7 +26269,9 @@ "node_modules/node-gyp/node_modules/yallist": { "version": "4.0.0", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/node-int64": { "version": "0.4.0", @@ -26204,6 +26289,8 @@ "dev": true, "hasInstallScript": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "async-foreach": "^0.1.3", "chalk": "^1.1.1", @@ -26232,6 +26319,8 @@ "version": "2.1.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -26240,6 +26329,8 @@ "version": "2.2.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -26248,6 +26339,8 @@ "version": "1.1.3", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "ansi-styles": "^2.2.1", "escape-string-regexp": "^1.0.2", @@ -26263,6 +26356,8 @@ "version": "4.0.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -26271,6 +26366,8 @@ "version": "3.0.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "ansi-regex": "^2.0.0" }, @@ -26282,6 +26379,8 @@ "version": "2.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=0.8.0" } @@ -26397,6 +26496,8 @@ "version": "4.1.2", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "are-we-there-yet": "~1.1.2", "console-control-strings": "~1.1.0", @@ -26616,6 +26717,8 @@ "version": "0.9.0", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "engines": { "node": "*" } @@ -29555,6 +29658,8 @@ "version": "2.88.2", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "dependencies": { "aws-sign2": "~0.7.0", "aws4": "^1.8.0", @@ -29585,6 +29690,8 @@ "version": "2.3.3", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.6", @@ -29598,6 +29705,8 @@ "version": "6.5.3", "dev": true, "license": "BSD-3-Clause", + "optional": true, + "peer": true, "engines": { "node": ">=0.6" } @@ -29606,6 +29715,8 @@ "version": "2.5.0", "dev": true, "license": "BSD-3-Clause", + "optional": true, + "peer": true, "dependencies": { "psl": "^1.1.28", "punycode": "^2.1.1" @@ -29618,6 +29729,8 @@ "version": "3.4.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "bin": { "uuid": "bin/uuid" } @@ -29837,6 +29950,15 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/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, @@ -29978,10 +30100,164 @@ "which": "bin/which" } }, + "node_modules/sass-embedded": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded/-/sass-embedded-1.69.5.tgz", + "integrity": "sha512-0YNcRcbSpgGd4AnE+mm3a3g4S97puFLIZ0cYJgbwdD4iGz/hiOzE+yh72XS+u1LMhE+pQfNeC9MNnRsc8n1yRg==", + "dev": true, + "dependencies": { + "@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": ">=14.0.0" + }, + "optionalDependencies": { + "sass-embedded-darwin-arm64": "1.69.5", + "sass-embedded-darwin-x64": "1.69.5", + "sass-embedded-linux-arm": "1.69.5", + "sass-embedded-linux-arm64": "1.69.5", + "sass-embedded-linux-ia32": "1.69.5", + "sass-embedded-linux-x64": "1.69.5", + "sass-embedded-win32-ia32": "1.69.5", + "sass-embedded-win32-x64": "1.69.5" + } + }, + "node_modules/sass-embedded-darwin-arm64": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.69.5.tgz", + "integrity": "sha512-zVuXJzgT54t24E4QPP/iteHsw/cawZE8gAXGEm20cP2DKsIQBF7bvSTk0zzY0bS01YFtJviYM13HcGUe4q7/7w==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-darwin-x64": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.69.5.tgz", + "integrity": "sha512-HcA9YER3Ax7lMnHouxnIY462gnst5lNL56QXkZaTQmg9nH7oqR2bMfWbckEQL+mHIXGSM/QfX0aD59VOm5iKZw==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-arm": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.69.5.tgz", + "integrity": "sha512-m0NxVkrfcS3UsF33q0FgItMWIz/F1FZdfVZpjp+dP6qd0KLeTuoPUCh2GSize0DAU5T0Zj24b2mXeowDKv463g==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-arm64": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.69.5.tgz", + "integrity": "sha512-HWCjdFSLGh0dMUNLNh+slc2j9koSZnfTEO9qQR6WEIuC+We6vYKJugGPo1V9pFbBeoW6VAJGYdlqsRPquteCZw==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-ia32": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.69.5.tgz", + "integrity": "sha512-0taR6AJDb+eLOBTEMc1nfX2fI1hgRF9M+Hmv+wwGrxfBu/MkASk6fmR9B8MDw9hPHIqGVUkTVizjOh50O7nIKg==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-x64": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.69.5.tgz", + "integrity": "sha512-gN9yLTbKC0hUHukx4mdRs4V39WD719PM2GhWQBUA+3Z8qr9ywywi7LiU2atWrKESRF34V+eqF9lYiYVQxtTHZw==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-win32-ia32": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.69.5.tgz", + "integrity": "sha512-9OgSaufHP53b33gaH1Y5NZ/Im3druCHIQvLUEqJBCFuOzly47g/hZGrO+dBDiWgYGYKbSYI7Z4/PBtQoK5Vkxg==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass.bat" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-win32-x64": { + "version": "1.69.5", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.69.5.tgz", + "integrity": "sha512-p1PsOJnpwXdPfiRbX6QdRa4PnL2QXPpIRy8fkeAZpQFYZ278ZIlwemC2MukKMVLcE3iQ5lBulbC8IYm91rod6Q==", + "dev": true, + "optional": true, + "bin": { + "sass": "dart-sass/sass.bat" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/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://artifactory.skyscannertools.net/artifactory/api/npm/npm/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/sass-graph": { "version": "2.2.5", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "glob": "^7.0.0", "lodash": "^4.0.0", @@ -29996,6 +30272,8 @@ "version": "4.1.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=6" } @@ -30004,6 +30282,8 @@ "version": "5.0.0", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "string-width": "^3.1.0", "strip-ansi": "^5.2.0", @@ -30013,12 +30293,16 @@ "node_modules/sass-graph/node_modules/emoji-regex": { "version": "7.0.3", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/sass-graph/node_modules/find-up": { "version": "3.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "locate-path": "^3.0.0" }, @@ -30030,6 +30314,8 @@ "version": "2.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=4" } @@ -30038,6 +30324,8 @@ "version": "3.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "p-locate": "^3.0.0", "path-exists": "^3.0.0" @@ -30050,6 +30338,8 @@ "version": "3.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "p-limit": "^2.0.0" }, @@ -30061,6 +30351,8 @@ "version": "3.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=4" } @@ -30068,12 +30360,16 @@ "node_modules/sass-graph/node_modules/require-main-filename": { "version": "2.0.0", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/sass-graph/node_modules/string-width": { "version": "3.1.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "emoji-regex": "^7.0.1", "is-fullwidth-code-point": "^2.0.0", @@ -30087,6 +30383,8 @@ "version": "5.2.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "ansi-regex": "^4.1.0" }, @@ -30097,12 +30395,16 @@ "node_modules/sass-graph/node_modules/which-module": { "version": "2.0.1", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/sass-graph/node_modules/wrap-ansi": { "version": "5.1.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "ansi-styles": "^3.2.0", "string-width": "^3.0.0", @@ -30115,12 +30417,16 @@ "node_modules/sass-graph/node_modules/y18n": { "version": "4.0.3", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/sass-graph/node_modules/yargs": { "version": "13.3.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "cliui": "^5.0.0", "find-up": "^3.0.0", @@ -30138,6 +30444,8 @@ "version": "13.1.2", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" @@ -30180,6 +30488,18 @@ } } }, + "node_modules/sass-migrator": { + "version": "1.8.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/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, @@ -30383,6 +30703,8 @@ "version": "0.2.3", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "js-base64": "^2.1.8", "source-map": "^0.4.2" @@ -30392,6 +30714,8 @@ "version": "0.4.4", "dev": true, "license": "BSD-3-Clause", + "optional": true, + "peer": true, "dependencies": { "amdefine": ">=0.0.4" }, @@ -31003,6 +31327,8 @@ "version": "1.17.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "asn1": "~0.2.3", "assert-plus": "^1.0.0", @@ -32713,6 +33039,8 @@ "version": "1.0.3", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "dependencies": { "glob": "^7.1.2" } @@ -33424,6 +33752,8 @@ "version": "0.6.0", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "dependencies": { "safe-buffer": "^5.0.1" }, @@ -33434,7 +33764,9 @@ "node_modules/tweetnacl": { "version": "0.14.5", "dev": true, - "license": "Unlicense" + "license": "Unlicense", + "optional": true, + "peer": true }, "node_modules/type": { "version": "1.2.0", @@ -34368,6 +34700,12 @@ "node": ">= 0.10" } }, + "node_modules/varint": { + "version": "6.0.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/varint/-/varint-6.0.0.tgz", + "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==", + "dev": true + }, "node_modules/vary": { "version": "1.1.2", "dev": true, @@ -34383,6 +34721,8 @@ "node >=0.6.0" ], "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "assert-plus": "^1.0.0", "core-util-is": "1.0.2", @@ -34392,7 +34732,9 @@ "node_modules/verror/node_modules/core-util-is": { "version": "1.0.2", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/vinyl": { "version": "2.2.1", diff --git a/package.json b/package.json index 916af30d88..19dedd3dde 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "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:mixins-v2": "./scripts/scss/generate-v2.sh", "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", @@ -162,7 +163,6 @@ "lint-staged": "^15.0.2", "lodash": "^4.17.20", "mini-css-extract-plugin": "^2.8.0", - "node-sass": "^6.0.1", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.0", "prop-types": "^15.7.2", @@ -170,6 +170,8 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-svg-loader": "^3.0.1", + "sass-embedded": "^1.69.5", + "sass-migrator": "^1.8.0", "sass-loader": "^13.3.3", "sassdoc": "^2.7.0", "storybook": "^7.6.10", diff --git a/packages/bpk-component-datatable/src/BpkDataTable.module.scss b/packages/bpk-component-datatable/src/BpkDataTable.module.scss index 3021f22cba..938265507e 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTable.module.scss @@ -62,20 +62,20 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2; background-color: $bpk-canvas-contrast-day; cursor: pointer; - @include bpk-datatable-border-left; + @include bpk-datatable-border-left($bpk-border-size-datatable); @include bpk-rtl { - @include bpk-datatable-border-right; + @include bpk-datatable-border-right($bpk-border-size-datatable); } } &--selected { background-color: $bpk-status-warning-fill-day; - @include bpk-datatable-border-left; + @include bpk-datatable-border-left($bpk-border-size-datatable); @include bpk-rtl { - @include bpk-datatable-border-right; + @include bpk-datatable-border-right($bpk-border-size-datatable); } } } diff --git a/packages/bpk-mixins/README.md b/packages/bpk-mixins/README.md index 1a45111d59..5a3e839aa3 100644 --- a/packages/bpk-mixins/README.md +++ b/packages/bpk-mixins/README.md @@ -2,14 +2,9 @@ > Sass mixins and variables for Backpack. -## Installation - -```sh -npm install bpk-mixins --save-dev -``` - ## Usage +### node-sass ```scss @import '~@skyscanner/backpack-web/bpk-mixins/index'; @@ -17,3 +12,12 @@ npm install bpk-mixins --save-dev @include bpk-button; } ``` + +### sass or sass-embedded +```scss +@use '@skyscanner/backpack-web/bpk-mixins-next' as mixins; + +.bpk-my-component { + @include mixins.bpk-button; +} +``` diff --git a/packages/bpk-mixins/src/mixins/_badges.scss b/packages/bpk-mixins/src/mixins/_badges.scss index b291fbe93b..8077bfeb42 100644 --- a/packages/bpk-mixins/src/mixins/_badges.scss +++ b/packages/bpk-mixins/src/mixins/_badges.scss @@ -17,8 +17,8 @@ */ @import '../bonds.scss'; -@import 'typography.scss'; @import 'radii.scss'; +@import 'typography.scss'; @import 'utils.scss'; //// diff --git a/packages/bpk-mixins/src/mixins/_borders.scss b/packages/bpk-mixins/src/mixins/_borders.scss index 97cd01e452..97d136f7ca 100644 --- a/packages/bpk-mixins/src/mixins/_borders.scss +++ b/packages/bpk-mixins/src/mixins/_borders.scss @@ -264,3 +264,19 @@ @mixin bpk-border-left-xl($color, $inset: inset) { @include _bpk-border-left($bpk-border-size-xl, $color, $inset); } + +@mixin bpk-datatable-border-left($bpk-border-size-datatable) { + @include _bpk-border-left( + $bpk-border-size-datatable, + $bpk-core-accent-day, + inset + ); +} + +@mixin bpk-datatable-border-right($bpk-border-size-datatable) { + @include _bpk-border-right( + $bpk-border-size-datatable, + $bpk-core-accent-day, + inset + ); +} diff --git a/packages/bpk-mixins/src/mixins/_buttons.scss b/packages/bpk-mixins/src/mixins/_buttons.scss index 3d298de520..d19bb699e0 100644 --- a/packages/bpk-mixins/src/mixins/_buttons.scss +++ b/packages/bpk-mixins/src/mixins/_buttons.scss @@ -18,6 +18,7 @@ @import '../bonds.scss'; @import 'typography.scss'; +@import 'utils.scss'; //// /// @group buttons diff --git a/packages/bpk-mixins/src/mixins/_cards.scss b/packages/bpk-mixins/src/mixins/_cards.scss index 45dc175369..58f3e56b11 100644 --- a/packages/bpk-mixins/src/mixins/_cards.scss +++ b/packages/bpk-mixins/src/mixins/_cards.scss @@ -17,6 +17,9 @@ */ @import '../bonds.scss'; +@import 'radii.scss'; +@import 'shadows.scss'; +@import 'utils.scss'; //// /// @group cards diff --git a/packages/bpk-mixins/src/mixins/_chips.scss b/packages/bpk-mixins/src/mixins/_chips.scss index 21d973e12d..be34706d51 100644 --- a/packages/bpk-mixins/src/mixins/_chips.scss +++ b/packages/bpk-mixins/src/mixins/_chips.scss @@ -15,6 +15,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import '../bonds.scss'; +@import 'borders.scss'; +@import 'margins.scss'; +@import 'shadows.scss'; +@import 'utils.scss'; @mixin bpk-chip { display: inline-flex; diff --git a/packages/bpk-mixins/src/mixins/_forms.scss b/packages/bpk-mixins/src/mixins/_forms.scss index a224fc833c..e5c8eac0ae 100644 --- a/packages/bpk-mixins/src/mixins/_forms.scss +++ b/packages/bpk-mixins/src/mixins/_forms.scss @@ -17,6 +17,8 @@ */ @import '../bonds.scss'; +@import 'typography.scss'; +@import 'utils.scss'; //// /// @group forms diff --git a/packages/bpk-mixins/src/mixins/_layers.scss b/packages/bpk-mixins/src/mixins/_layers.scss index 1dce79df0a..d2a95bca40 100644 --- a/packages/bpk-mixins/src/mixins/_layers.scss +++ b/packages/bpk-mixins/src/mixins/_layers.scss @@ -19,6 +19,7 @@ @import '../bonds.scss'; @import 'radii.scss'; @import 'shadows.scss'; +@import 'utils.scss'; //// /// @group layers @@ -87,18 +88,18 @@ height: $arrow-size; &::before { - top: -($arrow-size + $bpk-one-pixel-rem); - margin-left: -$bpk-one-pixel-rem; + top: -1 * ($arrow-size + $bpk-one-pixel-rem); + margin-left: -1 * $bpk-one-pixel-rem; border-bottom-color: $border-color; @include bpk-rtl { - margin-right: -$bpk-one-pixel-rem; + margin-right: -1 * $bpk-one-pixel-rem; margin-left: 0; } } &::after { - top: -$arrow-size + $bpk-one-pixel-rem; + top: -1 * $arrow-size + $bpk-one-pixel-rem; border-bottom-color: $arrow-color; } } @@ -121,13 +122,13 @@ height: ($arrow-size * 2); &::before { - right: -($arrow-size + $bpk-one-pixel-rem); - margin-top: -$bpk-one-pixel-rem; + right: -1 * ($arrow-size + $bpk-one-pixel-rem); + margin-top: -1 * $bpk-one-pixel-rem; border-left-color: $border-color; } &::after { - right: -$arrow-size + $bpk-one-pixel-rem; + right: -1 * $arrow-size + $bpk-one-pixel-rem; border-left-color: $arrow-color; } } @@ -150,18 +151,18 @@ height: $arrow-size; &::before { - bottom: -($arrow-size + $bpk-one-pixel-rem); - margin-left: -$bpk-one-pixel-rem; + bottom: -1 * ($arrow-size + $bpk-one-pixel-rem); + margin-left: -1 * $bpk-one-pixel-rem; border-top-color: $border-color; @include bpk-rtl { - margin-right: -$bpk-one-pixel-rem; + margin-right: -1 * $bpk-one-pixel-rem; margin-left: 0; } } &::after { - bottom: -$arrow-size + $bpk-one-pixel-rem; + bottom: -1 * $arrow-size + $bpk-one-pixel-rem; border-top-color: $arrow-color; } } @@ -184,13 +185,13 @@ height: ($arrow-size * 2); &::before { - left: -($arrow-size + $bpk-one-pixel-rem); - margin-top: -$bpk-one-pixel-rem; + left: -1 * ($arrow-size + $bpk-one-pixel-rem); + margin-top: -1 * $bpk-one-pixel-rem; border-right-color: $border-color; } &::after { - left: -$arrow-size + $bpk-one-pixel-rem; + left: -1 * $arrow-size + $bpk-one-pixel-rem; border-right-color: $arrow-color; } } diff --git a/packages/bpk-mixins/src/mixins/_margins.scss b/packages/bpk-mixins/src/mixins/_margins.scss index 6c68a98d86..59c0b20c50 100644 --- a/packages/bpk-mixins/src/mixins/_margins.scss +++ b/packages/bpk-mixins/src/mixins/_margins.scss @@ -16,6 +16,8 @@ * limitations under the License. */ +@import 'utils.scss'; + /// RTL aware leading margin /// /// @param {string} $margin The desired leading margin. diff --git a/packages/bpk-mixins/src/mixins/_panels.scss b/packages/bpk-mixins/src/mixins/_panels.scss index b771d0a143..4c68748117 100644 --- a/packages/bpk-mixins/src/mixins/_panels.scss +++ b/packages/bpk-mixins/src/mixins/_panels.scss @@ -17,6 +17,8 @@ */ @import '../bonds.scss'; +@import 'borders.scss'; +@import 'radii.scss'; //// /// @group panels @@ -62,6 +64,6 @@ @mixin bpk-panel--full-width { border-radius: 0; box-shadow: - $bpk-panel-border-color 0 #{-$bpk-one-pixel-rem} 0 0 inset, + $bpk-panel-border-color 0 -1 * $bpk-one-pixel-rem 0 0 inset, $bpk-panel-border-color 0 $bpk-one-pixel-rem 0 0 inset; } diff --git a/packages/bpk-mixins/src/mixins/_typography.scss b/packages/bpk-mixins/src/mixins/_typography.scss index e8ca12798b..4aaed4e781 100644 --- a/packages/bpk-mixins/src/mixins/_typography.scss +++ b/packages/bpk-mixins/src/mixins/_typography.scss @@ -17,7 +17,9 @@ */ @import '../bonds.scss'; -@import './borders.scss'; +@import 'borders.scss'; +@import 'radii.scss'; +@import 'utils.scss'; //// /// @group typography diff --git a/packages/bpk-mixins/src/mixins/_utils.scss b/packages/bpk-mixins/src/mixins/_utils.scss index 5c9e6dde7b..ca6afb93f7 100644 --- a/packages/bpk-mixins/src/mixins/_utils.scss +++ b/packages/bpk-mixins/src/mixins/_utils.scss @@ -16,6 +16,8 @@ * limitations under the License. */ +@import '../bonds.scss'; + //// /// @group utils //// diff --git a/packages/unstable__bpk-mixins/README.md b/packages/unstable__bpk-mixins/README.md new file mode 100644 index 0000000000..8fcfcf941f --- /dev/null +++ b/packages/unstable__bpk-mixins/README.md @@ -0,0 +1,25 @@ +# bpk-mixins + +> Sass mixins and variables for Backpack. + +## Usage + +### node-sass +```scss +@import '~@skyscanner/backpack-web/bpk-mixins'; + +.bpk-my-component { + @include bpk-button; +} +``` + +### sass or sass-embedded + +With modern tooling we recommend that you use granular import +```scss +@use '@skyscanner/backpack-web/unstable__bpk-mixins/buttons'; + +.bpk-my-component { + @include buttons.bpk-button; +} +``` diff --git a/packages/unstable__bpk-mixins/_badges-v2.scss b/packages/unstable__bpk-mixins/_badges-v2.scss new file mode 100644 index 0000000000..a1ea89da72 --- /dev/null +++ b/packages/unstable__bpk-mixins/_badges-v2.scss @@ -0,0 +1,240 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'typography.scss'; +@use 'radii.scss'; +@use 'utils.scss'; + +//// +/// @group badges +//// + +/// Standard badge. +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// } + +@mixin bpk-badge { + display: inline-flex; + padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md(); + align-items: center; + + @include radii.bpk-border-radius-xs; + @include typography.bpk-text; + @include typography.bpk-footnote; +} + +/// Centered badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--centered(); +/// } + +@mixin bpk-badge--centered { + vertical-align: text-bottom; +} + +/// Right-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-right(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: inherit; + left: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: tokens.$bpk-border-radius-xs; + } +} + +/// Left-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-left(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: 0; + left: inherit; + border-bottom-left-radius: tokens.$bpk-border-radius-xs; + border-bottom-right-radius: 0; + } +} + +/// Normal badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--normal(); +/// } + +@mixin bpk-badge--normal { + background-color: tokens.$bpk-private-badge-background-normal-day; + color: tokens.$bpk-text-primary-day; + fill: tokens.$bpk-text-primary-day; +} + +/// Warning badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--warning(); +/// } + +@mixin bpk-badge--warning { + background-color: tokens.$bpk-private-badge-background-normal-day; + color: tokens.$bpk-text-on-light-day; + fill: tokens.$bpk-status-warning-spot-day; +} + +/// Success badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--success(); +/// } + +@mixin bpk-badge--success { + background-color: tokens.$bpk-private-badge-background-normal-day; + color: tokens.$bpk-text-on-light-day; + fill: tokens.$bpk-status-success-spot-day; +} + +/// Critical badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--critical(); +/// } + +@mixin bpk-badge--critical { + background-color: tokens.$bpk-private-badge-background-normal-day; + color: tokens.$bpk-text-on-light-day; + fill: tokens.$bpk-status-danger-spot-day; +} + +/// Inverse badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--inverse(); +/// } + +@mixin bpk-badge--inverse { + background-color: tokens.$bpk-surface-default-day; + color: tokens.$bpk-text-primary-day; + fill: tokens.$bpk-text-primary-day; +} + +/// Outline badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--outline(); +/// } + +@mixin bpk-badge--outline { + background-color: transparent; + color: tokens.$bpk-text-on-dark-day; + box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm tokens.$bpk-text-on-dark-day; + fill: tokens.$bpk-text-on-dark-day; +} + +/// Strong badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--strong(); +/// } + +@mixin bpk-badge--strong { + background-color: tokens.$bpk-core-primary-day; + color: tokens.$bpk-text-on-dark-day; + fill: tokens.$bpk-text-on-dark-day; +} + +/// Brand badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--brand(); +/// } + +@mixin bpk-badge--brand { + background-color: tokens.$bpk-core-accent-day; + color: tokens.$bpk-text-primary-inverse-day; + fill: tokens.$bpk-text-primary-inverse-day; +} diff --git a/packages/unstable__bpk-mixins/_badges.scss b/packages/unstable__bpk-mixins/_badges.scss new file mode 100644 index 0000000000..b238160031 --- /dev/null +++ b/packages/unstable__bpk-mixins/_badges.scss @@ -0,0 +1,240 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'radii.scss'; +@use 'typography.scss'; +@use 'utils.scss'; + +//// +/// @group badges +//// + +/// Standard badge. +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// } + +@mixin bpk-badge { + display: inline-flex; + padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md(); + align-items: center; + + @include radii.bpk-border-radius-xs; + @include typography.bpk-text; + @include typography.bpk-caption; +} + +/// Centered badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--centered(); +/// } + +@mixin bpk-badge--centered { + vertical-align: text-bottom; +} + +/// Right-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-right(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: inherit; + left: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: tokens.$bpk-border-radius-xs; + } +} + +/// Left-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-left(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: 0; + left: inherit; + border-bottom-left-radius: tokens.$bpk-border-radius-xs; + border-bottom-right-radius: 0; + } +} + +/// Normal badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--normal(); +/// } + +@mixin bpk-badge--normal { + background-color: tokens.$bpk-surface-highlight-day; + color: tokens.$bpk-text-primary-day; + fill: tokens.$bpk-text-primary-day; +} + +/// Warning badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--warning(); +/// } + +@mixin bpk-badge--warning { + background-color: tokens.$bpk-status-warning-fill-day; + color: tokens.$bpk-text-on-light-day; + fill: tokens.$bpk-text-on-light-day; +} + +/// Success badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--success(); +/// } + +@mixin bpk-badge--success { + background-color: tokens.$bpk-status-success-fill-day; + color: tokens.$bpk-text-on-light-day; + fill: tokens.$bpk-text-on-light-day; +} + +/// Critical badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--critical(); +/// } + +@mixin bpk-badge--critical { + background-color: tokens.$bpk-status-danger-fill-day; + color: tokens.$bpk-text-on-light-day; + fill: tokens.$bpk-text-on-light-day; +} + +/// Inverse badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--inverse(); +/// } + +@mixin bpk-badge--inverse { + background-color: tokens.$bpk-surface-default-day; + color: tokens.$bpk-text-primary-day; + fill: tokens.$bpk-text-primary-day; +} + +/// Outline badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--outline(); +/// } + +@mixin bpk-badge--outline { + background-color: transparent; + color: tokens.$bpk-text-on-dark-day; + box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm tokens.$bpk-text-on-dark-day; + fill: tokens.$bpk-text-on-dark-day; +} + +/// Strong badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--strong(); +/// } + +@mixin bpk-badge--strong { + background-color: tokens.$bpk-core-primary-day; + color: tokens.$bpk-text-on-dark-day; + fill: tokens.$bpk-text-on-dark-day; +} + +/// Brand badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--brand(); +/// } + +@mixin bpk-badge--brand { + background-color: tokens.$bpk-core-accent-day; + color: tokens.$bpk-text-primary-inverse-day; + fill: tokens.$bpk-text-primary-inverse-day; +} diff --git a/packages/unstable__bpk-mixins/_borders.scss b/packages/unstable__bpk-mixins/_borders.scss new file mode 100644 index 0000000000..b043bc2ea2 --- /dev/null +++ b/packages/unstable__bpk-mixins/_borders.scss @@ -0,0 +1,268 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; + +//// +/// @group borders +//// + +/// Full border utility. +/// +/// @access private + +@mixin _bpk-border($size, $color, $inset) { + box-shadow: 0 0 0 $size $color #{$inset}; +} + +/// Top border utility. +/// +/// @access private + +@mixin _bpk-border-top($size, $color, $inset) { + $offset-y: if($inset == inset, $size, -#{$size}); + + box-shadow: 0 $offset-y 0 0 $color #{$inset}; +} + +/// Right border utility. +/// +/// @access private + +@mixin bpk-border-right($size, $color, $inset) { + $offset-x: if($inset == inset, -#{$size}, $size); + + box-shadow: $offset-x 0 0 0 $color #{$inset}; +} + +/// Bottom border utility. +/// +/// @access private + +@mixin _bpk-border-bottom($size, $color, $inset) { + $offset-y: if($inset == inset, -#{$size}, $size); + + box-shadow: 0 $offset-y 0 0 $color #{$inset}; +} + +/// Left border utility. +/// +/// @access private + +@mixin bpk-border-left($size, $color, $inset) { + $offset-x: if($inset == inset, $size, -#{$size}); + + box-shadow: $offset-x 0 0 0 $color #{$inset}; +} + +/// Small "1px" border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-sm($color, $inset: inset) { + @include _bpk-border(tokens.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" top border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-top-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-top-sm($color, $inset: inset) { + @include _bpk-border-top(tokens.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" right border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-right-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-right-sm($color, $inset: inset) { + @include bpk-border-right(tokens.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" bottom border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-bottom-sm($color, $inset: inset) { + @include _bpk-border-bottom(tokens.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" left border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-left-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-left-sm($color, $inset: inset) { + @include bpk-border-left(tokens.$bpk-border-size-sm, $color, $inset); +} + +/// Large "2px" border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-lg($color, $inset: inset) { + @include _bpk-border(tokens.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" top border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-top-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-top-lg($color, $inset: inset) { + @include _bpk-border-top(tokens.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" right border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-right-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-right-lg($color, $inset: inset) { + @include bpk-border-right(tokens.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" bottom border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-bottom-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-bottom-lg($color, $inset: inset) { + @include _bpk-border-bottom(tokens.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" left border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-left-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-left-lg($color, $inset: inset) { + @include bpk-border-left(tokens.$bpk-border-size-lg, $color, $inset); +} + +/// Extra large "3px" border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-xl($color, $inset: inset) { + @include _bpk-border(tokens.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" top border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-top-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-top-xl($color, $inset: inset) { + @include _bpk-border-top(tokens.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" right border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-right-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-right-xl($color, $inset: inset) { + @include bpk-border-right(tokens.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" bottom border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-bottom-xl($color, $inset: inset) { + @include _bpk-border-bottom(tokens.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" left border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-left-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-left-xl($color, $inset: inset) { + @include bpk-border-left(tokens.$bpk-border-size-xl, $color, $inset); +} diff --git a/packages/unstable__bpk-mixins/_breakpoints.scss b/packages/unstable__bpk-mixins/_breakpoints.scss new file mode 100644 index 0000000000..d5e83c1c24 --- /dev/null +++ b/packages/unstable__bpk-mixins/_breakpoints.scss @@ -0,0 +1,221 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; + +//// +/// @group breakpoints +//// + +/// @alias bpk-grid__container + +@mixin bpk-container { + @include bpk-grid__container; +} + +/// Breakpoint to target up to and including small mobile viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-small-mobile { +/// /* small mobile viewport scss goes here */ +/// } +/// +/// /* larger mobile, tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-small-mobile { + @media #{tokens.$bpk-breakpoint-query-small-mobile} { + @content; + } +} + +/// Breakpoint to target up to and including mobile viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-mobile { +/// /* up to and including mobile viewport scss goes here */ +/// } +/// +/// /* tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-mobile { + @media #{tokens.$bpk-breakpoint-query-mobile} { + @content; + } +} + +/// Breakpoint to target up to and including small tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-small-tablet { +/// /* up to and including small tablet viewport scss goes here */ +/// } +/// +/// /* larger tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-small-tablet { + @media #{tokens.$bpk-breakpoint-query-small-tablet} { + @content; + } +} + +/// Breakpoint to target up to and including tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-tablet { +/// /* mobile & tablet viewport scss goes here */ +/// } +/// +/// /* desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-tablet { + @media #{tokens.$bpk-breakpoint-query-tablet} { + @content; + } +} + +/// Breakpoint to target only small tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-small-tablet-only { +/// /* small tablet viewport scss goes here */ +/// } +/// +/// /* mobile, larger tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-small-tablet-only { + @media #{tokens.$bpk-breakpoint-query-small-tablet-only} { + @content; + } +} + +/// Breakpoint to target only tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-tablet-only { +/// /* tablet viewport scss goes here */ +/// } +/// +/// /* mobile & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-tablet-only { + @media #{tokens.$bpk-breakpoint-query-tablet-only} { + @content; + } +} + +/// Breakpoint to target tablet & desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-above-mobile { +/// /* tablet & desktop viewport scss goes here */ +/// } +/// +/// /* mobile viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-above-mobile { + @media #{tokens.$bpk-breakpoint-query-above-mobile} { + @content; + } +} + +/// Breakpoint to target desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-above-tablet { +/// /* desktop viewport scss goes here */ +/// } +/// +/// /* mobile & tablet viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-above-tablet { + @media #{tokens.$bpk-breakpoint-query-above-tablet} { + @content; + } +} + +/// Breakpoint to target large desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-above-desktop { +/// /* large desktop viewport scss goes here */ +/// } +/// +/// /* mobile, tablet, desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-above-desktop { + @media #{tokens.$bpk-breakpoint-query-above-desktop} { + @content; + } +} + +/// Breakpoint to target only desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-desktop-only { +/// /* desktop viewport scss goes here */ +/// } +/// +/// /* mobile, tablet & large desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-desktop-only { + @media #{tokens.$bpk-breakpoint-query-desktop-only} { + @content; + } +} diff --git a/packages/unstable__bpk-mixins/_buttons.scss b/packages/unstable__bpk-mixins/_buttons.scss new file mode 100644 index 0000000000..a47d67500a --- /dev/null +++ b/packages/unstable__bpk-mixins/_buttons.scss @@ -0,0 +1,568 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'typography.scss'; +@use 'utils.scss'; + +//// +/// @group buttons +//// + +/// Standard button. +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// } + +@mixin bpk-button { + display: inline-block; + min-height: tokens.$bpk-button-height; + margin: 0; + padding: (6 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-base(); + border: 0; + border-radius: tokens.$bpk-button-border-radius; + text-align: center; + text-decoration: none; + cursor: pointer; + vertical-align: middle; + user-select: none; + + @include typography.bpk-label-1; + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-background-color, + tokens.$bpk-private-button-primary-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-hover-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-hover-background-color, + tokens.$bpk-private-button-primary-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-active-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-active-background-color, + tokens.$bpk-private-button-primary-pressed-background-day + ); + } + + &:disabled { + background-color: tokens.$bpk-private-button-disabled-background-day; + color: tokens.$bpk-text-disabled-day; + cursor: not-allowed; + } +} + +/// Large button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--large(); +/// } + +@mixin bpk-button--large { + min-height: tokens.$bpk-button-large-height; + padding: (12 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-base(); +} + +/// PrimaryOnDark button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--primary-on-dark(); +/// } + +@mixin bpk-button--primary-on-dark { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-dark-text-color, + tokens.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-dark-background-color, + tokens.$bpk-private-button-primary-on-dark-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-dark-hover-text-color, + tokens.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-dark-hover-background-color, + tokens.$bpk-private-button-primary-on-dark-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-dark-active-text-color, + tokens.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-dark-active-background-color, + tokens.$bpk-private-button-primary-on-dark-pressed-background-day + ); + } + + &:disabled { + background-color: tokens.$bpk-private-button-primary-on-dark-disabled-background-day; + color: tokens.$bpk-private-button-primary-on-dark-disabled-foreground-day; + } +} + +/// PrimaryOnLight button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--primary-on-light(); +/// } + +@mixin bpk-button--primary-on-light { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-light-text-color, + tokens.$bpk-text-on-dark-night + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-light-background-color, + tokens.$bpk-private-button-primary-on-light-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-light-hover-text-color, + tokens.$bpk-text-on-dark-night + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-light-hover-background-color, + tokens.$bpk-private-button-primary-on-light-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-light-active-text-color, + tokens.$bpk-text-on-dark-night + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-light-active-background-color, + tokens.$bpk-private-button-primary-on-light-pressed-background-day + ); + } + + &:disabled { + background-color: tokens.$bpk-private-button-primary-on-light-disabled-background-day; + color: tokens.$bpk-private-button-primary-on-light-disabled-foreground-day; + } +} + +/// Secondary button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--secondary(); +/// } + +@mixin bpk-button--secondary { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-text-color, + tokens.$bpk-text-primary-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-background-color, + tokens.$bpk-private-button-secondary-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-hover-text-color, + tokens.$bpk-text-primary-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-hover-background-color, + tokens.$bpk-private-button-secondary-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-active-text-color, + tokens.$bpk-text-primary-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-active-background-color, + tokens.$bpk-private-button-secondary-pressed-background-day + ); + } + + &:disabled { + background-color: tokens.$bpk-private-button-disabled-background-day; + color: tokens.$bpk-text-disabled-day; + } +} + +/// Secondary on dark button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--secondary-on-dark(); +/// } + +@mixin bpk-button--secondary-on-dark { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-on-dark-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-on-dark-background-color, + tokens.$bpk-private-button-secondary-on-dark-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-on-dark-hover-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-on-dark-hover-background-color, + tokens.$bpk-private-button-secondary-on-dark-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-on-dark-active-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-on-dark-active-background-color, + tokens.$bpk-private-button-secondary-on-dark-pressed-background-day + ); + } + + &:disabled { + background-color: tokens.$bpk-private-button-secondary-on-dark-disabled-background-day; + color: tokens.$bpk-private-button-secondary-on-dark-disabled-foreground-day; + } +} + +/// Destructive button. Modifies the bpk-button & bpk-button--secondary lib. +/// +/// @require {mixin} bpk-button +/// @require {mixin} bpk-button--secondary +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--secondary(); +/// @include bpk-button--destructive(); +/// } + +@mixin bpk-button--destructive { + @include utils.bpk-themeable-property( + color, + --bpk-button-destructive-text-color, + tokens.$bpk-private-button-destructive-normal-foreground-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-destructive-background-color, + tokens.$bpk-private-button-destructive-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-destructive-hover-text-color, + tokens.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-destructive-hover-background-color, + tokens.$bpk-private-button-destructive-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-destructive-active-text-color, + tokens.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-destructive-active-background-color, + tokens.$bpk-private-button-destructive-pressed-background-day + ); + } + + &:disabled { + background-color: tokens.$bpk-private-button-disabled-background-day; + color: tokens.$bpk-text-disabled-day; + } +} + +/// Link-style button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--link(); +/// } + +@mixin bpk-button--link { + $vertical-padding: tokens.$bpk-one-pixel-rem * 6; + $vertical-padding-large: tokens.$bpk-one-pixel-rem * 12; + + background: none; /* stylelint-disable-line order/order, order/properties-order */ + box-shadow: none; + + @include typography.bpk-link; + + padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */ + color: tokens.$bpk-private-button-link-normal-foreground-day; + + @include utils.bpk-hover { + background: none; + color: tokens.$bpk-private-button-link-pressed-foreground-day; + text-decoration: none; + } + + &:active { + background: none; + color: tokens.$bpk-private-button-link-pressed-foreground-day; + text-decoration: none; + } + + &:disabled { + background: none; + color: tokens.$bpk-text-disabled-day; + text-decoration: none; + } + + &-large { + padding: $vertical-padding-large 0; + } +} + +/// Link on dark button. Modifies the bpk-button & bpk-button--link lib. +/// +/// @require {mixin} bpk-button + +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--link-on-dark(); +/// } + +@mixin bpk-button--link-on-dark { + @include bpk-button--link; + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-text-color, + tokens.$bpk-private-button-link-on-dark-normal-foreground-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-hover-text-color, + tokens.$bpk-private-button-link-on-dark-pressed-foreground-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-active-text-color, + tokens.$bpk-private-button-link-on-dark-pressed-foreground-day + ); + } + + &:visited { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-text-color, + tokens.$bpk-private-button-link-on-dark-normal-foreground-day + ); + } + + &:disabled { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-disabled-color, + tokens.$bpk-private-button-link-on-dark-disabled-foreground-day + ); + } +} + +/// Icon-only button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--icon-only(); +/// } + +@mixin bpk-button--icon-only { + $horizontal-padding: (tokens.$bpk-button-height - tokens.$bpk-icon-size-sm) * 0.5; // extra padding so that the width will be the same size as the size using sm icons + + padding-right: $horizontal-padding; + padding-left: $horizontal-padding; + border-radius: tokens.$bpk-button-border-radius; +} + +/// Large icon-only button. Modifies the bpk-button & bpk-button--large lib. +/// +/// @require {mixin} bpk-button +/// @require {mixin} bpk-button--large +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--large(); +/// @include bpk-button--large-icon-only(); +/// } + +@mixin bpk-button--large-icon-only { + $horizontal-padding: (tokens.$bpk-button-large-height - tokens.$bpk-icon-size-lg) * 0.5; // extra padding so that the width will be the same size as the size using lg icons + + padding-right: $horizontal-padding; + padding-left: $horizontal-padding; + border-radius: tokens.$bpk-button-border-radius; +} + +/// Featured button. Modifies the bpk-button +/// +/// @require {mixin} bpk-button +/// @require {mixin} bpk-button--large +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--featured(); +/// } + +@mixin bpk-button--featured { + @include utils.bpk-themeable-property( + color, + --bpk-button-featured-text-color, + tokens.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-featured-background-color, + tokens.$bpk-private-button-featured-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-featured-hover-text-color, + tokens.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-featured-hover-background-color, + tokens.$bpk-private-button-featured-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-featured-active-text-color, + tokens.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-featured-active-background-color, + tokens.$bpk-private-button-featured-pressed-background-day + ); + } + + &:disabled { + background-color: tokens.$bpk-private-button-disabled-background-day; + color: tokens.$bpk-text-disabled-day; + } +} diff --git a/packages/unstable__bpk-mixins/_cards.scss b/packages/unstable__bpk-mixins/_cards.scss new file mode 100644 index 0000000000..5696476cb4 --- /dev/null +++ b/packages/unstable__bpk-mixins/_cards.scss @@ -0,0 +1,94 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'radii.scss'; +@use 'shadows.scss'; +@use 'utils.scss'; + +//// +/// @group cards +//// + +/// Basic card. +/// +/// @example scss +/// .selector { +/// @include bpk-card(); +/// } + +@mixin bpk-card { + position: relative; + display: block; + background-color: tokens.$bpk-card-background-color; + color: tokens.$bpk-text-primary-day; + text-decoration: none; + cursor: pointer; + + @include shadows.bpk-box-shadow-sm; + @include radii.bpk-border-radius-md; + + @include utils.bpk-hover { + &::after { + opacity: 1; + } + } + + // Keep transitions and animations to only transform and opacity. + // This pseudo element solution allows us to animate box-shadow in a performant manner. + // http://tobiasahlin.com/blog/how-to-animate-box-shadow/ + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ''; + transition: opacity tokens.$bpk-duration-sm ease-in-out; + opacity: 0; + pointer-events: none; // To prevent the pseudo element absorbing click events + + @include shadows.bpk-box-shadow-lg; + @include radii.bpk-border-radius-md; + + // pointer-events doesn't work on ie + @media screen\0 { + z-index: -1; + } + } + + &:active::after { + box-shadow: none; + } +} + +/// Adds padding to cards. Modifies the bpk-card mixin. +/// +/// @require {mixin} bpk-card +/// +/// @example scss +/// .selector { +/// @include bpk-card(); +/// @include bpk-card--padded(); +/// } + +@mixin bpk-card--padded { + padding: tokens.$bpk-card-padding; +} diff --git a/packages/unstable__bpk-mixins/_chips.scss b/packages/unstable__bpk-mixins/_chips.scss new file mode 100644 index 0000000000..310cdd6efd --- /dev/null +++ b/packages/unstable__bpk-mixins/_chips.scss @@ -0,0 +1,240 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'borders.scss'; +@use 'margins.scss'; +@use 'shadows.scss'; +@use 'utils.scss'; + +@mixin bpk-chip { + display: inline-flex; + height: tokens.bpk-spacing-xl(); + padding: 0 tokens.bpk-spacing-base(); + align-items: center; + border: none; + border-radius: tokens.$bpk-border-radius-xs * 2; + cursor: pointer; + + &__leading-accessory-view { + display: inline-flex; + fill: currentcolor; + + @include margins.bpk-margin-trailing(tokens.bpk-spacing-md()); + } + + &__trailing-accessory-view { + display: inline-flex; + fill: currentcolor; + + @include margins.bpk-margin-leading(tokens.bpk-spacing-md(), false); + @include margins.bpk-margin-trailing(-1 * tokens.bpk-spacing-md(), false); + } + + &--on-dark { + background-color: transparent; + color: tokens.$bpk-text-on-dark-day; + + @include borders.bpk-border-sm(tokens.$bpk-line-on-dark-day); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(tokens.$bpk-surface-default-day); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(tokens.$bpk-surface-default-day); + } + + &-selected { + @include utils.bpk-themeable-property( + color, + --bpk-chip-on-dark-selected-text-color, + tokens.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-dark-selected-background-color, + tokens.$bpk-surface-default-day + ); + @include borders.bpk-border-sm(transparent); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(transparent); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(transparent); + } + } + + &-dismissible { + @include utils.bpk-hover { + svg { + fill: currentcolor; + } + } + + &:active:not(:disabled) { + svg { + fill: currentcolor; + } + } + + &__trailing-accessory-view { + fill: tokens.$bpk-text-secondary-day; + } + } + + &-disabled { + @include borders.bpk-border-sm(transparent); + } + } + + &--default { + background-color: transparent; + color: tokens.$bpk-text-primary-day; + + @include borders.bpk-border-sm(tokens.$bpk-line-day); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(tokens.$bpk-core-primary-day); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(tokens.$bpk-core-primary-day); + } + + &-selected { + @include utils.bpk-themeable-property( + color, + --bpk-chip-default-selected-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-default-selected-background-color, + tokens.$bpk-core-primary-day + ); + @include borders.bpk-border-sm(transparent); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(transparent); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(transparent); + } + } + + &-dismissible { + @include utils.bpk-hover { + svg { + fill: currentcolor; + } + } + + &:active:not(:disabled) { + svg { + fill: currentcolor; + } + } + + &__trailing-accessory-view { + fill: tokens.$bpk-text-disabled-on-dark-day; + } + } + + &-disabled { + @include borders.bpk-border-sm(transparent); + } + } + + &--on-image { + background-color: tokens.$bpk-surface-default-day; + color: tokens.$bpk-text-primary-day; + + @include shadows.bpk-box-shadow-sm; + + @include utils.bpk-hover { + background-color: tokens.$bpk-canvas-contrast-day; + } + + &:active:not(:disabled) { + background-color: tokens.$bpk-canvas-contrast-day; + } + + &-selected { + @include utils.bpk-themeable-property( + color, + --bpk-chip-on-image-selected-text-color, + tokens.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-image-selected-background-color, + tokens.$bpk-core-primary-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-image-selected-hover-background-color, + tokens.$bpk-core-primary-day + ); + } + + &:active:not(:disabled) { + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-image-selected-active-background-color, + tokens.$bpk-core-primary-day + ); + } + } + + &-dismissible { + @include utils.bpk-hover { + svg { + fill: currentcolor; + } + } + + &:active:not(:disabled) { + svg { + fill: currentcolor; + } + } + + &__trailing-accessory-view { + fill: tokens.$bpk-text-disabled-on-dark-day; + } + } + + &-disabled { + @include shadows.bpk-box-shadow-sm; + } + } + + &--disabled { + background-color: tokens.$bpk-private-chip-disabled-background-day; + color: tokens.$bpk-text-disabled-day; + cursor: not-allowed; + } +} diff --git a/packages/unstable__bpk-mixins/_forms.scss b/packages/unstable__bpk-mixins/_forms.scss new file mode 100644 index 0000000000..7dac4c599c --- /dev/null +++ b/packages/unstable__bpk-mixins/_forms.scss @@ -0,0 +1,1049 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use "sass:math"; + +@use 'tokens.scss'; +@use 'typography.scss'; +@use 'utils.scss'; + +//// +/// @group forms +//// + +/// Form input. Can be used for text, email, number, password and tel type inputs. +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// } + +@mixin bpk-input { + display: inline-block; + width: 100%; + height: tokens.$bpk-input-height; + padding: tokens.$bpk-input-padding-y tokens.$bpk-input-padding-x; + border: tokens.$bpk-input-border; + border-radius: tokens.$bpk-input-border-radius; + background: tokens.$bpk-input-background; + color: tokens.$bpk-text-primary-day; + appearance: none; + + &::placeholder { + color: tokens.$bpk-text-secondary-day; + } + + &:disabled { + border-color: tokens.$bpk-input-disabled-border-color; + background: tokens.$bpk-input-background; + color: tokens.$bpk-input-disabled-color; + cursor: not-allowed; + } + + &[type='number'] { + -moz-appearance: textfield; // stylelint-disable property-no-vendor-prefix + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + appearance: none; + } + } + + &[type='number'], + &[type='tel'], + &[type='email'] { + @include utils.bpk-rtl { + text-align: right; + direction: ltr; + } + } + + &::-ms-clear { + display: none; + } +} + +/// Valid form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--valid(); +/// } + +@mixin bpk-input--valid { + padding-right: tokens.bpk-spacing-xl(); + background: tokens.$bpk-input-background + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=') + no-repeat right tokens.bpk-spacing-md() center; + background-size: tokens.$bpk-icon-size-sm tokens.$bpk-icon-size-sm; + + @include utils.bpk-rtl { + padding-right: tokens.$bpk-input-padding-x; + padding-left: tokens.bpk-spacing-xl(); + background-position: left tokens.bpk-spacing-md() center; + } +} + +/// Invalid form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--invalid(); +/// } + +@mixin bpk-input--invalid { + padding-right: tokens.bpk-spacing-xl(); + background: tokens.$bpk-input-background + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==') + no-repeat right tokens.bpk-spacing-md() center; + background-size: tokens.$bpk-icon-size-sm tokens.$bpk-icon-size-sm; + + @include utils.bpk-themeable-property( + border-color, + --bpk-input-invalid-border-color, + tokens.$bpk-form-validation-color + ); + + @include utils.bpk-rtl { + padding-right: tokens.$bpk-input-padding-x; + padding-left: tokens.bpk-spacing-xl(); + background-position: left tokens.bpk-spacing-md() center; + } +} + +/// Clearable form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--clearable(); +/// } + +@mixin bpk-input--clearable { + padding-right: tokens.bpk-spacing-xl(); + + @include utils.bpk-rtl { + padding-right: tokens.$bpk-input-padding-x; + padding-left: tokens.bpk-spacing-xl(); + } + + &:focus { + background: tokens.$bpk-input-background; + } +} + +/// Clearable form input container. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input__container(); +/// } + +@mixin bpk-input__container { + position: relative; + display: inline-block; + width: 100%; +} + +/// Clearable (clear button) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input__clear-button(); +/// } + +@mixin bpk-input__clear-button { + position: absolute; + right: tokens.bpk-spacing-md(); + height: tokens.$bpk-input-height; + + @include utils.bpk-rtl { + right: inherit; + left: tokens.bpk-spacing-md(); + } + + &--large { + right: tokens.bpk-spacing-base(); + height: tokens.$bpk-input-large-height; + + @include utils.bpk-rtl { + left: tokens.bpk-spacing-base(); + } + } +} + +/// Large form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--large(); +/// } + +@mixin bpk-input--large { + height: tokens.$bpk-input-large-height; + padding-right: tokens.bpk-spacing-base(); + padding-left: tokens.bpk-spacing-base(); + + &.bpk-input--valid, + &.bpk-input--invalid, + &.bpk-input--clearable { + padding-right: tokens.bpk-spacing-xxl(); + background-position: right tokens.bpk-spacing-base() center; + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-base(); + padding-left: tokens.bpk-spacing-xxl(); + background-position: left tokens.bpk-spacing-base() center; + } + } +} + +/// Docked (first-child) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked-first-child(); +/// } + +@mixin bpk-input--docked-first-child { + border-right-width: 0; + border-radius: tokens.$bpk-input-border-radius 0 0 tokens.$bpk-input-border-radius; + + @include utils.bpk-rtl { + border-right-width: tokens.$bpk-input-border-width; + border-left-width: 0; + border-radius: 0 tokens.$bpk-input-border-radius tokens.$bpk-input-border-radius 0; + } + + &:focus { + position: relative; // brings outline to the front + } +} + +/// Docked (last-child) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked-last-child(); +/// } + +@mixin bpk-input--docked-last-child { + border-radius: 0 tokens.$bpk-input-border-radius tokens.$bpk-input-border-radius 0; + + @include utils.bpk-rtl { + border-radius: tokens.$bpk-input-border-radius 0 0 tokens.$bpk-input-border-radius; + } + + &:focus { + position: relative; // brings outline to the front + } +} + +/// Docked (middle-child) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked-middle-child(); +/// } + +@mixin bpk-input--docked-middle-child { + border-right-width: 0; + border-radius: 0; + + @include utils.bpk-rtl { + border-right-width: tokens.$bpk-input-border-width; + border-left-width: 0; + } + + &:focus { + position: relative; // brings outline to the front + } +} + +/// Docked form input (inputs must sit side-by-side in the DOM). Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked(); +/// } + +@mixin bpk-input--docked { + &:first-child { + @include bpk-input--docked-first-child; + } + + &:last-child { + @include bpk-input--docked-last-child; + } + + &:not(:first-child):not(:last-child) { + @include bpk-input--docked-middle-child; + } +} + +/// Form select input. +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// } + +@mixin bpk-select { + display: inline-block; + width: 100%; + height: tokens.$bpk-input-height; + padding: tokens.bpk-spacing-md() - (2 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-md(); + padding-right: tokens.bpk-spacing-xl(); + border: solid tokens.$bpk-one-pixel-rem tokens.$bpk-line-day; + border-radius: tokens.$bpk-select-border-radius; + background: tokens.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right tokens.bpk-spacing-md() center; + background-size: tokens.$bpk-input-height * 0.5; + color: tokens.$bpk-text-primary-day; + line-height: (tokens.$bpk-line-height-base - (2 * tokens.$bpk-select-border-width)); + appearance: none; + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-md(); + padding-left: tokens.bpk-spacing-xl(); + background-position: left tokens.bpk-spacing-md() center; + } + + @media screen\0 { + /* stylelint-disable-next-line declaration-no-important */ + padding: tokens.bpk-spacing-md() !important; + /* stylelint-disable-next-line declaration-no-important */ + background-image: none !important; + } + + &:disabled { + border-color: tokens.$bpk-surface-highlight-day; + background: tokens.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right tokens.bpk-spacing-md() center; + background-size: tokens.$bpk-input-height * 0.5; + color: tokens.$bpk-text-disabled-day; + cursor: not-allowed; + } +} + +/// Large form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--large(); +/// } + +@mixin bpk-select--large { + height: tokens.$bpk-input-large-height; + padding: tokens.bpk-spacing-md() tokens.bpk-spacing-base(); + padding-right: tokens.bpk-spacing-xxl(); + background: tokens.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right tokens.bpk-spacing-base() center; + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-base(); + padding-left: tokens.bpk-spacing-xxl(); + background-position: left tokens.bpk-spacing-base() center; + } +} + +/// Docked (first-child) form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked-first-child(); +/// } + +@mixin bpk-select--docked-first-child { + border-right-width: 0; + border-radius: tokens.$bpk-select-border-radius 0 0 tokens.$bpk-select-border-radius; + + @include utils.bpk-rtl { + border-right-width: tokens.$bpk-select-border-width; + border-left-width: 0; + border-radius: 0 tokens.$bpk-select-border-radius tokens.$bpk-select-border-radius 0; + } +} + +/// Docked (last-child) form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked-last-child(); +/// } + +@mixin bpk-select--docked-last-child { + border-radius: 0 tokens.$bpk-select-border-radius tokens.$bpk-select-border-radius 0; + + @include utils.bpk-rtl { + border-radius: tokens.$bpk-select-border-radius 0 0 tokens.$bpk-select-border-radius; + } +} + +/// Docked (middle-child) form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked-middle-child(); +/// } + +@mixin bpk-select--docked-middle-child { + border-right-width: 0; + border-radius: 0; + + @include utils.bpk-rtl { + border-right-width: tokens.$bpk-select-border-width; + border-left-width: 0; + } +} + +/// Docked form select input (selects must sit side-by-side in the DOM). Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked(); +/// } + +@mixin bpk-select--docked { + &:first-child { + @include bpk-select--docked-first-child; + } + + &:last-child { + @include bpk-select--docked-last-child; + } + + &:not(:first-child):not(:last-child) { + @include bpk-select--docked-middle-child; + } +} + +/// Invalid form input. Modifies the bpk-selct mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--invalid(); +/// } + +@mixin bpk-select--invalid { + padding-right: tokens.bpk-spacing-xl(); + background: tokens.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right tokens.bpk-spacing-md() center; + background-size: tokens.$bpk-input-height * 0.5; + + @include utils.bpk-themeable-property( + border-color, + --bpk-select-invalid-border-color, + tokens.$bpk-form-validation-color + ); + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-md(); + padding-left: tokens.bpk-spacing-xl(); + background-position: left tokens.bpk-spacing-md() center; + } +} + +/// Form checkbox. Should be applied to containing label element. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// } + +@mixin bpk-checkbox { + position: relative; + display: inline-block; + padding-left: tokens.bpk-spacing-lg() + tokens.bpk-spacing-sm(); + + @include typography.bpk-text; + @include typography.bpk-body-default; + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-lg() + tokens.bpk-spacing-sm(); + padding-left: 0; + } +} + +/// Label for checkbox. Should be applied to label text element. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__label(); +/// } + +@mixin bpk-checkbox__label { + vertical-align: baseline; +} + +/// Small label for checkbox. Should be applied to label text element. +/// Modifies bpk-checkbox__label. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__label(); +/// @include bpk-checkbox__label--small(); +/// } + +@mixin bpk-checkbox__label--small { + @include typography.bpk-text; + @include typography.bpk-caption; +} + +/// White label checkbox. Modifies the bpk-checkbox mixin. +/// +/// @require {mixin} bpk-checkbox +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// @include bpk-checkbox--white(); +/// } + +@mixin bpk-checkbox--white { + color: tokens.$bpk-surface-default-day; +} + +/// Disabled form checkbox. Modifies the bpk-checkbox mixin. +/// +/// @require {mixin} bpk-checkbox +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// @include bpk-checkbox--disabled(); +/// } + +@mixin bpk-checkbox--disabled { + color: tokens.$bpk-label-disabled-color; + cursor: not-allowed; +} + +/// Invalid form checkbox. Modifies the bpk-checkbox mixin. +/// +/// @require {mixin} bpk-checkbox +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// @include bpk-checkbox--invalid(); +/// } + +@mixin bpk-checkbox--invalid { + input[type='checkbox'] { + border: (tokens.$bpk-one-pixel-rem * 3) solid tokens.$bpk-text-error-day; + } +} + +/// Used to create the check/tick inside +/// a checked checkbox. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__checkmark(); +/// } +@mixin bpk-checkbox__checkmark { + &::before, + &::after { + position: absolute; + content: ''; + transform: rotate(45deg); + border-radius: tokens.$bpk-border-size-lg; + background-color: tokens.$bpk-text-primary-inverse-day; + } + + &::before { + top: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem; + left: 0; + width: math.div(tokens.bpk-spacing-lg(), 3); + height: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem; + } + + &::after { + top: tokens.bpk-spacing-sm() * 0.5; + left: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem; + width: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem; + height: tokens.bpk-spacing-md() + (tokens.$bpk-one-pixel-rem * 3); + } + + &:disabled { + &::before, + &::after { + background-color: tokens.$bpk-text-disabled-day; + } + } +} + +/// Form checkbox input. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__input(); +/// } + +@mixin bpk-checkbox__input { + $checkbox-input-size: tokens.bpk-spacing-lg() - (tokens.$bpk-one-pixel-rem * 4); + + position: absolute; + top: (tokens.$bpk-line-height-base - $checkbox-input-size) * 0.5; + left: 0; + width: $checkbox-input-size; + height: $checkbox-input-size; + margin: 0; + padding: 0; + border: (tokens.$bpk-one-pixel-rem * 3) solid tokens.$bpk-text-secondary-day; + border-radius: (tokens.$bpk-one-pixel-rem * 4); + cursor: pointer; + vertical-align: text-bottom; + appearance: none; + + @include utils.bpk-rtl { + right: 0; + left: auto; + } + + @media screen\0 { + /* stylelint-disable-next-line declaration-no-important */ + background: none !important; + } + + &:checked, + &:indeterminate { + @include utils.bpk-themeable-property( + background-color, + --bpk-checkbox-checked-color, + tokens.$bpk-core-accent-day + ); + @include utils.bpk-themeable-property( + border-color, + --bpk-checkbox-checked-color, + tokens.$bpk-core-accent-day + ); + + &:disabled { + border-color: tokens.$bpk-text-disabled-day; + background: none; + } + } + + &:checked:not(:indeterminate) { + @include bpk-checkbox__checkmark; + } + + &:disabled { + border-color: tokens.$bpk-text-disabled-day; + } +} + +/// Form radio button mixin. This is a reusable mixin to set border styles for the radio button. +/// +/// @param {variable} $color +/// +/// @access private +@mixin _bpk-radio-border($color) { + border: tokens.$bpk-border-size-xl solid $color; + border-radius: tokens.$bpk-border-radius-lg; +} + +/// Form radio button. Should be applied to containing label element. +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// } + +@mixin bpk-radio { + position: relative; + display: inline-block; + padding-left: tokens.bpk-spacing-lg() + tokens.bpk-spacing-sm(); + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-lg() + tokens.bpk-spacing-sm(); + padding-left: 0; + } +} + +/// Disabled form radio button. Modifies the bpk-radio mixin. +/// +/// @require {mixin} bpk-radio +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// @include bpk-radio--disabled(); +/// } + +@mixin bpk-radio--disabled { + color: tokens.$bpk-label-disabled-color; + cursor: not-allowed; +} + +/// White label radio button. Modifies the bpk-radio mixin. +/// +/// @require {mixin} bpk-radio +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// @include bpk-radio--white(); +/// } + +@mixin bpk-radio--white { + color: tokens.$bpk-text-primary-inverse-day; + + input[type='radio'] { + background: tokens.$bpk-text-primary-inverse-day; + } +} + +/// Invalid radio button. Modifies the bpk-radio mixin. +/// +/// @require {mixin} bpk-radio +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// @include bpk-radio--invalid(); +/// } + +@mixin bpk-radio--invalid { + input[type='radio'] { + @include _bpk-radio-border(tokens.$bpk-text-error-day); + } +} + +/// Form radio input. +/// +/// @example scss +/// .selector { +/// @include bpk-radio__input(); +/// } + +@mixin bpk-radio__input { + $bpk-radio-size: tokens.bpk-spacing-lg() - (tokens.$bpk-one-pixel-rem * 4); + + position: absolute; + top: 0; + left: 0; + width: $bpk-radio-size; + height: $bpk-radio-size; + margin: 0; + padding: 0; + cursor: pointer; + vertical-align: text-bottom; + appearance: none; + + @include _bpk-radio-border(tokens.$bpk-text-secondary-day); + + @include utils.bpk-rtl { + right: 0; + left: auto; + } + + @media screen\0 { + /* stylelint-disable-next-line declaration-no-important */ + background: none !important; + } + + &:checked { + @include utils.bpk-themeable-property( + border-color, + --bpk-radio-checked-color, + tokens.$bpk-core-accent-day + ); + + &:disabled { + border-color: tokens.$bpk-text-disabled-day; + } + } + + &:disabled { + border-color: tokens.$bpk-text-disabled-day; + } +} + +/// Form label. +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// } + +@mixin bpk-label { + display: block; + color: tokens.$bpk-text-primary-day; + font-size: tokens.$bpk-font-size-xs; + font-weight: tokens.$bpk-font-weight-bold; + line-height: tokens.$bpk-line-height-xs; +} + +/// Invalid form label. Modifies the bpk-label mixin. +/// +/// @require {mixin} bpk-label +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// @include bpk-label--invalid(); +/// } + +@mixin bpk-label--invalid { + @include utils.bpk-themeable-property( + color, + --bpk-form-validation-text-color, + tokens.$bpk-form-validation-color + ); +} + +/// White form label. Modifies the bpk-label mixin. +/// +/// @require {mixin} bpk-label +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// @include bpk-label--white(); +/// } + +@mixin bpk-label--white { + color: tokens.$bpk-color-white; +} + +/// Disabled form label. Modifies the bpk-label mixin. +/// +/// @require {mixin} bpk-label +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// @include bpk-label--disabled(); +/// } + +@mixin bpk-label--disabled { + color: tokens.$bpk-label-disabled-color; + cursor: not-allowed; +} + +/// Form validation. +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation(); +/// } + +@mixin bpk-form-validation { + position: relative; + transform: translateY(-#{tokens.bpk-spacing-base()}); + transition: + opacity tokens.$bpk-duration-sm ease-in-out, + transform tokens.$bpk-duration-sm ease-in-out; + opacity: 0; + + @include utils.bpk-themeable-property( + color, + --bpk-form-validation-text-color, + tokens.$bpk-form-validation-color + ); +} + +/// Form validation transition state. Modifies the bpk-form-validation mixin. +/// +/// @require {mixin} bpk-form-validation +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation(); +/// +/// &--appear { +/// @include bpk-form-validation--appear(); +/// } +/// } + +@mixin bpk-form-validation--appear { + transform: translateY(0); + opacity: 1; +} + +/// Checkbox form validation. Modifies the bpk-form-validation mixin. +/// +/// @require {mixin} bpk-form-validation +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation(); +/// +/// &--is-checkbox { +/// @include bpk-form-validation--is-checkbox(); +/// } +/// } + +@mixin bpk-form-validation--is-checkbox { + display: inline-block; +} + +/// Form validation container. +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation__container(); +/// } + +@mixin bpk-form-validation__container { + margin-top: tokens.bpk-spacing-md(); + font-size: tokens.$bpk-font-size-xs; +} + +/// Form textarea. +/// +/// @example scss +/// .selector { +/// @include bpk-textarea(); +/// } + +@mixin bpk-textarea { + display: inline-block; + width: 100%; + max-width: 100%; + min-height: tokens.bpk-spacing-md() * 11; + padding: tokens.$bpk-input-padding-y tokens.$bpk-input-padding-x; + border: tokens.$bpk-input-border; + border-radius: tokens.$bpk-input-border-radius; + background: tokens.$bpk-input-background; + color: tokens.$bpk-text-primary-day; + appearance: none; + + &::placeholder { + color: tokens.$bpk-text-secondary-day; + } + + &:disabled { + border-color: tokens.$bpk-input-disabled-border-color; + background: tokens.$bpk-input-background; + color: tokens.$bpk-input-disabled-color; + cursor: not-allowed; + } + + &::-ms-clear { + display: none; + } +} + +/// Invalid form input. Modifies the bpk-textarea mixin. +/// +/// @require {mixin} bpk-textarea +/// +/// @example scss +/// .selector { +/// @include bpk-textarea(); +/// @include bpk-textarea--invalid(); +/// } + +@mixin bpk-textarea--invalid { + padding-right: tokens.bpk-spacing-xl(); + background: tokens.$bpk-input-background + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==') + no-repeat right tokens.bpk-spacing-md() center; + + @include utils.bpk-themeable-property( + border-color, + --bpk-textarea-invalid-border-color, + tokens.$bpk-form-validation-color + ); + + @include utils.bpk-rtl { + padding-right: tokens.$bpk-input-padding-x; + padding-left: tokens.bpk-spacing-xl(); + background-position: left tokens.bpk-spacing-md() center; + + &.bpk-textarea--large { + padding-right: tokens.bpk-spacing-base(); + padding-left: tokens.bpk-spacing-xxl(); + background-position: right tokens.bpk-spacing-base() center; + } + } +} + +@mixin bpk-textarea--large { + min-height: 6 * tokens.bpk-spacing-base(); + padding-right: tokens.bpk-spacing-base(); + padding-left: tokens.bpk-spacing-base(); + + &.bpk-textarea--invalid { + padding-right: tokens.bpk-spacing-xxl(); + background-position: right tokens.bpk-spacing-base() center; + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-base(); + padding-left: tokens.bpk-spacing-xxl(); + background-position: left tokens.bpk-spacing-base() center; + } + } +} diff --git a/packages/unstable__bpk-mixins/_icons.scss b/packages/unstable__bpk-mixins/_icons.scss new file mode 100644 index 0000000000..b7672b91d4 --- /dev/null +++ b/packages/unstable__bpk-mixins/_icons.scss @@ -0,0 +1,88 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'utils.scss'; + +//// +/// @group svgs +//// + +/// Button alignment utility. +/// +/// @access private + +@mixin _bpk-svg--align-to-button() { + vertical-align: text-bottom; +} + +/// Large button alignment utility. +/// +/// @access private + +@mixin _bpk-svg--align-to-large-button() { + margin-top: (tokens.$bpk-private-button-line-height - tokens.$bpk-icon-size-lg) * 0.5; + vertical-align: top; +} + +/// Align to button. Modifies the bpk-icon-sm mixin. +/// +/// @require {mixin} bpk-icon-sm +/// +/// @example scss +/// .selector { +/// @include bpk-icon-sm(flight-sky-gray-tint-02); +/// @include bpk-icon-sm--align-to-button(); +/// } + +@mixin bpk-icon-sm--align-to-button() { + @include _bpk-svg--align-to-button; +} + +/// Align to large button. Modifies the bpk-icon-lg mixin. +/// +/// @require {mixin} bpk-icon-lg +/// +/// @example scss +/// .selector { +/// @include bpk-icon-lg(flight-sky-gray-tint-02); +/// @include bpk-icon-lg--align-to-large-button(); +/// } + +@mixin bpk-icon-lg--align-to-large-button() { + @include _bpk-svg--align-to-large-button; +} + +/// RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin. +/// +/// @require {mixin} bpk-icon-sm +/// @require {mixin} bpk-icon-lg +/// +/// @example scss +/// .selector { +/// @include bpk-icon-sm(flight-sky-gray-tint-02); +/// @include bpk-icon--rtl-support(); +/// } + +@mixin bpk-icon--rtl-support() { + @include utils.bpk-rtl { + transform: scaleX(-1); + } +} diff --git a/packages/unstable__bpk-mixins/_index.scss b/packages/unstable__bpk-mixins/_index.scss new file mode 100644 index 0000000000..420cf345e2 --- /dev/null +++ b/packages/unstable__bpk-mixins/_index.scss @@ -0,0 +1,38 @@ +/* + * 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. + */ + +@forward 'tokens'; +@forward 'badges'; +@forward 'borders'; +@forward 'breakpoints'; +@forward 'buttons'; +@forward 'cards'; +@forward 'chips'; +@forward 'forms'; +@forward 'icons'; +@forward 'layers'; +@forward 'margins'; +@forward 'panels'; +@forward 'radii'; +@forward 'scroll-indicators'; +@forward 'shadows'; +@forward 'spinners'; +@forward 'typography'; +@forward 'utils'; + +@warn "You're using blank import of all mixins. This might affect performance of your build tool and your bundle size. \nConsider switching to more granular imports, e.g. @use '@skyscanner/backpack-web/bpk-mixins/buttons'"; diff --git a/packages/unstable__bpk-mixins/_layers.scss b/packages/unstable__bpk-mixins/_layers.scss new file mode 100644 index 0000000000..666ad8796c --- /dev/null +++ b/packages/unstable__bpk-mixins/_layers.scss @@ -0,0 +1,199 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'radii.scss'; +@use 'shadows.scss'; +@use 'utils.scss'; + +//// +/// @group layers +//// + +/// Layer base styles. +/// +/// @example scss +/// .selector { +/// @include bpk-layer; +/// } + +@mixin bpk-layer( + $background-color: tokens.$bpk-color-white, + $border-color: tokens.$bpk-surface-highlight-day +) { + border: tokens.$bpk-one-pixel-rem solid $border-color; + background-color: $background-color; + + @include radii.bpk-border-radius-sm; + @include shadows.bpk-box-shadow-lg; +} + +/// Layer arrow base styles. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// } + +@mixin bpk-layer-arrow($arrow-size) { + position: absolute; + pointer-events: none; + + &::before, + &::after { + position: absolute; + content: ''; + display: block; + } + + &::before { + border: ($arrow-size + tokens.$bpk-one-pixel-rem) solid transparent; + } + + &::after { + border: $arrow-size solid transparent; + } +} + +/// Layer top arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-top(1rem); +/// } + +@mixin bpk-layer-arrow-top( + $arrow-size, + $arrow-color: tokens.$bpk-color-white, + $border-color: tokens.$bpk-color-sky-gray-tint-06 +) { + bottom: 100%; + width: ($arrow-size * 2); + height: $arrow-size; + + &::before { + top: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem); + margin-left: -1 * tokens.$bpk-one-pixel-rem; + border-bottom-color: $border-color; + + @include utils.bpk-rtl { + margin-right: -1 * tokens.$bpk-one-pixel-rem; + margin-left: 0; + } + } + + &::after { + top: -1 * $arrow-size + tokens.$bpk-one-pixel-rem; + border-bottom-color: $arrow-color; + } +} + +/// Layer right arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-right(1rem); +/// } + +@mixin bpk-layer-arrow-right( + $arrow-size, + $arrow-color: tokens.$bpk-color-white, + $border-color: tokens.$bpk-color-sky-gray-tint-06 +) { + left: 100%; + width: $arrow-size; + height: ($arrow-size * 2); + + &::before { + right: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem); + margin-top: -1 * tokens.$bpk-one-pixel-rem; + border-left-color: $border-color; + } + + &::after { + right: -1 * $arrow-size + tokens.$bpk-one-pixel-rem; + border-left-color: $arrow-color; + } +} + +/// Layer bottom arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-bottom(1rem); +/// } + +@mixin bpk-layer-arrow-bottom( + $arrow-size, + $arrow-color: tokens.$bpk-color-white, + $border-color: tokens.$bpk-color-sky-gray-tint-06 +) { + top: 100%; + width: ($arrow-size * 2); + height: $arrow-size; + + &::before { + bottom: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem); + margin-left: -1 * tokens.$bpk-one-pixel-rem; + border-top-color: $border-color; + + @include utils.bpk-rtl { + margin-right: -1 * tokens.$bpk-one-pixel-rem; + margin-left: 0; + } + } + + &::after { + bottom: -1 * $arrow-size + tokens.$bpk-one-pixel-rem; + border-top-color: $arrow-color; + } +} + +/// Layer left arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-left(1rem); +/// } + +@mixin bpk-layer-arrow-left( + $arrow-size, + $arrow-color: tokens.$bpk-color-white, + $border-color: tokens.$bpk-color-sky-gray-tint-06 +) { + right: 100%; + width: $arrow-size; + height: ($arrow-size * 2); + + &::before { + left: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem); + margin-top: -1 * tokens.$bpk-one-pixel-rem; + border-right-color: $border-color; + } + + &::after { + left: -1 * $arrow-size + tokens.$bpk-one-pixel-rem; + border-right-color: $arrow-color; + } +} diff --git a/packages/unstable__bpk-mixins/_margins.scss b/packages/unstable__bpk-mixins/_margins.scss new file mode 100644 index 0000000000..c3a0f801c4 --- /dev/null +++ b/packages/unstable__bpk-mixins/_margins.scss @@ -0,0 +1,75 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'utils.scss'; + +/// RTL aware leading margin +/// +/// @param {string} $margin The desired leading margin. +/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-margin-leading(bpk-spacing-base()); +/// } +@mixin bpk-margin-leading($margin, $resetOppositeMargin: true) { + margin-left: $margin; + + @if $resetOppositeMargin { + margin-right: 0; + } + + @include utils.bpk-rtl { + @if $resetOppositeMargin { + margin-left: 0; + } + + margin-right: $margin; + } +} + +/// RTL aware trailing margin +/// +/// @param {string} $margin The desired trailing margin. +/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-margin-trailing(bpk-spacing-base()); +/// } +@mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) { + @if $resetOppositeMargin { + margin-left: 0; + } + + margin-right: $margin; + + @include utils.bpk-rtl { + margin-left: $margin; + + @if $resetOppositeMargin { + margin-right: 0; + } + } +} diff --git a/packages/unstable__bpk-mixins/_panels.scss b/packages/unstable__bpk-mixins/_panels.scss new file mode 100644 index 0000000000..e572f58ceb --- /dev/null +++ b/packages/unstable__bpk-mixins/_panels.scss @@ -0,0 +1,71 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'borders.scss'; +@use 'radii.scss'; + +//// +/// @group panels +//// + +/// Basic panel. +/// +/// @example scss +/// .selector { +/// @include @bpk-panel() +/// } +@mixin bpk-panel { + display: block; + background-color: tokens.$bpk-card-background-color; + + @include borders.bpk-border-sm(tokens.$bpk-panel-border-color); + @include radii.bpk-border-radius-md; +} + +/// Adds padding to panels. Modifies the bpk-panel mixin. +/// +/// @require {mixin} bpk-panel +/// +/// @example scss +/// .selector { +/// @include bpk-panel(); +/// @include bpk-panel--padded(); +/// } +@mixin bpk-panel--padded { + padding: tokens.$bpk-card-padding; +} + +/// Makes panel full width by removing left and right border. +/// Modifies the bpk-panel mixin. +/// +/// @require {mixin} bpk-panel +/// +/// @example scss +/// .selector { +/// @include bpk-panel(); +/// @include bpk-panel--full-width(); +/// } +@mixin bpk-panel--full-width { + border-radius: 0; + box-shadow: + tokens.$bpk-panel-border-color 0 -1 * tokens.$bpk-one-pixel-rem 0 0 inset, + tokens.$bpk-panel-border-color 0 tokens.$bpk-one-pixel-rem 0 0 inset; +} diff --git a/packages/unstable__bpk-mixins/_radii.scss b/packages/unstable__bpk-mixins/_radii.scss new file mode 100644 index 0000000000..50501452d5 --- /dev/null +++ b/packages/unstable__bpk-mixins/_radii.scss @@ -0,0 +1,80 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; + +//// +/// @group radii +//// + +/// Extra small border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-xs(); +/// } + +@mixin bpk-border-radius-xs { + border-radius: tokens.$bpk-border-radius-xs; +} + +/// Small border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-sm(); +/// } + +@mixin bpk-border-radius-sm { + border-radius: tokens.$bpk-border-radius-sm; +} + +/// Medium border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-md(); +/// } + +@mixin bpk-border-radius-md { + border-radius: tokens.$bpk-border-radius-md; +} + +/// Large border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-lg(); +/// } + +@mixin bpk-border-radius-lg { + border-radius: tokens.$bpk-border-radius-lg; +} + +/// Extra large border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-xl(); +/// } + +@mixin bpk-border-radius-xl { + border-radius: tokens.$bpk-border-radius-xl; +} diff --git a/packages/unstable__bpk-mixins/_scroll-indicators.scss b/packages/unstable__bpk-mixins/_scroll-indicators.scss new file mode 100644 index 0000000000..97d1aba976 --- /dev/null +++ b/packages/unstable__bpk-mixins/_scroll-indicators.scss @@ -0,0 +1,79 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; + +//// +/// @group scroll-indicator +//// + +/// Scroll indicator utility. +/// +/// @access private + +@mixin _bpk-scroll-indicator($gradient-color, $direction: 'left') { + $gradient-direction: if($direction == 'left', 90deg, 270deg); + + position: absolute; + top: 0; + bottom: 0; + content: ' '; + display: block; + z-index: 1; + width: tokens.bpk-spacing-xl(); + background-image: linear-gradient( + $gradient-direction, + rgba($gradient-color, 1), + rgba($gradient-color, 0) + ); + pointer-events: none; + + @if $direction == 'left' { + left: 0; + } @else { + right: 0; + } +} + +/// Left-sided scroll indicator. +/// +/// @example scss +/// .selector { +/// @include bpk-scroll-indicator-left($bpk-color-grey-100); +/// } + +@mixin bpk-scroll-indicator-left($gradient-color) { + &::before { + @include _bpk-scroll-indicator($gradient-color, 'left'); + } +} + +/// Right-sided scroll indicator. +/// +/// @example scss +/// .selector { +/// @include bpk-scroll-indicator-right($bpk-color-grey-100); +/// } + +@mixin bpk-scroll-indicator-right($gradient-color) { + &::after { + @include _bpk-scroll-indicator($gradient-color, 'right'); + } +} diff --git a/packages/unstable__bpk-mixins/_shadows.scss b/packages/unstable__bpk-mixins/_shadows.scss new file mode 100644 index 0000000000..0fbe78ff95 --- /dev/null +++ b/packages/unstable__bpk-mixins/_shadows.scss @@ -0,0 +1,58 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; + +//// +/// @group box-shadows +//// + +/// Small box shadow. +/// +/// @example scss +/// .selector { +/// @include bpk-box-shadow-sm(); +/// } + +@mixin bpk-box-shadow-sm { + box-shadow: tokens.$bpk-box-shadow-sm; +} + +/// Large box shadow. +/// +/// @example scss +/// .selector { +/// @include bpk-box-shadow-lg(); +/// } + +@mixin bpk-box-shadow-lg { + box-shadow: tokens.$bpk-box-shadow-lg; +} + +/// Extra large box shadow. +/// +/// @example scss +/// .selector { +/// @include bpk-box-shadow-xl(); +/// } + +@mixin bpk-box-shadow-xl { + box-shadow: tokens.$bpk-box-shadow-xl; +} diff --git a/packages/unstable__bpk-mixins/_spinners.scss b/packages/unstable__bpk-mixins/_spinners.scss new file mode 100644 index 0000000000..30fad21f1d --- /dev/null +++ b/packages/unstable__bpk-mixins/_spinners.scss @@ -0,0 +1,102 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'icons.scss'; +@use 'utils.scss'; + +@keyframes bpk-keyframe-spin { + 100% { + transform: rotate(1turn); + } +} + +/// Small spinner. +/// +/// @param {key} $spinner - The key of the desired SVG datauri from the $bpk-spinners map. +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(spinner-sky-gray-tint-02); +/// } + +@mixin bpk-spinner() { + width: tokens.bpk-spacing-base(); + height: tokens.bpk-spacing-base(); + animation: bpk-keyframe-spin 600ms linear infinite; +} + +/// Large spinner. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(spinner-sky-gray-tint-02); +/// @include bpk-spinner--lg(); +/// } + +@mixin bpk-spinner--lg() { + width: tokens.bpk-spacing-lg(); + height: tokens.bpk-spacing-lg(); +} + +/// Extra large spinner. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(spinner-sky-gray-tint-02); +/// @include bpk-spinner--xl(); +/// } + +@mixin bpk-spinner--xl() { + width: tokens.bpk-spacing-xl(); + height: tokens.bpk-spacing-xl(); +} + +/// Align spinner to button. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(); +/// @include bpk-icon--align-to-button(); +/// } + +@mixin bpk-spinner--align-to-button() { + vertical-align: baseline; +} + +/// Align spinner to large button. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(); +/// @include bpk-spinner--align-to-large-button(); +/// } + +@mixin bpk-spinner--align-to-large-button() { + @include icons.bpk-icon-lg--align-to-large-button; +} diff --git a/packages/bpk-mixins/sass-functions.js b/packages/unstable__bpk-mixins/_tokens.scss similarity index 64% rename from packages/bpk-mixins/sass-functions.js rename to packages/unstable__bpk-mixins/_tokens.scss index 42d0c191d9..66ad285332 100644 --- a/packages/bpk-mixins/sass-functions.js +++ b/packages/unstable__bpk-mixins/_tokens.scss @@ -16,14 +16,4 @@ * limitations under the License. */ -// We disable eslint here as this package is listed as a peerDep so consumers are required to install this when using this package. - -const nodeSass = require('node-sass'); - -module.exports = { - 'encodebase64($string)': (str) => { - const buffer = Buffer.from(str.getValue()); - - return nodeSass.types.String(buffer.toString('base64')); - }, -}; +@forward '@skyscanner/bpk-foundations-web/tokens/base.default'; diff --git a/packages/unstable__bpk-mixins/_typography.scss b/packages/unstable__bpk-mixins/_typography.scss new file mode 100644 index 0000000000..1f651107d2 --- /dev/null +++ b/packages/unstable__bpk-mixins/_typography.scss @@ -0,0 +1,1039 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'tokens.scss'; +@use 'borders.scss'; +@use 'radii.scss'; +@use 'utils.scss'; + +//// +/// @group typography +//// + +/// Type factory. +/// +/// @param {variable} $font-size +/// @param {variable} $line-height +/// @param {variable} $font-weight false +/// @param {variable} $letter-spacing false +/// +/// @access private + +@mixin _bpk-text-factory( + $font-size, + $line-height, + $font-weight: false, + $letter-spacing: false +) { + font-size: $font-size; + line-height: $line-height; + + @if $font-weight { + font-weight: $font-weight; + } + + @if $letter-spacing { + letter-spacing: $letter-spacing; + } +} + +/// Text margin reset. +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// } + +@mixin bpk-text { + margin: 0; +} + +/// Extra small text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xs; +/// } + +@mixin bpk-text--xs { + @include _bpk-text-factory( + tokens.$bpk-font-size-xs, + tokens.$bpk-line-height-xs, + tokens.$bpk-font-weight-book + ); +} + +/// Extra small text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xs; +/// } + +@mixin bpk-text-xs { + @include bpk-text--xs; +} + +/// Small text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--sm; +/// } + +@mixin bpk-text--sm { + @include _bpk-text-factory( + tokens.$bpk-font-size-sm, + tokens.$bpk-line-height-sm, + tokens.$bpk-font-weight-book + ); +} + +/// Small text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-sm; +/// } + +@mixin bpk-text-sm { + @include bpk-text--sm; +} + +/// Base text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--base; +/// } + +@mixin bpk-text--base { + @include _bpk-text-factory( + tokens.$bpk-font-size-base, + tokens.$bpk-line-height-base, + tokens.$bpk-font-weight-book + ); +} + +/// Base text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-base; +/// } + +@mixin bpk-text-base { + @include bpk-text--base; +} + +/// Large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--lg; +/// } + +@mixin bpk-text--lg { + @include _bpk-text-factory( + tokens.$bpk-font-size-lg, + tokens.$bpk-line-height-lg, + tokens.$bpk-font-weight-book + ); +} + +/// Large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-lg; +/// } + +@mixin bpk-text-lg { + @include bpk-text--lg; +} + +/// Extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xl; +/// } + +@mixin bpk-text--xl { + @include _bpk-text-factory( + tokens.$bpk-font-size-xl, + tokens.$bpk-line-height-xl, + tokens.$bpk-font-weight-book + ); +} + +/// Extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xl; +/// } + +@mixin bpk-text-xl { + @include bpk-text--xl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxl; +/// } + +@mixin bpk-text--xxl { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxl, + tokens.$bpk-line-height-xxl, + tokens.$bpk-font-weight-bold + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxl; +/// } + +@mixin bpk-text-xxl { + @include bpk-text--xxl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxxl; +/// } + +@mixin bpk-text--xxxl { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxxl, + tokens.$bpk-line-height-xxxl, + tokens.$bpk-font-weight-bold + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxxl; +/// } + +@mixin bpk-text-xxxl { + @include bpk-text--xxxl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxxxl; +/// } + +@mixin bpk-text--xxxxl { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxxxl, + tokens.$bpk-line-height-xxxxl, + tokens.$bpk-font-weight-bold, + tokens.$bpk-letter-spacing-tight + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxxxl; +/// } + +@mixin bpk-text-xxxxl { + @include bpk-text--xxxxl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxxxxl; +/// } + +@mixin bpk-text--xxxxxl { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxxxxl, + tokens.$bpk-line-height-xxxxxl, + tokens.$bpk-font-weight-bold, + tokens.$bpk-letter-spacing-tight + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxxxxl; +/// } + +@mixin bpk-text-xxxxxl { + @include bpk-text--xxxxxl; +} + +/// Bold text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--bold; +/// } + +@mixin bpk-text--bold { + font-weight: tokens.$bpk-font-weight-bold; +} + +/// Bold text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-bold; +/// } + +@mixin bpk-text-bold { + @include bpk-text--bold; +} + +/// Black text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--black; +/// } + +@mixin bpk-text--black { + font-weight: tokens.$bpk-font-weight-black; +} + +/// Black text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-heavy; +/// } + +@mixin bpk-text-black { + @include bpk-text--black; +} + +/// Caption text style +/// +/// @example scss +/// .selector { +/// @include bpk-caption; +/// } + +@mixin bpk-caption { + @include _bpk-text-factory( + tokens.$bpk-font-size-xs, + tokens.$bpk-line-height-xs, + tokens.$bpk-font-weight-book + ); +} + +/// Footnote text style +/// +/// @example scss +/// .selector { +/// @include bpk-footnote; +/// } + +@mixin bpk-footnote { + @include _bpk-text-factory( + tokens.$bpk-font-size-sm, + tokens.$bpk-line-height-sm, + tokens.$bpk-font-weight-book + ); +} + +/// Label-1 text style +/// +/// @example scss +/// .selector { +/// @include bpk-label-1; +/// } + +@mixin bpk-label-1 { + @include _bpk-text-factory( + tokens.$bpk-font-size-base, + tokens.$bpk-line-height-base, + tokens.$bpk-font-weight-bold + ); +} + +/// Label-2 text style +/// +/// @example scss +/// .selector { +/// @include bpk-label-2; +/// } + +@mixin bpk-label-2 { + @include _bpk-text-factory( + tokens.$bpk-font-size-sm, + tokens.$bpk-line-height-sm, + tokens.$bpk-font-weight-bold + ); +} + +/// Label-3 text style +/// +/// @example scss +/// .selector { +/// @include bpk-label-3; +/// } + +@mixin bpk-label-3 { + @include _bpk-text-factory( + tokens.$bpk-font-size-xs, + tokens.$bpk-line-height-xs, + tokens.$bpk-font-weight-bold + ); +} + +/// Default body text style +/// +/// @example scss +/// .selector { +/// @include bpk-body-default; +/// } + +@mixin bpk-body-default { + @include _bpk-text-factory( + tokens.$bpk-font-size-base, + tokens.$bpk-line-height-base, + tokens.$bpk-font-weight-book + ); +} + +/// Longform body text style +/// +/// @example scss +/// .selector { +/// @include bpk-body-longform; +/// } + +@mixin bpk-body-longform { + @include _bpk-text-factory( + tokens.$bpk-font-size-lg, + tokens.$bpk-line-height-lg, + tokens.$bpk-font-weight-book + ); +} + +/// Subheading text style +/// +/// @example scss +/// .selector { +/// @include bpk-subheading; +/// } + +@mixin bpk-subheading { + @include _bpk-text-factory( + tokens.$bpk-font-size-xl, + tokens.$bpk-line-height-xl, + tokens.$bpk-font-weight-book + ); +} + +/// Hero 1 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-1; +/// } + +@mixin bpk-hero-1 { + @include _bpk-text-factory( + tokens.$bpk-font-size-8-xl, + tokens.$bpk-line-height-8-xl, + tokens.$bpk-font-weight-bold, + tokens.$bpk-letter-spacing-tight + ); +} + +/// Hero 2 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-2; +/// } + +@mixin bpk-hero-2 { + @include _bpk-text-factory( + tokens.$bpk-font-size-7-xl, + tokens.$bpk-line-height-7-xl, + tokens.$bpk-font-weight-bold, + tokens.$bpk-letter-spacing-tight + ); +} + +/// Hero 3 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-3; +/// } + +@mixin bpk-hero-3 { + @include _bpk-text-factory( + tokens.$bpk-font-size-6-xl, + tokens.$bpk-line-height-6-xl, + tokens.$bpk-font-weight-bold, + tokens.$bpk-letter-spacing-tight + ); +} + +/// Hero 4 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-4; +/// } + +@mixin bpk-hero-4 { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxxxxl, + tokens.$bpk-line-height-xxxxxl, + tokens.$bpk-font-weight-bold, + tokens.$bpk-letter-spacing-tight + ); +} + +/// Hero 5 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-5; +/// } + +@mixin bpk-hero-5 { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxxxl, + tokens.$bpk-line-height-xxxxl, + tokens.$bpk-font-weight-bold, + tokens.$bpk-letter-spacing-tight + ); +} + +/// Level 1 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-1(); +/// } + +@mixin bpk-heading-1 { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxxl, + tokens.$bpk-line-height-xxxl, + tokens.$bpk-font-weight-bold + ); +} + +/// Level 2 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-2(); +/// } + +@mixin bpk-heading-2 { + @include _bpk-text-factory( + tokens.$bpk-font-size-xxl, + tokens.$bpk-line-height-xxl, + tokens.$bpk-font-weight-bold + ); +} + +/// Level 3 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-3(); +/// } + +@mixin bpk-heading-3 { + @include _bpk-text-factory( + tokens.$bpk-font-size-xl, + tokens.$bpk-line-height-xl-tight, + tokens.$bpk-font-weight-bold + ); +} + +/// Level 4 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-4(); +/// } + +@mixin bpk-heading-4 { + @include _bpk-text-factory( + tokens.$bpk-font-size-lg, + tokens.$bpk-line-height-lg-tight, + tokens.$bpk-font-weight-bold + ); +} + +/// Level 5 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-5(); +/// } + +@mixin bpk-heading-5 { + @include _bpk-text-factory( + tokens.$bpk-font-size-base, + tokens.$bpk-line-height-base-tight, + tokens.$bpk-font-weight-bold + ); +} + +/// Paragraph. +/// +/// @example scss +/// .selector { +/// @include bpk-paragraph(); +/// } + +@mixin bpk-paragraph { + margin-top: tokens.$bpk-spacing-none; + margin-bottom: tokens.bpk-spacing-base(); +} + +/// List. +/// +/// @example scss +/// .selector { +/// @include bpk-list(); +/// } + +@mixin bpk-list { + margin-top: tokens.bpk-spacing-base(); + margin-bottom: tokens.bpk-spacing-base(); + padding-left: tokens.bpk-spacing-lg(); +} + +/// Nested list. Modifies the bpk-list mixin. +/// +/// @require {mixin} bpk-list +/// +/// @example scss +/// .selector { +/// @include bpk-list(); +/// @include bpk-list--nested(); +/// } + +@mixin bpk-list--nested { + margin-top: tokens.$bpk-spacing-none; + margin-bottom: tokens.$bpk-spacing-none; + padding-top: tokens.bpk-spacing-md(); + padding-bottom: tokens.bpk-spacing-sm(); +} + +/// List item. +/// +/// @example scss +/// .selector { +/// @include bpk-list-item(); +/// } + +@mixin bpk-list-item { + margin-top: 0; + margin-bottom: tokens.bpk-spacing-sm(); +} + +/// Inline link. +/// +/// @example scss +/// .selector { +/// @include bpk-link(); +/// } + +@mixin bpk-link { + padding: 0; + border: 0; + background-color: transparent; + text-decoration: none; + cursor: pointer; + appearance: none; + + @include utils.bpk-themeable-property(color, --bpk-link-color, tokens.$bpk-text-link-day); + + @include utils.bpk-hover { + text-decoration: underline; + + @include utils.bpk-themeable-property( + color, + --bpk-link-hover-color, + tokens.$bpk-text-link-day + ); + } + + &:visited { + @include utils.bpk-themeable-property( + color, + --bpk-link-visited-color, + tokens.$bpk-text-link-day + ); + } + + &:active { + text-decoration: underline; + + @include utils.bpk-themeable-property( + color, + --bpk-link-active-color, + tokens.$bpk-text-link-day + ); + } +} + +/// White link. Modifies the bpk-link mixin. +/// +/// @require {mixin} bpk-link +/// +/// @example scss +/// .selector { +/// @include bpk-link(); +/// @include bpk-link--white(); +/// } + +@mixin bpk-link--alternate { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-color, + tokens.$bpk-text-on-dark-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-hover-color, + tokens.$bpk-text-on-dark-day + ); + } + + &:visited { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-visited-color, + tokens.$bpk-text-on-dark-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-active-color, + tokens.$bpk-text-on-dark-day + ); + } +} + +@mixin bpk-link--white { + @include bpk-link--alternate; +} + +/// Active link. Modifies the bpk-link mixin. +/// +/// @require {mixin} bpk-link +/// +/// @example scss +/// .selector { +/// @include bpk-link(); +/// @include bpk-link--active(); +/// } + +@mixin bpk-link--active { + color: tokens.$bpk-text-link-day; + + &:visited { + color: tokens.$bpk-text-link-day; + } + + &:active { + color: tokens.$bpk-text-link-day; + } +} + +/// Table. +/// +/// @example scss +/// .selector { +/// @include bpk-table(); +/// } + +@mixin bpk-table { + width: 100%; + margin-bottom: tokens.bpk-spacing-md(); + border-collapse: collapse; + table-layout: fixed; + + @include borders.bpk-border-sm(tokens.$bpk-line-day, ''); +} + +/// Alternate table style. +/// @require {mixin} bpk-table +/// +/// @example scss +/// .selector { +/// @include bpk-table(); +/// @include bpk-table--alternate(); +/// } + +@mixin bpk-table--alternate { + @include borders.bpk-border-sm(tokens.$bpk-line-day, ''); +} + +/// Table cell. +/// +/// @example scss +/// .selector { +/// @include bpk-table__cell(); +/// } + +@mixin bpk-table__cell { + padding: tokens.bpk-spacing-base(); +} + +/// Table head cell. Modifies the bpk-table__cell mixin. +/// +/// @require {mixin} bpk-table__cell +/// +/// @example scss +/// .selector { +/// @include bpk-table__cell(); +/// @include bpk-table__cell--head(); +/// } + +@mixin bpk-table__cell--head { + background-color: tokens.$bpk-canvas-contrast-day; + text-align: left; + + @include bpk-label-1; + + @include utils.bpk-rtl { + text-align: right; + } +} + +/// Alternate table head cell. Modifies the bpk-table__cell mixin. +/// +/// @require {mixin} bpk-table__cell +/// +/// @example scss +/// .selector { +/// @include bpk-table__cell(); +/// @include bpk-table__cell--head-alternate(); +/// } + +@mixin bpk-table__cell--head-alternate { + background-color: tokens.$bpk-canvas-day; + text-align: left; + + @include bpk-text--bold; + + @include utils.bpk-rtl { + text-align: right; + } +} + +/// Code. +/// +/// @example scss +/// .selector { +/// @include bpk-code(); +/// } + +@mixin bpk-code { + display: inline; + padding: 0 tokens.bpk-spacing-sm(); + background-color: tokens.$bpk-surface-highlight-day; + color: tokens.$bpk-text-primary-day; + text-align: left; + white-space: nowrap; + vertical-align: bottom; + + @include radii.bpk-border-radius-xs; + + @include utils.bpk-rtl { + direction: ltr; + } +} + +/// Alternate code style suited for display on non-white backgrounds. +/// +/// @example scss +/// .selector { +/// @include bpk-code(); +/// @include bpk-code--alternate(); +/// } + +@mixin bpk-code--alternate { + background-color: tokens.$bpk-canvas-contrast-day; + text-shadow: none; +} + +/// Code block. Modifies the bpk-code mixin. +/// +/// @require {mixin} bpk-code +/// +/// @example scss +/// .selector { +/// @include bpk-code(); +/// @include bpk-code--block(); +/// } + +@mixin bpk-code--block { + display: block; + margin: 0; + padding: 0; + background-color: transparent; + white-space: inherit; + overflow: auto; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } +} + +/// Pre (code block wrapper). +/// +/// @example scss +/// .selector { +/// @include bpk-code__pre(); +/// } + +@mixin bpk-code__pre { + margin: 0 0 tokens.bpk-spacing-base(); + padding: tokens.bpk-spacing-lg(); + background-color: tokens.$bpk-surface-highlight-day; + + @include radii.bpk-border-radius-xs; +} + +/// Pre (code block wrapper) alternate style. +/// +/// @example scss +/// .selector { +/// @include bpk-code__pre(); +/// @include bpk-code__pre--alternate(); +/// } + +@mixin bpk-code__pre--alternate { + background-color: transparent; + + @include borders.bpk-border-sm(tokens.$bpk-line-day); +} + +/// Blockquote. +/// +/// @example scss +/// .selector { +/// @include bpk-blockquote(); +/// } + +@mixin bpk-blockquote { + margin: 0 0 tokens.bpk-spacing-base() 0; + padding: tokens.bpk-spacing-lg(); + + @include borders.bpk-border-left-lg(tokens.$bpk-core-accent-day); + @include borders.bpk-border-left-lg( + var(--bpk-blockquote-bar-color, tokens.$bpk-core-accent-day) + ); + + @include utils.bpk-rtl { + padding: tokens.bpk-spacing-lg(); + border-left: 0; + + @include borders.bpk-border-right-lg(tokens.$bpk-core-accent-day); + @include borders.bpk-border-right-lg( + var(--bpk-blockquote-bar-color, tokens.$bpk-core-accent-day) + ); + } + + > *:last-child { + margin-bottom: 0; + } +} + +/// Adds additional spacing above and below blockquotes. Modifies the bpk-blockquote mixin. +/// +/// @require {mixin} bpk-blockquote +/// +/// @example scss +/// .selector { +/// @include bpk-blockquote(); +/// @include bpk-blockquote--extra-spacing(); +/// } + +@mixin bpk-blockquote--extra-spacing { + margin-top: tokens.bpk-spacing-xl(); + margin-bottom: tokens.bpk-spacing-xl(); +} diff --git a/packages/unstable__bpk-mixins/_utils.scss b/packages/unstable__bpk-mixins/_utils.scss new file mode 100644 index 0000000000..2a3e18e94d --- /dev/null +++ b/packages/unstable__bpk-mixins/_utils.scss @@ -0,0 +1,266 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use "sass:string"; +@use 'tokens.scss'; + +//// +/// @group utils +//// + +/// Standard focus indicator for elements. +/// +/// @example scss +/// .selector { +/// @include bpk-focus-indicator(); +/// } + +@mixin bpk-focus-indicator { + outline: (tokens.$bpk-one-pixel-rem * 2) solid tokens.$bpk-text-link-day; + outline-offset: (tokens.$bpk-one-pixel-rem * 2); +} + +/// Hide visually and from screen readers. +/// +/// @example scss +/// .selector { +/// @include bpk-hidden(); +/// } + +@mixin bpk-hidden { + display: none !important; /* stylelint-disable-line declaration-no-important */ +} + +/// Hide only visually, but have it available for screen readers: +/// +/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +/// +/// @example scss +/// .selector { +/// @include bpk-visually-hidden(); +/// } + +@mixin bpk-visually-hidden { + position: absolute; + width: 1px; /* stylelint-disable-line unit-disallowed-list */ + height: 1px; /* stylelint-disable-line unit-disallowed-list */ + margin: -1px; /* stylelint-disable-line unit-disallowed-list */ + padding: 0; + border: 0; + overflow: hidden; + clip: rect(0 0 0 0); +} + +/// Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard: +/// +/// https://www.drupal.org/node/897638 +/// +/// @require {mixin} bpk-visually-hidden +/// +/// @example scss +/// .selector { +/// @include bpk-visually-hidden(); +/// @include bpk-visually-hidden--focusable(); +/// } + +@mixin bpk-visually-hidden--focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + +/// Hide visually and from screen readers, but maintain layout. +/// +/// @example scss +/// .selector { +/// @include bpk-invisible(); +/// } + +@mixin bpk-invisible { + visibility: hidden; +} + +/// Clearfix: contain floats. +/// +/// @example scss +/// .selector { +/// @include bpk-clearfix(); +/// } + +@mixin bpk-clearfix { + &::before, + &::after { + content: ''; + display: table; + } + + &::after { + clear: both; + } +} + +/// Target RTL specific styles. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-rtl() { +/// /* RTL scss goes here */ +/// } +/// } + +@mixin bpk-rtl { + html[dir='rtl'] & { + @content; + } +} + +/// :hover pseudo selector wrapper which prevents styles displaying on touch devices +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-hover() { +/// /* Non-touch specific hover scss goes here */ +/// } +/// } + +@mixin bpk-hover { + .bpk-no-touch-support &:hover:not(:active):not(:disabled) { + @content; + } + + // Duplicating the above rule with `:global(...)` pseudo selector around the + // global `.bpk-no-touch-support` class to provide support for CSS modules. + // - when processed through css-loader, the `:global(...)` pseudo selector will be dropped + // leaving a duplicate rule which in turn will be 'uglified' out - so no worries there + // - when processed through node-sass only, the `:global(...)` pseudo selector will be left + // intact and ignored by all browsers + // stylelint-disable-next-line selector-pseudo-class-no-unknown + :global(.bpk-no-touch-support) &:hover:not(:active):not(:disabled) { + @content; + } +} + +/// Target locale specific styles. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-locale('ja-JP') { +/// /* ja-JP scss goes here */ +/// } +/// } + +@mixin bpk-locale($locale) { + html[lang='#{$locale}'] &, + html[lang='#{string.to_lower_case($locale)}'] & { + @content; + } +} + +/// Create a Backpack themeable property with +/// fallback support for old browsers and when +/// the CSS variable is not defined. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color); +/// } + +@mixin bpk-themeable-property($property, $variableName, $fallback) { + #{$property}: $fallback; + #{$property}: var($variableName, $fallback); +} + +/// Create a property that uses the Backpack primary color blue-500. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-apply-primary-color-to(color); +/// } +@mixin bpk-apply-primary-color-to($property) { + @include bpk-themeable-property( + $property, + --bpk-primary-color, + tokens.$bpk-color-sky-blue + ); +} + +/// Replace part of a string with another string. +/// +/// @param {string} $string - The string inside which the replacement should take place. +/// @param {string} $search - The substring to be replaced. +/// @param {string} $replace [''] - The string to replace $search. + +@function str-replace($string, $search, $replace: '') { + /* Disabling rule here as the recommendation method is for newer sass versions that we don't yet support */ + /* stylelint-disable-next-line scss/no-global-function-names */ + $index: string.index($string, $search); + + @if $index { + @return string.slice($string, 1, $index - 1) + $replace + + str-replace( + string.slice($string, $index + string.length($search)), + $search, + $replace + ); + } + + @return $string; +} + +/// Increases the tappable area of the element to the +/// minimum required for touch devices. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-touch-area; +/// } + +@mixin bpk-touch-tappable { + position: relative; + + &::before { + position: absolute; + /* stylelint-disable-next-line function-calc-no-invalid */ + top: calc((-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%); + /* stylelint-disable-next-line function-calc-no-invalid */ + left: calc((-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%); + content: ''; + width: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm(); + height: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm(); + } +} diff --git a/packages/unstable_bpk-mixins/README.md b/packages/unstable_bpk-mixins/README.md new file mode 100644 index 0000000000..cf8ba2fde2 --- /dev/null +++ b/packages/unstable_bpk-mixins/README.md @@ -0,0 +1,25 @@ +# bpk-mixins + +> Sass mixins and variables for Backpack. + +## Usage + +### node-sass +```scss +@import '~@skyscanner/backpack-web/bpk-mixins'; + +.bpk-my-component { + @include bpk-button; +} +``` + +### sass or sass-embedded + +With modern tooling we recommend that you use granular import +```scss +@use '@skyscanner/backpack-web/unstable_bpk-mixins/buttons'; + +.bpk-my-component { + @include buttons.bpk-button; +} +``` diff --git a/packages/unstable_bpk-mixins/_badges-v2.scss b/packages/unstable_bpk-mixins/_badges-v2.scss new file mode 100644 index 0000000000..e57a4ae44e --- /dev/null +++ b/packages/unstable_bpk-mixins/_badges-v2.scss @@ -0,0 +1,240 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'typography.scss'; +@use 'radii.scss'; +@use 'utils.scss'; + +//// +/// @group badges +//// + +/// Standard badge. +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// } + +@mixin bpk-badge { + display: inline-flex; + padding: bonds.bpk-spacing-sm() bonds.bpk-spacing-md(); + align-items: center; + + @include radii.bpk-border-radius-xs; + @include typography.bpk-text; + @include typography.bpk-footnote; +} + +/// Centered badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--centered(); +/// } + +@mixin bpk-badge--centered { + vertical-align: text-bottom; +} + +/// Right-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-right(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: inherit; + left: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: bonds.$bpk-border-radius-xs; + } +} + +/// Left-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-left(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: 0; + left: inherit; + border-bottom-left-radius: bonds.$bpk-border-radius-xs; + border-bottom-right-radius: 0; + } +} + +/// Normal badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--normal(); +/// } + +@mixin bpk-badge--normal { + background-color: bonds.$bpk-private-badge-background-normal-day; + color: bonds.$bpk-text-primary-day; + fill: bonds.$bpk-text-primary-day; +} + +/// Warning badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--warning(); +/// } + +@mixin bpk-badge--warning { + background-color: bonds.$bpk-private-badge-background-normal-day; + color: bonds.$bpk-text-on-light-day; + fill: bonds.$bpk-status-warning-spot-day; +} + +/// Success badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--success(); +/// } + +@mixin bpk-badge--success { + background-color: bonds.$bpk-private-badge-background-normal-day; + color: bonds.$bpk-text-on-light-day; + fill: bonds.$bpk-status-success-spot-day; +} + +/// Critical badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--critical(); +/// } + +@mixin bpk-badge--critical { + background-color: bonds.$bpk-private-badge-background-normal-day; + color: bonds.$bpk-text-on-light-day; + fill: bonds.$bpk-status-danger-spot-day; +} + +/// Inverse badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--inverse(); +/// } + +@mixin bpk-badge--inverse { + background-color: bonds.$bpk-surface-default-day; + color: bonds.$bpk-text-primary-day; + fill: bonds.$bpk-text-primary-day; +} + +/// Outline badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--outline(); +/// } + +@mixin bpk-badge--outline { + background-color: transparent; + color: bonds.$bpk-text-on-dark-day; + box-shadow: inset 0 0 0 bonds.$bpk-border-size-sm bonds.$bpk-text-on-dark-day; + fill: bonds.$bpk-text-on-dark-day; +} + +/// Strong badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--strong(); +/// } + +@mixin bpk-badge--strong { + background-color: bonds.$bpk-core-primary-day; + color: bonds.$bpk-text-on-dark-day; + fill: bonds.$bpk-text-on-dark-day; +} + +/// Brand badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--brand(); +/// } + +@mixin bpk-badge--brand { + background-color: bonds.$bpk-core-accent-day; + color: bonds.$bpk-text-primary-inverse-day; + fill: bonds.$bpk-text-primary-inverse-day; +} diff --git a/packages/unstable_bpk-mixins/_badges.scss b/packages/unstable_bpk-mixins/_badges.scss new file mode 100644 index 0000000000..2d7e6d77e4 --- /dev/null +++ b/packages/unstable_bpk-mixins/_badges.scss @@ -0,0 +1,240 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'radii.scss'; +@use 'typography.scss'; +@use 'utils.scss'; + +//// +/// @group badges +//// + +/// Standard badge. +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// } + +@mixin bpk-badge { + display: inline-flex; + padding: bonds.bpk-spacing-sm() bonds.bpk-spacing-md(); + align-items: center; + + @include radii.bpk-border-radius-xs; + @include typography.bpk-text; + @include typography.bpk-caption; +} + +/// Centered badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--centered(); +/// } + +@mixin bpk-badge--centered { + vertical-align: text-bottom; +} + +/// Right-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-right(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: inherit; + left: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: bonds.$bpk-border-radius-xs; + } +} + +/// Left-docked badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--docked-left(); +/// } + +@mixin 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; + + @include utils.bpk-rtl { + right: 0; + left: inherit; + border-bottom-left-radius: bonds.$bpk-border-radius-xs; + border-bottom-right-radius: 0; + } +} + +/// Normal badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--normal(); +/// } + +@mixin bpk-badge--normal { + background-color: bonds.$bpk-surface-highlight-day; + color: bonds.$bpk-text-primary-day; + fill: bonds.$bpk-text-primary-day; +} + +/// Warning badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--warning(); +/// } + +@mixin bpk-badge--warning { + background-color: bonds.$bpk-status-warning-fill-day; + color: bonds.$bpk-text-on-light-day; + fill: bonds.$bpk-text-on-light-day; +} + +/// Success badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--success(); +/// } + +@mixin bpk-badge--success { + background-color: bonds.$bpk-status-success-fill-day; + color: bonds.$bpk-text-on-light-day; + fill: bonds.$bpk-text-on-light-day; +} + +/// Critical badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--critical(); +/// } + +@mixin bpk-badge--critical { + background-color: bonds.$bpk-status-danger-fill-day; + color: bonds.$bpk-text-on-light-day; + fill: bonds.$bpk-text-on-light-day; +} + +/// Inverse badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--inverse(); +/// } + +@mixin bpk-badge--inverse { + background-color: bonds.$bpk-surface-default-day; + color: bonds.$bpk-text-primary-day; + fill: bonds.$bpk-text-primary-day; +} + +/// Outline badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--outline(); +/// } + +@mixin bpk-badge--outline { + background-color: transparent; + color: bonds.$bpk-text-on-dark-day; + box-shadow: inset 0 0 0 bonds.$bpk-border-size-sm bonds.$bpk-text-on-dark-day; + fill: bonds.$bpk-text-on-dark-day; +} + +/// Strong badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--strong(); +/// } + +@mixin bpk-badge--strong { + background-color: bonds.$bpk-core-primary-day; + color: bonds.$bpk-text-on-dark-day; + fill: bonds.$bpk-text-on-dark-day; +} + +/// Brand badge. Modifies the bpk-badge mixin. +/// +/// @require {mixin} bpk-badge +/// +/// @example scss +/// .selector { +/// @include bpk-badge(); +/// @include bpk-badge--brand(); +/// } + +@mixin bpk-badge--brand { + background-color: bonds.$bpk-core-accent-day; + color: bonds.$bpk-text-primary-inverse-day; + fill: bonds.$bpk-text-primary-inverse-day; +} diff --git a/packages/unstable_bpk-mixins/_bonds.scss b/packages/unstable_bpk-mixins/_bonds.scss new file mode 100644 index 0000000000..66ad285332 --- /dev/null +++ b/packages/unstable_bpk-mixins/_bonds.scss @@ -0,0 +1,19 @@ +/* + * 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. + */ + +@forward '@skyscanner/bpk-foundations-web/tokens/base.default'; diff --git a/packages/unstable_bpk-mixins/_borders.scss b/packages/unstable_bpk-mixins/_borders.scss new file mode 100644 index 0000000000..e8225f048a --- /dev/null +++ b/packages/unstable_bpk-mixins/_borders.scss @@ -0,0 +1,268 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; + +//// +/// @group borders +//// + +/// Full border utility. +/// +/// @access private + +@mixin _bpk-border($size, $color, $inset) { + box-shadow: 0 0 0 $size $color #{$inset}; +} + +/// Top border utility. +/// +/// @access private + +@mixin _bpk-border-top($size, $color, $inset) { + $offset-y: if($inset == inset, $size, -#{$size}); + + box-shadow: 0 $offset-y 0 0 $color #{$inset}; +} + +/// Right border utility. +/// +/// @access private + +@mixin bpk-border-right($size, $color, $inset) { + $offset-x: if($inset == inset, -#{$size}, $size); + + box-shadow: $offset-x 0 0 0 $color #{$inset}; +} + +/// Bottom border utility. +/// +/// @access private + +@mixin _bpk-border-bottom($size, $color, $inset) { + $offset-y: if($inset == inset, -#{$size}, $size); + + box-shadow: 0 $offset-y 0 0 $color #{$inset}; +} + +/// Left border utility. +/// +/// @access private + +@mixin bpk-border-left($size, $color, $inset) { + $offset-x: if($inset == inset, $size, -#{$size}); + + box-shadow: $offset-x 0 0 0 $color #{$inset}; +} + +/// Small "1px" border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-sm($color, $inset: inset) { + @include _bpk-border(bonds.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" top border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-top-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-top-sm($color, $inset: inset) { + @include _bpk-border-top(bonds.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" right border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-right-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-right-sm($color, $inset: inset) { + @include bpk-border-right(bonds.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" bottom border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-bottom-sm($color, $inset: inset) { + @include _bpk-border-bottom(bonds.$bpk-border-size-sm, $color, $inset); +} + +/// Small "1px" left border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-left-sm($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-left-sm($color, $inset: inset) { + @include bpk-border-left(bonds.$bpk-border-size-sm, $color, $inset); +} + +/// Large "2px" border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-lg($color, $inset: inset) { + @include _bpk-border(bonds.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" top border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-top-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-top-lg($color, $inset: inset) { + @include _bpk-border-top(bonds.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" right border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-right-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-right-lg($color, $inset: inset) { + @include bpk-border-right(bonds.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" bottom border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-bottom-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-bottom-lg($color, $inset: inset) { + @include _bpk-border-bottom(bonds.$bpk-border-size-lg, $color, $inset); +} + +/// Large "2px" left border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-left-lg($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-left-lg($color, $inset: inset) { + @include bpk-border-left(bonds.$bpk-border-size-lg, $color, $inset); +} + +/// Extra large "3px" border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-xl($color, $inset: inset) { + @include _bpk-border(bonds.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" top border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-top-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-top-xl($color, $inset: inset) { + @include _bpk-border-top(bonds.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" right border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-right-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-right-xl($color, $inset: inset) { + @include bpk-border-right(bonds.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" bottom border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-bottom-xl($color, $inset: inset) { + @include _bpk-border-bottom(bonds.$bpk-border-size-xl, $color, $inset); +} + +/// Extra large "3px" left border. +/// +/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height. +/// +/// @example scss +/// .selector { +/// @include bpk-border-left-xl($bpk-color-sky-gray-tint-06); +/// } + +@mixin bpk-border-left-xl($color, $inset: inset) { + @include bpk-border-left(bonds.$bpk-border-size-xl, $color, $inset); +} diff --git a/packages/unstable_bpk-mixins/_breakpoints.scss b/packages/unstable_bpk-mixins/_breakpoints.scss new file mode 100644 index 0000000000..51b51d398e --- /dev/null +++ b/packages/unstable_bpk-mixins/_breakpoints.scss @@ -0,0 +1,221 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; + +//// +/// @group breakpoints +//// + +/// @alias bpk-grid__container + +@mixin bpk-container { + @include bpk-grid__container; +} + +/// Breakpoint to target up to and including small mobile viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-small-mobile { +/// /* small mobile viewport scss goes here */ +/// } +/// +/// /* larger mobile, tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-small-mobile { + @media #{bonds.$bpk-breakpoint-query-small-mobile} { + @content; + } +} + +/// Breakpoint to target up to and including mobile viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-mobile { +/// /* up to and including mobile viewport scss goes here */ +/// } +/// +/// /* tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-mobile { + @media #{bonds.$bpk-breakpoint-query-mobile} { + @content; + } +} + +/// Breakpoint to target up to and including small tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-small-tablet { +/// /* up to and including small tablet viewport scss goes here */ +/// } +/// +/// /* larger tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-small-tablet { + @media #{bonds.$bpk-breakpoint-query-small-tablet} { + @content; + } +} + +/// Breakpoint to target up to and including tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-tablet { +/// /* mobile & tablet viewport scss goes here */ +/// } +/// +/// /* desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-tablet { + @media #{bonds.$bpk-breakpoint-query-tablet} { + @content; + } +} + +/// Breakpoint to target only small tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-small-tablet-only { +/// /* small tablet viewport scss goes here */ +/// } +/// +/// /* mobile, larger tablet & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-small-tablet-only { + @media #{bonds.$bpk-breakpoint-query-small-tablet-only} { + @content; + } +} + +/// Breakpoint to target only tablet viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-tablet-only { +/// /* tablet viewport scss goes here */ +/// } +/// +/// /* mobile & desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-tablet-only { + @media #{bonds.$bpk-breakpoint-query-tablet-only} { + @content; + } +} + +/// Breakpoint to target tablet & desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-above-mobile { +/// /* tablet & desktop viewport scss goes here */ +/// } +/// +/// /* mobile viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-above-mobile { + @media #{bonds.$bpk-breakpoint-query-above-mobile} { + @content; + } +} + +/// Breakpoint to target desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-above-tablet { +/// /* desktop viewport scss goes here */ +/// } +/// +/// /* mobile & tablet viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-above-tablet { + @media #{bonds.$bpk-breakpoint-query-above-tablet} { + @content; + } +} + +/// Breakpoint to target large desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-above-desktop { +/// /* large desktop viewport scss goes here */ +/// } +/// +/// /* mobile, tablet, desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-above-desktop { + @media #{bonds.$bpk-breakpoint-query-above-desktop} { + @content; + } +} + +/// Breakpoint to target only desktop viewports. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-breakpoint-desktop-only { +/// /* desktop viewport scss goes here */ +/// } +/// +/// /* mobile, tablet & large desktop viewport scss goes here */ +/// } + +@mixin bpk-breakpoint-desktop-only { + @media #{bonds.$bpk-breakpoint-query-desktop-only} { + @content; + } +} diff --git a/packages/unstable_bpk-mixins/_buttons.scss b/packages/unstable_bpk-mixins/_buttons.scss new file mode 100644 index 0000000000..aa861eb5c7 --- /dev/null +++ b/packages/unstable_bpk-mixins/_buttons.scss @@ -0,0 +1,568 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'typography.scss'; +@use 'utils.scss'; + +//// +/// @group buttons +//// + +/// Standard button. +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// } + +@mixin bpk-button { + display: inline-block; + min-height: bonds.$bpk-button-height; + margin: 0; + padding: (6 * bonds.$bpk-one-pixel-rem) bonds.bpk-spacing-base(); + border: 0; + border-radius: bonds.$bpk-button-border-radius; + text-align: center; + text-decoration: none; + cursor: pointer; + vertical-align: middle; + user-select: none; + + @include typography.bpk-label-1; + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-background-color, + bonds.$bpk-private-button-primary-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-hover-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-hover-background-color, + bonds.$bpk-private-button-primary-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-active-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-active-background-color, + bonds.$bpk-private-button-primary-pressed-background-day + ); + } + + &:disabled { + background-color: bonds.$bpk-private-button-disabled-background-day; + color: bonds.$bpk-text-disabled-day; + cursor: not-allowed; + } +} + +/// Large button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--large(); +/// } + +@mixin bpk-button--large { + min-height: bonds.$bpk-button-large-height; + padding: (12 * bonds.$bpk-one-pixel-rem) bonds.bpk-spacing-base(); +} + +/// PrimaryOnDark button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--primary-on-dark(); +/// } + +@mixin bpk-button--primary-on-dark { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-dark-text-color, + bonds.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-dark-background-color, + bonds.$bpk-private-button-primary-on-dark-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-dark-hover-text-color, + bonds.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-dark-hover-background-color, + bonds.$bpk-private-button-primary-on-dark-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-dark-active-text-color, + bonds.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-dark-active-background-color, + bonds.$bpk-private-button-primary-on-dark-pressed-background-day + ); + } + + &:disabled { + background-color: bonds.$bpk-private-button-primary-on-dark-disabled-background-day; + color: bonds.$bpk-private-button-primary-on-dark-disabled-foreground-day; + } +} + +/// PrimaryOnLight button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--primary-on-light(); +/// } + +@mixin bpk-button--primary-on-light { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-light-text-color, + bonds.$bpk-text-on-dark-night + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-light-background-color, + bonds.$bpk-private-button-primary-on-light-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-light-hover-text-color, + bonds.$bpk-text-on-dark-night + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-light-hover-background-color, + bonds.$bpk-private-button-primary-on-light-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-primary-on-light-active-text-color, + bonds.$bpk-text-on-dark-night + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-primary-on-light-active-background-color, + bonds.$bpk-private-button-primary-on-light-pressed-background-day + ); + } + + &:disabled { + background-color: bonds.$bpk-private-button-primary-on-light-disabled-background-day; + color: bonds.$bpk-private-button-primary-on-light-disabled-foreground-day; + } +} + +/// Secondary button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--secondary(); +/// } + +@mixin bpk-button--secondary { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-text-color, + bonds.$bpk-text-primary-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-background-color, + bonds.$bpk-private-button-secondary-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-hover-text-color, + bonds.$bpk-text-primary-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-hover-background-color, + bonds.$bpk-private-button-secondary-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-active-text-color, + bonds.$bpk-text-primary-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-active-background-color, + bonds.$bpk-private-button-secondary-pressed-background-day + ); + } + + &:disabled { + background-color: bonds.$bpk-private-button-disabled-background-day; + color: bonds.$bpk-text-disabled-day; + } +} + +/// Secondary on dark button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--secondary-on-dark(); +/// } + +@mixin bpk-button--secondary-on-dark { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-on-dark-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-on-dark-background-color, + bonds.$bpk-private-button-secondary-on-dark-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-on-dark-hover-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-on-dark-hover-background-color, + bonds.$bpk-private-button-secondary-on-dark-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-secondary-on-dark-active-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-secondary-on-dark-active-background-color, + bonds.$bpk-private-button-secondary-on-dark-pressed-background-day + ); + } + + &:disabled { + background-color: bonds.$bpk-private-button-secondary-on-dark-disabled-background-day; + color: bonds.$bpk-private-button-secondary-on-dark-disabled-foreground-day; + } +} + +/// Destructive button. Modifies the bpk-button & bpk-button--secondary lib. +/// +/// @require {mixin} bpk-button +/// @require {mixin} bpk-button--secondary +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--secondary(); +/// @include bpk-button--destructive(); +/// } + +@mixin bpk-button--destructive { + @include utils.bpk-themeable-property( + color, + --bpk-button-destructive-text-color, + bonds.$bpk-private-button-destructive-normal-foreground-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-destructive-background-color, + bonds.$bpk-private-button-destructive-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-destructive-hover-text-color, + bonds.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-destructive-hover-background-color, + bonds.$bpk-private-button-destructive-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-destructive-active-text-color, + bonds.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-destructive-active-background-color, + bonds.$bpk-private-button-destructive-pressed-background-day + ); + } + + &:disabled { + background-color: bonds.$bpk-private-button-disabled-background-day; + color: bonds.$bpk-text-disabled-day; + } +} + +/// Link-style button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--link(); +/// } + +@mixin bpk-button--link { + $vertical-padding: bonds.$bpk-one-pixel-rem * 6; + $vertical-padding-large: bonds.$bpk-one-pixel-rem * 12; + + background: none; /* stylelint-disable-line order/order, order/properties-order */ + box-shadow: none; + + @include typography.bpk-link; + + padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */ + color: bonds.$bpk-private-button-link-normal-foreground-day; + + @include utils.bpk-hover { + background: none; + color: bonds.$bpk-private-button-link-pressed-foreground-day; + text-decoration: none; + } + + &:active { + background: none; + color: bonds.$bpk-private-button-link-pressed-foreground-day; + text-decoration: none; + } + + &:disabled { + background: none; + color: bonds.$bpk-text-disabled-day; + text-decoration: none; + } + + &-large { + padding: $vertical-padding-large 0; + } +} + +/// Link on dark button. Modifies the bpk-button & bpk-button--link lib. +/// +/// @require {mixin} bpk-button + +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--link-on-dark(); +/// } + +@mixin bpk-button--link-on-dark { + @include bpk-button--link; + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-text-color, + bonds.$bpk-private-button-link-on-dark-normal-foreground-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-hover-text-color, + bonds.$bpk-private-button-link-on-dark-pressed-foreground-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-active-text-color, + bonds.$bpk-private-button-link-on-dark-pressed-foreground-day + ); + } + + &:visited { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-text-color, + bonds.$bpk-private-button-link-on-dark-normal-foreground-day + ); + } + + &:disabled { + @include utils.bpk-themeable-property( + color, + --bpk-button-link-on-dark-disabled-color, + bonds.$bpk-private-button-link-on-dark-disabled-foreground-day + ); + } +} + +/// Icon-only button. Modifies the bpk-button mixin. +/// +/// @require {mixin} bpk-button +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--icon-only(); +/// } + +@mixin bpk-button--icon-only { + $horizontal-padding: (bonds.$bpk-button-height - bonds.$bpk-icon-size-sm) * 0.5; // extra padding so that the width will be the same size as the size using sm icons + + padding-right: $horizontal-padding; + padding-left: $horizontal-padding; + border-radius: bonds.$bpk-button-border-radius; +} + +/// Large icon-only button. Modifies the bpk-button & bpk-button--large lib. +/// +/// @require {mixin} bpk-button +/// @require {mixin} bpk-button--large +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--large(); +/// @include bpk-button--large-icon-only(); +/// } + +@mixin bpk-button--large-icon-only { + $horizontal-padding: (bonds.$bpk-button-large-height - bonds.$bpk-icon-size-lg) * 0.5; // extra padding so that the width will be the same size as the size using lg icons + + padding-right: $horizontal-padding; + padding-left: $horizontal-padding; + border-radius: bonds.$bpk-button-border-radius; +} + +/// Featured button. Modifies the bpk-button +/// +/// @require {mixin} bpk-button +/// @require {mixin} bpk-button--large +/// +/// @example scss +/// .selector { +/// @include bpk-button(); +/// @include bpk-button--featured(); +/// } + +@mixin bpk-button--featured { + @include utils.bpk-themeable-property( + color, + --bpk-button-featured-text-color, + bonds.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-featured-background-color, + bonds.$bpk-private-button-featured-normal-background-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-button-featured-hover-text-color, + bonds.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-featured-hover-background-color, + bonds.$bpk-private-button-featured-pressed-background-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-button-featured-active-text-color, + bonds.$bpk-text-primary-inverse-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-button-featured-active-background-color, + bonds.$bpk-private-button-featured-pressed-background-day + ); + } + + &:disabled { + background-color: bonds.$bpk-private-button-disabled-background-day; + color: bonds.$bpk-text-disabled-day; + } +} diff --git a/packages/unstable_bpk-mixins/_cards.scss b/packages/unstable_bpk-mixins/_cards.scss new file mode 100644 index 0000000000..0a6acf80fc --- /dev/null +++ b/packages/unstable_bpk-mixins/_cards.scss @@ -0,0 +1,94 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'radii.scss'; +@use 'shadows.scss'; +@use 'utils.scss'; + +//// +/// @group cards +//// + +/// Basic card. +/// +/// @example scss +/// .selector { +/// @include bpk-card(); +/// } + +@mixin bpk-card { + position: relative; + display: block; + background-color: bonds.$bpk-card-background-color; + color: bonds.$bpk-text-primary-day; + text-decoration: none; + cursor: pointer; + + @include shadows.bpk-box-shadow-sm; + @include radii.bpk-border-radius-md; + + @include utils.bpk-hover { + &::after { + opacity: 1; + } + } + + // Keep transitions and animations to only transform and opacity. + // This pseudo element solution allows us to animate box-shadow in a performant manner. + // http://tobiasahlin.com/blog/how-to-animate-box-shadow/ + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ''; + transition: opacity bonds.$bpk-duration-sm ease-in-out; + opacity: 0; + pointer-events: none; // To prevent the pseudo element absorbing click events + + @include shadows.bpk-box-shadow-lg; + @include radii.bpk-border-radius-md; + + // pointer-events doesn't work on ie + @media screen\0 { + z-index: -1; + } + } + + &:active::after { + box-shadow: none; + } +} + +/// Adds padding to cards. Modifies the bpk-card mixin. +/// +/// @require {mixin} bpk-card +/// +/// @example scss +/// .selector { +/// @include bpk-card(); +/// @include bpk-card--padded(); +/// } + +@mixin bpk-card--padded { + padding: bonds.$bpk-card-padding; +} diff --git a/packages/unstable_bpk-mixins/_chips.scss b/packages/unstable_bpk-mixins/_chips.scss new file mode 100644 index 0000000000..24e133453d --- /dev/null +++ b/packages/unstable_bpk-mixins/_chips.scss @@ -0,0 +1,240 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'borders.scss'; +@use 'margins.scss'; +@use 'shadows.scss'; +@use 'utils.scss'; + +@mixin bpk-chip { + display: inline-flex; + height: bonds.bpk-spacing-xl(); + padding: 0 bonds.bpk-spacing-base(); + align-items: center; + border: none; + border-radius: bonds.$bpk-border-radius-xs * 2; + cursor: pointer; + + &__leading-accessory-view { + display: inline-flex; + fill: currentcolor; + + @include margins.bpk-margin-trailing(bonds.bpk-spacing-md()); + } + + &__trailing-accessory-view { + display: inline-flex; + fill: currentcolor; + + @include margins.bpk-margin-leading(bonds.bpk-spacing-md(), false); + @include margins.bpk-margin-trailing(-1 * bonds.bpk-spacing-md(), false); + } + + &--on-dark { + background-color: transparent; + color: bonds.$bpk-text-on-dark-day; + + @include borders.bpk-border-sm(bonds.$bpk-line-on-dark-day); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(bonds.$bpk-surface-default-day); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(bonds.$bpk-surface-default-day); + } + + &-selected { + @include utils.bpk-themeable-property( + color, + --bpk-chip-on-dark-selected-text-color, + bonds.$bpk-text-on-light-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-dark-selected-background-color, + bonds.$bpk-surface-default-day + ); + @include borders.bpk-border-sm(transparent); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(transparent); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(transparent); + } + } + + &-dismissible { + @include utils.bpk-hover { + svg { + fill: currentcolor; + } + } + + &:active:not(:disabled) { + svg { + fill: currentcolor; + } + } + + &__trailing-accessory-view { + fill: bonds.$bpk-text-secondary-day; + } + } + + &-disabled { + @include borders.bpk-border-sm(transparent); + } + } + + &--default { + background-color: transparent; + color: bonds.$bpk-text-primary-day; + + @include borders.bpk-border-sm(bonds.$bpk-line-day); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(bonds.$bpk-core-primary-day); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(bonds.$bpk-core-primary-day); + } + + &-selected { + @include utils.bpk-themeable-property( + color, + --bpk-chip-default-selected-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-default-selected-background-color, + bonds.$bpk-core-primary-day + ); + @include borders.bpk-border-sm(transparent); + + @include utils.bpk-hover { + @include borders.bpk-border-sm(transparent); + } + + &:active:not(:disabled) { + @include borders.bpk-border-sm(transparent); + } + } + + &-dismissible { + @include utils.bpk-hover { + svg { + fill: currentcolor; + } + } + + &:active:not(:disabled) { + svg { + fill: currentcolor; + } + } + + &__trailing-accessory-view { + fill: bonds.$bpk-text-disabled-on-dark-day; + } + } + + &-disabled { + @include borders.bpk-border-sm(transparent); + } + } + + &--on-image { + background-color: bonds.$bpk-surface-default-day; + color: bonds.$bpk-text-primary-day; + + @include shadows.bpk-box-shadow-sm; + + @include utils.bpk-hover { + background-color: bonds.$bpk-canvas-contrast-day; + } + + &:active:not(:disabled) { + background-color: bonds.$bpk-canvas-contrast-day; + } + + &-selected { + @include utils.bpk-themeable-property( + color, + --bpk-chip-on-image-selected-text-color, + bonds.$bpk-text-on-dark-day + ); + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-image-selected-background-color, + bonds.$bpk-core-primary-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-image-selected-hover-background-color, + bonds.$bpk-core-primary-day + ); + } + + &:active:not(:disabled) { + @include utils.bpk-themeable-property( + background-color, + --bpk-chip-on-image-selected-active-background-color, + bonds.$bpk-core-primary-day + ); + } + } + + &-dismissible { + @include utils.bpk-hover { + svg { + fill: currentcolor; + } + } + + &:active:not(:disabled) { + svg { + fill: currentcolor; + } + } + + &__trailing-accessory-view { + fill: bonds.$bpk-text-disabled-on-dark-day; + } + } + + &-disabled { + @include shadows.bpk-box-shadow-sm; + } + } + + &--disabled { + background-color: bonds.$bpk-private-chip-disabled-background-day; + color: bonds.$bpk-text-disabled-day; + cursor: not-allowed; + } +} diff --git a/packages/unstable_bpk-mixins/_forms.scss b/packages/unstable_bpk-mixins/_forms.scss new file mode 100644 index 0000000000..aa3d0d2cb5 --- /dev/null +++ b/packages/unstable_bpk-mixins/_forms.scss @@ -0,0 +1,1049 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use "sass:math"; + +@use 'bonds.scss'; +@use 'typography.scss'; +@use 'utils.scss'; + +//// +/// @group forms +//// + +/// Form input. Can be used for text, email, number, password and tel type inputs. +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// } + +@mixin bpk-input { + display: inline-block; + width: 100%; + height: bonds.$bpk-input-height; + padding: bonds.$bpk-input-padding-y bonds.$bpk-input-padding-x; + border: bonds.$bpk-input-border; + border-radius: bonds.$bpk-input-border-radius; + background: bonds.$bpk-input-background; + color: bonds.$bpk-text-primary-day; + appearance: none; + + &::placeholder { + color: bonds.$bpk-text-secondary-day; + } + + &:disabled { + border-color: bonds.$bpk-input-disabled-border-color; + background: bonds.$bpk-input-background; + color: bonds.$bpk-input-disabled-color; + cursor: not-allowed; + } + + &[type='number'] { + -moz-appearance: textfield; // stylelint-disable property-no-vendor-prefix + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + appearance: none; + } + } + + &[type='number'], + &[type='tel'], + &[type='email'] { + @include utils.bpk-rtl { + text-align: right; + direction: ltr; + } + } + + &::-ms-clear { + display: none; + } +} + +/// Valid form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--valid(); +/// } + +@mixin bpk-input--valid { + padding-right: bonds.bpk-spacing-xl(); + background: bonds.$bpk-input-background + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=') + no-repeat right bonds.bpk-spacing-md() center; + background-size: bonds.$bpk-icon-size-sm bonds.$bpk-icon-size-sm; + + @include utils.bpk-rtl { + padding-right: bonds.$bpk-input-padding-x; + padding-left: bonds.bpk-spacing-xl(); + background-position: left bonds.bpk-spacing-md() center; + } +} + +/// Invalid form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--invalid(); +/// } + +@mixin bpk-input--invalid { + padding-right: bonds.bpk-spacing-xl(); + background: bonds.$bpk-input-background + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==') + no-repeat right bonds.bpk-spacing-md() center; + background-size: bonds.$bpk-icon-size-sm bonds.$bpk-icon-size-sm; + + @include utils.bpk-themeable-property( + border-color, + --bpk-input-invalid-border-color, + bonds.$bpk-form-validation-color + ); + + @include utils.bpk-rtl { + padding-right: bonds.$bpk-input-padding-x; + padding-left: bonds.bpk-spacing-xl(); + background-position: left bonds.bpk-spacing-md() center; + } +} + +/// Clearable form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--clearable(); +/// } + +@mixin bpk-input--clearable { + padding-right: bonds.bpk-spacing-xl(); + + @include utils.bpk-rtl { + padding-right: bonds.$bpk-input-padding-x; + padding-left: bonds.bpk-spacing-xl(); + } + + &:focus { + background: bonds.$bpk-input-background; + } +} + +/// Clearable form input container. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input__container(); +/// } + +@mixin bpk-input__container { + position: relative; + display: inline-block; + width: 100%; +} + +/// Clearable (clear button) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input__clear-button(); +/// } + +@mixin bpk-input__clear-button { + position: absolute; + right: bonds.bpk-spacing-md(); + height: bonds.$bpk-input-height; + + @include utils.bpk-rtl { + right: inherit; + left: bonds.bpk-spacing-md(); + } + + &--large { + right: bonds.bpk-spacing-base(); + height: bonds.$bpk-input-large-height; + + @include utils.bpk-rtl { + left: bonds.bpk-spacing-base(); + } + } +} + +/// Large form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--large(); +/// } + +@mixin bpk-input--large { + height: bonds.$bpk-input-large-height; + padding-right: bonds.bpk-spacing-base(); + padding-left: bonds.bpk-spacing-base(); + + &.bpk-input--valid, + &.bpk-input--invalid, + &.bpk-input--clearable { + padding-right: bonds.bpk-spacing-xxl(); + background-position: right bonds.bpk-spacing-base() center; + + @include utils.bpk-rtl { + padding-right: bonds.bpk-spacing-base(); + padding-left: bonds.bpk-spacing-xxl(); + background-position: left bonds.bpk-spacing-base() center; + } + } +} + +/// Docked (first-child) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked-first-child(); +/// } + +@mixin bpk-input--docked-first-child { + border-right-width: 0; + border-radius: bonds.$bpk-input-border-radius 0 0 bonds.$bpk-input-border-radius; + + @include utils.bpk-rtl { + border-right-width: bonds.$bpk-input-border-width; + border-left-width: 0; + border-radius: 0 bonds.$bpk-input-border-radius bonds.$bpk-input-border-radius 0; + } + + &:focus { + position: relative; // brings outline to the front + } +} + +/// Docked (last-child) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked-last-child(); +/// } + +@mixin bpk-input--docked-last-child { + border-radius: 0 bonds.$bpk-input-border-radius bonds.$bpk-input-border-radius 0; + + @include utils.bpk-rtl { + border-radius: bonds.$bpk-input-border-radius 0 0 bonds.$bpk-input-border-radius; + } + + &:focus { + position: relative; // brings outline to the front + } +} + +/// Docked (middle-child) form input. Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked-middle-child(); +/// } + +@mixin bpk-input--docked-middle-child { + border-right-width: 0; + border-radius: 0; + + @include utils.bpk-rtl { + border-right-width: bonds.$bpk-input-border-width; + border-left-width: 0; + } + + &:focus { + position: relative; // brings outline to the front + } +} + +/// Docked form input (inputs must sit side-by-side in the DOM). Modifies the bpk-input mixin. +/// +/// @require {mixin} bpk-input +/// +/// @example scss +/// .selector { +/// @include bpk-input(); +/// @include bpk-input--docked(); +/// } + +@mixin bpk-input--docked { + &:first-child { + @include bpk-input--docked-first-child; + } + + &:last-child { + @include bpk-input--docked-last-child; + } + + &:not(:first-child):not(:last-child) { + @include bpk-input--docked-middle-child; + } +} + +/// Form select input. +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// } + +@mixin bpk-select { + display: inline-block; + width: 100%; + height: bonds.$bpk-input-height; + padding: bonds.bpk-spacing-md() - (2 * bonds.$bpk-one-pixel-rem) bonds.bpk-spacing-md(); + padding-right: bonds.bpk-spacing-xl(); + border: solid bonds.$bpk-one-pixel-rem bonds.$bpk-line-day; + border-radius: bonds.$bpk-select-border-radius; + background: bonds.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right bonds.bpk-spacing-md() center; + background-size: bonds.$bpk-input-height * 0.5; + color: bonds.$bpk-text-primary-day; + line-height: (bonds.$bpk-line-height-base - (2 * bonds.$bpk-select-border-width)); + appearance: none; + + @include utils.bpk-rtl { + padding-right: bonds.bpk-spacing-md(); + padding-left: bonds.bpk-spacing-xl(); + background-position: left bonds.bpk-spacing-md() center; + } + + @media screen\0 { + /* stylelint-disable-next-line declaration-no-important */ + padding: bonds.bpk-spacing-md() !important; + /* stylelint-disable-next-line declaration-no-important */ + background-image: none !important; + } + + &:disabled { + border-color: bonds.$bpk-surface-highlight-day; + background: bonds.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right bonds.bpk-spacing-md() center; + background-size: bonds.$bpk-input-height * 0.5; + color: bonds.$bpk-text-disabled-day; + cursor: not-allowed; + } +} + +/// Large form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--large(); +/// } + +@mixin bpk-select--large { + height: bonds.$bpk-input-large-height; + padding: bonds.bpk-spacing-md() bonds.bpk-spacing-base(); + padding-right: bonds.bpk-spacing-xxl(); + background: bonds.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right bonds.bpk-spacing-base() center; + + @include utils.bpk-rtl { + padding-right: bonds.bpk-spacing-base(); + padding-left: bonds.bpk-spacing-xxl(); + background-position: left bonds.bpk-spacing-base() center; + } +} + +/// Docked (first-child) form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked-first-child(); +/// } + +@mixin bpk-select--docked-first-child { + border-right-width: 0; + border-radius: bonds.$bpk-select-border-radius 0 0 bonds.$bpk-select-border-radius; + + @include utils.bpk-rtl { + border-right-width: bonds.$bpk-select-border-width; + border-left-width: 0; + border-radius: 0 bonds.$bpk-select-border-radius bonds.$bpk-select-border-radius 0; + } +} + +/// Docked (last-child) form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked-last-child(); +/// } + +@mixin bpk-select--docked-last-child { + border-radius: 0 bonds.$bpk-select-border-radius bonds.$bpk-select-border-radius 0; + + @include utils.bpk-rtl { + border-radius: bonds.$bpk-select-border-radius 0 0 bonds.$bpk-select-border-radius; + } +} + +/// Docked (middle-child) form select input. Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked-middle-child(); +/// } + +@mixin bpk-select--docked-middle-child { + border-right-width: 0; + border-radius: 0; + + @include utils.bpk-rtl { + border-right-width: bonds.$bpk-select-border-width; + border-left-width: 0; + } +} + +/// Docked form select input (selects must sit side-by-side in the DOM). Modifies the bpk-select mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--docked(); +/// } + +@mixin bpk-select--docked { + &:first-child { + @include bpk-select--docked-first-child; + } + + &:last-child { + @include bpk-select--docked-last-child; + } + + &:not(:first-child):not(:last-child) { + @include bpk-select--docked-middle-child; + } +} + +/// Invalid form input. Modifies the bpk-selct mixin. +/// +/// @require {mixin} bpk-select +/// +/// @example scss +/// .selector { +/// @include bpk-select(); +/// @include bpk-select--invalid(); +/// } + +@mixin bpk-select--invalid { + padding-right: bonds.bpk-spacing-xl(); + background: bonds.$bpk-surface-default-day + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=') + no-repeat right bonds.bpk-spacing-md() center; + background-size: bonds.$bpk-input-height * 0.5; + + @include utils.bpk-themeable-property( + border-color, + --bpk-select-invalid-border-color, + bonds.$bpk-form-validation-color + ); + + @include utils.bpk-rtl { + padding-right: bonds.bpk-spacing-md(); + padding-left: bonds.bpk-spacing-xl(); + background-position: left bonds.bpk-spacing-md() center; + } +} + +/// Form checkbox. Should be applied to containing label element. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// } + +@mixin bpk-checkbox { + position: relative; + display: inline-block; + padding-left: bonds.bpk-spacing-lg() + bonds.bpk-spacing-sm(); + + @include typography.bpk-text; + @include typography.bpk-body-default; + + @include utils.bpk-rtl { + padding-right: bonds.bpk-spacing-lg() + bonds.bpk-spacing-sm(); + padding-left: 0; + } +} + +/// Label for checkbox. Should be applied to label text element. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__label(); +/// } + +@mixin bpk-checkbox__label { + vertical-align: baseline; +} + +/// Small label for checkbox. Should be applied to label text element. +/// Modifies bpk-checkbox__label. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__label(); +/// @include bpk-checkbox__label--small(); +/// } + +@mixin bpk-checkbox__label--small { + @include typography.bpk-text; + @include typography.bpk-caption; +} + +/// White label checkbox. Modifies the bpk-checkbox mixin. +/// +/// @require {mixin} bpk-checkbox +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// @include bpk-checkbox--white(); +/// } + +@mixin bpk-checkbox--white { + color: bonds.$bpk-surface-default-day; +} + +/// Disabled form checkbox. Modifies the bpk-checkbox mixin. +/// +/// @require {mixin} bpk-checkbox +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// @include bpk-checkbox--disabled(); +/// } + +@mixin bpk-checkbox--disabled { + color: bonds.$bpk-label-disabled-color; + cursor: not-allowed; +} + +/// Invalid form checkbox. Modifies the bpk-checkbox mixin. +/// +/// @require {mixin} bpk-checkbox +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox(); +/// @include bpk-checkbox--invalid(); +/// } + +@mixin bpk-checkbox--invalid { + input[type='checkbox'] { + border: (bonds.$bpk-one-pixel-rem * 3) solid bonds.$bpk-text-error-day; + } +} + +/// Used to create the check/tick inside +/// a checked checkbox. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__checkmark(); +/// } +@mixin bpk-checkbox__checkmark { + &::before, + &::after { + position: absolute; + content: ''; + transform: rotate(45deg); + border-radius: bonds.$bpk-border-size-lg; + background-color: bonds.$bpk-text-primary-inverse-day; + } + + &::before { + top: bonds.bpk-spacing-md() - bonds.$bpk-one-pixel-rem; + left: 0; + width: math.div(bonds.bpk-spacing-lg(), 3); + height: bonds.bpk-spacing-sm() - bonds.$bpk-one-pixel-rem; + } + + &::after { + top: bonds.bpk-spacing-sm() * 0.5; + left: bonds.bpk-spacing-md() - bonds.$bpk-one-pixel-rem; + width: bonds.bpk-spacing-sm() - bonds.$bpk-one-pixel-rem; + height: bonds.bpk-spacing-md() + (bonds.$bpk-one-pixel-rem * 3); + } + + &:disabled { + &::before, + &::after { + background-color: bonds.$bpk-text-disabled-day; + } + } +} + +/// Form checkbox input. +/// +/// @example scss +/// .selector { +/// @include bpk-checkbox__input(); +/// } + +@mixin bpk-checkbox__input { + $checkbox-input-size: bonds.bpk-spacing-lg() - (bonds.$bpk-one-pixel-rem * 4); + + position: absolute; + top: (bonds.$bpk-line-height-base - $checkbox-input-size) * 0.5; + left: 0; + width: $checkbox-input-size; + height: $checkbox-input-size; + margin: 0; + padding: 0; + border: (bonds.$bpk-one-pixel-rem * 3) solid bonds.$bpk-text-secondary-day; + border-radius: (bonds.$bpk-one-pixel-rem * 4); + cursor: pointer; + vertical-align: text-bottom; + appearance: none; + + @include utils.bpk-rtl { + right: 0; + left: auto; + } + + @media screen\0 { + /* stylelint-disable-next-line declaration-no-important */ + background: none !important; + } + + &:checked, + &:indeterminate { + @include utils.bpk-themeable-property( + background-color, + --bpk-checkbox-checked-color, + bonds.$bpk-core-accent-day + ); + @include utils.bpk-themeable-property( + border-color, + --bpk-checkbox-checked-color, + bonds.$bpk-core-accent-day + ); + + &:disabled { + border-color: bonds.$bpk-text-disabled-day; + background: none; + } + } + + &:checked:not(:indeterminate) { + @include bpk-checkbox__checkmark; + } + + &:disabled { + border-color: bonds.$bpk-text-disabled-day; + } +} + +/// Form radio button mixin. This is a reusable mixin to set border styles for the radio button. +/// +/// @param {variable} $color +/// +/// @access private +@mixin _bpk-radio-border($color) { + border: bonds.$bpk-border-size-xl solid $color; + border-radius: bonds.$bpk-border-radius-lg; +} + +/// Form radio button. Should be applied to containing label element. +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// } + +@mixin bpk-radio { + position: relative; + display: inline-block; + padding-left: bonds.bpk-spacing-lg() + bonds.bpk-spacing-sm(); + + @include utils.bpk-rtl { + padding-right: bonds.bpk-spacing-lg() + bonds.bpk-spacing-sm(); + padding-left: 0; + } +} + +/// Disabled form radio button. Modifies the bpk-radio mixin. +/// +/// @require {mixin} bpk-radio +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// @include bpk-radio--disabled(); +/// } + +@mixin bpk-radio--disabled { + color: bonds.$bpk-label-disabled-color; + cursor: not-allowed; +} + +/// White label radio button. Modifies the bpk-radio mixin. +/// +/// @require {mixin} bpk-radio +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// @include bpk-radio--white(); +/// } + +@mixin bpk-radio--white { + color: bonds.$bpk-text-primary-inverse-day; + + input[type='radio'] { + background: bonds.$bpk-text-primary-inverse-day; + } +} + +/// Invalid radio button. Modifies the bpk-radio mixin. +/// +/// @require {mixin} bpk-radio +/// +/// @example scss +/// .selector { +/// @include bpk-radio(); +/// @include bpk-radio--invalid(); +/// } + +@mixin bpk-radio--invalid { + input[type='radio'] { + @include _bpk-radio-border(bonds.$bpk-text-error-day); + } +} + +/// Form radio input. +/// +/// @example scss +/// .selector { +/// @include bpk-radio__input(); +/// } + +@mixin bpk-radio__input { + $bpk-radio-size: bonds.bpk-spacing-lg() - (bonds.$bpk-one-pixel-rem * 4); + + position: absolute; + top: 0; + left: 0; + width: $bpk-radio-size; + height: $bpk-radio-size; + margin: 0; + padding: 0; + cursor: pointer; + vertical-align: text-bottom; + appearance: none; + + @include _bpk-radio-border(bonds.$bpk-text-secondary-day); + + @include utils.bpk-rtl { + right: 0; + left: auto; + } + + @media screen\0 { + /* stylelint-disable-next-line declaration-no-important */ + background: none !important; + } + + &:checked { + @include utils.bpk-themeable-property( + border-color, + --bpk-radio-checked-color, + bonds.$bpk-core-accent-day + ); + + &:disabled { + border-color: bonds.$bpk-text-disabled-day; + } + } + + &:disabled { + border-color: bonds.$bpk-text-disabled-day; + } +} + +/// Form label. +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// } + +@mixin bpk-label { + display: block; + color: bonds.$bpk-text-primary-day; + font-size: bonds.$bpk-font-size-xs; + font-weight: bonds.$bpk-font-weight-bold; + line-height: bonds.$bpk-line-height-xs; +} + +/// Invalid form label. Modifies the bpk-label mixin. +/// +/// @require {mixin} bpk-label +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// @include bpk-label--invalid(); +/// } + +@mixin bpk-label--invalid { + @include utils.bpk-themeable-property( + color, + --bpk-form-validation-text-color, + bonds.$bpk-form-validation-color + ); +} + +/// White form label. Modifies the bpk-label mixin. +/// +/// @require {mixin} bpk-label +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// @include bpk-label--white(); +/// } + +@mixin bpk-label--white { + color: bonds.$bpk-color-white; +} + +/// Disabled form label. Modifies the bpk-label mixin. +/// +/// @require {mixin} bpk-label +/// +/// @example scss +/// .selector { +/// @include bpk-label(); +/// @include bpk-label--disabled(); +/// } + +@mixin bpk-label--disabled { + color: bonds.$bpk-label-disabled-color; + cursor: not-allowed; +} + +/// Form validation. +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation(); +/// } + +@mixin bpk-form-validation { + position: relative; + transform: translateY(-#{bonds.bpk-spacing-base()}); + transition: + opacity bonds.$bpk-duration-sm ease-in-out, + transform bonds.$bpk-duration-sm ease-in-out; + opacity: 0; + + @include utils.bpk-themeable-property( + color, + --bpk-form-validation-text-color, + bonds.$bpk-form-validation-color + ); +} + +/// Form validation transition state. Modifies the bpk-form-validation mixin. +/// +/// @require {mixin} bpk-form-validation +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation(); +/// +/// &--appear { +/// @include bpk-form-validation--appear(); +/// } +/// } + +@mixin bpk-form-validation--appear { + transform: translateY(0); + opacity: 1; +} + +/// Checkbox form validation. Modifies the bpk-form-validation mixin. +/// +/// @require {mixin} bpk-form-validation +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation(); +/// +/// &--is-checkbox { +/// @include bpk-form-validation--is-checkbox(); +/// } +/// } + +@mixin bpk-form-validation--is-checkbox { + display: inline-block; +} + +/// Form validation container. +/// +/// @example scss +/// .selector { +/// @include bpk-form-validation__container(); +/// } + +@mixin bpk-form-validation__container { + margin-top: bonds.bpk-spacing-md(); + font-size: bonds.$bpk-font-size-xs; +} + +/// Form textarea. +/// +/// @example scss +/// .selector { +/// @include bpk-textarea(); +/// } + +@mixin bpk-textarea { + display: inline-block; + width: 100%; + max-width: 100%; + min-height: bonds.bpk-spacing-md() * 11; + padding: bonds.$bpk-input-padding-y bonds.$bpk-input-padding-x; + border: bonds.$bpk-input-border; + border-radius: bonds.$bpk-input-border-radius; + background: bonds.$bpk-input-background; + color: bonds.$bpk-text-primary-day; + appearance: none; + + &::placeholder { + color: bonds.$bpk-text-secondary-day; + } + + &:disabled { + border-color: bonds.$bpk-input-disabled-border-color; + background: bonds.$bpk-input-background; + color: bonds.$bpk-input-disabled-color; + cursor: not-allowed; + } + + &::-ms-clear { + display: none; + } +} + +/// Invalid form input. Modifies the bpk-textarea mixin. +/// +/// @require {mixin} bpk-textarea +/// +/// @example scss +/// .selector { +/// @include bpk-textarea(); +/// @include bpk-textarea--invalid(); +/// } + +@mixin bpk-textarea--invalid { + padding-right: bonds.bpk-spacing-xl(); + background: bonds.$bpk-input-background + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==') + no-repeat right bonds.bpk-spacing-md() center; + + @include utils.bpk-themeable-property( + border-color, + --bpk-textarea-invalid-border-color, + bonds.$bpk-form-validation-color + ); + + @include utils.bpk-rtl { + padding-right: bonds.$bpk-input-padding-x; + padding-left: bonds.bpk-spacing-xl(); + background-position: left bonds.bpk-spacing-md() center; + + &.bpk-textarea--large { + padding-right: bonds.bpk-spacing-base(); + padding-left: bonds.bpk-spacing-xxl(); + background-position: right bonds.bpk-spacing-base() center; + } + } +} + +@mixin bpk-textarea--large { + min-height: 6 * bonds.bpk-spacing-base(); + padding-right: bonds.bpk-spacing-base(); + padding-left: bonds.bpk-spacing-base(); + + &.bpk-textarea--invalid { + padding-right: bonds.bpk-spacing-xxl(); + background-position: right bonds.bpk-spacing-base() center; + + @include utils.bpk-rtl { + padding-right: bonds.bpk-spacing-base(); + padding-left: bonds.bpk-spacing-xxl(); + background-position: left bonds.bpk-spacing-base() center; + } + } +} diff --git a/packages/unstable_bpk-mixins/_icons.scss b/packages/unstable_bpk-mixins/_icons.scss new file mode 100644 index 0000000000..6bc2900c6b --- /dev/null +++ b/packages/unstable_bpk-mixins/_icons.scss @@ -0,0 +1,88 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'utils.scss'; + +//// +/// @group svgs +//// + +/// Button alignment utility. +/// +/// @access private + +@mixin _bpk-svg--align-to-button() { + vertical-align: text-bottom; +} + +/// Large button alignment utility. +/// +/// @access private + +@mixin _bpk-svg--align-to-large-button() { + margin-top: (bonds.$bpk-private-button-line-height - bonds.$bpk-icon-size-lg) * 0.5; + vertical-align: top; +} + +/// Align to button. Modifies the bpk-icon-sm mixin. +/// +/// @require {mixin} bpk-icon-sm +/// +/// @example scss +/// .selector { +/// @include bpk-icon-sm(flight-sky-gray-tint-02); +/// @include bpk-icon-sm--align-to-button(); +/// } + +@mixin bpk-icon-sm--align-to-button() { + @include _bpk-svg--align-to-button; +} + +/// Align to large button. Modifies the bpk-icon-lg mixin. +/// +/// @require {mixin} bpk-icon-lg +/// +/// @example scss +/// .selector { +/// @include bpk-icon-lg(flight-sky-gray-tint-02); +/// @include bpk-icon-lg--align-to-large-button(); +/// } + +@mixin bpk-icon-lg--align-to-large-button() { + @include _bpk-svg--align-to-large-button; +} + +/// RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin. +/// +/// @require {mixin} bpk-icon-sm +/// @require {mixin} bpk-icon-lg +/// +/// @example scss +/// .selector { +/// @include bpk-icon-sm(flight-sky-gray-tint-02); +/// @include bpk-icon--rtl-support(); +/// } + +@mixin bpk-icon--rtl-support() { + @include utils.bpk-rtl { + transform: scaleX(-1); + } +} diff --git a/packages/unstable_bpk-mixins/_index.scss b/packages/unstable_bpk-mixins/_index.scss new file mode 100644 index 0000000000..bc5db987dc --- /dev/null +++ b/packages/unstable_bpk-mixins/_index.scss @@ -0,0 +1,38 @@ +/* + * 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. + */ + +@forward 'bonds'; +@forward 'badges'; +@forward 'borders'; +@forward 'breakpoints'; +@forward 'buttons'; +@forward 'cards'; +@forward 'chips'; +@forward 'forms'; +@forward 'icons'; +@forward 'layers'; +@forward 'margins'; +@forward 'panels'; +@forward 'radii'; +@forward 'scroll-indicators'; +@forward 'shadows'; +@forward 'spinners'; +@forward 'typography'; +@forward 'utils'; + +@warn "You're using blank import of all mixins. This might affect performance of your build tool and your bundle size. \nConsider switching to more granular imports, e.g. @use '@skyscanner/backpack-web/bpk-mixins/buttons'"; diff --git a/packages/unstable_bpk-mixins/_layers.scss b/packages/unstable_bpk-mixins/_layers.scss new file mode 100644 index 0000000000..15cc28cfa0 --- /dev/null +++ b/packages/unstable_bpk-mixins/_layers.scss @@ -0,0 +1,199 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'radii.scss'; +@use 'shadows.scss'; +@use 'utils.scss'; + +//// +/// @group layers +//// + +/// Layer base styles. +/// +/// @example scss +/// .selector { +/// @include bpk-layer; +/// } + +@mixin bpk-layer( + $background-color: bonds.$bpk-color-white, + $border-color: bonds.$bpk-surface-highlight-day +) { + border: bonds.$bpk-one-pixel-rem solid $border-color; + background-color: $background-color; + + @include radii.bpk-border-radius-sm; + @include shadows.bpk-box-shadow-lg; +} + +/// Layer arrow base styles. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// } + +@mixin bpk-layer-arrow($arrow-size) { + position: absolute; + pointer-events: none; + + &::before, + &::after { + position: absolute; + content: ''; + display: block; + } + + &::before { + border: ($arrow-size + bonds.$bpk-one-pixel-rem) solid transparent; + } + + &::after { + border: $arrow-size solid transparent; + } +} + +/// Layer top arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-top(1rem); +/// } + +@mixin bpk-layer-arrow-top( + $arrow-size, + $arrow-color: bonds.$bpk-color-white, + $border-color: bonds.$bpk-color-sky-gray-tint-06 +) { + bottom: 100%; + width: ($arrow-size * 2); + height: $arrow-size; + + &::before { + top: -1 * ($arrow-size + bonds.$bpk-one-pixel-rem); + margin-left: -1 * bonds.$bpk-one-pixel-rem; + border-bottom-color: $border-color; + + @include utils.bpk-rtl { + margin-right: -1 * bonds.$bpk-one-pixel-rem; + margin-left: 0; + } + } + + &::after { + top: -1 * $arrow-size + bonds.$bpk-one-pixel-rem; + border-bottom-color: $arrow-color; + } +} + +/// Layer right arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-right(1rem); +/// } + +@mixin bpk-layer-arrow-right( + $arrow-size, + $arrow-color: bonds.$bpk-color-white, + $border-color: bonds.$bpk-color-sky-gray-tint-06 +) { + left: 100%; + width: $arrow-size; + height: ($arrow-size * 2); + + &::before { + right: -1 * ($arrow-size + bonds.$bpk-one-pixel-rem); + margin-top: -1 * bonds.$bpk-one-pixel-rem; + border-left-color: $border-color; + } + + &::after { + right: -1 * $arrow-size + bonds.$bpk-one-pixel-rem; + border-left-color: $arrow-color; + } +} + +/// Layer bottom arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-bottom(1rem); +/// } + +@mixin bpk-layer-arrow-bottom( + $arrow-size, + $arrow-color: bonds.$bpk-color-white, + $border-color: bonds.$bpk-color-sky-gray-tint-06 +) { + top: 100%; + width: ($arrow-size * 2); + height: $arrow-size; + + &::before { + bottom: -1 * ($arrow-size + bonds.$bpk-one-pixel-rem); + margin-left: -1 * bonds.$bpk-one-pixel-rem; + border-top-color: $border-color; + + @include utils.bpk-rtl { + margin-right: -1 * bonds.$bpk-one-pixel-rem; + margin-left: 0; + } + } + + &::after { + bottom: -1 * $arrow-size + bonds.$bpk-one-pixel-rem; + border-top-color: $arrow-color; + } +} + +/// Layer left arrow. +/// +/// @example scss +/// .selector { +/// @include bpk-layer-arrow(1rem); +/// @include bpk-layer-arrow-left(1rem); +/// } + +@mixin bpk-layer-arrow-left( + $arrow-size, + $arrow-color: bonds.$bpk-color-white, + $border-color: bonds.$bpk-color-sky-gray-tint-06 +) { + right: 100%; + width: $arrow-size; + height: ($arrow-size * 2); + + &::before { + left: -1 * ($arrow-size + bonds.$bpk-one-pixel-rem); + margin-top: -1 * bonds.$bpk-one-pixel-rem; + border-right-color: $border-color; + } + + &::after { + left: -1 * $arrow-size + bonds.$bpk-one-pixel-rem; + border-right-color: $arrow-color; + } +} diff --git a/packages/unstable_bpk-mixins/_margins.scss b/packages/unstable_bpk-mixins/_margins.scss new file mode 100644 index 0000000000..c3a0f801c4 --- /dev/null +++ b/packages/unstable_bpk-mixins/_margins.scss @@ -0,0 +1,75 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'utils.scss'; + +/// RTL aware leading margin +/// +/// @param {string} $margin The desired leading margin. +/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-margin-leading(bpk-spacing-base()); +/// } +@mixin bpk-margin-leading($margin, $resetOppositeMargin: true) { + margin-left: $margin; + + @if $resetOppositeMargin { + margin-right: 0; + } + + @include utils.bpk-rtl { + @if $resetOppositeMargin { + margin-left: 0; + } + + margin-right: $margin; + } +} + +/// RTL aware trailing margin +/// +/// @param {string} $margin The desired trailing margin. +/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-margin-trailing(bpk-spacing-base()); +/// } +@mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) { + @if $resetOppositeMargin { + margin-left: 0; + } + + margin-right: $margin; + + @include utils.bpk-rtl { + margin-left: $margin; + + @if $resetOppositeMargin { + margin-right: 0; + } + } +} diff --git a/packages/unstable_bpk-mixins/_panels.scss b/packages/unstable_bpk-mixins/_panels.scss new file mode 100644 index 0000000000..b84b49b7ab --- /dev/null +++ b/packages/unstable_bpk-mixins/_panels.scss @@ -0,0 +1,71 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'borders.scss'; +@use 'radii.scss'; + +//// +/// @group panels +//// + +/// Basic panel. +/// +/// @example scss +/// .selector { +/// @include @bpk-panel() +/// } +@mixin bpk-panel { + display: block; + background-color: bonds.$bpk-card-background-color; + + @include borders.bpk-border-sm(bonds.$bpk-panel-border-color); + @include radii.bpk-border-radius-md; +} + +/// Adds padding to panels. Modifies the bpk-panel mixin. +/// +/// @require {mixin} bpk-panel +/// +/// @example scss +/// .selector { +/// @include bpk-panel(); +/// @include bpk-panel--padded(); +/// } +@mixin bpk-panel--padded { + padding: bonds.$bpk-card-padding; +} + +/// Makes panel full width by removing left and right border. +/// Modifies the bpk-panel mixin. +/// +/// @require {mixin} bpk-panel +/// +/// @example scss +/// .selector { +/// @include bpk-panel(); +/// @include bpk-panel--full-width(); +/// } +@mixin bpk-panel--full-width { + border-radius: 0; + box-shadow: + bonds.$bpk-panel-border-color 0 -1 * bonds.$bpk-one-pixel-rem 0 0 inset, + bonds.$bpk-panel-border-color 0 bonds.$bpk-one-pixel-rem 0 0 inset; +} diff --git a/packages/unstable_bpk-mixins/_radii.scss b/packages/unstable_bpk-mixins/_radii.scss new file mode 100644 index 0000000000..04bb4c1aac --- /dev/null +++ b/packages/unstable_bpk-mixins/_radii.scss @@ -0,0 +1,80 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; + +//// +/// @group radii +//// + +/// Extra small border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-xs(); +/// } + +@mixin bpk-border-radius-xs { + border-radius: bonds.$bpk-border-radius-xs; +} + +/// Small border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-sm(); +/// } + +@mixin bpk-border-radius-sm { + border-radius: bonds.$bpk-border-radius-sm; +} + +/// Medium border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-md(); +/// } + +@mixin bpk-border-radius-md { + border-radius: bonds.$bpk-border-radius-md; +} + +/// Large border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-lg(); +/// } + +@mixin bpk-border-radius-lg { + border-radius: bonds.$bpk-border-radius-lg; +} + +/// Extra large border radius. +/// +/// @example scss +/// .selector { +/// @include bpk-border-radius-xl(); +/// } + +@mixin bpk-border-radius-xl { + border-radius: bonds.$bpk-border-radius-xl; +} diff --git a/packages/unstable_bpk-mixins/_scroll-indicators.scss b/packages/unstable_bpk-mixins/_scroll-indicators.scss new file mode 100644 index 0000000000..cd2c32654c --- /dev/null +++ b/packages/unstable_bpk-mixins/_scroll-indicators.scss @@ -0,0 +1,79 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; + +//// +/// @group scroll-indicator +//// + +/// Scroll indicator utility. +/// +/// @access private + +@mixin _bpk-scroll-indicator($gradient-color, $direction: 'left') { + $gradient-direction: if($direction == 'left', 90deg, 270deg); + + position: absolute; + top: 0; + bottom: 0; + content: ' '; + display: block; + z-index: 1; + width: bonds.bpk-spacing-xl(); + background-image: linear-gradient( + $gradient-direction, + rgba($gradient-color, 1), + rgba($gradient-color, 0) + ); + pointer-events: none; + + @if $direction == 'left' { + left: 0; + } @else { + right: 0; + } +} + +/// Left-sided scroll indicator. +/// +/// @example scss +/// .selector { +/// @include bpk-scroll-indicator-left($bpk-color-grey-100); +/// } + +@mixin bpk-scroll-indicator-left($gradient-color) { + &::before { + @include _bpk-scroll-indicator($gradient-color, 'left'); + } +} + +/// Right-sided scroll indicator. +/// +/// @example scss +/// .selector { +/// @include bpk-scroll-indicator-right($bpk-color-grey-100); +/// } + +@mixin bpk-scroll-indicator-right($gradient-color) { + &::after { + @include _bpk-scroll-indicator($gradient-color, 'right'); + } +} diff --git a/packages/unstable_bpk-mixins/_shadows.scss b/packages/unstable_bpk-mixins/_shadows.scss new file mode 100644 index 0000000000..bc2e6f3b72 --- /dev/null +++ b/packages/unstable_bpk-mixins/_shadows.scss @@ -0,0 +1,58 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; + +//// +/// @group box-shadows +//// + +/// Small box shadow. +/// +/// @example scss +/// .selector { +/// @include bpk-box-shadow-sm(); +/// } + +@mixin bpk-box-shadow-sm { + box-shadow: bonds.$bpk-box-shadow-sm; +} + +/// Large box shadow. +/// +/// @example scss +/// .selector { +/// @include bpk-box-shadow-lg(); +/// } + +@mixin bpk-box-shadow-lg { + box-shadow: bonds.$bpk-box-shadow-lg; +} + +/// Extra large box shadow. +/// +/// @example scss +/// .selector { +/// @include bpk-box-shadow-xl(); +/// } + +@mixin bpk-box-shadow-xl { + box-shadow: bonds.$bpk-box-shadow-xl; +} diff --git a/packages/unstable_bpk-mixins/_spinners.scss b/packages/unstable_bpk-mixins/_spinners.scss new file mode 100644 index 0000000000..5b980d5d20 --- /dev/null +++ b/packages/unstable_bpk-mixins/_spinners.scss @@ -0,0 +1,102 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'icons.scss'; +@use 'utils.scss'; + +@keyframes bpk-keyframe-spin { + 100% { + transform: rotate(1turn); + } +} + +/// Small spinner. +/// +/// @param {key} $spinner - The key of the desired SVG datauri from the $bpk-spinners map. +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(spinner-sky-gray-tint-02); +/// } + +@mixin bpk-spinner() { + width: bonds.bpk-spacing-base(); + height: bonds.bpk-spacing-base(); + animation: bpk-keyframe-spin 600ms linear infinite; +} + +/// Large spinner. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(spinner-sky-gray-tint-02); +/// @include bpk-spinner--lg(); +/// } + +@mixin bpk-spinner--lg() { + width: bonds.bpk-spacing-lg(); + height: bonds.bpk-spacing-lg(); +} + +/// Extra large spinner. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(spinner-sky-gray-tint-02); +/// @include bpk-spinner--xl(); +/// } + +@mixin bpk-spinner--xl() { + width: bonds.bpk-spacing-xl(); + height: bonds.bpk-spacing-xl(); +} + +/// Align spinner to button. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(); +/// @include bpk-icon--align-to-button(); +/// } + +@mixin bpk-spinner--align-to-button() { + vertical-align: baseline; +} + +/// Align spinner to large button. Modifies the bpk-spinner mixin. +/// +/// @require {mixin} bpk-spinner +/// +/// @example scss +/// .selector { +/// @include bpk-spinner(); +/// @include bpk-spinner--align-to-large-button(); +/// } + +@mixin bpk-spinner--align-to-large-button() { + @include icons.bpk-icon-lg--align-to-large-button; +} diff --git a/packages/unstable_bpk-mixins/_typography.scss b/packages/unstable_bpk-mixins/_typography.scss new file mode 100644 index 0000000000..f7c7e80470 --- /dev/null +++ b/packages/unstable_bpk-mixins/_typography.scss @@ -0,0 +1,1039 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use 'bonds.scss'; +@use 'borders.scss'; +@use 'radii.scss'; +@use 'utils.scss'; + +//// +/// @group typography +//// + +/// Type factory. +/// +/// @param {variable} $font-size +/// @param {variable} $line-height +/// @param {variable} $font-weight false +/// @param {variable} $letter-spacing false +/// +/// @access private + +@mixin _bpk-text-factory( + $font-size, + $line-height, + $font-weight: false, + $letter-spacing: false +) { + font-size: $font-size; + line-height: $line-height; + + @if $font-weight { + font-weight: $font-weight; + } + + @if $letter-spacing { + letter-spacing: $letter-spacing; + } +} + +/// Text margin reset. +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// } + +@mixin bpk-text { + margin: 0; +} + +/// Extra small text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xs; +/// } + +@mixin bpk-text--xs { + @include _bpk-text-factory( + bonds.$bpk-font-size-xs, + bonds.$bpk-line-height-xs, + bonds.$bpk-font-weight-book + ); +} + +/// Extra small text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xs; +/// } + +@mixin bpk-text-xs { + @include bpk-text--xs; +} + +/// Small text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--sm; +/// } + +@mixin bpk-text--sm { + @include _bpk-text-factory( + bonds.$bpk-font-size-sm, + bonds.$bpk-line-height-sm, + bonds.$bpk-font-weight-book + ); +} + +/// Small text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-sm; +/// } + +@mixin bpk-text-sm { + @include bpk-text--sm; +} + +/// Base text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--base; +/// } + +@mixin bpk-text--base { + @include _bpk-text-factory( + bonds.$bpk-font-size-base, + bonds.$bpk-line-height-base, + bonds.$bpk-font-weight-book + ); +} + +/// Base text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-base; +/// } + +@mixin bpk-text-base { + @include bpk-text--base; +} + +/// Large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--lg; +/// } + +@mixin bpk-text--lg { + @include _bpk-text-factory( + bonds.$bpk-font-size-lg, + bonds.$bpk-line-height-lg, + bonds.$bpk-font-weight-book + ); +} + +/// Large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-lg; +/// } + +@mixin bpk-text-lg { + @include bpk-text--lg; +} + +/// Extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xl; +/// } + +@mixin bpk-text--xl { + @include _bpk-text-factory( + bonds.$bpk-font-size-xl, + bonds.$bpk-line-height-xl, + bonds.$bpk-font-weight-book + ); +} + +/// Extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xl; +/// } + +@mixin bpk-text-xl { + @include bpk-text--xl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxl; +/// } + +@mixin bpk-text--xxl { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxl, + bonds.$bpk-line-height-xxl, + bonds.$bpk-font-weight-bold + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxl; +/// } + +@mixin bpk-text-xxl { + @include bpk-text--xxl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxxl; +/// } + +@mixin bpk-text--xxxl { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxxl, + bonds.$bpk-line-height-xxxl, + bonds.$bpk-font-weight-bold + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxxl; +/// } + +@mixin bpk-text-xxxl { + @include bpk-text--xxxl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxxxl; +/// } + +@mixin bpk-text--xxxxl { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxxxl, + bonds.$bpk-line-height-xxxxl, + bonds.$bpk-font-weight-bold, + bonds.$bpk-letter-spacing-tight + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxxxl; +/// } + +@mixin bpk-text-xxxxl { + @include bpk-text--xxxxl; +} + +/// Extra extra large text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--xxxxxl; +/// } + +@mixin bpk-text--xxxxxl { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxxxxl, + bonds.$bpk-line-height-xxxxxl, + bonds.$bpk-font-weight-bold, + bonds.$bpk-letter-spacing-tight + ); +} + +/// Extra extra large text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-xxxxxl; +/// } + +@mixin bpk-text-xxxxxl { + @include bpk-text--xxxxxl; +} + +/// Bold text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--bold; +/// } + +@mixin bpk-text--bold { + font-weight: bonds.$bpk-font-weight-bold; +} + +/// Bold text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-bold; +/// } + +@mixin bpk-text-bold { + @include bpk-text--bold; +} + +/// Black text style +/// +/// @require {mixin} bpk-text +/// +/// @example scss +/// .selector { +/// @include bpk-text; +/// @include bpk-text--black; +/// } + +@mixin bpk-text--black { + font-weight: bonds.$bpk-font-weight-black; +} + +/// Black text style (without margin reset) +/// +/// @example scss +/// .selector { +/// @include bpk-text-heavy; +/// } + +@mixin bpk-text-black { + @include bpk-text--black; +} + +/// Caption text style +/// +/// @example scss +/// .selector { +/// @include bpk-caption; +/// } + +@mixin bpk-caption { + @include _bpk-text-factory( + bonds.$bpk-font-size-xs, + bonds.$bpk-line-height-xs, + bonds.$bpk-font-weight-book + ); +} + +/// Footnote text style +/// +/// @example scss +/// .selector { +/// @include bpk-footnote; +/// } + +@mixin bpk-footnote { + @include _bpk-text-factory( + bonds.$bpk-font-size-sm, + bonds.$bpk-line-height-sm, + bonds.$bpk-font-weight-book + ); +} + +/// Label-1 text style +/// +/// @example scss +/// .selector { +/// @include bpk-label-1; +/// } + +@mixin bpk-label-1 { + @include _bpk-text-factory( + bonds.$bpk-font-size-base, + bonds.$bpk-line-height-base, + bonds.$bpk-font-weight-bold + ); +} + +/// Label-2 text style +/// +/// @example scss +/// .selector { +/// @include bpk-label-2; +/// } + +@mixin bpk-label-2 { + @include _bpk-text-factory( + bonds.$bpk-font-size-sm, + bonds.$bpk-line-height-sm, + bonds.$bpk-font-weight-bold + ); +} + +/// Label-3 text style +/// +/// @example scss +/// .selector { +/// @include bpk-label-3; +/// } + +@mixin bpk-label-3 { + @include _bpk-text-factory( + bonds.$bpk-font-size-xs, + bonds.$bpk-line-height-xs, + bonds.$bpk-font-weight-bold + ); +} + +/// Default body text style +/// +/// @example scss +/// .selector { +/// @include bpk-body-default; +/// } + +@mixin bpk-body-default { + @include _bpk-text-factory( + bonds.$bpk-font-size-base, + bonds.$bpk-line-height-base, + bonds.$bpk-font-weight-book + ); +} + +/// Longform body text style +/// +/// @example scss +/// .selector { +/// @include bpk-body-longform; +/// } + +@mixin bpk-body-longform { + @include _bpk-text-factory( + bonds.$bpk-font-size-lg, + bonds.$bpk-line-height-lg, + bonds.$bpk-font-weight-book + ); +} + +/// Subheading text style +/// +/// @example scss +/// .selector { +/// @include bpk-subheading; +/// } + +@mixin bpk-subheading { + @include _bpk-text-factory( + bonds.$bpk-font-size-xl, + bonds.$bpk-line-height-xl, + bonds.$bpk-font-weight-book + ); +} + +/// Hero 1 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-1; +/// } + +@mixin bpk-hero-1 { + @include _bpk-text-factory( + bonds.$bpk-font-size-8-xl, + bonds.$bpk-line-height-8-xl, + bonds.$bpk-font-weight-bold, + bonds.$bpk-letter-spacing-tight + ); +} + +/// Hero 2 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-2; +/// } + +@mixin bpk-hero-2 { + @include _bpk-text-factory( + bonds.$bpk-font-size-7-xl, + bonds.$bpk-line-height-7-xl, + bonds.$bpk-font-weight-bold, + bonds.$bpk-letter-spacing-tight + ); +} + +/// Hero 3 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-3; +/// } + +@mixin bpk-hero-3 { + @include _bpk-text-factory( + bonds.$bpk-font-size-6-xl, + bonds.$bpk-line-height-6-xl, + bonds.$bpk-font-weight-bold, + bonds.$bpk-letter-spacing-tight + ); +} + +/// Hero 4 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-4; +/// } + +@mixin bpk-hero-4 { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxxxxl, + bonds.$bpk-line-height-xxxxxl, + bonds.$bpk-font-weight-bold, + bonds.$bpk-letter-spacing-tight + ); +} + +/// Hero 5 text style +/// +/// @example scss +/// .selector { +/// @include bpk-hero-5; +/// } + +@mixin bpk-hero-5 { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxxxl, + bonds.$bpk-line-height-xxxxl, + bonds.$bpk-font-weight-bold, + bonds.$bpk-letter-spacing-tight + ); +} + +/// Level 1 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-1(); +/// } + +@mixin bpk-heading-1 { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxxl, + bonds.$bpk-line-height-xxxl, + bonds.$bpk-font-weight-bold + ); +} + +/// Level 2 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-2(); +/// } + +@mixin bpk-heading-2 { + @include _bpk-text-factory( + bonds.$bpk-font-size-xxl, + bonds.$bpk-line-height-xxl, + bonds.$bpk-font-weight-bold + ); +} + +/// Level 3 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-3(); +/// } + +@mixin bpk-heading-3 { + @include _bpk-text-factory( + bonds.$bpk-font-size-xl, + bonds.$bpk-line-height-xl-tight, + bonds.$bpk-font-weight-bold + ); +} + +/// Level 4 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-4(); +/// } + +@mixin bpk-heading-4 { + @include _bpk-text-factory( + bonds.$bpk-font-size-lg, + bonds.$bpk-line-height-lg-tight, + bonds.$bpk-font-weight-bold + ); +} + +/// Level 5 heading. +/// +/// @example scss +/// .selector { +/// @include bpk-heading-5(); +/// } + +@mixin bpk-heading-5 { + @include _bpk-text-factory( + bonds.$bpk-font-size-base, + bonds.$bpk-line-height-base-tight, + bonds.$bpk-font-weight-bold + ); +} + +/// Paragraph. +/// +/// @example scss +/// .selector { +/// @include bpk-paragraph(); +/// } + +@mixin bpk-paragraph { + margin-top: bonds.$bpk-spacing-none; + margin-bottom: bonds.bpk-spacing-base(); +} + +/// List. +/// +/// @example scss +/// .selector { +/// @include bpk-list(); +/// } + +@mixin bpk-list { + margin-top: bonds.bpk-spacing-base(); + margin-bottom: bonds.bpk-spacing-base(); + padding-left: bonds.bpk-spacing-lg(); +} + +/// Nested list. Modifies the bpk-list mixin. +/// +/// @require {mixin} bpk-list +/// +/// @example scss +/// .selector { +/// @include bpk-list(); +/// @include bpk-list--nested(); +/// } + +@mixin bpk-list--nested { + margin-top: bonds.$bpk-spacing-none; + margin-bottom: bonds.$bpk-spacing-none; + padding-top: bonds.bpk-spacing-md(); + padding-bottom: bonds.bpk-spacing-sm(); +} + +/// List item. +/// +/// @example scss +/// .selector { +/// @include bpk-list-item(); +/// } + +@mixin bpk-list-item { + margin-top: 0; + margin-bottom: bonds.bpk-spacing-sm(); +} + +/// Inline link. +/// +/// @example scss +/// .selector { +/// @include bpk-link(); +/// } + +@mixin bpk-link { + padding: 0; + border: 0; + background-color: transparent; + text-decoration: none; + cursor: pointer; + appearance: none; + + @include utils.bpk-themeable-property(color, --bpk-link-color, bonds.$bpk-text-link-day); + + @include utils.bpk-hover { + text-decoration: underline; + + @include utils.bpk-themeable-property( + color, + --bpk-link-hover-color, + bonds.$bpk-text-link-day + ); + } + + &:visited { + @include utils.bpk-themeable-property( + color, + --bpk-link-visited-color, + bonds.$bpk-text-link-day + ); + } + + &:active { + text-decoration: underline; + + @include utils.bpk-themeable-property( + color, + --bpk-link-active-color, + bonds.$bpk-text-link-day + ); + } +} + +/// White link. Modifies the bpk-link mixin. +/// +/// @require {mixin} bpk-link +/// +/// @example scss +/// .selector { +/// @include bpk-link(); +/// @include bpk-link--white(); +/// } + +@mixin bpk-link--alternate { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-color, + bonds.$bpk-text-on-dark-day + ); + + @include utils.bpk-hover { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-hover-color, + bonds.$bpk-text-on-dark-day + ); + } + + &:visited { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-visited-color, + bonds.$bpk-text-on-dark-day + ); + } + + &:active { + @include utils.bpk-themeable-property( + color, + --bpk-link-alternate-active-color, + bonds.$bpk-text-on-dark-day + ); + } +} + +@mixin bpk-link--white { + @include bpk-link--alternate; +} + +/// Active link. Modifies the bpk-link mixin. +/// +/// @require {mixin} bpk-link +/// +/// @example scss +/// .selector { +/// @include bpk-link(); +/// @include bpk-link--active(); +/// } + +@mixin bpk-link--active { + color: bonds.$bpk-text-link-day; + + &:visited { + color: bonds.$bpk-text-link-day; + } + + &:active { + color: bonds.$bpk-text-link-day; + } +} + +/// Table. +/// +/// @example scss +/// .selector { +/// @include bpk-table(); +/// } + +@mixin bpk-table { + width: 100%; + margin-bottom: bonds.bpk-spacing-md(); + border-collapse: collapse; + table-layout: fixed; + + @include borders.bpk-border-sm(bonds.$bpk-line-day, ''); +} + +/// Alternate table style. +/// @require {mixin} bpk-table +/// +/// @example scss +/// .selector { +/// @include bpk-table(); +/// @include bpk-table--alternate(); +/// } + +@mixin bpk-table--alternate { + @include borders.bpk-border-sm(bonds.$bpk-line-day, ''); +} + +/// Table cell. +/// +/// @example scss +/// .selector { +/// @include bpk-table__cell(); +/// } + +@mixin bpk-table__cell { + padding: bonds.bpk-spacing-base(); +} + +/// Table head cell. Modifies the bpk-table__cell mixin. +/// +/// @require {mixin} bpk-table__cell +/// +/// @example scss +/// .selector { +/// @include bpk-table__cell(); +/// @include bpk-table__cell--head(); +/// } + +@mixin bpk-table__cell--head { + background-color: bonds.$bpk-canvas-contrast-day; + text-align: left; + + @include bpk-label-1; + + @include utils.bpk-rtl { + text-align: right; + } +} + +/// Alternate table head cell. Modifies the bpk-table__cell mixin. +/// +/// @require {mixin} bpk-table__cell +/// +/// @example scss +/// .selector { +/// @include bpk-table__cell(); +/// @include bpk-table__cell--head-alternate(); +/// } + +@mixin bpk-table__cell--head-alternate { + background-color: bonds.$bpk-canvas-day; + text-align: left; + + @include bpk-text--bold; + + @include utils.bpk-rtl { + text-align: right; + } +} + +/// Code. +/// +/// @example scss +/// .selector { +/// @include bpk-code(); +/// } + +@mixin bpk-code { + display: inline; + padding: 0 bonds.bpk-spacing-sm(); + background-color: bonds.$bpk-surface-highlight-day; + color: bonds.$bpk-text-primary-day; + text-align: left; + white-space: nowrap; + vertical-align: bottom; + + @include radii.bpk-border-radius-xs; + + @include utils.bpk-rtl { + direction: ltr; + } +} + +/// Alternate code style suited for display on non-white backgrounds. +/// +/// @example scss +/// .selector { +/// @include bpk-code(); +/// @include bpk-code--alternate(); +/// } + +@mixin bpk-code--alternate { + background-color: bonds.$bpk-canvas-contrast-day; + text-shadow: none; +} + +/// Code block. Modifies the bpk-code mixin. +/// +/// @require {mixin} bpk-code +/// +/// @example scss +/// .selector { +/// @include bpk-code(); +/// @include bpk-code--block(); +/// } + +@mixin bpk-code--block { + display: block; + margin: 0; + padding: 0; + background-color: transparent; + white-space: inherit; + overflow: auto; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } +} + +/// Pre (code block wrapper). +/// +/// @example scss +/// .selector { +/// @include bpk-code__pre(); +/// } + +@mixin bpk-code__pre { + margin: 0 0 bonds.bpk-spacing-base(); + padding: bonds.bpk-spacing-lg(); + background-color: bonds.$bpk-surface-highlight-day; + + @include radii.bpk-border-radius-xs; +} + +/// Pre (code block wrapper) alternate style. +/// +/// @example scss +/// .selector { +/// @include bpk-code__pre(); +/// @include bpk-code__pre--alternate(); +/// } + +@mixin bpk-code__pre--alternate { + background-color: transparent; + + @include borders.bpk-border-sm(bonds.$bpk-line-day); +} + +/// Blockquote. +/// +/// @example scss +/// .selector { +/// @include bpk-blockquote(); +/// } + +@mixin bpk-blockquote { + margin: 0 0 bonds.bpk-spacing-base() 0; + padding: bonds.bpk-spacing-lg(); + + @include borders.bpk-border-left-lg(bonds.$bpk-core-accent-day); + @include borders.bpk-border-left-lg( + var(--bpk-blockquote-bar-color, bonds.$bpk-core-accent-day) + ); + + @include utils.bpk-rtl { + padding: bonds.bpk-spacing-lg(); + border-left: 0; + + @include borders.bpk-border-right-lg(bonds.$bpk-core-accent-day); + @include borders.bpk-border-right-lg( + var(--bpk-blockquote-bar-color, bonds.$bpk-core-accent-day) + ); + } + + > *:last-child { + margin-bottom: 0; + } +} + +/// Adds additional spacing above and below blockquotes. Modifies the bpk-blockquote mixin. +/// +/// @require {mixin} bpk-blockquote +/// +/// @example scss +/// .selector { +/// @include bpk-blockquote(); +/// @include bpk-blockquote--extra-spacing(); +/// } + +@mixin bpk-blockquote--extra-spacing { + margin-top: bonds.bpk-spacing-xl(); + margin-bottom: bonds.bpk-spacing-xl(); +} diff --git a/packages/unstable_bpk-mixins/_utils.scss b/packages/unstable_bpk-mixins/_utils.scss new file mode 100644 index 0000000000..6859068096 --- /dev/null +++ b/packages/unstable_bpk-mixins/_utils.scss @@ -0,0 +1,268 @@ +/* + * 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. + */ + +/* stylelint-disable at-rule-disallowed-list */ + +@use "sass:string"; +@use 'bonds.scss'; + +//// +/// @group utils +//// + +/// Standard focus indicator for elements. +/// +/// @example scss +/// .selector { +/// @include bpk-focus-indicator(); +/// } + +@mixin bpk-focus-indicator { + outline: (bonds.$bpk-one-pixel-rem * 2) solid bonds.$bpk-text-link-day !important; /* stylelint-disable-line declaration-no-important */ + outline-offset: ( + bonds.$bpk-one-pixel-rem * 2 + ) !important; /* stylelint-disable-line declaration-no-important */ +} + +/// Hide visually and from screen readers. +/// +/// @example scss +/// .selector { +/// @include bpk-hidden(); +/// } + +@mixin bpk-hidden { + display: none !important; /* stylelint-disable-line declaration-no-important */ +} + +/// Hide only visually, but have it available for screen readers: +/// +/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +/// +/// @example scss +/// .selector { +/// @include bpk-visually-hidden(); +/// } + +@mixin bpk-visually-hidden { + position: absolute; + width: 1px; /* stylelint-disable-line unit-disallowed-list */ + height: 1px; /* stylelint-disable-line unit-disallowed-list */ + margin: -1px; /* stylelint-disable-line unit-disallowed-list */ + padding: 0; + border: 0; + overflow: hidden; + clip: rect(0 0 0 0); +} + +/// Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard: +/// +/// https://www.drupal.org/node/897638 +/// +/// @require {mixin} bpk-visually-hidden +/// +/// @example scss +/// .selector { +/// @include bpk-visually-hidden(); +/// @include bpk-visually-hidden--focusable(); +/// } + +@mixin bpk-visually-hidden--focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + +/// Hide visually and from screen readers, but maintain layout. +/// +/// @example scss +/// .selector { +/// @include bpk-invisible(); +/// } + +@mixin bpk-invisible { + visibility: hidden; +} + +/// Clearfix: contain floats. +/// +/// @example scss +/// .selector { +/// @include bpk-clearfix(); +/// } + +@mixin bpk-clearfix { + &::before, + &::after { + content: ''; + display: table; + } + + &::after { + clear: both; + } +} + +/// Target RTL specific styles. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-rtl() { +/// /* RTL scss goes here */ +/// } +/// } + +@mixin bpk-rtl { + html[dir='rtl'] & { + @content; + } +} + +/// :hover pseudo selector wrapper which prevents styles displaying on touch devices +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-hover() { +/// /* Non-touch specific hover scss goes here */ +/// } +/// } + +@mixin bpk-hover { + .bpk-no-touch-support &:hover:not(:active):not(:disabled) { + @content; + } + + // Duplicating the above rule with `:global(...)` pseudo selector around the + // global `.bpk-no-touch-support` class to provide support for CSS modules. + // - when processed through css-loader, the `:global(...)` pseudo selector will be dropped + // leaving a duplicate rule which in turn will be 'uglified' out - so no worries there + // - when processed through node-sass only, the `:global(...)` pseudo selector will be left + // intact and ignored by all browsers + // stylelint-disable-next-line selector-pseudo-class-no-unknown + :global(.bpk-no-touch-support) &:hover:not(:active):not(:disabled) { + @content; + } +} + +/// Target locale specific styles. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-locale('ja-JP') { +/// /* ja-JP scss goes here */ +/// } +/// } + +@mixin bpk-locale($locale) { + html[lang='#{$locale}'] &, + html[lang='#{string.to_lower_case($locale)}'] & { + @content; + } +} + +/// Create a Backpack themeable property with +/// fallback support for old browsers and when +/// the CSS variable is not defined. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color); +/// } + +@mixin bpk-themeable-property($property, $variableName, $fallback) { + #{$property}: $fallback; + #{$property}: var($variableName, $fallback); +} + +/// Create a property that uses the Backpack primary color blue-500. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-apply-primary-color-to(color); +/// } +@mixin bpk-apply-primary-color-to($property) { + @include bpk-themeable-property( + $property, + --bpk-primary-color, + bonds.$bpk-color-sky-blue + ); +} + +/// Replace part of a string with another string. +/// +/// @param {string} $string - The string inside which the replacement should take place. +/// @param {string} $search - The substring to be replaced. +/// @param {string} $replace [''] - The string to replace $search. + +@function str-replace($string, $search, $replace: '') { + /* Disabling rule here as the recommendation method is for newer sass versions that we don't yet support */ + /* stylelint-disable-next-line scss/no-global-function-names */ + $index: string.index($string, $search); + + @if $index { + @return string.slice($string, 1, $index - 1) + $replace + + str-replace( + string.slice($string, $index + string.length($search)), + $search, + $replace + ); + } + + @return $string; +} + +/// Increases the tappable area of the element to the +/// minimum required for touch devices. +/// +/// @content +/// +/// @example scss +/// .selector { +/// @include bpk-touch-area; +/// } + +@mixin bpk-touch-tappable { + position: relative; + + &::before { + position: absolute; + /* stylelint-disable-next-line function-calc-no-invalid */ + top: calc((-#{bonds.bpk-spacing-xxl() + bonds.bpk-spacing-sm()} / 2) + 50%); + /* stylelint-disable-next-line function-calc-no-invalid */ + left: calc((-#{bonds.bpk-spacing-xxl() + bonds.bpk-spacing-sm()} / 2) + 50%); + content: ''; + width: bonds.bpk-spacing-xxl() + bonds.bpk-spacing-sm(); + height: bonds.bpk-spacing-xxl() + bonds.bpk-spacing-sm(); + } +} diff --git a/scripts/scss/_bonds.template.scss b/scripts/scss/_bonds.template.scss new file mode 100644 index 0000000000..66ad285332 --- /dev/null +++ b/scripts/scss/_bonds.template.scss @@ -0,0 +1,19 @@ +/* + * 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. + */ + +@forward '@skyscanner/bpk-foundations-web/tokens/base.default'; diff --git a/scripts/scss/generate-v2.sh b/scripts/scss/generate-v2.sh new file mode 100755 index 0000000000..1faccb5c27 --- /dev/null +++ b/scripts/scss/generate-v2.sh @@ -0,0 +1,38 @@ +set -e + +printf "🧽 Wiping packages/bpk-mixins-next...\n" + +if [ -d packages/bpk-mixins-next ]; then + rm -rf packages/bpk-mixins-next +fi + +printf "✅ Done! \n \n" + +printf "📋 Copying mixins to new location...\n" + +cp -r packages/bpk-mixins packages/bpk-mixins-next + +rm packages/bpk-mixins-next/src/_bonds.scss + +cp scripts/scss/_bonds.template.scss packages/bpk-mixins-next/src/_bonds.scss + +printf "✅ Done! \n \n" + +printf "⚙️ Running sass-migrator...\n" + + +# Migrate all other files to new syntax +printf "👉 Applying new module resolution...\n" + +sass-migrator --load-path=node_modules module packages/bpk-mixins-next/src/**/*.scss + +printf "👉 Applying new division rules...\n" + +sass-migrator --load-path=node_modules division packages/bpk-mixins-next/src/**/*.scss + +printf "👉 Forwarding everything...\n" + +# Migrate _index.scss to new syntax +sass-migrator --load-path=node_modules module --forward=all packages/bpk-mixins-next/_index.scss + +printf "✅ New mixins generated. Import them from bpk-mixins-next using '@use' notation \n" diff --git a/scripts/scss/upgrade.sh b/scripts/scss/upgrade.sh new file mode 100755 index 0000000000..370bf667a8 --- /dev/null +++ b/scripts/scss/upgrade.sh @@ -0,0 +1,14 @@ +set -e + +cd packages + +for dir in */ +do + if [ $dir != bpk-mixins-next/ ] && [ $dir != bpk-mixins/ ] && [ $dir != node_modules/ ]; + then + echo $dir + sass-migrator --load-path=node_modules module "${dir}**/*.scss" + sass-migrator --load-path=node_modules division "${dir}**/*.scss" + sass-migrator --load-path=node_modules namespace --rename 'bpk-mixins-next to mixins' "${dir}**/*.scss" + fi +done From 7d630db4c187847cdf35fcf58a836907b9215241 Mon Sep 17 00:00:00 2001 From: Aleksandr Sannikov Date: Thu, 30 Nov 2023 15:45:56 +0000 Subject: [PATCH 02/33] [NO-JIRA]: Fixed dependencies --- package-lock.json | 1109 +++++---------------------------------------- package.json | 1 - 2 files changed, 125 insertions(+), 985 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9722aec4d8..244976e1c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,7 +46,6 @@ "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", "css-loader": "^6.9.0", "d3-scale": "^4.0.2", @@ -2105,7 +2104,7 @@ }, "node_modules/@bufbuild/protobuf": { "version": "1.5.0", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/@bufbuild/protobuf/-/protobuf-1.5.0.tgz", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.5.0.tgz", "integrity": "sha512-0Jg+B7Vl8YGCi7c3iZ8/38iTbZrwdU7or6QZlsA9lhSrhumaXOTMsGO8gqwDuus/THEkTiY3Uxn+PEJwgsLt0w==", "dev": true }, @@ -2402,12 +2401,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, @@ -3329,66 +3322,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, @@ -11129,7 +11062,9 @@ "node_modules/abbrev": { "version": "1.1.1", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/accepts": { "version": "1.3.8", @@ -11218,18 +11153,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, @@ -11458,7 +11381,9 @@ "node_modules/aproba": { "version": "1.2.0", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/archy": { "version": "1.0.0", @@ -11890,6 +11815,8 @@ "node_modules/async-foreach": { "version": "0.1.3", "dev": true, + "optional": true, + "peer": true, "engines": { "node": "*" } @@ -12550,533 +12477,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, @@ -13484,7 +12884,7 @@ }, "node_modules/buffer-builder": { "version": "0.2.0", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/buffer-builder/-/buffer-builder-0.2.0.tgz", + "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==", "dev": true }, @@ -13760,6 +13160,8 @@ "version": "6.2.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "camelcase": "^5.3.1", "map-obj": "^4.0.0", @@ -13776,6 +13178,8 @@ "version": "4.0.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -14641,7 +14045,9 @@ "node_modules/console-control-strings": { "version": "1.1.0", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/constants-browserify": { "version": "1.0.0", @@ -15817,7 +15223,9 @@ "node_modules/delegates": { "version": "1.0.0", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/depd": { "version": "2.0.0", @@ -16187,6 +15595,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "iconv-lite": "^0.6.2" } @@ -16196,6 +15605,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -16276,6 +15686,8 @@ "version": "2.2.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=6" } @@ -16292,12 +15704,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, @@ -18141,12 +17547,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, @@ -18828,6 +18228,8 @@ "version": "1.1.3", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "globule": "^1.0.0" }, @@ -19449,6 +18851,8 @@ "version": "1.3.4", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "glob": "~7.1.1", "lodash": "^4.17.21", @@ -19462,6 +18866,8 @@ "version": "7.1.7", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -19481,6 +18887,8 @@ "version": "3.0.8", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -20053,7 +19461,9 @@ "node_modules/has-unicode": { "version": "2.0.1", "dev": true, - "license": "ISC" + "license": "ISC", + "optional": true, + "peer": true }, "node_modules/has-value": { "version": "1.0.0", @@ -20475,15 +19885,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, @@ -20572,7 +19973,7 @@ }, "node_modules/immutable": { "version": "4.3.4", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/immutable/-/immutable-4.3.4.tgz", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", "dev": true }, @@ -20686,12 +20087,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, @@ -21121,12 +20516,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, @@ -23565,7 +22954,9 @@ "node_modules/js-base64": { "version": "2.6.4", "dev": true, - "license": "BSD-3-Clause" + "license": "BSD-3-Clause", + "optional": true, + "peer": true }, "node_modules/js-tokens": { "version": "4.0.0", @@ -25207,60 +24598,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, @@ -25587,6 +24924,8 @@ "version": "9.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@types/minimist": "^1.2.0", "camelcase-keys": "^6.2.2", @@ -25612,6 +24951,8 @@ "version": "0.18.1", "dev": true, "license": "(MIT OR CC0-1.0)", + "optional": true, + "peer": true, "engines": { "node": ">=10" }, @@ -25789,161 +25130,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, @@ -26037,7 +25223,8 @@ "node_modules/nan": { "version": "2.18.0", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true }, "node_modules/nanoid": { "version": "3.3.6", @@ -26389,6 +25576,8 @@ "version": "5.0.0", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "abbrev": "1" }, @@ -28329,25 +27518,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, @@ -29952,7 +29122,7 @@ }, "node_modules/rxjs": { "version": "7.8.1", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/rxjs/-/rxjs-7.8.1.tgz", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", "dev": true, "dependencies": { @@ -30102,7 +29272,7 @@ }, "node_modules/sass-embedded": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded/-/sass-embedded-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.69.5.tgz", "integrity": "sha512-0YNcRcbSpgGd4AnE+mm3a3g4S97puFLIZ0cYJgbwdD4iGz/hiOzE+yh72XS+u1LMhE+pQfNeC9MNnRsc8n1yRg==", "dev": true, "dependencies": { @@ -30129,10 +29299,16 @@ }, "node_modules/sass-embedded-darwin-arm64": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.69.5.tgz", "integrity": "sha512-zVuXJzgT54t24E4QPP/iteHsw/cawZE8gAXGEm20cP2DKsIQBF7bvSTk0zzY0bS01YFtJviYM13HcGUe4q7/7w==", + "cpu": [ + "arm64" + ], "dev": true, "optional": true, + "os": [ + "darwin" + ], "bin": { "sass": "dart-sass/sass" }, @@ -30142,10 +29318,16 @@ }, "node_modules/sass-embedded-darwin-x64": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.69.5.tgz", "integrity": "sha512-HcA9YER3Ax7lMnHouxnIY462gnst5lNL56QXkZaTQmg9nH7oqR2bMfWbckEQL+mHIXGSM/QfX0aD59VOm5iKZw==", + "cpu": [ + "x64" + ], "dev": true, "optional": true, + "os": [ + "darwin" + ], "bin": { "sass": "dart-sass/sass" }, @@ -30155,10 +29337,16 @@ }, "node_modules/sass-embedded-linux-arm": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.69.5.tgz", "integrity": "sha512-m0NxVkrfcS3UsF33q0FgItMWIz/F1FZdfVZpjp+dP6qd0KLeTuoPUCh2GSize0DAU5T0Zj24b2mXeowDKv463g==", + "cpu": [ + "arm" + ], "dev": true, "optional": true, + "os": [ + "linux" + ], "bin": { "sass": "dart-sass/sass" }, @@ -30168,10 +29356,16 @@ }, "node_modules/sass-embedded-linux-arm64": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.69.5.tgz", "integrity": "sha512-HWCjdFSLGh0dMUNLNh+slc2j9koSZnfTEO9qQR6WEIuC+We6vYKJugGPo1V9pFbBeoW6VAJGYdlqsRPquteCZw==", + "cpu": [ + "arm64" + ], "dev": true, "optional": true, + "os": [ + "linux" + ], "bin": { "sass": "dart-sass/sass" }, @@ -30181,10 +29375,16 @@ }, "node_modules/sass-embedded-linux-ia32": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.69.5.tgz", "integrity": "sha512-0taR6AJDb+eLOBTEMc1nfX2fI1hgRF9M+Hmv+wwGrxfBu/MkASk6fmR9B8MDw9hPHIqGVUkTVizjOh50O7nIKg==", + "cpu": [ + "ia32" + ], "dev": true, "optional": true, + "os": [ + "linux" + ], "bin": { "sass": "dart-sass/sass" }, @@ -30194,10 +29394,16 @@ }, "node_modules/sass-embedded-linux-x64": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.69.5.tgz", "integrity": "sha512-gN9yLTbKC0hUHukx4mdRs4V39WD719PM2GhWQBUA+3Z8qr9ywywi7LiU2atWrKESRF34V+eqF9lYiYVQxtTHZw==", + "cpu": [ + "x64" + ], "dev": true, "optional": true, + "os": [ + "linux" + ], "bin": { "sass": "dart-sass/sass" }, @@ -30207,10 +29413,16 @@ }, "node_modules/sass-embedded-win32-ia32": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.69.5.tgz", "integrity": "sha512-9OgSaufHP53b33gaH1Y5NZ/Im3druCHIQvLUEqJBCFuOzly47g/hZGrO+dBDiWgYGYKbSYI7Z4/PBtQoK5Vkxg==", + "cpu": [ + "ia32" + ], "dev": true, "optional": true, + "os": [ + "win32" + ], "bin": { "sass": "dart-sass/sass.bat" }, @@ -30220,10 +29432,16 @@ }, "node_modules/sass-embedded-win32-x64": { "version": "1.69.5", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.69.5.tgz", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.69.5.tgz", "integrity": "sha512-p1PsOJnpwXdPfiRbX6QdRa4PnL2QXPpIRy8fkeAZpQFYZ278ZIlwemC2MukKMVLcE3iQ5lBulbC8IYm91rod6Q==", + "cpu": [ + "x64" + ], "dev": true, "optional": true, + "os": [ + "win32" + ], "bin": { "sass": "dart-sass/sass.bat" }, @@ -30233,7 +29451,7 @@ }, "node_modules/sass-embedded/node_modules/has-flag": { "version": "4.0.0", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/has-flag/-/has-flag-4.0.0.tgz", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, "engines": { @@ -30242,7 +29460,7 @@ }, "node_modules/sass-embedded/node_modules/supports-color": { "version": "8.1.1", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/supports-color/-/supports-color-8.1.1.tgz", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "dev": true, "dependencies": { @@ -30250,6 +29468,9 @@ }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" } }, "node_modules/sass-graph": { @@ -30490,7 +29711,7 @@ }, "node_modules/sass-migrator": { "version": "1.8.0", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/sass-migrator/-/sass-migrator-1.8.0.tgz", + "resolved": "https://registry.npmjs.org/sass-migrator/-/sass-migrator-1.8.0.tgz", "integrity": "sha512-U3KOlDU71o6vQB2xFDPL9AQLTl7waonCcih+1/QQX3Hy6gMlAL0+2RE8J+FBozogba5q248nIHeUbLGBCbQd0g==", "dev": true, "bin": { @@ -30982,16 +30203,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, @@ -31153,34 +30364,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, @@ -31349,36 +30532,6 @@ "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, @@ -31517,6 +30670,8 @@ "version": "1.4.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "readable-stream": "^2.0.1" } @@ -33031,6 +32186,8 @@ "version": "3.0.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -34030,30 +33187,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, @@ -34702,7 +33835,7 @@ }, "node_modules/varint": { "version": "6.0.0", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/varint/-/varint-6.0.0.tgz", + "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz", "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==", "dev": true }, @@ -35230,6 +34363,8 @@ "version": "1.1.5", "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "string-width": "^1.0.2 || 2 || 3 || 4" } @@ -35237,12 +34372,16 @@ "node_modules/wide-align/node_modules/emoji-regex": { "version": "8.0.0", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/wide-align/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -35251,6 +34390,8 @@ "version": "4.2.3", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", diff --git a/package.json b/package.json index 19dedd3dde..67dc63a060 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,6 @@ "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", "css-loader": "^6.9.0", "d3-scale": "^4.0.2", From 5547c9efb6a5c4ea2b37bfb31ca46ce9d6eaffef Mon Sep 17 00:00:00 2001 From: Aleksandr Sannikov Date: Thu, 30 Nov 2023 15:46:22 +0000 Subject: [PATCH 03/33] [NO-JIRA]: removed css files --- .../examples.module.css | 18 ----------------- .../BpkBadgeLayout.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../BpkButtonStory.module.css | 18 ----------------- .../bpk-component-card/examples.module.css | 18 ----------------- .../bpk-component-chip/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../bpk-component-dialog/examples.module.css | 18 ----------------- .../bpk-component-drawer/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../bpk-component-flare/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../bpk-component-input/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../bpk-component-map/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../bpk-component-modal/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../BpkNudgerStory.module.css | 18 ----------------- .../bpk-component-overlay/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../bpk-component-popover/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../bpk-component-rating/examples.module.css | 18 ----------------- .../examples.module.css | 18 ----------------- .../SpinnerLayout.module.css | 18 ----------------- .../bpk-component-ticket/examples.module.css | 18 ----------------- examples/bpk-scrim-utils/examples.css | 18 ----------------- .../src/BpkDarkExampleWrapper.module.css | 18 ----------------- .../src/BpkAccordion.module.css | 18 ----------------- .../src/BpkAccordionItem.module.css | 18 ----------------- .../src/BpkAriaLive.module.css | 18 ----------------- .../src/BpkAutosuggest.module.css | 18 ----------------- .../src/BpkBadge.module.css | 18 ----------------- .../src/BpkAnimateAndFade.module.css | 18 ----------------- .../src/BpkBannerAlert.module.css | 18 ----------------- .../src/BpkBarchart.module.css | 18 ----------------- .../src/BpkBarchartBar.module.css | 18 ----------------- .../src/BpkChartAxis.module.css | 18 ----------------- .../src/BpkChartDataTable.module.css | 18 ----------------- .../src/BpkChartGridLines.module.css | 18 ----------------- .../src/BpkBlockquote.module.css | 18 ----------------- .../src/BpkBoilerplate.module.css | 18 ----------------- .../src/BpkBottomSheet.module.css | 18 ----------------- .../src/BpkBottomSheetInner.module.css | 18 ----------------- .../src/BpkBreadcrumb.module.css | 18 ----------------- .../src/BpkBreadcrumbItem.module.css | 18 ----------------- .../src/BpkButtonBase.module.css | 18 ----------------- .../src/BpkButtonDestructive.module.css | 18 ----------------- .../src/BpkButtonFeatured.module.css | 18 ----------------- .../src/BpkButtonLink.module.css | 18 ----------------- .../src/BpkButtonLinkOnDark.module.css | 18 ----------------- .../src/BpkButtonPrimaryOnDark.module.css | 18 ----------------- .../src/BpkButtonPrimaryOnLight.module.css | 18 ----------------- .../src/BpkButtonSecondary.module.css | 18 ----------------- .../src/BpkButtonSecondaryOnDark.module.css | 18 ----------------- .../src/BpkButtonV2/BpkButton.module.css | 18 ----------------- .../src/BpkCalendar.module.css | 18 ----------------- .../src/BpkCalendarDate.module.css | 18 ----------------- .../src/BpkCalendarGrid.module.css | 18 ----------------- .../src/BpkCalendarGridHeader.module.css | 18 ----------------- .../src/BpkCalendarGridTransition.module.css | 18 ----------------- .../src/BpkCalendarNav.module.css | 18 ----------------- .../src/BpkSaveButton.module.css | 18 ----------------- .../bpk-component-card/src/BpkCard.module.css | 18 ----------------- .../src/BpkCardWrapper.module.css | 18 ----------------- .../src/BpkDividedCard.module.css | 18 ----------------- .../src/BpkCheckbox.module.css | 18 ----------------- .../src/BpkSelectableChip.module.css | 18 ----------------- .../src/BpkCloseButton.module.css | 18 ----------------- .../bpk-component-code/src/BpkCode.module.css | 18 ----------------- .../src/BpkCodeBlock.module.css | 18 ----------------- .../src/BpkContentCard.module.css | 18 ----------------- .../src/BpkContentCards.module.css | 18 ----------------- .../src/BpkDataTable.module.css | 18 ----------------- .../src/BpkDataTableHeader.module.css | 18 ----------------- .../src/BpkDatepicker.module.css | 18 ----------------- .../src/BpkDescriptionList.module.css | 18 ----------------- .../src/BpkDialog.module.css | 18 ----------------- .../src/BpkDialogInner.module.css | 18 ----------------- .../src/BpkDrawer.module.css | 18 ----------------- .../src/BpkDrawerContent.module.css | 18 ----------------- .../src/BpkFieldset.module.css | 18 ----------------- .../src/bpk-content-bubble.module.css | 18 ----------------- .../src/bpk-flare-bar.module.css | 18 ----------------- .../src/BpkFloatingNotification.module.css | 18 ----------------- .../src/BpkFormValidation.module.css | 18 ----------------- .../src/BpkGraphicPromo.module.css | 18 ----------------- .../src/BpkGridToggle.module.css | 18 ----------------- .../src/BpkHorizontalNav.module.css | 18 ----------------- .../src/BpkHorizontalNavItem.module.css | 18 ----------------- .../bpk-component-icon/src/BpkIcon.module.css | 18 ----------------- .../src/withDescription.module.css | 18 ----------------- .../src/BpkBackgroundImage.module.css | 18 ----------------- .../src/BpkImage.module.css | 18 ----------------- .../src/withInfiniteScroll.module.css | 18 ----------------- .../src/BpkAnimateAndFade.module.css | 18 ----------------- .../src/BpkInfoBanner.module.css | 18 ----------------- .../src/BpkClearButton.module.css | 18 ----------------- .../src/BpkInput.module.css | 18 ----------------- .../src/BpkLabel.module.css | 18 ----------------- .../bpk-component-link/src/BpkLink.module.css | 18 ----------------- .../bpk-component-list/src/BpkList.module.css | 18 ----------------- .../src/BpkLoadingButton.module.css | 18 ----------------- .../src/BpkIconMarker.module.css | 18 ----------------- .../src/BpkIconMarkerBackground.module.css | 18 ----------------- .../bpk-component-map/src/BpkMap.module.css | 18 ----------------- .../src/BpkPriceMarker.module.css | 18 ----------------- .../BpkPriceMarker.module.css | 18 ----------------- .../src/DefaultLoadingElement.module.css | 18 ----------------- .../src/BpkMobileScrollContainer.module.css | 18 ----------------- .../src/BpkModal.module.css | 18 ----------------- .../src/BpkModalInner.module.css | 18 ----------------- .../src/BpkModalV2/BpKModal.module.css | 18 ----------------- .../src/BpkNavigationBar.module.css | 18 ----------------- .../src/BpkNavigationBarButtonLink.module.css | 18 ----------------- .../src/BpkNavigationBarIconButton.module.css | 18 ----------------- .../src/BpkNudger.module.css | 18 ----------------- .../src/BpkOverlay.module.css | 18 ----------------- .../src/BpkPageIndicator.module.css | 18 ----------------- .../src/BpkPagination.module.css | 18 ----------------- .../src/BpkPaginationList.module.css | 18 ----------------- .../src/BpkPaginationNudger.module.css | 18 ----------------- .../src/BpkPaginationPage.module.css | 18 ----------------- .../src/BpkPanel.module.css | 18 ----------------- .../src/BpkPhoneInput.module.css | 18 ----------------- .../src/BpkPopover.module.css | 18 ----------------- .../src/BpkPrice.module.css | 18 ----------------- .../src/BpkProgress.module.css | 18 ----------------- .../src/BpkRadio.module.css | 18 ----------------- .../src/BpkRating.module.css | 18 ----------------- .../src/BpkScrollableCalendarGrid.module.css | 18 ----------------- .../BpkScrollableCalendarGridList.module.css | 18 ----------------- .../src/BpkSectionHeader.module.css | 18 ----------------- .../src/BpkSectionListItem.module.css | 18 ----------------- .../src/BpkSectionListSection.module.css | 18 ----------------- .../src/BpkSelect.module.css | 18 ----------------- .../src/BpkSkipLink.module.css | 18 ----------------- .../src/BpkSlider.module.css | 18 ----------------- .../src/BpkSpinner.module.css | 18 ----------------- .../src/BpkInputField.module.css | 18 ----------------- .../src/BpkSplitInput.module.css | 18 ----------------- .../src/BpkInteractiveStar.module.css | 18 ----------------- .../src/BpkStar.module.css | 18 ----------------- .../src/BpkStarRating.module.css | 18 ----------------- .../src/BpkSwapButton.module.css | 18 ----------------- .../src/BpkSwitch.module.css | 18 ----------------- .../src/BpkTable.module.css | 18 ----------------- .../bpk-component-text/src/BpkText.module.css | 18 ----------------- .../src/BpkTextarea.module.css | 18 ----------------- .../src/BpkThemeToggle.module.css | 18 ----------------- .../src/BpkTicket.module.css | 18 ----------------- .../src/BpkTooltip.module.css | 18 ----------------- .../src/bpk-scrim-content.module.css | 18 ----------------- .../bpk-scrim-utils/src/bpk-scrim.module.css | 18 ----------------- packages/bpk-stylesheets/base.css | 20 ------------------- packages/bpk-stylesheets/font.css | 18 ----------------- 165 files changed, 2972 deletions(-) delete mode 100644 examples/bpk-component-aria-live/examples.module.css delete mode 100644 examples/bpk-component-badge/BpkBadgeLayout.module.css delete mode 100644 examples/bpk-component-banner-alert/examples.module.css delete mode 100644 examples/bpk-component-barchart/examples.module.css delete mode 100644 examples/bpk-component-bottom-sheet/examples.module.css delete mode 100644 examples/bpk-component-breakpoint/examples.module.css delete mode 100644 examples/bpk-component-button/BpkButtonStory.module.css delete mode 100644 examples/bpk-component-card/examples.module.css delete mode 100644 examples/bpk-component-chip/examples.module.css delete mode 100644 examples/bpk-component-datepicker/examples.module.css delete mode 100644 examples/bpk-component-dialog/examples.module.css delete mode 100644 examples/bpk-component-drawer/examples.module.css delete mode 100644 examples/bpk-component-fieldset/examples.module.css delete mode 100644 examples/bpk-component-flare/examples.module.css delete mode 100644 examples/bpk-component-form-validation/examples.module.css delete mode 100644 examples/bpk-component-graphic-promotion/examples.module.css delete mode 100644 examples/bpk-component-horizontal-nav/examples.module.css delete mode 100644 examples/bpk-component-infinite-scroll/examples.module.css delete mode 100644 examples/bpk-component-info-banner/examples.module.css delete mode 100644 examples/bpk-component-input/examples.module.css delete mode 100644 examples/bpk-component-loading-button/examples.module.css delete mode 100644 examples/bpk-component-map/examples.module.css delete mode 100644 examples/bpk-component-mobile-scroll-container/examples.module.css delete mode 100644 examples/bpk-component-modal-v2/examples.module.css delete mode 100644 examples/bpk-component-modal/examples.module.css delete mode 100644 examples/bpk-component-navigation-bar/examples.module.css delete mode 100644 examples/bpk-component-nudger/BpkNudgerStory.module.css delete mode 100644 examples/bpk-component-overlay/examples.module.css delete mode 100644 examples/bpk-component-page-indicator/examples.module.css delete mode 100644 examples/bpk-component-popover/examples.module.css delete mode 100644 examples/bpk-component-progress/examples.module.css delete mode 100644 examples/bpk-component-rating/examples.module.css delete mode 100644 examples/bpk-component-section-header/examples.module.css delete mode 100644 examples/bpk-component-spinner/SpinnerLayout.module.css delete mode 100644 examples/bpk-component-ticket/examples.module.css delete mode 100644 examples/bpk-scrim-utils/examples.css delete mode 100644 examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.css delete mode 100644 packages/bpk-component-accordion/src/BpkAccordion.module.css delete mode 100644 packages/bpk-component-accordion/src/BpkAccordionItem.module.css delete mode 100644 packages/bpk-component-aria-live/src/BpkAriaLive.module.css delete mode 100644 packages/bpk-component-autosuggest/src/BpkAutosuggest.module.css delete mode 100644 packages/bpk-component-badge/src/BpkBadge.module.css delete mode 100644 packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.css delete mode 100644 packages/bpk-component-banner-alert/src/BpkBannerAlert.module.css delete mode 100644 packages/bpk-component-barchart/src/BpkBarchart.module.css delete mode 100644 packages/bpk-component-barchart/src/BpkBarchartBar.module.css delete mode 100644 packages/bpk-component-barchart/src/BpkChartAxis.module.css delete mode 100644 packages/bpk-component-barchart/src/BpkChartDataTable.module.css delete mode 100644 packages/bpk-component-barchart/src/BpkChartGridLines.module.css delete mode 100644 packages/bpk-component-blockquote/src/BpkBlockquote.module.css delete mode 100644 packages/bpk-component-boilerplate/src/BpkBoilerplate.module.css delete mode 100644 packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css delete mode 100644 packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css delete mode 100644 packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.css delete mode 100644 packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonBase.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonDestructive.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonFeatured.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonLink.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonLinkOnDark.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonSecondary.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css delete mode 100644 packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.css delete mode 100644 packages/bpk-component-calendar/src/BpkCalendar.module.css delete mode 100644 packages/bpk-component-calendar/src/BpkCalendarDate.module.css delete mode 100644 packages/bpk-component-calendar/src/BpkCalendarGrid.module.css delete mode 100644 packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css delete mode 100644 packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css delete mode 100644 packages/bpk-component-calendar/src/BpkCalendarNav.module.css delete mode 100644 packages/bpk-component-card-button/src/BpkSaveButton.module.css delete mode 100644 packages/bpk-component-card/src/BpkCard.module.css delete mode 100644 packages/bpk-component-card/src/BpkCardWrapper.module.css delete mode 100644 packages/bpk-component-card/src/BpkDividedCard.module.css delete mode 100644 packages/bpk-component-checkbox/src/BpkCheckbox.module.css delete mode 100644 packages/bpk-component-chip/src/BpkSelectableChip.module.css delete mode 100644 packages/bpk-component-close-button/src/BpkCloseButton.module.css delete mode 100644 packages/bpk-component-code/src/BpkCode.module.css delete mode 100644 packages/bpk-component-code/src/BpkCodeBlock.module.css delete mode 100644 packages/bpk-component-content-cards/src/BpkContentCard.module.css delete mode 100644 packages/bpk-component-content-cards/src/BpkContentCards.module.css delete mode 100644 packages/bpk-component-datatable/src/BpkDataTable.module.css delete mode 100644 packages/bpk-component-datatable/src/BpkDataTableHeader.module.css delete mode 100644 packages/bpk-component-datepicker/src/BpkDatepicker.module.css delete mode 100644 packages/bpk-component-description-list/src/BpkDescriptionList.module.css delete mode 100644 packages/bpk-component-dialog/src/BpkDialog.module.css delete mode 100644 packages/bpk-component-dialog/src/BpkDialogInner.module.css delete mode 100644 packages/bpk-component-drawer/src/BpkDrawer.module.css delete mode 100644 packages/bpk-component-drawer/src/BpkDrawerContent.module.css delete mode 100644 packages/bpk-component-fieldset/src/BpkFieldset.module.css delete mode 100644 packages/bpk-component-flare/src/bpk-content-bubble.module.css delete mode 100644 packages/bpk-component-flare/src/bpk-flare-bar.module.css delete mode 100644 packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.css delete mode 100644 packages/bpk-component-form-validation/src/BpkFormValidation.module.css delete mode 100644 packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css delete mode 100644 packages/bpk-component-grid-toggle/src/BpkGridToggle.module.css delete mode 100644 packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css delete mode 100644 packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.css delete mode 100644 packages/bpk-component-icon/src/BpkIcon.module.css delete mode 100644 packages/bpk-component-icon/src/withDescription.module.css delete mode 100644 packages/bpk-component-image/src/BpkBackgroundImage.module.css delete mode 100644 packages/bpk-component-image/src/BpkImage.module.css delete mode 100644 packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.css delete mode 100644 packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.css delete mode 100644 packages/bpk-component-info-banner/src/BpkInfoBanner.module.css delete mode 100644 packages/bpk-component-input/src/BpkClearButton.module.css delete mode 100644 packages/bpk-component-input/src/BpkInput.module.css delete mode 100644 packages/bpk-component-label/src/BpkLabel.module.css delete mode 100644 packages/bpk-component-link/src/BpkLink.module.css delete mode 100644 packages/bpk-component-list/src/BpkList.module.css delete mode 100644 packages/bpk-component-loading-button/src/BpkLoadingButton.module.css delete mode 100644 packages/bpk-component-map/src/BpkIconMarker.module.css delete mode 100644 packages/bpk-component-map/src/BpkIconMarkerBackground.module.css delete mode 100644 packages/bpk-component-map/src/BpkMap.module.css delete mode 100644 packages/bpk-component-map/src/BpkPriceMarker.module.css delete mode 100644 packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css delete mode 100644 packages/bpk-component-map/src/DefaultLoadingElement.module.css delete mode 100644 packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css delete mode 100644 packages/bpk-component-modal/src/BpkModal.module.css delete mode 100644 packages/bpk-component-modal/src/BpkModalInner.module.css delete mode 100644 packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.css delete mode 100644 packages/bpk-component-navigation-bar/src/BpkNavigationBar.module.css delete mode 100644 packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css delete mode 100644 packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.css delete mode 100644 packages/bpk-component-nudger/src/BpkNudger.module.css delete mode 100644 packages/bpk-component-overlay/src/BpkOverlay.module.css delete mode 100644 packages/bpk-component-page-indicator/src/BpkPageIndicator.module.css delete mode 100644 packages/bpk-component-pagination/src/BpkPagination.module.css delete mode 100644 packages/bpk-component-pagination/src/BpkPaginationList.module.css delete mode 100644 packages/bpk-component-pagination/src/BpkPaginationNudger.module.css delete mode 100644 packages/bpk-component-pagination/src/BpkPaginationPage.module.css delete mode 100644 packages/bpk-component-panel/src/BpkPanel.module.css delete mode 100644 packages/bpk-component-phone-input/src/BpkPhoneInput.module.css delete mode 100644 packages/bpk-component-popover/src/BpkPopover.module.css delete mode 100644 packages/bpk-component-price/src/BpkPrice.module.css delete mode 100644 packages/bpk-component-progress/src/BpkProgress.module.css delete mode 100644 packages/bpk-component-radio/src/BpkRadio.module.css delete mode 100644 packages/bpk-component-rating/src/BpkRating.module.css delete mode 100644 packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.css delete mode 100644 packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css delete mode 100644 packages/bpk-component-section-header/src/BpkSectionHeader.module.css delete mode 100644 packages/bpk-component-section-list/src/BpkSectionListItem.module.css delete mode 100644 packages/bpk-component-section-list/src/BpkSectionListSection.module.css delete mode 100644 packages/bpk-component-select/src/BpkSelect.module.css delete mode 100644 packages/bpk-component-skip-link/src/BpkSkipLink.module.css delete mode 100644 packages/bpk-component-slider/src/BpkSlider.module.css delete mode 100644 packages/bpk-component-spinner/src/BpkSpinner.module.css delete mode 100644 packages/bpk-component-split-input/src/BpkInputField.module.css delete mode 100644 packages/bpk-component-split-input/src/BpkSplitInput.module.css delete mode 100644 packages/bpk-component-star-rating/src/BpkInteractiveStar.module.css delete mode 100644 packages/bpk-component-star-rating/src/BpkStar.module.css delete mode 100644 packages/bpk-component-star-rating/src/BpkStarRating.module.css delete mode 100644 packages/bpk-component-swap-button/src/BpkSwapButton.module.css delete mode 100644 packages/bpk-component-switch/src/BpkSwitch.module.css delete mode 100644 packages/bpk-component-table/src/BpkTable.module.css delete mode 100644 packages/bpk-component-text/src/BpkText.module.css delete mode 100644 packages/bpk-component-textarea/src/BpkTextarea.module.css delete mode 100644 packages/bpk-component-theme-toggle/src/BpkThemeToggle.module.css delete mode 100644 packages/bpk-component-ticket/src/BpkTicket.module.css delete mode 100644 packages/bpk-component-tooltip/src/BpkTooltip.module.css delete mode 100644 packages/bpk-scrim-utils/src/bpk-scrim-content.module.css delete mode 100644 packages/bpk-scrim-utils/src/bpk-scrim.module.css delete mode 100644 packages/bpk-stylesheets/base.css delete mode 100644 packages/bpk-stylesheets/font.css 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-badge/BpkBadgeLayout.module.css b/examples/bpk-component-badge/BpkBadgeLayout.module.css deleted file mode 100644 index a6a220c7c7..0000000000 --- a/examples/bpk-component-badge/BpkBadgeLayout.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-layout__container{position:relative;display:flex;min-height:2.5rem;padding:1.5rem}.bpk-badge-layout__container--light{background-color:#eff1f2;border-radius:.25rem} 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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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/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-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-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-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-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-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-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-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-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-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-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-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/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/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-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-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-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-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/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-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/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/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/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-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-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-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/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-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/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-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/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/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/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/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/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/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/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/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/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-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/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/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/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/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/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-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/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/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/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-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-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-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-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/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-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/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-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/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-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-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-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/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-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/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-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-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-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-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-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-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-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-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/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-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/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-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/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-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-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/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-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/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-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-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-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-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-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/BpkIconMarkerBackground.module.css b/packages/bpk-component-map/src/BpkIconMarkerBackground.module.css deleted file mode 100644 index b24ac5deb5..0000000000 --- a/packages/bpk-component-map/src/BpkIconMarkerBackground.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-background{position:absolute;top:0;left:0;fill:#8e47ba;fill:var(--bpk-icon-marker-default-background-color, #8e47ba)}.bpk-icon-marker-background--interactive{cursor:pointer}.bpk-icon-marker-background--disabled{fill:#d4fff2;fill:var(--bpk-icon-marker-default-disabled-background-color, #d4fff2)}.bpk-icon-marker-background--selected{fill:#05203c;stroke:#05203c;stroke:var(--bpk-icon-marker-default-selected-color, #05203c)} diff --git a/packages/bpk-component-map/src/BpkMap.module.css b/packages/bpk-component-map/src/BpkMap.module.css deleted file mode 100644 index 01422bd417..0000000000 --- a/packages/bpk-component-map/src/BpkMap.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-map{height:100%} diff --git a/packages/bpk-component-map/src/BpkPriceMarker.module.css b/packages/bpk-component-map/src/BpkPriceMarker.module.css deleted file mode 100644 index 380428c20d..0000000000 --- a/packages/bpk-component-map/src/BpkPriceMarker.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-price-marker{display:flex;padding:.125rem 0.5rem;justify-content:center;align-items:center;border:3px solid;border-radius:.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-default{color:#fff;border-color:#0062e3;border-color:var(--bpk-price-marker-background-color, #0062e3);background-color:#0062e3;background-color:var(--bpk-price-marker-background-color, #0062e3)}.bpk-price-marker-viewed{color:rgba(255,255,255,0.8);color:var(--bpk-price-marker-viewed-color, rgba(255,255,255,0.8));border-color:#0062e3;border-color:var(--bpk-price-marker-viewed-border-color, #0062e3);background-color:#0062e3;background-color:var(--bpk-price-marker-viewed-background-color, #0062e3)}.bpk-price-marker-focused{padding:0.375rem 0.5rem;background-color:#fff;border-color:#0062e3;border-color:var(--bpk-price-marker-selected-border-color, #0062e3);color:#0062e3;color:var(--bpk-price-marker-selected-color, #0062e3)}.bpk-price-marker-disabled{z-index:-2;border-color:#fff;background-color:#fff;color:rgba(0,0,0,0.2)}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;transform:translate(calc(-50% - 3px), calc(-100% - 3px - 1rem/ 2));border:none;background:none}.bpk-price-marker__arrow{position:absolute;top:50%;z-index:-1;width:1rem;height:1rem;transform:rotate(45deg);border-radius:25%;background-color:#0062e3}.bpk-price-marker__arrow-default{background-color:#0062e3;background-color:var(--bpk-price-marker-background-color, #0062e3)}.bpk-price-marker__arrow-viewed{background-color:#0062e3;background-color:var(--bpk-price-marker-viewed-border-color, #0062e3)}.bpk-price-marker__arrow-focused{top:75%;background-color:#0062e3;background-color:var(--bpk-price-marker-selected-border-color, #0062e3)}.bpk-price-marker__arrow-disabled{top:75%;z-index:-3;background-color:#fff} diff --git a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css deleted file mode 100644 index eb01e69509..0000000000 --- a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.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-price-marker{display:flex;height:1.5rem;padding:0 0.5rem;justify-content:center;align-items:center;border-radius:.5rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);gap:0.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none} diff --git a/packages/bpk-component-map/src/DefaultLoadingElement.module.css b/packages/bpk-component-map/src/DefaultLoadingElement.module.css deleted file mode 100644 index efc6c865f3..0000000000 --- a/packages/bpk-component-map/src/DefaultLoadingElement.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-map-default-loading-element{display:flex;height:100%;justify-content:center;align-items:center;flex:1;background-color:#e0e3e5} diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css deleted file mode 100644 index d77eae8897..0000000000 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.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-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #fff, rgba(255,255,255,0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #fff, rgba(255,255,255,0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%} diff --git a/packages/bpk-component-modal/src/BpkModal.module.css b/packages/bpk-component-modal/src/BpkModal.module.css deleted file mode 100644 index 0c2e0d2545..0000000000 --- a/packages/bpk-component-modal/src/BpkModal.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__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-modal__container{display:block}}@media (max-width: 32rem){.bpk-modal__container--full-screen-mobile{display:flex;padding:0}}.bpk-modal__container--full-screen{display:flex;padding:0} diff --git a/packages/bpk-component-modal/src/BpkModalInner.module.css b/packages/bpk-component-modal/src/BpkModalInner.module.css deleted file mode 100644 index d636f402b8..0000000000 --- a/packages/bpk-component-modal/src/BpkModalInner.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{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-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media (min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__header{box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-modal__navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto;margin-left:1rem;margin-right:0}html[dir='rtl'] .bpk-modal__close-button{margin-left:0;margin-right:1rem}html[dir='rtl'] .bpk-modal__close-button{left:auto}.bpk-modal__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir='rtl'] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem} diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.css b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.css deleted file mode 100644 index 60244b2286..0000000000 --- a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.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-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%} diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.module.css b/packages/bpk-component-navigation-bar/src/BpkNavigationBar.module.css deleted file mode 100644 index 930ceedec9..0000000000 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.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{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, #fff)}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{color:#161616;color:var(--bpk-navigation-bar-title-color, #161616)}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)} diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css b/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css deleted file mode 100644 index 661ee204ae..0000000000 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.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-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, #161616)}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, #161616)}.bpk-navigation-bar-button-link--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-button-link--on-dark:active{color:#fff}.bpk-navigation-bar-button-link--on-dark:visited{color:#fff} diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.css b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.css deleted file mode 100644 index 4eae416d6e..0000000000 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.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-icon-button{color:#161616;color:var(--bpk-navigation-bar-icon-button-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}.bpk-navigation-bar-icon-button:active{color:#161616;color:var(--bpk-navigation-bar-icon-button-active-color, #161616)}.bpk-navigation-bar-icon-button--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-icon-button--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-icon-button--on-dark:active{color:#fff} diff --git a/packages/bpk-component-nudger/src/BpkNudger.module.css b/packages/bpk-component-nudger/src/BpkNudger.module.css deleted file mode 100644 index 9fa0057fda..0000000000 --- a/packages/bpk-component-nudger/src/BpkNudger.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)}}html[dir='rtl'] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:0.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:transparent;color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:0.5rem}.bpk-nudger__label--title-subtitle{display:flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#545860} diff --git a/packages/bpk-component-overlay/src/BpkOverlay.module.css b/packages/bpk-component-overlay/src/BpkOverlay.module.css deleted file mode 100644 index 277c9eb13e..0000000000 --- a/packages/bpk-component-overlay/src/BpkOverlay.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__wrapper{position:relative;width:100%;height:100%;border-radius:inherit}.bpk-overlay__overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.bpk-overlay__overlay--tint{background:rgba(2,18,44,0.56)}.bpk-overlay__overlay--solid-low{background:rgba(22,22,22,0.15)}.bpk-overlay__overlay--solid-medium{background:rgba(22,22,22,0.3)}.bpk-overlay__overlay--solid-high{background:rgba(22,22,22,0.4)}.bpk-overlay__overlay--top-low{background:linear-gradient(180deg, rgba(22,22,22,0.15) 0%, rgba(22,22,22,0) 100%)}.bpk-overlay__overlay--top-medium{background:linear-gradient(180deg, rgba(22,22,22,0.3) 0%, rgba(22,22,22,0) 100%)}.bpk-overlay__overlay--top-high{background:linear-gradient(180deg, rgba(22,22,22,0.4) 0%, rgba(22,22,22,0) 100%)}.bpk-overlay__overlay--bottom-low{background:linear-gradient(180deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.15) 100%)}.bpk-overlay__overlay--bottom-medium{background:linear-gradient(180deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.3) 100%)}.bpk-overlay__overlay--bottom-high{background:linear-gradient(180deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.4) 100%)}.bpk-overlay__overlay--left-low{background:linear-gradient(90deg, rgba(22,22,22,0.15) 0%, rgba(22,22,22,0) 98.5%)}.bpk-overlay__overlay--left-medium{background:linear-gradient(90deg, rgba(22,22,22,0.3) 0%, rgba(22,22,22,0) 98.5%)}.bpk-overlay__overlay--left-high{background:linear-gradient(90deg, rgba(22,22,22,0.4) 0%, rgba(22,22,22,0) 98.5%)}.bpk-overlay__overlay--right-low{background:linear-gradient(90deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.15) 98.5%)}.bpk-overlay__overlay--right-medium{background:linear-gradient(90deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.3) 98.5%)}.bpk-overlay__overlay--right-high{background:linear-gradient(90deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.4) 98.5%)}.bpk-overlay__overlay--vignette{box-shadow:inset 0 0 50px rgba(22,22,22,0.12)} diff --git a/packages/bpk-component-page-indicator/src/BpkPageIndicator.module.css b/packages/bpk-component-page-indicator/src/BpkPageIndicator.module.css deleted file mode 100644 index e7ecebe117..0000000000 --- a/packages/bpk-component-page-indicator/src/BpkPageIndicator.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{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc( var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir='rtl'] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator--default{background-color:#c2c9cd}.bpk-page-indicator__indicator--overImage{background-color:rgba(255,255,255,0.5)}.bpk-page-indicator__indicator--active-default{background-color:#545860}.bpk-page-indicator__indicator--active-overImage{background-color:#fff} diff --git a/packages/bpk-component-pagination/src/BpkPagination.module.css b/packages/bpk-component-pagination/src/BpkPagination.module.css deleted file mode 100644 index d6ea22cc2c..0000000000 --- a/packages/bpk-component-pagination/src/BpkPagination.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-pagination{display:flex;justify-content:center} diff --git a/packages/bpk-component-pagination/src/BpkPaginationList.module.css b/packages/bpk-component-pagination/src/BpkPaginationList.module.css deleted file mode 100644 index cdcd3cbfd2..0000000000 --- a/packages/bpk-component-pagination/src/BpkPaginationList.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-pagination-page-list{display:flex;margin:0;padding:0 0.5rem;align-items:baseline;list-style:none}.bpk-pagination-page-list__item{margin-right:0.5rem}html[dir='rtl'] .bpk-pagination-page-list__item{margin-right:0;margin-left:0.5rem}html[dir='rtl'] .bpk-pagination-page-list__item:last-child{margin-left:0}.bpk-pagination-page-list__item:last-child{margin-right:0} diff --git a/packages/bpk-component-pagination/src/BpkPaginationNudger.module.css b/packages/bpk-component-pagination/src/BpkPaginationNudger.module.css deleted file mode 100644 index 2faa8355e6..0000000000 --- a/packages/bpk-component-pagination/src/BpkPaginationNudger.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-pagination-nudger{display:flex;width:2.25rem;height:2.25rem;padding:.625rem}.bpk-pagination-nudger__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-pagination/src/BpkPaginationPage.module.css b/packages/bpk-component-pagination/src/BpkPaginationPage.module.css deleted file mode 100644 index c555618c2f..0000000000 --- a/packages/bpk-component-pagination/src/BpkPaginationPage.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-pagination-page{min-width:2.25rem;height:2.25rem;padding:0 1rem;border-radius:.5rem;color:#161616;box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, #c2c9cd) inset;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:transparent;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:transparent;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page:active{background-color:transparent;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--selected{color:#fff;box-shadow:none}.bpk-no-touch-support .bpk-pagination-page--selected:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--selected:hover:not(:active):not(:disabled){color:#161616}.bpk-pagination-page--selected:active{color:#161616} diff --git a/packages/bpk-component-panel/src/BpkPanel.module.css b/packages/bpk-component-panel/src/BpkPanel.module.css deleted file mode 100644 index 9d1c09390a..0000000000 --- a/packages/bpk-component-panel/src/BpkPanel.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-panel{display:block;background-color:#fff;box-shadow:0 0 0 1px #c2c9cd inset;border-radius:.75rem}.bpk-panel--padded{padding:1rem}.bpk-panel--full-width{border-radius:0;box-shadow:#c2c9cd 0 -.0625rem 0 0 inset,#c2c9cd 0 .0625rem 0 0 inset} diff --git a/packages/bpk-component-phone-input/src/BpkPhoneInput.module.css b/packages/bpk-component-phone-input/src/BpkPhoneInput.module.css deleted file mode 100644 index f11deb0cd1..0000000000 --- a/packages/bpk-component-phone-input/src/BpkPhoneInput.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-phone-input{display:flex;column-gap:0.5rem}@media (max-width: 32rem){.bpk-phone-input{flex-wrap:wrap}.bpk-phone-input__phone-number{width:100%;margin-top:1rem}}.bpk-phone-input__phone-number{flex:auto}.bpk-phone-input__label{margin-bottom:0.5rem} diff --git a/packages/bpk-component-popover/src/BpkPopover.module.css b/packages/bpk-component-popover/src/BpkPopover.module.css deleted file mode 100644 index 0dcedc2aff..0000000000 --- a/packages/bpk-component-popover/src/BpkPopover.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-portal{z-index:900}@media (max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e3e5;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{position:aboslute;width:1.5rem;height:1.5rem;transform:rotate(45deg);border:.0625rem solid transparent;background:inherit}.bpk-popover-portal[data-popper-placement='top'] .bpk-popover__arrow{bottom:-.6875rem;border-right-color:#e0e3e5;border-bottom-color:#e0e3e5}.bpk-popover-portal[data-popper-placement='right'] .bpk-popover__arrow{left:-.6875rem;border-bottom-color:#e0e3e5;border-left-color:#e0e3e5}.bpk-popover-portal[data-popper-placement='bottom'] .bpk-popover__arrow{top:-.6875rem;border-top-color:#e0e3e5;border-left-color:#e0e3e5}.bpk-popover-portal[data-popper-placement='left'] .bpk-popover__arrow{right:-.6875rem;border-top-color:#e0e3e5;border-right-color:#e0e3e5}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e3e5 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__close-button{float:right}html[dir='rtl'] .bpk-popover__close-button{float:left}.bpk-popover__footer{padding:0.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e3e5 inset}html[dir='rtl'] .bpk-popover__footer{text-align:left} diff --git a/packages/bpk-component-price/src/BpkPrice.module.css b/packages/bpk-component-price/src/BpkPrice.module.css deleted file mode 100644 index 0e8523cd51..0000000000 --- a/packages/bpk-component-price/src/BpkPrice.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-price{display:flex;flex-direction:column;color:#545860}.bpk-price--right{text-align:right}html[dir='rtl'] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{flex-direction:row-reverse}.bpk-price__previous-price{text-decoration-line:line-through}.bpk-price__separator{margin:0 0.25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{color:#161616;word-break:break-all}.bpk-price__spacing::after{content:'';margin-right:0.25rem}html[dir='rtl'] .bpk-price__spacing::after{margin-right:unset;margin-left:0.25rem}.bpk-price__trailing{white-space:nowrap} diff --git a/packages/bpk-component-progress/src/BpkProgress.module.css b/packages/bpk-component-progress/src/BpkProgress.module.css deleted file mode 100644 index 92f3f8780d..0000000000 --- a/packages/bpk-component-progress/src/BpkProgress.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-progress{position:relative;height:1rem;border-radius:.75rem;background-color:#e0e3e5;overflow:hidden}.bpk-progress--small{height:0.5rem;border-radius:.25rem}.bpk-progress__value{position:absolute;top:0;right:0;bottom:0;left:0;content:' ';width:0%;transition:width 400ms ease-in-out;border-radius:.5rem;background-color:#0062e3;background-color:var(--bpk-progress-bar-fill-color, #0062e3)}.bpk-progress__value--stepped{border-radius:0}.bpk-progress__step{position:absolute;top:0;bottom:0;width:.125rem;background:#fff} diff --git a/packages/bpk-component-radio/src/BpkRadio.module.css b/packages/bpk-component-radio/src/BpkRadio.module.css deleted file mode 100644 index e7e2cc2fa8..0000000000 --- a/packages/bpk-component-radio/src/BpkRadio.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-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir='rtl'] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type='radio']{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,0.5)}.bpk-radio--invalid input[type='radio']{border:3px solid #e70866;border-radius:1.5rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #545860;border-radius:1.5rem}html[dir='rtl'] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, #0062e3)}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,0.2)}.bpk-radio__circle{position:absolute;top:0.375rem;left:0.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, #0062e3)}html[dir='rtl'] .bpk-radio__circle{right:0.375rem;left:auto} diff --git a/packages/bpk-component-rating/src/BpkRating.module.css b/packages/bpk-component-rating/src/BpkRating.module.css deleted file mode 100644 index f3045fd825..0000000000 --- a/packages/bpk-component-rating/src/BpkRating.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{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{display:flex;padding-right:0.5rem;justify-content:center;align-items:baseline;color:#161616}html[dir='rtl'] .bpk-rating__value{padding-right:0;padding-left:0.5rem;direction:ltr}.bpk-rating__text-wrapper{display:flex;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#545860}.bpk-rating__title--with-subtitle{padding-right:0.5rem}html[dir='rtl'] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:0.5rem}.bpk-rating__title--large{padding-top:.0625rem}.bpk-rating__subtitle{color:#545860} diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.css b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.css deleted file mode 100644 index 9321af5b5d..0000000000 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.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-scrollable-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-scrollable-calendar-grid__title{margin-top:1.5rem} diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css deleted file mode 100644 index 8c9ac734c8..0000000000 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.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-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__item{display:inline-table} diff --git a/packages/bpk-component-section-header/src/BpkSectionHeader.module.css b/packages/bpk-component-section-header/src/BpkSectionHeader.module.css deleted file mode 100644 index 3e55601503..0000000000 --- a/packages/bpk-component-section-header/src/BpkSectionHeader.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{display:flex;justify-content:space-between;align-items:flex-start;background-color:transparent}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}} diff --git a/packages/bpk-component-section-list/src/BpkSectionListItem.module.css b/packages/bpk-component-section-list/src/BpkSectionListItem.module.css deleted file mode 100644 index 580acde2f7..0000000000 --- a/packages/bpk-component-section-list/src/BpkSectionListItem.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-list-item{display:flex;width:100%;min-height:4rem;padding:0.5rem 1rem;justify-content:space-between;align-items:center;border:none;background-color:#fff;color:#161616;text-decoration:none;box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-section-list-item--interactive{cursor:pointer}.bpk-section-list-item__chevron{fill:#545860}.bpk-section-list-item:hover .bpk-section-list-item__chevron{fill:#161616}.bpk-section-list-item:active .bpk-section-list-item__chevron{fill:#161616} diff --git a/packages/bpk-component-section-list/src/BpkSectionListSection.module.css b/packages/bpk-component-section-list/src/BpkSectionListSection.module.css deleted file mode 100644 index ae2f30c895..0000000000 --- a/packages/bpk-component-section-list/src/BpkSectionListSection.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-list-section{margin:0;padding:0;list-style:none}.bpk-section-list-section__header{display:flex;min-height:2rem;padding:0.5rem 1rem;align-items:center;background-color:#e0e3e5} diff --git a/packages/bpk-component-select/src/BpkSelect.module.css b/packages/bpk-component-select/src/BpkSelect.module.css deleted file mode 100644 index 1a5fcb05fc..0000000000 --- a/packages/bpk-component-select/src/BpkSelect.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-select{display:inline-block;width:100%;height:2.25rem;padding:0.375rem 0.5rem;padding-right:2rem;border:solid .0625rem #c2c9cd;border-radius:.25rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;color:#161616;line-height:1.375rem;appearance:none}html[dir='rtl'] .bpk-select{padding-right:0.5rem;padding-left:2rem;background-position:left 0.5rem center}@media screen\0 {.bpk-select{padding:0.5rem !important;background-image:none !important}}.bpk-select:disabled{border-color:#e0e3e5;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-select--large{height:3rem;padding:0.5rem 1rem;padding-right:2.5rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 1rem center}html[dir='rtl'] .bpk-select--large{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-select--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-select--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-select--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-select--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-select--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-select--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-select--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-select--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-select--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-select--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-select--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-select--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-select--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;border-color:#e70866;border-color:var(--bpk-select-invalid-border-color, #e70866)}html[dir='rtl'] .bpk-select--invalid{padding-right:0.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-select--with-image{padding-left:2.5rem}html[dir='rtl'] .bpk-select--with-image{padding-right:2.5rem;padding-left:2.5rem}@media screen\0 {html[dir='rtl'] .bpk-select--with-image{padding-right:2.5rem !important;padding-left:1rem !important}}@media screen\0 {.bpk-select--with-image{padding-left:2.5rem !important}}.bpk-select--with-image-large{padding-left:3.5rem}html[dir='rtl'] .bpk-select--with-image-large{padding-right:3.5rem;padding-left:2.5rem}@media screen\0 {html[dir='rtl'] .bpk-select--with-image-large{padding-right:2.75rem !important;padding-left:1rem !important}}@media screen\0 {.bpk-select--with-image-large{padding-left:2.75rem !important}}.bpk-select-wrapper{position:relative}.bpk-select-wrapper__image{position:absolute;top:.625rem;left:0.5rem;width:1.5rem;height:1rem;pointer-events:none}html[dir='rtl'] .bpk-select-wrapper__image{right:0.5rem;left:auto}.bpk-select-wrapper__image--large{top:.75rem;left:1rem;width:2rem;height:1.5rem}html[dir='rtl'] .bpk-select-wrapper__image--large{right:1rem;left:auto}.bpk-select-wrapper__image--disabled{opacity:0.5} diff --git a/packages/bpk-component-skip-link/src/BpkSkipLink.module.css b/packages/bpk-component-skip-link/src/BpkSkipLink.module.css deleted file mode 100644 index 55ac108a32..0000000000 --- a/packages/bpk-component-skip-link/src/BpkSkipLink.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-skip-link{padding:.75rem 1rem;transition:opacity 200ms ease-in-out;border-radius:.5rem;color:#fff;text-decoration:none;opacity:0;overflow:hidden;pointer-events:none;transition-delay:200ms;font-size:1rem;line-height:1.25rem;font-weight:700;background-color:#e70866;background-color:var(--bpk-skip-link-background-color, #e70866)}.bpk-skip-link:focus-within,.bpk-skip-link:focus{transition:none;opacity:1;transition-delay:0} diff --git a/packages/bpk-component-slider/src/BpkSlider.module.css b/packages/bpk-component-slider/src/BpkSlider.module.css deleted file mode 100644 index 8c966d04c7..0000000000 --- a/packages/bpk-component-slider/src/BpkSlider.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-slider{height:1.25rem;-webkit-tap-highlight-color:transparent}.bpk-slider__handle{display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border-radius:50%;background-color:#0062e3;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}.bpk-slider__handle::after{position:absolute;content:'';width:2.5rem;height:2.5rem;border-radius:50%}.bpk-slider__handle--active{transform:scale(1.2) translate3d(0, 0, 0);background-color:#154679}.bpk-slider__bar{top:calc(50% - .125rem);height:.25rem;border-radius:.5rem;background-color:#c2c9cd}.bpk-slider>div[class$='0']{background-color:#0062e3;background-color:var(--bpk-slider-bar-color, #0062e3)}.bpk-slider--range>div[class$='0']{background-color:#c2c9cd}.bpk-slider--range>div[class$='1']{background-color:#0062e3;background-color:var(--bpk-slider-bar-color, #0062e3)} diff --git a/packages/bpk-component-spinner/src/BpkSpinner.module.css b/packages/bpk-component-spinner/src/BpkSpinner.module.css deleted file mode 100644 index 38a4c0cacb..0000000000 --- a/packages/bpk-component-spinner/src/BpkSpinner.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{width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0062e3;fill:var(--bpk-spinner-primary-color, #0062e3)}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#161616}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:0rem;vertical-align:top} diff --git a/packages/bpk-component-split-input/src/BpkInputField.module.css b/packages/bpk-component-split-input/src/BpkInputField.module.css deleted file mode 100644 index 1f02b5ed85..0000000000 --- a/packages/bpk-component-split-input/src/BpkInputField.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-field{display:flex;max-width:7.5rem;margin-right:0.25rem;align-items:center}.bpk-input-field input{text-align:center}.bpk-input-field:last-child{margin-right:0} diff --git a/packages/bpk-component-split-input/src/BpkSplitInput.module.css b/packages/bpk-component-split-input/src/BpkSplitInput.module.css deleted file mode 100644 index b9a4bc755d..0000000000 --- a/packages/bpk-component-split-input/src/BpkSplitInput.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-split-input{font-size:1rem;line-height:1.5rem;font-weight:400;display:flex;width:100%;padding-top:0.25rem;flex-direction:row;align-items:center;direction:ltr}.bpk-split-input__textbox{display:flex;align-items:center} diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStar.module.css b/packages/bpk-component-star-rating/src/BpkInteractiveStar.module.css deleted file mode 100644 index 5cda219226..0000000000 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStar.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 star-dust{0%{transform:scale(1)}50%{transform:scale(0.5)}100%{transform:scale(1)}}.bpk-interactive-star{margin:0;padding:0;border:none;background:transparent;cursor:pointer;appearance:none}.bpk-no-touch-support .bpk-interactive-star:hover:not(:active):not(:disabled) .bpk-interactive-star__icon{transform:rotate(10deg) scale(1.2)}.bpk-no-touch-support .bpk-interactive-star:hover:not(:active):not(:disabled) .bpk-interactive-star__icon--selected{transform:rotate(0deg) scale(1)}:global(.bpk-no-touch-support) .bpk-interactive-star:hover:not(:active):not(:disabled) .bpk-interactive-star__icon{transform:rotate(10deg) scale(1.2)}:global(.bpk-no-touch-support) .bpk-interactive-star:hover:not(:active):not(:disabled) .bpk-interactive-star__icon--selected{transform:rotate(0deg) scale(1)}.bpk-interactive-star--selected{cursor:default}.bpk-interactive-star__icon{transform:rotate(0deg) scale(1);transition:transform 200ms ease-in-out}.bpk-interactive-star__icon--selected{animation-duration:300ms;animation-name:star-dust} diff --git a/packages/bpk-component-star-rating/src/BpkStar.module.css b/packages/bpk-component-star-rating/src/BpkStar.module.css deleted file mode 100644 index 2685cc19bb..0000000000 --- a/packages/bpk-component-star-rating/src/BpkStar.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-star{display:inline-block;vertical-align:text-bottom;fill:rgba(0,0,0,0.2)}.bpk-star--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star--half{position:absolute;left:0}.bpk-star--filled{fill:#f55d42;fill:var(--bpk-star-rating-filled-color, #f55d42)}.bpk-star__container{display:inline-block;width:1rem;height:1rem}.bpk-star__container--half-star{position:relative;vertical-align:text-bottom}.bpk-star__container--large{width:1.5rem;height:1.5rem;vertical-align:bottom} diff --git a/packages/bpk-component-star-rating/src/BpkStarRating.module.css b/packages/bpk-component-star-rating/src/BpkStarRating.module.css deleted file mode 100644 index 0db2470562..0000000000 --- a/packages/bpk-component-star-rating/src/BpkStarRating.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-star-rating{display:inline-block} diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.module.css b/packages/bpk-component-swap-button/src/BpkSwapButton.module.css deleted file mode 100644 index 63441aebae..0000000000 --- a/packages/bpk-component-swap-button/src/BpkSwapButton.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-swap-button{transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__button span{display:inline-flex;line-height:1rem}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2} diff --git a/packages/bpk-component-switch/src/BpkSwitch.module.css b/packages/bpk-component-switch/src/BpkSwitch.module.css deleted file mode 100644 index 1a77dd9815..0000000000 --- a/packages/bpk-component-switch/src/BpkSwitch.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-switch{position:relative;display:flex;align-items:center}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked ~ .bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, #0062e3)}.bpk-switch__checkbox:checked ~ .bpk-switch__switch::before{left:1.375rem}.bpk-switch__label{line-height:2rem;margin-inline-end:0.5rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,0.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:'';display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem} diff --git a/packages/bpk-component-table/src/BpkTable.module.css b/packages/bpk-component-table/src/BpkTable.module.css deleted file mode 100644 index 244d8a2516..0000000000 --- a/packages/bpk-component-table/src/BpkTable.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-table{width:100%;margin-bottom:0.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #c2c9cd }.bpk-table__cell{padding:1rem}.bpk-table__cell--head{background-color:#eff1f2;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:700}html[dir='rtl'] .bpk-table__cell--head{text-align:right} diff --git a/packages/bpk-component-text/src/BpkText.module.css b/packages/bpk-component-text/src/BpkText.module.css deleted file mode 100644 index be8d06312e..0000000000 --- a/packages/bpk-component-text/src/BpkText.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-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em} diff --git a/packages/bpk-component-textarea/src/BpkTextarea.module.css b/packages/bpk-component-textarea/src/BpkTextarea.module.css deleted file mode 100644 index 0e8957d1f1..0000000000 --- a/packages/bpk-component-textarea/src/BpkTextarea.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-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem .5rem;border:solid 0.0625rem #C2C9CD;border-radius:.25rem;background:#fff;color:#161616;appearance:none}.bpk-textarea::placeholder{color:#545860}.bpk-textarea:disabled{border-color:#eff1f2;background:#fff;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-textarea::-ms-clear{display:none}.bpk-textarea--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;border-color:#e70866;border-color:var(--bpk-textarea-invalid-border-color, #e70866)}html[dir='rtl'] .bpk-textarea--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}html[dir='rtl'] .bpk-textarea--invalid.bpk-textarea--large{padding-right:1rem;padding-left:2.5rem;background-position:right 1rem center}.bpk-textarea--large{min-height:6rem;padding-right:1rem;padding-left:1rem}.bpk-textarea--large.bpk-textarea--invalid{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-textarea--large.bpk-textarea--invalid{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center} diff --git a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.module.css b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.module.css deleted file mode 100644 index 966b994f73..0000000000 --- a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.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-theme-toggle__label{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-ticket/src/BpkTicket.module.css b/packages/bpk-component-ticket/src/BpkTicket.module.css deleted file mode 100644 index 1050e2cdb2..0000000000 --- a/packages/bpk-component-ticket/src/BpkTicket.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-ticket{position:relative;display:block;display:flex;flex-direction:row;align-items:stretch;flex:none;color:#161616;text-decoration:none;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);cursor:pointer;border-radius:.75rem;z-index:0}.bpk-ticket::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:-1;transition:opacity 200ms ease-in-out;border-radius:inherit;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);opacity:0;pointer-events:none}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}.bpk-ticket--vertical{flex-direction:column}.bpk-ticket__paper{position:relative;background-color:#fff}.bpk-ticket__main{flex:2 1 auto}.bpk-ticket__main--horizontal{border-radius:.75rem 0 0 .75rem}html[dir='rtl'] .bpk-ticket__main--horizontal{border-radius:0 .75rem .75rem 0}.bpk-ticket__main--vertical{border-radius:.75rem .75rem 0 0}.bpk-ticket__main--padded{padding:1rem}.bpk-ticket__main-inner{height:100%;overflow:hidden}.bpk-ticket__main-inner--horizontal{border-radius:.75rem 0 0 .75rem}html[dir='rtl'] .bpk-ticket__main-inner--horizontal{border-radius:0 .75rem .75rem 0}.bpk-ticket__main-inner--vertical{border-radius:.75rem .75rem 0 0}.bpk-ticket__stub{flex:1 1 auto}.bpk-ticket__stub--horizontal{min-width:30%;border-radius:0 .75rem .75rem 0;box-shadow:inset .0625rem 0 0 #c2c9cd}html[dir='rtl'] .bpk-ticket__stub--horizontal{border-radius:.75rem 0 0 .75rem;box-shadow:inset -.0625rem 0 0 #c2c9cd}.bpk-ticket__stub--vertical{border-radius:0 0 .75rem .75rem;box-shadow:inset 0 .0625rem 0 #c2c9cd}.bpk-ticket__stub--padded{padding:1rem}.bpk-ticket__stub-inner{height:100%;overflow:hidden}.bpk-ticket__stub-inner--horizontal{min-width:30%;border-radius:0 .75rem .75rem 0;box-shadow:inset .0625rem 0 0 #c2c9cd}html[dir='rtl'] .bpk-ticket__stub-inner--horizontal{border-radius:.75rem 0 0 .75rem;box-shadow:inset -.0625rem 0 0 #c2c9cd}.bpk-ticket__stub-inner--vertical{border-radius:0 0 .75rem .75rem;box-shadow:inset 0 .0625rem 0 #c2c9cd} diff --git a/packages/bpk-component-tooltip/src/BpkTooltip.module.css b/packages/bpk-component-tooltip/src/BpkTooltip.module.css deleted file mode 100644 index a2906d06ed..0000000000 --- a/packages/bpk-component-tooltip/src/BpkTooltip.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-tooltip-portal{z-index:900}.bpk-tooltip-portal--target{display:inline-block}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:aboslute;width:.5rem;height:.5rem;transform:rotate(45deg);border:.0625rem solid transparent;background:inherit;background-color:#fff}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip__arrow{bottom:-.1875rem;border-right-color:#c2c9cd;border-bottom-color:#c2c9cd}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip__arrow{left:-.1875rem;border-bottom-color:#c2c9cd;border-left-color:#c2c9cd}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip__arrow{top:-.1875rem;border-top-color:#c2c9cd;border-left-color:#c2c9cd}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip__arrow{right:-.1875rem;border-top-color:#c2c9cd;border-right-color:#c2c9cd}.bpk-tooltip__arrow--dark{background-color:#05203c}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip__arrow--dark{border-right-color:#05203c;border-bottom-color:#05203c}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip__arrow--dark{border-bottom-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-right-color:#05203c}.bpk-tooltip__inner{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-tooltip__inner--padded{padding:.5rem 1rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #05203c;background-color:#05203c;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)} diff --git a/packages/bpk-scrim-utils/src/bpk-scrim-content.module.css b/packages/bpk-scrim-utils/src/bpk-scrim-content.module.css deleted file mode 100644 index a70ea341be..0000000000 --- a/packages/bpk-scrim-utils/src/bpk-scrim-content.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-scrim-content{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch} diff --git a/packages/bpk-scrim-utils/src/bpk-scrim.module.css b/packages/bpk-scrim-utils/src/bpk-scrim.module.css deleted file mode 100644 index 26a69d8507..0000000000 --- a/packages/bpk-scrim-utils/src/bpk-scrim.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-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;transition:opacity 200ms ease-in-out;background-color:rgba(0,0,0,0.7);overflow:hidden}@media (max-width: 32rem){.bpk-scrim--full-screen{opacity:1}}.bpk-scrim--appear{opacity:0}.bpk-scrim--appear-active{opacity:0.7} diff --git a/packages/bpk-stylesheets/base.css b/packages/bpk-stylesheets/base.css deleted file mode 100644 index 712496f2af..0000000000 --- a/packages/bpk-stylesheets/base.css +++ /dev/null @@ -1,20 +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. - * - *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:'';display:table}.clearfix::after{clear:both} - diff --git a/packages/bpk-stylesheets/font.css b/packages/bpk-stylesheets/font.css deleted file mode 100644 index dcdc16fda6..0000000000 --- a/packages/bpk-stylesheets/font.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. -*/ -@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-f9356ad6.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-46f9f429.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-ab1dbcbe.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-10532ac3.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-db5d0ac5.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-8eec3f3a.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:500;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-c08dc28b.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-865e167a.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-d0ae478a.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:500;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-81517f37.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-bbdb6b0c.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-226fe64c.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:700;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-8545937e.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-a099c9f7.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-ec4cc5a7.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:700;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-01b5d138.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-4d6d36e3.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-dc9284dc.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:900;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-bb3c9434.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-bba2eb55.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-314703cc.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:900;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-c2149c91.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-a34cd594.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-7e516ee5.ttf") format("ttf")} From 435d2fc1799a8899955c84e4b7d8e5fa1f742dee Mon Sep 17 00:00:00 2001 From: Aleksandr Sannikov Date: Thu, 30 Nov 2023 15:52:40 +0000 Subject: [PATCH 04/33] [NOJIRA]: added scripts --- package-lock.json | 1632 +++++++--------------- package.json | 14 +- packages/package-lock.json | 2341 +------------------------------- packages/package.json | 15 +- scripts/scss/style-compiler.js | 54 + scripts/scss/styles-dev.js | 41 + scripts/scss/styles-prod.js | 14 + 7 files changed, 635 insertions(+), 3476 deletions(-) create mode 100644 scripts/scss/style-compiler.js create mode 100644 scripts/scss/styles-dev.js create mode 100644 scripts/scss/styles-prod.js diff --git a/package-lock.json b/package-lock.json index 244976e1c0..3555bb48d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,12 +46,14 @@ "babel-plugin-module-resolver": "^5.0.0", "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-require-context-hook": "^1.0.0", + "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", @@ -62,6 +64,7 @@ "lint-staged": "^15.0.2", "lodash": "^4.17.20", "mini-css-extract-plugin": "^2.8.0", + "npm-run-all": "^4.1.5", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.0", "prop-types": "^15.7.2", @@ -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", @@ -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, @@ -11059,13 +11102,6 @@ "dev": true, "license": "BSD-3-Clause" }, - "node_modules/abbrev": { - "version": "1.1.1", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true - }, "node_modules/accepts": { "version": "1.3.8", "dev": true, @@ -11207,16 +11243,6 @@ "ajv": "^8.8.2" } }, - "node_modules/amdefine": { - "version": "1.0.1", - "dev": true, - "license": "BSD-3-Clause OR MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=0.4.2" - } - }, "node_modules/ansi-align": { "version": "3.0.1", "dev": true, @@ -11378,29 +11404,11 @@ "node": ">=0.10.0" } }, - "node_modules/aproba": { - "version": "1.2.0", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true - }, "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", - "optional": true, - "peer": true, - "dependencies": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" - } - }, "node_modules/argparse": { "version": "1.0.10", "dev": true, @@ -11717,16 +11725,6 @@ "dev": true, "license": "MIT" }, - "node_modules/asn1": { - "version": "0.2.6", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "safer-buffer": "~2.1.0" - } - }, "node_modules/assert": { "version": "2.1.0", "dev": true, @@ -11739,16 +11737,6 @@ "util": "^0.12.5" } }, - "node_modules/assert-plus": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=0.8" - } - }, "node_modules/assign-symbols": { "version": "1.0.0", "dev": true, @@ -11812,15 +11800,6 @@ ], "license": "MIT" }, - "node_modules/async-foreach": { - "version": "0.1.3", - "dev": true, - "optional": true, - "peer": true, - "engines": { - "node": "*" - } - }, "node_modules/async-limiter": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", @@ -11918,23 +11897,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/aws-sign2": { - "version": "0.7.0", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true, - "engines": { - "node": "*" - } - }, - "node_modules/aws4": { - "version": "1.12.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/axe-core": { "version": "4.8.2", "dev": true, @@ -12252,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, @@ -12529,16 +12454,6 @@ ], "license": "MIT" }, - "node_modules/bcrypt-pbkdf": { - "version": "1.0.2", - "dev": true, - "license": "BSD-3-Clause", - "optional": true, - "peer": true, - "dependencies": { - "tweetnacl": "^0.14.3" - } - }, "node_modules/before-after-hook": { "version": "2.2.3", "dev": true, @@ -13156,34 +13071,6 @@ "node": ">=6" } }, - "node_modules/camelcase-keys": { - "version": "6.2.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "engines": { - "node": ">=8" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001584", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001584.tgz", @@ -13213,13 +13100,6 @@ "node": ">=4" } }, - "node_modules/caseless": { - "version": "0.12.0", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true - }, "node_modules/cdocparser": { "version": "0.13.0", "dev": true, @@ -14734,19 +14614,6 @@ "node": ">=0.10.0" } }, - "node_modules/dashdash": { - "version": "1.14.1", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "assert-plus": "^1.0.0" - }, - "engines": { - "node": ">=0.10" - } - }, "node_modules/data-urls": { "version": "3.0.2", "dev": true, @@ -15220,13 +15087,6 @@ "node": ">=0.4.0" } }, - "node_modules/delegates": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/depd": { "version": "2.0.0", "dev": true, @@ -15513,17 +15373,6 @@ "dev": true, "license": "MIT" }, - "node_modules/ecc-jsbn": { - "version": "0.1.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "jsbn": "~0.1.0", - "safer-buffer": "^2.1.0" - } - }, "node_modules/ecdsa-sig-formatter": { "version": "1.0.11", "dev": true, @@ -15682,16 +15531,6 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, - "node_modules/env-paths": { - "version": "2.2.1", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=6" - } - }, "node_modules/envinfo": { "version": "7.11.0", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.0.tgz", @@ -17237,16 +17076,6 @@ "@types/yauzl": "^2.9.1" } }, - "node_modules/extsprintf": { - "version": "1.3.0", - "dev": true, - "engines": [ - "node >=0.6.0" - ], - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/fancy-log": { "version": "1.3.3", "dev": true, @@ -17803,16 +17632,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/forever-agent": { - "version": "0.6.1", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true, - "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", @@ -18156,87 +17975,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/gauge": { - "version": "2.7.4", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/gauge/node_modules/is-fullwidth-code-point": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/gaze": { - "version": "1.1.3", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "globule": "^1.0.0" - }, - "engines": { - "node": ">= 4.0.0" - } - }, "node_modules/gensync": { "version": "1.0.0-beta.2", "dev": true, @@ -18362,16 +18100,6 @@ "node": ">=0.10.0" } }, - "node_modules/getpass": { - "version": "0.1.7", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "assert-plus": "^1.0.0" - } - }, "node_modules/giget": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/giget/-/giget-1.2.1.tgz", @@ -18410,19 +18138,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" @@ -18459,6 +18187,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, @@ -18725,6 +18473,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, @@ -18847,55 +18616,6 @@ "dev": true, "license": "MIT" }, - "node_modules/globule": { - "version": "1.3.4", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, "node_modules/glogg": { "version": "1.0.2", "dev": true, @@ -19305,54 +19025,6 @@ "node": ">=0.10.0" } }, - "node_modules/har-schema": { - "version": "2.0.0", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/har-validator": { - "version": "5.1.5", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true - }, "node_modules/hard-rejection": { "version": "2.1.0", "dev": true, @@ -19372,29 +19044,6 @@ "node": ">= 0.4.0" } }, - "node_modules/has-ansi": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/has-bigints": { "version": "1.0.2", "dev": true, @@ -19458,13 +19107,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/has-unicode": { - "version": "2.0.1", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true - }, "node_modules/has-value": { "version": "1.0.0", "dev": true, @@ -19837,22 +19479,6 @@ "node": ">= 6" } }, - "node_modules/http-signature": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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, @@ -20859,13 +20485,6 @@ "node": ">=0.10.0" } }, - "node_modules/isstream": { - "version": "0.1.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/istanbul-lib-coverage": { "version": "3.2.0", "dev": true, @@ -21637,6 +21256,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, @@ -22508,6 +22147,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, @@ -22975,13 +22634,6 @@ "js-yaml": "bin/js-yaml.js" } }, - "node_modules/jsbn": { - "version": "0.1.1", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/jscodeshift": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.15.1.tgz", @@ -23155,6 +22807,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, @@ -23175,13 +22833,6 @@ "dev": true, "license": "MIT" }, - "node_modules/json-stringify-safe": { - "version": "5.0.1", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true - }, "node_modules/json5": { "version": "2.2.3", "dev": true, @@ -23453,22 +23104,6 @@ "dev": true, "license": "ISC" }, - "node_modules/jsprim": { - "version": "1.4.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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, @@ -24920,44 +24555,13 @@ "map-or-similar": "^1.5.0" } }, - "node_modules/meow": { - "version": "9.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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)", - "optional": true, - "peer": true, "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node": ">= 0.10.0" } }, "node_modules/merge-descriptors": { @@ -25323,6 +24927,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", @@ -25399,37 +25009,35 @@ "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", - "optional": true, - "peer": 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/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", - "optional": true, - "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -25437,12 +25045,10 @@ "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", - "optional": true, - "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -25453,221 +25059,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", - "optional": true, - "peer": true - }, - "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 + "license": "ISC" }, - "node_modules/node-sass": { - "version": "6.0.1", + "node_modules/normalize-path": { + "version": "3.0.0", "dev": true, - "hasInstallScript": true, "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, "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", - "optional": true, - "peer": true, "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", - "optional": true, - "peer": true, "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", - "optional": true, - "peer": true, + "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", - "optional": true, - "peer": true, "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", - "optional": true, - "peer": true, + "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", - "optional": true, - "peer": true, "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": { @@ -25681,19 +25324,6 @@ "node": ">=8" } }, - "node_modules/npmlog": { - "version": "4.1.2", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "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, @@ -27669,6 +27299,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", @@ -28824,87 +28474,6 @@ "node": ">= 0.10" } }, - "node_modules/request": { - "version": "2.88.2", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "engines": { - "node": ">=0.6" - } - }, - "node_modules/request/node_modules/tough-cookie": { - "version": "2.5.0", - "dev": true, - "license": "BSD-3-Clause", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "bin": { - "uuid": "bin/uuid" - } - }, "node_modules/require-directory": { "version": "2.1.1", "dev": true, @@ -29084,6 +28653,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, @@ -29196,6 +28785,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, @@ -29473,205 +29082,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/sass-graph": { - "version": "2.2.5", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "glob": "^7.0.0", - "lodash": "^4.0.0", - "scss-tokenizer": "^0.2.3", - "yargs": "^13.3.2" - }, - "bin": { - "sassgraph": "bin/sassgraph" - } - }, - "node_modules/sass-graph/node_modules/ansi-regex": { - "version": "4.1.1", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/sass-graph/node_modules/cliui": { - "version": "5.0.0", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "dependencies": { - "string-width": "^3.1.0", - "strip-ansi": "^5.2.0", - "wrap-ansi": "^5.1.0" - } - }, - "node_modules/sass-graph/node_modules/emoji-regex": { - "version": "7.0.3", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, - "node_modules/sass-graph/node_modules/find-up": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "locate-path": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/sass-graph/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/sass-graph/node_modules/locate-path": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "p-locate": "^3.0.0", - "path-exists": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/sass-graph/node_modules/p-locate": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "p-limit": "^2.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/sass-graph/node_modules/path-exists": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/sass-graph/node_modules/require-main-filename": { - "version": "2.0.0", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true - }, - "node_modules/sass-graph/node_modules/string-width": { - "version": "3.1.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/sass-graph/node_modules/strip-ansi": { - "version": "5.2.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "ansi-regex": "^4.1.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/sass-graph/node_modules/which-module": { - "version": "2.0.1", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true - }, - "node_modules/sass-graph/node_modules/wrap-ansi": { - "version": "5.1.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "ansi-styles": "^3.2.0", - "string-width": "^3.0.0", - "strip-ansi": "^5.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/sass-graph/node_modules/y18n": { - "version": "4.0.3", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true - }, - "node_modules/sass-graph/node_modules/yargs": { - "version": "13.3.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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" - } - }, - "node_modules/sass-graph/node_modules/yargs-parser": { - "version": "13.1.2", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "dependencies": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - } - }, "node_modules/sass-loader": { "version": "13.3.3", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.3.tgz", @@ -29829,6 +29239,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, @@ -29920,30 +29350,6 @@ "cdocparser": "^0.13.0" } }, - "node_modules/scss-tokenizer": { - "version": "0.2.3", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true, - "dependencies": { - "amdefine": ">=0.0.4" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/semver": { "version": "6.3.1", "dev": true, @@ -30123,6 +29529,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, @@ -30506,32 +29921,6 @@ "dev": true, "license": "BSD-3-Clause" }, - "node_modules/sshpk": { - "version": "1.17.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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/stable": { "version": "0.1.8", "dev": true, @@ -30666,16 +30055,6 @@ "node": ">= 0.8" } }, - "node_modules/stdout-stream": { - "version": "1.4.1", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "readable-stream": "^2.0.1" - } - }, "node_modules/stop-iteration-iterator": { "version": "1.0.0", "dev": true, @@ -30848,6 +30227,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, @@ -31758,6 +31154,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, @@ -31925,6 +31341,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, @@ -32182,26 +31618,6 @@ "node": ">=12" } }, - "node_modules/trim-newlines": { - "version": "3.0.1", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/true-case-path": { - "version": "1.0.3", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true, - "dependencies": { - "glob": "^7.1.2" - } - }, "node_modules/ts-api-utils": { "version": "1.0.3", "dev": true, @@ -32905,26 +32321,6 @@ "dev": true, "license": "0BSD" }, - "node_modules/tunnel-agent": { - "version": "0.6.0", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true, - "dependencies": { - "safe-buffer": "^5.0.1" - }, - "engines": { - "node": "*" - } - }, - "node_modules/tweetnacl": { - "version": "0.14.5", - "dev": true, - "license": "Unlicense", - "optional": true, - "peer": true - }, "node_modules/type": { "version": "1.2.0", "dev": true, @@ -33847,28 +33243,6 @@ "node": ">= 0.8" } }, - "node_modules/verror": { - "version": "1.10.0", - "dev": true, - "engines": [ - "node >=0.6.0" - ], - "license": "MIT", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true - }, "node_modules/vinyl": { "version": "2.2.1", "dev": true, @@ -34359,48 +33733,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/wide-align": { - "version": "1.1.5", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "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", - "optional": true, - "peer": true - }, - "node_modules/wide-align/node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/wide-align/node_modules/string-width": { - "version": "4.2.3", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "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 67dc63a060..39ed9486d6 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,8 @@ }, "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:sass": "node scripts/scss/styles-prod.js && rm packages/bpk-stylesheets/index.css", + "build:stylesheets": "(cd packages/bpk-stylesheets && node build)", "build:mixins-v2": "./scripts/scss/generate-v2.sh", "check-bpk-dependencies": "node scripts/npm/check-bpk-dependencies.js", "check-react-versions": "node scripts/npm/check-react-versions.js", @@ -50,12 +50,9 @@ "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 && npm run transpile:js && 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: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", @@ -147,11 +144,13 @@ "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-require-context-hook": "^1.0.0", "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,6 +161,7 @@ "lint-staged": "^15.0.2", "lodash": "^4.17.20", "mini-css-extract-plugin": "^2.8.0", + "npm-run-all": "^4.1.5", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.0", "prop-types": "^15.7.2", diff --git a/packages/package-lock.json b/packages/package-lock.json index 18262fe0e5..f2d2a78073 100644 --- a/packages/package-lock.json +++ b/packages/package-lock.json @@ -33,92 +33,23 @@ "react-window": "^1.8.7" }, "peerDependencies": { - "node-sass": ">=4.12.0", + "node-sass": ">= 7", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-transition-group": "^4.4.5" - } - }, - "node_modules/@babel/code-frame": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz", - "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==", - "peer": true, - "dependencies": { - "@babel/highlight": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", - "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==", - "peer": true, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz", - "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==", - "peer": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.22.5", - "chalk": "^2.0.0", - "js-tokens": "^4.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight/node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "peer": true, - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "peer": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "peer": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "peer": true, - "dependencies": { - "has-flag": "^3.0.0" + "react-transition-group": "^4.4.5", + "sass": "*", + "sass-embedded": "*" }, - "engines": { - "node": ">=4" + "peerDependenciesMeta": { + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + } } }, "node_modules/@babel/runtime": { @@ -132,12 +63,6 @@ "node": ">=6.9.0" } }, - "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==", - "peer": true - }, "node_modules/@googlemaps/js-api-loader": { "version": "1.16.2", "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz", @@ -155,33 +80,6 @@ "supercluster": "^8.0.1" } }, - "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==", - "peer": 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/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", - "peer": true, - "dependencies": { - "mkdirp": "^1.0.4", - "rimraf": "^3.0.2" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, "node_modules/@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", @@ -244,32 +142,11 @@ "npm": "^9.5.1 || ^10.2.5" } }, - "node_modules/@tootallnate/once": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", - "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", - "peer": true, - "engines": { - "node": ">= 10" - } - }, "node_modules/@types/google.maps": { "version": "3.53.5", "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.53.5.tgz", "integrity": "sha512-HoRq4Te8J6krH7hj+TfdYepqegoKZCj3kkaK5gf+ySFSHLvyqYkDvkrtbcVJXQ6QBphQ0h1TF7p4J6sOh4r/zg==" }, - "node_modules/@types/minimist": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz", - "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==", - "peer": true - }, - "node_modules/@types/normalize-package-data": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", - "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", - "peer": true - }, "node_modules/a11y-focus-scope": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/a11y-focus-scope/-/a11y-focus-scope-1.1.3.tgz", @@ -284,289 +161,6 @@ "resolved": "https://registry.npmjs.org/a11y-focus-store/-/a11y-focus-store-1.0.0.tgz", "integrity": "sha512-N07kBzfvJuQrYFck3C+N7QFrzqaIZB+gVcm9apVGAjDHfaMkPjgex6EpRRz12mGps898Og5AYycH2xDdbbuaLg==" }, - "node_modules/abbrev": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", - "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", - "peer": true - }, - "node_modules/agent-base": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", - "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", - "peer": true, - "dependencies": { - "debug": "4" - }, - "engines": { - "node": ">= 6.0.0" - } - }, - "node_modules/agentkeepalive": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.3.0.tgz", - "integrity": "sha512-7Epl1Blf4Sy37j4v9f9FjICCh4+KAQOyXgHEwlyBiAQLbhKdq/i2QQU3amQalS/wPhdPzDXPL5DMR5bkn+YeWg==", - "peer": true, - "dependencies": { - "debug": "^4.1.0", - "depd": "^2.0.0", - "humanize-ms": "^1.2.1" - }, - "engines": { - "node": ">= 8.0.0" - } - }, - "node_modules/aggregate-error": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", - "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", - "peer": true, - "dependencies": { - "clean-stack": "^2.0.0", - "indent-string": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "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==", - "peer": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/ansi-styles/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "peer": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/ansi-styles/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "peer": true - }, - "node_modules/aproba": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", - "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==", - "peer": true - }, - "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==", - "peer": true, - "dependencies": { - "delegates": "^1.0.0", - "readable-stream": "^3.6.0" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/arrify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", - "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/async-foreach": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", - "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==", - "peer": true, - "engines": { - "node": "*" - } - }, - "node_modules/balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "peer": true - }, - "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "peer": true, - "dependencies": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "node_modules/cacache": { - "version": "16.1.3", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz", - "integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==", - "peer": 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==", - "peer": 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==", - "peer": 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/minimatch": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", - "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", - "peer": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "peer": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/camelcase-keys": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz", - "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==", - "peer": true, - "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/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "peer": 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/chownr": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", - "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", - "peer": true, - "engines": { - "node": ">=10" - } - }, - "node_modules/clean-stack": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", - "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", - "peer": true, - "engines": { - "node": ">=6" - } - }, - "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==", - "peer": true, - "dependencies": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.1", - "wrap-ansi": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/color": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", @@ -598,47 +192,6 @@ "simple-swizzle": "^0.2.2" } }, - "node_modules/color-support": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", - "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", - "peer": true, - "bin": { - "color-support": "bin.js" - } - }, - "node_modules/concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "peer": true - }, - "node_modules/console-control-strings": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==", - "peer": true - }, - "node_modules/core-util-is": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", - "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", - "peer": true - }, - "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "peer": true, - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/css-mediaquery": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", @@ -745,72 +298,6 @@ "url": "https://opencollective.com/date-fns" } }, - "node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "peer": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, - "node_modules/decamelize": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/decamelize-keys": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz", - "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==", - "peer": true, - "dependencies": { - "decamelize": "^1.1.0", - "map-obj": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/decamelize-keys/node_modules/map-obj": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", - "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/delegates": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==", - "peer": true - }, - "node_modules/depd": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", - "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", - "peer": true, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/dom-helpers": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", @@ -821,392 +308,21 @@ "csstype": "^3.0.2" } }, - "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==", - "peer": true - }, - "node_modules/encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "optional": true, - "peer": true, - "dependencies": { - "iconv-lite": "^0.6.2" - } - }, - "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==", - "peer": true, - "engines": { - "node": ">=6" - } - }, - "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==", - "peer": true - }, - "node_modules/error-ex": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", - "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "peer": true, - "dependencies": { - "is-arrayish": "^0.2.1" - } - }, - "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "peer": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "peer": true, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, - "node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "peer": true, - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/focusin": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/focusin/-/focusin-2.0.0.tgz", "integrity": "sha512-yChGflLcqxiImpR1ibm59DjM7YCsyKIFszlmftLy+RNzYrXqiiPCMNtnEaj4DbD0oFj4fp8Jj7GLHYf1JWDvOg==" }, - "node_modules/fs-minipass": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", - "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "peer": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "peer": true - }, - "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "peer": true - }, - "node_modules/gauge": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz", - "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==", - "peer": 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/gaze": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz", - "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==", - "peer": true, - "dependencies": { - "globule": "^1.0.0" - }, - "engines": { - "node": ">= 4.0.0" - } - }, - "node_modules/get-caller-file": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", - "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", - "peer": true, - "engines": { - "node": "6.* || 8.* || >= 10.*" - } - }, - "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==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "peer": 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/globule": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.4.tgz", - "integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==", - "peer": true, - "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", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", - "peer": true, - "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", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz", - "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==", - "peer": true, - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, - "node_modules/graceful-fs": { - "version": "4.2.11", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", - "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", - "peer": true - }, - "node_modules/hard-rejection": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz", - "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==", - "peer": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/has": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "peer": true, - "dependencies": { - "function-bind": "^1.1.1" - }, - "engines": { - "node": ">= 0.4.0" - } - }, - "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==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/has-unicode": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==", - "peer": true - }, - "node_modules/hosted-git-info": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", - "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==", - "peer": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/hosted-git-info/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==", - "peer": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/http-cache-semantics": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", - "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==", - "peer": true - }, - "node_modules/http-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", - "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==", - "peer": true, - "dependencies": { - "@tootallnate/once": "2", - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/https-proxy-agent": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", - "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", - "peer": true, - "dependencies": { - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, - "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==", - "peer": true, - "dependencies": { - "ms": "^2.0.0" - } - }, "node_modules/hyphenate-style-name": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" }, - "node_modules/iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "optional": true, - "peer": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/imurmurhash": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", - "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", - "peer": true, - "engines": { - "node": ">=0.8.19" - } - }, - "node_modules/indent-string": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", - "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", - "peer": true, - "engines": { - "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==", - "peer": true - }, - "node_modules/inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "peer": true, - "dependencies": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "node_modules/inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "peer": true - }, "node_modules/internmap": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", @@ -1228,115 +344,16 @@ "loose-envify": "^1.0.0" } }, - "node_modules/ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", - "peer": true - }, - "node_modules/is-arrayish": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", - "peer": true - }, - "node_modules/is-core-module": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz", - "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==", - "peer": true, - "dependencies": { - "has": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "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==", - "peer": true, - "engines": { - "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==", - "peer": true - }, - "node_modules/is-plain-obj": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", - "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/isarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", - "peer": true - }, - "node_modules/isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "peer": true - }, - "node_modules/js-base64": { - "version": "2.6.4", - "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", - "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==", - "peer": true - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, - "node_modules/json-parse-even-better-errors": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "peer": true - }, "node_modules/kdbush": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" }, - "node_modules/kind-of": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", - "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/lines-and-columns": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "peer": true - }, - "node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "peer": true, - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -1363,54 +380,6 @@ "loose-envify": "cli.js" } }, - "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==", - "peer": true, - "engines": { - "node": ">=12" - } - }, - "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==", - "peer": 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/map-obj": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", - "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==", - "peer": true, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/matchmediaquery": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", @@ -1424,611 +393,17 @@ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" }, - "node_modules/meow": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz", - "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==", - "peer": true, - "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/normalize.css": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-4.2.0.tgz", + "integrity": "sha512-6vowjfebV3sEudR9vL2p3NQY3CliFBcM0LWr/S97RNosTmu63HQhcggCOtGjQQmtJuCwIABPEYqtItp2PlwTsg==" }, - "node_modules/min-indent": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", - "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", - "peer": true, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "engines": { - "node": ">=4" - } - }, - "node_modules/minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "peer": true, - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, - "node_modules/minimist-options": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz", - "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==", - "peer": true, - "dependencies": { - "arrify": "^1.0.1", - "is-plain-obj": "^1.1.0", - "kind-of": "^6.0.3" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/minipass": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", - "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "peer": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "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==", - "peer": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "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==", - "peer": 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-flush": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz", - "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==", - "peer": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "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==", - "peer": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "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==", - "peer": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minizlib": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", - "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", - "peer": true, - "dependencies": { - "minipass": "^3.0.0", - "yallist": "^4.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", - "peer": true, - "bin": { - "mkdirp": "bin/cmd.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "peer": true - }, - "node_modules/nan": { - "version": "2.17.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz", - "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==", - "peer": true - }, - "node_modules/negotiator": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", - "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", - "peer": true, - "engines": { - "node": ">= 0.6" - } - }, - "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==", - "peer": 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/node-gyp/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==", - "peer": true, - "dependencies": { - "@gar/promisify": "^1.0.1", - "semver": "^7.3.5" - } - }, - "node_modules/node-gyp/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", - "peer": true, - "dependencies": { - "mkdirp": "^1.0.4", - "rimraf": "^3.0.2" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/node-gyp/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==", - "peer": true, - "engines": { - "node": ">= 6" - } - }, - "node_modules/node-gyp/node_modules/cacache": { - "version": "15.3.0", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz", - "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==", - "peer": 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/node-gyp/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==", - "peer": true, - "dependencies": { - "@tootallnate/once": "1", - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/node-gyp/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==", - "peer": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "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==", - "peer": 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/node-gyp/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==", - "peer": 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/node-gyp/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==", - "peer": true, - "dependencies": { - "agent-base": "^6.0.2", - "debug": "^4.3.3", - "socks": "^2.6.2" - }, - "engines": { - "node": ">= 10" - } - }, - "node_modules/node-gyp/node_modules/ssri": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", - "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==", - "peer": true, - "dependencies": { - "minipass": "^3.1.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/node-gyp/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==", - "peer": true, - "dependencies": { - "unique-slug": "^2.0.0" - } - }, - "node_modules/node-gyp/node_modules/unique-slug": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz", - "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==", - "peer": true, - "dependencies": { - "imurmurhash": "^0.1.4" - } - }, - "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==", - "hasInstallScript": true, - "peer": 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/nopt": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", - "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", - "peer": true, - "dependencies": { - "abbrev": "1" - }, - "bin": { - "nopt": "bin/nopt.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/normalize-package-data": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz", - "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==", - "peer": true, - "dependencies": { - "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" - } - }, - "node_modules/normalize.css": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-4.2.0.tgz", - "integrity": "sha512-6vowjfebV3sEudR9vL2p3NQY3CliFBcM0LWr/S97RNosTmu63HQhcggCOtGjQQmtJuCwIABPEYqtItp2PlwTsg==" - }, - "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==", - "peer": 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/object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "peer": true, - "dependencies": { - "wrappy": "1" - } - }, - "node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "peer": true, - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "peer": true, - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/p-map": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", - "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", - "peer": true, - "dependencies": { - "aggregate-error": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "peer": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/parse-json": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", - "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "error-ex": "^1.3.1", - "json-parse-even-better-errors": "^2.3.0", - "lines-and-columns": "^1.1.6" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/path-parse": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "peer": true - }, - "node_modules/process-nextick-args": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - "peer": true - }, - "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==", - "peer": 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==", - "peer": true, - "dependencies": { - "err-code": "^2.0.2", - "retry": "^0.12.0" - }, - "engines": { - "node": ">=10" + "node": ">=0.10.0" } }, "node_modules/prop-types": { @@ -2041,15 +416,6 @@ "react-is": "^16.13.1" } }, - "node_modules/quick-lru": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz", - "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==", - "peer": true, - "engines": { - "node": ">=8" - } - }, "node_modules/react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", @@ -2205,210 +571,11 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/read-pkg": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", - "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==", - "peer": true, - "dependencies": { - "@types/normalize-package-data": "^2.4.0", - "normalize-package-data": "^2.5.0", - "parse-json": "^5.0.0", - "type-fest": "^0.6.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/read-pkg-up": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz", - "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==", - "peer": true, - "dependencies": { - "find-up": "^4.1.0", - "read-pkg": "^5.2.0", - "type-fest": "^0.8.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/read-pkg-up/node_modules/type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/read-pkg/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==", - "peer": true - }, - "node_modules/read-pkg/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==", - "peer": true, - "dependencies": { - "hosted-git-info": "^2.1.4", - "resolve": "^1.10.0", - "semver": "2 || 3 || 4 || 5", - "validate-npm-package-license": "^3.0.1" - } - }, - "node_modules/read-pkg/node_modules/semver": { - "version": "5.7.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", - "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", - "peer": true, - "bin": { - "semver": "bin/semver" - } - }, - "node_modules/read-pkg/node_modules/type-fest": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", - "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "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==", - "peer": true, - "dependencies": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/redent": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", - "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", - "peer": true, - "dependencies": { - "indent-string": "^4.0.0", - "strip-indent": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, - "node_modules/require-directory": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", - "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/resolve": { - "version": "1.22.2", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", - "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", - "peer": true, - "dependencies": { - "is-core-module": "^2.11.0", - "path-parse": "^1.0.7", - "supports-preserve-symlinks-flag": "^1.0.0" - }, - "bin": { - "resolve": "bin/resolve" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/retry": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz", - "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==", - "peer": true, - "engines": { - "node": ">= 4" - } - }, - "node_modules/rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "peer": true, - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "peer": true - }, - "node_modules/safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "optional": true, - "peer": true - }, - "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==", - "peer": 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/scheduler": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", @@ -2419,86 +586,16 @@ "object-assign": "^4.1.1" } }, - "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==", - "peer": true, - "dependencies": { - "js-base64": "^2.4.9", - "source-map": "^0.7.3" - } - }, "node_modules/section-iterator": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz", "integrity": "sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ==" }, - "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==", - "peer": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/semver/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==", - "peer": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/set-blocking": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "peer": true - }, "node_modules/shallow-equal": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" }, - "node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "peer": true, - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/signal-exit": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", - "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", - "peer": true - }, "node_modules/simple-swizzle": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", @@ -2512,183 +609,6 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" }, - "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==", - "peer": true, - "engines": { - "node": ">= 6.0.0", - "npm": ">= 3.0.0" - } - }, - "node_modules/socks": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz", - "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==", - "peer": 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==", - "peer": 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", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", - "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", - "peer": true, - "engines": { - "node": ">= 8" - } - }, - "node_modules/spdx-correct": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz", - "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==", - "peer": true, - "dependencies": { - "spdx-expression-parse": "^3.0.0", - "spdx-license-ids": "^3.0.0" - } - }, - "node_modules/spdx-exceptions": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz", - "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==", - "peer": true - }, - "node_modules/spdx-expression-parse": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", - "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", - "peer": true, - "dependencies": { - "spdx-exceptions": "^2.1.0", - "spdx-license-ids": "^3.0.0" - } - }, - "node_modules/spdx-license-ids": { - "version": "3.0.13", - "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz", - "integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==", - "peer": true - }, - "node_modules/ssri": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz", - "integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==", - "peer": true, - "dependencies": { - "minipass": "^3.1.1" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/stdout-stream": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz", - "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==", - "peer": true, - "dependencies": { - "readable-stream": "^2.0.1" - } - }, - "node_modules/stdout-stream/node_modules/readable-stream": { - "version": "2.3.8", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", - "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", - "peer": true, - "dependencies": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "node_modules/stdout-stream/node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "peer": true - }, - "node_modules/stdout-stream/node_modules/string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "peer": true, - "dependencies": { - "safe-buffer": "~5.1.0" - } - }, - "node_modules/string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "peer": true, - "dependencies": { - "safe-buffer": "~5.2.0" - } - }, - "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==", - "peer": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "peer": true, - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-indent": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", - "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", - "peer": true, - "dependencies": { - "min-indent": "^1.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/supercluster": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", @@ -2697,225 +617,10 @@ "kdbush": "^4.0.2" } }, - "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==", - "peer": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/supports-preserve-symlinks-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "peer": true, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/tabbable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.3.tgz", "integrity": "sha512-nOWwx35/JuDI4ONuF0ZTo6lYvI0fY0tZCH1ErzY2EXfu4az50ZyiUX8X073FLiZtmWUVlkRnuXsehjJgCw9tYg==" - }, - "node_modules/tar": { - "version": "6.1.15", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz", - "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==", - "peer": true, - "dependencies": { - "chownr": "^2.0.0", - "fs-minipass": "^2.0.0", - "minipass": "^5.0.0", - "minizlib": "^2.1.1", - "mkdirp": "^1.0.3", - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/tar/node_modules/minipass": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", - "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/trim-newlines": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz", - "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "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==", - "peer": true - }, - "node_modules/type-fest": { - "version": "0.18.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", - "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==", - "peer": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "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==", - "peer": 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==", - "peer": true, - "dependencies": { - "imurmurhash": "^0.1.4" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, - "node_modules/util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - "peer": true - }, - "node_modules/validate-npm-package-license": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", - "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", - "peer": true, - "dependencies": { - "spdx-correct": "^3.0.0", - "spdx-expression-parse": "^3.0.0" - } - }, - "node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "peer": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/wide-align": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", - "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", - "peer": true, - "dependencies": { - "string-width": "^1.0.2 || 2 || 3 || 4" - } - }, - "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==", - "peer": 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/wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "peer": true - }, - "node_modules/y18n": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", - "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", - "peer": true, - "engines": { - "node": ">=10" - } - }, - "node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "peer": true - }, - "node_modules/yargs": { - "version": "17.7.2", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", - "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", - "peer": 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/yargs-parser": { - "version": "20.2.9", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", - "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", - "peer": true, - "engines": { - "node": ">=10" - } - }, - "node_modules/yargs/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==", - "peer": true, - "engines": { - "node": ">=12" - } } } } diff --git a/packages/package.json b/packages/package.json index 0d9f0744c3..3218ef2817 100644 --- a/packages/package.json +++ b/packages/package.json @@ -46,9 +46,22 @@ "react-window": "^1.8.7" }, "peerDependencies": { - "node-sass": ">=4.12.0", + "node-sass": ">= 7", + "sass": "*", + "sass-embedded": "*", "react": "^17.0.2", "react-dom": "^17.0.2", "react-transition-group": "^4.4.5" + }, + "peerDependenciesMeta": { + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + } } } diff --git a/scripts/scss/style-compiler.js b/scripts/scss/style-compiler.js new file mode 100644 index 0000000000..ef77faa014 --- /dev/null +++ b/scripts/scss/style-compiler.js @@ -0,0 +1,54 @@ +const fs = require('fs'); +const path = require('path'); +const {pathToFileURL} = require("url"); + +const sass = require('sass-embedded'); + +const TEXT = `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.`; + +const licenseHeader = `/* +${TEXT.replace(/^/gm, ' * ')} + */`; + +async function compile(sassPath) { + let result; + try { + result = await sass.compileAsync(sassPath, { + style: 'compressed', + loadPaths: ['node_modules'], + importers: [ + { + // An importer that redirects relative URLs starting with "~" to + // `node_modules`. + findFileUrl(url) { + if (!url.startsWith('~')) return null; + const nUrl = pathToFileURL(`node_modules/${url.substring(1)}`); + return nUrl; + }, + }, + ], + }); + } catch (e) { + console.error(e) + } + const data = new Uint8Array(Buffer.from(`${licenseHeader}\n${result.css}`)); + const { dir, name } = path.parse(sassPath); + const newPath = path.format({ dir, name, ext: '.css' }); + return fs.writeFileSync(newPath, data); +} + +module.exports = { compile }; diff --git a/scripts/scss/styles-dev.js b/scripts/scss/styles-dev.js new file mode 100644 index 0000000000..ee3ad8a44c --- /dev/null +++ b/scripts/scss/styles-dev.js @@ -0,0 +1,41 @@ +const p = require('path'); + +const chokidar = require('chokidar'); + +const { compile } = require('./style-compiler'); + +const DIR_GLOB = './{packages,examples}/bpk-component-*/**/*.scss'; + +// eslint-disable-next-line no-console +console.log(`start watching ${DIR_GLOB}`); +// Watch app directory for changes to scss files. +const watcher = chokidar.watch(DIR_GLOB); +// Something to use when events are received. + +// eslint-disable-next-line no-console +const log = console.log.bind(console); +// Add event listeners. +watcher + .on('add', (path) => { + log(`File ${path} has been added`); + compile(path).catch(e => { + log(e); + }); + }) + .on('change', (path) => { + log(`File ${path} has been changed`); + compile(path).catch(e => { + log(e); + }); + }) + .on('unlink', (path) => log(`File ${path} has been removed`)); + +// Watch CSS deletes & recompile corresponding scss +chokidar.watch('./{packages,examples}/bpk-*/**/[!_]*.css').on('unlink', (path) => { + log(`File ${path} has been removed`); + const { dir, name } = p.parse(path); + const newPath = p.format({ dir, name, ext: '.scss' }); + compile(newPath).catch(e => { + log(e); + }); +}); diff --git a/scripts/scss/styles-prod.js b/scripts/scss/styles-prod.js new file mode 100644 index 0000000000..314988977a --- /dev/null +++ b/scripts/scss/styles-prod.js @@ -0,0 +1,14 @@ +const glob = require('glob'); + +const { compile } = require('./style-compiler'); + +const DIR_GLOB = './{packages,examples}/bpk-*/**/[!_]*.scss'; + +glob(DIR_GLOB, {}, (err, files) => { + if (err) { + // eslint-disable-next-line no-console + console.error(err); + } + + files.forEach(compile); +}); From 48dec5cb8935db5ccaca28cf9c51cecadfe6f76a Mon Sep 17 00:00:00 2001 From: Aleksandr Sannikov Date: Thu, 30 Nov 2023 16:00:28 +0000 Subject: [PATCH 05/33] [NOJIRA]: replace imports --- examples/bpk-component-aria-live/examples.module.scss | 2 +- examples/bpk-component-badge/BpkBadgeLayout.module.scss | 2 +- examples/bpk-component-banner-alert/examples.module.scss | 2 +- examples/bpk-component-barchart/examples.module.scss | 2 +- examples/bpk-component-breakpoint/examples.module.scss | 2 +- examples/bpk-component-button/BpkButtonStory.module.scss | 2 +- examples/bpk-component-card/examples.module.scss | 2 +- examples/bpk-component-chip/examples.module.scss | 2 +- examples/bpk-component-datepicker/examples.module.scss | 2 +- examples/bpk-component-dialog/examples.module.scss | 2 +- examples/bpk-component-drawer/examples.module.scss | 2 +- examples/bpk-component-fieldset/examples.module.scss | 2 +- examples/bpk-component-flare/examples.module.scss | 2 +- examples/bpk-component-form-validation/examples.module.scss | 2 +- examples/bpk-component-horizontal-nav/examples.module.scss | 2 +- examples/bpk-component-infinite-scroll/examples.module.scss | 2 +- examples/bpk-component-info-banner/examples.module.scss | 2 +- examples/bpk-component-input/examples.module.scss | 2 +- examples/bpk-component-loading-button/examples.module.scss | 2 +- .../examples.module.scss | 2 +- examples/bpk-component-modal-v2/examples.module.scss | 2 +- examples/bpk-component-modal/examples.module.scss | 2 +- examples/bpk-component-navigation-bar/examples.module.scss | 2 +- examples/bpk-component-nudger/BpkNudgerStory.module.scss | 2 +- examples/bpk-component-overlay/examples.module.scss | 2 +- examples/bpk-component-page-indicator/examples.module.scss | 2 +- examples/bpk-component-popover/examples.module.scss | 2 +- examples/bpk-component-rating/examples.module.scss | 2 +- examples/bpk-component-section-header/examples.module.scss | 2 +- examples/bpk-component-spinner/SpinnerLayout.module.scss | 2 +- examples/bpk-component-ticket/examples.module.scss | 2 +- examples/bpk-scrim-utils/examples.scss | 2 +- .../src/BpkDarkExampleWrapper.module.scss | 2 +- .../bpk-component-accordion/src/BpkAccordion.module.scss | 2 +- .../src/BpkAccordionItem.module.scss | 2 +- .../bpk-component-aria-live/src/BpkAriaLive.module.scss | 2 +- .../src/BpkAutosuggest.module.scss | 2 +- packages/bpk-component-badge/src/BpkBadge.module.scss | 2 +- .../src/BpkAnimateAndFade.module.scss | 2 +- .../src/BpkBannerAlert.module.scss | 2 +- .../bpk-component-barchart/src/BpkBarchartBar.module.scss | 2 +- .../bpk-component-barchart/src/BpkChartAxis.module.scss | 2 +- .../src/BpkChartDataTable.module.scss | 2 +- .../src/BpkChartGridLines.module.scss | 2 +- .../bpk-component-blockquote/src/BpkBlockquote.module.scss | 2 +- .../src/BpkBoilerplate.module.scss | 2 +- .../bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss | 2 +- .../src/BpkBreadcrumbItem.module.scss | 2 +- packages/bpk-component-button/src/BpkButtonBase.module.scss | 2 +- .../src/BpkButtonDestructive.module.scss | 2 +- .../bpk-component-button/src/BpkButtonFeatured.module.scss | 2 +- packages/bpk-component-button/src/BpkButtonLink.module.scss | 2 +- .../src/BpkButtonLinkOnDark.module.scss | 2 +- .../src/BpkButtonPrimaryOnDark.module.scss | 2 +- .../src/BpkButtonPrimaryOnLight.module.scss | 2 +- .../bpk-component-button/src/BpkButtonSecondary.module.scss | 2 +- .../src/BpkButtonSecondaryOnDark.module.scss | 2 +- .../src/BpkButtonV2/BpkButton.module.scss | 2 +- packages/bpk-component-calendar/src/BpkCalendar.module.scss | 2 +- .../bpk-component-calendar/src/BpkCalendarDate.module.scss | 2 +- .../bpk-component-calendar/src/BpkCalendarGrid.module.scss | 2 +- .../src/BpkCalendarGridHeader.module.scss | 2 +- .../src/BpkCalendarGridTransition.module.scss | 2 +- .../bpk-component-calendar/src/BpkCalendarNav.module.scss | 2 +- packages/bpk-component-calendar/src/_variables.scss | 2 +- .../bpk-component-card-button/src/BpkSaveButton.module.scss | 2 +- packages/bpk-component-card/src/BpkCard.module.scss | 2 +- packages/bpk-component-card/src/BpkCardWrapper.module.scss | 2 +- packages/bpk-component-card/src/BpkDividedCard.module.scss | 2 +- packages/bpk-component-checkbox/src/BpkCheckbox.module.scss | 2 +- .../bpk-component-chip/src/BpkSelectableChip.module.scss | 2 +- .../src/BpkCloseButton.module.scss | 2 +- packages/bpk-component-code/src/BpkCode.module.scss | 2 +- packages/bpk-component-code/src/BpkCodeBlock.module.scss | 2 +- .../src/BpkContentCard.module.scss | 2 +- .../src/BpkContentCards.module.scss | 2 +- .../bpk-component-datatable/src/BpkDataTable.module.scss | 2 +- .../src/BpkDataTableHeader.module.scss | 2 +- .../bpk-component-datepicker/src/BpkDatepicker.module.scss | 2 +- .../src/BpkDescriptionList.module.scss | 2 +- packages/bpk-component-dialog/src/BpkDialog.module.scss | 2 +- .../bpk-component-dialog/src/BpkDialogInner.module.scss | 2 +- packages/bpk-component-drawer/src/BpkDrawer.module.scss | 2 +- .../bpk-component-drawer/src/BpkDrawerContent.module.scss | 2 +- packages/bpk-component-fieldset/src/BpkFieldset.module.scss | 2 +- .../bpk-component-flare/src/bpk-content-bubble.module.scss | 2 +- packages/bpk-component-flare/src/bpk-flare-bar.module.scss | 2 +- .../src/BpkFloatingNotification.module.scss | 2 +- .../src/BpkFormValidation.module.scss | 2 +- .../src/BpkGraphicPromo.module.scss | 2 +- .../bpk-component-grid-toggle/src/BpkGridToggle.module.scss | 2 +- .../src/BpkHorizontalNav.module.scss | 2 +- .../src/BpkHorizontalNavItem.module.scss | 2 +- packages/bpk-component-icon/src/BpkIcon.module.scss | 2 +- packages/bpk-component-icon/src/withDescription.module.scss | 2 +- .../bpk-component-image/src/BpkBackgroundImage.module.scss | 2 +- packages/bpk-component-image/src/BpkImage.module.scss | 2 +- .../src/withInfiniteScroll.module.scss | 2 +- .../src/BpkAnimateAndFade.module.scss | 2 +- .../bpk-component-info-banner/src/BpkInfoBanner.module.scss | 2 +- packages/bpk-component-input/src/BpkClearButton.module.scss | 2 +- packages/bpk-component-input/src/BpkInput.module.scss | 2 +- packages/bpk-component-label/src/BpkLabel.module.scss | 2 +- packages/bpk-component-link/src/BpkLink.module.scss | 2 +- packages/bpk-component-list/src/BpkList.module.scss | 2 +- .../src/BpkLoadingButton.module.scss | 2 +- packages/bpk-component-map/src/BpkIconMarker.module.scss | 2 +- .../src/BpkIconMarkerBackground.module.scss | 2 +- packages/bpk-component-map/src/BpkPriceMarker.module.scss | 2 +- .../src/BpkPriceMarkerV2/BpkPriceMarker.module.scss | 2 +- .../bpk-component-map/src/DefaultLoadingElement.module.scss | 2 +- .../src/BpkMobileScrollContainer.module.scss | 2 +- packages/bpk-component-modal/src/BpkModal.module.scss | 2 +- packages/bpk-component-modal/src/BpkModalInner.module.scss | 2 +- .../bpk-component-modal/src/BpkModalV2/BpKModal.module.scss | 2 +- .../src/BpkNavigationBar.module.scss | 2 +- .../src/BpkNavigationBarButtonLink.module.scss | 2 +- .../src/BpkNavigationBarIconButton.module.scss | 2 +- packages/bpk-component-nudger/src/BpkNudger.module.scss | 2 +- packages/bpk-component-overlay/src/BpkOverlay.module.scss | 2 +- .../src/BpkPageIndicator.module.scss | 2 +- .../src/BpkPaginationList.module.scss | 2 +- .../src/BpkPaginationNudger.module.scss | 2 +- .../src/BpkPaginationPage.module.scss | 2 +- packages/bpk-component-panel/src/BpkPanel.module.scss | 2 +- .../bpk-component-phone-input/src/BpkPhoneInput.module.scss | 2 +- packages/bpk-component-popover/src/BpkPopover.module.scss | 2 +- packages/bpk-component-price/src/BpkPrice.module.scss | 2 +- packages/bpk-component-progress/src/BpkProgress.module.scss | 2 +- packages/bpk-component-radio/src/BpkRadio.module.scss | 2 +- packages/bpk-component-rating/src/BpkRating.module.scss | 2 +- .../src/BpkScrollableCalendarGrid.module.scss | 2 +- .../src/BpkScrollableCalendarGridList.module.scss | 2 +- .../src/BpkSectionHeader.module.scss | 2 +- .../src/BpkSectionListItem.module.scss | 2 +- .../src/BpkSectionListSection.module.scss | 2 +- packages/bpk-component-select/src/BpkSelect.module.scss | 2 +- .../bpk-component-skip-link/src/BpkSkipLink.module.scss | 2 +- packages/bpk-component-slider/src/BpkSlider.module.scss | 2 +- packages/bpk-component-spinner/src/BpkSpinner.module.scss | 2 +- .../bpk-component-split-input/src/BpkInputField.module.scss | 6 +++--- .../bpk-component-split-input/src/BpkSplitInput.module.scss | 2 +- .../src/BpkInteractiveStar.module.scss | 2 +- packages/bpk-component-star-rating/src/BpkStar.module.scss | 2 +- packages/bpk-component-switch/src/BpkSwitch.module.scss | 2 +- packages/bpk-component-table/src/BpkTable.module.scss | 2 +- packages/bpk-component-text/src/BpkText.module.scss | 2 +- packages/bpk-component-textarea/src/BpkTextarea.module.scss | 2 +- .../src/BpkThemeToggle.module.scss | 2 +- packages/bpk-component-ticket/src/BpkTicket.module.scss | 2 +- packages/bpk-component-tooltip/src/BpkTooltip.module.scss | 2 +- packages/bpk-scrim-utils/src/bpk-scrim-content.module.scss | 2 +- packages/bpk-scrim-utils/src/bpk-scrim.module.scss | 2 +- packages/bpk-stylesheets/index.scss | 2 +- 154 files changed, 156 insertions(+), 156 deletions(-) diff --git a/examples/bpk-component-aria-live/examples.module.scss b/examples/bpk-component-aria-live/examples.module.scss index 2d4c27850e..d98d05fa7d 100644 --- a/examples/bpk-component-aria-live/examples.module.scss +++ b/examples/bpk-component-aria-live/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-storybook-aria-live-demo { padding: bpk-spacing-base(); diff --git a/examples/bpk-component-badge/BpkBadgeLayout.module.scss b/examples/bpk-component-badge/BpkBadgeLayout.module.scss index 886d8dbe8f..f83a8858c0 100644 --- a/examples/bpk-component-badge/BpkBadgeLayout.module.scss +++ b/examples/bpk-component-badge/BpkBadgeLayout.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-badge-layout { &__container { diff --git a/examples/bpk-component-banner-alert/examples.module.scss b/examples/bpk-component-banner-alert/examples.module.scss index a58c5a53d6..3da92657a6 100644 --- a/examples/bpk-component-banner-alert/examples.module.scss +++ b/examples/bpk-component-banner-alert/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-banner-alert-examples { &__component { diff --git a/examples/bpk-component-barchart/examples.module.scss b/examples/bpk-component-barchart/examples.module.scss index bbba069c89..944039e51e 100644 --- a/examples/bpk-component-barchart/examples.module.scss +++ b/examples/bpk-component-barchart/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-heading { margin-bottom: bpk-spacing-base(); diff --git a/examples/bpk-component-breakpoint/examples.module.scss b/examples/bpk-component-breakpoint/examples.module.scss index a44197132a..7c468567cd 100644 --- a/examples/bpk-component-breakpoint/examples.module.scss +++ b/examples/bpk-component-breakpoint/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-breakpoints-demo { border-radius: $bpk-border-radius-xs; diff --git a/examples/bpk-component-button/BpkButtonStory.module.scss b/examples/bpk-component-button/BpkButtonStory.module.scss index 069f4f6f24..cb0550943b 100644 --- a/examples/bpk-component-button/BpkButtonStory.module.scss +++ b/examples/bpk-component-button/BpkButtonStory.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-button-story-wrapper { padding: bpk-spacing-sm() 0; diff --git a/examples/bpk-component-card/examples.module.scss b/examples/bpk-component-card/examples.module.scss index 2e2285fb50..62023e9be4 100644 --- a/examples/bpk-component-card/examples.module.scss +++ b/examples/bpk-component-card/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-card-examples { &__header { diff --git a/examples/bpk-component-chip/examples.module.scss b/examples/bpk-component-chip/examples.module.scss index 878efccf61..ada428d96c 100644 --- a/examples/bpk-component-chip/examples.module.scss +++ b/examples/bpk-component-chip/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-chip-examples { &__container { diff --git a/examples/bpk-component-datepicker/examples.module.scss b/examples/bpk-component-datepicker/examples.module.scss index 8b94ced4b8..016d1473b4 100644 --- a/examples/bpk-component-datepicker/examples.module.scss +++ b/examples/bpk-component-datepicker/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-datepicker { &__container { diff --git a/examples/bpk-component-dialog/examples.module.scss b/examples/bpk-component-dialog/examples.module.scss index f7ef1dc7cb..34ec6721ab 100644 --- a/examples/bpk-component-dialog/examples.module.scss +++ b/examples/bpk-component-dialog/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-dialog-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-drawer/examples.module.scss b/examples/bpk-component-drawer/examples.module.scss index 148ae6510f..3230f25f65 100644 --- a/examples/bpk-component-drawer/examples.module.scss +++ b/examples/bpk-component-drawer/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-drawer-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-fieldset/examples.module.scss b/examples/bpk-component-fieldset/examples.module.scss index 57729fb4cd..de00ddfc9f 100644 --- a/examples/bpk-component-fieldset/examples.module.scss +++ b/examples/bpk-component-fieldset/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-fieldsets { &__container { diff --git a/examples/bpk-component-flare/examples.module.scss b/examples/bpk-component-flare/examples.module.scss index 50a4159242..f5336b3ee4 100644 --- a/examples/bpk-component-flare/examples.module.scss +++ b/examples/bpk-component-flare/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-flare-stories { padding: bpk-spacing-xl(); diff --git a/examples/bpk-component-form-validation/examples.module.scss b/examples/bpk-component-form-validation/examples.module.scss index 8bb03918bd..49fb8dfb8b 100644 --- a/examples/bpk-component-form-validation/examples.module.scss +++ b/examples/bpk-component-form-validation/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpkdocs-forms-page { &__viewport-alert { diff --git a/examples/bpk-component-horizontal-nav/examples.module.scss b/examples/bpk-component-horizontal-nav/examples.module.scss index 109f1838c6..f5ea172f39 100644 --- a/examples/bpk-component-horizontal-nav/examples.module.scss +++ b/examples/bpk-component-horizontal-nav/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; $custom-color: $bpk-status-success-fill-day; diff --git a/examples/bpk-component-infinite-scroll/examples.module.scss b/examples/bpk-component-infinite-scroll/examples.module.scss index 87a674c809..b63d6b1492 100644 --- a/examples/bpk-component-infinite-scroll/examples.module.scss +++ b/examples/bpk-component-infinite-scroll/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-infinite-scroll-stories { &__fixed-panel { diff --git a/examples/bpk-component-info-banner/examples.module.scss b/examples/bpk-component-info-banner/examples.module.scss index 5490ea07ac..7f893a21d0 100644 --- a/examples/bpk-component-info-banner/examples.module.scss +++ b/examples/bpk-component-info-banner/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-info-banner-examples { &__component { diff --git a/examples/bpk-component-input/examples.module.scss b/examples/bpk-component-input/examples.module.scss index 1b8e1edde7..1b7f277fd2 100644 --- a/examples/bpk-component-input/examples.module.scss +++ b/examples/bpk-component-input/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-forms { &__viewport-alert { diff --git a/examples/bpk-component-loading-button/examples.module.scss b/examples/bpk-component-loading-button/examples.module.scss index e0d5548459..96ffc9542f 100644 --- a/examples/bpk-component-loading-button/examples.module.scss +++ b/examples/bpk-component-loading-button/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-loading-button-example-wrapper { padding: bpk-spacing-sm() 0; diff --git a/examples/bpk-component-mobile-scroll-container/examples.module.scss b/examples/bpk-component-mobile-scroll-container/examples.module.scss index bb33eb58e2..e9872033a1 100644 --- a/examples/bpk-component-mobile-scroll-container/examples.module.scss +++ b/examples/bpk-component-mobile-scroll-container/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-stories-mobile-scroll-container { &__leading-indicator { diff --git a/examples/bpk-component-modal-v2/examples.module.scss b/examples/bpk-component-modal-v2/examples.module.scss index f7ef1dc7cb..34ec6721ab 100644 --- a/examples/bpk-component-modal-v2/examples.module.scss +++ b/examples/bpk-component-modal-v2/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-dialog-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-modal/examples.module.scss b/examples/bpk-component-modal/examples.module.scss index 1cf49e8f9f..7c2600587f 100644 --- a/examples/bpk-component-modal/examples.module.scss +++ b/examples/bpk-component-modal/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-modal-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-navigation-bar/examples.module.scss b/examples/bpk-component-navigation-bar/examples.module.scss index 528d98ff1b..381d532f47 100644 --- a/examples/bpk-component-navigation-bar/examples.module.scss +++ b/examples/bpk-component-navigation-bar/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-navigation-bar-story { padding: $bpk-one-pixel-rem $bpk-one-pixel-rem bpk-spacing-xxl() * 2; diff --git a/examples/bpk-component-nudger/BpkNudgerStory.module.scss b/examples/bpk-component-nudger/BpkNudgerStory.module.scss index 4cb57a557d..b54c59f21a 100644 --- a/examples/bpk-component-nudger/BpkNudgerStory.module.scss +++ b/examples/bpk-component-nudger/BpkNudgerStory.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-nudger-secondary-on-dark { color: $bpk-text-on-dark-day; diff --git a/examples/bpk-component-overlay/examples.module.scss b/examples/bpk-component-overlay/examples.module.scss index 9e5d1caa22..507b4870e5 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'; +@import '../../packages/bpk-mixins-next'; .bpk-overlay-stories { display: flex; diff --git a/examples/bpk-component-page-indicator/examples.module.scss b/examples/bpk-component-page-indicator/examples.module.scss index f0f852bf9a..ed63a24223 100644 --- a/examples/bpk-component-page-indicator/examples.module.scss +++ b/examples/bpk-component-page-indicator/examples.module.scss @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-page-indicator-examples { &__container { diff --git a/examples/bpk-component-popover/examples.module.scss b/examples/bpk-component-popover/examples.module.scss index 50b37693f0..c94559ea76 100644 --- a/examples/bpk-component-popover/examples.module.scss +++ b/examples/bpk-component-popover/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-popover-paragraph { margin-bottom: bpk-spacing-sm(); diff --git a/examples/bpk-component-rating/examples.module.scss b/examples/bpk-component-rating/examples.module.scss index c57b255ca6..846c478283 100644 --- a/examples/bpk-component-rating/examples.module.scss +++ b/examples/bpk-component-rating/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-rating-story { &--img { diff --git a/examples/bpk-component-section-header/examples.module.scss b/examples/bpk-component-section-header/examples.module.scss index 0d80e218ab..d297254381 100644 --- a/examples/bpk-component-section-header/examples.module.scss +++ b/examples/bpk-component-section-header/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-section-header-examples { &__on-dark { diff --git a/examples/bpk-component-spinner/SpinnerLayout.module.scss b/examples/bpk-component-spinner/SpinnerLayout.module.scss index 7653ebece8..afd59f8ad9 100644 --- a/examples/bpk-component-spinner/SpinnerLayout.module.scss +++ b/examples/bpk-component-spinner/SpinnerLayout.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-spinner-layout { display: flex; diff --git a/examples/bpk-component-ticket/examples.module.scss b/examples/bpk-component-ticket/examples.module.scss index 1c022e91d9..2dfc756678 100644 --- a/examples/bpk-component-ticket/examples.module.scss +++ b/examples/bpk-component-ticket/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-stories-flight { margin-bottom: 2rem; diff --git a/examples/bpk-scrim-utils/examples.scss b/examples/bpk-scrim-utils/examples.scss index 7ee6ac19c7..99d9b43350 100644 --- a/examples/bpk-scrim-utils/examples.scss +++ b/examples/bpk-scrim-utils/examples.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@import '../../packages/bpk-mixins-next'; .bpk-scrim-utils-example { &__dialog { diff --git a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss index c2008a56fb..531e3d4d2f 100644 --- a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss +++ b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../../packages/bpk-mixins/index.scss'; +@import '../../../packages/bpk-mixins-next'; .bpk-dark-example-wrapper { @include bpk-border-radius-sm; diff --git a/packages/bpk-component-accordion/src/BpkAccordion.module.scss b/packages/bpk-component-accordion/src/BpkAccordion.module.scss index 79fc2a553d..fcb1b45aa1 100644 --- a/packages/bpk-component-accordion/src/BpkAccordion.module.scss +++ b/packages/bpk-component-accordion/src/BpkAccordion.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-accordion { margin: 0; diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss index 54d558214a..e7ba81568f 100644 --- a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss +++ b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-accordion { &__title { diff --git a/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss b/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss index c5f85962f1..4d69e31e49 100644 --- a/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss +++ b/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-aria-live { &--invisible { diff --git a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss b/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss index 099055a8f1..107c6c07be 100644 --- a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss +++ b/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $arrow-size: bpk-spacing-sm() * 3; diff --git a/packages/bpk-component-badge/src/BpkBadge.module.scss b/packages/bpk-component-badge/src/BpkBadge.module.scss index bf7401758b..e76ab8b61a 100644 --- a/packages/bpk-component-badge/src/BpkBadge.module.scss +++ b/packages/bpk-component-badge/src/BpkBadge.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-badge { @include bpk-badge; diff --git a/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss b/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss index a2c2710d4b..3610d273ff 100644 --- a/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss +++ b/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-animate-and-fade { $invisible: 0.01; diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss b/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss index 0a86c2b8ed..070d5b5f00 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-banner-alert { background-color: $bpk-surface-default-day; diff --git a/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss b/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss index 73caf8998f..cb699b2dcc 100644 --- a/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss +++ b/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-barchart-bar { @include bpk-themeable-property( diff --git a/packages/bpk-component-barchart/src/BpkChartAxis.module.scss b/packages/bpk-component-barchart/src/BpkChartAxis.module.scss index 162447cab2..bee08a89ce 100644 --- a/packages/bpk-component-barchart/src/BpkChartAxis.module.scss +++ b/packages/bpk-component-barchart/src/BpkChartAxis.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-chart { &__axis-tick { diff --git a/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss b/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss index 025506be1a..79826c841c 100644 --- a/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss +++ b/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-chart-data-table { @include bpk-visually-hidden; diff --git a/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss b/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss index 4bf4350cf0..93f7cd18d4 100644 --- a/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss +++ b/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-chart { &__grid-line { diff --git a/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss b/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss index d650704aab..05783827b9 100644 --- a/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss +++ b/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-blockquote { @include bpk-blockquote; diff --git a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss b/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss index 0f41621649..9c284991c4 100644 --- a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss +++ b/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-boilerplate { display: flex; diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss b/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss index b31a1eb40d..3ad33c5232 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-breadcrumb { display: flex; diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss index 7bfeebf081..07a6f56ea2 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-breadcrumb-item { display: flex; diff --git a/packages/bpk-component-button/src/BpkButtonBase.module.scss b/packages/bpk-component-button/src/BpkButtonBase.module.scss index c595c44f08..05c5db21b6 100644 --- a/packages/bpk-component-button/src/BpkButtonBase.module.scss +++ b/packages/bpk-component-button/src/BpkButtonBase.module.scss @@ -18,7 +18,7 @@ /* @flow strict */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button { @include bpk-button; diff --git a/packages/bpk-component-button/src/BpkButtonDestructive.module.scss b/packages/bpk-component-button/src/BpkButtonDestructive.module.scss index 57b8acfb87..dd4455d7dd 100644 --- a/packages/bpk-component-button/src/BpkButtonDestructive.module.scss +++ b/packages/bpk-component-button/src/BpkButtonDestructive.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button--destructive { @include bpk-button--secondary; diff --git a/packages/bpk-component-button/src/BpkButtonFeatured.module.scss b/packages/bpk-component-button/src/BpkButtonFeatured.module.scss index 35ae291dfa..880f720502 100644 --- a/packages/bpk-component-button/src/BpkButtonFeatured.module.scss +++ b/packages/bpk-component-button/src/BpkButtonFeatured.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button--featured { @include bpk-button--featured; diff --git a/packages/bpk-component-button/src/BpkButtonLink.module.scss b/packages/bpk-component-button/src/BpkButtonLink.module.scss index 598c94b89c..3290aa9840 100644 --- a/packages/bpk-component-button/src/BpkButtonLink.module.scss +++ b/packages/bpk-component-button/src/BpkButtonLink.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button { &--link { diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss index 6347d20f6f..958b377da2 100644 --- a/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss +++ b/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button--link-on-dark { @include bpk-button--link-on-dark; diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss index 800c341e00..db9f6a9971 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button--primary-on-dark { @include bpk-button--primary-on-dark; diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss index 8c8e7436b8..87c65fb49b 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button--primary-on-light { @include bpk-button--primary-on-light; diff --git a/packages/bpk-component-button/src/BpkButtonSecondary.module.scss b/packages/bpk-component-button/src/BpkButtonSecondary.module.scss index 7db2ae8e7d..4ea9420ff7 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondary.module.scss +++ b/packages/bpk-component-button/src/BpkButtonSecondary.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button--secondary { @include bpk-button--secondary; diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss index 1331e4d657..bf8f156136 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss +++ b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-button--secondary-on-dark { @include bpk-button--secondary-on-dark; diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss index 13239500a9..7fc8fc03cd 100644 --- a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss +++ b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../../bpk-mixins/index.scss'; +@import '../../../bpk-mixins-next'; .bpk-button { @include bpk-button; diff --git a/packages/bpk-component-calendar/src/BpkCalendar.module.scss b/packages/bpk-component-calendar/src/BpkCalendar.module.scss index b2ab228f7a..a59eb5289f 100644 --- a/packages/bpk-component-calendar/src/BpkCalendar.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendar.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @import 'variables.scss'; .bpk-calendar { diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss b/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss index fb2c1e3014..877fa17afd 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-calendar-date { width: $bpk-calendar-day-size; diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss index 175e5ce42e..5edd5fa73c 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @import 'variables.scss'; .bpk-calendar-grid { diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss index 044d7ee925..048401112b 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @import 'variables.scss'; .bpk-calendar-header { diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss index 981e96ca3c..677eb481f3 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @import 'variables.scss'; .bpk-calendar-grid-transition { diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss b/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss index 8f18126016..6d5a997127 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @import 'variables.scss'; .bpk-calendar-nav { diff --git a/packages/bpk-component-calendar/src/_variables.scss b/packages/bpk-component-calendar/src/_variables.scss index c60fb3b7be..4082bb2e83 100644 --- a/packages/bpk-component-calendar/src/_variables.scss +++ b/packages/bpk-component-calendar/src/_variables.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $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)); diff --git a/packages/bpk-component-card-button/src/BpkSaveButton.module.scss b/packages/bpk-component-card-button/src/BpkSaveButton.module.scss index 602144e33e..22015544dd 100644 --- a/packages/bpk-component-card-button/src/BpkSaveButton.module.scss +++ b/packages/bpk-component-card-button/src/BpkSaveButton.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @keyframes heart-beat { 0%, diff --git a/packages/bpk-component-card/src/BpkCard.module.scss b/packages/bpk-component-card/src/BpkCard.module.scss index 2d2a5fece4..550f5a59f9 100644 --- a/packages/bpk-component-card/src/BpkCard.module.scss +++ b/packages/bpk-component-card/src/BpkCard.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-card { @include bpk-card; diff --git a/packages/bpk-component-card/src/BpkCardWrapper.module.scss b/packages/bpk-component-card/src/BpkCardWrapper.module.scss index bc3569fa0f..45cef5be1b 100644 --- a/packages/bpk-component-card/src/BpkCardWrapper.module.scss +++ b/packages/bpk-component-card/src/BpkCardWrapper.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-card-wrapper { @include bpk-card; diff --git a/packages/bpk-component-card/src/BpkDividedCard.module.scss b/packages/bpk-component-card/src/BpkDividedCard.module.scss index ae78f3df4c..8802a08ac2 100644 --- a/packages/bpk-component-card/src/BpkDividedCard.module.scss +++ b/packages/bpk-component-card/src/BpkDividedCard.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $min-vertical-width: 240; $max-vertical-width: 720; diff --git a/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss b/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss index 9312d808c0..260d2138fe 100644 --- a/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss +++ b/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-checkbox { @include bpk-checkbox; diff --git a/packages/bpk-component-chip/src/BpkSelectableChip.module.scss b/packages/bpk-component-chip/src/BpkSelectableChip.module.scss index ca966f1394..dd3a71a65b 100644 --- a/packages/bpk-component-chip/src/BpkSelectableChip.module.scss +++ b/packages/bpk-component-chip/src/BpkSelectableChip.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-chip { @include bpk-chip; diff --git a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss index df093f348a..2a642d66b6 100644 --- a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss +++ b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $button-padding: bpk-spacing-sm() / 2; diff --git a/packages/bpk-component-code/src/BpkCode.module.scss b/packages/bpk-component-code/src/BpkCode.module.scss index 1895e5eced..c1dac44eed 100644 --- a/packages/bpk-component-code/src/BpkCode.module.scss +++ b/packages/bpk-component-code/src/BpkCode.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-code { @include bpk-code; diff --git a/packages/bpk-component-code/src/BpkCodeBlock.module.scss b/packages/bpk-component-code/src/BpkCodeBlock.module.scss index bea2b78501..399f322003 100644 --- a/packages/bpk-component-code/src/BpkCodeBlock.module.scss +++ b/packages/bpk-component-code/src/BpkCodeBlock.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-code { &--block { diff --git a/packages/bpk-component-content-cards/src/BpkContentCard.module.scss b/packages/bpk-component-content-cards/src/BpkContentCard.module.scss index f2b2010617..6ccf156581 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCard.module.scss +++ b/packages/bpk-component-content-cards/src/BpkContentCard.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-content-card { &--link { diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss index f1fc2396ea..6ffcb1b771 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss +++ b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss @@ -19,7 +19,7 @@ /* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-max-compound-selectors */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-content-cards { &--header-text { diff --git a/packages/bpk-component-datatable/src/BpkDataTable.module.scss b/packages/bpk-component-datatable/src/BpkDataTable.module.scss index 938265507e..d8932783ab 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTable.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $bpk-border-size-datatable: $bpk-border-size-xl * 2; diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss index 457bec664f..0aabd5e681 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md(); diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss b/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss index 6b79449bc7..6274969e9a 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss +++ b/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-datepicker { &__calendar { diff --git a/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss b/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss index cba49ae7a1..1e160235e7 100644 --- a/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss +++ b/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-description-list { margin: 0; diff --git a/packages/bpk-component-dialog/src/BpkDialog.module.scss b/packages/bpk-component-dialog/src/BpkDialog.module.scss index 565e395d5f..f4801c779c 100644 --- a/packages/bpk-component-dialog/src/BpkDialog.module.scss +++ b/packages/bpk-component-dialog/src/BpkDialog.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-dialog { &__container { diff --git a/packages/bpk-component-dialog/src/BpkDialogInner.module.scss b/packages/bpk-component-dialog/src/BpkDialogInner.module.scss index d23a046f2e..d0f355c4d0 100644 --- a/packages/bpk-component-dialog/src/BpkDialogInner.module.scss +++ b/packages/bpk-component-dialog/src/BpkDialogInner.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-dialog-inner { z-index: $bpk-zindex-modal; diff --git a/packages/bpk-component-drawer/src/BpkDrawer.module.scss b/packages/bpk-component-drawer/src/BpkDrawer.module.scss index be9414877a..22a27a7ada 100644 --- a/packages/bpk-component-drawer/src/BpkDrawer.module.scss +++ b/packages/bpk-component-drawer/src/BpkDrawer.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-drawer__container { position: fixed; diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss b/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss index 295539e86f..64423c70c5 100644 --- a/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss +++ b/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-drawer { position: fixed; diff --git a/packages/bpk-component-fieldset/src/BpkFieldset.module.scss b/packages/bpk-component-fieldset/src/BpkFieldset.module.scss index df263374a7..6c0f096ccd 100644 --- a/packages/bpk-component-fieldset/src/BpkFieldset.module.scss +++ b/packages/bpk-component-fieldset/src/BpkFieldset.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-fieldset { margin: 0; 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..af8821b856 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'; +@import '../../bpk-mixins-next'; .bpk-content-bubble { &__pointer { 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..0adc9fbdb6 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,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-flare-bar { &__container { diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss index 07920dd8f9..430e0bc7a0 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-floating-notification { position: absolute; diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss b/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss index 0896b62a46..33dc8b387f 100644 --- a/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss +++ b/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-form-validation { @include bpk-form-validation; diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss index 4398c0ab8a..e12ce17fc7 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @mixin aspect-ratio($ratio) { padding-top: $ratio; diff --git a/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.scss b/packages/bpk-component-grid-toggle/src/BpkGridToggle.module.scss index 4191f5f3e6..63bdbbe3cd 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'; +@import '../../bpk-mixins-next'; .bpk-vertical-grid { &--on { diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss index fb91165317..4ac8470ab3 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-horizontal-nav { &--show-default-underline { diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss index e7f65b7fd8..1a1794034b 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-horizontal-nav { &__item { diff --git a/packages/bpk-component-icon/src/BpkIcon.module.scss b/packages/bpk-component-icon/src/BpkIcon.module.scss index 31c2070717..7d405ba9e8 100644 --- a/packages/bpk-component-icon/src/BpkIcon.module.scss +++ b/packages/bpk-component-icon/src/BpkIcon.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-icon { &--align-to-button { diff --git a/packages/bpk-component-icon/src/withDescription.module.scss b/packages/bpk-component-icon/src/withDescription.module.scss index b424a6f6b4..2feb41a8cb 100644 --- a/packages/bpk-component-icon/src/withDescription.module.scss +++ b/packages/bpk-component-icon/src/withDescription.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-icon-description { @include bpk-visually-hidden; diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.module.scss b/packages/bpk-component-image/src/BpkBackgroundImage.module.scss index def97012a5..2ea7d79221 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage.module.scss +++ b/packages/bpk-component-image/src/BpkBackgroundImage.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @import './bpkImageMixins.scss'; .bpk-background-image { diff --git a/packages/bpk-component-image/src/BpkImage.module.scss b/packages/bpk-component-image/src/BpkImage.module.scss index 9c26d7805b..6cbd023e8b 100644 --- a/packages/bpk-component-image/src/BpkImage.module.scss +++ b/packages/bpk-component-image/src/BpkImage.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @import './bpkImageMixins.scss'; .bpk-image { diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss index 16d82caa06..25f19a25ab 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-sentinel { // this is necessary for when the user doesn't define a custom loading component diff --git a/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss b/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss index a2c2710d4b..3610d273ff 100644 --- a/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss +++ b/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-animate-and-fade { $invisible: 0.01; diff --git a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss index baaa77f71b..afb61136ae 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss +++ b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-info-banner { padding: bpk-spacing-md() bpk-spacing-base(); diff --git a/packages/bpk-component-input/src/BpkClearButton.module.scss b/packages/bpk-component-input/src/BpkClearButton.module.scss index edafe260d5..d1916e18a5 100644 --- a/packages/bpk-component-input/src/BpkClearButton.module.scss +++ b/packages/bpk-component-input/src/BpkClearButton.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-clear-button { padding: 0; diff --git a/packages/bpk-component-input/src/BpkInput.module.scss b/packages/bpk-component-input/src/BpkInput.module.scss index 269ffbaa22..73179cf7af 100644 --- a/packages/bpk-component-input/src/BpkInput.module.scss +++ b/packages/bpk-component-input/src/BpkInput.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-input { @include bpk-input; diff --git a/packages/bpk-component-label/src/BpkLabel.module.scss b/packages/bpk-component-label/src/BpkLabel.module.scss index 5b101e65a4..c6ec198e7a 100644 --- a/packages/bpk-component-label/src/BpkLabel.module.scss +++ b/packages/bpk-component-label/src/BpkLabel.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-label { @include bpk-label; diff --git a/packages/bpk-component-link/src/BpkLink.module.scss b/packages/bpk-component-link/src/BpkLink.module.scss index 4ca6b6afd7..a49f2ab521 100644 --- a/packages/bpk-component-link/src/BpkLink.module.scss +++ b/packages/bpk-component-link/src/BpkLink.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-link { @include bpk-link; diff --git a/packages/bpk-component-list/src/BpkList.module.scss b/packages/bpk-component-list/src/BpkList.module.scss index 49e5840740..982bd50047 100644 --- a/packages/bpk-component-list/src/BpkList.module.scss +++ b/packages/bpk-component-list/src/BpkList.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-list { @include bpk-list; diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss index d054cefa10..8776ea3015 100644 --- a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss +++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-loading-button { $button-padding-x: bpk-spacing-base() * 2; diff --git a/packages/bpk-component-map/src/BpkIconMarker.module.scss b/packages/bpk-component-map/src/BpkIconMarker.module.scss index 4fd20b299f..6ec1318fbd 100644 --- a/packages/bpk-component-map/src/BpkIconMarker.module.scss +++ b/packages/bpk-component-map/src/BpkIconMarker.module.scss @@ -20,7 +20,7 @@ /* stylelint-disable unit-disallowed-list */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-icon-marker { $marker-width: 26px; diff --git a/packages/bpk-component-map/src/BpkIconMarkerBackground.module.scss b/packages/bpk-component-map/src/BpkIconMarkerBackground.module.scss index 5258dffe68..c6e800f9eb 100644 --- a/packages/bpk-component-map/src/BpkIconMarkerBackground.module.scss +++ b/packages/bpk-component-map/src/BpkIconMarkerBackground.module.scss @@ -16,7 +16,7 @@ // * limitations under the License. // */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-icon-marker-background { position: absolute; diff --git a/packages/bpk-component-map/src/BpkPriceMarker.module.scss b/packages/bpk-component-map/src/BpkPriceMarker.module.scss index 971915754e..4e2bbb86fe 100644 --- a/packages/bpk-component-map/src/BpkPriceMarker.module.scss +++ b/packages/bpk-component-map/src/BpkPriceMarker.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $arrow-width: bpk-spacing-base(); $arrow-height: bpk-spacing-base(); diff --git a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.scss b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.scss index e512c95120..5b3c5e2fe1 100644 --- a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.scss +++ b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../../bpk-mixins/index.scss'; +@import '../../../bpk-mixins-next'; .bpk-price-marker { display: flex; diff --git a/packages/bpk-component-map/src/DefaultLoadingElement.module.scss b/packages/bpk-component-map/src/DefaultLoadingElement.module.scss index e3a7bf99a7..74b8be0a3a 100644 --- a/packages/bpk-component-map/src/DefaultLoadingElement.module.scss +++ b/packages/bpk-component-map/src/DefaultLoadingElement.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-map-default-loading-element { display: flex; diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.scss b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.scss index 586f574c0d..6d9762e138 100644 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.scss +++ b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-mobile-scroll-container { position: relative; diff --git a/packages/bpk-component-modal/src/BpkModal.module.scss b/packages/bpk-component-modal/src/BpkModal.module.scss index 245bab0339..7b76c49281 100644 --- a/packages/bpk-component-modal/src/BpkModal.module.scss +++ b/packages/bpk-component-modal/src/BpkModal.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @mixin fullscreen() { display: flex; diff --git a/packages/bpk-component-modal/src/BpkModalInner.module.scss b/packages/bpk-component-modal/src/BpkModalInner.module.scss index 0b240c0441..fc92feb08b 100644 --- a/packages/bpk-component-modal/src/BpkModalInner.module.scss +++ b/packages/bpk-component-modal/src/BpkModalInner.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @mixin fullscreen() { display: flex; diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss index 5fab4cbd7e..6bcd4e596b 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss +++ b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../../bpk-mixins/index.scss'; +@import '../../../bpk-mixins-next'; @mixin header { display: flex; diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss b/packages/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss index e0c1cdf1fc..e7f2ad2284 100644 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss +++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-navigation-bar { position: relative; diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss b/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss index f66fa1c9b8..d7992117b2 100644 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss +++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-navigation-bar-button-link { @include bpk-themeable-property( diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.scss b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.scss index 1a88ba7753..9ec17c816e 100644 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.scss +++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-navigation-bar-icon-button { @include bpk-themeable-property( diff --git a/packages/bpk-component-nudger/src/BpkNudger.module.scss b/packages/bpk-component-nudger/src/BpkNudger.module.scss index c8811ee73f..d2c127c2a2 100644 --- a/packages/bpk-component-nudger/src/BpkNudger.module.scss +++ b/packages/bpk-component-nudger/src/BpkNudger.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-nudger { @include bpk-rtl { diff --git a/packages/bpk-component-overlay/src/BpkOverlay.module.scss b/packages/bpk-component-overlay/src/BpkOverlay.module.scss index cbdafd89c9..16feb1086e 100644 --- a/packages/bpk-component-overlay/src/BpkOverlay.module.scss +++ b/packages/bpk-component-overlay/src/BpkOverlay.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-overlay { &__wrapper { diff --git a/packages/bpk-component-page-indicator/src/BpkPageIndicator.module.scss b/packages/bpk-component-page-indicator/src/BpkPageIndicator.module.scss index 611a3e0adf..2242d570e6 100644 --- a/packages/bpk-component-page-indicator/src/BpkPageIndicator.module.scss +++ b/packages/bpk-component-page-indicator/src/BpkPageIndicator.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $dot-size: bpk-spacing-md(); $dot-margin: bpk-spacing-sm(); diff --git a/packages/bpk-component-pagination/src/BpkPaginationList.module.scss b/packages/bpk-component-pagination/src/BpkPaginationList.module.scss index ae9291df0e..3affb48369 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationList.module.scss +++ b/packages/bpk-component-pagination/src/BpkPaginationList.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-pagination-page-list { display: flex; diff --git a/packages/bpk-component-pagination/src/BpkPaginationNudger.module.scss b/packages/bpk-component-pagination/src/BpkPaginationNudger.module.scss index 71df8fa544..bfe04ced99 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationNudger.module.scss +++ b/packages/bpk-component-pagination/src/BpkPaginationNudger.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-pagination-nudger { display: flex; diff --git a/packages/bpk-component-pagination/src/BpkPaginationPage.module.scss b/packages/bpk-component-pagination/src/BpkPaginationPage.module.scss index d0274f8336..fe4fd2119f 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationPage.module.scss +++ b/packages/bpk-component-pagination/src/BpkPaginationPage.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-pagination-page { min-width: $bpk-button-height; diff --git a/packages/bpk-component-panel/src/BpkPanel.module.scss b/packages/bpk-component-panel/src/BpkPanel.module.scss index d3347d0f64..d769e0465d 100644 --- a/packages/bpk-component-panel/src/BpkPanel.module.scss +++ b/packages/bpk-component-panel/src/BpkPanel.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-panel { @include bpk-panel; diff --git a/packages/bpk-component-phone-input/src/BpkPhoneInput.module.scss b/packages/bpk-component-phone-input/src/BpkPhoneInput.module.scss index 660540a439..0fb58f19de 100644 --- a/packages/bpk-component-phone-input/src/BpkPhoneInput.module.scss +++ b/packages/bpk-component-phone-input/src/BpkPhoneInput.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-phone-input { display: flex; diff --git a/packages/bpk-component-popover/src/BpkPopover.module.scss b/packages/bpk-component-popover/src/BpkPopover.module.scss index 791f6460ab..d0539824af 100644 --- a/packages/bpk-component-popover/src/BpkPopover.module.scss +++ b/packages/bpk-component-popover/src/BpkPopover.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $arrow-size: bpk-spacing-lg(); $arrow-inset-margin: -($bpk-one-pixel-rem * 11); diff --git a/packages/bpk-component-price/src/BpkPrice.module.scss b/packages/bpk-component-price/src/BpkPrice.module.scss index 35e308d14c..ea2df044cf 100644 --- a/packages/bpk-component-price/src/BpkPrice.module.scss +++ b/packages/bpk-component-price/src/BpkPrice.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-price { display: flex; diff --git a/packages/bpk-component-progress/src/BpkProgress.module.scss b/packages/bpk-component-progress/src/BpkProgress.module.scss index c9913581d9..c332721364 100644 --- a/packages/bpk-component-progress/src/BpkProgress.module.scss +++ b/packages/bpk-component-progress/src/BpkProgress.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-progress { position: relative; diff --git a/packages/bpk-component-radio/src/BpkRadio.module.scss b/packages/bpk-component-radio/src/BpkRadio.module.scss index 2271c77adf..7e24635e8f 100644 --- a/packages/bpk-component-radio/src/BpkRadio.module.scss +++ b/packages/bpk-component-radio/src/BpkRadio.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $bpk-radio-circle-size: $bpk-one-pixel-rem * 8; $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4); diff --git a/packages/bpk-component-rating/src/BpkRating.module.scss b/packages/bpk-component-rating/src/BpkRating.module.scss index 1696ed8058..1ecd4812be 100644 --- a/packages/bpk-component-rating/src/BpkRating.module.scss +++ b/packages/bpk-component-rating/src/BpkRating.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-rating { display: flex; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.scss b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.scss index daee7591b4..0ade39083e 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.scss +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-scrollable-calendar-grid { width: 100%; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.scss b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.scss index 579f03618c..64d4f9bdf4 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.scss +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $calendar-height: 7 * ($bpk-calendar-day-size + bpk-spacing-lg()); diff --git a/packages/bpk-component-section-header/src/BpkSectionHeader.module.scss b/packages/bpk-component-section-header/src/BpkSectionHeader.module.scss index 8c77d8a315..f4ef8314ac 100644 --- a/packages/bpk-component-section-header/src/BpkSectionHeader.module.scss +++ b/packages/bpk-component-section-header/src/BpkSectionHeader.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-section-header { display: flex; diff --git a/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss b/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss index fc060bac19..d89580dcef 100644 --- a/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss +++ b/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-section-list-item { $root: &; diff --git a/packages/bpk-component-section-list/src/BpkSectionListSection.module.scss b/packages/bpk-component-section-list/src/BpkSectionListSection.module.scss index 6d3d38ee0e..5255f27210 100644 --- a/packages/bpk-component-section-list/src/BpkSectionListSection.module.scss +++ b/packages/bpk-component-section-list/src/BpkSectionListSection.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-section-list-section { margin: 0; diff --git a/packages/bpk-component-select/src/BpkSelect.module.scss b/packages/bpk-component-select/src/BpkSelect.module.scss index 7ec40bb235..30cbbeac53 100644 --- a/packages/bpk-component-select/src/BpkSelect.module.scss +++ b/packages/bpk-component-select/src/BpkSelect.module.scss @@ -19,7 +19,7 @@ // Use of stylelint-disable-next-line declaration-no-important in this file is to ensure that // the correct styles are applied for Internet Explorer 11 and are not overriden by system styles. -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-select { @include bpk-select; diff --git a/packages/bpk-component-skip-link/src/BpkSkipLink.module.scss b/packages/bpk-component-skip-link/src/BpkSkipLink.module.scss index 7425c2660e..f882e84a0f 100644 --- a/packages/bpk-component-skip-link/src/BpkSkipLink.module.scss +++ b/packages/bpk-component-skip-link/src/BpkSkipLink.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-skip-link { padding: (12 * $bpk-one-pixel-rem) bpk-spacing-base(); diff --git a/packages/bpk-component-slider/src/BpkSlider.module.scss b/packages/bpk-component-slider/src/BpkSlider.module.scss index 2c712aeeb0..ba19f7dec6 100644 --- a/packages/bpk-component-slider/src/BpkSlider.module.scss +++ b/packages/bpk-component-slider/src/BpkSlider.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $slider-handle-size: bpk-spacing-base() + bpk-spacing-sm(); $slider-handle-touch-size: bpk-spacing-xxl(); diff --git a/packages/bpk-component-spinner/src/BpkSpinner.module.scss b/packages/bpk-component-spinner/src/BpkSpinner.module.scss index b5121188d3..08cfb181c5 100644 --- a/packages/bpk-component-spinner/src/BpkSpinner.module.scss +++ b/packages/bpk-component-spinner/src/BpkSpinner.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-spinner { @include bpk-spinner; diff --git a/packages/bpk-component-split-input/src/BpkInputField.module.scss b/packages/bpk-component-split-input/src/BpkInputField.module.scss index 02bb9a4879..67de1b9310 100644 --- a/packages/bpk-component-split-input/src/BpkInputField.module.scss +++ b/packages/bpk-component-split-input/src/BpkInputField.module.scss @@ -18,7 +18,7 @@ /* stylelint-disable */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-input-field { @@ -26,12 +26,12 @@ max-width: 3*bpk-spacing-xxl(); margin-right: bpk-spacing-sm(); align-items: center; - + input { text-align: center; } } - + .bpk-input-field:last-child { margin-right: $bpk-spacing-none; } diff --git a/packages/bpk-component-split-input/src/BpkSplitInput.module.scss b/packages/bpk-component-split-input/src/BpkSplitInput.module.scss index 9fedcfa6cc..83b4415ee9 100644 --- a/packages/bpk-component-split-input/src/BpkSplitInput.module.scss +++ b/packages/bpk-component-split-input/src/BpkSplitInput.module.scss @@ -18,7 +18,7 @@ /* stylelint-disable */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-split-input { diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStar.module.scss b/packages/bpk-component-star-rating/src/BpkInteractiveStar.module.scss index 58739b0fa5..af090c3ab3 100644 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStar.module.scss +++ b/packages/bpk-component-star-rating/src/BpkInteractiveStar.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @keyframes star-dust { 0% { diff --git a/packages/bpk-component-star-rating/src/BpkStar.module.scss b/packages/bpk-component-star-rating/src/BpkStar.module.scss index ffd54e7ea5..b978a87e61 100644 --- a/packages/bpk-component-star-rating/src/BpkStar.module.scss +++ b/packages/bpk-component-star-rating/src/BpkStar.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @mixin large-star { width: $bpk-icon-size-lg; diff --git a/packages/bpk-component-switch/src/BpkSwitch.module.scss b/packages/bpk-component-switch/src/BpkSwitch.module.scss index 99f0c6875b..a0c0eaffdd 100644 --- a/packages/bpk-component-switch/src/BpkSwitch.module.scss +++ b/packages/bpk-component-switch/src/BpkSwitch.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $height: bpk-spacing-xl(); $width: bpk-spacing-sm() * 13; diff --git a/packages/bpk-component-table/src/BpkTable.module.scss b/packages/bpk-component-table/src/BpkTable.module.scss index e48be7af52..3385d31a91 100644 --- a/packages/bpk-component-table/src/BpkTable.module.scss +++ b/packages/bpk-component-table/src/BpkTable.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-table { @include bpk-table; diff --git a/packages/bpk-component-text/src/BpkText.module.scss b/packages/bpk-component-text/src/BpkText.module.scss index 0776a8e503..4c7147dc8e 100644 --- a/packages/bpk-component-text/src/BpkText.module.scss +++ b/packages/bpk-component-text/src/BpkText.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-text { @include bpk-text; diff --git a/packages/bpk-component-textarea/src/BpkTextarea.module.scss b/packages/bpk-component-textarea/src/BpkTextarea.module.scss index e768765345..d29a8dfa02 100644 --- a/packages/bpk-component-textarea/src/BpkTextarea.module.scss +++ b/packages/bpk-component-textarea/src/BpkTextarea.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-textarea { @include bpk-textarea; diff --git a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.module.scss b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.module.scss index 6eb685a7ad..ef4650b30f 100644 --- a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.module.scss +++ b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-theme-toggle { &__label { diff --git a/packages/bpk-component-ticket/src/BpkTicket.module.scss b/packages/bpk-component-ticket/src/BpkTicket.module.scss index 271b7b09e6..b81230c010 100644 --- a/packages/bpk-component-ticket/src/BpkTicket.module.scss +++ b/packages/bpk-component-ticket/src/BpkTicket.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; @mixin hidden-box-shadow-after { z-index: 0; diff --git a/packages/bpk-component-tooltip/src/BpkTooltip.module.scss b/packages/bpk-component-tooltip/src/BpkTooltip.module.scss index b4784f0ec4..ad6f9eda2a 100644 --- a/packages/bpk-component-tooltip/src/BpkTooltip.module.scss +++ b/packages/bpk-component-tooltip/src/BpkTooltip.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; $arrow-size: bpk-spacing-md(); $arrow-inset-margin: -($bpk-one-pixel-rem * 3); diff --git a/packages/bpk-scrim-utils/src/bpk-scrim-content.module.scss b/packages/bpk-scrim-utils/src/bpk-scrim-content.module.scss index 69c82a2aa5..e89b641486 100644 --- a/packages/bpk-scrim-utils/src/bpk-scrim-content.module.scss +++ b/packages/bpk-scrim-utils/src/bpk-scrim-content.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-scrim-content { position: fixed; diff --git a/packages/bpk-scrim-utils/src/bpk-scrim.module.scss b/packages/bpk-scrim-utils/src/bpk-scrim.module.scss index 5067ebb29d..220f21f805 100644 --- a/packages/bpk-scrim-utils/src/bpk-scrim.module.scss +++ b/packages/bpk-scrim-utils/src/bpk-scrim.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@import '../../bpk-mixins-next'; .bpk-scrim { position: fixed; diff --git a/packages/bpk-stylesheets/index.scss b/packages/bpk-stylesheets/index.scss index 300ebb819f..67b202e928 100644 --- a/packages/bpk-stylesheets/index.scss +++ b/packages/bpk-stylesheets/index.scss @@ -17,7 +17,7 @@ */ @import '~normalize.css'; -@import '../bpk-mixins/index.scss'; +@import '../bpk-mixins-next'; // stylelint-disable-next-line selector-max-type html { From a851513bfd645585d16dcefe6b47d716f3350591 Mon Sep 17 00:00:00 2001 From: Aleksandr Sannikov Date: Thu, 30 Nov 2023 16:27:51 +0000 Subject: [PATCH 06/33] [NOJIRA]: apply sass-migrator to examples --- .../examples.module.scss | 2 +- .../BpkBadgeLayout.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../BpkButtonStory.module.scss | 2 +- .../bpk-component-card/examples.module.scss | 2 +- .../bpk-component-chip/examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../bpk-component-dialog/examples.module.scss | 2 +- .../bpk-component-drawer/examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../bpk-component-flare/examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../bpk-component-input/examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../bpk-component-modal/examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../BpkNudgerStory.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../bpk-component-rating/examples.module.scss | 2 +- .../examples.module.scss | 2 +- .../SpinnerLayout.module.scss | 2 +- .../bpk-component-ticket/examples.module.scss | 2 +- examples/bpk-scrim-utils/examples.scss | 2 +- .../src/BpkDarkExampleWrapper.module.scss | 2 +- package.json | 5 +- .../src/BpkAccordion.module.scss | 4 +- .../src/BpkAccordionItem.module.scss | 28 ++--- .../src/BpkAriaLive.module.scss | 4 +- .../src/BpkAutosuggest.module.scss | 57 ++++----- .../src/BpkBadge.module.scss | 26 ++-- .../src/BpkAnimateAndFade.module.scss | 14 +-- .../src/BpkBannerAlert.module.scss | 90 +++++++------ .../src/BpkBarchartBar.module.scss | 20 +-- .../src/BpkChartAxis.module.scss | 14 +-- .../src/BpkChartDataTable.module.scss | 6 +- .../src/BpkChartGridLines.module.scss | 4 +- .../src/BpkBlockquote.module.scss | 6 +- .../src/BpkBoilerplate.module.scss | 2 +- .../src/BpkBreadcrumb.module.scss | 2 +- .../src/BpkBreadcrumbItem.module.scss | 10 +- .../src/BpkButtonBase.module.scss | 14 +-- .../src/BpkButtonDestructive.module.scss | 6 +- .../src/BpkButtonFeatured.module.scss | 4 +- .../src/BpkButtonLink.module.scss | 4 +- .../src/BpkButtonLinkOnDark.module.scss | 4 +- .../src/BpkButtonPrimaryOnDark.module.scss | 4 +- .../src/BpkButtonPrimaryOnLight.module.scss | 4 +- .../src/BpkButtonSecondary.module.scss | 4 +- .../src/BpkButtonSecondaryOnDark.module.scss | 4 +- .../src/BpkButtonV2/BpkButton.module.scss | 32 ++--- .../src/BpkCalendar.module.scss | 12 +- .../src/BpkCalendarDate.module.scss | 63 +++++----- .../src/BpkCalendarGrid.module.scss | 30 ++--- .../src/BpkCalendarGridHeader.module.scss | 16 +-- .../src/BpkCalendarGridTransition.module.scss | 12 +- .../src/BpkCalendarNav.module.scss | 30 ++--- .../src/_variables.scss | 7 +- .../src/BpkSaveButton.module.scss | 54 ++++---- .../src/BpkCard.module.scss | 6 +- .../src/BpkCardWrapper.module.scss | 22 ++-- .../src/BpkDividedCard.module.scss | 20 +-- .../src/BpkCheckbox.module.scss | 34 ++--- .../src/BpkSelectableChip.module.scss | 4 +- .../src/BpkCloseButton.module.scss | 18 +-- .../src/BpkCode.module.scss | 6 +- .../src/BpkCodeBlock.module.scss | 8 +- .../src/BpkContentCard.module.scss | 42 ++++--- .../src/BpkContentCards.module.scss | 18 +-- .../src/BpkDataTable.module.scss | 32 ++--- .../src/BpkDataTableHeader.module.scss | 20 +-- .../src/BpkDatepicker.module.scss | 2 +- .../src/BpkDescriptionList.module.scss | 10 +- .../src/BpkDialog.module.scss | 29 ++--- .../src/BpkDialogInner.module.scss | 28 ++--- .../src/BpkDrawer.module.scss | 2 +- .../src/BpkDrawerContent.module.scss | 38 +++--- .../src/BpkFieldset.module.scss | 10 +- .../src/bpk-content-bubble.module.scss | 7 +- .../src/bpk-flare-bar.module.scss | 26 ++-- .../src/BpkFloatingNotification.module.scss | 40 +++--- .../src/BpkFormValidation.module.scss | 16 +-- .../src/BpkGraphicPromo.module.scss | 118 +++++++++--------- .../src/BpkGridToggle.module.scss | 8 +- .../src/BpkHorizontalNav.module.scss | 6 +- .../src/BpkHorizontalNavItem.module.scss | 77 ++++++------ .../src/BpkIcon.module.scss | 8 +- .../src/withDescription.module.scss | 4 +- .../src/BpkBackgroundImage.module.scss | 12 +- .../src/BpkImage.module.scss | 14 +-- .../src/withInfiniteScroll.module.scss | 4 +- .../src/BpkAnimateAndFade.module.scss | 14 +-- .../src/BpkInfoBanner.module.scss | 38 +++--- .../src/BpkClearButton.module.scss | 10 +- .../src/BpkInput.module.scss | 26 ++-- .../src/BpkLabel.module.scss | 16 +-- .../src/BpkLink.module.scss | 8 +- .../src/BpkList.module.scss | 8 +- .../src/BpkLoadingButton.module.scss | 15 +-- .../src/BpkIconMarker.module.scss | 27 ++-- .../src/BpkIconMarkerBackground.module.scss | 16 +-- .../src/BpkPriceMarker.module.scss | 73 +++++------ .../BpkPriceMarker.module.scss | 30 ++--- .../src/DefaultLoadingElement.module.scss | 4 +- .../src/BpkMobileScrollContainer.module.scss | 6 +- .../src/BpkModal.module.scss | 6 +- .../src/BpkModalInner.module.scss | 48 +++---- .../src/BpkModalV2/BpKModal.module.scss | 49 ++++---- .../src/BpkNavigationBar.module.scss | 32 ++--- .../BpkNavigationBarButtonLink.module.scss | 20 +-- .../BpkNavigationBarIconButton.module.scss | 16 +-- .../src/BpkNudger.module.scss | 18 +-- .../src/BpkOverlay.module.scss | 60 ++++----- .../src/BpkPageIndicator.module.scss | 18 +-- .../src/BpkPaginationList.module.scss | 10 +- .../src/BpkPaginationNudger.module.scss | 10 +- .../src/BpkPaginationPage.module.scss | 34 ++--- .../src/BpkPanel.module.scss | 8 +- .../src/BpkPhoneInput.module.scss | 10 +- .../src/BpkPopover.module.scss | 58 ++++----- .../src/BpkPrice.module.scss | 16 +-- .../src/BpkProgress.module.scss | 24 ++-- .../src/BpkRadio.module.scss | 32 ++--- .../src/BpkRating.module.scss | 22 ++-- .../src/BpkScrollableCalendarGrid.module.scss | 4 +- .../BpkScrollableCalendarGridList.module.scss | 5 +- .../src/BpkSectionHeader.module.scss | 12 +- .../src/BpkSectionListItem.module.scss | 18 +-- .../src/BpkSectionListSection.module.scss | 8 +- .../src/BpkSelect.module.scss | 68 +++++----- .../src/BpkSkipLink.module.scss | 18 +-- .../src/BpkSlider.module.scss | 30 ++--- .../src/BpkSpinner.module.scss | 20 +-- .../src/BpkInputField.module.scss | 8 +- .../src/BpkSplitInput.module.scss | 8 +- .../src/BpkInteractiveStar.module.scss | 6 +- .../src/BpkStar.module.scss | 16 +-- .../src/BpkSwitch.module.scss | 34 ++--- .../src/BpkTable.module.scss | 8 +- .../src/BpkText.module.scss | 58 ++++----- .../src/BpkTextarea.module.scss | 8 +- .../src/BpkThemeToggle.module.scss | 4 +- .../src/BpkTicket.module.scss | 47 ++++--- .../src/BpkTooltip.module.scss | 35 +++--- .../src/bpk-scrim-content.module.scss | 4 +- .../bpk-scrim-utils/src/bpk-scrim.module.scss | 10 +- packages/bpk-stylesheets/index.scss | 2 +- 155 files changed, 1303 insertions(+), 1261 deletions(-) diff --git a/examples/bpk-component-aria-live/examples.module.scss b/examples/bpk-component-aria-live/examples.module.scss index d98d05fa7d..06bdcae76e 100644 --- a/examples/bpk-component-aria-live/examples.module.scss +++ b/examples/bpk-component-aria-live/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-storybook-aria-live-demo { padding: bpk-spacing-base(); diff --git a/examples/bpk-component-badge/BpkBadgeLayout.module.scss b/examples/bpk-component-badge/BpkBadgeLayout.module.scss index f83a8858c0..f5399144dd 100644 --- a/examples/bpk-component-badge/BpkBadgeLayout.module.scss +++ b/examples/bpk-component-badge/BpkBadgeLayout.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-badge-layout { &__container { diff --git a/examples/bpk-component-banner-alert/examples.module.scss b/examples/bpk-component-banner-alert/examples.module.scss index 3da92657a6..704b843cf7 100644 --- a/examples/bpk-component-banner-alert/examples.module.scss +++ b/examples/bpk-component-banner-alert/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-banner-alert-examples { &__component { diff --git a/examples/bpk-component-barchart/examples.module.scss b/examples/bpk-component-barchart/examples.module.scss index 944039e51e..8c6e05de80 100644 --- a/examples/bpk-component-barchart/examples.module.scss +++ b/examples/bpk-component-barchart/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-heading { margin-bottom: bpk-spacing-base(); diff --git a/examples/bpk-component-breakpoint/examples.module.scss b/examples/bpk-component-breakpoint/examples.module.scss index 7c468567cd..2e80edcf05 100644 --- a/examples/bpk-component-breakpoint/examples.module.scss +++ b/examples/bpk-component-breakpoint/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-breakpoints-demo { border-radius: $bpk-border-radius-xs; diff --git a/examples/bpk-component-button/BpkButtonStory.module.scss b/examples/bpk-component-button/BpkButtonStory.module.scss index cb0550943b..f12a446305 100644 --- a/examples/bpk-component-button/BpkButtonStory.module.scss +++ b/examples/bpk-component-button/BpkButtonStory.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-button-story-wrapper { padding: bpk-spacing-sm() 0; diff --git a/examples/bpk-component-card/examples.module.scss b/examples/bpk-component-card/examples.module.scss index 62023e9be4..e47ed60e04 100644 --- a/examples/bpk-component-card/examples.module.scss +++ b/examples/bpk-component-card/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-card-examples { &__header { diff --git a/examples/bpk-component-chip/examples.module.scss b/examples/bpk-component-chip/examples.module.scss index ada428d96c..1f7682cbf9 100644 --- a/examples/bpk-component-chip/examples.module.scss +++ b/examples/bpk-component-chip/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-chip-examples { &__container { diff --git a/examples/bpk-component-datepicker/examples.module.scss b/examples/bpk-component-datepicker/examples.module.scss index 016d1473b4..fb8fc6a821 100644 --- a/examples/bpk-component-datepicker/examples.module.scss +++ b/examples/bpk-component-datepicker/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-datepicker { &__container { diff --git a/examples/bpk-component-dialog/examples.module.scss b/examples/bpk-component-dialog/examples.module.scss index 34ec6721ab..b8e88b3ecc 100644 --- a/examples/bpk-component-dialog/examples.module.scss +++ b/examples/bpk-component-dialog/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-dialog-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-drawer/examples.module.scss b/examples/bpk-component-drawer/examples.module.scss index 3230f25f65..bc945c7850 100644 --- a/examples/bpk-component-drawer/examples.module.scss +++ b/examples/bpk-component-drawer/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-drawer-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-fieldset/examples.module.scss b/examples/bpk-component-fieldset/examples.module.scss index de00ddfc9f..f753dc68a8 100644 --- a/examples/bpk-component-fieldset/examples.module.scss +++ b/examples/bpk-component-fieldset/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-fieldsets { &__container { diff --git a/examples/bpk-component-flare/examples.module.scss b/examples/bpk-component-flare/examples.module.scss index f5336b3ee4..faad5cbfee 100644 --- a/examples/bpk-component-flare/examples.module.scss +++ b/examples/bpk-component-flare/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-flare-stories { padding: bpk-spacing-xl(); diff --git a/examples/bpk-component-form-validation/examples.module.scss b/examples/bpk-component-form-validation/examples.module.scss index 49fb8dfb8b..980bc4c625 100644 --- a/examples/bpk-component-form-validation/examples.module.scss +++ b/examples/bpk-component-form-validation/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpkdocs-forms-page { &__viewport-alert { diff --git a/examples/bpk-component-horizontal-nav/examples.module.scss b/examples/bpk-component-horizontal-nav/examples.module.scss index f5ea172f39..d0b66b038b 100644 --- a/examples/bpk-component-horizontal-nav/examples.module.scss +++ b/examples/bpk-component-horizontal-nav/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; $custom-color: $bpk-status-success-fill-day; diff --git a/examples/bpk-component-infinite-scroll/examples.module.scss b/examples/bpk-component-infinite-scroll/examples.module.scss index b63d6b1492..621fbd5287 100644 --- a/examples/bpk-component-infinite-scroll/examples.module.scss +++ b/examples/bpk-component-infinite-scroll/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-infinite-scroll-stories { &__fixed-panel { diff --git a/examples/bpk-component-info-banner/examples.module.scss b/examples/bpk-component-info-banner/examples.module.scss index 7f893a21d0..5c406c285a 100644 --- a/examples/bpk-component-info-banner/examples.module.scss +++ b/examples/bpk-component-info-banner/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-info-banner-examples { &__component { diff --git a/examples/bpk-component-input/examples.module.scss b/examples/bpk-component-input/examples.module.scss index 1b7f277fd2..becfa36442 100644 --- a/examples/bpk-component-input/examples.module.scss +++ b/examples/bpk-component-input/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-forms { &__viewport-alert { diff --git a/examples/bpk-component-loading-button/examples.module.scss b/examples/bpk-component-loading-button/examples.module.scss index 96ffc9542f..8f90874e18 100644 --- a/examples/bpk-component-loading-button/examples.module.scss +++ b/examples/bpk-component-loading-button/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-loading-button-example-wrapper { padding: bpk-spacing-sm() 0; diff --git a/examples/bpk-component-mobile-scroll-container/examples.module.scss b/examples/bpk-component-mobile-scroll-container/examples.module.scss index e9872033a1..0c1202f61a 100644 --- a/examples/bpk-component-mobile-scroll-container/examples.module.scss +++ b/examples/bpk-component-mobile-scroll-container/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-stories-mobile-scroll-container { &__leading-indicator { diff --git a/examples/bpk-component-modal-v2/examples.module.scss b/examples/bpk-component-modal-v2/examples.module.scss index 34ec6721ab..b8e88b3ecc 100644 --- a/examples/bpk-component-modal-v2/examples.module.scss +++ b/examples/bpk-component-modal-v2/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-dialog-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-modal/examples.module.scss b/examples/bpk-component-modal/examples.module.scss index 7c2600587f..c022ad3451 100644 --- a/examples/bpk-component-modal/examples.module.scss +++ b/examples/bpk-component-modal/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-modal-paragraph { margin-bottom: bpk-spacing-md(); diff --git a/examples/bpk-component-navigation-bar/examples.module.scss b/examples/bpk-component-navigation-bar/examples.module.scss index 381d532f47..d96e24c588 100644 --- a/examples/bpk-component-navigation-bar/examples.module.scss +++ b/examples/bpk-component-navigation-bar/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-navigation-bar-story { padding: $bpk-one-pixel-rem $bpk-one-pixel-rem bpk-spacing-xxl() * 2; diff --git a/examples/bpk-component-nudger/BpkNudgerStory.module.scss b/examples/bpk-component-nudger/BpkNudgerStory.module.scss index b54c59f21a..171d12f2b1 100644 --- a/examples/bpk-component-nudger/BpkNudgerStory.module.scss +++ b/examples/bpk-component-nudger/BpkNudgerStory.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-nudger-secondary-on-dark { color: $bpk-text-on-dark-day; diff --git a/examples/bpk-component-overlay/examples.module.scss b/examples/bpk-component-overlay/examples.module.scss index 507b4870e5..43c0696c6d 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-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-overlay-stories { display: flex; diff --git a/examples/bpk-component-page-indicator/examples.module.scss b/examples/bpk-component-page-indicator/examples.module.scss index ed63a24223..2581678d85 100644 --- a/examples/bpk-component-page-indicator/examples.module.scss +++ b/examples/bpk-component-page-indicator/examples.module.scss @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-page-indicator-examples { &__container { diff --git a/examples/bpk-component-popover/examples.module.scss b/examples/bpk-component-popover/examples.module.scss index c94559ea76..d5db993aac 100644 --- a/examples/bpk-component-popover/examples.module.scss +++ b/examples/bpk-component-popover/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-popover-paragraph { margin-bottom: bpk-spacing-sm(); diff --git a/examples/bpk-component-rating/examples.module.scss b/examples/bpk-component-rating/examples.module.scss index 846c478283..ebd23503e8 100644 --- a/examples/bpk-component-rating/examples.module.scss +++ b/examples/bpk-component-rating/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-rating-story { &--img { diff --git a/examples/bpk-component-section-header/examples.module.scss b/examples/bpk-component-section-header/examples.module.scss index d297254381..4867b1d174 100644 --- a/examples/bpk-component-section-header/examples.module.scss +++ b/examples/bpk-component-section-header/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-section-header-examples { &__on-dark { diff --git a/examples/bpk-component-spinner/SpinnerLayout.module.scss b/examples/bpk-component-spinner/SpinnerLayout.module.scss index afd59f8ad9..9e687082c7 100644 --- a/examples/bpk-component-spinner/SpinnerLayout.module.scss +++ b/examples/bpk-component-spinner/SpinnerLayout.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-spinner-layout { display: flex; diff --git a/examples/bpk-component-ticket/examples.module.scss b/examples/bpk-component-ticket/examples.module.scss index 2dfc756678..9c219234a0 100644 --- a/examples/bpk-component-ticket/examples.module.scss +++ b/examples/bpk-component-ticket/examples.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-stories-flight { margin-bottom: 2rem; diff --git a/examples/bpk-scrim-utils/examples.scss b/examples/bpk-scrim-utils/examples.scss index 99d9b43350..6fe8cd0bed 100644 --- a/examples/bpk-scrim-utils/examples.scss +++ b/examples/bpk-scrim-utils/examples.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins-next'; +@use '../../packages/bpk-mixins-next' as *; .bpk-scrim-utils-example { &__dialog { diff --git a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss index 531e3d4d2f..ef21e18502 100644 --- a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss +++ b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../../packages/bpk-mixins-next'; +@use '../../../packages/bpk-mixins-next' as *; .bpk-dark-example-wrapper { @include bpk-border-radius-sm; diff --git a/package.json b/package.json index 39ed9486d6..30d3e54b9e 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,11 @@ "registry": "https://registry.npmjs.org/" }, "scripts": { - "build": "gulp && npm run build:sass && npm run build:stylesheets", + "build": "run-s build:*", + "build:gulp": "gulp", + "build:mixins-v2": "./scripts/scss/generate-v2.sh", "build:sass": "node scripts/scss/styles-prod.js && rm packages/bpk-stylesheets/index.css", "build:stylesheets": "(cd packages/bpk-stylesheets && node build)", - "build:mixins-v2": "./scripts/scss/generate-v2.sh", "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", diff --git a/packages/bpk-component-accordion/src/BpkAccordion.module.scss b/packages/bpk-component-accordion/src/BpkAccordion.module.scss index fcb1b45aa1..89a36d4c44 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-accordion { margin: 0; &--on-dark { - color: $bpk-text-on-dark-day; + color: mixins.$bpk-text-on-dark-day; } } diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss index e7ba81568f..ef868ee412 100644 --- a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss +++ b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss @@ -16,17 +16,17 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-accordion { &__title { height: auto; &--collapsed { - @include bpk-border-bottom-sm($bpk-line-day); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-day); &-on-dark { - @include bpk-border-bottom-sm($bpk-line-on-dark-day); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-on-dark-day); } } } @@ -36,12 +36,12 @@ padding: 0; border: 0; background-color: transparent; - color: $bpk-text-primary-day; + color: mixins.$bpk-text-primary-day; text-align: left; cursor: pointer; appearance: none; - @include bpk-rtl { + @include mixins.bpk-rtl { text-align: right; } } @@ -49,7 +49,7 @@ &__flex-container { display: inline-flex; width: 100%; - margin: (bpk-spacing-base()) 0; + margin: mixins.bpk-spacing-base() 0; flex-direction: row; } @@ -58,7 +58,7 @@ flex-grow: 1; &--on-dark { - color: $bpk-canvas-day; + color: mixins.$bpk-canvas-day; } } @@ -67,18 +67,18 @@ } &__leading-icon { - @include bpk-margin-trailing(bpk-spacing-md(), true); + @include mixins.bpk-margin-trailing(mixins.bpk-spacing-md(), true); } &__item-expand-icon { - fill: $bpk-text-primary-day; + fill: mixins.$bpk-text-primary-day; &--flipped { transform: scaleY(-1); } &--on-dark { - fill: $bpk-canvas-day; + fill: mixins.$bpk-canvas-day; } } @@ -86,14 +86,14 @@ margin: 0; &--expanded { - padding-bottom: bpk-spacing-base(); + padding-bottom: mixins.bpk-spacing-base(); - @include bpk-border-bottom-sm($bpk-line-day); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-day); &-on-dark { - padding-bottom: bpk-spacing-base(); + padding-bottom: mixins.bpk-spacing-base(); - @include bpk-border-bottom-sm($bpk-line-on-dark-day); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-on-dark-day); } } } diff --git a/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss b/packages/bpk-component-aria-live/src/BpkAriaLive.module.scss index 4d69e31e49..083e8c6177 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-aria-live { &--invisible { - @include bpk-visually-hidden; + @include mixins.bpk-visually-hidden; } } diff --git a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss b/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss index 107c6c07be..24a8ec6245 100644 --- a/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss +++ b/packages/bpk-component-autosuggest/src/BpkAutosuggest.module.scss @@ -16,9 +16,9 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; -$arrow-size: bpk-spacing-sm() * 3; +$arrow-size: mixins.bpk-spacing-sm() * 3; .bpk-autosuggest { &__container--open { @@ -32,9 +32,9 @@ $arrow-size: bpk-spacing-sm() * 3; position: absolute; top: 100%; display: block; - z-index: $bpk-zindex-autosuggest; + z-index: mixins.$bpk-zindex-autosuggest; width: 100%; - margin-top: bpk-spacing-md() + bpk-spacing-sm(); + margin-top: mixins.bpk-spacing-md() + mixins.bpk-spacing-sm(); &::before { position: absolute; @@ -42,10 +42,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 * (mixins.$bpk-one-pixel-rem); + margin-left: -1 * + ((mixins.bpk-spacing-sm() * 3) + mixins.$bpk-one-pixel-rem); + border: ($arrow-size + mixins.$bpk-one-pixel-rem) solid transparent; + border-bottom-color: mixins.$bpk-surface-highlight-day; pointer-events: none; } @@ -55,10 +56,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 * (mixins.$bpk-one-pixel-rem); + margin-left: -1 * (mixins.bpk-spacing-md() + mixins.bpk-spacing-sm()); border: $arrow-size solid transparent; - border-bottom-color: $bpk-surface-default-day; + border-bottom-color: mixins.$bpk-surface-default-day; pointer-events: none; } } @@ -71,46 +72,46 @@ $arrow-size: bpk-spacing-sm() * 3; list-style: none; overflow: hidden; - @include bpk-layer; + @include mixins.bpk-layer; } &__suggestion-item { cursor: pointer; - @include bpk-text; - @include bpk-body-default; + @include mixins.bpk-text; + @include mixins.bpk-body-default; &:not(:last-child) { - @include bpk-border-bottom-sm($bpk-line-day); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-day); } &:active { - background-color: $bpk-canvas-contrast-day; + background-color: mixins.$bpk-canvas-contrast-day; } &--highlighted { - background-color: $bpk-canvas-contrast-day; + background-color: mixins.$bpk-canvas-contrast-day; } } &__suggestion { display: table; width: 100%; - padding: bpk-spacing-base(); + padding: mixins.bpk-spacing-base(); &--indent { - padding-left: bpk-spacing-xl(); + padding-left: mixins.bpk-spacing-xl(); } &-icon { display: table-cell; - margin-right: bpk-spacing-md(); + margin-right: mixins.bpk-spacing-md(); vertical-align: top; - fill: $bpk-text-secondary-day; + fill: mixins.$bpk-text-secondary-day; - @include bpk-rtl { + @include mixins.bpk-rtl { margin-right: 0; - margin-left: bpk-spacing-md(); + margin-left: mixins.bpk-spacing-md(); } } @@ -137,19 +138,19 @@ $arrow-size: bpk-spacing-sm() * 3; width: 100%; vertical-align: top; - @include bpk-text; - @include bpk-caption; + @include mixins.bpk-text; + @include mixins.bpk-caption; } &-tertiary-label { display: table-cell; align-self: center; - color: $bpk-text-secondary-day; + color: mixins.$bpk-text-secondary-day; vertical-align: top; word-break: keep-all; - @include bpk-text; - @include bpk-caption; + @include mixins.bpk-text; + @include mixins.bpk-caption; } } } diff --git a/packages/bpk-component-badge/src/BpkBadge.module.scss b/packages/bpk-component-badge/src/BpkBadge.module.scss index e76ab8b61a..18a1d7ce38 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-badge { - @include bpk-badge; + @include mixins.bpk-badge; &--centered { - @include bpk-badge--centered; + @include mixins.bpk-badge--centered; } &--docked-right { - @include bpk-badge--docked-right; + @include mixins.bpk-badge--docked-right; } &--docked-left { - @include bpk-badge--docked-left; + @include mixins.bpk-badge--docked-left; } &--warning { - @include bpk-badge--warning; + @include mixins.bpk-badge--warning; } &--success { - @include bpk-badge--success; + @include mixins.bpk-badge--success; } &--critical { - @include bpk-badge--critical; + @include mixins.bpk-badge--critical; } &--normal { - @include bpk-badge--normal; + @include mixins.bpk-badge--normal; } &--inverse { - @include bpk-badge--inverse; + @include mixins.bpk-badge--inverse; } &--outline { - @include bpk-badge--outline; + @include mixins.bpk-badge--outline; } &--strong { - @include bpk-badge--strong; + @include mixins.bpk-badge--strong; } &--brand { - @include bpk-badge--brand; + @include mixins.bpk-badge--brand; } } diff --git a/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss b/packages/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss index 3610d273ff..21550568e4 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-animate-and-fade { $invisible: 0.01; &--enter { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: mixins.$bpk-duration-sm; } &--enter-active { @@ -32,19 +32,19 @@ } &--leave { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: 1; } &--leave-active { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: $invisible; } &--appear { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: mixins.$bpk-duration-sm; } &--appear-active { diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss b/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss index 070d5b5f00..37cc936d7e 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlert.module.scss @@ -16,61 +16,70 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-banner-alert { - background-color: $bpk-surface-default-day; + background-color: mixins.$bpk-surface-default-day; overflow: hidden; - @include bpk-border-radius-sm; + @include mixins.bpk-border-radius-sm; &--primary { - @include bpk-border-sm( - var(--bpk-banner-alert-primary-color, $bpk-banner-alert-primary-color), - '' - ); - } + @include mixins.bpk-border-sm( + var( + --bpk-banner-alert-primary-color, + mixins.$bpk-banner-alert-primary-color + ), + '' + ); + } &--success { - @include bpk-border-sm( - var(--bpk-banner-alert-success-color, $bpk-banner-alert-success-color), - '' - ); - } + @include mixins.bpk-border-sm( + var( + --bpk-banner-alert-success-color, + mixins.$bpk-banner-alert-success-color + ), + '' + ); + } &--warn { - @include bpk-border-sm( - var(--bpk-banner-alert-warn-color, $bpk-banner-alert-warn-color), + @include mixins.bpk-border-sm( + var(--bpk-banner-alert-warn-color, mixins.$bpk-banner-alert-warn-color), '' ); } &--error { - @include bpk-border-sm( - var(--bpk-banner-alert-error-color, $bpk-banner-alert-error-color), - '' - ); - } + @include mixins.bpk-border-sm( + var( + --bpk-banner-alert-error-color, + mixins.$bpk-banner-alert-error-color + ), + '' + ); + } &--neutral { - @include bpk-border-sm($bpk-banner-alert-neutral-color, ''); + @include mixins.bpk-border-sm(mixins.$bpk-banner-alert-neutral-color, ''); } &__header { display: flex; - padding: bpk-spacing-md(); + padding: mixins.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 mixins.bpk-hover { + background-color: mixins.$bpk-banner-alert-header-expandable-hover-background-color; } &:active { - background-color: $bpk-banner-alert-header-expandable-active-background-color; + background-color: mixins.$bpk-banner-alert-header-expandable-active-background-color; } } } @@ -83,44 +92,44 @@ } &__message { - padding: 0 bpk-spacing-md(); + padding: 0 mixins.bpk-spacing-md(); flex-grow: 1; } &__primary-icon { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-banner-alert-primary-color, - $bpk-banner-alert-primary-color + mixins.$bpk-banner-alert-primary-color ); } &__success-icon { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-banner-alert-success-color, - $bpk-banner-alert-success-color + mixins.$bpk-banner-alert-success-color ); } &__warn-icon { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-banner-alert-warn-color, - $bpk-banner-alert-warn-color + mixins.$bpk-banner-alert-warn-color ); } &__error-icon { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-banner-alert-error-color, - $bpk-banner-alert-error-color + mixins.$bpk-banner-alert-error-color ); } &__neutral-icon { - fill: $bpk-text-secondary-day; + fill: mixins.$bpk-text-secondary-day; } &__toggle-button { @@ -132,7 +141,7 @@ } &__expand-icon { - fill: $bpk-text-secondary-day; + fill: mixins.$bpk-text-secondary-day; &--flipped { transform: scaleY(-1); @@ -140,10 +149,11 @@ } &__children-container { - padding: 0 bpk-spacing-xxl() bpk-spacing-md() bpk-spacing-xl(); - color: $bpk-text-secondary-day; + padding: 0 mixins.bpk-spacing-xxl() mixins.bpk-spacing-md() + mixins.bpk-spacing-xl(); + color: mixins.$bpk-text-secondary-day; - @include bpk-text; - @include bpk-caption; + @include mixins.bpk-text; + @include mixins.bpk-caption; } } diff --git a/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss b/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss index cb699b2dcc..a374e016f6 100644 --- a/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss +++ b/packages/bpk-component-barchart/src/BpkBarchartBar.module.scss @@ -16,40 +16,40 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-barchart-bar { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-barchart-bar-background-color, - $bpk-line-day + mixins.$bpk-line-day ); &--interactive:not(.bpk-barchart-bar--selected) { cursor: pointer; - @include bpk-hover { - @include bpk-themeable-property( + @include mixins.bpk-hover { + @include mixins.bpk-themeable-property( fill, --bpk-barchart-bar-hover-background-color, - $bpk-core-primary-day + mixins.$bpk-core-primary-day ); } &:active { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-barchart-bar-active-background-color, - $bpk-core-accent-day + mixins.$bpk-core-accent-day ); } } &--selected { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-barchart-bar-selected-background-color, - $bpk-core-accent-day + mixins.$bpk-core-accent-day ); } diff --git a/packages/bpk-component-barchart/src/BpkChartAxis.module.scss b/packages/bpk-component-barchart/src/BpkChartAxis.module.scss index bee08a89ce..47850cbb1e 100644 --- a/packages/bpk-component-barchart/src/BpkChartAxis.module.scss +++ b/packages/bpk-component-barchart/src/BpkChartAxis.module.scss @@ -16,22 +16,22 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-chart { &__axis-tick { &-text { - fill: $bpk-text-secondary-day; + fill: mixins.$bpk-text-secondary-day; - @include bpk-text; - @include bpk-caption; + @include mixins.bpk-text; + @include mixins.bpk-caption; } } &__axis-label { - fill: $bpk-text-secondary-day; + fill: mixins.$bpk-text-secondary-day; - @include bpk-text; - @include bpk-caption; + @include mixins.bpk-text; + @include mixins.bpk-caption; } } diff --git a/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss b/packages/bpk-component-barchart/src/BpkChartDataTable.module.scss index 79826c841c..4fa1a8839a 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-chart-data-table { - @include bpk-visually-hidden; + @include mixins.bpk-visually-hidden; thead, tbody { - @include bpk-visually-hidden; + @include mixins.bpk-visually-hidden; } } diff --git a/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss b/packages/bpk-component-barchart/src/BpkChartGridLines.module.scss index 93f7cd18d4..06c8c63a30 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-chart { &__grid-line { shape-rendering: crispedges; - stroke: $bpk-line-day; + stroke: mixins.$bpk-line-day; } } diff --git a/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss b/packages/bpk-component-blockquote/src/BpkBlockquote.module.scss index 05783827b9..3c2ab66eff 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-blockquote { - @include bpk-blockquote; + @include mixins.bpk-blockquote; } .bpk-blockquote--extra-spacing { - @include bpk-blockquote--extra-spacing; + @include mixins.bpk-blockquote--extra-spacing; } diff --git a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss b/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss index 9c284991c4..5ae01d97e8 100644 --- a/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss +++ b/packages/bpk-component-boilerplate/src/BpkBoilerplate.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-boilerplate { display: flex; diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss b/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss index 3ad33c5232..7e9f425613 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-breadcrumb { display: flex; diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss index 07a6f56ea2..67437a3fd6 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-breadcrumb-item { display: flex; @@ -24,15 +24,15 @@ white-space: nowrap; &__link { - @include bpk-text; + @include mixins.bpk-text; } &__active-item { - color: $bpk-text-secondary-day; + color: mixins.$bpk-text-secondary-day; } &__arrow { - margin: 0 bpk-spacing-sm(); - fill: $bpk-text-disabled-day; + margin: 0 mixins.bpk-spacing-sm(); + fill: mixins.$bpk-text-disabled-day; } } diff --git a/packages/bpk-component-button/src/BpkButtonBase.module.scss b/packages/bpk-component-button/src/BpkButtonBase.module.scss index 05c5db21b6..8af0ee41cf 100644 --- a/packages/bpk-component-button/src/BpkButtonBase.module.scss +++ b/packages/bpk-component-button/src/BpkButtonBase.module.scss @@ -18,25 +18,25 @@ /* @flow strict */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button { - @include bpk-button; + @include mixins.bpk-button; &--large { - @include bpk-button--large; + @include mixins.bpk-button--large; } &--icon-only { - border-radius: $bpk-button-border-radius; + border-radius: mixins.$bpk-button-border-radius; - @include bpk-button--icon-only; + @include mixins.bpk-button--icon-only; } &--large-icon-only { - border-radius: $bpk-button-border-radius; + border-radius: mixins.$bpk-button-border-radius; - @include bpk-button--large-icon-only; + @include mixins.bpk-button--large-icon-only; } /* stylelint-disable selector-max-compound-selectors */ diff --git a/packages/bpk-component-button/src/BpkButtonDestructive.module.scss b/packages/bpk-component-button/src/BpkButtonDestructive.module.scss index dd4455d7dd..407cf0686f 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button--destructive { - @include bpk-button--secondary; - @include bpk-button--destructive; + @include mixins.bpk-button--secondary; + @include mixins.bpk-button--destructive; } diff --git a/packages/bpk-component-button/src/BpkButtonFeatured.module.scss b/packages/bpk-component-button/src/BpkButtonFeatured.module.scss index 880f720502..fbf9389b4e 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button--featured { - @include bpk-button--featured; + @include mixins.bpk-button--featured; } diff --git a/packages/bpk-component-button/src/BpkButtonLink.module.scss b/packages/bpk-component-button/src/BpkButtonLink.module.scss index 3290aa9840..7aeba81a7a 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button { &--link { - @include bpk-button--link; + @include mixins.bpk-button--link; } } diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonLinkOnDark.module.scss index 958b377da2..0b960200bd 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button--link-on-dark { - @include bpk-button--link-on-dark; + @include mixins.bpk-button--link-on-dark; } diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss index db9f6a9971..ae3438b4d0 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button--primary-on-dark { - @include bpk-button--primary-on-dark; + @include mixins.bpk-button--primary-on-dark; } diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss index 87c65fb49b..cc36c1c6a9 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button--primary-on-light { - @include bpk-button--primary-on-light; + @include mixins.bpk-button--primary-on-light; } diff --git a/packages/bpk-component-button/src/BpkButtonSecondary.module.scss b/packages/bpk-component-button/src/BpkButtonSecondary.module.scss index 4ea9420ff7..26ad67745a 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button--secondary { - @include bpk-button--secondary; + @include mixins.bpk-button--secondary; } diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss index bf8f156136..f255a1ccf9 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-button--secondary-on-dark { - @include bpk-button--secondary-on-dark; + @include mixins.bpk-button--secondary-on-dark; } diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss index 7fc8fc03cd..5c88902b36 100644 --- a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss +++ b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss @@ -16,58 +16,58 @@ * limitations under the License. */ -@import '../../../bpk-mixins-next'; +@use '../../../bpk-mixins-next' as mixins; .bpk-button { - @include bpk-button; + @include mixins.bpk-button; &--large { - @include bpk-button--large; + @include mixins.bpk-button--large; } &--icon-only { - border-radius: $bpk-button-border-radius; + border-radius: mixins.$bpk-button-border-radius; - @include bpk-button--icon-only; + @include mixins.bpk-button--icon-only; } &--large-icon-only { - border-radius: $bpk-button-border-radius; + border-radius: mixins.$bpk-button-border-radius; - @include bpk-button--large-icon-only; + @include mixins.bpk-button--large-icon-only; } &--destructive { - @include bpk-button--secondary; - @include bpk-button--destructive; + @include mixins.bpk-button--secondary; + @include mixins.bpk-button--destructive; } &--featured { - @include bpk-button--featured; + @include mixins.bpk-button--featured; } &--link { - @include bpk-button--link; + @include mixins.bpk-button--link; } &--link-on-dark { - @include bpk-button--link-on-dark; + @include mixins.bpk-button--link-on-dark; } &--primary-on-dark { - @include bpk-button--primary-on-dark; + @include mixins.bpk-button--primary-on-dark; } &--primary-on-light { - @include bpk-button--primary-on-light; + @include mixins.bpk-button--primary-on-light; } &--secondary { - @include bpk-button--secondary; + @include mixins.bpk-button--secondary; } &--secondary-on-dark { - @include bpk-button--secondary-on-dark; + @include mixins.bpk-button--secondary-on-dark; } /* stylelint-disable selector-max-compound-selectors */ diff --git a/packages/bpk-component-calendar/src/BpkCalendar.module.scss b/packages/bpk-component-calendar/src/BpkCalendar.module.scss index a59eb5289f..7d23701c4b 100644 --- a/packages/bpk-component-calendar/src/BpkCalendar.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendar.module.scss @@ -16,25 +16,25 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; -@import 'variables.scss'; +@use '../../bpk-mixins-next' as mixins; +@use 'variables.scss'; .bpk-calendar { display: flex; width: 100%; flex-direction: column; - @include bpk-border-radius-sm; + @include mixins.bpk-border-radius-sm; &--fixed { - width: $calendar-width; + width: variables.$calendar-width; } &__header { - margin-top: bpk-spacing-lg(); + margin-top: mixins.bpk-spacing-lg(); } &__grid { - margin-top: bpk-spacing-lg(); + margin-top: mixins.bpk-spacing-lg(); } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss b/packages/bpk-component-calendar/src/BpkCalendarDate.module.scss index 877fa17afd..fef847666b 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-calendar-date { - width: $bpk-calendar-day-size; - height: $bpk-calendar-day-size; + width: mixins.$bpk-calendar-day-size; + height: mixins.$bpk-calendar-day-size; padding: 0; border: none; - border-radius: $bpk-border-radius-lg; + border-radius: mixins.$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 mixins.bpk-label-1; + @include mixins.bpk-themeable-property( color, --bpk-calendar-date-text-color, - $bpk-text-primary-day + mixins.$bpk-text-primary-day ); - @include bpk-hover { + @include mixins.bpk-hover { &:not(.bpk-calendar-date--selected) { - background-color: $bpk-canvas-contrast-day; + background-color: mixins.$bpk-canvas-contrast-day; - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-calendar-date-text-hover-color, - $bpk-text-primary-day + mixins.$bpk-text-primary-day ); } } &:not(.bpk-calendar-date--selected):active { - background-color: $bpk-canvas-contrast-day; + background-color: mixins.$bpk-canvas-contrast-day; - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-calendar-date-text-active-color, - $bpk-text-primary-day + mixins.$bpk-text-primary-day ); } &--outside { background-color: transparent; - color: $bpk-text-disabled-day; + color: mixins.$bpk-text-disabled-day; } &--selected { cursor: default; - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-calendar-date-text-selected-color, - $bpk-text-primary-inverse-day + mixins.$bpk-text-primary-inverse-day ); } &--middle { - background-color: $bpk-surface-subtle-day; - color: $bpk-text-primary-day; + background-color: mixins.$bpk-surface-subtle-day; + color: mixins.$bpk-text-primary-day; } &--single { - background-color: $bpk-core-accent-day; + background-color: mixins.$bpk-core-accent-day; } &--start { - background-color: $bpk-core-accent-day; + background-color: mixins.$bpk-core-accent-day; } &--end { - background-color: $bpk-core-accent-day; + background-color: mixins.$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 mixins.$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, + mixins.$bpk-core-accent-day + ) inset; - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-calendar-date-text-focus-color, - $bpk-core-accent-day + mixins.$bpk-core-accent-day ); } &:disabled, &--blocked { background-color: transparent; - color: $bpk-text-disabled-day; + color: mixins.$bpk-text-disabled-day; cursor: not-allowed; - @include bpk-hover { - color: $bpk-text-disabled-day; + @include mixins.bpk-hover { + color: mixins.$bpk-text-disabled-day; } &:active { - color: $bpk-text-disabled-day; + color: mixins.$bpk-text-disabled-day; } } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss index 5edd5fa73c..bc7bda75a5 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-next'; -@import 'variables.scss'; +@use '../../bpk-mixins-next' as mixins; +@use 'variables.scss'; .bpk-calendar-grid { width: 100%; @@ -30,7 +30,7 @@ } &__caption { - @include bpk-visually-hidden; + @include mixins.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% + mixins.$bpk-surface-default-day 50%, + mixins.$bpk-surface-subtle-day 50% ); - @include bpk-rtl { + @include mixins.bpk-rtl { background-image: linear-gradient( to left, - $bpk-surface-default-day 50%, - $bpk-surface-subtle-day 50% + mixins.$bpk-surface-default-day 50%, + mixins.$bpk-surface-subtle-day 50% ); } } &--middle { - background-color: $bpk-surface-subtle-day; + background-color: mixins.$bpk-surface-subtle-day; } &--end { background-image: linear-gradient( to left, - $bpk-surface-default-day 50%, - $bpk-surface-subtle-day 50% + mixins.$bpk-surface-default-day 50%, + mixins.$bpk-surface-subtle-day 50% ); - @include bpk-rtl { + @include mixins.bpk-rtl { background-image: linear-gradient( to right, - $bpk-surface-default-day 50%, - $bpk-surface-subtle-day 50% + mixins.$bpk-surface-default-day 50%, + mixins.$bpk-surface-subtle-day 50% ); } } @@ -76,6 +76,6 @@ &__week { display: flex; - padding-top: bpk-spacing-lg(); + padding-top: mixins.bpk-spacing-lg(); } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss index 048401112b..2554a1be35 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; -@import 'variables.scss'; +@use '../../bpk-mixins-next' as mixins; +@use 'variables.scss'; .bpk-calendar-header { display: table; @@ -33,18 +33,18 @@ list-style: none; text-align: center; - @include bpk-text; - @include bpk-caption; + @include mixins.bpk-text; + @include mixins.bpk-caption; } &__weekday { display: table-cell; - height: $bpk-calendar-day-size; - padding: 0 $bpk-calendar-day-spacing; - box-shadow: $shadow-bottom; + height: mixins.$bpk-calendar-day-size; + padding: 0 mixins.$bpk-calendar-day-spacing; + box-shadow: variables.$shadow-bottom; vertical-align: middle; box-sizing: content-box; - @include bpk-footnote; + @include mixins.bpk-footnote; } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.scss index 677eb481f3..3df031fed3 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-next'; -@import 'variables.scss'; +@use '../../bpk-mixins-next' as mixins; +@use 'variables.scss'; .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 mixins.$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.scss b/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss index 6d5a997127..bfa07a5ed0 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss @@ -16,8 +16,8 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; -@import 'variables.scss'; +@use '../../bpk-mixins-next' as mixins; +@use 'variables.scss'; .bpk-calendar-nav { display: table; @@ -29,7 +29,7 @@ &__nudger { display: table-cell; - padding: 0 $bpk-calendar-day-spacing; + padding: 0 mixins.$bpk-calendar-day-spacing; text-align: center; vertical-align: middle; box-sizing: border-box; @@ -37,53 +37,53 @@ &__button { width: 100%; - height: $bpk-input-height; - padding: bpk-spacing-md() - (2 * $bpk-one-pixel-rem) 0; + height: mixins.$bpk-input-height; + padding: mixins.bpk-spacing-md() - (2 * mixins.$bpk-one-pixel-rem) 0; border: none; background: none; cursor: pointer; appearance: none; - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-calendar-nudger-icon-color, - $bpk-text-primary-day + mixins.$bpk-text-primary-day ); - @include bpk-hover { - @include bpk-themeable-property( + @include mixins.bpk-hover { + @include mixins.bpk-themeable-property( color, --bpk-calendar-nudger-icon-hover-color, - $bpk-text-primary-day + mixins.$bpk-text-primary-day ); } &:active { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-calendar-nudger-icon-active-color, - $bpk-text-primary-day + mixins.$bpk-text-primary-day ); } .bpk-calendar-nav__icon { fill: currentcolor; - @include bpk-icon--rtl-support; + @include mixins.bpk-icon--rtl-support; } &:disabled { cursor: not-allowed; .bpk-calendar-nav__icon { - fill: $bpk-text-disabled-day; + fill: mixins.$bpk-text-disabled-day; } } } &__text { &--hidden { - @include bpk-visually-hidden; + @include mixins.bpk-visually-hidden; } } } diff --git a/packages/bpk-component-calendar/src/_variables.scss b/packages/bpk-component-calendar/src/_variables.scss index 4082bb2e83..633c3810e4 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-next'; +@use '../../bpk-mixins-next' as mixins; -$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 mixins.$bpk-line-day; /* stylelint-disable-line unit-disallowed-list */ +$calendar-width: 7 * + (mixins.$bpk-calendar-day-size + (2 * mixins.$bpk-calendar-day-spacing)); diff --git a/packages/bpk-component-card-button/src/BpkSaveButton.module.scss b/packages/bpk-component-card-button/src/BpkSaveButton.module.scss index 22015544dd..d69832d5c8 100644 --- a/packages/bpk-component-card-button/src/BpkSaveButton.module.scss +++ b/packages/bpk-component-card-button/src/BpkSaveButton.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; @keyframes heart-beat { 0%, @@ -47,13 +47,13 @@ .bpk-save-button { position: relative; - width: bpk-spacing-xxl(); - height: bpk-spacing-xxl(); - padding: bpk-spacing-md(); + width: mixins.bpk-spacing-xxl(); + height: mixins.bpk-spacing-xxl(); + padding: mixins.bpk-spacing-md(); border-radius: 50%; background-color: transparent; - @include bpk-hover { + @include mixins.bpk-hover { background-color: transparent; } @@ -66,10 +66,10 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - color: $bpk-text-on-light-day; + color: mixins.$bpk-text-on-light-day; - @include bpk-hover { - color: $bpk-text-on-light-day; + @include mixins.bpk-hover { + color: mixins.$bpk-text-on-light-day; } } @@ -78,8 +78,8 @@ opacity: 1; &--show { - @include bpk-hover { - transition: opacity $bpk-duration-sm ease-in-out; + @include mixins.bpk-hover { + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: 0; } } @@ -89,13 +89,13 @@ } &--onDark { - color: $bpk-text-on-dark-day; + color: mixins.$bpk-text-on-dark-day; } } &__heartIcon { z-index: 2; - color: $bpk-core-accent-day; + color: mixins.$bpk-core-accent-day; opacity: 0; &--toggle { @@ -106,43 +106,43 @@ &--show { opacity: 1; - @include bpk-hover { - color: $bpk-core-accent-day; + @include mixins.bpk-hover { + color: mixins.$bpk-core-accent-day; } } &--hide { - @include bpk-hover { - transition: opacity $bpk-duration-sm ease-in-out; - color: $bpk-text-on-light-day; + @include mixins.bpk-hover { + transition: opacity mixins.$bpk-duration-sm ease-in-out; + color: mixins.$bpk-text-on-light-day; opacity: 1; } } &--onDark { - color: $bpk-text-on-dark-day; + color: mixins.$bpk-text-on-dark-day; - @include bpk-hover { - color: $bpk-text-on-dark-day; + @include mixins.bpk-hover { + color: mixins.$bpk-text-on-dark-day; } } } &__small { - width: bpk-spacing-xl(); - height: bpk-spacing-xl(); - min-height: bpk-spacing-xl(); + width: mixins.bpk-spacing-xl(); + height: mixins.bpk-spacing-xl(); + min-height: mixins.bpk-spacing-xl(); } &__contained { - background-color: $bpk-private-card-button-contained-color; + background-color: mixins.$bpk-private-card-button-contained-color; - @include bpk-hover { - background-color: $bpk-private-card-button-contained-color; + @include mixins.bpk-hover { + background-color: mixins.$bpk-private-card-button-contained-color; } &:active { - background-color: $bpk-private-card-button-contained-color; + background-color: mixins.$bpk-private-card-button-contained-color; } } } diff --git a/packages/bpk-component-card/src/BpkCard.module.scss b/packages/bpk-component-card/src/BpkCard.module.scss index 550f5a59f9..a06720471f 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-card { - @include bpk-card; + @include mixins.bpk-card; &--atomic-button { width: 100%; @@ -33,6 +33,6 @@ } &--padded { - @include bpk-card--padded; + @include mixins.bpk-card--padded; } } diff --git a/packages/bpk-component-card/src/BpkCardWrapper.module.scss b/packages/bpk-component-card/src/BpkCardWrapper.module.scss index 45cef5be1b..5738b809ca 100644 --- a/packages/bpk-component-card/src/BpkCardWrapper.module.scss +++ b/packages/bpk-component-card/src/BpkCardWrapper.module.scss @@ -16,14 +16,15 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-card-wrapper { - @include bpk-card; - @include bpk-border-lg(var(--background-color), ''); + @include mixins.bpk-card; + @include mixins.bpk-border-lg(var(--background-color), ''); &--header { - border-radius: $bpk-border-radius-sm $bpk-border-radius-sm 0 0; + border-radius: mixins.$bpk-border-radius-sm mixins.$bpk-border-radius-sm 0 + 0; background-color: var(--background-color); cursor: default; overflow: hidden; @@ -31,7 +32,8 @@ &--content { position: relative; - border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md; + border-radius: 0 0 mixins.$bpk-border-radius-md + mixins.$bpk-border-radius-md; overflow: hidden; &::before, @@ -40,13 +42,13 @@ top: 0; content: ' '; z-index: 2; - width: bpk-spacing-lg(); - height: bpk-spacing-lg(); + width: mixins.bpk-spacing-lg(); + height: mixins.bpk-spacing-lg(); background-color: transparent; - box-shadow: bpk-spacing-base() 0 0 0 var(--background-color); + box-shadow: mixins.bpk-spacing-base() 0 0 0 var(--background-color); overflow: hidden; - @include bpk-border-radius-md; + @include mixins.bpk-border-radius-md; } &::before { @@ -62,7 +64,7 @@ &:has(.bpk-card-wrapper--header:active) { &::after { - box-shadow: $bpk-box-shadow-lg; + box-shadow: mixins.$bpk-box-shadow-lg; opacity: 1; } } diff --git a/packages/bpk-component-card/src/BpkDividedCard.module.scss b/packages/bpk-component-card/src/BpkDividedCard.module.scss index 8802a08ac2..11e244ab02 100644 --- a/packages/bpk-component-card/src/BpkDividedCard.module.scss +++ b/packages/bpk-component-card/src/BpkDividedCard.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; $min-vertical-width: 240; $max-vertical-width: 720; @@ -29,14 +29,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: mixins.$bpk-one-pixel-rem * $min-vertical-width; + max-width: mixins.$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: mixins.$bpk-one-pixel-rem * $min-horizontal-width; + min-height: mixins.$bpk-one-pixel-rem * $min-horizontal-height; } &__primary { @@ -47,15 +47,15 @@ $fixed-secondary-width: 216; &__secondary { &--vertical { - border-top: $bpk-input-border; + border-top: mixins.$bpk-input-border; } &--horizontal { - width: $bpk-one-pixel-rem * $fixed-secondary-width; - border-left: $bpk-input-border; + width: mixins.$bpk-one-pixel-rem * $fixed-secondary-width; + border-left: mixins.$bpk-input-border; - @include bpk-rtl { - border-right: $bpk-input-border; + @include mixins.bpk-rtl { + border-right: mixins.$bpk-input-border; border-left: unset; } } diff --git a/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss b/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss index 260d2138fe..1496766256 100644 --- a/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss +++ b/packages/bpk-component-checkbox/src/BpkCheckbox.module.scss @@ -16,48 +16,48 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-checkbox { - @include bpk-checkbox; + @include mixins.bpk-checkbox; &__label { - @include bpk-checkbox__label; + @include mixins.bpk-checkbox__label; &--small { - @include bpk-checkbox__label--small; + @include mixins.bpk-checkbox__label--small; } } &--white { - @include bpk-checkbox--white; + @include mixins.bpk-checkbox--white; } &--disabled { - @include bpk-checkbox--disabled; + @include mixins.bpk-checkbox--disabled; &--white { - color: $bpk-text-disabled-on-dark-day; + color: mixins.$bpk-text-disabled-on-dark-day; } } &--invalid { - @include bpk-checkbox--invalid; + @include mixins.bpk-checkbox--invalid; } &__input { - @include bpk-checkbox__input; + @include mixins.bpk-checkbox__input; &-indeterminate { &::before { position: absolute; - top: bpk-spacing-sm() + $bpk-one-pixel-rem; - left: bpk-spacing-sm() / 2; + top: mixins.bpk-spacing-sm() + mixins.$bpk-one-pixel-rem; + left: mixins.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: mixins.bpk-spacing-xxl() * 0.25; + height: mixins.bpk-spacing-sm() - mixins.$bpk-one-pixel-rem; + border-radius: mixins.$bpk-border-size-lg; + background-color: mixins.$bpk-surface-default-day; } } @@ -66,11 +66,11 @@ } &-white { - background-color: $bpk-surface-default-day; + background-color: mixins.$bpk-surface-default-day; } } &__asterisk { - color: $bpk-status-danger-spot-day; + color: mixins.$bpk-status-danger-spot-day; } } diff --git a/packages/bpk-component-chip/src/BpkSelectableChip.module.scss b/packages/bpk-component-chip/src/BpkSelectableChip.module.scss index dd3a71a65b..49a1d87792 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-chip { - @include bpk-chip; + @include mixins.bpk-chip; } diff --git a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss index 2a642d66b6..04c4857f3a 100644 --- a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss +++ b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss @@ -16,13 +16,13 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; -$button-padding: bpk-spacing-sm() / 2; +$button-padding: mixins.bpk-spacing-sm() * 0.5; .bpk-close-button { - width: bpk-spacing-lg(); - height: bpk-spacing-lg(); + width: mixins.bpk-spacing-lg(); + height: mixins.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 @@ -31,18 +31,18 @@ $button-padding: bpk-spacing-sm() / 2; padding: 0; border: 0; background-color: transparent; - color: $bpk-text-secondary-day; + color: mixins.$bpk-text-secondary-day; cursor: pointer; appearance: none; - @include bpk-touch-tappable; + @include mixins.bpk-touch-tappable; - @include bpk-hover { - color: $bpk-text-primary-day; + @include mixins.bpk-hover { + color: mixins.$bpk-text-primary-day; } &:active { - color: $bpk-text-primary-day; + color: mixins.$bpk-text-primary-day; } &__icon { diff --git a/packages/bpk-component-code/src/BpkCode.module.scss b/packages/bpk-component-code/src/BpkCode.module.scss index c1dac44eed..eb95b6c6ec 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-code { - @include bpk-code; + @include mixins.bpk-code; &--alternate { - @include bpk-code--alternate; + @include mixins.bpk-code--alternate; } } diff --git a/packages/bpk-component-code/src/BpkCodeBlock.module.scss b/packages/bpk-component-code/src/BpkCodeBlock.module.scss index 399f322003..779e8e3181 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-code { &--block { - @include bpk-code--block; + @include mixins.bpk-code--block; } &__pre { - @include bpk-code__pre; + @include mixins.bpk-code__pre; &--alternate { - @include bpk-code__pre--alternate; + @include mixins.bpk-code__pre--alternate; } } } diff --git a/packages/bpk-component-content-cards/src/BpkContentCard.module.scss b/packages/bpk-component-content-cards/src/BpkContentCard.module.scss index 6ccf156581..f9e3eff77c 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCard.module.scss +++ b/packages/bpk-component-content-cards/src/BpkContentCard.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-content-card { &--link { @@ -28,60 +28,62 @@ &--horizontal { display: grid; - column-gap: bpk-spacing-xxl(); - grid-template-columns: minmax(min(10%, 50%), $bpk-one-pixel-rem * 620) 40%; + column-gap: mixins.bpk-spacing-xxl(); + grid-template-columns: + minmax(min(10%, 50%), mixins.$bpk-one-pixel-rem * 620) + 40%; align-items: center; - @include bpk-breakpoint-mobile { + @include mixins.bpk-breakpoint-mobile { grid-template-columns: 1fr; } } &--horizontal &--image-container { width: 100%; - height: $bpk-one-pixel-rem * 420; + height: mixins.$bpk-one-pixel-rem * 420; - @include bpk-breakpoint-mobile { - max-height: $bpk-one-pixel-rem * 180; - margin-bottom: bpk-spacing-base(); + @include mixins.bpk-breakpoint-mobile { + max-height: mixins.$bpk-one-pixel-rem * 180; + margin-bottom: mixins.bpk-spacing-base(); } - @include bpk-breakpoint-tablet { + @include mixins.bpk-breakpoint-tablet { height: 100%; } } &--vertical &--image { - height: $bpk-one-pixel-rem * 460; - margin-bottom: bpk-spacing-base(); + height: mixins.$bpk-one-pixel-rem * 460; + margin-bottom: mixins.bpk-spacing-base(); - @include bpk-breakpoint-small-tablet { + @include mixins.bpk-breakpoint-small-tablet { width: 100%; height: auto; - max-height: $bpk-one-pixel-rem * 260; + max-height: mixins.$bpk-one-pixel-rem * 260; } - @include bpk-breakpoint-mobile { - max-height: $bpk-one-pixel-rem * 180; + @include mixins.bpk-breakpoint-mobile { + max-height: mixins.$bpk-one-pixel-rem * 180; } } &--headline { - margin-bottom: bpk-spacing-sm(); + margin-bottom: mixins.bpk-spacing-sm(); - @include bpk-heading-4; + @include mixins.bpk-heading-4; } &--description { - color: $bpk-text-secondary-day; + color: mixins.$bpk-text-secondary-day; - @include bpk-body-default; + @include mixins.bpk-body-default; } &--image { width: 100%; height: 100%; - border-radius: $bpk-border-radius-md; + border-radius: mixins.$bpk-border-radius-md; object-fit: cover; } } diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss index 6ffcb1b771..29067cc688 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss +++ b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss @@ -19,16 +19,16 @@ /* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-max-compound-selectors */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-content-cards { &--header-text { - margin-bottom: bpk-spacing-base(); + margin-bottom: mixins.bpk-spacing-base(); - @include bpk-heading-2; + @include mixins.bpk-heading-2; - @include bpk-breakpoint-mobile { - @include bpk-heading-3; + @include mixins.bpk-breakpoint-mobile { + @include mixins.bpk-heading-3; } } @@ -36,15 +36,15 @@ display: grid; grid-template-columns: repeat( auto-fit, - minmax($bpk-one-pixel-rem * 50, 1fr) + minmax(mixins.$bpk-one-pixel-rem * 50, 1fr) ); grid-auto-flow: column; - gap: bpk-spacing-lg(); + gap: mixins.bpk-spacing-lg(); - @include bpk-breakpoint-small-tablet { + @include mixins.bpk-breakpoint-small-tablet { grid-template-columns: 1fr; grid-auto-flow: row; - gap: bpk-spacing-lg(); + gap: mixins.bpk-spacing-lg(); } } } diff --git a/packages/bpk-component-datatable/src/BpkDataTable.module.scss b/packages/bpk-component-datatable/src/BpkDataTable.module.scss index d8932783ab..ea139dbce5 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTable.module.scss @@ -16,22 +16,22 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; -$bpk-border-size-datatable: $bpk-border-size-xl * 2; +$bpk-border-size-datatable: mixins.$bpk-border-size-xl * 2; @mixin bpk-datatable-border-left() { - @include _bpk-border-left( + @include mixins.bpk-border-left( $bpk-border-size-datatable, - $bpk-core-accent-day, + mixins.$bpk-core-accent-day, inset ); } @mixin bpk-datatable-border-right() { - @include _bpk-border-right( + @include mixins.bpk-border-right( $bpk-border-size-datatable, - $bpk-core-accent-day, + mixins.$bpk-core-accent-day, inset ); } @@ -47,41 +47,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: mixins.$bpk-border-size-sm solid mixins.$bpk-line-day; border-bottom: none; - outline-offset: -(4 * $bpk-one-pixel-rem); - color: $bpk-text-primary-day; + outline-offset: -1 * (4 * mixins.$bpk-one-pixel-rem); + color: mixins.$bpk-text-primary-day; - @include bpk-footnote; + @include mixins.bpk-footnote; &:last-child:not(.bpk-data-table__header-row) { - border-bottom: $bpk-border-size-sm solid $bpk-line-day; + border-bottom: mixins.$bpk-border-size-sm solid mixins.$bpk-line-day; } &--clickable:not(.bpk-data-table__header-row):hover { - background-color: $bpk-canvas-contrast-day; + background-color: mixins.$bpk-canvas-contrast-day; cursor: pointer; @include bpk-datatable-border-left($bpk-border-size-datatable); - @include bpk-rtl { + @include mixins.bpk-rtl { @include bpk-datatable-border-right($bpk-border-size-datatable); } } &--selected { - background-color: $bpk-status-warning-fill-day; + background-color: mixins.$bpk-status-warning-fill-day; @include bpk-datatable-border-left($bpk-border-size-datatable); - @include bpk-rtl { + @include mixins.bpk-rtl { @include bpk-datatable-border-right($bpk-border-size-datatable); } } } &__cell { - margin: bpk-spacing-base(); + margin: mixins.bpk-spacing-base(); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss index 0aabd5e681..8f37c852ec 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss @@ -16,19 +16,19 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; -$bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md(); +$bpk-margin-size-sort-icons: mixins.bpk-spacing-sm() + mixins.bpk-spacing-md(); .bpk-data-table-column__header { display: flex; height: 100%; - margin: bpk-spacing-base(); + margin: mixins.bpk-spacing-base(); flex-direction: row; align-items: center; - outline-offset: -(bpk-spacing-sm()); + outline-offset: -1 * (mixins.bpk-spacing-sm()); - @include bpk-label-2; + @include mixins.bpk-label-2; &:hover { cursor: pointer; @@ -38,27 +38,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 mixins.bpk-rtl { margin: 0 $bpk-margin-size-sort-icons 0 0; } } .bpk-data-table-column__sort-icon { display: block; - fill: $bpk-line-day; + fill: mixins.$bpk-line-day; &:hover { - fill: $bpk-line-day; + fill: mixins.$bpk-line-day; } &--selected { &, &:hover { - fill: $bpk-core-accent-day; + fill: mixins.$bpk-core-accent-day; } } } .bpk-data-table-column__sort-icon--up { - margin-bottom: -(bpk-spacing-sm()); + margin-bottom: -1 * (mixins.bpk-spacing-sm()); } diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss b/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss index 6274969e9a..46a6453b66 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss +++ b/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-datepicker { &__calendar { diff --git a/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss b/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss index 1e160235e7..ceb681cc77 100644 --- a/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss +++ b/packages/bpk-component-description-list/src/BpkDescriptionList.module.scss @@ -16,21 +16,21 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-description-list { margin: 0; &__term { - @include bpk-label-1; + @include mixins.bpk-label-1; } &__details { margin: 0; - margin-left: bpk-spacing-lg(); + margin-left: mixins.bpk-spacing-lg(); - @include bpk-rtl { - margin-right: bpk-spacing-lg(); + @include mixins.bpk-rtl { + margin-right: mixins.bpk-spacing-lg(); margin-left: 0; } } diff --git a/packages/bpk-component-dialog/src/BpkDialog.module.scss b/packages/bpk-component-dialog/src/BpkDialog.module.scss index f4801c779c..4576d97157 100644 --- a/packages/bpk-component-dialog/src/BpkDialog.module.scss +++ b/packages/bpk-component-dialog/src/BpkDialog.module.scss @@ -16,12 +16,12 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-dialog { &__container { display: flex; - padding: bpk-spacing-lg(); + padding: mixins.bpk-spacing-lg(); // IE11 and below hack for buggy flexbox support @media screen\0 { @@ -31,20 +31,20 @@ &__close-button { float: right; - margin: 0 0 bpk-spacing-base() bpk-spacing-base(); + margin: 0 0 mixins.bpk-spacing-base() mixins.bpk-spacing-base(); - @include bpk-rtl { + @include mixins.bpk-rtl { float: left; - margin: 0 bpk-spacing-base() bpk-spacing-base() 0; + margin: 0 mixins.bpk-spacing-base() mixins.bpk-spacing-base() 0; } } &--with-icon { - margin-top: bpk-spacing-xl(); + margin-top: mixins.bpk-spacing-xl(); } &__icon { - $size: bpk-spacing-md() * 7; + $size: mixins.bpk-spacing-md() * 7; position: absolute; top: 0; @@ -52,27 +52,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: (mixins.$bpk-border-size-lg * 2) mixins.$bpk-surface-default-day + solid; border-radius: 50%; &--primary { - background-color: $bpk-core-accent-day; + background-color: mixins.$bpk-core-accent-day; } &--warning { - background-color: $bpk-status-warning-spot-day; + background-color: mixins.$bpk-status-warning-spot-day; } &--destructive { - background-color: $bpk-status-danger-spot-day; + background-color: mixins.$bpk-status-danger-spot-day; } > svg { - fill: $bpk-text-primary-inverse-day; + fill: mixins.$bpk-text-primary-inverse-day; } } } diff --git a/packages/bpk-component-dialog/src/BpkDialogInner.module.scss b/packages/bpk-component-dialog/src/BpkDialogInner.module.scss index d0f355c4d0..756b62a752 100644 --- a/packages/bpk-component-dialog/src/BpkDialogInner.module.scss +++ b/packages/bpk-component-dialog/src/BpkDialogInner.module.scss @@ -16,48 +16,48 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-dialog-inner { - z-index: $bpk-zindex-modal; + z-index: mixins.$bpk-zindex-modal; width: 100%; - max-width: $bpk-modal-max-width; + max-width: mixins.$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 mixins.$bpk-duration-sm ease-in-out, + transform mixins.$bpk-duration-sm ease-in-out; outline: 0; - background-color: $bpk-modal-background-color; - opacity: $bpk-modal-opacity; + background-color: mixins.$bpk-modal-background-color; + opacity: mixins.$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 mixins.bpk-box-shadow-xl; + @include mixins.bpk-border-radius-sm; &--appear { transform: scale(0.9); - opacity: $bpk-modal-initial-opacity; + opacity: mixins.$bpk-modal-initial-opacity; } &--appear-active { transform: scale(1); - opacity: $bpk-modal-opacity; + opacity: mixins.$bpk-modal-opacity; } &__content { - padding: $bpk-modal-content-padding; + padding: mixins.$bpk-modal-content-padding; flex: 1; overflow-y: auto; } &__flare { - height: bpk-spacing-lg() * 10; + height: mixins.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: mixins.$bpk-surface-contrast-day; } } diff --git a/packages/bpk-component-drawer/src/BpkDrawer.module.scss b/packages/bpk-component-drawer/src/BpkDrawer.module.scss index 22a27a7ada..323f0e2ecb 100644 --- a/packages/bpk-component-drawer/src/BpkDrawer.module.scss +++ b/packages/bpk-component-drawer/src/BpkDrawer.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-drawer__container { position: fixed; diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss b/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss index 64423c70c5..c2e589108a 100644 --- a/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss +++ b/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss @@ -16,32 +16,32 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-drawer { position: fixed; right: 0; display: flex; - z-index: $bpk-zindex-drawer; + z-index: mixins.$bpk-zindex-drawer; width: 90%; - max-width: 50 * bpk-spacing-md(); + max-width: 50 * mixins.bpk-spacing-md(); height: 100%; flex-direction: column; transform: translate(100%); - transition: transform $bpk-duration-sm ease; + transition: transform mixins.$bpk-duration-sm ease; outline: 0; - background: $bpk-surface-default-day; + background: mixins.$bpk-surface-default-day; overflow-y: scroll; - @include bpk-box-shadow-xl; + @include mixins.bpk-box-shadow-xl; - @include bpk-rtl { + @include mixins.bpk-rtl { right: auto; left: 0; transform: translate(-100%); } - @include bpk-breakpoint-mobile { + @include mixins.bpk-breakpoint-mobile { width: 100%; max-width: 100%; } @@ -50,55 +50,55 @@ &--entered { transform: translate(0); - @include bpk-rtl { + @include mixins.bpk-rtl { transform: translate(0); } } &--exiting { - transition: transform $bpk-duration-xs ease; + transition: transform mixins.$bpk-duration-xs ease; } &--exiting, &--exited { transform: translate(100%); - @include bpk-rtl { + @include mixins.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 * mixins.bpk-spacing-base() + mixins.bpk-spacing-base()}; // keep height the same if visually hidden title + padding: mixins.bpk-spacing-base(); justify-content: space-between; align-items: center; flex: 0 0; - @include bpk-border-bottom-sm($bpk-line-day); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-day); } &__heading { - @include bpk-text; - @include bpk-label-1; + @include mixins.bpk-text; + @include mixins.bpk-label-1; &--visually-hidden { - @include bpk-visually-hidden; + @include mixins.bpk-visually-hidden; } } &__close-button { float: right; - @include bpk-rtl { + @include mixins.bpk-rtl { float: left; } } &__content { height: 100%; - padding: bpk-spacing-base(); + padding: mixins.bpk-spacing-base(); flex: 1 1 100%; overflow-y: auto; } diff --git a/packages/bpk-component-fieldset/src/BpkFieldset.module.scss b/packages/bpk-component-fieldset/src/BpkFieldset.module.scss index 6c0f096ccd..687ae061aa 100644 --- a/packages/bpk-component-fieldset/src/BpkFieldset.module.scss +++ b/packages/bpk-component-fieldset/src/BpkFieldset.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-fieldset { margin: 0; @@ -25,13 +25,13 @@ &__description { display: block; - margin-top: bpk-spacing-md(); - color: $bpk-text-secondary-day; + margin-top: mixins.bpk-spacing-md(); + color: mixins.$bpk-text-secondary-day; - @include bpk-caption; + @include mixins.bpk-caption; } &__label { - margin-bottom: bpk-spacing-sm(); + margin-bottom: mixins.bpk-spacing-sm(); } } 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 af8821b856..34ea416733 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-content-bubble { &__pointer { @@ -34,10 +34,11 @@ background-size: cover; &--rounded { - border-radius: $bpk-flare-corner-radius; + border-radius: mixins.$bpk-flare-corner-radius; &--with-pointer { - border-radius: $bpk-flare-corner-radius $bpk-flare-corner-radius 0 0; + border-radius: mixins.$bpk-flare-corner-radius + mixins.$bpk-flare-corner-radius 0 0; } } } 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 0adc9fbdb6..5625853cc9 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,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-flare-bar { &__container { @@ -27,11 +27,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: mixins.$bpk-flare-height-desktop; overflow: hidden; - @include bpk-breakpoint-mobile { - height: $bpk-flare-height-mobile; + @include mixins.bpk-breakpoint-mobile { + height: mixins.$bpk-flare-height-mobile; } } @@ -40,29 +40,29 @@ // stylelint-disable-next-line unit-disallowed-list bottom: -1px; width: 700rem; // required for correct behaviour in IE - height: $bpk-flare-height-desktop; + height: mixins.$bpk-flare-height-desktop; margin-left: 50%; transform: translateX(-50%); - fill: $bpk-surface-default-day; + fill: mixins.$bpk-surface-default-day; - @include bpk-rtl { + @include mixins.bpk-rtl { margin-right: 50%; transform: translateX(50%); } - @include bpk-breakpoint-mobile { - height: $bpk-flare-height-mobile; + @include mixins.bpk-breakpoint-mobile { + height: mixins.$bpk-flare-height-mobile; } } &__rounded-corner { position: absolute; // stylelint-disable-next-line unit-disallowed-list - bottom: calc(#{bpk-spacing-lg()} - 1px); + bottom: calc(#{mixins.bpk-spacing-lg()} - 1px); left: 0; - width: $bpk-flare-corner-radius; - height: $bpk-flare-corner-radius; - fill: $bpk-surface-default-day; + width: mixins.$bpk-flare-corner-radius; + height: mixins.$bpk-flare-corner-radius; + fill: mixins.$bpk-surface-default-day; &--trailing { right: 0; diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss index 430e0bc7a0..0909b7cd2f 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss @@ -16,28 +16,28 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-floating-notification { position: absolute; right: 0; - bottom: bpk-spacing-xl(); + bottom: mixins.bpk-spacing-xl(); left: 0; display: flex; - max-width: bpk-spacing-xxl() * 10; + max-width: mixins.bpk-spacing-xxl() * 10; margin: auto; - padding: bpk-spacing-lg(); + padding: mixins.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 mixins.$bpk-duration-base ease-in-out, + transform mixins.$bpk-duration-base ease-in-out; + border-radius: mixins.$bpk-border-radius-md; + background: mixins.$bpk-core-primary-day; + color: mixins.$bpk-text-on-dark-day; + box-shadow: mixins.$bpk-box-shadow-xl, mixins.$bpk-box-shadow-lg; - @include bpk-breakpoint-mobile { + @include mixins.bpk-breakpoint-mobile { max-width: 100%; - padding: bpk-spacing-base(); + padding: mixins.bpk-spacing-base(); } &--leave { @@ -45,7 +45,7 @@ opacity: 1; &-active { - transform: translateY(bpk-spacing-xl()); + transform: translateY(mixins.bpk-spacing-xl()); opacity: 0; } @@ -55,7 +55,7 @@ } &--appear { - transform: translateY(bpk-spacing-xl()); + transform: translateY(mixins.bpk-spacing-xl()); opacity: 0; &-active { @@ -67,21 +67,21 @@ &__button { min-height: 0; padding: 0; - color: $bpk-text-on-dark-day; + color: mixins.$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: mixins.bpk-spacing-md(); + margin-left: mixins.bpk-spacing-sm(); flex-shrink: 0; - transform: translateY((bpk-spacing-sm())); + transform: translateY((mixins.bpk-spacing-sm())); text-align: bottom; - fill: $bpk-text-on-dark-day; + fill: mixins.$bpk-text-on-dark-day; } &__text { - margin-inline-end: bpk-spacing-md(); + margin-inline-end: mixins.bpk-spacing-md(); } } diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss b/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss index 33dc8b387f..8c6ef29e55 100644 --- a/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss +++ b/packages/bpk-component-form-validation/src/BpkFormValidation.module.scss @@ -16,29 +16,29 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-form-validation { - @include bpk-form-validation; + @include mixins.bpk-form-validation; &__container { - @include bpk-form-validation__container; + @include mixins.bpk-form-validation__container; } &__icon { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( fill, --bpk-form-validation-icon-fill, - $bpk-form-validation-color + mixins.$bpk-form-validation-color ); - @include bpk-margin-trailing(bpk-spacing-sm()); + @include mixins.bpk-margin-trailing(mixins.bpk-spacing-sm()); } &--appear { - @include bpk-form-validation--appear; + @include mixins.bpk-form-validation--appear; } &--is-checkbox { - @include bpk-form-validation--is-checkbox; + @include mixins.bpk-form-validation--is-checkbox; } } diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss index e12ce17fc7..ceb8f466f9 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; @mixin aspect-ratio($ratio) { padding-top: $ratio; @@ -68,20 +68,20 @@ } .bpk-card { - @include bpk-card; + @include mixins.bpk-card; } .bpk-graphic-promo { max-width: 76.5rem; margin-right: auto; margin-left: auto; - background-color: $bpk-surface-contrast-day; + background-color: mixins.$bpk-surface-contrast-day; background-position: center; background-size: cover; - color: $bpk-text-on-dark-day; + color: mixins.$bpk-text-on-dark-day; box-shadow: none; - @include bpk-breakpoint-small-tablet { + @include mixins.bpk-breakpoint-small-tablet { @include aspect-ratio(133%); } @@ -97,36 +97,36 @@ @include content-alignment; - @include bpk-breakpoint-above-tablet { + @include mixins.bpk-breakpoint-above-tablet { height: 28.75rem; - @include bpk-margin-leading(bpk-spacing-xxxl(), false); - @include bpk-margin-trailing(bpk-spacing-xxl(), false); + @include mixins.bpk-margin-leading(mixins.bpk-spacing-xxxl(), false); + @include mixins.bpk-margin-trailing(mixins.bpk-spacing-xxl(), false); /* adjusting for 1.5rem difference between margins */ &--center > * { - @include bpk-margin-trailing(bpk-spacing-lg()); + @include mixins.bpk-margin-trailing(mixins.bpk-spacing-lg()); } } - @include bpk-breakpoint-tablet { + @include mixins.bpk-breakpoint-tablet { height: 22.5rem; - @include bpk-margin-leading(bpk-spacing-xxl(), false); - @include bpk-margin-trailing(bpk-spacing-xl(), false); + @include mixins.bpk-margin-leading(mixins.bpk-spacing-xxl(), false); + @include mixins.bpk-margin-trailing(mixins.bpk-spacing-xl(), false); /* adjusting for 1.5rem difference between margins */ &--center > * { - @include bpk-margin-trailing(bpk-spacing-md()); + @include mixins.bpk-margin-trailing(mixins.bpk-spacing-md()); } } - @include bpk-breakpoint-small-tablet { - padding: bpk-spacing-xl(); + @include mixins.bpk-breakpoint-small-tablet { + padding: mixins.bpk-spacing-xl(); justify-content: space-between; @include reset-alignment; - @include bpk-margin-leading(0); + @include mixins.bpk-margin-leading(0); @include fill-parent; &--inverted { @@ -134,72 +134,72 @@ } > * { - @include bpk-margin-leading(0); + @include mixins.bpk-margin-leading(0); } } - @include bpk-breakpoint-small-mobile { - padding: bpk-spacing-lg(); + @include mixins.bpk-breakpoint-small-mobile { + padding: mixins.bpk-spacing-lg(); } } &__tagline { - margin-bottom: bpk-spacing-md(); + margin-bottom: mixins.bpk-spacing-md(); - @include bpk-heading-5; + @include mixins.bpk-heading-5; - @include bpk-breakpoint-tablet { - @include bpk-label-1; + @include mixins.bpk-breakpoint-tablet { + @include mixins.bpk-label-1; } - @include bpk-breakpoint-small-tablet { - @include bpk-subheading; + @include mixins.bpk-breakpoint-small-tablet { + @include mixins.bpk-subheading; } - @include bpk-breakpoint-small-mobile { - @include bpk-label-1; + @include mixins.bpk-breakpoint-small-mobile { + @include mixins.bpk-label-1; } } &__headline { - @include bpk-breakpoint-above-tablet { - @include bpk-hero-5; + @include mixins.bpk-breakpoint-above-tablet { + @include mixins.bpk-hero-5; &:not(:last-child) { - margin-bottom: bpk-spacing-md(); + margin-bottom: mixins.bpk-spacing-md(); } } - @include bpk-breakpoint-tablet { - @include bpk-heading-1; + @include mixins.bpk-breakpoint-tablet { + @include mixins.bpk-heading-1; &:not(:last-child) { - margin-bottom: bpk-spacing-md(); + margin-bottom: mixins.bpk-spacing-md(); } } - @include bpk-breakpoint-small-tablet { - margin-bottom: bpk-spacing-md(); + @include mixins.bpk-breakpoint-small-tablet { + margin-bottom: mixins.bpk-spacing-md(); } - @include bpk-breakpoint-mobile { - @include bpk-heading-2; + @include mixins.bpk-breakpoint-mobile { + @include mixins.bpk-heading-2; } } &__subheading { - @include bpk-body-default; + @include mixins.bpk-body-default; - @include bpk-breakpoint-tablet { - @include bpk-heading-5; + @include mixins.bpk-breakpoint-tablet { + @include mixins.bpk-heading-5; } - @include bpk-breakpoint-small-tablet { - @include bpk-heading-3; + @include mixins.bpk-breakpoint-small-tablet { + @include mixins.bpk-heading-3; } - @include bpk-breakpoint-mobile { - @include bpk-heading-5; + @include mixins.bpk-breakpoint-mobile { + @include mixins.bpk-heading-5; } } @@ -210,15 +210,15 @@ @include text-alignment; - @include bpk-breakpoint-above-tablet { + @include mixins.bpk-breakpoint-above-tablet { width: 22.5rem; } - @include bpk-breakpoint-tablet { + @include mixins.bpk-breakpoint-tablet { width: 20rem; } - @include bpk-breakpoint-small-tablet { + @include mixins.bpk-breakpoint-small-tablet { width: initial; @include reset-alignment; @@ -227,29 +227,29 @@ &__sponsor-content { display: flex; - margin-bottom: bpk-spacing-base(); + margin-bottom: mixins.bpk-spacing-base(); flex-direction: column; - @include bpk-breakpoint-small-tablet { + @include mixins.bpk-breakpoint-small-tablet { margin-bottom: initial; } } &__sponsor-label { - margin-bottom: bpk-spacing-sm(); + margin-bottom: mixins.bpk-spacing-sm(); - @include bpk-label-1; + @include mixins.bpk-label-1; - @include bpk-breakpoint-small-tablet { - margin-bottom: bpk-spacing-md(); + @include mixins.bpk-breakpoint-small-tablet { + margin-bottom: mixins.bpk-spacing-md(); - @include bpk-heading-3; + @include mixins.bpk-heading-3; } - @include bpk-breakpoint-small-mobile { - margin-bottom: bpk-spacing-sm(); + @include mixins.bpk-breakpoint-small-mobile { + margin-bottom: mixins.bpk-spacing-sm(); - @include bpk-label-1; + @include mixins.bpk-label-1; } } @@ -261,9 +261,9 @@ } &__cta { - margin-top: bpk-spacing-xl(); + margin-top: mixins.bpk-spacing-xl(); - @include bpk-breakpoint-small-tablet { + @include mixins.bpk-breakpoint-small-tablet { 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 63bdbbe3cd..7cf1b4552e 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-next'; +@use '../../bpk-mixins-next' as mixins; .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(mixins.$bpk-status-danger-spot-day, 0.3) 0, + transparent mixins.$bpk-one-pixel-rem ) repeat left 0; - background-size: bpk-spacing-sm() bpk-spacing-sm(); + background-size: mixins.bpk-spacing-sm() mixins.bpk-spacing-sm(); pointer-events: none; } diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss index 4ac8470ab3..e5adf8a213 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss @@ -16,15 +16,15 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-horizontal-nav { &--show-default-underline { - @include bpk-border-bottom-sm($bpk-line-day, ''); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-day, ''); } &--show-light-underline { - @include bpk-border-bottom-sm($bpk-line-day, ''); + @include mixins.bpk-border-bottom-sm(mixins.$bpk-line-day, ''); } &__list { diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss index 1a1794034b..46771fb2fe 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-horizontal-nav { &__item { @@ -32,7 +32,8 @@ &__link { display: inline-block; display: flex; - padding: (bpk-spacing-base() - (2 * $bpk-one-pixel-rem)) bpk-spacing-lg(); + padding: (mixins.bpk-spacing-base() - (2 * mixins.$bpk-one-pixel-rem)) + mixins.bpk-spacing-lg(); border: 0; border-radius: 0; background: none; @@ -41,70 +42,74 @@ fill: currentcolor; &--default { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-horizontal-nav-link-color, - $bpk-text-secondary-day + mixins.$bpk-text-secondary-day ); - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-surface-highlight-day); - @include bpk-themeable-property( + @include mixins.bpk-hover { + @include mixins.bpk-border-bottom-xl( + mixins.$bpk-surface-highlight-day + ); + @include mixins.bpk-themeable-property( color, --bpk-horizontal-nav-link-hover-color, - $bpk-text-secondary-day + mixins.$bpk-text-secondary-day ); } &:active { - @include bpk-border-bottom-xl($bpk-line-day); - @include bpk-themeable-property( + @include mixins.bpk-border-bottom-xl(mixins.$bpk-line-day); + @include mixins.bpk-themeable-property( color, --bpk-horizontal-nav-link-active-color, - $bpk-text-secondary-day + mixins.$bpk-text-secondary-day ); } &-disabled { - color: $bpk-text-disabled-day; + color: mixins.$bpk-text-disabled-day; cursor: not-allowed; &:active { - color: $bpk-text-disabled-day; + color: mixins.$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 mixins.bpk-border-bottom-xl( + mixins.$bpk-horizontal-nav-bar-selected-color + ); + @include mixins.bpk-border-bottom-xl( var( --bpk-horizontal-nav-bar-selected-color, - $bpk-horizontal-nav-bar-selected-color + mixins.$bpk-horizontal-nav-bar-selected-color ) ); - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-horizontal-nav-link-selected-color, - $bpk-text-link-day + mixins.$bpk-text-link-day ); - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color); - @include bpk-border-bottom-xl( + @include mixins.bpk-hover { + @include mixins.bpk-border-bottom-xl(mixins.$bpk-horizontal-nav-bar-selected-color); + @include mixins.bpk-border-bottom-xl( var( --bpk-horizontal-nav-bar-selected-color, - $bpk-horizontal-nav-bar-selected-color + mixins.$bpk-horizontal-nav-bar-selected-color ) ); } &:active { - @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color); - @include bpk-border-bottom-xl( + @include mixins.bpk-border-bottom-xl(mixins.$bpk-horizontal-nav-bar-selected-color); + @include mixins.bpk-border-bottom-xl( var( --bpk-horizontal-nav-bar-selected-color, - $bpk-horizontal-nav-bar-selected-color + mixins.$bpk-horizontal-nav-bar-selected-color ) ); } @@ -112,37 +117,37 @@ } &--light { - color: $bpk-text-on-dark-day; + color: mixins.$bpk-text-on-dark-day; - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include mixins.bpk-hover { + @include mixins.bpk-border-bottom-xl(mixins.$bpk-text-on-dark-day); } &:active { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include mixins.bpk-border-bottom-xl(mixins.$bpk-text-on-dark-day); } &-disabled { - color: $bpk-text-disabled-day; + color: mixins.$bpk-text-disabled-day; cursor: not-allowed; &:active { - color: $bpk-text-disabled-day; + color: mixins.$bpk-text-disabled-day; box-shadow: unset; } } &-selected { - color: $bpk-text-on-dark-day; + color: mixins.$bpk-text-on-dark-day; - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include mixins.bpk-border-bottom-xl(mixins.$bpk-text-on-dark-day); - @include bpk-hover { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include mixins.bpk-hover { + @include mixins.bpk-border-bottom-xl(mixins.$bpk-text-on-dark-day); } &:active { - @include bpk-border-bottom-xl($bpk-text-on-dark-day); + @include mixins.bpk-border-bottom-xl(mixins.$bpk-text-on-dark-day); } } } diff --git a/packages/bpk-component-icon/src/BpkIcon.module.scss b/packages/bpk-component-icon/src/BpkIcon.module.scss index 7d405ba9e8..633cbaa1b9 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-icon { &--align-to-button { - @include bpk-icon-sm--align-to-button; + @include mixins.bpk-icon-sm--align-to-button; } &--align-to-large-button { - @include bpk-icon-lg--align-to-large-button; + @include mixins.bpk-icon-lg--align-to-large-button; } &--rtl-support { - @include bpk-icon--rtl-support; + @include mixins.bpk-icon--rtl-support; } } diff --git a/packages/bpk-component-icon/src/withDescription.module.scss b/packages/bpk-component-icon/src/withDescription.module.scss index 2feb41a8cb..809ad2a1ed 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-icon-description { - @include bpk-visually-hidden; + @include mixins.bpk-visually-hidden; } diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.module.scss b/packages/bpk-component-image/src/BpkBackgroundImage.module.scss index 2ea7d79221..32dba09cdf 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage.module.scss +++ b/packages/bpk-component-image/src/BpkBackgroundImage.module.scss @@ -16,20 +16,20 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; -@import './bpkImageMixins.scss'; +@use '../../bpk-mixins-next' as mixins; +@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 +41,6 @@ } &--no-background { - @include bpk-image--no-background; + @include bpkImageMixins.bpk-image--no-background; } } diff --git a/packages/bpk-component-image/src/BpkImage.module.scss b/packages/bpk-component-image/src/BpkImage.module.scss index 6cbd023e8b..9b5ce0de62 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-next'; -@import './bpkImageMixins.scss'; +@use '../../bpk-mixins-next' as mixins; +@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 mixins.bpk-border-radius-sm; } } diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss index 25f19a25ab..926908d4f5 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-sentinel { // this is necessary for when the user doesn't define a custom loading component width: 100%; - height: bpk-spacing-lg(); + height: mixins.bpk-spacing-lg(); } diff --git a/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss b/packages/bpk-component-info-banner/src/BpkAnimateAndFade.module.scss index 3610d273ff..21550568e4 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-animate-and-fade { $invisible: 0.01; &--enter { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: mixins.$bpk-duration-sm; } &--enter-active { @@ -32,19 +32,19 @@ } &--leave { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: 1; } &--leave-active { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: $invisible; } &--appear { - transition: opacity $bpk-duration-sm ease-in-out; + transition: opacity mixins.$bpk-duration-sm ease-in-out; opacity: $invisible; - transition-delay: $bpk-duration-sm; + transition-delay: mixins.$bpk-duration-sm; } &--appear-active { diff --git a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss index afb61136ae..1093af0bf9 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss +++ b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss @@ -16,22 +16,22 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-info-banner { - padding: bpk-spacing-md() bpk-spacing-base(); + padding: mixins.bpk-spacing-md() mixins.bpk-spacing-base(); overflow: hidden; - @include bpk-border-radius-sm; - @include bpk-text; - @include bpk-footnote; + @include mixins.bpk-border-radius-sm; + @include mixins.bpk-text; + @include mixins.bpk-footnote; &--style-default { - background-color: $bpk-private-info-banner-default-day; + background-color: mixins.$bpk-private-info-banner-default-day; } &--style-onContrast { - background-color: $bpk-private-info-banner-on-contrast-day; + background-color: mixins.$bpk-private-info-banner-on-contrast-day; } &__header { @@ -46,28 +46,28 @@ &__icon, &__toggle { - padding: bpk-spacing-sm() / 2 0; + padding: mixins.bpk-spacing-sm() * 0.5 0; } &__message { - padding: bpk-spacing-sm() bpk-spacing-md(); + padding: mixins.bpk-spacing-sm() mixins.bpk-spacing-md(); flex-grow: 1; } &__success-icon { - fill: $bpk-private-info-banner-success-day; + fill: mixins.$bpk-private-info-banner-success-day; } &__warning-icon { - fill: $bpk-private-info-banner-warning-day; + fill: mixins.$bpk-private-info-banner-warning-day; } &__error-icon { - fill: $bpk-private-info-banner-error-day; + fill: mixins.$bpk-private-info-banner-error-day; } &__info-icon { - fill: $bpk-text-secondary-day; + fill: mixins.$bpk-text-secondary-day; } &__toggle-button { @@ -79,7 +79,7 @@ } &__expand-icon { - fill: $bpk-text-secondary-day; + fill: mixins.$bpk-text-secondary-day; &--flipped { transform: scaleY(-1); @@ -87,20 +87,20 @@ } &__children-container { - color: $bpk-text-primary-day; + color: mixins.$bpk-text-primary-day; - @include bpk-footnote; + @include mixins.bpk-footnote; &--with-action { - padding: bpk-spacing-sm() 0 bpk-spacing-sm(); + padding: mixins.bpk-spacing-sm() 0 mixins.bpk-spacing-sm(); } &--no-action { - padding: bpk-spacing-sm() 0 bpk-spacing-md(); + padding: mixins.bpk-spacing-sm() 0 mixins.bpk-spacing-md(); } } &__expandable-action { - padding-bottom: bpk-spacing-sm(); + padding-bottom: mixins.bpk-spacing-sm(); } } diff --git a/packages/bpk-component-input/src/BpkClearButton.module.scss b/packages/bpk-component-input/src/BpkClearButton.module.scss index d1916e18a5..cdbdcefa54 100644 --- a/packages/bpk-component-input/src/BpkClearButton.module.scss +++ b/packages/bpk-component-input/src/BpkClearButton.module.scss @@ -16,22 +16,22 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-clear-button { padding: 0; border: 0; background-color: transparent; - color: $bpk-text-secondary-day; + color: mixins.$bpk-text-secondary-day; cursor: pointer; appearance: none; - @include bpk-hover { - color: $bpk-text-primary-day; + @include mixins.bpk-hover { + color: mixins.$bpk-text-primary-day; } &:active { - color: $bpk-text-primary-day; + color: mixins.$bpk-text-primary-day; } &__icon { diff --git a/packages/bpk-component-input/src/BpkInput.module.scss b/packages/bpk-component-input/src/BpkInput.module.scss index 73179cf7af..7445505c4b 100644 --- a/packages/bpk-component-input/src/BpkInput.module.scss +++ b/packages/bpk-component-input/src/BpkInput.module.scss @@ -16,19 +16,19 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-input { - @include bpk-input; + @include mixins.bpk-input; &__container { - @include bpk-input__container; + @include mixins.bpk-input__container; } &__clear-button { display: none; - @include bpk-input__clear-button; + @include mixins.bpk-input__clear-button; &--persistent { display: inherit; @@ -36,15 +36,15 @@ } &--valid { - @include bpk-input--valid; + @include mixins.bpk-input--valid; } &--invalid { - @include bpk-input--invalid; + @include mixins.bpk-input--invalid; } &--clearable { - @include bpk-input--clearable; + @include mixins.bpk-input--clearable; // Display the clear button when a clearable input is focused. &:focus + .bpk-input__clear-button { @@ -53,28 +53,28 @@ } &--large { - @include bpk-input--large; + @include mixins.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: mixins.$bpk-input-background; } &--docked { - @include bpk-input--docked; + @include mixins.bpk-input--docked; &-first { - @include bpk-input--docked-first-child; + @include mixins.bpk-input--docked-first-child; } &-middle { - @include bpk-input--docked-middle-child; + @include mixins.bpk-input--docked-middle-child; } &-last { - @include bpk-input--docked-last-child; + @include mixins.bpk-input--docked-last-child; } } diff --git a/packages/bpk-component-label/src/BpkLabel.module.scss b/packages/bpk-component-label/src/BpkLabel.module.scss index c6ec198e7a..fb62847814 100644 --- a/packages/bpk-component-label/src/BpkLabel.module.scss +++ b/packages/bpk-component-label/src/BpkLabel.module.scss @@ -16,32 +16,32 @@ * limitations under the License. */ -@import '../../bpk-mixins-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-label { - @include bpk-label; + @include mixins.bpk-label; &--white { - @include bpk-label--white; + @include mixins.bpk-label--white; } &--invalid { - @include bpk-label--invalid; + @include mixins.bpk-label--invalid; } &--disabled { - @include bpk-label--disabled; + @include mixins.bpk-label--disabled; &--white { - color: $bpk-text-disabled-on-dark-day; + color: mixins.$bpk-text-disabled-on-dark-day; } } &__asterisk { - @include bpk-themeable-property( + @include mixins.bpk-themeable-property( color, --bpk-form-validation-text-color, - $bpk-form-validation-color + mixins.$bpk-form-validation-color ); } } diff --git a/packages/bpk-component-link/src/BpkLink.module.scss b/packages/bpk-component-link/src/BpkLink.module.scss index a49f2ab521..1ff59e945e 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-link { - @include bpk-link; + @include mixins.bpk-link; &--active { - @include bpk-link--active; + @include mixins.bpk-link--active; } &--alternate { - @include bpk-link--alternate; + @include mixins.bpk-link--alternate; } } diff --git a/packages/bpk-component-list/src/BpkList.module.scss b/packages/bpk-component-list/src/BpkList.module.scss index 982bd50047..1893c30f17 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-next'; +@use '../../bpk-mixins-next' as mixins; .bpk-list { - @include bpk-list; + @include mixins.bpk-list; &__item { - @include bpk-list-item; + @include mixins.bpk-list-item; } & & { - @include bpk-list--nested; + @include mixins.bpk-list--nested; /* stylelint-disable selector-max-compound-selectors */ diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss index 8776ea3015..da0179ee8b 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-next'; +@use '../../bpk-mixins-next' as mixins; .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: mixins.bpk-spacing-base() * 2; + $button-padding-y: mixins.bpk-spacing-lg() * 0.5; + $button-large-padding-y: mixins.bpk-spacing-lg(); + $button-icon-only-padding-x: mixins.$bpk-button-height - + mixins.$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: mixins.$bpk-button-large-height - + mixins.$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.scss b/packages/bpk-component-map/src/BpkIconMarker.module.scss index 6ec1318fbd..26a82e691a 100644 --- a/packages/bpk-component-map/src/BpkIconMarker.module.scss +++ b/packages/bpk-component-map/src/BpkIconMarker.module.scss @@ -20,7 +20,8 @@ /* stylelint-disable unit-disallowed-list */ -@import '../../bpk-mixins-next'; +@use 'sass:math'; +@use '../../bpk-mixins-next' as mixins; .bpk-icon-marker { $marker-width: 26px; @@ -34,23 +35,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