💄 (project) : Adapt colors (theme)

README.md

@@ -316,14 +316,14 @@ To use it you just need to add it to your `slides` like this:
 To use it you just need to add it to your `slides` like this:
 
 ```markdown
-<Variant type='highlight'>
+<Variant type='info'>
   Some text
 </Variant>
 ```
 
 The props `type` give access to the theme of the application. 
 
-- `type` is one of `highlight` | `info` | `accent` | `warning`
+- `type` is one of `info` | `accent` | `warning`
 
 
 ### Card `<Card> ... </Card>`
@@ -337,14 +337,14 @@ The props `type` give access to the theme of the application.
 To use it you just need to add it to your `slides` like this:
 
 ```markdown
-<Card type='highlight' title='My Title'>
+<Card type='info' title='My Title'>
   Some text, components, images
 </Card>
 ```
 
 The props `type` give access to the theme of the application. 
 
-- `type` is one of `highlight` | `info` | `accent` | `warning`
+- `type` is one of | `info` | `accent` | `warning`
 - `title` is a `string`
 
 ### Note `<Note> ... </Note>`
@@ -365,5 +365,5 @@ To use it you just need to add it to your `slides` like this:
 
 The props `type` give access to the theme of the application. 
 
-- `type` is one of `highlight` | `info` | `accent` | `warning`
+- `type` is one of | `info` | `accent` | `warning`
 - `title` is a `string`

components/card.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = defineProps(
     {
-        type: 'accent' | 'highlight' | 'info' | 'warning',
+        type: 'accent' | 'info' | 'warning',
         title: String,
     }
         )
@@ -33,14 +33,6 @@ const props = defineProps(
     @apply text-2xl text-dark-warning dark:text-light-warning mb-4
   }
   
-  }
-
-    .highlight {
-  @apply border-dark-highlight border-5 bg-light-highlight p-6 bg-opacity-15 border-opacity-15;
-  
-  h1 {
-    @apply text-2xl text-dark-highlight dark:text-light-highlight mb-4
-  }
   }
 
     .info {

components/variant.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = defineProps(
     {
-        type: 'accent' | 'highlight' | 'info' | 'warning',
+        type: 'accent' | 'info' | 'warning',
     }
         )
 </script>
@@ -16,9 +16,6 @@ const props = defineProps(
 .warning {
     @apply text-light-warning dark:text-dark-warning;
 }
-.highlight {
-    @apply text-light-highlight dark:text-dark-highlight;
-}
 
 .accent {
     @apply text-brand-dark dark:text-brand-logo;

layouts/cover.vue

@@ -18,7 +18,7 @@
     font-family: 'Merienda'
   }
   h1 + p {
-    @apply opacity-60 -mt-4 text-2xl;
+    @apply -mt-4 text-2xl;
   }
 }
 </style>

layouts/roti.vue

@@ -2,10 +2,10 @@
 <template>
   <div class="slidev-layout w-full h-full flex items-center">
     <h1>
-      <Variant type="highlight">R</Variant>eturn
-      <Variant type="highlight">O</Variant>n
-      <Variant type="highlight">T</Variant>ime
-      <Variant type="highlight">I</Variant>nvested
+      <Variant type="info">R</Variant>eturn
+      <Variant type="info">O</Variant>n
+      <Variant type="info">T</Variant>ime
+      <Variant type="info">I</Variant>nvested
     </h1>
     <div class="-mt-15 flex flex-row w-full justify-between content-center items-end">
     <img class="rounded-xl" src="/images/plant-1.png" />

setup/windicss.ts

@@ -21,18 +21,18 @@ export default defineWindiSetup(() => ({
         },
       dark: {
         background: {
-          left: '#23272F',
-          right: '#23272F',
+          left: '#0f172a',
+          right: '#0f172a',
         },
         title: '#76c893',
         text: {
-          base: colors.white,
+          base: '#faedcd',
           contrast: colors.black
         } ,
-        warning: '#ff7b00',
+        warning: '#f81ce5',
         accent: '#86EFAC',
-        highlight: '#C0B2F8',
-        info: '#33BDEB'
+        highlight: '#faedcd',
+        info: '#93c5fd'
       },
       light: {
         background: {

slides/card.md

@@ -2,6 +2,6 @@
 
 <Card type="info" title="Some card">
 <Text>
-Card have access to the type props : "<Variant type="accent">accent</Variant>" | "<Variant type="highlight">highlight</Variant>" | "<Variant type="warning">warning</Variant>" | "<Variant type="info">info</Variant>"
+Card have access to the type props : "<Variant type="accent">accent</Variant>" | "<Variant type="warning">warning</Variant>" | "<Variant type="info">info</Variant>"
 </Text>
 </Card>

slides/variants.md

@@ -4,5 +4,4 @@ Using Variants, you have access to different colors of the application
 
  * <Variant type="warning" v-click>  WARNING : for important things  </Variant>
  * <Variant type="accent" v-click> ACCENT : to get main color of the theme</Variant>
- * <Variant type="highlight" v-click> HIGHLIGHT : to create focus around something </Variant>
  * <Variant type="info" v-click> INFO: to specify something is an extra info</Variant>

styles/layout.css

@@ -32,7 +32,7 @@ html.dark {
 }
 
 .slidev-toc-item {
-  @apply light:hover:text-light-highlight dark:hover:text-brand-logo transition ease-in-out duration-300
+  @apply dark:hover:text-brand-logo transition ease-in-out duration-300
 }