refactor(theme): refactor variaous styles

src/client/theme-default/components/EditLink.vue

@@ -35,20 +35,17 @@ export default defineComponent({
 }
 
 .link {
+  display: inline-block;
   font-weight: 500;
-  color: var(--text-color-light);
+  color: var(--c-text-light);
 }
 
 .link:hover {
   text-decoration: none;
-  color: var(--accent-color);
+  color: var(--c-brand);
 }
 
 .icon {
-  display: inline-block;
   margin-left: 4px;
-  width: 1rem;
-  height: 1rem;
-  transform: translateY(-1px);
 }
 </style>

src/client/theme-default/components/Home.vue

@@ -114,7 +114,7 @@ export default defineComponent({
   max-width: 35rem;
   font-size: 1.6rem;
   line-height: 1.3;
-  /* TODO: calculating lighten 40% color with using style :vars from `--text-color` */
+  /* TODO: calculating lighten 40% color with using style :vars from `--c-text` */
   color: #6a8bad;
 }
 
@@ -122,23 +122,23 @@ export default defineComponent({
   display: inline-block;
   font-size: 1.2rem;
   color: #fff;
-  background-color: var(--accent-color);
+  background-color: var(--c-brand);
   margin-left: 0;
   padding: 0.8rem 1.6rem;
   border-radius: 4px;
   transition: background-color .1s ease;
   box-sizing: border-box;
-  /* TODO: calculating darken 10% color with using style vars from `--accent-color` */
+  /* TODO: calculating darken 10% color with using style vars from `--c-brand` */
   border-bottom: 1px solid #389d70;
 }
 
 ::v-deep(.nav-link:hover) {
-  /* TODO: calculating lighten 10% color with using style vars from `--accent-color` */
+  /* TODO: calculating lighten 10% color with using style vars from `--c-brand` */
   background-color: #4abf8a;
 }
 
 .features {
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--c-divider);
   padding: 1.2rem 0;
   margin-top: 2.5rem;
   display: flex;
@@ -159,20 +159,20 @@ export default defineComponent({
   font-weight: 500;
   border-bottom: none;
   padding-bottom: 0;
-  /* TODO: calculating lighten 10% color with using style :vars from `--text-color` */
+  /* TODO: calculating lighten 10% color with using style :vars from `--c-text` */
   color: #3a5169;
 }
 
 .feature p {
-  /* TODO: calculating lighten 25% color with using style :vars from `--text-color` */
+  /* TODO: calculating lighten 25% color with using style :vars from `--c-text` */
   color: #4e6e8e;
 }
 
 .footer {
   padding: 2.5rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--c-divider);
   text-align: center;
-  /* TODO: calculating lighten 25% color with using style :vars from `--text-color` */
+  /* TODO: calculating lighten 25% color with using style :vars from `--c-text` */
   color: #4e6e8e;
 }
 

src/client/theme-default/components/NavBar.vue

@@ -23,7 +23,7 @@
 .title {
   font-size: 1.3rem;
   font-weight: 600;
-  color: var(--text-color);
+  color: var(--c-text);
 }
 
 .title:hover {

src/client/theme-default/components/NavBarLink.vue

@@ -39,13 +39,13 @@
   font-size: 0.9rem;
   font-weight: 500;
   line-height: 1.4rem;
-  color: var(--text-color);
+  color: var(--c-text);
   white-space: nowrap;
 }
 
 .nav-link:hover,
 .nav-link.active {
-  border-bottom-color: var(--accent-color);
+  border-bottom-color: var(--c-brand);
   text-decoration: none;
 }
 
@@ -64,7 +64,7 @@
 
   .nav-link:hover,
   .nav-link.active {
-    color: var(--accent-color);
+    color: var(--c-brand);
   }
 }
 </style>

src/client/theme-default/components/NavBarLinks.vue

@@ -27,7 +27,7 @@
     display: block;
     height: auto;
     padding: 0.5rem 0 1rem;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--c-divider);
   }
 }
 </style>

src/client/theme-default/components/NavDropdownLink.vue

