@laser-ui/themes 0.0.1

package/components/radio.scss

@@ -0,0 +1,203 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(radio) {
+  $selector: &;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+
+  &:hover {
+    @include mixins.e(input) {
+      border-color: var(--#{variables.$prefix}color-light-primary);
+    }
+  }
+
+  @include mixins.when(checked) {
+    &:not(.is-disabled) {
+      @include mixins.e(input) {
+        border-color: var(--#{variables.$prefix}color-primary);
+      }
+
+      @include mixins.e(input-wrapper) {
+        &::before {
+          animation: #{variables.$prefix}wave-spread 0.36s linear;
+          animation-fill-mode: backwards;
+        }
+      }
+    }
+
+    @include mixins.e(input-wrapper) {
+      &::after {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+
+  @include mixins.when(disabled) {
+    color: var(--#{variables.$prefix}color-disabled);
+    pointer-events: none;
+
+    @include mixins.e(input-wrapper) {
+      background-color: var(--#{variables.$prefix}background-color-disabled);
+
+      &::after {
+        background-color: var(--#{variables.$prefix}color-disabled);
+      }
+    }
+  }
+
+  @include mixins.m(button) {
+    height: var(--size);
+    font-size: var(--font-size);
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px solid var(--#{variables.$prefix}color-border);
+    border-radius: var(--#{variables.$prefix}border-radius);
+    transition:
+      border-color var(--#{variables.$prefix}animation-duration-base) linear,
+      background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:has(:focus-visible) {
+      border-color: var(--#{variables.$prefix}color-primary-lighter);
+      box-shadow: 0 0 0 3px rgb(var(--#{variables.$prefix}color-primary-rgb) / var(--#{variables.$prefix}box-shadow-opacity-normal));
+    }
+
+    @include mixins.when(disabled) {
+      background-color: var(--#{variables.$prefix}background-color-disabled);
+
+      @include mixins.when(checked) {
+        color: rgb(var(--#{variables.$prefix}color-primary-rgb) / 50%);
+      }
+    }
+
+    @include mixins.e(input-wrapper) {
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+
+    @include mixins.e(label) {
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 calc(var(--padding-size) - 1px);
+      margin-left: unset;
+      transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+    }
+  }
+
+  @include mixins.m(button-outline) {
+    &:hover {
+      color: var(--#{variables.$prefix}color-light-primary);
+      border-color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    @include mixins.when(checked) {
+      color: var(--#{variables.$prefix}color-primary);
+      border-color: var(--#{variables.$prefix}color-primary);
+    }
+  }
+
+  @include mixins.m(button-fill) {
+    background-color: var(--#{variables.$prefix}background-color);
+
+    &:hover {
+      color: var(--#{variables.$prefix}color-light-primary);
+      border-color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    @include mixins.when(checked) {
+      color: map.get(variables.$colors, 'white');
+      background-color: var(--#{variables.$prefix}color-primary);
+      border-color: var(--#{variables.$prefix}color-primary);
+    }
+  }
+
+  @include mixins.m(button-small) {
+    --size: var(--#{variables.$prefix}radio-size, var(--#{variables.$prefix}size-small));
+    --padding-size: var(--#{variables.$prefix}radio-padding-size, var(--#{variables.$prefix}padding-size-small));
+    --font-size: var(--#{variables.$prefix}radio-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(button-medium) {
+    --size: var(--#{variables.$prefix}radio-size, var(--#{variables.$prefix}size-medium));
+    --padding-size: var(--#{variables.$prefix}radio-padding-size, var(--#{variables.$prefix}padding-size-medium));
+    --font-size: var(--#{variables.$prefix}radio-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(button-large) {
+    --size: var(--#{variables.$prefix}radio-size, var(--#{variables.$prefix}size-large));
+    --padding-size: var(--#{variables.$prefix}radio-padding-size, var(--#{variables.$prefix}padding-size-large));
+    --font-size: var(--#{variables.$prefix}radio-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.e(input-wrapper) {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    background-color: var(--#{variables.$prefix}background-color-input);
+    border-radius: 50%;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      border: 1px solid var(--#{variables.$prefix}color-primary);
+      border-radius: 50%;
+      opacity: 0;
+    }
+
+    &::after {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      bottom: 4px;
+      left: 4px;
+      content: '';
+      background-color: var(--#{variables.$prefix}color-primary);
+      border-radius: 50%;
+      opacity: 0;
+      transition:
+        transform var(--#{variables.$prefix}animation-duration-fast) linear,
+        opacity var(--#{variables.$prefix}animation-duration-fast) linear;
+      transform: scale(0);
+    }
+  }
+
+  @include mixins.e(input) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    appearance: none;
+    cursor: inherit;
+    border: 1px solid var(--#{variables.$prefix}color-border);
+    border-radius: 50%;
+    outline: none;
+    transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:focus {
+      border-color: var(--#{variables.$prefix}color-light-primary);
+      box-shadow: 0 0 0 3px rgb(var(--#{variables.$prefix}color-primary-rgb) / var(--#{variables.$prefix}box-shadow-opacity-normal));
+    }
+  }
+
+  @include mixins.e(label) {
+    margin-left: 8px;
+  }
+}

package/components/rating.scss

@@ -0,0 +1,75 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(rating) {
+  --color: var(--#{variables.$prefix}rating-color, var(--#{variables.$prefix}color-warning));
+  --size: var(--#{variables.$prefix}rating-size, 1.25rem);
+  --gutter-x: var(--#{variables.$prefix}rating-gutter-x, 0px);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--size);
+  color: var(--color);
+  vertical-align: top;
+
+  @include mixins.when(disabled) {
+    pointer-events: none;
+    filter: opacity(50%);
+  }
+
+  @include mixins.m(read-only) {
+    pointer-events: none;
+  }
+
+  @include mixins.e(star) {
+    position: relative;
+    transition: transform var(--#{variables.$prefix}animation-duration-fast) linear;
+
+    & + & {
+      margin-left: var(--gutter-x);
+    }
+
+    &:hover,
+    &:focus-within {
+      transform: scale(1.2);
+    }
+  }
+
+  @include mixins.e(input) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    appearance: none;
+    cursor: pointer;
+
+    @include mixins.m(half) {
+      z-index: 5;
+      width: 50%;
+    }
+  }
+
+  @include mixins.e(icon) {
+    color: var(--#{variables.$prefix}background-color-img);
+    transition: color var(--#{variables.$prefix}animation-duration-fast) linear;
+
+    @include mixins.when(checked) {
+      color: inherit;
+    }
+
+    @include mixins.m(half) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}

package/components/select.scss

@@ -0,0 +1,282 @@
+@use '../variables';
+@use '../mixins';
+
+$select-option-height: 32px;
+
+@include mixins.b(select) {
+  $selector: &;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: var(--size);
+  padding: 0 calc(var(--horizontal-space) - 1px);
+  font-size: var(--font-size);
+  vertical-align: top;
+  cursor: pointer;
+  background-color: var(--#{variables.$prefix}background-color-input);
+  border: 1px solid var(--#{variables.$prefix}color-border);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--#{variables.$prefix}color-light-primary);
+  }
+
+  @each $invalid, $color in ('warning': 'warning', 'error': 'danger') {
+    &[data-l-form-invalid='#{$invalid}'] {
+      border-color: var(--#{variables.$prefix}color-#{$color}) !important;
+
+      #{$selector}__search {
+        caret-color: var(--#{variables.$prefix}color-#{$color}) !important;
+      }
+    }
+  }
+
+  @include mixins.when(expanded) {
+    border-color: var(--#{variables.$prefix}color-primary);
+
+    @include mixins.e(arrow) {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include mixins.when(disabled) {
+    --#{variables.$prefix}tag-color: var(--#{variables.$prefix}color-disabled);
+
+    color: var(--#{variables.$prefix}color-disabled);
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}background-color-disabled);
+
+    @include mixins.e(placeholder) {
+      opacity: 0.5;
+    }
+
+    @include mixins.e(icon) {
+      color: var(--#{variables.$prefix}color-disabled);
+    }
+  }
+
+  @include mixins.m(small) {
+    --size: var(--#{variables.$prefix}select-size, var(--#{variables.$prefix}size-small));
+    --horizontal-space: var(--#{variables.$prefix}select-horizontal-space, var(--#{variables.$prefix}horizontal-space-small));
+    --font-size: var(--#{variables.$prefix}select-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(medium) {
+    --size: var(--#{variables.$prefix}select-size, var(--#{variables.$prefix}size-medium));
+    --horizontal-space: var(--#{variables.$prefix}select-horizontal-space, var(--#{variables.$prefix}horizontal-space-medium));
+    --font-size: var(--#{variables.$prefix}select-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(large) {
+    --size: var(--#{variables.$prefix}select-size, var(--#{variables.$prefix}size-large));
+    --horizontal-space: var(--#{variables.$prefix}select-horizontal-space, var(--#{variables.$prefix}horizontal-space-large));
+    --font-size: var(--#{variables.$prefix}select-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.e(container) {
+    position: relative;
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  @include mixins.e(content) {
+    @include mixins.utils-ellipsis;
+
+    .#{variables.$prefix}tag + .#{variables.$prefix}tag {
+      margin-left: 8px;
+    }
+  }
+
+  @include mixins.e(search) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    display: inline-block;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: var(--#{variables.$prefix}color-text);
+    letter-spacing: inherit;
+    appearance: none;
+    caret-color: var(--#{variables.$prefix}color-primary);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    &::-webkit-search-cancel-button {
+      display: none;
+      appearance: none;
+    }
+  }
+
+  @include mixins.e(placeholder-wrapper) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    user-select: none;
+  }
+
+  @include mixins.e(placeholder) {
+    @include mixins.utils-ellipsis;
+
+    color: var(--#{variables.$prefix}color-disabled);
+  }
+
+  @include mixins.e(multiple-count) {
+    z-index: 1;
+    flex-shrink: 0;
+    margin-left: 4px;
+  }
+
+  @include mixins.e(close) {
+    margin: 0 0 0 4px;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+    transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    &:active {
+      color: var(--#{variables.$prefix}color-dark-primary);
+    }
+  }
+
+  @include mixins.e(clear) {
+    position: absolute;
+    right: calc(var(--horizontal-space) - 1px);
+    z-index: 5;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+    transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    &:active {
+      color: var(--#{variables.$prefix}color-dark-primary);
+    }
+  }
+
+  @include mixins.e(icon) {
+    z-index: 1;
+    flex-shrink: 0;
+    margin-left: 4px;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+  }
+
+  @include mixins.e(arrow) {
+    transition: transform var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(list) {
+    position: relative;
+    max-height: calc(8px + #{$select-option-height} * 6);
+    padding: 4px 0;
+    margin: 0;
+    overflow: hidden auto;
+    list-style: none;
+  }
+
+  @include mixins.e(option) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: $select-option-height;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:not(.is-selected):hover {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+    }
+
+    @include mixins.when(selected) {
+      background-color: var(--#{variables.$prefix}background-color-primary);
+    }
+
+    @include mixins.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+    }
+  }
+
+  @include mixins.e(option-prefix) {
+    display: inline-flex;
+    margin-right: 8px;
+  }
+
+  @include mixins.e(option-content) {
+    @include mixins.utils-ellipsis;
+
+    flex: 1 0 0;
+  }
+
+  @include mixins.e(option-group) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  @include mixins.e(option-group-label) {
+    display: flex;
+    align-items: center;
+    min-height: $select-option-height;
+    padding: 0 12px;
+    font-size: var(--#{variables.$prefix}font-size-subtitle);
+    color: var(--#{variables.$prefix}color-text-sub);
+  }
+
+  @include mixins.e(empty) {
+    display: flex;
+    align-items: center;
+    height: $select-option-height;
+    padding: 0 12px;
+    color: var(--#{variables.$prefix}color-disabled);
+  }
+}
+
+@include mixins.b(select-popup) {
+  position: fixed;
+  background-color: var(--#{variables.$prefix}background-color);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  box-shadow: var(--#{variables.$prefix}box-shadow-popup);
+
+  @include mixins.e(loading) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--#{variables.$prefix}color-primary);
+    background-color: rgb(var(--#{variables.$prefix}background-color-rgb) / 80%);
+
+    @include mixins.m(empty) {
+      position: relative;
+      justify-content: flex-start;
+      height: 40px;
+      padding: 0 12px;
+      background-color: var(--#{variables.$prefix}background-color);
+    }
+  }
+}

package/components/separator.scss

@@ -0,0 +1,95 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(separator) {
+  $selector: &;
+
+  width: 100%;
+  height: 1px;
+  padding: 0;
+  margin: 16px 0;
+  background-color: var(--#{variables.$prefix}color-divider);
+
+  @include mixins.m(text) {
+    display: flex;
+    align-items: center;
+    margin: 24px 0;
+    background-color: unset;
+
+    &::before {
+      height: 1px;
+      content: '';
+      background-color: var(--#{variables.$prefix}color-divider);
+    }
+
+    &::after {
+      height: 1px;
+      content: '';
+      background-color: var(--#{variables.$prefix}color-divider);
+    }
+
+    &#{$selector}--vertical {
+      width: auto;
+      margin: 0 24px;
+
+      &::before {
+        width: 1px;
+        height: unset;
+      }
+
+      &::after {
+        width: 1px;
+        height: unset;
+      }
+
+      @include mixins.e(text) {
+        padding: 8px 0;
+      }
+    }
+  }
+
+  @include mixins.m(text-left) {
+    &::before {
+      flex: 0 0 10%;
+    }
+
+    &::after {
+      flex: 1 0 0;
+    }
+  }
+
+  @include mixins.m(text-right) {
+    &::before {
+      flex: 1 0 0;
+    }
+
+    &::after {
+      flex: 0 0 10%;
+    }
+  }
+
+  @include mixins.m(text-center) {
+    &::before {
+      flex: 1 0 0;
+    }
+
+    &::after {
+      flex: 1 0 0;
+    }
+  }
+
+  @include mixins.m(vertical) {
+    display: inline-flex;
+    flex-direction: column;
+    align-self: stretch;
+    width: 1px;
+    height: unset;
+    margin: 2px 8px;
+  }
+
+  @include mixins.e(text) {
+    flex: 0 0 auto;
+    padding: 0 8px;
+    font-size: var(--#{variables.$prefix}font-size-subtitle);
+  }
+}

package/components/skeleton.scss

@@ -0,0 +1,44 @@
+@use '../variables';
+@use '../mixins';
+
+@keyframes #{variables.$prefix}skeleton-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@include mixins.b(skeleton) {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--#{variables.$prefix}background-color-primary-gray);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    content: '';
+    background: linear-gradient(100deg, transparent 20%, var(--#{variables.$prefix}skeleton-background-color-wave) 50%, transparent 70%);
+    transform: translateX(-100%);
+    animation: #{variables.$prefix}skeleton-wave 2s linear infinite;
+  }
+
+  @include mixins.m(text) {
+    width: 100%;
+    border-radius: var(--#{variables.$prefix}border-radius);
+
+    &::before {
+      content: '\00a0';
+    }
+  }
+
+  @include mixins.m(circular) {
+    border-radius: 50%;
+  }
+
+  @include mixins.m(rect) {
+    border-radius: var(--#{variables.$prefix}border-radius);
+  }
+}