slidev-theme-neversink 0.3.3 → 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.3",
+  "version": "0.3.6",
   "author": "gureckis",
   "type": "module",
   "keywords": [
@@ -9,7 +9,7 @@
   ],
   "engines": {
     "node": ">=18.0.0",
-    "slidev": ">=0.49.16"
+    "slidev": ">=0.49.21"
   },
   "dependencies": {
     "@iconify-json/logos": "^1.1.42",
@@ -19,7 +19,7 @@
     "@iconify/json": "^2.2.221",
     "@iconify/vue": "^4.1.2",
     "@mdit/plugin-sub": "^0.12.0",
-    "@slidev/types": "^0.49.16",
+    "@slidev/types": "^0.49.21",
     "markdown-it-mark": "^4.0.0",
     "qrcode.vue": "^3.4.1"
   },
@@ -36,9 +36,9 @@
     "highlighter": "all"
   },
   "devDependencies": {
-    "pnpm": "^9.4.0",
+    "pnpm": "^9.6.0",
     "vitepress": "^1.2.3",
-    "@slidev/cli": "^0.49.16",
+    "@slidev/cli": "^0.49.21",
     "playwright-chromium": "^1.45.0",
     "bumpp": "^9.4.1"
   },

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)
@@ -195,8 +213,9 @@ export default defineConfig({
       'w-150px',
       'h-150px',
       'z-0',
-      'z-100',
-    ] /* for the docs */,
+      'z-100' /* for the docs */,
+      'grid-cols-[1fr_max-content]' /* a fix for a uno bug */,
+    ],
   ],
   transformers: [transformerDirectives()],
 })