npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1360 → 3.0.1361 - Mend

@cloudscape-design/components-themeable 3.0.1360 → 3.0.1361

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "0c1c9fd2e4302cc7d8b08b5db18cbe1b7ee4c5bc"
+  "commit": "74e4f3d0f6f500eee81b14e4ae7488ca04d27798"
 }

package/lib/internal/scss/alert/styles.scss CHANGED Viewed

@@ -31,7 +31,7 @@ $tokens: style-api.resolve($props, carrier);
 .alert {
   @include style-api.carriers($tokens);
   @include styles.styles-reset;
-  color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-alert-default});
+  color: style-api.value($tokens, color, awsui.$color-text-alert-default);
   position: relative;
   display: flex;
   flex-direction: row;
@@ -39,13 +39,13 @@ $tokens: style-api.resolve($props, carrier);
   border-block-end: awsui.$border-width-alert-block-end solid;
   border-inline-start: awsui.$border-width-alert-inline-start solid;
   border-inline-end: awsui.$border-width-alert-inline-end solid;
-  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-alert-vertical});
-  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-alert-horizontal});
-  background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-container-content});
+  border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  border-end-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  border-end-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  padding-block: style-api.value($tokens, padding-block, awsui.$space-alert-vertical);
+  padding-inline: style-api.value($tokens, padding-inline, awsui.$space-alert-horizontal);
+  background-color: style-api.value($tokens, background-color, awsui.$color-background-container-content);
 }
 .alert-wrapper {
@@ -173,11 +173,12 @@ $_text-colors: (
 @each $type in map.keys($_text-colors) {
   .type-#{$type} {
-    border-color: var(#{style-api.read($tokens, border-color)}, #{map.get($_border-colors, $type)});
-    background-color: var(#{style-api.read($tokens, background-color)}, #{map.get($_background-colors, $type)});
+    border-color: style-api.value($tokens, border-color, map.get($_border-colors, $type));
+    background-color: style-api.value($tokens, background-color, map.get($_background-colors, $type));
     > .alert-wrapper > .alert-focus-wrapper > .icon {
-      color: var(
-        #{style-api.read($icon-tokens, color)},
+      color: style-api.value(
+        $icon-tokens,
+        color,
         var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)})
       );
     }

package/lib/internal/scss/badge/styles.scss CHANGED Viewed

@@ -17,83 +17,72 @@ $tokens: style-api.resolve(style-api.combine(style-api.$surface, (padding-block,
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
-  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
-  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
-  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
+  border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
+  border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
+  border-end-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
+  border-end-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
   border-block-style: solid;
   border-inline-style: solid;
-  border-width: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-badge});
-  padding-block: var(#{style-api.read($tokens, padding-block)}, 0);
-  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xs});
-  color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-notification-default});
+  border-width: style-api.value($tokens, border-width, awsui.$border-width-badge);
+  padding-block: style-api.value($tokens, padding-block, 0);
+  padding-inline: style-api.value($tokens, padding-inline, awsui.$space-xs);
+  color: style-api.value($tokens, color, awsui.$color-text-notification-default);
   &.badge-color-grey {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-grey});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-grey});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-grey});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-grey);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-grey);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-grey);
   }
   &.badge-color-green {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-green});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-green});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-green});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-green);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-green);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-green);
   }
   &.badge-color-blue {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-blue});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-blue});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-blue});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-blue);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-blue);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-blue);
   }
   &.badge-color-red {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-red});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-red});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-red});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-red);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-red);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-red);
   }
   &.badge-color-severity-critical {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-critical}
+    background-color: style-api.value(
+      $tokens,
+      background-color,
+      awsui.$color-background-notification-severity-critical
     );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-critical});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-critical});
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-critical);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-critical);
   }
   &.badge-color-severity-high {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-high}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-high});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-high});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-high);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-high);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-high);
   }
   &.badge-color-severity-medium {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-medium}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-medium});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-medium});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-medium);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-medium);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-medium);
   }
   &.badge-color-severity-low {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-low}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-low});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-low});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-low);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-low);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-low);
   }
   &.badge-color-severity-neutral {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-neutral}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-neutral});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-neutral});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-neutral);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-neutral);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-neutral);
   }
 }

package/lib/internal/scss/button/styles.scss CHANGED Viewed

