slidev-theme-neversink 0.3.4 → 0.3.6

package/docs/colors.md

@@ -89,19 +89,27 @@ which contains values for these options which might go well together in a monoch
 
 To apply the theme to a element you simply add the `neversink-{name}-scheme` class to the element and then add another class which binds the CSS vars as you like.
 
+There is one built-in one called `.ns-c-bind-scheme` which applies the color to the background, text, and border of the element. It's definition looks like this:
+
+```css
+.ns-c-bind-scheme {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}
+```
+
 For example, to apply the `red` scheme from above to a `div` element you would add the following classes:
 
 ```html
-<div class="neversink-red-scheme colorbinding">This is a red div</div>
+<div class="neversink-red-scheme ns-c-bind-scheme">This is a red div</div>
 ```
 
-and then define the color binding class
+You can also define you own custom binding classes if you want to map the colors from the theme in a different way. For example, you could define a class like this:
 
 ```css
-.colorbinding {
-  background-color: var(--neversink-bg-color);
-  color: var(--neversink-text-color);
-  border-color: var(--neversink-border-color);
+.my-bind-scheme {
+  background-color: var(--neversink-text-color);
 }
 ```
 

package/docs/styling.md

@@ -20,7 +20,30 @@ In addition to the main color [schemes](/colors) there are some additional short
 | `ns-c-COLOR-scheme`    | `neversink-COLOR-scheme`       |
 | `ns-c-COLOR-lt-scheme` | `neversink-COLOR-light-scheme` |
 
-where color can be any of the [colors](/colors) in the project.
+where color is the **first two letters** of the [colors](/colors) in the project (e.g., `ns-c-pi-scheme` for `neversink-pink-scheme`).
+
+## Color bind
+
+When you want to apply a theme color to an element on a page you can use the
+`ns-c-bind-scheme` class. This will apply the color to the text and the background.
+
+It has a definition like this:
+
+```css
+.ns-c-bind-scheme {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}
+```
+
+so to bind the color to a `div` element you can do this:
+
+```md
+<div class="ns-c-bind-scheme ns-c-sk-scheme">
+  This is a with the `ns-c-sk-scheme` (i.e., `neversink-sky-scheme`) color applied.
+</div>
+```
 
 ## Tight bullets
 

package/layouts/cover.vue

@@ -34,7 +34,6 @@ const colorscheme = computed(() => {
 
 .slidev-layout.cover {
   font-family: var(--neversink-main-font);
-
   font-weight: 300;
 }
 
@@ -55,6 +54,7 @@ const colorscheme = computed(() => {
 .slidev-layout.cover .note {
   font-weight: 300;
   font-size: 0.9rem;
+  margin-right: 200px;
 }
 
 .slidev-layout.cover h1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-neversink",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "author": "gureckis",
   "type": "module",
   "keywords": [

package/styles/base.css

@@ -26,7 +26,7 @@
 }
 
 .slidev-layout p {
-  line-height: relaxed;
+  line-height: 1.2;
 }
 /* adjust default bullets */
 .slidev-layout li {
@@ -133,10 +133,6 @@
   display: inline;
 }
 
-img {
-  display: inline;
-}
-
 /* customize the v-clicks */
 .slidev-vclick-target {
   transition: opacity 100ms ease;

package/styles/neversink-c.css

@@ -153,3 +153,10 @@
   opacity: 0.3;
   pointer-events: none;
 }
+
+.ns-c-bind-scheme,
+.ns-c-mixin {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}

package/uno.config.ts

@@ -68,6 +68,9 @@ const generate_color_schemes = (colors) => {
     '--neversink-text-color': colors['white'],
     '--neversink-border-color': colors['white'],
     '--neversink-highlight-color': '#FFA500',
+    '--neversink-admon-bg-color': colors['black'],
+    '--neversink-admon-border-color': colors['white'],
+    '--neversink-admon-text-color': colors['white'],
   })
 
   addScheme('neversink-white-scheme', 'ns-c-wh-scheme', {
@@ -78,6 +81,9 @@ const generate_color_schemes = (colors) => {
     '--neversink-text-color': colors['black'],
     '--neversink-border-color': colors['gray'][950],
     '--neversink-highlight-color': '#FFA500',
+    '--neversink-admon-bg-color': colors['white'],
+    '--neversink-admon-border-color': colors['gray'][950],
+    '--neversink-admon-text-color': colors['black'],
   })
 
   addScheme('neversink-dark-scheme', 'ns-c-dk-scheme', {
@@ -88,6 +94,9 @@ const generate_color_schemes = (colors) => {
     '--neversink-text-color': colors['gray'][100],
     '--neversink-border-color': colors['gray'][100],
     '--neversink-highlight-color': '#FFA500',
+    '--neversink-admon-bg-color': colors['gray'][800],
+    '--neversink-admon-border-color': colors['gray'][100],
+    '--neversink-admon-text-color': colors['gray'][100],
   })
 
   addScheme('neversink-light-scheme', 'ns-c-lt-scheme', {
@@ -97,6 +106,9 @@ const generate_color_schemes = (colors) => {
     '--neversink-text-color': colors['gray'][800],
     '--neversink-border-color': colors['gray'][800],
     '--neversink-highlight-color': '#FFA500',
+    '--neversink-admon-bg-color': colors['gray'][100],
+    '--neversink-admon-border-color': colors['gray'][800],
+    '--neversink-admon-text-color': colors['gray'][800],
   })
 
   for (const color of colornames) {
@@ -108,6 +120,9 @@ const generate_color_schemes = (colors) => {
         '--neversink-text-color': colors['gray'][300],
         '--neversink-border-color': colors['gray'][300],
         '--neversink-highlight-color': '#FFA500',
+        '--neversink-admon-bg-color': '#2a373a',
+        '--neversink-admon-border-color': colors['gray'][300],
+        '--neversink-admon-text-color': colors['gray'][300],
       })
 
       addScheme('neversink-navy-light-scheme', 'ns-c-nv-lt-scheme', {
@@ -117,6 +132,9 @@ const generate_color_schemes = (colors) => {
         '--neversink-text-color': '#2a373a',
         '--neversink-border-color': '#2a373a',
         '--neversink-highlight-color': '#FFA500',
+        '--neversink-admon-bg-color': colors['gray'][50],
+        '--neversink-admon-border-color': '#2a373a',
+        '--neversink-admon-text-color': '#2a373a',
       })
     } else {
       const shortColor = color.slice(0, 2)