@type-dom/ui 0.1.2 → 0.2.0

package/src/theme-chalk/container.scss

@@ -1,14 +0,0 @@
-@use 'mixins/mixins' as *;
-
-@include b(container) {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  flex-basis: auto;
-  box-sizing: border-box;
-  min-width: 0;
-
-  @include when(vertical) {
-    flex-direction: column;
-  }
-}

package/src/theme-chalk/dark/css-vars.scss

@@ -1,39 +0,0 @@
-// CSS3 var
-@use 'var' as *;
-@use '../mixins/var' as *;
-@use '../mixins/mixins' as *;
-
-html.dark {
-  color-scheme: dark;
-
-  // hex colors
-  @each $type in (primary, success, warning, danger, error, info) {
-    @include set-css-color-type($colors, $type);
-  }
-
-  // --el-box-shadow-#{$type}
-  @include set-component-css-var('box-shadow', $box-shadow);
-
-  // color-scheme
-  // Background --el-bg-color-#{$type}
-  @include set-component-css-var('bg-color', $bg-color);
-  // --el-text-color-#{$type}
-  @include set-component-css-var('text-color', $text-color);
-  // --el-border-color-#{$type}
-  @include set-component-css-var('border-color', $border-color);
-  // Fill --el-fill-color-#{$type}
-  @include set-component-css-var('fill-color', $fill-color);
-  @include set-component-css-var('mask-color', $mask-color);
-}
-
-@include dark(button) {
-  @include set-component-css-var('button', $button);
-}
-
-@include dark(card) {
-  @include set-component-css-var('card', $card);
-}
-
-@include dark(empty) {
-  @include set-component-css-var('empty', $empty);
-}

package/src/theme-chalk/dark/var.scss

