@skyscanner/backpack-web 34.1.1 → 34.2.0

package/bpk-component-text/src/BpkText.d.ts

@@ -27,6 +27,9 @@ export declare const TEXT_STYLES: {
     readonly hero3: "hero-3";
     readonly hero4: "hero-4";
     readonly hero5: "hero-5";
+    readonly editorial1: "editorial-1";
+    readonly editorial2: "editorial-2";
+    readonly editorial3: "editorial-3";
 };
 export type TextStyle = (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];
 export type Tag = 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/bpk-component-text/src/BpkText.js

@@ -47,7 +47,10 @@ export const TEXT_STYLES = {
   hero2: 'hero-2',
   hero3: 'hero-3',
   hero4: 'hero-4',
-  hero5: 'hero-5'
+  hero5: 'hero-5',
+  editorial1: 'editorial-1',
+  editorial2: 'editorial-2',
+  editorial3: 'editorial-3'
 };
 const BpkText = ({
   children,

package/bpk-component-text/src/BpkText.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.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:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.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:-0.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}
+.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:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.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:-0.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}

package/bpk-mixins/_typography.scss

@@ -498,6 +498,57 @@
   );
 }
 
+/// Editorial 1 text style
+///
+/// @example scss
+///   .selector {
+///     @include bpk-editorial-1;
+///   }
+
+@mixin bpk-editorial-1 {
+  font-family: $bpk-font-family-larken;
+
+  @include _bpk-text-factory(
+    $bpk-font-size-xxxxl,
+    $bpk-line-height-xxxxl,
+    $bpk-font-weight-light
+  );
+}
+
+/// Editorial 2 text style
+///
+/// @example scss
+///   .selector {
+///     @include bpk-editorial-2;
+///   }
+
+@mixin bpk-editorial-2 {
+  font-family: $bpk-font-family-larken;
+
+  @include _bpk-text-factory(
+    $bpk-font-size-xxl,
+    $bpk-line-height-xxl,
+    $bpk-font-weight-light
+  );
+}
+
+/// Editorial 3 text style
+///
+/// @example scss
+///   .selector {
+///     @include bpk-editorial-3;
+///   }
+
+@mixin bpk-editorial-3 {
+  font-family: $bpk-font-family-larken;
+
+  @include _bpk-text-factory(
+    $bpk-font-size-lg,
+    $bpk-line-height-lg,
+    $bpk-font-weight-book
+  );
+}
+
 /// Hero 1 text style
 ///
 /// @example scss

package/bpk-stylesheets/larken.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT 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:Larken;font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-8371ea16.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-39e53c9a.woff") format("woff")}@font-face{font-family:Larken;font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-3d9dfe29.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-626ee28c.woff") format("woff")}

package/bpk-stylesheets/larken.js

@@ -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.
+ */
+
+import './larken.scss';

package/bpk-stylesheets/larken.scss

@@ -0,0 +1,37 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$base-url: 'https://js.skyscnr.com/sttc/bpk-fonts';
+
+@font-face {
+  font-family: Larken;
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/Larken-Light-8371ea16.woff2') format('woff2'),
+    url('#{$base-url}/Larken-Light-39e53c9a.woff') format('woff');
+}
+
+@font-face {
+  font-family: Larken;
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url('#{$base-url}/Larken-Regular-3d9dfe29.woff2') format('woff2'),
+    url('#{$base-url}/Larken-Regular-626ee28c.woff') format('woff');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.1.1",
+  "version": "34.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-slider": "^1.1.2",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.11.0",
+    "@skyscanner/bpk-foundations-web": "^17.13.0",
     "@skyscanner/bpk-svgs": "^19.3.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",

package/unstable__bpk-mixins/_typography.scss

@@ -498,6 +498,57 @@
   );
 }
 
+/// Editorial 1 text style
+///
+/// @example scss
+///   .selector {
+///     @include bpk-editorial-1;
+///   }
+
+@mixin bpk-editorial-1 {
+  font-family: tokens.$bpk-font-family-larken;
+
+  @include _bpk-text-factory(
+    tokens.$bpk-font-size-xxxxl,
+    tokens.$bpk-line-height-xxxxl,
+    tokens.$bpk-font-weight-light
+  );
+}
+
+/// Editorial 2 text style
+///
+/// @example scss
+///   .selector {
+///     @include bpk-editorial-2;
+///   }
+
+@mixin bpk-editorial-2 {
+  font-family: tokens.$bpk-font-family-larken;
+
+  @include _bpk-text-factory(
+    tokens.$bpk-font-size-xxl,
+    tokens.$bpk-line-height-xxl,
+    tokens.$bpk-font-weight-light
+  );
+}
+
+/// Editorial 3 text style
+///
+/// @example scss
+///   .selector {
+///     @include bpk-editorial-3;
+///   }
+
+@mixin bpk-editorial-3 {
+  font-family: tokens.$bpk-font-family-larken;
+
+  @include _bpk-text-factory(
+    tokens.$bpk-font-size-lg,
+    tokens.$bpk-line-height-lg,
+    tokens.$bpk-font-weight-book
+  );
+}
+
 /// Hero 1 text style
 ///
 /// @example scss