@citizenplane/pimp 10.0.8 → 10.1.0

package/src/components/CpTable.vue

@@ -616,7 +616,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     flex: 1;
 
     &--hasPagination {
-      border-bottom: fn.px-to-rem(1) solid colors.$border-color;
+      border-bottom: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     }
   }
 
@@ -626,8 +626,8 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   }
 
   &__container[role='region'][aria-labelledby][tabindex]:focus {
-    border-radius: fn.px-to-rem(10);
-    box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$blue, $lightness: 70%);
+    border-radius: var(--cp-radius-md-lg);
+    box-shadow: 0 0 0 calc(var(--cp-dimensions-0_5) * 1.5) var(--cp-focus);
   }
 
   &__container[role='region'][aria-labelledby][tabindex] &__table {
@@ -638,14 +638,51 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   /* Scrolling Visual Cue */
   &__container[role='region'][aria-labelledby][tabindex] {
     @extend %u-scrolling-visual-cue;
+
+    background:
+      linear-gradient(
+        to right,
+        var(--cp-background-primary) 30%,
+        color-mix(in srgb, #{var(--cp-background-primary)} 0%, transparent)
+      ),
+      linear-gradient(
+          to right,
+          color-mix(in srgb, #{var(--cp-background-primary)} 0%, transparent),
+          var(--cp-background-primary) 70%
+        )
+        0 100%,
+      radial-gradient(
+        farthest-side at 0% 50%,
+        color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-50)} 20%, transparent),
+        color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-50)} 0%, transparent)
+      ),
+      radial-gradient(
+          farthest-side at 100% 50%,
+          color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-50)} 20%, transparent),
+          color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-50)} 0%, transparent)
+        )
+        0 100%;
+    background-repeat: no-repeat;
+    background-color: var(--cp-background-white);
+    background-size:
+      var(--cp-dimensions-10) 100%,
+      var(--cp-dimensions-10) 100%,
+      var(--cp-dimensions-3_5) 100%,
+      var(--cp-dimensions-3_5) 100%;
+    background-position:
+      0 0,
+      100%,
+      0 0,
+      100%;
+    background-attachment: local, local, scroll, scroll;
   }
 
   &__caption {
     position: sticky;
     left: 0;
-    margin-bottom: sp.$space-lg;
+    margin-bottom: var(--cp-spacing-xl);
     text-align: left;
-    font-size: fn.px-to-em(18);
+    font-size: var(--cp-text-size-lg);
 
     &:first-letter {
       text-transform: capitalize;
@@ -658,38 +695,137 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   }
 
   &__row {
-    &--body:not(:last-of-type) {
-      border-bottom: fn.px-to-rem(1) solid colors.$border-color;
+    &--body:not(:last-of-type):not(#{&}--isFullWidth) {
+      box-shadow: inset 0 calc(var(--cp-dimensions-0_25) * -1) 0 var(--cp-border-soft);
     }
 
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
-      background-color: rgba(colors.$neutral-dark, 0.05);
-      transition: background-color 0.1s ease-in-out;
+    &--body:has(+ #{&}--isFullWidth) {
+      box-shadow: none !important;
+    }
+
+    &--isFullWidth {
+      border-top: none;
+    }
+
+    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) {
+      transition: background-color 100ms ease-in-out;
+    }
+
+    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) td {
+      background-color: var(--cp-background-primary-hover);
+    }
+
+    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) {
+      position: relative;
+    }
+
+    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within)::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: var(--cp-radius-md);
+      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+      pointer-events: none;
+    }
+
+    &--body:not(#{&}--isFullWidth):hover td:first-child,
+    &--body:not(#{&}--isFullWidth):focus td:first-child,
+    &--body:not(#{&}--isFullWidth):focus-within td:first-child {
+      border-top-left-radius: var(--cp-radius-md);
+      border-bottom-left-radius: var(--cp-radius-md);
+    }
+
+    &--body:not(#{&}--isFullWidth):hover td:last-child,
+    &--body:not(#{&}--isFullWidth):focus td:last-child,
+    &--body:not(#{&}--isFullWidth):focus-within td:last-child {
+      border-top-right-radius: var(--cp-radius-md);
+      border-bottom-right-radius: var(--cp-radius-md);
+    }
+
+    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):hover
+      td:nth-last-child(2),
+    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus
+      td:nth-last-child(2),
+    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus-within
+      td:nth-last-child(2) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):hover td:nth-last-child(2),
+    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus td:nth-last-child(2),
+    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus-within
+      td:nth-last-child(2) {
+      border-top-right-radius: var(--cp-radius-md);
+      border-bottom-right-radius: var(--cp-radius-md);
     }
 
     &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
     &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
-      color: colors.$primary-color;
+      color: var(--cp-text-accent-primary);
     }
 
     &--isFullWidth td {
-      padding: sp.$space;
-      background-color: rgba(colors.$neutral-dark, 0.03);
+      padding: var(--cp-spacing-md);
+      background-color: var(--cp-background-secondary);
+      border-radius: var(--cp-radius-md);
+      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     }
 
     &--isClickable {
       cursor: pointer;
     }
 
+    &--isSelected td {
+      background-color: var(--cp-background-accent-primary);
+      color: var(--cp-text-accent-primary);
+    }
+
     &--isSelected {
-      background-color: rgba(colors.$primary-color, 0.1);
-      color: colors.$primary-color;
+      position: relative;
+    }
+
+    &--isSelected::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: var(--cp-radius-md);
+      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-utility-accent-100);
+      pointer-events: none;
+    }
+
+    &--isSelected td:first-child {
+      border-top-left-radius: var(--cp-radius-md);
+      border-bottom-left-radius: var(--cp-radius-md);
+    }
+
+    &--isSelected td:last-child {
+      border-top-right-radius: var(--cp-radius-md);
+      border-bottom-right-radius: var(--cp-radius-md);
+    }
+
+    &--isSelected:has(.cpTable__cell--isOptions:not([style*='display: none'])) td:nth-last-child(2) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--isSelected:has(.cpTable__cell--isOptions[style*='display: none']) td:nth-last-child(2) {
+      border-top-right-radius: var(--cp-radius-md);
+      border-bottom-right-radius: var(--cp-radius-md);
+    }
+
+    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within),
+    &--body:not(#{&}--isFullWidth).cpTable__row--isSelected {
+      box-shadow: none !important;
+    }
+
+    &--body:not(#{&}--isFullWidth):has(+ #{&}--isSelected),
+    &--body:not(#{&}--isFullWidth):has(+ #{&}:is(:hover, :focus, :focus-within)) {
+      box-shadow: none !important;
     }
 
     &--body td {
-      font-size: fn.px-to-em(14);
+      font-size: var(--cp-text-size-sm);
     }
   }
 
