@laser-ui/themes 0.0.1

package/components/empty.scss

@@ -0,0 +1,27 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(empty) {
+  $selector: &;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include mixins.e(img) {
+    opacity: var(--#{variables.$prefix}empty-img-opacity);
+
+    & + #{$selector}__description {
+      margin-top: 4px;
+    }
+  }
+
+  @include mixins.e(description) {
+    font-size: var(--#{variables.$prefix}font-size-subtitle);
+    color: var(--#{variables.$prefix}color-disabled);
+
+    & + #{$selector}__footer {
+      margin-top: 10px;
+    }
+  }
+}

package/components/fab.scss

@@ -0,0 +1,293 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@keyframes #{variables.$prefix}fab-popup {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@include mixins.b(fab) {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+
+  @include mixins.e(actions) {
+    position: absolute;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+
+    @include mixins.m(top) {
+      top: -11px;
+      left: 0;
+      flex-direction: column-reverse;
+      width: 100%;
+      transform: translateY(-100%);
+    }
+
+    @include mixins.m(right) {
+      top: 0;
+      right: -11px;
+      flex-direction: row;
+      height: 100%;
+      transform: translateX(100%);
+    }
+
+    @include mixins.m(bottom) {
+      bottom: -11px;
+      left: 0;
+      flex-direction: column;
+      width: 100%;
+      transform: translateY(100%);
+    }
+
+    @include mixins.m(left) {
+      top: 0;
+      left: -11px;
+      flex-direction: row-reverse;
+      height: 100%;
+      transform: translateX(-100%);
+    }
+  }
+}
+
+@include mixins.b(fab-button) {
+  $selector: &;
+
+  --size: var(--#{variables.$prefix}fab-button-size, 56px);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size);
+  height: var(--size);
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  font-size: 24px;
+  white-space: nowrap;
+  vertical-align: top;
+  appearance: none;
+  cursor: pointer;
+  border-radius: var(--#{variables.$prefix}border-radius-large);
+  outline: none;
+  box-shadow: var(--#{variables.$prefix}fab-shadow);
+  transition:
+    color var(--#{variables.$prefix}animation-duration-base) linear,
+    background-color var(--#{variables.$prefix}animation-duration-base) linear,
+    border-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+  &:disabled {
+    pointer-events: none;
+  }
+
+  svg {
+    font-size: 1.25em;
+  }
+
+  @each $theme, $rgb in variables.$themes {
+    @include mixins.theme(#{$theme}) {
+      --color-light: var(--#{variables.$prefix}fab-button-color-light, var(--#{variables.$prefix}color-light-#{$theme}));
+      --color: var(--#{variables.$prefix}fab-button-color, var(--#{variables.$prefix}color-#{$theme}));
+      --color-dark: var(--#{variables.$prefix}fab-button-color-dark, var(--#{variables.$prefix}color-dark-#{$theme}));
+      --background-color-light: var(
+        --#{variables.$prefix}fab-button-background-color-light,
+        var(--#{variables.$prefix}background-color-light-#{$theme})
+      );
+      --background-color: var(--#{variables.$prefix}fab-button-background-color, var(--#{variables.$prefix}background-color-#{$theme}));
+    }
+  }
+
+  @include mixins.when(expand) {
+    @include mixins.e(icon) {
+      opacity: 1;
+      transform: rotate(90deg);
+    }
+
+    @include mixins.e(content) {
+      opacity: 0;
+    }
+  }
+
+  @include mixins.when(loading) {
+    pointer-events: none;
+  }
+
+  @include mixins.m(in-actions) {
+    --size: var(--#{variables.$prefix}fab-button-size, 40px);
+
+    margin: 5px;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 18px;
+    /* stylelint-disable-next-line declaration-empty-line-before */
+    animation: #{variables.$prefix}fab-popup 133ms linear;
+    animation-fill-mode: both;
+  }
+
+  @include mixins.m(primary) {
+    color: map.get(variables.$colors, 'white');
+    background-color: var(--color);
+    border: 1px solid var(--color);
+
+    &:hover,
+    &:focus,
+    &.is-loading {
+      background-color: var(--color-light);
+      border-color: var(--color-light);
+    }
+
+    &:active {
+      background-color: var(--color-dark);
+      border-color: var(--color-dark);
+    }
+
+    &:disabled:not(.is-loading) {
+      filter: saturate(50%) grayscale(50%);
+    }
+  }
+
+  @include mixins.m(secondary) {
+    color: var(--#{variables.$prefix}color-text);
+    background-color: transparent;
+    border: 1px solid var(--#{variables.$prefix}color-border);
+
+    &:hover,
+    &:focus,
+    &.is-loading {
+      color: var(--color-light);
+      border-color: var(--color-light);
+    }
+
+    &:active {
+      color: var(--color-dark);
+      border-color: var(--color-dark);
+    }
+
+    &:disabled:not(.is-loading) {
+      color: var(--#{variables.$prefix}color-disabled);
+      background-color: var(--#{variables.$prefix}background-color-disabled);
+    }
+  }
+
+  @include mixins.m(outline) {
+    color: var(--color);
+    background-color: transparent;
+    border: 1px solid var(--color);
+
+    &:hover,
+    &:focus,
+    &.is-loading {
+      color: var(--color-light);
+      border-color: var(--color-light);
+    }
+
+    &:active {
+      color: var(--color-dark);
+      border-color: var(--color-dark);
+    }
+
+    &:disabled:not(.is-loading) {
+      color: var(--#{variables.$prefix}color-disabled);
+      border-color: var(--#{variables.$prefix}color-border);
+    }
+  }
+
+  @include mixins.m(dashed) {
+    color: var(--color);
+    background-color: transparent;
+    border: 1px dashed var(--color);
+
+    &:hover,
+    &:focus,
+    &.is-loading {
+      color: var(--color-light);
+      border-color: var(--color-light);
+    }
+
+    &:active {
+      color: var(--color-dark);
+      border-color: var(--color-dark);
+    }
+
+    &:disabled:not(.is-loading) {
+      color: var(--#{variables.$prefix}color-disabled);
+      border-color: var(--#{variables.$prefix}color-border);
+    }
+  }
+
+  @include mixins.m(text) {
+    color: var(--#{variables.$prefix}color-text);
+    background-color: transparent;
+    border: none;
+
+    &:hover,
+    &:focus,
+    &.is-loading {
+      color: var(--color-light);
+      background-color: var(--background-color-light);
+    }
+
+    &:active {
+      color: var(--color-dark);
+      background-color: var(--background-color);
+    }
+
+    &:disabled:not(.is-loading) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+      background-color: var(--#{variables.$prefix}background-color-disabled);
+    }
+  }
+
+  @include mixins.m(link) {
+    min-width: unset;
+    height: auto;
+    padding: 0;
+    color: var(--color);
+    background-color: transparent;
+    border: none;
+
+    &:hover,
+    &:focus,
+    &.is-loading {
+      color: var(--color-light);
+    }
+
+    &:active {
+      color: var(--color-dark);
+    }
+
+    &:disabled:not(.is-loading) {
+      color: var(--#{variables.$prefix}color-disabled);
+    }
+  }
+
+  @include mixins.m(circle) {
+    border-radius: 50%;
+  }
+
+  @include mixins.m(round) {
+    border-radius: calc(var(--size) / 2);
+  }
+
+  @include mixins.e(icon) {
+    position: absolute;
+    opacity: 0;
+    transition:
+      opacity var(--#{variables.$prefix}animation-duration-base) linear,
+      transform var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(button-content) {
+    opacity: 1;
+    transition: opacity var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+}

package/components/form.scss

@@ -0,0 +1,137 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(form) {
+  --gutter-x: var(--#{variables.$prefix}form-gutter-x, 8px);
+  --gutter-y: var(--#{variables.$prefix}form-gutter-y, 0px);
+
+  @include mixins.m(small) {
+    --size: var(--#{variables.$prefix}input-size, var(--#{variables.$prefix}size-small));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(medium) {
+    --size: var(--#{variables.$prefix}input-size, var(--#{variables.$prefix}size-medium));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(large) {
+    --size: var(--#{variables.$prefix}input-size, var(--#{variables.$prefix}size-large));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.e(row) {
+    display: flex;
+    flex-wrap: wrap;
+    margin: calc(-1 * var(--gutter-y)) calc(-0.5 * var(--gutter-x)) 0 calc(-0.5 * var(--gutter-x));
+
+    & > * {
+      padding-right: calc(var(--gutter-x) * 0.5);
+      padding-left: calc(var(--gutter-x) * 0.5);
+      margin-top: var(--gutter-y);
+    }
+  }
+
+  @include mixins.e(item) {
+    position: relative;
+    width: 100%;
+  }
+
+  @include mixins.e(item-container) {
+    position: relative;
+    width: 100%;
+  }
+
+  @include mixins.e(item-label-wrapper) {
+    position: relative;
+    display: inline-block;
+    min-height: var(--size);
+    vertical-align: top;
+  }
+
+  @include mixins.e(item-label) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: var(--size);
+    padding-right: 8px;
+    font-size: var(--font-size);
+    overflow-wrap: break-word;
+
+    @include mixins.m(auto) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      flex-wrap: nowrap;
+    }
+
+    @include mixins.m(required) {
+      &::before {
+        display: inline-block;
+        margin-right: 4px;
+        color: var(--#{variables.$prefix}color-danger);
+        content: '*';
+      }
+    }
+
+    @include mixins.m(colon) {
+      &::after {
+        margin-left: 2px;
+        content: ':';
+      }
+    }
+  }
+
+  @include mixins.e(item-label-extra) {
+    @include mixins.polyfill-column-gap(4px);
+
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+    color: var(--#{variables.$prefix}color-text-sub);
+  }
+
+  @include mixins.e(item-content) {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  @include mixins.e(item-control) {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    min-height: var(--size);
+  }
+
+  @include mixins.e(item-feedback-icon) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2em;
+    height: var(--size);
+  }
+
+  @include mixins.e(error-container) {
+    width: 100%;
+    min-height: calc(1.5em + 5px);
+    padding: 2px 0;
+    font-size: calc(var(--font-size) - 2px);
+    line-height: 1.5;
+  }
+
+  @include mixins.e(error) {
+    @include mixins.utils-ellipsis;
+
+    @include mixins.m(error) {
+      color: var(--#{variables.$prefix}color-danger);
+    }
+
+    @include mixins.m(warning) {
+      color: var(--#{variables.$prefix}color-warning);
+    }
+  }
+}

package/components/icon.scss

@@ -0,0 +1,17 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(icon) {
+  display: inline;
+  vertical-align: top;
+
+  @each $theme, $rgb in variables.$themes {
+    @include mixins.theme(#{$theme}) {
+      color: var(--#{variables.$prefix}color-#{$theme});
+    }
+  }
+
+  svg {
+    display: block;
+  }
+}

package/components/image.scss

@@ -0,0 +1,213 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(image) {
+  position: relative;
+  display: inline-flex;
+  vertical-align: top;
+
+  &:hover {
+    @include mixins.e(actions) {
+      opacity: 1;
+    }
+  }
+
+  @include mixins.e(img) {
+    display: block;
+  }
+
+  @include mixins.e(actions) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--#{variables.$prefix}background-color-mask);
+    opacity: 0;
+    transition: opacity var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(action) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: map.get(variables.$colors, 'white');
+    vertical-align: top;
+    appearance: none;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    transition: background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      background-color: var(--#{variables.$prefix}background-color-light-hover);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      filter: opacity(50%);
+    }
+  }
+}
+
+@include mixins.b(image-preview) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  padding: 68px 68px 98px;
+  overflow: hidden;
+  outline: none;
+
+  @include mixins.e(navigation-button) {
+    position: absolute;
+    z-index: 5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 18px;
+    color: var(--#{variables.$prefix}color-text);
+    white-space: nowrap;
+    vertical-align: top;
+    appearance: none;
+    cursor: pointer;
+    background-color: var(--#{variables.$prefix}background-color);
+    border: none;
+    border-radius: 50%;
+    outline: none;
+    box-shadow: 0 1px 4px 0 var(--#{variables.$prefix}box-shadow-color);
+    transition:
+      color var(--#{variables.$prefix}animation-duration-base) linear,
+      background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover {
+      color: var(--#{variables.$prefix}color-primary);
+      background-color: var(--#{variables.$prefix}background-color-primary-gray);
+    }
+
+    @include mixins.m(prev) {
+      top: 50%;
+      left: 12px;
+      transform: translateY(-50%);
+    }
+
+    @include mixins.m(next) {
+      top: 50%;
+      right: 12px;
+      transform: translateY(-50%);
+    }
+
+    @include mixins.e(toolbar) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 5;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 100%;
+      height: 48px;
+      padding: 0 10px;
+      margin: 0;
+      list-style: none;
+      background-color: var(--#{variables.$prefix}background-color);
+    }
+
+    @include mixins.e(toolbar-page) {
+      @include mixins.polyfill-column-gap(8px);
+
+      display: inline-flex;
+      align-items: center;
+      margin-right: auto;
+    }
+
+    @include mixins.e(toolbar-page-input) {
+      width: 60px;
+    }
+
+    @include mixins.e(toolbar-rotate) {
+      margin-right: 10px;
+    }
+
+    @include mixins.e(toolbar-zoom-input) {
+      width: 80px;
+      margin: 0 4px;
+    }
+
+    @include mixins.e(toolbar-close) {
+      margin-left: 10px;
+    }
+
+    @include mixins.e(img) {
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      touch-action: none;
+      cursor: move;
+      user-select: none;
+      outline: none;
+      object-fit: contain;
+    }
+
+    @include mixins.e(thumbnail-list) {
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      z-index: 5;
+      display: flex;
+      padding: 8px;
+      margin: 0;
+      list-style: none;
+      background-color: var(--#{variables.$prefix}background-color);
+      /* stylelint-disable-next-line declaration-property-value-allowed-list */
+      border-radius: 8px;
+      transform: translateX(-50%);
+    }
+
+    @include mixins.e(thumbnail) {
+      width: 52px;
+      height: 52px;
+      cursor: pointer;
+      background-color: var(--#{variables.$prefix}background-color-hover);
+      border: 1px solid transparent;
+      transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+      & + & {
+        margin-left: 8px;
+      }
+
+      &:hover {
+        border-color: var(--#{variables.$prefix}color-light-primary);
+      }
+
+      @include mixins.when(active) {
+        border-color: var(--#{variables.$prefix}color-primary);
+      }
+    }
+
+    @include mixins.e(thumbnail-img) {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}