lumen-plus 0.0.2 → 0.0.4

package/dist/theme-chalk/form.scss

@@ -0,0 +1,187 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+@use './mixins/function' as *;
+
+@include b(form) {
+    font-size: $font-size-base;
+
+    @include m(inline) {
+        .#{$namespace}-form-item {
+            display: inline-flex;
+            margin-right: $spacing-base;
+            margin-bottom: 0;
+            vertical-align: top;
+        }
+    }
+
+    @include when(disabled) {
+        .#{$namespace}-form-item__label {
+            color: $color-text-placeholder;
+        }
+    }
+}
+
+@include b(form-item) {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 22px;
+
+    --lm-form-item-message-gap: 2px;
+    --lm-form-item-message-line-height: 18px;
+    --lm-form-item-message-min-height: 18px;
+    --lm-form-item-message-reserve: calc(var(--lm-form-item-message-gap) + var(--lm-form-item-message-min-height));
+
+    @include e(label) {
+        font-weight: $font-weight-primary;
+        color: $color-text-primary;
+        padding-right: $spacing-mini;
+        line-height: 32px;
+        font-size: $font-size-base;
+        text-align: right;
+        user-select: none;
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+
+    @include e(content) {
+        flex: 1;
+        min-width: 0;
+        position: relative;
+        line-height: 32px;
+        padding-bottom: var(--lm-form-item-message-reserve);
+    }
+
+    @include e(message) {
+        position: absolute;
+        top: calc(100% - var(--lm-form-item-message-reserve));
+        left: 0;
+        margin: var(--lm-form-item-message-gap) 0 0;
+        font-size: $font-size-extra-small;
+        color: $color-text-secondary;
+        line-height: var(--lm-form-item-message-line-height);
+        min-height: var(--lm-form-item-message-min-height);
+
+        @include when(inline) {
+            position: static;
+            display: inline-block;
+            margin-left: $spacing-mini;
+            padding: 2px 0;
+        }
+    }
+
+    @include m(small) {
+        --lm-form-item-message-line-height: 16px;
+        --lm-form-item-message-min-height: 16px;
+
+        @include e(label) {
+            line-height: 24px;
+            font-size: $font-size-small;
+        }
+
+        @include e(content) {
+            line-height: 24px;
+        }
+    }
+
+    @include m(medium) {
+        --lm-form-item-message-line-height: 18px;
+        --lm-form-item-message-min-height: 18px;
+
+        @include e(label) {
+            line-height: 32px;
+            font-size: $font-size-base;
+        }
+
+        @include e(content) {
+            line-height: 32px;
+        }
+    }
+
+    @include m(large) {
+        --lm-form-item-message-line-height: 18px;
+        --lm-form-item-message-min-height: 18px;
+
+        @include e(label) {
+            line-height: 40px;
+            font-size: $font-size-medium;
+        }
+
+        @include e(content) {
+            line-height: 40px;
+        }
+    }
+
+    @include when(error) {
+        @include e(message) {
+            color: $color-danger;
+        }
+    }
+
+    @include when(success) {
+        @include e(message) {
+            color: $color-success;
+        }
+    }
+
+    @include when(warning) {
+        @include e(message) {
+            color: $color-warning;
+        }
+    }
+
+    @include when(validating) {
+        @include e(message) {
+            color: $color-text-secondary;
+        }
+    }
+
+    @include when(disabled) {
+        @include e(label) {
+            color: $color-text-placeholder;
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-form {
+        @include when(disabled) {
+            .#{$namespace}-form-item__label {
+                color: $color-text-dark-secondary;
+            }
+        }
+    }
+
+    .#{$namespace}-form-item {
+        .#{$namespace}-form-item__label {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-form-item__message {
+            color: $color-text-dark-secondary;
+        }
+
+        &.is-error {
+            .#{$namespace}-form-item__message {
+                color: $color-danger;
+            }
+        }
+
+        &.is-success {
+            .#{$namespace}-form-item__message {
+                color: $color-success;
+            }
+        }
+
+        &.is-warning {
+            .#{$namespace}-form-item__message {
+                color: $color-warning;
+            }
+        }
+
+        &.is-disabled {
+            .#{$namespace}-form-item__label {
+                color: $color-text-dark-secondary;
+            }
+        }
+    }
+}

package/dist/theme-chalk/icon.scss

@@ -0,0 +1,16 @@
+@use './mixins/bem' as *;
+
+@include b('icon') {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    flex-shrink: 0;
+    line-height: 1;
+    
+    svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+}

package/dist/theme-chalk/image.scss