@@ -697,14 +833,14 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     position: sticky;
     top: 0;
     z-index: 3;
-    padding: sp.$space sp.$space-md;
+    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
     text-align: left;
     white-space: nowrap;
-    font-size: fn.px-to-em(12);
-    line-height: fn.px-to-rem(16);
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
     font-weight: normal;
-    color: colors.$neutral-dark-1;
-    background-color: colors.$neutral-light;
+    color: var(--cp-text-secondary);
+    background-color: var(--cp-background-primary);
 
     &:first-letter {
       text-transform: capitalize;
@@ -717,8 +853,8 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       bottom: 0;
       left: 0;
       width: 100%;
-      height: fn.px-to-rem(1);
-      background-color: colors.$border-color;
+      height: var(--cp-dimensions-0_25);
+      background-color: var(--cp-border-soft);
     }
 
     &--isOptions {
@@ -731,11 +867,33 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
   }
 
+  &:has(
+    .cpTable__row--body:first-of-type:is(:hover, :focus, :focus-within),
+    .cpTable__row--body:first-of-type.cpTable__row--isSelected
+  ) {
+    .cpTable__column:after {
+      background-color: transparent;
+    }
+  }
+
+  &:has(
+    .cpTable__row--body:last-of-type:is(:hover, :focus, :focus-within),
+    .cpTable__row--body:last-of-type.cpTable__row--isSelected
+  ) {
+    .cpTable__container--hasPagination {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &__table:has(.cpTable__row--body:first-of-type.cpTable__row--isFullWidth) &__column:after {
+    background-color: transparent;
+  }
+
   &__columnEditor {
-    padding-right: calc(sp.$space-md + fn.px-to-rem(2));
+    padding-right: calc(var(--cp-spacing-lg) + var(--cp-dimensions-0_5));
 
     @media (hover: none) and (pointer: coarse) {
-      padding-right: sp.$space-md;
+      padding-right: var(--cp-spacing-lg);
     }
   }
 
@@ -750,7 +908,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
   &__cell {
     &:not(#{&}--isFullWidth):not(#{&}--isOptions) {
-      padding: sp.$space-lg sp.$space-md;
+      padding: var(--cp-spacing-xl) var(--cp-spacing-lg);
       white-space: nowrap;
     }
 
@@ -767,67 +925,80 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
     &--isOptions {
       right: 0;
-      padding: 0 sp.$space-md;
+      padding: 0 var(--cp-spacing-lg);
     }
 
     &--isOptions .cpTable__action {
       display: none;
-      padding: fn.px-to-rem(6) sp.$space;
+      padding: var(--cp-dimensions-1_5) var(--cp-spacing-md);
       border: none;
       border-radius: 0;
-      color: initial;
+      color: var(--cp-foreground-primary);
 
       // Add border-right only if the action is not the last one and the next one is not the default action
       &:not(:last-child) {
-        border-right: 1px solid colors.$border-color;
+        border-right: 1px solid var(--cp-border-soft);
       }
 
       &:disabled {
-        color: colors.$neutral-dark-2;
+        color: var(--cp-foreground-disabled);
         cursor: not-allowed;
       }
 
       &:is(:hover, :focus):not(:disabled) {
         box-shadow: none;
-        background-color: colors.$neutral-dark-5;
-        color: colors.$primary-color;
+        background-color: var(--cp-background-primary-hover);
+        color: var(--cp-foreground-primary);
       }
 
       &--isCritical:is(:hover, :focus):not(:disabled) {
-        color: colors.$error-color;
+        color: var(--cp-foreground-error-primary);
       }
     }
 
     &--isOptions .cpTable__action--isDefault {
       display: inline-flex;
       align-items: center;
-      color: colors.$neutral-dark-1;
+      color: var(--cp-foreground-primary);
 
       &:hover {
-        background-color: color.scale(colors.$neutral-dark, $lightness: 98%);
-        color: colors.$neutral-dark;
+        background-color: var(--cp-background-primary-hover);
+        color: var(--cp-foreground-primary);
       }
 
       &:focus {
         outline: none !important;
-        box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$secondary-color, $lightness: 80%);
+        box-shadow: 0 0 0 calc(var(--cp-dimensions-0_5) * 1.5) var(--cp-focus);
       }
     }
 
     @mixin cp-table-only-default-action-visible-style {
-      padding: sp.$space-sm;
-      border: fn.px-to-rem(1) solid colors.$border-color;
-      border-radius: fn.px-to-rem(8);
-      background-color: colors.$neutral-light;
+      padding: var(--cp-spacing-sm);
+      box-shadow:
+        var(--cp-shadows-3xs),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+      border-radius: var(--cp-radius-md);
+      background-color: var(--cp-background-primary);
     }
 
     // Solo default action mode
     &--isOptions .cpTable__action:only-child.cpTable__action--isDefault {
       @include cp-table-only-default-action-visible-style;
+
+      &:hover {
+        background-color: var(--cp-background-primary-hover);
+        box-shadow:
+          var(--cp-shadows-3xs),
+          0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
+      }
     }
 
     // Touch device mode : only default action visible
     @media (hover: none) and (pointer: coarse) {
+      &--isOptions {
+        padding: 0 var(--cp-dimensions-3_5) 0 var(--cp-spacing-lg);
+      }
+
       &--isOptions .cpTable__action--isDefault {
         @include cp-table-only-default-action-visible-style;
       }
@@ -842,8 +1013,8 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   @media (hover: hover) and (pointer: fine) {
     &__cell--isOptions {
       opacity: 0;
-      min-width: fn.px-to-rem(50);
-      transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.175);
+      min-width: calc(var(--cp-dimensions-1) * 12.5);
+      transition: none;
     }
 
     // Actions wrapper on desktop : displayed only if there are quick actions inside
@@ -851,24 +1022,20 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      right: fn.px-to-rem(12);
+      right: var(--cp-dimensions-3);
       display: inline-flex;
       overflow: hidden;
-      border-radius: fn.px-to-rem(8);
-      background-color: colors.$neutral-light;
       box-shadow:
-        0 1px 4px rgba(colors.$neutral-dark, 0.1),
-        0 0 1px rgba(colors.$neutral-dark, 0.15);
+        var(--cp-shadows-3xs),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+      border-radius: var(--cp-radius-md);
+      background-color: var(--cp-background-primary);
 
       &:has(.cpTable__action:only-child) {
-        right: fn.px-to-rem(15);
+        right: var(--cp-dimensions-4);
       }
     }
 
-    &__cell--isOptions .cpTable__actions:has(> :nth-child(2)) {
-      border: 1px solid colors.$border-color;
-    }
-
     &__cell--isOptions .cpTable__action {
       display: flex;
     }
@@ -900,8 +1067,8 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     right: 0;
     top: 0;
     bottom: 0;
-    border-radius: fn.px-to-rem(10);
-    background-color: colors.$neutral-light;
+    border-radius: var(--cp-radius-md-lg);
+    background-color: var(--cp-background-primary);
     z-index: 4;
     opacity: 0;
     transition: 0.15s opacity ease-in-out;
@@ -918,10 +1085,10 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       transform: translate3d(-100%, 0, 0);
       background-image: linear-gradient(
         90deg,
-        rgba(colors.$neutral-dark-3, 0) 0,
-        rgba(colors.$neutral-dark-3, 0.2) 20%,
-        rgba(colors.$neutral-dark-3, 0.5) 60%,
-        rgba(colors.$neutral-dark-3, 0)
+        color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-20)} 0%, transparent) 0,
+        color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-20)} 20%, transparent) 20%,
+        color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-20)} 50%, transparent) 60%,
+        color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-20)} 0%, transparent)
       );
       animation: shimmer 2s infinite paused;
     }
