@apolitical/component-library 9.0.0-pla.3 → 9.0.1

package/styles/base/_table.scss

@@ -10,77 +10,79 @@ $table: (
 );
 
 @layer base {
-  table {
-    width: 100%;
-    margin: px-to-rem(get-map($table, 'margin-top')) auto
-      px-to-rem(get-map($table, 'margin-bottom'));
-    border-collapse: separate;
-    border-spacing: 0;
-    display: table;
-    overflow-x: auto;
+  .v1styles {
+    table {
+      width: 100%;
+      margin: px-to-rem(get-map($table, 'margin-top')) auto
+        px-to-rem(get-map($table, 'margin-bottom'));
+      border-collapse: separate;
+      border-spacing: 0;
+      display: table;
+      overflow-x: auto;
 
-    &,
-    p,
-    li {
-      text-align: left;
+      &,
+      p,
+      li {
+        text-align: left;
+      }
     }
-  }
-
-  th,
-  td {
-    border: px-to-rem(get-map($table, 'border')) solid get-map($theme, 'table_border');
-    vertical-align: top;
-  }
-
-  th,
-  tbody:first-child tr:first-child td {
-    background: get-map($theme, 'table_th_bg');
-    padding: px-to-rem(get-map($table, 'padding-horizontal'));
-    color: get-map($theme, 'table_th');
-    font-weight: 600;
-    border-right-width: 0;
 
-    /* Add border radius to the corners of the table, not each cell */
-    &:first-child {
-      border-top-left-radius: px-to-rem(get-map($table, 'border-radius'));
+    th,
+    td {
+      border: px-to-rem(get-map($table, 'border')) solid get-map($theme, 'table_border');
+      vertical-align: top;
     }
 
-    &:last-child {
-      border-top-right-radius: px-to-rem(get-map($table, 'border-radius'));
-      border-right-width: px-to-rem(get-map($table, 'border'));
-    }
-  }
+    th,
+    tbody:first-child tr:first-child td {
+      background: get-map($theme, 'table_th_bg');
+      padding: px-to-rem(get-map($table, 'padding-horizontal'));
+      color: get-map($theme, 'table_th');
+      font-weight: 600;
+      border-right-width: 0;
 
-  td {
-    padding: px-to-rem(get-map($table, 'padding-vertical'))
-      px-to-rem(get-map($table, 'padding-horizontal'));
-    border-top-width: 0;
-    border-right-width: 0;
+      /* Add border radius to the corners of the table, not each cell */
+      &:first-child {
+        border-top-left-radius: px-to-rem(get-map($table, 'border-radius'));
+      }
 
-    /* Prevent borders with double width due to using border-collapse separate */
-    &:last-child {
-      border-right-width: px-to-rem(get-map($table, 'border'));
+      &:last-child {
+        border-top-right-radius: px-to-rem(get-map($table, 'border-radius'));
+        border-right-width: px-to-rem(get-map($table, 'border'));
+      }
     }
-  }
 
-  tr:last-child {
     td {
-      &:first-child {
-        border-bottom-left-radius: px-to-rem(get-map($table, 'border-radius'));
-      }
+      padding: px-to-rem(get-map($table, 'padding-vertical'))
+        px-to-rem(get-map($table, 'padding-horizontal'));
+      border-top-width: 0;
+      border-right-width: 0;
 
+      /* Prevent borders with double width due to using border-collapse separate */
       &:last-child {
-        border-bottom-right-radius: px-to-rem(get-map($table, 'border-radius'));
+        border-right-width: px-to-rem(get-map($table, 'border'));
       }
     }
-  }
 
-  // Remove the styling if there's only one row as some old articles use tables
-  // to display buttons inline
-  tr:first-child:last-child {
-    td {
-      background: none;
-      border: none;
+    tr:last-child {
+      td {
+        &:first-child {
+          border-bottom-left-radius: px-to-rem(get-map($table, 'border-radius'));
+        }
+
+        &:last-child {
+          border-bottom-right-radius: px-to-rem(get-map($table, 'border-radius'));
+        }
+      }
+    }
+
+    // Remove the styling if there's only one row as some old articles use tables
+    // to display buttons inline
+    tr:first-child:last-child {
+      td {
+        background: none;
+        border: none;
+      }
     }
   }
 }

package/styles/base/_text.scss

@@ -28,148 +28,150 @@ $standard-text-elements: p, li, dt, dd, summary;
 $special-text-elements: h1, h2, h3, h4, h5, h6, a, small, span, label, legend;
 
 @layer base {
-  p,
-  li,
-  small {
-    color: get-map($theme, 'text');
-    font-weight: 500;
-
-    .error &,
-    &.error {
-      color: get-map($theme, 'text_error');
+  .v1styles {
+    p,
+    li,
+    small {
+      color: get-map($theme, 'text');
+      font-weight: 500;
+
+      .error &,
+      &.error {
+        color: get-map($theme, 'text_error');
+      }
     }
-  }
 
-  #{$standard-text-elements} {
-    font-size: px-to-rem(get-map($default, 'font-size'));
-    line-height: px-to-rem(get-map($default, 'line-height'));
+    #{$standard-text-elements} {
+      font-size: px-to-rem(get-map($default, 'font-size'));
+      line-height: px-to-rem(get-map($default, 'line-height'));
 
-    // These have been split out to allow us to overwrite with a direct class on the element.
-    .text-small & {
-      font-size: px-to-rem(get-map($small, 'font-size'));
-      line-height: px-to-rem(get-map($small, 'line-height'));
-      letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
-    }
+      // These have been split out to allow us to overwrite with a direct class on the element.
+      .text-small & {
+        font-size: px-to-rem(get-map($small, 'font-size'));
+        line-height: px-to-rem(get-map($small, 'line-height'));
+        letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
+      }
 
-    .text-medium & {
-      font-size: px-to-rem(get-map($medium, 'font-size'));
-      line-height: px-to-rem(get-map($medium, 'line-height'));
-    }
+      .text-medium & {
+        font-size: px-to-rem(get-map($medium, 'font-size'));
+        line-height: px-to-rem(get-map($medium, 'line-height'));
+      }
 
-    &.text-small {
-      font-size: px-to-rem(get-map($small, 'font-size'));
-      line-height: px-to-rem(get-map($small, 'line-height'));
-      letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
-    }
+      &.text-small {
+        font-size: px-to-rem(get-map($small, 'font-size'));
+        line-height: px-to-rem(get-map($small, 'line-height'));
+        letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
+      }
 
-    &.text-medium {
-      font-size: px-to-rem(get-map($medium, 'font-size'));
-      line-height: px-to-rem(get-map($medium, 'line-height'));
+      &.text-medium {
+        font-size: px-to-rem(get-map($medium, 'font-size'));
+        line-height: px-to-rem(get-map($medium, 'line-height'));
+      }
     }
-  }
 
-  p {
-    margin-bottom: px-to-rem(get-map($default, 'margin-bottom'));
+    p {
+      margin-bottom: px-to-rem(get-map($default, 'margin-bottom'));
 
-    // These have been split out to allow us to overwrite with a direct class on the element.
-    .text-small & {
-      margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
-    }
+      // These have been split out to allow us to overwrite with a direct class on the element.
+      .text-small & {
+        margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
+      }
 
-    .text-medium & {
-      margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
-    }
+      .text-medium & {
+        margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
+      }
 
-    &.text-small {
-      margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
-    }
+      &.text-small {
+        margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
+      }
 
-    &.text-medium {
-      margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
+      &.text-medium {
+        margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
+      }
     }
-  }
 
-  small {
-    font-size: px-to-rem(get-map($small, 'font-size'));
-    line-height: px-to-rem(get-map($small, 'line-height'));
+    small {
+      font-size: px-to-rem(get-map($small, 'font-size'));
+      line-height: px-to-rem(get-map($small, 'line-height'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(get-map($small, 'font-size_md'));
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(get-map($small, 'font-size_md'));
+      }
     }
-  }
-
-  strong {
-    font-weight: 900;
-  }
-
-  em,
-  i {
-    font-style: italic;
-  }
-
-  sup,
-  sub {
-    font-size: px-to-rem(get-map($sup, 'font-size'));
-    line-height: normal;
-  }
 
-  sup {
-    vertical-align: super;
-  }
-
-  sub {
-    vertical-align: sub;
-  }
-
-  address {
-    font-style: normal;
-  }
+    strong {
+      font-weight: 900;
+    }
 
-  #{$special-text-elements} {
-    &.text-small {
-      font-size: px-to-rem(get-map($small, 'font-size'));
-      line-height: px-to-rem(get-map($small, 'line-height'));
+    em,
+    i {
+      font-style: italic;
     }
 
-    &.text-medium {
-      font-size: px-to-rem(get-map($medium, 'font-size'));
-      line-height: px-to-rem(get-map($medium, 'line-height'));
+    sup,
+    sub {
+      font-size: px-to-rem(get-map($sup, 'font-size'));
+      line-height: normal;
     }
-  }
 
-  @include breakpoint('min-width', 'md') {
-    #{$standard-text-elements} {
-      font-size: px-to-rem(get-map($default, 'font-size_md'));
-      line-height: px-to-rem(get-map($default, 'line-height_md'));
+    sup {
+      vertical-align: super;
+    }
 
-      // These have been split out to allow us to overwrite with a direct class on the element.
-      .text-small & {
-        font-size: px-to-rem(get-map($small, 'font-size_md'));
-      }
+    sub {
+      vertical-align: sub;
+    }
 
-      .text-medium & {
-        font-size: px-to-rem(get-map($medium, 'font-size_md'));
-        line-height: px-to-rem(get-map($medium, 'line-height_md'));
-      }
+    address {
+      font-style: normal;
+    }
 
+    #{$special-text-elements} {
       &.text-small {
-        font-size: px-to-rem(get-map($small, 'font-size_md'));
+        font-size: px-to-rem(get-map($small, 'font-size'));
+        line-height: px-to-rem(get-map($small, 'line-height'));
       }
 
       &.text-medium {
-        font-size: px-to-rem(get-map($medium, 'font-size_md'));
-        line-height: px-to-rem(get-map($medium, 'line-height_md'));
+        font-size: px-to-rem(get-map($medium, 'font-size'));
+        line-height: px-to-rem(get-map($medium, 'line-height'));
       }
     }
 
-    #{$special-text-elements} {
-      &.text-small {
-        font-size: px-to-rem(get-map($small, 'font-size_md'));
+    @include breakpoint('min-width', 'md') {
+      #{$standard-text-elements} {
+        font-size: px-to-rem(get-map($default, 'font-size_md'));
+        line-height: px-to-rem(get-map($default, 'line-height_md'));
+
+        // These have been split out to allow us to overwrite with a direct class on the element.
+        .text-small & {
+          font-size: px-to-rem(get-map($small, 'font-size_md'));
+        }
+
+        .text-medium & {
+          font-size: px-to-rem(get-map($medium, 'font-size_md'));
+          line-height: px-to-rem(get-map($medium, 'line-height_md'));
+        }
+
+        &.text-small {
+          font-size: px-to-rem(get-map($small, 'font-size_md'));
+        }
+
+        &.text-medium {
+          font-size: px-to-rem(get-map($medium, 'font-size_md'));
+          line-height: px-to-rem(get-map($medium, 'line-height_md'));
+        }
       }
 
-      &.text-medium {
-        font-size: px-to-rem(get-map($medium, 'font-size_md'));
-        line-height: px-to-rem(get-map($medium, 'line-height_md'));
+      #{$special-text-elements} {
+        &.text-small {
+          font-size: px-to-rem(get-map($small, 'font-size_md'));
+        }
+
+        &.text-medium {
+          font-size: px-to-rem(get-map($medium, 'font-size_md'));
+          line-height: px-to-rem(get-map($medium, 'line-height_md'));
+        }
       }
     }
   }

package/styles/base/_titles.scss

@@ -275,58 +275,72 @@ $count-icon: (
 }
 
 @layer base {
-  .highlighted-title {
-    @include highlight;
-  }
+  .v1styles {
+    .highlighted-title {
+      @include highlight;
+    }
 
-  .pre-title {
-    @include pre-title;
-  }
+    .pre-title {
+      @include pre-title;
+    }
 
-  .title {
-    @include title;
-  }
+    .title {
+      @include title;
+    }
 
-  h1 {
-    @include h1;
-  }
+    .helper-text-box {
+      p {
+        font-size: px-to-rem(14);
+        line-height: px-to-rem(16);
+      }
 
-  h2 {
-    @include h2;
-  }
+      .title {
+        font-weight: 900;
+        margin-bottom: px-to-rem(8);
+      }
+    }
 
-  h3 {
-    @include h3;
-  }
+    h1 {
+      @include h1;
+    }
 
-  h4 {
-    @include h4;
-  }
+    h2 {
+      @include h2;
+    }
 
-  h5 {
-    @include h5;
-  }
+    h3 {
+      @include h3;
+    }
 
-  h6 {
-    @include h6;
-  }
+    h4 {
+      @include h4;
+    }
 
-  .subtitle {
-    @include subtitle;
-  }
+    h5 {
+      @include h5;
+    }
+
+    h6 {
+      @include h6;
+    }
+
+    .subtitle {
+      @include subtitle;
+    }
 
-  .count {
-    &::before {
-      @include image('icons/middot.svg', true);
-
-      content: '';
-      width: px-to-rem(get-map($count-icon, 'width'));
-      height: px-to-rem(get-map($count-icon, 'width'));
-      background: currentcolor;
-      position: relative;
-      top: px-to-rem(get-map($count-icon, 'offset'));
-      margin: 0 px-to-rem(get-map($count-icon, 'margin-horizontal'));
-      display: inline-block;
+    .count {
+      &::before {
+        @include image('icons/middot.svg', true);
+
+        content: '';
+        width: px-to-rem(get-map($count-icon, 'width'));
+        height: px-to-rem(get-map($count-icon, 'width'));
+        background: currentcolor;
+        position: relative;
+        top: px-to-rem(get-map($count-icon, 'offset'));
+        margin: 0 px-to-rem(get-map($count-icon, 'margin-horizontal'));
+        display: inline-block;
+      }
     }
   }
 }

package/styles/base/buttons/_button-wrapper.scss

@@ -5,36 +5,38 @@ $button-wrapper-button: (
 );
 
 @layer base {
-  .button-wrapper {
-    list-style: none;
-    margin: 0 auto;
-    padding: 0;
-    line-height: normal;
-    display: flex;
-    flex-flow: row wrap;
-    place-content: center;
-
-    li,
-    > button,
-    > .button {
-      margin: 0 px-to-rem(get-map($button-wrapper-button, 'margin'))
-        px-to-rem(get-map($button-wrapper-button, 'margin'));
-    }
-
-    li {
+  .v1styles {
+    .button-wrapper {
+      list-style: none;
+      margin: 0 auto;
+      padding: 0;
       line-height: normal;
       display: flex;
-      align-content: center;
+      flex-flow: row wrap;
+      place-content: center;
 
-      &:last-child {
-        margin-bottom: px-to-rem(get-map($button-wrapper-button, 'margin'));
+      li,
+      > button,
+      > .button {
+        margin: 0 px-to-rem(get-map($button-wrapper-button, 'margin'))
+          px-to-rem(get-map($button-wrapper-button, 'margin'));
       }
-    }
 
-    button,
-    .button {
-      margin-top: auto;
-      margin-bottom: auto;
+      li {
+        line-height: normal;
+        display: flex;
+        align-content: center;
+
+        &:last-child {
+          margin-bottom: px-to-rem(get-map($button-wrapper-button, 'margin'));
+        }
+      }
+
+      button,
+      .button {
+        margin-top: auto;
+        margin-bottom: auto;
+      }
     }
   }
 }