Merge pull request #386 from vordgi/rd-385

rd-385 refactor theming

packages/robindoc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robindoc",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "",
   "main": "./lib/index.js",
   "scripts": {

packages/robindoc/src/assets/base.scss

@@ -2,32 +2,57 @@
 
 :root {
   overflow: hidden;
-  --accent-50: #fff7ed;
-  --accent-100: #ffedd5;
-  --accent-200: #fed7aa;
-  --accent-300: #fdba74;
-  --accent-400: #fb923c;
-  --accent-500: #f97316;
-  --accent-600: #ea580c;
-  --accent-700: #c2410c;
-  --accent-800: #9a3412;
-  --accent-900: #7c2d12;
-  --accent-950: #27130d;
+  // base colors
+  --rb-neutral-50: #f8fafc;
+  --rb-neutral-100: #f1f5f9;
+  --rb-neutral-200: #e2e8f0;
+  --rb-neutral-300: #cbd5e1;
+  --rb-neutral-400: #94a3b8;
+  --rb-neutral-500: #64748b;
+  --rb-neutral-600: #475569;
+  --rb-neutral-700: #334155;
+  --rb-neutral-800: #1e293b;
+  --rb-neutral-900: #0f172a;
+  --rb-neutral-950: #020617;
+  --rb-primary-50: #fff7ed;
+  --rb-primary-100: #ffedd5;
+  --rb-primary-200: #fed7aa;
+  --rb-primary-300: #fdba74;
+  --rb-primary-400: #fb923c;
+  --rb-primary-500: #f97316;
+  --rb-primary-600: #ea580c;
+  --rb-primary-700: #c2410c;
+  --rb-primary-800: #9a3412;
+  --rb-primary-900: #7c2d12;
+  --rb-primary-950: #27130d;
+  --rb-secondary-50: #eff6ff;
+  --rb-secondary-100: #dbeafe;
+  --rb-secondary-200: #bfdbfe;
+  --rb-secondary-300: #93c5fd;
+  --rb-secondary-400: #60a5fa;
+  --rb-secondary-500: #3b82f6;
+  --rb-secondary-600: #2563eb;
+  --rb-secondary-700: #1d4ed8;
+  --rb-secondary-800: #1e40af;
+  --rb-secondary-900: #1e3a8a;
+  --rb-secondary-950: #172554;
+  --rb-body-50: #ffffff;
+  --rb-body-950: #00020a;
 }
 
 body {
   --header-height: 60px;
   position: relative;
   padding: 0;
   margin: 0;
-  accent-color: var(--primary-600, #ea580c);
+  accent-color: var(--r-primary-600, #ea580c);
   box-sizing: border-box;
-  background-color: var(--body);
-  color: var(--neutral-950);
+  background-color: var(--r-body);
+  color: var(--r-neutral-950);
   height: 100vh;
   overflow: hidden auto;
   scroll-padding-top: calc(var(--header-height) + 20px);
-  scrollbar-color: var(--neutral-400) var(--neutral-200);
+  scrollbar-color: var(--r-neutral-400) var(--r-neutral-200);
 
   @media screen and (width < $sm) {
     scroll-padding-top: calc(var(--header-height) + 60px);
@@ -81,39 +106,48 @@ svg {
 
 .theme-light {
   color-scheme: light;
-  --body: #ffffff;
-  --neutral-50: #f8fafc;
-  --neutral-100: #f1f5f9;
-  --neutral-200: #e2e8f0;
-  --neutral-300: #cbd5e1;
-  --neutral-400: #94a3b8;
-  --neutral-500: #64748b;
-  --neutral-600: #475569;
-  --neutral-700: #334155;
-  --neutral-800: #1e293b;
-  --neutral-900: #0f172a;
-  --neutral-950: #020617;
-  --primary-50: var(--accent-50, #fff7ed);
-  --primary-100: var(--accent-100, #ffedd5);
-  --primary-200: var(--accent-200, #fed7aa);
-  --primary-300: var(--accent-300, #fdba74);
-  --primary-400: var(--accent-400, #fb923c);
-  --primary-500: var(--accent-500, #f97316);
-  --primary-600: var(--accent-600, #ea580c);
-  --primary-700: var(--accent-700, #c2410c);
-  --primary-800: var(--accent-800, #9a3412);
-  --primary-900: var(--accent-900, #7c2d12);
-  --primary-950: var(--accent-950, #27130d);
-  --success: #15803d;
-  --link-base: #2563eb;
-  --link-base-hovered: #1e3a8a;
-  --link-visited: #4f46e5;
-  --link-visited-hovered: #3730a3;
-  --link-active: #6b21a8;
+  --r-body: var(--rb-body-50);
+  --r-neutral-50: var(--rb-neutral-50, #f8fafc);
+  --r-neutral-100: var(--rb-neutral-100, #f1f5f9);
+  --r-neutral-200: var(--rb-neutral-200, #e2e8f0);
+  --r-neutral-300: var(--rb-neutral-300, #cbd5e1);
+  --r-neutral-400: var(--rb-neutral-400, #94a3b8);
+  --r-neutral-500: var(--rb-neutral-500, #64748b);
+  --r-neutral-600: var(--rb-neutral-600, #475569);
+  --r-neutral-700: var(--rb-neutral-700, #334155);
+  --r-neutral-800: var(--rb-neutral-800, #1e293b);
+  --r-neutral-900: var(--rb-neutral-900, #0f172a);
+  --r-neutral-950: var(--rb-neutral-950, #020617);
+  --r-primary-50: var(--rb-primary-50, #fff7ed);
+  --r-primary-100: var(--rb-primary-100, #ffedd5);
+  --r-primary-200: var(--rb-primary-200, #fed7aa);
+  --r-primary-300: var(--rb-primary-300, #fdba74);
+  --r-primary-400: var(--rb-primary-400, #fb923c);
+  --r-primary-500: var(--rb-primary-500, #f97316);
+  --r-primary-600: var(--rb-primary-600, #ea580c);
+  --r-primary-700: var(--rb-primary-700, #c2410c);
+  --r-primary-800: var(--rb-primary-800, #9a3412);
+  --r-primary-900: var(--rb-primary-900, #7c2d12);
+  --r-primary-950: var(--rb-primary-950, #27130d);
+  --r-secondary-50: var(--rb-secondary-50, #eff6ff);
+  --r-secondary-100: var(--rb-secondary-100, #dbeafe);
+  --r-secondary-200: var(--rb-secondary-200, #bfdbfe);
+  --r-secondary-300: var(--rb-secondary-300, #93c5fd);
+  --r-secondary-400: var(--rb-secondary-400, #60a5fa);
+  --r-secondary-500: var(--rb-secondary-500, #3b82f6);
+  --r-secondary-600: var(--rb-secondary-600, #2563eb);
+  --r-secondary-700: var(--rb-secondary-700, #1d4ed8);
+  --r-secondary-800: var(--rb-secondary-800, #1e40af);
+  --r-secondary-900: var(--rb-secondary-900, #1e3a8a);
+  --r-secondary-950: var(--rb-secondary-950, #172554);
+  --r-success: #15803d;
+  --r-link: var(--r-secondary-600);
+  --r-link-hovered: var(--r-secondary-800);
+  --r-link-active: var(--r-primary-700);
 
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--neutral-100);
+  --r-cl-2: var(--r-neutral-100);
   --r-cl-3: #e1e4e8;
   --r-cl-4: #2f363d;
   --r-cl-5: #959da5;
@@ -178,39 +212,48 @@ svg {
 
 .theme-dark {
   color-scheme: dark;
-  --body: #00020a;
-  --neutral-50: #020617;
-  --neutral-100: #0f172a;
-  --neutral-200: #1e293b;
-  --neutral-300: #334155;
-  --neutral-400: #475569;
-  --neutral-500: #64748b;
-  --neutral-600: #94a3b8;
-  --neutral-700: #cbd5e1;
-  --neutral-800: #e2e8f0;
-  --neutral-900: #f1f5f9;
-  --neutral-950: #f8fafc;
-  --primary-50: var(--accent-950, #27130d);
-  --primary-100: var(--accent-900, #7c2d12);
-  --primary-200: var(--accent-800, #9a3412);
-  --primary-300: var(--accent-700, #c2410c);
-  --primary-400: var(--accent-600, #ea580c);
-  --primary-500: var(--accent-500, #f97316);
-  --primary-600: var(--accent-400, #fb923c);
-  --primary-700: var(--accent-300, #fdba74);
-  --primary-800: var(--accent-200, #fed7aa);
-  --primary-900: var(--accent-100, #ffedd5);
-  --primary-950: var(--accent-50, #fff7ed);
-  --success: #86efac;
-  --link-base: #3b82f6;
-  --link-base-hovered: #93c5fd;
-  --link-visited: #6366f1;
-  --link-visited-hovered: #a5b4fc;
-  --link-active: #f0abfc;
+  --r-body: var(--rb-body-950);
+  --r-neutral-50: var(--rb-neutral-950, #020617);
+  --r-neutral-100: var(--rb-neutral-900, #0f172a);
+  --r-neutral-200: var(--rb-neutral-800, #1e293b);
+  --r-neutral-300: var(--rb-neutral-700, #334155);
+  --r-neutral-400: var(--rb-neutral-600, #475569);
+  --r-neutral-500: var(--rb-neutral-500, #64748b);
+  --r-neutral-600: var(--rb-neutral-400, #94a3b8);
+  --r-neutral-700: var(--rb-neutral-300, #cbd5e1);
+  --r-neutral-800: var(--rb-neutral-200, #e2e8f0);
+  --r-neutral-900: var(--rb-neutral-100, #f1f5f9);
+  --r-neutral-950: var(--rb-neutral-50, #f8fafc);
+  --r-primary-50: var(--rb-primary-950, #27130d);
+  --r-primary-100: var(--rb-primary-900, #7c2d12);
+  --r-primary-200: var(--rb-primary-800, #9a3412);
+  --r-primary-300: var(--rb-primary-700, #c2410c);
+  --r-primary-400: var(--rb-primary-600, #ea580c);
+  --r-primary-500: var(--rb-primary-500, #f97316);
+  --r-primary-600: var(--rb-primary-400, #fb923c);
+  --r-primary-700: var(--rb-primary-300, #fdba74);
+  --r-primary-800: var(--rb-primary-200, #fed7aa);
+  --r-primary-900: var(--rb-primary-100, #ffedd5);
+  --r-primary-950: var(--rb-primary-50, #fff7ed);
+  --r-secondary-50: var(--rb-secondary-950, #172554);
+  --r-secondary-100: var(--rb-secondary-900, #1e3a8a);
+  --r-secondary-200: var(--rb-secondary-800, #1e40af);
+  --r-secondary-300: var(--rb-secondary-700, #1d4ed8);
+  --r-secondary-400: var(--rb-secondary-600, #2563eb);
+  --r-secondary-500: var(--rb-secondary-500, #3b82f6);
+  --r-secondary-600: var(--rb-secondary-400, #60a5fa);
+  --r-secondary-700: var(--rb-secondary-300, #93c5fd);
+  --r-secondary-800: var(--rb-secondary-200, #bfdbfe);
+  --r-secondary-900: var(--rb-secondary-100, #dbeafe);
+  --r-secondary-950: var(--rb-secondary-50, #eff6ff);
+  --r-success: #86efac;
+  --r-link: var(--r-secondary-500);
+  --r-link-hovered: var(--r-secondary-800);
+  --r-link-active: var(--r-primary-700);
 
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--neutral-100);
+  --r-cl-2: var(--r-neutral-100);
   --r-cl-3: #444d56;
   --r-cl-4: #e1e4e8;
   --r-cl-5: #959da5;

packages/robindoc/src/components/blocks/anchor-heading/anchor-heading.scss

@@ -13,11 +13,11 @@
   transition: opacity 0.3s allow-discrete;
   padding-inline: 8px;
   margin-inline-start: -4px;
-  color: var(--neutral-600);
+  color: var(--r-neutral-600);
   text-decoration: none;
 
   &:hover {
-    color: var(--link-base-hovered);
+    color: var(--r-link-base-hovered);
   }
 
   &::after {

packages/robindoc/src/components/blocks/breadcrumbs/breadcrumbs.scss

@@ -25,11 +25,11 @@
 }
 
 .r-breadcrumb-link {
-  color: var(--neutral-700);
+  color: var(--r-neutral-700);
   text-decoration: none;
 
   &:hover {
-    color: var(--primary-800);
+    color: var(--r-primary-800);
   }
 }
 
@@ -41,6 +41,6 @@
 }
 
 .r-breadcrumb-title {
-  color: var(--neutral-950);
+  color: var(--r-neutral-950);
   font-weight: 600;
 }

packages/robindoc/src/components/blocks/code-section/code-section.scss

@@ -12,9 +12,9 @@
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   padding: 6px 20px;
-  background-color: var(--neutral-100);
-  border: 1px solid var(--neutral-300);
-  color: var(--neutral-700);
+  background-color: var(--r-neutral-100);
+  border: 1px solid var(--r-neutral-300);
+  color: var(--r-neutral-700);
 }
 
 .r-code-section-header + .r-code-section-block {