@foblex/m-render 2.6.1 → 2.6.3

package/assets/styles/_code-group.scss

@@ -40,6 +40,7 @@
       align-items: flex-start;
       height: calc(100% - 52px);
       overflow: auto;
+      position: relative;
     }
   }
 }

package/assets/styles/_code-highlight.scss

@@ -1,96 +1,138 @@
-:root {
-  .m-render {
-    --punctuation: #24292E;
-    --attr-name: #D73A49;
-    --property: #032F62;
-    --keyword: #28a745;
-    --attr-value: #1b7c83;
-  }
+.m-render {
+  --token-tag: var(--primary-2);
+  --token-attr-name: var(--purple-2);
+  --token-attr-value: var(--green-3);
+  --token-string: var(--green-2);
+  --token-punctuation: var(--primary-text);
+  --token-keyword: var(--purple-2);
+  --token-function: var(--primary-3);
+  --token-number: var(--yellow-3);
+  --token-operator: var(--secondary-text);
+  --token-interpolation: var(--purple-2);
+  --token-expression: var(--green-3);
+  --token-comment: var(--gray-1);
+  --token-selector: var(--primary-2);
+  --token-variable: #d17adf;
 }
 
 .dark {
   .m-render {
-    --punctuation: #E1E4E8;
-    --attr-name: #F97583;
-    --property: #9ECBFF;
-    --keyword: #34d058;
-    --attr-value: #39c5cf;
+    --token-tag: var(--indigo-1);
+    --token-attr-name: var(--purple-1);
+    --token-attr-value: var(--green-1);
+    --token-string: var(--green-2);
+    --token-punctuation: var(--primary-text);
+    --token-keyword: var(--purple-1);
+    --token-function: var(--primary-2);
+    --token-number: var(--yellow-1);
+    --token-operator: var(--secondary-text);
+    --token-interpolation: var(--purple-1);
+    --token-expression: var(--green-2);
+    --token-comment: var(--gray-1);
+    --token-selector: var(--indigo-1);
+    --token-variable: #e0b3ff;
   }
 }
 
 .m-render {
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata,
-  .token.attr-name {
-    color: var(--attr-name);
+  .token.tag {
+    color: var(--token-tag);
   }
 
   .token.attr-name {
-    color: var(--attr-value);
+    color: var(--token-attr-name);
   }
 
-  .token.namespace {
-    opacity: .7;
+  .token.attr-value {
+    color: var(--token-attr-value);
   }
 
-  .token.property,
-  .token.constant,
-  .token.symbol,
-  .token.deleted,
-  .token.keyword,
-  .token.tag, {
-    color: var(--property);
+  .token.angular-control-flow-attribute,
+  .token.angular-control-flow-block {
+    color: var(--token-keyword);
   }
 
-  .token.boolean,
-  .token.number,
-  .token.string,
-  .token.char,
-  .token.regex,
-  .token.important,
-  .token.variable,
-  .token.operator {
-    color: var(--keyword);
+  .token.angular-interpolation .expression,
+  .token.language-ts {
+    color: var(--token-expression);
   }
 
-  .token.selector,
-  .token.builtin,
-  .token.inserted,
-  .token.function,
-  .token.class-name,
-  .token.punctuation {
-    color: var(--property);
+  .language-ts .token.keyword {
+    color: var(--token-keyword);
   }
 
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string,
-  .token.punctuation,
-  .language-bash {
-    color: var(--punctuation);
+  .language-ts .token.class-name {
+    color: var(--token-function);
   }
 
-  .token.atrule {
-    color: var(--attr-value);
+  .language-ts .token.function {
+    color: var(--token-tag);
   }
 
-  .token.attr-value {
-    color: var(--keyword);
+  .language-ts .token.operator {
+    color: var(--token-operator);
   }
 
-  .token.important,
-  .token.bold {
-    font-weight: bold;
+  .language-ts .token.punctuation {
+    color: var(--token-punctuation);
+  }
+
+  .language-ts .token.string {
+    color: var(--token-string);
+  }
+
+  .language-ts .token.number {
+    color: var(--token-number);
   }
 
-  .token.italic {
+  .token.comment {
+    color: var(--token-comment);
     font-style: italic;
   }
+}
+
+
+.m-render {
+  .language-scss .token.selector,
+  .language-css .token.selector {
+    color: var(--token-selector, #3e63dd);
+  }
 
-  .token.entity {
-    cursor: help;
+  .language-scss .token.property,
+  .language-css .token.property {
+    color: var(--token-attr-name);
+  }
+
+  .language-scss .token.value,
+  .language-scss .token.attr-value,
+  .language-css .token.value,
+  .language-css .token.attr-value {
+    color: var(--token-attr-value);
+  }
+
+  .language-scss .token.variable {
+    color: var(--token-variable, #d17adf);
+  }
+
+  .language-scss .token.keyword {
+    color: var(--token-keyword);
+    font-weight: bold;
+  }
+
+  .language-scss .token.function {
+    color: var(--token-function);
+  }
+
+  .language-scss .token.punctuation {
+    color: var(--token-punctuation);
+  }
+
+  .language-scss .token.string {
+    color: var(--token-string);
+  }
+
+  .language-scss .token.comment {
+    color: var(--token-comment);
+    font-style: italic;
   }
 }

package/assets/styles/_code-view.scss

@@ -14,8 +14,6 @@
   pre {
     position: relative;
     margin: 0;
-    overflow: auto;
-    max-height: 600px;
 
     code {
       display: block;
@@ -28,8 +26,7 @@
     }
   }
 
-  .f-code-view, .f-async-code-view, .f-example-view {
-    position: relative;
+  .f-code-view, .f-example-view {
     background-color: var(--code-view-background);
     border-radius: var(--code-view-border-radius);
     overflow-x: auto;

package/assets/styles/_icons.scss

@@ -72,6 +72,7 @@
   color: var(--secondary-text);
   width: 21px;
   height: 21px;
+  mask-repeat: no-repeat !important;
 
   &:hover {
     color: var(--primary-text);

package/assets/styles/styles.scss

@@ -79,3 +79,22 @@ a {
   margin: 0 !important;
   padding: 0 !important;
 }
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--divider-color);
+  border-top-color: var(--primary-text);
+  border-radius: 50%;
+  animation: spin 1.0s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}