@skewedaspect/sleekspace-ui 0.5.0 → 0.5.1

package/dist/components/Theme/types.d.ts

@@ -1,9 +1,24 @@
+/**
+ * Registry of available theme names. Augment this interface to register custom themes:
+ *
+ * ```ts
+ * declare module '@skewedaspect/sleekspace-ui' {
+ *     interface SkThemeNameMap {
+ *         ocean : true;
+ *         midnight : true;
+ *     }
+ * }
+ * ```
+ */
+export interface SkThemeNameMap {
+    greyscale: true;
+    colorful: true;
+}
 /**
  * Available theme names that control the overall color scheme of the application.
- * - 'greyscale': A monochromatic theme with neutral grays and subtle accents
- * - 'colorful': A vibrant theme with saturated colors and stronger contrasts
+ * Derived from {@link SkThemeNameMap} — augment that interface to add custom themes.
  */
-export type SkThemeName = 'greyscale' | 'colorful';
+export type SkThemeName = keyof SkThemeNameMap;
 export interface SkThemeComponentProps {
     /**
      * The active theme name that controls the color scheme for all child components.

package/dist/sleekspace-ui.css

@@ -2096,8 +2096,8 @@
     --sk-button-disabled-opacity: var(--sk-opacity-disabled);
     --sk-button-loading-opacity: var(--sk-opacity-loading);
     --sk-button-outline-bg: rgba(5, 5, 5, 0.15);
-    --sk-button-subtle-opacity: var(--sk-opacity-subtle);
-    --sk-button-subtle-opacity-hover: var(--sk-opacity-subtle-hover);
+    --sk-button-subtle-opacity: 0.35;
+    --sk-button-subtle-opacity-hover: 0.65;
     --sk-button-subtle-border-opacity: var(--sk-opacity-subtle-border);
     --sk-button-subtle-border-opacity-hover: var(--sk-opacity-subtle-border-hover);
     --sk-button-glow-size: 8px;
@@ -3051,9 +3051,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neutral:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neutral:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3070,9 +3069,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-primary:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-primary:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3089,9 +3087,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-accent:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-accent:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3108,9 +3105,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-info:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-info:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3127,9 +3123,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-success:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-success:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3146,9 +3141,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-warning:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-warning:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3165,9 +3159,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-danger:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-danger:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3184,9 +3177,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-boulder:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-boulder:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3203,9 +3195,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-blue:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-blue:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3222,9 +3213,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-light-blue:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-light-blue:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3241,9 +3231,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-orange:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-orange:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3260,9 +3249,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-purple:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-purple:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3279,9 +3267,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-green:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-green:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3298,9 +3285,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-mint:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-mint:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3317,9 +3303,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-pink:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-pink:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3336,9 +3321,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-yellow:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-yellow:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3355,9 +3339,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-red:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-red:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3365,6 +3348,9 @@
     background-color: var(--sk-button-bg);
     color: var(--sk-button-text);
   }
+  .sk-button.sk-subtle:disabled, .sk-button.sk-subtle.sk-loading {
+    background-color: oklch(from var(--sk-button-bg) l c h/0.45);
+  }
   .sk-button.sk-subtle.sk-neutral {
     --sk-button-border-color: oklch(
         from color-mix(in oklch, var(--sk-button-border-base), white 50%)
@@ -4081,14 +4067,38 @@
   .sk-button.sk-loading .sk-button-content {
     opacity: var(--sk-button-loading-opacity);
   }
-  .sk-button.sk-pressed.sk-outline, .sk-button.sk-pressed.sk-ghost {
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
-  }
   .sk-button.sk-pressed.sk-solid {
-    background-color: var(--sk-button-bg-active);
+    --sk-button-border-color: var(--sk-button-border-hover);
+    background-color: var(--sk-button-bg-hover);
+    color: var(--sk-button-text);
+  }
+  .sk-button.sk-pressed.sk-solid:hover:not(:disabled) {
+    --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+    background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
+  }
+  .sk-button.sk-pressed.sk-outline {
+    --sk-button-border-color: var(--sk-button-border-hover);
+    background-color: var(--sk-button-bg);
+    color: var(--sk-button-text);
   }
   .sk-button.sk-pressed.sk-subtle {
+    --sk-button-border-color: transparent;
     background-color: var(--sk-button-bg);
+    color: var(--sk-button-text);
+  }
+  .sk-button.sk-pressed.sk-subtle:hover:not(:disabled) {
+    --sk-button-border-color: transparent;
+    --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+    background-color: var(--sk-button-bg-hover);
+  }
+  .sk-button.sk-pressed.sk-ghost {
+    --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+    border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+    background-color: var(--sk-button-outline-bg);
+    color: var(--sk-button-text);
+  }
+  .sk-button.sk-pressed.sk-link {
+    color: var(--sk-button-text);
   }
   .sk-button .sk-button-loader {
     position: absolute;

package/docs/guides/design-tokens/advanced.md

@@ -31,7 +31,12 @@ Add new color primitives in `_foundation-colors.scss`:
 1. Create `src/styles/themes/_mytheme.scss`
 2. Define all 7 semantic kinds with the `[data-scheme="mytheme"]` selector
 3. Import in `themes/index.scss`: `@forward 'mytheme';`
-4. Add to TypeScript types: `export type SkThemeName = 'greyscale' | 'colorful' | 'mytheme';`
+4. Register the TypeScript type via module augmentation:
+   ```ts
+   declare module '@skewedaspect/sleekspace-ui' {
+       interface SkThemeNameMap { mytheme : true; }
+   }
+   ```
 5. Use: `<SkTheme theme="mytheme">`
 
 ### Component Token Overrides

package/docs/guides/theming.md

@@ -265,7 +265,17 @@ Apply it with `SkTheme` or `SkPage`:
 </SkPage>
 ```
 
-> **TypeScript note:** The `theme` prop is typed as `SkThemeName` which is `'greyscale' | 'colorful'`. For custom theme names, cast the value: `:theme="'ocean' as any"`. If you're building a library that adds themes, you can augment the type via module declaration.
+> **TypeScript note:** To get type-safe autocomplete for custom theme names, augment the `SkThemeNameMap` interface:
+>
+> ```ts
+> declare module '@skewedaspect/sleekspace-ui' {
+>     interface SkThemeNameMap {
+>         ocean : true;
+>     }
+> }
+> ```
+>
+> This registers `'ocean'` as a valid `SkThemeName` throughout your project.
 
 ### Using Foundation Colors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system",
   "type": "module",
   "main": "dist/sleekspace-ui.umd.js",

package/src/components/Theme/types.ts

@@ -2,12 +2,29 @@
 // Theme Component Types
 //----------------------------------------------------------------------------------------------------------------------
 
+/**
+ * Registry of available theme names. Augment this interface to register custom themes:
+ *
+ * ```ts
+ * declare module '@skewedaspect/sleekspace-ui' {
+ *     interface SkThemeNameMap {
+ *         ocean : true;
+ *         midnight : true;
+ *     }
+ * }
+ * ```
+ */
+export interface SkThemeNameMap
+{
+    greyscale : true;
+    colorful : true;
+}
+
 /**
  * Available theme names that control the overall color scheme of the application.
- * - 'greyscale': A monochromatic theme with neutral grays and subtle accents
- * - 'colorful': A vibrant theme with saturated colors and stronger contrasts
+ * Derived from {@link SkThemeNameMap} — augment that interface to add custom themes.
  */
-export type SkThemeName = 'greyscale' | 'colorful';
+export type SkThemeName = keyof SkThemeNameMap;
 
 //----------------------------------------------------------------------------------------------------------------------
 

package/src/styles/components/_button.scss

@@ -103,10 +103,10 @@
     --sk-button-outline-bg: rgba(5, 5, 5, 0.15);
 
     /// Subtle variant background opacity (references global foundation token)
-    --sk-button-subtle-opacity: var(--sk-opacity-subtle);
+    --sk-button-subtle-opacity: 0.35;
 
     /// Subtle variant hover background opacity (references global foundation token)
-    --sk-button-subtle-opacity-hover: var(--sk-opacity-subtle-hover);
+    --sk-button-subtle-opacity-hover: 0.65;
 
     /// Subtle variant border opacity (references global foundation token)
     --sk-button-subtle-border-opacity: var(--sk-opacity-subtle-border);
@@ -260,10 +260,9 @@
 
         &:hover:not(:disabled)
         {
-            --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
             --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
 
-            background-color: oklch(from var(--sk-button-bg) l c h / var(--sk-button-subtle-opacity-hover));
+            background-color: var(--sk-button-bg-hover);
         }
 
         &:active:not(:disabled)
@@ -534,6 +533,12 @@
             @include button-subtle-kind($kind);
         }
 
