@skewedaspect/sleekspace-ui 0.7.1 → 0.8.1

package/dist/styles/mixins/fluidSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tokens.css

@@ -444,6 +444,66 @@
   --sk-scrollbar-thumb-min-size: 40px;
 }
 
+/**
+ * Foundation Tokens - Breakpoints
+ *
+ * Single-source breakpoint scale shared between @media (viewport) and
+ * @container (component) queries. CSS custom properties are exposed for
+ * consumer visibility and JS access; SCSS-level values live in
+ * mixins/_responsive.scss and drive the media-up/container-up mixins.
+ *
+ * Scale rationale:
+ *   sm ( 640px) - phones held landscape / narrow tablets
+ *   md (1024px) - tablets / small laptop -- persistent sidebar threshold
+ *   lg (1280px) - standard laptop / desktop
+ *   xl (1536px) - large desktop / ultrawide
+ */
+:root {
+  /* ===================================================================
+   * Viewport Breakpoints
+   * =================================================================== */
+  --sk-bp-sm: 640px;
+  --sk-bp-md: 1024px;
+  --sk-bp-lg: 1280px;
+  --sk-bp-xl: 1536px;
+}
+
+/**
+ * Foundation Tokens - Z-Index Stacking Scale
+ *
+ * One scale every SleekSpace component layers against so portaled content stacks in a
+ * predictable, documented order. Custom consumer layers can slot in between tokens by
+ * picking a number within the reserved gap.
+ *
+ * Reading order (bottom to top):
+ *   sticky        100 - App-shell chrome that sits above the flow (sticky navbar / footer)
+ *   drawer-scrim  900 - Dim + blur layer behind an open drawer
+ *   drawer        901 - SkPage sidebar / aside drawer
+ *   modal-scrim  1000 - Dim layer behind an open modal
+ *   modal        1001 - SkModal content -- must be above drawer so modals launched from
+ *                       inside a drawer render on top
+ *   popover      1100 - SkPopover (floating anchored surface)
+ *   dropdown     1100 - SkDropdown + SkListbox menus (same layer as popover; a menu opened
+ *                       inside a modal renders above the modal)
+ *   tooltip      1200 - SkTooltip -- higher than menus so a tooltip on a menu item stays
+ *                       visible
+ *   toast        1300 - Ephemeral top-of-stack notifications
+ */
+:root {
+  /* ===================================================================
+   * Layering Scale
+   * =================================================================== */
+  --sk-z-sticky: 100;
+  --sk-z-drawer-scrim: 900;
+  --sk-z-drawer: 901;
+  --sk-z-modal-scrim: 1000;
+  --sk-z-modal: 1001;
+  --sk-z-popover: 1100;
+  --sk-z-dropdown: 1100;
+  --sk-z-tooltip: 1200;
+  --sk-z-toast: 1300;
+}
+
 /* ===================================================================
  * Semantic Tokens
  * Contextual meanings that reference foundation tokens