@skewedaspect/sleekspace-ui 0.4.0 → 0.5.1

package/dist/sleekspace-ui.umd.js

@@ -15256,7 +15256,7 @@ Defaulting to \`null\`.`);
     stroke: "currentColor",
     "stroke-width": "2"
   };
-  const _hoisted_6$3 = { class: "sk-alert-content" };
+  const _hoisted_6$4 = { class: "sk-alert-content" };
   const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     __name: "SkAlert",
     props: {
@@ -15354,7 +15354,7 @@ Defaulting to \`null\`.`);
               ])])) : vue.createCommentVNode("", true)
             ])
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_6$3, [
+          vue.createElementVNode("div", _hoisted_6$4, [
             vue.renderSlot(_ctx.$slots, "default")
           ])
         ], 6);
@@ -17027,17 +17027,38 @@ Defaulting to \`null\`.`);
     }
   });
   const SkNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-b589687f"]]);
-  const _hoisted_1$e = {
+  const ThemeSymbol = Symbol("SkTheme");
+  function provideTheme(initialTheme = "greyscale") {
+    const currentTheme = vue.ref(initialTheme);
+    const setTheme = (theme) => {
+      currentTheme.value = theme;
+    };
+    const context2 = {
+      currentTheme,
+      setTheme
+    };
+    vue.provide(ThemeSymbol, context2);
+    return context2;
+  }
+  function useTheme() {
+    const context2 = vue.inject(ThemeSymbol);
+    if (!context2) {
+      throw new Error("useTheme must be called within an SkTheme component");
+    }
+    return context2;
+  }
+  const _hoisted_1$e = ["data-scheme"];
+  const _hoisted_2$8 = {
     key: 0,
     class: "sk-page-header"
   };
-  const _hoisted_2$8 = { class: "sk-page-main" };
-  const _hoisted_3$6 = {
+  const _hoisted_3$6 = { class: "sk-page-main" };
+  const _hoisted_4$5 = {
     key: 0,
     class: "sk-page-sidebar"
   };
-  const _hoisted_4$5 = { class: "sk-page-content" };
-  const _hoisted_5$3 = {
+  const _hoisted_5$3 = { class: "sk-page-content" };
+  const _hoisted_6$3 = {
     key: 1,
     class: "sk-page-footer"
   };
@@ -17047,7 +17068,8 @@ Defaulting to \`null\`.`);
       sidebarPosition: { default: "left" },
       fixedHeader: { type: Boolean, default: false },
       fixedFooter: { type: Boolean, default: false },
-      sidebarWidth: { default: void 0 }
+      sidebarWidth: { default: void 0 },
+      theme: { default: void 0 }
     },
     setup(__props) {
       const props = __props;
@@ -17065,30 +17087,40 @@ Defaulting to \`null\`.`);
           "--sk-page-sidebar-width": props.sidebarWidth
         };
       });
+      if (props.theme) {
+        const { currentTheme, setTheme } = provideTheme(props.theme);
+        vue.provide("sk-theme", currentTheme);
+        vue.watch(() => props.theme, (newTheme) => {
+          if (newTheme) {
+            setTheme(newTheme);
+          }
+        });
+      }
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(classes.value),
-          style: vue.normalizeStyle(customStyles.value)
+          style: vue.normalizeStyle(customStyles.value),
+          "data-scheme": __props.theme
         }, [
-          _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$e, [
+          _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$8, [
             vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_2$8, [
-            _ctx.$slots.sidebar ? (vue.openBlock(), vue.createElementBlock("aside", _hoisted_3$6, [
+          vue.createElementVNode("div", _hoisted_3$6, [
+            _ctx.$slots.sidebar ? (vue.openBlock(), vue.createElementBlock("aside", _hoisted_4$5, [
               vue.renderSlot(_ctx.$slots, "sidebar", {}, void 0, true)
             ])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("main", _hoisted_4$5, [
+            vue.createElementVNode("main", _hoisted_5$3, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ])
           ]),
-          _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_5$3, [
+          _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_6$3, [
             vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
           ])) : vue.createCommentVNode("", true)
-        ], 6);
+        ], 14, _hoisted_1$e);
       };
     }
   });
