Newlogic UI

Appearance

Button ​

Source ​

Example HTML ​

html
<button class="x-button">Button</button>

More examples can be found in the Winduum docs.

Example CSS ​

To configure the button style, you can remove the default styles button/props/default.css and add your own via @layer theme.

You can also add your own utility classes to change the button style. Eg. removing default square styles button/square.css and adding your own via @utility square.

css
@import "winduum/src/components/button/props/default.css" layer(theme); 
@import "winduum/src/components/button/props/interactive.css" layer(theme);
@import "winduum/src/components/button/default.css" layer(utilities);
@import "winduum/src/components/button/interactive.css" layer(utilities);
@import "winduum/src/components/button/bordered.css" layer(utilities);
@import "winduum/src/components/button/ghosted.css" layer(utilities);
@import "winduum/src/components/button/muted.css" layer(utilities);
@import "winduum/src/components/button/square.css" layer(utilities); 
@import "winduum/src/components/button/circle.css" layer(utilities);
@import "winduum/src/components/button/spinner.css" layer(utilities);

@layer theme {
  :root, :host {
    --x-button-outline-width: 2px;
    --x-button-border-width: 0px;
    --x-button-border-radius: var(--radius-sm);
    --x-button-font-size: 1rem;
    --x-button-font-weight: var(--font-weight-semibold);
    --x-button-gap: 0.25rem;
    --x-button-block-size: 3rem;
    --x-button-padding-block: 1rem;
    --x-button-padding-inline: 0.75rem;
    --x-button-hover-background-color-opacity: 85%;
    --x-button-active-background-color-opacity: 90%;
  }
}

@utility md {
  .x-button:is(&) {
    --x-button-font-size: 0.875rem;
    --x-button-block-size: 2.625rem;
    --x-button-padding-block: 0.75rem;
    --x-button-padding-inline: 0.625rem;
  }
}

@utility square {
  .x-button:is(&) {
    --x-button-padding-block: 0;
    --x-button-padding-inline: 0;
    --x-button-inline-size: var(--x-button-block-size);
  }
}

Winduum CSS Code ​

winduum/src/components/button/props/default.css ​

css
:root, :host {
  --x-button-outline-width: 2px;
  --x-button-border-width: 0px;
  --x-button-border-radius: var(--radius-xl);
  --x-button-font-size: var(--text-sm);
  --x-button-font-weight: var(--font-weight-medium);
  --x-button-gap: calc(var(--spacing) * 2);
  --x-button-block-size: 2.25rem;
  --x-button-padding-block: 0.375rem;
  --x-button-padding-inline: 0.75rem;
}

winduum/src/components/button/props/interactive.css ​

css
:root, :host {
  --x-button-hover-background-color-mix: var(--color-dark);
  --x-button-hover-background-color-opacity: 80%;
  --x-button-focus-outline-offset: 2px;
  --x-button-focus-outline-color-opacity: 50%;
  --x-button-active-background-color-mix: var(--color-dark);
  --x-button-active-background-color-opacity: 90%;
  --x-button-disabled-background-color-opacity: 75%;
}

winduum/src/components/button/default.css ​

