@apolitical/component-library 0.0.2 → 0.0.4-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apolitical/component-library",
-  "version": "0.0.2",
+  "version": "0.0.4-beta.2",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -9,4 +9,4 @@
       "require": "./index.js"
     }
   }
-}
+}

package/style.css

@@ -0,0 +1 @@
+h1{color:#4f43ba}

package/styles/README.md

@@ -0,0 +1,53 @@
+# Styles
+
+## `#root`
+
+NextJS is very opinionated and won't let us style general elements (e.g. `h1`) - it wants elements to be 'pure', using classes or IDs to identify them (e.g. `.specific-section h1`).
+
+To get the benefit of global base styling, where we get styling out of the box without having to explicitly add it to every element, we use the `#root` ID, on the `body`, to scope our global styling.
+
+### Adding a selector between `#root` and an element
+
+One of the big benefits of using Sass is the `&` selector, which uses the full path to the element as the selector, letting us quickly add different states, like `:hover` and `:focus`, or show different styling inside a specific parent element.
+
+This works as expected for states, but - because we scope everything to `#root` - using `&` would result in a selector like `.new-parent #root .element` - which is not going to be a valid path.
+
+Instead, we've created a mixin, `selector-after-root`, to write the expected path.
+
+`@include selector-after-root('.element')` will translate to the path `#root .element &`.
+
+---
+
+## `@layer`
+
+We're using [CSS cascade layers (`@layer`)](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/) to organise our styles, to help us avoid specificity issues and to make it easier to find and update styles.
+
+The `global.css` file defines the order of our layers, with the browser reset as the lowest.
+
+If you need to overwrite CSS, you don't need to create an overly specific (and less performant) rule or add an `!important` (as an aside: please, please [never add an `!important`](https://dev.to/alvaromontoro/using-important-in-css-75c)) - just put the styling in a higher layer.
+
+---
+
+## `button` styling
+
+We handle button styling through classes.
+
+### Variations
+
+By default, buttons have `primary` styling (a purple background and white text) and don't need a `primary` class to be styled. Buttons can also be `secondary` (a ghost button with a purple border) or `tertiary` (no border or background color). There are additional variations for `destructive` (only available on primary buttons), `muted` (only available on secondary and tertiary buttons), and `disabled`.
+
+### Sizes
+
+By default, buttons are `medium`. They don't need a class to be styled. Buttons can also be `small` or `large`.
+
+### Icons
+
+Buttons can have an icon but - because we can't mix pre-processing and data passed into CSS for file names, like CSS variables or data attributes - icons on buttons need to be set up in advance with classes. The list of available icons is maintained in `base-styles/buttons/_icons.scss`. To add a new icon, add a new item to the list with arguments for the sizes on large, medium, and small buttons.
+
+To add an icon to a button, add the class name `icon [file name of icon without file extension]`, e.g. `icon heart_empty`.
+
+The icon file, with a matching name, should be uploaded to the `apolitical-assets` bucket on Google Cloud Platform. (Referred to as `$assets-bucket` in the styling.)
+
+You can also pass `left` or `right` to position the icon - this will add margin between the text and the icon. e.g. `icon heart_empty right`.
+
+You can change the icon on hover by adding a second file name, prepended with `hover_`, e.g. `icon heart_empty hover_heart` will change the heart icon from an outline to a filled in heart on hover.

package/styles/base-styles/_accessibility.scss

@@ -0,0 +1,31 @@
+@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

@@ -0,0 +1,31 @@
+@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

@@ -0,0 +1,17 @@
+@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/_index.scss

@@ -0,0 +1,8 @@
+@import 'accessibility',
+        'blockquotes',
+        'buttons',
+        'hr',
+        'links',
+        'lists',
+        'text',
+        'titles';

package/styles/base-styles/_links.scss

@@ -0,0 +1,18 @@
+@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

@@ -0,0 +1,30 @@
+@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

@@ -0,0 +1,83 @@
+@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;
+    }
+
+  }
+
+}

package/styles/base-styles/_titles.scss

@@ -0,0 +1,132 @@
+@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

@@ -0,0 +1,236 @@
+@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;
+      }
+
+    }
+  }
+}
+    

package/styles/base-styles/buttons/_icons.scss

