@apolitical/component-library 1.18.8 → 2.0.0

package/styles/variables/colors/_theme.scss

@@ -1,312 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@import 'colors';
-
-$c: $default-colors;
-$theme: (
-  // Base styles
-  default_focus: map.get($c, 'b100'),
-  background: map.get($c, 'white'),
-
-  highlight_bg: map.get($c, 'g300'),
-
-  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'),
-  button_primary_bg_active: map.get($c, 'b800'),
-  button_primary_bg_focus: map.get($c, 'b600'),
-  button_primary_bg_disabled: map.get($c, 'b700'),
-  button_primary_destructive: map.get($c, 'white'),
-  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'),
-  button_secondary_muted_hover: map.get($c, 'n700'),
-  button_secondary_destructive: map.get($c, 'error600'),
-  button_secondary_disabled: map.get($c, 'b700'),
-  button_secondary_bg: map.get($c, 'white'),
-  button_secondary_bg_hover: map.get($c, 'b200'),
-  button_secondary_bg_focus: map.get($c, 'b600'),
-  button_secondary_bg_active: map.get($c, 'b800'),
-  button_secondary_bg_muted: map.get($c, 'white'),
-  button_secondary_bg_muted_hover: map.get($c, 'n200'),
-  button_secondary_bg_disabled: map.get($c, 'white'),
-  button_secondary_bg_destructive: map.get($c, 'error50'),
-  button_secondary_border: map.get($c, 'b700'),
-  button_secondary_border_focus: transparent,
-  button_secondary_border_muted: map.get($c, 'n200'),
-  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'),
-  button_tertiary_muted: map.get($c, 'n600'),
-  button_tertiary_muted_hover: map.get($c, 'b500'),
-  button_tertiary_disabled: map.get($c, 'b700'),
-  button_tertiary_bg: none,
-  button_tertiary_disabled_bg: none,
-  button_tertiary_text-decoration: transparent,
-  button_tertiary_disabled_text-decoration: transparent,
-
-  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'),
-  form_input_border: map.get($c, 'n200'),
-  form_input_focus_border: map.get($c, 'b500'),
-  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'),
-  banner-section_bg: map.get($c, 'b700'),
-  banner-section_light_bg: map.get($c, 'white'),
-  banner-section_overlay: map.get($c, 'n900'),
-  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'),
-
-  // Cards
-  card: map.get($c, 'n600'),
-  card_bg: map.get($c, 'sand'),
-  card_hover_bg: map.get($c, 'n50'),
-  card_label: map.get($c, 'n700'),
-  card_img_bg: map.get($c, 'b50'),
-
-  carousel_arrow: map.get($c, 'n600'),
-  carousel_arrow_disabled: map.get($c, 'n200'),
-  carousel_arrow_bg: map.get($c, 'white'),
-  carousel_arrow_hover_bg: map.get($c, 'b100'),
-  carousel_arrow_active_bg: map.get($c, 'b300'),
-  carousel_arrow_disabled_bg: map.get($c, 'n50'),
-  carousel_arrow_border: map.get($c, 'n100'),
-  carousel_arrow_hover_border: map.get($c, 'b300'),
-  carousel_arrow_active_border: map.get($c, 'b500'),
-  carousel_arrow_disabled_border: map.get($c, 'b100'),
-  carousel_pagination_bg: map.get($c, 'n100'),
-  carousel_pagination_hover_bg: map.get($c, 'b200'),
-  carousel_pagination_selected_bg: map.get($c, 'b500'),
-  // Communities
-  community-details_link_hover: map.get($c, 'b500'),
-  // Discussion
-  discussion-post_highlighted_bg: map.get($c, 'g50'),
-  discussion-post_fading_bg: color.adjust(map.get($c, 'g50'), $alpha: -0.9),
-  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_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'),
-  header_link_hover: map.get($c, 'b500'),
-  header_link_active: map.get($c, 'b700'),
-  header_button_hover_bg: map.get($c, 'b700'),
-  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%),
-  page-layout_bold: map.get($c, 'white'),
-  page-layout_bold_bg: map.get($c, 'b700'),
-  page-layout_inverted_bg: map.get($c, 'g300'),
-  page-layout_bold_circle: map.get($c, 'g300'),
-  page-layout_inverted_circle: map.get($c, 'b700'),
-  page-layout_alt-1_circle: map.get($c, 'y300'),
-  page-layout_alt-2_circle: map.get($c, 'p300'),
-  // 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),
-  progress-bar_bg: map.get($c, 'n50'),
-  progress-bar_before_bg: map.get($c, 'n200'),
-  progress-bar_25_bg_1: map.get($c, 'p100'),
-  progress-bar_25_bg_2: map.get($c, 'g100'),
-  progress-bar_50_bg_1: map.get($c, 'g100'),
-  progress-bar_50_bg_2: map.get($c, 'y300'),
-  progress-bar_75_bg_1: map.get($c, 'y300'),
-  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'),
-  // 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'),
-  filters_bg: map.get($c, 'n50'),
-  filters_selected_bg: map.get($c, 'g100'),
-  filters_hover_bg: map.get($c, 'n100'),
-  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%),
-  navigation-menu: map.get($c, 'n700'),
-  navigation-menu_active: map.get($c, 'b700'),
-  navigation-menu_bg: map.get($c, 'white'),
-  navigation-menu_link_bg: map.get($c, 'white'),
-  navigation-menu_link_hover_bg: map.get($c, 'n50'),
-  navigation-menu_link_active_bg: map.get($c, 'b100'),
-  navigation-menu_profile-picture_border: map.get($c, 'n700'),
-  share-links: map.get($c, 'n800'),
-  share-links_muted: map.get($c, 'n600'),
-  tabs: map.get($c, 'n700'),
-  tabs_selected: map.get($c, 'b700'),
-  tabs_bg: map.get($c, 'white'),
-  tabs_selected_bg: map.get($c, 'b100'),
-  tabs_border: map.get($c, 'n100'),
-  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_icon: map.get($c, 'b500'),
-  highlighted-text-box_subtle_border: map.get($c, 'n100'),
-  highlighted-text-box_muted_bg: map.get($c, 'n40'),
-  highlighted-text-box_muted_icon: map.get($c, 'n600'),
-  page-heading_bg: linear-gradient(180deg, map.get($c, 'n50') 0%, rgb(240 245 255 / 0%) 100%),
-  page-heading_subtitle: map.get($c, 'n700'),
-  pill: map.get($c, 'n900'),
-  pill_highlighted: map.get($c, 'n700'),
-  pill_registered: map.get($c, 'g700'),
-  pill_bg: map.get($c, 'n200'),
-  pill_subtle_bg: map.get($c, 'white'),
-  pill_highlighted_bg: map.get($c, 'y300'),
-  pill_information_bg: map.get($c, 'g100'),
-  pill_registered_bg: map.get($c, 'g50'),
-  pill_subtle_border: map.get($c, 'n200'),
-  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'),
-  contributor_medium_bg: map.get($c, 'n200'),
-  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'),
-
-  profile-picture_img_bg: map.get($c, 'b50'),
-  // Pages
-  not-found_title: map.get($c, 'y300'),
-  not-found_subtitle: map.get($c, 'white'),
-  not-found_appended_bg: map.get($c, 'white')
-);