@apolitical/component-library 1.18.8 → 2.0.0

package/styles/variables/_index.scss

@@ -1,3 +1 @@
-@import 'assets',
-        'colors',
-        'sizes';
+@import 'assets', 'colors', 'sizes';

package/styles/variables/assets/_assets.scss

@@ -1,2 +1 @@
 $assets-bucket: 'https://storage.googleapis.com/apolitical-assets/';
-

package/styles/variables/assets/_index.scss

@@ -1 +1 @@
-@import 'assets';
+@import 'assets';

package/styles/variables/colors/_colors.scss

@@ -4,56 +4,56 @@
 // names.
 
 $default-colors: (
-'white': rgb(255 255 255 / 100%),
-'black': rgb(0 0 0 / 100%),
-'sand': rgb(252 250 243 / 100%),
-'b50': rgb(248 247 255 / 100%),
-'b100': rgb(222 220 250 / 100%),
-'b200': rgb(197 194 245 / 100%),
-'b300': rgb(175 171 239 / 100%),
-'b500': rgb(124 114 225 / 100%),
-'b600': rgb(101 89 212 / 100%),
-'b700': rgb(79 67 186 / 100%),
-'b800': rgb(57 45 135 / 100%),
-'b900': rgb(33 24 77 / 100%),
-'g50': rgb(235 250 246 / 100%),
-'g100': rgb(195 240 228 / 100%),
-'g200': rgb(153 219 201),
-'g300': rgb(124 220 197 / 100%),
-'g600': rgb(43 137 117 / 100%),
-'g700': rgb(28 104 88 / 100%),
-'g900': rgb(10 38 33 / 100%),
-'n10': rgb(222 226 232 / 100%),
-'n40': rgb(248 248 248 / 100%),
-'n50': rgb(240 245 255 / 100%),
-'n100': rgb(215 224 239 / 100%),
-'n200': rgb(192 203 223 / 100%),
-'n500': rgb(117 131 160 / 100%),
-'n600': rgb(89 101 128 / 100%),
-'n700': rgb(64 74 97 / 100%),
-'n800': rgb(42 49 65 / 100%),
-'n900': rgb(21 25 33 / 100%),
-'p50': rgb(255 242 255 / 100%),
-'p100': rgb(238 200 237 / 100%),
-'p300': rgb(203 130 197 / 100%),
-'p500': rgb(166 55 152 / 100%),
-'p600': rgb(136 90 189 / 100%),
-'p900': rgb(66 1 55 / 100%),
-'y50': rgb(255 248 232 / 100%),
-'y100': rgb(255 238 193 / 100%),
-'y300': rgb(255 230 139 / 100%),
-'y700': rgb(122 81 5 / 100%),
-'y900': rgb(48 29 0 / 100%),
-'error50': rgb(255 242 242 / 100%),
-'error600': rgb(195 65 65 / 100%),
-'error700': rgb(155 36 36 / 100%),
-'info50': rgb(240 245 247 / 100%),
-'info500': rgb(30 117 166 / 100%),
-'info600': rgb(20 95 139 / 100%),
-'success50': rgb(235 247 239 / 100%),
-'success500': rgb(60 124 82 / 100%),
-'success600': rgb(38 103 60 / 100%),
-'warning50': rgb(255 242 230 / 100%),
-'warning500': rgb(220 121 29 / 100%),
-'warning700': rgb(137 71 11 / 100%),
-);
+  'white': rgb(255 255 255 / 100%),
+  'black': rgb(0 0 0 / 100%),
+  'sand': rgb(252 250 243 / 100%),
+  'b50': rgb(248 247 255 / 100%),
+  'b100': rgb(222 220 250 / 100%),
+  'b200': rgb(197 194 245 / 100%),
+  'b300': rgb(175 171 239 / 100%),
+  'b500': rgb(124 114 225 / 100%),
+  'b600': rgb(101 89 212 / 100%),
+  'b700': rgb(79 67 186 / 100%),
+  'b800': rgb(57 45 135 / 100%),
+  'b900': rgb(33 24 77 / 100%),
+  'g50': rgb(235 250 246 / 100%),
+  'g100': rgb(195 240 228 / 100%),
+  'g200': rgb(153 219 201),
+  'g300': rgb(124 220 197 / 100%),
+  'g600': rgb(43 137 117 / 100%),
+  'g700': rgb(28 104 88 / 100%),
+  'g900': rgb(10 38 33 / 100%),
+  'n10': rgb(222 226 232 / 100%),
+  'n40': rgb(248 248 248 / 100%),
+  'n50': rgb(240 245 255 / 100%),
+  'n100': rgb(215 224 239 / 100%),
+  'n200': rgb(192 203 223 / 100%),
+  'n500': rgb(117 131 160 / 100%),
+  'n600': rgb(89 101 128 / 100%),
+  'n700': rgb(64 74 97 / 100%),
+  'n800': rgb(42 49 65 / 100%),
+  'n900': rgb(21 25 33 / 100%),
+  'p50': rgb(255 242 255 / 100%),
+  'p100': rgb(238 200 237 / 100%),
+  'p300': rgb(203 130 197 / 100%),
+  'p500': rgb(166 55 152 / 100%),
+  'p600': rgb(136 90 189 / 100%),
+  'p900': rgb(66 1 55 / 100%),
+  'y50': rgb(255 248 232 / 100%),
+  'y100': rgb(255 238 193 / 100%),
+  'y300': rgb(255 230 139 / 100%),
+  'y700': rgb(122 81 5 / 100%),
+  'y900': rgb(48 29 0 / 100%),
+  'error50': rgb(255 242 242 / 100%),
+  'error600': rgb(195 65 65 / 100%),
+  'error700': rgb(155 36 36 / 100%),
+  'info50': rgb(240 245 247 / 100%),
+  'info500': rgb(30 117 166 / 100%),
+  'info600': rgb(20 95 139 / 100%),
+  'success50': rgb(235 247 239 / 100%),
+  'success500': rgb(60 124 82 / 100%),
+  'success600': rgb(38 103 60 / 100%),
+  'warning50': rgb(255 242 230 / 100%),
+  'warning500': rgb(220 121 29 / 100%),
+  'warning700': rgb(137 71 11 / 100%),
+);

