css-sandbox/buttons/style.css

@import 'button.css';

:root {
  --color-primary: #fecd3a;
  --color-primary-saturated: #ffbf00;

  --color-secondary: #3764ce;
  --color-secondary-saturated: #003dcc;

  --color-success: #289e44;
  --color-success-saturated: #01a828;

  --color-warning: rgb(255, 157, 44);
  --color-warning-saturated: rgb(255, 136, 0);

  --color-danger: rgb(233, 44, 44);
  --color-danger-saturated: rgb(235, 1, 1);
}

/* Add nodebug class to any parent field (e.g. body) to turn off coloring */
.nodebug { --color-form: transparent; --color-field: transparent; --color-label: transparent; --color-input: transparent; }

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.body--centered {
  align-items: center;
}