@gjsify/adwaita-web 0.1.7 → 0.1.8

package/scss/_card.scss

@@ -0,0 +1,20 @@
+// _card.scss — adw-card styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_card.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-card,
+.adw-card {
+  display: block;
+  background-color: var(--card-bg-color);
+  color: var(--card-fg-color);
+  border-radius: var(--card-radius);
+  padding: var(--spacing-l);
+  box-shadow:
+    0 0 0 1px rgb(0 0 6 / 3%),
+    0 1px 3px 1px rgb(0 0 6 / 7%),
+    0 2px 6px 2px rgb(0 0 6 / 3%);
+  overflow: hidden;
+}

package/scss/_combo_row.scss

@@ -0,0 +1,78 @@
+// _combo_row.scss — adw-combo-row styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_combo_row.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_combo-row.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-combo-row {
+  position: relative;
+  cursor: pointer;
+
+  .adw-row-title {
+    font-size: var(--font-size-base);
+    color: var(--card-fg-color);
+    pointer-events: none;
+  }
+
+  // Hidden <select> overlay — stretches across the row to capture clicks
+  // anywhere. The visual dropdown arrow is rendered by .adw-row-value::after
+  // below, so the select itself doesn't need a background image.
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: transparent;
+    border: none;
+    padding: 6px 24px 6px 8px;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    color: var(--card-fg-color);
+    cursor: pointer;
+    text-align: right;
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -1px;
+    }
+
+    option {
+      background-color: var(--window-bg-color);
+      color: var(--window-fg-color);
+    }
+  }
+
+  .adw-row-value {
+    font-size: var(--font-size-base);
+    color: var(--card-fg-color);
+    opacity: var(--dim-opacity);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    // Dropdown arrow — rendered via CSS mask so `currentColor` drives the
+    // fill, making the icon theme-aware (matches libadwaita's dark theme).
+    // Using background-image with a data-URI SVG would NOT resolve
+    // `currentColor` in most browsers.
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background-color: currentColor;
+      -webkit-mask-image: var(--icon-go-down);
+      mask-image: var(--icon-go-down);
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-size: contain;
+      -webkit-mask-position: center;
+      mask-position: center;
+    }
+  }
+}

package/scss/_headerbar.scss

