@apolitical/component-library 0.0.4-beta.5 → 0.0.5

package/styles/base/_titles.scss

@@ -0,0 +1,130 @@
+@use 'sass:map';
+@import './../functions',
+        './../mixins',
+        './../variables';
+
+$pre-title: ('font-size': 14, 'font-size_md': 16, 'letter-spacing': 1.28, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 24);
+$title: ('font-size': 32, 'font-size_md': 52, 'letter-spacing': -0.16, 'line-height': 40, 'line-height_md': 64, 'margin-bottom': 16, 'margin-bottom_md': 32);
+$h1: ('font-size': 28, 'font-size_md': 40, 'line-height': 32, 'line-height_md': 48, 'letter-spacing': -0.16, 'margin-bottom': 16);
+$h2: ('font-size': 24, 'font-size_md': 28, 'line-height': 32, 'line-height_md': 40, 'margin-top': 40, 'margin-bottom': 16);
+$h3: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-top': 60, 'margin-bottom': 20);
+$h4: ('font-size': 18, 'font-size_md': 20, 'line-height': 24, 'line-height_md': 28, 'margin-top': 40, 'margin-bottom': 20);
+$h5: ('font-size': 12, 'font-size_md': 14, 'line-height': 16, 'margin-top': 16, 'margin-bottom': 16);
+$h6: ('font-size': 12, 'font-size_md': 11, 'line-height': 16);
+$subtitle: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-bottom': 20);
+
+@layer base {
+  .pre-title, h5, h6 {
+    color: map.get($theme, 'title');
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+
+  .title, h1, h2, h3, h4 {
+    color: map.get($theme, 'title');
+    font-weight: 900;
+  }
+
+  .pre-title {
+    margin-bottom: px-to-rem(map.get($pre-title, 'margin-bottom'));
+    font-size: px-to-rem(map.get($pre-title, 'font-size'));
+    line-height: px-to-rem(map.get($pre-title, 'line-height'));
+    letter-spacing: px-to-rem(map.get($pre-title, 'letter-spacing'));
+    text-transform: uppercase;
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($pre-title, 'font-size_md'));
+        line-height: px-to-rem(map.get($title, 'line-height_md'));
+      }
+  }
+
+  .title {
+    margin-bottom: px-to-rem(map.get($title, 'margin-bottom'));
+    font-size: px-to-rem(map.get($title, 'font-size'));
+    line-height: px-to-rem(map.get($title, 'line-height'));
+    letter-spacing: px-to-rem(map.get($title, 'letter-spacing'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($title, 'font-size_md'));
+        line-height: px-to-rem(map.get($title, 'line-height_md'));
+      }
+  }
+
+  h1 {
+    margin-bottom: px-to-rem(map.get($h1, 'margin-bottom'));
+    font-size: px-to-rem(map.get($h1, 'font-size'));
+    line-height: px-to-rem(map.get($h1, 'line-height'));
+    letter-spacing: px-to-rem(map.get($h1, 'letter-spacing'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h1, 'font-size_md'));
+        line-height: px-to-rem(map.get($h1, 'line-height_md'));
+      }
+  }
+
+  h2 {
+    margin: px-to-rem(map.get($h2, 'margin-top')) 0 px-to-rem(map.get($h2, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h2, 'font-size'));
+    line-height: px-to-rem(map.get($h2, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h2, 'font-size_md'));
+        line-height: px-to-rem(map.get($h2, 'line-height_md'));
+      }
+  }
+
+  h3 {
+    margin: px-to-rem(map.get($h3, 'margin-top')) 0 px-to-rem(map.get($h3, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h3, 'font-size'));
+    line-height: px-to-rem(map.get($h3, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h3, 'font-size_md'));
+        line-height: px-to-rem(map.get($h3, 'line-height_md'));
+      }
+  }
+
+  h4 {
+    margin: px-to-rem(map.get($h4, 'margin-top')) 0 px-to-rem(map.get($h4, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h4, 'font-size'));
+    line-height: px-to-rem(map.get($h4, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h4, 'font-size_md'));
+        line-height: px-to-rem(map.get($h4, 'line-height_md'));
+      }
+  }
+
+
+  h5 {
+    margin: px-to-rem(map.get($h5, 'margin-top')) 0 px-to-rem(map.get($h5, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h5, 'font-size'));
+    line-height: px-to-rem(map.get($h5, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h5, 'font-size_md'));
+      }
+  }
+
+  h6 {
+    font-size: px-to-rem(map.get($h6, 'font-size'));
+    line-height: px-to-rem(map.get($h6, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h6, 'font-size_md'));
+      }
+  }
+
+  .subtitle {
+    margin-bottom: px-to-rem(map.get($subtitle, 'margin-bottom'));
+    font-size: px-to-rem(map.get($subtitle, 'font-size'));
+    color: map.get($theme, 'subtitle');
+    font-weight: 400;
+    line-height: px-to-rem(map.get($subtitle, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($subtitle, 'font-size_md'));
+        line-height: px-to-rem(map.get($subtitle, 'line-height_md'));
+      }
+  }
+}

