@raspberrypifoundation/design-system-react 1.6.0 → 2.0.0-beta.1

package/dist/scss/components/forms/input-radio.scss

@@ -0,0 +1,63 @@
+@forward '../../properties/colors/inputs';
+@forward '../../properties/sizing';
+
+.rpf-input-radio {
+  --rpf-input-radio-hit-target: var(--min-target-size);
+  --rpf-input-radio-size: var(--space-3);
+
+  align-items: center;
+  border-radius: var(--space-1);
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--space-1-5);
+  margin-block-end: var(--space-1);
+  max-width: 50ch;
+  min-height: var(--rpf-input-radio-hit-target);
+  min-width: 240px;
+  padding-block: calc((var(--rpf-input-radio-hit-target) - var(--rpf-input-radio-size)) / 2);
+  padding-inline: var(--space-1);
+  width: 100%;
+
+  input[type='radio'] {
+    align-self: flex-start;
+    appearance: none;
+    background: var(--rpf-white);
+    border: var(--space-0-25) solid var(--rpf-grey-850);
+    border-radius: var(--rpf-input-radio-size);
+    flex-shrink: 0;
+    height: var(--rpf-input-radio-size);
+    margin: 0;
+    width: var(--rpf-input-radio-size);
+
+    &:checked {
+      background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(228, 9%, 15%, 1)"/></svg>');
+      background-position: center center;
+      background-repeat: no-repeat;
+    }
+
+    &:disabled {
+      border-color: var(--rpf-grey-400);
+
+      &:checked {
+        background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(229, 8%, 61%, 1)"/></svg>');
+      }
+    }
+  }
+
+  &.rpf-input--full-width {
+    max-width: none;
+  }
+
+  &:has(> input[type='radio']:disabled), &--disabled {
+    background-color: var(--rpf-input-background-color-disabled);
+    color: var(--rpf-grey-400)
+  }
+
+  &:has(> input[type='radio']:focus-visible) {
+    outline: 3px solid var(--rpf-input-outline-color);
+
+    > input[type='radio']:focus-visible {
+      outline: none;
+    }
+  }
+}

package/dist/scss/components/forms/input-search.scss

@@ -0,0 +1,65 @@
+@forward '../../properties/colors/greys';
+@forward '../../properties/colors/inputs';
+@forward '../../properties/font-size';
+@forward '../../properties/spacing';
+
+.rpf-input-search-container {
+  display: flex;
+  max-width: 50ch;
+  min-width: 240px;
+  width: 100%;
+
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .rpf-input-search {
+    border-end-end-radius: 0;
+    border-inline-end: 0;
+    border-start-end-radius: 0;
+  }
+
+  .rpf-button {
+    flex-shrink: 0;
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    box-sizing: border-box;
+    justify-content: center;
+    max-width: var(--space-6);
+
+    // Override default rpf-button border styles
+    &::before {
+      border: var(--input-border-width) solid var(--rpf-input-color);
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    }
+
+    // Override default rpf-button disabled styles
+    &:disabled,
+    &--disabled {
+      .rpf-button__icon {
+        color: var(--rpf-input-color);
+      }
+      &::before {
+        background-color: var(--rpf-input-background-color-disabled);
+        border-color: var(--rpf-input-background-color-disabled);
+      }
+    }
+
+    // Change border styles to work with input error styles
+    &--error {
+      &::before {
+        border-color: var(--rpf-alert-error);
+      }
+    }
+  }
+
+  // Override default rpf-button focus styles
+  .rpf-input-search:focus-visible,
+  .rpf-button:focus-visible {
+    outline: 3px solid var(--rpf-input-outline-color);
+    z-index: 1;
+    &::before {
+      outline: 0;
+    }
+  }
+}

package/dist/scss/components/forms/input-select.scss

@@ -0,0 +1,14 @@
+.rpf-input.rpf-input-select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>");
+  background-repeat: no-repeat;
+  background-position: center right var(--space-1-5);
+
+  html[dir='rtl'] & {
+    background-position: center left var(--space-1-5);
+  }
+
+  &:disabled,
+  &--disabled {
+    background-image: none;
+  }
+}

package/dist/scss/components/forms/input-text.scss

@@ -0,0 +1,5 @@
+@use '../../mixins/inputs';
+
+.rpf-input.rpf-input-text {
+  @include inputs.readonly;
+}

