#ccc → $gray-300

src/client/styles/scss/_admin.scss

@@ -141,7 +141,7 @@
     // style
     .theme-option-container a {
       background-color: #f5f5f5;
-      border: 1px solid #ccc;
+      border: 1px solid #$gray-300;
     }
     .theme-option-name {
       opacity: 0.3;

src/client/styles/scss/_editor-attachment.scss

@@ -51,7 +51,7 @@
       // accepted
       &.dropzone-accepted:not(.dropzone-rejected) {
         .overlay.overlay-dropzone-active {
-          border: 4px dashed #ccc;
+          border: 4px dashed #$gray-300;
 
           .overlay-content {
             // insert content
@@ -106,7 +106,7 @@
     padding-bottom: 3px;
     font-size: small;
     border: none;
-    border-top: 1px dotted #ccc;
+    border-top: 1px dotted #$gray-300;
     border-bottom: none;
 
     &:active {

src/client/styles/scss/_hljs.scss

@@ -16,7 +16,7 @@ pre.hljs {
     font-style: normal;
     font-weight: bold;
     color: #333;
-    background: #ccc;
+    background: #$gray-300;
     opacity: 0.6;
   }
 }
@@ -24,12 +24,12 @@ pre.hljs {
 // styles for highlightjs-line-numbers
 .hljs-ln td.hljs-ln-numbers {
   padding-right: 5px;
-  color: #ccc;
+  color: #$gray-300;
 
   text-align: center;
   vertical-align: top;
   user-select: none;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid #$gray-300;
 }
 
 .hljs-ln td.hljs-ln-code {

src/client/styles/scss/_layout.scss

@@ -126,7 +126,7 @@ body {
     .meta {
       margin-top: 32px;
       color: #666;
-      border-top: solid 1px #ccc;
+      border-top: solid 1px #$gray-300;
     }
   }
 }

src/client/styles/scss/_on-edit.scss

@@ -187,7 +187,8 @@ body.on-edit {
       }
 
       // add icon on cursor
-      .markdown-table-activated, .markdown-link-activated {
+      .markdown-table-activated,
+      .markdown-link-activated {
         .CodeMirror-cursor {
           &:after {
             position: relative;
@@ -197,7 +198,7 @@ body.on-edit {
             width: 1em;
             height: 1em;
             content: ' ';
-  
+
             background-repeat: no-repeat;
             background-size: 1em;
           }
@@ -312,10 +313,10 @@ body.on-edit {
   .tooltip-inner {
     color: #000;
     background-color: #fff;
-    border: 1px solid #ccc;
+    border: 1px solid #$gray-300;
   }
 
   .tooltip-arrow {
-    border-bottom: 5px solid #ccc;
+    border-bottom: 5px solid #$gray-300;
   }
 }

src/client/styles/scss/_page.scss

@@ -17,7 +17,7 @@
 
     // crowi layout only
     a.last-path {
-      color: #ccc;
+      color: #$gray-300;
 
       &:hover {
         color: inherit;

src/client/styles/scss/_page_list.scss

@@ -67,8 +67,8 @@ body .page-list {
 }
 
 .card-timeline {
-  border: 1px solid #ccc;
+  border: 1px solid #$gray-300;
   > .card-header {
-    background-color: #ccc;
+    background-color: #$gray-300;
   }
 }

src/client/styles/scss/_search.scss

@@ -11,7 +11,7 @@
   height: 22px;
   padding: 8px;
   font-size: 0.6em;
-  color: #ccc;
+  color: #$gray-300;
 }
 
 .search-typeahead {
@@ -213,7 +213,7 @@
       .wiki {
         padding: 16px;
         font-size: 13px;
-        border: solid 1px #ccc;
+        border: solid 1px #$gray-300;
       }
     }
   }

src/client/styles/scss/_subnav.scss

@@ -56,7 +56,7 @@
     .picture {
       width: 22px;
       height: 22px;
-      border: 1px solid #ccc;
+      border: 1px solid #$gray-300;
 
       &.picture-xs {
         width: 14px;

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -141,7 +141,7 @@ ul.pagination {
 
   .btn-fill {
     .btn-label {
-      color: #ccc;
+      color: #$gray-300;
     }
     .btn-label-text {
       color: #aaa;

src/client/styles/scss/theme/antarctic.scss

@@ -98,7 +98,7 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $border-color-theme: #$gray-300; // former: `$navbar-border: #$gray-300;`
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
@@ -175,7 +175,7 @@ html[dark] {
 //   $color-editor-icons: darken($accentcolor, 15%);
 
 //   // Border colors
-//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
+//   $border-color-theme: black; // former: `$navbar-border: #$gray-300;`
 
 //   // Dropdown colors
 //   $bgcolor-dropdown-link-active: $primary;

src/client/styles/scss/theme/christmas.scss

@@ -90,7 +90,7 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $border-color-theme: #$gray-300; // former: `$navbar-border: #$gray-300;`
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors

src/client/styles/scss/theme/halloween.scss

@@ -93,7 +93,7 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $border-color-theme: #$gray-300; // former: `$navbar-border: #$gray-300;`
   $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors

src/client/styles/scss/theme/island.scss

@@ -64,13 +64,13 @@ html[dark] {
   $bgcolor-sidebar-list-group: #eff8f7; // optional
 
   // Tabs
-  $bordercolor-nav-tabs: #ccc; // optional
+  $bordercolor-nav-tabs: #$gray-300; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc;
+  $border-color-theme: #$gray-300;
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors

src/client/styles/scss/theme/mono-blue.scss

@@ -62,7 +62,7 @@ html[light] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc;
+  $border-color-theme: #$gray-300;
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors

src/client/styles/scss/theme/nature.scss

@@ -79,7 +79,7 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc;
+  $border-color-theme: #$gray-300;
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors

src/client/styles/scss/theme/spring.scss

@@ -79,7 +79,7 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $border-color-theme: #$gray-300; // former: `$navbar-border: #$gray-300;`
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors

src/client/styles/scss/theme/wood.scss

@@ -97,7 +97,7 @@ html[dark] {
   $bgcolor-resize-button: $themecolor;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $border-color-theme: #$gray-300; // former: `$navbar-border: #$gray-300;`
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors

src/linter-checker/test.scss

@@ -2,7 +2,7 @@
  * VSCode の Stylelint 設定チェック方法
  *
  * 1. .stylelintrc.json ファイル中の `src/linter-checker/test.scss` 行を削除
- * 
+ *
  * 2. VSCode で以下のエラーが表示されていることを確認
  *   - color で stylelint(order/properties-order)
  *   - ul で stylelint(selector-combinator-space-after)
@@ -16,10 +16,10 @@
  */
 
 .test {
-  background: #ccc;
+  background: #$gray-300;
   color: #333;
 
-  ul>li {
+  ul > li {
     margin-left: 0;
   }
-}
+}