@equinor/eds-core-react 2.4.0-beta.0 → 2.4.0

package/build/index.css

@@ -1043,7 +1043,8 @@
 
   /* Input/Textarea element */
   .eds-input {
-    --_placeholder-text-color: var(--eds-color-text-subtle);
+    /* Temporary alias until proper placeholder text token is available */
+    --_placeholder-text-color: var(--eds-color-border-strong);
 
     flex: 1;
     min-inline-size: 0;
@@ -1130,339 +1131,4 @@
     margin-block: calc(var(--eds-sizing-icon-xs) / -2);
   }
 }
-@layer eds-components {
-  .eds-text-area {
-    & .label-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--eds-typography-gap-horizontal);
-      inline-size: 100%;
-
-      & > button {
-        flex-shrink: 0;
-        margin-block: calc(var(--eds-sizing-icon-xs) / -2);
-      }
-    }
-
-    & .eds-input-container {
-      align-items: flex-start;
-      padding-block: var(--eds-container-space-vertical);
-      overflow: hidden;
-
-      & textarea.eds-input {
-        box-sizing: border-box;
-        overflow: auto;
-        white-space: pre-wrap;
-        text-overflow: clip;
-        resize: vertical;
-        padding-block-end: var(--eds-container-space-vertical);
-        padding-inline-end: var(--eds-selectable-space-horizontal);
-      }
-
-      &:has(+ .helper-row) {
-        margin-block-end: calc(
-          var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical)
-        );
-      }
-    }
-
-    & .helper-row {
-      display: flex;
-      align-items: baseline;
-      gap: var(--eds-typography-gap-horizontal);
-      inline-size: 100%;
-    }
-
-    & .char-count {
-      flex-shrink: 0;
-      color: var(--eds-color-text-subtle);
-    }
-  }
-}
-/* Must be outside @layer: [data-font-family] { margin: 0 } in variables.css
-   is unlayered and overrides any margin inside @layer eds-components. */
-.eds-text-area {
-  & .eds-error-icon {
-    margin-block-start: var(--eds-spacing-vertical-2xs);
-  }
-
-  & .char-count {
-    margin-inline-start: auto;
-  }
-
-  /* Extend textarea to bottom-right corner so the resize handle sits flush. */
-  & textarea.eds-input {
-    margin-block-end: calc(-1 * var(--eds-container-space-vertical));
-    margin-inline-end: calc(-1 * var(--eds-selectable-space-horizontal));
-  }
-}
-@layer eds-components {
-  .eds-search {
-    /* Color changes based on state — accent by default, overridden when readonly/disabled */
-    & .search-icon {
-      color: var(--eds-color-text-subtle);
-
-      [data-readonly] & {
-        color: var(--eds-color-border-strong);
-      }
-
-      [data-disabled] & {
-        color: var(--eds-color-text-disabled);
-      }
-    }
-
-    /* Hide native clear button — replaced by our custom one */
-    & [type='search']::-webkit-search-cancel-button {
-      appearance: none;
-    }
-  }
-}
-@layer eds-components {
-  .eds-link {
-    color: var(--eds-color-text-link);
-    text-decoration: underline;
-    text-decoration-thickness: var(--eds-sizing-stroke-thin);
-    text-underline-offset: var(--eds-spacing-vertical-4xs);
-
-    transition: color 150ms ease-in-out;
-  }
-
-  .eds-link:hover {
-    color: var(--eds-color-text-strong);
-  }
-
-  .eds-link:focus-visible {
-    border-radius: var(--eds-spacing-border-radius-rounded);
-    color: var(--eds-color-text-strong);
-    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
-    outline-offset: var(--eds-spacing-vertical-3xs);
-  }
-
-  /* Standalone variant: flex layout for icon + text */
-  .eds-link[data-variant='standalone'] {
-    position: relative;
-
-    gap: var(--eds-typography-gap-horizontal);
-    align-items: center;
-
-    border-bottom: var(--eds-sizing-stroke-thin) solid currentcolor;
-
-    text-decoration: none;
-  }
-
-  /* Use pseudo-element for focus ring so it can have border-radius
-     while border-bottom stays straight */
-  .eds-link[data-variant='standalone']:focus-visible {
-    border-radius: 0;
-    outline: none;
-  }
-
-  .eds-link[data-variant='standalone']:focus-visible::after {
-    pointer-events: none;
-    content: '';
-
-    position: absolute;
-    inset: calc(var(--eds-spacing-vertical-3xs) * -1);
-
-    border: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
-    border-radius: var(--eds-spacing-border-radius-rounded);
-  }
-}
-/* Outside @layer to override typography.css [data-font-family] { display: block } */
-.eds-link[data-variant='standalone'] {
-  display: inline-flex;
-}
-@layer eds-components {
-  .eds-tooltip {
-    /* Gap between tooltip and anchor; also used for the arrow height */
-    --_arrow: var(--eds-spacing-vertical-3xs);
-    /* Width of the arrow tip (1px = visually sharp, matches Figma) */
-    --_tip: 1px;
-
-    /* UA popover reset */
-    position: fixed;
-    margin: 0;
-    inset: auto;
-    border: none;
-    overflow: visible;
-
-    position-anchor: var(--tooltip-anchor-name);
-    width: max-content;
-    background-color: var(--eds-color-text-strong);
-    color: var(--eds-color-text-strong-on-emphasis);
-    border-radius: var(--eds-spacing-border-radius-rounded);
-    padding-block: var(--eds-container-space-vertical);
-    padding-inline: var(--eds-container-space-horizontal);
-
-    /* Rectangle shadow — always downward regardless of arrow direction (no shadow tokens in EDS 2.0) */
-    box-shadow:
-      0px 2px 4px rgba(0, 0, 0, 0.14),
-      0px 3px 4px rgba(0, 0, 0, 0.12),
-      0px 1px 5px rgba(0, 0, 0, 0.2);
-
-    /* Arrow: ::before is expanded by --_arrow on all sides via `inset: calc(-1 * var(--_arrow))`.
-       A 16-point star clip-path pre-draws all 4 arrows. `margin: inherit` shifts the pseudo-element
-       to match the tooltip's own margin, so 3 arrows hide behind the tooltip body (z-index:-1)
-       and only the gap-side arrow remains visible. */
-    &::before {
-      content: '';
-      position: absolute;
-      z-index: -1;
-      background: inherit;
-      inset: calc(-1 * var(--_arrow));
-      margin: inherit;
-      clip-path: polygon(
-        /* top */
-        calc(50% - var(--_arrow)) var(--_arrow),
-        calc(50% - var(--_tip)) 0,
-        calc(50% + var(--_tip)) 0,
-        calc(50% + var(--_arrow)) var(--_arrow),
-        /* right */
-        calc(100% - var(--_arrow)) calc(50% - var(--_arrow)),
-        100% calc(50% - var(--_tip)),
-        100% calc(50% + var(--_tip)),
-        calc(100% - var(--_arrow)) calc(50% + var(--_arrow)),
-        /* bottom */
-        calc(50% + var(--_arrow)) calc(100% - var(--_arrow)),
-        calc(50% + var(--_tip)) 100%,
-        calc(50% - var(--_tip)) 100%,
-        calc(50% - var(--_arrow)) calc(100% - var(--_arrow)),
-        /* left */
-        var(--_arrow) calc(50% + var(--_arrow)),
-        0 calc(50% + var(--_tip)),
-        0 calc(50% - var(--_tip)),
-        var(--_arrow) calc(50% - var(--_arrow))
-      );
-    }
-
-    &[data-placement='top'] {
-      position-area: top;
-      bottom: var(--_arrow);
-      margin: var(--_arrow) var(--_arrow) 0;
-      position-try-fallbacks: flip-block, --eds-tooltip-bottom;
-    }
-
-    &[data-placement='bottom'] {
-      position-area: bottom;
-      top: var(--_arrow);
-      margin: 0 var(--_arrow) var(--_arrow);
-      position-try-fallbacks: flip-block, --eds-tooltip-top;
-    }
-
-    &[data-placement='right'] {
-      position-area: right;
-      left: var(--_arrow);
-      margin: var(--_arrow) var(--_arrow) var(--_arrow) 0;
-      position-try-fallbacks: flip-inline, --eds-tooltip-left;
-    }
-
-    &[data-placement='left'] {
-      position-area: left;
-      right: var(--_arrow);
-      margin: var(--_arrow) 0 var(--_arrow) var(--_arrow);
-      position-try-fallbacks: flip-inline, --eds-tooltip-right;
-    }
-
-    & .label {
-      font-feature-settings: 'lnum', 'tnum';
-    }
-  }
-
-  .eds-tooltip-anchor {
-    display: inline-block;
-    anchor-name: var(--tooltip-anchor-name);
-  }
-}
-/* @position-try must be outside @layer per spec. */
-@position-try --eds-tooltip-bottom {
-  position-area: bottom;
-  top: var(--_arrow);
-  margin: 0 var(--_arrow) var(--_arrow);
-}
-@position-try --eds-tooltip-top {
-  position-area: top;
-  bottom: var(--_arrow);
-  margin: var(--_arrow) var(--_arrow) 0;
-}
-@position-try --eds-tooltip-left {
-  position-area: left;
-  right: var(--_arrow);
-  margin: var(--_arrow) 0 var(--_arrow) var(--_arrow);
-}
-@position-try --eds-tooltip-right {
-  position-area: right;
-  left: var(--_arrow);
-  margin: var(--_arrow) var(--_arrow) var(--_arrow) 0;
-}
-@layer eds-components {
-  .eds-banner {
-    position: relative;
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--eds-container-space-horizontal);
-    align-items: flex-start;
-
-    padding: var(--eds-container-space-vertical)
-      var(--eds-container-space-horizontal);
-    border-radius: var(--eds-spacing-border-radius-rounded, 4px);
-
-    background: var(--eds-color-bg-surface);
-    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-medium);
-  }
-
-  .eds-banner__icon {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-
-    height: var(--eds-typography-line-height, 1.5rem);
-
-    /*
-     * Negative margin compensates for Figma's icon container padding,
-     * pulling the icon closer to the component edge.
-     * Figma variable: selectable/icon-container-padding (↕︎ -6px, ↔︎ -4.8px)
-     * See #4684 for exporting this as a CSS custom property.
-     */
-    margin-block: -6px;
-    margin-inline-start: -4.8px;
-
-    color: var(--eds-color-text-subtle);
-  }
-
-  .eds-banner__message {
-    flex: 1;
-    min-width: 0;
-    margin: 0;
-    color: var(--eds-color-text-strong);
-  }
-
-  .eds-banner__actions {
-    display: flex;
-    gap: var(--eds-selectable-gap-horizontal, 8px);
-    align-items: center;
-  }
-
-  .eds-banner__actions[data-placement='bottom'] {
-    flex-basis: 100%;
-  }
-
-  .eds-banner:has(.eds-banner__dismiss) {
-    padding-inline-end: calc(
-      var(--eds-container-space-horizontal) + 24px +
-        var(--eds-container-space-horizontal)
-    );
-  }
-
-  .eds-banner__dismiss {
-    position: absolute;
-    top: var(--eds-container-space-vertical);
-    right: var(--eds-container-space-horizontal);
-
-    /* Same Figma icon container padding compensation as .eds-banner__icon */
-    margin-block: -6px;
-    margin-inline-end: -4.8px;
-  }
-}