blue.css in lookbook-1.0.0.beta.6

- old
+ new
@@ -1,43 +1,64 @@
 :root {
-  --lookbook-text: #27272a;
-  --lookbook-divider: #d4d4d8;
-  --lookbook-button-text: #a1a1aa;
-  --lookbook-button-text-hover: #2563eb;
-  --lookbook-tooltip: #3b82f6;
-  --lookbook-tooltip-text: #fff;
-  --lookbook-scrollbar: #e4e4e7;
-  --lookbook-scrollbar-hover: #d4d4d8;
-  --lookbook-toolbar: #fff;
+  --lookbook-white: #fff;
+  --lookbook-accent-50: #eff6ff;
+  --lookbook-accent-100: #dbeafe;
+  --lookbook-accent-200: #bfdbfe;
+  --lookbook-accent-300: #93c5fd;
+  --lookbook-accent-400: #60a5fa;
+  --lookbook-accent-500: #3b82f6;
+  --lookbook-accent-600: #2563eb;
+  --lookbook-accent-700: #1d4ed8;
+  --lookbook-accent-800: #1e40af;
+  --lookbook-accent-900: #1e3a8a;
+  --lookbook-base-50: #fafafa;
+  --lookbook-base-100: #f4f4f5;
+  --lookbook-base-200: #e4e4e7;
+  --lookbook-base-300: #d4d4d8;
+  --lookbook-base-400: #a1a1aa;
+  --lookbook-base-500: #71717a;
+  --lookbook-base-600: #52525b;
+  --lookbook-base-700: #3f3f46;
+  --lookbook-base-800: #27272a;
+  --lookbook-base-900: #18181b;
+  --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: #71717a;
-  --lookbook-nav-icon: #3b82f6;
-  --lookbook-nav-item-hover: #f4f4f5;
-  --lookbook-nav-item-active: #eff6ff;
-  --lookbook-input: #fff;
-  --lookbook-input-border: #d4d4d8;
-  --lookbook-input-border-focus: #bfdbfe;
-  --lookbook-input-text: #52525b;
-  --lookbook-input-text-placeholder: #a1a1aa;
-  --lookbook-input-toggle: #d4d4d8;
-  --lookbook-input-toggle-active: #3b82f6;
-  --lookbook-prose: #fff;
-  --lookbook-prose-text: #52525b;
-  --lookbook-prose-link: #1e3a8a;
-  --lookbook-tabs-text: #71717a;
-  --lookbook-tabs-text-hover: #3f3f46;
-  --lookbook-tabs-text-disabled: #d4d4d8;
-  --lookbook-tabs-highlight: #60a5fa;
-  --lookbook-viewport-handle: #fff;
-  --lookbook-viewport-handle-icon: #d4d4d8;
-  --lookbook-viewport-handle-icon-hover: #3f3f46;
-  --lookbook-sidebar: #fafafa;
-  --lookbook-page: #fff;
-  --lookbook-drawer: #fafafa;
-  --lookbook-header: #2563eb;
-  --lookbook-header-text: #fff;
-  --lookbook-header-border: #1d4ed8;
+  --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: #e0e7ff33;
 }
 
 /*# sourceMappingURL=blue.css.map */