@@ -0,0 +1,24 @@
+// Because we can't mix pre-processing and data passed into CSS for file names, like CSS variables or data attributes,
+// icons on buttons need to be set up in advance. To add a new icon, add the name of the file, without the file extension,
+// to the $icons list below.
+// The format is: ('file-name', (small width, small height, small offset, small gutter),
+// (medium width, medium height, medium offset, medium gutter), (large width, large height, large offset, large gutter))
+// By default, icons on buttons use the same width, height, and margin set on the sized lists in `_buttons`, e.g.
+// large buttons default to 18px width, set in $large. If the default values are correct, put `d` as the value.
+// Otherwise, put the value in pixels.
+
+$icons: ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
+        ('arrow_right', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
+        ('arrow_corner-down_right', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
+        ('arrow_corner-down_left', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
+        ('arrow-down', (d, d, 4, 10), (d, d, 3, 8), (d, d, 4, d)),
+        ('chevron_left', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
+        ('chevron_right', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
+        ('heart', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+        ('heart_empty', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+        ('navigation_arrow', (d, d, 4, 10), (d, d, d, d), (14, 14, d, 10)),
+        ('pencil', (d, d, d, d), (d, d, d, 11), (d, d, 3, 9)),
+        ('speech-bubble_square_thick', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+        ('star', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
+        ('star_empty', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
+        ('tick', (14, 11, 8, 10), (12, 9, 7, 8), (9, 7, 6, 6));

package/styles/base-styles/buttons/_index.scss

@@ -0,0 +1 @@
+@import 'buttons';

package/styles/base-styles/buttons/_mixins.scss

@@ -0,0 +1,30 @@
+@use 'sass:list';
+@import './../../functions';
+
+@mixin icon-styling($icon, $icon-sizes) {
+  &::before { @include image('icons/#{$icon}.svg', true); }
+
+  @each $size, $styles in $icon-sizes {
+    @include icon-classes(width, list.nth($styles, 1), $size);
+    @include icon-classes(height, list.nth($styles, 2), $size);
+    @include icon-classes(margin-top, list.nth($styles, 3), $size);
+    @include icon-classes(margin-right, list.nth($styles, 4), $size, 'left');
+    @include icon-classes(margin-left, list.nth($styles, 4), $size, 'right');
+  }
+}
+
+// If the $value passed in isn't d (for default), render the styling on the passed-in class (if it exists)
+// and the size (if it isn't medium, which is default)
+@mixin icon-classes($property, $value, $size: 'medium', $class: false) {
+  @if $value != 'd' {
+    $classname: '';
+
+    @if $class { $classname: '.#{$class}' }
+
+    @if $size != 'medium' { $classname: $classname + '.#{$size}'; }
+
+    &#{$classname}:before {
+      #{$property}: px-to-rem($value);
+    }
+  }
+}

package/styles/functions/_index.scss

@@ -0,0 +1 @@
+@import 'size-conversions';

package/styles/functions/_size-conversions.scss

@@ -0,0 +1,8 @@
+@use 'sass:math';
+
+// Change px to rem
+// We want to use rem for accessibility, but Figma uses px (which is also a bit easier for us
+// to read and reason about). This mixin does the conversion for us.
+@function px-to-rem($size, $baseTextSize: 16) {
+    @return math.div($size, $baseTextSize) + rem;
+}

package/styles/index.scss

@@ -0,0 +1,6 @@
+@import 'functions',
+        'variables',
+        'mixins',
+
+        'reset',
+        'base-styles';

package/styles/mixins/_animations.scss

@@ -0,0 +1,7 @@
+@mixin animate() {
+  @at-root {
+    @media (prefers-reduced-motion: no-preference) {
+      @content;
+    }
+  }
+}

package/styles/mixins/_backgrounds.scss

@@ -0,0 +1,41 @@
+@use 'sass:string';
+@import './../variables';
+
+// Handle the repeated code for CSS backgrounds. By default, we assume the image is a background image,
+// but if you pass in $is-mask: true, it will be a mask-image instead.
+// If no 'http' is in the image path, we will prepend the image bucket URL, or the asset bucket URL for masks.
+// The asset paths can be passed in directly as part of `$image` to avoid this.
+
+@mixin image($image, $is-mask: false, $size: 100% auto, $repeat: no-repeat, $position: 0 0) {
+  @if string.index($image, 'http') {
+    $image: $image;
+  } @else {
+    @if $is-mask {
+      $image: $assets-bucket + $image;
+    } @else {
+      $image: $image-bucket + $image;
+    }
+  }
+
+  @if $is-mask {
+    @include mask-image($image, $size, $repeat);
+  } @else {
+    @include background-image($image, $size, $repeat, $position);
+  }
+}
+
+@mixin background-image($image, $size: 100% auto, $repeat: no-repeat, $position: 0 0) {
+  background-image: url($image);
+  background-repeat: $repeat;
+  background-position: $position;
+  background-size: $size;
+  display: block;
+}
+
+@mixin mask-image($image, $size: 100% auto, $repeat: no-repeat, $position: 0 0) {
+  mask-image: url($image);
+  mask-repeat: $repeat;
+  mask-position: $position;
+  mask-size: $size;
+  display: block;
+}

package/styles/mixins/_breakpoints.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+$breakpoint-sizes: (
+  'md': 769
+);
+
+// This mixin lets us use fast references for common breakpoints, using the map above,
+// and lets us reference custom breakpoints by passing in a number. It lets us code
+// breakpoints a bit faster by not having to type out the full media query each time.
+@mixin breakpoint($type, $breakpoint) {
+  @if  map-has-key($breakpoint-sizes, $breakpoint) {
+    $breakpoint: map.get($breakpoint-sizes, $breakpoint);
+  }
+
+  @media only screen and (#{$type}: #{$breakpoint}px) {
+    @content;
+  }
+}

package/styles/mixins/_index.scss

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

package/styles/mixins/_selectors.scss

@@ -0,0 +1,8 @@
+// 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)} {
+    @content;
+  }
+}

package/styles/mixins/_transitions.scss

@@ -0,0 +1,32 @@
+@use 'sass:list';
+
+// For accessibility, we need to respect the user's prefers-reduced-motion setting.
+// Find out more: https://css-tricks.com/introduction-reduced-motion-media-query/
+@mixin transition($properties, $duration: 0.2s, $ease: ease-in-out, $delay: 0s) {
+  @media (prefers-reduced-motion: no-preference) {
+    $transition: ();
+
+    @for $property from 1 through length($properties) {
+        @for $i from 0 to (length($properties)) - (length($duration)) {
+            $duration: list.join($duration, list.nth($duration, -1));
+        }
+
+        @for $i from 0 to (length($properties)) - (length($ease)) {
+            $ease: list.join($ease, list.nth($ease, -1));
+        }
+
+        @for $i from 0 to (length($properties)) - (length($delay)) {
+            $delay: list.join($delay, list.nth($delay, -1));
+        }
+
+        $transition: list.append(
+            $transition,
+            (list.nth($properties, $property) list.nth($duration, $property) list.nth($ease, $property) list.nth($delay, $property)),
+            $separator: comma
+        );
+    }
+
+    transition: $transition;
+  }
+
+}

package/styles/reset/_index.scss

@@ -0,0 +1 @@
+@import 'reset';

package/styles/reset/_reset.scss

@@ -0,0 +1,62 @@
+/* A reset for all browsers, based on Eric Meyer's CSS reset
+ * https://meyerweb.com/eric/tools/css/reset/ */
+
+@layer reset {
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+  }
+
+  article, aside, details, figcaption, figure,
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+
+  html {
+    font-size: 100%;
+  }
+
+  body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+
+    --webkit-text-size-adjust: 100%;
+
+    text-size-adjust: 100%;
+    text-rendering: optimizelegibility;
+    line-height: 1;
+  }
+
+  ul { list-style: disc; }
+  ol { list-style: decimal; }
+
+  blockquote, q {
+    quotes: none;
+
+    &::before, &::after {
+      content: '';
+      content: none;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+}

package/styles/variables/_index.scss

@@ -0,0 +1,3 @@
+@import 'assets',
+        'colors',
+        'sizes';

package/styles/variables/assets/_assets.scss

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

package/styles/variables/assets/_index.scss

@@ -0,0 +1 @@
+@import 'assets';

package/styles/variables/colors/_colors.scss

@@ -0,0 +1,64 @@
+// The default colours are defined here and referenced in `theme.scss`, which is what is used across the app.
+// This lets us use a meaningful name across the platform, such as `background` or `title`, rather than use a colour name,
+// like b900, which is likely to change in the future, but still have a clear consistency with Figma, which uses colour
+// names.
+
+$default-colors: (
+  'white': rgb(255 255 255 / 100%),
+  'black': rgb(0 0 0 / 100%),
+  'sand': rgb(252 250 243 / 100%),
+
+  'b50': rgb(248 247 255 / 100%),
+  'b100': rgb(222 220 250 / 100%),
+  'b200': rgb(197 194 245 / 100%),
+  'b300': rgb(175 171 239 / 100%),
+  'b500': rgb(124 114 225 / 100%),
+  'b600': rgb(101 89 212 / 100%),
+  'b700': rgb(79 67 186 / 100%),
+  'b800': rgb(57 45 135 / 100%),
+  'b900': rgb(33 24 77 / 100%),
+
+  'g50': rgb(235 250 246 / 100%),
+  'g100': rgb(195 240 228 / 100%),
+  'g300': rgb(124 220 197 / 100%),
+  'g600': rgb(43 137 117 / 100%),
+  'g700': rgb(28 104 88 / 100%),
+  'g900': rgb(10 38 33 / 100%),
+
+  'n50': rgb(240 245 255 / 100%),
+  'n100': rgb(215 224 239 / 100%),
+  'n200': rgb(192 203 223 / 100%),
+  'n500': rgb(117 131 160 / 100%),
+  'n600': rgb(89 101 128 / 100%),
+  'n700': rgb(64 74 97 / 100%),
+  'n800': rgb(42 49 65 / 100%),
+  'n900': rgb(21 25 33 / 100%),
+
+  'p50': rgb(255 242 255 / 100%),
+  'p100': rgb(238 200 237 / 100%),
+  'p300': rgb(203 130 197 / 100%),
+  'p500': rgb(166 55 152 / 100%),
+  'p900': rgb(66 1 55 / 100%),
+
+  'y50': rgb(255 248 232 / 100%),
+  'y100': rgb(255 238 193 / 100%),
+  'y300': rgb(255 230 139 / 100%),
+  'y700': rgb(122 81 5 / 100%),
+  'y900': rgb(48 29 0 / 100%),
+
+  'error50': rgb(255 242 242 / 100%),
+  'error600': rgb(195 65 65 / 100%),
+  'error700': rgb(155 36 36 / 100%),
+
+  'info50': rgb(240 245 247 / 100%),
+  'info500': rgb(30 117 166 / 100%),
+  'info600': rgb(20 95 139 / 100%),
+
+  'success50': rgb(235 247 239 / 100%),
+  'success500': rgb(60 124 82 / 100%),
+  'success600': rgb(38 103 60 / 100%),
+
+  'warning50': rgb(255 242 230 / 100%),
+  'warning500': rgb(220 121 29 / 100%),
+  'warning700': rgb(137 71 11 / 100%),
+);

package/styles/variables/colors/_index.scss

@@ -0,0 +1 @@
+@import 'theme';

package/styles/variables/colors/_theme.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@import 'colors';
+
+
+$c: $default-colors;
+$theme: (
+  default_focus: map.get($c, 'b100'),
+
+  background: map.get($c, 'white'),
+  
+  title: map.get($c, 'n900'),
+  subtitle: map.get($c, 'n800'),
+  text: map.get($c, 'n900'),
+
+  link: map.get($c, 'b700'),
+  link_hover: map.get($c, 'b800'),
+
+  button_primary: map.get($c, 'white'),
+  button_primary_bg: map.get($c, 'b700'),
+  button_primary_bg_hover: map.get($c, 'b500'),
+  button_primary_bg_active: map.get($c, 'b800'),
+  button_primary_bg_focus: map.get($c, 'b600'),
+  button_primary_bg_disabled: map.get($c, 'b700'),
+  button_primary_destructive: map.get($c, 'white'),
+  button_primary_destructive_bg: map.get($c, 'error600'),
+  button_primary_destructive_bg_hover: map.get($c, 'error700'),
+  button_primary_destructive_box-shadow: map.get($c, 'error50'),
+
+  button_secondary: map.get($c, 'b700'),
+  button_secondary_focus: map.get($c, 'white'),
+  button_secondary_muted: map.get($c, 'n600'),
+  button_secondary_muted_hover: map.get($c, 'b700'),
+  button_secondary_disabled: map.get($c, 'b700'),
+  button_secondary_bg: map.get($c, 'white'),
+  button_secondary_bg_hover: map.get($c, 'b200'),
+  button_secondary_bg_focus: map.get($c, 'b600'),
+  button_secondary_bg_active: map.get($c, 'b800'),
+  button_secondary_bg_muted: map.get($c, 'white'),
+  button_secondary_bg_disabled: map.get($c, 'white'),
+  button_secondary_border: map.get($c, 'b700'),
+  button_secondary_border_focus: transparent,
+  button_secondary_border_muted: map.get($c, 'n200'),
+  button_secondary_border_disabled: map.get($c, 'b700'),
+
+  button_tertiary: map.get($c, 'b700'),
+  button_tertiary_hover: map.get($c, 'b500'),
+  button_tertiary_active: map.get($c, 'b800'),
+  button_tertiary_muted: map.get($c, 'n600'),
+  button_tertiary_muted_hover: map.get($c, 'b500'),
+  button_tertiary_disabled: map.get($c, 'b700'),
+  button_tertiary_bg: none,
+  button_tertiary_disabled_bg: none,
+  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'),
+);
+

package/styles/variables/sizes/_common.scss

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

package/styles/variables/sizes/_index.scss

@@ -0,0 +1 @@
+@import 'common';