wix-style-react/dist/src/TextButton/TextButton.st.css

wix-style-react

@st-import [
  --wds-space-0,
  --wds-button-gap-medium,
  --wds-button-gap-small,
  --wds-button-gap-tiny,
  --wds-shadow-focus-standard,
  --wds-color-fill-standard-primary,
  --wds-color-fill-standard-primary-hover,
  --wds-color-fill-standard-primary-active,
  --wds-color-fill-standard-primary-disabled,
  --wds-color-fill-light-primary,
  --wds-color-fill-light-primary-disabled,
  --wds-color-fill-premium-primary,
  --wds-color-fill-premium-primary-hover,
  --wds-color-fill-premium-primary-active,
  --wds-color-fill-premium-primary-disabled,
  --wds-color-fill-destructive-primary,
  --wds-color-fill-destructive-primary-hover,
  --wds-color-fill-destructive-primary-active,
  --wds-color-fill-destructive-primary-disabled,
  --wds-color-fill-dark-primary,
  --wds-color-fill-dark-primary-hover,
  --wds-color-fill-dark-primary-active,
  --wds-color-fill-dark-primary-disabled,
]from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: '../Button/ButtonCore/ButtonCore.st.css';
  -st-default: ButtonCore;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: P10, P20, D80, D10, D20, F00, D10-30, D80-70, R10, R20,
    THEME-COLOR-10, THEME-COLOR-20;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-tiny-thin, text-tiny-normal, text-small-thin,
    text-small-normal, text-medium-thin, text-medium-normal;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-9, speed-fast-1;
}

.root {
  -st-extends: ButtonCore;
  -st-states: skin(string), underline(string), weight(string), size(string), fluid, ellipsis;

  color: var(--wds-color-fill-standard-primary, value(THEME-COLOR-10));
  white-space: nowrap;

  background-color: transparent;
  border-color: transparent;

  text-decoration: none;
  border: none;
  border-radius: 2px;

  transition-duration: value(speed-fast-1);
  transition-timing-function: value(ease-9);
  transition-property: background-color, color, border-color;

  outline: none;
  padding: 0px;
  height: 24px;

  user-select: none;
}

.root:hover {
  color: var(--wds-color-fill-standard-primary-hover, value(THEME-COLOR-20));
}

.root:active {
  color: var(--wds-color-fill-standard-primary-active, value(THEME-COLOR-20));
}

.root:disabled {
  color: var(--wds-color-fill-standard-primary-disabled, value(D10-30));
}

.root:focus-visible {
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

.root:ellipsis {
  max-width: 100%;
}

.root:fluid,
.root:fluid::content {
  width: 100%;
}

/* Underline: onHover */

.root:underline(onHover):hover,
.root:underline(onHover):active {
  text-decoration: underline;
}

.root:underline(onHover):disabled {
  text-decoration: none;
}

/* Underline: always */

.root:underline(always),
.root:underline(always):hover,
.root:underline(always):active,
.root:underline(always):disabled {
  text-decoration: underline;
}

/* skin: premium */

.root:skin(premium) {
  color: var(--wds-color-fill-premium-primary, value(P10));
}

.root:skin(premium):hover {
  color: var(--wds-color-fill-premium-primary-hover, value(P20));
}

.root:skin(premium):active {
  color: var(--wds-color-fill-premium-primary-active, value(P10));
}

.root:skin(premium):disabled {
  color: var(--wds-color-fill-premium-primary-disabled, value(D10-30));
}

/* skin: destructive */

.root:skin(destructive) {
  color: var(--wds-color-fill-destructive-primary, value(R10));
}

.root:skin(destructive):hover {
  color: var(--wds-color-fill-destructive-primary-hover, value(R20));
}

.root:skin(destructive):active {
  color: var(--wds-color-fill-destructive-primary-active, value(R10));
}

.root:skin(destructive):disabled {
  color: var(--wds-color-fill-destructive-primary-disabled, value(D10-30));
}

/* Skin: light */

.root:skin(light) {
  color: var(--wds-color-fill-light-primary, value(D80));
}

.root:skin(light):hover {
  color: var(--wds-color-fill-light-primary, value(D80));
}

.root:skin(light):active {
  color: var(--wds-color-fill-light-primary, value(D80));
}

.root:skin(light):disabled {
  color: var(--wds-color-fill-light-primary-disabled, value(D80-70));
}

/* skin: dark */

.root:skin(dark) {
  color: var(--wds-color-fill-dark-primary, value(D10));
}

.root:skin(dark):hover {
  color: var(--wds-color-fill-dark-primary-hover, value(D20));
}

.root:skin(dark):active {
  color: var(--wds-color-fill-dark-primary-active, value(D10));
}

.root:skin(dark):disabled {
  color: var(--wds-color-fill-dark-primary-disabled, value(D10-30));
}

.root:size(medium):weight(thin) {
  -st-mixin: text-medium-thin;
}

.root:size(medium):weight(normal) {
  -st-mixin: text-medium-normal;
}

.root:size(small):weight(thin) {
  -st-mixin: text-small-thin;
  height: 18px;
}

.root:size(small):weight(normal) {
  -st-mixin: text-small-normal;
  height: 18px;
}

.root:size(tiny):weight(thin) {
  -st-mixin: text-tiny-thin;
  height: 18px;
}

.root:size(tiny):weight(normal) {
  -st-mixin: text-tiny-normal;
  height: 18px;
}

/* affixes */

.root::prefix {
  box-sizing: content-box;
  padding-right: var(--wds-button-gap-medium, 6px);
  margin: 0;
  width: 24px;
  height: 24px;
}

.root::suffix {
  box-sizing: content-box;
  padding-inline-start: var(--wds-button-gap-medium, 6px);
  margin: 0;
  width: 24px;
  height: 24px;
}

.root:size(small)::prefix {
  width: 18px;
  height: 18px;
  padding-right: var(--wds-button-gap-small, 6px);
}

.root:size(small)::suffix {
  width: 18px;
  height: 18px;
  padding-inline-start: var(--wds-button-gap-small, 6px);
}

.root:size(tiny)::prefix {
  width: 18px;
  height: 18px;
  padding-right: var(--wds-button-gap-tiny, 3px);
}

.root:size(tiny)::suffix {
  width: 18px;
  height: 18px;
  padding-inline-start: var(--wds-button-gap-tiny, 3px);
}

/* st-namespace-reference="../../../src/TextButton/TextButton.st.css" */