Theme Styles and CSS

Copy@theme {
  --animate-fd-fade-in: fd-fade-in 300ms ease;
  --animate-fd-fade-out: fd-fade-out 300ms ease;
 
  --animate-fd-dialog-in: fd-dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.16, 1, 0.3, 1);
 
  --animate-fd-popover-in: fd-popover-in 100ms ease;
  --animate-fd-popover-out: fd-popover-out 100ms ease;
 
  --animate-fd-sidebar-in: fd-sidebar-in 250ms ease;
  --animate-fd-sidebar-out: fd-sidebar-out 250ms ease;
 
  @keyframes fd-sidebar-in {
    from {
      transform: translateX(var(--fd-sidebar-drawer-offset));
    }
  }
 
  @keyframes fd-sidebar-out {
    to {
      transform: translateX(var(--fd-sidebar-drawer-offset));
    }
  }
 
  @keyframes fd-dialog-in {
    from {
      transform: scale(1.06);
      opacity: 0;
    }
    to {
      transform: scale(1);
    }
  }
 
  @keyframes fd-dialog-out {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.04);
      opacity: 0;
    }
  }
 
  @keyframes fd-popover-in {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
  }
 
  @keyframes fd-popover-out {
    to {
      opacity: 0;
      transform: scale(0.9);
    }
  }
 
  @keyframes fd-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
 
  @keyframes fd-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

Copy@theme {
  --spacing-fd-container: 1400px;
  --fd-page-width: 1200px;
  --fd-sidebar-width: 0px;
  --fd-toc-width: 0px;
  --fd-layout-width: 1600px;
  --fd-banner-height: 0px;
  --fd-nav-height: 0px;
  --fd-tocnav-height: 0px;
}
 
@layer base {
  :root,
  #nd-docs-layout {
    --fd-layout-offset: max(calc(50vw - var(--fd-layout-width) / 2), 0px);
  }
}
 
@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
 
  @apply 2xl:max-w-(--spacing-fd-container);
}
 
/* Apply styles to :root */
@custom-variant on-root {
  :root:has(&) {
    @slot;
  }
}

Copy@theme {
  --color-fd-popover: hsl(220, 22%, 92%);
  --color-fd-popover-foreground: hsl(234, 16%, 35%);
  --color-fd-secondary-foreground: hsl(234, 16%, 35%);
  --color-fd-border: hsl(223, 16%, 83%);
  --color-fd-primary: hsl(266, 85%, 58%);
  --color-fd-primary-foreground: hsl(220, 22%, 92%);
  --color-fd-muted: hsl(220, 22%, 92%);
  --color-fd-card: hsl(220, 22%, 92%);
  --color-fd-accent: hsl(223, 16%, 83%);
  --color-fd-accent-foreground: hsl(234, 16%, 35%);
  --color-fd-card-foreground: hsl(234, 16%, 35%);
  --color-fd-muted-foreground: hsl(233, 10%, 47%);
  --color-fd-foreground: hsl(234, 16%, 35%);
  --color-fd-secondary: hsl(220, 22%, 92%);
  --color-fd-background: hsl(220, 23%, 95%);
  --color-fd-ring: hsl(267, 84%, 81%);
}

Copy#nd-sidebar {
  background-color: var(--sidebar);
  color: var(--sidebar-foreground);
  border-color: var(--sidebar-border);
 
  --color-fd-accent: var(--sidebar-accent);
  --color-fd-accent-foreground: var(--sidebar-accent-foreground);
  --color-fd-ring: var(--sidebar-ring);
  --color-fd-primary-foreground: var(--sidebar-primary-foreground);
}
 
@theme static {
  --color-fd-error: var(--destructive);
}

Copy  --color-fd-background: hsl(0, 0%, 100%);
  --color-fd-card: hsl(0, 0%, 100%);
  --color-fd-foreground: hsl(240, 6%, 25%);
  --color-fd-muted-foreground: hsl(240, 6%, 50%);
  --color-fd-secondary: hsl(240, 6%, 97%);
  --color-fd-accent-foreground: hsl(240, 6%, 25%);
  --color-fd-primary: hsl(226, 55%, 45%);
}

Copy.dark {
  --color-fd-primary: oklch(0.902 0.0461 259.51);
  --color-fd-article: hsl(0, 0%, 7.04%);
  --color-fd-background: hsl(0, 0%, 5.04%);
}