@@ -0,0 +1,67 @@
+// _headerbar.scss — adw-header-bar styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_headerbar.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_header-bar.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-header-bar {
+  display: flex;
+  align-items: center;
+  min-height: 47px;
+  padding: 0 6px;
+  background-color: var(--headerbar-bg-color);
+  color: var(--headerbar-fg-color);
+  box-shadow: inset 0 -1px var(--headerbar-shade-color);
+  flex-shrink: 0;
+
+  .adw-header-bar-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .adw-header-bar-title {
+    font-weight: bold;
+    font-size: var(--font-size-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .adw-header-bar-start {
+    display: flex;
+    align-items: center;
+    padding: 0 6px;
+    gap: 4px;
+  }
+
+  .adw-header-bar-end {
+    display: flex;
+    align-items: center;
+    padding: 0 6px;
+    gap: 4px;
+  }
+
+  .adw-header-btn {
+    position: relative;
+    width: 34px;
+    height: 34px;
+    border: none;
+    border-radius: var(--button-radius);
+    background: transparent;
+    color: var(--headerbar-fg-color);
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    flex-shrink: 0;
+
+    &:hover {
+      background: rgba(128, 128, 128, 0.12);
+    }
+
+    &:active {
+      background: rgba(128, 128, 128, 0.22);
+    }
+  }
+}

package/scss/_icons.generated.scss

@@ -0,0 +1,8 @@
+// _icons.generated.scss — auto-generated by scripts/build-scss.mjs
+// DO NOT EDIT — regenerated on every build from @gjsify/adwaita-icons.
+
+:root {
+  --icon-edit-paste: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
+  --icon-go-down: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
+  --icon-sidebar-show: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
+}

package/scss/_overlay_split_view.scss

@@ -0,0 +1,106 @@
+// _overlay_split_view.scss — adw-overlay-split-view styling.
+// Reference: refs/libadwaita/src/adw-overlay-split-view.c
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as Web Component for @gjsify/adwaita-web.
+
+adw-overlay-split-view {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+
+  .adw-osv-sidebar {
+    background-color: var(--sidebar-bg-color);
+    overflow-y: auto;
+    flex-shrink: 0;
+    transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
+    z-index: 10;
+    align-self: stretch;
+  }
+
+  .adw-osv-content {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+  }
+
+  // Docked mode (not collapsed) — sidebar beside content
+  &:not(.collapsed) .adw-osv-sidebar {
+    position: relative;
+  }
+
+  // Docked hide: slide left and collapse via opacity. Sidebar keeps its
+  // intrinsic width so internal elements don't reflow.
+  &:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
+    transform: translateX(-100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // Overlay mode (collapsed) — sidebar on top of content
+  &.collapsed .adw-osv-sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &.collapsed.sidebar-end .adw-osv-sidebar {
+    left: auto;
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &.collapsed.show-sidebar .adw-osv-sidebar {
+    transform: translateX(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  // Backdrop — visible only in overlay mode when sidebar is open
+  .adw-osv-backdrop {
+    display: none;
+  }
+
+  &.collapsed.show-sidebar .adw-osv-backdrop {
+    display: block;
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 9;
+  }
+}
+
+// Sidebar content layout helper — wraps the sidebar's children with the
+// standard Adwaita spacing scale (12px padding, 12px gap between groups).
+.adw-sidebar-content {
+  padding: var(--spacing-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+
+// Sidebar toggle button — sidebar-show-symbolic icon via CSS mask
+.adw-sidebar-toggle-icon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-sidebar-show);
+  mask-image: var(--icon-sidebar-show);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-position: center;
+  mask-position: center;
+  pointer-events: none;
+}

package/scss/_preferences.scss

@@ -0,0 +1,35 @@
+// _preferences.scss — adw-preferences-group styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_preferences.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_preferences.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-preferences-group {
+  display: block;
+
+  .adw-preferences-group-header {
+    padding: var(--spacing-xs) 2px;
+  }
+
+  .adw-preferences-group-title {
+    font-size: var(--font-size-small);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    opacity: var(--dim-opacity);
+    margin: 0;
+    color: var(--window-fg-color);
+  }
+
+  .adw-preferences-group-listbox {
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
+    border-radius: var(--card-radius);
+    box-shadow:
+      0 0 0 1px rgb(0 0 6 / 3%),
+      0 1px 3px 1px rgb(0 0 6 / 7%),
+      0 2px 6px 2px rgb(0 0 6 / 3%);
+    overflow: hidden;
+  }
+}

package/scss/_row.scss

@@ -0,0 +1,29 @@
+// _row.scss — Shared base styling for rows in preferences groups.
+// Reference: refs/adwaita-web/adwaita-web/scss/_row_types.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_action-row.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-switch-row,
+adw-combo-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  gap: var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+// Utility separator (used by content layouts)
+.adw-separator-vertical {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--card-shade-color);
+  flex-shrink: 0;
+}

package/scss/_spin_row.scss

@@ -0,0 +1,68 @@
+// _spin_row.scss — adw-spin-row styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_spin_button.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_spin-button.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-spin-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  gap: var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .adw-row-title {
+    flex: 1;
+    font-size: var(--font-size-base);
+    color: var(--card-fg-color);
+  }
+}
+
+.adw-spin-control {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+
+  button {
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: var(--button-radius);
+    background: transparent;
+    color: var(--card-fg-color);
+    cursor: pointer;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    &:hover {
+      background: rgba(128, 128, 128, 0.15);
+    }
+  }
+
+  input {
+    width: 56px;
+    text-align: center;
+    border: none;
+    border-radius: var(--button-radius);
+    background: rgba(128, 128, 128, 0.1);
+    color: var(--card-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    padding: 4px 2px;
+
+    &:focus {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -1px;
+    }
+  }
+}

package/scss/_switch_row.scss

@@ -0,0 +1,65 @@
+// _switch_row.scss — adw-switch-row styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_switch_row.scss
+// Reference: refs/adwaita-web/adwaita-web/scss/_switch.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_switch.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-switch-row {
+  .adw-row-title {
+    flex: 1;
+    font-size: var(--font-size-base);
+    color: var(--card-fg-color);
+  }
+
+  .adw-switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+    flex-shrink: 0;
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+    }
+  }
+
+  .adw-switch-slider {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background-color: var(--switch-off-bg);
+    border-radius: 12px;
+    transition: background-color 0.15s ease-out;
+
+    &::before {
+      content: "";
+      position: absolute;
+      height: 20px;
+      width: 20px;
+      left: 2px;
+      bottom: 2px;
+      background-color: var(--switch-knob-bg);
+      border-radius: 50%;
+      transition: transform 0.15s ease-out;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+    }
+  }
+
+  .adw-switch input:checked + .adw-switch-slider {
+    background-color: var(--accent-bg-color);
+
+    &::before {
+      transform: translateX(20px);
+    }
+  }
+
+  .adw-switch input:focus-visible + .adw-switch-slider {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+  }
+}

package/scss/_theme.scss

