blowfish/assets/css/components/admonition.css

/*
 * Derived from KKKZOZ/hugo-admonitions (https://github.com/KKKZOZ/hugo-admonitions/)
 * Copyright (c) 2024 KKKZOZ, Licensed under MIT License
 */
:root {
  /* GitHub Core Types (5) */
  --adm-note-border: theme('colors.blue.500');
  --adm-note-bg: theme('colors.blue.50');
  --adm-note-text: theme('colors.blue.900');

  --adm-tip-border: theme('colors.teal.500');
  --adm-tip-bg: theme('colors.teal.50');
  --adm-tip-text: theme('colors.teal.900');

  --adm-important-border: theme('colors.purple.500');
  --adm-important-bg: theme('colors.purple.50');
  --adm-important-text: theme('colors.purple.900');

  --adm-warning-border: theme('colors.orange.500');
  --adm-warning-bg: theme('colors.orange.50');
  --adm-warning-text: theme('colors.orange.900');

  --adm-caution-border: theme('colors.red.500');
  --adm-caution-bg: theme('colors.red.50');
  --adm-caution-text: theme('colors.red.900');

  /* Extended Types (10) */
  --adm-abstract-border: theme('colors.cyan.500');
  --adm-abstract-bg: theme('colors.cyan.50');
  --adm-abstract-text: theme('colors.cyan.900');

  --adm-info-border: theme('colors.sky.500');
  --adm-info-bg: theme('colors.sky.50');
  --adm-info-text: theme('colors.sky.900');

  --adm-todo-border: theme('colors.slate.500');
  --adm-todo-bg: theme('colors.slate.50');
  --adm-todo-text: theme('colors.slate.800');

  --adm-success-border: theme('colors.green.500');
  --adm-success-bg: theme('colors.green.50');
  --adm-success-text: theme('colors.green.900');

  --adm-question-border: theme('colors.amber.500');
  --adm-question-bg: theme('colors.amber.50');
  --adm-question-text: theme('colors.amber.900');

  --adm-failure-border: theme('colors.pink.500');
  --adm-failure-bg: theme('colors.pink.50');
  --adm-failure-text: theme('colors.pink.900');

  --adm-danger-border: theme('colors.red.500');
  --adm-danger-bg: theme('colors.red.50');
  --adm-danger-text: theme('colors.red.900');

  --adm-bug-border: theme('colors.rose.500');
  --adm-bug-bg: theme('colors.rose.50');
  --adm-bug-text: theme('colors.rose.900');

  --adm-example-border: theme('colors.purple.600');
  --adm-example-bg: theme('colors.purple.50');
  --adm-example-text: theme('colors.purple.900');

  --adm-quote-border: theme('colors.gray.500');
  --adm-quote-bg: theme('colors.gray.50');
  --adm-quote-text: theme('colors.gray.800');
}

/* CSS Custom Properties - Dark Mode (30 variables: 15 types × 2 properties) */
html.dark {
  /* GitHub Core Types (5) */
  --adm-note-bg: theme('colors.blue.900 / 0.6');
  --adm-note-text: theme('colors.blue.100');

  --adm-tip-bg: theme('colors.teal.900 / 0.6');
  --adm-tip-text: theme('colors.teal.100');

  --adm-important-bg: theme('colors.purple.900 / 0.6');
  --adm-important-text: theme('colors.purple.100');

  --adm-warning-bg: theme('colors.orange.900 / 0.6');
  --adm-warning-text: theme('colors.orange.100');

  --adm-caution-bg: theme('colors.red.900 / 0.6');
  --adm-caution-text: theme('colors.red.100');

  /* Extended Types (10) */
  --adm-abstract-bg: theme('colors.cyan.900 / 0.6');
  --adm-abstract-text: theme('colors.cyan.100');

  --adm-info-bg: theme('colors.sky.900 / 0.6');
  --adm-info-text: theme('colors.sky.100');

  --adm-todo-bg: theme('colors.slate.800');
  --adm-todo-text: theme('colors.slate.100');

  --adm-success-bg: theme('colors.green.900 / 0.6');
  --adm-success-text: theme('colors.green.100');

  --adm-question-bg: theme('colors.amber.900 / 0.6');
  --adm-question-text: theme('colors.amber.100');

  --adm-failure-bg: theme('colors.pink.900 / 0.6');
  --adm-failure-text: theme('colors.pink.100');

  --adm-danger-bg: theme('colors.red.900 / 0.6');
  --adm-danger-text: theme('colors.red.100');

  --adm-bug-bg: theme('colors.rose.900 / 0.6');
  --adm-bug-text: theme('colors.rose.100');

  --adm-example-bg: theme('colors.purple.900 / 0.6');
  --adm-example-text: theme('colors.purple.100');

  --adm-quote-bg: theme('colors.gray.900 / 0.6');
  --adm-quote-text: theme('colors.gray.100');
}

/* Base Styles */
.admonition .admonition-content > * {
  margin-block: 0 !important;
}

.admonition .admonition-content > * + * {
  @apply mt-3;
}

.admonition {
  @apply my-3;
}

.prose .admonition + * {
  @apply mt-0;
}

/* Type-Specific Palettes Using CSS Variables */
.admonition[data-type="note"] {
  border-color: var(--adm-note-border);
  background-color: var(--adm-note-bg);
  color: var(--adm-note-text);
}

.admonition[data-type="tip"] {
  border-color: var(--adm-tip-border);
  background-color: var(--adm-tip-bg);
  color: var(--adm-tip-text);
}

.admonition[data-type="important"] {
  border-color: var(--adm-important-border);
  background-color: var(--adm-important-bg);
  color: var(--adm-important-text);
}

.admonition[data-type="warning"] {
  border-color: var(--adm-warning-border);
  background-color: var(--adm-warning-bg);
  color: var(--adm-warning-text);
}

.admonition[data-type="caution"] {
  border-color: var(--adm-caution-border);
  background-color: var(--adm-caution-bg);
  color: var(--adm-caution-text);
}

.admonition[data-type="abstract"] {
  border-color: var(--adm-abstract-border);
  background-color: var(--adm-abstract-bg);
  color: var(--adm-abstract-text);
}

.admonition[data-type="info"] {
  border-color: var(--adm-info-border);
  background-color: var(--adm-info-bg);
  color: var(--adm-info-text);
}

.admonition[data-type="todo"] {
  border-color: var(--adm-todo-border);
  background-color: var(--adm-todo-bg);
  color: var(--adm-todo-text);
}

.admonition[data-type="success"] {
  border-color: var(--adm-success-border);
  background-color: var(--adm-success-bg);
  color: var(--adm-success-text);
}

.admonition[data-type="question"] {
  border-color: var(--adm-question-border);
  background-color: var(--adm-question-bg);
  color: var(--adm-question-text);
}

.admonition[data-type="failure"] {
  border-color: var(--adm-failure-border);
  background-color: var(--adm-failure-bg);
  color: var(--adm-failure-text);
}

.admonition[data-type="danger"] {
  border-color: var(--adm-danger-border);
  background-color: var(--adm-danger-bg);
  color: var(--adm-danger-text);
}

.admonition[data-type="bug"] {
  border-color: var(--adm-bug-border);
  background-color: var(--adm-bug-bg);
  color: var(--adm-bug-text);
}

.admonition[data-type="example"] {
  border-color: var(--adm-example-border);
  background-color: var(--adm-example-bg);
  color: var(--adm-example-text);
}

.admonition[data-type="quote"] {
  border-color: var(--adm-quote-border);
  background-color: var(--adm-quote-bg);
  color: var(--adm-quote-text);
}