@smwb/ui-styles 1.0.0

package/less/components/menu/menu.less

@@ -0,0 +1,121 @@
+.smwb-menu {
+  background-color: var(--smui-surfaceBackground);
+  border-radius: @menuBorderRadius;
+
+  &--floating {
+    box-shadow: @menuBoxShadow;
+    z-index: 1300;
+    min-width: 112px;
+    cursor: default;
+  }
+
+  &__list {
+    color: var(--smui-onSurfaceColor);
+
+    &--static {
+      display: flex;
+    }
+
+    &--floating {
+      padding: @menuListPaddingY 0;
+    }
+  }
+
+  &__item {
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    height: 48px;
+
+    &:not(&--selected):not(:active) {
+      &:hover {
+        &:before {
+          opacity: @menuOpacityHover;
+        }
+      }
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background-color: var(--smui-onSurfaceColor);
+      opacity: 0;
+      transition: opacity 15ms linear;
+    }
+
+    &--dense {
+      height: 32px;
+    }
+
+    &--disabled {
+      color: var(--smui-menuDisabledTextColor);
+      pointer-events: none;
+    }
+
+    &--selected {
+      &:before {
+        opacity: @menuOpacitySelected;
+      }
+    }
+
+    &:active {
+      &:before {
+        opacity: @menuOpacityActive;
+      }
+    }
+  }
+
+  &__item-inner {
+    display: flex;
+    align-items: center;
+    padding: 0 @menuItemPaddingX;
+    height: 100%;
+    color: currentColor;
+    gap: @menuItemGap;
+  }
+
+  &__text {
+    flex-grow: 1;
+
+    &--inset {
+      margin-left: @menuTextInset;
+    }
+
+    &--inset&--dense {
+      margin-left: @menuTextInsetDense;
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    font-size: 24px;
+
+    &--dense {
+      font-size: 20px;
+    }
+
+    &--start {
+      margin-right: @menuIconGap;
+    }
+
+    &--end {
+      margin-left: @menuIconGap;
+    }
+  }
+
+  &__divider {
+    &:not(&--vertical) {
+      margin: @menuDividerSpacing 0;
+      border-bottom: 1px solid var(--smui-menuDividerColor);
+    }
+
+    &--vertical {
+      margin: 0 @menuDividerSpacing;
+      border-right: 1px solid var(--smui-menuDividerColor);
+    }
+  }
+}

package/less/components/message/message.entry.less

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

package/less/components/message/message.less

@@ -0,0 +1,103 @@
+.smwb-message {
+  padding: @messagePadding;
+  min-height: 1rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: @messageBorderRadius;
+  line-height: 1.5;
+  position: relative;
+  &_filled {
+    background-color: var(--smui-messageBackground);
+    &.smwb-message_success {
+      color: var(--smui-successColor);
+      background-color: ~"color-mix(in srgb, var(--smui-successColor) 10%, transparent)";
+    }
+    &.smwb-message_info {
+      color: var(--smui-infoColor);
+      background-color: ~"color-mix(in srgb, var(--smui-infoColor) 10%, transparent)";
+    }
+    &.smwb-message_error {
+      color: var(--smui-errorColor);
+      background-color: ~"color-mix(in srgb, var(--smui-errorColor) 10%, transparent)";
+    }
+    &.smwb-message_warning {
+      color: var(--smui-warningColor);
+      background-color: ~"color-mix(in srgb, var(--smui-warningColor) 10%, transparent)";
+    }
+  }
+  &_outlined {
+    border: 1px solid var(--smui-outlineColor);
+    &.smwb-message_success {
+      border-color: var(--smui-successColor);
+      color: var(--smui-successColor);
+      background-color: ~"color-mix(in srgb, var(--smui-successColor) 8%, transparent)";
+    }
+    &.smwb-message_info {
+      border-color: var(--smui-infoColor);
+      color: var(--smui-infoColor);
+      background-color: ~"color-mix(in srgb, var(--smui-infoColor) 8%, transparent)";
+    }
+    &.smwb-message_error {
+      border-color: var(--smui-errorColor);
+      color: var(--smui-errorColor);
+      background-color: ~"color-mix(in srgb, var(--smui-errorColor) 8%, transparent)";
+    }
+    &.smwb-message_warning {
+      border-color: var(--smui-warningColor);
+      color: var(--smui-warningColor);
+      background-color: ~"color-mix(in srgb, var(--smui-warningColor) 8%, transparent)";
+    }
+  }
+  &_left-accent {
+    background-color: var(--smui-messageBackground);
+    border-left: 2px solid var(--smui-outlineColor);
+    border-radius: 0;
+    &.smwb-message_success {
+      border-color: var(--smui-successColor);
+      color: var(--smui-successColor);
+      background-color: ~"color-mix(in srgb, var(--smui-successColor) 8%, transparent)";
+    }
+    &.smwb-message_info {
+      border-color: var(--smui-infoColor);
+      color: var(--smui-infoColor);
+      background-color: ~"color-mix(in srgb, var(--smui-infoColor) 8%, transparent)";
+    }
+    &.smwb-message_error {
+      border-color: var(--smui-errorColor);
+      color: var(--smui-errorColor);
+      background-color: ~"color-mix(in srgb, var(--smui-errorColor) 8%, transparent)";
+    }
+    &.smwb-message_warning {
+      border-color: var(--smui-warningColor);
+      color: var(--smui-warningColor);
+      background-color: ~"color-mix(in srgb, var(--smui-warningColor) 8%, transparent)";
+    }
+  }
+  &__header {
+    font-size: 1.1em;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: @messageGap;
+    margin-bottom: @messageTitleMarginBottom;
+    width: 100%;
+    position: relative;
+  }
+  &__close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 2;
+    opacity: 0.8;
+    transition: opacity 0.2s ease-in-out;
+    color: currentColor;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}

package/less/components/modal/modal.entry.less

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

package/less/components/modal/modal.less

@@ -0,0 +1,215 @@
+.smwb-modal {
+  display: flex;
+  flex-direction: column;
+  min-height: 150px;
+  border-radius: @modalBorderRadius;
+  line-height: 1.5;
+  overflow-y: auto;
+  color: var(--smui-onSurfaceColor);
+  background-color: var(--smui-surfaceBackground);
+  box-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
+
+  &__header {
+    padding: @modalHeaderPadding;
+  }
+
+  &__content {
+    padding: @modalContentPadding;
+    flex-grow: 1;
+    overflow: hidden auto;
+  }
+
+  &__footer {
+    padding: @modalActionsPadding;
+  }
+
+  &.smwb-small {
+    width: 25%;
+    height: 25%;
+  }
+
+  &.smwb-medium {
+    width: min(480px, 90vw);
+    height: auto;
+    max-height: min(560px, 90vh);
+  }
+
+  &.smwb-large {
+    width: 50%;
+    height: 50%;
+  }
+
+  &.smwb-fullscreen {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
+
+  &__overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    inset: 0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: 1001;
+    overflow: hidden;
+
+    &-appear,
+    &-enter {
+      .smwb-modal {
+        &.smwb-fade {
+          opacity: 0;
+        }
+
+        &.smwb-scale {
+          opacity: 0;
+          transform: scale(0);
+        }
+
+        &.smwb-drop {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+
+      &-active {
+        @media (min-width: 800px) {
+          &:not(.smwb-fullscreen) {
+            &.smwb-dark {
+              background-color: @modalOverlayBg;
+              transition: background-color 225ms ease-in-out;
+            }
+
+            &.smwb-blured {
+              backdrop-filter: blur(5px);
+              transition: backdrop-filter 225ms ease-in-out;
+            }
+
+            &.smwb-darkBlured {
+              background-color: @modalOverlayBg;
+              backdrop-filter: blur(5px);
+              transition: backdrop-filter 225ms ease-in-out, background-color 225ms ease-in-out;
+            }
+          }
+        }
+
+        .smwb-modal {
+          &.smwb-fade {
+            opacity: 1;
+            transition: opacity 225ms ease-in-out;
+          }
+
+          &.smwb-scale {
+            opacity: 1;
+            transform: scale(1);
+            transition: opacity 225ms ease-in-out, transform 225ms ease-in-out;
+          }
+
+          &.smwb-drop {
+            opacity: 1;
+            transform: translateY(0);
+            transition: opacity 225ms ease-in-out, transform 225ms ease-in-out;
+          }
+        }
+      }
+    }
+
+    &-appear-done,
+    &-enter-done,
+    &-exit {
+      @media (min-width: 800px) {
+        &:not(.smwb-fullscreen) {
+          &.smwb-dark {
+            background-color: @modalOverlayBg;
+          }
+
+          &.smwb-blured {
+            backdrop-filter: blur(5px);
+          }
+
+          &.smwb-darkBlured {
+            background-color: @modalOverlayBg;
+            backdrop-filter: blur(5px);
+          }
+        }
+      }
+    }
+
+    &-exit {
+      &-active {
+        @media (min-width: 800px) {
+          &:not(.smwb-fullscreen) {
+            &.smwb-dark {
+              background-color: transparent;
+              transition: background-color 150ms ease-in-out;
+            }
+
+            &.smwb-blured {
+              backdrop-filter: blur(0);
+              transition: backdrop-filter 150ms ease-in-out;
+            }
+
+            &.smwb-darkBlured {
+              background-color: transparent;
+              backdrop-filter: blur(0);
+              transition: backdrop-filter 150ms ease-in-out, background-color 150ms ease-in-out;
+            }
+          }
+        }
+
+        .smwb-modal {
+          &.smwb-fade {
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+          }
+
+          &.smwb-scale {
+            opacity: 0;
+            transform: scale(0);
+            transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
+          }
+
+          &.smwb-drop {
+            opacity: 0;
+            transform: translateY(-100%);
+            transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 800px) {
+    &.smwb-small,
+    &.smwb-medium,
+    &.smwb-large,
+    &.smwb-fullscreen {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+    }
+  }
+
+  @media (max-height: 600px) {
+    min-height: 250px;
+    min-width: 280px;
+  }
+}
+
+.smwb-scrollbar {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--smui-scrollThumbColor);
+    border-radius: 999px;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}

package/less/components/page/page.entry.less

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

package/less/components/page/page.less

@@ -0,0 +1,39 @@
+.smwb-page {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: @smui-space-xxl;
+  color: var(--smui-onSurfaceColor);
+
+  &_gutterless {
+    padding: 0;
+  }
+
+  &__inner {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &_max-sm &__inner {
+    max-width: @smui-bp-sm;
+  }
+  &_max-md &__inner {
+    max-width: @smui-bp-md;
+  }
+  &_max-lg &__inner {
+    max-width: @smui-bp-lg;
+  }
+  &_max-xl &__inner {
+    max-width: @smui-bp-xl;
+  }
+  &_max-full &__inner {
+    max-width: none;
+  }
+}
+
+.smui-media-down(sm; {
+  .smwb-page {
+    padding: @smui-space-lg;
+  }
+});

package/less/components/pageHeader/pageHeader.entry.less

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

package/less/components/pageHeader/pageHeader.less

@@ -0,0 +1,49 @@
+.smwb-page-header {
+  display: flex;
+  flex-direction: column;
+  // Keep natural height as a flex child: never grow or shrink. Without
+  // this, a height-constrained flex-column parent (e.g. a page hosting a
+  // virtualized list) redistributes height through the header and
+  // destabilizes the sibling's scroll-height contract.
+  flex: 0 0 auto;
+  gap: @smui-space-sm;
+  width: 100%;
+  margin-bottom: @smui-space-xl;
+
+  &_divider {
+    padding-bottom: @smui-space-lg;
+    border-bottom: 1px solid var(--smui-dividerColor);
+  }
+
+  &__row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: @smui-space-lg;
+    flex-wrap: wrap;
+  }
+
+  &__titles {
+    min-width: 0;
+  }
+
+  &__subtitle {
+    margin-top: @smui-space-xxs;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-sm;
+    flex-shrink: 0;
+  }
+}
+
+.smui-media-down(sm; {
+  .smwb-page-header__row {
+    flex-direction: column;
+  }
+  .smwb-page-header__actions {
+    width: 100%;
+  }
+});

package/less/components/pagination/pagination.entry.less

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

package/less/components/pagination/pagination.less

@@ -0,0 +1,103 @@
+.smwb-pagination {
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: @paginationGap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: @paginationItemSize;
+    height: @paginationItemSize;
+    padding: 0 @paginationItemPaddingX;
+    border: 0;
+    border-radius: @circleBorderRadius;
+    background-color: transparent;
+    color: var(--smui-onSurfaceColor);
+    font: inherit;
+    font-size: 0.875rem;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.15s ease-in-out;
+
+    &:hover:not(:disabled) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:disabled {
+      color: var(--smui-disabledTextColor);
+      cursor: default;
+    }
+
+    &_selected {
+      background-color: var(--smui-primaryColor);
+      color: var(--smui-onPrimaryColor);
+
+      &:hover:not(:disabled) {
+        background-color: var(--smui-primaryColor);
+      }
+    }
+  }
+
+  &__nav {
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: @paginationItemSize;
+    height: @paginationItemSize;
+    color: var(--smui-onSurfaceVariant);
+    user-select: none;
+  }
+
+  &_small {
+    .smwb-pagination__item,
+    .smwb-pagination__ellipsis {
+      min-width: @paginationItemSizeSmall;
+      height: @paginationItemSizeSmall;
+      font-size: 0.8125rem;
+    }
+  }
+
+  &_disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // additive: variant / shape / color (defaults filled+circular+default unchanged)
+  &_outlined .smwb-pagination__item {
+    border: 1px solid var(--smui-dividerColor);
+    background: transparent;
+  }
+
+  &_shape-rounded .smwb-pagination__item,
+  &_shape-rounded .smwb-pagination__ellipsis {
+    border-radius: @smui-radius-md;
+  }
+
+  .smui-pag-color(@n; @c; @on) {
+    &_color-@{n} .smwb-pagination__item_selected {
+      background-color: @c;
+      color: @on;
+      &:hover:not(:disabled) {
+        background-color: @c;
+      }
+    }
+  }
+  .smui-pag-color(primary; var(--smui-primaryColor); var(--smui-onPrimaryColor));
+  .smui-pag-color(secondary; var(--smui-secondaryColor); var(--smui-onSecondaryColor));
+  .smui-pag-color(error; var(--smui-errorColor); var(--smui-onErrorColor));
+  .smui-pag-color(success; var(--smui-successColor); var(--smui-onSuccessColor));
+  .smui-pag-color(warning; var(--smui-warningColor); var(--smui-onWarningColor));
+  .smui-pag-color(info; var(--smui-infoColor); var(--smui-onInfoColor));
+}

package/less/components/progressIndicator/progressIndicator.entry.less

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