package/styles/variables/colors/_index.scss

@@ -1 +1 @@
-@import 'theme';
+@import 'theme';

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

@@ -0,0 +1,26 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$banners: (
+  banner-section: get-map($c, 'white'),
+  banner-section_light: get-map($c, 'n700'),
+  banner-section_bg: get-map($c, 'b700'),
+  banner-section_light_bg: get-map($c, 'white'),
+  banner-section_overlay: get-map($c, 'n900'),
+  banner-section_eyebrow: get-map($c, 'y300'),
+  banner-section_light_eyebrow: get-map($c, 'b700'),
+  banner-section_light_title: get-map($c, 'n900'),
+  marketing-block_title: get-map($c, 'n900'),
+  marketing-block_tertiary_title: get-map($c, 'white'),
+  marketing-block_text: get-map($c, 'n700'),
+  marketing-block_tertiary_text: get-map($c, 'b100'),
+  marketing-block_circle: get-map($c, 'b700'),
+  marketing-block_tertiary_circle: get-map($c, 'g300'),
+  marketing-block_primary_bg_1: get-map($c, 'g100'),
+  marketing-block_secondary_bg_1: get-map($c, 'p100'),
+  marketing-block_tertiary_bg_1: get-map($c, 'b700'),
+  marketing-block_primary_bg_2: get-map($c, 'y300'),
+  marketing-block_secondary_bg_2: get-map($c, 'g100'),
+  marketing-block_tertiary_bg_2: get-map($c, 'p600'),
+);

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