@@ -0,0 +1,34 @@
+// _theme.scss — Light/dark theme switching.
+// Auto via prefers-color-scheme + manual .theme-dark / .theme-light overrides.
+// Reference: refs/libadwaita/src/stylesheet/_colors.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@mixin dark-theme {
+  --window-bg-color: #222226;
+  --window-fg-color: #ffffff;
+  --view-bg-color: #1d1d20;
+  --view-fg-color: #ffffff;
+  --headerbar-bg-color: #2e2e32;
+  --headerbar-fg-color: #ffffff;
+  --headerbar-shade-color: rgba(0, 0, 6, 0.36);
+  --sidebar-bg-color: #2e2e32;
+  --card-bg-color: rgba(255, 255, 255, 0.08);
+  --card-fg-color: #ffffff;
+  --card-shade-color: rgba(0, 0, 6, 0.36);
+  --accent-color: #78aeed;
+  --switch-off-bg: rgba(255, 255, 255, 0.2);
+  --switch-knob-bg: #deddda;
+}
+
+// Auto dark theme via prefers-color-scheme — opt out with .theme-light
+@media (prefers-color-scheme: dark) {
+  :root:not(.theme-light) {
+    @include dark-theme;
+  }
+}
+
+// Manual override
+:root.theme-dark {
+  @include dark-theme;
+}

package/scss/_toast.scss

@@ -0,0 +1,60 @@
+// _toast.scss — adw-toast and adw-toast-overlay styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss
+// Reference: refs/adwaita-web/adwaita-web/scss/_toast_overlay.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toast.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-toast-overlay {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 9px;
+  align-items: center;
+  pointer-events: none;
+}
+
+.adw-toast {
+  background-color: #3d3846;
+  color: #ffffff;
+  padding: 9px 12px;
+  border-radius: var(--card-radius);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: max-content;
+  max-width: 400px;
+  min-height: 36px;
+  pointer-events: auto;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+
+  opacity: 0;
+  transform: translateY(100%) scale(0.9);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+              transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+  will-change: transform, opacity;
+
+  &.visible {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  &.hiding {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  .adw-toast-title {
+    font-weight: normal;
+    line-height: 1.3;
+  }
+}

package/scss/_variables.scss

@@ -0,0 +1,57 @@
+// _variables.scss — Adwaita CSS custom properties (light theme defaults).
+// Reference: refs/libadwaita/src/stylesheet/_colors.scss (canonical color palette)
+// Reference: refs/adwaita-web/adwaita-web/scss/_variables.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Subset adapted for @gjsify/adwaita-web Web Components.
+
+:root {
+  // Window
+  --window-bg-color: #fafafb;
+  --window-fg-color: rgba(0, 0, 6, 0.8);
+
+  // Views
+  --view-bg-color: #ffffff;
+  --view-fg-color: rgba(0, 0, 6, 0.8);
+
+  // Header bar
+  --headerbar-bg-color: #ffffff;
+  --headerbar-fg-color: rgba(0, 0, 6, 0.8);
+  --headerbar-shade-color: rgba(0, 0, 6, 0.12);
+
+  // Sidebar
+  --sidebar-bg-color: #ebebed;
+
+  // Cards / boxed lists
+  --card-bg-color: #ffffff;
+  --card-fg-color: rgba(0, 0, 6, 0.8);
+  --card-shade-color: rgba(0, 0, 6, 0.07);
+
+  // Accent
+  --accent-bg-color: #3584e4;
+  --accent-fg-color: #ffffff;
+  --accent-color: #1c71d8;
+
+  // Switch
+  --switch-off-bg: rgba(0, 0, 0, 0.2);
+  --switch-knob-bg: #ffffff;
+
+  // Layout radii
+  --window-radius: 15px;
+  --card-radius: 12px;
+  --button-radius: 9px;
+
+  // Spacing scale
+  --spacing-xs: 6px;
+  --spacing-s: 9px;
+  --spacing-m: 12px;
+  --spacing-l: 18px;
+  --spacing-xl: 24px;
+
+  // Typography — GNOME default: Adwaita Sans 11
+  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;
+  --font-size-base: 11pt;
+  --font-size-small: 9pt;
+  --font-size-heading: 12pt;
+  --dim-opacity: 0.55;
+}

package/scss/_window.scss

@@ -0,0 +1,23 @@
+// _window.scss — adw-window styling.
+// Reference: refs/adwaita-web/adwaita-web/scss/_window.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-window {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  border-radius: var(--window-radius);
+  box-shadow:
+    0 0 14px 5px rgb(0 0 0 / 15%),
+    0 0 5px 2px rgb(0 0 0 / 10%),
+    0 0 0 1px rgb(0 0 0 / 5%);
+  overflow: hidden;
+  outline: 1px solid rgb(255 255 255 / 7%);
+  outline-offset: -1px;
+}

package/scss/adwaita-skin.scss

@@ -0,0 +1,21 @@
+// adwaita-skin.scss — Main entry point for @gjsify/adwaita-web.
+// Mirrors refs/adwaita-web/adwaita-web/scss/adwaita-skin.scss organization.
+// Reference: refs/adwaita-web/adwaita-web/scss/adwaita-skin.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@use 'icons.generated';
+@use 'variables';
+@use 'theme';
+@use 'window';
+@use 'headerbar';
+@use 'preferences';
+@use 'card';
+@use 'row';
+@use 'switch_row';
+@use 'combo_row';
+@use 'spin_row';
+@use 'toast';
+@use 'overlay_split_view';