package/styles/base/buttons/_buttons.scss

@@ -0,0 +1,234 @@
+@use 'sass:map';
+@use 'sass:meta';
+@import './../../functions',
+        './../../mixins',
+        './../../variables';
+@import './icons', './mixins';
+
+// The button defaults to the primary variant and medium styling so are not added as classes - they live on the default `button` styling
+$large: ('font-size': 18, 'padding-top': 14, 'padding-horizontal': 24, 'padding-bottom': 16, 'icon-width': 18, 'icon-offset': 2, 'icon-gutter': 12);
+$medium: ('font-size': 16, 'padding-top': 10, 'padding-horizontal': 24, 'padding-bottom': 12, 'icon-width': 16, 'icon-offset': 2, 'icon-gutter': 10);
+$small: ('font-size': 14, 'padding-top': 8, 'padding-horizontal': 16, 'padding-bottom': 10, 'icon-width': 12, 'icon-offset': 2, 'icon-gutter': 8);
+$sizes: ('large', $large), ('small', $small);
+$secondary: ('border': 1);
+
+// The tertiary styling has its own padding; regardless of size, we add a tiny amount of padding to accommodate
+// the focus outline and to ensure any icons are centered
+$tertiary: ('padding-top': 1.6, 'padding-horizontal': 8,'padding-bottom': 3.2);
+$animation: ('scale': 1.1, 'duration': 0.5, 'iteration': 1);
+
+@layer base {
+  button, .button {
+    background: map.get($theme, 'button_primary_bg');
+    padding: px-to-rem(map.get($medium, 'padding-top')) px-to-rem(map.get($medium, 'padding-horizontal'))
+          px-to-rem(map.get($medium, 'padding-bottom')) px-to-rem(map.get($medium, 'padding-horizontal'));
+    position: relative;
+    text-align: center;
+    font-size: px-to-rem(map.get($medium, 'font-size'));
+    color: map.get($theme, 'button_primary');
+    font-weight: 700;
+    text-decoration: none;
+    border-radius: 360rem; // Completely round corners. This could be any large number but 360 evokes a circle well!
+    border: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    display: inline-block;
+
+    &:hover {
+      background: map.get($theme, 'button_primary_bg_hover');
+    }
+
+    &:active {
+      background: map.get($theme, 'button_primary_bg_active');
+    }
+
+    &:focus, &:focus-visible {
+      background: map.get($theme, 'button_primary_bg_focus');
+    }
+
+    @each $size, $styles in $sizes {
+      &.#{$size} {
+        padding: px-to-rem(map.get($styles, 'padding-top')) px-to-rem(map.get($styles, 'padding-horizontal'))
+          px-to-rem(map.get($styles, 'padding-bottom')) px-to-rem(map.get($styles, 'padding-horizontal'));
+        font-size: px-to-rem(map.get($styles, 'font-size'));
+
+          &.icon {
+            margin-top: px-to-rem(map.get($styles, 'icon-offset'));
+
+            &.left::before { margin-right: px-to-rem(map.get($styles, 'icon-gutter')); }
+            &.right::before { margin-left: px-to-rem(map.get($styles, 'icon-gutter')); }
+          }
+      }
+    }
+
+    &.full-width {
+      width: 100%;
+    }
+
+    &.destructive {
+        &, &:hover, &:active, &:focus, &:focus-visible {
+          background: map.get($theme, 'button_primary_destructive_bg');
+          color: map.get($theme, 'button_primary_destructive');
+        }
+
+        &:hover, &:active {
+          background: map.get($theme, 'button_primary_destructive_bg_hover');
+        }
+
+        &:focus, &:focus-visible {
+          box-shadow: $outline map.get($theme, 'button_primary_destructive_box-shadow');
+        }
+
+    }
+
+    &.secondary {
+      background: map.get($theme, 'button_secondary_bg');
+      color: map.get($theme, 'button_secondary');
+      border: px-to-rem(map.get($secondary, 'border')) solid map.get($theme, 'button_secondary_border');
+
+        &:hover {
+          background: map.get($theme, 'button_secondary_bg_hover');
+        }
+
+        &:active, &:focus, &:focus-visible {
+          color: map.get($theme, 'button_secondary_focus');
+          border-color: map.get($theme, 'button_secondary_border_focus');
+        }
+
+        &:active {
+          background: map.get($theme, 'button_secondary_bg_active');
+        }
+
+        &:focus, &:focus-visible {
+          background: map.get($theme, 'button_secondary_bg_focus');
+        }
+
+        &.muted {
+          border-color: map.get($theme, 'button_secondary_border_muted');
+
+            &, &:hover, &:active, &:focus, &:focus-visible {
+              background: map.get($theme, 'button_secondary_bg_muted');
+              color: map.get($theme, 'button_secondary_muted');
+            }
+
+          &:hover, &:focus, &:focus-visible {
+            color: map.get($theme, 'button_secondary_muted_hover');
+          }
+        }
+
+        &.disabled {
+          &, &:hover, &:active, &:focus, &:focus-visible {
+            background: map.get($theme, 'button_secondary_bg_disabled');
+            color: map.get($theme, 'button_secondary_disabled');
+            border-color: map.get($theme, 'button_secondary_border_disabled');
+          }
+        }
+    }
+
+    &.tertiary {
+      @include transition(color text-decoration-color);
+
+      padding: px-to-rem(map.get($tertiary, 'padding-top')) px-to-rem(map.get($tertiary, 'padding-horizontal'))
+        px-to-rem(map.get($tertiary, 'padding-bottom')) px-to-rem(map.get($tertiary, 'padding-horizontal'));
+      bottom: px-to-rem(map.get($tertiary, 'padding-top'));
+      right: px-to-rem(map.get($tertiary, 'padding-horizontal'));
+      text-decoration: underline;
+      text-decoration-color: transparent;
+
+      &, &:focus, &:focus-visible {
+        background: map.get($theme, 'button_tertiary_bg');
+        color: map.get($theme, 'button_tertiary');
+        text-decoration-color: map.get($theme, 'button_tertiary_text-decoration');
+      }
+
+      &:hover, &:active {
+        text-decoration-color: currentcolor;
+      }
+
+      &:hover {
+        color: map.get($theme, 'button_tertiary_hover');
+      }
+
+      &:active {
+        color: map.get($theme, 'button_tertiary_active');
+      }
+
+      &.muted {
+        color: map.get($theme, 'button_tertiary_muted');
+
+          &:hover, &:focus, &:focus-visible {
+            color: map.get($theme, 'button_tertiary_muted_hover');
+          }
+      }
+
+      &.disabled {
+        &, &:hover, &:active, &:focus, &:focus-visible {
+          background: map.get($theme, 'button_tertiary_disabled_bg');
+          color: map.get($theme, 'button_tertiary_disabled');
+          text-decoration-color: map.get($theme, 'button_tertiary_disabled_text-decoration');
+        }
+      }
+
+    }
+
+    &.icon {
+      display: inline-flex;
+      flex-flow: row;
+      align-content: center;
+      justify-content: center;
+
+        &::before {
+          content: '';
+          background: currentcolor;
+          width: px-to-rem(map.get($medium, 'icon-width'));
+          height: px-to-rem(map.get($medium, 'icon-width'));
+          display: block;
+        }
+
+        &.right::before { order: 2; }
+
+        @each $icon, $large-icon, $medium-icon, $small-icon in $icons {
+          $icon-sizes: ('large', $large-icon), ('medium', $medium-icon), ('small', $small-icon);
+
+          @at-root {
+            %icon-#{$icon} { @include icon-styling($icon, $icon-sizes); }
+          }
+
+          &.#{$icon} {
+            @extend %icon-#{$icon};
+          }
+
+          &.hover_#{$icon} {
+            &:hover, &:focus, &:focus-visible {
+              @extend %icon-#{$icon};
+            }
+          }
+
+        }
+
+        &.animate {
+          @include animate {
+            @keyframes bounce {
+              0%, 100% { transform: scale(1); }
+
+              70% {
+                transform: scale(#{map.get($animation, 'scale')});
+              }
+            }
+
+            &:focus, &:active, &.do-animation {
+              &::before { animation: bounce #{map.get($animation, 'duration')}s #{map.get($animation, 'iteration')}; }
+            }
+
+          }
+        }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+
+  }
+}
+    

package/styles/index.scss

@@ -1,6 +1,8 @@
 @import 'functions',
         'variables',
         'mixins',
-
         'reset',
-        'base-styles';
+        'base';
+
+/* We use CSS layers to handle specificity: https://css-tricks.com/css-cascade-layers/ */
+@layer reset, base, components, overrides;

package/styles/mixins/_index.scss

@@ -1,5 +1,4 @@
 @import 'animations',
         'backgrounds',
         'breakpoints',
-        'selectors',
         'transitions';

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/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;
-    }
-
-  }
-
-}