@@ -0,0 +1,88 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$base: (
+  default_focus: get-map($c, 'b100'),
+  background: get-map($c, 'white'),
+  highlight_bg: get-map($c, 'g300'),
+  title: get-map($c, 'n900'),
+  subtitle: get-map($c, 'n800'),
+  text: get-map($c, 'n900'),
+  text_error: get-map($c, 'error600'),
+  text_line: get-map($c, 'g50'),
+  text_line_dark: get-map($c, 'b700'),
+  link: get-map($c, 'b700'),
+  link_hover: get-map($c, 'b800'),
+  button_primary: get-map($c, 'white'),
+  button_primary_bg: get-map($c, 'b700'),
+  button_primary_bg_hover: get-map($c, 'b500'),
+  button_primary_bg_active: get-map($c, 'b800'),
+  button_primary_bg_focus: get-map($c, 'b600'),
+  button_primary_bg_disabled: get-map($c, 'b700'),
+  button_primary_destructive: get-map($c, 'white'),
+  button_primary_destructive_bg: get-map($c, 'error600'),
+  button_primary_destructive_bg_hover: get-map($c, 'error700'),
+  button_primary_destructive_box-shadow: get-map($c, 'error50'),
+  button_secondary: get-map($c, 'b700'),
+  button_secondary_focus: get-map($c, 'white'),
+  button_secondary_muted: get-map($c, 'n600'),
+  button_secondary_muted_hover: get-map($c, 'n700'),
+  button_secondary_destructive: get-map($c, 'error600'),
+  button_secondary_disabled: get-map($c, 'b700'),
+  button_secondary_bg: get-map($c, 'white'),
+  button_secondary_bg_hover: get-map($c, 'b200'),
+  button_secondary_bg_focus: get-map($c, 'b600'),
+  button_secondary_bg_active: get-map($c, 'b800'),
+  button_secondary_bg_muted: get-map($c, 'white'),
+  button_secondary_bg_muted_hover: get-map($c, 'n200'),
+  button_secondary_bg_disabled: get-map($c, 'white'),
+  button_secondary_bg_destructive: get-map($c, 'error50'),
+  button_secondary_border: get-map($c, 'b700'),
+  button_secondary_border_focus: transparent,
+  button_secondary_border_muted: get-map($c, 'n200'),
+  button_secondary_border_muted_hover: get-map($c, 'n500'),
+  button_secondary_border_disabled: get-map($c, 'b700'),
+  button_secondary_border_destructive: get-map($c, 'error600'),
+  button_tertiary: get-map($c, 'b700'),
+  button_tertiary_hover: get-map($c, 'b500'),
+  button_tertiary_active: get-map($c, 'b800'),
+  button_tertiary_muted: get-map($c, 'n600'),
+  button_tertiary_muted_hover: get-map($c, 'b500'),
+  button_tertiary_disabled: get-map($c, 'b700'),
+  button_tertiary_bg: none,
+  button_tertiary_disabled_bg: none,
+  button_tertiary_text-decoration: transparent,
+  button_tertiary_disabled_text-decoration: transparent,
+  blockquote: get-map($c, 'n900'),
+  'blockquote_border': get-map($c, 'g300'),
+  divider: get-map($c, 'n100'),
+  form_character-limit: get-map($c, 'n600'),
+  form_character-limit_approaching: get-map($c, 'warning700'),
+  form_character-limit_near: get-map($c, 'error600'),
+  form_checkbox_bg: get-map($c, 'b700'),
+  form_checkbox_border: get-map($c, 'b700'),
+  form_checkbox_icon: get-map($c, 'white'),
+  form_field_bg: get-map($c, 'white'),
+  form_field_border: get-map($c, 'n200'),
+  form_input: get-map($c, 'n900'),
+  form_input_placeholder: get-map($c, 'n600'),
+  form_input_bg: get-map($c, 'white'),
+  form_input_border: get-map($c, 'n200'),
+  form_input_chevron: get-map($c, 'n500'),
+  form_input_focus_border: get-map($c, 'b500'),
+  form_input_error_border: get-map($c, 'error600'),
+  form_input_focus_box-shadow: get-map($c, 'b100'),
+  form_select_item: get-map($c, 'n600'),
+  form_select_item_selected: get-map($c, 'n900'),
+  form_select_item_hover: get-map($c, 'b700'),
+  form_select_item_hover_bg: get-map($c, 'b200'),
+  form_select_item_chevron_bg: get-map($c, 'g600'),
+  form_select_items_box-shadow: get-map($c, 'b100'),
+  form_label-small: get-map($c, 'n600'),
+  form_search-button_bg: get-map($c, 'n900'),
+  table_border: get-map($c, 'n200'),
+  table_th: get-map($c, 'white'),
+  table_th_bg: get-map($c, 'n600'),
+  overlay: rgb(21 25 33 / 25%),
+);

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

@@ -0,0 +1,24 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$cards: (
+  card: get-map($c, 'n600'),
+  card_bg: get-map($c, 'sand'),
+  card_hover_bg: get-map($c, 'n50'),
+  card_label: get-map($c, 'n700'),
+  card_img_bg: get-map($c, 'b50'),
+  carousel_arrow: get-map($c, 'n600'),
+  carousel_arrow_disabled: get-map($c, 'n200'),
+  carousel_arrow_bg: get-map($c, 'white'),
+  carousel_arrow_hover_bg: get-map($c, 'b100'),
+  carousel_arrow_active_bg: get-map($c, 'b300'),
+  carousel_arrow_disabled_bg: get-map($c, 'n50'),
+  carousel_arrow_border: get-map($c, 'n100'),
+  carousel_arrow_hover_border: get-map($c, 'b300'),
+  carousel_arrow_active_border: get-map($c, 'b500'),
+  carousel_arrow_disabled_border: get-map($c, 'b100'),
+  carousel_pagination_bg: get-map($c, 'n100'),
+  carousel_pagination_hover_bg: get-map($c, 'b200'),
+  carousel_pagination_selected_bg: get-map($c, 'b500'),
+);

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