@@ -1,222 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:color';
-
-@use '../common/var' as common;
-@use '../mixins/mixins' as *;
-@use '../color/index' as *;
-
-$colors: () !default;
-@each $type in common.$types {
-  $colors: map.deep-merge(
-    (
-      $type: (
-        'base': map.get(common.$colors, $type, 'base'),
-      ),
-    ),
-    $colors
-  ) !global;
-}
-
-// https://sass-lang.com/documentation/values/maps#immutability
-// mix colors with white/black to generate light/dark level
-@mixin set-color-mix-level(
-  $type,
-  $number,
-  $mode: 'light',
-  $mix-color: $color-white
-) {
-  // hex mix color
-  $colors: map.deep-merge(
-    (
-      $type: (
-        '#{$mode}-#{$number}':
-          color.mix(
-            $mix-color,
-            map.get($colors, $type, 'base'),
-            math.percentage(math.div($number, 10))
-          ),
-      ),
-    ),
-    $colors
-  ) !global;
-
-  // for designer to view transparent
-  // $colors: map.deep-merge(
-  //   (
-  //     $type: (
-  //       '#{$mode}-#{$number}':
-  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
-  //     ),
-  //   ),
-  //   $colors
-  // ) !global;
-}
-
-// Background
-$bg-color: () !default;
-$bg-color: map.merge(
-  (
-    'page': #0a0a0a,
-    '': #141414,
-    'overlay': #1d1e1f,
-  ),
-  $bg-color
-);
-
-// dark-mode
-@each $type in common.$types {
-  @for $i from 1 through 9 {
-    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
-  }
-}
-@each $type in common.$types {
-  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
-}
-
-// border
-$border-color-base: #f5f8ff;
-$border-color: () !default;
-$border-color: map.merge(
-  (
-    'darker': rgba($border-color-base, 0.35),
-    'dark': rgba($border-color-base, 0.3),
-    '': rgba($border-color-base, 0.25),
-    'light': rgba($border-color-base, 0.2),
-    'lighter': rgba($border-color-base, 0.15),
-    'extra-light': rgba($border-color-base, 0.1),
-  ),
-  $border-color
-);
-
-// mix to hex to avoid overlay issues
-@each $key, $val in $border-color {
-  $border-color: map.merge(
-    $border-color,
-    (
-      $key: mix-overlay-color($val, map.get($bg-color, '')),
-    )
-  ) !global;
-}
-
-// Box-shadow
-$box-shadow: () !default;
-$box-shadow: map.merge(
-  (
-    '': (
-      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
-      0px 8px 20px rgba(0, 0, 0, 0.72),
-    ),
-    'light': (
-      0px 0px 12px rgba(0, 0, 0, 0.72),
-    ),
-    'lighter': (
-      0px 0px 6px rgba(0, 0, 0, 0.72),
-    ),
-    'dark': (
-      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
-      0px 12px 32px #000000,
-      0px 8px 16px -8px #000000,
-    ),
-  ),
-  $box-shadow
-);
-
-// fill
-$fill-color-base: #fafcff;
-$fill-color: () !default;
-$fill-color: map.merge(
-  (
-    'darker': rgba($fill-color-base, 0.2),
-    'dark': rgba($fill-color-base, 0.16),
-    '': rgba($fill-color-base, 0.12),
-    'light': rgba($fill-color-base, 0.08),
-    'lighter': rgba($fill-color-base, 0.04),
-    'extra-light': rgba($fill-color-base, 0.02),
-    'blank': transparent,
-  ),
-  $fill-color
-);
-
-// mix to hex to avoid overlay issues
-@each $key, $val in $fill-color {
-  @if ($key != 'blank') {
-    $fill-color: map.merge(
-      $fill-color,
-      (
-        $key: mix-overlay-color($val, map.get($bg-color, '')),
-      )
-    ) !global;
-  }
-}
-
-// text
-$text-color-base: #f0f5ff;
-$text-color: () !default;
-$text-color: map.merge(
-  (
-    'primary': rgba($text-color-base, 0.95),
-    'regular': rgba($text-color-base, 0.85),
-    'secondary': rgba($text-color-base, 0.65),
-    'placeholder': rgba($text-color-base, 0.55),
-    'disabled': rgba($text-color-base, 0.4),
-  ),
-  $text-color
-);
-// mix to hex to avoid overlay issues
-@each $key, $val in $text-color {
-  $text-color: map.merge(
-    $text-color,
-    (
-      $key: mix-overlay-color($val, map.get($bg-color, '')),
-    )
-  ) !global;
-}
-
-// mask
-$mask-color: () !default;
-$mask-color: map.merge(
-  (
-    '': rgba(0, 0, 0, 0.8),
-    'extra-light': rgba(0, 0, 0, 0.3),
-  ),
-  $mask-color
-);
-
-// Button
-// css3 var in packages/theme-chalk/src/button.scss
-$button: () !default;
-$button: map.merge(
-  (
-    'disabled-text-color': rgba(255, 255, 255, 0.5),
-  ),
-  $button
-);
-
-// card
-$card: () !default;
-$card: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-  ),
-  $card
-);
-
-// Empty
-// css3 var in packages/theme-chalk/src/empty.scss
-$empty: () !default;
-$empty: map.merge(
-  (
-    'fill-color-0': getCssVar('color-black'),
-    'fill-color-1': #4b4b52,
-    'fill-color-2': #36383d,
-    'fill-color-3': #1e1e20,
-    'fill-color-4': #262629,
-    'fill-color-5': #202124,
-    'fill-color-6': #212224,
-    'fill-color-7': #1b1c1f,
-    'fill-color-8': #1c1d1f,
-    'fill-color-9': #18181a,
-  ),
-  $empty
-);

package/src/theme-chalk/date-picker/date-picker.scss

