@laser-ui/themes 0.0.1

package/components/tabs.scss

@@ -0,0 +1,517 @@
+@use '../variables';
+@use '../mixins';
+
+@mixin tabs-horizontal($direction) {
+  $selector: '.#{variables.$prefix}tabs';
+
+  @if $direction == top {
+    flex-direction: column;
+  } @else {
+    flex-direction: column-reverse;
+  }
+
+  &#{$selector}--center {
+    @include mixins.e(tab) {
+      @include mixins.m(first) {
+        margin-left: auto;
+      }
+
+      @include mixins.m(last) {
+        margin-right: auto;
+      }
+    }
+  }
+
+  &:not(#{$selector}--slider) {
+    @include mixins.e(button) {
+      @include mixins.m(add) {
+        @if $direction == top {
+          border-bottom-color: transparent;
+        } @else {
+          border-top-color: transparent;
+        }
+      }
+    }
+  }
+
+  &:not(#{$selector}--slider):not(#{$selector}--wrap) {
+    @include mixins.e(tablist) {
+      & > * + *:not(#{$selector}__indicator) {
+        margin-left: var(--tab-gap);
+      }
+    }
+  }
+
+  @include mixins.e(tabpanel) {
+    @if $direction == top {
+      margin-top: 20px;
+    } @else {
+      margin-bottom: 20px;
+    }
+  }
+
+  @include mixins.e(tablist-wrapper) {
+    width: 100%;
+    overflow: auto hidden;
+
+    @if $direction == top {
+      padding-bottom: 2px;
+    } @else {
+      padding-top: 2px;
+    }
+  }
+
+  @include mixins.e(tablist) {
+    min-width: 100%;
+
+    &::after {
+      left: 0;
+      width: 100%;
+      height: 1px;
+
+      @if $direction == top {
+        bottom: -1px;
+      } @else {
+        top: -1px;
+      }
+    }
+  }
+
+  @include mixins.e(indicator) {
+    left: 0;
+    width: 0;
+    height: 2px;
+    transition:
+      left var(--#{variables.$prefix}animation-duration-slow) linear,
+      opacity var(--#{variables.$prefix}animation-duration-base) linear,
+      width var(--#{variables.$prefix}animation-duration-base) linear;
+
+    @if $direction == top {
+      bottom: -2px;
+    } @else {
+      top: -2px;
+    }
+  }
+
+  @include mixins.e(slider-indicator) {
+    left: 0;
+    width: 0;
+    height: 100%;
+    transition:
+      left var(--#{variables.$prefix}animation-duration-slow) linear,
+      opacity var(--#{variables.$prefix}animation-duration-base) linear,
+      width var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(wrap-indicator) {
+    left: 0;
+    width: 0;
+    height: calc(100% + 1px);
+    transition:
+      left var(--#{variables.$prefix}animation-duration-slow) linear,
+      opacity var(--#{variables.$prefix}animation-duration-base) linear,
+      width var(--#{variables.$prefix}animation-duration-base) linear;
+
+    @if $direction == top {
+      top: 0;
+      border-bottom: none;
+      border-radius: var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius) 0 0;
+    } @else {
+      bottom: 0;
+      border-top: none;
+      border-radius: 0 0 var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius);
+    }
+  }
+
+  @include mixins.e(button-container) {
+    right: 0;
+  }
+
+  @include mixins.e(button) {
+    width: 52px;
+    height: var(--tab-size);
+
+    @include mixins.m(more) {
+      box-shadow: -3px 0 8px -2px var(--#{variables.$prefix}box-shadow-color);
+
+      @include mixins.when(end) {
+        border-left-color: var(--#{variables.$prefix}background-color-indicator);
+      }
+    }
+  }
+}
+
+@mixin tabs-vertical($direction) {
+  $selector: '.#{variables.$prefix}tabs';
+
+  @if $direction == left {
+    flex-direction: row;
+  } @else {
+    flex-direction: row-reverse;
+  }
+
+  &#{$selector}tabs--center {
+    @include mixins.e(tab) {
+      @include mixins.m(first) {
+        margin-top: auto;
+      }
+
+      @include mixins.m(last) {
+        margin-bottom: auto;
+      }
+    }
+  }
+
+  @include mixins.e(tabpanel) {
+    flex-grow: 1;
+    overflow: hidden;
+
+    @if $direction == left {
+      margin-left: 20px;
+    } @else {
+      margin-right: 20px;
+    }
+  }
+
+  @include mixins.e(tab) {
+    padding: 0 var(--tab-padding);
+
+    @if $direction == left {
+      justify-content: flex-end;
+    } @else {
+      justify-content: flex-start;
+    }
+  }
+
+  @include mixins.e(button) {
+    @include mixins.m(add) {
+      border-right-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+
+  @include mixins.e(tablist-wrapper) {
+    flex-shrink: 0;
+    overflow: hidden auto;
+
+    @if $direction == left {
+      padding-right: 2px;
+    } @else {
+      padding-left: 2px;
+    }
+  }
+
+  @include mixins.e(tablist) {
+    flex-direction: column;
+
+    &::after {
+      top: 0;
+      width: 1px;
+      height: 100%;
+
+      @if $direction == left {
+        right: -1px;
+      } @else {
+        left: -1px;
+      }
+    }
+  }
+
+  @include mixins.e(indicator) {
+    top: 0;
+    width: 2px;
+    height: var(--tab-size);
+    transition:
+      top var(--#{variables.$prefix}animation-duration-slow) linear,
+      opacity var(--#{variables.$prefix}animation-duration-base) linear;
+
+    @if $direction == left {
+      right: -2px;
+    } @else {
+      left: -2px;
+    }
+  }
+
+  @include mixins.e(slider-indicator) {
+    top: 0;
+    width: 100%;
+    height: var(--tab-size);
+    transition:
+      top var(--#{variables.$prefix}animation-duration-slow) linear,
+      opacity var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(wrap-indicator) {
+    top: 0;
+    width: calc(100% + 1px);
+    height: var(--tab-size);
+    transition:
+      top var(--#{variables.$prefix}animation-duration-slow) linear,
+      opacity var(--#{variables.$prefix}animation-duration-base) linear;
+
+    @if $direction == left {
+      left: 0;
+      border-right: none;
+      border-radius: 0 var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius) 0;
+    } @else {
+      right: 0;
+      border-left: none;
+      border-radius: var(--#{variables.$prefix}border-radius) 0 0 var(--#{variables.$prefix}border-radius);
+    }
+  }
+
+  @include mixins.e(button-container) {
+    bottom: 0;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  @include mixins.e(button) {
+    width: 100%;
+    height: 36px;
+
+    @include mixins.m(more) {
+      box-shadow: 0 -3px 8px -2px var(--#{variables.$prefix}box-shadow-color);
+      @include mixins.when(end) {
+        border-top-color: var(--#{variables.$prefix}background-color-indicator);
+      }
+    }
+  }
+}
+
+@include mixins.b(tabs) {
+  $selector: &;
+
+  position: relative;
+  display: flex;
+
+  @include mixins.m(slider) {
+    &#{$selector}--top,
+    &#{$selector}--bottom {
+      @include mixins.e(tab) {
+        padding: 0 var(--tab-padding);
+      }
+    }
+
+    @include mixins.e(tablist-wrapper) {
+      padding: 0;
+      border-bottom: 1px solid var(--#{variables.$prefix}color-border);
+    }
+
+    @include mixins.e(tablist) {
+      min-width: unset;
+
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  @include mixins.m(wrap) {
+    &#{$selector}--top,
+    &#{$selector}--bottom {
+      @include mixins.e(tab) {
+        padding: 0 var(--tab-padding);
+      }
+    }
+  }
+
+  @include mixins.m(top) {
+    @include tabs-horizontal(top);
+  }
+
+  @include mixins.m(bottom) {
+    @include tabs-horizontal(bottom);
+  }
+
+  @include mixins.m(left) {
+    @include tabs-vertical(left);
+  }
+
+  @include mixins.m(right) {
+    @include tabs-vertical(right);
+  }
+
+  @include mixins.m(small) {
+    &:not(#{$selector}--slider) {
+      --tab-size: var(--#{variables.$prefix}tabs-tab-size, 36px);
+    }
+
+    &#{$selector}--slider {
+      --tab-size: var(--#{variables.$prefix}tabs-tab-size, 32px);
+    }
+
+    --tab-padding: var(--#{variables.$prefix}tabs-tab-padding, 12px);
+    --tab-gap: var(--#{variables.$prefix}tabs-tab-gap, 20px);
+    --tablist-font-size: var(--#{variables.$prefix}tabs-tablist-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(medium) {
+    &:not(#{$selector}--slider) {
+      --tab-size: var(--#{variables.$prefix}tabs-tab-size, 44px);
+    }
+
+    &#{$selector}--slider {
+      --tab-size: var(--#{variables.$prefix}tabs-tab-size, 36px);
+    }
+
+    --tab-padding: var(--#{variables.$prefix}tabs-tab-padding, 16px);
+    --tab-gap: var(--#{variables.$prefix}tabs-tab-gap, 32px);
+    --tablist-font-size: var(--#{variables.$prefix}tabs-tablist-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(large) {
+    &:not(#{$selector}--slider) {
+      --tab-size: var(--#{variables.$prefix}tabs-tab-size, 52px);
+    }
+
+    &#{$selector}--slider {
+      --tab-size: var(--#{variables.$prefix}tabs-tab-size, 44px);
+    }
+
+    --tab-padding: var(--#{variables.$prefix}tabs-tab-padding, 20px);
+    --tab-gap: var(--#{variables.$prefix}tabs-tab-gap, 36px);
+    --tablist-font-size: var(--#{variables.$prefix}tabs-tablist-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.e(tablist-wrapper) {
+    position: relative;
+  }
+
+  @include mixins.e(tablist) {
+    position: relative;
+    display: inline-flex;
+    font-size: var(--tablist-font-size);
+
+    &::after {
+      position: absolute;
+      content: '';
+      background-color: var(--#{variables.$prefix}background-color-indicator);
+    }
+  }
+
+  @include mixins.e(tab) {
+    position: relative;
+    z-index: 5;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: var(--tab-size);
+    cursor: pointer;
+    transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:focus,
+    &:hover {
+      color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    @include mixins.when(active) {
+      color: var(--#{variables.$prefix}color-primary);
+    }
+
+    @include mixins.when(disabled) {
+      pointer-events: none;
+      filter: opacity(50%);
+    }
+  }
+
+  @include mixins.e(button-container) {
+    position: sticky;
+    z-index: 6;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  @include mixins.e(button) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background-color: var(--#{variables.$prefix}background-color);
+    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.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+    }
+
+    @include mixins.m(add) {
+      border: 1px solid var(--#{variables.$prefix}background-color-indicator);
+    }
+
+    @include mixins.m(more) {
+      border: 1px solid transparent;
+      transition:
+        color var(--#{variables.$prefix}animation-duration-base) linear,
+        box-shadow var(--#{variables.$prefix}animation-duration-base) linear;
+
+      @include mixins.when(end) {
+        box-shadow: none;
+      }
+    }
+  }
+
+  @include mixins.e(close) {
+    margin: 0 0 0 4px;
+    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(indicator) {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}color-primary);
+    opacity: 0;
+  }
+
+  @include mixins.e(slider-indicator) {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+    opacity: 0;
+
+    &::after {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      bottom: 3px;
+      left: 3px;
+      content: '';
+      background-color: var(--#{variables.$prefix}background-color);
+      border-radius: var(--#{variables.$prefix}border-radius);
+      box-shadow: 0 2px 4px 0 var(--#{variables.$prefix}box-shadow-color);
+    }
+  }
+
+  @include mixins.e(wrap-indicator) {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}background-color-light-gray);
+    border: 1px solid var(--#{variables.$prefix}background-color-indicator);
+    opacity: 0;
+  }
+
+  @include mixins.e(tabpanel) {
+    outline: none;
+  }
+}

package/components/tag.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(tag) {
+  display: inline-flex;
+  align-items: center;
+  height: var(--size);
+  font-size: var(--font-size);
+  white-space: nowrap;
+  vertical-align: top;
+  border-radius: var(--#{variables.$prefix}border-radius);
+
+  @each $theme, $rgb in variables.$themes {
+    @include mixins.theme(#{$theme}) {
+      --color: var(--#{variables.$prefix}tag-color, var(--#{variables.$prefix}color-#{$theme}));
+      --background-color: var(--#{variables.$prefix}tag-background-color, var(--#{variables.$prefix}background-color-#{$theme}));
+    }
+  }
+
+  @include mixins.m(primary) {
+    padding: 0 var(--padding-size);
+    color: var(--color, var(--#{variables.$prefix}tag-color, var(--#{variables.$prefix}color-text)));
+    background-color: var(
+      --background-color,
+      var(--#{variables.$prefix}tag-background-color, var(--#{variables.$prefix}background-color-primary-gray))
+    );
+  }
+
+  @include mixins.m(fill) {
+    padding: 0 var(--padding-size);
+    color: map.get(variables.$colors, 'white');
+    background-color: var(--color, var(--#{variables.$prefix}tag-color, var(--#{variables.$prefix}background-color-img)));
+  }
+
+  @include mixins.m(outline) {
+    padding: 0 calc(var(--padding-size) - 1px);
+    color: var(--color, var(--#{variables.$prefix}tag-color, var(--#{variables.$prefix}color-text)));
+    border: 1px solid var(--color, var(--#{variables.$prefix}tag-color, var(--#{variables.$prefix}color-border)));
+  }
+
+  @include mixins.m(small) {
+    --size: var(--#{variables.$prefix}tag-size, calc(var(--#{variables.$prefix}size-small) - 8px));
+    --padding-size: var(--#{variables.$prefix}tag-padding-size, 6px);
+    --font-size: var(--#{variables.$prefix}tag-font-size, calc(var(--#{variables.$prefix}font-size-small) - 2px));
+  }
+
+  @include mixins.m(medium) {
+    --size: var(--#{variables.$prefix}tag-size, calc(var(--#{variables.$prefix}size-medium) - 8px));
+    --padding-size: var(--#{variables.$prefix}tag-padding-size, 8px);
+    --font-size: var(--#{variables.$prefix}tag-font-size, calc(var(--#{variables.$prefix}font-size-medium) - 2px));
+  }
+
+  @include mixins.m(large) {
+    --size: var(--#{variables.$prefix}tag-size, calc(var(--#{variables.$prefix}size-large) - 8px));
+    --padding-size: var(--#{variables.$prefix}tag-padding-size, 10px);
+    --font-size: var(--#{variables.$prefix}tag-font-size, calc(var(--#{variables.$prefix}font-size-large) - 2px));
+  }
+}

package/components/textarea.scss

@@ -0,0 +1,69 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(textarea) {
+  display: block;
+  width: 100%;
+  padding: 7px calc(var(--horizontal-space) - 1px);
+  margin: 0;
+  font: inherit;
+  font-size: var(--font-size);
+  color: var(--#{variables.$prefix}color-text);
+  letter-spacing: inherit;
+  appearance: none;
+  caret-color: var(--#{variables.$prefix}color-primary);
+  resize: vertical;
+  background-color: var(--#{variables.$prefix}background-color-input);
+  border: 1px solid var(--#{variables.$prefix}color-border);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  outline: none;
+  transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+  &::placeholder {
+    color: var(--#{variables.$prefix}color-disabled);
+  }
+
+  &:disabled {
+    color: var(--#{variables.$prefix}color-disabled);
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}background-color-disabled);
+
+    &::placeholder {
+      opacity: 0.5;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    border-color: var(--#{variables.$prefix}color-light-primary);
+  }
+
+  @each $invalid, $color in ('warning': 'warning', 'error': 'danger') {
+    &[data-l-form-invalid='#{$invalid}'] {
+      caret-color: var(--#{variables.$prefix}color-#{$color}) !important;
+      border-color: var(--#{variables.$prefix}color-#{$color}) !important;
+    }
+  }
+
+  @include mixins.m(small) {
+    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-small));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(medium) {
+    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-medium));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(large) {
+    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-large));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.e(count) {
+    font-variant-numeric: tabular-nums;
+    line-height: 28px;
+    color: var(--#{variables.$prefix}color-text-sub);
+    text-align: right;
+  }
+}