-  const SkPage = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-0d313ffc"]]);
+  const SkPage = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ad672949"]]);
   const _hoisted_1$d = ["disabled", "aria-label", "aria-current"];
   const _hoisted_2$7 = { key: 0 };
   const _hoisted_3$5 = { key: 1 };
@@ -18896,26 +18928,6 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const ThemeSymbol = Symbol("SkTheme");
-  function provideTheme(initialTheme = "greyscale") {
-    const currentTheme = vue.ref(initialTheme);
-    const setTheme = (theme) => {
-      currentTheme.value = theme;
-    };
-    const context2 = {
-      currentTheme,
-      setTheme
-    };
-    vue.provide(ThemeSymbol, context2);
-    return context2;
-  }
-  function useTheme() {
-    const context2 = vue.inject(ThemeSymbol);
-    if (!context2) {
-      throw new Error("useTheme must be called within an SkTheme component");
-    }
-    return context2;
-  }
   const _hoisted_1 = ["data-scheme"];
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     __name: "SkTheme",

package/dist/tokens.css

@@ -158,6 +158,9 @@
   --sk-opacity-medium: 0.40;
   --sk-opacity-strong: 0.60;
   --sk-opacity-opaque: 1;
+  /* Semantic opacity aliases */
+  --sk-opacity-disabled: 0.5;
+  --sk-opacity-loading: 0.6;
   /* ===================================================================
    * Color Mixing Percentages
    * Tokenized mixing amounts for color-mix() function
@@ -351,6 +354,12 @@
   --sk-transition-easing-ease-in: ease-in;
   --sk-transition-easing-ease-out: ease-out;
   --sk-transition-easing-ease-in-out: ease-in-out;
+  /* ===================================================================
+   * Default Aliases
+   * Generic names that resolve to the most common values
+   * =================================================================== */
+  --sk-transition-duration-base: var(--sk-transition-duration-normal);
+  --sk-transition-easing: var(--sk-transition-easing-ease-out);
   /* ===================================================================
    * Common Transition Combinations
    * Convenience tokens for frequently used transitions
@@ -652,6 +661,10 @@
  *
  * Background and text colors for surfaces and general use.
  * These provide a consistent color system independent of component kinds.
+ *
+ * Defaults are defined on :root as fallbacks. Themes can override any of these
+ * via [data-scheme] selectors. The [data-scheme] rule also applies background
+ * and text color so that any themed element gets the correct surface treatment.
  */
 :root {
   /* ===================================================================
@@ -677,6 +690,16 @@
   --sk-border-subtle: var(--sk-color-gray-80); /* Subtle borders/dividers */
 }
 
+/**
+ * Apply text color to any themed element so descendants inherit the correct
+ * color without needing to set it themselves. Background is intentionally NOT
+ * set here — page-level containers like SkPage handle their own background
+ * via the surface tokens.
+ */
+[data-scheme] {
+  color: var(--sk-text-primary);
+}
+
 /**
  * Semantic Tokens - Interactive
  *

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/design-tokens/foundation-other.md

@@ -33,9 +33,22 @@ Beyond colors, foundation tokens cover spacing, borders, typography, transitions
 --sk-font-size-lg: 1.125rem
 --sk-font-size-xl: 1.25rem
 
-/* Transitions */
+/* Transition Durations */
 --sk-transition-duration-instant: 0ms
 --sk-transition-duration-fast: 150ms
---sk-transition-duration-normal: 200ms
---sk-transition-duration-slow: 300ms
+--sk-transition-duration-normal: 250ms
+--sk-transition-duration-slow: 350ms
+--sk-transition-duration-slower: 500ms
+
+/* Transition Easing */
+--sk-transition-easing-linear: linear
+--sk-transition-easing-ease: ease
+--sk-transition-easing-ease-in: ease-in
+--sk-transition-easing-ease-out: ease-out
+--sk-transition-easing-ease-in-out: ease-in-out
+
+/* Common Transition Combinations */
+--sk-transition-fast: all 150ms ease-out
+--sk-transition-normal: all 250ms ease-out
+--sk-transition-slow: all 350ms ease-out
 ```

package/docs/guides/design-tokens/semantic-states.md

@@ -24,19 +24,32 @@ Hover and active states are automatically calculated using CSS `color-mix()`:
 
 ### Surface & Text Semantics
 
-Background and text colors for layouts and content, separate from interactive component colors.
+Background and text colors for layouts and content, separate from interactive component colors. Any element with a `data-scheme` attribute (set by `SkTheme` or `SkPage`'s `theme` prop) automatically inherits `color: var(--sk-text-primary)`. Page-level containers like `SkPage` set their own `background: var(--sk-surface-base)`.
 
 ```css
 /* Surface Colors */