Copy@theme {
  --color-fd-background: hsl(0, 0%, 98%);
  --color-fd-foreground: hsl(350, 45%, 14%);
  --color-fd-primary: hsl(348, 85%, 45%);
  --color-fd-primary-foreground: hsl(0, 0%, 100%);
  --color-fd-border: hsla(348, 40%, 60%, 0.25);
  --color-fd-ring: hsl(348, 85%, 45%);
  --color-fd-accent: hsl(348, 70%, 95%);
  --color-fd-accent-foreground: hsl(348, 70%, 22%);
  --color-fd-muted: hsl(0, 0%, 94%);
  --color-fd-muted-foreground: hsl(348, 25%, 42%);
  --color-fd-secondary: hsl(348, 55%, 92%);
  --color-fd-secondary-foreground: hsl(348, 50%, 20%);
  --color-fd-card: hsl(0, 0%, 100%);
  --color-fd-card-foreground: hsl(350, 45%, 14%);
  --color-fd-popover: hsl(0, 0%, 100%);
  --color-fd-popover-foreground: hsl(350, 45%, 14%);
}

Copyexport const typography: ReturnType<typeof plugin.withOptions<Options>> =
  plugin.withOptions<Options>(({ className = 'prose', ...styleOptions } = {}) => {
    return ({ addVariant, addComponents, ...rest }) => {
      const prefix = (rest as unknown as { prefix: Context['prefix'] }).prefix;
 
      for (const [name, ...values] of SELECTORS) {
        const selectors = values.length === 0 ? [name] : values;
        const selector = selectors.join(', ');
 
        addVariant(
          `${className}-${name}`,
          `& :is(${inWhere(selector, {
            prefix,
            className,
          })})`,
        );
      }
 
      addComponents({
        [`.${className}`]: configToCss(
          {
            ...styles.DEFAULT,
            css: [
              ...(styles.DEFAULT.css ?? []),
              styleOptions.disableRoundedTable ? styles.normalTable : styles.roundedTable,
            ],
          },
          {
            className,
            modifier: 'DEFAULT',
            prefix,
          },
        ),
      });
    };
  });

