[KOA-6229] Add viewBox to icons and migrate all final components to t…

…he new spacing grid (#2963) * Update spacing in examples * Update icons and spacing grid * Update snapshots
Skyscanner · Aug 11, 2023 · e123ea0 · e123ea0
1 parent 99bfd2e
commit e123ea0
Show file tree

Hide file tree

Showing 151 changed files with 1,206 additions and 4,596 deletions.
diff --git a/examples/bpk-component-aria-live/examples.module.css b/examples/bpk-component-aria-live/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-storybook-aria-live-demo{padding:.75rem;background:#eff1f2;color:#161616;box-shadow:0 0 0 1px #c2c9cd inset;border-radius:.5rem}.bpk-storybook-aria-live-demo__chips-wrapper{margin-bottom:.75rem}.bpk-storybook-aria-live-demo__select-wrapper{display:flex;margin-bottom:.75rem;justify-content:space-between;align-items:center}.bpk-storybook-aria-live-demo__select{flex:0.5}.bpk-storybook-aria-live-demo__switch{flex:0.3}.bpk-storybook-aria-live-demo__chip{margin-right:.75rem;margin-bottom:.75rem}.bpk-storybook-aria-live-demo__aria-live{margin-top:.75rem}.bpk-storybook-aria-live-demo>p{margin-top:0;margin-bottom:1rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-storybook-aria-live-demo{padding:1rem;background:#eff1f2;color:#161616;box-shadow:0 0 0 1px #c2c9cd inset;border-radius:.5rem}.bpk-storybook-aria-live-demo__chips-wrapper{margin-bottom:1rem}.bpk-storybook-aria-live-demo__select-wrapper{display:flex;margin-bottom:1rem;justify-content:space-between;align-items:center}.bpk-storybook-aria-live-demo__select{flex:0.5}.bpk-storybook-aria-live-demo__switch{flex:0.3}.bpk-storybook-aria-live-demo__chip{margin-right:1rem;margin-bottom:1rem}.bpk-storybook-aria-live-demo__aria-live{margin-top:1rem}.bpk-storybook-aria-live-demo>p{margin-top:0;margin-bottom:1rem}
diff --git a/examples/bpk-component-aria-live/examples.module.scss b/examples/bpk-component-aria-live/examples.module.scss
@@ -19,20 +19,20 @@
 @import '../../packages/bpk-mixins/index.scss';
 
 .bpk-storybook-aria-live-demo {
-  padding: $bpk-spacing-sm;
+  padding: bpk-spacing-base();
   background: $bpk-canvas-contrast-day;
   color: $bpk-text-primary-day;
 
   @include bpk-border-sm($bpk-line-day);
   @include bpk-border-radius-sm;
 
   &__chips-wrapper {
-    margin-bottom: $bpk-spacing-sm;
+    margin-bottom: bpk-spacing-base();
   }
 
   &__select-wrapper {
     display: flex;
-    margin-bottom: $bpk-spacing-sm;
+    margin-bottom: bpk-spacing-base();
     justify-content: space-between;
     align-items: center;
   }
@@ -46,12 +46,12 @@
   }
 
   &__chip {
-    margin-right: $bpk-spacing-sm;
-    margin-bottom: $bpk-spacing-sm;
+    margin-right: bpk-spacing-base();
+    margin-bottom: bpk-spacing-base();
   }
 
   &__aria-live {
-    margin-top: $bpk-spacing-sm;
+    margin-top: bpk-spacing-base();
   }
 
   > p {

diff --git a/examples/bpk-component-badge/BpkBadgeLayout.module.scss b/examples/bpk-component-badge/BpkBadgeLayout.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-badge-layout {
   &__container {
     position: relative;

diff --git a/examples/bpk-component-banner-alert/examples.module.scss b/examples/bpk-component-banner-alert/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-banner-alert-examples {
   &__component {
     margin-top: bpk-spacing-base();

diff --git a/examples/bpk-component-barchart/examples.module.css b/examples/bpk-component-barchart/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-heading{margin-bottom:.75rem}.bpk-barchart-custom-scrollers{background:#eff1f2}.bpk-barchart-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #eff1f2, rgba(239,241,242,0));pointer-events:none;left:0}.bpk-barchart-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #eff1f2, rgba(239,241,242,0));pointer-events:none;right:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-heading{margin-bottom:1rem}.bpk-barchart-custom-scrollers{background:#eff1f2}.bpk-barchart-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #eff1f2, rgba(239,241,242,0));pointer-events:none;left:0}.bpk-barchart-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #eff1f2, rgba(239,241,242,0));pointer-events:none;right:0}
diff --git a/examples/bpk-component-barchart/examples.module.scss b/examples/bpk-component-barchart/examples.module.scss
@@ -19,7 +19,7 @@
 @import '../../packages/bpk-mixins/index.scss';
 
 .bpk-heading {
-  margin-bottom: $bpk-spacing-sm;
+  margin-bottom: bpk-spacing-base();
 }
 
 $custom-color: $bpk-canvas-contrast-day;

diff --git a/examples/bpk-component-breakpoint/examples.module.scss b/examples/bpk-component-breakpoint/examples.module.scss
@@ -23,14 +23,14 @@
   overflow: hidden;
 
   &--active {
-    padding: $bpk-spacing-base;
+    padding: bpk-spacing-lg();
     color: $bpk-text-primary-inverse-day;
 
     @include bpk-apply-primary-color-to(background-color);
   }
 
   &--inactive {
-    padding: $bpk-spacing-base;
+    padding: bpk-spacing-lg();
     background-color: $bpk-surface-highlight-day;
   }
 }
diff --git a/examples/bpk-component-button/BpkButtonStory.module.css b/examples/bpk-component-button/BpkButtonStory.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button-story-wrapper{padding:.375rem 0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button-story-wrapper{padding:0.25rem 0}
diff --git a/examples/bpk-component-button/BpkButtonStory.module.scss b/examples/bpk-component-button/BpkButtonStory.module.scss
@@ -19,5 +19,5 @@
 @import '../../packages/bpk-mixins/index.scss';
 
 .bpk-button-story-wrapper {
-  padding: $bpk-spacing-xs 0;
+  padding: bpk-spacing-sm() 0;
 }
diff --git a/examples/bpk-component-dialog/examples.module.scss b/examples/bpk-component-dialog/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-dialog-paragraph {
   margin-bottom: bpk-spacing-md();
 }
diff --git a/examples/bpk-component-drawer/examples.module.scss b/examples/bpk-component-drawer/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-drawer-paragraph {
   margin-bottom: bpk-spacing-md();
 }

diff --git a/examples/bpk-component-fieldset/examples.module.scss b/examples/bpk-component-fieldset/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-fieldsets {
   &__container {
     display: block;

diff --git a/examples/bpk-component-flare/examples.module.scss b/examples/bpk-component-flare/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-flare-stories {
   padding: bpk-spacing-xl();
 

diff --git a/examples/bpk-component-form-validation/examples.module.css b/examples/bpk-component-form-validation/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpkdocs-forms-page__viewport-alert{display:none}@media (max-width: 64rem){.bpkdocs-forms-page__viewport-alert{display:block}}.bpkdocs-forms-page__form{margin-bottom:.75rem}@media (max-width: 64rem){.bpkdocs-forms-page__form--desktop-only{display:none}}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpkdocs-forms-page__viewport-alert{display:none}@media (max-width: 64rem){.bpkdocs-forms-page__viewport-alert{display:block}}.bpkdocs-forms-page__form{margin-bottom:1rem}@media (max-width: 64rem){.bpkdocs-forms-page__form--desktop-only{display:none}}
diff --git a/examples/bpk-component-form-validation/examples.module.scss b/examples/bpk-component-form-validation/examples.module.scss
@@ -28,7 +28,7 @@
   }
 
   &__form {
-    margin-bottom: $bpk-spacing-sm;
+    margin-bottom: bpk-spacing-base();
 
     &--desktop-only {
       @include bpk-breakpoint-tablet {

diff --git a/examples/bpk-component-horizontal-nav/examples.module.css b/examples/bpk-component-horizontal-nav/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-horizontal-nav-custom-scrollers{background:#d4fff2}.bpk-horizontal-nav-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #d4fff2, rgba(212,255,242,0));pointer-events:none;left:0}.bpk-horizontal-nav-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #d4fff2, rgba(212,255,242,0));pointer-events:none;right:0}.bpk-horizontal-nav-stories__narrow-container{width:10rem;height:10rem;border-right:0.1rem lightgray solid}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-horizontal-nav-custom-scrollers{background:#d4fff2}.bpk-horizontal-nav-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #d4fff2, rgba(212,255,242,0));pointer-events:none;left:0}.bpk-horizontal-nav-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #d4fff2, rgba(212,255,242,0));pointer-events:none;right:0}.bpk-horizontal-nav-stories__narrow-container{width:10rem;height:10rem;border-right:0.1rem lightgray solid}
diff --git a/examples/bpk-component-horizontal-nav/examples.module.scss b/examples/bpk-component-horizontal-nav/examples.module.scss
@@ -18,7 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
 $custom-color: $bpk-status-success-fill-day;
 
 .bpk-horizontal-nav-custom-scrollers {

diff --git a/examples/bpk-component-infinite-scroll/examples.module.css b/examples/bpk-component-infinite-scroll/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-infinite-scroll-stories__fixed-panel{height:26.25rem;overflow-y:scroll}.bpk-infinite-scroll-stories__list{padding:0;list-style:none}.bpk-infinite-scroll-stories__list li{display:flex;height:5.25rem;justify-content:center;align-items:center;background-color:#eff1f2;color:#545860}.bpk-infinite-scroll-stories__custom-component{display:flex;padding:.75rem 0;justify-content:center}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-infinite-scroll-stories__fixed-panel{height:25rem;overflow-y:scroll}.bpk-infinite-scroll-stories__list{padding:0;list-style:none}.bpk-infinite-scroll-stories__list li{display:flex;height:5rem;justify-content:center;align-items:center;background-color:#eff1f2;color:#545860}.bpk-infinite-scroll-stories__custom-component{display:flex;padding:1rem 0;justify-content:center}
diff --git a/examples/bpk-component-infinite-scroll/examples.module.scss b/examples/bpk-component-infinite-scroll/examples.module.scss
@@ -20,7 +20,7 @@
 
 .bpk-infinite-scroll-stories {
   &__fixed-panel {
-    height: $bpk-spacing-xxl * 10;
+    height: bpk-spacing-xxl() * 10;
     overflow-y: scroll;
   }
 
@@ -30,7 +30,7 @@
 
     li {
       display: flex;
-      height: $bpk-spacing-xxl * 2;
+      height: bpk-spacing-xxl() * 2;
       justify-content: center;
       align-items: center;
       background-color: $bpk-canvas-contrast-day;
@@ -40,7 +40,7 @@
 
   &__custom-component {
     display: flex;
-    padding: $bpk-spacing-sm 0;
+    padding: bpk-spacing-base() 0;
     justify-content: center;
   }
 }
diff --git a/examples/bpk-component-loading-button/examples.module.scss b/examples/bpk-component-loading-button/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-loading-button-example-wrapper {
   padding: bpk-spacing-sm() 0;
 }
diff --git a/examples/bpk-component-mobile-scroll-container/examples.module.css b/examples/bpk-component-mobile-scroll-container/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-stories-mobile-scroll-container__leading-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #0062e3, rgba(0,98,227,0));pointer-events:none;left:0}.bpk-stories-mobile-scroll-container__trailing-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #0062e3, rgba(0,98,227,0));pointer-events:none;right:0}.bpk-scroll-block{display:flex}.bpk-scroll-block__item{display:flex;min-width:13.125rem;height:13.125rem;justify-content:center;align-items:center;background-color:#eff1f2}.bpk-scroll-block__item--alternate{background-color:#e0e3e5}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-stories-mobile-scroll-container__leading-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #0062e3, rgba(0,98,227,0));pointer-events:none;left:0}.bpk-stories-mobile-scroll-container__trailing-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #0062e3, rgba(0,98,227,0));pointer-events:none;right:0}.bpk-scroll-block{display:flex}.bpk-scroll-block__item{display:flex;min-width:12.5rem;height:12.5rem;justify-content:center;align-items:center;background-color:#eff1f2}.bpk-scroll-block__item--alternate{background-color:#e0e3e5}
diff --git a/examples/bpk-component-mobile-scroll-container/examples.module.scss b/examples/bpk-component-mobile-scroll-container/examples.module.scss
@@ -33,8 +33,8 @@
 
   &__item {
     display: flex;
-    min-width: $bpk-spacing-xxl * 5;
-    height: $bpk-spacing-xxl * 5;
+    min-width: bpk-spacing-xxl() * 5;
+    height: bpk-spacing-xxl() * 5;
     justify-content: center;
     align-items: center;
     background-color: $bpk-canvas-contrast-day;

diff --git a/examples/bpk-component-modal-v2/examples.module.scss b/examples/bpk-component-modal-v2/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-dialog-paragraph {
   margin-bottom: bpk-spacing-md();
 }
diff --git a/examples/bpk-component-modal/examples.module.scss b/examples/bpk-component-modal/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-modal-paragraph {
   margin-bottom: bpk-spacing-md();
 }

diff --git a/examples/bpk-component-navigation-bar/examples.module.scss b/examples/bpk-component-navigation-bar/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-navigation-bar-story {
   padding: $bpk-one-pixel-rem $bpk-one-pixel-rem bpk-spacing-xxl() * 2;
   background-color: $bpk-canvas-contrast-day;

diff --git a/examples/bpk-component-overlay/examples.module.css b/examples/bpk-component-overlay/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-overlay-stories{display:flex;justify-content:space-around}.bpk-overlay-stories__overlay-story{display:flex;width:100%;padding:1.125rem;flex-direction:column;align-items:center}.bpk-overlay-stories__overlay--name{padding-top:1rem;color:#161616}.bpk-overlay-stories__foreground{display:flex;height:100%;justify-content:center;align-items:flex-end;color:#fff}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-overlay-stories{display:flex;justify-content:space-around}.bpk-overlay-stories__overlay-story{display:flex;width:100%;padding:1rem;flex-direction:column;align-items:center}.bpk-overlay-stories__overlay--name{padding-top:1rem;color:#161616}.bpk-overlay-stories__foreground{display:flex;height:100%;justify-content:center;align-items:flex-end;color:#fff}
diff --git a/examples/bpk-component-overlay/examples.module.scss b/examples/bpk-component-overlay/examples.module.scss
@@ -25,7 +25,7 @@
   &__overlay-story {
     display: flex;
     width: 100%;
-    padding: $bpk-spacing-md;
+    padding: bpk-spacing-base();
     flex-direction: column;
     align-items: center;
   }

diff --git a/examples/bpk-component-popover/examples.module.scss b/examples/bpk-component-popover/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-popover-paragraph {
   margin-bottom: bpk-spacing-sm();
 }

diff --git a/examples/bpk-component-rating/examples.module.scss b/examples/bpk-component-rating/examples.module.scss
@@ -18,8 +18,6 @@
 
 @import '../../packages/bpk-mixins/index.scss';
 
-$bpk-spacing-v2: true;
-
 .bpk-rating-story {
   &--img {
     height: bpk-spacing-base();

diff --git a/examples/bpk-component-spinner/SpinnerLayout.module.scss b/examples/bpk-component-spinner/SpinnerLayout.module.scss
@@ -24,7 +24,7 @@
 
   &__spinner {
     display: flex;
-    padding: $bpk-spacing-base;
+    padding: bpk-spacing-lg();
     justify-content: center;
 
     &--light {

diff --git a/examples/bpk-component-ticket/examples.module.css b/examples/bpk-component-ticket/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-stories-flight{margin-bottom:2rem}.bpk-stories-flight__stub{display:flex;padding:1rem;flex-direction:column;justify-content:center;align-items:center}.bpk-stories-flight__small{color:#545860;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-stories-flight__logo{width:4rem;height:2rem}.bpk-stories-flight__price{margin:0;font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-stories-flight__flight-overview{display:flex;margin-bottom:1rem;align-items:center;flex:1}.bpk-stories-flight__main{display:flex;height:100%;flex-direction:column}.bpk-stories-flight__from{padding:0 1.5rem;text-align:right}.bpk-stories-flight__to{padding:0 1.5rem}.bpk-stories-flight__duration{padding:0 .75rem}.bpk-stories-flight__time{margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-stories-flight{margin-bottom:2rem}.bpk-stories-flight__stub{display:flex;padding:1rem;flex-direction:column;justify-content:center;align-items:center}.bpk-stories-flight__small{color:#545860;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-stories-flight__logo{width:4rem;height:2rem}.bpk-stories-flight__price{margin:0;font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-stories-flight__flight-overview{display:flex;margin-bottom:1rem;align-items:center;flex:1}.bpk-stories-flight__main{display:flex;height:100%;flex-direction:column}.bpk-stories-flight__from{padding:0 1.5rem;text-align:right}.bpk-stories-flight__to{padding:0 1.5rem}.bpk-stories-flight__duration{padding:0 1rem}.bpk-stories-flight__time{margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}
diff --git a/examples/bpk-component-ticket/examples.module.scss b/examples/bpk-component-ticket/examples.module.scss
@@ -60,16 +60,16 @@
   }
 
   &__from {
-    padding: 0 $bpk-spacing-base;
+    padding: 0 bpk-spacing-lg();
     text-align: right;
   }
 
   &__to {
-    padding: 0 $bpk-spacing-base;
+    padding: 0 bpk-spacing-lg();
   }
 
   &__duration {
-    padding: 0 $bpk-spacing-sm;
+    padding: 0 bpk-spacing-base();
   }
 
   &__time {

diff --git a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.css b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dark-example-wrapper{border-radius:.5rem;background-color:#05203c;background-color:var(--bpk-docs-sidebar-background, #05203c)}.bpk-dark-example-wrapper--padded{padding:1.125rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dark-example-wrapper{border-radius:.5rem;background-color:#05203c;background-color:var(--bpk-docs-sidebar-background, #05203c)}.bpk-dark-example-wrapper--padded{padding:1rem}
diff --git a/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss b/examples/bpk-storybook-utils/src/BpkDarkExampleWrapper.module.scss
@@ -27,6 +27,6 @@
   );
 
   &--padded {
-    padding: $bpk-spacing-md;
+    padding: bpk-spacing-base();
   }
 }