@apolitical/component-library 0.0.5 → 1.1.0-beta.1

package/styles/base/_overlays.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@import './../mixins',
+        './../variables';
+
+@layer base {
+  .overlay {
+    @include transition(opacity, 0.1s, ease);
+
+    width: 0;
+    height: 0;
+    background: map.get($theme, 'overlay');
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: -1;
+
+    &.open {
+      width: 100vw;
+      height: 100vh;
+      opacity: 1;
+      z-index: 998;
+    }
+
+  }
+}

package/styles/base/_text.scss

@@ -12,9 +12,11 @@ $sup: ('font-size': 10);
   p, li, small {
     color: map.get($theme, 'text');
     font-weight: 500;
+
+    .error &, &.error { color: map.get($theme, 'text_error'); }
   }
 
-  p, li {
+  p, li, dt, dd {
     font-size: px-to-rem(map.get($default, 'font-size'));
     line-height: px-to-rem(map.get($default, 'line-height'));
 
@@ -77,4 +79,6 @@ $sup: ('font-size': 10);
     vertical-align: sub;
   }
 
+  address { font-style: normal; }
+
 }

package/styles/base/_titles.scss

@@ -13,118 +13,164 @@ $h5: ('font-size': 12, 'font-size_md': 14, 'line-height': 16, 'margin-top': 16,
 $h6: ('font-size': 12, 'font-size_md': 11, 'line-height': 16);
 $subtitle: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-bottom': 20);
 
-@layer base {
-  .pre-title, h5, h6 {
-    color: map.get($theme, 'title');
-    text-transform: uppercase;
-    font-weight: 700;
-  }
-
-  .title, h1, h2, h3, h4 {
-    color: map.get($theme, 'title');
-    font-weight: 900;
-  }
+@mixin pre-title {
+  margin-bottom: px-to-rem(map.get($pre-title, 'margin-bottom'));
+  font-size: px-to-rem(map.get($pre-title, 'font-size'));
+  color: map.get($theme, 'title');
+  font-weight: 700;
+  line-height: px-to-rem(map.get($pre-title, 'line-height'));
+  letter-spacing: px-to-rem(map.get($pre-title, 'letter-spacing'));
+  text-transform: uppercase;
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($pre-title, 'font-size_md'));
+      line-height: px-to-rem(map.get($pre-title, 'line-height_md'));
+    }
+}
+
+@mixin title {
+  margin-bottom: px-to-rem(map.get($title, 'margin-bottom'));
+  font-size: px-to-rem(map.get($title, 'font-size'));
+  color: map.get($theme, 'title');
+  font-weight: 900;
+  line-height: px-to-rem(map.get($title, 'line-height'));
+  letter-spacing: px-to-rem(map.get($title, 'letter-spacing'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($title, 'font-size_md'));
+      line-height: px-to-rem(map.get($title, 'line-height_md'));
+    }
+}
+
+@mixin h1 {
+  margin-bottom: px-to-rem(map.get($h1, 'margin-bottom'));
+  font-size: px-to-rem(map.get($h1, 'font-size'));
+  color: map.get($theme, 'title');
+  text-transform: none;
+  font-weight: 900;
+  line-height: px-to-rem(map.get($h1, 'line-height'));
+  letter-spacing: px-to-rem(map.get($h1, 'letter-spacing'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($h1, 'font-size_md'));
+      line-height: px-to-rem(map.get($h1, 'line-height_md'));
+    }
+}
+
+@mixin h2 {
+  margin: px-to-rem(map.get($h2, 'margin-top')) 0 px-to-rem(map.get($h2, 'margin-bottom')) 0;
+  font-size: px-to-rem(map.get($h2, 'font-size'));
+  color: map.get($theme, 'title');
+  text-transform: none;
+  font-weight: 900;
+  line-height: px-to-rem(map.get($h2, 'line-height'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($h2, 'font-size_md'));
+      line-height: px-to-rem(map.get($h2, 'line-height_md'));
+    }
+}
+
+@mixin h3 {
+  margin: px-to-rem(map.get($h3, 'margin-top')) 0 px-to-rem(map.get($h3, 'margin-bottom')) 0;
+  font-size: px-to-rem(map.get($h3, 'font-size'));
+  color: map.get($theme, 'title');
+  text-transform: none;
+  font-weight: 900;
+  line-height: px-to-rem(map.get($h3, 'line-height'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($h3, 'font-size_md'));
+      line-height: px-to-rem(map.get($h3, 'line-height_md'));
+    }
+}
+
+@mixin h4 {
+  margin: px-to-rem(map.get($h4, 'margin-top')) 0 px-to-rem(map.get($h4, 'margin-bottom')) 0;
+  font-size: px-to-rem(map.get($h4, 'font-size'));
+  color: map.get($theme, 'title');
+  text-transform: none;
+  font-weight: 900;
+  line-height: px-to-rem(map.get($h4, 'line-height'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($h4, 'font-size_md'));
+      line-height: px-to-rem(map.get($h4, 'line-height_md'));
+    }
+}
+
+@mixin h5 {
+  margin: px-to-rem(map.get($h5, 'margin-top')) 0 px-to-rem(map.get($h5, 'margin-bottom')) 0;
+  font-size: px-to-rem(map.get($h5, 'font-size'));
+  color: map.get($theme, 'title');
+  text-transform: uppercase;
+  font-weight: 700;
+  line-height: px-to-rem(map.get($h5, 'line-height'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($h5, 'font-size_md'));
+    }
+}
+
+@mixin h6 {
+  font-size: px-to-rem(map.get($h6, 'font-size'));
+  color: map.get($theme, 'title');
+  text-transform: uppercase;
+  font-weight: 700;
+  line-height: px-to-rem(map.get($h6, 'line-height'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($h6, 'font-size_md'));
+    }
+}
+
+@mixin subtitle {
+  margin-bottom: px-to-rem(map.get($subtitle, 'margin-bottom'));
+  font-size: px-to-rem(map.get($subtitle, 'font-size'));
+  color: map.get($theme, 'subtitle');
+  font-weight: 400;
+  line-height: px-to-rem(map.get($subtitle, 'line-height'));
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(map.get($subtitle, 'font-size_md'));
+      line-height: px-to-rem(map.get($subtitle, 'line-height_md'));
+    }
+}
 
