@smwb/ui-styles 1.0.0

package/less/components/checkbox/checkbox.less

@@ -0,0 +1,109 @@
+.smwb-text-field-checkbox {
+    min-width: 0 !important;
+}
+
+.smwb-checkbox {
+  &__icon {
+    opacity: 0;
+    transition: all 0.1s ease-in-out;
+    color: var(--smui-onPrimaryColor);
+  }
+  &__btn {
+    user-select: none;
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    border-radius: @checkboxBorderRadius;
+    border: 2px solid var(--smui-checkboxBorderColor);
+    background-color: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: all 0.2s ease-in-out;
+    &::before {
+      width: 40px;
+      height: 40px;
+      border-radius: @circleBorderRadius;
+      content: "";
+      transform: translate(-50%, -50%) scale(0);
+      transition: all 0.2s ease-in-out;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+  }
+
+  &__wrapper {
+    color: var(--smui-primaryTextColor);
+    display: flex;
+    align-items: center;
+    gap: @checkboxGroupGap;
+    &.smwb-indeterminate {
+      .smwb-checkbox__btn {
+        background-color: var(--smui-checkboxCheckedBg);
+        border-color: var(--smui-checkboxCheckedBg);
+        .smwb-checkbox__icon {
+          opacity: 1;
+        }
+      }
+    }
+    &.smwb-disabled {
+      pointer-events: none;
+      .smwb-checkbox__btn {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  &__input {
+    display: none;
+    &:hover {
+      & ~ .smwb-checkbox__btn::before {
+        background-color: var(--smui-onSurfaceHover);
+        transform: translate(-50%, -50%) scale(1);
+      }
+      &:active {
+        & ~ .smwb-checkbox__btn::before {
+          background-color: var(--smui-onSurfaceActive);
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+    }
+    &:checked {
+      & ~ .smwb-checkbox__btn {
+        background-color: var(--smui-checkboxCheckedBg);
+        border-color: var(--smui-checkboxCheckedBg);
+        .smwb-checkbox__icon {
+          opacity: 1;
+        }
+      }
+      &:hover {
+        & ~ .smwb-checkbox__btn::before {
+          background-color: var(--smui-primaryColorHover);
+          transform: translate(-50%, -50%) scale(1);
+        }
+        &:active {
+          & ~ .smwb-checkbox__btn::before {
+            background-color: var(--smui-primaryColorActive);
+            transform: translate(-50%, -50%) scale(1);
+          }
+        }
+      }
+      &:disabled {
+        & ~ .smwb-checkbox__btn {
+          background-color: var(--smui-checkboxDisabledColor);
+          border-color: transparent;
+          &.smwb-indeterminate {
+            background-color: var(--smui-checkboxDisabledColor);
+            border-color: transparent;
+          }
+          .smwb-checkbox__icon {
+            color: var(--smui-disabledTextColor);
+          }
+        }
+      }
+    }
+  }
+}

package/less/components/chip/chip.entry.less

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

package/less/components/chip/chip.less

@@ -0,0 +1,121 @@
+.smwb-chip {
+  position: relative;
+  user-select: none;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: @chipGap;
+  padding: 0 @chipPaddingX;
+  border-radius: @chipsBorderRadius;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  color: var(--smui-primaryTextColor);
+  &.smwb-disabled {
+    opacity: 0.8;
+    pointer-events: none;
+    background-color: var(--smui-disabledBgColor);
+    border-color: var(--smui-disabledBgColor);
+    color: var(--smui-disabledTextColor);
+    &.smwb-outlined {
+      border: 1px solid var(--smui-disabledBgColor);
+      background: none;
+    }
+    i {
+      color: var(--smui-disabledTextColor);
+    }
+  }
+  &.smwb-filled:not(&.smwb-disabled) {
+    background-color: var(--smui-chipsBg);
+    box-shadow: @chipsDefaultShadow;
+    &:hover {
+      background-color: var(--smui-chipsHoverBg);
+    }
+    &:active {
+      background-color: var(--smui-chipsActiveBg);
+      box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 16%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 3px 0px rgb(0 0 0 / 12%);
+    }
+    &.smwb-selected {
+      background-color: var(--smui-chipsSelectedBg);
+    }
+  }
+
+  &.smwb-outlined:not(&.smwb-disabled) {
+    border: 1px solid var(--smui-chipsOutlinedBorder);
+    &:hover {
+      background-color: var(--smui-chipsHoverBg);
+    }
+    &:active {
+      background-color: var(--smui-chipsActiveBg);
+      box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 11%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 3px 0px rgb(0 0 0 / 12%);
+    }
+    &.smwb-selected {
+      background-color: var(--smui-chipsSelectedBg);
+      // border: 1px solid transparent;
+    }
+  }
+
+  &__delete-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      fill: var(--smui-chipsIconColor);
+      transition: all 0.15s ease-in-out;
+      &:hover {
+        fill: var(--smui-chipsIconColorHover);
+      }
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // delete control is a <button> now — strip UA chrome (additive)
+  &__delete-icon {
+    background: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  &_size-small {
+    height: 24px;
+    padding: 0 @smui-space-sm;
+    font-size: 0.75rem;
+  }
+
+  .smui-chip-color(@n; @c; @on) {
+    &.smwb-chip_color-@{n} {
+      &.smwb-filled {
+        background-color: @c;
+        color: @on;
+        &:hover {
+          background-color: @c;
+          filter: brightness(0.94);
+        }
+        &:active {
+          background-color: @c;
+          filter: brightness(0.88);
+        }
+      }
+      &.smwb-outlined {
+        color: @c;
+        border: 1px solid @c;
+        background: transparent;
+      }
+    }
+  }
+  .smui-chip-color(primary; var(--smui-primaryColor); var(--smui-onPrimaryColor));
+  .smui-chip-color(secondary; var(--smui-secondaryColor); var(--smui-onSecondaryColor));
+  .smui-chip-color(error; var(--smui-errorColor); var(--smui-onErrorColor));
+  .smui-chip-color(success; var(--smui-successColor); var(--smui-onSuccessColor));
+  .smui-chip-color(warning; var(--smui-warningColor); var(--smui-onWarningColor));
+  .smui-chip-color(info; var(--smui-infoColor); var(--smui-onInfoColor));
+}

package/less/components/datePicker/dataPicker.entry.less

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

package/less/components/datePicker/dataPicker.less

@@ -0,0 +1,235 @@
+.smwb-date-picker {
+  border-radius: 4px;
+  background-color: var(--smui-surfaceBackground);
+  box-shadow+: rgb(0 0 0 / 20%) 0 5px 5px -3px;
+  box-shadow+: rgb(0 0 0 / 14%) 0px 8px 10px 1px;
+  box-shadow+: rgb(0 0 0 / 12%) 0 3px 14px 2px;
+  width: 328px;
+  max-height: 428px;
+  color: var(--smui-primaryTextColor);
+  overflow: hidden;
+  z-index: 1300;
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    padding: @datePickerHeaderPadding;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+  }
+
+  &__action-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 80px;
+    user-select: none;
+    cursor: pointer;
+    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    > .smwb-icon__wrapper {
+      margin-right: -4px;
+      opacity: 1;
+      transition+: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      transition+: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+    &--disabled {
+      color: var(--smui-disabledTextColor);
+      cursor: default;
+      pointer-events: none;
+
+      > .smwb-icon__wrapper {
+        opacity: 0;
+        visibility: hidden;
+        transition+: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        transition+: visibility 0ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
+      }
+    }
+
+    &--active {
+      > .smwb-icon__wrapper {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &__action-text {
+    font-size: 14px;
+    line-height: 19px;
+    font-weight: 500;
+    margin-right: @datePickerLabelGap;
+    text-transform: capitalize;
+  }
+
+  &__icon-button {
+    display: inline-flex;
+    position: relative;
+    padding: @datePickerPadding;
+    user-select: none;
+    background-color: transparent;
+    border-radius: 50%;
+    font-size: 24px;
+    color: inherit;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:active:not(&--disabled) {
+      background-color: var(--smui-onSurfaceActive);
+    }
+
+    &--small {
+      padding: @datePickerYearPadding;
+    }
+
+    &--edge-start {
+      margin-left: -12px;
+    }
+
+    &--edge-end {
+      margin-right: -12px;
+    }
+
+    &--small &--edge-start {
+      margin-left: -8px;
+    }
+
+    &--small &--edge-end {
+      margin-right: -8px;
+    }
+
+    &--disabled {
+      color: var(--smui-dataPickerIconDisabledColor);
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  &__switch {
+    opacity: 1;
+    transition+: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &--hidden {
+      opacity: 0;
+      visibility: hidden;
+      transition+: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      transition+: visibility 0ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
+    }
+  }
+
+  &__days {
+    position: relative;
+    padding-bottom: @datePickerPadding;
+  }
+
+  &__week-days {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__week-day,
+  &__day,
+  &__day-hidden {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    margin: 0 @datePickerDayMarginX;
+    user-select: none;
+  }
+
+  &__week-day {
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--smui-dataPickerWeekDayColor);
+    text-transform: capitalize;
+  }
+
+  &__month {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__week {
+    display: flex;
+    justify-content: center;
+    margin-top: @datePickerHelperMarginTop;
+  }
+
+  &__day {
+    position: relative;
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: 500;
+    user-select: none;
+    background-color: transparent;
+    border-radius: 50%;
+    color: inherit;
+    transition+: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition+: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover:not(&--active) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:active:not(&--active):not(&--disabled) {
+      background-color: var(--smui-onSurfaceActive);
+    }
+
+    &--current {
+      border: 1px solid var(--smui-primaryColor);
+      color: var(--smui-primaryColor);
+    }
+
+    &--outside:not(&--selected),
+    &--disabled {
+      color: var(--smui-disabledTextColor);
+    }
+
+    &--active:not(&--disabled) {
+      color: var(--smui-onPrimaryColor);
+      background-color: var(--smui-primaryColor);
+    }
+
+    &--disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  &__body {
+    position: relative;
+  }
+
+  &__overflow {
+    max-height: 309px;
+    overflow-y: auto;
+    border-top: 1px solid var(--smui-dividerColor);
+  }
+
+  &__list {
+    padding: @datePickerFooterPaddingY 0;
+  }
+
+  &__list-item {
+    text-transform: capitalize;
+  }
+}
+
+.smwb-date-picker__day--in-range:not(.smwb-date-picker__day--active) {
+  background-color: var(--smui-onSurfaceHover);
+  border-radius: 0;
+}

package/less/components/divider/divider.entry.less

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

package/less/components/divider/divider.less

@@ -0,0 +1,69 @@
+.smwb-divider {
+  border: 0;
+  margin: 0;
+  flex-shrink: 0;
+  background-color: transparent;
+
+  &_horizontal {
+    width: 100%;
+    border-bottom: 1px solid var(--smui-dividerColor);
+
+    &.smwb-divider_inset {
+      margin-left: @smui-space-10;
+    }
+
+    &.smwb-divider_middle {
+      margin-left: @dividerSpacing;
+      margin-right: @dividerSpacing;
+    }
+  }
+
+  &_vertical {
+    align-self: stretch;
+    height: auto;
+    width: 1px;
+    border-left: 1px solid var(--smui-dividerColor);
+
+    &.smwb-divider_middle {
+      margin-top: @dividerSpacing;
+      margin-bottom: @dividerSpacing;
+    }
+  }
+
+  &_with-text {
+    display: flex;
+    align-items: center;
+    border-bottom: 0;
+    color: var(--smui-onSurfaceVariant);
+    font-size: 0.875rem;
+    white-space: nowrap;
+
+    &::before,
+    &::after {
+      content: "";
+      flex: 1 1 auto;
+      border-bottom: 1px solid var(--smui-dividerColor);
+    }
+
+    .smwb-divider__text {
+      padding: 0 @dividerTextGap;
+    }
+
+    &.smwb-divider_align-left {
+      &::before {
+        flex: 0 0 5%;
+      }
+    }
+
+    &.smwb-divider_align-right {
+      &::after {
+        flex: 0 0 5%;
+      }
+    }
+  }
+
+  &_flex-item {
+    align-self: stretch;
+    height: auto;
+  }
+}

package/less/components/expansionPanel/expansionPanel.entry.less

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

package/less/components/expansionPanel/expansionPanel.less

@@ -0,0 +1,136 @@
+.smwb-expansion-panel {
+  display: flex;
+  flex-direction: column;
+  gap: @expansionPanelGap;
+  min-width: 0;
+  width: 100%;
+  padding: @expansionPanelPadding;
+  background-color: var(--smui-surfaceBackground);
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: @expansionPanelRadius;
+  color: var(--smui-onSurfaceColor);
+
+  &_row {
+    grid-column: 1 / -1;
+  }
+
+  &__head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: @expansionPanelGap;
+  }
+
+  &__header {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-xs;
+    flex-shrink: 0;
+  }
+
+  &__body {
+    min-width: 0;
+  }
+
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: @expansionPanelGap;
+    padding: @expansionPanelPadding;
+    border: 1px dashed var(--smui-dividerColor);
+    border-radius: @expansionPanelRadius;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: @expansionPanelOverlayZ;
+    display: flex;
+    flex-direction: column;
+    padding: @smui-space-md;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &__dialog {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: @expansionPanelGap;
+    width: 100%;
+    min-height: 0;
+    max-width: none;
+    max-height: none;
+    padding: @expansionPanelPadding;
+    background-color: var(--smui-surfaceBackground);
+    border-radius: @expansionPanelRadius;
+    overflow: hidden;
+  }
+
+  &__body_fullscreen {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.smui-media-down(md; {
+  .smwb-expansion-panel {
+    &__overlay {
+      padding: 0;
+    }
+
+    &__dialog {
+      flex: 1 1 auto;
+      width: 100%;
+      min-height: 100%;
+      border-radius: 0;
+      padding-top: calc(@expansionPanelPadding + env(safe-area-inset-top, 0px));
+      padding-right: calc(@expansionPanelPadding + env(safe-area-inset-right, 0px));
+      padding-bottom: calc(@expansionPanelPadding + env(safe-area-inset-bottom, 0px));
+      padding-left: calc(@expansionPanelPadding + env(safe-area-inset-left, 0px));
+    }
+
+    &__body_fullscreen {
+      justify-content: flex-start;
+    }
+
+    &__head {
+      align-items: center;
+    }
+  }
+});
+
+.smui-media-down(sm; {
+  .smwb-expansion-panel {
+    padding: @smui-space-md;
+
+    &__head {
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    &__controls {
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+
+    &__placeholder {
+      flex-direction: column;
+      align-items: stretch;
+      padding: @smui-space-md;
+      text-align: center;
+    }
+  }
+});

package/less/components/fileDrop/fileDrop.entry.less

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