@@ -1,110 +0,0 @@
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-@use '../mixins/var' as *;
-@use 'picker-panel';
-
-@include b(date-picker) {
-  @include set-component-css-var('datepicker', $datepicker);
-}
-
-@include b(date-picker) {
-  width: 322px;
-
-  &.has-sidebar.has-time {
-    width: 434px;
-  }
-
-  &.has-sidebar {
-    width: 438px;
-  }
-
-  &.has-time .#{$namespace}-picker-panel__body-wrapper {
-    position: relative;
-  }
-
-  .#{$namespace}-picker-panel__content {
-    width: 292px;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  @include e(editor-wrap) {
-    position: relative;
-    display: table-cell;
-    padding: 0 5px;
-  }
-
-  @include e(time-header) {
-    position: relative;
-    border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
-    font-size: 12px;
-    padding: 8px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  @include e(header) {
-    padding: 12px 12px 0;
-    text-align: center;
-
-    @include m(bordered) {
-      margin-bottom: 0;
-      padding-bottom: 12px;
-      border-bottom: solid 1px getCssVar('border-color-lighter');
-
-      & + .#{$namespace}-picker-panel__content {
-        margin-top: 0;
-      }
-    }
-  }
-
-  @include e(header-label) {
-    font-size: 16px;
-    font-weight: 500;
-    padding: 0 5px;
-    line-height: 22px;
-    text-align: center;
-    cursor: pointer;
-    color: getCssVar('text-color', 'regular');
-
-    &:hover {
-      color: getCssVar('datepicker-hover-text-color');
-    }
-    &:focus-visible {
-      outline: none;
-      color: getCssVar('datepicker-hover-text-color');
-    }
-
-    &.active {
-      color: getCssVar('datepicker-active-color');
-    }
-  }
-
-  @include e(prev-btn) {
-    float: left;
-  }
-
-  @include e(next-btn) {
-    float: right;
-  }
-
-  @include e(time-wrap) {
-    padding: 10px;
-    text-align: center;
-  }
-
-  @include e(time-label) {
-    float: left;
-    cursor: pointer;
-    line-height: 30px;
-    margin-left: 10px;
-  }
-
-  .#{$namespace}-time-panel {
-    position: absolute;
-  }
-}

package/src/theme-chalk/date-picker/date-range-picker.scss

@@ -1,113 +0,0 @@
-@use '../mixins/mixins' as *;
-@use '../common/var' as *;
-@use '../mixins/var' as *;
-
-@include b(date-range-picker) {
-  @include set-component-css-var('datepicker', $datepicker);
-}
-
-@include b(date-range-picker) {
-  width: 646px;
-
-  &.has-sidebar {
-    width: 756px;
-  }
-
-  &.has-time .#{$namespace}-picker-panel__body-wrapper {
-    position: relative;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  .#{$namespace}-picker-panel__body {
-    min-width: 513px;
-  }
-
-  .#{$namespace}-picker-panel__content {
-    margin: 0;
-  }
-
-  @include e(header) {
-    position: relative;
-    text-align: center;
-    height: 28px;
-
-    [class*='arrow-left'] {
-      float: left;
-    }
-
-    [class*='arrow-right'] {
-      float: right;
-    }
-
-    div {
-      font-size: 16px;
-      font-weight: 500;
-      margin-right: 50px;
-    }
-  }
-
-  @include e(content) {
-    float: left;
-    width: 50%;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 16px;
-
-    @include when(left) {
-      border-right: 1px solid getCssVar('datepicker-inner-border-color');
-    }
-    .#{$namespace}-date-range-picker__header {
-      div {
-        margin-left: 50px;
-        margin-right: 50px;
-      }
-    }
-  }
-
-  @include e(editors-wrap) {
-    box-sizing: border-box;
-    display: table-cell;
-
-    @include when(right) {
-      text-align: right;
-    }
-  }
-
-  @include e(time-header) {
-    position: relative;
-    border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
-    font-size: 12px;
-    padding: 8px 5px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
-
-    > .#{$namespace}-icon-arrow-right {
-      font-size: 20px;
-      vertical-align: middle;
-      display: table-cell;
-      color: getCssVar('datepicker-icon-color');
-    }
-  }
-
-  @include e(time-picker-wrap) {
-    position: relative;
-    display: table-cell;
-    padding: 0 5px;
-
-    .#{$namespace}-picker-panel {
-      position: absolute;
-      top: 13px;
-      right: 0;
-      z-index: 1;
-      background: $color-white;
-    }
-    .#{$namespace}-time-panel {
-      position: absolute;
-    }
-  }
-}

package/src/theme-chalk/date-picker/date-table.scss

