lumen-plus 0.0.2 → 0.0.4

package/dist/theme-chalk/statistic.scss

@@ -0,0 +1,49 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('statistic') {
+    @include e('title') {
+        font-size: $font-size-small;
+        color: $color-text-secondary;
+        margin-bottom: 8px;
+    }
+
+    @include e('content') {
+        display: flex;
+        align-items: baseline;
+        font-size: $font-size-extra-large;
+        color: $color-text-primary;
+    }
+
+    @include e('value') {
+        font-weight: $font-weight-primary;
+        font-variant-numeric: tabular-nums;
+    }
+
+    @include e('prefix') {
+        margin-right: 4px;
+    }
+
+    @include e('suffix') {
+        margin-left: 4px;
+        font-size: $font-size-base;
+    }
+}
+
+@include b('countdown') {
+    .#{$namespace}-statistic__value {
+        font-variant-numeric: tabular-nums;
+    }
+}
+
+.dark {
+    .#{$namespace}-statistic {
+        .#{$namespace}-statistic__title {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-statistic__content {
+            color: $color-text-dark;
+        }
+    }
+}

package/dist/theme-chalk/steps.scss

@@ -0,0 +1,255 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('steps') {
+    display: flex;
+
+    @include m('horizontal') {
+        flex-direction: row;
+
+        .#{$namespace}-step {
+            flex: 1;
+            position: relative;
+
+            &:last-child {
+                flex: none;
+
+                .#{$namespace}-step__line {
+                    display: none;
+                }
+            }
+        }
+
+        .#{$namespace}-step__head {
+            display: flex;
+            align-items: center;
+        }
+
+        .#{$namespace}-step__line {
+            flex: 1;
+            height: 2px;
+            margin: 0 12px;
+        }
+    }
+
+    @include m('vertical') {
+        flex-direction: column;
+
+        .#{$namespace}-step {
+            &:last-child {
+                .#{$namespace}-step__line {
+                    display: none;
+                }
+            }
+        }
+
+        .#{$namespace}-step__head {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .#{$namespace}-step__line {
+            width: 2px;
+            flex: 1;
+            min-height: 50px;
+            margin: 8px 0 8px 13px;
+        }
+
+        .#{$namespace}-step__main {
+            padding-left: 16px;
+            padding-bottom: 24px;
+        }
+    }
+
+    @include m('simple') {
+        .#{$namespace}-step__description {
+            display: none;
+        }
+    }
+
+    @include when('center') {
+        .#{$namespace}-step__head {
+            justify-content: center;
+        }
+
+        .#{$namespace}-step__main {
+            text-align: center;
+        }
+    }
+}
+
+@include b('step') {
+    display: flex;
+    flex-direction: column;
+
+    &.is-wait {
+        .#{$namespace}-step__icon {
+            background: $bg-color;
+            border-color: $border-color-lighter;
+            color: $border-color-lighter;
+        }
+
+        .#{$namespace}-step__line {
+            background: $border-color-lighter;
+        }
+
+        .#{$namespace}-step__title {
+            color: $color-text-secondary;
+        }
+    }
+
+    &.is-process {
+        .#{$namespace}-step__icon {
+            background: $color-primary;
+            border-color: $color-primary;
+            color: #fff;
+        }
+
+        .#{$namespace}-step__line {
+            background: $border-color-lighter;
+        }
+
+        .#{$namespace}-step__title {
+            color: $color-text-primary;
+            font-weight: $font-weight-primary;
+        }
+    }
+
+    &.is-finish {
+        .#{$namespace}-step__icon {
+            background: $bg-color;
+            border-color: $color-primary;
+            color: $color-primary;
+        }
+
+        .#{$namespace}-step__line {
+            background: $color-primary;
+        }
+
+        .#{$namespace}-step__title {
+            color: $color-text-primary;
+        }
+    }
+
+    &.is-success {
+        .#{$namespace}-step__icon {
+            background: $bg-color;
+            border-color: $color-success;
+            color: $color-success;
+        }
+
+        .#{$namespace}-step__line {
+            background: $color-success;
+        }
+    }
+
+    &.is-error {
+        .#{$namespace}-step__icon {
+            background: $bg-color;
+            border-color: $color-danger;
+            color: $color-danger;
+        }
+
+        .#{$namespace}-step__title {
+            color: $color-danger;
+        }
+    }
+
+    @include e('head') {
+        display: flex;
+        align-items: center;
+    }
+
+    @include e('icon') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: $border-radius-circle;
+        border: 2px solid;
+        font-size: $font-size-base;
+        flex-shrink: 0;
+        transition: background-color $transition-duration, border-color $transition-duration, color $transition-duration;
+    }
+
+    @include e('icon-inner') {
+        font-weight: $font-weight-primary;
+    }
+
+    @include e('line') {
+        background: $border-color-lighter;
+        transition: background $transition-duration;
+    }
+
+    @include e('main') {
+        margin-top: 8px;
+    }
+
+    @include e('title') {
+        font-size: $font-size-base;
+        line-height: 1.5;
+        transition: color $transition-duration;
+    }
+
+    @include e('description') {
+        font-size: $font-size-small;
+        color: $color-text-secondary;
+        margin-top: 4px;
+    }
+}
+
+.dark {
+    .#{$namespace}-step {
+        .#{$namespace}-step__title {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-step__description {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-step__line {
+            background: color-mix(in oklab, #{$bg-color-dark-lighter} 72%, #{$color-text-dark});
+        }
+
+        &.is-wait {
+            .#{$namespace}-step__icon {
+                background: $bg-color-dark-light;
+                border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 72%, #{$color-text-dark});
+                color: color-mix(in oklab, #{$bg-color-dark-lighter} 72%, #{$color-text-dark});
+            }
+
+            .#{$namespace}-step__line {
+                background: color-mix(in oklab, #{$bg-color-dark-lighter} 72%, #{$color-text-dark});
+            }
+
+            .#{$namespace}-step__title {
+                color: $color-text-dark-secondary;
+            }
+        }
+
+        &.is-process {
+            .#{$namespace}-step__line {
+                background: color-mix(in oklab, #{$bg-color-dark-lighter} 72%, #{$color-text-dark});
+            }
+
+            .#{$namespace}-step__title {
+                color: $color-text-dark;
+            }
+        }
+
+        &.is-finish {
+            .#{$namespace}-step__icon {
+                background: $bg-color-dark-light;
+            }
+        }
+
+        &.is-success,
+        &.is-error {
+            .#{$namespace}-step__icon {
+                background: $bg-color-dark-light;
+            }
+        }
+    }
+}

