@skyscanner/backpack-web 0.0.1

package/bpk-component-pagination/src/BpkPagination.js

@@ -0,0 +1,101 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import { cssModules } from 'bpk-react-utils';
+
+import BpkPaginationList from './BpkPaginationList';
+import BpkPaginationNudger from './BpkPaginationNudger';
+import STYLES from './BpkPagination.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const handlePageChange = (onPageChange, pageCount) => (nextPageIndex) => {
+  if (onPageChange && nextPageIndex < pageCount && nextPageIndex >= 0) {
+    onPageChange(nextPageIndex);
+  }
+};
+
+const BpkPagination = (props) => {
+  const classNames = [getClassName('bpk-pagination')];
+  const {
+    className,
+    nextLabel,
+    onPageChange,
+    pageCount,
+    pageLabel,
+    paginationLabel,
+    previousLabel,
+    selectedPageIndex,
+    visibleRange,
+    ...rest
+  } = props;
+
+  if (className) {
+    classNames.push(getClassName(className));
+  }
+
+  const pageChanged = handlePageChange(onPageChange, pageCount);
+
+  const hasPreviousPage = selectedPageIndex !== 0;
+  const hasNextPage = selectedPageIndex !== pageCount - 1;
+
+  return (
+    <nav className={classNames.join('')} aria-label={paginationLabel} {...rest}>
+      <BpkPaginationNudger
+        label={previousLabel}
+        onNudge={() => pageChanged(selectedPageIndex - 1)}
+        disabled={!hasPreviousPage}
+      />
+      <BpkPaginationList
+        selectedPageIndex={selectedPageIndex}
+        pageCount={pageCount}
+        onPageChange={pageChanged}
+        visibleRange={visibleRange}
+        pageLabel={pageLabel}
+      />
+      <BpkPaginationNudger
+        label={nextLabel}
+        onNudge={() => pageChanged(selectedPageIndex + 1)}
+        forward
+        disabled={!hasNextPage}
+      />
+    </nav>
+  );
+};
+
+BpkPagination.propTypes = {
+  selectedPageIndex: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func,
+  pageCount: PropTypes.number.isRequired,
+  previousLabel: PropTypes.string.isRequired,
+  nextLabel: PropTypes.string.isRequired,
+  paginationLabel: PropTypes.string.isRequired,
+  pageLabel: PropTypes.func.isRequired,
+  visibleRange: PropTypes.number,
+  className: PropTypes.string,
+};
+
+BpkPagination.defaultProps = {
+  onPageChange: null,
+  visibleRange: 3,
+  className: null,
+};
+
+export default BpkPagination;

package/bpk-component-pagination/src/BpkPagination.module.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.
+*/
+.bpk-pagination{display:flex;justify-content:center}

package/bpk-component-pagination/src/BpkPagination.module.scss

