@apolitical/component-library 0.0.4-beta.6 → 1.1.0-beta.1

package/styles/mixins/_selectors.scss

@@ -1,8 +1,5 @@
-// We need to scope everything to #root, but that stops us adding a parent before the
-// current selector. This mixin puts the selector path in the expected order. See the README for
-// more details.
-@mixin selector-after-root($selector) {
-  @at-root #root #{selector-replace(&, '#root', $selector)} {
+@mixin amend-selector-path($old, $new) {
+  @at-root #{selector-replace(&, $old, $new)} {
     @content;
   }
 }

package/styles/mixins/_styles.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use 'sass:math';
+@import './../variables',
+        './../functions';
+
+@mixin dashed-border($color: map.get($theme, 'divider')) {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{$color}' stroke-width='1' stroke-dasharray='6%2c 8' stroke-dashoffset='2' stroke-linecap='round'/%3e%3c/svg%3e");
+}
+
+@mixin line-under-text($color: 'light', $width: 60, $height: 4, $gap: 16, $border-radius: 2.5) {
+  position: relative;
+  padding-bottom: px-to-rem($height + $gap);
+
+    &::after {
+      content: '';
+      background: map.get($theme, 'text_line');
+      width: px-to-rem($width);
+      height: px-to-rem($height);
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      margin-left: -(px-to-rem(math.div($width, 2)));
+      border-radius: px-to-rem($border-radius);
+
+      @if $color == 'dark' {
+        background: map.get($theme, 'text_line_dark');
+      }
+    }
+
+
+}

package/styles/variables/assets/_assets.scss

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

package/styles/variables/colors/_colors.scss

