@dscout/particle 1.0.0-alpha.3 → 1.0.0-alpha.4

package/styles/components/buttons/_base.scss

@@ -8,7 +8,7 @@
 
   appearance: none;
   background-color: var(--Button____bg-color);
-  border-bottom: none; // Clears the border set by `<a>` elements.
+  border: none;
   border-radius: var(--Button____radius);
   color: var(--Button____color);
   cursor: pointer;
@@ -28,7 +28,7 @@
 
   &:hover {
     background-color: var(--Button--hover____bg-color);
-    border-bottom: none; // Clears the border set by `<a>` elements.
+
     color: var(--Button--hover____color);
   }
 
@@ -99,11 +99,57 @@
 
 // === COLORS === //
 
+.Button--color-white {
+  @include generate-button-color-variables((
+    "Button____bg-color": var(--color--white),
+    "Button--hover____bg-color": rgba(var(--color--white-rgb), .9),
+    "Button--active____bg-color": rgba(var(--color--white-rgb), .85),
+
+    "Button____color": var(--color--black),
+  
+    "Button--glass____bg-color": rgba(var(--color--white-rgb), .1),
+    "Button--glass--hover____bg-color": rgba(var(--color--white-rgb), .2),
+    "Button--glass--active____bg-color": rgba(var(--color--white-rgb), .25),
+    "Button--glass____color": var(--color--white),
+    "Button--glass--hover____color": var(--color--white),
+    "Button--glass--active____color": var(--color--white),
+  
+    "Button--outline____b-color": rgba(var(--color--white-rgb), .5),
+    "Button--outline--hover____b-color": rgba(var(--color--white-rgb), .7),
+    "Button--outline--active____b-color": rgba(var(--color--white-rgb), .8),
+    "Button--outline____color": var(--color--white)
+  ));
+}
+
+.Button--color-black {
+  @include generate-button-color-variables((
+    "Button____bg-color": var(--color--black),
+    "Button--hover____bg-color": rgba(var(--color--black-rgb), .9),
+    "Button--active____bg-color": rgba(var(--color--black-rgb), .85),
+
+    "Button____color": var(--color--white),
+  
+    "Button--glass____bg-color": rgba(var(--color--black-rgb), .1),
+    "Button--glass--hover____bg-color": rgba(var(--color--black-rgb), .2),
+    "Button--glass--active____bg-color": rgba(var(--color--black-rgb), .25),
+    "Button--glass____color": var(--color--black),
+    "Button--glass--hover____color": var(--color--black),
+    "Button--glass--active____color": var(--color--black),
+  
+    "Button--outline____b-color": rgba(var(--color--black-rgb), .5),
+    "Button--outline--hover____b-color": rgba(var(--color--black-rgb), .7),
+    "Button--outline--active____b-color": rgba(var(--color--black-rgb), .8),
+    "Button--outline____color": var(--color--black)
+  ));
+}
+
 .Button--color-alert {
   @include generate-button-color-variables((
     "Button____bg-color": var(--color--alert),
     "Button--hover____bg-color": var(--color--alert-dark),
     "Button--active____bg-color": var(--color--alert-darkest),
+
+    "Button____color": var(--color--white),
   
     "Button--glass____bg-color": rgba(var(--color--alert-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--alert-rgb), .2),
@@ -125,10 +171,14 @@
     "Button--hover____bg-color": var(--color--close-dark),
     "Button--active____bg-color": var(--color--close-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--close-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--close-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--close-rgb), .25),
-    "Button--glass____color": var(--color--close),
+    "Button--glass____color": var(--color--close-dark),
+    "Button--glass--hover____color": var(--color--close-darkest),
+    "Button--glass--active____color": var(--color--close-darkest),
 
     "Button--outline____b-color": rgba(var(--color--close-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--close-rgb), .7),
@@ -143,6 +193,8 @@
     "Button--hover____bg-color": var(--color--coachmark-dark),
     "Button--active____bg-color": var(--color--coachmark-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--coachmark-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--coachmark-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--coachmark-rgb), .25),
@@ -163,6 +215,8 @@
     "Button--hover____bg-color": var(--color--dscout-dark),
     "Button--active____bg-color": var(--color--dscout-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--dscout-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--dscout-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--dscout-rgb), .25),