@@ -0,0 +1,7 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$communities: (
+  community-details_link_hover: get-map($c, 'b500'),
+);

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

@@ -0,0 +1,20 @@
+@use 'sass:color';
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$discussion: (
+  discussion-post_highlighted_bg: get-map($c, 'g50'),
+  discussion-post_fading_bg: color.adjust(get-map($c, 'g50'), $alpha: -0.9),
+  discussion-actions: get-map($c, 'n600'),
+  discussion-actions_hover_bg: get-map($c, 'b100'),
+  discussion-actions_likes_liked: get-map($c, 'p500'),
+  discussion-actions_likes_liked_bg: get-map($c, 'p500'),
+  discussion-form_bg: get-map($c, 'b50'),
+  discussion-form_placeholder: get-map($c, 'n500'),
+  discussion-form_small: get-map($c, 'n700'),
+  discussion-question_bg: get-map($c, 'sand'),
+  discussion-responses-heading_p: get-map($c, 'n600'),
+  discussion-responses-heading_icon: get-map($c, 'n700'),
+  discussion-thread_border: get-map($c, 'n200'),
+);

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

@@ -0,0 +1,25 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$form: (
+  invite_form_border_focus: get-map($c, 'b500'),
+  invite_form_shadow: get-map($c, 'b100'),
+  invite_form_remove_email_button: get-map($c, 'n700'),
+  invite_form_email_bg: get-map($c, 'n50'),
+  invite_form_email_color: get-map($c, 'n700'),
+  invite_form_email_input_border: get-map($c, 'n200'),
+  password-rules: get-map($c, 'error600'),
+  password-rules_matches: get-map($c, 'success500'),
+  password-rules_small: get-map($c, 'n600'),
+  rating: get-map($c, 'n600'),
+  rating_hover_button: get-map($c, 'n500'),
+  rating_selected_button: get-map($c, 'b700'),
+  rating_shadow: get-map($c, 'b500'),
+  search_button_hover_bg: get-map($c, 'b700'),
+  search_clear-button_bg: get-map($c, 'n500'),
+  search_search-button_bg: get-map($c, 'n600'),
+  search_search-button_active_bg: get-map($c, 'white'),
+  show_password: get-map($c, 'n600'),
+  signup_form_error: get-map($c, 'error600'),
+);

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

@@ -0,0 +1,9 @@
+@use 'sass:color';
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$general: (
+  tooltip: get-map($c, 'white'),
+  tooltip_bg: color.adjust(get-map($c, 'n900'), $alpha: -0.1),
+);

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

@@ -0,0 +1,8 @@
+@import './../../../functions';
+@import 'banners', 'base', 'cards', 'communities', 'discussion', 'form', 'general',
+  'layout', 'loaders', 'modals', 'navigation', 'pages', 'text', 'user';
+
+$theme: merge-maps(
+  $banners $base $cards $communities $discussion $form $general $layout $loaders $modals
+    $navigation $pages $text $user
+);

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

