layout-style-css 1.0.0

package/styles/layout-style-retrofuturism.css

@@ -0,0 +1,71 @@
+/*
+  Layout style: retrofuturism.
+  Panoramic bridge shell with symmetric pods and a wide central stage. Visual
+  identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.retrofuturism {
+  :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) {
+    --ly-container-max: 110rem;
+    --ly-page-padding-inline: clamp(1rem, 4vw, 4rem);
+    --ly-section-padding-block: clamp(3rem, 8vw, 7rem);
+    --ly-sidebar-width: clamp(12rem, 14vw, 16rem);
+    --ly-grid-min: 15rem;
+    --ly-gap: clamp(1rem, 3vw, 2.5rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(1rem, 2.4vw, 2rem);
+  }
+
+  :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-app-main {
+    padding-block: clamp(1.5rem, 4vw, 3rem);
+  }
+
+  :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-container,
+  :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-grid--auto {
+    grid-auto-rows: minmax(8rem, auto);
+  }
+
+  @media (min-width: 56rem) {
+    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-app-shell {
+      grid-template-areas:
+        "header header header"
+        "sidebar main main";
+      grid-template-columns: minmax(min(100%, 12rem), 0.24fr) minmax(0, 1fr) minmax(min(100%, 12rem), 0.24fr);
+    }
+
+    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-app-sidebar {
+      display: block;
+      position: sticky;
+      top: clamp(1rem, 2vw, 1.5rem);
+      height: calc(100svh - clamp(2rem, 4vw, 3rem));
+      margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-sidebar-layout {
+      grid-template-columns: minmax(min(100%, 12rem), 0.32fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-split {
+      grid-template-columns: minmax(0, 1.35fr) minmax(min(100%, 16rem), 0.65fr);
+    }
+
+    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-panes--two {
+      grid-template-columns: minmax(min(100%, 14rem), 0.44fr) minmax(0, 1.2fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-panes--three {
+      grid-template-columns: minmax(min(100%, 12rem), 0.44fr) minmax(0, 1.4fr) minmax(min(100%, 12rem), 0.44fr);
+    }
+  }
+}

package/styles/layout-style-tactile.css

@@ -0,0 +1,70 @@
+/*
+  Layout style: tactile.
+  Instrument-panel shell with a heavier support dock and dense controls. Visual
+  identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.tactile {
+  :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) {
+    --ly-container-max: 98rem;
+    --ly-page-padding-inline: clamp(1rem, 3vw, 2.75rem);
+    --ly-section-padding-block: clamp(2rem, 5vw, 4rem);
+    --ly-sidebar-width: clamp(18rem, 22vw, 24rem);
+    --ly-grid-min: 15rem;
+    --ly-gap: clamp(1rem, 2.2vw, 1.75rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(1rem, 2vw, 1.75rem);
+  }
+
+  :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-app-main {
+    padding-block: clamp(1rem, 2.5vw, 2rem);
+  }
+
+  :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-container,
+  :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-grid--auto {
+    grid-auto-rows: minmax(8rem, auto);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-app-shell {
+      grid-template-areas:
+        "sidebar header"
+        "sidebar main";
+      grid-template-columns: minmax(min(100%, 18rem), var(--ly-sidebar-width)) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-app-sidebar {
+      display: block;
+      position: sticky;
+      top: 0;
+      height: 100svh;
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-sidebar-layout {
+      grid-template-columns: minmax(min(100%, 18rem), 0.42fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-split {
+      grid-template-columns: minmax(0, 1.18fr) minmax(min(100%, 18rem), 0.82fr);
+    }
+
+    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-panes--two {
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 20rem), 0.62fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-panes--three {
+      grid-template-columns: minmax(min(100%, 17rem), 0.4fr) minmax(0, 1fr) minmax(min(100%, 18rem), 0.46fr);
+    }
+  }
+}

package/styles/layout-style-y2k.css

@@ -0,0 +1,72 @@
+/*
+  Layout style: y2k.
+  Centered hub shell with floating-window rhythm and in-flow support regions.
+  Visual identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.y2k {
+  :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) {
+    --ly-container-max: 84rem;
+    --ly-page-padding-inline: clamp(1rem, 5vw, 4rem);
+    --ly-section-padding-block: clamp(3rem, 8vw, 6rem);
+    --ly-sidebar-width: clamp(17rem, 22vw, 21rem);
+    --ly-grid-min: 16rem;
+    --ly-gap: clamp(1.25rem, 3vw, 2.5rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(1rem, 2.5vw, 2rem);
+  }
+
+  :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-app-main {
+    padding-block: clamp(2rem, 6vw, 4rem);
+  }
+
+  :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-container,
+  :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-grid--auto {
+    grid-auto-rows: minmax(8rem, auto);
+  }
+
+  @media (min-width: 54rem) {
+    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-app-shell {
+      grid-template-areas:
+        "header header"
+        "main sidebar";
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 17rem), 0.34fr);
+      align-items: start;
+    }
+
+    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-app-sidebar {
+      display: block;
+      position: sticky;
+      top: clamp(1rem, 4vw, 3rem);
+      max-height: calc(100svh - clamp(2rem, 8vw, 6rem));
+      margin: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 3rem) clamp(2rem, 6vw, 4rem) 0;
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-sidebar-layout {
+      grid-template-columns: minmax(0, 0.92fr) minmax(min(100%, 16rem), 1.08fr);
+    }
+
+    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-split {
+      grid-template-columns: minmax(0, 0.86fr) minmax(min(100%, 18rem), 1.14fr);
+    }
+
+    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-panes--two {
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 17rem), 0.56fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-panes--three {
+      grid-template-columns: minmax(min(100%, 16rem), 0.5fr) minmax(0, 1fr) minmax(min(100%, 16rem), 0.5fr);
+    }
+  }
+}

package/styles/layout-ui-style-kit-bridge.css

@@ -0,0 +1,55 @@
+/*
+  Compatibility bridge for ui-style-kit-css.
+  This bridge intentionally does not map color, type, border, or shadow tokens.
+  ui-style-kit-css owns those visuals; layout-style-library owns structure.
+*/
+
+@layer ly.bridge {
+  :where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) {
+    --ly-ui-style-kit-bridge: 1;
+  }
+
+  :where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: minimal-saas;
+  }
+
+  :where(.ly-root[data-ui="bento"], [data-ui="bento"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: bento;
+  }
+
+  :where(.ly-root[data-ui="maximalist"], [data-ui="maximalist"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: maximalist;
+  }
+
+  :where(.ly-root[data-ui="bauhaus"], [data-ui="bauhaus"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: bauhaus;
+  }
+
+  :where(.ly-root[data-ui="tactile"], [data-ui="tactile"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: tactile;
+  }
+
+  :where(.ly-root[data-ui="neumorphism"], [data-ui="neumorphism"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: neumorphism;
+  }
+
+  :where(.ly-root[data-ui="retrofuturism"], [data-ui="retrofuturism"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: retrofuturism;
+  }
+
+  :where(.ly-root[data-ui="brutalism"], [data-ui="brutalism"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: brutalism;
+  }
+
+  :where(.ly-root[data-ui="cyberpunk"], [data-ui="cyberpunk"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: cyberpunk;
+  }
+
+  :where(.ly-root[data-ui="y2k"], [data-ui="y2k"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: y2k;
+  }
+
+  :where(.ly-root[data-ui="retro-glass"], [data-ui="retro-glass"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: retro-glass;
+  }
+}