@@ -0,0 +1,171 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('image') {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+
+    @include when('preview') {
+        cursor: pointer;
+    }
+
+    @include e('wrapper') {
+        display: block;
+        border: none;
+        background: transparent;
+        padding: 0;
+        cursor: pointer;
+    }
+
+    @include e('inner') {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    @include e('placeholder') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: $bg-color-page;
+        color: $color-text-placeholder;
+    }
+
+    @include e('error') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: $bg-color-page;
+        color: $color-text-secondary;
+    }
+}
+
+@include b('image-viewer') {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-popper + 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+
+    @include e('mask') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    @include e('close') {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        border: none;
+        border-radius: $border-radius-circle;
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+        cursor: pointer;
+        transition: background $transition-duration-fast;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    @include e('prev') {
+        position: absolute;
+        top: 50%;
+        left: 20px;
+        transform: translateY(-50%);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        border: none;
+        border-radius: $border-radius-circle;
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+        cursor: pointer;
+        transition: background $transition-duration-fast;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    @include e('next') {
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        border: none;
+        border-radius: $border-radius-circle;
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+        cursor: pointer;
+        transition: background $transition-duration-fast;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    @include e('canvas') {
+        position: relative;
+        max-width: 90vw;
+        max-height: 90vh;
+    }
+
+    @include e('img') {
+        max-width: 100%;
+        max-height: 90vh;
+        object-fit: contain;
+    }
+}
+
+.dark {
+    .#{$namespace}-image {
+        .#{$namespace}-image__placeholder,
+        .#{$namespace}-image__error {
+            background: $bg-color-dark-light;
+        }
+
+        .#{$namespace}-image__placeholder {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-image__error {
+            color: $color-text-dark-secondary;
+        }
+    }
+}

package/dist/theme-chalk/input-number.scss

@@ -0,0 +1,229 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('input-number') {
+    display: inline-flex;
+    align-items: stretch;
+    width: 150px;
+    border: 1px solid $border-color-base;
+    border-radius: $border-radius-base;
+    background: $bg-color;
+    line-height: 1;
+    transition: border-color $transition-duration-fast;
+
+    &:hover {
+        border-color: #c0c4cc;
+    }
+
+    &.is-focus {
+        border-color: $color-primary;
+    }
+
+    @include m('small') {
+        height: 28px;
+
+        .#{$namespace}-input-number__input {
+            font-size: $font-size-small;
+        }
+
+        .#{$namespace}-input-number__decrease,
+        .#{$namespace}-input-number__increase {
+            width: 28px;
+        }
+    }
+
+    @include m('default') {
+        height: 32px;
+
+        .#{$namespace}-input-number__input {
+            font-size: $font-size-base;
+        }
+
+        .#{$namespace}-input-number__decrease,
+        .#{$namespace}-input-number__increase {
+            width: 32px;
+        }
+    }
+
+    @include m('large') {
+        height: 40px;
+
+        .#{$namespace}-input-number__input {
+            font-size: $font-size-medium;
+        }
+
+        .#{$namespace}-input-number__decrease,
+        .#{$namespace}-input-number__increase {
+            width: 40px;
+        }
+    }
+
+    @include when('disabled') {
+        background: $bg-color-page;
+        cursor: not-allowed;
+
+        .#{$namespace}-input-number__input {
+            color: $color-text-disabled;
+            cursor: not-allowed;
+        }
+    }
+
+    @include when('controls-right') {
+        .#{$namespace}-input-number__input {
+            border-radius: $border-radius-base 0 0 $border-radius-base;
+        }
+
+        .#{$namespace}-input-number__controls {
+            display: flex;
+            flex-direction: column;
+            width: 24px;
+            border-left: 1px solid $border-color-base;
+        }
+
+        .#{$namespace}-input-number__increase,
+        .#{$namespace}-input-number__decrease {
+            flex: 1;
+            width: 100%;
+            height: 50%;
+            border: none;
+            border-radius: 0;
+        }
+
+        .#{$namespace}-input-number__increase {
+            border-bottom: 1px solid $border-color-lighter;
+            border-radius: 0 $border-radius-base 0 0;
+        }
+
+        .#{$namespace}-input-number__decrease {
+            border-radius: 0 0 $border-radius-base 0;
+        }
+    }
+
+    @include e('input') {
+        flex: 1;
+        width: 100%;
+        min-width: 40px;
+        height: 100%;
+        padding: 0 8px;
+        border: none;
+        outline: none;
+        background: transparent;
+        text-align: center;
+        color: $color-text-primary;
+        -moz-appearance: textfield;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &::placeholder {
+            color: $color-text-placeholder;
+        }
+    }
+
+    @include e('decrease') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border: none;
+        border-right: 1px solid $border-color-base;
+        border-radius: $border-radius-base 0 0 $border-radius-base;
+        background-color: $bg-color-page;
+        cursor: pointer;
+        color: $color-text-secondary;
+        transition: color $transition-duration-fast;
+
+        &:hover:not(:disabled) {
+            color: $color-primary;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            color: $color-text-disabled;
+        }
+    }
+
+    @include e('increase') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border: none;
+        border-left: 1px solid $border-color-base;
+        border-radius: 0 $border-radius-base $border-radius-base 0;
+        background-color: $bg-color-page;
+        cursor: pointer;
+        color: $color-text-secondary;
+        transition: color $transition-duration-fast;
+
+        &:hover:not(:disabled) {
+            color: $color-primary;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            color: $color-text-disabled;
+        }
+    }
+
+    @include e('controls') {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+    }
+}
+
+.dark {
+    .#{$namespace}-input-number {
+        background: $bg-color-dark-light;
+        border-color: color-mix(in oklab, $bg-color-dark-lighter 82%, $color-text-dark-secondary);
+
+        &:hover {
+            border-color: color-mix(in oklab, $bg-color-dark-lighter 65%, $color-text-dark-secondary);
+        }
+
+        &.is-focus {
+            border-color: $color-primary;
+        }
+
+        @include when('disabled') {
+            background: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-input-number__input {
+            color: $color-text-dark;
+
+            &::placeholder {
+                color: $color-text-dark-secondary;
+            }
+        }
+
+        .#{$namespace}-input-number__decrease,
+        .#{$namespace}-input-number__increase {
+            background: $bg-color-dark-lighter;
+            color: $color-text-dark-secondary;
+            border-color: color-mix(in oklab, $bg-color-dark-lighter 82%, $color-text-dark-secondary);
+        }
+
+        .#{$namespace}-input-number__decrease {
+            border-right-color: color-mix(in oklab, $bg-color-dark-lighter 82%, $color-text-dark-secondary);
+        }
+
+        .#{$namespace}-input-number__increase {
+            border-left-color: color-mix(in oklab, $bg-color-dark-lighter 82%, $color-text-dark-secondary);
+        }
+
+        @include when('controls-right') {
+            .#{$namespace}-input-number__controls {
+                border-left-color: color-mix(in oklab, $bg-color-dark-lighter 82%, $color-text-dark-secondary);
+            }
+
+            .#{$namespace}-input-number__increase {
+                border-bottom-color: color-mix(in oklab, $bg-color-dark-lighter 82%, $color-text-dark-secondary);
+            }
+        }
+    }
+}

