@smwb/ui-styles 1.0.0

package/less/components/button/button.less

@@ -0,0 +1,164 @@
+.smwb-button {
+  gap: @buttonGap;
+  overflow: hidden;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: @buttonBorderRadius;
+  letter-spacing: 1px;
+  vertical-align: middle;
+  word-spacing: 0;
+  line-height: 1.5;
+  min-width: 64px;
+  position: relative;
+  align-self: flex-start;
+  &:disabled,
+  &.smwb-disabled {
+    color: var(--smui-disabledTextColor);
+    pointer-events: none;
+    border-color: var(--smui-buttonDisabledBg);
+    &.smwb-contained {
+      background-color: var(--smui-buttonDisabledBg);
+      color: var(--smui-disabledTextColor);
+    }
+  }
+
+  &.smwb-full-width {
+    width: 100%;
+  }
+
+  &.smwb-small {
+    font-size: @smallButtonFontSize;
+    padding: @buttonPaddingSmall;
+  }
+  &.smwb-medium {
+    font-size: @mediumButtonFontSize;
+    padding: @buttonPaddingMedium;
+  }
+  &.smwb-large {
+    font-size: @largeButtonFontSize;
+    padding: @buttonPaddingLarge;
+  }
+
+  &.smwb-contained {
+    color: var(--smui-onPrimaryColor);
+    .smui-elevation(2);
+    &.smwb-primary {
+      &:not(.smwb-disabled) {
+        background-color: var(--smui-primaryColor);
+      }
+      &:hover {
+        background-color: var(--smui-buttonContainedHoverBg);
+        box-shadow: 0 4px 22px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+      }
+      &:disabled {
+        background-color: var(--smui-buttonDisabledBg);
+      }
+      &:focus {
+        background-color: var(--smui-buttonContainedFocusBg);
+      }
+      &:active {
+        background-color: var(--smui-buttonContainedActiveBg);
+      }
+    }
+  }
+
+  &.smwb-outlined {
+    background-color: transparent;
+    border: 1px solid var(--smui-outlineColor);
+    &.smwb-primary:not(.smwb-disabled) {
+      color: var(--smui-primaryColor);
+    }
+    &:hover {
+      background-color: var(--smui-buttonOutlinedHoverBg);
+    }
+    &:focus {
+      background-color: var(--smui-buttonOutlinedFocusBg);
+    }
+    &:active {
+      background-color: var(--smui-buttonOutlinedActiveBg);
+      border: 1px solid var(--smui-primaryColor);
+    }
+    &:disabled,
+    &.smwb-disabled {
+      background-color: transparent;
+      color: var(--smui-disabledTextColor);
+      border-color: var(--smui-buttonDisabledBg);
+    }
+  }
+
+  &.smwb-text {
+    background-color: transparent;
+    &.smwb-primary {
+      &:not(.smwb-disabled) {
+        color: var(--smui-primaryColor);
+      }
+      &:disabled {
+        background-color: transparent;
+      }
+      &:hover {
+        background-color: var(--smui-buttonOutlinedHoverBg);
+      }
+      &:focus {
+        background-color: var(--smui-buttonOutlinedFocusBg);
+      }
+      &:active {
+        background-color: var(--smui-buttonOutlinedActiveBg);
+      }
+    }
+    &:disabled {
+      background-color: transparent;
+      color: var(--smui-disabledTextColor);
+      border-color: var(--smui-buttonDisabledBg);
+    }
+  }
+
+  & * {
+    pointer-events: none;
+  }
+
+  // Semantic color modifiers (additive; primary keeps the default look)
+  .smui-btn-color(@n; @c; @on; @h; @a) {
+    &_color-@{n} {
+      &.smwb-contained {
+        background-color: @c;
+        color: @on;
+        &:hover:not(.smwb-disabled) {
+          background-color: ~"color-mix(in srgb, @{c} 88%, #000)";
+        }
+        &:focus:not(.smwb-disabled) {
+          background-color: ~"color-mix(in srgb, @{c} 78%, #000)";
+        }
+        &:active:not(.smwb-disabled) {
+          background-color: ~"color-mix(in srgb, @{c} 78%, #000)";
+        }
+      }
+      &.smwb-outlined {
+        color: @c;
+        border-color: @c;
+        &:hover:not(.smwb-disabled) {
+          background-color: @h;
+        }
+      }
+      &.smwb-text {
+        color: @c;
+        &:hover:not(.smwb-disabled) {
+          background-color: @h;
+        }
+      }
+    }
+  }
+  .smui-btn-color(secondary; var(--smui-secondaryColor); var(--smui-onSecondaryColor);
+    var(--smui-secondaryColorHover); var(--smui-secondaryColorActive));
+  .smui-btn-color(error; var(--smui-errorColor); var(--smui-onErrorColor);
+    var(--smui-errorColorHover); var(--smui-errorColorActive));
+  .smui-btn-color(success; var(--smui-successColor); var(--smui-onSuccessColor);
+    var(--smui-successColorHover); var(--smui-successColorActive));
+  .smui-btn-color(warning; var(--smui-warningColor); var(--smui-onWarningColor);
+    var(--smui-warningColorHover); var(--smui-warningColorActive));
+  .smui-btn-color(info; var(--smui-infoColor); var(--smui-onInfoColor);
+    var(--smui-infoColorHover); var(--smui-infoColorActive));
+}

package/less/components/buttonGroup/buttonGroup.entry.less

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

