feat: Modal Component

components/00-base/01-colors/_colors-vars.scss

@@ -11,13 +11,19 @@ $gray-light: #888;
 $gray: #666;
 $gray-dark: #4c4c4c;
 $gray-darker: #333;
+$gray-darkest: #222;
 $black: black;
 
 // Status
-$yellow-light: #f9fb93;
-$red-light: #fbe3e4;
-$green-light: #cfefc2;
+$yellow: #ecef26;
+$yellow-light: #f6f886;
+$red: #ca242c;
+$red-light: #fcd0d2;
+$green: #278002;
+$green-light: #a6eb89;
 
 // Project
-$purple: #610c63;
-$blue: #005de0;
+$purple: #5c0a5d;
+$purple-light: #912892;
+$blue: #0852ba;
+$blue-light: #61a0f7;

components/00-base/01-colors/colors-used.scss

@@ -8,7 +8,9 @@ $defaultColors: (
   background: colors-vars.$white,
   background-section: colors-vars.$gray-lightest,
   primary: colors-vars.$blue,
+  primary-alt: colors-vars.$blue-light,
   secondary: colors-vars.$purple,
+  secondary-alt: colors-vars.$purple-light,
   accent: colors-vars.$gray-dark,
   accent-high: colors-vars.$black,
   highlight: colors-vars.$gray-lighter,
@@ -24,17 +26,19 @@ $darkColors: (
   text-inverse: colors-vars.$gray,
   background: colors-vars.$gray,
   background-inverse: colors-vars.$gray-light,
-  background-section: colors-vars.$gray-dark,
-  primary: colors-vars.$blue,
-  secondary: colors-vars.$purple,
+  background-section: colors-vars.$gray-darkest,
+  primary: colors-vars.$blue-light,
+  primary-alt: colors-vars.$blue,
+  secondary: colors-vars.$purple-light,
+  secondary-alt: colors-vars.$purple,
   accent: colors-vars.$gray-lightest,
   accent-high: colors-vars.$white,
   highlight: colors-vars.$gray-dark,
   highlight-high: colors-vars.$gray-darker,
   muted: colors-vars.$gray-darker,
-  warning: colors-vars.$yellow-light,
-  error: colors-vars.$red-light,
-  message: colors-vars.$green-light,
+  warning: colors-vars.$yellow,
+  error: colors-vars.$red,
+  message: colors-vars.$green,
 );
 
 ///////////

components/00-base/01-colors/colors.yml

@@ -5,7 +5,9 @@ palettes:
       - name: 'Text'
       - name: 'Background'
       - name: 'Primary'
+      - name: 'Primary Alt'
       - name: 'Secondary'
+      - name: 'Secondary Alt'
       - name: 'Accent'
       - name: 'Accent High'
       - name: 'Highlight'
@@ -19,7 +21,9 @@ palettes:
       - name: 'Text'
       - name: 'Background'
       - name: 'Primary'
+      - name: 'Primary Alt'
       - name: 'Secondary'
+      - name: 'Secondary Alt'
       - name: 'Accent'
       - name: 'Accent High'
       - name: 'Highlight'

components/01-atoms/buttons/_buttons.scss

@@ -9,13 +9,13 @@ $button-colors: (
   ),
   primary-dark: (
     text: clr(text),
-    bg: clr(primary),
+    bg: clr(primary-alt),
     text-hover: clr(text),
     bg-hover: clr(highlight-high),
   ),
   secondary: (
     text: clr(text-inverse),
-    bg: clr(secondary),
+    bg: clr(secondary-alt),
     text-hover: clr(secondary),
     bg-hover: clr(highlight),
   ),

components/01-atoms/buttons/button.twig

@@ -11,11 +11,11 @@
 
 {% set button_base_class = button_base_class|default('button') %}
 
-{% set additional_attributes = {
+{% set button_attributes = button_attributes|default({
   class: bem(button_base_class, button_modifiers, button_blockname),
-} %}
+}) %}
 
-<button {{ add_attributes(additional_attributes) }}>
+<button {{ add_attributes(button_attributes) }}>
   {% block button_content %}
     {{ button_content }}
   {% endblock %}

components/01-atoms/links/link/_link.scss

@@ -1,11 +1,20 @@
 @mixin link {
-  color: clr(accent);
+  color: clr(primary);
 
   &:hover {
-    color: clr(accent-high);
+    color: clr(primary-alt);
   }
 }
 
 .link {
   @include link;
 }
+
+a {
+  @include link;
+
+  /* A elements that don't have a class get default styles */
+  &:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+}

components/01-atoms/text/headings/_heading.twig

@@ -2,7 +2,7 @@
 /**
  * Available variables:
  * - heading_level - the header level 1-6 (produces h1, h2, etc.)
- *
+ * - heading__attributes - array of attributes and their values
  * - heading_base_class - the base class
  * - heading_modifiers - array of modifiers to add to the base classname
  * - heading_blockname - blockname prepended to the base classname
@@ -17,8 +17,11 @@
  */
 #}
 {% set heading_base_class = heading_base_class|default('h' ~ heading_level) %}
+{% set heading__attributes = heading__attributes|default({
+  'class': bem(heading_base_class, heading_modifiers, heading_blockname),
+}) %}
 
-<h{{ heading_level }} {{ bem(heading_base_class, heading_modifiers, heading_blockname) }}>
+<h{{ heading_level }} {{ add_attributes(heading__attributes) }}>
   {% if heading_url %}
     {% include "@atoms/links/link/link.twig" with {
       "link_content": heading,

components/02-molecules/modal/_modal.scss

@@ -0,0 +1,95 @@
+// Base modal styles. Additional classes accommodate for custom app implementations.
+.modal__toggle {
+  cursor: pointer;
+}
+
+.modal__pane {
+  background-color: clr(background-section);
+  color: clr(text);
+  left: 0;
+  opacity: 0;
+  padding: $space;
+  position: fixed;
+  top: 50%;
+  transform: translate(0%, -50%);
+  transition: opacity 300ms;
+  visibility: hidden;
+  width: 100vw;
+  z-index: 1000;
+
+  @include large {
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: $small;
+  }
+
+  .modal--active & {
+    max-height: 100vh;
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.modal__title {
+  @include wrapper($container-max-width: $small);
+
+  margin-bottom: $space;
+}
+
+.modal__content {
+  @include wrapper($container-max-width: $small);
+
+  > * {
+    margin-bottom: $space;
+    width: 100%;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.modal__modal-heading {
+  display: flex;
+  flex-flow: row nowrap;
+
+  // Close button
+  .modal__toggle {
+    @include button-base;
+    @include button-color-primary;
+    @include button-medium;
+
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .icon {
+    fill: clr(text);
+    height: $space;
+    position: relative;
+    right: 0;
+    stroke: clr(text);
+    stroke-linecap: round;
+    top: $space-one-fourth;
+    width: $space;
+  }
+}
+
+.modal__overlay {
+  background-color: clr(background);
+  color: clr(text);
+  display: none;
+  left: 0;
+  opacity: 0.45;
+  position: fixed;
+  top: 0;
+
+  &--active {
+    display: block;
+    height: 100vh;
+    width: 100vw;
+    z-index: 999;
+  }
+}