@fulldevlabs/fullui/src/css/colors.css

A component library built for Astro

:root,
.full-theme-light {
  --base-background: hsl(0, 0%, 100%);
  --base-hover: hsl(0, 0%, 97%);
  --base-border: hsl(0, 0%, 83%);
  --base-focus: hsl(0, 0%, 10%);
  --base-foreground: hsl(0, 0%, 4%);

  --raised-background: hsl(0, 0%, 97%);
  --raised-hover: var(--base-hover);
  --raised-border: var(--base-border);
  --raised-focus: var(--base-focus);
  --raised-foreground: var(--base-foreground);

  --accent-background: var(--base-background);
  --accent-hover: var(--base-hover);
  --accent-border: var(--base-border);
  --accent-focus: var(--base-focus);
  --accent-foreground: var(--primary-background);

  --muted-background: var(--base-background);
  --muted-hover: var(--base-hover);
  --muted-border: var(--base-border);
  --muted-focus: var(--base-focus);
  --muted-foreground: hsl(0, 0%, 25%);

  --ghost-background: transparent;
  --ghost-hover: var(--base-hover);
  --ghost-border: transparent;
  --ghost-focus: var(--base-focus);
  --ghost-foreground: var(--base-foreground);

  --outline-background: transparent;
  --outline-hover: var(--hover);
  --outline-border: hsl(0, 0%, 83%);
  --outline-focus: var(--base-focus);
  --outline-foreground: var(--base-foreground);

  --secondary-background: hsl(0, 0%, 94%);
  --secondary-hover: hsl(0, 0%, 92%);
  --secondary-border: transparent;
  --secondary-focus: var(--base-focus);
  --secondary-foreground: var(--base-foreground);

  --primary-background: hsl(0, 0%, 0%);
  --primary-hover: hsl(0, 0%, 16%);
  --primary-border: transparent;
  --primary-focus: var(--base-focus);
  --primary-foreground: hsl(0, 0%, 100%);

  color-scheme: light;
}

.full-theme-dark,
.dark,
[data-theme='dark'] {
  --base-background: #020202;
  --base-hover: #101010;
  --base-border: #333333;
  --base-focus: #fff;
  --base-foreground: #fff;

  --muted-background: var(--base-background);
  --muted-hover: var(--base-hover);
  --muted-border: var(--base-border);
  --muted-focus: var(--base-focus);
  --muted-foreground: #dcdcdc;

  --raised-background: #101010;
  --raised-hover: var(--base-hover);
  --raised-border: var(--base-border);
  --raised-focus: var(--base-focus);
  --raised-foreground: var(--base-foreground);

  --accent-background: var(--base-background);
  --accent-hover: var(--base-hover);
  --accent-border: var(--base-border);
  --accent-focus: var(--base-focus);
  --accent-foreground: var(--primary-background);

  --ghost-background: transparent;
  --ghost-hover: var(--base-hover);
  --ghost-border: transparent;
  --ghost-focus: var(--base-focus);
  --ghost-foreground: var(--base-foreground);

  --outline-background: transparent;
  --outline-hover: var(--hover);
  --outline-border: #333333;
  --outline-focus: var(--base-focus);
  --outline-foreground: var(--base-foreground);

  --secondary-background: #1f1f1f;
  --secondary-hover: #191919;
  --secondary-border: transparent;
  --secondary-focus: var(--base-focus);
  --secondary-foreground: var(--base-foreground);

  --primary-background: #fff;
  --primary-hover: #dcdcdc;
  --primary-border: transparent;
  --primary-focus: var(--base-focus);
  --primary-foreground: var(--base-background);

  color-scheme: dark;
}

/* --------------------------- */
/* Generate colors */
/* --------------------------- */

:root,
:where([class*='full-theme-']),
.full-variant-base,
.full-variant-base
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--base-background);
  --hover: var(--base-hover);
  --border: var(--base-border);
  --focus: var(--base-focus);
  --foreground: var(--base-foreground);
}

.full-variant-primary,
.full-variant-primary
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--primary-background);
  --hover: var(--primary-hover);
  --border: var(--primary-border);
  --focus: var(--primary-focus);
  --foreground: var(--primary-foreground);
}

.full-variant-secondary,
.full-variant-secondary
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--secondary-background);
  --hover: var(--secondary-hover);
  --border: var(--secondary-border);
  --focus: var(--secondary-focus);
  --foreground: var(--secondary-foreground);
}

.full-variant-accent,
.full-variant-accent
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--accent-background);
  --hover: var(--accent-hover);
  --border: var(--accent-border);
  --focus: var(--accent-focus);
  --foreground: var(--accent-foreground);
}

.full-variant-muted,
.full-variant-muted
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--muted-background);
  --hover: var(--muted-hover);
  --border: var(--muted-border);
  --focus: var(--muted-focus);
  --foreground: var(--muted-foreground);
}

.full-variant-ghost,
.full-variant-ghost
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--ghost-background);
  --hover: var(--ghost-hover);
  --border: var(--ghost-border);
  --focus: var(--ghost-focus);
  --foreground: var(--ghost-foreground);
}

.full-variant-outline,
.full-variant-outline
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--outline-background);
  --hover: var(--outline-hover);
  --border: var(--outline-border);
  --focus: var(--outline-focus);
  --foreground: var(--outline-foreground);
}

.full-variant-raised,
.full-variant-raised
  *:not(
    .full-variant-base,
    .full-variant-base *,
    .full-variant-primary,
    .full-variant-primary *,
    .full-variant-secondary,
    .full-variant-secondary *,
    .full-variant-accent,
    .full-variant-accent *,
    .full-variant-muted,
    .full-variant-muted *,
    .full-variant-ghost,
    .full-variant-ghost *,
    .full-variant-outline,
    .full-variant-outline *,
    .full-variant-raised,
    .full-variant-raised *
  ) {
  --background: var(--raised-background);
  --hover: var(--raised-hover);
  --border: var(--raised-border);
  --focus: var(--raised-focus);
  --foreground: var(--raised-foreground);
}