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

package/dist/collection/components/chip-set/chip-set.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))
   );
 }
 
@@ -2587,6 +2591,7 @@
 }
 
 .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
   flex-shrink: 0;
 }
 
@@ -2664,6 +2669,7 @@
 }
 
 .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -2673,19 +2679,23 @@
 }
 
 .mdc-chip {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);
   max-width: 100%;
   min-width: 2rem;
   padding: 0 0.0625rem;
   display: inline-grid;
   grid-auto-flow: column;
-  background-color: rgb(var(--contrast-100));
 }
 .mdc-chip:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .mdc-chip:active {
+  background-color: var(--mdc-theme-surface);
   box-shadow: var(--button-shadow-inset-pressed);
   transform: translate3d(0, 0.05rem, 0);
 }
@@ -2710,15 +2720,17 @@
   border-radius: 3.75rem;
   box-shadow: var(--shadow-depth-8-focused);
 }
-.mdc-chip:hover {
-  background-color: rgb(var(--contrast-100));
-}
 .mdc-chip.mdc-chip--selected {
+  color: var(--mdc-theme-primary) !important;
+  background-color: var(--mdc-theme-surface) !important;
   box-shadow: var(--button-shadow-inset);
 }
 .mdc-chip.mdc-chip--selected:active {
   box-shadow: var(--button-shadow-inset-pressed);
 }
+.mdc-chip.mdc-chip--selected .mdc-chip__icon--leading {
+  color: var(--mdc-theme-primary) !important;
+}
 
 .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
 .mdc-chip__checkmark {
@@ -2781,7 +2793,8 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 }
 
 .mdc-chip__icon.mdc-chip__icon--trailing {
-  transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  color: var(--mdc-theme-on-surface);
   margin-left: 0;
   margin-right: 0.3125rem;
   width: 1.375rem;
@@ -2811,6 +2824,9 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
   flex-grow: 1;
   flex-shrink: 0;
 }
+.mdc-text-field .mdc-text-field__input::placeholder {
+  color: rgb(var(--contrast-900)) !important;
+}
 .mdc-text-field .mdc-text-field__input.hidden {
   transition: all 0s;
   opacity: 0;
@@ -2853,13 +2869,13 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 }
 
 .clear-all-button {
-  transition: opacity 0.3s ease;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: rgb(var(--contrast-900));
   cursor: pointer;
   height: 1.25rem;
   width: 1.25rem;
   border-radius: 50%;
-  background-color: #babac0;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 0.75rem;
@@ -2870,15 +2886,14 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
   opacity: 0;
 }
 .clear-all-button:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: rgb(var(--contrast-1100));
   box-shadow: var(--button-shadow-hovered);
 }
 .clear-all-button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-.clear-all-button:hover {
-  background-color: #757580;
-}
 .clear-all-button:focus {
   outline: none;
 }
@@ -2919,6 +2934,7 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 .delimiter {
   opacity: 0.5;
   padding: 0 0.125rem;
+  color: var(--mdc-theme-on-surface);
 }
 
 :host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:before, :host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:after {
@@ -2976,6 +2992,12 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
   flex-basis: 100%;
 }
 
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
+.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter,
+.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+  color: rgba(var(--contrast-1200), 1);
+}
+
 .mdc-text-field-helper-text:before {
   height: 0.75rem;
   display: inline-block;

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))
   );
 }
 
@@ -134,6 +138,7 @@ section.open .section__header:hover {
   text-transform: inherit;
   /* @alternate */
   text-transform: var(--mdc-typography-headline2-text-transform, inherit);
+  color: var(--mdc-theme-on-surface);
   justify-self: flex-start;
   padding-right: 0.75rem;
   user-select: none;