Color

Source

• Color.css

Example

<label class="x-color" style="color: red">
    <input type="checkbox" aria-label="Red">
</label>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/color/props/default.css" layer(theme);
@import "winduum/src/components/color/default.css" layer(utilities);
@import "winduum/src/components/color/interactive.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-color-primary: var(--color-accent);
    --x-color-secondary: var(--color-accent);
  }
}

Winduum CSS Code

winduum/src/components/color/props/default.css

:root, :host {
  --x-color-primary: currentColor;
  --x-color-secondary: transparent;
  --x-color-size: 1.5rem;
  --x-color-border-radius: var(--radius-full);
}

winduum/src/components/color/default.css

.x-color {
  --x-color-outline-color: var(--color-accent);

  display: inline-flex;

  :where(input) {
    inline-size: var(--x-color-size);
    block-size: var(--x-color-size);
    border-radius: var(--x-color-border-radius);
    outline:
      var(--x-color-outline-width, 1px) solid
      color-mix(
        in var(--x-color-outline-color-space, srgb),
        var(--x-color-outline-color) var(--x-color-outline-color-opacity, 0%),
        var(--x-color-outline-color-mix, transparent)
      );
    outline-offset: var(--x-color-outline-offset);
    display: inline-grid;

    &::before, &::after {
      border: 1px solid transparent;
      border-radius: inherit;
      grid-area: 1/-1;
      content: "";
    }

    &::before {
      background-color: var(--x-color-primary);
    }

    &::after {
      background-color: var(--x-color-secondary);
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }
  }
}

winduum/src/components/color/interactive.css

.x-color {
  :where(input) {
    transition-property: var(--default-transition-property);
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);

    &:disabled {
      cursor: not-allowed;

      &::before, &::after {
        opacity: var(--x-color-disabled-opacity, 50%);
      }
    }

    &:enabled {
      &:hover {
        --x-color-outline-color-opacity: var(--x-color-hover-outline-color-opacity);
        --x-color-outline-offset: var(--x-color-hover-outline-offset);
      }

      &:focus-visible {
        --x-color-outline-color-opacity: var(--x-color-focus-outline-color-opacity, 100%);
        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
      }

      &:checked {
        --x-color-outline-color-opacity: var(--x-color-checked-outline-color-opacity, 100%);
        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);

        &:focus-visible {
          outline-style: dashed;
        }
      }
    }
  }
}