@smwb/ui-styles 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 - Summerweb LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# @smwb/ui-styles
+
+Framework-agnostic **LESS source** and design tokens for the `@smwb` design system — the single
+source of truth for component styles (`smwb-*` classes), foundation tokens, and runtime
+`--smui-*` CSS variables. Consumed by [`@smwb/ui-react`](https://www.npmjs.com/package/@smwb/ui-react),
+[`@smwb/ui-solid`](https://www.npmjs.com/package/@smwb/ui-solid), and compiled into
+[`@smwb/ui-css`](https://www.npmjs.com/package/@smwb/ui-css).
+
+This package ships **LESS source only** — no JavaScript. For a ready-to-use stylesheet, use
+`@smwb/ui-css`.
+
+![license](https://img.shields.io/badge/license-MIT-blue.svg)
+
+## Install
+
+```sh
+npm install @smwb/ui-styles
+```
+
+## What's inside
+
+| Path | Purpose |
+| --- | --- |
+| `less/components.less` | Aggregate entry — `@import`s foundation + every component |
+| `less/foundation/*` | Tokens: palette, spacing, radius, elevation, breakpoints, sizing |
+| `less/default/globals/default.variables.less` | Semantic colors + per-component LESS variables |
+| `less/variables.less` | Emits `:root { --smui-* }` (light) + `[data-theme="dark"]` |
+| `less/components/<name>/<name>.entry.less` | Per-component entry (self-contained) |
+| `less/headless-base.less` | Foundation + theme variables only (no component rules) |
+| `less/themes/*` | Built-in theme packs (`summer`, `material`) |
+| `normalize.css` | Optional CSS reset |
+
+## Usage
+
+### Compile the full stylesheet
+
+```sh
+lessc -rp=/ node_modules/@smwb/ui-styles/less/components.less app.css
+```
+
+### Selective bundle (only the components you use)
+
+```less
+@import (less) "node_modules/@smwb/ui-styles/less/headless-base.less";
+@import (less) "node_modules/@smwb/ui-styles/less/components/button/button.entry.less";
+@import (less) "node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less";
+```
+
+Import `<name>.entry.less` (not bare `components/<name>/<name>.less`) so LESS variables resolve
+without duplicating the global `:root` output.
+
+### Theming
+
+Override tokens at compile time via a `theme.config` (imported last, so your values win), or at
+runtime via the `--smui-*` CSS variables. Exports: `./components.less`, `./headless-base.less`,
+`./less/*`, `./normalize.css`.
+
+## License
+
+[MIT](./LICENSE)

package/less/_prelude.less

@@ -0,0 +1,6 @@
+// Reference-only prelude: exposes foundation + theme variables/mixins
+// to a component .less compiled standalone, WITHOUT emitting any CSS
+// (the global :root / normalize / foundation base ship once via the
+// aggregate summer-ui.css or base.css).
+@import (reference) "./foundation.less";
+@import (reference) "./theme.less";

package/less/components/accordion/accordion.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./accordion.less";

package/less/components/accordion/accordion.less

@@ -0,0 +1,36 @@
+.smwb-accordion {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  box-shadow: 0px 2px 2px -1px rgb(0 0 0 / 20%), 0px 1px 2px 0px rgb(0 0 0 / 14%), 0px 1px 11px 0px rgb(0 0 0 / 12%);
+  &__header {
+    background-color: var(--smui-appBarBg);
+    color: var(--smui-appBarContentColor);
+    height: @appBarHeight;
+    display: flex;
+    align-items: center;
+    padding: 0 @accordionSummaryPaddingX;
+    cursor: pointer;
+    gap: @accordionSummaryGap;
+    width: 100%;
+    arrow-icon {
+      flex-shrink: 0;
+    }
+  }
+  &__title {
+    white-space: nowrap;
+  }
+
+  &__content {
+    background-color: var(--smui-surfaceBackground);
+  }
+
+  &__arrow-icon {
+    transform: rotate(0);
+    transition: transform 0.3s ease-in-out;
+    margin-left: auto;
+    &_opened {
+      transform: rotate(-180deg);
+    }
+  }
+}

package/less/components/appBar/appBar.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./appBar.less";

package/less/components/appBar/appBar.less

@@ -0,0 +1,95 @@
+.smwb-appbar {
+  padding: 0 @appBarPaddingX;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  min-width: 100%;
+  background-color: var(--smui-appBarBg);
+  color: var(--smui-appBarContentColor);
+  font-size: 1rem;
+  bottom: auto;
+  height: @appBarHeight;
+  &.smwb-bottom {
+    bottom: 0;
+    top: auto;
+  }
+  &.smwb-relative {
+    position: relative;
+  }
+  &.smwb-static {
+    position: static;
+  }
+  &.smwb-sticky {
+    position: sticky;
+  }
+  &.smwb-fixed {
+    position: fixed;
+  }
+  &.smwb-absolute {
+    position: absolute;
+  }
+  &.smwb-dense {
+    padding: @appBarActionPadding;
+    height: 48px;
+  }
+  &__inner {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+  }
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: @appBarActionsGap;
+    white-space: nowrap;
+  }
+  &__right {
+    white-space: nowrap;
+  }
+  &__mid {
+    width: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    &.smwb-middle {
+      align-items: center;
+    }
+    &.smwb-right {
+      align-items: flex-end;
+    }
+    &.smwb-left {
+      align-items: flex-start;
+    }
+  }
+}
+
+.smwb-appbar_color-primary {
+  background-color: var(--smui-primaryColor);
+  color: var(--smui-onPrimaryColor);
+}
+.smwb-appbar_color-secondary {
+  background-color: var(--smui-secondaryColor);
+  color: var(--smui-onSecondaryColor);
+}
+.smwb-appbar_color-error {
+  background-color: var(--smui-errorColor);
+  color: var(--smui-onErrorColor);
+}
+.smwb-appbar_color-success {
+  background-color: var(--smui-successColor);
+  color: var(--smui-onSuccessColor);
+}
+.smwb-appbar_color-warning {
+  background-color: var(--smui-warningColor);
+  color: var(--smui-onWarningColor);
+}
+.smwb-appbar_color-info {
+  background-color: var(--smui-infoColor);
+  color: var(--smui-onInfoColor);
+}

package/less/components/appLayout/appLayout.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./appLayout.less";

package/less/components/appLayout/appLayout.less

@@ -0,0 +1,112 @@
+.smwb-app-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  background-color: var(--smui-pageBackground);
+  color: var(--smui-onSurfaceColor);
+
+  &__header {
+    flex-shrink: 0;
+    z-index: 10;
+  }
+
+  &_sticky-header &__header {
+    position: sticky;
+    top: 0;
+  }
+
+  &__body {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  &__sidebar {
+    position: relative;
+    flex: 0 0 var(--smui-app-sidebar-w, 260px);
+    width: var(--smui-app-sidebar-w, 260px);
+    overflow-y: auto;
+    transition: flex-basis 0.2s ease-in-out, width 0.2s ease-in-out;
+
+    // A <Sidebar> dropped into the slot is viewport-fixed by default
+    // (standalone usage). Inside AppLayout it must flow within this
+    // reserved column, which already sits below the sticky header —
+    // otherwise it slides up behind the header and hides its toggle.
+    > .smwb-sidebar {
+      position: static;
+      top: auto;
+      left: auto;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: hidden;
+  }
+
+  &__footer {
+    margin-top: auto;
+    flex-shrink: 0;
+    border-top: 1px solid var(--smui-dividerColor);
+  }
+}
+
+.smui-media-down(md; {
+  // Mobile drawer: overlay the body area only. Anchored to
+  // __body (which sits below the sticky header) instead of the
+  // viewport, so the rail reaches down to the header, never
+  // slides up behind it.
+  .smwb-app-layout__sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 20;
+  }
+});
+
+.smwb-app-layout__collapse {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+
+.smwb-app-layout_collapsed .smwb-app-layout__collapse {
+  justify-content: center;
+}
+
+.smwb-app-layout__collapse-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--smui-onSurfaceColor);
+  background-color: transparent;
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    background-color: var(--smui-onSurfaceHover);
+  }
+
+  &:active {
+    background-color: var(--smui-onSurfaceActive);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: 2px;
+  }
+}

package/less/components/avatar/avatar.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./avatar.less";

package/less/components/avatar/avatar.less

@@ -0,0 +1,74 @@
+.smwb-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+  width: @avatarSizeMedium;
+  height: @avatarSizeMedium;
+  font-size: (@avatarSizeMedium / 2.5);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--smui-onPrimaryColor);
+  background-color: var(--smui-primaryColor);
+
+  &_small {
+    width: @avatarSizeSmall;
+    height: @avatarSizeSmall;
+    font-size: (@avatarSizeSmall / 2.5);
+  }
+
+  &_large {
+    width: @avatarSizeLarge;
+    height: @avatarSizeLarge;
+    font-size: (@avatarSizeLarge / 2.5);
+  }
+
+  &_circular {
+    border-radius: @circleBorderRadius;
+  }
+
+  &_rounded {
+    border-radius: @smui-radius-lg;
+  }
+
+  &_square {
+    border-radius: 0;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    color: transparent;
+    text-align: center;
+  }
+
+  &__fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.smwb-avatar-group {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+
+  .smwb-avatar {
+    border: @avatarGroupBorder solid var(--smui-surfaceBackground);
+    box-sizing: content-box;
+
+    &:not(:last-child) {
+      margin-left: (-1 * @avatarGroupOverlap);
+    }
+  }
+
+  &__surplus {
+    background-color: var(--smui-surfaceVariant);
+    color: var(--smui-onSurfaceVariant);
+    font-size: 0.8rem;
+  }
+}

