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

package/dist/collection/components/dialog/dialog.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))
   );
 }
 
@@ -76,7 +80,7 @@
  * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  */
 :host {
-  --dialog-background-color: rgb(var(--contrast-100));
+  --dialog-background-color: var(--lime-elevated-surface-background-color);
   --header-heading-color: var(--dialog-heading-title-color);
   --header-subheading-color: var(--dialog-heading-subtitle-color);
   --header-supporting-text-color: var(--dialog-heading-supporting-text-color);
@@ -684,6 +688,9 @@
   height: 100%;
   width: 100%;
 }
+.mdc-dialog .mdc-dialog__scrim {
+  background-color: rgba(var(--color-black), 0.4);
+}
 .mdc-dialog .mdc-dialog__container {
   height: 100%;
   width: var(--dialog-width, auto);
@@ -698,6 +705,7 @@
   border-radius: var(--dialog-border-radius, 0.25rem);
 }
 .mdc-dialog .mdc-dialog__content {
+  color: var(--mdc-theme-on-surface);
   padding: var(--dialog-padding-top-bottom, min(1.5rem, 3vw)) var(--dialog-padding-left-right, min(1.25rem, 3vw));
 }
 

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -13,7 +13,9 @@
 .button {
   all: unset;
   cursor: pointer;
-  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(--limel-dock-item-text-color);
+  background-color: var(--dock-background-color);
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -24,15 +26,16 @@
   font-size: 0.875rem;
   padding: 0 0.5rem;
   min-width: var(--dock-item-height);
-  color: var(--limel-dock-item-text-color);
-  background-color: var(--dock-background-color);
 }
 .button:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .button:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+  background-color: var(--mdc-theme-surface);
+  box-shadow: var(--button-shadow-inset-pressed);
+  transform: translate3d(0, 0.05rem, 0);
 }
 .button:focus {
   outline: none;

package/dist/collection/components/dock/dock.css

@@ -36,7 +36,7 @@
   display: inline-flex;
   flex-direction: column;
   background-color: var(--dock-background-color, rgb(var(--contrast-100)));
-  box-shadow: 0.1875rem 0 0.375rem -0.125rem rgba(var(--color-black), 0.15), 0.1875rem 0 0.625rem -0.125rem rgba(var(--color-black), 0.05);
+  box-shadow: var(--shadow-depth-8);
 }
 
 :host(limel-dock:not(.has-mobile-layout)) {
@@ -75,7 +75,9 @@ nav::-webkit-scrollbar {
 .expand-shrink {
   all: unset;
   box-sizing: border-box;
-  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: transparent;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -86,6 +88,8 @@ nav::-webkit-scrollbar {
   border-radius: 0.375rem;
 }
 .expand-shrink:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .expand-shrink:active {

package/dist/collection/components/form/form.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/icon-button/icon-button.css

@@ -243,7 +243,9 @@
 }
 
 .mdc-icon-button {
-  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(--icon-background-color, transparent);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -252,9 +254,10 @@
   width: 2.25rem;
   padding: 0.125rem;
   border-radius: 50%;
-  background-color: var(--icon-background-color, transparent);
 }
 .mdc-icon-button:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .mdc-icon-button:active {

package/dist/collection/components/info-tile/info-tile.css

@@ -78,14 +78,18 @@ a {
   flex-grow: 1;
   padding: 0.25rem 1rem 0.5rem 1rem;
   border-radius: var(--info-tile-border-radius, 1rem);
-  background-color: var(--info-tile-background-color, rgb(var(--contrast-100)));
+  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
 }
 a.is-clickable {
-  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(--info-tile-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-normal);
   cursor: pointer;
 }
 a.is-clickable:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-hovered);
 }
 a.is-clickable:active {
@@ -101,19 +105,19 @@ a.is-clickable:focus-visible {
 }
 
 .icon {
+  z-index: 1;
   position: absolute;
   top: 0.5rem;
   right: 0.75rem;
   padding: 0.25rem;
-  display: flex;
-  justify-content: center;
+  aspect-ratio: 1/1;
   color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));
   border-radius: 0;
   height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));
 }
 @supports not (container-type: size) {
   .icon {
-    height: min(60%, var(--icon-max-size));
+    height: min(20%, 5rem);
   }
 }
 .has-circular-progress .icon {
@@ -132,11 +136,16 @@ a.is-clickable:focus-visible {
       var(--icon-max-size)
   );
 }
+@supports not (container-type: size) {
+  .progress {
+    --circular-progress-size: initial;
+  }
+}
 
 .label {
   z-index: 1;
   color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
-  line-height: normal;
+  line-height: 1.2;
   font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));
 }
 @supports not (container-type: size) {
@@ -207,7 +216,7 @@ limel-linear-progress {
 }
 @supports not (container-type: size) {
   .value {
-    font-size: 2.5rem;
+    font-size: 1.5rem;
   }
 }
 :host(limel-info-tile[loading]) .value {

package/dist/collection/components/input-field/input-field.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))
   );
 }
 
@@ -2112,6 +2116,12 @@
   color: rgba(var(--contrast-1400), 0.5);
 }
 
+.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--with-trailing-icon .mdc-text-field__icon--trailing, .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link {
   margin-right: 0.5rem;
 }
@@ -2126,6 +2136,14 @@
 .mdc-text-field {
   width: 100%;
 }
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix,
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
+}
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__affix,
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__icon {
+  color: rgb(var(--contrast-700));
+}
 
 .lime-empty-value-for-readonly {
   z-index: 1;
@@ -2176,7 +2194,7 @@
 }
 
 .autocomplete-list {
-  background-color: white;
+  background-color: var(--lime-elevated-surface-background-color);
   position: absolute;
   top: 0;
   left: 0;
@@ -2189,13 +2207,17 @@
   cursor: pointer;
 }
 
+input.mdc-text-field__input::placeholder {
+  color: rgb(var(--contrast-900)) !important;
+}
 input.mdc-text-field__input::-webkit-search-cancel-button {
-  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;
@@ -2208,23 +2230,18 @@ input.mdc-text-field__input::-webkit-search-cancel-button {
   margin: auto;
 }
 input.mdc-text-field__input::-webkit-search-cancel-button:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: rgb(var(--contrast-1100));
   box-shadow: var(--button-shadow-hovered);
 }
 input.mdc-text-field__input::-webkit-search-cancel-button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-input.mdc-text-field__input::-webkit-search-cancel-button:hover {
-  background-color: #757580;
-}
 input.mdc-text-field__input::-webkit-search-cancel-button:active {
   transform: none;
 }
 
-.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-character-counter {
   transition: opacity 0.2s ease;
   opacity: 0;

package/dist/collection/components/linear-progress/linear-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))
   );
 }