@@ -1,158 +0,0 @@
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-@include b(date-table) {
-  font-size: 12px;
-  user-select: none;
-
-  @include when(week-mode) {
-    .#{$namespace}-date-table__row {
-      &:hover {
-        .#{$namespace}-date-table-cell {
-          background-color: getCssVar('datepicker-inrange-bg-color');
-        }
-        td.available:hover {
-          color: getCssVar('datepicker-text-color');
-        }
-        td:first-child .#{$namespace}-date-table-cell {
-          margin-left: 5px;
-          border-top-left-radius: 15px;
-          border-bottom-left-radius: 15px;
-        }
-        td:last-child .#{$namespace}-date-table-cell {
-          margin-right: 5px;
-          border-top-right-radius: 15px;
-          border-bottom-right-radius: 15px;
-        }
-      }
-
-      &.current .#{$namespace}-date-table-cell {
-        background-color: getCssVar('datepicker-inrange-bg-color');
-      }
-    }
-  }
-
-  td {
-    width: 32px;
-    height: 30px;
-    padding: 4px 0;
-    box-sizing: border-box;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-
-    @include b(date-table-cell) {
-      height: 30px;
-      padding: 3px 0;
-      box-sizing: border-box;
-      @include b(date-table-cell__text) {
-        width: 24px;
-        height: 24px;
-        display: block;
-        margin: 0 auto;
-        line-height: 24px;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: 50%;
-      }
-    }
-
-    &.next-month,
-    &.prev-month {
-      color: getCssVar('datepicker-off-text-color');
-    }
-
-    &.today {
-      position: relative;
-      .#{$namespace}-date-table-cell__text {
-        color: getCssVar('color-primary');
-        font-weight: bold;
-      }
-      &.start-date .#{$namespace}-date-table-cell__text,
-      &.end-date .#{$namespace}-date-table-cell__text {
-        color: $color-white;
-      }
-    }
-
-    &.available:hover {
-      color: getCssVar('datepicker-hover-text-color');
-    }
-
-    &.in-range .#{$namespace}-date-table-cell {
-      background-color: getCssVar('datepicker-inrange-bg-color');
-      &:hover {
-        background-color: getCssVar('datepicker-inrange-hover-bg-color');
-      }
-    }
-
-    &.current:not(.disabled) {
-      .#{$namespace}-date-table-cell__text {
-        color: $color-white;
-        background-color: getCssVar('datepicker-active-color');
-      }
-      &:focus-visible {
-        .#{$namespace}-date-table-cell__text {
-          outline: 2px solid getCssVar('datepicker-active-color');
-          outline-offset: 1px;
-        }
-      }
-    }
-    &.start-date .#{$namespace}-date-table-cell,
-    &.end-date .#{$namespace}-date-table-cell {
-      color: $color-white;
-    }
-
-    &.start-date .#{$namespace}-date-table-cell__text,
-    &.end-date .#{$namespace}-date-table-cell__text {
-      background-color: getCssVar('datepicker-active-color');
-    }
-
-    &.start-date .#{$namespace}-date-table-cell {
-      margin-left: 5px;
-      border-top-left-radius: 15px;
-      border-bottom-left-radius: 15px;
-    }
-
-    &.end-date .#{$namespace}-date-table-cell {
-      margin-right: 5px;
-      border-top-right-radius: 15px;
-      border-bottom-right-radius: 15px;
-    }
-
-    &.disabled .#{$namespace}-date-table-cell {
-      background-color: getCssVar('fill-color', 'light');
-      opacity: 1;
-      cursor: not-allowed;
-      color: getCssVar('text-color', 'placeholder');
-    }
-
-    &.selected .#{$namespace}-date-table-cell {
-      margin-left: 5px;
-      margin-right: 5px;
-      border-radius: 15px;
-    }
-
-    &.selected .#{$namespace}-date-table-cell__text {
-      background-color: getCssVar('datepicker-active-color');
-      color: $color-white;
-      border-radius: 15px;
-    }
-
-    &.week {
-      font-size: 80%;
-      color: getCssVar('datepicker-header-text-color');
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  th {
-    padding: 5px;
-    color: getCssVar('datepicker-header-text-color');
-    font-weight: 400;
-    border-bottom: solid 1px getCssVar('border-color-lighter');
-  }
-}