@apolitical/component-library 9.0.0-pla.2 → 9.0.0

package/styles/base/_accessibility.scss

@@ -1,46 +1,48 @@
 @import './../functions', './../mixins', './../variables';
 
 @layer base {
-  a,
-  button,
-  label,
-  input,
-  textarea,
-  [role='menu'],
-  li[tabindex] {
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: $outline get-map($theme, 'default_focus');
-    }
+  .v1styles {
+    a,
+    button,
+    label,
+    input,
+    textarea,
+    [role='menu'],
+    li[tabindex] {
+      &:focus,
+      &:focus-visible {
+        outline: none;
+        box-shadow: $outline get-map($theme, 'default_focus');
+      }
 
-    &:active {
-      box-shadow: none;
+      &:active {
+        box-shadow: none;
+      }
     }
-  }
 
-  [role='menu'],
-  [role='menu'] a,
-  li[tabindex] {
-    &:focus,
-    &:focus-visible {
-      box-shadow: $outline get-map($theme, 'default_focus') inset;
+    [role='menu'],
+    [role='menu'] a,
+    li[tabindex] {
+      &:focus,
+      &:focus-visible {
+        box-shadow: $outline get-map($theme, 'default_focus') inset;
+      }
     }
-  }
 
-  .hidden {
-    @include hidden-element;
+    .hidden {
+      @include hidden-element;
 
-    @include amend-selector-path('.hidden', 'button.hidden, .button.hidden') {
-      &.tertiary:not(.new) {
-        padding: 0;
+      @include amend-selector-path('.hidden', 'button.hidden, .button.hidden') {
+        &.tertiary:not(.new) {
+          padding: 0;
+        }
       }
-    }
 
-    &.show-on-focus {
-      &:focus,
-      &:focus-within {
-        @include show-hidden-element;
+      &.show-on-focus {
+        &:focus,
+        &:focus-within {
+          @include show-hidden-element;
+        }
       }
     }
   }

package/styles/base/_blockquotes.scss

@@ -19,63 +19,65 @@ $blockquote: (
 );
 
 @layer base {
-  blockquote {
-    margin: px-to-rem(get-map($blockquote, 'margin-top')) 0
-      px-to-rem(get-map($blockquote, 'margin-bottom'));
-    padding: px-to-rem(get-map($blockquote, 'padding-vertical')) 0 0
-      px-to-rem(get-map($blockquote, 'padding-left'));
-    font-size: px-to-rem(get-map($blockquote, 'font-size'));
-    color: get-map($theme, 'blockquote');
-    font-weight: 700;
-    font-style: italic;
-    line-height: px-to-rem(get-map($blockquote, 'line-height'));
-    border-left: px-to-rem(get-map($blockquote, 'border-width')) solid
-      get-map($theme, 'blockquote_border');
+  .v1styles {
+    blockquote {
+      margin: px-to-rem(get-map($blockquote, 'margin-top')) 0
+        px-to-rem(get-map($blockquote, 'margin-bottom'));
+      padding: px-to-rem(get-map($blockquote, 'padding-vertical')) 0 0
+        px-to-rem(get-map($blockquote, 'padding-left'));
+      font-size: px-to-rem(get-map($blockquote, 'font-size'));
+      color: get-map($theme, 'blockquote');
+      font-weight: 700;
+      font-style: italic;
+      line-height: px-to-rem(get-map($blockquote, 'line-height'));
+      border-left: px-to-rem(get-map($blockquote, 'border-width')) solid
+        get-map($theme, 'blockquote_border');
 
-    &.subtle {
-      font-size: px-to-rem(get-map($blockquote, 'subtle', 'font-size'));
-      font-weight: normal;
-      font-style: normal;
-      border-left-width: px-to-rem(get-map($blockquote, 'subtle', 'border-width'));
-      border-left-color: get-map($theme, 'blockquote_subtle_border');
+      &.subtle {
+        font-size: px-to-rem(get-map($blockquote, 'subtle', 'font-size'));
+        font-weight: normal;
+        font-style: normal;
+        border-left-width: px-to-rem(get-map($blockquote, 'subtle', 'border-width'));
+        border-left-color: get-map($theme, 'blockquote_subtle_border');
 
-      strong {
-        font-weight: 900;
+        strong {
+          font-weight: 900;
+        }
       }
-    }
 
-    // When there are multiple blockquotes in a row (e.g. in a rich text editor), remove the margin
-    // to make it seem like they're part of the same blockquote
-    &:has(+ blockquote) {
-      margin-bottom: 0;
-    }
+      // When there are multiple blockquotes in a row (e.g. in a rich text editor), remove the margin
+      // to make it seem like they're part of the same blockquote
+      &:has(+ blockquote) {
+        margin-bottom: 0;
+      }
 
-    & + blockquote {
-      margin-top: 0;
-    }
+      & + blockquote {
+        margin-top: 0;
+      }
 
-    p,
-    span,
-    strong,
-    em,
-    div,
-    li,
-    dt,
-    dd {
-      font-weight: inherit;
-    }
+      p,
+      span,
+      strong,
+      em,
+      div,
+      li,
+      dt,
+      dd {
+        font-weight: inherit;
+      }
 
-    p:last-of-type {
-      margin-bottom: 0;
-    }
+      p:last-of-type {
+        margin-bottom: 0;
+      }
 
-    @include breakpoint('min-width', 'md') {
-      margin-top: px-to-rem(get-map($blockquote, 'margin-top_md'));
-      margin-bottom: px-to-rem(get-map($blockquote, 'margin-bottom_md'));
-      font-size: px-to-rem(get-map($blockquote, 'font-size_md'));
+      @include breakpoint('min-width', 'md') {
+        margin-top: px-to-rem(get-map($blockquote, 'margin-top_md'));
+        margin-bottom: px-to-rem(get-map($blockquote, 'margin-bottom_md'));
+        font-size: px-to-rem(get-map($blockquote, 'font-size_md'));
 
-      &.subtle {
-        font-size: px-to-rem(get-map($blockquote, 'subtle', 'font-size_md'));
+        &.subtle {
+          font-size: px-to-rem(get-map($blockquote, 'subtle', 'font-size_md'));
+        }
       }
     }
   }

package/styles/base/_fonts.scss

@@ -34,12 +34,14 @@ $font-family: (400, normal), (400, italic), (600, normal), (600, italic), (900,
     @include font-styling($weight, $style);
   }
 
-  body,
-  button,
-  input,
-  textarea {
-    font-family:
-      #{$font-name},
-      sans-serif;
+  .v1styles {
+    &,
+    button,
+    input,
+    textarea {
+      font-family:
+        #{$font-name},
+        sans-serif;
+    }
   }
 }

package/styles/base/_hr.scss

@@ -6,12 +6,14 @@ $hr: (
 );
 
 @layer base {
-  hr {
-    width: 100%;
-    height: px-to-rem(get-map($hr, 'height'));
-    background: get-map($theme, 'divider');
-    margin: px-to-rem(get-map($hr, 'margin-vertical')) auto;
-    border: none;
-    display: block;
+  .v1styles {
+    hr {
+      width: 100%;
+      height: px-to-rem(get-map($hr, 'height'));
+      background: get-map($theme, 'divider');
+      margin: px-to-rem(get-map($hr, 'margin-vertical')) auto;
+      border: none;
+      display: block;
+    }
   }
 }

package/styles/base/_layout.scss

@@ -1,32 +1,34 @@
 @import './../functions', './../variables';
 
 @layer base {
-  [hidden] {
-    display: none;
-  }
+  .v1styles {
+    [hidden] {
+      display: none;
+    }
 
-  .center {
-    text-align: center;
-    margin-right: auto;
-    margin-left: auto;
-  }
+    .center {
+      text-align: center;
+      margin-right: auto;
+      margin-left: auto;
+    }
 
-  .content-default,
-  .content-slim,
-  .content-slimmest {
-    margin-left: auto;
-    margin-right: auto;
-  }
+    .content-default,
+    .content-slim,
+    .content-slimmest {
+      margin-left: auto;
+      margin-right: auto;
+    }
 
-  .content-default {
-    max-width: px-to-rem($content-default-width);
-  }
+    .content-default {
+      max-width: px-to-rem($content-default-width);
+    }
 
-  .content-slim {
-    max-width: px-to-rem($content-slim-width);
-  }
+    .content-slim {
+      max-width: px-to-rem($content-slim-width);
+    }
 
-  .content-slimmest {
-    max-width: px-to-rem($content-slimmest-width);
+    .content-slimmest {
+      max-width: px-to-rem($content-slimmest-width);
+    }
   }
 }

package/styles/base/_links.scss

@@ -1,26 +1,30 @@
 @import './../mixins', './../variables';
 
 @layer base {
-  a,
-  .url {
-    color: get-map($theme, 'link');
-    text-decoration: underline;
-    font-weight: 900;
-  }
+  .v1styles {
+    a,
+    .url {
+      color: get-map($theme, 'link');
+      text-decoration: underline;
+      font-weight: 900;
+    }
 
-  a {
-    @include transition(color text-decoration-color);
+    a {
+      @include transition(color text-decoration-color);
 
-    &:hover,
-    &:focus,
-    &:active {
-      color: get-map($theme, 'link_hover');
+      &:hover,
+      &:focus,
+      &:active {
+        color: get-map($theme, 'link_hover');
+      }
     }
   }
 }
 
 @layer overrides {
-  .url {
-    font-weight: 900;
+  .v1styles {
+    .url {
+      font-weight: 900;
+    }
   }
 }

package/styles/base/_lists.scss

@@ -16,57 +16,59 @@ $li: (
 );
 
 @layer base {
-  ol,
-  ul {
-    margin: 0 0 px-to-rem(get-map($ul, 'margin-bottom'));
-    padding-left: px-to-rem(get-map($ul, 'padding-left'));
-    display: block;
+  .v1styles {
+    ol,
+    ul {
+      margin: 0 0 px-to-rem(get-map($ul, 'margin-bottom'));
+      padding-left: px-to-rem(get-map($ul, 'padding-left'));
+      display: block;
 
-    &.unstyled {
-      list-style: none;
-      padding-left: 0;
+      &.unstyled {
+        list-style: none;
+        padding-left: 0;
+      }
     }
-  }
 
-  ul.checkmarks {
-    list-style: none;
+    ul.checkmarks {
+      list-style: none;
 
-    li {
-      position: relative;
-      padding-left: px-to-rem(
-        get-map($checkmarks, 'width') + get-map($checkmarks, 'margin-right')
-      );
+      li {
+        position: relative;
+        padding-left: px-to-rem(
+          get-map($checkmarks, 'width') + get-map($checkmarks, 'margin-right')
+        );
 
-      &::before {
-        @include image('icons/check-inside-circle.svg', true);
+        &::before {
+          @include image('icons/check-inside-circle.svg', true);
 
-        content: '';
-        width: px-to-rem(get-map($checkmarks, 'width'));
-        height: px-to-rem(get-map($checkmarks, 'width'));
-        background: get-map($theme, 'list_checkmarks_bg');
-        position: absolute;
-        top: px-to-rem(get-map($checkmarks, 'top'));
-        left: 0;
+          content: '';
+          width: px-to-rem(get-map($checkmarks, 'width'));
+          height: px-to-rem(get-map($checkmarks, 'width'));
+          background: get-map($theme, 'list_checkmarks_bg');
+          position: absolute;
+          top: px-to-rem(get-map($checkmarks, 'top'));
+          left: 0;
+        }
       }
     }
-  }
-
-  li {
-    margin-bottom: px-to-rem(get-map($li, 'margin-bottom'));
 
-    .text-small & {
-      margin-bottom: px-to-rem(get-map($li, 'margin-bottom_sm'));
-    }
+    li {
+      margin-bottom: px-to-rem(get-map($li, 'margin-bottom'));
 
-    .text-medium & {
-      margin-bottom: px-to-rem(get-map($li, 'margin-bottom_md'));
-    }
+      .text-small & {
+        margin-bottom: px-to-rem(get-map($li, 'margin-bottom_sm'));
+      }
 
-    &:last-child {
-      margin-bottom: 0;
+      .text-medium & {
+        margin-bottom: px-to-rem(get-map($li, 'margin-bottom_md'));
+      }
 
-      p:last-child {
+      &:last-child {
         margin-bottom: 0;
+
+        p:last-child {
+          margin-bottom: 0;
+        }
       }
     }
   }

package/styles/base/_mentions.scss

@@ -7,15 +7,17 @@ $deleted-user: (
 );
 
 @layer base {
-  .mention {
-    &.deleted-user {
-      background: get-map($theme, 'mention_deleted-user_bg');
-      padding: px-to-rem(get-map($deleted-user, 'padding-vertical'))
-        px-to-rem(get-map($deleted-user, 'padding-horizontal'));
-      color: get-map($theme, 'mention_deleted-user');
-      font-weight: 500;
-      font-style: italic;
-      border-radius: px-to-rem(get-map($deleted-user, 'border-radius'));
+  .v1styles {
+    .mention {
+      &.deleted-user {
+        background: get-map($theme, 'mention_deleted-user_bg');
+        padding: px-to-rem(get-map($deleted-user, 'padding-vertical'))
+          px-to-rem(get-map($deleted-user, 'padding-horizontal'));
+        color: get-map($theme, 'mention_deleted-user');
+        font-weight: 500;
+        font-style: italic;
+        border-radius: px-to-rem(get-map($deleted-user, 'border-radius'));
+      }
     }
   }
 }

package/styles/base/_overlays.scss

@@ -5,65 +5,67 @@ $overlay: (
 );
 
 @layer base {
-  body.has-overlay {
-    overflow: hidden;
-  }
+  .v1styles {
+    &.has-overlay {
+      overflow: hidden;
+    }
 
-  .overlay {
-    @include transition(opacity, 0.1s, ease);
+    .overlay {
+      @include transition(opacity, 0.1s, ease);
 
-    width: 0;
-    height: 0;
-    background: get-map($theme, 'overlay');
-    position: fixed;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: -1;
-    box-sizing: border-box;
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    overflow: hidden;
+      width: 0;
+      height: 0;
+      background: get-map($theme, 'overlay');
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      z-index: -1;
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: column;
+      align-items: center;
+      overflow: hidden;
 
-    &.open {
-      width: 100vw;
-      height: 100vh;
-      height: 100svh;
-      opacity: 1;
-      z-index: 996;
+      &.open {
+        width: 100vw;
+        height: 100vh;
+        height: 100svh;
+        opacity: 1;
+        z-index: 996;
 
-      .overlay-close {
-        display: block;
-      }
+        .overlay-close {
+          display: block;
+        }
 
-      &.in-portal {
-        z-index: 1000;
+        &.in-portal {
+          z-index: 1000;
+        }
       }
-    }
 
-    > div,
-    > section {
-      width: 100vw;
-      height: 100vh;
-      margin-top: auto;
-      margin-bottom: auto;
-      overflow: hidden auto;
+      > div,
+      > section {
+        width: 100vw;
+        height: 100vh;
+        margin-top: auto;
+        margin-bottom: auto;
+        overflow: hidden auto;
+      }
     }
-  }
 
-  @include breakpoint('min-width', 'sm') {
-    .overlay {
-      &.open {
-        padding: px-to-rem(get-map($overlay, 'padding'));
-        overflow-y: auto;
-      }
+    @include breakpoint('min-width', 'sm') {
+      .overlay {
+        &.open {
+          padding: px-to-rem(get-map($overlay, 'padding'));
+          overflow-y: auto;
+        }
 
-      > div,
-      > section {
-        width: auto;
-        height: auto;
-        overflow: unset;
+        > div,
+        > section {
+          width: auto;
+          height: auto;
+          overflow: unset;
+        }
       }
     }
   }

package/styles/base/_svg.scss

@@ -1,7 +1,9 @@
 @import './../mixins', './../variables';
 
 @layer base {
-  svg {
-    color: get-map($default-colors, 'n700');
+  .v1styles {
+    svg {
+      color: get-map($default-colors, 'n700');
+    }
   }
 }