change Sass configuaration

.stylelintrc.yml

@@ -36,7 +36,7 @@ rules:
     - message: 'Expected mixin to be kebab-case'
   scss/at-rule-conditional-no-parentheses: null
   scss/dollar-variable-pattern:
-    - '^([_|-]*[a-z][a-z0-9]*)(-[a-z0-9]+)*-*$'
+    - '^([_|-]*[a-z][a-z0-9]*)(-{1,2}[a-z0-9]+)*-*$'
     - message: 'Expected variable to be kebab-case'
 
   # Disable for Prettier

src/scss/components/_events.scss

@@ -1,11 +1,11 @@
-@use '~accoutrement/sass/tools';
+@use '../config';
 
 .event {
   margin-bottom: var(--newline);
 }
 
 .event-meta {
-  @include tools.font-family('alt');
+  @include config.font-family('alt');
 
   font-size: var(--small);
 }
@@ -15,7 +15,7 @@
 }
 
 .event-links {
-  @include tools.wrap-content('[' ']');
+  @include config.wrap-content('[' ']');
 
   font-size: var(--small);
   font-style: italic;

src/scss/components/_logo-grid.scss

@@ -1,5 +1,3 @@
-@use '~accoutrement/sass/tools';
-
 .logo-grid {
   --column: content;
   --fill: var(--feature);

src/scss/components/_post.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use '../config';
 
 [data-post] {
   --post-margin: var(--gutter);
@@ -32,7 +32,7 @@
 }
 
 [data-post='link'] {
-  @include tools.transition('pop');
+  @include config.transition('pop');
 
   --hero-height: var(--grid-hero);
   --item-title: 1rem;
@@ -58,7 +58,7 @@
     display: block;
 
     &::after {
-      @include tools.z-index('bump');
+      @include config.z-index('bump');
 
       content: '';
       display: block;
@@ -77,7 +77,7 @@
 // --------
 
 .type-flag {
-  @include tools.font-family('alt');
+  @include config.font-family('alt');
 
   background: var(--highlight);
   color: var(--bg);

src/scss/components/_resources.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use '../config';
 
 // pagination
 
@@ -17,7 +17,7 @@
     [title-end];
   margin: var(--double-gutter) 0;
 
-  @include tools.above('wide-break') {
+  @include config.above('wide-break') {
     --justify-nav: initial;
 
     grid-template-columns:

src/scss/components/_work-grid.scss

@@ -1,12 +1,12 @@
-@use '~accoutrement/sass/tools';
+@use '../config';
 
 [data-work] {
   --column: full;
 
   [data-work='summary'] + & {
     --pull-sample: var(--spacer);
 
-    @include tools.above('wide-break') {
+    @include config.above('wide-break') {
       --pull-sample: calc(var(--spacer) * -1);
     }
   }
@@ -45,7 +45,7 @@
   margin: var(--gutter) var(--page-margin);
   max-width: var(--wide-page);
 
-  @include tools.above('wide-page') {
+  @include config.above('wide-page') {
     grid-template-areas:
       'desktop desktop2 desktop2'
       'desktop mobile ..........'

src/scss/config/_animation.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools' as *;
+@use 'tools' as *;
 
 /// # Animation Config
 /// Accoutrement maps for storing global animation tokens.

src/scss/config/_fonts.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use 'tools';
 @use '~sassdoc-theme-herman/scss/utilities' as herman;
 @use 'sass:meta';
 

src/scss/config/_index.scss

@@ -1,6 +1,21 @@
+@forward 'tools';
 @forward 'animation';
 @forward 'color';
 @forward 'focus';
 @forward 'fonts';
 @forward 'layout';
 @forward 'scale';
+
+@use 'tools';
+@use 'sass:meta';
+@use 'color/brand';
+@use 'color/background';
+@use 'color/ccs-defaults';
+@use 'color/content';
+@use 'color/config' as color-config;
+
+@include tools.add-colors(meta.module-variables('brand'));
+@include tools.add-colors(meta.module-variables('background'));
+@include tools.add-colors(meta.module-variables('ccs-defaults'));
+@include tools.add-colors(meta.module-variables('content'));
+@include tools.add-colors(meta.module-variables('color-config'));

src/scss/config/_layout.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools' as *;
+@use 'tools' as *;
 
 // Times
 // -----

src/scss/config/_scale.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use 'tools';
 @use '~sassdoc-theme-herman/scss/utilities' as herman;
 @use 'sass:map';
 
@@ -14,12 +14,12 @@
 /// that adapts to context
 /// @ratios
 /// @group config-scale
-$ratios: (
+$text-ratios: (
   'line-height': 1.4,
 );
 
-@include tools.add-ratios($ratios);
-@include herman.add('ratios', 'ratios', $ratios);
+@include tools.add-ratios($text-ratios);
+@include herman.add('ratios', 'text-ratios', $text-ratios);
 
 // Font Sizes
 // ----------

src/scss/config/_tools.scss

@@ -0,0 +1,3 @@
+@forward '~accoutrement/sass/tools' with (
+  $color-var-prefix: ''
+);

src/scss/config/color/_background.scss

@@ -0,0 +1,27 @@
+/// ## Background Colors
+/// -----------------
+/// Rather than using the brand colors directly,
+/// we use them to set default values for generated variables.
+/// This provides a mapping between semantic background use-cases,
+/// and automatically-generated color variables.
+/// @colors background-colors
+/// @group config-color
+
+$bg: var(--ccs-neutral--bg-full);
+$bg-full: var(--ccs--bg-full);
+$callout: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5));
+$callout-neutral: var(--ccs-neutral--bg5);
+$callout-fade: hsla(
+  var(--ccs-h--prime),
+  var(--ccs-s--bg2),
+  var(--ccs-l--bg5),
+  var(--ccs-fade)
+);
+$callout-special: var(--ccs-special--bg5-fade);
+$overlay: var(--ccs-neutral--bg6-fade);
+$overlay-banner: hsla(
+  var(--ccs-h--neutral),
+  var(--ccs-s--bg6),
+  var(--ccs-l--bg6),
+  40%
+);

src/scss/config/color/_brand.scss

@@ -0,0 +1,12 @@
+/// ## Brand Colors
+/// ------------
+/// The brand is defined by our primary brand blue,
+/// along with secondary pink and orange base colors.
+/// These colors are rarely used directly,
+/// but form the basis of our CSS color variables.
+/// @colors brand-colors
+/// @group config-color
+
+$brand-blue: hsl(195deg, 52%, 31%);
+$brand-orange: hsl(24deg, 100%, 62%);
+$brand-pink: hsl(330deg, 100%, 45%);

src/scss/config/color/_ccs-defaults.scss

@@ -0,0 +1,10 @@
+/// ## CCS Defaults
+/// ------------
+/// The Cascading Color System has a few settings
+/// that we can most easily override with CSS variables
+/// @colors ccs-colors
+/// @group config-color
+
+$ccs-neutral--theme: var(--ccs-h--prime);
+$ccs-background: var(--bg);
+$ccs-color: var(--text);