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

package/styles/base-styles/_titles.scss

@@ -1,132 +0,0 @@
-@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 {
-  #root {
-    .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-styles/buttons/_buttons.scss

@@ -1,236 +0,0 @@
-@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 {
-  #root {
-    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);
-
-            %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;
-      }
-
-    }
-  }
-}
-