@skyscanner/backpack-web 41.10.0 → 41.11.1-beta.1

package/bpk-mixins/_surfaces.scss

@@ -0,0 +1,52 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT 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';
+
+////
+/// @group surfaces
+////
+
+// Keys must stay in sync with bpk-react-utils/src/surfaceColors.ts
+$bpk-surface-bg-colors: (
+  'surface-default': tokens.$bpk-surface-default-day,
+  'surface-elevated': tokens.$bpk-surface-elevated-day,
+  'surface-hero': tokens.$bpk-surface-hero-day,
+  'surface-contrast': tokens.$bpk-surface-contrast-day,
+  'surface-highlight': tokens.$bpk-surface-highlight-day,
+  'surface-subtle': tokens.$bpk-surface-subtle-day,
+  'surface-low-contrast': tokens.$bpk-surface-low-contrast-day,
+  'surface-tint': tokens.$bpk-surface-tint-day,
+);
+
+/// Generates background-color modifier classes for all surface colors.
+///
+/// @example scss
+///   .bpk-panel {
+///     @include bpk-surface-bg-colors;
+///   }
+
+@mixin bpk-surface-bg-colors {
+  @each $color-name, $color-value in $bpk-surface-bg-colors {
+    &--#{$color-name} {
+      background-color: $color-value;
+    }
+  }
+}

package/bpk-react-utils/index.d.ts

@@ -7,9 +7,11 @@ import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection
 import { getDataComponentAttribute } from './src/getDataComponentAttribute';
 import isRTL from './src/isRTL';
 import { setNativeValue } from './src/nativeEventHandler';
+import { SURFACE_COLORS } from './src/surfaceColors';
 import withDefaultProps from './src/withDefaultProps';
 import wrapDisplayName from './src/wrapDisplayName';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, };
+export type { SurfaceBgColor } from './src/surfaceColors';
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS, };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -43,5 +45,15 @@ declare const _default: {
     getDataComponentAttribute: (componentName: string) => {
         "data-backpack-ds-component": string;
     };
+    SURFACE_COLORS: {
+        readonly surfaceDefault: "surface-default";
+        readonly surfaceElevated: "surface-elevated";
+        readonly surfaceHero: "surface-hero";
+        readonly surfaceContrast: "surface-contrast";
+        readonly surfaceHighlight: "surface-highlight";
+        readonly surfaceSubtle: "surface-subtle";
+        readonly surfaceLowContrast: "surface-low-contrast";
+        readonly surfaceTint: "surface-tint";
+    };
 };
 export default _default;

package/bpk-react-utils/index.js

@@ -26,9 +26,10 @@ import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection
 import { getDataComponentAttribute } from "./src/getDataComponentAttribute";
 import isRTL from "./src/isRTL";
 import { setNativeValue } from "./src/nativeEventHandler";
+import { SURFACE_COLORS } from "./src/surfaceColors";
 import withDefaultProps from "./src/withDefaultProps";
 import wrapDisplayName from "./src/wrapDisplayName";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS };
 export default {
   Portal,
   TransitionInitialMount,
@@ -42,5 +43,6 @@ export default {
   isRTL,
   BpkDialogWrapper,
   setNativeValue,
-  getDataComponentAttribute
+  getDataComponentAttribute,
+  SURFACE_COLORS
 };

package/bpk-react-utils/src/surfaceColors.d.ts

@@ -0,0 +1,11 @@
+export declare const SURFACE_COLORS: {
+    readonly surfaceDefault: "surface-default";
+    readonly surfaceElevated: "surface-elevated";
+    readonly surfaceHero: "surface-hero";
+    readonly surfaceContrast: "surface-contrast";
+    readonly surfaceHighlight: "surface-highlight";
+    readonly surfaceSubtle: "surface-subtle";
+    readonly surfaceLowContrast: "surface-low-contrast";
+    readonly surfaceTint: "surface-tint";
+};
+export type SurfaceBgColor = (typeof SURFACE_COLORS)[keyof typeof SURFACE_COLORS];

package/bpk-react-utils/src/surfaceColors.js

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Values must stay in sync with bpk-mixins/_surfaces.scss
+export const SURFACE_COLORS = {
+  surfaceDefault: 'surface-default',
+  surfaceElevated: 'surface-elevated',
+  surfaceHero: 'surface-hero',
+  surfaceContrast: 'surface-contrast',
+  surfaceHighlight: 'surface-highlight',
+  surfaceSubtle: 'surface-subtle',
+  surfaceLowContrast: 'surface-low-contrast',
+  surfaceTint: 'surface-tint'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.10.0",
+  "version": "41.11.1-beta.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",