chiya/assets/css/app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./reset.css";
@import "./lolight.css";
@import "./lightbox.css";

@layer base {
  :root[data-theme=default] {
    --color-primary: 68 68 68;
    --color-background: 255 255 255;
    --color-text-base: 68 68 68;
    --color-text-heading: 68 68 68;
    --color-text-muted: 153 153 153;
    --color-text-dim: 204 204 204;
  }

  :root[data-theme=default][data-mode=dark] {
    --color-primary: 255 255 255;
    --color-background: 34 34 34;
    --color-text-base: 204 204 204;
    --color-text-heading: 255 255 255;
    --color-text-muted: 102 102 102;
    --color-text-dim: 68 68 68;
  }

  :root[data-theme=frame] {
    --color-primary: 91 82 254;
    --color-background: 237 238 242;
    --color-text-base: 38 43 55;
    --color-text-heading: 57 65 83;
    --color-text-muted: 57 65 83;
    --color-text-dim: 76 87 111;
  }

  :root[data-theme=frame][data-mode=dark] {
    --color-primary: 91 82 254;
    --color-background: 38 43 55;
    --color-text-base: 204 204 204;
    --color-text-heading: 204 204 204;
    --color-text-muted: 76 87 111;
    --color-text-dim: 57 65 83;
  }

  :root[data-theme=gruvbox] {
    --color-primary: 175 58 3;
    --color-background: 251 241 199;
    --color-text-base :40 40 40;
    --color-text-heading: 66 123 88;
    --color-text-muted: 60 56 54;
    --color-text-dim: 102 92 84;
  }

  :root[data-theme=gruvbox][data-mode=dark] {
    --color-primary: 214 93 14;
    --color-background: 40 40 40;
    --color-text-base: 251 241 199;
    --color-text-heading: 104 157 106;
    --color-text-muted: 235 219 178;
    --color-text-dim: 189 174 147;
  }
}

/* 
  Invert prose styles based on the variant of the theme. 
*/
:root[data-mode=dark] .prose {
  @apply prose-invert;
}

.prose :where(a):not(:where([class~="not-prose"] *)) {
  @apply underline decoration-1 decoration-theme-primary;
}

.prose :where(h2):not(:where([class~="not-prose"] *)) {
  @apply font-serif text-theme-heading;
}

.prose img {
  @apply rounded border border-theme-dim;
}

/* Set width and color for identity icons */
a[rel] svg { 
  width: 1em;
  fill: rgb(var(--color-text-heading));
}

/* Set width and color for identity icons */
svg {
  width: 1.5em;
}

.alert {
  @apply p-3 mt-3 rounded;
}

.alert-danger {
  @apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
}