@@ -0,0 +1,50 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$layout: (
+  cookie-banner_bg: get-map($c, 'n50'),
+  cookie-banner_shadow: rgb(107 91 82 / 40%),
+  cookie-banner_title_border: get-map($c, 'n100'),
+  contact-footer_bg: get-map($c, 'b50'),
+  contact-footer_header_underline: get-map($c, 'g300'),
+  contact-footer_link_icon: get-map($c, 'n700'),
+  contact-footer_link_hover: get-map($c, 'b500'),
+  contact-footer_form_bg: get-map($c, 'white'),
+  contact-footer_form_shadow: rgb(42 49 65 / 10%),
+  download-section_bg: get-map($c, 'g300'),
+  footer: get-map($c, 'g300'),
+  footer_bg: get-map($c, 'b800'),
+  footer_before_bg:
+    linear-gradient(90deg, get-map($c, 'b700') 0%, get-map($c, 'g300') 100%),
+  footer_title: get-map($c, 'y300'),
+  footer_link: get-map($c, 'g300'),
+  footer_dt: get-map($c, 'white'),
+  footer_dd: get-map($c, 'g300'),
+  footer_hr: get-map($c, 'y300'),
+  footer_small: get-map($c, 'b200'),
+  header: get-map($c, 'n900'),
+  header_bg: get-map($c, 'white'),
+  header_link: get-map($c, 'n900'),
+  header_link_hover: get-map($c, 'b500'),
+  header_link_active: get-map($c, 'b700'),
+  header_button_hover_bg: get-map($c, 'b700'),
+  header_account-button_bg: get-map($c, 'n700'),
+  header_account-button_border: get-map($c, 'n700'),
+  header_menu-button_bg: get-map($c, 'n900'),
+  header_parent_hover: get-map($c, 'b700'),
+  header_child: get-map($c, 'n700'),
+  header_child_divider: get-map($c, 'n100'),
+  header_border: get-map($c, 'n100'),
+  logos_title: get-map($c, 'n700'),
+  logos_small: get-map($c, 'n600'),
+  page-layout_gradient_bg_1: get-map($c, 'n50'),
+  page-layout_gradient_bg_2: rgb(240 245 255 / 0%),
+  page-layout_bold: get-map($c, 'white'),
+  page-layout_bold_bg: get-map($c, 'b700'),
+  page-layout_inverted_bg: get-map($c, 'g300'),
+  page-layout_bold_circle: get-map($c, 'g300'),
+  page-layout_inverted_circle: get-map($c, 'b700'),
+  page-layout_alt-1_circle: get-map($c, 'y300'),
+  page-layout_alt-2_circle: get-map($c, 'p300'),
+);

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

@@ -0,0 +1,20 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$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),
+  progress-bar_bg: get-map($c, 'n50'),
+  progress-bar_before_bg: get-map($c, 'n200'),
+  progress-bar_25_bg_1: get-map($c, 'p100'),
+  progress-bar_25_bg_2: get-map($c, 'g100'),
+  progress-bar_50_bg_1: get-map($c, 'g100'),
+  progress-bar_50_bg_2: get-map($c, 'y300'),
+  progress-bar_75_bg_1: get-map($c, 'y300'),
+  progress-bar_75_bg_2: get-map($c, 'b200'),
+  progress-bar_100_bg_1: get-map($c, 'b200'),
+  progress-bar_100_bg_2: get-map($c, 'g100'),
+);

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

@@ -0,0 +1,14 @@
+@use 'sass:color';
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$modals: (
+  modal_bg: get-map($c, 'white'),
+  modal_shadow: color.adjust(get-map($c, 'n800'), $alpha: -0.7),
+  modal_close: get-map($c, 'n700'),
+  modal_close_hover_bg: get-map($c, 'b100'),
+  modal_success_title: get-map($c, 'success600'),
+  modal_success_title_background: get-map($c, 'g100'),
+  modal_success_icon_background: get-map($c, 'success600'),
+);

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

@@ -0,0 +1,41 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$navigation: (
+  breadcrumbs: get-map($c, 'n600'),
+  breadcrumbs_hover: get-map($c, 'b500'),
+  filters: get-map($c, 'n700'),
+  filters_selected: get-map($c, 'g700'),
+  filters_active: get-map($c, 'n700'),
+  filters_bg: get-map($c, 'n50'),
+  filters_selected_bg: get-map($c, 'g100'),
+  filters_hover_bg: get-map($c, 'n100'),
+  filters_active_bg: get-map($c, 'g300'),
+  filters_outline: get-map($c, 'n200'),
+  filters_selected_outline: get-map($c, 'g200'),
+  language-switcher_bg: get-map($c, 'n50'),
+  language-switcher_a: get-map($c, 'n900'),
+  language-switcher_a_selected: get-map($c, 'b700'),
+  language-switcher_a_hover: get-map($c, 'b800'),
+  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%),
+  navigation-menu: get-map($c, 'n700'),
+  navigation-menu_active: get-map($c, 'b700'),
+  navigation-menu_bg: get-map($c, 'white'),
+  navigation-menu_link_bg: get-map($c, 'white'),
+  navigation-menu_link_hover_bg: get-map($c, 'n50'),
+  navigation-menu_link_active_bg: get-map($c, 'b100'),
+  navigation-menu_profile-picture_border: get-map($c, 'n700'),
+  share-links: get-map($c, 'n800'),
+  share-links_muted: get-map($c, 'n600'),
+  tabs: get-map($c, 'n700'),
+  tabs_selected: get-map($c, 'b700'),
+  tabs_bg: get-map($c, 'white'),
+  tabs_selected_bg: get-map($c, 'b100'),
+  tabs_border: get-map($c, 'n100'),
+  tags: get-map($c, 'b700'),
+  tags_light: get-map($c, 'p500'),
+);

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

