excited-ui/dist/assets/index.css

an excited ui

.ex-button--default {
  background-color: hsl(var(--ex-default));
}

.ex-button--default.outline {
  color: hsl(var(--ex-default));
  background-color: transparent;
}
.ex-button--default.outline:hover {
  background-color: hsl(var(--ex-default));
  color: white;
}

.ex-button--primary {
  background-color: hsl(var(--ex-primary));
}

.ex-button--primary.outline {
  color: hsl(var(--ex-primary));
  background-color: transparent;
}
.ex-button--primary.outline:hover {
  background-color: hsl(var(--ex-primary));
  color: white;
}

.ex-button--success {
  background-color: hsl(var(--ex-success));
}

.ex-button--success.outline {
  color: hsl(var(--ex-success));
  background-color: transparent;
}
.ex-button--success.outline:hover {
  background-color: hsl(var(--ex-success));
  color: white;
}

.ex-button--warning {
  background-color: hsl(var(--ex-warning));
}

.ex-button--warning.outline {
  color: hsl(var(--ex-warning));
  background-color: transparent;
}
.ex-button--warning.outline:hover {
  background-color: hsl(var(--ex-warning));
  color: white;
}

.ex-button--info {
  background-color: hsl(var(--ex-info));
}

.ex-button--info.outline {
  color: hsl(var(--ex-info));
  background-color: transparent;
}
.ex-button--info.outline:hover {
  background-color: hsl(var(--ex-info));
  color: white;
}

.ex-button--danger {
  background-color: hsl(var(--ex-danger));
}

.ex-button--danger.outline {
  color: hsl(var(--ex-danger));
  background-color: transparent;
}
.ex-button--danger.outline:hover {
  background-color: hsl(var(--ex-danger));
  color: white;
}

.ex-button--colored {
  background-color: var(--ex-button-color);
  color: white;
}
.ex-button--colored.outline {
  opacity: 1;
  background-color: white;
  color: var(--ex-button-color);
}
.ex-button--colored.outline:hover {
  color: white;
  background-color: var(--ex-button-color);
}

.ex-button.text {
  opacity: 1;
  color: gray;
  background-color: transparent;
}
.ex-button.text.ex-button--colored {
  color: var(--ex-button-color);
}
.ex-button.text:hover, .ex-button.text:focus {
  opacity: 0.8;
}:root {
  --ex-base-color: 0, 10%, 20%;
  --ex-layer: 0, 0%, 100%;
  --ex-border-opacity: 0.12;
  --ex-overlay-color: 0, 0%, 0%;
  --ex-overlay-opacity: 0.35;
  --ex-default: 265, 97.7%, 66.3%;
  --ex-primary: 265, 97.7%, 66.3%;
  --ex-success: 94.5, 100%, 39.6%;
  --ex-info: 200.1, 100%, 54.3%;
  --ex-warning: 42.4, 100%, 50%;
  --ex-danger: 358.3, 100%, 64.9%;
  --ex-button-hover-opacity: 0.85;
  --ex-text-emphasis-high-opacity: 0.87;
  --ex-text-emphasis-medium-opacity: 0.68;
  --ex-text-emphasis-light-opacity: 0.38;
}

:root.dark {
  --ex-base-color: 0, 0%, 94%;
  --ex-layer: 0, 0%, 12%;
  --ex-overlay-opacity: 0.5;
  --ex-primary: 261, 73%, 66.3%;
  --ex-success: 94.5, 73%, 39.6%;
  --ex-info: 200.1, 73%, 54.3%;
  --ex-warning: 42.4, 73%, 50%;
  --ex-danger: 358.3, 73%, 64.9%;
}

html, body {
  color: hsla(var(--ex-base-color), 0.68);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: hsla(var(--ex-base-color), 0.87);
}

.e-btn:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}