+@layer base {
   .pre-title {
-    margin-bottom: px-to-rem(map.get($pre-title, 'margin-bottom'));
-    font-size: px-to-rem(map.get($pre-title, 'font-size'));
-    line-height: px-to-rem(map.get($pre-title, 'line-height'));
-    letter-spacing: px-to-rem(map.get($pre-title, 'letter-spacing'));
-    text-transform: uppercase;
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($pre-title, 'font-size_md'));
-        line-height: px-to-rem(map.get($title, 'line-height_md'));
-      }
+    @include pre-title;
   }
 
   .title {
-    margin-bottom: px-to-rem(map.get($title, 'margin-bottom'));
-    font-size: px-to-rem(map.get($title, 'font-size'));
-    line-height: px-to-rem(map.get($title, 'line-height'));
-    letter-spacing: px-to-rem(map.get($title, 'letter-spacing'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($title, 'font-size_md'));
-        line-height: px-to-rem(map.get($title, 'line-height_md'));
-      }
+    @include title;
   }
 
   h1 {
-    margin-bottom: px-to-rem(map.get($h1, 'margin-bottom'));
-    font-size: px-to-rem(map.get($h1, 'font-size'));
-    line-height: px-to-rem(map.get($h1, 'line-height'));
-    letter-spacing: px-to-rem(map.get($h1, 'letter-spacing'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($h1, 'font-size_md'));
-        line-height: px-to-rem(map.get($h1, 'line-height_md'));
-      }
+    @include h1;
   }
 
   h2 {
-    margin: px-to-rem(map.get($h2, 'margin-top')) 0 px-to-rem(map.get($h2, 'margin-bottom')) 0;
-    font-size: px-to-rem(map.get($h2, 'font-size'));
-    line-height: px-to-rem(map.get($h2, 'line-height'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($h2, 'font-size_md'));
-        line-height: px-to-rem(map.get($h2, 'line-height_md'));
-      }
+    @include h2;
   }
 
   h3 {
-    margin: px-to-rem(map.get($h3, 'margin-top')) 0 px-to-rem(map.get($h3, 'margin-bottom')) 0;
-    font-size: px-to-rem(map.get($h3, 'font-size'));
-    line-height: px-to-rem(map.get($h3, 'line-height'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($h3, 'font-size_md'));
-        line-height: px-to-rem(map.get($h3, 'line-height_md'));
-      }
+    @include h3;
   }
 
   h4 {
-    margin: px-to-rem(map.get($h4, 'margin-top')) 0 px-to-rem(map.get($h4, 'margin-bottom')) 0;
-    font-size: px-to-rem(map.get($h4, 'font-size'));
-    line-height: px-to-rem(map.get($h4, 'line-height'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($h4, 'font-size_md'));
-        line-height: px-to-rem(map.get($h4, 'line-height_md'));
-      }
+    @include h4;
   }
 
