feat: new icons (css) #130

source/components/notify/stylesheet/notify.mjs

+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -8,7 +9,7 @@
 import {addAttributeToken} from "../../../dom/attributes.mjs";
 import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { NotifyStyleSheet };
+export {NotifyStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { NotifyStyleSheet };
 const NotifyStyleSheet = new CSSStyleSheet();
 
 try {
-	NotifyStyleSheet.insertRule(
-		`
+  NotifyStyleSheet.insertRule(`
 @layer notify { 
 .block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-shadow:none;border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

source/components/state/stylesheet/log.mjs

+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -8,7 +9,7 @@
 import {addAttributeToken} from "../../../dom/attributes.mjs";
 import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { LogStyleSheet };
+export {LogStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { LogStyleSheet };
 const LogStyleSheet = new CSSStyleSheet();
 
 try {
-	LogStyleSheet.insertRule(
-		`
+  LogStyleSheet.insertRule(`
 @layer log { 
 [data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-shadow:none;border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=entries]{overflow:hidden;padding:10px 0 40px 60px}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0;position:relative;top:0}[data-monster-role=entries] ul:last-of-type{top:2rem}[data-monster-role=entries] ul:before{border:1px dashed var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:30px;position:absolute;top:0;width:0}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-2);border-radius:5px;color:var(--monster-color-primary-2);margin:20px 60px 60px;padding:10px 20px;position:relative}[data-monster-role=entries] ul li>span{border:1px solid var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:-30px;position:absolute;top:0;width:0}[data-monster-role=entries] ul li>span:after,[data-monster-role=entries] ul li>span:before{background:var(--monster-bg-color-primary-2);border:2px solid var(--monster-color-primary-2);border-radius:50%;content:\"\";display:block;height:10px;left:-7.5px;position:absolute;width:10px}[data-monster-role=entries] ul li>span:before{top:-10px}[data-monster-role=entries] ul li>span:after{top:95%}[data-monster-role=entries] .title{margin-bottom:5px;text-transform:uppercase}[data-monster-role=entries] .user{font-size:.8rem;font-style:italic;margin-right:20px;margin-top:10px;text-align:right}[data-monster-role=entries] .datetime span{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:.5rem;left:-100px;position:absolute}[data-monster-role=entries] .datetime span:first-child{top:-16px}[data-monster-role=entries] .datetime span:last-child{top:94%} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

source/components/style/mixin/icon.pcss

+@define-mixin icon $name {
+
+    @for $i from 1 to 4 {
+
+        .monster-icon-primary-$(i)-$(name)::before {
+        background-color: var(--monster-color-primary-$i);
+        color: var(--monster-bg-color-primary-$i);
+    }
+
+    .monster-icon-secondary-$(i)-$(name)::before {
+    background-color: var(--monster-color-secondary-$i);
+    color: var(--monster-bg-color-secondary-$i);
+    }
+
+    .monster-icon-tertiary-$(i)-$(name)::before {
+    background-color: var(--monster-color-tertiary-$i);
+    color: var(--monster-bg-color-tertiary-$i);
+    }
+
+    .monster-icon-secondary-$(i)-$(name)::before {
+    background-color: var(--monster-color-secondary-$i);
+    color: var(--monster-bg-color-secondary-$i);
+    }
+
+
+    .monster-icon-primary-$(i)-$(name)::before,
+    .monster-icon-secondary-$(i)-$(name)::before,
+    .monster-icon-tertiary-$(i)-$(name)::before {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    @mixin-content;
+    }
+
+
+
+
+    }
+}
\ No newline at end of file

source/components/stylesheet/control.mjs

+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -8,7 +9,7 @@
 import {addAttributeToken} from "../../dom/attributes.mjs";
 import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
 
-export { ControlStyleSheet };
+export {ControlStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { ControlStyleSheet };
 const ControlStyleSheet = new CSSStyleSheet();
 
 try {
-	ControlStyleSheet.insertRule(
-		`
+  ControlStyleSheet.insertRule(`
 @layer control { 
 [data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }