@skyscanner/backpack-web 38.22.0 → 39.0.0

package/unstable__bpk-mixins/_badges.scss

@@ -1,240 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT 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-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;
-}

package/unstable__bpk-mixins/_borders.scss

@@ -1,268 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT 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);
-}