lighten icon actions

src/lib/components/colors/Output.svelte

@@ -35,6 +35,7 @@
 
 <style lang="scss">
   li {
+    column-gap: 1ch;
     display: grid;
     grid-template:
       'copy color' auto

src/sass/components/_social-nav.scss

@@ -1,6 +1,6 @@
 [data-nav='social'] {
   --li-padding-bottom: 0;
-  --link: var(--text);
+  --link: var(--action-light);
   --link-focus: var(--action);
 
   a {

src/sass/config/color/_ui.scss

@@ -16,3 +16,8 @@ $warning: tools.shade(brand.$brand-pink, 5%);
 $action: tools.shade(brand.$brand-pink, 15%);
 $active: brand.$brand-blue;
 $success: oklab(51.527% -0.099 0.0131);
+$action-light: color.adjust(
+  brand.$brand-blue,
+  $saturation: -45%,
+  $lightness: 10%
+);

src/sass/config/scale/_ui.scss

@@ -11,7 +11,7 @@ $logo: 12rem;
 $swatch: 3.25rem;
 $icon-size-default: 1.125em;
 $icon-small: 0.65em;
-$icon-medium: 1.65em;
+$icon-medium: 1.5em;
 $ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;

src/sass/patterns/_buttons.scss

@@ -18,7 +18,7 @@ button {
   border: var(--btn-border-width, var(--border-width, 0)) solid
     var(--btn-border-color-active, var(--btn-border-color, var(--text)));
   border-radius: var(--border-radius);
-  color: var(--btn-text-color, var(--text));
+  color: var(--btn-color, var(--text));
   cursor: pointer;
   display: inline-flex;
   padding: var(--btn-padding-block, var(--half-shim))
@@ -30,15 +30,16 @@ button {
   &:hover,
   &:focus {
     background-color: var(--btn-bg-color-active, var(--text));
-    color: var(--btn-text-color-active, var(--action));
+    color: var(--btn-color-active, var(--action));
   }
 }
 
 [data-btn~='icon'] {
   --btn-bg-color-active: transparent;
   --btn-border-width: 0;
   --btn-padding-inline: var(--half-shim);
-  --btn-text-color-active: var(--action);
+  --btn-color-active: var(--action);
+  --btn-color: var(--action-light);
 
   &:focus-visible {
     --outline-width: 0;