package/less/components/buttonGroup/buttonGroup.less

@@ -0,0 +1,95 @@
+.smwb-button-group {
+  display: inline-flex;
+  border-radius: 24px;
+
+  &.smwb-vertical {
+    flex-direction: column;
+  }
+
+  &.smwb-contained {
+    .smui-elevation(2);
+  }
+
+  &.smwb-full-width {
+    width: 100%;
+  }
+
+  &__grouped {
+    align-self: stretch;
+    min-width: 40px;
+
+    .smwb-contained & {
+      box-shadow: none;
+    }
+
+    .smwb-horizontal & {
+      &:not(:first-of-type) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &.smwb-outlined {
+          margin-left: -1px;
+        }
+      }
+
+      &:not(:last-of-type) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &.smwb-outlined {
+          border-right-color: transparent;
+        }
+
+        &.smwb-contained {
+          border-right: 1px solid ~"color-mix(in srgb, #fff 12%, var(--smui-primaryColor))";
+        }
+
+        &.smwb-text {
+          border-right: 1px solid var(--smui-primaryColor);
+        }
+
+        &.smwb-disabled {
+          &.smwb-text,
+          &.smwb-contained {
+            border-right: 1px solid var(--smui-disabledBgColor);
+          }
+        }
+      }
+    }
+
+    .smwb-vertical & {
+      &:not(:first-of-type) {
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+
+        &.smwb-outlined {
+          margin-top: -1px;
+        }
+      }
+
+      &:not(:last-of-type) {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &.smwb-outlined {
+          border-bottom-color: transparent;
+        }
+
+        &.smwb-contained {
+          border-bottom: 1px solid ~"color-mix(in srgb, #fff 12%, var(--smui-primaryColor))";
+        }
+
+        &.smwb-text {
+          border-bottom: 1px solid ~"color-mix(in srgb, var(--smui-primaryColor) 50%, transparent)";
+        }
+
+        &.smwb-disabled {
+          &.smwb-text,
+          &.smwb-contained {
+            border-bottom: 1px solid var(--smui-disabledBgColor);
+          }
+        }
+      }
+    }
+  }
+}

package/less/components/card/card.entry.less

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

package/less/components/card/card.less

@@ -0,0 +1,56 @@
+.smwb-card {
+  background-color: var(--smui-surfaceBackground);
+  padding: @cardPadding;
+  border-radius: @cardBorderRadius;
+  color: var(--smui-onSurfaceColor);
+  transition: all 0.25s ease-in-out;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  &_elevated {
+    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 11%), 0px 1px 3px 0px rgb(0 0 0 / 11%);
+    &:hover {
+      box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 20%), 0px 1px 4px 0px rgb(0 0 0 / 11%), 0px 1px 4px 0px rgb(0 0 0 / 11%);
+    }
+    &:active {
+      background-color: var(--smui-onSurfaceHover);
+    }
+  }
+  &_outlined {
+    border: 1px solid var(--smui-outlineColor);
+    &:hover {
+      background-color: var(--smui-onSurfaceHover);
+      box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 11%), 0px 1px 4px 0px rgb(0 0 0 / 11%), 0px 1px 11px 0px rgb(0 0 0 / 11%);
+    }
+    &:active {
+      background-color: var(--smui-onSurfaceHover);
+    }
+  }
+  &_filled {
+    background-color: var(--smui-surfaceVariant);
+    &:hover {
+      box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 14%), 0px 1px 4px 0px rgb(0 0 0 / 11%), 0px 1px 4px 0px rgb(0 0 0 / 11%);
+    }
+    &:active {
+      background-color: var(--smui-onSurfaceActive);
+    }
+  }
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+  &__title {
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+  &__footer {
+    margin-top: @smui-space-md;
+  }
+  &_interactive {
+    cursor: pointer;
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+}

package/less/components/carousel/carousel.entry.less

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

package/less/components/carousel/carousel.less

@@ -0,0 +1,75 @@
+.smwb-carousel {
+  max-width: 412px;
+}
+
+.smwb-carousel__inner {
+  position: relative;
+}
+
+.smwb-carousel__track {
+  text-align: center;
+  overflow: hidden;
+
+  cursor: pointer;
+  margin-left: -4px;
+  margin-right: -4px;
+  // Capture horizontal swipes for navigation while still allowing
+  // the page to scroll vertically over the carousel on touch.
+  touch-action: pan-y;
+}
+
+.smwb-carousel__layer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  will-change: transform;
+}
+
+.smwb-carousel__slide {
+  flex-shrink: 0;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.smwb-carousel__slide-inner {
+  border-radius: 28px;
+  overflow: hidden;
+  will-change: width;
+
+  img {
+    height: 205px;
+    aspect-ratio: 0.9;
+    object-fit: cover;
+    width: 100%;
+    user-select: none;
+  }
+}
+
+.smwb-carousel__navigation {
+  display: flex;
+  justify-content: center;
+
+  & .current {
+    background-color: var(--smui-onPrimaryContainerActive);
+  }
+
+  &__dot {
+    margin: 3px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid var(--smui-onPrimaryContainer);
+  }
+}
+
+.smwb-carousel__arrow {
+  cursor: pointer;
+  position: absolute;
+  background: var(--smui-onPrimaryContainerActive);
+  color: var(--smui-onPrimaryContainer);
+  border-radius: 50%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/less/components/chat/chat.entry.less

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