@mantine/code-highlight 7.16.3 → 8.0.0-alpha.0

package/styles.layer.css

@@ -1,168 +1,200 @@
-@layer mantine {.m_5caae6d3 {
-  display: inline-block;
-  padding: calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale));
-  font-size: calc(0.8125rem * var(--mantine-scale));
-  border-radius: var(--mantine-radius-xs);
-  line-height: var(--code-line-height, var(--mantine-line-height));
-  font-family: var(--mantine-font-family-monospace);
+@layer mantine {.m_5cb1b9c8 {
+  position: relative;
 }
 
-.m_2c47c4fd {
-  --code-line-height: 1.7;
-  display: block;
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-  margin: 0;
+.m_e597c321 {
+  position: relative;
+  border-radius: var(--ch-radius, 0px);
+  overflow: hidden;
 }
 
-.m_e58679f3 {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+:where([data-mantine-color-scheme='light']) .m_e597c321:where([data-with-border]) {
+      border: 1px solid var(--mantine-color-gray-2);
 }
 
-.m_be7e9c9c {
-  display: flex;
-  margin-top: calc(0.4375rem * var(--mantine-scale));
-  margin-inline-end: calc(0.4375rem * var(--mantine-scale));
+:where([data-mantine-color-scheme='dark']) .m_e597c321:where([data-with-border]) {
+      border: 1px solid var(--mantine-color-dark-6);
 }
 
-.m_5caae85b,
-.m_d498bab7 {
-  background-color: transparent;
-  opacity: 0.8;
-  margin: 0;
-  color: var(--mantine-color-dimmed);
+.m_e597c321:where([data-with-border]):where([data-code-color-scheme='dark']) {
+      border: 1px solid var(--mantine-color-dark-6);
+    }
+
+.m_e597c321:where([data-with-border]):where([data-code-color-scheme='light']) {
+      border: 1px solid var(--mantine-color-gray-2);
+    }
+
+:where([data-mantine-color-scheme='light']) .m_e597c321 {
+    --ch-background: var(--mantine-color-gray-0);
 }
 
-@media (hover: hover) {
+:where([data-mantine-color-scheme='dark']) .m_e597c321 {
+    --ch-background: var(--mantine-color-dark-8);
+}
 
-  .m_5caae85b:hover, .m_d498bab7:hover {
-    opacity: 1;
-    background-color: transparent;
-    color: var(--mantine-color-dimmed);
-  }
+.m_dfe9c588 {
+  border-radius: var(--ch-radius, var(--mantine-radius-sm));
+  overflow: hidden;
+  background-color: var(--ch-background);
+  font-size: calc(0.8125rem * var(--mantine-scale));
+  padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
 }
 
-@media (hover: none) {
+:where([data-mantine-color-scheme='light']) .m_dfe9c588:where([data-with-border]) {
+      border: 1px solid var(--mantine-color-gray-2);
+}
 
-  .m_5caae85b:active, .m_d498bab7:active {
-    opacity: 1;
-    background-color: transparent;
-    color: var(--mantine-color-dimmed);
-  }
+:where([data-mantine-color-scheme='dark']) .m_dfe9c588:where([data-with-border]) {
+      border: 1px solid var(--mantine-color-dark-6);
 }
 
-@media (max-width: 40em) {
+.m_dfe9c588:where([data-with-border]):where([data-code-color-scheme='dark']) {
+      border: 1px solid var(--mantine-color-dark-6);
+    }
 
-.m_5caae85b,
-.m_d498bab7 {
-    display: none
+.m_dfe9c588:where([data-with-border]):where([data-code-color-scheme='light']) {
+      border: 1px solid var(--mantine-color-gray-2);
+    }
+
+:where([data-mantine-color-scheme='light']) .m_dfe9c588 {
+    --ch-background: var(--mantine-color-gray-0);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_dfe9c588 {
+    --ch-background: var(--mantine-color-dark-8);
+}
+
+.m_2c47c4fd {
+  --code-line-height: 1.7;
+
+  display: block;
+  margin: 0;
 }
+
+.m_2c47c4fd[data-with-offset] .m_5caae6d3 {
+    padding-top: calc(3.125rem * var(--mantine-scale));
   }
 
-.m_5caae85b {
+.m_5caae6d3 {
+  display: block;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  background-color: var(--ch-background);
+  font-size: calc(0.8125rem * var(--mantine-scale));
+  line-height: var(--code-line-height, var(--mantine-line-height));
+  font-family: var(--mantine-font-family-monospace);
+  width: fit-content;
+  min-width: 100%;
+}
+
+.m_5caae6d3:where([data-inline]) {
+    display: inline-block;
+    padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
+    background-color: var(--ch-background);
+  }
+
+.m_be7e9c9c {
   position: absolute;
-  top: calc(0.3125rem * var(--mantine-scale));
-  inset-inline-end: calc(0.3125rem * var(--mantine-scale));
+  top: calc(0.5rem * var(--mantine-scale));
+  right: calc(0.5rem * var(--mantine-scale));
   z-index: 1;
+  background-color: var(--ch-background);
+  border-bottom-left-radius: var(--mantine-radius-md);
 }
 
-.m_5cac2e62 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--mantine-font-size-xs);
-  gap: calc(0.4375rem * var(--mantine-scale));
-  padding: calc(0.4375rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
-  font-family: var(--mantine-font-family-monospace);
-  font-weight: 700;
-  line-height: 1;
-  user-select: none;
-  cursor: pointer;
-  opacity: 0.8;
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
-  border-top: 0;
-  border-inline-start: 0;
-  white-space: nowrap;
-  margin: 0;
+.m_be7e9c9c:where([data-with-offset]) {
+    top: calc(0.75rem * var(--mantine-scale));
+  }
+
+.m_d498bab7 {
+  color: var(--mantine-color-text);
+  opacity: 0.5;
 }
 
 @media (hover: hover) {
 
-  .m_5cac2e62:hover {
+  .m_d498bab7:hover {
+    color: var(--mantine-color-bright);
     opacity: 1;
   }
 }
 
 @media (hover: none) {
 
-  .m_5cac2e62:active {
+  .m_d498bab7:active {
+    color: var(--mantine-color-bright);
     opacity: 1;
   }
 }
 
-.m_5cac2e62:where(:last-of-type) {
-    border-end-end-radius: var(--mantine-radius-sm);
+.m_d498bab7:where([data-code-color-scheme='dark']) {
+    color: var(--mantine-color-dark-0);
   }
 
-.m_5cac2e62:where(:only-child) {
-    cursor: default;
-  }
+@media (hover: hover) {
 
-.m_5cac2e62:where([data-active]) {
-    opacity: 1;
+  .m_d498bab7:where([data-code-color-scheme='dark']):hover {
+      color: var(--mantine-color-white);
   }
-
-:where([data-mantine-color-scheme='light']) .m_5cac2e62:where([data-active]) {
-      background-color: var(--mantine-color-white);
-      color: var(--mantine-color-black);
 }
 
-:where([data-mantine-color-scheme='dark']) .m_5cac2e62:where([data-active]) {
-      background-color: var(--mantine-color-dark-6);
+@media (hover: none) {
+
+  .m_d498bab7:where([data-code-color-scheme='dark']):active {
       color: var(--mantine-color-white);
+  }
 }
 
-:where([data-mantine-color-scheme='light']) .m_5cac2e62 {
-    color: var(--mantine-color-gray-8);
-    border-color: var(--mantine-color-gray-2);
-}
+.m_d498bab7:where([data-code-color-scheme='light']) {
+    color: var(--mantine-color-black);
+  }
 
-:where([data-mantine-color-scheme='dark']) .m_5cac2e62 {
-    color: var(--mantine-color-dark-0);
-    border-color: var(--mantine-color-dark-4);
-}
+@media (hover: hover) {
 
-.m_38d99e51 {
-  display: flex;
+  .m_d498bab7:where([data-code-color-scheme='light']):hover {
+      color: var(--mantine-color-black);
+  }
 }
 
-.m_9f507240 {
-  max-height: var(--ch-max-collapsed-height);
-  overflow: hidden;
-  position: relative;
+@media (hover: none) {
+
+  .m_d498bab7:where([data-code-color-scheme='light']):active {
+      color: var(--mantine-color-black);
+  }
 }
 
-.m_9f507240::before {
-    content: '';
-    z-index: 100;
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background-image: linear-gradient(0deg, var(--code-background) 16%, rgba(0, 0, 0, 0) 100%);
-    border-radius: calc(var(--mantine-radius-md) - 1px);
+.m_d498bab7 :where(svg) {
+    width: calc(1.125rem * var(--mantine-scale));
+    height: calc(1.125rem * var(--mantine-scale));
+    display: block;
+  }
+
+.m_4c3d814c:where([data-code-color-scheme='light']) {
+    background-color: var(--mantine-color-gray-9);
+    color: var(--mantine-color-white);
+  }
+
+.m_4c3d814c:where([data-code-color-scheme='dark']) {
+    background-color: var(--mantine-color-gray-2);
+    color: var(--mantine-color-black);
   }
 
-.m_9f507240:where([data-expanded]) {
-    max-height: none;
+.m_f744fd40[data-collapsed] {
+    max-height: var(--ch-max-height, 180px);
   }
 
-.m_9f507240:where([data-expanded])::before {
-      display: none;
+.m_f744fd40[data-collapsed]::before {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      bottom: 0;
+      height: calc(5rem * var(--mantine-scale));
+      pointer-events: none;
+      background-image: linear-gradient(0deg, var(--ch-background) 25%, rgba(0, 0, 0, 0) 100%);
     }
 
 .m_c9378bc2 {
   position: absolute;
+  z-index: 2;
   bottom: 0;
   inset-inline-start: 50%;
   transform: translateX(-50%);
@@ -170,128 +202,120 @@
   color: var(--mantine-color-anchor);
   width: 100%;
   text-align: center;
-  z-index: 101;
   padding-top: var(--mantine-spacing-xs);
   padding-bottom: var(--mantine-spacing-xs);
+  white-space: nowrap;
 }
 
 .m_c9378bc2[data-hidden] {
     display: none;
   }
 
-.m_5cb1b9c8 {
-  margin-top: 0;
-  position: relative;
-}
+.m_c9378bc2:where([data-code-color-scheme='dark']) {
+    color: var(--mantine-primary-color-5);
+  }
 
-.m_5cb1b9c8:where([data-collapsed]) .mantine-ScrollArea-viewport > div {
-    display: block !important;
+.m_c9378bc2:where([data-code-color-scheme='light']) {
+    color: var(--mantine-primary-color-6);
   }
 
-.m_b46cddfb {
+.m_5cac2e62 {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 0;
+  font-size: var(--mantine-font-size-xs);
+  gap: calc(0.4375rem * var(--mantine-scale));
+  padding: calc(0.3125rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
+  font-family: var(--mantine-font-family-monospace);
+  font-weight: 700;
+  line-height: 1;
+  user-select: none;
+  cursor: pointer;
+  opacity: 0.8;
+  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
+  white-space: nowrap;
+  margin: 0;
+  border-radius: var(--mantine-radius-default);
 }
 
-.m_b46cddfb > svg {
-    display: block;
+.m_5cac2e62:where([data-active]) {
+    opacity: 1;
   }
 
-.m_1f5e827e {
-  color: var(--code-text-color);
-  background: var(--code-background);
+:where([data-mantine-color-scheme='light']) .m_5cac2e62 {
+    border-color: var(--mantine-color-gray-3);
+    color: var(--mantine-color-gray-8);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1f5e827e {
-    --code-text-color: var(--mantine-color-gray-7);
-    --code-background: var(--mantine-color-gray-0);
-    --code-comment-color: var(--mantine-color-gray-6);
-    --code-keyword-color: var(--mantine-color-violet-8);
-    --code-tag-color: var(--mantine-color-red-9);
-    --code-literal-color: var(--mantine-color-blue-6);
-    --code-string-color: var(--mantine-color-blue-9);
-    --code-variable-color: var(--mantine-color-lime-9);
-    --code-class-color: var(--mantine-color-orange-9);
-}
+:where([data-mantine-color-scheme='light']) .m_5cac2e62:where([data-active]) {
+      background-color: var(--mantine-color-white);
+      color: var(--mantine-color-black);
+    }
 
-  :where([data-mantine-color-scheme='dark']) .m_1f5e827e {
-    --code-text-color: var(--mantine-color-dark-1);
-    --code-background: var(--mantine-color-dark-8);
-    --code-comment-color: var(--mantine-color-dark-3);
-    --code-keyword-color: var(--mantine-color-violet-3);
-    --code-tag-color: var(--mantine-color-yellow-4);
-    --code-literal-color: var(--mantine-color-blue-4);
-    --code-string-color: var(--mantine-color-green-6);
-    --code-variable-color: var(--mantine-color-blue-2);
-    --code-class-color: var(--mantine-color-orange-5);
+:where([data-mantine-color-scheme='dark']) .m_5cac2e62 {
+    border-color: var(--mantine-color-dark-4);
+    color: var(--mantine-color-dark-0);
 }
 
-  .m_1f5e827e .hljs-comment,
-  .m_1f5e827e .hljs-quote {
-    font-style: italic;
-    color: var(--code-comment-color);
-  }
+:where([data-mantine-color-scheme='dark']) .m_5cac2e62:where([data-active]) {
+      background-color: var(--mantine-color-dark-5);
+      color: var(--mantine-color-white);
+    }
 
-  .m_1f5e827e .hljs-doctag,
-  .m_1f5e827e .hljs-formula,
-  .m_1f5e827e .hljs-keyword {
-    color: var(--code-keyword-color);
+.m_5cac2e62:where([data-color-scheme='light']) {
+    border-color: var(--mantine-color-gray-3);
+    color: var(--mantine-color-gray-8);
   }
 
-  .m_1f5e827e .hljs-deletion,
-  .m_1f5e827e .hljs-name,
-  .m_1f5e827e .hljs-section,
-  .m_1f5e827e .hljs-selector-tag,
-  .m_1f5e827e .hljs-subst {
-    color: var(--code-tag-color);
-  }
+.m_5cac2e62:where([data-color-scheme='light']):where([data-active]) {
+      background-color: var(--mantine-color-white);
+      color: var(--mantine-color-black);
+    }
 
-  .m_1f5e827e .hljs-literal {
-    color: var(--code-literal-color);
+.m_5cac2e62:where([data-color-scheme='dark']) {
+    border-color: var(--mantine-color-dark-4);
+    color: var(--mantine-color-dark-0);
   }
 
-  .m_1f5e827e .hljs-addition,
-  .m_1f5e827e .hljs-attribute,
-  .m_1f5e827e .hljs-meta .hljs-string,
-  .m_1f5e827e .hljs-regexp,
-  .m_1f5e827e .hljs-string {
-    color: var(--code-string-color);
-  }
+.m_5cac2e62:where([data-color-scheme='dark']):where([data-active]) {
+      background-color: var(--mantine-color-dark-5);
+      color: var(--mantine-color-white);
+    }
 
-  .m_1f5e827e .hljs-attr,
-  .m_1f5e827e .hljs-number,
-  .m_1f5e827e .hljs-selector-attr,
-  .m_1f5e827e .hljs-selector-class,
-  .m_1f5e827e .hljs-selector-pseudo,
-  .m_1f5e827e .hljs-template-variable,
-  .m_1f5e827e .hljs-type,
-  .m_1f5e827e .hljs-variable {
-    color: var(--code-variable-color);
-  }
+@media (hover: hover) {
 
-  .m_1f5e827e .hljs-bullet,
-  .m_1f5e827e .hljs-link,
-  .m_1f5e827e .hljs-meta,
-  .m_1f5e827e .hljs-selector-id,
-  .m_1f5e827e .hljs-symbol,
-  .m_1f5e827e .hljs-title,
-  .m_1f5e827e .hljs-built_in,
-  .m_1f5e827e .hljs-class .hljs-title,
-  .m_1f5e827e .hljs-title.class_ {
-    color: var(--code-class-color);
+  .m_5cac2e62:hover {
+    opacity: 1;
   }
+}
+
+@media (hover: none) {
 
-  .m_1f5e827e .hljs-emphasis {
-    font-style: italic;
+  .m_5cac2e62:active {
+    opacity: 1;
   }
+}
 
-  .m_1f5e827e .hljs-strong {
-    font-weight: 700;
+.m_5cac2e62:where(:only-child) {
+    cursor: default;
   }
 
-  .m_1f5e827e .hljs-link {
-    text-decoration: underline;
+.m_b46cddfb :where(svg) {
+    display: block;
   }
+
+.m_7b14120b {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  right: calc(4.375rem * var(--mantine-scale));
+}
+
+.m_38d99e51 {
+  display: flex;
+  padding: calc(0.75rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
+  padding-bottom: 0;
+  gap: var(--mantine-spacing-xs);
+}
 }