barbican-reset 1.8.6 → 1.8.9

package/components/br_form_block.vue

@@ -15,7 +15,7 @@
 .container {
   padding: 0.875rem 0.75rem 0.625rem 0.75rem;
   border-left: 0.25rem solid;
-  background: $c-grey-alpine;
+  background: $c-grey-l96;
   margin-bottom: 1rem;
   font-weight: 700;
 }

package/components/card_display.vue

@@ -101,7 +101,7 @@ export default {
 
 .title {
   @include inset(0);
-  background-color: rgba($c-grey-midnight, 0.85);
+  background-color: rgba($c-grey-l11, 0.85);
   place-items: center;
   position: absolute;
   display: grid;

package/components/event_summary.vue

@@ -43,7 +43,7 @@ export default {
 @mixin subtitle {
   @include title;
   font-size: $h5-font-size;
-  color: $c-grey-steel;
+  color: $c-grey-l44;
   font-weight: normal;
 
   @include media-breakpoint-up(md) {

package/components/payment_logo.vue

@@ -22,7 +22,6 @@ export default {
 <style lang="scss" module>
 
   .label {
-    @include hide-text;
     text-transform: uppercase;
     height: 0;
     width: 0;

package/components/related_title.vue

@@ -55,7 +55,7 @@ export default {
 }
 
 .line {
-  background-color: $c-grey-concrete;
+  background-color: $c-grey-l65;
   height: 1px;
 
   @include media-breakpoint-up(md) {
@@ -80,7 +80,7 @@ export default {
   }
 
   @include focus() {
-    @include double-box($white, $c-grey-night);
+    @include double-box($white, $c-grey-l21);
     border-radius: $border-radius;
     outline: none;
 

package/components/skip_link.vue

@@ -19,10 +19,10 @@ export default {
 <style lang="scss" module>
 
 .skiplink {
-  border: 0.25rem solid $c-grey-night;
+  border: 0.25rem solid $c-grey-l21;
   border-radius: $border-radius-lg;
   background-color: $white;
-  color: $c-grey-night;
+  color: $c-grey-l21;
   position: absolute;
   padding: 0.5rem;
   z-index: -1;

package/helpers/mixins/_br-footer.scss

@@ -15,7 +15,7 @@
     padding-bottom: 3.75rem;
   }
 
-  nav a {
+  a:not(.link-col) {
     @include focus {
       @include single-box($white);
       background-color: $white;

package/helpers/mixins/_buttons.scss

@@ -133,7 +133,7 @@
   min-width: 8rem;
 
   &[disabled=disabled] {
-    @include button-solid($c-grey-night);
+    @include button-solid($c-grey-l21);
     cursor: not-allowed;
   }
 }
@@ -157,11 +157,11 @@
 }
 
 @mixin btn-secondary {
-  @include button-solid($c-grey-night);
+  @include button-solid($c-grey-l21);
 }
 
 @mixin btn-outline-secondary {
-  @include button-outline($c-grey-night);
+  @include button-outline($c-grey-l21);
 }
 
 @mixin btn-outline-header {
@@ -173,8 +173,8 @@
 }
 
 @mixin btn-input-edit {
-  @include button-outline($c-grey-steel);
-  background-color: $c-grey-pearl;
+  @include button-outline($c-grey-l44);
+  background-color: $c-grey-l87;
   border-color: $c-border-strong;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -206,7 +206,7 @@
 
 @mixin btn-remove {
   @include button-solid(
-    $background: $c-grey-night,
+    $background: $c-grey-l21,
     $padding: 0.625em,
     $line-height: 1.375);
 }
@@ -214,8 +214,8 @@
 @mixin btn-link {
   @include button-link;
   @include focus {
-    @include single-box($c-grey-night);
-    background-color: $c-grey-night;
+    @include single-box($c-grey-l21);
+    background-color: $c-grey-l21;
     color: $white;
   }
 }
@@ -223,13 +223,13 @@
 @mixin btn-video-help {
   @include button-link(
     $padding: 1.25em,
-    $background: $c-grey-alpine);
+    $background: $c-grey-l96);
   font-weight: 700;
   text-align: left;
   width: 100%;
 
   @include focus {
-    background-color: $c-grey-steel;
+    background-color: $c-grey-l44;
     color: $white;
   }
 }
@@ -237,7 +237,7 @@
 @mixin btn-exit {
   @include button-link;
   @include focus {
-    outline: 0.1875rem solid $c-grey-night;
+    outline: 0.1875rem solid $c-grey-l21;
     border-radius: 50%;
     box-shadow: none;
 
@@ -246,7 +246,7 @@
     }
 
     path.tint {
-      fill: $c-grey-night;
+      fill: $c-grey-l21;
     }
   }
 }
@@ -296,13 +296,13 @@
 
 @mixin btn-cta {
   @include button-solid(
-    $background: $c-grey-night,
+    $background: $c-grey-l21,
     $display: 'flex');
   fill: $white;
 }
 
 @mixin btn-carousel {
-  @include button-solid($c-grey-night);
+  @include button-solid($c-grey-l21);
   @include single-box($white);
   border-radius: 50%;
   font-size: 0;
@@ -313,8 +313,8 @@
   }
 
   &:disabled {
-    background-color: $c-grey-pearl;
-    border-color: $c-grey-pearl;
+    background-color: $c-grey-l87;
+    border-color: $c-grey-l87;
     opacity: 1;
   }
 

package/helpers/mixins/_card.scss

@@ -1,6 +1,6 @@
 
 @mixin card {
-  border: 1px solid $c-grey-pearl;
+  border: 1px solid $c-grey-l87;
   border-radius: $border-radius-lg;
   background-color: white;
 
@@ -10,13 +10,13 @@
 }
 
 @mixin card-header {
-  border-bottom: 1px solid $c-grey-pearl;
+  border-bottom: 1px solid $c-grey-l87;
   padding: 1.5rem 1.75rem 1.25rem;
   background-color: transparent;
 }
 
 @mixin card-subtitle {
-  color: $c-grey-steel !important;
+  color: $c-grey-l44 !important;
   font-size: $font-size-sm;
   font-weight: 400;
   margin: 0;
@@ -31,12 +31,12 @@
   padding: 1rem;
 
   @include media-breakpoint-up(md) {
-    border-top: 1px solid $c-grey-concrete;
+    border-top: 1px solid $c-grey-l65;
   }
 }
 
 @mixin card-img {
-  border: 1px solid $c-grey-concrete;
+  border: 1px solid $c-grey-l65;
   margin-bottom: 1rem;
   max-width: 100%;
 }

package/helpers/mixins/_festival.scss

@@ -18,8 +18,8 @@
 }
 
 @mixin welcome($max-width: 23rem) {
-  box-shadow: 0 0 0.3125rem rgba($c-grey-night, 0.1);
-  border: 1px solid $c-grey-pearl;
+  box-shadow: 0 0 0.3125rem rgba($c-grey-l21, 0.1);
+  border: 1px solid $c-grey-l87;
   border-radius: $border-radius;
   margin-bottom: 1.5rem;
   max-width: $max-width;

package/helpers/mixins/_focus.scss

@@ -25,7 +25,7 @@
   box-shadow: 0 0 0 $size $bg;
 }
 
-@mixin link-focus($color: $c-grey-midnight, $border: $white) {
+@mixin link-focus($color: $c-grey-l11, $border: $white) {
   @include focus {
     @include double-box($color, $border);
     background-color: $color;
@@ -34,9 +34,9 @@
 }
 
 @mixin input-focus-defaults {
-  @include single-box($c-grey-steel, 0.0625rem);
-  border: 1px solid $c-grey-steel;
-  background-color: $c-grey-alpine;
+  @include single-box($c-grey-l44, 0.0625rem);
+  border: 1px solid $c-grey-l44;
+  background-color: $c-grey-l96;
 }
 
 @mixin neutral-status-colors {

package/helpers/mixins/_table.scss

@@ -1,13 +1,13 @@
 
 @mixin table-row($gap: 0.75rem) {
-  border-bottom: 1px solid $c-grey-pearl;
+  border-bottom: 1px solid $c-grey-l87;
   padding-bottom: $gap;
   padding-top: $gap;
 }
 
 @mixin table-link--focus {
-  @include single-box($c-grey-night);
-  background-color: $c-grey-night;
+  @include single-box($c-grey-l21);
+  background-color: $c-grey-l21;
   color: $white;
 }
 
@@ -23,7 +23,7 @@
   th, td {
     @include media-breakpoint-up(md) {
       &:not(:last-of-type) {
-        border-right: 1px solid $c-grey-pearl;
+        border-right: 1px solid $c-grey-l87;
       }
   
       &:last-of-type {

package/helpers/mixins/input/_dropdown.scss

@@ -3,13 +3,13 @@
   padding: 0.8125rem 2.5rem 0.8125rem 0.8125rem;
   background-position: right 0.75rem center;
   background-image: url($select-arrow);
-  border: 1px solid $c-grey-concrete;
-  background-color: $c-grey-alpine;
+  border: 1px solid $c-grey-l65;
+  background-color: $c-grey-l96;
   border-radius: $border-radius-lg;
   background-size: 1rem 0.75rem;
   background-repeat: no-repeat;
   line-height: 1.375rem;
-  color: $c-grey-night;
+  color: $c-grey-l21;
   font-size: inherit;
   font-weight: 400;
   transition: none;

package/helpers/mixins/input/_generic.scss

@@ -24,9 +24,9 @@
       outline: none;
 
       ~ label {
-        @include single-box($c-grey-steel, 0.0625rem);
-        border: 1px solid $c-grey-steel;
-        background-color: $c-grey-alpine;
+        @include single-box($c-grey-l44, 0.0625rem);
+        border: 1px solid $c-grey-l44;
+        background-color: $c-grey-l96;
       }
 
       &:checked ~ label {
@@ -43,19 +43,19 @@
 
 @mixin generic-input-label($state: neutral) {
   padding: 0.75rem 0.75rem 0.625rem 2.75rem;
-  border: 1px solid $c-grey-concrete;
+  border: 1px solid $c-grey-l65;
   border-radius: $border-radius-lg;
   background-color: $white;
   font-weight: 400;
   display: block;
 
   @if $state != disabled {
-    color: $c-grey-night;
+    color: $c-grey-l21;
     cursor: pointer;
   }
 
   @if $state == disabled {
-    color: $c-grey-steel;
+    color: $c-grey-l44;
     cursor: not-allowed;
 
     &.spx-label-field__checkout,

package/helpers/mixins/input/_text.scss

@@ -1,19 +1,19 @@
 
 @mixin all-text-inputs {
-  [type='color'],
-  [type='date'],
-  [type='datetime'],
-  [type='datetime-local'],
-  [type='email'],
-  [type='month'],
-  [type='number'],
-  [type='password'],
-  [type='search'],
-  [type='tel'],
-  [type='text'],
-  [type='time'],
-  [type='url'],
-  [type='week'],
+  [type=color],
+  [type=date],
+  [type=datetime],
+  [type=datetime-local],
+  [type=email],
+  [type=month],
+  [type=number],
+  [type=password],
+  [type=search],
+  [type=tel],
+  [type=text],
+  [type=time],
+  [type=url],
+  [type=week],
   input:not([type]),
   textarea {
     @content;
@@ -23,13 +23,13 @@
 @mixin text-input-defaults {
   border: solid $border-width $c-border-strong;
   padding: 0.875rem 0.875rem 0.75rem;
-  background-color: $c-grey-alpine;
+  background-color: $c-grey-l96;
   border-radius: $border-radius-lg;
   line-height: 1.375rem;
-  color: $c-grey-night;
+  color: $c-grey-l21;
 
   &:disabled, &[readonly] {
-    background-color: $c-grey-alpine;
-    color: $c-grey-steel;
+    background-color: $c-grey-l96;
+    color: $c-grey-l44;
   }
 }

package/helpers/mixins/table/_details.scss

@@ -3,7 +3,7 @@
   $mq: md;
 
   thead {
-    background-color: $c-grey-alpine;
+    background-color: $c-grey-l96;
     margin-bottom: 1rem;
     font-weight: 700;
     display: block;
@@ -14,7 +14,7 @@
   }
 
   thead tr {
-    border: 1px solid $c-grey-pearl;
+    border: 1px solid $c-grey-l87;
   }
 
   tr {
@@ -30,7 +30,7 @@
   }
 
   tbody tr {
-    border: 1px solid $c-grey-pearl;
+    border: 1px solid $c-grey-l87;
 
     &:not(:last-of-type) {
       margin-bottom: 1rem;
@@ -42,7 +42,7 @@
 
     @include media-breakpoint-up($mq) {
       &:not(:last-of-type) {
-        border-right: 1px solid $c-grey-pearl;
+        border-right: 1px solid $c-grey-l87;
       }
   
       &:last-of-type {

package/helpers/mixins/table/_etickets.scss

@@ -3,7 +3,7 @@
   $mq: md;
 
   thead {
-    background-color: $c-grey-alpine;
+    background-color: $c-grey-l96;
     margin-bottom: 1rem;
     font-weight: 700;
     display: block;
@@ -14,7 +14,7 @@
   }
 
   thead tr, tbody tr.active {
-    border: 1px solid $c-grey-pearl;
+    border: 1px solid $c-grey-l87;
     display: grid;
 
     &:not(:last-of-type) {
@@ -35,7 +35,7 @@
 
     @include media-breakpoint-up($mq) {
       &:not(:last-of-type) {
-        border-right: 1px solid $c-grey-pearl;
+        border-right: 1px solid $c-grey-l87;
       }
   
       &:last-of-type {

package/helpers/mixins/table/_gifts.scss

@@ -26,7 +26,7 @@
 
     @include media-breakpoint-down($mq) {
       border-radius: $border-radius-lg;
-      border: 1px solid $c-grey-pearl;
+      border: 1px solid $c-grey-l87;
       display: block;
       padding: 1rem;
   
@@ -44,7 +44,7 @@
         }
 
         &:not(:first-of-type):not(:last-of-type) {
-          border-top: 1px solid $c-grey-pearl;
+          border-top: 1px solid $c-grey-l87;
         }
   
         &:last-of-type {

package/helpers/mixins/table/_orders.scss

@@ -3,7 +3,7 @@
   $mq: md;
 
   thead {
-    background-color: $c-grey-alpine;
+    background-color: $c-grey-l96;
     margin-bottom: 1rem;
     font-weight: 700;
     display: block;
@@ -14,7 +14,7 @@
   }
 
   thead tr, tbody tr {
-    border: 1px solid $c-grey-pearl;
+    border: 1px solid $c-grey-l87;
     display: grid;
 
     &:not(:last-of-type) {

package/helpers/mixins/table/_preferences.scss

@@ -3,7 +3,7 @@
   $mq: md;
 
   thead {
-    background-color: $c-grey-alpine;
+    background-color: $c-grey-l96;
     margin-bottom: 1rem;
     font-weight: 700;
     display: block;
@@ -14,7 +14,7 @@
   }
 
   tr {
-    border: 1px solid $c-grey-pearl;
+    border: 1px solid $c-grey-l87;
     display: grid;
 
     &:not(:last-of-type) {
@@ -37,7 +37,7 @@
       text-align: center;
 
       &:not(:last-of-type) {
-        border-right: 1px solid $c-grey-pearl;
+        border-right: 1px solid $c-grey-l87;
       }
   
       &:first-of-type {

package/helpers/mixins/table/_resale.scss

@@ -7,7 +7,7 @@
   $mq: md;
 
   tbody tr {
-    border: 1px solid $c-grey-pearl;
+    border: 1px solid $c-grey-l87;
   }
 
   td {

package/helpers/mixins/table/_tickets.scss

@@ -20,7 +20,7 @@
 
     @include media-breakpoint-down($mq) {
       border-radius: $border-radius-lg;
-      border: 1px solid $c-grey-pearl;
+      border: 1px solid $c-grey-l87;
       display: block;
       padding: 1rem;
 
@@ -42,7 +42,7 @@
         }
 
         &:not(:first-of-type):not(:last-of-type) {
-          border-top: 1px solid $c-grey-pearl;
+          border-top: 1px solid $c-grey-l87;
         }
   
         &:last-of-type {

package/helpers/variables/colors/_borders.scss

@@ -1,3 +1,3 @@
 
-$c-border-faint:  $c-grey-pearl;
-$c-border-strong: $c-grey-concrete;
+$c-border-faint:  $c-grey-l87;
+$c-border-strong: $c-grey-l65;

package/helpers/variables/colors/_grey.scss

@@ -1,7 +1,7 @@
 
-$c-grey-midnight: #1d1d1d;
-$c-grey-night: #353535;
-$c-grey-steel: #707070;
-$c-grey-concrete:#a5a5a5;
-$c-grey-pearl: #ddd;
-$c-grey-alpine: #f6f6f6;
+$c-grey-l11: hsl(0, 0%, 11%); // midnight
+$c-grey-l21: hsl(0, 0%, 21%); // night
+$c-grey-l44: hsl(0, 0%, 44%); // steel
+$c-grey-l65:hsl(0, 0%, 65%); // concrete
+$c-grey-l87: hsl(0, 0%, 87%); // pearl
+$c-grey-l96: hsl(0, 0%, 96%); // alpine

package/helpers/variables/colors/brand/_membership.scss

@@ -9,7 +9,7 @@ $c-brand-membership-dark: hsl(223, 87%, 21%);
 
 // ------------------------------
 
-$c-patron: $c-grey-steel;
+$c-patron: $c-grey-l44;
 $c-patron-light: hsl(0, 0%, 60%);
 
 $c-principle: $c-brand-classical;

package/helpers/variables/colors/brand/_programme.scss

@@ -1,5 +1,5 @@
 
-$c-brand-programme: $c-grey-night;
+$c-brand-programme: $c-grey-l21;
 
 $c-brand-programme-tint-98: tint($c-brand-programme, 98%);
 $c-brand-programme-tint-70: tint($c-brand-programme, 70%);

package/library/scss/colors/grey.scss

@@ -0,0 +1,9 @@
+
+> li {
+  &.l11 { background-color: $c-grey-l11; }
+  &.l21 { background-color: $c-grey-l21; }
+  &.l44 { background-color: $c-grey-l44; }
+  &.l65 { background-color: $c-grey-l65; }
+  &.l87 { background-color: $c-grey-l87; }
+  &.l96 { background-color: $c-grey-l96; }
+}

package/library/scss/styles.scss

@@ -9,17 +9,18 @@
 body {
   line-height: $line-height-md; 
   font-family: $font-family;
-  color: $c-grey-night;
-}
+  color: $c-grey-l21;
+} 
 
 .br-color--palette {
   list-style: none;
+  margin: 0 0 2rem;
   display: flex;
   gap: 0.125rem;
   padding: 0;
-  margin: 0;
 
   &.generic { @import "scss/colors/generic"; }
+  &.grey { @import "scss/colors/grey"; }
 }
 
 .br-color--sample {
@@ -36,3 +37,17 @@ body {
   }
 } 
 
+h1 {
+  border-bottom: 1px solid grey;
+  padding-bottom: 0.25rem;
+  margin: 0 0 2rem;
+}
+
+h2 {
+  margin: 0 0 1rem;
+}
+
+h3 {
+  margin: 0 0 0.5rem;
+}
+

package/library/static/styles.css

@@ -67,15 +67,15 @@
 body {
   line-height: 1.4;
   font-family: FuturaLTPro, "Helvetica", "Arial", sans-serif;
-  color: #353535;
+  color: hsl(0deg, 0%, 21%);
 }
 
 .br-color--palette {
   list-style: none;
+  margin: 0 0 2rem;
   display: flex;
   gap: 0.125rem;
   padding: 0;
-  margin: 0;
 }
 .br-color--palette.generic > li {
   background-color: hsl(21deg, 100%, 41%);
@@ -104,6 +104,24 @@ body {
 .br-color--palette.generic > li.s100-l15 {
   background-color: hsl(21deg, 100%, 15%);
 }
+.br-color--palette.grey > li.l11 {
+  background-color: hsl(0deg, 0%, 11%);
+}
+.br-color--palette.grey > li.l21 {
+  background-color: hsl(0deg, 0%, 21%);
+}
+.br-color--palette.grey > li.l44 {
+  background-color: hsl(0deg, 0%, 44%);
+}
+.br-color--palette.grey > li.l65 {
+  background-color: hsl(0deg, 0%, 65%);
+}
+.br-color--palette.grey > li.l87 {
+  background-color: hsl(0deg, 0%, 87%);
+}
+.br-color--palette.grey > li.l96 {
+  background-color: hsl(0deg, 0%, 96%);
+}
 
 .br-color--sample {
   background: grey;
@@ -116,4 +134,18 @@ body {
   font-weight: bold;
   color: grey;
   display: grid;
+}
+
+h1 {
+  border-bottom: 1px solid grey;
+  padding-bottom: 0.25rem;
+  margin: 0 0 2rem;
+}
+
+h2 {
+  margin: 0 0 1rem;
+}
+
+h3 {
+  margin: 0 0 0.5rem;
 }

package/library/views/index.pug

@@ -1,7 +1,18 @@
 extends layout
 block content 
   h1 Color Palettes
+  
+  h2 Grey
+  ul.br-color--palette.grey
+    li.br-color--sample.l11
+    li.br-color--sample.l21
+    li.br-color--sample.l44
+    li.br-color--sample.l65
+    li.br-color--sample.l87
+    li.br-color--sample.l96
+
   h2 Brand
+
   h3 Generic
   ul.br-color--palette.generic
     li.br-color--sample

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.8.6",
+  "version": "1.8.9",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_close-icon.scss

@@ -4,7 +4,7 @@
   width: 1.875rem;
 
   .outline, .cross {
-    fill: $c-grey-night;
+    fill: $c-grey-l21;
   }
 
   .fill {
@@ -22,7 +22,7 @@
   }
 
   &.focus-visible {
-    @include single-box($c-grey-night);
+    @include single-box($c-grey-l21);
     background-color: $white;
     border-radius: 50%;
 
@@ -31,7 +31,7 @@
     }
   
     .fill {
-      fill: $c-grey-night;
+      fill: $c-grey-l21;
     }
   }
 }

package/scss/_footer.scss

@@ -2,7 +2,7 @@ footer {
   color: $white;
 
   &:not(.splash) {
-    background-color: $c-grey-midnight;
+    background-color: $c-grey-l11;
   }
 }
 

package/scss/_input.scss

@@ -6,7 +6,7 @@
 }
 
 input::placeholder {
-  color: $c-grey-concrete;
+  color: $c-grey-l65;
 }
 
 input[type=checkbox],
@@ -27,6 +27,14 @@ input[type=number] {
   }
 }
 
+input[type=file] {
+  @include focus {
+    @include double-box($c-grey-l96, $c-grey-l44);
+    background-color: $c-grey-l96;
+    outline: none;
+  }
+}
+
 @include all-text-inputs {
   @include text-input-defaults;
   @include focus {

package/scss/_klaro.scss

@@ -1,5 +1,5 @@
 @mixin cm-button {
-  background: $c-grey-steel;
+  background: $c-grey-l44;
   border-radius: $border-radius;
   font-size: $font-size-sm;
   padding: 0.5em 0.75em;
@@ -18,7 +18,7 @@
   }
 
   &.focus-visible {
-    @include double-box($c-grey-night, $white, md);
+    @include double-box($c-grey-l21, $white, md);
   }
 
   &.cm-btn-success {
@@ -68,8 +68,8 @@
     color: inherit;
 
     &.focus-visible {
-      @include double-box($c-grey-night, $c-grey-alpine, md);
-      background-color: $c-grey-night;
+      @include double-box($c-grey-l21, $c-grey-l96, md);
+      background-color: $c-grey-l21;
       outline: none;
     }
   }
@@ -90,7 +90,7 @@
   }
 
   .cm-list-description {
-    color: $c-grey-concrete;
+    color: $c-grey-l65;
     font-size: $font-size-sm;
     padding-top: 0.25rem;
   }
@@ -104,7 +104,7 @@
     top: 0;
 
     &:focus + .cm-list-label .slider {
-      @include double-box($c-grey-night, $white);
+      @include double-box($c-grey-l21, $white);
     }
 
     &:checked + .cm-list-label .slider {
@@ -124,7 +124,7 @@
     }
 
     .slider {
-      background-color: $c-grey-steel;
+      background-color: $c-grey-l44;
       display: inline-block;
       position: absolute;
       cursor: pointer;
@@ -161,7 +161,7 @@
 }
 
 .klaro {
-  color: $c-grey-alpine;
+  color: $c-grey-l96;
 
   label {
     margin-bottom: 0.25rem;
@@ -193,7 +193,7 @@
       }
 
       &.focus-visible {
-        @include double-box($c-grey-night, $c-grey-pearl);
+        @include double-box($c-grey-l21, $c-grey-l87);
       }
     }
 
@@ -223,8 +223,8 @@
 
     .cm-modal {
       &.cm-klaro {
-        background: $c-grey-night;
-        color: $c-grey-pearl;
+        background: $c-grey-l21;
+        color: $c-grey-l87;
         box-shadow: 0 4px 6px 0 rgba($black, 0.2),
           5px 5px 10px 0 rgba($black, 0.2);
         transform: translateY(-50%);
@@ -246,7 +246,7 @@
       }
 
       .cm-header {
-        border-bottom: 1px solid $c-grey-steel;
+        border-bottom: 1px solid $c-grey-l44;
         padding: 1rem 3.15rem 1rem 1rem;
         font-size: $font-size-sm;
 
@@ -255,7 +255,7 @@
         }
 
         p {
-          color: $c-grey-concrete;
+          color: $c-grey-l65;
         }
       }
 
@@ -302,7 +302,7 @@
               }
 
               &.cm-toggle-all {
-                border-top: 1px solid $c-grey-steel;
+                border-top: 1px solid $c-grey-l44;
                 padding-top: 1rem;
               }
             }
@@ -321,7 +321,7 @@
       }
 
       .cm-footer {
-        border-top: 1px solid $c-grey-steel;
+        border-top: 1px solid $c-grey-l44;
         padding: 1rem;
 
         .cm-powered-by {
@@ -337,7 +337,7 @@
 
       .cm-list-label {
         &.focus-visible {
-          @include double-box($c-grey-night, $c-grey-alpine);
+          @include double-box($c-grey-l21, $c-grey-l96);
           outline: none;
         }
       }
@@ -365,12 +365,12 @@
           outline: none;
 
           svg {
-            @include double-box($c-grey-night, $white, md);
+            @include double-box($c-grey-l21, $white, md);
           }
         }
 
         svg {
-          stroke: $c-grey-pearl;
+          stroke: $c-grey-l87;
         }
       }
     }
@@ -381,7 +381,7 @@
 
     &:not(.cookie-modal-notice) {
       @include cookie-position;
-      background: $c-grey-night;
+      background: $c-grey-l21;
 
       .cn-body {
         padding: 1.25rem;
@@ -399,7 +399,7 @@
           }
 
           p {
-            color: $c-grey-concrete;
+            color: $c-grey-l65;
           }
 
           &.cn-changes {
@@ -420,7 +420,7 @@
         }
 
         .cn-learn-more {
-          background: $c-grey-steel;
+          background: $c-grey-l44;
           border-radius: $border-radius;
           text-decoration: none;
           display: inline-block;

package/scss/card/_membership.scss

@@ -2,8 +2,8 @@
 $angle: 120deg;
 
 .card[membership] {
-  box-shadow: 0 0 0.375rem rgba($c-grey-steel, 0.5);
-  background: $c-grey-night;
+  box-shadow: 0 0 0.375rem rgba($c-grey-l44, 0.5);
+  background: $c-grey-l21;
   width: calc(100% - 1rem);
   display: inline-block;
   margin: 0.5rem;

package/scss/card/_related.scss

@@ -1,6 +1,6 @@
 
 .card[related] {
-  border: 1px solid $c-grey-pearl;
+  border: 1px solid $c-grey-l87;
   overflow: hidden;
 
   + .card {

package/scss/card/_video-help.scss

@@ -1,5 +1,5 @@
 
-$border: 1px solid $c-grey-pearl;
+$border: 1px solid $c-grey-l87;
 
 .card[video-help] {
   overflow: hidden;

package/scss/index.scss

@@ -39,7 +39,7 @@
 body {
   line-height: $line-height-md;
   font-family: $font-family;
-  color: $c-grey-night;
+  color: $c-grey-l21;
 }
 
 h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {