@apolitical/component-library 10.5.0 → 10.5.1

package/styles/uclasses/README.md

@@ -5,7 +5,7 @@ These are utility classes that are used in the `next-ui` app and libraries. They
 The starting point for the tooling to generate these classes came from [codyframe](https://github.com/codyhouse/codyframe).
 In future we may want to expand on our small set using more of the utility classes that codyframe has, or even use something like [tailwindcss](https://tailwindcss.com/) instead.
 
-The `global.css` file is used to define the utility classes globally and also for intellisense in the editor. If you modify the generator sass then you will need to run `pnpm build:uclasses` from the root of the `/frontend/v2` workspace.
+The `global.css` file is used to define the utility classes globally and also for intellisense in the editor. If you modify the generator sass then you will need to run `pnpm build:uclasses` from the `services/` workspace root.
 
 Ensure you have the recommended extension from .vscode workspace settings to get the intellisense.
 

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'),

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

@@ -33,7 +33,7 @@ $navigation: (
   more-menu: get-map($c, 'n700'),
   more-menu_hover_button_bg: get-map($c, 'b100'),
   more-menu_menu_bg: get-map($c, 'white'),
-  more-menu_menu_shadow: rgba(0 0 0 / 10%),
+  more-menu_menu_shadow: rgb(0 0 0 / 10%),
   navigation-menu: get-map($c, 'n700'),
   navigation-menu_active: get-map($c, 'b700'),
   navigation-menu_bg: get-map($c, 'white'),

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

@@ -18,16 +18,21 @@ $text: (
   helper-text-box_warning_bg: get-map($c, 'warning50'),
   helper-text-box_error_bg: get-map($c, 'error50'),
   helper-text-box_success_bg: get-map($c, 'success50'),
-  hide-show-text-box_gradient:
-    linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
+  hide-show-text-box_gradient: linear-gradient(
+      rgb(255 255 255 / 0%),
+      rgb(255 255 255 / 100%)
+    ),
   highlighted-text-box_bg: get-map($c, 'n50'),
   highlighted-text-box_secondary_bg: get-map($c, 'y50'),
   highlighted-text-box_tertiary_bg: get-map($c, 'error50'),
   highlighted-text-box_quaternary_bg: get-map($c, 'g50'),
   highlighted-text-box_subtle_bg: get-map($c, 'white'),
   highlighted-text-box_subtle-alt_dark_bg: get-map($c, 'n50'),
-  highlighted-text-box_bold_bg:
-    linear-gradient(135deg, get-map($c, 'b100'), get-map($c, 'g50')),
+  highlighted-text-box_bold_bg: linear-gradient(
+      135deg,
+      get-map($c, 'b100'),
+      get-map($c, 'g50')
+    ),
   highlighted-text-box_bold_icon: get-map($c, 'b500'),
   highlighted-text-box_subtle_border: get-map($c, 'n100'),
   highlighted-text-box_subtle-alt_border: get-map($c, 'n200'),
@@ -41,8 +46,11 @@ $text: (
   icon-bulleted-list_muted: get-map($c, 'n700'),
   icon-bulleted-list_border: get-map($c, 'n200'),
   icon-bulleted-list_zebra_bg: get-map($c, 'n50'),
-  page-heading_bg:
-    linear-gradient(180deg, get-map($c, 'n50') 0%, rgb(240 245 255 / 0%) 100%),
+  page-heading_bg: linear-gradient(
+      180deg,
+      get-map($c, 'n50') 0%,
+      rgb(240 245 255 / 0%) 100%
+    ),
   page-heading_subtitle: get-map($c, 'n700'),
   page-user_location_text: get-map($c, 'n600'),
   pill: get-map($c, 'n900'),