@apolitical/component-library 1.12.1 → 1.12.2

package/styles/variables/colors/_theme.scss

@@ -1,24 +1,19 @@
 @use 'sass:map';
 @import 'colors';
 
-
 $c: $default-colors;
 $theme: (
   // Base styles
   default_focus: map.get($c, 'b100'),
-
   background: map.get($c, 'white'),
-  
   title: map.get($c, 'n900'),
   subtitle: map.get($c, 'n800'),
   text: map.get($c, 'n900'),
   text_error: map.get($c, 'error600'),
   text_line: map.get($c, 'g50'),
   text_line_dark: map.get($c, 'b700'),
-
   link: map.get($c, 'b700'),
   link_hover: map.get($c, 'b800'),
-
   button_primary: map.get($c, 'white'),
   button_primary_bg: map.get($c, 'b700'),
   button_primary_bg_hover: map.get($c, 'b500'),
@@ -29,7 +24,6 @@ $theme: (
   button_primary_destructive_bg: map.get($c, 'error600'),
   button_primary_destructive_bg_hover: map.get($c, 'error700'),
   button_primary_destructive_box-shadow: map.get($c, 'error50'),
-
   button_secondary: map.get($c, 'b700'),
   button_secondary_focus: map.get($c, 'white'),
   button_secondary_muted: map.get($c, 'n600'),
@@ -50,7 +44,6 @@ $theme: (
   button_secondary_border_muted_hover: map.get($c, 'n500'),
   button_secondary_border_disabled: map.get($c, 'b700'),
   button_secondary_border_destructive: map.get($c, 'error600'),
-
   button_tertiary: map.get($c, 'b700'),
   button_tertiary_hover: map.get($c, 'b500'),
   button_tertiary_active: map.get($c, 'b800'),
@@ -64,9 +57,7 @@ $theme: (
 
   blockquote: map.get($c, 'n900'),
   'blockquote_border': map.get($c, 'g300'),
-
   divider: map.get($c, 'n100'),
-
   form_input: map.get($c, 'n900'),
   form_input_placeholder: map.get($c, 'n600'),
   form_input_bg: map.get($c, 'white'),
@@ -75,13 +66,10 @@ $theme: (
   form_input_error_border: map.get($c, 'error600'),
   form_input_focus_box-shadow: map.get($c, 'b100'),
   form_search-button_bg: map.get($c, 'n900'),
-
   table_border: map.get($c, 'n200'),
   table_th: map.get($c, 'white'),
   table_th_bg: map.get($c, 'n600'),
-
   overlay: rgb(21 25 33 / 25%),
-
   // Banners
   banner-section: map.get($c, 'white'),
   banner-section_light: map.get($c, 'n700'),
@@ -91,78 +79,69 @@ $theme: (
   banner-section_eyebrow: map.get($c, 'y300'),
   banner-section_light_eyebrow: map.get($c, 'b700'),
   banner-section_light_title: map.get($c, 'n900'),
-
   marketing-block_title: map.get($c, 'n900'),
   marketing-block_tertiary_title: map.get($c, 'white'),
   marketing-block_text: map.get($c, 'n700'),
   marketing-block_tertiary_text: map.get($c, 'b100'),
   marketing-block_circle: map.get($c, 'b700'),
   marketing-block_tertiary_circle: map.get($c, 'g300'),
-
   marketing-block_primary_bg_1: map.get($c, 'g100'),
   marketing-block_secondary_bg_1: map.get($c, 'p100'),
   marketing-block_tertiary_bg_1: map.get($c, 'b700'),
-
   marketing-block_primary_bg_2: map.get($c, 'y300'),
   marketing-block_secondary_bg_2: map.get($c, 'g100'),
   marketing-block_tertiary_bg_2: map.get($c, 'p600'),
-
   // Communities
   community-details_link_hover: map.get($c, 'b500'),
-
   // Discussion
   discussion-actions: map.get($c, 'n600'),
   discussion-actions_hover_bg: map.get($c, 'b100'),
   discussion-actions_likes_liked: map.get($c, 'p500'),
   discussion-actions_likes_liked_bg: map.get($c, 'p500'),
-
   discussion-form_bg: map.get($c, 'b50'),
   discussion-form_placeholder: map.get($c, 'n500'),
   discussion-form_small: map.get($c, 'n700'),
-
   discussion-question_bg: map.get($c, 'sand'),
-
   discussion-responses-heading_p: map.get($c, 'n600'),
   discussion-responses-heading_icon: map.get($c, 'n700'),
-
   discussion-thread_border: map.get($c, 'n200'),
-
   // Form
   password-rules: map.get($c, 'error600'),
   password-rules_matches: map.get($c, 'success500'),
   password-rules_small: map.get($c, 'n600'),
-
   rating: map.get($c, 'n600'),
   rating_hover_button: map.get($c, 'n500'),
   rating_selected_button: map.get($c, 'b700'),
   rating_shadow: map.get($c, 'b500'),
-
   search_button_hover_bg: map.get($c, 'b700'),
   search_clear-button_bg: map.get($c, 'n500'),
   search_search-button_bg: map.get($c, 'n600'),
   search_search-button_active_bg: map.get($c, 'white'),
-
+  // Invite Form
+  invite_form_border_focus: map.get($c, 'b500'),
+  invite_form_shadow: map.get($c, 'b100'),
+  invite_form_remove_email_button: map.get($c, 'n700'),
+  invite_form_email_bg: map.get($c, 'n50'),
+  invite_form_email_color: map.get($c, 'n700'),
+  invite_form_email_input_border: map.get($c, 'n200'),
   // General
   tooltip: map.get($c, 'white'),
   tooltip_bg: rgb(21 25 33 / 90%),
-
   // Layout
   cookie-banner_bg: map.get($c, 'n50'),
   cookie-banner_shadow: rgb(107 91 82 / 40%),
   cookie-banner_title_border: map.get($c, 'n100'),
-
   download-section_bg: map.get($c, 'g300'),
-
   footer: map.get($c, 'g300'),
   footer_bg: map.get($c, 'b800'),
-  footer_before_bg: linear-gradient(90deg, map.get($c, 'b700') 0%, map.get($c, 'g300') 100%),
+  footer_before_bg:
+    linear-gradient(90deg, map.get($c, 'b700') 0%, map.get($c, 'g300') 100%),
   footer_title: map.get($c, 'y300'),
   footer_link: map.get($c, 'g300'),
   footer_dt: map.get($c, 'white'),
   footer_dd: map.get($c, 'g300'),
   footer_hr: map.get($c, 'y300'),
   footer_small: map.get($c, 'b200'),
-
   header: map.get($c, 'n900'),
   header_bg: map.get($c, 'white'),
   header_link: map.get($c, 'n900'),
@@ -172,25 +151,19 @@ $theme: (
   header_account-button_bg: map.get($c, 'n700'),
   header_account-button_border: map.get($c, 'n700'),
   header_menu-button_bg: map.get($c, 'n900'),
-
   header_parent_hover: map.get($c, 'b700'),
   header_child: map.get($c, 'n700'),
   header_child_divider: map.get($c, 'n100'),
   header_border: map.get($c, 'n100'),
-
-
   logos_title: map.get($c, 'n700'),
   logos_small: map.get($c, 'n600'),
-
   page-layout_gradient_bg_1: map.get($c, 'n50'),
   page-layout_gradient_bg_2: rgb(240 245 255 / 0%),
-
   // Loaders
   loading-block_icon_bg: map.get($c, 'n600'),
-
   loading-placeholder_bg: map.get($c, 'n10'),
-  loading-placeholder_after_bg: linear-gradient(90deg, transparent, rgba(255 255 255 / 20%), transparent),
-
+  loading-placeholder_after_bg:
+    linear-gradient(90deg, transparent, rgba(255 255 255 / 20%), transparent),
   progress-bar_bg: map.get($c, 'n50'),
   progress-bar_before_bg: map.get($c, 'n200'),
   progress-bar_25_bg_1: map.get($c, 'p100'),
@@ -201,17 +174,18 @@ $theme: (
   progress-bar_75_bg_2: map.get($c, 'b200'),
   progress-bar_100_bg_1: map.get($c, 'b200'),
   progress-bar_100_bg_2: map.get($c, 'g100'),
-
   // Modals
   modal_bg: map.get($c, 'white'),
   modal_shadow: rgba(42 49 65 / 30%),
   modal_close: map.get($c, 'n700'),
   modal_close_hover_bg: map.get($c, 'b100'),
-
+  modal_success_title: map.get($c, 'success600'),
+  modal_success_title_background: map.get($c, 'g100'),
+  modal_success_icon_background: map.get($c, 'success600'),
+  // Invite Modal
   // Navigation
   breadcrumbs: map.get($c, 'n600'),
   breadcrumbs_hover: map.get($c, 'b500'),
-
   filters: map.get($c, 'n700'),
   filters_selected: map.get($c, 'g700'),
   filters_active: map.get($c, 'n700'),
@@ -221,58 +195,48 @@ $theme: (
   filters_active_bg: map.get($c, 'g300'),
   filters_outline: map.get($c, 'n200'),
   filters_selected_outline: map.get($c, 'g200'),
-
   language-switcher_bg: map.get($c, 'n50'),
   language-switcher_a: map.get($c, 'n900'),
   language-switcher_a_selected: map.get($c, 'b700'),
   language-switcher_a_hover: map.get($c, 'b800'),
-
   more-menu: map.get($c, 'n700'),
   more-menu_hover_button_bg: map.get($c, 'b100'),
   more-menu_menu_bg: map.get($c, 'white'),
   more-menu_menu_shadow: rgba(0 0 0 / 10%),
-
   tags: map.get($c, 'b700'),
   tags_light: map.get($c, 'p500'),
-
-
   // Text
   collapsible-section_bg: map.get($c, 'white'),
   collapsible-section_border: map.get($c, 'n500'),
   collapsible-section_icon: map.get($c, 'n900'),
   collapsible-section_icon_hover: map.get($c, 'b100'),
   collapsible-section_discrete-links_link_hover: map.get($c, 'b700'),
-
   empty-state-box: map.get($c, 'n700'),
   empty-state-box_error_border: map.get($c, 'error600'),
-
   helper-text-box: map.get($c, 'n700'),
   helper-text-box_bg: map.get($c, 'info50'),
   helper-text-box_warning_bg: map.get($c, 'warning50'),
   helper-text-box_error_bg: map.get($c, 'error50'),
   helper-text-box_success_bg: map.get($c, 'success50'),
-
   highlighted-text-box_bg: map.get($c, 'n50'),
   highlighted-text-box_secondary_bg: map.get($c, 'y50'),
   highlighted-text-box_tertiary_bg: map.get($c, 'error50'),
   highlighted-text-box_subtle_bg: map.get($c, 'white'),
-  highlighted-text-box_bold_bg: linear-gradient(135deg, map.get($c, 'b100'), map.get($c, 'g50')),
-  highlighted-text-box_subtle_gradient: linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
+  highlighted-text-box_bold_bg:
+    linear-gradient(135deg, map.get($c, 'b100'), map.get($c, 'g50')),
+  highlighted-text-box_subtle_gradient:
+    linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
   highlighted-text-box_bold_icon: map.get($c, 'b500'),
-
   highlighted-text-box_subtle_border: map.get($c, 'n100'),
-
   pill: map.get($c, 'n900'),
   pill_highlighted: map.get($c, 'n700'),
   pill_bg: map.get($c, 'n200'),
   pill_highlighted_bg: map.get($c, 'y300'),
-
   status-banner_bg: map.get($c, 'y50'),
   status-banner_success_bg: map.get($c, 'success50'),
   status-banner_success_icon: map.get($c, 'success600'),
   status-banner_error_bg: map.get($c, 'error50'),
   status-banner_error_icon: map.get($c, 'error600'),
-
   // User
   contributor: map.get($c, 'n700'),
   contributor_bg: map.get($c, 'white'),
@@ -280,9 +244,7 @@ $theme: (
   contributor_border: map.get($c, 'white'),
   contributor_inner-border: map.get($c, 'n200'),
   contributor_label: map.get($c, 'n600'),
-
   member_highlighted_name: map.get($c, 'p500'),
   member_additional-content: map.get($c, 'n700'),
   member_small: map.get($c, 'n700')
 );
-