@@ -0,0 +1,9 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$pages: (
+  not-found_title: get-map($c, 'y300'),
+  not-found_subtitle: get-map($c, 'white'),
+  not-found_appended_bg: get-map($c, 'white'),
+);

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

@@ -0,0 +1,47 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$text: (
+  collapsible-section_bg: get-map($c, 'white'),
+  collapsible-section_border: get-map($c, 'n500'),
+  collapsible-section_icon: get-map($c, 'n900'),
+  collapsible-section_icon_hover: get-map($c, 'b100'),
+  collapsible-section_discrete-links_link_hover: get-map($c, 'b700'),
+  empty-state-box: get-map($c, 'n700'),
+  empty-state-box_error_border: get-map($c, 'error600'),
+  helper-text-box: get-map($c, 'n700'),
+  helper-text-box_bg: get-map($c, 'info50'),
+  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'),
+  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_subtle_bg: get-map($c, 'white'),
+  highlighted-text-box_bold_bg:
+    linear-gradient(135deg, get-map($c, 'b100'), get-map($c, 'g50')),
+  highlighted-text-box_subtle_gradient:
+    linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
+  highlighted-text-box_bold_icon: get-map($c, 'b500'),
+  highlighted-text-box_subtle_border: get-map($c, 'n100'),
+  highlighted-text-box_muted_bg: get-map($c, 'n40'),
+  highlighted-text-box_muted_icon: get-map($c, 'n600'),
+  page-heading_bg:
+    linear-gradient(180deg, get-map($c, 'n50') 0%, rgb(240 245 255 / 0%) 100%),
+  page-heading_subtitle: get-map($c, 'n700'),
+  pill: get-map($c, 'n900'),
+  pill_highlighted: get-map($c, 'n700'),
+  pill_registered: get-map($c, 'g700'),
+  pill_bg: get-map($c, 'n200'),
+  pill_subtle_bg: get-map($c, 'white'),
+  pill_highlighted_bg: get-map($c, 'y300'),
+  pill_information_bg: get-map($c, 'g100'),
+  pill_registered_bg: get-map($c, 'g50'),
+  pill_subtle_border: get-map($c, 'n200'),
+  status-banner_bg: get-map($c, 'y50'),
+  status-banner_success_bg: get-map($c, 'success50'),
+  status-banner_success_icon: get-map($c, 'success600'),
+  status-banner_error_bg: get-map($c, 'error50'),
+  status-banner_error_icon: get-map($c, 'error600'),
+);

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

@@ -0,0 +1,16 @@
+@import './../colors';
+@import '@/styles/functions';
+
+$c: $default-colors;
+$user: (
+  contributor: get-map($c, 'n700'),
+  contributor_bg: get-map($c, 'white'),
+  contributor_medium_bg: get-map($c, 'n200'),
+  contributor_border: get-map($c, 'white'),
+  contributor_inner-border: get-map($c, 'n200'),
+  contributor_label: get-map($c, 'n600'),
+  member_highlighted_name: get-map($c, 'p500'),
+  member_additional-content: get-map($c, 'n700'),
+  member_small: get-map($c, 'n700'),
+  profile-picture_img_bg: get-map($c, 'b50'),
+);

package/styles/variables/sizes/_common.scss

@@ -4,4 +4,4 @@ $outline-width: px-to-rem(4);
 $outline: 0 0 0 $outline-width;
 
 // This is used for the width of a slimmer layout column.
-$content-slim-width: 1040;
+$content-slim-width: 1040;

package/styles/variables/sizes/_index.scss

@@ -1 +1 @@
-@import 'common';
+@import 'common';

package/text/helper-text-box/helper-text-box.d.ts

@@ -10,5 +10,5 @@ interface Props {
     /** The content to display in the box */
     children: React.ReactNode | JSX.Element | string;
 }
-declare const HelperTextBox: ({ type, className, heading, children }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const HelperTextBox: ({ type, className, heading, children, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default HelperTextBox;

package/text/hide-show-text-box/hide-show-text-box.d.ts

@@ -12,5 +12,5 @@ interface Props {
     text: string;
     children?: React.ReactNode;
 }
-declare const HideShowTextBox: ({ className, show, hide, text, children }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const HideShowTextBox: ({ className, show, hide, text, children, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default HideShowTextBox;

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from './reducer';