@laser-ui/themes 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Xie Jay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# @laser-ui/hooks
+
+Laser UI: Fast and Powerful React Components.
+
+The Sass-based styling solution of Laser UI.

package/_mixins.scss

@@ -0,0 +1,5 @@
+@forward 'rfs/scss';
+
+@forward 'mixins/bem/bem';
+@forward 'mixins/utils';
+@forward 'mixins/polyfill';

package/_variables.scss

@@ -0,0 +1,17 @@
+/* stylelint-disable declaration-property-value-allowed-list */
+$namespace: 'l' !default;
+$prefix: '#{$namespace}-' !default;
+
+$themes: (
+  'primary': 56 128 255,
+  'success': 45 211 111,
+  'warning': 255 196 9,
+  'danger': 235 68 90,
+) !default;
+
+$colors: (
+  'white': #fff,
+  'black': #000,
+) !default;
+
+$enable-gap: false !default;

package/animations.scss

@@ -0,0 +1,19 @@
+@use 'variables';
+
+@keyframes #{variables.$prefix}spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes #{variables.$prefix}wave-spread {
+  0% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.6);
+  }
+}

package/common.scss

@@ -0,0 +1,9 @@
+@use 'variables';
+@use 'mixins';
+
+@include mixins.b(focus-outline) {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1px dashed var(--#{variables.$prefix}color-light-primary);
+}

package/components/accordion.scss

@@ -0,0 +1,52 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(accordion) {
+  @include mixins.e(item) {
+    border-top: 1px solid var(--#{variables.$prefix}color-border);
+    border-right: 1px solid var(--#{variables.$prefix}color-border);
+    border-left: 1px solid var(--#{variables.$prefix}color-border);
+
+    &:last-child {
+      border-bottom: 1px solid var(--#{variables.$prefix}color-border);
+    }
+  }
+
+  @include mixins.e(item-button) {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    cursor: pointer;
+    background-color: var(--#{variables.$prefix}background-color-light-gray);
+
+    @include mixins.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+    }
+
+    @include mixins.m(arrow-left) {
+      flex-direction: row-reverse;
+
+      @include mixins.e(item-arrow) {
+        margin-right: 10px;
+        margin-left: unset;
+      }
+    }
+  }
+
+  @include mixins.e(item-title) {
+    @include mixins.utils-ellipsis;
+
+    flex: 1 0 0;
+  }
+
+  @include mixins.e(item-arrow) {
+    margin-left: 10px;
+    transition: transform var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(item-region) {
+    padding: 16px;
+    border-top: 1px solid var(--#{variables.$prefix}color-border);
+  }
+}

package/components/alert.scss

@@ -0,0 +1,110 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(alert) {
+  --color: var(--#{variables.$prefix}alert-color);
+  --background-color: var(--#{variables.$prefix}alert-background-color, var(--#{variables.$prefix}background-color-light-gray));
+
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  background-color: var(--background-color);
+  border: 1px solid var(--color, var(--#{variables.$prefix}color-border));
+
+  @include mixins.m(success) {
+    --color: var(--#{variables.$prefix}alert-color, var(--#{variables.$prefix}color-success));
+    --background-color: var(--#{variables.$prefix}alert-background-color, var(--#{variables.$prefix}background-color-success));
+  }
+
+  @include mixins.m(warning) {
+    --color: var(--#{variables.$prefix}alert-color, var(--#{variables.$prefix}color-warning));
+    --background-color: var(--#{variables.$prefix}alert-background-color, var(--#{variables.$prefix}background-color-warning));
+  }
+
+  @include mixins.m(error) {
+    --color: var(--#{variables.$prefix}alert-color, var(--#{variables.$prefix}color-danger));
+    --background-color: var(--#{variables.$prefix}alert-background-color, var(--#{variables.$prefix}background-color-danger));
+  }
+
+  @include mixins.m(info) {
+    --color: var(--#{variables.$prefix}alert-color, var(--#{variables.$prefix}color-primary));
+    --background-color: var(--#{variables.$prefix}alert-background-color, var(--#{variables.$prefix}background-color-primary));
+  }
+
+  @include mixins.m(with-title) {
+    align-items: flex-start;
+
+    @include mixins.e(icon) {
+      font-size: calc(var(--#{variables.$prefix}font-size-title) * 1.5);
+    }
+
+    @include mixins.e(content) {
+      display: block;
+    }
+
+    @include mixins.e(message) {
+      padding-top: 1px;
+    }
+  }
+
+  @include mixins.e(icon) {
+    padding: 5px 0;
+    margin-right: 10px;
+    font-size: 1.5em;
+    color: var(--color);
+  }
+
+  @include mixins.e(content) {
+    display: flex;
+    flex: 1 0 0;
+    align-items: center;
+  }
+
+  @include mixins.e(message) {
+    flex: 1 0 0;
+    padding: 5px 0;
+  }
+
+  @include mixins.e(header) {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  @include mixins.e(title) {
+    flex: 1 0 0;
+    padding: 5px 0;
+    font-size: var(--#{variables.$prefix}font-size-title);
+    font-weight: var(--#{variables.$prefix}font-weight-bold);
+  }
+
+  @include mixins.e(close) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    margin: 0 0 0 8px;
+    font: inherit;
+    font-size: 1.25em;
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: top;
+    appearance: none;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
+    outline: none;
+    transition:
+      color var(--#{variables.$prefix}animation-duration-base) linear,
+      background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+    }
+
+    &:active {
+      color: var(--#{variables.$prefix}color-dark-primary);
+    }
+  }
+}

package/components/anchor.scss

@@ -0,0 +1,69 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(anchor) {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  @include mixins.font-size(0.9125rem);
+
+  @include mixins.e(link) {
+    color: var(--#{variables.$prefix}color-text);
+
+    &:hover {
+      color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    @include mixins.when(active) {
+      color: var(--#{variables.$prefix}color-primary);
+    }
+
+    a {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      min-height: 28px;
+      font: inherit;
+      color: inherit;
+      text-decoration: none;
+      overflow-wrap: break-word;
+      transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+    }
+  }
+
+  @include mixins.e(indicator-track) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}background-color-indicator);
+  }
+
+  @include mixins.e(indicator-wrapper) {
+    position: absolute;
+    left: 1px;
+    z-index: 5;
+    opacity: 0;
+    transition:
+      top var(--#{variables.$prefix}animation-duration-slow) linear,
+      opacity var(--#{variables.$prefix}animation-duration-base) linear;
+    transform: translate(-50%, -50%);
+  }
+
+  @include mixins.e(dot-indicator) {
+    width: 8px;
+    height: 8px;
+    background-color: var(--#{variables.$prefix}background-color);
+    border: 2px solid var(--#{variables.$prefix}color-primary);
+    border-radius: 50%;
+  }
+
+  @include mixins.e(line-indicator) {
+    width: 2px;
+    height: 20px;
+    background-color: var(--#{variables.$prefix}color-primary);
+  }
+}

package/components/avatar.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(avatar) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: top;
+
+  @include mixins.m(icon) {
+    color: map.get(variables.$colors, 'white');
+    background-color: var(--#{variables.$prefix}background-color-img);
+  }
+
+  @include mixins.m(text) {
+    color: map.get(variables.$colors, 'white');
+    background-color: var(--#{variables.$prefix}background-color-img);
+  }
+
+  @include mixins.m(circle) {
+    border-radius: 50%;
+  }
+
+  @include mixins.m(square) {
+    border-radius: var(--#{variables.$prefix}border-radius);
+  }
+
+  @include mixins.e(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

package/components/badge.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(badge) {
+  position: absolute;
+  z-index: 1;
+  display: inline-block;
+  vertical-align: top;
+  transform: translate(-50%, -50%);
+
+  @each $theme, $rgb in variables.$themes {
+    @include mixins.theme(#{$theme}) {
+      --color: var(--#{variables.$prefix}badge-color, var(--#{variables.$prefix}color-#{$theme}));
+    }
+  }
+
+  @include mixins.m(dot) {
+    @include mixins.e(wrapper) {
+      min-width: 6px;
+      height: 6px;
+      padding: 0;
+      /* stylelint-disable-next-line declaration-property-value-allowed-list */
+      border-radius: 3px;
+    }
+  }
+
+  @include mixins.m(alone) {
+    position: relative;
+    transform: none;
+  }
+
+  @include mixins.e(wrapper) {
+    display: flex;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    overflow: hidden;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 12px;
+    line-height: 20px;
+    color: map.get(variables.$colors, 'white');
+    background-color: var(--color);
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    border-radius: 10px;
+  }
+
+  @include mixins.e(number-container) {
+    display: inline-flex;
+    flex-direction: column;
+    transition: transform var(--#{variables.$prefix}animation-duration-base) ease-out;
+  }
+}

package/components/breadcrumb.scss

@@ -0,0 +1,50 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(breadcrumb) {
+  --gutter-x: var(--#{variables.$prefix}breadcrumb-gutter-x, 8px);
+  --gutter-y: var(--#{variables.$prefix}breadcrumb-gutter-y, 4px);
+
+  @include mixins.e(list) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 0;
+    margin: calc(-1 * var(--gutter-y)) calc(-0.5 * var(--gutter-x)) 0 calc(-0.5 * var(--gutter-x));
+    list-style: none;
+
+    & > * {
+      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) {
+    display: inline-flex;
+    align-items: center;
+    min-height: 1.5em;
+    color: var(--#{variables.$prefix}color-text-sub);
+    border-radius: var(--#{variables.$prefix}border-radius);
+
+    @include mixins.m(link) {
+      cursor: pointer;
+      transition:
+        color var(--#{variables.$prefix}animation-duration-base) linear,
+        background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+      &:hover {
+        color: var(--#{variables.$prefix}text-color);
+        background-color: var(--#{variables.$prefix}background-color-hover);
+      }
+    }
+
+    @include mixins.m(last) {
+      color: var(--#{variables.$prefix}color-text);
+    }
+  }
+
+  @include mixins.e(separator) {
+    color: var(--#{variables.$prefix}color-text-sub);
+  }
+}

package/components/button.scss

@@ -0,0 +1,245 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(button) {
+  $selector: &;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size);
+  height: var(--size);
+  margin: 0;
+  font: inherit;
+  font-size: var(--font-size);
+  white-space: nowrap;
+  vertical-align: top;
+  appearance: none;
+  cursor: pointer;
+  border-radius: var(--#{variables.$prefix}border-radius);
+  outline: none;
+  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;
+  }
+
+  @each $theme, $rgb in variables.$themes {
+    @include mixins.theme(#{$theme}) {
+      --color-light: var(--#{variables.$prefix}button-color-light, var(--#{variables.$prefix}color-light-#{$theme}));
+      --color: var(--#{variables.$prefix}button-color, var(--#{variables.$prefix}color-#{$theme}));
+      --color-dark: var(--#{variables.$prefix}button-color-dark, var(--#{variables.$prefix}color-dark-#{$theme}));
+      --background-color-light: var(
+        --#{variables.$prefix}button-background-color-light,
+        var(--#{variables.$prefix}background-color-light-#{$theme})
+      );
+      --background-color: var(--#{variables.$prefix}button-background-color, var(--#{variables.$prefix}background-color-#{$theme}));
+    }
+  }
+
+  @include mixins.when(loading) {
+    pointer-events: none;
+  }
+
+  @include mixins.m(primary) {
+    padding: 0 calc(var(--padding-size) - 1px);
+    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) {
+    padding: 0 calc(var(--padding-size) - 1px);
+    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) {
+    padding: 0 calc(var(--padding-size) - 1px);
+    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) {
+    padding: 0 calc(var(--padding-size) - 1px);
+    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) {
+    padding: 0 var(--padding-size);
+    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.m(block) {
+    width: 100%;
+  }
+
+  @include mixins.m(small) {
+    --size: var(--#{variables.$prefix}button-size, var(--#{variables.$prefix}size-small));
+    --padding-size: var(--#{variables.$prefix}button-padding-size, var(--#{variables.$prefix}padding-size-small));
+    --font-size: var(--#{variables.$prefix}button-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(medium) {
+    --size: var(--#{variables.$prefix}button-size, var(--#{variables.$prefix}size-medium));
+    --padding-size: var(--#{variables.$prefix}button-padding-size, var(--#{variables.$prefix}padding-size-medium));
+    --font-size: var(--#{variables.$prefix}button-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(large) {
+    --size: var(--#{variables.$prefix}button-size, var(--#{variables.$prefix}size-large));
+    --padding-size: var(--#{variables.$prefix}button-padding-size, var(--#{variables.$prefix}padding-size-large));
+    --font-size: var(--#{variables.$prefix}button-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.m(icon) {
+    &:not(#{$selector}--round) {
+      padding: 0;
+    }
+
+    @include mixins.e(icon) {
+      width: auto;
+    }
+  }
+
+  @include mixins.m(icon-right) {
+    flex-direction: row-reverse;
+
+    @include mixins.e(icon) {
+      justify-content: flex-end;
+    }
+  }
+
+  @include mixins.e(icon) {
+    display: inline-flex;
+    width: calc(1em + 8px);
+    font-size: 1.25em;
+  }
+}