Actual viewport: 0px. Resize the browser to test responsive values. Hover, focus with the keyboard, or press a preview button to inspect configured states. JSON edits are scoped to this demo and do not save source files.
.action { @ds-button(contained); }.action { padding: var(--uxdsl__surface__contained-padding); border-radius: var(--uxdsl__surface__contained-radius); background: var(--uxdsl__surface__contained-bg); color: var(--uxdsl__surface__contained-color); border: var(--uxdsl__surface__contained-border); box-shadow: var(--uxdsl__surface__contained-shadow); }
.action:hover:not(:where(:disabled, [aria-disabled="true"])) { background: var(--uxdsl__button__contained-hover-bg); color: var(--uxdsl__button__contained-hover-color); }
.action:focus-visible { outline: var(--uxdsl__button__contained-focusvisible-outline); outline-offset: var(--uxdsl__button__contained-focusvisible-outline-offset); }
.action.is-selected, .action[aria-pressed="true"], .action[aria-selected="true"] { background: var(--uxdsl__button__contained-selected-bg); color: var(--uxdsl__button__contained-selected-color); }
.action:disabled, .action[aria-disabled="true"] { opacity: var(--uxdsl__button__contained-disabled-opacity); cursor: var(--uxdsl__button__contained-disabled-cursor); }{
"--uxdsl__button__contained-hover-bg": "var(--uxdsl__button__tone-dark, var(--uxdsl__palette__primary-dark))",
"--uxdsl__button__contained-hover-color": "var(--uxdsl__button__tone-contrast, var(--uxdsl__palette__primary-contrast))",
"--uxdsl__button__contained-tone-primary-hover-bg": "var(--uxdsl__palette__primary-dark)",
"--uxdsl__button__contained-tone-primary-hover-color": "var(--uxdsl__palette__primary-contrast)",
"--uxdsl__button__contained-tone-secondary-hover-bg": "var(--uxdsl__palette__secondary-dark)",
"--uxdsl__button__contained-tone-secondary-hover-color": "var(--uxdsl__palette__secondary-contrast)",
"--uxdsl__button__contained-tone-surface-hover-bg": "var(--uxdsl__palette__surface-dark)",
"--uxdsl__button__contained-tone-surface-hover-color": "var(--uxdsl__palette__surface-contrast)",
"--uxdsl__button__contained-tone-tertiary-hover-bg": "var(--uxdsl__palette__tertiary-dark)",
"--uxdsl__button__contained-tone-tertiary-hover-color": "var(--uxdsl__palette__tertiary-contrast)",
"--uxdsl__button__contained-tone-success-hover-bg": "var(--uxdsl__palette__success-dark)",
"--uxdsl__button__contained-tone-success-hover-color": "var(--uxdsl__palette__success-contrast)",
"--uxdsl__button__contained-tone-info-hover-bg": "var(--uxdsl__palette__info-dark)",
"--uxdsl__button__contained-tone-info-hover-color": "var(--uxdsl__palette__info-contrast)",
"--uxdsl__button__contained-tone-warning-hover-bg": "var(--uxdsl__palette__warning-dark)",
"--uxdsl__button__contained-tone-warning-hover-color": "var(--uxdsl__palette__warning-contrast)",
"--uxdsl__button__contained-tone-error-hover-bg": "var(--uxdsl__palette__error-dark)",
"--uxdsl__button__contained-tone-error-hover-color": "var(--uxdsl__palette__error-contrast)",
"--uxdsl__button__contained-tone-dark-hover-bg": "var(--uxdsl__palette__dark-dark)",
"--uxdsl__button__contained-tone-dark-hover-color": "var(--uxdsl__palette__dark-contrast)",
"--uxdsl__button__contained-tone-neutral-hover-bg": "var(--uxdsl__palette__neutral-dark)",
"--uxdsl__button__contained-tone-neutral-hover-color": "var(--uxdsl__palette__neutral-contrast)",
"--uxdsl__button__contained-tone-light-hover-bg": "var(--uxdsl__palette__light-dark)",
"--uxdsl__button__contained-tone-light-hover-color": "var(--uxdsl__palette__light-contrast)",
"--uxdsl__button__contained-focusvisible-outline": "2px solid var(--uxdsl__button__tone-main, var(--uxdsl__palette__primary-main))",
"--uxdsl__button__contained-focusvisible-outline-offset": "2px",
"--uxdsl__button__contained-tone-primary-focusvisible-outline": "2px solid var(--uxdsl__palette__primary-main)",
"--uxdsl__button__contained-tone-secondary-focusvisible-outline": "2px solid var(--uxdsl__palette__secondary-main)",
"--uxdsl__button__contained-tone-surface-focusvisible-outline": "2px solid var(--uxdsl__palette__surface-main)",
"--uxdsl__button__contained-tone-tertiary-focusvisible-outline": "2px solid var(--uxdsl__palette__tertiary-main)",
"--uxdsl__button__contained-tone-success-focusvisible-outline": "2px solid var(--uxdsl__palette__success-main)",
"--uxdsl__button__contained-tone-info-focusvisible-outline": "2px solid var(--uxdsl__palette__info-main)",
"--uxdsl__button__contained-tone-warning-focusvisible-outline": "2px solid var(--uxdsl__palette__warning-main)",
"--uxdsl__button__contained-tone-error-focusvisible-outline": "2px solid var(--uxdsl__palette__error-main)",
"--uxdsl__button__contained-tone-dark-focusvisible-outline": "2px solid var(--uxdsl__palette__dark-main)",
"--uxdsl__button__contained-tone-neutral-focusvisible-outline": "2px solid var(--uxdsl__palette__neutral-main)",
"--uxdsl__button__contained-tone-light-focusvisible-outline": "2px solid var(--uxdsl__palette__light-main)",
"--uxdsl__button__contained-selected-bg": "var(--uxdsl__button__tone-dark, var(--uxdsl__palette__primary-dark))",
"--uxdsl__button__contained-selected-color": "var(--uxdsl__button__tone-contrast, var(--uxdsl__palette__primary-contrast))",
"--uxdsl__button__contained-tone-primary-selected-bg": "var(--uxdsl__palette__primary-dark)",
"--uxdsl__button__contained-tone-primary-selected-color": "var(--uxdsl__palette__primary-contrast)",
"--uxdsl__button__contained-tone-secondary-selected-bg": "var(--uxdsl__palette__secondary-dark)",
"--uxdsl__button__contained-tone-secondary-selected-color": "var(--uxdsl__palette__secondary-contrast)",
"--uxdsl__button__contained-tone-surface-selected-bg": "var(--uxdsl__palette__surface-dark)",
"--uxdsl__button__contained-tone-surface-selected-color": "var(--uxdsl__palette__surface-contrast)",
"--uxdsl__button__contained-tone-tertiary-selected-bg": "var(--uxdsl__palette__tertiary-dark)",
"--uxdsl__button__contained-tone-tertiary-selected-color": "var(--uxdsl__palette__tertiary-contrast)",
"--uxdsl__button__contained-tone-success-selected-bg": "var(--uxdsl__palette__success-dark)",
"--uxdsl__button__contained-tone-success-selected-color": "var(--uxdsl__palette__success-contrast)",
"--uxdsl__button__contained-tone-info-selected-bg": "var(--uxdsl__palette__info-dark)",
"--uxdsl__button__contained-tone-info-selected-color": "var(--uxdsl__palette__info-contrast)",
"--uxdsl__button__contained-tone-warning-selected-bg": "var(--uxdsl__palette__warning-dark)",
"--uxdsl__button__contained-tone-warning-selected-color": "var(--uxdsl__palette__warning-contrast)",
"--uxdsl__button__contained-tone-error-selected-bg": "var(--uxdsl__palette__error-dark)",
"--uxdsl__button__contained-tone-error-selected-color": "var(--uxdsl__palette__error-contrast)",
"--uxdsl__button__contained-tone-dark-selected-bg": "var(--uxdsl__palette__dark-dark)",
"--uxdsl__button__contained-tone-dark-selected-color": "var(--uxdsl__palette__dark-contrast)",
"--uxdsl__button__contained-tone-neutral-selected-bg": "var(--uxdsl__palette__neutral-dark)",
"--uxdsl__button__contained-tone-neutral-selected-color": "var(--uxdsl__palette__neutral-contrast)",
"--uxdsl__button__contained-tone-light-selected-bg": "var(--uxdsl__palette__light-dark)",
"--uxdsl__button__contained-tone-light-selected-color": "var(--uxdsl__palette__light-contrast)",
"--uxdsl__button__contained-disabled-opacity": "0.6",
"--uxdsl__button__contained-disabled-cursor": "not-allowed"
}.action { @ds-button(outlined); }.action { padding: var(--uxdsl__surface__outlined-padding); border-radius: var(--uxdsl__surface__outlined-radius); background: var(--uxdsl__surface__outlined-bg); color: var(--uxdsl__surface__outlined-color); border: var(--uxdsl__surface__outlined-border); box-shadow: var(--uxdsl__surface__outlined-shadow); }
.action:hover:not(:where(:disabled, [aria-disabled="true"])) { color: var(--uxdsl__button__outlined-hover-color); border: var(--uxdsl__button__outlined-hover-border); }
.action:focus-visible { outline: var(--uxdsl__button__outlined-focusvisible-outline); outline-offset: var(--uxdsl__button__outlined-focusvisible-outline-offset); }
.action.is-selected, .action[aria-pressed="true"], .action[aria-selected="true"] { background: var(--uxdsl__button__outlined-selected-bg); color: var(--uxdsl__button__outlined-selected-color); border: var(--uxdsl__button__outlined-selected-border); }
.action:disabled, .action[aria-disabled="true"] { opacity: var(--uxdsl__button__outlined-disabled-opacity); cursor: var(--uxdsl__button__outlined-disabled-cursor); }{
"--uxdsl__button__outlined-hover-color": "var(--uxdsl__button__tone-dark, var(--uxdsl__palette__primary-dark))",
"--uxdsl__button__outlined-hover-border": "1px solid var(--uxdsl__button__tone-dark, var(--uxdsl__palette__primary-dark))",
"--uxdsl__button__outlined-tone-primary-hover-color": "var(--uxdsl__palette__primary-dark)",
"--uxdsl__button__outlined-tone-primary-hover-border": "1px solid var(--uxdsl__palette__primary-dark)",
"--uxdsl__button__outlined-tone-secondary-hover-color": "var(--uxdsl__palette__secondary-dark)",
"--uxdsl__button__outlined-tone-secondary-hover-border": "1px solid var(--uxdsl__palette__secondary-dark)",
"--uxdsl__button__outlined-tone-surface-hover-color": "var(--uxdsl__palette__surface-dark)",
"--uxdsl__button__outlined-tone-surface-hover-border": "1px solid var(--uxdsl__palette__surface-dark)",
"--uxdsl__button__outlined-tone-tertiary-hover-color": "var(--uxdsl__palette__tertiary-dark)",
"--uxdsl__button__outlined-tone-tertiary-hover-border": "1px solid var(--uxdsl__palette__tertiary-dark)",
"--uxdsl__button__outlined-tone-success-hover-color": "var(--uxdsl__palette__success-dark)",
"--uxdsl__button__outlined-tone-success-hover-border": "1px solid var(--uxdsl__palette__success-dark)",
"--uxdsl__button__outlined-tone-info-hover-color": "var(--uxdsl__palette__info-dark)",
"--uxdsl__button__outlined-tone-info-hover-border": "1px solid var(--uxdsl__palette__info-dark)",
"--uxdsl__button__outlined-tone-warning-hover-color": "var(--uxdsl__palette__warning-dark)",
"--uxdsl__button__outlined-tone-warning-hover-border": "1px solid var(--uxdsl__palette__warning-dark)",
"--uxdsl__button__outlined-tone-error-hover-color": "var(--uxdsl__palette__error-dark)",
"--uxdsl__button__outlined-tone-error-hover-border": "1px solid var(--uxdsl__palette__error-dark)",
"--uxdsl__button__outlined-tone-dark-hover-color": "var(--uxdsl__palette__dark-dark)",
"--uxdsl__button__outlined-tone-dark-hover-border": "1px solid var(--uxdsl__palette__dark-dark)",
"--uxdsl__button__outlined-tone-neutral-hover-color": "var(--uxdsl__palette__neutral-dark)",
"--uxdsl__button__outlined-tone-neutral-hover-border": "1px solid var(--uxdsl__palette__neutral-dark)",
"--uxdsl__button__outlined-tone-light-hover-color": "var(--uxdsl__palette__light-dark)",
"--uxdsl__button__outlined-tone-light-hover-border": "1px solid var(--uxdsl__palette__light-dark)",
"--uxdsl__button__outlined-focusvisible-outline": "2px solid var(--uxdsl__button__tone-main, var(--uxdsl__palette__primary-main))",
"--uxdsl__button__outlined-focusvisible-outline-offset": "2px",
"--uxdsl__button__outlined-tone-primary-focusvisible-outline": "2px solid var(--uxdsl__palette__primary-main)",
"--uxdsl__button__outlined-tone-secondary-focusvisible-outline": "2px solid var(--uxdsl__palette__secondary-main)",
"--uxdsl__button__outlined-tone-surface-focusvisible-outline": "2px solid var(--uxdsl__palette__surface-main)",
"--uxdsl__button__outlined-tone-tertiary-focusvisible-outline": "2px solid var(--uxdsl__palette__tertiary-main)",
"--uxdsl__button__outlined-tone-success-focusvisible-outline": "2px solid var(--uxdsl__palette__success-main)",
"--uxdsl__button__outlined-tone-info-focusvisible-outline": "2px solid var(--uxdsl__palette__info-main)",
"--uxdsl__button__outlined-tone-warning-focusvisible-outline": "2px solid var(--uxdsl__palette__warning-main)",
"--uxdsl__button__outlined-tone-error-focusvisible-outline": "2px solid var(--uxdsl__palette__error-main)",
"--uxdsl__button__outlined-tone-dark-focusvisible-outline": "2px solid var(--uxdsl__palette__dark-main)",
"--uxdsl__button__outlined-tone-neutral-focusvisible-outline": "2px solid var(--uxdsl__palette__neutral-main)",
"--uxdsl__button__outlined-tone-light-focusvisible-outline": "2px solid var(--uxdsl__palette__light-main)",
"--uxdsl__button__outlined-selected-bg": "var(--uxdsl__button__tone-main, var(--uxdsl__palette__primary-main))",
"--uxdsl__button__outlined-selected-color": "var(--uxdsl__button__tone-contrast, var(--uxdsl__palette__primary-contrast))",
"--uxdsl__button__outlined-selected-border": "1px solid var(--uxdsl__button__tone-main, var(--uxdsl__palette__primary-main))",
"--uxdsl__button__outlined-tone-primary-selected-bg": "var(--uxdsl__palette__primary-main)",
"--uxdsl__button__outlined-tone-primary-selected-color": "var(--uxdsl__palette__primary-contrast)",
"--uxdsl__button__outlined-tone-primary-selected-border": "1px solid var(--uxdsl__palette__primary-main)",
"--uxdsl__button__outlined-tone-secondary-selected-bg": "var(--uxdsl__palette__secondary-main)",
"--uxdsl__button__outlined-tone-secondary-selected-color": "var(--uxdsl__palette__secondary-contrast)",
"--uxdsl__button__outlined-tone-secondary-selected-border": "1px solid var(--uxdsl__palette__secondary-main)",
"--uxdsl__button__outlined-tone-surface-selected-bg": "var(--uxdsl__palette__surface-main)",
"--uxdsl__button__outlined-tone-surface-selected-color": "var(--uxdsl__palette__surface-contrast)",
"--uxdsl__button__outlined-tone-surface-selected-border": "1px solid var(--uxdsl__palette__surface-main)",
"--uxdsl__button__outlined-tone-tertiary-selected-bg": "var(--uxdsl__palette__tertiary-main)",
"--uxdsl__button__outlined-tone-tertiary-selected-color": "var(--uxdsl__palette__tertiary-contrast)",
"--uxdsl__button__outlined-tone-tertiary-selected-border": "1px solid var(--uxdsl__palette__tertiary-main)",
"--uxdsl__button__outlined-tone-success-selected-bg": "var(--uxdsl__palette__success-main)",
"--uxdsl__button__outlined-tone-success-selected-color": "var(--uxdsl__palette__success-contrast)",
"--uxdsl__button__outlined-tone-success-selected-border": "1px solid var(--uxdsl__palette__success-main)",
"--uxdsl__button__outlined-tone-info-selected-bg": "var(--uxdsl__palette__info-main)",
"--uxdsl__button__outlined-tone-info-selected-color": "var(--uxdsl__palette__info-contrast)",
"--uxdsl__button__outlined-tone-info-selected-border": "1px solid var(--uxdsl__palette__info-main)",
"--uxdsl__button__outlined-tone-warning-selected-bg": "var(--uxdsl__palette__warning-main)",
"--uxdsl__button__outlined-tone-warning-selected-color": "var(--uxdsl__palette__warning-contrast)",
"--uxdsl__button__outlined-tone-warning-selected-border": "1px solid var(--uxdsl__palette__warning-main)",
"--uxdsl__button__outlined-tone-error-selected-bg": "var(--uxdsl__palette__error-main)",
"--uxdsl__button__outlined-tone-error-selected-color": "var(--uxdsl__palette__error-contrast)",
"--uxdsl__button__outlined-tone-error-selected-border": "1px solid var(--uxdsl__palette__error-main)",
"--uxdsl__button__outlined-tone-dark-selected-bg": "var(--uxdsl__palette__dark-main)",
"--uxdsl__button__outlined-tone-dark-selected-color": "var(--uxdsl__palette__dark-contrast)",
"--uxdsl__button__outlined-tone-dark-selected-border": "1px solid var(--uxdsl__palette__dark-main)",
"--uxdsl__button__outlined-tone-neutral-selected-bg": "var(--uxdsl__palette__neutral-main)",
"--uxdsl__button__outlined-tone-neutral-selected-color": "var(--uxdsl__palette__neutral-contrast)",
"--uxdsl__button__outlined-tone-neutral-selected-border": "1px solid var(--uxdsl__palette__neutral-main)",
"--uxdsl__button__outlined-tone-light-selected-bg": "var(--uxdsl__palette__light-main)",
"--uxdsl__button__outlined-tone-light-selected-color": "var(--uxdsl__palette__light-contrast)",
"--uxdsl__button__outlined-tone-light-selected-border": "1px solid var(--uxdsl__palette__light-main)",
"--uxdsl__button__outlined-disabled-opacity": "0.6",
"--uxdsl__button__outlined-disabled-cursor": "not-allowed"
}.action { @ds-button(flat); }.action { padding: var(--uxdsl__surface__flat-padding); border-radius: var(--uxdsl__surface__flat-radius); background: var(--uxdsl__surface__flat-bg); color: var(--uxdsl__surface__flat-color); border: var(--uxdsl__surface__flat-border); box-shadow: var(--uxdsl__surface__flat-shadow); }
.action:hover:not(:where(:disabled, [aria-disabled="true"])) { color: var(--uxdsl__button__flat-hover-color); }
.action:focus-visible { outline: var(--uxdsl__button__flat-focusvisible-outline); outline-offset: var(--uxdsl__button__flat-focusvisible-outline-offset); }
.action.is-selected, .action[aria-pressed="true"], .action[aria-selected="true"] { color: var(--uxdsl__button__flat-selected-color); }
.action:disabled, .action[aria-disabled="true"] { opacity: var(--uxdsl__button__flat-disabled-opacity); cursor: var(--uxdsl__button__flat-disabled-cursor); }{
"--uxdsl__button__flat-hover-color": "var(--uxdsl__button__tone-dark, var(--uxdsl__palette__primary-dark))",
"--uxdsl__button__flat-tone-primary-hover-color": "var(--uxdsl__palette__primary-dark)",
"--uxdsl__button__flat-tone-secondary-hover-color": "var(--uxdsl__palette__secondary-dark)",
"--uxdsl__button__flat-tone-surface-hover-color": "var(--uxdsl__palette__surface-dark)",
"--uxdsl__button__flat-tone-tertiary-hover-color": "var(--uxdsl__palette__tertiary-dark)",
"--uxdsl__button__flat-tone-success-hover-color": "var(--uxdsl__palette__success-dark)",
"--uxdsl__button__flat-tone-info-hover-color": "var(--uxdsl__palette__info-dark)",
"--uxdsl__button__flat-tone-warning-hover-color": "var(--uxdsl__palette__warning-dark)",
"--uxdsl__button__flat-tone-error-hover-color": "var(--uxdsl__palette__error-dark)",
"--uxdsl__button__flat-tone-dark-hover-color": "var(--uxdsl__palette__dark-dark)",
"--uxdsl__button__flat-tone-neutral-hover-color": "var(--uxdsl__palette__neutral-dark)",
"--uxdsl__button__flat-tone-light-hover-color": "var(--uxdsl__palette__light-dark)",
"--uxdsl__button__flat-focusvisible-outline": "2px solid var(--uxdsl__button__tone-main, var(--uxdsl__palette__primary-main))",
"--uxdsl__button__flat-focusvisible-outline-offset": "2px",
"--uxdsl__button__flat-tone-primary-focusvisible-outline": "2px solid var(--uxdsl__palette__primary-main)",
"--uxdsl__button__flat-tone-secondary-focusvisible-outline": "2px solid var(--uxdsl__palette__secondary-main)",
"--uxdsl__button__flat-tone-surface-focusvisible-outline": "2px solid var(--uxdsl__palette__surface-main)",
"--uxdsl__button__flat-tone-tertiary-focusvisible-outline": "2px solid var(--uxdsl__palette__tertiary-main)",
"--uxdsl__button__flat-tone-success-focusvisible-outline": "2px solid var(--uxdsl__palette__success-main)",
"--uxdsl__button__flat-tone-info-focusvisible-outline": "2px solid var(--uxdsl__palette__info-main)",
"--uxdsl__button__flat-tone-warning-focusvisible-outline": "2px solid var(--uxdsl__palette__warning-main)",
"--uxdsl__button__flat-tone-error-focusvisible-outline": "2px solid var(--uxdsl__palette__error-main)",
"--uxdsl__button__flat-tone-dark-focusvisible-outline": "2px solid var(--uxdsl__palette__dark-main)",
"--uxdsl__button__flat-tone-neutral-focusvisible-outline": "2px solid var(--uxdsl__palette__neutral-main)",
"--uxdsl__button__flat-tone-light-focusvisible-outline": "2px solid var(--uxdsl__palette__light-main)",
"--uxdsl__button__flat-selected-color": "var(--uxdsl__button__tone-dark, var(--uxdsl__palette__primary-dark))",
"--uxdsl__button__flat-tone-primary-selected-color": "var(--uxdsl__palette__primary-dark)",
"--uxdsl__button__flat-tone-secondary-selected-color": "var(--uxdsl__palette__secondary-dark)",
"--uxdsl__button__flat-tone-surface-selected-color": "var(--uxdsl__palette__surface-dark)",
"--uxdsl__button__flat-tone-tertiary-selected-color": "var(--uxdsl__palette__tertiary-dark)",
"--uxdsl__button__flat-tone-success-selected-color": "var(--uxdsl__palette__success-dark)",
"--uxdsl__button__flat-tone-info-selected-color": "var(--uxdsl__palette__info-dark)",
"--uxdsl__button__flat-tone-warning-selected-color": "var(--uxdsl__palette__warning-dark)",
"--uxdsl__button__flat-tone-error-selected-color": "var(--uxdsl__palette__error-dark)",
"--uxdsl__button__flat-tone-dark-selected-color": "var(--uxdsl__palette__dark-dark)",
"--uxdsl__button__flat-tone-neutral-selected-color": "var(--uxdsl__palette__neutral-dark)",
"--uxdsl__button__flat-tone-light-selected-color": "var(--uxdsl__palette__light-dark)",
"--uxdsl__button__flat-disabled-opacity": "0.6",
"--uxdsl__button__flat-disabled-cursor": "not-allowed"
}Theme uxdsl.theme.json, merged over the base theme
{
"buttons": {
"checkout": {
"surface": "contained",
"base": {
"padding": "density(3)"
},
"states": {
"hover": {
"bg": "tone(dark)"
}
}
}
}
}UXDSL you write example.uxdsl
.checkout { @ds-button(checkout); }CSS you get compiled by uxdsl; :root shows only these tokens
:root {
--uxdsl__button__checkout-base-padding: var(--uxdsl__density__3);
--uxdsl__button__checkout-hover-bg: var(--uxdsl__button__tone-dark, var(--uxdsl__palette__primary-dark));
}
.checkout {
padding: var(--uxdsl__button__checkout-base-padding);
border-radius: var(--uxdsl__surface__contained-radius);
background: var(--uxdsl__surface__contained-bg);
color: var(--uxdsl__surface__contained-color);
border: var(--uxdsl__surface__contained-border);
box-shadow: var(--uxdsl__surface__contained-shadow);
}
.checkout:hover:not(:where(:disabled, [aria-disabled="true"])) {
background: var(--uxdsl__button__checkout-hover-bg);
color: var(--uxdsl__button__checkout-hover-color);
}
.checkout:focus-visible {
outline: var(--uxdsl__button__checkout-focusvisible-outline);
outline-offset: var(--uxdsl__button__checkout-focusvisible-outline-offset);
}
.checkout.is-selected, .checkout[aria-pressed="true"], .checkout[aria-selected="true"] {
background: var(--uxdsl__button__checkout-selected-bg);
color: var(--uxdsl__button__checkout-selected-color);
}
.checkout:disabled, .checkout[aria-disabled="true"] {
opacity: var(--uxdsl__button__checkout-disabled-opacity);
cursor: var(--uxdsl__button__checkout-disabled-cursor);
}base overrides and per-state fields. Base roles: contained, outlined, flat. Fields: padding, radius, bg, color, border, shadow, opacity, outline, outline-offset, transform, cursor, font-weight. States: hover, active, focus, focusvisible, disabled, selected.selected matches .is-selected, aria-pressed="true" and aria-selected="true"; disabled matches :disabled and aria-disabled="true", and hover/active exclude a disabled control. Styling is not behavior: aria-disabled does not stop a click.hover, focusvisible (a 2px outline in the tone), selected and disabled; active and focus are yours to add.tone(main | dark | contrast) follows the tone the component asks for; an explicit palette(primary.dark) keeps its meaning whatever the tone.@ds-button or @ds-input per rule (UXD_DIRECTIVE_DUPLICATE). An unknown role is UXD_BUTTON_ROLE, an unknown state UXD_BUTTON_STATE..save { @ds-button(contained success); }
.save--quiet { @ds-button(outlined success 2); }
.save--round { @ds-button(contained radius(pill)); }.buy { @ds-button(checkout); } /* UXD_BUTTON_ROLE: the theme defines no checkout role */
.cta { @ds-button(contained); @ds-button(outlined); } /* UXD_DIRECTIVE_DUPLICATE: one control directive per rule */The guide for coding agents is on For AI agents.