-
   h5 {
-    margin: px-to-rem(map.get($h5, 'margin-top')) 0 px-to-rem(map.get($h5, 'margin-bottom')) 0;
-    font-size: px-to-rem(map.get($h5, 'font-size'));
-    line-height: px-to-rem(map.get($h5, 'line-height'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($h5, 'font-size_md'));
-      }
+    @include h5;
   }
 
   h6 {
-    font-size: px-to-rem(map.get($h6, 'font-size'));
-    line-height: px-to-rem(map.get($h6, 'line-height'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($h6, 'font-size_md'));
-      }
+    @include h6;
   }
 
   .subtitle {
-    margin-bottom: px-to-rem(map.get($subtitle, 'margin-bottom'));
-    font-size: px-to-rem(map.get($subtitle, 'font-size'));
-    color: map.get($theme, 'subtitle');
-    font-weight: 400;
-    line-height: px-to-rem(map.get($subtitle, 'line-height'));
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($subtitle, 'font-size_md'));
-        line-height: px-to-rem(map.get($subtitle, 'line-height_md'));
-      }
+    @include subtitle;
   }
 }

package/styles/base/buttons/_buttons.scss

@@ -3,19 +3,7 @@
 @import './../../functions',
         './../../mixins',
         './../../variables';
-@import './icons', './mixins';
-
-// The button defaults to the primary variant and medium styling so are not added as classes - they live on the default `button` styling
-$large: ('font-size': 18, 'padding-top': 14, 'padding-horizontal': 24, 'padding-bottom': 16, 'icon-width': 18, 'icon-offset': 2, 'icon-gutter': 12);
-$medium: ('font-size': 16, 'padding-top': 10, 'padding-horizontal': 24, 'padding-bottom': 12, 'icon-width': 16, 'icon-offset': 2, 'icon-gutter': 10);
-$small: ('font-size': 14, 'padding-top': 8, 'padding-horizontal': 16, 'padding-bottom': 10, 'icon-width': 12, 'icon-offset': 2, 'icon-gutter': 8);
-$sizes: ('large', $large), ('small', $small);
-$secondary: ('border': 1);
-
-// The tertiary styling has its own padding; regardless of size, we add a tiny amount of padding to accommodate
-// the focus outline and to ensure any icons are centered
-$tertiary: ('padding-top': 1.6, 'padding-horizontal': 8,'padding-bottom': 3.2);
-$animation: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
+@import './icons', './mixins', './sizes';
 
 @layer base {
   button, .button {
@@ -25,7 +13,6 @@ $animation: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
     position: relative;
     text-align: center;
     font-size: px-to-rem(map.get($medium, 'font-size'));
-    color: map.get($theme, 'button_primary');
     font-weight: 700;
     text-decoration: none;
     border-radius: 360rem; // Completely round corners. This could be any large number but 360 evokes a circle well!
@@ -34,6 +21,8 @@ $animation: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
     box-sizing: border-box;
     display: inline-block;
 
+    &, &:hover, &:active, &:focus, &:focus-visible { color: map.get($theme, 'button_primary'); }
+
     &:hover {
       background: map.get($theme, 'button_primary_bg_hover');
     }
@@ -83,9 +72,10 @@ $animation: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
 
     &.secondary {
       background: map.get($theme, 'button_secondary_bg');
-      color: map.get($theme, 'button_secondary');
       border: px-to-rem(map.get($secondary, 'border')) solid map.get($theme, 'button_secondary_border');
 
+        &, &:hover { color: map.get($theme, 'button_secondary'); }
+
         &:hover {
           background: map.get($theme, 'button_secondary_bg_hover');
         }
@@ -185,7 +175,20 @@ $animation: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
           display: block;
         }
 
-        &.right::before { order: 2; }
+        &.left {
+            &::before { margin-right: px-to-rem(map.get($medium, 'icon-gutter')); }
+
+            &.no-text::before { margin-right: 0; }
+        }
+
+        &.right {
+          &::before {
+            margin-left: px-to-rem(map.get($medium, 'icon-gutter'));
+            order: 2;
+          }
+
+          &.no-text::before { margin-left: 0; }
+        }
 
         @each $icon, $large-icon, $medium-icon, $small-icon in $icons {
           $icon-sizes: ('large', $large-icon), ('medium', $medium-icon), ('small', $small-icon);
@@ -207,20 +210,33 @@ $animation: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
         }
 
         &.animate {
-          @include animate {
-            @keyframes bounce {
-              0%, 100% { transform: scale(1); }
+          &::before {
+            @include transition(transform, #{map.get($animation, 'duration')}s, ease);
+
+            transform: none;
+          }
 
-              70% {
-                transform: scale(#{map.get($animation, 'scale')});
+          &.bounce {
+            @include animate {
+              @keyframes bounce {
+                0%, 100% { transform: scale(1); }
+
+                70% {
+                  transform: scale(#{map.get($animation-bounce, 'scale')});
+                }
+              }
+
+              &:focus, &:active, &.do-animation {
+                &::before { animation: bounce #{map.get($animation-bounce, 'duration')}s #{map.get($animation-bounce, 'iteration')}; }
               }
-            }
 
-            &:focus, &:active, &.do-animation {
-              &::before { animation: bounce #{map.get($animation, 'duration')}s #{map.get($animation, 'iteration')}; }
             }
+          }
 
+          &.rotate-180::before {
+            transform: rotate(180deg);
           }
+
         }
     }
 

package/styles/base/buttons/_sizes.scss

@@ -0,0 +1,12 @@
+// The button defaults to the primary variant and medium styling so are not added as classes - they live on the default `button` styling
+$large: ('font-size': 18, 'padding-top': 14, 'padding-horizontal': 24, 'padding-bottom': 16, 'icon-width': 18, 'icon-offset': 2, 'icon-gutter': 12);
+$medium: ('font-size': 16, 'padding-top': 10, 'padding-horizontal': 24, 'padding-bottom': 12, 'icon-width': 16, 'icon-offset': 2, 'icon-gutter': 10);
+$small: ('font-size': 14, 'padding-top': 8, 'padding-horizontal': 16, 'padding-bottom': 10, 'icon-width': 12, 'icon-offset': 2, 'icon-gutter': 8);
+$sizes: ('large', $large), ('small', $small);
+$secondary: ('border': 1);
+
+// The tertiary styling has its own padding; regardless of size, we add a tiny amount of padding to accommodate
+// the focus outline and to ensure any icons are centered
+$tertiary: ('padding-top': 1.6, 'padding-horizontal': 8,'padding-bottom': 3.2);
+$animation: ('duration': 0.2);
+$animation-bounce: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);

package/styles/base/form/_fields.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@import './../../functions',
+        './../../mixins',
+        './../../variables';
+
+$field: ('padding-vertical': 8, 'padding-horizontal': 16, 'font-size': 16, 'line-height': 24, 'border': 1, 'border-radius': 8);
+
+@mixin field-styling {
+  background: map.get($theme, 'form_input_bg');
+  border: px-to-rem(map.get($field, 'border')) solid map.get($theme, 'form_input_border');
+  border-radius: px-to-rem(map.get($field, 'border-radius'));
+  box-sizing: border-box;
+  outline: none;
+
+    &:focus, &:focus-visible {
+      box-shadow: $outline-width map.get($theme, 'form_input_focus_box-shadow');
+    }
+
+    &.error {
+      border-color: map.get($theme, 'form_input_error_border');
+    }
+}
+
+@layer base {
+  input, .input, textarea {
+    @include field-styling;
+
+    width: 100%;
+    padding: px-to-rem(map.get($field, 'padding-vertical')) px-to-rem(map.get($field, 'padding-horizontal'));
+    font-size: px-to-rem(map.get($field, 'font-size'));
+    color: map.get($theme, 'form_input');
+    line-height: px-to-rem(map.get($field, 'line-height'));
+
+      ::placeholder {
+        color: map.get($theme, 'form_input_placeholder');
+      }
+
+      // Remove default styling, for consistency
+      &[type='search'] {
+        &::-ms-clear {
+          width: 0;
+          height: 0;
+          display: none;
+        }
+
+        &::-ms-reveal {
+          width: 0;
+          height: 0;
+          display: none;
+        }
+
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
+          display: none;
+        }
+      }
+  }
+}

package/styles/base/form/_index.scss

@@ -0,0 +1,2 @@
+@import 'fields',
+        'search-button';

package/styles/base/form/_search-button.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@import './../../functions',
+        './../../mixins',
+        './../../variables';
+
+$search-icon: ('width': 24, 'height': 24);
+
+@layer base {
+  button.search {
+    width: px-to-rem(map.get($search-icon, 'width'));
+    height: px-to-rem(map.get($search-icon, 'height'));
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+      &::before {
+        @include transition(background, 0.3s, ease);
+        @include image('icons/magnifying-glass.svg', true);
+
+        content: '';
+        width: px-to-rem(map.get($search-icon, 'width'));
+        height: px-to-rem(map.get($search-icon, 'height'));
+        background: map.get($theme, 'form_search-button_bg');
+        display: block;
+      }
+  }
+}

package/styles/functions/_size-conversions.scss

@@ -4,5 +4,7 @@
 // We want to use rem for accessibility, but Figma uses px (which is also a bit easier for us
 // to read and reason about). This mixin does the conversion for us.
 @function px-to-rem($size, $baseTextSize: 16) {
-    @return math.div($size, $baseTextSize) + rem;
+    $new-size: math.div($size, $baseTextSize);
+
+    @return $new-size + rem;
 }

package/styles/mixins/_backgrounds.scss

@@ -10,11 +10,7 @@
   @if string.index($image, 'http') {
     $image: $image;
   } @else {
-    @if $is-mask {
-      $image: $assets-bucket + $image;
-    } @else {
-      $image: $image-bucket + $image;
-    }
+    $image: $assets-bucket + $image;
   }
 
   @if $is-mask {

package/styles/mixins/_breakpoints.scss

@@ -1,7 +1,10 @@
 @use 'sass:map';
 
 $breakpoint-sizes: (
-  'md': 769
+  'sm': 580,
+  'md': 769,
+  'md-lg': 1024,
+  'lg': 1180,
 );
 
 // This mixin lets us use fast references for common breakpoints, using the map above,

package/styles/mixins/_browsers.scss

@@ -0,0 +1,3 @@
+@mixin target-safari() {
+  @media not all and (resolution >=.001dpcm) { @content; }
+}

package/styles/mixins/_index.scss

@@ -1,4 +1,7 @@
 @import 'animations',
         'backgrounds',
         'breakpoints',
+        'browsers',
+        'selectors',
+        'styles',
         'transitions';

package/styles/mixins/_selectors.scss

@@ -0,0 +1,5 @@
+@mixin amend-selector-path($old, $new) {
+  @at-root #{selector-replace(&, $old, $new)} {
+    @content;
+  }
+}

package/styles/mixins/_styles.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use 'sass:math';
+@import './../variables',
+        './../functions';
+
+@mixin dashed-border($color: map.get($theme, 'divider')) {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{$color}' stroke-width='1' stroke-dasharray='6%2c 8' stroke-dashoffset='2' stroke-linecap='round'/%3e%3c/svg%3e");
+}
+
+@mixin line-under-text($color: 'light', $width: 60, $height: 4, $gap: 16, $border-radius: 2.5) {
+  position: relative;
+  padding-bottom: px-to-rem($height + $gap);
+
+    &::after {
+      content: '';
+      background: map.get($theme, 'text_line');
+      width: px-to-rem($width);
+      height: px-to-rem($height);
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      margin-left: -(px-to-rem(math.div($width, 2)));
+      border-radius: px-to-rem($border-radius);
+
+      @if $color == 'dark' {
+        background: map.get($theme, 'text_line_dark');
+      }
+    }
+
+
+}

package/styles/variables/colors/_colors.scss

@@ -20,11 +20,13 @@ $default-colors: (
 
   'g50': rgb(235 250 246 / 100%),
   'g100': rgb(195 240 228 / 100%),
+  'g200': rgb(153 219 201),
   'g300': rgb(124 220 197 / 100%),
   'g600': rgb(43 137 117 / 100%),
   'g700': rgb(28 104 88 / 100%),
   'g900': rgb(10 38 33 / 100%),
 
+  'n10': rgb(222 226 232 / 100%),
   'n50': rgb(240 245 255 / 100%),
   'n100': rgb(215 224 239 / 100%),
   'n200': rgb(192 203 223 / 100%),
@@ -38,6 +40,7 @@ $default-colors: (
   'p100': rgb(238 200 237 / 100%),
   'p300': rgb(203 130 197 / 100%),
   'p500': rgb(166 55 152 / 100%),
+  'p600': rgb(136 90 189 / 100%),
   'p900': rgb(66 1 55 / 100%),
 
   'y50': rgb(255 248 232 / 100%),
@@ -61,4 +64,6 @@ $default-colors: (
   'warning50': rgb(255 242 230 / 100%),
   'warning500': rgb(220 121 29 / 100%),
   'warning700': rgb(137 71 11 / 100%),
+
+
 );