rd-373 rename colors variables

vordgi · Nov 4, 2024 · f765020 · f765020
1 parent 8d3ac41
commit f765020
Show file tree

Hide file tree

Showing 37 changed files with 230 additions and 230 deletions.
diff --git a/examples/nextjs-contributing/src/app/globals.css b/examples/nextjs-contributing/src/app/globals.css
@@ -1,13 +1,13 @@
 :root {
-    --accent50: #eff6ff;
-    --accent100: #dbeafe;
-    --accent200: #bfdbfe;
-    --accent300: #93c5fd;
-    --accent400: #60a5fa;
-    --accent500: #3b82f6;
-    --accent600: #2563eb;
-    --accent700: #1d4ed8;
-    --accent800: #1e40af;
-    --accent900: #1e3a8a;
-    --accent950: #172554;
+    --accent-50: #eff6ff;
+    --accent-100: #dbeafe;
+    --accent-200: #bfdbfe;
+    --accent-300: #93c5fd;
+    --accent-400: #60a5fa;
+    --accent-500: #3b82f6;
+    --accent-600: #2563eb;
+    --accent-700: #1d4ed8;
+    --accent-800: #1e40af;
+    --accent-900: #1e3a8a;
+    --accent-950: #172554;
 }
diff --git a/packages/robindoc/src/assets/base.scss b/packages/robindoc/src/assets/base.scss
@@ -2,32 +2,32 @@
 
 :root {
   overflow: hidden;
-  --accent50: #fff7ed;
-  --accent100: #ffedd5;
-  --accent200: #fed7aa;
-  --accent300: #fdba74;
-  --accent400: #fb923c;
-  --accent500: #f97316;
-  --accent600: #ea580c;
-  --accent700: #c2410c;
-  --accent800: #9a3412;
-  --accent900: #7c2d12;
-  --accent950: #27130d;
+  --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;
 }
 
 body {
   --header-height: 60px;
   position: relative;
   padding: 0;
   margin: 0;
-  accent-color: var(--primary600, #ea580c);
+  accent-color: var(--primary-600, #ea580c);
   box-sizing: border-box;
   background-color: var(--body);
-  color: var(--neutral950);
+  color: var(--neutral-950);
   height: 100vh;
   overflow: hidden auto;
   scroll-padding-top: calc(var(--header-height) + 20px);
-  scrollbar-color: var(--neutral400) var(--neutral200);
+  scrollbar-color: var(--neutral-400) var(--neutral-200);
 
   @media screen and (width < $sm) {
     scroll-padding-top: calc(var(--header-height) + 60px);
@@ -82,28 +82,28 @@ svg {
 .theme-light {
   color-scheme: light;
   --body: #ffffff;
-  --neutral50: #f8fafc;
-  --neutral100: #f1f5f9;
-  --neutral200: #e2e8f0;
-  --neutral300: #cbd5e1;
-  --neutral400: #94a3b8;
-  --neutral500: #64748b;
-  --neutral600: #475569;
-  --neutral700: #334155;
-  --neutral800: #1e293b;
-  --neutral900: #0f172a;
-  --neutral950: #020617;
-  --primary50: var(--accent50, #fff7ed);
-  --primary100: var(--accent100, #ffedd5);
-  --primary200: var(--accent200, #fed7aa);
-  --primary300: var(--accent300, #fdba74);
-  --primary400: var(--accent400, #fb923c);
-  --primary500: var(--accent500, #f97316);
-  --primary600: var(--accent600, #ea580c);
-  --primary700: var(--accent700, #c2410c);
-  --primary800: var(--accent800, #9a3412);
-  --primary900: var(--accent900, #7c2d12);
-  --primary950: var(--accent950, #27130d);
+  --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;
@@ -113,7 +113,7 @@ svg {
 
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--neutral100);
+  --r-cl-2: var(--neutral-100);
   --r-cl-3: #e1e4e8;
   --r-cl-4: #2f363d;
   --r-cl-5: #959da5;
@@ -179,28 +179,28 @@ svg {
 .theme-dark {
   color-scheme: dark;
   --body: #00020a;
-  --neutral50: #020617;
-  --neutral100: #0f172a;
-  --neutral200: #1e293b;
-  --neutral300: #334155;
-  --neutral400: #475569;
-  --neutral500: #64748b;
-  --neutral600: #94a3b8;
-  --neutral700: #cbd5e1;
-  --neutral800: #e2e8f0;
-  --neutral900: #f1f5f9;
-  --neutral950: #f8fafc;
-  --primary50: var(--accent950, #27130d);
-  --primary100: var(--accent900, #7c2d12);
-  --primary200: var(--accent800, #9a3412);
-  --primary300: var(--accent700, #c2410c);
-  --primary400: var(--accent600, #ea580c);
-  --primary500: var(--accent500, #f97316);
-  --primary600: var(--accent400, #fb923c);
-  --primary700: var(--accent300, #fdba74);
-  --primary800: var(--accent200, #fed7aa);
-  --primary900: var(--accent100, #ffedd5);
-  --primary950: var(--accent50, #fff7ed);
+  --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;
@@ -210,7 +210,7 @@ svg {
 
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--neutral100);
+  --r-cl-2: var(--neutral-100);
   --r-cl-3: #444d56;
   --r-cl-4: #e1e4e8;
   --r-cl-5: #959da5;

diff --git a/packages/robindoc/src/components/blocks/anchor-heading/anchor-heading.scss b/packages/robindoc/src/components/blocks/anchor-heading/anchor-heading.scss
@@ -13,7 +13,7 @@
   transition: opacity 0.3s allow-discrete;
   padding-inline: 8px;
   margin-inline-start: -4px;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   text-decoration: none;
 
   &:hover {

diff --git a/packages/robindoc/src/components/blocks/breadcrumbs/breadcrumbs.scss b/packages/robindoc/src/components/blocks/breadcrumbs/breadcrumbs.scss
@@ -25,11 +25,11 @@
 }
 
 .r-breadcrumb-link {
-  color: var(--neutral700);
+  color: var(--neutral-700);
   text-decoration: none;
 
   &:hover {
-    color: var(--primary800);
+    color: var(--primary-800);
   }
 }
 
@@ -41,6 +41,6 @@
 }
 
 .r-breadcrumb-title {
-  color: var(--neutral950);
+  color: var(--neutral-950);
   font-weight: 600;
 }
diff --git a/packages/robindoc/src/components/blocks/code-section/code-section.scss b/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(--neutral100);
-  border: 1px solid var(--neutral300);
-  color: var(--neutral700);
+  background-color: var(--neutral-100);
+  border: 1px solid var(--neutral-300);
+  color: var(--neutral-700);
 }
 
 .r-code-section-header + .r-code-section-block {

diff --git a/packages/robindoc/src/components/blocks/contents/contents.scss b/packages/robindoc/src/components/blocks/contents/contents.scss
@@ -14,7 +14,7 @@
     max-height: calc(100vh - var(--header-height));
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--neutral200) transparent;
+    scrollbar-color: var(--neutral-200) transparent;
     scrollbar-gutter: stable;
   }
 }
@@ -38,7 +38,7 @@
 
   .r-contents-title {
     @media screen and (width < $lg) {
-      color: var(--neutral800);
+      color: var(--neutral-800);
     }
   }
 
@@ -65,7 +65,7 @@
 
 .r-contents-details {
   @media screen and (width < $lg) {
-    background: var(--neutral100);
+    background: var(--neutral-100);
     border-radius: 4px;
   }
 }
@@ -77,7 +77,7 @@
   cursor: pointer;
   margin-top: 20px;
   padding: 12px;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   z-index: 1;
 
   @media screen and (width < $lg) {
@@ -87,7 +87,7 @@
   }
 
   @media screen and (width >= $lg) {
-    color: var(--neutral900);
+    color: var(--neutral-900);
     background: var(--body);
     font-weight: 600;
     margin-top: 0;
@@ -97,7 +97,7 @@
 
   &:hover {
     @media screen and (width < $lg) {
-      color: var(--neutral900);
+      color: var(--neutral-900);
     }
   }
 }
@@ -116,7 +116,7 @@
 .r-contents-link {
   display: block;
   position: relative;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   text-decoration: none;
   padding-top: 4px;
   padding-bottom: 4px;
@@ -127,7 +127,7 @@
   transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 
   &.r-contents-link:hover {
-    color: var(--primary800);
+    color: var(--primary-800);
     transition-delay: initial;
   }
 
@@ -141,11 +141,11 @@
     height: calc(100% + 8px);
     border-style: solid;
     border-width: 0 2px 0 0;
-    border-color: var(--primary800);
+    border-color: var(--primary-800);
   }
 
   &::before {
-    border-color: var(--neutral200);
+    border-color: var(--neutral-200);
   }
 
   &::after {
@@ -193,7 +193,7 @@
 
 .r-contents-link._passed {
   @media screen and (width >= $lg) {
-    color: var(--neutral800);
+    color: var(--neutral-800);
   }
 
   &::after {
@@ -205,7 +205,7 @@
 
 .r-contents-link._active {
   @media screen and (width >= $lg) {
-    color: var(--primary800);
+    color: var(--primary-800);
   }
 
   &::after,
@@ -231,14 +231,14 @@
   display: block;
   width: 100%;
   position: relative;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   text-decoration: none;
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 14px;
   font-weight: 600;
 
   &:hover {
-    color: var(--neutral900);
+    color: var(--neutral-900);
   }
 }
diff --git a/packages/robindoc/src/components/blocks/header-menu/header-menu.scss b/packages/robindoc/src/components/blocks/header-menu/header-menu.scss
@@ -61,7 +61,7 @@
   width: 20px;
   height: 1.5px;
   position: absolute;
-  background-color: var(--neutral700);
+  background-color: var(--neutral-700);
   margin: auto;
   transition: transform 0.3s;
 }

diff --git a/packages/robindoc/src/components/blocks/header-social/header-social.scss b/packages/robindoc/src/components/blocks/header-social/header-social.scss
@@ -12,11 +12,11 @@
 }
 
 .r-header-social-git {
-  color: var(--neutral700);
+  color: var(--neutral-700);
   transition: color 0.2s;
 
   &:hover,
   &:focus {
-    color: var(--neutral950);
+    color: var(--neutral-950);
   }
 }
diff --git a/packages/robindoc/src/components/blocks/last-modified/last-modified.scss b/packages/robindoc/src/components/blocks/last-modified/last-modified.scss
@@ -1,6 +1,6 @@
 @import "src/assets/_vars";
 
 .r-last-modified {
-  color: var(--neutral700);
+  color: var(--neutral-700);
   margin-block-start: 16px;
 }