@skewedaspect/sleekspace-ui 0.4.0 → 0.5.0

package/dist/components/Page/SkPage.vue.d.ts

@@ -1,3 +1,4 @@
+import { SkThemeName } from '../Theme/types';
 import { SkPageSidebarPosition } from './types';
 export interface SkPageComponentProps {
     /**
@@ -27,6 +28,13 @@ export interface SkPageComponentProps {
      * Only applies when the sidebar slot is provided.
      */
     sidebarWidth?: string;
+    /**
+     * Optional theme name. When provided, SkPage acts as a theme provider — setting
+     * `data-scheme` on the root element and providing theme context for descendant
+     * components (including portal components like dropdowns and modals).
+     * When omitted, SkPage has no theme behavior.
+     */
+    theme?: SkThemeName;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -41,6 +49,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkPageComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkPageComponentProps> & Readonly<{}>, {
+    theme: SkThemeName;
     sidebarPosition: SkPageSidebarPosition;
     fixedHeader: boolean;
     fixedFooter: boolean;

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

@@ -1,3 +1,4 @@
+import { SkThemeName } from '../Theme/types';
 /** Sidebar position */
 export type SkPageSidebarPosition = 'left' | 'right';
 /** Page props interface */
@@ -10,4 +11,6 @@ export interface SkPageProps {
     fixedFooter?: boolean;
     /** Custom sidebar width */
     sidebarWidth?: string;
+    /** Optional theme name — when provided, SkPage acts as a theme provider */
+    theme?: SkThemeName;
 }

package/dist/sleekspace-ui.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
  *
@@ -1215,7 +1238,7 @@
   body {
     margin: 0;
     min-height: 100svh;
-    color: var(--sk-neutral-fg);
+    color: var(--sk-text-primary);
   }
   img,
   svg,
@@ -1228,8 +1251,8 @@
     font: inherit;
   }
   :focus-visible {
-    outline: var(--sk-focus-outline-width) solid currentColor;
-    outline-offset: var(--sk-focus-outline-offset);
+    outline: var(--sk-focus-ring-width) solid currentColor;
+    outline-offset: var(--sk-focus-ring-offset);
   }
   h1,
   h2,
@@ -1390,7 +1413,7 @@
     min-height: var(--sk-scrollbar-thumb-min-size);
     min-width: var(--sk-scrollbar-thumb-min-size);
     /* Smooth transitions for interactive states */
-    transition: background-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard), border-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard);
+    transition: background-color var(--sk-transition-duration-fast) var(--sk-transition-easing-ease-out), border-color var(--sk-transition-duration-fast) var(--sk-transition-easing-ease-out);
   }
   /* Hover State */
   *::-webkit-scrollbar-thumb:hover {
@@ -6252,8 +6275,8 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    background: var(--sk-background);
-    color: var(--sk-foreground);
+    background: var(--sk-surface-base);
+    color: var(--sk-text-primary);
   }
   .sk-page .sk-page-header {
     flex-shrink: 0;

package/dist/sleekspace-ui.es.js

@@ -15237,7 +15237,7 @@ const _hoisted_5$6 = {
   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__ */ defineComponent({
   __name: "SkAlert",
   props: {
@@ -15335,7 +15335,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             ])])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_6$3, [
+        createElementVNode("div", _hoisted_6$4, [
           renderSlot(_ctx.$slots, "default")
         ])
       ], 6);
@@ -17008,17 +17008,38 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 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 = ref(initialTheme);
+  const setTheme = (theme) => {
+    currentTheme.value = theme;
+  };
+  const context2 = {
+    currentTheme,
+    setTheme
+  };
+  provide(ThemeSymbol, context2);
+  return context2;
+}
+function useTheme() {
+  const context2 = 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"
 };
@@ -17028,7 +17049,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     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;
@@ -17046,30 +17068,40 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         "--sk-page-sidebar-width": props.sidebarWidth
       };
     });
