@apolitical/component-library 1.12.0 → 1.12.1-beta.0

package/styles/variables/colors/_theme.scss

@@ -1,19 +1,24 @@
 @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'),
@@ -24,6 +29,7 @@ $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'),
@@ -44,6 +50,7 @@ $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'),
@@ -57,7 +64,9 @@ $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'),
@@ -66,10 +75,13 @@ $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'),
@@ -79,69 +91,78 @@ $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'),
@@ -151,19 +172,25 @@ $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'),
@@ -174,18 +201,17 @@ $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'),
@@ -195,48 +221,58 @@ $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'),
@@ -244,7 +280,9 @@ $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')
 );
+

package/form/types/invite-form/index.d.ts

@@ -1 +0,0 @@
-export { default as InviteForm } from './invite-form';

package/form/types/invite-form/invite-form.d.ts

@@ -1,30 +0,0 @@
-export declare enum FormStatus {
-    NOT_SUBMITTED = "NOT_SUBMITTED",
-    SUCCESS = "SUCCESS",
-    CLOSED = "CLOSED",
-    ERROR = "ERROR"
-}
-interface IProps {
-    /** Title displayed on the form */
-    title: string;
-    /** Form input label*/
-    label: string;
-    /** CTA button text displayed */
-    ctaMessage: string;
-    /** Colour of the title */
-    titleColor?: string;
-    /** Colour of the label */
-    labelColor?: string;
-    /** Background colour of the form */
-    backgroundColor?: string;
-    /** Function to run before form gets closed */
-    onClose(): void;
-    /** Function to report errors */
-    reportError(error: unknown): void;
-    /** Function to send the invites */
-    sendInvites(emails: string[]): void;
-    /** Initial form status */
-    initialFormStatus?: FormStatus;
-}
-declare const InviteForm: ({ title, label, ctaMessage, titleColor, labelColor, backgroundColor, onClose, reportError, sendInvites, initialFormStatus, }: IProps) => import("react/jsx-runtime").JSX.Element | null;
-export default InviteForm;

package/modals/invite-modal/index.d.ts

@@ -1 +0,0 @@
-export { default as InviteModal } from './invite-modal';

package/modals/invite-modal/invite-modal.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="react" />
-interface IProps {
-    /** The ID of the element */
-    id?: string;
-    /** Additional classes */
-    className?: string;
-    /** Optional styling */
-    style?: React.CSSProperties;
-    /** Whether the modal is open on page load */
-    showModal?: boolean;
-    /** Function to close the modal */
-    onClose(): void;
-    /** Function to report errors */
-    reportError?(error: unknown): void;
-    /** Title displayed on the modal */
-    title?: string;
-    /** Title on the form */
-    formTitle?: string;
-    /** Form input label */
-    formLabel?: string;
-    /** CTA button text displayed on the form */
-    ctaMessage: string;
-    /** Function to send the invites */
-    sendInvites(emails: string[]): void;
-    /** Whether to show the check icon */
-    showIcon?: boolean;
-    /** Whether to show the modal header */
-    showHeader?: boolean;
-}
-declare const InviteModal: ({ className, showModal, title, formTitle, formLabel, ctaMessage, showIcon, onClose, reportError, sendInvites, }: IProps) => import("react/jsx-runtime").JSX.Element;
-export default InviteModal;