@limetech/lime-elements 36.2.0 → 36.3.0-next.2

package/dist/collection/components/chip-set/chip-set.js

@@ -326,7 +326,7 @@ export class ChipSet {
     return (h("span", { role: "gridcell" }, h("a", Object.assign({ role: "button", tabindex: this.disabled ? '-1' : '0', class: "mdc-chip__text" }, attributes), chip.text)));
   }
   renderFilterChip(chip) {
-    return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` }, h("span", { class: "mdc-chip__checkmark" }, h("svg", { class: "mdc-chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "mdc-chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("span", { role: "gridcell" }, h("span", { role: "checkbox", tabindex: this.disabled ? '-1' : '0', "aria-checked": "false", class: "mdc-chip__text" }, chip.text)), this.renderBadge(chip)));
+    return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` }, h("span", { class: "mdc-chip__checkmark" }, h("svg", { class: "mdc-chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "mdc-chip__checkmark-path", fill: "none", stroke: "currentColor", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("span", { role: "gridcell" }, h("span", { role: "checkbox", tabindex: this.disabled ? '-1' : '0', "aria-checked": "false", class: "mdc-chip__text" }, chip.text)), this.renderBadge(chip)));
   }
   renderInputChip(chip, index) {
     return [

package/dist/collection/components/circular-progress/circular-progress.css

@@ -49,6 +49,10 @@
       --lime-text-secondary-on-background-color,
       rgba(var(--contrast-1700), 0.54)
   );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
   --lime-error-text-color: rgb(var(--color-red-darker));
   --mdc-theme-surface: var(
       --lime-surface-background-color,
@@ -56,7 +60,7 @@
   );
   --mdc-theme-on-surface: var(
       --lime-on-surface-color,
-      var(--lime-text-primary-on-background-color)
+      rgb(var(--contrast-1500))
   );
 }
 

package/dist/collection/components/code-editor/code-editor.css

@@ -457,14 +457,6 @@ span.CodeMirror-selectedtext { background: none; }
 :host {
   display: flex;
   font-size: var(--code-editor-font-size, 0.875rem);
-}
-
-.editor {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-}
-.editor.is-light-mode {
   --code-editor-neutral-text-color: var(--contrast-1100);
   --code-editor-background-color: var(--contrast-200);
   --code-editor-gutter-background-color: var(--contrast-300);
@@ -473,111 +465,145 @@ span.CodeMirror-selectedtext { background: none; }
   --code-editor-selection-highlight-color: var(--color-cyan-default);
   --code-editor-selection-lowlight-color: var(--contrast-600);
 }
-.editor.is-light-mode .cm-attribute,
-.editor.is-light-mode .cm-property,
-.editor.is-light-mode .cm-keyword {
+:host .cm-attribute,
+:host .cm-property,
+:host .cm-keyword {
   color: rgb(var(--color-violet-light));
 }
-.editor.is-light-mode .cm-operator {
+:host .cm-operator {
   color: rgb(var(--color-sky-dark));
 }
-.editor.is-light-mode .cm-variable {
+:host .cm-variable {
   color: rgb(var(--color-pink-light));
 }
-.editor.is-light-mode .cm-variable-2 {
+:host .cm-variable-2 {
   color: rgb(var(--contrast-1100));
 }
-.editor.is-light-mode .cm-variable-3,
-.editor.is-light-mode .cm-type {
+:host .cm-variable-3,
+:host .cm-type {
   color: rgb(var(--color-amber-darker));
 }
-.editor.is-light-mode .cm-builtin,
-.editor.is-light-mode .cm-meta {
+:host .cm-builtin,
+:host .cm-meta {
   color: rgb(var(--color-amber-default));
 }
-.editor.is-light-mode .cm-atom {
+:host .cm-atom {
   color: rgb(var(--color-coral-default));
 }
-.editor.is-light-mode .cm-tag,
-.editor.is-light-mode .cm-number {
+:host .cm-tag,
+:host .cm-number {
   color: rgb(var(--color-magenta-default));
 }
-.editor.is-light-mode .cm-def {
+:host .cm-def {
   color: rgb(var(--color-sky-default));
 }
-.editor.is-light-mode .cm-string {
+:host .cm-string {
   color: rgb(var(--color-green-dark));
 }
-.editor.is-light-mode .cm-string-2 {
+:host .cm-string-2 {
   color: rgb(var(--color-pink-default));
 }
-.editor.is-light-mode .cm-qualifier {
+:host .cm-qualifier {
   color: rgb(var(--color-grass-default));
 }
-.editor.is-light-mode .cm-error {
+:host .cm-error {
   color: rgb(var(--color-white));
   background-color: rgb(var(--color-red-default));
 }
-.editor.is-light-mode .cm-comment {
+:host .cm-comment {
   color: rgba(var(--code-editor-neutral-text-color), 0.7);
 }
-.editor.is-dark-mode {
-  --code-editor-neutral-text-color: var(--contrast-200);
-  --code-editor-background-color: var(--contrast-1600);
-  --code-editor-gutter-background-color: var(--contrast-1500);
-  --code-editor-line-number-text-color: var(--contrast-1000);
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=force-light]) :host {
+    --code-editor-neutral-text-color: var(--contrast-1600);
+    --code-editor-line-number-text-color: var(--contrast-800);
+    --code-editor-cursor-color: var(--color-amber-default);
+    --code-editor-selection-highlight-color: var(--color-cyan-light);
+    --code-editor-selection-lowlight-color: var(--contrast-100);
+  }
+  :root:not([data-theme=force-light]) :host .cm-attribute,
+:root:not([data-theme=force-light]) :host .cm-property,
+:root:not([data-theme=force-light]) :host .cm-keyword {
+    color: rgb(var(--color-purple-lighter));
+  }
+  :root:not([data-theme=force-light]) :host .cm-operator {
+    color: rgb(var(--color-sky-lighter));
+  }
+  :root:not([data-theme=force-light]) :host .cm-variable-3,
+:root:not([data-theme=force-light]) :host .cm-type {
+    color: rgb(var(--color-yellow-light));
+  }
+  :root:not([data-theme=force-light]) :host .cm-atom {
+    color: rgb(var(--color-coral-light));
+  }
+  :root:not([data-theme=force-light]) :host .cm-tag,
+:root:not([data-theme=force-light]) :host .cm-number {
+    color: rgb(var(--color-magenta-light));
+  }
+  :root:not([data-theme=force-light]) :host .cm-def {
+    color: rgb(var(--color-sky-light));
+  }
+  :root:not([data-theme=force-light]) :host .cm-string {
+    color: rgb(var(--color-lime-light));
+  }
+  :root:not([data-theme=force-light]) :host .cm-string-2 {
+    color: rgb(var(--color-pink-lighter));
+  }
+  :root:not([data-theme=force-light]) :host .cm-qualifier {
+    color: rgb(var(--color-grass-light));
+  }
+  :root:not([data-theme=force-light]) :host .cm-comment {
+    color: rgba(var(--code-editor-neutral-text-color), 0.4);
+  }
+}
+:root[data-theme=force-dark] :host {
+  --code-editor-neutral-text-color: var(--contrast-1600);
+  --code-editor-line-number-text-color: var(--contrast-800);
   --code-editor-cursor-color: var(--color-amber-default);
   --code-editor-selection-highlight-color: var(--color-cyan-light);
-  --code-editor-selection-lowlight-color: var(--contrast-1700);
+  --code-editor-selection-lowlight-color: var(--contrast-100);
 }
-.editor.is-dark-mode .cm-attribute,
-.editor.is-dark-mode .cm-property,
-.editor.is-dark-mode .cm-keyword {
+:root[data-theme=force-dark] :host .cm-attribute,
+:root[data-theme=force-dark] :host .cm-property,
+:root[data-theme=force-dark] :host .cm-keyword {
   color: rgb(var(--color-purple-lighter));
 }
-.editor.is-dark-mode .cm-operator {
+:root[data-theme=force-dark] :host .cm-operator {
   color: rgb(var(--color-sky-lighter));
 }
-.editor.is-dark-mode .cm-variable {
-  color: rgb(var(--color-pink-light));
-}
-.editor.is-dark-mode .cm-variable-2 {
-  color: rgb(var(--contrast-300));
-}
-.editor.is-dark-mode .cm-variable-3,
-.editor.is-dark-mode .cm-type {
+:root[data-theme=force-dark] :host .cm-variable-3,
+:root[data-theme=force-dark] :host .cm-type {
   color: rgb(var(--color-yellow-light));
 }
-.editor.is-dark-mode .cm-builtin,
-.editor.is-dark-mode .cm-meta {
-  color: rgb(var(--color-amber-default));
-}
-.editor.is-dark-mode .cm-atom {
+:root[data-theme=force-dark] :host .cm-atom {
   color: rgb(var(--color-coral-light));
 }
-.editor.is-dark-mode .cm-tag,
-.editor.is-dark-mode .cm-number {
+:root[data-theme=force-dark] :host .cm-tag,
+:root[data-theme=force-dark] :host .cm-number {
   color: rgb(var(--color-magenta-light));
 }
-.editor.is-dark-mode .cm-def {
+:root[data-theme=force-dark] :host .cm-def {
   color: rgb(var(--color-sky-light));
 }
-.editor.is-dark-mode .cm-string {
+:root[data-theme=force-dark] :host .cm-string {
   color: rgb(var(--color-lime-light));
 }
-.editor.is-dark-mode .cm-string-2 {
+:root[data-theme=force-dark] :host .cm-string-2 {
   color: rgb(var(--color-pink-lighter));
 }
-.editor.is-dark-mode .cm-qualifier {
+:root[data-theme=force-dark] :host .cm-qualifier {
   color: rgb(var(--color-grass-light));
 }
-.editor.is-dark-mode .cm-error {
-  color: rgb(var(--color-white));
-  background-color: rgb(var(--color-red-default));
-}
-.editor.is-dark-mode .cm-comment {
+:root[data-theme=force-dark] :host .cm-comment {
   color: rgba(var(--code-editor-neutral-text-color), 0.4);
 }
+
+.editor {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
 .editor.readonly .CodeMirror-focused .CodeMirror-cursors {
   visibility: visible !important;
 }
@@ -639,27 +665,27 @@ span.CodeMirror-selectedtext { background: none; }
 }
 .cm-s-lime .CodeMirror-foldmarker {
   position: relative;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  box-shadow: var(--button-shadow-normal);
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   color: transparent;
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
   text-shadow: none;
   padding: 0 0.5rem;
   border-radius: 1rem;
-  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'><circle cx='16' cy='16' r='2'/><circle cx='26' cy='16' r='2'/><circle cx='6' cy='16' r='2'/></svg>");
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'><circle fill='rgba(186,186,192,0.7)' cx='16' cy='16' r='2'/><circle fill='rgba(186,186,192,0.7)' cx='26' cy='16' r='2'/><circle fill='rgba(186,186,192,0.7)' cx='6' cy='16' r='2'/></svg>");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 .cm-s-lime .CodeMirror-foldmarker:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .cm-s-lime .CodeMirror-foldmarker:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-.is-dark-mode .cm-s-lime .CodeMirror-foldmarker {
-  background-color: rgb(var(--contrast-1200));
-}
 .cm-s-lime [class^=CodeMirror-foldgutter] {
   color: var(--code-editor-neutral-text-color);
   transition: opacity 0.2s ease;

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -49,6 +49,10 @@
       --lime-text-secondary-on-background-color,
       rgba(var(--contrast-1700), 0.54)
   );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
   --lime-error-text-color: rgb(var(--color-red-darker));
   --mdc-theme-surface: var(
       --lime-surface-background-color,
@@ -56,7 +60,7 @@
   );
   --mdc-theme-on-surface: var(
       --lime-on-surface-color,
-      var(--lime-text-primary-on-background-color)
+      rgb(var(--contrast-1500))
   );
 }