@@ -0,0 +1,22 @@
+/*
+ * 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;
+}

package/bpk-component-pagination/src/BpkPaginationBreak.js

@@ -0,0 +1,35 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+
+const BpkPaginationBreak = (props) => {
+  const { breakLabel } = props;
+  return <div>{breakLabel}</div>;
+};
+
+BpkPaginationBreak.propTypes = {
+  breakLabel: PropTypes.string,
+};
+
+BpkPaginationBreak.defaultProps = {
+  breakLabel: '...',
+};
+
+export default BpkPaginationBreak;

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -0,0 +1,100 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
+
+import BpkPaginationPage from './BpkPaginationPage';
+import BpkPaginationBreak from './BpkPaginationBreak';
+import STYLES from './BpkPaginationList.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkPaginationList = (props) => {
+  const {
+    onPageChange,
+    pageCount,
+    pageLabel,
+    selectedPageIndex,
+    visibleRange,
+  } = props;
+
+  const shoulderRange = Math.ceil(visibleRange / 2);
+  const isFirstPageSelected = selectedPageIndex === 0;
+  const isLastPageSelected = selectedPageIndex === pageCount - 1;
+  const displayRange =
+    isFirstPageSelected || isLastPageSelected
+      ? shoulderRange + 1
+      : shoulderRange;
+
+  const children = new Array(pageCount)
+    .fill(undefined)
+    .map((_, i) => {
+      const isFirstPage = i === 0;
+      const isLastPage = i === pageCount - 1;
+      const isFirstPageInRange =
+        i === selectedPageIndex - displayRange && !isFirstPage;
+      const isLastPageInRange =
+        i === selectedPageIndex + displayRange && !isLastPage;
+      const isPageOutOfRange =
+        i < selectedPageIndex - displayRange ||
+        i > selectedPageIndex + displayRange;
+
+      let pageView = null;
+      if (isFirstPageInRange || isLastPageInRange) {
+        pageView = <BpkPaginationBreak />;
+      } else if (!isPageOutOfRange || isFirstPage || isLastPage) {
+        pageView = (
+          <BpkPaginationPage
+            page={i + 1}
+            onSelect={() => onPageChange(i)}
+            isSelected={selectedPageIndex === i}
+            pageLabel={pageLabel}
+          />
+        );
+      }
+
+      if (pageView !== null) {
+        return (
+          <li
+            key={i} // eslint-disable-line react/no-array-index-key
+            className={getClassName('bpk-pagination-page-list__item')}
+          >
+            {pageView}
+          </li>
+        );
+      }
+      return null;
+    })
+    .filter((page) => !!page);
+
+  return (
+    <ul className={getClassName('bpk-pagination-page-list')}>{children}</ul>
+  );
+};
+
+BpkPaginationList.propTypes = {
+  selectedPageIndex: PropTypes.number.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  visibleRange: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  pageLabel: PropTypes.func.isRequired,
+};
+
+export default BpkPaginationList;

package/bpk-component-pagination/src/BpkPaginationList.module.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-page-list{display:flex;margin:0;padding:0;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}

package/bpk-component-pagination/src/BpkPaginationList.module.scss

@@ -0,0 +1,45 @@
+/*
+ * 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 '~bpk-mixins/index';
+
+$bpk-spacing-v2: true;
+
+.bpk-pagination-page-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &__item {
+    margin-right: bpk-spacing-md();
+
+    @include bpk-rtl {
+      margin-right: 0;
+      margin-left: bpk-spacing-md();
+
+      &:last-child {
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -0,0 +1,77 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
+import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
+import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
+
+import STYLES from './BpkPaginationNudger.module.scss';
+
+const getClassName = cssModules(STYLES);
+const AlignedArrowLeftIcon = withButtonAlignment(withRtlSupport(ArrowLeftIcon));
+const AlignedArrowRightIcon = withButtonAlignment(
+  withRtlSupport(ArrowRightIcon),
+);
+
+const nudgerIcon = (forward) =>
+  forward ? (
+    <AlignedArrowRightIcon
+      className={getClassName('bpk-pagination-nudger__icon')}
+    />
+  ) : (
+    <AlignedArrowLeftIcon
+      className={getClassName('bpk-pagination-nudger__icon')}
+    />
+  );
+
+const BpkPaginationNudger = (props) => {
+  const { disabled, forward, label, onNudge } = props;
+
+  return (
+    <div className={getClassName('bpk-pagination-nudger')}>
+      <button
+        type="button"
+        className={getClassName('bpk-pagination-nudger__button')}
+        onClick={onNudge}
+        disabled={disabled}
+      >
+        {nudgerIcon(forward)}
+        <span className={getClassName('bpk-pagination-nudger__text--hidden')}>
+          {label}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+BpkPaginationNudger.propTypes = {
+  label: PropTypes.string.isRequired,
+  onNudge: PropTypes.func.isRequired,
+  forward: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+BpkPaginationNudger.defaultProps = {
+  forward: false,
+  disabled: false,
+};
+
+export default BpkPaginationNudger;

package/bpk-component-pagination/src/BpkPaginationNudger.module.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-nudger{text-align:center;vertical-align:middle}.bpk-pagination-nudger__button{height:2.25rem;padding:0 0.5rem;border:none;background:none;cursor:pointer;appearance:none;color:#0770e3;color:var(--bpk-pagination-nudger-color, #0770e3)}.bpk-no-touch-support .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){color:#042759;color:var(--bpk-pagination-nudger-hover-color, #042759)}:global(.bpk-no-touch-support) .bpk-pagination-nudger__button:hover:not(:active):not(:disabled){color:#042759;color:var(--bpk-pagination-nudger-hover-color, #042759)}.bpk-pagination-nudger__button:active{color:#0770e3;color:var(--bpk-pagination-nudger-active-color, #0770e3)}.bpk-pagination-nudger__button:disabled{color:#dddde5;cursor:not-allowed}.bpk-pagination-nudger__button .bpk-pagination-nudger__icon{fill:currentColor}html[dir='rtl'] .bpk-pagination-nudger__button .bpk-pagination-nudger__icon{transform:scaleX(-1)}.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)}

package/bpk-component-pagination/src/BpkPaginationNudger.module.scss

@@ -0,0 +1,74 @@
+/*
+ * 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 '~bpk-mixins/index';
+
+$bpk-spacing-v2: true;
+
+.bpk-pagination-nudger {
+  text-align: center;
+  vertical-align: middle;
+
+  &__button {
+    height: $bpk-button-height;
+    padding: 0 bpk-spacing-md();
+    border: none;
+    background: none;
+    cursor: pointer;
+    appearance: none;
+
+    @include bpk-themeable-property(
+      color,
+      --bpk-pagination-nudger-color,
+      $bpk-color-sky-blue
+    );
+
+    @include bpk-hover {
+      @include bpk-themeable-property(
+        color,
+        --bpk-pagination-nudger-hover-color,
+        $bpk-color-sky-blue-shade-02
+      );
+    }
+
+    &:active {
+      @include bpk-themeable-property(
+        color,
+        --bpk-pagination-nudger-active-color,
+        $bpk-color-sky-blue
+      );
+    }
+
+    &:disabled {
+      color: $bpk-color-sky-gray-tint-06;
+      cursor: not-allowed;
+    }
+
+    .bpk-pagination-nudger__icon {
+      fill: currentColor;
+
+      @include bpk-icon--rtl-support;
+    }
+  }
+
+  &__text {
+    &--hidden {
+      @include bpk-visually-hidden;
+    }
+  }
+}

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -0,0 +1,60 @@
+/*
+ * 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 BpkButton from 'bpk-component-button';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkPaginationPage.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkPaginationPage = (props) => {
+  const classNames = [getClassName('bpk-pagination-page')];
+  const { isSelected, onSelect, page, pageLabel } = props;
+
+  if (isSelected) {
+    classNames.push(getClassName('bpk-pagination-page--selected'));
+  }
+
+  return (
+    <BpkButton
+      secondary
+      onClick={onSelect}
+      className={classNames.join(' ')}
+      aria-label={pageLabel(page, isSelected)}
+      aria-current={isSelected}
+    >
+      <span>{page}</span>
+    </BpkButton>
+  );
+};
+
+BpkPaginationPage.propTypes = {
+  page: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  pageLabel: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool,
+};
+
+BpkPaginationPage.defaultProps = {
+  isSelected: false,
+};
+
+export default BpkPaginationPage;

package/bpk-component-pagination/src/BpkPaginationPage.module.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-page{min-width:2.25rem;height:2.25rem;padding:0;border-radius:50%}.bpk-pagination-page--selected{background-image:none;color:#fff;box-shadow:none;cursor:auto;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-no-touch-support .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}:global(.bpk-no-touch-support) .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:active{background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:disabled{box-shadow:none}

package/bpk-component-pagination/src/BpkPaginationPage.module.scss

@@ -0,0 +1,90 @@
+/*
+ * 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 '~bpk-mixins/index';
+
+$bpk-spacing-v2: true;
+
+.bpk-pagination-page {
+  min-width: $bpk-button-height;
+  height: $bpk-button-height;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.bpk-pagination-page--selected {
+  background-image: $bpk-button-secondary-background-image;
+  color: $bpk-button-selected-color;
+  box-shadow: $bpk-button-selected-box-shadow;
+  cursor: auto;
+
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-pagination-selected-background-color,
+    $bpk-color-sky-blue-shade-02
+  );
+  @include bpk-border-lg($bpk-color-sky-blue-shade-02);
+  @include bpk-border-lg(
+    var(
+      --bpk-pagination-selected-background-color,
+      $bpk-color-sky-blue-shade-02
+    )
+  );
+
+  @include bpk-hover {
+    background-image: $bpk-button-selected-hover-background-image;
+    color: $bpk-button-selected-hover-color;
+    box-shadow: $bpk-button-selected-hover-box-shadow;
+
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-pagination-selected-background-color,
+      $bpk-color-sky-blue-shade-02
+    );
+    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
+    @include bpk-border-lg(
+      var(
+        --bpk-pagination-selected-background-color,
+        $bpk-color-sky-blue-shade-02
+      )
+    );
+  }
+
+  &:active {
+    background-image: $bpk-button-selected-active-background-image;
+    color: $bpk-button-selected-active-color;
+    box-shadow: $bpk-button-selected-active-box-shadow;
+
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-pagination-selected-background-color,
+      $bpk-color-sky-blue-shade-02
+    );
+    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
+    @include bpk-border-lg(
+      var(
+        --bpk-pagination-selected-background-color,
+        $bpk-color-sky-blue-shade-02
+      )
+    );
+  }
+
+  &:disabled {
+    box-shadow: $bpk-button-selected-disabled-box-shadow;
+  }
+}