:root { --lookbook-text: theme("colors.zinc.800"); --lookbook-divider: theme("colors.zinc.300"); --lookbook-button-text: theme("colors.zinc.400"); --lookbook-button-text-hover: theme("colors.blue.600"); --lookbook-tooltip: theme("colors.blue.500"); --lookbook-tooltip-text: theme("colors.white"); --lookbook-scrollbar: theme("colors.zinc.200"); --lookbook-scrollbar-hover: theme("colors.zinc.300"); --lookbook-toolbar: theme("colors.white"); --lookbook-toolbar-divider: var(--lookbook-divider); --lookbook-nav-text: var(--lookbook-text); --lookbook-nav-toggle: theme("colors.zinc.500"); --lookbook-nav-icon: theme("colors.blue.500"); --lookbook-nav-item-hover: theme("colors.zinc.100"); --lookbook-nav-item-active: theme("colors.blue.50"); --lookbook-input: theme("colors.white"); --lookbook-input-border: theme("colors.zinc.300"); --lookbook-input-border-focus: theme("colors.blue.200"); --lookbook-input-text: theme("colors.zinc.600"); --lookbook-input-text-placeholder: theme("colors.zinc.400"); --lookbook-input-toggle: theme("colors.zinc.300"); --lookbook-input-toggle-active: theme("colors.blue.500"); --lookbook-prose: theme("colors.white"); --lookbook-prose-text: theme("colors.zinc.600"); --lookbook-prose-link: theme("colors.blue.900"); --lookbook-tabs-text: theme("colors.zinc.500"); --lookbook-tabs-text-hover: theme("colors.zinc.700"); --lookbook-tabs-text-disabled: theme("colors.zinc.300"); --lookbook-tabs-highlight: theme("colors.blue.400"); --lookbook-viewport-handle: theme("colors.white"); --lookbook-viewport-handle-icon: theme("colors.zinc.300"); --lookbook-viewport-handle-icon-hover: theme("colors.zinc.700"); --lookbook-sidebar: theme("colors.zinc.50"); --lookbook-page: theme("colors.white"); --lookbook-drawer: theme("colors.zinc.50"); --lookbook-header: theme("colors.blue.600"); --lookbook-header-text: theme("colors.white"); --lookbook-header-border: theme("colors.blue.700"); --lookbook-branding-text: var(--lookbook-header-text); --lookbook-draggable-hint: rgb(224 231 255 / 0.2); }