@@ -934,22 +1101,22 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   }
 
   &__loader {
-    width: fn.px-to-rem(32);
-    height: fn.px-to-rem(32);
+    width: var(--cp-dimensions-8);
+    height: var(--cp-dimensions-8);
 
     &--isSmall {
       display: inline-block;
       vertical-align: middle;
-      width: fn.px-to-rem(24);
-      height: fn.px-to-rem(24);
+      width: var(--cp-dimensions-6);
+      height: var(--cp-dimensions-6);
     }
   }
 
   &__footer {
-    padding: sp.$space-lg sp.$space-md 0;
+    padding: var(--cp-spacing-xl) var(--cp-spacing-lg) 0;
     display: flex;
     align-items: center;
-    font-size: fn.px-to-em(14);
+    font-size: var(--cp-text-size-sm);
   }
 
   .footer {
@@ -960,11 +1127,11 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
     &__results {
       font-variant-numeric: tabular-nums;
-      color: colors.$neutral-dark-1;
+      color: var(--cp-text-secondary);
     }
 
     &__results strong {
-      color: colors.$neutral-dark;
+      color: var(--cp-text-primary);
     }
 
     &__pagination {
@@ -972,33 +1139,34 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
 
     &__pagination button {
-      box-shadow: 0 fn.px-to-rem(1) fn.px-to-rem(2) rgba(colors.$neutral-dark, 0.08);
-      border-radius: fn.px-to-rem(10);
-      border: fn.px-to-rem(1) solid colors.$border-color;
-      padding: fn.px-to-rem(6) fn.px-to-rem(10);
+      box-shadow: var(--cp-shadows-3xs);
+      border-radius: var(--cp-radius-md-lg);
+      border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+      padding: var(--cp-dimensions-1_5) var(--cp-dimensions-2_5);
       transition: background-color 0.15s;
-      background-color: colors.$neutral-light;
+      background-color: var(--cp-background-primary);
 
       &:hover {
-        background-color: rgba(colors.$neutral-dark, 0.05);
+        background-color: var(--cp-background-primary-hover);
+        border: var(--cp-dimensions-0_25) solid var(--cp-border-soft-hover);
       }
 
       &:focus {
         outline: none !important;
-        box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$blue, $lightness: 70%);
+        box-shadow: 0 0 0 calc(var(--cp-dimensions-0_5) * 1.5) var(--cp-focus);
       }
 
       &:disabled {
         box-shadow: none;
-        border-color: colors.$neutral-light-1;
-        background-color: colors.$neutral-light-1;
-        color: colors.$neutral-dark-2;
+        border-color: var(--cp-border-disabled);
+        background-color: var(--cp-background-disabled);
+        color: var(--cp-foreground-disabled);
         cursor: not-allowed;
         user-select: none;
       }
 
       &:last-of-type {
-        margin-left: sp.$space;
+        margin-left: var(--cp-spacing-md);
       }
     }
   }

