mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Mike Newbon
5fd94e1365
Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>
88 lines
2.6 KiB
CSS
88 lines
2.6 KiB
CSS
@import "tailwindcss" theme(static) source(none);
|
|
@import "@nuxt/ui";
|
|
|
|
/* Scoped to what the docs render: the site and the library source, which `--uiDev`
|
|
resolves components and theme from. A repo-root source also put `test`,
|
|
`playgrounds` and `skills` on the CSS watcher. */
|
|
@source "../../..";
|
|
@source "../../../../src";
|
|
@source "../../../content/**/*";
|
|
|
|
@theme static {
|
|
--container-8xl: 90rem;
|
|
|
|
--font-sans: 'Public Sans', sans-serif;
|
|
/* Tailwind's preflight wires --font-sans and --font-mono itself, nothing
|
|
consumes --font-serif. Defaulting it to the body stack keeps the heading
|
|
rule below inert until the studio sets a serif of its own. */
|
|
--font-serif: var(--font-sans);
|
|
|
|
--color-green-50: #EFFDF5;
|
|
--color-green-100: #D9FBE8;
|
|
--color-green-200: #B3F5D1;
|
|
--color-green-300: #75EDAE;
|
|
--color-green-400: #00DC82;
|
|
--color-green-500: #00C16A;
|
|
--color-green-600: #00A155;
|
|
--color-green-700: #007F45;
|
|
--color-green-800: #016538;
|
|
--color-green-900: #0A5331;
|
|
--color-green-950: #052E16;
|
|
}
|
|
|
|
:root {
|
|
--ui-container: var(--container-8xl);
|
|
}
|
|
|
|
/* The live counterpart of the export's heading rule, until v5 ships
|
|
--ui-font-heading. In `base` so `font-mono` on an h1 still wins. */
|
|
@layer base {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-serif);
|
|
}
|
|
}
|
|
|
|
/* The studio's canvas sits recessed behind the preview card. Mixed off
|
|
--ui-bg so editing that token moves the canvas too; the weights land the
|
|
stock theme on neutral-50 / neutral-950. Unlayered, to outrank the
|
|
bg-default utility the Nuxt root carries. */
|
|
body.theme-studio,
|
|
body.theme-studio #__nuxt {
|
|
background-color: color-mix(in oklab, var(--ui-bg) 98%, var(--ui-color-neutral-950));
|
|
}
|
|
|
|
.dark body.theme-studio,
|
|
.dark body.theme-studio #__nuxt {
|
|
background-color: color-mix(in oklab, var(--ui-bg) 70%, black);
|
|
}
|
|
|
|
html[data-framework="nuxt"] .vue-only,
|
|
html[data-framework="vue"] .nuxt-only {
|
|
display: none;
|
|
}
|
|
|
|
/* Comark Shiki dark mode styles */
|
|
html.dark .shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
background-color: var(--shiki-dark-bg) !important;
|
|
font-style: var(--shiki-dark-font-style) !important;
|
|
font-weight: var(--shiki-dark-font-weight) !important;
|
|
text-decoration: var(--shiki-dark-text-decoration) !important;
|
|
}
|
|
|
|
/* Shiki icon highlight transformer styles */
|
|
.shiki-icon-highlight {
|
|
display: inline-block;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
vertical-align: -0.25em;
|
|
margin-right: 0.125em;
|
|
background-color: var(--ui-text-highlighted);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
-webkit-mask-image: var(--shiki-icon-url);
|
|
mask-image: var(--shiki-icon-url);
|
|
}
|