---sk-surface-base: var(--sk-color-gray-10)
---sk-surface-raised: var(--sk-color-gray-05)
---sk-surface-overlay: var(--sk-color-gray-20)
+--sk-surface-base:    var(--sk-color-gray-90)   /* Main background */
+--sk-surface-raised:  var(--sk-color-gray-95)   /* Elevated surfaces (cards, panels) */
+--sk-surface-overlay: var(--sk-color-gray-80)   /* Overlays (modals, dropdowns) */
 
 /* Text Colors */
---sk-text-primary: var(--sk-color-gray-95)
---sk-text-secondary: var(--sk-color-gray-70)
---sk-text-tertiary: var(--sk-color-gray-50)
---sk-text-disabled: var(--sk-color-gray-40)
+--sk-text-primary:   oklch(1 0 0)              /* Primary body text (white) */
+--sk-text-secondary: var(--sk-color-gray-30)   /* Secondary/muted text */
+--sk-text-tertiary:  var(--sk-color-gray-50)   /* Tertiary/placeholder text */
+--sk-text-disabled:  var(--sk-color-gray-60)   /* Disabled text */
+
+/* Border Colors */
+--sk-border-normal: var(--sk-color-gray-70)    /* Standard borders */
+--sk-border-subtle: var(--sk-color-gray-80)    /* Subtle borders/dividers */
+```
+
+Custom themes can override any of these surface tokens to change the overall look:
+
+```css
+[data-scheme='my-theme'] {
+    --sk-surface-base: var(--sk-color-purple-90);
+    --sk-text-primary: oklch(0.95 0.02 300);
+}
 ```
 
 ### Interactive State Semantics
@@ -45,11 +58,13 @@ Unified focus and selection states across all interactive components.
 
 ```css
 /* Focus Ring */
---sk-focus-ring-color: var(--sk-primary-base)
---sk-focus-ring-width: var(--sk-border-width-normal)
+--sk-focus-ring-color:  var(--sk-primary-base)
+--sk-focus-ring-width:  var(--sk-border-width-normal)
 --sk-focus-ring-offset: 2px
+--sk-focus-ring-style:  var(--sk-border-style-solid)
+--sk-focus-ring:        var(--sk-focus-ring-width) var(--sk-focus-ring-style) var(--sk-focus-ring-color)
 
 /* Selection */
 --sk-selection-background: var(--sk-primary-base)
---sk-selection-text: var(--sk-primary-text)
+--sk-selection-text:       var(--sk-primary-text)
 ```

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

@@ -4,7 +4,7 @@ section: themes
 
 ## Themes
 
-Themes map foundation colors to semantic kinds. Each theme is defined as a CSS attribute selector that overrides semantic tokens.
+Themes map foundation colors to semantic kinds. Each theme is defined as a CSS attribute selector that overrides semantic tokens. `SkPage` automatically applies the theme's surface background; all themed elements inherit the correct text color.
 
 ### Available Themes
 
@@ -24,15 +24,26 @@ Themes are defined in `src/styles/themes/`. Each theme file exports a `[data-sch
     --sk-primary-base: var(--sk-color-mint-50);
     --sk-accent-base: var(--sk-color-orange-50);
     /* ... define all 7 semantic kinds */
+
+    /* Optional: override surface tokens */
+    --sk-surface-base: var(--sk-color-purple-90);
 }
 ```
 
 ### Using Themes
 
-Wrap your app in the `SkTheme` component:
+Use `SkPage` with a `theme` prop (recommended) or wrap content in `SkTheme`:
 
 ```vue
