zinc.css in lookbook-1.0.0.beta.6

- old
+ new
@@ -1,42 +1,63 @@
 :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.zinc.600");
-  --lookbook-tooltip: theme("colors.zinc.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-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.zinc.50");
+  --lookbook-accent-100: theme("colors.zinc.100");
+  --lookbook-accent-200: theme("colors.zinc.200");
+  --lookbook-accent-300: theme("colors.zinc.300");
+  --lookbook-accent-400: theme("colors.zinc.400");
+  --lookbook-accent-500: theme("colors.zinc.500");
+  --lookbook-accent-600: theme("colors.zinc.600");
+  --lookbook-accent-700: theme("colors.zinc.700");
+  --lookbook-accent-800: theme("colors.zinc.800");
+  --lookbook-accent-900: theme("colors.zinc.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-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.zinc.500");
-  --lookbook-nav-item-hover: theme("colors.zinc.100");
-  --lookbook-nav-item-active: theme("colors.zinc.50");
-  --lookbook-input: theme("colors.white");
-  --lookbook-input-border: theme("colors.zinc.300");
-  --lookbook-input-border-focus: theme("colors.zinc.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.zinc.500");
-  --lookbook-prose: theme("colors.white");
-  --lookbook-prose-text: theme("colors.zinc.600");
-  --lookbook-prose-link: theme("colors.zinc.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.zinc.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.zinc.600");
-  --lookbook-header-text: theme("colors.white");
-  --lookbook-header-border: theme("colors.zinc.700");
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-branding-text: var(--lookbook-header-text);
   --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
 }
\ No newline at end of file