package/dist/scss/components/forms/input-textarea.scss

@@ -0,0 +1,12 @@
+@use '../../mixins/inputs';
+
+.rpf-input.rpf-input-textarea {
+  resize: vertical;
+  min-height: 120px;
+  height: auto;
+  max-height: 240px;
+  overflow: auto;
+  white-space: pre-wrap;
+
+  @include inputs.readonly;
+}

package/dist/scss/components/forms/inputs.scss

@@ -0,0 +1,40 @@
+@forward '../../properties/border';
+@forward '../../properties/colors/inputs';
+@forward '../../properties/font-size';
+@forward '../../properties/spacing';
+@use '../../mixins/inputs';
+
+.rpf-input-field {
+  margin-block-end: var(--space-3);
+}
+
+.rpf-input {
+  all: unset;
+  background-color: var(--rpf-input-background-color);
+  border: var(--input-border-width) solid var(--rpf-input-color);
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  color: var(--rpf-input-color);
+  display: flex;
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-2);
+  padding-block: calc(var(--space-1) - 2px);
+  padding-inline: var(--space-1-5);
+  max-width: 50ch;
+  min-width: 240px;
+  width: 100%;
+
+  @include inputs.disabled;
+
+  &:focus-visible {
+    outline: 3px solid var(--rpf-input-outline-color);
+  }
+
+  &--error {
+    border-color: var(--rpf-input-color-error);
+  }
+
+  &--full-width {
+    max-width: none;
+  }
+}

package/dist/scss/components/layout/decorative-section.scss

