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

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.0.0-alpha.4](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2024-05-21)
+
+
+### Features
+
+* add icon handling for button and links ([dfe035d](https://github.com/Graupl/graupl/commit/dfe035d0d4f80a480f2ede468296f5c00fb80ba2))
+
+
+### Bug Fixes
+
+* update reference to root-color ([2f61535](https://github.com/Graupl/graupl/commit/2f61535fb1783d9d6014d4b236b5efd056061d02))
+
+## [1.0.0-alpha.3](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2024-05-13)
+
+
+### Bug Fixes
+
+* correct export path ([8b6aae4](https://github.com/Graupl/graupl/commit/8b6aae4230306885d501a0a6f3b93ed302e0719f))
+* correct icon classes ([9354330](https://github.com/Graupl/graupl/commit/935433092d3bab4a75f8aabe8a47cabf45793e1b))
+
 ## [1.0.0-alpha.2](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2024-05-13)
 
 

package/dist/base/link.css

@@ -0,0 +1,2 @@
+@layer graupl.theme{a{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}}
+/*# sourceMappingURL=link.css.map */

package/dist/base/link.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../node_modules/@graupl/graupl/src/scss/mixins/_layer.scss","../../src/scss/base/link/_index.scss","link.css"],"names":[],"mappings":"AASI,oBCDF,EACE,gKCNF,CACF","file":"link.css"}

package/dist/base.css

@@ -0,0 +1,2 @@
+@layer graupl.theme{a{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}}
+/*# sourceMappingURL=base.css.map */

package/dist/base.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../node_modules/@graupl/graupl/src/scss/mixins/_layer.scss","../src/scss/base/link/_index.scss","base.css"],"names":[],"mappings":"AASI,oBCDF,EACE,gKCNF,CACF","file":"base.css"}

package/dist/component/button.css

@@ -0,0 +1,2 @@
+@layer graupl.theme{.button{--graupl-icon-color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}}
+/*# sourceMappingURL=button.css.map */

package/dist/component/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../node_modules/@graupl/graupl/src/scss/mixins/_layer.scss","../../src/scss/component/button/_index.scss","button.css"],"names":[],"mappings":"AASI,oBCDF,QACE,kKCLF,CACF","file":"button.css"}

package/dist/component/icon.css

@@ -1,2 +1,2 @@
-.icon{background-color:var(--graupl-icon-color,var(--graupl-root-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-before:before{margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-after:after,.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-root-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-after:after{margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-tertiary-900{--graupl-icon-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))}
+@layer graupl.component{.icon{background-color:var(--graupl-icon-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-before:before{margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-after:after,.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-after:after{margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}}@layer graupl.theme{.icon-primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-tertiary-900{--graupl-icon-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))}}
 /*# sourceMappingURL=icon.css.map */

package/dist/component/icon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scss/component/icon/_index.scss","../../src/scss/mixins/icon.scss","../../src/scss/component/icon/_variables.scss","icon.css"],"names":[],"mappings":"AAQA,MCAE,2LCOW,CDLX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CANA,+CCGa,CDDb,+DCOY,CDuBV,yLAAA,CAxBF,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DEQF,CFOI,oBAIE,uGEKN,CFFI,sCApBF,2LCOW,CDLX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CAaI,UAAA,CAnBJ,+CCGa,CDDb,+DCOY,CDDZ,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DEwCF,CFlBI,kBAIE,yGEcN,CHhBI,kBACE,uIGmBN,CHpBI,kBACE,uIGuBN,CHxBI,kBACE,uIG2BN,CH5BI,kBACE,uIG+BN,CHhCI,kBACE,uIGmCN,CHpCI,kBACE,uIGuCN,CHxCI,kBACE,uIG2CN,CH5CI,kBACE,uIG+CN,CHhDI,kBACE,uIGmDN,CHpDI,oBACE,6IGuDN,CHxDI,oBACE,6IG2DN,CH5DI,oBACE,6IG+DN,CHhEI,oBACE,6IGmEN,CHpEI,oBACE,6IGuEN,CHxEI,oBACE,6IG2EN,CH5EI,oBACE,6IG+EN,CHhFI,oBACE,6IGmFN,CHpFI,oBACE,6IGuFN,CHxFI,mBACE,0IG2FN,CH5FI,mBACE,0IG+FN,CHhGI,mBACE,0IGmGN,CHpGI,mBACE,0IGuGN,CHxGI,mBACE,uIG2GN,CH5GI,mBACE,0IG+GN,CHhHI,mBACE,0IGmHN,CHpHI,mBACE,0IGuHN,CHxHI,mBACE,0IG2HN","file":"icon.css"}
+{"version":3,"sources":["../../node_modules/@graupl/graupl/src/scss/mixins/_layer.scss","../../src/scss/component/icon/_index.scss","../../src/scss/mixins/icon.scss","../../src/scss/component/icon/_variables.scss","icon.css"],"names":[],"mappings":"AASI,wBCCF,MCFA,sLCUW,CDRX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CANA,+CCMa,CDJb,+DCUY,CDoBV,yLAAA,CAxBF,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DESA,CFME,oBAIE,uGEMJ,CFHE,sCApBF,sLCUW,CDRX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CAaI,UAAA,CAnBJ,+CCMa,CDJb,+DCUY,CDJZ,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DEyCA,CFnBE,kBAIE,yGEeJ,CACF,CJvCI,oBCyBE,kBACE,uIGiBN,CHlBI,kBACE,uIGoBN,CHrBI,kBACE,uIGuBN,CHxBI,kBACE,uIG0BN,CH3BI,kBACE,uIG6BN,CH9BI,kBACE,uIGgCN,CHjCI,kBACE,uIGmCN,CHpCI,kBACE,uIGsCN,CHvCI,kBACE,uIGyCN,CH1CI,oBACE,6IG4CN,CH7CI,oBACE,6IG+CN,CHhDI,oBACE,6IGkDN,CHnDI,oBACE,6IGqDN,CHtDI,oBACE,6IGwDN,CHzDI,oBACE,6IG2DN,CH5DI,oBACE,6IG8DN,CH/DI,oBACE,6IGiEN,CHlEI,oBACE,6IGoEN,CHrEI,mBACE,0IGuEN,CHxEI,mBACE,0IG0EN,CH3EI,mBACE,0IG6EN,CH9EI,mBACE,0IGgFN,CHjFI,mBACE,uIGmFN,CHpFI,mBACE,0IGsFN,CHvFI,mBACE,0IGyFN,CH1FI,mBACE,0IG4FN,CH7FI,mBACE,0IG+FN,CACF","file":"icon.css"}

package/dist/component.css

@@ -0,0 +1,2 @@
+@layer graupl.theme{.button{--graupl-icon-color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}}@layer graupl.component{.icon{background-color:var(--graupl-icon-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-before:before{margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-after:after,.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-after:after{margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}}@layer graupl.theme{.icon-primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-tertiary-900{--graupl-icon-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))}}
+/*# sourceMappingURL=component.css.map */

package/dist/component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../node_modules/@graupl/graupl/src/scss/mixins/_layer.scss","../src/scss/component/button/_index.scss","component.css","../src/scss/component/icon/_index.scss","../src/scss/mixins/icon.scss","../src/scss/component/icon/_variables.scss"],"names":[],"mappings":"AASI,oBCDF,QACE,kKCLF,CACF,CFII,wBGCF,MCFA,sLCUW,CDRX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CANA,+CCMa,CDJb,+DCUY,CDoBV,yLAAA,CAxBF,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DFeA,CEAE,oBAIE,uGFYJ,CETE,sCApBF,sLCUW,CDRX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CAaI,UAAA,CAnBJ,+CCMa,CDJb,+DCUY,CDJZ,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DF+CA,CEzBE,kBAIE,yGFqBJ,CACF,CF7CI,oBGyBE,kBACE,uIDuBN,CCxBI,kBACE,uID0BN,CC3BI,kBACE,uID6BN,CC9BI,kBACE,uIDgCN,CCjCI,kBACE,uIDmCN,CCpCI,kBACE,uIDsCN,CCvCI,kBACE,uIDyCN,CC1CI,kBACE,uID4CN,CC7CI,kBACE,uID+CN,CChDI,oBACE,6IDkDN,CCnDI,oBACE,6IDqDN,CCtDI,oBACE,6IDwDN,CCzDI,oBACE,6ID2DN,CC5DI,oBACE,6ID8DN,CC/DI,oBACE,6IDiEN,CClEI,oBACE,6IDoEN,CCrEI,oBACE,6IDuEN,CCxEI,oBACE,6ID0EN,CC3EI,mBACE,0ID6EN,CC9EI,mBACE,0IDgFN,CCjFI,mBACE,0IDmFN,CCpFI,mBACE,0IDsFN,CCvFI,mBACE,uIDyFN,CC1FI,mBACE,0ID4FN,CC7FI,mBACE,0ID+FN,CChGI,mBACE,0IDkGN,CCnGI,mBACE,0IDqGN,CACF","file":"component.css"}

package/dist/icon.css

@@ -0,0 +1,2 @@
+@layer graupl.theme{a{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}.button{--graupl-icon-color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}}@layer graupl.theme{}@layer graupl.component{.icon{background-color:var(--graupl-icon-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-before:before{margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-after:after,.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-after:after{margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}}@layer graupl.theme{.icon-primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-tertiary-900{--graupl-icon-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))}}
+/*# sourceMappingURL=icon.css.map */

package/dist/icon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../node_modules/@graupl/graupl/src/scss/mixins/_layer.scss","../src/scss/base/link/_index.scss","icon.css","../src/scss/component/button/_index.scss","../src/scss/component/icon/_index.scss","../src/scss/mixins/icon.scss","../src/scss/component/icon/_variables.scss"],"names":[],"mappings":"AASI,oBCDF,EACE,gKCNF,CCKA,QACE,kKDAF,CALF,CFKI,oBECJ,CFDI,wBICF,MCFA,sLCUW,CDRX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CANA,+CCMa,CDJb,+DCUY,CDoBV,yLAAA,CAxBF,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DHoBA,CGLE,oBAIE,uGHiBJ,CGdE,sCApBF,sLCUW,CDRX,uBAAA,CADA,2BAAA,CAEA,uBAAA,CAaI,UAAA,CAnBJ,+CCMa,CDJb,+DCUY,CDJZ,0CCMK,CDNL,kCCMK,CDHL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CANA,6DHoDA,CG9BE,kBAIE,yGH0BJ,CACF,CFlDI,oBIyBE,kBACE,uIF4BN,CE7BI,kBACE,uIF+BN,CEhCI,kBACE,uIFkCN,CEnCI,kBACE,uIFqCN,CEtCI,kBACE,uIFwCN,CEzCI,kBACE,uIF2CN,CE5CI,kBACE,uIF8CN,CE/CI,kBACE,uIFiDN,CElDI,kBACE,uIFoDN,CErDI,oBACE,6IFuDN,CExDI,oBACE,6IF0DN,CE3DI,oBACE,6IF6DN,CE9DI,oBACE,6IFgEN,CEjEI,oBACE,6IFmEN,CEpEI,oBACE,6IFsEN,CEvEI,oBACE,6IFyEN,CE1EI,oBACE,6IF4EN,CE7EI,oBACE,6IF+EN,CEhFI,mBACE,0IFkFN,CEnFI,mBACE,0IFqFN,CEtFI,mBACE,0IFwFN,CEzFI,mBACE,0IF2FN,CE5FI,mBACE,uIF8FN,CE/FI,mBACE,0IFiGN,CElGI,mBACE,0IFoGN,CErGI,mBACE,0IFuGN,CExGI,mBACE,0IF0GN,CACF","file":"icon.css"}

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@graupl/icons",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "A plugin for Graupl that provides bare-minimum icon components.",
   "type": "module",
   "exports": {
     ".": {
-      "sass": "./scss/components/icons.scss"
+      "sass": "./scss/icon.scss"
     },
-    "./src": {
+    "./*.scss": {
+      "sass": "./scss/*.scss"
+    },
+    "./src/*.scss": {
       "sass": "./src/scss/*.scss"
     }
   },
@@ -38,7 +41,7 @@
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@eslint/js": "^9.0.0",
-    "@graupl/graupl": "^1.0.0-alpha.9",
+    "@graupl/graupl": "^1.0.0-alpha.11",
     "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
     "cssnano": "^7.0.1",
@@ -63,6 +66,6 @@
     "stylelint-prettier": "^5.0.0"
   },
   "peerDependencies": {
-    "@graupl/graupl": ">=1.0.0-alpha.9"
+    "@graupl/graupl": ">=1.0.0-alpha.11"
   }
 }

package/scss/base/link.scss

@@ -0,0 +1,3 @@
+// @gruapl/icons link base.
+
+@forward "../../src/scss/base/link";

package/scss/base.scss

@@ -0,0 +1,3 @@
+// @gruapl/icons base.
+
+@forward "../src/scss/base";

package/scss/component/button.scss

@@ -0,0 +1,3 @@
+// @gruapl/icons button component.
+
+@forward "../../src/scss/component/button";

package/scss/component/icon.scss

@@ -1,3 +1,3 @@
-// Graupl Icon Component.
+// Graupl Icons Icon Component.
 
 @forward "../../src/scss/component/icon";

package/scss/component.scss

@@ -0,0 +1,3 @@
+// @gruapl/icons components.
+
+@forward "../src/scss/component";

package/scss/icon.scss

@@ -0,0 +1,3 @@
+// @gruapl/icons.
+
+@forward "../src/scss";

package/src/scss/_index.scss

@@ -0,0 +1,4 @@
+// @gruapl/icons styles.
+
+@forward "base";
+@forward "component";

package/src/scss/base/_index.scss

@@ -0,0 +1,3 @@
+// @gruapl/icons base styles.
+
+@forward "link";

package/src/scss/base/link/_defaults.scss

@@ -0,0 +1,7 @@
+// @graupl/icons link base default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.

package/src/scss/base/link/_index.scss

@@ -0,0 +1,12 @@
+// @gruapl/icons link base styles.
+
+@use "variables" as *;
+@use "pkg:@graupl/graupl/src/defaults" as root-defaults;
+@use "pkg:@graupl/graupl/src/base/link/variables" as link;
+@use "pkg:@graupl/graupl/src/mixins/layer" as *;
+
+@include layer(theme) {
+  a {
+    --#{root-defaults.$prefix}-icon-color: #{link.$link-color};
+  }
+}

package/src/scss/base/link/_variables.scss

@@ -0,0 +1,7 @@
+// @graupl/icons link base variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "pkg:@graupl/graupl/src/defaults" as root-defaults;

package/src/scss/component/_index.scss

@@ -0,0 +1,4 @@
+// @gruapl/icons component styles.
+
+@forward "button";
+@forward "icon";

package/src/scss/component/button/_defaults.scss

@@ -0,0 +1,7 @@
+// @graupl/icons button component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.

package/src/scss/component/button/_index.scss

@@ -0,0 +1,12 @@
+// @gruapl/icons button component styles.
+
+@use "variables" as *;
+@use "pkg:@graupl/graupl/src/defaults" as root-defaults;
+@use "pkg:@graupl/graupl/src/component/button/variables" as button;
+@use "pkg:@graupl/graupl/src/mixins/layer" as *;
+
+@include layer(theme) {
+  .button {
+    --#{root-defaults.$prefix}-icon-color: #{button.$button-color};
+  }
+}

package/src/scss/component/button/_variables.scss

@@ -0,0 +1,7 @@
+// @graupl/icons button componet variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "pkg:@graupl/graupl/src/defaults" as root-defaults;

package/src/scss/component/icon/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/icons icon component default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
 
 // Icon properties.
 $icon-display: inline-block !default;

package/src/scss/component/icon/_index.scss

@@ -1,35 +1,40 @@
-// Graupl Icon Component.
+// @gruapl/icons icon component styles.
 
 @use "defaults";
 @use "pkg:@graupl/graupl/src/defaults" as root-defaults;
 @use "pkg:@graupl/graupl/src/theme/color/variables" as color;
+@use "pkg:@graupl/graupl/src/mixins/layer" as *;
 @use "../../mixins/icon";
 @use "sass:map";
 
-.icon {
-  @include icon.apply;
+@include layer(component) {
+  .icon {
+    @include icon.apply;
 
-  &-before {
-    @include icon.apply("before");
-  }
+    &-before {
+      @include icon.apply("before");
+    }
 
-  &-after {
-    @include icon.apply("after");
+    &-after {
+      @include icon.apply("after");
+    }
   }
-}
 
-@each $name, $icon in defaults.$icons {
-  &.#{$name} {
-    --#{root-defaults.$prefix}-icon: #{$icon};
+  @each $name, $icon in defaults.$icons {
+    .icon-#{$name} {
+      --#{root-defaults.$prefix}-icon: #{$icon};
+    }
   }
 }
 
-@each $color, $map in color.$theme-active {
-  @each $shade, $value in $map {
-    $name: #{$color}-#{$shade};
+@include layer(theme) {
+  @each $color, $map in color.$theme-active {
+    @each $shade, $value in $map {
+      $name: #{$color}-#{$shade};
 
-    .icon-#{$name} {
-      --#{root-defaults.$prefix}-icon-color: #{$value};
+      .icon-#{$name} {
+        --#{root-defaults.$prefix}-icon-color: #{$value};
+      }
     }
   }
 }

package/src/scss/component/icon/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/icons icon componet variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "pkg:@graupl/graupl/src/defaults" as root-defaults;
@@ -13,10 +16,7 @@ $icon-display: var(
 $icon-size: var(--#{root-defaults.$prefix}-icon-size, #{defaults.$icon-size});
 $icon-width: var(--#{root-defaults.$prefix}-icon-width, #{$icon-size});
 $icon-height: var(--#{root-defaults.$prefix}-icon-height, #{$icon-size});
-$icon-color: var(
-  --#{root-defaults.$prefix}-icon-color,
-  #{theme.$root-font-color}
-);
+$icon-color: var(--#{root-defaults.$prefix}-icon-color, #{theme.$root-color});
 $icon: var(--#{root-defaults.$prefix}-icon, none);
 $icon-spacer: var(
   --#{root-defaults.$prefix}-icon-spacer,

package/src/scss/mixins/icon.scss

@@ -1,4 +1,4 @@
-// Icon mixins.
+// @graupl/icons icon mixins.
 
 @use "../component/icon/variables" as *;