@@ -18,78 +18,78 @@ $tokens: style-api.resolve($props, carrier);
 @include style-api.docs('root', $tokens);
 @mixin adjust-for-variant($variant) {
-  background: var(
-    #{style-api.read($tokens, background-color)},
+  background: style-api.value(
+    $tokens,
+    background-color,
     var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'))
   );
-  color: var(
-    #{style-api.read($tokens, color)},
-    var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'))
-  );
-  border-color: var(
-    #{style-api.read($tokens, border-color)},
+  color: style-api.value($tokens, color, var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color')));
+  border-color: style-api.value(
+    $tokens,
+    border-color,
     var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')})
   );
-  box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDefault}));
+  box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowDefault}));
   @if map.get($variant, 'border-width') {
-    border-block-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
-    border-inline-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
+    border-block-width: style-api.value($tokens, border-width, map.get($variant, 'border-width'));
+    border-inline-width: style-api.value($tokens, border-width, map.get($variant, 'border-width'));
   }
   position: relative;
   text-decoration: none;
   @if map.get($variant, 'padding') {
-    padding-block: var(#{style-api.read($tokens, padding-block)}, #{map.get($variant, 'padding')});
-    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{map.get($variant, 'padding')});
+    padding-block: style-api.value($tokens, padding-block, map.get($variant, 'padding'));
+    padding-inline: style-api.value($tokens, padding-inline, map.get($variant, 'padding'));
   }
   font-weight: map.get($variant, 'font-weight');
   &:hover {
-    background: var(
-      #{style-api.read($tokens, background-color)},
+    background: style-api.value(
+      $tokens,
+      background-color,
       var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'))
     );
-    border-color: var(
-      #{style-api.read($tokens, border-color)},
+    border-color: style-api.value(
+      $tokens,
+      border-color,
       var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'))
     );
-    color: var(
-      #{style-api.read($tokens, color)},
-      var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'))
-    );
-    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowHover}));
+    color: style-api.value($tokens, color, var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color')));
+    box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowHover}));
     text-decoration: none;
   }
   &:active {
-    background: var(
-      #{style-api.read($tokens, background-color)},
+    background: style-api.value(
+      $tokens,
+      background-color,
       var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'))
     );
-    border-color: var(
-      #{style-api.read($tokens, border-color)},
+    border-color: style-api.value(
+      $tokens,
+      border-color,
       var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'))
     );
-    color: var(
-      #{style-api.read($tokens, color)},
-      var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'))
-    );
-    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowActive}));
+    color: style-api.value($tokens, color, var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color')));
+    box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowActive}));
   }
   &.disabled {
-    background: var(
-      #{style-api.read($tokens, background-color)},
+    background: style-api.value(
+      $tokens,
+      background-color,
       var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'))
     );
-    border-color: var(
-      #{style-api.read($tokens, border-color)},
+    border-color: style-api.value(
+      $tokens,
+      border-color,
       var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'))
     );
-    color: var(
-      #{style-api.read($tokens, color)},
+    color: style-api.value(
+      $tokens,
+      color,
       var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'))
     );
-    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDisabled}));
+    box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowDisabled}));
     text-decoration: none;
     cursor: auto;
   }
@@ -105,14 +105,14 @@ $tokens: style-api.resolve($props, carrier);
   @include styles.text-wrapping;
   @include styles.font-button;
   letter-spacing: awsui.$font-button-letter-spacing;
-  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-block: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
-  border-inline: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
-  padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-vertical});
-  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-horizontal});
+  border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-end-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-end-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-block: style-api.value($tokens, border-width, awsui.$border-width-button) solid;
+  border-inline: style-api.value($tokens, border-width, awsui.$border-width-button) solid;
+  padding-block: style-api.value($tokens, padding-block, awsui.$space-button-vertical);
+  padding-inline: style-api.value($tokens, padding-inline, awsui.$space-button-horizontal);
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;
@@ -158,8 +158,8 @@ $tokens: style-api.resolve($props, carrier);
   }
   &.button-no-text {
-    padding-inline-start: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
-    padding-inline-end: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
+    padding-inline-start: style-api.value($tokens, padding-inline, awsui.$space-button-icon-only-horizontal);
+    padding-inline-end: style-api.value($tokens, padding-inline, awsui.$space-button-icon-only-horizontal);
   }
   &.button-no-wrap {
@@ -177,12 +177,12 @@ $tokens: style-api.resolve($props, carrier);
   &.variant-flashbar-icon {
     // Icon has vertical padding, but no horizontal, we need to conpensate this
     // in order to have equal height and width
-    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
+    padding-inline: style-api.value($tokens, padding-inline, awsui.$space-xxs);
   }
   &.variant-modal-dismiss {
-    padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-modal-dismiss-vertical});
-    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
+    padding-block: style-api.value($tokens, padding-block, awsui.$space-button-modal-dismiss-vertical);
+    padding-inline: style-api.value($tokens, padding-inline, awsui.$space-xxs);
     margin-inline-end: calc(-1 * #{awsui.$space-xxs});
   }

