@graupl/icons 1.0.0-alpha.3 → 1.0.0-alpha.5

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.5](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2024-05-24)
+
+
+### Features
+
+* **icons:** allow selectors to be customized ([14a0d65](https://github.com/Graupl/graupl/commit/14a0d6582b6d57be6fe3cb4734fa506a30db69c8))
+
+## [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)
 
 

package/dist/base/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/base/button.css.map

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

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,oBCAF,EACE,gKCPF,CACF","file":"link.css"}

package/dist/base.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))))}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))))}}@layer graupl.theme{}
+/*# 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/button/_index.scss","base.css","../src/scss/base/link/_index.scss"],"names":[],"mappings":"AASI,oBCAF,QACE,kKCNF,CCKA,EACE,gKDDF,CAJF,CFII,oBECJ","file":"base.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-after.primary-100,.icon-before.primary-100,.icon.primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-after.primary-200,.icon-before.primary-200,.icon.primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-after.primary-300,.icon-before.primary-300,.icon.primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-after.primary-400,.icon-before.primary-400,.icon.primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-after.primary-500,.icon-before.primary-500,.icon.primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-after.primary-600,.icon-before.primary-600,.icon.primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-after.primary-700,.icon-before.primary-700,.icon.primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-after.primary-800,.icon-before.primary-800,.icon.primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-after.primary-900,.icon-before.primary-900,.icon.primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-after.secondary-100,.icon-before.secondary-100,.icon.secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-after.secondary-200,.icon-before.secondary-200,.icon.secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-after.secondary-300,.icon-before.secondary-300,.icon.secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-after.secondary-400,.icon-before.secondary-400,.icon.secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-after.secondary-500,.icon-before.secondary-500,.icon.secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-after.secondary-600,.icon-before.secondary-600,.icon.secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-after.secondary-700,.icon-before.secondary-700,.icon.secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-after.secondary-800,.icon-before.secondary-800,.icon.secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-after.secondary-900,.icon-before.secondary-900,.icon.secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-after.tertiary-100,.icon-before.tertiary-100,.icon.tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-after.tertiary-200,.icon-before.tertiary-200,.icon.tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-after.tertiary-300,.icon-before.tertiary-300,.icon.tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-after.tertiary-400,.icon-before.tertiary-400,.icon.tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-after.tertiary-500,.icon-before.tertiary-500,.icon.tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-after.tertiary-600,.icon-before.tertiary-600,.icon.tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-after.tertiary-700,.icon-before.tertiary-700,.icon.tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-after.tertiary-800,.icon-before.tertiary-800,.icon.tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-after.tertiary-900,.icon-before.tertiary-900,.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,oBCgCI,mEACE,uIGYR,CHbM,mEACE,uIGiBR,CHlBM,mEACE,uIGsBR,CHvBM,mEACE,uIG2BR,CH5BM,mEACE,uIGgCR,CHjCM,mEACE,uIGqCR,CHtCM,mEACE,uIG0CR,CH3CM,mEACE,uIG+CR,CHhDM,mEACE,uIGoDR,CHrDM,yEACE,6IGyDR,CH1DM,yEACE,6IG8DR,CH/DM,yEACE,6IGmER,CHpEM,yEACE,6IGwER,CHzEM,yEACE,6IG6ER,CH9EM,yEACE,6IGkFR,CHnFM,yEACE,6IGuFR,CHxFM,yEACE,6IG4FR,CH7FM,yEACE,6IGiGR,CHlGM,sEACE,0IGsGR,CHvGM,sEACE,0IG2GR,CH5GM,sEACE,0IGgHR,CHjHM,sEACE,0IGqHR,CHtHM,sEACE,uIG0HR,CH3HM,sEACE,0IG+HR,CHhIM,sEACE,0IGoIR,CHrIM,sEACE,0IGyIR,CH1IM,sEACE,0IG8IR,CACF","file":"icon.css"}

package/dist/component.css

@@ -0,0 +1,2 @@
+@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-after.primary-100,.icon-before.primary-100,.icon.primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-after.primary-200,.icon-before.primary-200,.icon.primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-after.primary-300,.icon-before.primary-300,.icon.primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-after.primary-400,.icon-before.primary-400,.icon.primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-after.primary-500,.icon-before.primary-500,.icon.primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-after.primary-600,.icon-before.primary-600,.icon.primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-after.primary-700,.icon-before.primary-700,.icon.primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-after.primary-800,.icon-before.primary-800,.icon.primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-after.primary-900,.icon-before.primary-900,.icon.primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-after.secondary-100,.icon-before.secondary-100,.icon.secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-after.secondary-200,.icon-before.secondary-200,.icon.secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-after.secondary-300,.icon-before.secondary-300,.icon.secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-after.secondary-400,.icon-before.secondary-400,.icon.secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-after.secondary-500,.icon-before.secondary-500,.icon.secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-after.secondary-600,.icon-before.secondary-600,.icon.secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-after.secondary-700,.icon-before.secondary-700,.icon.secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-after.secondary-800,.icon-before.secondary-800,.icon.secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-after.secondary-900,.icon-before.secondary-900,.icon.secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-after.tertiary-100,.icon-before.tertiary-100,.icon.tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-after.tertiary-200,.icon-before.tertiary-200,.icon.tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-after.tertiary-300,.icon-before.tertiary-300,.icon.tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-after.tertiary-400,.icon-before.tertiary-400,.icon.tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-after.tertiary-500,.icon-before.tertiary-500,.icon.tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-after.tertiary-600,.icon-before.tertiary-600,.icon.tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-after.tertiary-700,.icon-before.tertiary-700,.icon.tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-after.tertiary-800,.icon-before.tertiary-800,.icon.tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-after.tertiary-900,.icon-before.tertiary-900,.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/icon/_index.scss","../src/scss/mixins/icon.scss","../src/scss/component/icon/_variables.scss","component.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,oBCgCI,mEACE,uIGYR,CHbM,mEACE,uIGiBR,CHlBM,mEACE,uIGsBR,CHvBM,mEACE,uIG2BR,CH5BM,mEACE,uIGgCR,CHjCM,mEACE,uIGqCR,CHtCM,mEACE,uIG0CR,CH3CM,mEACE,uIG+CR,CHhDM,mEACE,uIGoDR,CHrDM,yEACE,6IGyDR,CH1DM,yEACE,6IG8DR,CH/DM,yEACE,6IGmER,CHpEM,yEACE,6IGwER,CHzEM,yEACE,6IG6ER,CH9EM,yEACE,6IGkFR,CHnFM,yEACE,6IGuFR,CHxFM,yEACE,6IG4FR,CH7FM,yEACE,6IGiGR,CHlGM,sEACE,0IGsGR,CHvGM,sEACE,0IG2GR,CH5GM,sEACE,0IGgHR,CHjHM,sEACE,0IGqHR,CHtHM,sEACE,uIG0HR,CH3HM,sEACE,0IG+HR,CHhIM,sEACE,0IGoIR,CHrIM,sEACE,0IGyIR,CH1IM,sEACE,0IG8IR,CACF","file":"component.css"}

package/dist/icon.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))))}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))))}}@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-after.primary-100,.icon-before.primary-100,.icon.primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-after.primary-200,.icon-before.primary-200,.icon.primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-after.primary-300,.icon-before.primary-300,.icon.primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-after.primary-400,.icon-before.primary-400,.icon.primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-after.primary-500,.icon-before.primary-500,.icon.primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-after.primary-600,.icon-before.primary-600,.icon.primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-after.primary-700,.icon-before.primary-700,.icon.primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-after.primary-800,.icon-before.primary-800,.icon.primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-after.primary-900,.icon-before.primary-900,.icon.primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-after.secondary-100,.icon-before.secondary-100,.icon.secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-after.secondary-200,.icon-before.secondary-200,.icon.secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-after.secondary-300,.icon-before.secondary-300,.icon.secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-after.secondary-400,.icon-before.secondary-400,.icon.secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-after.secondary-500,.icon-before.secondary-500,.icon.secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-after.secondary-600,.icon-before.secondary-600,.icon.secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-after.secondary-700,.icon-before.secondary-700,.icon.secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-after.secondary-800,.icon-before.secondary-800,.icon.secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-after.secondary-900,.icon-before.secondary-900,.icon.secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-after.tertiary-100,.icon-before.tertiary-100,.icon.tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-after.tertiary-200,.icon-before.tertiary-200,.icon.tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-after.tertiary-300,.icon-before.tertiary-300,.icon.tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-after.tertiary-400,.icon-before.tertiary-400,.icon.tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-after.tertiary-500,.icon-before.tertiary-500,.icon.tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-after.tertiary-600,.icon-before.tertiary-600,.icon.tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-after.tertiary-700,.icon-before.tertiary-700,.icon.tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-after.tertiary-800,.icon-before.tertiary-800,.icon.tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-after.tertiary-900,.icon-before.tertiary-900,.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/button/_index.scss","icon.css","../src/scss/base/link/_index.scss","../src/scss/component/icon/_index.scss","../src/scss/mixins/icon.scss","../src/scss/component/icon/_variables.scss"],"names":[],"mappings":"AASI,oBCAF,QACE,kKCNF,CCKA,EACE,gKDDF,CAJF,CFII,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,oBIgCI,mEACE,uIFuBR,CExBM,mEACE,uIF4BR,CE7BM,mEACE,uIFiCR,CElCM,mEACE,uIFsCR,CEvCM,mEACE,uIF2CR,CE5CM,mEACE,uIFgDR,CEjDM,mEACE,uIFqDR,CEtDM,mEACE,uIF0DR,CE3DM,mEACE,uIF+DR,CEhEM,yEACE,6IFoER,CErEM,yEACE,6IFyER,CE1EM,yEACE,6IF8ER,CE/EM,yEACE,6IFmFR,CEpFM,yEACE,6IFwFR,CEzFM,yEACE,6IF6FR,CE9FM,yEACE,6IFkGR,CEnGM,yEACE,6IFuGR,CExGM,yEACE,6IF4GR,CE7GM,sEACE,0IFiHR,CElHM,sEACE,0IFsHR,CEvHM,sEACE,0IF2HR,CE5HM,sEACE,0IFgIR,CEjIM,sEACE,uIFqIR,CEtIM,sEACE,0IF0IR,CE3IM,sEACE,0IF+IR,CEhJM,sEACE,0IFoJR,CErJM,sEACE,0IFyJR,CACF","file":"icon.css"}

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@graupl/icons",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "A plugin for Graupl that provides bare-minimum icon components.",
   "type": "module",
   "exports": {
     ".": {
-      "sass": "./scss/component/icon.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.12",
     "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.12"
   }
 }

package/scss/base/button.scss

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

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/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,4 @@
+// @gruapl/icons base styles.
+
+@forward "button";
+@forward "link";

package/src/scss/base/button/_defaults.scss

@@ -0,0 +1,7 @@
+// @graupl/icons button 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/button/_index.scss

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

package/src/scss/base/button/_variables.scss

@@ -0,0 +1,7 @@
+// @graupl/icons button 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/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,13 @@
+// @gruapl/icons link base styles.
+
+@use "variables" as *;
+@use "pkg:@graupl/graupl/src/defaults" as root-defaults;
+@use "pkg:@graupl/graupl/src/base/link/defaults" as link-defaults;
+@use "pkg:@graupl/graupl/src/base/link/variables" as link;
+@use "pkg:@graupl/graupl/src/mixins/layer" as *;
+
+@include layer(theme) {
+  #{link-defaults.$link-selector} {
+    --#{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,3 @@
+// @gruapl/icons component styles.
+
+@forward "icon";

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

@@ -1,8 +1,17 @@
-// 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 selectors.
+$icon-selector: ".icon" !default;
+$icon-before-selector: "#{$icon-selector}-before" !default;
+$icon-after-selector: "#{$icon-selector}-after" !default;
+$icon-prefix-selector: "." !default;
+$icon-color-prefix-selector: "." !default;
 
 // Icon properties.
 $icon-display: inline-block !default;

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

@@ -1,35 +1,48 @@
-// 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) {
+  #{defaults.$icon-selector} {
+    @include icon.apply;
+  }
 
-  &-before {
+  #{defaults.$icon-before-selector} {
     @include icon.apply("before");
   }
 
-  &-after {
+  #{defaults.$icon-after-selector} {
     @include icon.apply("after");
   }
-}
 
-@each $name, $icon in defaults.$icons {
-  .icon-#{$name} {
-    --#{root-defaults.$prefix}-icon: #{$icon};
+  #{defaults.$icon-selector},
+  #{defaults.$icon-before-selector},
+  #{defaults.$icon-after-selector} {
+    @each $name, $icon in defaults.$icons {
+      &#{defaults.$icon-prefix-selector}#{$name} {
+        --#{root-defaults.$prefix}-icon: #{$icon};
+      }
+    }
   }
 }
 
-@each $color, $map in color.$theme-active {
-  @each $shade, $value in $map {
-    $name: #{$color}-#{$shade};
+@include layer(theme) {
+  #{defaults.$icon-selector},
+  #{defaults.$icon-before-selector},
+  #{defaults.$icon-after-selector} {
+    @each $color, $map in color.$theme-active {
+      @each $shade, $value in $map {
+        $name: #{$color}-#{$shade};
 
-    .icon-#{$name} {
-      --#{root-defaults.$prefix}-icon-color: #{$value};
+        &#{defaults.$icon-color-prefix-selector}#{$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 *;