+<!-- Recommended: SkPage acts as theme provider -->
+<SkPage theme="colorful">
+    <YourApp />
+</SkPage>
+
+<!-- Alternative: standalone theme wrapper -->
 <SkTheme theme="greyscale">
     <YourApp />
 </SkTheme>
 ```
+
+See the [Theming Guide](/docs/guides/theming) for creating custom themes.

package/docs/guides/getting-started.md

@@ -10,7 +10,7 @@ SleekSpace UI is a Vue 3 component library with a cyberpunk aesthetic. It provid
 
 ### Minimal Example
 
-The only requirement is wrapping your app in `SkTheme`. Here is the simplest setup:
+The only requirement is establishing a theme context. The simplest way is with `SkTheme`:
 
 ```vue
 <template>
@@ -26,49 +26,50 @@ The only requirement is wrapping your app in `SkTheme`. Here is the simplest set
 </template>
 ```
 
-That's it. You can start using any SleekSpace component inside `SkTheme`.
+That's it. You can start using any SleekSpace component inside the theme context. If you're using `SkPage`, you can skip `SkTheme` entirely — see the next section.
 
 ### Recommended Setup with SkPage
 
-For most applications, you will want a proper page layout with a header, sidebar, and content area. `SkPage` provides this structure:
+For most applications, you will want a proper page layout with a header, sidebar, and content area. `SkPage` provides this structure and can act as a theme provider directly via its `theme` prop — no `SkTheme` wrapper needed:
 
 ```vue
 <template>
-  <SkTheme theme="colorful">
-    <SkPage fixed-header>
-      <template #header>
-        <SkNavBar kind="primary">
-          <template #brand>My App</template>
-        </SkNavBar>
-      </template>
-
-      <template #sidebar>
-        <SkSidebar>
-          <SkSidebarItem href="/">Home</SkSidebarItem>
-          <SkSidebarItem href="/settings">Settings</SkSidebarItem>
-        </SkSidebar>
-      </template>
-
-      <SkPanel kind="neutral">
-        <h2>Welcome to SleekSpace UI</h2>
-        <SkButton kind="accent" variant="solid">
-          Get Started
-        </SkButton>
-      </SkPanel>
-
-      <template #footer>
-        <p>Footer content goes here</p>
-      </template>
-    </SkPage>
-  </SkTheme>
+  <SkPage theme="colorful" fixed-header>
+    <template #header>
+      <SkNavBar kind="primary">
+        <template #brand>My App</template>
+      </SkNavBar>
+    </template>
+
+    <template #sidebar>
+      <SkSidebar>
+        <SkSidebarItem href="/">Home</SkSidebarItem>
+        <SkSidebarItem href="/settings">Settings</SkSidebarItem>
+      </SkSidebar>
+    </template>
+
+    <SkPanel kind="neutral">
+      <h2>Welcome to SleekSpace UI</h2>
+      <SkButton kind="accent" variant="solid">
+        Get Started
+      </SkButton>
+    </SkPanel>
+
+    <template #footer>
+      <p>Footer content goes here</p>
+    </template>
+  </SkPage>
 </template>
 ```
 
+> **Note:** When `theme` is provided, `SkPage` sets `data-scheme` on its root element and provides theme context to all descendants — including portal components like dropdowns and modals. If you omit the `theme` prop, `SkPage` behaves as a pure layout component and you'll need an `SkTheme` wrapper instead.
+
 ### Why Use SkPage?
 
 `SkPage` is optional, but most applications will benefit from it:
 
 - **Full page layout structure** -- Provides header, sidebar, content, and footer regions in a single component.
+- **Built-in theme provider** -- Pass a `theme` prop to eliminate the `SkTheme` wrapper entirely.
 - **Semantic HTML** -- Uses `<main>`, `<header>`, `<footer>`, and `<aside>` elements for better accessibility and SEO.
 - **Fixed headers and footers** -- Keep navigation visible while the content area scrolls independently.
 - **Flexible slots** -- All slots are optional. Use just a header, just a sidebar, or any combination. The layout adapts automatically.