@studiocms/ui/dist/css/colors.css

The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.

[data-theme=light],
[data-theme=light] * {
  color-scheme: light;
}
[data-theme=dark],
[data-theme=dark] * {
  color-scheme: dark;
}
:root {
  --background-base: 0 0% 6%;
  --background-step-1: 0 0% 8%;
  --background-step-2: 0 0% 10%;
  --background-step-3: 0 0% 14%;
  --text-normal: 0 0% 100%;
  --text-muted: 0 0% 54%;
  --text-inverted: 0 0% 0%;
  --border: 240 5% 17%;
  --shadow: 0 0% 0%;
  --default-base: 0 0% 14%;
  --default-hover: 0 0% 21%;
  --default-active: 0 0% 15%;
  --primary-base: 259 83% 73%;
  --primary-hover: 259 77% 78%;
  --primary-active: 259 73% 67%;
  --success-base: 142 71% 46%;
  --success-hover: 142 72% 61%;
  --success-active: 142 87% 52%;
  --warning-base: 48 96% 53%;
  --warning-hover: 48 97% 70%;
  --warning-active: 48 100% 61%;
  --danger-base: 339 97% 31%;
  --danger-hover: 337 98% 37%;
  --danger-active: 337 88% 32%;
  --info-base: 217 92% 52%;
  --info-hover: 214 95% 58%;
  --info-active: 214 85% 52%;
  --mono-base: 0 0% 100%;
  --mono-hover: 0 0% 90%;
  --mono-active: 0 0% 95%;
  --text-light: 0 0% 100%;
  --text-dark: 0 0% 0%;
  --default-flat: var(--default-base) / 0.5;
  --default-flat-hover: var(--default-base) / 0.75;
  --default-flat-active: var(--default-base) / 0.85;
  --primary-flat: var(--primary-base) / 0.1;
  --primary-flat-hover: var(--primary-base) / 0.25;
  --primary-flat-active: var(--primary-base) / 0.35;
  --success-flat: var(--success-base) / 0.1;
  --success-flat-hover: var(--success-base) / 0.25;
  --success-flat-active: var(--success-base) / 0.35;
  --warning-flat: var(--warning-base) / 0.1;
  --warning-flat-hover: var(--warning-base) / 0.25;
  --warning-flat-active: var(--warning-base) / 0.35;
  --danger-flat: var(--danger-base) / 0.1;
  --danger-flat-hover: var(--danger-base) / 0.25;
  --danger-flat-active: var(--danger-base) / 0.35;
  --info-flat: var(--info-base) / 0.1;
  --info-flat-hover: var(--info-base) / 0.25;
  --info-flat-active: var(--info-base) / 0.35;
  --mono-flat: var(--mono-base) / 0.1;
  --mono-flat-hover: var(--mono-base) / 0.25;
  --mono-flat-active: var(--mono-base) / 0.35;
}
[data-theme=light] {
  --background-base: 0 0% 97%;
  --background-step-1: 0 0% 90%;
  --background-step-2: 0 0% 85%;
  --background-step-3: 0 0% 80%;
  --text-normal: 0 0% 0%;
  --text-muted: 0 0% 24%;
  --text-inverted: 0 0% 100%;
  --border: 263 5% 68%;
  --shadow: 0 0% 65%;
  --default-base: 0 0% 74%;
  --default-hover: 0 0% 81%;
  --default-active: 0 0% 91%;
  --primary-base: 259 85% 61%;
  --primary-hover: 259 78% 56%;
  --primary-active: 259 71% 50%;
  --success-base: 142 59% 47%;
  --success-hover: 142 62% 56%;
  --success-active: 142 87% 59%;
  --warning-base: 48 92% 46%;
  --warning-hover: 48 88% 43%;
  --warning-active: 48 85% 40%;
  --danger-base: 339 97% 31%;
  --danger-hover: 337 98% 37%;
  --danger-active: 337 88% 45%;
  --info-base: 217 92% 52%;
  --info-hover: 214 95% 58%;
  --info-active: 214 85% 52%;
  --mono-base: 0 0% 0%;
  --mono-hover: 0 0% 10%;
  --mono-active: 0 0% 5%;
}