package/dist/theme-chalk/switch.scss

@@ -0,0 +1,277 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+@use './mixins/function' as *;
+
+@keyframes #{$namespace}-switch-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@include b(switch) {
+  --sw-height: 24px;
+  --sw-width: 40px;
+  --sw-color: #{$color-primary};
+  
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  height: var(--sw-height);
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  font-family: inherit;
+  -webkit-tap-highlight-color: transparent;
+
+  @include e(track) {
+    position: relative;
+    width: var(--sw-width);
+    height: var(--sw-height);
+    background-color: $border-color-light;
+    border-radius: calc(var(--sw-height) / 2);
+    transition: background-color $transition-duration cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+  }
+
+  .#{$namespace}-switch__icon {
+    position: absolute;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    width: calc(var(--sw-height) - 8px);
+    height: calc(var(--sw-height) - 8px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 0;
+    color: $color-text-secondary;
+    opacity: 0.9;
+    transition:
+      transform $transition-duration cubic-bezier(0.4, 0, 0.2, 1),
+      opacity $transition-duration cubic-bezier(0.4, 0, 0.2, 1),
+      color $transition-duration cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .#{$namespace}-switch__icon--left {
+    left: 6px;
+    opacity: 0;
+    transform: translate3d(-6px, -50%, 0);
+  }
+
+  .#{$namespace}-switch__icon--right {
+    right: 6px;
+    opacity: 1;
+  }
+
+  @include e(thumb) {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(var(--sw-height) - 4px);
+    height: calc(var(--sw-height) - 4px);
+    background-color: $bg-color;
+    border-radius: 50%;
+    transition: transform $transition-duration cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+  }
+
+  @include e(loading) {
+    display: flex;
+    animation: #{$namespace}-switch-spin 1s linear infinite;
+    color: $color-text-secondary;
+  }
+
+  @include e(label) {
+    margin-left: $spacing-mini;
+    color: $color-text-regular;
+    font-size: $font-size-base;
+    white-space: nowrap;
+    transition: color $transition-duration;
+
+    @include when(loading) {
+      color: $color-text-secondary;
+    }
+  }
+
+  // Sizes
+  @include m(small) {
+    --sw-height: 20px;
+    --sw-width: 32px;
+
+    .#{$namespace}-switch__icon--left {
+      left: 4px;
+    }
+
+    .#{$namespace}-switch__icon--right {
+      right: 4px;
+    }
+
+    .#{$namespace}-switch__label {
+      font-size: $font-size-small;
+    }
+  }
+
+  @include m(medium) {
+    --sw-height: 24px;
+    --sw-width: 40px;
+  }
+
+  @include m(large) {
+    --sw-height: 28px;
+    --sw-width: 48px;
+
+    .#{$namespace}-switch__icon--left {
+      left: 8px;
+    }
+
+    .#{$namespace}-switch__icon--right {
+      right: 8px;
+    }
+
+    .#{$namespace}-switch__label {
+      font-size: $font-size-medium;
+    }
+  }
+
+  // When there are icons inside the track, widen the track.
+  &.is-has-icons {
+    &.#{$namespace}-switch--small {
+      --sw-width: 40px;
+    }
+
+    &.#{$namespace}-switch--medium {
+      --sw-width: 48px;
+    }
+
+    &.#{$namespace}-switch--large {
+      --sw-width: 56px;
+    }
+  }
+
+  // States
+  @include when(active) {
+    .#{$namespace}-switch__track {
+      background-color: var(--sw-color);
+    }
+
+    .#{$namespace}-switch__icon {
+      color: rgba(255, 255, 255, 0.92);
+    }
+
+    .#{$namespace}-switch__icon--left {
+      opacity: 1;
+      transform: translate3d(0, -50%, 0);
+    }
+
+    .#{$namespace}-switch__icon--right {
+      opacity: 0;
+      transform: translate3d(6px, -50%, 0);
+    }
+
+    .#{$namespace}-switch__thumb {
+      transform: translateX(calc(var(--sw-width) - var(--sw-height)));
+    }
+  }
+
+  @include when(disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    .#{$namespace}-switch__track {
+      background-color: $border-color-extra-light;
+    }
+
+    .#{$namespace}-switch__thumb {
+      box-shadow: none;
+    }
+  }
+
+  @include when(loading) {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  // Hover effect
+  &:not(.is-disabled):not(.is-loading):hover {
+    .#{$namespace}-switch__thumb {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
+    }
+  }
+
+  // Focus visible
+  &:focus-visible {
+    .#{$namespace}-switch__track {
+      outline: 2px solid var(--sw-color);
+      outline-offset: 2px;
+    }
+  }
+}
+
+.dark {
+  .#{$namespace}-switch {
+    .#{$namespace}-switch__icon {
+      color: $color-text-dark-secondary;
+    }
+
+    .#{$namespace}-switch__track {
+      background-color: color-mix(in oklab, $bg-color-dark-overlay 80%, $bg-color);
+    }
+
+    .#{$namespace}-switch__thumb {
+      background-color: $bg-color;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+    }
+
+    .#{$namespace}-switch__loading {
+      color: $color-text-dark-secondary;
+    }
+
+    .#{$namespace}-switch__label {
+      color: $color-text-dark-secondary;
+    }
+
+    &.is-active {
+      .#{$namespace}-switch__track {
+        background-color: var(--sw-color);
+      }
+
+      .#{$namespace}-switch__icon {
+        color: rgba(255, 255, 255, 0.92);
+      }
+
+      .#{$namespace}-switch__thumb {
+        background-color: $bg-color;
+      }
+
+      .#{$namespace}-switch__label {
+        color: $color-text-dark;
+      }
+    }
+
+    &.is-disabled {
+      .#{$namespace}-switch__track {
+        background-color: $bg-color-dark-overlay;
+      }
+
+      .#{$namespace}-switch__thumb {
+        background-color: $bg-color-dark-lighter;
+        box-shadow: none;
+      }
+
+      .#{$namespace}-switch__label {
+        color: rgba($color-text-dark, 0.45);
+      }
+    }
+  }
+}