package/src/components/CpTableColumnEditor.vue

@@ -144,18 +144,20 @@ const handleDropdownShown = () => {
 <style lang="scss">
 .cpTableColumnEditor {
   text-align: right;
+  padding-bottom: var(--cp-spacing-xs);
 
   &__trigger {
     @extend %u-focus-outline;
 
-    color: colors.$neutral-dark-1;
-    border-radius: fn.px-to-rem(8);
+    color: var(--cp-text-secondary);
+    border-radius: var(--cp-radius-md);
 
     &--isOpen,
     &:hover,
     &:focus-within {
-      color: colors.$neutral-dark;
-      background-color: colors.$neutral-dark-5;
+      transform: none;
+      outline-offset: 0;
+      background-color: var(--cp-background-primary-hover);
     }
   }
 
@@ -167,28 +169,28 @@ const handleDropdownShown = () => {
   &__inner {
     display: flex;
     flex-direction: column;
-    gap: sp.$space;
-    padding-block: sp.$space;
+    gap: var(--cp-spacing-md);
+    padding-block: var(--cp-spacing-md);
   }
 
   &__header {
-    padding-inline: sp.$space-md;
+    padding-inline: var(--cp-spacing-lg);
   }
 
   &__heading,
   &__column:not(:has(.cpTableColumnEditor__checkbox)) {
-    padding: sp.$space-sm sp.$space-md;
+    padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
   }
 
   &__heading {
-    font-size: fn.px-to-rem(12);
-    line-height: fn.px-to-rem(24);
-    color: colors.$neutral-dark-1;
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-md);
+    color: var(--cp-text-secondary);
   }
 
   &__column,
   &__empty {
-    font-size: fn.px-to-rem(14);
+    font-size: var(--cp-text-size-sm);
   }
 
   &__column {
@@ -200,13 +202,13 @@ const handleDropdownShown = () => {
   }
 
   &__divider {
-    height: fn.px-to-rem(1);
-    background-color: colors.$neutral-dark-5;
+    height: var(--cp-dimensions-0_25);
+    background-color: var(--cp-border-soft);
   }
 
   &__checkbox {
-    color: colors.$neutral-dark;
-    padding: sp.$space-sm sp.$space;
+    color: var(--cp-text-primary);
+    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
   }
 }
 </style>

package/src/components/CpTableEmptyState.vue

@@ -20,27 +20,27 @@ defineProps<Props>()
 
 <style lang="scss">
 .cpTableEmptyState {
-  padding: 10vh sp.$space-lg;
+  padding: 10vh var(--cp-spacing-xl);
   display: flex;
   align-items: center;
   justify-content: center;
 
   &__icon {
-    margin-bottom: sp.$space-xl;
-    border-radius: fn.px-to-rem(4);
+    margin-bottom: var(--cp-spacing-2xl);
+    border-radius: var(--cp-radius-sm);
     display: inline-block;
-    background-color: colors.$neutral-light-1;
-    padding: sp.$space-lg;
-    color: colors.$neutral-dark-1;
+    background-color: var(--cp-background-secondary);
+    padding: var(--cp-spacing-xl);
+    color: var(--cp-foreground-secondary);
   }
 
   &__headline {
-    margin-bottom: sp.$space;
-    font-size: fn.px-to-em(20);
+    margin-bottom: var(--cp-spacing-md);
+    font-size: var(--cp-text-size-xl);
   }
 
   &__description {
-    color: colors.$neutral-dark-1;
+    color: var(--cp-text-secondary);
   }
 }
 </style>