+    if (props.theme) {
+      const { currentTheme, setTheme } = provideTheme(props.theme);
+      provide("sk-theme", currentTheme);
+      watch(() => props.theme, (newTheme) => {
+        if (newTheme) {
+          setTheme(newTheme);
+        }
+      });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(classes.value),
-        style: normalizeStyle(customStyles.value)
+        style: normalizeStyle(customStyles.value),
+        "data-scheme": __props.theme
       }, [
-        _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1$e, [
+        _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$8, [
           renderSlot(_ctx.$slots, "header", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$8, [
-          _ctx.$slots.sidebar ? (openBlock(), createElementBlock("aside", _hoisted_3$6, [
+        createElementVNode("div", _hoisted_3$6, [
+          _ctx.$slots.sidebar ? (openBlock(), createElementBlock("aside", _hoisted_4$5, [
             renderSlot(_ctx.$slots, "sidebar", {}, void 0, true)
           ])) : createCommentVNode("", true),
-          createElementVNode("main", _hoisted_4$5, [
+          createElementVNode("main", _hoisted_5$3, [
             renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ])
         ]),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5$3, [
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_6$3, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : 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 };
@@ -18877,26 +18909,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ThemeSymbol = Symbol("SkTheme");
-function provideTheme(initialTheme = "greyscale") {
-  const currentTheme = ref(initialTheme);
-  const setTheme = (theme) => {
-    currentTheme.value = theme;
-  };
-  const context2 = {
-    currentTheme,
-    setTheme
-  };
-  provide(ThemeSymbol, context2);
-  return context2;
-}
-function useTheme() {
-  const context2 = 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__ */ defineComponent({
   __name: "SkTheme",

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/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.

package/docs/guides/theming.md

@@ -42,9 +42,29 @@ const { currentTheme, setTheme } = useTheme();
 </template>
 ```
 
+## SkPage as Theme Provider
+
+If your app already uses `SkPage`, you can skip the `SkTheme` wrapper and pass a `theme` prop directly:
+
+```vue
+<template>
+  <SkPage theme="colorful" fixed-header>
+    <template #header>
+      <SkNavBar kind="primary">
+        <template #brand>My App</template>
+      </SkNavBar>
+    </template>
+
+    <SkPanel kind="accent">Fully themed — no SkTheme wrapper needed.</SkPanel>
+  </SkPage>
+</template>
+```
+
+This establishes the same theme context that `SkTheme` does (including portal component support). The `useTheme` composable works identically inside a themed `SkPage`.
+
 ## How It Works
 
-SkTheme sets a `data-scheme` attribute on its wrapper element. CSS rules scoped to each scheme override semantic token values:
+SkTheme (or SkPage with a `theme` prop) sets a `data-scheme` attribute on its wrapper element. This cascades the correct text color (`--sk-text-primary`) to all descendants. SkPage also sets the page background (`--sk-surface-base`). CSS rules scoped to each scheme override semantic token values:
 
 ```css
 [data-scheme="greyscale"] {
@@ -60,30 +80,264 @@ All components reference these semantic tokens, so switching the scheme instantl
 
 ## Creating Custom Themes
 
-Define a custom theme by providing CSS custom property overrides on a new `data-scheme` value:
+Themes are pure CSS. You define a `[data-scheme="name"]` block with 35 custom properties (7 semantic kinds × 5 tokens each) and you're done. No library modifications, no build steps — just a stylesheet.
+
+> See the [SkTheme component page](/components/theme) for live demos of custom themes compared side-by-side with the built-in ones.
+
+### Token Structure
+
+Each of the 7 semantic kinds requires 5 tokens:
+
+| Token | Purpose |
+|-------|---------|
+| `--sk-{kind}-base` | Main background color |
+| `--sk-{kind}-hover` | Hover state background |
+| `--sk-{kind}-active` | Active/pressed state background |
+| `--sk-{kind}-text` | Text color on the base background |
+| `--sk-{kind}-text-contrast` | Alternative text for subtle/ghost variants |
+
+The 7 kinds are: `neutral`, `primary`, `accent`, `success`, `warning`, `danger`, `info`.
+
+### Surface Tokens (Optional)
+
+Themes can also override the page surface tokens. These have sensible defaults (dark gray background, white text) so you only need to override them if your theme wants a different page feel:
+
+| Token | Default | Purpose |
+|-------|---------|---------|
+| `--sk-surface-base` | `--sk-color-gray-90` | Page/app background |
+| `--sk-surface-raised` | `--sk-color-gray-95` | Elevated surfaces (cards, panels) |
+| `--sk-surface-overlay` | `--sk-color-gray-80` | Overlays (modals, dropdowns) |
+| `--sk-text-primary` | white | Primary body text |
+
+`SkPage` applies `--sk-surface-base` as its background automatically. If you use `SkTheme` without `SkPage`, set your body background to `var(--sk-surface-base)` for the dark page feel.
+
+### Deriving Hover and Active States
+
+You don't need to hand-pick hover/active colors. The `color-mix()` function lightens the base color automatically, which is how the built-in themes do it:
 
 ```css
+--sk-primary-hover: color-mix(
+  in oklch,
+  var(--sk-primary-base),
+  var(--sk-color-gray-10) var(--sk-mix-amount-moderate)  /* 15% lighter */
+);
+--sk-primary-active: color-mix(
+  in oklch,
+  var(--sk-primary-base),
+  var(--sk-color-gray-10) var(--sk-mix-amount-strong)    /* 20% lighter */
+);
+```
+
+This pattern references the `--sk-color-gray-10` foundation token (a light gray) and mixes it in at either 15% (`moderate`) or 20% (`strong`). You can also use hardcoded OKLCH values if you prefer full control.
+
+### Complete Example: "Ocean" Theme
+
+Here's a full theme definition using OKLCH values. This theme uses deep blues for neutral elements, teal for primary, coral for accent, and keeps the standard semantic colors for success/warning/danger/info:
+
+```css
+/* ocean-theme.css — import this after SleekSpace UI styles */
+
 [data-scheme="ocean"] {
-  --sk-primary-base: oklch(0.55 0.15 230);
+  /* Neutral — deep slate blue */
+  --sk-neutral-base: oklch(0.35 0.04 250);
+  --sk-neutral-hover: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neutral-active: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neutral-text: oklch(1 0 0);
+  --sk-neutral-text-contrast: oklch(0.15 0.02 250);
+
+  /* Primary — bright teal */
+  --sk-primary-base: oklch(0.72 0.15 195);
+  --sk-primary-hover: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-primary-active: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
   --sk-primary-text: oklch(1 0 0);
-  --sk-primary-hover: oklch(0.45 0.15 230);
+  --sk-primary-text-contrast: oklch(0.15 0.02 195);
 
-  --sk-accent-base: oklch(0.6 0.2 180);
+  /* Accent — warm coral */
+  --sk-accent-base: oklch(0.68 0.18 25);
+  --sk-accent-hover: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-accent-active: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
   --sk-accent-text: oklch(1 0 0);
-  --sk-accent-hover: oklch(0.5 0.2 180);
+  --sk-accent-text-contrast: oklch(0.15 0.02 25);
 
-  /* Define all 7 semantic kinds: neutral, primary, accent, info, success, warning, danger */
+  /* Success — emerald green */
+  --sk-success-base: oklch(0.70 0.18 155);
+  --sk-success-hover: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-success-active: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-success-text: oklch(1 0 0);
+  --sk-success-text-contrast: oklch(0.15 0.02 155);
+
+  /* Warning — amber */
+  --sk-warning-base: oklch(0.85 0.16 85);
+  --sk-warning-hover: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-warning-active: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-warning-text: oklch(1 0 0);
+  --sk-warning-text-contrast: oklch(0.15 0.02 85);
+
+  /* Danger — crimson red */
+  --sk-danger-base: oklch(0.60 0.22 25);
+  --sk-danger-hover: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-danger-active: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-danger-text: oklch(1 0 0);
+  --sk-danger-text-contrast: oklch(0.15 0.02 25);
+
+  /* Info — sky blue */
+  --sk-info-base: oklch(0.75 0.12 230);
+  --sk-info-hover: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-info-active: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-info-text: oklch(1 0 0);
+  --sk-info-text-contrast: oklch(0.15 0.02 230);
 }
 ```
 
-Then use it with the theme component:
+### Complete Example: "Cyberpunk" Theme
+
+Neon pink primary, electric cyan accent, deep violet neutrals, and screaming neon green for success. High chroma across the board.
+
+```css
+/* cyberpunk-theme.css */
+
+[data-scheme="cyberpunk"] {
+  /* Neutral — deep violet */
+  --sk-neutral-base: oklch(0.25 0.08 300);
+  --sk-neutral-hover: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neutral-active: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neutral-text: oklch(1 0 0);
+  --sk-neutral-text-contrast: oklch(0.12 0.04 300);
+
+  /* Primary — hot pink */
+  --sk-primary-base: oklch(0.65 0.27 355);
+  --sk-primary-hover: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-primary-active: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-primary-text: oklch(1 0 0);
+  --sk-primary-text-contrast: oklch(0.12 0.04 355);
+
+  /* Accent — electric cyan */
+  --sk-accent-base: oklch(0.78 0.15 195);
+  --sk-accent-hover: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-accent-active: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-accent-text: oklch(1 0 0);
+  --sk-accent-text-contrast: oklch(0.12 0.04 195);
+
+  /* Success — neon green */
+  --sk-success-base: oklch(0.82 0.25 145);
+  --sk-success-hover: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-success-active: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-success-text: oklch(1 0 0);
+  --sk-success-text-contrast: oklch(0.12 0.04 145);
+
+  /* Warning — electric yellow */
+  --sk-warning-base: oklch(0.90 0.18 100);
+  --sk-warning-hover: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-warning-active: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-warning-text: oklch(1 0 0);
+  --sk-warning-text-contrast: oklch(0.12 0.04 100);
+
+  /* Danger — hot red */
+  --sk-danger-base: oklch(0.62 0.25 30);
+  --sk-danger-hover: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-danger-active: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-danger-text: oklch(1 0 0);
+  --sk-danger-text-contrast: oklch(0.12 0.04 30);
+
+  /* Info — neon purple */
+  --sk-info-base: oklch(0.60 0.25 305);
+  --sk-info-hover: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-info-active: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-info-text: oklch(1 0 0);
+  --sk-info-text-contrast: oklch(0.12 0.04 305);
+}
+```
+
+### Using a Custom Theme
+
+Apply it with `SkTheme` or `SkPage`:
 
 ```vue
+<!-- With SkTheme -->
 <SkTheme theme="ocean">
   <YourContent />
 </SkTheme>
+
+<!-- Or directly on SkPage -->
+<SkPage theme="ocean" fixed-header>
+  <template #header>...</template>
+  <YourContent />
+</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.
+
+### Using Foundation Colors
+
+Instead of raw OKLCH values, you can reference the built-in foundation color palette. Each color family has 11 shades (05 through 95, where 50 is the most saturated):
+
+```css
+[data-scheme="mytheme"] {
+  /* Reference foundation palette variables */
+  --sk-primary-base: var(--sk-color-purple-50);
+  --sk-accent-base: var(--sk-color-pink-50);
+  --sk-neutral-base: var(--sk-color-gray-60);
+
+  /* hover/active states auto-derived the same way */
+  --sk-primary-hover: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  /* ... */
+}
+```
+
+Available foundation color families: `gray`, `blue`, `red`, `orange`, `yellow`, `green`, `mint`, `cyan`, `purple`, `pink`.
+
+### Quick Reference: Minimal Theme
+
+If you just want to remap which colors go where, copy this template and change the `-base` values. The `color-mix()` lines can be copied verbatim — they derive from the base automatically:
+
+```css
+[data-scheme="mytheme"] {
+  --sk-neutral-base: /* your color */;
+  --sk-neutral-hover: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neutral-active: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neutral-text: oklch(1 0 0);
+  --sk-neutral-text-contrast: var(--sk-color-gray-95);
+
+  --sk-primary-base: /* your color */;
+  --sk-primary-hover: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-primary-active: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-primary-text: oklch(1 0 0);
+  --sk-primary-text-contrast: var(--sk-color-gray-95);
+
+  --sk-accent-base: /* your color */;
+  --sk-accent-hover: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-accent-active: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-accent-text: oklch(1 0 0);
+  --sk-accent-text-contrast: var(--sk-color-gray-95);
+
+  --sk-success-base: /* your color */;
+  --sk-success-hover: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-success-active: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-success-text: oklch(1 0 0);
+  --sk-success-text-contrast: var(--sk-color-gray-95);
+
+  --sk-warning-base: /* your color */;
+  --sk-warning-hover: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-warning-active: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-warning-text: oklch(1 0 0);
+  --sk-warning-text-contrast: var(--sk-color-gray-95);
+
+  --sk-danger-base: /* your color */;
+  --sk-danger-hover: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-danger-active: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-danger-text: oklch(1 0 0);
+  --sk-danger-text-contrast: var(--sk-color-gray-95);
+
+  --sk-info-base: /* your color */;
+  --sk-info-hover: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-info-active: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-info-text: oklch(1 0 0);
+  --sk-info-text-contrast: var(--sk-color-gray-95);
+}
 ```
 
+Only the 7 `-base` values need to change. Everything else is boilerplate that can be copied as-is.
+
 ## Semantic Kinds
 
 All themed components accept a `kind` prop with these values:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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",
@@ -49,10 +49,10 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/skewedaspect/sleekspace-ui.git",
+    "url": "git+https://gitlab.com/skewed-aspect/sleekspace-ui.git",
     "directory": "packages/sleekspace-ui"
   },
-  "bugs": "https://gitlab.com/skewedaspect/sleekspace-ui/-/issues",
+  "bugs": "https://gitlab.com/skewed-aspect/sleekspace-ui/-/issues",
   "homepage": "https://sleekspace.skewedaspect.com",
   "peerDependencies": {
     "vue": "^3.3.0"

package/src/components/Page/SkPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes" :style="customStyles">
+    <div :class="classes" :style="customStyles" :data-scheme="theme">
         <header v-if="$slots.header" class="sk-page-header">
             <slot name="header" />
         </header>
@@ -62,11 +62,15 @@
      *                width below the sidebar and content areas.
      */
 
-    import { computed } from 'vue';
+    import { computed, provide, watch } from 'vue';
 
     // Types
+    import type { SkThemeName } from '../Theme/types';
     import type { SkPageSidebarPosition } from './types';
 
+    // Composables
+    import { provideTheme } from '../Theme/useTheme';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkPageComponentProps
@@ -101,6 +105,14 @@
          * Only applies when the sidebar slot is provided.
          */
         sidebarWidth ?: string;
+
+        /**
+         * Optional theme name. When provided, SkPage acts as a theme provider — setting
+         * `data-scheme` on the root element and providing theme context for descendant
+         * components (including portal components like dropdowns and modals).
+         * When omitted, SkPage has no theme behavior.
+         */
+        theme ?: SkThemeName;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -110,6 +122,7 @@
         fixedHeader: false,
         fixedFooter: false,
         sidebarWidth: undefined,
+        theme: undefined,
     });
 
     //------------------------------------------------------------------------------------------------------------------
@@ -138,6 +151,27 @@
             '--sk-page-sidebar-width': props.sidebarWidth,
         };
     });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Theme Provider
+    //------------------------------------------------------------------------------------------------------------------
+
+    if(props.theme)
+    {
+        const { currentTheme, setTheme } = provideTheme(props.theme);
+
+        // Provide theme for portal components (dropdown, modal, tooltip, etc.)
+        provide('sk-theme', currentTheme);
+
+        // Watch for external theme prop changes
+        watch(() => props.theme, (newTheme) =>
+        {
+            if(newTheme)
+            {
+                setTheme(newTheme);
+            }
+        });
+    }
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Page/types.ts

@@ -2,6 +2,10 @@
 // Page Types
 //----------------------------------------------------------------------------------------------------------------------
 
+import type { SkThemeName } from '../Theme/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
 /** Sidebar position */
 export type SkPageSidebarPosition = 'left' | 'right';
 
@@ -16,6 +20,8 @@ export interface SkPageProps
     fixedFooter ?: boolean;
     /** Custom sidebar width */
     sidebarWidth ?: string;
+    /** Optional theme name — when provided, SkPage acts as a theme provider */
+    theme ?: SkThemeName;
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/_scrollbar.scss

@@ -56,8 +56,8 @@
 
         /* Smooth transitions for interactive states */
         transition:
-            background-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard),
-            border-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard);
+            background-color var(--sk-transition-duration-fast) var(--sk-transition-easing-ease-out),
+            border-color var(--sk-transition-duration-fast) var(--sk-transition-easing-ease-out);
     }
 
     /* Hover State */

package/src/styles/base/_global.scss

@@ -21,7 +21,7 @@ body
 {
     margin: 0;
     min-height: 100svh;
-    color: var(--sk-neutral-fg);
+    color: var(--sk-text-primary);
 }
 
 img,
@@ -40,8 +40,8 @@ canvas
 
 :focus-visible
 {
-    outline: var(--sk-focus-outline-width) solid currentColor;
-    outline-offset: var(--sk-focus-outline-offset);
+    outline: var(--sk-focus-ring-width) solid currentColor;
+    outline-offset: var(--sk-focus-ring-offset);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_page.scss

@@ -12,8 +12,8 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    background: var(--sk-background);
-    color: var(--sk-foreground);
+    background: var(--sk-surface-base);
+    color: var(--sk-text-primary);
 
     //------------------------------------------------------------------------------------------------------------------
     // Header

package/src/styles/tokens/_foundation-colors.scss

@@ -156,6 +156,10 @@
     --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

package/src/styles/tokens/_foundation-transitions.scss

@@ -26,6 +26,14 @@
     --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

package/src/styles/tokens/_semantic-surfaces.scss

@@ -3,6 +3,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
@@ -34,3 +38,14 @@
     --sk-border-normal: var(--sk-color-gray-70);  /* Standard borders */
     --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);
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1589,6 +1589,16 @@
                 "type": "string"
               },
               "default": "undefined"
+            },
+            {
+              "name": "theme",
+              "required": false,
+              "description": "Optional theme name. When provided, SkPage acts as a theme provider — setting\n`data-scheme` on the root element and providing theme context for descendant\ncomponents (including portal components like dropdowns and modals).\nWhen omitted, SkPage has no theme behavior.",
+              "value": {
+                "kind": "expression",
+                "type": "SkThemeName"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [