Merge pull request #32 from markteekman/develop

Develop

README.md

@@ -1,6 +1,6 @@
 # Accessible Astro Starter
 
-This starter project is build upon the (awesome) [Astro Static Site Builder](https://astro.build/). This starter offers a couple of Accessibility components, a couple of example pages, a blog with dynamic routes, a custom 404 page and some utility classes to get you building your project faster. Also check out the [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) npm package which can be used with (or without) this starter!
+This starter project is build upon the (awesome) [Astro Static Site Builder](https://astro.build/). To help you build your project *faster*, this theme includes some dedicated accessible components (such as a keyboard accessible and responsive navigation) and several components coming from the [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) npm package. This theme also includes example pages, a blog with dynamic routes, a custom 404 page and many **Design System** utility classes, patterns and primatives (such as grids, buttons, lists, spacings, sizes and more).
 
 [Live demo](https://starter.accessible-astro.dev)
 
@@ -15,15 +15,17 @@ npm install && npm start
 - Accessible landmarks such as `header`, `main`, `footer`, `section` and `nav`
 - Outline focus indicator which works on dark and light backgrounds
 - Several `aria` attributes which provide a better experience for screen reader users
-- `SkipLinks.astro` component to skip to either the main menu or the main content
+- `SkipLinks.astro` component to skip to either the main menu or the main content *
 - `Navigation.astro` component with keyboard accessible (dropdown) navigation (arrow keys, escape key)
 - `ResponsiveToggle.astro` component with an accessible responsive toggle button for the mobile navigation
-- `DarkMode.astro` component toggle with accessible button and a user system preferred color scheme
+- `DarkMode.astro` component toggle with accessible button and a user system preferred color scheme *
 - `Header.astro` component included in the `DefaultLayout.astro` layout
 - `Footer.astro` component included in the `DefaultLayout.astro` layout
 - `.sr-only` utility class for screen reader only text content (hides text visually)
 - `prefers-reduced-motion` disables animations for users that have this preference turned on
 
+**Provided by the Accessible Astro Components package.*
+
 ## Extra features
 
 - `blog.astro` and `posts/[id].astro` demonstrate the use of dynamic routes and provide a basic blog
@@ -119,7 +121,17 @@ With two border radius utility classes (`radius-small` and `radius-large`) you c
 </div>
 ```
 
-## Colors
+### Buttons
+
+A Button primitive to easily apply button styles to your `<button>` and `<a>` tags. Simply apply the class `button` to your element. There are different variations in colors (`color-secondary`, `color-info`, `color-success`, `color-warning`, `color-error`) which is primary by default, sizing (`size-tiny`, `size-large`, `size-huge`) which is medium by default and behavior (`behavior-full`) which stretches the button to 100% width.
+
+```html
+<a href="/" class="button color-success size-huge behavior-full">
+  Click me to go to space!
+</a>
+```
+
+### Colors
 
 You can setup your own color schemes in the `_colors.scss` file. You'll find a SCSS map, which gets printed inside `_root.scss` as custom properties. There are also several color utilities such as `text-primary-#` and `bg-neutral-#` based on all colors you've defined. `text-primary-#` should be used on a parent element to give the child's the respective color.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessiblity features and tools to help you build faster.",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.dev",
   "scripts": {
@@ -11,7 +11,7 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "accessible-astro-components": "^1.4.5",
+    "accessible-astro-components": "^1.5.3",
     "astro-icon": "^0.7.1"
   },
   "devDependencies": {

src/assets/scss/base/_utility.scss

@@ -2,11 +2,10 @@
 // | Utility
 // | -------------------------------------------------------------
 
-@use 'utilities/align-center';
-@use 'utilities/align-horizontal';
-@use 'utilities/align-vertical';
+@use 'utilities/alignments';
 @use 'utilities/animations';
 @use 'utilities/border-radius';
+@use 'utilities/button';
 @use 'utilities/colors';
 @use 'utilities/contents';
 @use 'utilities/elevations';

src/assets/scss/base/utilities/_align-horizontal.scss → src/assets/scss/base/utilities/_alignments.scss

@@ -1,11 +1,23 @@
 // | -------------------------------------------------------------
-// | Align Horizontal
+// | Alignments
 // | -------------------------------------------------------------
 
+.align-center {
+  display: grid;
+  place-items: center;
+}
+
 .align-horizontal {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   text-align: center;
 }
+
+.align-vertical {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}

src/assets/scss/base/utilities/_button.scss

@@ -0,0 +1,122 @@
+// | -------------------------------------------------------------
+// | Button
+// | -------------------------------------------------------------
+
+@use '../size' as *;
+@use '../space' as *;
+
+.button {
+  display: inline-block;
+  padding: 0.75rem 1rem;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  color: var(--neutral-900);
+  background-color: var(--primary-300);
+  border: 2px solid var(--primary-300);
+  border-radius: 3px;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    color: var(--neutral-900);
+    background-color: var(--primary-200);
+    border: 2px solid var(--primary-200);
+  }
+
+  &:visited {
+    color: var(--neutral-900);
+  }
+
+  &.color-secondary {
+    background-color: var(--secondary-200);
+    border-color: (var(--secondary-200));
+
+    &:hover,
+    &:focus {
+      border-color: var(--secondary-100);
+      background-color: var(--secondary-100);
+    }
+  }
+
+  &.color-neutral {
+    background-color: var(--neutral-500);
+    border-color: (var(--neutral-500));
+
+    &:hover,
+    &:focus {
+      border-color: var(--neutral-400);
+      background-color: var(--neutral-400);
+    }
+  }
+
+  &.color-info {
+    background-color: var(--info-300);
+    border-color: (var(--info-300));
+
+    &:hover,
+    &:focus {
+      border-color: var(--info-200);
+      background-color: var(--info-200);
+    }
+  }
+
+  &.color-success {
+    background-color: var(--success-400);
+    border-color: (var(--success-400));
+
+    &:hover,
+    &:focus {
+      border-color: var(--success-300);
+      background-color: var(--success-300);
+    }
+  }
+
+  &.color-warning {
+    background-color: var(--warning-400);
+    border-color: (var(--warning-400));
+
+    &:hover,
+    &:focus {
+      border-color: var(--warning-300);
+      background-color: var(--warning-300);
+    }
+  }
+
+  &.color-error {
+    background-color: var(--error-300);
+    border-color: (var(--error-300));
+
+    &:hover,
+    &:focus {
+      border-color: var(--error-200);
+      background-color: var(--error-200);
+    }
+  }
+
+  &.size-tiny {
+    padding: $space-2 $space-4;
+    @include size-12;
+  }
+
+  &.size-small {
+    padding: $space-4 $space-8;
+    @include size-14;
+  }
+
+  &.size-large {
+    padding: $space-12 $space-16;
+    @include size-18;
+  }
+
+  &.size-huge {
+    padding: $space-16 $space-32;
+    @include size-20;
+  }
+
+  &.behavior-full {
+    display: block;
+    width: 100%;
+  }
+}

src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
-import SkipLinks from '../components/SkipLinks.astro'
 import Navigation from '../components/Navigation.astro'
+import { SkipLinks } from 'accessible-astro-components'
 ---
 
 <header>

src/components/Navigation.astro

@@ -1,6 +1,6 @@
 ---
-import DarkMode from './DarkMode.astro'
 import ResponsiveToggle from './ResponsiveToggle.astro'
+import { DarkMode } from 'accessible-astro-components'
 ---
 
 <div id="main-navigation" class="is-desktop padding-16 color-neutral">
@@ -196,6 +196,7 @@ import ResponsiveToggle from './ResponsiveToggle.astro'
   @use '../assets/scss/base/border' as *;
   @use '../assets/scss/base/breakpoint' as *;
   @use '../assets/scss/base/elevation' as *;
+  @use '../assets/scss/base/outline' as *;
   @use '../assets/scss/base/size' as *;
 
   #main-navigation {
@@ -333,4 +334,36 @@ import ResponsiveToggle from './ResponsiveToggle.astro'
       }
     }
   }