@@ -0,0 +1,185 @@
+@forward '../../properties/spacing';
+
+$wave-path-1: 'm0 0 66.667 9.74c66.666 9.738 200 29.216 333.333 38.956a2741.784 2741.784 0 0 0 400 0c133.333-9.74 266.67-29.218 400-32.464 133.33-3.246 266.67 9.739 333.33 16.232l66.67 6.492V64H0V0Z';
+$wave-path-2: 'm0 28.8 66.667 4.8c66.666 4.8 200 14.4 333.333 19.2 133.333 4.8 266.667 4.8 400-4.8 133.333-9.6 266.67-28.8 400-38.4C1333.33 0 1466.67 0 1533.33 0H1600v64H0V28.8Z';
+$wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.33-8.93-266.667-5.953-400 2.977C666.667 17.3 533.333 32.185 400 36.65c-133.333 4.465-266.667-1.488-333.333-4.465L0 29.208V66h1600V56Z';
+
+@supports selector(:has(*)) {
+  .rpf-decorative-section {
+    --rpf-decorative-section-wave-variant-1-mask-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none"><path d="#{$wave-path-1}" /></svg>');
+    --rpf-decorative-section-wave-variant-2-mask-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none"><path d="#{$wave-path-2}" /></svg>');
+    --rpf-decorative-section-wave-variant-3-mask-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none"><path d="#{$wave-path-3}" /></svg>');
+    --rpf-decorative-section-wave-variant-1-mask-svg-mirror: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none" transform="scale(-1, 1)"><path d="#{$wave-path-1}" /></svg>');
+    --rpf-decorative-section-wave-variant-2-mask-svg-mirror: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none" transform="scale(-1, 1)"><path d="#{$wave-path-2}" /></svg>');
+    --rpf-decorative-section-wave-variant-3-mask-svg-mirror: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none" transform="scale(-1, 1)"><path d="#{$wave-path-3}" /></svg>');
+    --rpf-decorative-section-wave-centre-variant-content-mask: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
+    --rpf-decorative-section-wave-height: clamp(16px, 3.5cqw, 56px);
+    --rpf-decorative-section-wave-mask-height: clamp(18px, 4cqw, 64px);
+    --rpf-decorative-section-wave-variant-svg-mask: '';
+    --rpf-decorative-section-slice-height: clamp(var(--space-2), 3cqw, var(--space-6));
+
+    &__block-start-wave {
+      padding-block-start: var(--rpf-decorative-section-wave-height);
+      margin-block-start: calc(var(--rpf-decorative-section-wave-height) * -1);
+      -webkit-mask-image:
+        var(--rpf-decorative-section-wave-variant-svg-mask),
+        var(--rpf-decorative-section-wave-centre-variant-content-mask);
+      mask-image:
+        var(--rpf-decorative-section-wave-variant-svg-mask),
+        var(--rpf-decorative-section-wave-centre-variant-content-mask);
+      -webkit-mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+      mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+      -webkit-mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
+      mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+
+      // Default
+      & {
+        --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-1-mask-svg);
+
+        &--mirrored {
+          --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-1-mask-svg-mirror);
+        }
+      }
+
+      &--variant-1 {
+        --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-2-mask-svg);
+
+        &-mirrored {
+          --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-2-mask-svg-mirror);
+        }
+      }
+
+      &--variant-2 {
+        --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-3-mask-svg);
+
+        &-mirrored {
+          --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-3-mask-svg-mirror);
+        }
+      }
+    }
+
+    &:has(+ .rpf-decorative-section__block-start-wave) {
+      padding-block-end: var(--rpf-decorative-section-wave-height);
+
+      &.rpf-decorative-section--no-padding {
+        padding-block-end: 0;
+      }
+    }
+
+    &__block-end-wave {
+      padding-block-end: var(--rpf-decorative-section-wave-height);
+      margin-block-end: calc(var(--rpf-decorative-section-wave-height) * -1);
+
+      + .rpf-decorative-section {
+        padding-block-start: var(--rpf-decorative-section-wave-height);
+        -webkit-mask-image:
+          var(--rpf-decorative-section-wave-variant-svg-mask),
+          var(--rpf-decorative-section-wave-centre-variant-content-mask);
+        mask-image:
+          var(--rpf-decorative-section-wave-variant-svg-mask),
+          var(--rpf-decorative-section-wave-centre-variant-content-mask);
+        -webkit-mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+        mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+        -webkit-mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
+        mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+
+        &--no-padding {
+          padding-block-start: 0;
+        }
+      }
+
+      &.rpf-decorative-section--no-padding {
+        padding-block-end: 0;
+        margin-block-end: calc(var(--rpf-decorative-section-wave-mask-height) * -1);
+      }
+
+      // Default
+      & {
+        + .rpf-decorative-section {
+          --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-1-mask-svg);
+        }
+
+        &--mirrored {
+          + .rpf-decorative-section {
+            --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-1-mask-svg-mirror);
+          }
+        }
+      }
+
+      &--variant-1 {
+        + .rpf-decorative-section {
+          --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-2-mask-svg);
+        }
+
+        &-mirrored {
+          + .rpf-decorative-section {
+            --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-2-mask-svg-mirror);
+          }
+        }
+      }
+
+      &--variant-2 {
+        + .rpf-decorative-section {
+          --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-3-mask-svg);
+        }
+
+        &-mirrored {
+          + .rpf-decorative-section {
+            --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-3-mask-svg-mirror);
+          }
+        }
+      }
+    }
+
+    &__block-start-slice {
+      padding-block-start: var(--rpf-decorative-section-slice-height);
+
+      clip-path: polygon(0 var(--rpf-decorative-section-slice-height),100% 0,100% 100%,0 100%);
+      margin-block-start: calc(var(--rpf-decorative-section-slice-height) * -1);
+      padding-block-start: var(--rpf-decorative-section-slice-height);
+
+      &--mirrored {
+        clip-path: polygon(0 0,100% var(--rpf-decorative-section-slice-height),100% 100%,0 100%);
+      }
+    }
+
+    &:has(+ .rpf-decorative-section__block-start-slice) {
+      padding-block-end: var(--rpf-decorative-section-slice-height);
+
+      &.rpf-decorative-section--no-padding {
+        padding-block-end: 0;
+      }
+    }
+
+    &__block-end-slice {
+      padding-block-end: var(--rpf-decorative-section-slice-height);
+
+      + .rpf-decorative-section {
+        clip-path: polygon(0 var(--rpf-decorative-section-slice-height),100% 0,100% 100%,0 100%);
+        margin-block-start: calc(var(--rpf-decorative-section-slice-height) * -1);
+        padding-block-start: var(--rpf-decorative-section-slice-height);
+      }
+
+      &--mirrored + .rpf-decorative-section {
+        clip-path: polygon(0 0,100% var(--rpf-decorative-section-slice-height),100% 100%,0 100%);
+      }
+    }
+
+    &--no-padding {
+      padding-block: 0;
+
+      > img:only-child {
+        display: block;
+      }
+    }
+
+    // Needed for specificity
+    + .rpf-decorative-section--no-padding {
+      padding-block: 0;
+    }
+  }
+}