@@ -20,11 +20,13 @@ $default-colors: (
 
   '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%),
   'n50': rgb(240 245 255 / 100%),
   'n100': rgb(215 224 239 / 100%),
   'n200': rgb(192 203 223 / 100%),
@@ -38,6 +40,7 @@ $default-colors: (
   '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%),
@@ -61,4 +64,6 @@ $default-colors: (
   'warning50': rgb(255 242 230 / 100%),
   'warning500': rgb(220 121 29 / 100%),
   'warning700': rgb(137 71 11 / 100%),
+
+
 );

package/styles/variables/colors/_theme.scss

@@ -4,6 +4,7 @@
 
 $c: $default-colors;
 $theme: (
+  // Base styles
   default_focus: map.get($c, 'b100'),
 
   background: map.get($c, 'white'),
@@ -11,6 +12,9 @@ $theme: (
   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'),
@@ -53,10 +57,164 @@ $theme: (
   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'),
+
+  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'),
+
+  // 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'),
+
+  // 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%),
+
+  // 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%),
+
+  // Navigation
+  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'),
+
+  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'),
+
+  pill: map.get($c, 'n700'),
+  pill_bg: map.get($c, 'y300'),
 );
 

package/styles/variables/sizes/_common.scss

@@ -1,3 +1,4 @@
 @import './../../functions';
 
-$outline: 0 0 0 px-to-rem(4);
+$outline-width: px-to-rem(4);
+$outline: 0 0 0 $outline-width;

package/text/collapsible-section/collapsible-section.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    /** The text to show when the section is collapsed */
+    label?: string | false;
+    /** Additional classes to add to the `details` */
+    className?: string;
+    /** The content to show when the section is expanded */
+    children?: React.ReactNode;
+    /** The language to use for the text */
+    locale?: string;
+}
+declare const CollapsibleSectionWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CollapsibleSectionWrapper;

package/text/collapsible-section/index.d.ts

@@ -0,0 +1 @@
+export { default as CollapsibleSection } from './collapsible-section';

package/text/empty-state-box/empty-state-box.d.ts

@@ -0,0 +1,21 @@
+import { ButtonVariantType } from '../../general';
+interface Props {
+    /** Box styling */
+    variant?: 'empty' | 'error';
+    /** Optional text */
+    text?: false | string;
+    /** Optional button. The button can also show depending on the viewport size */
+    button?: false | {
+        url: string;
+        text: string;
+        variant?: ButtonVariantType;
+        gtmContext: string;
+        breakpoints?: {
+            [key: string]: boolean;
+        };
+    };
+    /** Additional classes */
+    className?: string;
+}
+declare const EmptyStateBox: ({ variant, text, button, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export default EmptyStateBox;

package/text/empty-state-box/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyStateBox } from './empty-state-box';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export type HelperTextBoxTypes = 'default' | 'warning' | 'error' | 'success';
+interface Props {
+    /** The style of box being rendered */
+    type?: HelperTextBoxTypes;
+    /** Additional classes to add to the box */
+    className?: string;
+    /** The heading to display at the top of the box */
+    heading?: string | false;
+    /** The content to display in the box */
+    children: React.ReactNode;
+}
+declare const HelperTextBox: ({ type, className, heading, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export default HelperTextBox;

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

@@ -0,0 +1 @@
+export { default as HelperTextBox } from './helper-text-box';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Props {
+    /** The language for the box text */
+    locale?: string;
+    /** Additional classes to add to the box */
+    className?: string;
+    /** The text to show when the section is collapsed */
+    show?: string | false;
+    /** The text to show when the section is expanded */
+    hide?: string | false;
+    /** The content to show when the section is expanded */
+    text: string;
+    children?: React.ReactNode;
+}
+declare const HideShowTextBoxWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default HideShowTextBoxWrapper;

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

@@ -0,0 +1,4 @@
+export default data;
+declare namespace data {
+    let children: import("react/jsx-runtime").JSX.Element;
+}

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

@@ -0,0 +1 @@
+export { default as HideShowTextBox } from './hide-show-text-box';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    /** The style of box being rendered */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'bold';
+    /** Additional classes to add to the box */
+    className?: string;
+    /** The content to display */
+    children: React.ReactNode;
+    /** Additional props to pass to the box */
+    style?: React.CSSProperties;
+}
+declare const HighlightedTextBoxWrapper: ({ variant, className, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default HighlightedTextBoxWrapper;

package/text/highlighted-text-box/index.d.ts

@@ -0,0 +1 @@
+export { default as HighlightedTextBox } from './highlighted-text-box';

package/text/index.d.ts

@@ -0,0 +1,6 @@
+export * from './collapsible-section';
+export * from './empty-state-box';
+export * from './helper-text-box';
+export * from './hide-show-text-box';
+export * from './highlighted-text-box';
+export * from './pill';

package/text/pill/index.d.ts

@@ -0,0 +1 @@
+export { default as Pill } from './pill';

package/text/pill/pill.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    /** Additional classes to add to the pill */
+    className?: 'margin-left' | 'margin-right' | '';
+    /** The pill text */
+    children: React.ReactNode;
+}
+declare const Pill: ({ className, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Pill;

package/user/index.d.ts

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

package/user/profile-picture/index.d.ts

@@ -0,0 +1 @@
+export { default as ProfilePicture } from './profile-picture';

package/user/profile-picture/profile-picture.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** The user's name, to create initials */
+    name: string;
+    /** The user's image */
+    src?: string;
+    /** Alternative text for the image */
+    alt?: string | undefined;
+    /** Additional classes */
+    className?: string;
+}
+declare const ProfilePicture: ({ className, src, name, alt, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ProfilePicture;

package/user/profile-picture/profile-picture.helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const getInitials: (name: string) => string;
+export declare const colors: string[];
+export declare const getBackground: (name: string) => string | undefined;

package/demo/demo.d.ts

@@ -1,4 +0,0 @@
-export interface ComponentLibraryProps {
-}
-export declare function Demo(props: ComponentLibraryProps): import("react/jsx-runtime").JSX.Element;
-export default Demo;

package/demo/index.d.ts

@@ -1 +0,0 @@
-export { default as Demo } from './demo';

package/styles/base-styles/_accessibility.scss

@@ -1,31 +0,0 @@
-@use 'sass:map';
-@import './../functions',
-        './../mixins',
-        './../variables';
-
-@layer base {
-  #root {
-
-    /* stylelint-disable no-descending-specificity */
-    a, button, input, textarea, [role="menu"], li[tabindex] {
-      &:focus, &:focus-visible {
-        outline: none;
-        box-shadow: $outline map.get($theme, 'default_focus');
-      }
-      &:active { box-shadow: none; }
-    }
-
-    [role="menu"], [role="menu"] a, li[tabindex] {
-      &:focus, &:focus-visible { box-shadow: $outline map.get($theme, 'default_focus') inset; }
-    }
-    /* stylelint-enable no-descending-specificity */
-
-    .hidden {
-      width: 0;
-      height: 0;
-      display: block;
-      overflow: hidden;
-    }
-  }
-}
-

package/styles/base-styles/_blockquotes.scss

@@ -1,31 +0,0 @@
-@use 'sass:map';
-@import './../functions',
-        './../mixins',
-        './../variables';
-
-$blockquote: ('margin-top': 20, 'margin-top_md': 30, 'margin-bottom': 10, 'margin-bottom_md': 20, 'padding-vertical': 4, 'padding-left': 24, 'font-size': 18, 'font-size_md': 20, 'line-height': 28, 'border-width': 6);
-
-@layer base {
-  #root {
-    blockquote {
-      margin: px-to-rem(map.get($blockquote, 'margin-top')) 0 px-to-rem(map.get($blockquote, 'margin-bottom')) 0;
-      padding: px-to-rem(map.get($blockquote, 'padding-vertical')) 0 0 px-to-rem(map.get($blockquote, 'padding-left'));
-      font-size: px-to-rem(map.get($blockquote, 'font-size'));
-      color: map.get($theme, 'blockquote');
-      font-weight: 700;
-      font-style: italic;
-      line-height: px-to-rem(map.get($blockquote, 'line-height'));
-      border-left: px-to-rem(map.get($blockquote, 'border-width')) solid map.get($theme, 'blockquote_border');
-
-        p:last-of-type {
-          margin-bottom: 0;
-        }
-
-        @include breakpoint('min-width', 'md') {
-          margin-top: px-to-rem(map.get($blockquote, 'margin-top_md'));
-          margin-bottom: px-to-rem(map.get($blockquote, 'margin-bottom_md'));
-          font-size: px-to-rem(map.get($blockquote, 'font-size_md'));
-        }
-    }
-  }
-}

package/styles/base-styles/_hr.scss

@@ -1,17 +0,0 @@
-@use 'sass:map';
-@import './../functions',
-        './../variables';
-
-$hr: ('height': 1, 'margin-vertical': 40);
-
-@layer base {
-  #root {
-    hr {
-      width: 100%;
-      height: px-to-rem(map.get($hr, 'height'));
-      background: map.get($theme, 'divider');
-      margin: px-to-rem(map.get($hr, 'margin-vertical')) auto;
-      border: none;
-    }
-  }
-}

package/styles/base-styles/_links.scss

@@ -1,18 +0,0 @@
-@use 'sass:map';
-@import './../variables';
-
-@layer base {
-  #root {
-    a {
-        color: map.get($theme, 'link');
-        text-decoration: underline;
-        font-weight: 900;
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: map.get($theme, 'link_hover');
-        }
-    }
-  }
-}

package/styles/base-styles/_lists.scss

@@ -1,30 +0,0 @@
-@use 'sass:map';
-@import './../functions',
-        './../mixins';
-
-$ul: ('margin-bottom': 16, 'padding-left': 40);
-$li: ('margin-bottom': 18, 'margin-bottom_sm': 12, 'margin-bottom_md': 16);
-
-@layer base {
-  #root {
-    ol, ul {
-      margin: 0 0 px-to-rem(map.get($ul, 'margin-bottom')) 0;
-      padding-left: px-to-rem(map.get($ul, 'padding-left'));
-      display: block;
-    }
-
-    li {
-      margin-bottom: px-to-rem(map.get($li, 'margin-bottom'));
-
-        @include selector-after-root('.text-small') { margin-bottom: px-to-rem(map.get($li, 'margin-bottom_sm')); }
-
-        @include selector-after-root('.text-medium') { margin-bottom: px-to-rem(map.get($li, 'margin-bottom_md')); }
-
-        &:last-child {
-          margin-bottom: 0;
-
-            p:last-child { margin-bottom: 0; }
-        }
-    }
-  }
-}

package/styles/base-styles/_text.scss

@@ -1,83 +0,0 @@
-@use 'sass:map';
-@import './../functions',
-        './../mixins',
-        './../variables';
-
-$default: ('font-size': 16, 'font-size_md': 18, 'line-height': 24, 'line-height_md': 28, 'margin-bottom': 20); // The default size is the 'large paragraph' in Figma
-$small: ('font-size': 12, 'font-size_md': 14, 'letter-spacing': 0.16, 'line-height': 16, 'margin-bottom': 16);
-$medium: ('font-size': 14, 'font-size_md': 16, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 18);
-$sup: ('font-size': 10);
-
-@layer base {
-  #root {
-    p, li, small {
-      color: map.get($theme, 'text');
-      font-weight: 500;
-    }
-
-    p, li {
-      font-size: px-to-rem(map.get($default, 'font-size'));
-      line-height: px-to-rem(map.get($default, 'line-height'));
-
-        @include selector-after-root('.text-small') {
-          font-size: px-to-rem(map.get($small, 'font-size'));
-          line-height: px-to-rem(map.get($small, 'line-height'));
-          letter-spacing: px-to-rem(map.get($small, 'letter-spacing'));
-        }
-
-        @include selector-after-root('.text-medium') {
-          font-size: px-to-rem(map.get($medium, 'font-size'));
-          line-height: px-to-rem(map.get($medium, 'line-height'));
-        }
-      
-        @include breakpoint('min-width', 'md') {
-          font-size: px-to-rem(map.get($default, 'font-size_md'));
-          line-height: px-to-rem(map.get($default, 'line-height_md'));
-
-            @include selector-after-root('.text-small') {
-              font-size: px-to-rem(map.get($small, 'font-size_md'));
-            }
-
-            @include selector-after-root('.text-medium') {
-              font-size: px-to-rem(map.get($medium, 'font-size_md'));
-              line-height: px-to-rem(map.get($medium, 'line-height_md'));
-            }
-        }
-    }
-
-    p {
-      margin-bottom: px-to-rem(map.get($default, 'margin-bottom'));
-
-        @include selector-after-root('.text-small') { margin-bottom: px-to-rem(map.get($small, 'margin-bottom')); }
-
-        @include selector-after-root('.text-medium') { margin-bottom: px-to-rem(map.get($medium, 'margin-bottom')); }
-    }
-
-    small {
-      font-size: px-to-rem(map.get($small, 'font-size'));
-      line-height: px-to-rem(map.get($small, 'line-height'));
-
-        @include breakpoint('min-width', 'md') {
-          font-size: px-to-rem(map.get($small, 'font-size_md'));
-        }
-    }
-
-    strong { font-weight: 900; }
-    em, i { font-style: italic; }
-
-    sup, sub {
-      font-size: px-to-rem(map.get($sup, 'font-size'));
-      line-height: normal;
-    }
-
-    sup {
-      vertical-align: super;
-    }
-
-    sub {
-      vertical-align: sub;
-    }
-
-  }
-
-}