+
+  .darkmode-toggle {
+    padding: 0;
+    border: none;
+
+    svg {
+      width: 30px;
+    }
+
+    svg path {
+      fill: var(--secondary-500);
+      transition: fill 0.2s ease-in-out;
+
+      &:hover {
+        fill: var(--primary-400);
+      }
+    }
+
+    &:focus {
+      @include outline;
+    }
+  }
+
+  .darkmode .darkmode-toggle {
+    svg path {
+      fill: var(--secondary-100);
+
+      &:hover {
+        fill: var(--primary-400);
+      }
+    }
+  }
 </style>

src/components/ResponsiveToggle.astro

@@ -1,5 +1,5 @@
 <button class="responsive-toggle" aria-expanded="false" aria-label="Open menu navigation">
-  <svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>
+  <svg viewBox="0 0 512 512" aria-hidden="true" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>
 </button>
 
 <script>
@@ -10,13 +10,13 @@
   const openMenu = (toggle) => {
     toggle.setAttribute('aria-expanded', true)
     toggle.setAttribute('aria-label', 'Close menu navigation')
-    toggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>`
+    toggle.innerHTML = `<svg viewBox="0 0 512 512 aria-hidden="true"" fill="var(--action-color)"><path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>`
   }
 
   const closeMenu = (toggle) => {
     toggle.setAttribute('aria-expanded', false)
     toggle.setAttribute('aria-label', 'Open menu navigation')
-    toggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>`
+    toggle.innerHTML = `<svg viewBox="0 0 512 512 aria-hidden="true"" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>`
   }
 
   // execution