@@ -52,7 +52,7 @@
 
 .dropdown-wrapper .dropdown-title {
   font: inherit;
-  color: var(--text-color);
+  color: var(--c-text);
   font-size: 0.9rem;
   font-weight: 500;
   display: inline-block;
@@ -114,18 +114,18 @@
 }
 
 .dropdown-wrapper .nav-dropdown .dropdown-item a:hover {
-  color: var(--accent-color);
+  color: var(--c-brand);
 }
 
 .dropdown-wrapper .nav-dropdown .dropdown-item a.active {
-  color: var(--accent-color);
+  color: var(--c-brand);
 }
 
 .dropdown-wrapper .nav-dropdown .dropdown-item a.active::after {
   content: '';
   width: 0;
   height: 0;
-  border-left: 5px solid var(--accent-color);
+  border-left: 5px solid var(--c-brand);
   border-top: 3px solid transparent;
   border-bottom: 3px solid transparent;
   position: absolute;

src/client/theme-default/components/NextAndPrevLinks.vue

@@ -49,7 +49,7 @@ export default defineComponent({
 .container {
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--c-divider);
   padding-top: 1rem;
 }
 
@@ -90,7 +90,7 @@ export default defineComponent({
   flex-shrink: 0;
   width: 16px;
   height: 16px;
-  fill: var(--text-color);
+  fill: var(--c-text);
 }
 
 .icon-prev { margin-right: 8px; }

src/client/theme-default/components/SideBar.vue

@@ -80,17 +80,17 @@
   line-height: 1.7;
   font-size: 1.05em;
   font-weight: 700;
-  color: var(--text-color);
+  color: var(--c-text);
 }
 
 a.sidebar-link:hover {
   text-decoration: none;
-  color: var(--accent-color);
+  color: var(--c-brand);
 }
 
 a.sidebar-link.active {
-  border-left-color: var(--accent-color);
+  border-left-color: var(--c-brand);
   font-weight: 600;
-  color: var(--accent-color);
+  color: var(--c-brand);
 }
 </style>

src/client/theme-default/components/icons/OutboundLink.vue

@@ -1,13 +1,13 @@
 <template functional>
   <svg
-    class="icon outbound"
+    class="icon"
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true"
     x="0px"
     y="0px"
     viewBox="0 0 100 100"
-    width="15"
+    width="16"
-    height="15"
+    height="16"
   >
     <path
       fill="currentColor"
@@ -21,7 +21,7 @@
 </template>
 
 <style>
-.icon.outbound {
+.icon {
   position: relative;
   top: -1px;
   display: inline-block;

src/client/theme-default/styles/code.css

@@ -1,7 +1,7 @@
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
   font-size: 0.85em;
-  color: var(--text-color-light);
+  color: var(--c-text-light);
   background-color: rgba(27, 31, 35, 0.05);
   padding: 0.25rem 0.5rem;
   border-radius: 3px;
@@ -13,7 +13,7 @@ code .token.deleted {
 }
 
 code .token.inserted {
-  color: var(--accent-color);
+  color: var(--c-brand);
 }
 
 div[class*='language-'] {

src/client/theme-default/styles/custom-blocks.css

@@ -28,7 +28,7 @@
 }
 
 .custom-block.warning a {
-  color: var(--text-color);
+  color: var(--c-text);
 }
 
 .custom-block.danger {
@@ -42,7 +42,7 @@
 }
 
 .custom-block.danger a {
-  color: var(--text-color);
+  color: var(--c-text);
 }
 
 .custom-block.details {

src/client/theme-default/styles/layout.css

@@ -15,11 +15,11 @@ body {
   min-width: 320px;
   min-height: 100vh;
   line-height: 1.4;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: var(--font-family-base);
   font-size: 16px;
   font-weight: 400;
-  color: var(--text-color);
+  color: var(--c-text);
-  background-color: #ffffff;
+  background-color: var(--c-bg);
   direction: ltr;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -31,9 +31,150 @@ main {
   display: block;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: 1.25;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b {
+  font-weight: 600;
+}
+
+h1:hover .header-anchor,
+h1:focus .header-anchor,
+h2:hover .header-anchor,
+h2:focus .header-anchor,
+h3:hover .header-anchor,
+h3:focus .header-anchor,
+h4:hover .header-anchor,
+h4:focus .header-anchor,
+h5:hover .header-anchor,
+h5:focus .header-anchor,
+h6:hover .header-anchor,
+h6:focus .header-anchor {
+  opacity: 1;
+}
+
+h1 {
+  margin-top: 1.5rem;
+  font-size: 1.9rem;
+}
+
+@media screen and (min-width: 420px) {
+  h1 {
+    font-size: 2.2rem;
+  }
+}
+
+h2 {
+  margin-top: 2.25rem;
+  margin-bottom: 1.25rem;
+  border-bottom: 1px solid var(--c-divider);
+  padding-bottom: .3rem;
+  line-height: 1.25;
+  font-size: 1.65rem;
+}
+
+h2 + h3 {
+  margin-top: 1.5rem;
+}
+
+h3 {
+  margin-top: 2rem;
+  font-size: 1.35rem;
+}
+
+h4 {
+  font-size: 1.15rem;
+}
+
+p,
+ol,
+ul {
+  margin: 1rem 0;
+  line-height: 1.7;
+}
+
+a {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a.header-anchor {
+  float: left;
+  margin-top: .125em;
+  margin-left: -.87em;
+  padding-right: .23em;
+  font-size: .85em;
+  opacity: 0;
+}
+
+a.header-anchor:hover,
+a.header-anchor:focus {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+ul,
+ol {
+  padding-left: 1.25em;
+}
+
+table {
+  display: block;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+tr {
+  border-top: 1px solid #dfe2e5;
+}
+
+tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+th,
+td {
+  border: 1px solid #dfe2e5;
+  padding: 0.6em 1em;
+}
+
+blockquote {
+  margin: 1rem 0;
+  border-left: 0.2rem solid #dfe2e5;
+  padding: 0.25rem 0 0.25rem 1rem;
+  font-size: 1rem;
+  color: #999;
+}
+
+blockquote > p {
+  margin: 0;
+}
+
 .theme {
   font-size: 16px;
-  color: var(--text-color);
+  color: var(--c-text);
 }
 
 .theme .navbar {
@@ -43,7 +184,7 @@ main {
   right: 0;
   height: var(--header-height);
   background-color: #fff;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--c-divider);
   z-index: 4;
   display: flex;
   align-items: center;
@@ -63,7 +204,7 @@ main {
   bottom: 0;
   left: 0;
   width: var(--sidebar-width);
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--c-divider);
   background-color: #fff;
   z-index: 3;
   overflow-y: auto;
@@ -156,125 +297,3 @@ main {
     padding-right: 1.5rem;
   }
 }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong,
-b {
-  font-weight: 600;
-  line-height: 1.6;
-}
-
-h1:hover .header-anchor,
-h1:focus .header-anchor,
-h2:hover .header-anchor,
-h2:focus .header-anchor,
-h3:hover .header-anchor,
-h3:focus .header-anchor,
-h4:hover .header-anchor,
-h4:focus .header-anchor,
-h5:hover .header-anchor,
-h5:focus .header-anchor,
-h6:hover .header-anchor,
-h6:focus .header-anchor {
-  opacity: 1;
-}
-
-h1 {
-  font-size: 1.9rem;
-}
-
-@media screen and (min-width: 420px) {
-  h1 {
-    font-size: 2.2rem;
-  }
-}
-
-h2 {
-  font-size: 1.65rem;
-  padding-bottom: .3rem;
-  border-bottom: 1px solid var(--border-color);
-}
-
-h3 {
-  font-size: 1.35rem;
-}
-
-h4 {
-  font-size: 1.15rem;
-}
-
-p,
-ol,
-ul {
-  line-height: 1.7;
-}
-
-a {
-  text-decoration: none;
-  color: var(--accent-color);
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-a.header-anchor {
-  float: left;
-  margin-top: .125em;
-  margin-left: -.87em;
-  padding-right: .23em;
-  font-size: .85em;
-  opacity: 0;
-}
-
-a.header-anchor:hover,
-a.header-anchor:focus {
-  text-decoration: none;
-}
-
-img {
-  max-width: 100%;
-}
-
-ul,
-ol {
-  padding-left: 1.25em;
-}
-
-table {
-  display: block;
-  border-collapse: collapse;
-  margin: 1rem 0;
-  overflow-x: auto;
-}
-
-tr {
-  border-top: 1px solid #dfe2e5;
-}
-
-tr:nth-child(2n) {
-  background-color: #f6f8fa;
-}
-
-th,
-td {
-  border: 1px solid #dfe2e5;
-  padding: 0.6em 1em;
-}
-
-blockquote {
-  margin: 1rem 0;
-  border-left: 0.2rem solid #dfe2e5;
-  padding: 0.25rem 0 0.25rem 1rem;
-  font-size: 1rem;
-  color: #999;
-}
-
-blockquote > p {
-  margin: 0;
-}

src/client/theme-default/styles/vars.css

@@ -1,14 +1,45 @@
-.theme {
+/** Base styles */
-  --border-color: rgb(226, 232, 240);
+:root {
+
+  /**
+   * Colors
+   * --------------------------------------------------------------------- */
+
+  --c-white: #ffffff;
+  --c-black: #000000;
+
+  --c-divider-light: rgba(60, 60, 67, .12);
+  --c-divider-dark: rgba(84, 84, 88, .48);
+
+  --c-text-light-1: #2c3e50;
+  --c-text-light-2: #476582;
+
+  --c-brand: #3eaf7c;
+
+  /**
+   * Typography
+   * --------------------------------------------------------------------- */
+
+  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
+  /**
+   * Sizes
+   * --------------------------------------------------------------------- */
+
   --header-height: 3.6rem;
   --sidebar-width: 16.4rem;
-  --text-color: #2c3e50;
+}
-  --text-color-light: #476582;
+
+/** Fallback Styles */
+:root {
+
+  --c-divider: var(--c-divider-light);
+
+  --c-text: var(--c-text-light-1);
+  --c-text-light: var(--c-text-light-2);
+
+  --c-bg: var(--c-white);
+
   --code-bg-color: #282c34;
-  --accent-color: #3eaf7c;
 
-  /* responsive breakpoints */
-  /* --mq-narrow: 959px; */
-  /* --mq-mobile: 719px; */
-  /* --mq-mobile-narrow: 419px; */
 }