@helpwave/hightide/dist/style/uncompiled/theme/element.css

helpwave's component and theming library

@utility element {
  padding: 
    var(--element-padding, var(--spacing-element-padding-md)) 
    var(--element-padding-direction, var(--spacing-element-padding-direction-md));
  border-radius: var(--element-border-radius, 0.375rem);
  height: var(--element-height, var(--spacing-element-md));
}

@utility element-square {
  padding: var(--element-padding, var(--spacing-element-padding-md));
  border-radius: var(--element-border-radius, 0.375rem);
  height: var(--element-height, var(--spacing-element-height-md));
  width: var(--element-height, var(--spacing-element-md));
}


@utility sizing-xs {
  --element-padding: var(--spacing-element-padding-xs);
  --element-padding-direction: var(--spacing-element-padding-direction-xs);
  --element-border-radius: 0.25rem;
  --element-height: var(--spacing-element-xs);
}

@utility sizing-sm {
  --element-padding: var(--spacing-element-padding-sm);
  --element-padding-direction: var(--spacing-element-padding-direction-sm);
  --element-border-radius: 0.375rem;
  --element-height: var(--spacing-element-sm);
}

@utility sizing-md {
  --element-padding: var(--spacing-element-padding-md);
  --element-padding-direction: var(--spacing-element-padding-direction-md);
  --element-border-radius: 0.375rem;
  --element-height: var(--spacing-element-md);
}

@utility sizing-lg {
  --element-padding: var(--spacing-element-padding-lg);
  --element-padding-direction: var(--spacing-element-padding-direction-lg);
  --element-border-radius: 0.5rem;
  --element-height: var(--spacing-element-lg);
}

@utility sizing-none {
  --element-padding: 0;
  --element-padding-direction: 0;
  --element-border-radius: 0;
  --element-height: auto;
}