Merge pull request #90 from itsmartashub/feat/canvas

[86] Add `Canvas` text and code support

Closes: #86, #88, #89, #91, #92, #93
Still open: #94

src/js/app/mainColors.js

@@ -28,7 +28,7 @@ const renderColorsTab = `
         </div>
       </div>
       <footer class="flex justify-center mt-10">
-		${renderButton({ id: 'resetAllAccents', content: 'Reset Fonts', disabled: false, className: 'btn-primary' })}
+		${renderButton({ id: 'resetAllAccents', content: 'Reset Colors', disabled: false, className: 'btn-primary' })}
       </footer>
     </section>
 `

src/sass/abstract/_bp.scss

@@ -71,4 +71,93 @@ $xxl: 96em; // 1536px
 
 @include dev('xxl') {
     // Your styles for 2x extra-large screens (min-width: 1536px)
-} */
+} */
+
+
+/* @mixin container($bp) {
+    @if $bp =='xxs' {
+        @container (max-width: #{$xxs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xs' {
+        @container (max-width: #{$xs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='sm' {
+        @container (max-width: #{$sm}) {
+            @content;
+        }
+    }
+
+    @if $bp =='md' {
+        @container (max-width: #{$md}) {
+            @content;
+        }
+    }
+
+    @if $bp =='lg' {
+        @container (max-width: #{$lg}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xl' {
+        @container (max-width: #{$xl}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xxl' {
+        @container (min-width: #{$xxl}) {
+            @content;
+        }
+    }
+} */
+
+@mixin container($bp, $name: main) {
+    @if $bp =='xxs' {
+        @container #{$name} (max-width: #{$xxs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xs' {
+        @container #{$name} (max-width: #{$xs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='sm' {
+        @container #{$name} (max-width: #{$sm}) {
+            @content;
+        }
+    }
+
+    @if $bp =='md' {
+        @container #{$name} (max-width: #{$md}) {
+            @content;
+        }
+    }
+
+    @if $bp =='lg' {
+        @container #{$name} (max-width: #{$lg}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xl' {
+        @container #{$name} (max-width: #{$xl}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xxl' {
+        @container #{$name} (min-width: #{$xxl}) {
+            @content;
+        }
+    }
+}

src/sass/abstract/_vars.scss

@@ -37,7 +37,7 @@
 
 	/* ? --- Paddings --- */
 	--p-chat-bubble: 1.2rem;
-	--px-chat-bubble-edge-gap: 4vw;
+	// --px-chat-bubble-edge-gap: 4vw;
 	--p-contextmenu: 0.8rem;
 	--p-contextmenu-item: 0.9rem 1rem;
 	--p-prompt-textarea: 0.7rem;
@@ -133,6 +133,16 @@
 
 	--link: var(--c-accent) !important;
 
+	@include container('md') {
+		// --px-chat-bubble-edge-gap: 1vw;
+		--p-chat-bubble: .8rem;
+		--br-chat-bubble: calc(var(--br) * 1.1);
+	}
+
+	@include container('sm') {
+		--br-chat-bubble: var(--br) !important;
+	}
+
 	@include dev('md') {
 		--p-chat-bubble: .8rem;
 		--br-chat-bubble: calc(var(--br) * 1.55);
@@ -143,9 +153,9 @@
 		--p-sidebar-nav: 0.3rem;
 	}
 
-	@include dev('sm') {
-		--px-chat-bubble-edge-gap: 0.45rem;
-	}
+	// @include dev('sm') {
+	// 	--px-chat-bubble-edge-gap: 0.45rem;
+	// }
 
 
 	// --box-shadow-sticky: 0 10px 40px 5px hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025) / 0.85);
@@ -245,6 +255,10 @@ html.light {
 	--c-bg-pre-header-btn-color: var(--c-txt);
 	--c-markdown-a: var(--c-accent);
 
+	/* ========== CodeMirror Editor ========== */
+	--c-bg-cm: var(--c-surface-1);
+
+
 	/* ? ========== Scrollbar colors ========== */
 	--c-scrollbar-thumb: var(--c-surface-3);
 	--c-scrollbar-track: transparent;
@@ -381,6 +395,10 @@ html.dark {
 	--c-bg-pre-header-btn-color: var(--c-on-accent);
 	--c-markdown-a: var(--c-accent);
 
+	/* ========== CodeMirror Editor ========== */
+	// --c-bg-cm: var(--c-bg-pre); // surface-1
+	--c-bg-cm: var(--c-surface-1); // surface-1
+
 	/* ? ========== Scrollbar colors ========== */
 	--c-scrollbar-thumb: var(--c-surface-3);
 	--c-scrollbar-track: transparent;