@@ -183,10 +237,14 @@
     "Button--hover____bg-color": var(--color--archive-dark),
     "Button--active____bg-color": var(--color--archive-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--archive-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--archive-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--archive-rgb), .25),
-    "Button--glass____color": var(--color--archive),
+    "Button--glass____color": var(--color--archive-dark),
+    "Button--glass--hover____color": var(--color--archive-darkest),
+    "Button--glass--active____color": var(--color--archive-darkest),
 
     "Button--outline____b-color": rgba(var(--color--archive-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--archive-rgb), .7),
@@ -197,10 +255,10 @@
 
 .Button--color-none {
   @include generate-button-color-variables((
-    "Button____bg-color": rgba(var(--color---main-rgb), 0),
+    "Button____bg-color": rgba(var(--color--main-rgb), 0),
     "Button--hover____bg-color": rgba(var(--color--main-rgb), .05),
     "Button--active____bg-color": rgba(var(--color--main-rgb), .08),
-    "Button____color": var(--color--gray-1),
+    "Button____color": rgba(var(--color--main-rgb), .9),
     "Button--hover____color": rgba(var(--color--main-rgb), .8),
     "Button--active____color": var(--color--main),
 
@@ -224,10 +282,14 @@
     "Button--hover____bg-color": var(--color--success-dark),
     "Button--active____bg-color": var(--color--success-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--success-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--success-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--success-rgb), .25),
-    "Button--glass____color": var(--color--success),
+    "Button--glass____color": var(--color--success-dark),
+    "Button--glass--hover____color": var(--color--success-darkest),
+    "Button--glass--active____color": var(--color--success-darkest),
 
     "Button--outline____b-color": rgba(var(--color--success-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--success-rgb), .7),
@@ -242,10 +304,14 @@
     "Button--hover____bg-color": var(--color--screener-dark),
     "Button--active____bg-color": var(--color--screener-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--screener-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--screener-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--screener-rgb), .25),
-    "Button--glass____color": var(--color--screener),
+    "Button--glass____color": var(--color--screener-dark),
+    "Button--glass--hover____color": var(--color--screener-darkest),
+    "Button--glass--active____color": var(--color--screener-darkest),
 
     "Button--outline____b-color": rgba(var(--color--screener-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--screener-rgb), .7),
@@ -260,10 +326,14 @@
     "Button--hover____bg-color": var(--color--diary-dark),
     "Button--active____bg-color": var(--color--diary-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--diary-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--diary-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--diary-rgb), .25),
-    "Button--glass____color": var(--color--diary),
+    "Button--glass____color": var(--color--diary-dark),
+    "Button--glass--hover____color": var(--color--diary-darkest),
+    "Button--glass--active____color": var(--color--diary-darkest),
 
     "Button--outline____b-color": rgba(var(--color--diary-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--diary-rgb), .7),
@@ -277,12 +347,15 @@
     "Button____bg-color": var(--color--note),
     "Button--hover____bg-color": var(--color--note-dark),
     "Button--active____bg-color": var(--color--note-darkest),
-    "Button____color": var(--color--archive),
+
+    "Button____color": var(--color--archive-darkest),
 
     "Button--glass____bg-color": rgba(var(--color--note-rgb), .25),
     "Button--glass--hover____bg-color": rgba(var(--color--note-rgb), .35),
     "Button--glass--active____bg-color": rgba(var(--color--note-rgb), .4),
-    "Button--glass____color": var(--color--archive),
+    "Button--glass____color": var(--color--archive-dark),
+    "Button--glass--hover____color": var(--color--archive-darkest),
+    "Button--glass--active____color": var(--color--archive-darkest),
 
     "Button--outline____b-color": rgba(var(--color--note-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--note-rgb), .7),
@@ -297,10 +370,14 @@
     "Button--hover____bg-color": var(--color--test-dark),
     "Button--active____bg-color": var(--color--test-darkest),
 
+    "Button____color": var(--color--white),
+
     "Button--glass____bg-color": rgba(var(--color--test-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--test-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--test-rgb), .25),
-    "Button--glass____color": var(--color--test),
+    "Button--glass____color": var(--color--test-dark),
+    "Button--glass--hover____color": var(--color--test-darkest),
+    "Button--glass--active____color": var(--color--test-darkest),
 
     "Button--outline____b-color": rgba(var(--color--test-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--test-rgb), .7),
@@ -314,12 +391,15 @@
     "Button____bg-color": var(--color--invert),
     "Button--hover____bg-color": rgba(var(--color--invert-rgb), .9),
     "Button--active____bg-color": rgba(var(--color--invert-rgb), .85),
+
     "Button____color": var(--color--main),
 
     "Button--glass____bg-color": rgba(var(--color--invert-rgb), .1),
     "Button--glass--hover____bg-color": rgba(var(--color--invert-rgb), .2),
     "Button--glass--active____bg-color": rgba(var(--color--invert-rgb), .25),
     "Button--glass____color": var(--color--invert),
+    "Button--glass--hover____color": var(--color--invert),
+    "Button--glass--active____color": var(--color--invert),
 
     "Button--outline____b-color": rgba(var(--color--invert-rgb), .4),
     "Button--outline--hover____b-color": rgba(var(--color--invert-rgb), .7),

package/styles/components/buttons/themes/_theme_builder.scss

@@ -29,9 +29,9 @@ $default-color-variables: (
   "Button--hover____color": var(--Button____color),
   "Button--active____color": var(--Button____color),
 
-  "Button--shadow____shadow": 0 5px 8px 0px rgba(var(--color--main-rgb), .25),
-  "Button--shadow--hover____shadow": 0 15px 20px 0px rgba(var(--color--main-rgb), .3),
-  "Button--shadow--active____shadow": 0 2px 3px 0px rgba(var(--color--main-rgb), .25),
+  "Button--shadow____shadow": 0 5px 8px 0px rgba(var(--color--shadow-rgb), .25),
+  "Button--shadow--hover____shadow": 0 15px 20px 0px rgba(var(--color--shadow-rgb), .3),
+  "Button--shadow--active____shadow": 0 2px 3px 0px rgba(var(--color--shadow-rgb), .25),
 
   "Button--glass____bg-color": rgba(var(--color--main-rgb), .1),
   "Button--glass--hover____bg-color": rgba(var(--color--main-rgb), .2),

package/styles/components/dropdown/_base.scss

@@ -27,6 +27,7 @@
 
 .Dropdown__Toggle {
   cursor: default;
+  margin-bottom: 0;
   position: relative;
 
   &--disabled {

package/styles/components/grid/_base.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import 'themes/bandit';
 @import 'themes/researcher';
 
@@ -18,7 +19,7 @@
     @for $dem from $num through 10 {
       > .Column--#{$num}of#{$dem} {
         flex-grow: 0;
-        flex-basis: percentage($num / $dem);
+        flex-basis: percentage(math.div($num, $dem));
       }
     }
   }

package/styles/components/input_group/_base.scss

@@ -19,7 +19,7 @@
   
   .Input-Group__Addon,
   .Input,
-  .btn {
+  .Button {
     border-radius: 0;
     height: 100%;
     position: relative;
@@ -28,7 +28,7 @@
   &:first-child {
     .Input-Group__Addon,
     .Input,
-    .btn {
+    .Button {
       border-bottom-left-radius: var(--Input____radius);
       border-top-left-radius: var(--Input____radius);
     }
@@ -37,7 +37,7 @@
   &:last-child {
     .Input-Group__Addon,
     .Input,
-    .btn {
+    .Button {
       border-bottom-right-radius: var(--Input____radius);
       border-top-right-radius: var(--Input____radius);
     }

package/styles/components/modal/base.scss

@@ -29,23 +29,23 @@
     transition-property: opacity, visibility;
   }
 
-  &--backdrop--coachmark {
+  &--backdrop-coachmark {
     background-color: rgba(var(--color--coachmark-rgb), .9);
   }
 
-  &--backdrop--default {
+  &--backdrop-default {
     background-color: var(--Modal__Wrapper____bg-color);
   }
 
-  &--backdrop--dscout {
+  &--backdrop-dscout {
     background-color: rgba(var(--color--dscout-rgb), 0.9);
   }
 
-  &--backdrop--main {
+  &--backdrop-main {
     background-color: rgba(var(--color--main-rgb), .7);
   }
 
-  &--backdrop--success {
+  &--backdrop-success {
     background-color: rgba(var(--color--success-rgb), .9);
   }
 }
@@ -55,12 +55,9 @@
   margin-top: auto !important;
   margin-bottom: auto !important;
   max-width: var(--Modal____max-width);
+  transform: translateY(0);
+  transition: transform var(--timing--rotate);
   width: 100%;
-
-  &--animation {
-    transform: translateY(0);
-    transition: transform var(--timing--rotate);
-  }
   
   &--hidden {
     transform: translateY(-1.428em);

package/styles/components/pill/_base.scss

@@ -20,7 +20,7 @@ $part-colors: (
   color: var(--Pill____color);
   display: inline-block;
   font-size: var(--font-size--base);
-  padding: 0.5em 1em;
+  padding: 0.125em 0.5em;
   position: relative;
 
   @for $num from 0 through 9 {

package/styles/components/toggle/_base.scss

@@ -3,7 +3,7 @@
 
 .Toggle {
   display: inline-block;
-  height: var(--Toggle__Switch____width);
+  height: var(--Toggle__Track____height);
   margin: 0;
   position: relative;
   vertical-align: top;

package/styles/components/tooltip/_base.scss

@@ -1,9 +1,16 @@
 @import 'themes/bandit';
 @import 'themes/researcher';
 
-.Tooltip__Container {
+.Tooltip-Container {
   outline: none;
   position: relative;
+
+  &:hover {
+    .Tooltip--visible-hover {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
 }
   
 .Tooltip {

package/styles/functions/_colors.scss

@@ -0,0 +1,33 @@
+@use 'sass:meta';
+
+@use '../color_schemes/base_colors';
+@use '../color_schemes/researcher_light_colors';
+@use '../color_schemes/researcher_dark_colors';
+@use '../color_schemes/bandit_light_colors';
+@use '../color_schemes/bandit_dark_colors';
+
+$-particle-colors-map: (
+  'base': meta.module-variables(base_colors),
+  'researcher-light': researcher_light_colors.$colors,
+  'researcher-dark': researcher_dark_colors.$colors,
+  'bandit-light': bandit_light_colors.$colors,
+  'bandit-dark': bandit_dark_colors.$colors,
+);
+
+/*
+* The `get-color` function allows consuming stylesheets to reference a
+* Particle color value via Sass. This provides an escape hatch for consuming
+* applications that need to generate derivative colors via Sass color functions.
+*                                                                         
+* In the vast majority of cases this should not be necessary. Consuming
+* applications can either use CSS variables for a preexisting shade of a color
+* or they can use the `-rgb` variant of a given color to apply opacity.
+*/
+
+@function get-color($color, $theme: 'base') {
+  @return map-get($-particle-colors-map, $theme, 'color--#{$color}');
+}
+
+@function extract-rgb($color) {
+  @return red($color), green($color), blue($color);
+}

package/styles/particle.scss

@@ -1,25 +1,3 @@
-/*
-@styleguide
-@title Usage
-
-Stylesheets are included in two formats: css and scss.
-
-Pre-compiled stylesheets are located in the lib directory of the build output.
-To import into a plain CSS file:
-
-```
-@import 'node_modules/@dscout/particle/lib/stylesheets/particle.css';
-@import 'node_modules/@dscout/particle/lib/stylesheets/particle.min.css';
-```
-
-The source scss file is located in the styles directory.
-You can import it into your own scss file like so:
-
-```
-@import '~@dscout/particle/styles/particle.scss';
-```
-*/
-
 @import 'reset';
 @import 'base';
 
@@ -61,6 +39,9 @@ You can import it into your own scss file like so:
 @import 'themes/researcher';
 @import 'themes/bandit';
 
+/* Color Schemes */
+@import 'color_schemes';
+
 /* Utility classes */
 @import 'utilities/alignment';
 @import 'utilities/borders';

package/styles/themes/_bandit.scss

@@ -1,13 +1,12 @@
-@import 'bandit_colors';
 @import 'theme_builder';
 
 .theme--bandit {
   @include generate-theme-variables((
     /* Shadows */
-    "shadow--s": 0 .125em 1em rgba(var(--color--main-rgb), .08),
-    "shadow--m": 0 .25em 2em rgba(var(--color--main-rgb), .12),
-    "shadow--l": 0 .375em 3em rgba(var(--color--main-rgb), .16),
-    "shadow--xl": 0 .5em 4em rgba(var(--color--main-rgb), .24),
+    "shadow--s": 0 .125em 1em rgba(var(--color--shadow-rgb), .08),
+    "shadow--m": 0 .25em 2em rgba(var(--color--shadow-rgb), .12),
+    "shadow--l": 0 .375em 3em rgba(var(--color--shadow-rgb), .16),
+    "shadow--xl": 0 .5em 4em rgba(var(--color--shadow-rgb), .24),
     
     /* Radii */
     "radius--tiny": .125em,
@@ -36,8 +35,7 @@
     "base____font-size": 1rem
   ));
 
-  /* Default inherited properties */
-  color: var(--base____color);
+  /* Set non-color inherited properties */
   font-family: var(--base____font-family);
   font-size: var(--base____font-size);
   line-height: var(--base____line-height);

package/styles/themes/_researcher.scss

@@ -1,11 +1,9 @@
-@import 'researcher_colors';
 @import 'theme_builder';
 
 .theme--researcher {
   @include generate-theme-variables();
 
-  /* Default inherited properties */
-  color: var(--base____color);
+  /* Set non-color inherited properties */
   font-family: var(--base____font-family);
   font-size: var(--base____font-size);
   line-height: var(--base____line-height);

package/styles/themes/_theme_builder.scss

@@ -1,152 +1,9 @@
-@function extract-rgb($color) {
-  @return red($color), green($color), blue($color);
-}
-
 $default-variables: (
-  /* Monotone color palette */
-  "color--main": $color--main,
-  "color--main-rgb": extract-rgb($color--main),
-
-  "color--invert": $color--invert,
-  "color--invert-rgb": extract-rgb($color--invert),
-
-  "color--none": $color--none,
-  
-  "color--gray-1": $color--gray-1,
-  "color--gray-1-rgb": extract-rgb($color--gray-1),
-
-  "color--gray-2": $color--gray-2,
-  "color--gray-2-rgb": extract-rgb($color--gray-2),
-
-  "color--gray-3": $color--gray-3,
-  "color--gray-3-rgb": extract-rgb($color--gray-3),
-
-  "color--gray-4": $color--gray-4,
-  "color--gray-4-rgb": extract-rgb($color--gray-4),
-
-  "color--gray-5": $color--gray-5,
-  "color--gray-5-rgb": extract-rgb($color--gray-5),
-
-  "color--gray-6": $color--gray-6,
-  "color--gray-6-rgb": extract-rgb($color--gray-6),
-  
-  /* Primary color palette */
-  "color--dscout-light": $color--dscout-light,
-  "color--dscout-outline": $color--dscout-outline,
-  "color--dscout": $color--dscout,
-  "color--dscout-rgb": extract-rgb($color--dscout),
-  "color--dscout-dark": $color--dscout-dark,
-  "color--dscout-darkest": $color--dscout-darkest,
-
-  "color--alert-light": $color--alert-light,
-  "color--alert-outline": $color--alert-outline,
-  "color--alert":  $color--alert,
-  "color--alert-rgb":  extract-rgb($color--alert),
-  "color--alert-dark": $color--alert-dark,
-  "color--alert-darkest": $color--alert-darkest,
-
-  "color--coachmark-light": $color--coachmark-light,
-  "color--coachmark-outline": $color--coachmark-outline,
-  "color--coachmark":  $color--coachmark,
-  "color--coachmark-rgb": extract-rgb($color--coachmark),
-  "color--coachmark-dark": $color--coachmark-dark,
-  "color--coachmark-darkest": $color--coachmark-darkest,
-
-  /* Secondary color palette */
-  "color--close-light": $color--close-light,
-  "color--close": $color--close,
-  "color--close-rgb": extract-rgb($color--close),
-  "color--close-dark": $color--close-dark,
-  "color--close-darkest": $color--close-darkest,
-
-  "color--success-light": $color--success-light,
-  "color--success": $color--success,
-  "color--success-rgb": extract-rgb($color--success),
-  "color--success-dark": $color--success-dark,
-  "color--success-darkest": $color--success-darkest,
-
-  "color--archive-light": $color--archive-light,
-  "color--archive": $color--archive,
-  "color--archive-rgb": extract-rgb($color--archive),
-  "color--archive-dark": $color--archive-dark,
-  "color--archive-darkest": $color--archive-darkest,
-
-  "color--note-light": $color--note-light,
-  "color--note": $color--note,
-  "color--note-rgb": extract-rgb($color--note),
-  "color--note-dark": $color--note-dark,
-  "color--note-darkest": $color--note-darkest,
-
-  "color--marker-light": $color--marker-light,
-  "color--marker": $color--marker,
-  "color--marker-rgb": extract-rgb($color--marker),
-  "color--marker-dark": $color--marker-dark,
-  "color--marker-darkest": $color--marker-darkest,
-
-  "color--test-light": $color--test-light,
-  "color--test": $color--test,
-  "color--test-rgb": extract-rgb($color--test),
-  "color--test-dark": $color--test-dark,
-  "color--test-darkest": $color--test-darkest,
-
-  "color--scout-light": $color--scout-light,
-  "color--scout": $color--scout,
-  "color--scout-rgb": extract-rgb($color--scout),
-  "color--scout-dark": $color--scout-dark,
-  "color--scout-darkest": $color--scout-darkest,
-
-  /* Part colors */
-  "color--part-0": $color--part-0,
-  "color--part-0-rgb": extract-rgb($color--part-0),
-
-  "color--part-1": $color--part-1,
-  "color--part-1-rgb": extract-rgb($color--part-1),
-
-  "color--part-2": $color--part-2,
-  "color--part-2-rgb": extract-rgb($color--part-2),
-
-  "color--part-3": $color--part-3,
-  "color--part-3-rgb": extract-rgb($color--part-3),
-
-  "color--part-4": $color--part-4,
-  "color--part-4-rgb": extract-rgb($color--part-4),
-
-  "color--part-5": $color--part-5,
-  "color--part-5-rgb": extract-rgb($color--part-5),
-
-  "color--part-6": $color--part-6,
-  "color--part-6-rgb": extract-rgb($color--part-6),
-
-  "color--part-7": $color--part-7,
-  "color--part-7-rgb": extract-rgb($color--part-7),
-
-  "color--part-8": $color--part-8,
-  "color--part-8-rgb": extract-rgb($color--part-8),
-
-  "color--part-9": $color--part-9,
-  "color--part-9-rgb": extract-rgb($color--part-9),
-
-  /* Product color aliases */
-  "color--live": $color--alert,
-  "color--live-rgb": extract-rgb($color--live),
-  "color--live-dark": $color--alert-dark,
-  "color--live-darkest": $color--alert-darkest,
-
-  "color--diary": $color--diary,
-  "color--diary-rgb": extract-rgb($color--diary),
-  "color--diary-dark": $color--diary-dark,
-  "color--diary-darkest": $color--diary-darkest,
-
-  "color--screener": $color--screener,
-  "color--screener-rgb": extract-rgb($color--screener),
-  "color--screener-dark": $color--screener-dark,
-  "color--screener-darkest": $color--screener-darkest,
-
   /* Shadows */
-  "shadow--s": 0 .22rem .5rem rgba(var(--color--main-rgb), 0.03),
-  "shadow--m": 0 .22rem .5rem rgba(var(--color--main-rgb), 0.08),
-  "shadow--l": 0 1em 2em rgba(var(--color--main-rgb), 0.1),
-  "shadow--xl": 0 1em 2em rgba(var(--color--main-rgb), 0.2),
+  "shadow--s": 0 .22rem .5rem rgba(var(--color--shadow-rgb), 0.03),
+  "shadow--m": 0 .22rem .5rem rgba(var(--color--shadow-rgb), 0.08),
+  "shadow--l": 0 1em 2em rgba(var(--color--shadow-rgb), 0.1),
+  "shadow--xl": 0 1em 2em rgba(var(--color--shadow-rgb), 0.2),
 
   /* Radii */
   "radius--none": 0,
@@ -199,8 +56,6 @@ $default-variables: (
   "timing--rotate": 0.6s,
 
   /* Body variables */
-  "base____bg-color": var(--color--gray-5),
-  "base____color": var(--color--main),
   "base____font-family": var(--font--stack),
   "base____font-size": .875rem,
   "base____line-height": var(--line-height--copy)