package/lib/internal/scss/cards/styles.scss CHANGED Viewed

@@ -7,12 +7,16 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 .root {
   @include styles.styles-reset();
 }
 .header {
+  &:not(.header-variant-full-page) {
+    #{custom-props.$inlineLabelBackgroundColor}: awsui.$color-background-container-header;
+  }
   &-variant-full-page.header-refresh {
     padding-block-start: 0;
     padding-inline-start: 0;

package/lib/internal/scss/container/styles.scss CHANGED Viewed

@@ -6,6 +6,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use './shared' as shared;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 .root {
   @include styles.styles-reset;
@@ -25,6 +26,7 @@
     &-default,
     &-stacked {
       background-color: awsui.$color-background-container-content;
+      #{custom-props.$inlineLabelBackgroundColor}: awsui.$color-background-container-content;
       // Border and shadows are applied with ::before and ::after elements (respectively)
       @include styles.container-style;
     }

package/lib/internal/scss/icon/hover-motion.scss CHANGED Viewed

@@ -608,10 +608,10 @@ $icon-hover-motion: (
       property: stroke-dashoffset,
       base: (
         stroke-dasharray: 30,
-        stroke-dashoffset: 0,
+        stroke-dashoffset: 60px,
       ),
       to: (
-        stroke-dashoffset: -4px,
+        stroke-dashoffset: 56px,
       ),
     ),
     (
@@ -639,10 +639,10 @@ $icon-hover-motion: (
       property: stroke-dashoffset,
       base: (
         stroke-dasharray: 30,
-        stroke-dashoffset: 0,
+        stroke-dashoffset: 60px,
       ),
       to: (
-        stroke-dashoffset: -4px,
+        stroke-dashoffset: 56px,
       ),
     ),
     (
@@ -1382,10 +1382,10 @@ $icon-hover-motion: (
       property: stroke-dashoffset,
       base: (
         stroke-dasharray: 32 2,
-        stroke-dashoffset: 0,
+        stroke-dashoffset: 34px,
       ),
       to: (
-        stroke-dashoffset: -2px,
+        stroke-dashoffset: 32px,
       ),
     ),
     (
@@ -1739,11 +1739,11 @@ $icon-hover-motion: (
       0%,
       100% {
         stroke-dasharray: 7.4;
-        stroke-dashoffset: 0;
+        stroke-dashoffset: 14.8px;
       }
       50% {
         stroke-dasharray: 6, 7.4;
-        stroke-dashoffset: -0.7px;
+        stroke-dashoffset: 12.7px;
       }
     }
@@ -1751,11 +1751,11 @@ $icon-hover-motion: (
       0%,
       100% {
         stroke-dasharray: 7.4;
-        stroke-dashoffset: 0;
+        stroke-dashoffset: 14.8px;
       }
       50% {
         stroke-dasharray: 6, 7.4;
-        stroke-dashoffset: -0.7px;
+        stroke-dashoffset: 12.7px;
       }
     }
@@ -1847,11 +1847,11 @@ $icon-hover-motion: (
       40%,
       80%,
       100% {
-        stroke-dashoffset: 0;
+        stroke-dashoffset: 4px;
       }
       20%,
       60% {
-        stroke-dashoffset: -0.049px;
+        stroke-dashoffset: 3.951px;
       }
     }
@@ -2198,6 +2198,18 @@ $_spec-keys: (part, animation, to, base, origin, duration, easing, delay, iterat
       {
         @error 'The $icon-hover-motion spec for `#{$name}` sets motion but is missing `duration` or `easing`.';
       }
+      // Safari mishandles negative dash offsets. This check validates no negative offsets exist.
+      // Instead of negative offsets, shift the offset up by one period to keep it positive.
+      @each $state in (base, to) {
+        $values: map.get($spec, $state) or ();
+        $offset: map.get($values, stroke-dashoffset);
+        @if meta.type-of($offset) == 'number' and $offset < 0 {
+          @error 'The $icon-hover-motion spec for `#{$name}` sets a negative `stroke-dashoffset`, ' +
+            'which Safari mishandles. Add one full dash period (the sum of the `stroke-dasharray` ' +
+            'values) to keep it positive — the rendering is identical.';
+        }
+      }
     }
   }
 }

package/lib/internal/scss/input/styles.scss CHANGED Viewed

@@ -238,6 +238,10 @@
 .inline-label {
   @include forms.inline-label;
+  &-disabled {
+    @include forms.inline-label-disabled;
+  }
 }
 .input-adorned-container {