package/dist/scss/components/link.scss

@@ -0,0 +1,51 @@
+@use '../mixins/typography';
+@forward '../properties/sizing';
+
+:root, :host {
+  --link-color: var(--rpf-link-text);
+  --link-color-active: var(--rpf-navy-600);
+  --link-color-hover: var(--link-color);
+}
+
+.rpf-link {
+  border-radius: var(--border-radius);
+  color: var(--link-color);
+  cursor: pointer;
+  font-weight: var(--font-weight-bold);
+  max-inline-size: fit-content;
+
+  &:active {
+    color: var(--link-color-active);
+  }
+
+  &:hover {
+    color: var(--link-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--link-color);
+  }
+
+  &--block {
+    align-items: center;
+    display: flex;
+    min-block-size: var(--min-target-size);
+  }
+
+  &--external {
+    display: inline-flex;
+    text-decoration: none;
+
+    span {
+      text-decoration: underline;
+    }
+
+    &::after {
+      content: '\e89e';
+      display: inline-flex;
+      font-family: 'Material Symbols Sharp', sans-serif;
+      padding-inline-end: var(--space-0-5);
+      padding-inline-start: var(--space-0-25);
+    }
+  }
+}

package/dist/scss/components/menu-item.scss

@@ -0,0 +1,66 @@
+@use '../mixins/typography' as typography;
+@forward '../properties/spacing';
+@forward '../properties/colors/greys';
+@forward '../properties/colors/text';
+@forward '../properties/colors/alert';
+
+:root,
+:host {
+  --rpf-menu-item-text-color: var(--rpf-text-primary);
+  --rpf-menu-item-text-color-danger: var(--rpf-alert-error);
+  --rpf-menu-item-background-color: transparent;
+  --rpf-menu-item-background-color-hover: var(--rpf-grey-50);
+  --rpf-menu-item-background-color-active: var(--rpf-grey-100);
+  --rpf-menu-item-focus: var(--rpf-raspberry-800);
+}
+
+.rpf-menu__item {
+  // Reset li styles
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  color: var(--rpf-menu-item-text-color);
+}
+
+.rpf-menu__item button,
+.rpf-menu__item a {
+  // Reset button and link styles
+  border: none;
+  margin: 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  user-select: none;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: inherit;
+
+  // Item styles
+  text-align: start;
+  min-inline-size: 7.5rem;
+  inline-size: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  border-radius: var(--space-1);
+  @include typography.style-1(bold);
+  color: inherit;
+  padding: var(--space-1-5) var(--space-1);
+
+  &:hover {
+    background-color: var(--rpf-menu-item-background-color-hover);
+  }
+
+  &:active {
+    background-color: var(--rpf-menu-item-background-color-active);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--rpf-menu-item-focus);
+    // outline-offset: 3px;
+  }
+}
+
+.rpf-menu__item--danger {
+  color: var(--rpf-menu-item-text-color-danger);
+}

package/dist/scss/components/menu-title.scss

@@ -0,0 +1,25 @@
+@use '../mixins/typography' as typography;
+
+:root, :host{
+  --rpf-menu-title-color: var(--rpf-text-secondary);
+}
+
+.rpf-menu__title {
+  // Reset li styles
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  // Title styles
+  color: var(--rpf-menu-title-color);
+  @include typography.style-1(bold);
+
+  margin-block: var(--space-0-25);
+  border-block-end: 1px solid var(--rpf-menu-divider-color);
+}
+
+.rpf-menu__title span {
+  display: inline-block;
+  margin-inline: var(--space-1);
+  margin-block-end: var(--space-0-5);
+}

package/dist/scss/components/menu.scss

@@ -0,0 +1,31 @@
+@forward '../properties/spacing';
+@forward '../properties/shadows';
+@forward 'menu-item';
+@forward 'menu-title';
+
+:root,
+:host {
+  --rpf-menu-background-color: var(--rpf-white);
+  --rpf-menu-border-color: var(--rpf-grey-50);
+  --rpf-menu-divider-color: var(--rpf-grey-100);
+}
+
+.rpf-menu {
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  padding: var(--space-1-5);
+  gap: var(--space-0-5);
+  border-radius: var(--space-1);
+  border: 2px solid var(--rpf-menu-border-color);
+  background: var(--rpf-menu-background-color);
+  box-shadow: var(--rpf-shadow-centre);
+  list-style: none;
+}
+
+.rpf-menu hr {
+  inline-size: 100%;
+  border: none;
+  border-block-start: 1px solid var(--rpf-menu-divider-color);
+  margin-block: var(--space-0-25);
+}