package/less/components/badge/badge.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./badge.less";

package/less/components/badge/badge.less

@@ -0,0 +1,66 @@
+.smwb-badge {
+  border-radius: 10px;
+  z-index: 2;
+  font-weight: 500;
+  font-size: 0.75rem;
+  padding: 0 @badgePaddingX;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  height: 20px;
+  min-width: 20px;
+  &_outside {
+    position: absolute;
+    &_top {
+      top: 0;
+      &_left {
+        transform: scale(1) translate(-50%, -50%);
+        left: -2px;
+      }
+      &_right {
+        right: -2px;
+        transform: scale(1) translate(50%, -50%);
+      }
+    }
+    &_bottom {
+      bottom: 0;
+      &_right {
+        right: -2px;
+        transform: scale(1) translate(50%, 50%);
+      }
+      &_left {
+        transform: scale(1) translate(-50%, 50%);
+        left: -2px;
+      }
+    }
+  }
+  &_inside {
+    position: static;
+  }
+
+  &_success {
+    background-color: var(--smui-successColor);
+  }
+
+  &_danger {
+    background-color: var(--smui-errorColor);
+  }
+  &_primary {
+    background-color: var(--smui-primaryColor);
+  }
+
+  &_no-content {
+    padding: 0;
+    width: 8px;
+    height: 8px;
+    min-width: auto;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+}

package/less/components/bottomBar/bottomBar.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./bottomBar.less";

package/less/components/bottomBar/bottomBar.less

@@ -0,0 +1,84 @@
+.smwb-bottom-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  color: var(--smui-onSurfaceVariant);
+  background-color: var(--smui-surfaceBackground);
+  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+
+  &__nav {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    min-height: 56px;
+  }
+
+  &__item {
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: @smui-space-xs;
+    padding: @smui-space-sm @smui-space-xs;
+    border: 0;
+    background: transparent;
+    color: var(--smui-primaryTextColor);
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:active {
+      background-color: var(--smui-onSurfaceActive);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+
+    &_active {
+      color: var(--smui-primaryColor);
+      background-color: var(--smui-navItemActiveBg);
+
+      .smwb-bottom-bar__item-icon,
+      .smwb-bottom-bar__item-title {
+        color: var(--smui-primaryColor);
+      }
+
+      &:hover {
+        background-color: var(--smui-primaryColorHover);
+      }
+
+      &:active {
+        background-color: var(--smui-primaryColorActive);
+      }
+    }
+  }
+
+  &__item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  &__item-title {
+    font-size: 0.75rem;
+    line-height: 1.2;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+}

package/less/components/breadcrumbs/breadcrumbs.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./breadcrumbs.less";

package/less/components/breadcrumbs/breadcrumbs.less

@@ -0,0 +1,57 @@
+.smwb-breadcrumbs {
+  color: var(--smui-onSurfaceVariant);
+  font-size: 0.875rem;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: @breadcrumbsGap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+      transition: color 0.15s ease-in-out;
+
+      &:hover {
+        color: var(--smui-primaryColor);
+        text-decoration: underline;
+      }
+    }
+
+    &:last-child {
+      color: var(--smui-onSurfaceColor);
+      font-weight: 500;
+    }
+  }
+
+  &__separator {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    opacity: 0.6;
+  }
+
+  &__expand {
+    border: 0;
+    background-color: var(--smui-onSurfaceHover);
+    color: inherit;
+    cursor: pointer;
+    border-radius: @smui-radius-sm;
+    padding: 0 @smui-space-xs;
+    line-height: 1.4;
+    transition: background-color 0.15s ease-in-out;
+
+    &:hover {
+      background-color: var(--smui-onSurfaceActive);
+    }
+  }
+}

package/less/components/button/button.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./button.less";