css
.x-button {
  --x-button-background-color: var(--color-accent);
  --x-button-border-color: var(--color-accent);
  --x-button-color: var(--color-accent-foreground);

  inline-size: var(--x-button-inline-size);
  block-size: var(--x-button-block-size);
  padding: var(--x-button-padding-block) var(--x-button-padding-inline);
  padding-inline: calc(var(--x-button-padding-inline) - var(--x-button-border-width));
  border-radius: var(--x-button-border-radius);
  font-family: var(--x-button-font-family);
  font-size: var(--x-button-font-size);
  font-weight: var(--x-button-font-weight);
  letter-spacing: var(--x-button-letter-spacing);
  background-color:
    color-mix(
      in var(--x-button-background-color-space, srgb),
      var(--x-button-background-color) var(--x-button-background-color-opacity, 100%),
      var(--x-button-background-color-mix, transparent)
    );
  color:
    color-mix(
      in var(--x-button-color-space, srgb),
      var(--x-button-color) var(--x-button-color-opacity, 100%),
      var(--x-button-color-mix, transparent)
    );
  border:
    var(--x-button-border-width)
    solid
    color-mix(
      in var(--x-button-border-color-space, srgb),
      var(--x-button-border-color) var(--x-button-border-color-opacity, 100%),
      var(--x-button-border-color-mix, transparent)
    );
  outline:
    var(--x-button-outline-width)
    solid
    color-mix(
      in var(--x-button-outline-color-space, srgb),
      var(--x-button-outline-color, transparent) var(--x-button-outline-color-opacity, 100%),
      var(--x-button-outline-color-mix, transparent)
    );
  outline-offset: var(--x-button-outline-offset);
  gap: var(--x-button-gap);
  user-select: none;
  overflow: clip;
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: relative;
  line-height: 1;
  flex-shrink: 0;
  z-index: 0;

  :where(*) {
    pointer-events: none;
  }

  &:where(input)::after {
    content: attr(aria-label);
  }
}

winduum/src/components/button/lg.css ​

css
.x-button:is(.lg) {
  --x-button-block-size: 3rem;
  --x-button-padding-inline: 1.75rem;
}

winduum/src/components/button/sm.css ​

css
.x-button:is(.sm) {
  --x-button-block-size: 2rem;
  --x-button-padding-inline: 1rem;
}

winduum/src/components/button/interactive.css ​

css
.x-button {
  transition-property: var(--x-button-transition-property, var(--default-transition-property));
  transition-timing-function: var(--x-button-timing-function, var(--ease-in-out));
  transition-duration: var(--x-button-transition-duration, var(--default-transition-duration));

  &:where(.accent-primary),
  &:where(.accent-body),
  &:where(.accent-light),
  &:where(.accent-dark) {
    --x-button-hover-background-color-mix: var(--color-accent-foreground);
  }

  &:is(button, input, label, :any-link, [role="button"]) {
    &:hover {
      @media (hover: hover) and (pointer: fine) {
        --x-button-background-color: var(--x-button-hover-background-color, var(--color-accent));
        --x-button-background-color-mix: var(--x-button-hover-background-color-mix);
        --x-button-background-color-opacity: var(--x-button-hover-background-color-opacity);
        --x-button-border-color: var(--x-button-hover-border-color, var(--color-accent));
        --x-button-border-color-mix: var(--x-button-hover-border-color-mix, transparent);
        --x-button-border-color-opacity: var(--x-button-hover-border-color-opacity, 100%);
        --x-button-color: var(--x-button-hover-color, var(--color-accent-foreground));
        --x-button-color-mix: var(--x-button-hover-color-mix, transparent);
        --x-button-color-opacity: var(--x-button-hover-color-opacity, 100%);
      }
    }

    &:focus {
      --x-button-outline-offset: var(--x-button-focus-outline-offset);
      --x-button-outline-color: var(--x-button-focus-outline-color, var(--color-accent));
      --x-button-outline-color-opacity: var(--x-button-focus-outline-color-opacity);
    }

    &:active, &:checked, &.active {
      --x-button-background-color: var(--x-button-active-background-color, var(--color-accent));
      --x-button-background-color-mix: var(--x-button-active-background-color-mix);
      --x-button-background-color-opacity: var(--x-button-active-background-color-opacity);
      --x-button-border-color: var(--x-button-active-border-color, var(--color-accent));
      --x-button-border-color-mix: var(--x-button-active-border-color-mix, transparent);
      --x-button-border-color-opacity: var(--x-button-active-border-color-opacity, 100%);
      --x-button-color: var(--x-button-active-color, var(--color-accent-foreground));
      --x-button-color-mix: var(--x-button-active-color-mix, transparent);
      --x-button-color-opacity: var(--x-button-active-color-opacity, 100%);
    }

    &:disabled {
      --x-button-background-color: var(--x-button-disabled-background-color, var(--color-accent));
      --x-button-background-color-mix: var(--x-button-disabled-background-color-mix, transparent);
      --x-button-background-color-opacity: var(--x-button-disabled-background-color-opacity, 50%);
      --x-button-border-color: var(--x-button-disabled-border-color, var(--color-accent));
      --x-button-border-color-mix: var(--x-button-disabled-border-color-mix, transparent);
      --x-button-border-color-opacity: var(--x-button-disabled-border-color-opacity, 50%);
      --x-button-color: var(--x-button-disabled-color, var(--color-accent-foreground));
      --x-button-color-mix: var(--x-button-disabled-color-mix, transparent);
      --x-button-color-opacity: var(--x-button-disabled-color-opacity, 50%);
    }
  }
}

