proof of concept: design system integration

astro/package.json

@@ -17,6 +17,7 @@
     "@fontsource/atkinson-hyperlegible": "^5.0.20",
     "@iconify-json/bi": "^1.1.23",
     "@iconify-json/cib": "^1.1.8",
+    "acid": "github:accessiblecommunity/design-system#initial-setup",
     "astro": "^5.7.9",
     "astro-icon": "^1.1.0",
     "astro-og-canvas": "^0.5.6",

astro/src/styles/bootstrap.scss

@@ -10,9 +10,6 @@
 // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 @import "bootstrap/scss/functions";
 
-// 2. Include any default variable overrides here
-@import "./colors-and-themes";
-
 $font-size-root:              18px;
 $font-family-sans-serif:      'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-weight-bold:            700;
@@ -78,16 +75,16 @@ $enable-smooth-scroll:  false;
 //* Navbar & Breadcrumbs
 //**********************/
 // $navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
-$navbar-light-hover-color:          $ac-navy;
-$navbar-light-active-color:         $ac-navy;
+$navbar-light-hover-color:          var(--color-primary-vivid-50);
+$navbar-light-active-color:         var(--color-primary-vivid-50);
 // $navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
-$navbar-light-icon-color:           $ac-navy;
+$navbar-light-icon-color:           var(--color-primary-vivid-50);
 
-$navbar-light-brand-color:          $ac-navy;
+$navbar-light-brand-color:          var(--color-primary-vivid-50);
 $navbar-light-brand-hover-color:    #FFFFFF;
 
 $navbar-dark-brand-color:           #FFFFFF;
-$navbar-dark-brand-hover-color:     $ac-navy;
+$navbar-dark-brand-hover-color:     var(--color-primary-vivid-50);
 
 $navbar-dark-icon-color:            #FFFFFF;
 
@@ -121,29 +118,13 @@ $breadcrumb-margin-bottom:          0;
 // $dropdown-dark-link-disabled-color: $gray-500 !default;
 
 $blockquote-font-size:            1.25em;
-$blockquote-footer-color:         $secondary;  // No dark mode
+$blockquote-footer-color:         var(--color-secondary-vivid-50);  // No dark mode
 
 $btn-hover-bg-shade-amount:       25%;
 $btn-hover-bg-tint-amount:        25%;
 $btn-hover-border-shade-amount:   30%;
 $btn-hover-border-tint-amount:    20%;
 
-//************
-// Form inputs
-//************
-
-$input-border-width:              1.8px;
-$input-border-color:              $info-border-contrast;
-$input-focus-border-color:        $info-border-contrast;
-
-$form-check-input-border:         1.8px solid $info-border-contrast;
-$form-check-input-border-radius:  0.375rem;
-
-$form-check-input-width:                  1.667em;
-$form-check-min-height:                   30px;
-$form-check-input-checked-bg-color:       $primary;
-$form-check-input-checked-border-color:   $primary;
-
 
 //********
 // Shadows - Tweaked from https://codyhouse.co/nuggets/beautiful-css-shadows
@@ -271,6 +252,26 @@ $theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $c
 @import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
 
+// 8. Add additional custom code here
+@import "./colors-and-themes";
+
+//************
+// Form inputs
+//************
+
+$input-border-width:              1.8px;
+$input-border-color:              $info-border-contrast;
+$input-focus-border-color:        $info-border-contrast;
+
+$form-check-input-border:         1.8px solid $info-border-contrast;
+$form-check-input-border-radius:  0.375rem;
+
+$form-check-input-width:                  1.667em;
+$form-check-min-height:                   30px;
+$form-check-input-checked-bg-color:       $primary;
+$form-check-input-checked-border-color:   $primary;
+
+
 // Additional contrast style on themes.
 $theme-colors-border-contrast: (
   "info": $info-border-contrast,
@@ -314,8 +315,6 @@ $theme-colors-border-contrast-dark: (
 @import "bootstrap/scss/helpers";
 @import "bootstrap/scss/utilities/api";
 
-// 8. Add additional custom code here
-
 .bg-primary-alpha-3 {
   @extend .bg-primary;
   --bs-bg-opacity: 0.3;
@@ -570,5 +569,3 @@ svg[data-icon="loca11y-logo"].unpad {
   //   filter: brightness(0) saturate(100%) invert(71%) sepia(19%) saturate(851%) hue-rotate(172deg) brightness(91%) contrast(95%);
   // }
 }
-
-

astro/src/styles/colors-and-themes.scss

@@ -1,7 +1,8 @@
 @charset "UTF-8";
+@import 'acid/src/styles/theme.css';
 
 $color-mode-type:                   media-query;
-$ac-navy:                           #041058;
+$ac-navy:                           var(--color-primary-vivid-50);
 
 //*******************
 // Coloring subtle themes.
@@ -68,7 +69,7 @@ $primary-border-subtle:             #9ECBF1; // blue-10
 
 $primary-text-emphasis-dark:        #9ECBF1; // blue-10
 $primary-bg-subtle-dark:            #020A32; // primary + 6 shade
-$primary-border-subtle-dark:        tint-color($primary, 30%);
+$primary-border-subtle-dark:        var(--color-primary-vivid-80);
 
 
 //*****************
@@ -122,8 +123,6 @@ $card-title-color-dark:             #7EB0E4; // blue-20
 $link-color:                        #253E92; // blue-80
 $link-color-dark:                   #7EB0E4; // blue-20
 $link-shade-percentage:             40%;
-// $link-hover-color:                  shift-color($link-color, $link-shade-percentage) !default;
-// $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 
 // Code
 $code-color:                        #590455;