@laser-ui/themes 0.0.1

package/components/upload.scss

@@ -0,0 +1,367 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(upload) {
+  display: none;
+}
+
+@include mixins.b(upload-button) {
+  $selector: &;
+
+  --color: var(--#{variables.$prefix}upload-button-color);
+
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 104px;
+  height: 104px;
+  padding: 8px;
+  vertical-align: top;
+  cursor: pointer;
+  background-color: var(--#{variables.$prefix}background-color-light-gray);
+  border: 1px solid var(--color, var(--#{variables.$prefix}color-border));
+  border-style: dashed;
+  outline: none;
+  transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+  &:hover {
+    @include mixins.e(actions) {
+      opacity: 1;
+    }
+  }
+
+  &:not(#{$selector}--error):hover,
+  &:not(#{$selector}--error):focus {
+    border-color: var(--#{variables.$prefix}color-primary);
+  }
+
+  @include mixins.when(disabled) {
+    pointer-events: none;
+  }
+
+  @include mixins.m(load) {
+    background-color: transparent;
+  }
+
+  @include mixins.m(error) {
+    --color: var(--#{variables.$prefix}upload-button-color, var(--#{variables.$prefix}color-danger));
+  }
+
+  @include mixins.e(thumbnail) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  @include mixins.e(name) {
+    @include mixins.utils-ellipsis;
+
+    max-width: 100%;
+    margin-top: 8px;
+    color: var(--color);
+  }
+
+  @include mixins.e(actions) {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    bottom: 8px;
+    left: 8px;
+    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(icon) {
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 20px;
+  }
+
+  @include mixins.e(text) {
+    margin-top: 8px;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 14px;
+  }
+}
+
+@include mixins.b(upload-action) {
+  $selector: &;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: var(--#{variables.$prefix}color-text);
+  vertical-align: top;
+  appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+
+  &:not(#{$selector}--light):hover,
+  &:not(#{$selector}--light):focus {
+    color: var(--#{variables.$prefix}color-primary);
+  }
+
+  @include mixins.when(disabled) {
+    pointer-events: none;
+    filter: opacity(50%);
+  }
+
+  @include mixins.m(light) {
+    color: map.get(variables.$colors, 'white');
+    transition: background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      background-color: var(--#{variables.$prefix}background-color-light-hover);
+    }
+  }
+
+  @include mixins.m(preview) {
+    text-decoration: none;
+  }
+}
+
+@include mixins.b(upload-list) {
+  --color: var(--#{variables.$prefix}upload-list-color);
+
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  @include mixins.e(item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 24px;
+    transition: background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    & + & {
+      margin-top: 8px;
+    }
+
+    &:hover {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+
+      @include mixins.e(actions) {
+        opacity: 1;
+      }
+    }
+
+    @include mixins.m(error) {
+      --color: var(--#{variables.$prefix}upload-list-color, var(--#{variables.$prefix}color-danger));
+    }
+
+    @include mixins.e(icon) {
+      width: calc(1em + 8px);
+      color: var(--color, var(--#{variables.$prefix}color-text-sub));
+    }
+
+    @include mixins.e(link) {
+      @include mixins.utils-ellipsis;
+
+      display: inline-block;
+      flex: 1 0 0;
+      color: var(--color, var(--#{variables.$prefix}color-text));
+      text-decoration: none;
+
+      @include mixins.when(active) {
+        color: var(--#{variables.$prefix}color-primary);
+      }
+    }
+
+    @include mixins.e(actions) {
+      margin-left: auto;
+      opacity: 0;
+      transition: opacity var(--#{variables.$prefix}animation-duration-base) linear;
+    }
+
+    @include mixins.e(progress-wrapper) {
+      position: absolute;
+      bottom: -4px;
+      left: 24px;
+      width: calc(100% - 24px);
+      height: 2px;
+    }
+  }
+}
+
+@include mixins.b(upload-picture) {
+  --color: var(--#{variables.$prefix}upload-picture-color);
+  --gutter-x: var(--#{variables.$prefix}upload-picture-gutter-x, 8px);
+  --gutter-y: var(--#{variables.$prefix}upload-picture-gutter-y, 8px);
+
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  @include mixins.e(row) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    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;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 104px;
+    height: 104px;
+    padding: 8px;
+    vertical-align: top;
+    background-color: var(--#{variables.$prefix}background-color-light-gray);
+    border: 1px solid var(--#{variables.$prefix}color-border);
+
+    &:hover {
+      @include mixins.e(actions) {
+        opacity: 1;
+      }
+    }
+
+    @include mixins.when(disabled) {
+      pointer-events: none;
+    }
+
+    @include mixins.m(load) {
+      background-color: transparent;
+    }
+
+    @include mixins.m(error) {
+      --color: var(--#{variables.$prefix}upload-picture-color, var(--#{variables.$prefix}color-danger));
+    }
+  }
+
+  @include mixins.e(thumbnail) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  @include mixins.e(name) {
+    @include mixins.utils-ellipsis;
+
+    max-width: 100%;
+    margin-top: 8px;
+    color: var(--color);
+  }
+
+  @include mixins.e(actions) {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    bottom: 8px;
+    left: 8px;
+    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(progress-text) {
+    margin-bottom: 8px;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 14px;
+  }
+}
+
+@include mixins.b(upload-picture-list) {
+  --color: var(--#{variables.$prefix}upload-picture-list-color);
+
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  @include mixins.e(item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 66px;
+    padding: 8px;
+    border: 1px solid var(--#{variables.$prefix}color-border);
+    transition: background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    & + & {
+      margin-top: 8px;
+    }
+
+    &:hover {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+
+      @include mixins.e(actions) {
+        opacity: 1;
+      }
+    }
+
+    @include mixins.m(error) {
+      --color: var(--#{variables.$prefix}upload-picture-list-color, var(--#{variables.$prefix}color-danger));
+    }
+
+    @include mixins.e(thumbnail) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      margin-right: 8px;
+      color: var(--color, var(--#{variables.$prefix}color-text-sub));
+    }
+
+    @include mixins.e(thumbnail-img) {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    @include mixins.e(link) {
+      @include mixins.utils-ellipsis;
+
+      display: inline-block;
+      flex: 1 0 0;
+      line-height: 48px;
+      color: var(--color, var(--#{variables.$prefix}color-text));
+      text-decoration: none;
+
+      @include mixins.when(active) {
+        color: var(--#{variables.$prefix}color-primary);
+      }
+    }
+
+    @include mixins.e(actions) {
+      margin-left: auto;
+      opacity: 0;
+      transition: opacity var(--#{variables.$prefix}animation-duration-base) linear;
+    }
+
+    @include mixins.e(progress-wrapper) {
+      position: absolute;
+      bottom: 16px;
+      left: 64px;
+      width: calc(100% - 74px);
+      height: 2px;
+    }
+  }
+}

package/components/wave.scss

@@ -0,0 +1,36 @@
+@use '../variables';
+@use '../mixins';
+
+@keyframes #{variables.$prefix}wave-wave {
+  0% {
+    box-shadow: 0 0 0 0 currentcolor;
+  }
+
+  100% {
+    box-shadow: 0 0 0 6px currentcolor;
+  }
+}
+
+@keyframes #{variables.$prefix}wave-fade-out {
+  0% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@include mixins.b(wave) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  animation:
+    #{variables.$prefix}wave-wave 0.4s cubic-bezier(0.08, 0.82, 0.17, 1),
+    #{variables.$prefix}wave-fade-out 2s cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-fill-mode: both;
+}

package/index.scss

@@ -0,0 +1,58 @@
+@use 'root';
+
+@use 'reboot';
+@use 'animations';
+@use 'common';
+
+@use 'components/circular-progress';
+@use 'components/mask';
+@use 'components/wave';
+
+@use 'components/accordion';
+@use 'components/alert';
+@use 'components/anchor';
+@use 'components/avatar';
+@use 'components/badge';
+@use 'components/breadcrumb';
+@use 'components/button';
+@use 'components/card';
+@use 'components/cascader';
+@use 'components/checkbox';
+@use 'components/compose';
+@use 'components/date-picker';
+@use 'components/drawer';
+@use 'components/dropdown';
+@use 'components/empty';
+@use 'components/fab';
+@use 'components/form';
+@use 'components/icon';
+@use 'components/image';
+@use 'components/input';
+@use 'components/menu';
+@use 'components/modal';
+@use 'components/notification';
+@use 'components/pagination';
+@use 'components/popover';
+@use 'components/progress';
+@use 'components/radio';
+@use 'components/rating';
+@use 'components/select';
+@use 'components/separator';
+@use 'components/skeleton';
+@use 'components/slider';
+@use 'components/slides';
+@use 'components/spinner';
+@use 'components/stepper';
+@use 'components/switch';
+@use 'components/table';
+@use 'components/tabs';
+@use 'components/tag';
+@use 'components/textarea';
+@use 'components/time-picker';
+@use 'components/timeline';
+@use 'components/toast';
+@use 'components/tooltip';
+@use 'components/transfer';
+@use 'components/tree';
+@use 'components/tree-select';
+@use 'components/upload';

package/mixins/_polyfill.scss

@@ -0,0 +1,34 @@
+@use '../variables';
+
+@mixin polyfill-row-gap($row-gap) {
+  @if variables.$enable-gap == true {
+    row-gap: #{$row-gap};
+  } @else {
+    & {
+      margin-top: -#{$row-gap};
+    }
+
+    & > * {
+      margin-top: #{$row-gap};
+    }
+  }
+}
+
+@mixin polyfill-column-gap($column-gap) {
+  @if variables.$enable-gap == true {
+    column-gap: #{$column-gap};
+  } @else {
+    & > *:not(:last-child) {
+      margin-right: #{$column-gap};
+    }
+  }
+}
+
+@mixin polyfill-gap($row-gap, $column-gap) {
+  @if variables.$enable-gap == true {
+    gap: #{$row-gap} #{$column-gap};
+  } @else {
+    @include polyfill-row-gap($row-gap);
+    @include polyfill-column-gap($row-gap);
+  }
+}

package/mixins/_utils.scss

@@ -0,0 +1,5 @@
+@mixin utils-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/mixins/bem/_bem.scss

@@ -0,0 +1,71 @@
+@use '../../variables';
+@use 'config';
+@use 'function';
+
+$block-prefix: variables.$namespace !default;
+
+@mixin b($block) {
+  $B: $block-prefix + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + '.' + $B + config.$element-separator + $unit + ','};
+  }
+
+  @if function.hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + config.$modifier-separator + $unit + ','};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+// Signify that a class is responsible for adding a Theme to a view.
+@mixin theme($theme) {
+  @at-root {
+    &.#{config.$theme-prefix + $theme} {
+      @content;
+    }
+  }
+}
+
+// Signify that the piece of UI in question is currently
+// styled a certain way because of a state or condition.
+@mixin when($state) {
+  @at-root {
+    &.#{config.$state-prefix + $state} {
+      @content;
+    }
+  }
+}

package/mixins/bem/_config.scss

@@ -0,0 +1,4 @@
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$theme-prefix: 't-' !default;
+$state-prefix: 'is-' !default;

package/mixins/bem/_function.scss

@@ -0,0 +1,45 @@
+@use 'config';
+
+@function containsModifier($selector) {
+  $selector: selectortostring($selector);
+
+  @if str-index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containThemeFlag($selector) {
+  $selector: selectortostring($selector);
+
+  @if str-index($selector, '.' + config.$theme-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectortostring($selector);
+
+  @if str-index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectortostring($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containThemeFlag($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@laser-ui/themes",
+  "version": "0.0.1",
+  "description": "The Sass-based styling solution of Laser UI.",
+  "keywords": [
+    "ui",
+    "laser-ui",
+    "css",
+    "sass"
+  ],
+  "homepage": "https://github.com/laser-ui/laser-ui",
+  "bugs": {
+    "url": "https://github.com/laser-ui/laser-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/laser-ui/laser-ui.git"
+  },
+  "license": "MIT",
+  "author": "Xie Jay <xiejay97@gmail.com>",
+  "dependencies": {
+    "rfs": "^10.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "../../dist/libs/themes"
+  }
+}

package/reboot.scss

@@ -0,0 +1,5 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}