+        &:disabled,
+        &.sk-loading
+        {
+            background-color: oklch(from var(--sk-button-bg) l c h / 0.45);
+        }
+
         // Special case: neutral text and border are lighter (halfway to white) for better differentiation
         &.sk-neutral
         {
@@ -624,20 +629,51 @@
 
     &.sk-pressed
     {
-        &.sk-outline,
-        &.sk-ghost
+        &.sk-solid
         {
-            background-color: oklch(from var(--sk-button-bg) l c h / var(--sk-button-subtle-opacity));
+            --sk-button-border-color: var(--sk-button-border-hover);
+            background-color: var(--sk-button-bg-hover);
+            color: var(--sk-button-text);
+
+            &:hover:not(:disabled)
+            {
+                --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+                background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
+            }
         }
 
-        &.sk-solid
+        &.sk-outline
         {
-            background-color: var(--sk-button-bg-active);
+            --sk-button-border-color: var(--sk-button-border-hover);
+            background-color: var(--sk-button-bg);
+            color: var(--sk-button-text);
         }
 
         &.sk-subtle
         {
+            --sk-button-border-color: transparent;
             background-color: var(--sk-button-bg);
+            color: var(--sk-button-text);
+
+            &:hover:not(:disabled)
+            {
+                --sk-button-border-color: transparent;
+                --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+                background-color: var(--sk-button-bg-hover);
+            }
+        }
+
+        &.sk-ghost
+        {
+            --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+            border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+            background-color: var(--sk-button-outline-bg);
+            color: var(--sk-button-text);
+        }
+
+        &.sk-link
+        {
+            color: var(--sk-button-text);
         }
     }
 

package/src/styles/themes/README.md

@@ -83,10 +83,14 @@ To create a new theme:
 @forward 'mytheme';  // Add your theme
 ```
 
-4. **Add the TypeScript type** in `src/components/Theme/types.ts`:
+4. **Register the TypeScript type** via module augmentation (e.g. in a `themes.d.ts` or your app's entry file):
 
 ```typescript
-export type SkThemeName = 'greyscale' | 'colorful' | 'mytheme';
+declare module '@skewedaspect/sleekspace-ui' {
+    interface SkThemeNameMap {
+        mytheme : true;
+    }
+}
 ```
 
 5. **Use your theme**:

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",