Copyfunction inWhere(selector: string, { className, prefix, modifier }: Options & Context) {
  const prefixedNot = prefix(`.not-${className}`).slice(1);
  const selectorPrefix = selector.startsWith('>')
    ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
    : '';
 
  // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
  const [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector);
 
  if (trailingPseudo) {
    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`;
  }
 
  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`;
}

Copyconst SELECTORS = [
  ['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
  ['h1'],
  ['h2'],
  ['h3'],
  ['h4'],
  ['h5'],
  ['h6'],
  ['p'],
  ['a'],
  ['blockquote'],
  ['figure'],
  ['figcaption'],
  ['strong'],
  ['em'],
  ['kbd'],
  ['code'],
  ['pre'],
  ['ol'],
  ['ul'],
  ['li'],
  ['table'],
  ['thead'],
  ['tr'],
  ['th'],
  ['td'],
  ['img'],
  ['video'],
  ['hr'],
  ['lead', '[class~="lead"]'],
];

Copyexport const roundedTable = {
  table: {
    borderCollapse: 'separate',
    borderSpacing: '0',
    background: 'var(--color-fd-card)',
    borderRadius: 'var(--radius-lg)',
    border: '1px solid var(--color-fd-border)',
    overflow: 'hidden',
  },
  th: {
    textAlign: 'start',
    padding: 'calc(var(--spacing) * 2.5)',
    'border-inline-start': '1px solid var(--color-fd-border)',
    background: 'var(--color-fd-muted)',
  },
  'th:first-child': {
    'border-inline-start': 'none',
  },
  'th:not(tr:last-child *), td:not(tr:last-child *)': {
    'border-bottom': '1px solid var(--color-fd-border)',
  },
  td: {
    textAlign: 'start',
    'border-inline-start': '1px solid var(--color-fd-border)',
    padding: 'calc(var(--spacing) * 2.5)',
  },
  'td:first-child': {
    'border-inline-start': 'none',
  },
  'tfoot th, tfoot td': {
    borderTopWidth: '1px',
    borderTopColor: 'var(--tw-prose-th-borders)',
  },
  'thead th, thead td': {
    borderBottomWidth: '1px',
    borderBottomColor: 'var(--tw-prose-th-borders)',
  },
};

Copy.shiki:not(.not-fumadocs-codeblock *) {
  --padding-left: calc(var(--spacing) * 4);
  --padding-right: calc(var(--spacing) * 4);
 
  code span {
    color: var(--shiki-light);
    font-style: var(--shiki-light-font-style);
  }

Copy.dark .shiki:not(.not-fumadocs-codeblock *) {
  code span {
    color: var(--shiki-dark);
    font-style: var(--shiki-dark-font-style);
  }
}
 
/* inline code */
code.shiki:not(.not-fumadocs-code *) span {
  color: var(--shiki-light);
  font-style: var(--shiki-light-font-style);
}
 
.dark code.shiki:not(.not-fumadocs-code *) span {
  color: var(--shiki-dark);
  font-style: var(--shiki-dark-font-style);
}

Copy.line {
  position: relative;
  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
}
 
.line:empty {
  height: 1lh;
}
 
&.has-focused .line:not(.focused) {
  filter: blur(2px);
  transition: filter 200ms;
}
 
&.has-focused:hover .line:not(.focused) {
  filter: blur(0);
}
 
.diff::before {
  position: absolute;
  left: calc(var(--spacing) * 1.5);
}
 
.diff.remove {
  opacity: 0.7;
  --fd-counter-color: var(--color-fd-diff-remove-symbol);
  @apply bg-fd-diff-remove;
}
 
.diff.remove::before {
  content: '-';
  @apply text-fd-diff-remove-symbol;
}
 
.diff.add {
  --fd-counter-color: var(--color-fd-diff-add-symbol);
  @apply bg-fd-diff-add;
}
 
.diff.add::before {
  content: '+';
  @apply text-fd-diff-add-symbol;
}
 
.highlighted {
  --fd-counter-color: var(--color-fd-primary);
  @apply bg-fd-primary/10;
}
 
.highlighted::after {
  position: absolute;
  content: '';
  @apply inset-y-0 left-0 border-l-2 border-fd-primary/50;
}
 
.highlighted-word {
  padding: 1px;
  @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
}

Copy 
  &[data-line-numbers] .twoslash-meta-line {
    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
  }
 
  &[data-line-numbers] .line {
    counter-increment: line;
    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
  }
 
  &[data-line-numbers] .line::after {
    position: absolute;
    content: counter(line);
    color: color-mix(
      in oklab,
      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
      transparent
    );
    @apply inset-y-0 left-0 w-7 text-right;
  }
}

Copy@import './generated/shared.css';
@import '@fumadocs/api-docs/css/preset.css';

Copy@source '../dist/**/*.js';
 
@theme inline {
  --color-fdpy-func: oklch(79.2% 0.209 151.711);
  --color-fdpy-class: red;
  --color-fdpy-attribute: oklch(74% 0.238 322.16);
  --color-fdpy-method: blue;
}

Copy@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

Copy@import 'tailwindcss';
@import './neutral.css';
@import './preset.css';
 
@layer base {
  body {
    @apply flex flex-col min-h-screen;
  }
}

Copyvite: {
  resolve: {
    tsconfigPaths: true,
  },
 
  plugins: [
    tailwindcss(),
    {
      name: 'internal',
      config() {
        return getConfig({ root: process.cwd() });
      },
    },
  ],
},

Copyexport async function compileInline() {
  await mkdir('css/generated', { recursive: true });
  const scanner = new Scanner({
    sources: [
      {
        base: path.resolve('src'),
        pattern: 'components/**/*.{ts,tsx}',
        negated: false,
      },
      {
        base: path.resolve('src'),
        pattern: 'layouts/shared/**/*.{ts,tsx}',
        negated: false,
      },
      {
        base: path.resolve('src'),
        pattern: '*.{ts,tsx}',
        negated: false,
      },
    ],
  });
 
  const commonNames = scanner.scan();
  await writeFile('css/generated/shared.css', namesToFile(commonNames));
 

Copy  const layouts = ['flux', 'notebook', 'home', 'docs'];
  const commonNameSet = new Set(commonNames);
 
  for (const layout of layouts) {
    const scanner = new Scanner({
      sources: [
        {
          base: path.resolve('src'),
          pattern: `layouts/${layout}/**/*.{ts,tsx}`,
          negated: false,
        },
      ],
    });
 
    await writeFile(
      `css/generated/${layout}.css`,
      namesToFile(scanner.scan().filter((name) => !commonNameSet.has(name))),
    );
  }
 
  console.log('generated CSS files');
}