winduum/src/components/button/bordered.css ​

css
.x-button:is(.bordered) {
  --x-button-disabled-background-color-opacity: 0%;
  --x-button-disabled-background-color-mix: transparent;
  --x-button-disabled-color: var(--color-accent);
  --x-button-active-background-color-opacity: 20%;
  --x-button-active-background-color-mix: transparent;
  --x-button-active-color: var(--color-accent);
  --x-button-hover-background-color-opacity: 10%;
  --x-button-hover-background-color-mix: transparent;
  --x-button-hover-color: var(--color-accent);
  --x-button-focus-outline-offset: 0px;
  --x-button-border-width: 1px;
  --x-button-border-color-opacity: 100%;
  --x-button-background-color-opacity: 0%;
  --x-button-color: var(--color-accent);
}

winduum/src/components/button/ghosted.css ​

css
.x-button:is(.ghosted) {
  --x-button-disabled-background-color-opacity: 0%;
  --x-button-disabled-background-color-mix: transparent;
  --x-button-disabled-color: var(--color-accent);
  --x-button-active-background-color-opacity: 20%;
  --x-button-active-background-color-mix: transparent;
  --x-button-active-color: var(--color-accent);
  --x-button-hover-background-color-opacity: 10%;
  --x-button-hover-background-color-mix: transparent;
  --x-button-hover-color: var(--color-accent);
  --x-button-focus-outline-offset: -2px;
  --x-button-color: var(--color-accent);
  --x-button-background-color-opacity: 0%;
}

winduum/src/components/button/muted.css ​

css
.x-button:is(.muted) {
  --x-button-disabled-background-color-opacity: 5%;
  --x-button-disabled-background-color-mix: transparent;
  --x-button-disabled-color: var(--color-accent);
  --x-button-active-background-color-opacity: 30%;
  --x-button-active-background-color-mix: transparent;
  --x-button-active-color: var(--color-accent);
  --x-button-hover-background-color-opacity: 20%;
  --x-button-hover-background-color-mix: transparent;
  --x-button-hover-color: var(--color-accent);
  --x-button-focus-outline-offset: -2px;
  --x-button-color: var(--color-accent);
  --x-button-background-color-opacity: 10%;
}

winduum/src/components/button/square.css ​

css
.x-button:is(.square) {
  --x-button-padding-block: 0;
  --x-button-padding-inline: 0;
  --x-button-inline-size: var(--x-button-block-size);
}

winduum/src/components/button/circle.css ​

css
.x-button:is(.circle) {
  --x-button-padding-block: 0;
  --x-button-padding-inline: 0;
  --x-button-inline-size: var(--x-button-block-size);
  --x-button-border-radius: var(--radius-full);
}

winduum/src/components/button/spinner.css ​

css
.x-button:has(.spinner-absolute) {
  pointer-events: none;
  color: transparent;

  .spinner-absolute {
    color: var(--x-button-color);
    position: absolute;
  }
}

Released under the MIT License.

Copyright © 2024-present newlogic.cz