@apolitical/component-library 10.4.10 → 10.5.1

package/styles/base/_blockquotes.scss

@@ -30,15 +30,17 @@ $blockquote: (
       font-weight: 700;
       font-style: italic;
       line-height: px-to-rem(get-map($blockquote, 'line-height'));
-      border-left: px-to-rem(get-map($blockquote, 'border-width')) solid
+      border-inline-start: px-to-rem(get-map($blockquote, 'border-width')) solid
         get-map($theme, 'blockquote_border');
 
       &.subtle {
         font-size: px-to-rem(get-map($blockquote, 'subtle', 'font-size'));
         font-weight: normal;
         font-style: normal;
-        border-left-width: px-to-rem(get-map($blockquote, 'subtle', 'border-width'));
-        border-left-color: get-map($theme, 'blockquote_subtle_border');
+        border-inline-start-width: px-to-rem(
+          get-map($blockquote, 'subtle', 'border-width')
+        );
+        border-inline-start-color: get-map($theme, 'blockquote_subtle_border');
 
         strong {
           font-weight: 900;

package/styles/base/_fonts.scss

@@ -26,8 +26,8 @@ $font-name: 'Moderat';
   }
 }
 
-$font-family: (400, normal), (400, italic), (600, normal), (600, italic), (900, normal),
-  (900, italic);
+$font-family:
+  (400, normal), (400, italic), (600, normal), (600, italic), (900, normal), (900, italic);
 
 @layer base {
   @each $weight, $style in $font-family {

package/styles/base/_layout.scss

@@ -8,15 +8,13 @@
 
     .center {
       text-align: center;
-      margin-right: auto;
-      margin-left: auto;
+      margin-inline: auto;
     }
 
     .content-default,
     .content-slim,
     .content-slimmest {
-      margin-left: auto;
-      margin-right: auto;
+      margin-inline: auto;
     }
 
     .content-default {

package/styles/base/_lists.scss

@@ -20,12 +20,12 @@ $li: (
     ol,
     ul {
       margin: 0 0 px-to-rem(get-map($ul, 'margin-bottom'));
-      padding-left: px-to-rem(get-map($ul, 'padding-left'));
+      padding-inline-start: px-to-rem(get-map($ul, 'padding-left'));
       display: block;
 
       &.unstyled {
         list-style: none;
-        padding-left: 0;
+        padding-inline-start: 0;
       }
     }
 
@@ -34,7 +34,7 @@ $li: (
 
       li {
         position: relative;
-        padding-left: px-to-rem(
+        padding-inline-start: px-to-rem(
           get-map($checkmarks, 'width') + get-map($checkmarks, 'margin-right')
         );
 
@@ -47,7 +47,7 @@ $li: (
           background: get-map($theme, 'list_checkmarks_bg');
           position: absolute;
           top: px-to-rem(get-map($checkmarks, 'top'));
-          left: 0;
+          inset-inline-start: 0;
         }
       }
     }

package/styles/base/_overlays.scss

@@ -14,7 +14,7 @@ $overlay: (
       background: get-map($theme, 'overlay');
       position: fixed;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       opacity: 0;
       z-index: -1;
       box-sizing: border-box;

package/styles/base/_table.scss

@@ -23,7 +23,7 @@ $table: (
       &,
       p,
       li {
-        text-align: left;
+        text-align: start;
       }
     }
 
@@ -39,16 +39,16 @@ $table: (
       padding: px-to-rem(get-map($table, 'padding-horizontal'));
       color: get-map($theme, 'table_th');
       font-weight: 600;
-      border-right-width: 0;
+      border-inline-end-width: 0;
 
       /* Add border radius to the corners of the table, not each cell */
       &:first-child {
-        border-top-left-radius: px-to-rem(get-map($table, 'border-radius'));
+        border-start-start-radius: px-to-rem(get-map($table, 'border-radius'));
       }
 
       &:last-child {
-        border-top-right-radius: px-to-rem(get-map($table, 'border-radius'));
-        border-right-width: px-to-rem(get-map($table, 'border'));
+        border-start-end-radius: px-to-rem(get-map($table, 'border-radius'));
+        border-inline-end-width: px-to-rem(get-map($table, 'border'));
       }
     }
 
@@ -56,22 +56,22 @@ $table: (
       padding: px-to-rem(get-map($table, 'padding-vertical'))
         px-to-rem(get-map($table, 'padding-horizontal'));
       border-top-width: 0;
-      border-right-width: 0;
+      border-inline-end-width: 0;
 
       /* Prevent borders with double width due to using border-collapse separate */
       &:last-child {
-        border-right-width: px-to-rem(get-map($table, 'border'));
+        border-inline-end-width: px-to-rem(get-map($table, 'border'));
       }
     }
 
     tr:last-child {
       td {
         &:first-child {
-          border-bottom-left-radius: px-to-rem(get-map($table, 'border-radius'));
+          border-end-start-radius: px-to-rem(get-map($table, 'border-radius'));
         }
 
         &:last-child {
-          border-bottom-right-radius: px-to-rem(get-map($table, 'border-radius'));
+          border-end-end-radius: px-to-rem(get-map($table, 'border-radius'));
         }
       }
     }

package/styles/base/_titles.scss

@@ -103,18 +103,18 @@ $count-icon: (
     background: get-map($theme, 'highlight_bg');
     position: absolute;
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     border-radius: px-to-rem(get-map($highlight, 'border-radius'));
     display: block;
   }
 
   @if $align == 'center' {
     &::after {
-      left: 50%;
+      inset-inline-start: 50%;
       transform: translateX(-50%);
     }
   } @else if $align == 'vertical' {
-    padding-left: px-to-rem(
+    padding-inline-start: px-to-rem(
       get-map($highlight, 'height') + get-map($highlight, 'margin-top')
     );
 

package/styles/base/buttons/_buttons.scss

@@ -79,11 +79,11 @@
             margin-top: px-to-rem(get-map($styles, 'icon-offset'));
 
             &.left::before {
-              margin-right: px-to-rem(get-map($styles, 'icon-gutter'));
+              margin-inline-end: px-to-rem(get-map($styles, 'icon-gutter'));
             }
 
             &.right::before {
-              margin-left: px-to-rem(get-map($styles, 'icon-gutter'));
+              margin-inline-start: px-to-rem(get-map($styles, 'icon-gutter'));
             }
           }
         }
@@ -213,7 +213,7 @@
             px-to-rem(get-map($tertiary, 'padding-horizontal'))
             px-to-rem(get-map($tertiary, 'padding-bottom'));
           bottom: px-to-rem(get-map($tertiary, 'padding-top'));
-          right: px-to-rem(get-map($tertiary, 'padding-horizontal'));
+          inset-inline-end: px-to-rem(get-map($tertiary, 'padding-horizontal'));
         }
 
         text-decoration: underline;
@@ -266,7 +266,7 @@
         }
 
         &.full-width {
-          right: 0;
+          inset-inline-end: 0;
         }
 
         // TODO: remove when we have new styling
@@ -301,28 +301,28 @@
 
         &.left {
           &::before {
-            margin-right: px-to-rem(get-map($button-medium, 'icon-gutter'));
+            margin-inline-end: px-to-rem(get-map($button-medium, 'icon-gutter'));
           }
 
           &.no-text::before {
-            margin-right: 0;
+            margin-inline-end: 0;
           }
         }
 
         &.right {
           &::before {
-            margin-left: px-to-rem(get-map($button-medium, 'icon-gutter'));
+            margin-inline-start: px-to-rem(get-map($button-medium, 'icon-gutter'));
             order: 2;
           }
 
           &.no-text::before {
-            margin-left: 0;
+            margin-inline-start: 0;
           }
         }
 
         @each $icon, $large-icon, $medium-icon, $small-icon in $icons {
-          $icon-sizes: ('large', $large-icon), ('medium', $medium-icon),
-            ('small', $small-icon);
+          $icon-sizes:
+            ('large', $large-icon), ('medium', $medium-icon), ('small', $small-icon);
 
           @at-root {
             %icon-#{$icon} {
@@ -367,10 +367,8 @@
               &:active,
               &.do-animation {
                 &::before {
-                  animation: bounce #{get-map($animation-bounce, 'duration')}s #{get-map(
-                      $animation-bounce,
-                      'iteration'
-                    )};
+                  animation: bounce #{get-map($animation-bounce, 'duration')}s
+                    #{get-map($animation-bounce, 'iteration')};
                 }
               }
             }
@@ -410,7 +408,7 @@
           height: 0;
           position: absolute;
           top: px-to-rem(get-map($secondary-destruction, 'offset'));
-          right: get-map($secondary-destruction, 'right');
+          inset-inline-end: get-map($secondary-destruction, 'right');
           display: flex;
           align-items: center;
           justify-content: center;
@@ -428,7 +426,7 @@
             content: attr(data-hover-text);
             width: 100%;
             height: 100%;
-            right: 0;
+            inset-inline-end: 0;
             opacity: 1;
           }
         }

package/styles/base/buttons/_icons.scss

@@ -7,7 +7,8 @@
 // large buttons default to 18px width, set in $large. If the default values are correct, put `d` as the value.
 // Otherwise, put the value in pixels.
 
-$icons: ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
+$icons:
+  ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
   ('arrow_right', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
   ('arrow_rotating', (20, 20, 2, d), (d, d, 2, d), (15, 15, d, d)),
   ('arrow_corner-down_right', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),

package/styles/base/form/_checkbox.scss

@@ -46,9 +46,9 @@ $pretty-checkbox: (
         background: get-map($theme, 'form_checkbox_icon');
         position: absolute;
         top: 50%;
-        left: 50%;
+        inset-inline-start: 50%;
         margin-top: px-to-rem(get-map($pretty-checkbox, 'margin-top'));
-        margin-left: px-to-rem(get-map($pretty-checkbox, 'margin-left'));
+        margin-inline-start: px-to-rem(get-map($pretty-checkbox, 'margin-left'));
       }
     }
   }

package/styles/base/form/_fields.scss

@@ -80,7 +80,7 @@ $character-limit: (
         &[data-character-limit] {
           &:focus,
           &:focus-within {
-            padding-right: px-to-rem(
+            padding-inline-end: px-to-rem(
               get-map($character-limit, 'max-width') +
                 get-map($character-limit, 'padding-horizontal')
             );

package/styles/base/form/_form.scss

@@ -21,7 +21,7 @@ $base-form: (
 
       .cta {
         width: 100%;
-        text-align: right;
+        text-align: end;
 
         &.center {
           text-align: center;

package/styles/base/form/_radio.scss

@@ -28,7 +28,7 @@ $radio-inner: (
         border-radius: 50%;
         position: absolute;
         top: 50%;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translate(-50%, -50%);
       }
     }

package/styles/mixins/_styles.scss

@@ -22,8 +22,8 @@
     height: px-to-rem($height);
     position: absolute;
     bottom: 0;
-    left: 50%;
-    margin-left: -(px-to-rem(math.div($width, 2)));
+    inset-inline-start: 50%;
+    margin-inline-start: -(px-to-rem(math.div($width, 2)));
     border-radius: px-to-rem($border-radius);
 
     @if $color == 'medium' {
@@ -39,7 +39,7 @@
 @mixin full-width-section {
   width: 100vw;
   position: relative;
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   box-sizing: border-box;
 }

package/styles/overrides/navigator-theme.scss

@@ -44,5 +44,5 @@
 // Navigator: the legacy loading spinner bakes in a brand colour rather than
 // consuming the runtime theme tokens. (Originally added in #9864.)
 [data-theme='navigator'] .spinner {
-  border-top-color: hsl(var(--primary));
+  border-block-start-color: hsl(var(--primary));
 }

package/styles/uclasses/uclasses.scss

@@ -21,7 +21,7 @@ $font-size-md: 1rem;
 
   // form elements
   .u-text-align-left {
-    text-align: left;
+    text-align: start;
   }
 
   .u-margin-bottom-half {
@@ -297,13 +297,11 @@ $font-size-md: 1rem;
   }
 
   .u-mx-auto {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
   }
 
   .u-mx-0 {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline: 0;
   }
 
   .u-mt-auto {
@@ -351,43 +349,43 @@ $font-size-md: 1rem;
   }
 
   .u-mr-auto {
-    margin-right: auto;
+    margin-inline-end: auto;
   }
 
   .u-mr-0 {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   .u-mr-1 {
-    margin-right: 0.25rem; /* 4px */
+    margin-inline-end: 0.25rem; /* 4px */
   }
 
   .u-mr-2 {
-    margin-right: 0.5rem; /* 8px */
+    margin-inline-end: 0.5rem; /* 8px */
   }
 
   .u-mr-3 {
-    margin-right: 0.75rem; /* 12px */
+    margin-inline-end: 0.75rem; /* 12px */
   }
 
   .u-mr-4 {
-    margin-right: 1rem; /* 16px */
+    margin-inline-end: 1rem; /* 16px */
   }
 
   .u-mr-5 {
-    margin-right: 1.25rem; /* 20px */
+    margin-inline-end: 1.25rem; /* 20px */
   }
 
   .u-mr-6 {
-    margin-right: 1.5rem; /* 24px */
+    margin-inline-end: 1.5rem; /* 24px */
   }
 
   .u-mr-8 {
-    margin-right: 2rem; /* 32px */
+    margin-inline-end: 2rem; /* 32px */
   }
 
   .u-mr-10 {
-    margin-right: 2.5rem; /* 40px */
+    margin-inline-end: 2.5rem; /* 40px */
   }
 
   .u-mb-auto {
@@ -431,51 +429,51 @@ $font-size-md: 1rem;
   }
 
   .u-ml-auto {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   .u-ml-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   .u-ml-1 {
-    margin-left: 0.25rem; /* 4px */
+    margin-inline-start: 0.25rem; /* 4px */
   }
 
   .u-ml-2 {
-    margin-left: 0.5rem; /* 8px */
+    margin-inline-start: 0.5rem; /* 8px */
   }
 
   .u-ml-3 {
-    margin-left: 0.75rem; /* 12px */
+    margin-inline-start: 0.75rem; /* 12px */
   }
 
   .u-ml-4 {
-    margin-left: 1rem; /* 16px */
+    margin-inline-start: 1rem; /* 16px */
   }
 
   .u-ml-5 {
-    margin-left: 1.25rem; /* 20px */
+    margin-inline-start: 1.25rem; /* 20px */
   }
 
   .u-ml-6 {
-    margin-left: 1.5rem; /* 24px */
+    margin-inline-start: 1.5rem; /* 24px */
   }
 
   .u-ml-8 {
-    margin-left: 2rem; /* 32px */
+    margin-inline-start: 2rem; /* 32px */
   }
 
   .u-ml-10 {
-    margin-left: 2.5rem; /* 40px */
+    margin-inline-start: 2.5rem; /* 40px */
   }
 
   .u-ml-minus-1 {
-    margin-left: -0.25rem; /* 4px */
+    margin-inline-start: -0.25rem; /* 4px */
   }
 
   .u-ml-minus-2 {
-    margin-left: -0.5rem; /* 8px */
+    margin-inline-start: -0.5rem; /* 8px */
   }
 
   // padding
@@ -520,28 +518,31 @@ $font-size-md: 1rem;
   }
 
   .u-px-0 {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 
   .u-px-1 {
-    padding-left: 0.25rem; /* 4px */
-    padding-right: 0.25rem; /* 4px */
+    padding-inline: 0.25rem; /* 4px */
+
+    /* 4px */
   }
 
   .u-px-2 {
-    padding-left: 0.5rem; /* 8px */
-    padding-right: 0.5rem; /* 8px */
+    padding-inline: 0.5rem; /* 8px */
+
+    /* 8px */
   }
 
   .u-px-3 {
-    padding-left: 0.75rem; /* 12px */
-    padding-right: 0.75rem; /* 12px */
+    padding-inline: 0.75rem; /* 12px */
+
+    /* 12px */
   }
 
   .u-px-4 {
-    padding-left: 1rem; /* 16px */
-    padding-right: 1rem; /* 16px */
+    padding-inline: 1rem; /* 16px */
+
+    /* 16px */
   }
 
   .u-pt-0 {
@@ -553,7 +554,7 @@ $font-size-md: 1rem;
   }
 
   .u-pr-0 {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 
   .u-pb-0 {
@@ -565,7 +566,7 @@ $font-size-md: 1rem;
   }
 
   .u-pl-0 {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   // vertical-align
@@ -667,11 +668,11 @@ $font-size-md: 1rem;
   }
 
   .u-text-left {
-    text-align: left;
+    text-align: start;
   }
 
   .u-text-right {
-    text-align: right;
+    text-align: end;
   }
 
   .u-text-justify {

package/styles/variables/colors/theme/_banners.scss

@@ -9,8 +9,11 @@ $banners: (
   banner-section_subtle: get-map($c, 'black'),
   banner-section_bg: get-map($c, 'b700'),
   banner-section_light_bg: get-map($c, 'white'),
-  banner-section_gradient_bg:
-    linear-gradient(135deg, rgb(76 62 205) 0%, get-map($c, 'g300') 100%),
+  banner-section_gradient_bg: linear-gradient(
+      135deg,
+      rgb(76 62 205) 0%,
+      get-map($c, 'g300') 100%
+    ),
   banner-section_subtle_bg: get-map($c, 'white'),
   banner-section_overlay: get-map($c, 'n900'),
   banner-section_eyebrow: get-map($c, 'y300'),
@@ -19,12 +22,18 @@ $banners: (
   banner-section_light_title: get-map($c, 'n900'),
   custom-content-banner: get-map($c, 'n900'),
   custom-content-banner_bg: get-map($c, 'n50'),
-  custom-content-banner_overlay:
-    linear-gradient(90deg, #{get-map($c, 'n50')} 50%, rgb(240 245 255 / 0%) 100%),
+  custom-content-banner_overlay: linear-gradient(
+      90deg,
+      #{get-map($c, 'n50')} 50%,
+      rgb(240 245 255 / 0%) 100%
+    ),
   custom-content-banner_dark: get-map($c, 'white'),
   custom-content-banner_dark_bg: get-map($c, 'b900'),
-  custom-content-banner_dark_overlay:
-    linear-gradient(273deg, rgb(126 115 182 / 0%) 5.36%, #{get-map($c, 'b900')} 47.32%),
+  custom-content-banner_dark_overlay: linear-gradient(
+      273deg,
+      rgb(126 115 182 / 0%) 5.36%,
+      #{get-map($c, 'b900')} 47.32%
+    ),
   marketing-block_title: get-map($c, 'n900'),
   marketing-block_tertiary_title: get-map($c, 'white'),
   marketing-block_text: get-map($c, 'n700'),

package/styles/variables/colors/theme/_base.scss

@@ -95,8 +95,11 @@ $base: (
   table_th: get-map($c, 'white'),
   table_th_bg: get-map($c, 'n600'),
   overlay: rgb(21 25 33 / 25%),
-  list_checkmarks_bg:
-    linear-gradient(140deg, rgba(107 62 205 / 100%), rgba(0 179 191 / 100%)),
+  list_checkmarks_bg: linear-gradient(
+      140deg,
+      rgb(107 62 205 / 100%),
+      rgb(0 179 191 / 100%)
+    ),
   mention_deleted-user: get-map($c, 'n600'),
   mention_deleted-user_bg: get-map($c, 'n50'),
   multiple-inputs_close: get-map($c, 'n200'),

package/styles/variables/colors/theme/_discussion.scss

@@ -21,7 +21,7 @@ $discussion: (
   discussion-pin_bg: get-map($c, 'n700'),
   discussion-post_bg: get-map($c, 'white'),
   discussion-post-pinned_bg: get-map($c, 'n50'),
-  discussion-post-pinned_gradient: rgba(240 245 255 / 0%),
+  discussion-post-pinned_gradient: rgb(240 245 255 / 0%),
   discussion-post-border: get-map($c, 'n100'),
   discussion-post-hover-shadow: rgb(42 49 65 / 10%),
   discussion-question_bg: get-map($c, 'sand'),

package/styles/variables/colors/theme/_general.scss

@@ -8,7 +8,7 @@ $general: (
   image_container_bg_empty: get-map($c, 'white'),
   popover_border: get-map($c, 'n100'),
   popover_bg: get-map($c, 'white'),
-  popover_shadow: rgba(0 0 0 / 10%),
+  popover_shadow: rgb(0 0 0 / 10%),
   return_to_nav_box_shadow: get-map($c, 'black'),
   return_to_nav_bg_focus_active: get-map($c, 'white'),
   return_to_nav_bg_before_after: get-map($c, 'b700'),

package/styles/variables/colors/theme/_layout.scss

@@ -15,8 +15,11 @@ $layout: (
   download-section_bg: get-map($c, 'black'),
   footer: get-map($c, 'white'),
   footer_bg: get-map($c, 'black'),
-  footer_before_bg:
-    linear-gradient(90deg, get-map($c, 'b700') 0%, get-map($c, 'g300') 100%),
+  footer_before_bg: linear-gradient(
+      90deg,
+      get-map($c, 'b700') 0%,
+      get-map($c, 'g300') 100%
+    ),
   footer_title: #c4b5fd,
   footer_link: get-map($c, 'white'),
   footer_dt: get-map($c, 'white'),

package/styles/variables/colors/theme/_loaders.scss

@@ -5,8 +5,12 @@ $c: $default-colors;
 $loaders: (
   loading-block_icon_bg: get-map($c, 'n600'),
   loading-placeholder_bg: get-map($c, 'n10'),
-  loading-placeholder_after_bg:
-    linear-gradient(90deg, transparent, rgba(255 255 255 / 20%), transparent),
+  loading-placeholder_after_bg: linear-gradient(
+      90deg,
+      transparent,
+      rgb(255 255 255 / 20%),
+      transparent
+    ),
   progress-bar_bg: get-map($c, 'n50'),
   progress-bar_before_bg: get-map($c, 'n200'),
   progress-bar_25_bg_1: get-map($c, 'p100'),