@graupl/graupl 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/theme/theme.css

@@ -1,70 +1,2 @@
-@layer graupl.theme{
-  :root{
-    background:var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));
-    color:var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));
-    font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
-    font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
-  }
-  .dark-mode{
-    --graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100, var(--graupl-primary--900, hsl(219, 100%, 10%)));
-    --graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200, var(--graupl-primary--800, hsl(219, 90%, 20%)));
-    --graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300, var(--graupl-primary--700, hsl(219, 80%, 35%)));
-    --graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400, var(--graupl-primary--600, hsl(219, 75%, 45%)));
-    --graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
-    --graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600, var(--graupl-primary--400, hsl(219, 75%, 55%)));
-    --graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700, var(--graupl-primary--300, hsl(219, 80%, 65%)));
-    --graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800, var(--graupl-primary--200, hsl(219, 90%, 80%)));
-    --graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900, var(--graupl-primary--100, hsl(219, 100%, 95%)));
-    --graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
-    --graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
-    --graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
-    --graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
-    --graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
-    --graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
-    --graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
-    --graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
-    --graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
-    --graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
-    --graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
-    --graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
-    --graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
-    --graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
-    --graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
-    --graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
-    --graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
-    --graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
-    color-scheme:dark;
-  }
-  .light-mode{
-    --graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));
-    --graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));
-    --graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));
-    --graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));
-    --graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
-    --graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));
-    --graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));
-    --graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));
-    --graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));
-    --graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
-    --graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
-    --graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
-    --graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
-    --graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
-    --graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
-    --graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
-    --graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
-    --graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
-    --graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
-    --graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
-    --graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
-    --graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
-    --graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
-    --graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
-    --graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
-    --graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
-    --graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
-    color-scheme:light;
-  }
-}
-
+@layer graupl.theme{:root{background:var(--graupl-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));font-family:var(--graupl-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-font-size,clamp(.85rem,.8rem + .5vw,1.25rem))}.dark-mode{--graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100,var(--graupl-primary--900,#001233));--graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100,var(--graupl-tertiary--900,#2f0412));--graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900,var(--graupl-tertiary--100,#fde7ef));color-scheme:dark}.light-mode{--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412));color-scheme:light}}
 /*# sourceMappingURL=theme.css.map */

package/dist/theme/theme.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,6ICkMyB;IDjMzB,wICiOyB;IDhOzB,wIC0cU;IDzcV,0EC0cQ;EC/cV;EFSA;IAEE,2HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,2HAAA;IAGA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IAGA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IAEA,iBAAA;EEbF;EFiBA;IAEE,4HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,4HAAA;IAGA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IAGA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IAEA,kBAAA;EErBF;AACF","file":"theme.css"}
+{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI,oBCAF,MACE,uJC2GS,CD1GT,kJCsGS,CDrGT,gICiGU,CDhGV,oEENF,CFUA,WAGM,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,6GAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAIJ,iBEaF,CFTA,YAGM,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAIJ,kBEgCF,CACF","file":"theme.css"}

package/dist/utilities/background/background.css

@@ -0,0 +1 @@
+body:before{border-bottom:2px solid #000;content:"Error: Undefined variable.\a   \2577 \a 6 \2502    @if defaults.$use-important {\a   \2502        ^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   scss/functions/_important.scss 6:7             insert()\a   scss/utilities/background/_index.scss 14:21    @content\a   scss/mixins/_layer.scss 11:7                   layer()\a   scss/utilities/background/_index.scss 8:1      @forward\a   scss/utilities/background/background.scss 3:1  root stylesheet";display:block;font-family:Source Code Pro,SF Mono,Monaco,Inconsolata,Fira Mono,Droid Sans Mono,monospace,monospace;margin-bottom:1em;padding:1em;white-space:pre}

package/dist/utilities/colors/colors.css

@@ -0,0 +1,2 @@
+@layer graupl.utilities{.bg-primary-100{background:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.text-primary-100{color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.bg-primary-200{background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.text-primary-200{color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.bg-primary-300{background:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.text-primary-300{color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.bg-primary-400{background:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.text-primary-400{color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.bg-primary-500{background:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.text-primary-500{color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.bg-primary-600{background:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.text-primary-600{color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.bg-primary-700{background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.text-primary-700{color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.bg-primary-800{background:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.text-primary-800{color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.bg-primary-900{background:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.text-primary-900{color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.bg-secondary-100{background:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.text-secondary-100{color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.bg-secondary-200{background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.text-secondary-200{color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.bg-secondary-300{background:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.text-secondary-300{color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.bg-secondary-400{background:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.text-secondary-400{color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.bg-secondary-500{background:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.text-secondary-500{color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.bg-secondary-600{background:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.text-secondary-600{color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.bg-secondary-700{background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.text-secondary-700{color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.bg-secondary-800{background:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.text-secondary-800{color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.bg-secondary-900{background:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.text-secondary-900{color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.bg-tertiary-100{background:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.text-tertiary-100{color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.bg-tertiary-200{background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.text-tertiary-200{color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.bg-tertiary-300{background:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.text-tertiary-300{color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.bg-tertiary-400{background:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.text-tertiary-400{color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.bg-tertiary-500{background:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.text-tertiary-500{color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.bg-tertiary-600{background:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.text-tertiary-600{color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.bg-tertiary-700{background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.text-tertiary-700{color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.bg-tertiary-800{background:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.text-tertiary-800{color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.bg-tertiary-900{background:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}.text-tertiary-900{color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}}
+/*# sourceMappingURL=colors.css.map */

package/dist/utilities/colors/colors.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/utilities/colors/_index.scss","colors.css"],"names":[],"mappings":"AASI,wBCGE,gBACE,wICTN,CDYI,kBACE,mICVN,CDKI,gBACE,wICHN,CDMI,kBACE,mICJN,CDDI,gBACE,wICGN,CDAI,kBACE,mICEN,CDPI,gBACE,wICSN,CDNI,kBACE,mICQN,CDbI,gBACE,wICeN,CDZI,kBACE,mICcN,CDnBI,gBACE,wICqBN,CDlBI,kBACE,mICoBN,CDzBI,gBACE,wIC2BN,CDxBI,kBACE,mIC0BN,CD/BI,gBACE,wICiCN,CD9BI,kBACE,mICgCN,CDrCI,gBACE,wICuCN,CDpCI,kBACE,mICsCN,CD3CI,kBACE,8IC6CN,CD1CI,oBACE,yIC4CN,CDjDI,kBACE,8ICmDN,CDhDI,oBACE,yICkDN,CDvDI,kBACE,8ICyDN,CDtDI,oBACE,yICwDN,CD7DI,kBACE,8IC+DN,CD5DI,oBACE,yIC8DN,CDnEI,kBACE,8ICqEN,CDlEI,oBACE,yICoEN,CDzEI,kBACE,8IC2EN,CDxEI,oBACE,yIC0EN,CD/EI,kBACE,8ICiFN,CD9EI,oBACE,yICgFN,CDrFI,kBACE,8ICuFN,CDpFI,oBACE,yICsFN,CD3FI,kBACE,8IC6FN,CD1FI,oBACE,yIC4FN,CDjGI,iBACE,2ICmGN,CDhGI,mBACE,sICkGN,CDvGI,iBACE,2ICyGN,CDtGI,mBACE,sICwGN,CD7GI,iBACE,2IC+GN,CD5GI,mBACE,sIC8GN,CDnHI,iBACE,2ICqHN,CDlHI,mBACE,sICoHN,CDzHI,iBACE,wIC2HN,CDxHI,mBACE,mIC0HN,CD/HI,iBACE,2ICiIN,CD9HI,mBACE,sICgIN,CDrII,iBACE,2ICuIN,CDpII,mBACE,sICsIN,CD3II,iBACE,2IC6IN,CD1II,mBACE,sIC4IN,CDjJI,iBACE,2ICmJN,CDhJI,mBACE,sICkJN,CACF","file":"colors.css"}

package/docs/.vitepress/config.js

@@ -1,11 +1,51 @@
 import { defineConfig } from "vitepress";
 
+// Get the current version from the package.json file.
+import { version } from "../../package.json";
+
 export default defineConfig({
   lang: "en-US",
   title: "Graupl",
   description: "A modular and modern CSS framework.",
   base: "/graupl/",
   themeConfig: {
-    socialLinks: [{ icon: "github", url: "https://github.com/Graupl/graupl" }],
+    nav: [
+      {
+        text: "Docs",
+        link: "/introduction",
+      },
+      {
+        text: version,
+        items: [
+          {
+            text: "Current release",
+            link: `https://github.com/Graupl/graupl/releases/tag/v${version}`,
+          },
+          {
+            text: "Changelog",
+            link: "https://github.com/Graupl/graupl/blob/1.x/CHANGELOG.md",
+          },
+          {
+            text: "Contributing",
+            link: "https://github.com/Graupl/graupl/blob/1.x/.github/CONTRIBUTING.md",
+          },
+        ],
+      },
+    ],
+
+    socialLinks: [{ icon: "github", link: "https://github.com/Graupl/graupl" }],
+
+    sidebar: {
+      "/": [
+        {
+          text: "Getting Started",
+          items: [{ text: "Introduction", link: "/introduction" }],
+        },
+        {
+          text: "Advenced Topics",
+          items: [{ text: "Compiling Graupl", link: "/compiling-graupl" }],
+        },
+      ],
+    },
   },
 });

package/docs/.vitepress/theme/custom.scss

@@ -1,35 +1,35 @@
-@use "../../../scss/theme/variables" as theme;
+@use "../../../scss/functions/theme";
 
 :root {
-  --vp-c-brand: #{theme.$theme-light--primary--700};
-  --vp-c-brand-1: #{theme.$theme-light--primary--700};
-  --vp-c-brand-2: #{theme.$theme-light--primary--700};
-  --vp-c-brand-3: #{theme.$theme-light--primary--700};
-  --vp-c-bg: #{theme.$theme-light--primary--100};
-  --vp-c-bg-alt: #{theme.$theme-light--primary--100};
-  --vp-c-bg-elv: #{theme.$theme-light--primary--100};
-  --vp-c-bg-soft: #{theme.$theme-light--primary--100};
-  --vp-c-border: #{theme.$theme-light--tertiary--700};
-  --vp-c-divider: #{theme.$theme-light--secondary--700};
-  --vp-c-gutter: #{theme.$theme-light--secondary--700};
-  --vp-c-text-1: #{theme.$theme-light--primary--900};
-  --vp-c-text-2: #{theme.$theme-light--primary--900};
-  --vp-c-text-3: #{theme.$theme-light--primary--900};
+  --vp-c-brand: #{theme.get(primary, 700)};
+  --vp-c-brand-1: #{theme.get(primary, 700)};
+  --vp-c-brand-2: #{theme.get(primary, 700)};
+  --vp-c-brand-3: #{theme.get(primary, 700)};
+  --vp-c-bg: #{theme.get(primary, 100)};
+  --vp-c-bg-alt: #{theme.get(primary, 100)};
+  --vp-c-bg-elv: #{theme.get(primary, 100)};
+  --vp-c-bg-soft: #{theme.get(primary, 100)};
+  --vp-c-border: #{theme.get(tertiary, 700)};
+  --vp-c-divider: #{theme.get(secondary, 700)};
+  --vp-c-gutter: #{theme.get(secondary, 700)};
+  --vp-c-text-1: #{theme.get(primary, 900)};
+  --vp-c-text-2: #{theme.get(primary, 900)};
+  --vp-c-text-3: #{theme.get(primary, 900)};
 }
 
 .dark {
-  --vp-c-brand: #{theme.$theme-light--primary--300};
-  --vp-c-brand-1: #{theme.$theme-light--primary--300};
-  --vp-c-brand-2: #{theme.$theme-light--primary--300};
-  --vp-c-brand-3: #{theme.$theme-light--primary--300};
-  --vp-c-bg: #{theme.$theme-light--primary--900};
-  --vp-c-bg-alt: #{theme.$theme-light--primary--900};
-  --vp-c-bg-elv: #{theme.$theme-light--primary--900};
-  --vp-c-bg-soft: #{theme.$theme-light--primary--900};
-  --vp-c-border: #{theme.$theme-light--tertiary--300};
-  --vp-c-divider: #{theme.$theme-light--secondary--300};
-  --vp-c-gutter: #{theme.$theme-light--secondary--300};
-  --vp-c-text-1: #{theme.$theme-light--primary--100};
-  --vp-c-text-2: #{theme.$theme-light--primary--100};
-  --vp-c-text-3: #{theme.$theme-light--primary--100};
+  --vp-c-brand: #{theme.get(primary, 300)};
+  --vp-c-brand-1: #{theme.get(primary, 300)};
+  --vp-c-brand-2: #{theme.get(primary, 300)};
+  --vp-c-brand-3: #{theme.get(primary, 300)};
+  --vp-c-bg: #{theme.get(primary, 900)};
+  --vp-c-bg-alt: #{theme.get(primary, 900)};
+  --vp-c-bg-elv: #{theme.get(primary, 900)};
+  --vp-c-bg-soft: #{theme.get(primary, 900)};
+  --vp-c-border: #{theme.get(tertiary, 300)};
+  --vp-c-divider: #{theme.get(secondary, 300)};
+  --vp-c-gutter: #{theme.get(secondary, 300)};
+  --vp-c-text-1: #{theme.get(primary, 100)};
+  --vp-c-text-2: #{theme.get(primary, 100)};
+  --vp-c-text-3: #{theme.get(primary, 100)};
 }

package/docs/compiling-graupl.md

@@ -0,0 +1,56 @@
+# Compiling your own version of Graupl
+
+If you want to compile your own version of Graupl, you can! Here's how:
+
+```scss
+// Import Graupl.
+@forward '@graupl/graupl';
+
+// Import your own theme...
+```
+
+## Overriding Graupl's default variables
+
+Graupl's sass variables are all declared with `!default` flag. This means you can override them in your own theme file.
+
+```scss
+// Import the file containing the variables you want to override.
+@forward '@graupl/graupl/defaults' with (
+  $prefix: 'custom',
+);
+
+// Import Graupl.
+@forward '@graupl/graupl';
+
+// Import your own theme...
+```
+
+## Adding new theme colours
+
+You can add new colours to Graupl by adding to the `$custom-colours` map.
+
+```scss
+// Import the theme's defaults.
+@forward "@graupl/graupl/theme/defaults" with (
+  $custom-colors: (
+    custom: (
+      100: #f0f0f0,
+      200: #e0e0e0,
+      300: #d0d0d0,
+      400: #c0c0c0,
+      500: #b0b0b0,
+      600: #a0a0a0,
+      700: #909090,
+      800: #808080,
+      900: #707070,
+    ),
+  ),
+);
+
+// Import Graupl.
+@forward '@graupl/graupl';
+
+// Import your own theme...
+```
+
+These colours will have new classes generated for them, e.g. `background-custom-100`, `color-custom-100`, etc. as well as component variants, e.g. `button custom`, and full dark-mode support.

package/docs/introduction.md

@@ -0,0 +1,5 @@
+# Introduction
+
+Graupl is a collection of Sass utilities and components that can be used to build a website or web application. It is designed to be flexible and customizable, so you can use as much or as little of it as you need.
+
+We need a lot more documentation, so sit tight!

package/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="light-mode">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -19,11 +19,15 @@
     <p>Graupl supports light and dark modes out-of-the-box.</p>
     <h2>Buttons</h2>
     <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.</p>
-    <div class="columns columns-4">
+    <div class="columns count-4">
       <button class="button">Default Button</button>
       <button class="button primary">Primary Button</button>
       <button class="button secondary">Secondary Button</button>
       <button class="button tertiary">Tertiary Button</button>
+      <button class="button" disabled>Default Button</button>
+      <button class="button primary" disabled>Primary Button</button>
+      <button class="button secondary" disabled>Secondary Button</button>
+      <button class="button tertiary" disabled>Tertiary Button</button>
     </div>
     <h2>Form elements</h2>
     <p>Graupl provides default styling for all form elements.</p>

package/package.json

@@ -1,8 +1,34 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "A modular and modern CSS framework.",
   "type": "module",
+  "exports": {
+    ".": {
+      "sass": "./scss"
+    },
+    "./base": {
+      "sass": "./scss/base"
+    },
+    "./components": {
+      "sass": "./scss/component"
+    },
+    "./layout": {
+      "sass": "./scss/layout"
+    },
+    "./mixins": {
+      "sass": "./scss/mixins"
+    },
+    "./state": {
+      "sass": "./scss/state"
+    },
+    "./theme": {
+      "sass": "./scss/theme"
+    },
+    "./utilities": {
+      "sass": "./scss/utilities"
+    }
+  },
   "scripts": {
     "prepare": "husky install",
     "commit": "git cz",

package/postcss.config.cjs

@@ -4,7 +4,7 @@ const config = {
     require("autoprefixer"),
     // @todo: add cssnano when ready
     // Waiting on upstream issue for postcss-calc: https://github.com/postcss/postcss-calc/issues/77
-    // require("cssnano"),
+    require("cssnano"),
     require("postcss-discard-comments"),
   ],
 };

package/scss/_defaults.scss

@@ -7,6 +7,9 @@
 // Prefix for custom properties and other naming conventions.
 $prefix: "graupl" !default;
 
+// Settings.
+$use-important: true !default;
+
 // Layout properties.
 $content-max-width: 96ch !default;
 

package/scss/_index.scss

@@ -0,0 +1,14 @@
+// Graupl Components.
+//
+// Forwards all components for easy development.
+
+// Forward the layer initialization.
+@forward "init";
+
+// Forward all layers.
+@forward "base";
+@forward "layout";
+@forward "component";
+@forward "state";
+@forward "theme";
+@forward "utilities";

package/scss/_init.scss

@@ -0,0 +1,3 @@
+// Graupl layer initialization.
+
+@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;

package/scss/base/form/_variables.scss

@@ -1,9 +1,9 @@
 // Variables referencing custom properties.
 
 @use "../../variables" as base;
-@use "../../theme/variables" as theme;
 @use "defaults";
 @use "sass:map";
+@use "../../functions/theme";
 
 $input-padding-x: var(--#{defaults.$prefix}-input-padding-x, #{base.$gap});
 $input-padding-y: var(
@@ -47,7 +47,7 @@ $fieldset-font-size: var(
 // Background properties.
 $input-background: var(
   --#{defaults.$prefix}-input-background,
-  #{theme.$theme-active--primary--100}
+  #{theme.get(primary, 100)}
 );
 $fieldset-background: var(
   --#{defaults.$prefix}-fieldset-background,
@@ -57,17 +57,17 @@ $fieldset-background: var(
 // Text properties.
 $input-color: var(
   --#{defaults.$prefix}-input-color,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
 );
 $input-placeholder-color: var(
   --#{defaults.$prefix}-input-placeholder-color,
-  #{theme.$theme-active--secondary--600}
+  #{theme.get(secondary, 600)}
 );
 $label-color: var(--#{defaults.$prefix}-label-color, #{$input-color});
 $fieldset-color: var(--#{defaults.$prefix}-fieldset-color, #{$input-color});
 $input-disabled-color: var(
   --#{defaults.$prefix}-input-disabled-color,
-  #{theme.$theme-active--secondary--400}
+  #{theme.get(secondary, 400)}
 );
 $input-disabled-placeholder-color: var(
   --#{defaults.$prefix}-input-disabled-placeholder-color,
@@ -111,11 +111,11 @@ $fieldset-border-radius: var(
 // Border colour properties.
 $input-border-color: var(
   --#{defaults.$prefix}-input-border-color,
-  #{theme.$theme-active--secondary--700}
+  #{theme.get(secondary, 700)}
 );
 $input-disabled-border-color: var(
   --#{defaults.$prefix}-input-disabled-border-color,
-  #{theme.$theme-active--secondary--200}
+  #{theme.get(secondary, 200)}
 );
 $fieldset-border-color: var(
   --#{defaults.$prefix}-fieldset-border-color,
@@ -129,5 +129,5 @@ $fieldset-disabled-border-color: var(
 // Accent color properties.
 $input-accent-color: var(
   --#{defaults.$prefix}-input-accent-color,
-  #{theme.$theme-active--primary--700}
+  #{theme.get(primary, 700)}
 );

package/scss/base/link/_variables.scss

@@ -1,8 +1,8 @@
 // Variables referencing custom properties.
 
 @use "../../variables" as base;
-@use "../../theme/variables" as theme;
 @use "defaults";
+@use "../../functions/theme";
 
 // Link properties.
 $link-text-decoration: var(
@@ -13,19 +13,16 @@ $link-text-decoration-thickness: var(
   --#{defaults.$prefix}-link-text-decoration-thickness,
   #{base.$border-width}
 );
-$link-color: var(
-  --#{defaults.$prefix}-link-color,
-  #{theme.$theme-active--primary--700}
-);
+$link-color: var(--#{defaults.$prefix}-link-color, #{theme.get(primary, 700)});
 $link-hover-color: var(
   --#{defaults.$prefix}-link-hover-color,
-  #{theme.$theme-active--tertiary--700}
+  #{theme.get(tertiary, 700)}
 );
 $link-active-color: var(
   --#{defaults.$prefix}-link-active-color,
-  #{theme.$theme-active--tertiary--700}
+  #{theme.get(tertiary, 700)}
 );
 $link-visited-color: var(
   --#{defaults.$prefix}-link-visited-color,
-  #{theme.$theme-active--primary--700}
+  #{theme.get(primary, 700)}
 );

package/scss/component/button/_defaults.scss

@@ -7,4 +7,6 @@
 @forward "../../defaults";
 
 $button-hover-transform: none !default;
+$button-hover-transform-reduced-motion: none !default;
 $button-active-transform: scale(0.95) !default;
+$button-active-transform-reduced-motion: scale(0.98) !default;

package/scss/component/button/_index.scss

@@ -4,6 +4,8 @@
 @use "../../theme/variables" as theme;
 @use "variables" as *;
 @use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+@use "sass:map";
 
 @include layer(component) {
   .button {
@@ -27,6 +29,29 @@
     &:active {
       transform: $button-active-transform;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      &:hover,
+      &:active {
+        transform: none;
+      }
+    }
+  }
+
+  @include animation-off {
+    .button {
+      transition: $button-transition-reduced-motion;
+
+      &:hover {
+        transform: $button-hover-transform-reduced-motion;
+      }
+
+      &:active {
+        transform: $button-active-transform-reduced-motion;
+      }
+    }
   }
 }
 
@@ -48,28 +73,31 @@
       color: $button-active-color;
     }
 
-    &.primary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--primary--700};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--primary--700};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--primary--700};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--primary--700};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--primary--700};
-    }
+    &:disabled {
+      border-color: $button-disabled-border-color;
+      background: $button-disabled-background;
+      color: $button-disabled-color;
 
-    &.secondary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--secondary--700};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--secondary--700};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--secondary--700};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--secondary--700};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--secondary--700};
+      &:hover,
+      &:active {
+        border-color: $button-disabled-border-color;
+        background: $button-disabled-background;
+        color: $button-disabled-color;
+      }
     }
 
-    &.tertiary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--tertiary--700};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--tertiary--700};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--tertiary--700};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--tertiary--700};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--tertiary--700};
+    @each $color, $map in theme.$theme-active {
+      &.#{$color} {
+        --#{defaults.$prefix}-button-hover-background: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-active-background: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-border-color: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-hover-border-color: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-active-border-color: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-disabled-border-color: #{map.get(
+            $map,
+            200
+          )};
+      }
     }
   }
 }