@skewedaspect/sleekspace-ui 0.3.0 → 0.5.0

package/dist/components/Alert/SkAlert.vue.d.ts

@@ -2,19 +2,28 @@ import { SkAlertKind } from './types';
 import { ComponentCustomColors } from '../../types';
 export interface SkAlertComponentProps extends ComponentCustomColors {
     /**
-     * Semantic kind that determines the alert's color scheme and default icon. Each kind
-     * conveys a different meaning: 'info' for general information, 'success' for positive
-     * confirmations, 'warning' for cautionary messages, and 'danger' for errors or critical issues.
+     * Semantic kind that determines the alert's color scheme and default icon. Supports all
+     * semantic kinds (neutral, primary, accent, info, success, warning, danger) as well as
+     * direct color kinds (neon-blue, neon-purple, etc.). Default icons are provided for the
+     * four feedback kinds (info, success, warning, danger).
      * @default 'info'
      */
     kind?: SkAlertKind;
     /**
-     * When true, applies prominent styling with a more vivid background color and stronger
-     * visual presence. Use prominent alerts for critical messages that require immediate
-     * user attention, such as errors or important warnings.
+     * When true, applies subdued styling with a lighter, semi-transparent background.
+     * Use subtle alerts for less critical messages that shouldn't dominate the visual
+     * hierarchy, such as tips or supplementary information.
      * @default false
      */
-    prominent?: boolean;
+    subtle?: boolean;
+    /**
+     * Controls visibility of the icon container. When undefined (default), the icon is shown
+     * automatically if there's a default icon for the kind (info, success, warning, danger)
+     * or if custom content is provided via the icon slot. Set to false to force-hide the icon,
+     * or true to force-show the container even when empty.
+     * @default undefined
+     */
+    showIcon?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -27,8 +36,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkAlertComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkAlertComponentProps> & Readonly<{}>, {
+    subtle: boolean;
     kind: SkAlertKind;
-    prominent: boolean;
+    showIcon: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1,4 +1,5 @@
+import { ComponentKind } from '../../types';
 /**
- * Alert semantic kinds (feedback-focused subset)
+ * Alert kind - supports all semantic and color kinds
  */
-export type SkAlertKind = 'info' | 'success' | 'warning' | 'danger';
+export type SkAlertKind = ComponentKind;

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 {
@@ -1658,7 +1681,7 @@
   .sk-alert .sk-alert-content > *:last-child {
     margin-bottom: 0;
   }
-  .sk-alert.sk-prominent {
+  .sk-alert:not(.sk-subtle) {
     --sk-alert-padding: 1rem;
     --sk-alert-icon-size: 1.5rem;
     --sk-alert-cut-size: 1rem;
@@ -1675,7 +1698,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neutral.sk-prominent {
+  .sk-alert.sk-neutral:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neutral-text);
   }
   .sk-alert.sk-primary {
@@ -1686,7 +1709,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-primary.sk-prominent {
+  .sk-alert.sk-primary:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-primary-text);
   }
   .sk-alert.sk-accent {
@@ -1697,7 +1720,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-accent.sk-prominent {
+  .sk-alert.sk-accent:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-accent-text);
   }
   .sk-alert.sk-info {
@@ -1708,7 +1731,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-info.sk-prominent {
+  .sk-alert.sk-info:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-info-text);
   }
   .sk-alert.sk-success {
@@ -1719,7 +1742,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-success.sk-prominent {
+  .sk-alert.sk-success:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-success-text);
   }
   .sk-alert.sk-warning {
@@ -1730,7 +1753,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-warning.sk-prominent {
+  .sk-alert.sk-warning:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-warning-text);
   }
   .sk-alert.sk-danger {
@@ -1741,7 +1764,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-danger.sk-prominent {
+  .sk-alert.sk-danger:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-danger-text);
   }
   .sk-alert.sk-boulder {
@@ -1752,7 +1775,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-boulder.sk-prominent {
+  .sk-alert.sk-boulder:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-boulder-text);
   }
   .sk-alert.sk-neon-blue {
@@ -1763,7 +1786,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-blue.sk-prominent {
+  .sk-alert.sk-neon-blue:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-blue-text);
   }
   .sk-alert.sk-light-blue {
@@ -1774,7 +1797,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-light-blue.sk-prominent {
+  .sk-alert.sk-light-blue:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-light-blue-text);
   }
   .sk-alert.sk-neon-orange {
@@ -1785,7 +1808,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-orange.sk-prominent {
+  .sk-alert.sk-neon-orange:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-orange-text);
   }
   .sk-alert.sk-neon-purple {
@@ -1796,7 +1819,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-purple.sk-prominent {
+  .sk-alert.sk-neon-purple:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-purple-text);
   }
   .sk-alert.sk-neon-green {
@@ -1807,7 +1830,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-green.sk-prominent {
+  .sk-alert.sk-neon-green:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-green-text);
   }
   .sk-alert.sk-neon-mint {
@@ -1818,7 +1841,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-mint.sk-prominent {
+  .sk-alert.sk-neon-mint:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-mint-text);
   }
   .sk-alert.sk-neon-pink {
@@ -1829,7 +1852,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-pink.sk-prominent {
+  .sk-alert.sk-neon-pink:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-pink-text);
   }
   .sk-alert.sk-yellow {
@@ -1840,7 +1863,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-yellow.sk-prominent {
+  .sk-alert.sk-yellow:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-yellow-text);
   }
   .sk-alert.sk-red {
@@ -1851,7 +1874,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-red.sk-prominent {
+  .sk-alert.sk-red:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-red-text);
   }
   .sk-avatar {
@@ -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

@@ -15205,7 +15205,10 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 const SkAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5e73d91f"]]);
-const _hoisted_1$w = { class: "sk-alert-icon" };
+const _hoisted_1$w = {
+  key: 0,
+  class: "sk-alert-icon"
+};
 const _hoisted_2$h = {
   key: 0,
   viewBox: "0 0 24 24",
@@ -15234,24 +15237,35 @@ 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: {
     kind: { default: "info" },
-    prominent: { type: Boolean, default: false },
+    subtle: { type: Boolean, default: false },
+    showIcon: { type: Boolean, default: void 0 },
     baseColor: {},
     textColor: {}
   },
   setup(__props) {
+    const FEEDBACK_KINDS = ["info", "success", "warning", "danger"];
     const props = __props;
+    const slots = useSlots();
     const classes = computed(() => {
       return {
         "sk-alert": true,
         [`sk-${props.kind}`]: true,
-        "sk-prominent": props.prominent
+        "sk-subtle": props.subtle
       };
     });
+    const shouldShowIcon = computed(() => {
+      if (props.showIcon !== void 0) {
+        return props.showIcon;
+      }
+      const hasDefaultIcon = FEEDBACK_KINDS.includes(props.kind);
+      const hasSlotContent = !!slots.icon;
+      return hasDefaultIcon || hasSlotContent;
+    });
     const customColorStyles = useCustomColors(
       "alert",
       toRef(() => props.baseColor),
@@ -15263,7 +15277,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(unref(customColorStyles)),
         role: "alert"
       }, [
-        createElementVNode("div", _hoisted_1$w, [
+        shouldShowIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$w, [
           renderSlot(_ctx.$slots, "icon", {}, () => [
             __props.kind === "info" ? (openBlock(), createElementBlock("svg", _hoisted_2$h, [..._cache[0] || (_cache[0] = [
               createElementVNode("circle", {
@@ -15320,8 +15334,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               }, null, -1)
             ])])) : createCommentVNode("", true)
           ])
-        ]),
-        createElementVNode("div", _hoisted_6$3, [
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_6$4, [
           renderSlot(_ctx.$slots, "default")
         ])
       ], 6);
@@ -16994,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"
 };
@@ -17014,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;
@@ -17032,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 };
@@ -18863,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",