claritas-web-framework 5.0.0

package/scss/mixins/_breakpoints.scss

@@ -0,0 +1,123 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}

package/scss/mixins/_button.scss

@@ -0,0 +1,92 @@
+@mixin make-button() {
+  --#{$variable-prefix}border-style: solid;
+  --#{$variable-prefix}border-width: 1px;
+  --#{$variable-prefix}border-color: #{rgba($black, 0.2)};
+  --#{$variable-prefix}border-color-hover: #{rgba($black, 0.3)};
+  --#{$variable-prefix}border-radius: #{$border-radius-medium};
+  --#{$variable-prefix}color: #{$body-color};
+  --#{$variable-prefix}color-hover: #{$body-color};
+  --#{$variable-prefix}color-focus: #{$body-color};
+  --#{$variable-prefix}shadow-color-active: #{rgba($black, 0.2)};
+  --#{$variable-prefix}shadow-color-focus: #{rgba($black, 0.1)};
+  --#{$variable-prefix}box-shadow-active: 0 0 0 0.125em var(--#{$variable-prefix}shadow-color-active);
+  --#{$variable-prefix}box-shadow-focus: 0 0 0 0.125em var(--#{$variable-prefix}shadow-color-focus);
+  --#{$variable-prefix}background-color: #{$white};
+  --#{$variable-prefix}background-color-hover: #{$white};
+  --#{$variable-prefix}background-color-focus: #{rgba($black, 0.05)};
+  --#{$variable-prefix}padding-y: calc((#{$spacer} * 0.5) - 1.5px);
+  --#{$variable-prefix}padding-x: #{$spacer};
+  --#{$variable-prefix}padding: var(--#{$variable-prefix}padding-y) var(--#{$variable-prefix}padding-x);
+  --#{$variable-prefix}font-size: #{$font-size-base};
+  --#{$variable-prefix}align-items: center;
+  --#{$variable-prefix}display: inline-flex;
+  --#{$variable-prefix}vertical-align: top;
+  --#{$variable-prefix}cursor: pointer;
+  --#{$variable-prefix}justify-content: center;
+  --#{$variable-prefix}text-align: center;
+  --#{$variable-prefix}white-space: nowrap;
+  --#{$variable-prefix}height: auto;
+  --#{$variable-prefix}width: auto;
+  --#{$variable-prefix}outline: 0;
+  --#{$variable-prefix}text-decoration: none;
+  --#{$variable-prefix}pointer-events: auto;
+  --#{$variable-prefix}opacity: 1;
+
+  display: var(--#{$variable-prefix}display);
+  border-width: var(--#{$variable-prefix}border-width);
+  border-style: var(--#{$variable-prefix}border-style);
+  border-color: var(--#{$variable-prefix}border-color);
+  color: var(--#{$variable-prefix}color);
+  background-color: var(--#{$variable-prefix}background-color);
+  padding: var(--#{$variable-prefix}padding);
+  border-radius: var(--#{$variable-prefix}border-radius);
+  font-size: var(--#{$variable-prefix}font-size);
+  align-items: var(--#{$variable-prefix}align-items);
+  justify-content: var(--#{$variable-prefix}justify-content);
+  text-align: var(--#{$variable-prefix}text-align);
+  vertical-align: var(--#{$variable-prefix}vertical-align);
+  cursor: var(--#{$variable-prefix}cursor);
+  white-space: var(--#{$variable-prefix}white-space);
+  height: var(--#{$variable-prefix}height);
+  width: var(--#{$variable-prefix}width);
+  outline: var(--#{$variable-prefix}outline);
+  text-decoration: var(--#{$variable-prefix}text-decoration);
+  pointer-events: var(--#{$variable-prefix}pointer-events);
+  opacity: var(--#{$variable-prefix}opacity);
+
+  &.active,
+  &:active,
+  &:hover {
+    border-color: var(--#{$variable-prefix}border-color-hover);
+  }
+
+  &.active,
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: var(--#{$variable-prefix}background-color-hover);
+    color: var(--#{$variable-prefix}color-hover);
+    text-decoration: var(--#{$variable-prefix}text-decoration);
+  }
+
+  &.active,
+  &:active {
+    box-shadow: var(--#{$variable-prefix}box-shadow-active);
+    color: var(--#{$variable-prefix}color-focus);
+  }
+
+  &:focus {
+    color: var(--#{$variable-prefix}color-focus);
+    background-color: var(--#{$variable-prefix}background-color-focus);
+
+    &:not(:active):not(.active) {
+      box-shadow: var(--#{$variable-prefix}box-shadow-focus);
+    }
+  }
+
+  &.active,
+  &:active,
+  &:focus {
+    z-index: 1;
+  }
+}

package/scss/mixins/_card.scss

@@ -0,0 +1,31 @@
+@mixin make-card() {
+  --#{$variable-prefix}background-color: #{$white};
+  --#{$variable-prefix}border-color: #{rgba($black, .12)};
+  --#{$variable-prefix}border-radius: #{$card-border-radius};
+
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--#{$variable-prefix}border-color);
+
+  margin-bottom: $spacer;
+  background-color: var(--#{$variable-prefix}background-color);
+  border-radius: var(--#{$variable-prefix}border-radius);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  width: 100%;
+  position: relative;
+
+  & > * {
+    &:first-child {
+      border-top-left-radius: calc(var(--#{$variable-prefix}border-radius) - 1px);
+      border-top-right-radius: calc(var(--#{$variable-prefix}border-radius) - 1px);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: calc(var(--#{$variable-prefix}border-radius) - 1px);
+      border-bottom-right-radius: calc(var(--#{$variable-prefix}border-radius) - 1px);
+    }
+  }
+}

package/scss/mixins/_caret.scss

@@ -0,0 +1,33 @@
+@mixin make-caret() {
+  position: relative;
+
+  &::after {
+    --#{$variable-prefix}color-caret: #{rgba($black, 0.5)};
+    position: absolute;
+    content: '';
+    top: calc(50% - calc($spacer * 0.125));
+    width: 0;
+    height: 0;
+    border-left: calc($spacer * 0.25) solid rgba($black, 0);
+    border-right: calc($spacer * 0.25) solid rgba($black, 0);
+    pointer-events: none;
+  }
+}
+
+@mixin make-caret-down() {
+  @include make-caret();
+
+  &::after {
+    border-bottom: 0;
+    border-top: calc($spacer * 0.25) solid var(--#{$variable-prefix}color-caret);
+  }
+}
+
+@mixin make-caret-up() {
+  @include make-caret();
+
+  &::after {
+    border-top: 0;
+    border-bottom: calc($spacer * 0.25) solid var(--#{$variable-prefix}color-caret);
+  }
+}

package/scss/mixins/_clearfix.scss

@@ -0,0 +1,7 @@
+@mixin clearfix() {
+  &::after {
+    display: block;
+    content: "";
+    clear: both;
+  }
+}

package/scss/mixins/_close.scss

@@ -0,0 +1,40 @@
+@mixin make-close() {
+  @extend .button;
+
+  --#{$variable-prefix}padding: calc(#{$spacer} * 0.575);
+  --#{$variable-prefix}border-radius: #{$border-radius-round};
+  --#{$variable-prefix}border-color: #{rgba($black, 0)};
+  --#{$variable-prefix}border-color-hover: #{rgba($black, 0)};
+  --#{$variable-prefix}background-color: #{rgba($black, 0.2)};
+  --#{$variable-prefix}background-color-hover: #{rgba($black, 0.3)};
+  --#{$variable-prefix}background-color-focus: #{rgba($black, 0.4)};
+  --#{$variable-prefix}box-shadow-active: none;
+  --#{$variable-prefix}box-shadow-focus: none;
+  --#{$variable-prefix}position: relative;
+  --#{$variable-prefix}vertical-align: text-bottom;
+
+  position: var(--#{$variable-prefix}position);
+  vertical-align: var(--#{$variable-prefix}vertical-align);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    content: '';
+    left: 50%;
+    top: 50%;
+    background-color: $white;
+    transform-origin: center center;
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  }
+
+  &::before {
+    height: 2px;
+    width: 50%;
+  }
+
+  &::after {
+    width: 2px;
+    height: 50%;
+  }
+}

package/scss/mixins/_container.scss

@@ -0,0 +1,20 @@
+@mixin make-container() {
+  --#{$variable-prefix}width: 100%;
+  --#{$variable-prefix}max-width: 100vw;
+  --#{$variable-prefix}margin: auto;
+  --#{$variable-prefix}padding: 0 #{$grid-gutter-x};
+
+  width: var(--#{$variable-prefix}width);
+  max-width: var(--#{$variable-prefix}max-width);
+  margin-left: var(--#{$variable-prefix}margin);
+  margin-right: var(--#{$variable-prefix}margin);
+  padding: var(--#{$variable-prefix}padding);
+}
+
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      --#{$variable-prefix}max-width: #{$container-max-width};
+    }
+  }
+}

package/scss/mixins/_grid.scss

@@ -0,0 +1,20 @@
+@mixin make-grid() {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc($grid-gutter-y * -1);
+  margin-right: calc($grid-gutter-x * -0.5) !important;
+  margin-left: calc($grid-gutter-x * -0.5) !important;
+
+  & > * {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    padding-right: calc($grid-gutter-x * 0.5);
+    padding-left: calc($grid-gutter-x * 0.5);
+    margin-top: $grid-gutter-y;
+  }
+}
+
+@mixin make-col-offset($size) {
+  margin-left: percentage($size / 12);
+}

package/scss/mixins/_group.scss

@@ -0,0 +1,78 @@
+@mixin make-group() {
+  --#{$variable-prefix}margin: 0 0 #{$spacer};
+  --#{$variable-prefix}display: flex;
+  --#{$variable-prefix}flex-wrap: wrap;
+  --#{$variable-prefix}align-items: center;
+  --#{$variable-prefix}justify-content: flex-start;
+  --#{$variable-prefix}flex-direction: row;
+
+  margin: var(--#{$variable-prefix}margin);
+  display: var(--#{$variable-prefix}display);
+  flex-wrap: var(--#{$variable-prefix}flex-wrap);
+  align-items: var(--#{$variable-prefix}align-items);
+  justify-content: var(--#{$variable-prefix}justify-content);
+  flex-direction: var(--#{$variable-prefix}flex-direction);
+}
+
+@mixin make-group-column() {
+  @include make-group();
+
+  --#{$variable-prefix}flex-direction: column;
+
+  & > * {
+    margin-bottom: 0;
+
+    &:not(:last-child) {
+      margin-bottom: calc($spacer * 0.5);
+    }
+  }
+}
+
+@mixin make-group-row() {
+  @include make-group();
+
+  & > * {
+    margin-right: 0;
+
+    &:not(:last-child) {
+      margin-right: calc($spacer * 0.5);
+    }
+  }
+}
+
+@mixin make-grouped-column() {
+  & > * {
+    &:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      margin-bottom: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      margin-top: -1px;
+    }
+  }
+}
+
+@mixin make-grouped-row() {
+  flex-wrap: nowrap;
+
+  & > * {
+    &:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      margin-right: -1px;
+    }
+
+    &:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

package/scss/mixins/_list.scss

@@ -0,0 +1,22 @@
+@mixin make-list-unsyled() {
+  --#{$variable-prefix}list-style: none;
+  --#{$variable-prefix}margin: 0 0 #{$spacer};
+  --#{$variable-prefix}padding: 0;
+
+  list-style: var(--#{$variable-prefix}list-style);
+  margin: var(--#{$variable-prefix}margin);
+  padding: var(--#{$variable-prefix}padding);
+}
+
+@mixin make-list-inline() {
+  @include make-group-row();
+  @include make-list-unsyled();
+
+  --#{$variable-prefix}gap: #{$spacer};
+
+  & > * {
+    &:not(:last-child) {
+      margin-right: var(--#{$variable-prefix}gap);
+    }
+  }
+}

package/scss/mixins/_pill.scss

@@ -0,0 +1,44 @@
+@mixin make-pill() {
+  --#{$variable-prefix}border-width: 1px;
+  --#{$variable-prefix}border-color: #{rgba($black, 0.12)};
+  --#{$variable-prefix}border-style: solid;
+  --#{$variable-prefix}border-radius: #{$border-radius-round};
+  --#{$variable-prefix}color: #{$body-color};
+  --#{$variable-prefix}background-color: #{$light};
+  --#{$variable-prefix}background-color-hover: #{shade-color($light, 10%)};
+  --#{$variable-prefix}padding: calc((#{$spacer} * 0.125) - 1px) calc(#{$spacer} * 0.25);
+  --#{$variable-prefix}line-height: 1;
+  --#{$variable-prefix}font-weight: 700;
+  --#{$variable-prefix}display: inline-flex;
+  --#{$variable-prefix}align-items: center;
+  --#{$variable-prefix}vertical-align: top;
+  --#{$variable-prefix}justify-content: center;
+  --#{$variable-prefix}text-align: center;
+  --#{$variable-prefix}white-space: nowrap;
+  --#{$variable-prefix}height: auto;
+  --#{$variable-prefix}min-width: #{$spacer};
+  --#{$variable-prefix}outline: 0;
+  --#{$variable-prefix}text-decoration: none;
+  --#{$variable-prefix}font-size: #{$font-size-small};
+
+  border-width: var(--#{$variable-prefix}border-width);
+  border-color: var(--#{$variable-prefix}border-color);
+  border-style: var(--#{$variable-prefix}border-style);
+  font-weight: var(--f#{$variable-prefix}ont-weight);
+  line-height: var(--#{$variable-prefix}line-height);
+  color: var(--#{$variable-prefix}color);
+  background-color: var(--#{$variable-prefix}background-color);
+  padding: var(--#{$variable-prefix}padding);
+  border-radius: var(--#{$variable-prefix}border-radius);
+  align-items: var(--#{$variable-prefix}align-items);
+  display: var(--#{$variable-prefix}display);
+  vertical-align: var(--#{$variable-prefix}vertical-align);
+  justify-content: var(--#{$variable-prefix}justify-content);
+  text-align: var(--#{$variable-prefix}text-align);
+  white-space: var(--#{$variable-prefix}white-space);
+  height: var(--#{$variable-prefix}height);
+  min-width: var(--#{$variable-prefix}min-width);
+  outline: var(--#{$variable-prefix}outline);
+  text-decoration: var(--#{$variable-prefix}text-decoration);
+  font-size: var(--#{$variable-prefix}font-size);
+}

package/scss/mixins/_table.scss

@@ -0,0 +1,93 @@
+@mixin make-table() {
+  --#{$variable-prefix}border-color: #{rgba($black, 0.12)};
+  --#{$variable-prefix}border-width: 1px;
+  --#{$variable-prefix}border-width-thick: 2px;
+  --#{$variable-prefix}padding: calc((#{$spacer} * 0.625) - 1px) #{$spacer};
+  --#{$variable-prefix}padding-small: calc((#{$spacer} * 0.25) - 1px) calc(#{$spacer} * 0.75);
+
+  width: 100%;
+
+  & td,
+  & th {
+    padding: var(--#{$variable-prefix}padding);
+    vertical-align: top;
+    border-style: solid;
+    border-color: var(--#{$variable-prefix}border-color);
+    border-width: 0 0 var(--#{$variable-prefix}border-width) 0;
+  }
+
+  & thead {
+    & tr {
+      & th {
+        border-width: 0 0 var(--#{$variable-prefix}border-width-thick) 0;
+      }
+    }
+  }
+
+  & tfoot {
+    & tr {
+      & th {
+        border-width: var(--#{$variable-prefix}border-width-thick) 0 var(--#{$variable-prefix}border-width) 0;
+      }
+    }
+  }
+}
+
+@mixin make-tableBordered() {
+  & td,
+  & th {
+    border-width: var(--#{$variable-prefix}border-width);
+  }
+
+  & thead {
+    & tr {
+      & th {
+        border-width: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-width)
+          var(--#{$variable-prefix}border-width-thick) var(--#{$variable-prefix}border-width);
+      }
+    }
+  }
+
+  & tfoot {
+    & tr {
+      & th {
+        border-width: var(--#{$variable-prefix}border-width-thick) var(--#{$variable-prefix}border-width)
+          var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-width);
+      }
+    }
+  }
+}
+
+@mixin make-tableStriped() {
+  & tbody {
+    & tr {
+      &:nth-of-type(even) {
+        background-color: rgba($dark, 0.04);
+      }
+
+      &:nth-of-type(odd) {
+        background-color: rgba($light, 0.04);
+      }
+    }
+  }
+}
+
+@mixin make-tableSmall() {
+  & td,
+  & th {
+    padding: var(--#{$variable-prefix}padding-small);
+  }
+}
+
+@mixin make-tableHover() {
+  & tbody {
+    & tr {
+      &:hover {
+        & td,
+        & th {
+          background-color: rgba($black, 0.05);
+        }
+      }
+    }
+  }
+}

package/scss/mixins/_wrap.scss

@@ -0,0 +1,7 @@
+@mixin make-wrap-overflow() {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  position: static !important;
+}

package/scss/modules/_alert.scss

@@ -0,0 +1,47 @@
+.alert {
+  --#{$variable-prefix}background-color: #{tint-color($body-color, 87.5%)};
+  --#{$variable-prefix}color: #{$body-color};
+  --#{$variable-prefix}link-color: #{$link-color};
+  --#{$variable-prefix}link-color-hover: #{$link-color-hover};
+
+  border: 1px solid rgba($black, 0.12);
+  margin-bottom: $spacer;
+  padding: $spacer;
+  border-radius: $border-radius-medium;
+  background-color: var(--#{$variable-prefix}background-color);
+  color: var(--#{$variable-prefix}color);
+  position: relative;
+
+  & > * {
+    &:last-child {
+      --margin-bottom: 0;
+    }
+  }
+
+  & a:not(.button) {
+    font-weight: bolder;
+    color: var(--#{$variable-prefix}link-color);
+
+    &:hover {
+      color: var(--#{$variable-prefix}link-color-hover);
+    }
+  }
+}
+
+@each $key, $value in $colors {
+  .alert--#{$key} {
+    --#{$variable-prefix}background-color: #{$value};
+    --#{$variable-prefix}color: #{shade-color($value, 75%)};
+    --#{$variable-prefix}link-color: #{shade-color($value, 75%)};
+    --#{$variable-prefix}link-color-hover: #{shade-color($value, 50%)};
+  }
+}
+
+@each $key, $value in $theme-colors {
+  .alert--#{$key} {
+    --#{$variable-prefix}background-color: #{$value};
+    --#{$variable-prefix}color: #{shade-color($value, 75%)};
+    --#{$variable-prefix}link-color: #{shade-color($value, 75%)};
+    --#{$variable-prefix}link-color-hover: #{shade-color($value, 50%)};
+  }
+}