package/dist/theme-chalk/input-tag.scss

@@ -0,0 +1,119 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('input-tag') {
+  position: relative;
+  display: inline-block;
+  width: 220px;
+  max-width: 100%;
+
+  font-size: $font-size-base;
+
+  @include m('small') {
+    font-size: $font-size-small;
+    .#{$namespace}-input-tag__inner { min-height: 28px; }
+    .#{$namespace}-input-tag__input { height: 24px; }
+  }
+
+  @include m('default') {
+    font-size: $font-size-base;
+    .#{$namespace}-input-tag__inner { min-height: 32px; }
+    .#{$namespace}-input-tag__input { height: 26px; }
+  }
+
+  @include m('large') {
+    font-size: $font-size-medium;
+    .#{$namespace}-input-tag__inner { min-height: 40px; }
+    .#{$namespace}-input-tag__input { height: 30px; }
+  }
+
+  @include e('inner') {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+
+    padding: 2px 10px;
+    border: 1px solid $border-color-base;
+    border-radius: $border-radius-base;
+    background: $bg-color;
+
+    cursor: text;
+    transition: border-color $transition-duration-fast;
+
+    &:hover { border-color: #c0c4cc; }
+  }
+
+  @include e('input') {
+    flex: 1 1 60px;
+    min-width: 60px;
+
+    border: none;
+    outline: none;
+    background: transparent;
+
+    font-size: inherit;
+    color: $color-text-primary;
+
+    padding: 0;
+    margin: 0;
+
+    &::placeholder { color: $color-text-placeholder; }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: $color-text-disabled;
+    }
+  }
+
+  &.is-focused {
+    .#{$namespace}-input-tag__inner { border-color: $color-primary; }
+  }
+
+  &.is-disabled {
+    .#{$namespace}-input-tag__inner {
+      background: $bg-color-page;
+      cursor: not-allowed;
+      &:hover { border-color: $border-color-base; }
+    }
+  }
+
+  &.is-readonly {
+    .#{$namespace}-input-tag__inner { cursor: default; }
+  }
+}
+
+.dark {
+  .#{$namespace}-input-tag {
+    .#{$namespace}-input-tag__inner {
+      background: $bg-color-dark-light;
+      border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 78%, #{$color-text-dark});
+    }
+
+    .#{$namespace}-input-tag__input {
+      color: $color-text-dark;
+
+      &::placeholder {
+        color: $color-text-dark-secondary;
+      }
+
+      &:disabled {
+        color: $color-text-dark-secondary;
+      }
+    }
+
+    &.is-focused {
+      .#{$namespace}-input-tag__inner {
+        border-color: $color-primary;
+      }
+    }
+
+    &.is-disabled {
+      .#{$namespace}-input-tag__inner {
+        background: $bg-color-dark-lighter;
+        border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 86%, #{$color-text-dark});
+      }
+    }
+  }
+}