welcome-ui/dist/Button.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@keyframes _rotate-gradient_k9ec7_1{to{--gradient-angle: 300deg}}@layer components{._root_k9ec7_12{position:relative;display:inline-flex;white-space:nowrap;flex-shrink:0;align-items:center;justify-content:center;border-style:solid;cursor:pointer;border-radius:var(--border-radius-md);transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:ease-in-out;outline:transparent solid var(--border-width-md);font-weight:var(--font-weight-semi-bold);font-family:var(--font-family-body);line-height:var(--font-line-height-xs);height:var(--buttonHeight);padding-inline:var(--buttonPaddingInline);font-size:var(--buttonFontSize);color:var(--buttonColor, var(--color-neutral-90));background:var(--buttonBackground);border-width:var(--buttonBorderWidth, 0);border-color:var(--buttonBorderColor, transparent);box-shadow:var(--buttonBoxShadow, none);gap:var(--buttonGap)}._root_k9ec7_12[data-focus-visible],._root_k9ec7_12:focus-visible{outline-width:var(--button-border-width-focused);outline-color:var(--buttonOutlineColorFocus)}@media (hover: hover) and (pointer: fine){._root_k9ec7_12:hover:not(:disabled):not([aria-disabled]){box-shadow:var(--elevation-20);--buttonBackground: var(--buttonBackgroundHover);--buttonBorderColor: var(--buttonBorderColorHover, transparent);--buttonColor: var(--buttonColorHover)}}._root_k9ec7_12:is(:active,[aria-pressed=true]):not(:disabled):not([aria-disabled]){--buttonBackground: var(--buttonBackgroundActive);--buttonBorderColor: var(--buttonBorderColorActive, transparent);--buttonColor: var(--buttonColorPressed)}._root_k9ec7_12:disabled,._root_k9ec7_12[aria-disabled]{--buttonBorderColor: var(--buttonBorderColorDisabled, transparent);--buttonColor: var(--buttonColorDisabled);--buttonBackground: var(--buttonBackgroundDisabled);cursor:not-allowed}._root_k9ec7_12 i.wui-icon-font,._root_k9ec7_12 svg{font-weight:initial;width:var(--buttonIconSize);height:var(--buttonIconSize);font-size:var(--buttonIconSize)}._root_k9ec7_12:has(svg:only-child),._root_k9ec7_12:has(i._wui-icon-font_k9ec7_66:only-child){width:var(--buttonHeight);--buttonPaddingInline: 0}._size-sm_k9ec7_77{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--button-size-max-height-sm);--buttonPaddingInline: var(--button-padding-inline-sm);--buttonIconSize: var(--button-size-icon-sm);--buttonGap: var(--button-gap-content-sm)}._size-md_k9ec7_84{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--button-size-max-height-md);--buttonPaddingInline: var(--button-padding-inline-md);--buttonIconSize: var(--button-size-icon-md);--buttonGap: var(--button-gap-content-md)}._size-lg_k9ec7_91{--buttonFontSize: var(--font-size-16);--buttonHeight: var(--button-size-max-height-lg);--buttonPaddingInline: var(--button-padding-inline-lg);--buttonIconSize: var(--button-size-icon-lg);--buttonGap: var(--button-gap-content-lg)}._variant-primary_k9ec7_98{--buttonBackground: var(--button-color-background-primary-main-default);--buttonBackgroundActive: var(--button-color-background-primary-main-pressed);--buttonBackgroundHover: var(--button-color-background-primary-main-hover);--buttonOutlineColorFocus: var(--button-color-border-focused);--buttonColorDisabled: var(--button-color-text-primary-main-disabled);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--button-color-background-primary-main-disabled) 2.5px, var(--button-color-background-primary-main-disabled) 5.25px) padding-box}._variant-primary-neutral_k9ec7_106{--buttonBackground: var(--button-color-background-primary-neutral-default);--buttonBackgroundActive: var(--button-color-background-primary-neutral-pressed);--buttonBackgroundHover: var(--button-color-background-primary-neutral-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--button-color-background-primary-neutral-disabled) 2.5px, var(--button-color-background-primary-neutral-disabled) 5.25px) padding-box;--buttonColor: var(--button-color-text-primary-neutral-default);--buttonColorDisabled: var(--button-color-text-primary-neutral-disabled);--buttonColorHover: var(--button-color-text-primary-neutral-hover);--buttonColorPressed: var(--button-color-text-primary-neutral-pressed);--buttonOutlineColorFocus: var(--button-color-border-focused)}._variant-primary-ai_k9ec7_117{--buttonBackground: linear-gradient(var(--button-color-background-primary-ai-default) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundActive: linear-gradient(var(--button-color-background-primary-ai-pressed) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundHover: linear-gradient(var(--button-color-background-primary-ai-hover) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--button-color-background-primary-ai-disabled) 2.5px, var(--button-color-background-primary-ai-disabled) 5.25px) padding-box, linear-gradient( 107.75deg, var(--color-neutral-30) 0%, var(--color-neutral-50) 20%, var(--color-neutral-40) 40%, var(--color-neutral-50) 60%, var(--color-neutral-60) 80%, var(--color-neutral-50) 100% ) border-box;--buttonBorderWidth: var(--button-border-width-ai);--buttonColor: var(--button-color-text-primary-ai-default);--buttonColorDisabled: var(--button-color-text-primary-ai-disabled);--buttonColorHover: var(--button-color-text-primary-ai-hover);--buttonColorPressed: var(--button-color-text-primary-ai-pressed);--buttonOutlineColorFocus: var(--button-color-border-focused);animation:_rotate-gradient_k9ec7_1 3s linear infinite paused}@media (hover: hover) and (pointer: fine){._variant-primary-ai_k9ec7_117:hover:not(:disabled):not([aria-disabled]){animation-play-state:running}}._variant-primary-ai_k9ec7_117:focus-visible{animation-play-state:running}._variant-primary-danger_k9ec7_149{--buttonBackground: var(--button-color-background-primary-danger-default);--buttonBackgroundActive: var(--button-color-background-primary-danger-pressed);--buttonBackgroundHover: var(--button-color-background-primary-danger-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--button-color-background-primary-danger-disabled) 2.5px, var(--button-color-background-primary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--button-color-text-primary-danger-default);--buttonColorDisabled: var(--button-color-text-primary-danger-disabled);--buttonColorHover: var(--button-color-text-primary-danger-hover);--buttonColorPressed: var(--button-color-text-primary-danger-pressed);--buttonBorderWidth: var(--button-border-width-secondary);--buttonOutlineColorFocus: var(--button-color-border-focused)}._variant-secondary_k9ec7_161{--buttonBackground: var(--button-color-background-secondary-main-default);--buttonBackgroundActive: var(--button-color-background-secondary-main-pressed);--buttonBackgroundHover: var(--button-color-background-secondary-main-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--button-color-background-secondary-main-disabled) 2.5px, var(--button-color-background-secondary-main-disabled) 5.25px) padding-box;--buttonColor: var(--button-color-text-secondary-main-default);--buttonColorDisabled: var(--button-color-text-secondary-main-disabled);--buttonColorHover: var(--button-color-text-secondary-main-hover);--buttonColorPressed: var(--button-color-text-secondary-main-pressed);--buttonBorderWidth: var(--button-border-width-secondary);--buttonBorderColor: var(--button-color-border-secondary-main-default);--buttonBorderColorHover: var(--button-color-border-secondary-main-hover);--buttonBorderColorActive: var(--button-color-border-secondary-main-pressed);--buttonOutlineColorFocus: var(--button-color-border-focused)}._variant-secondary-danger_k9ec7_176{--buttonBackground: var(--button-color-background-secondary-danger-default);--buttonBackgroundActive: var(--button-color-background-secondary-danger-pressed);--buttonBackgroundHover: var(--button-color-background-secondary-danger-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--button-color-background-secondary-danger-disabled) 2.5px, var(--button-color-background-secondary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--button-color-text-secondary-danger-default);--buttonColorDisabled: var(--button-color-text-secondary-danger-disabled);--buttonColorHover: var(--button-color-text-secondary-danger-hover);--buttonColorPressed: var(--button-color-text-secondary-danger-pressed);--buttonBorderWidth: var(--button-border-width-secondary);--buttonBorderColor: var(--button-color-border-secondary-danger-default);--buttonBorderColorHover: var(--button-color-border-secondary-danger-hover);--buttonBorderColorActive: var(--button-color-border-secondary-danger-pressed);--buttonOutlineColorFocus: var(--button-color-border-focused)}._variant-tertiary_k9ec7_191{--buttonBackground: var(--button-color-background-tertiary-main-default);--buttonBackgroundActive: var(--button-color-background-tertiary-main-pressed);--buttonBackgroundHover: var(--button-color-background-tertiary-main-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--button-color-background-tertiary-main-disabled) 2.5px, var(--button-color-background-tertiary-main-disabled) 5.25px) padding-box;--buttonColor: var(--button-color-text-tertiary-main-default);--buttonColorDisabled: var(--button-color-text-tertiary-main-disabled);--buttonColorHover: var(--button-color-text-tertiary-main-hover);--buttonColorPressed: var(--button-color-text-tertiary-main-pressed);--buttonOutlineColorFocus: var(--button-color-border-focused)}._variant-tertiary-danger_k9ec7_202{--buttonBackground: var(--button-color-background-tertiary-danger-default);--buttonBackgroundActive: var(--button-color-background-tertiary-danger-pressed);--buttonBackgroundHover: var(--button-color-background-tertiary-danger-hover);--buttonBackgroundDisabled: var(--button-color-background-tertiary-danger-disabled);--buttonColor: var(--button-color-text-tertiary-danger-default);--buttonColorDisabled: var(--button-color-text-tertiary-danger-disabled);--buttonColorHover: var(--button-color-text-tertiary-danger-hover);--buttonColorPressed: var(--button-color-text-tertiary-danger-pressed);--buttonOutlineColorFocus: var(--button-color-border-focused)}._loader_k9ec7_213{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;right:0;top:0}._loader-children_k9ec7_223{opacity:0}}