package/dist/scss/components/progress-bar.scss

@@ -0,0 +1,43 @@
+@use '../mixins/typography' as typography;
+
+@forward "../properties/spacing";
+@forward "../properties/colors/greys";
+@forward "../properties/colors/decorative";
+
+
+:root, :host {
+  --color-progress-bar-complete: var(--rpf-navy-800);
+  --color-progress-bar-incomplete: var(--rpf-grey-150);
+}
+
+.rpf-progress-bar {
+  &__label {
+    @include typography.style-1;
+    align-items: center;
+    display: grid;
+    grid-gap: var(--space-3);
+    grid-template-columns: max-content 1fr;
+  }
+
+  &__bar{
+    background: var(--color-progress-bar-incomplete);
+    block-size: .375rem;
+    border-radius: .375rem;
+    inline-size: 100%;
+
+    &::-webkit-progress-bar {
+      background: var(--color-progress-bar-incomplete);
+      border-radius: .375rem;
+    }
+
+    &::-webkit-progress-value {
+      background: var(--color-progress-bar-complete);
+      border-radius: .375rem;
+    }
+
+    &::-moz-progress-bar {
+      background: var(--color-progress-bar-complete);
+      border-radius: .375rem;
+    }
+  }
+}

package/dist/scss/components/squiggle.scss

@@ -0,0 +1,46 @@
+@forward '../properties/colors/brand';
+@forward '../properties/spacing';
+
+%rpf-squiggle-default {
+  --rpf-squiggle-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%22%20viewBox%3D%220%200%2029%2013%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%2011c7%200%207-8%2014-8%208%200%208%208%2015%208%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3Awhite%3Bstroke-width%3A4px%22%20transform%3D%22translate%28-3%29%22%2F%3E%3C%2Fsvg%3E');
+  --rpf-squiggle-end-cap-l-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%22%20viewBox%3D%220%200%202%2013%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2211%22%20r%3D%222%22%20style%3D%22fill%3Awhite%22%2F%3E%3C%2Fsvg%3E');
+  --rpf-squiggle-end-cap-r-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%22%20viewBox%3D%220%200%202%2013%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%2211%22%20r%3D%222%22%20style%3D%22fill%3Awhite%22%2F%3E%3C%2Fsvg%3E');
+  background-color: var(--rpf-squiggle-color, var(--rpf-brand-raspberry));
+  border: 2px solid transparent;
+  border-block: none;
+  block-size: 13px;
+  mask-clip: content-box, border-box, border-box;
+  mask-image: var(--rpf-squiggle-mask), var(--rpf-squiggle-end-cap-l-mask), var(--rpf-squiggle-end-cap-r-mask);
+  mask-origin: content-box, border-box, border-box;
+  mask-position: top left, top right, top left;
+  mask-repeat: round, no-repeat, no-repeat;
+  mask-size: 29px 13px, 2px 13px, 2px 13px;
+
+  // Chromium-based browsers currently need vendor prefix
+  -webkit-mask-clip: content-box, border-box, border-box;
+  -webkit-mask-image: var(--rpf-squiggle-mask), var(--rpf-squiggle-end-cap-l-mask), var(--rpf-squiggle-end-cap-r-mask);
+  -webkit-mask-origin: content-box, border-box, border-box;
+  -webkit-mask-position: top left, top right, top left;
+  -webkit-mask-repeat: round, no-repeat, no-repeat;
+  -webkit-mask-size: 29px 13px, 2px 13px, 2px 13px;
+}
+
+.rpf-squiggle {
+  @extend %rpf-squiggle-default;
+}
+
+.rpf-squiggle-heading {
+  display: inline-block;
+  position: relative;
+  padding-block-end: calc(13px + var(--space-1));
+
+  &::after {
+    @extend %rpf-squiggle-default;
+
+    content: '';
+    display: block;
+    position: absolute;
+    inset-inline: 0;
+    margin-block-start: var(--space-1);
+  }
+}