@skyscanner/backpack-web 38.21.0 → 39.0.0

package/unstable__bpk-mixins/_buttons.scss

@@ -1,587 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT 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--implicit;
-
-  &::after {
-    bottom: auto;
-  }
-
-  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;
-  }
-}
-
-/// Full width button. Modifies the bpk-button to horizontally fill its container
-///
-/// @require {mixin} bpk-button
-///
-/// @example scss
-///   .selector {
-///     @include bpk-button();
-///     @include bpk-button--full-width();
-///   }
-
-@mixin bpk-button--full-width {
-  display: block;
-  width: 100%;
-}

package/unstable__bpk-mixins/_cards.scss

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