refactor: update primary color usage

slidevjs · May 22, 2021 · e61c7f8 · e61c7f8
1 parent 7874e57
commit e61c7f8
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 88 deletions.
diff --git a/demo/composable-vue/components/DarkToggle.vue b/demo/composable-vue/components/DarkToggle.vue
@@ -4,7 +4,7 @@ import { isDark, toggleDark } from '@slidev/client/logic/dark'
 
 <template>
   <button
-    class="bg-primary rounded border-b-2 border-green-900 text-white text-sm px-2 pt-1.5 pb-1 inline-block !outline-none hover:bg-opacity-85"
+    class="bg-$slidev-theme-primary rounded border-b-2 border-green-900 text-white text-sm px-2 pt-1.5 pb-1 inline-block !outline-none hover:bg-opacity-85"
     @click="toggleDark"
   >
     <div class="flex">

diff --git a/packages/client/internals/Editor.vue b/packages/client/internals/Editor.vue
@@ -139,10 +139,10 @@ throttledWatch(
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
-        <button class="icon-btn" :class="tab === 'content' ? 'text-primary' : ''" @click="tab='content'">
+        <button class="icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="tab='content'">
           <carbon:account />
         </button>
-        <button class="icon-btn" :class="tab === 'note' ? 'text-primary' : ''" @click="tab='note'">
+        <button class="icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="tab='note'">
           <carbon:align-box-bottom-right />
         </button>
       </div>

diff --git a/packages/client/internals/SlidesOverview.vue b/packages/client/internals/SlidesOverview.vue
@@ -50,7 +50,7 @@ const cardWidth = computed(() => {
         class="relative"
       >
         <div
-          class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:(border-primary)"
+          class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:(border-$slidev-theme-primary)"
           @click="go(+route.path)"
         >
           <SlideContainer

diff --git a/packages/client/styles/layouts-base.css b/packages/client/styles/layouts-base.css
@@ -50,7 +50,7 @@
   }
 
   blockquote {
-    @apply text-sm px-2 py-1 bg-$prism-background border-primary border-left rounded;
+    @apply text-sm px-2 py-1 bg-$prism-background border-$slidev-theme-primary border-l rounded;
   }
 
   blockquote > * {

diff --git a/packages/create-theme/template/styles/index.ts b/packages/create-theme/template/styles/index.ts
@@ -1,3 +1,5 @@
+// inherit from base layouts, remove it to get full customizations
+import '@slidev/client/styles/layouts-base.css'
 import './main.css'
 import './layout.css'
 import './code.css'
diff --git a/packages/create-theme/template/styles/layout.css b/packages/create-theme/template/styles/layout.css
@@ -1,86 +1,7 @@
-.slidev-layout {
-  @apply px-14 py-10 text-[1.1rem];
-
-  h1, h2, h3, h4, p, div {
-    @apply select-none;
-  }
-
-  pre, code {
-    @apply select-text;
-  }
-
-  h1 {
-    @apply text-4xl mb-4 -ml-[0.05em];
-  }
-
-  h2 {
-    @apply text-3xl;
-  }
-
-  h3 {
-    @apply text-sm pt-2 uppercase tracking-widest font-500 -ml-[0.05em];
-  }
-
-  h3:not(.opacity-100) {
-    @apply opacity-40;
-  }
-
-  p {
-    @apply my-4 leading-6;
-  }
-
-  h1 + p {
-    @apply -mt-2 opacity-50 mb-4;
-  }
-
-  p + h2, ul + h2, table + h2 {
-    @apply mt-10;
-  }
-
-  ul {
-    list-style: square;
-  }
-
-  li {
-    @apply ml-1.1em pl-0.2em leading-1.8em;
-  }
-
-  blockquote {
-    @apply text-sm px-2 py-1 bg-$prism-background border-primary border-left rounded;
-  }
-
-  blockquote > * {
-    @apply my-0;
-  }
-
-  table {
-    @apply w-full;
-  }
-
-  tr {
-    @apply border-b border-gray-400 border-opacity-20;
-  }
-
-  th {
-    @apply text-left font-400;
-  }
-
-  a {
-    @apply border-current border-b border-dashed hover:(text-primary border-solid);
-  }
-
-  td, th {
-    @apply p-2 py-3;
-  }
-
-  b, strong {
-    @apply font-600;
-  }
-
-  kbd {
-    @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
-    @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-sm font-mono;
-  }
+:root {
+  // default theme color
+  // can be overrided by uses `themeConfig` option
+  --slidev-theme-primary: #5d8392;
 }
 
 .slidev-layout.cover,

diff --git a/packages/create-theme/template/styles/main.css b/packages/create-theme/template/styles/main.css