@liuk123/insui 0.0.1-alpha.1

package/styles/ins-ui-global.less

@@ -0,0 +1,8 @@
+
+@import 'ui-theme.less';
+
+
+@import 'basic/main.less';
+@import 'markup/ins-list.less';
+@import 'markup/ins-table.less';
+@import 'markup/ins-required.less';

package/styles/markup/ins-list.less

@@ -0,0 +1,136 @@
+.ins-list {
+    font: var(--ins-font-text-m);
+    line-height: 1.5rem;
+    list-style-type: none;
+    color: var(--ins-text-primary);
+
+    &_large {
+        font: var(--ins-font-text-l);
+        line-height: 1.75rem;
+    }
+
+    &_small,
+    &_extra-small {
+        font: var(--ins-font-text-s);
+        line-height: 1.25rem;
+    }
+
+    &_nested {
+        margin: 0.75rem 0 0.75rem 1.25rem;
+        color: var(--ins-text-secondary);
+
+        .ins-list_large & {
+            margin-inline-start: 0.75rem;
+        }
+
+        .ins-list_small & {
+            margin-block-start: 0.5rem;
+            margin-block-end: 0.5rem;
+        }
+    }
+
+    &_ordered {
+        counter-reset: counter;
+    }
+
+    &__item {
+        position: relative;
+        padding-inline-start: 1.5rem;
+        overflow-wrap: break-word;
+        margin-block-start: 0.75rem;
+
+        &:first-child {
+            margin-block-start: 0;
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0.5rem;
+            inline-size: 0.5rem;
+            block-size: 0.5rem;
+            border-radius: 100%;
+            background-color: var(--ins-background-accent-1);
+
+            .ins-list_large > & {
+                top: 0.625rem;
+            }
+
+            .ins-list_small > & {
+                top: 0.375rem;
+            }
+        }
+
+        .ins-list_extra-small > & {
+            margin-block-start: 0.5rem;
+        }
+
+        .ins-list_linear & {
+            padding-inline-start: 1.75rem;
+
+            &::before {
+                content: '\2014';
+                left: 0;
+                top: auto;
+                inline-size: auto;
+                block-size: auto;
+                background-color: transparent;
+            }
+        }
+
+        .ins-list_ordered & {
+            padding-inline-start: 1.25rem;
+
+            &::before {
+                content: counter(counter) '.';
+                left: 0;
+                top: auto;
+                counter-increment: counter;
+                inline-size: auto;
+                block-size: auto;
+                color: var(--ins-text-tertiary);
+                background-color: transparent;
+            }
+        }
+
+        .ins-list_triangle > & {
+            padding-inline-start: 1.75rem;
+
+            &::before {
+                content: '\25E4'; // represent symbol '◤'
+                left: 0;
+                top: 1px;
+                inline-size: auto;
+                block-size: auto;
+                background-color: transparent;
+                color: var(--ins-text-tertiary);
+                font-size: 0.75rem;
+            }
+        }
+    }
+
+    &__item-title {
+        font: var(--ins-font-heading-5);
+        margin: 0;
+
+        .ins-list_small & {
+            line-height: 1.25rem;
+            font-weight: bold;
+        }
+    }
+
+    &__description {
+        margin: 0.5rem 0 0;
+        color: var(--ins-text-secondary);
+
+        .ins-list_small & {
+            margin-block-start: 0.25rem;
+        }
+
+        .ins-list_large & {
+            line-height: 1.75rem;
+            margin-block-start: 0.75rem;
+        }
+    }
+}

package/styles/markup/ins-required.less

@@ -0,0 +1,13 @@
+.ins-required {
+    &::after {
+        content: '*';
+    }
+
+    &_float::after {
+        position: absolute;
+    }
+
+    &_spacing::after {
+        content: '\0000a0*';
+    }
+}

package/styles/markup/ins-table.less

@@ -0,0 +1,184 @@
+@height-cell-large: 5rem;
+
+.ins-table {
+    inline-size: 100%;
+
+    &_layout_fixed {
+        table-layout: fixed;
+    }
+
+    &__tr {
+        .transition(background);
+
+        outline: none;
+
+        &:not(&_hover_disabled):hover {
+            background: var(--ins-background-base-alt);
+        }
+
+        &:not(&_border_none) {
+            border-block-end: 1px solid var(--ins-border-normal);
+        }
+
+        &_border_top {
+            border-block-start: 1px solid var(--ins-border-normal);
+        }
+
+        &_cursor_pointer {
+            cursor: pointer;
+        }
+    }
+
+    &__th {
+        .text-overflow();
+
+        font: var(--ins-font-text-s);
+        padding: 0.5rem 1rem;
+        vertical-align: middle;
+        block-size: 2.5rem;
+        color: var(--ins-text-secondary);
+        background: inherit;
+
+        &_font-size_l,
+        .ins-table_font-size_l & {
+            font: var(--ins-font-text-m);
+        }
+    }
+
+    &__td {
+        font: var(--ins-font-text-m);
+        padding: 1rem 1rem 0.875rem;
+        vertical-align: top;
+        overflow-wrap: break-word;
+        block-size: 3.4375rem;
+        color: var(--ins-text-primary);
+        background: inherit;
+
+        &_size_l,
+        .ins-table_size_l & {
+            block-size: @height-cell-large - 0.0625rem;
+        }
+
+        &_font-size_l,
+        .ins-table_font-size_l & {
+            font: var(--ins-font-text-l);
+        }
+
+        &_font-size_s,
+        .ins-table_font-size_s & {
+            font: var(--ins-font-text-s);
+        }
+
+        &_align_center {
+            vertical-align: middle;
+        }
+    }
+
+    &__td,
+    &__th {
+        box-sizing: border-box;
+        text-align: start;
+
+        .ins-table_size_l &::before {
+            inline-size: 1rem;
+            border-start-start-radius: 1rem;
+            border-end-start-radius: 1rem;
+        }
+
+        &_first::before,
+        &_last::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            inline-size: 0.75rem;
+            block-size: 100%;
+            background: inherit;
+            border-start-start-radius: 0.75rem;
+            border-end-start-radius: 0.75rem;
+        }
+
+        &_first {
+            position: relative;
+            padding-left: 0;
+            overflow: visible;
+
+            &::before {
+                right: 100%;
+            }
+        }
+
+        &_last {
+            position: relative;
+            padding-right: 0;
+            overflow: visible;
+
+            &::before {
+                left: 100%;
+                transform: scaleX(-1);
+            }
+        }
+
+        &_text_center {
+            text-align: center;
+        }
+
+        &_text_right {
+            text-align: end;
+        }
+
+        &_text_overflow {
+            .text-overflow();
+        }
+    }
+
+    &__subtext {
+        font: var(--ins-font-text-s);
+        margin: 0.25rem 0 0;
+        color: var(--ins-text-tertiary);
+    }
+
+    &__sort {
+        .button-clear();
+        .transition(color);
+
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        outline: none;
+        cursor: pointer;
+
+        &:hover {
+            color: var(--ins-text-primary);
+        }
+
+        &_active {
+            color: var(--ins-text-action);
+
+            &:hover {
+                color: var(--ins-text-action-hover);
+            }
+        }
+    }
+
+    &__sort-icon {
+        .center-top();
+
+        left: 100%;
+        margin-left: 0.125rem;
+        inline-size: 1rem;
+        block-size: 1rem;
+        flex-shrink: 0;
+        opacity: 0;
+
+        .ins-table__sort_active &,
+        .ins-table__sort:hover & {
+            .transition(transform);
+
+            opacity: 1;
+        }
+
+        .ins-table__sort_active.ins-table__sort_up & {
+            transform: rotate(180deg) translateY(50%);
+        }
+    }
+}

package/styles/mixins/appearance.less

@@ -0,0 +1,45 @@
+@import 'mixins.less';
+
+.appearance-hover(@content) {
+    .interactive({
+        @media @ins-mouse {
+            &:hover:not(:disabled):not([data-state]) {
+                @content();
+            }
+        }
+    });
+
+    &[data-state='hover'] {
+        @content();
+    }
+
+}
+
+.appearance-active(@content) {
+    .interactive({
+        &:active:not(:disabled):not([data-state]) {
+            @content();
+        }
+    });
+
+    &[data-state='active'] {
+        @content();
+    }
+}
+
+.appearance-disabled(@content) {
+    &:disabled:not([data-state]),
+    &[data-state='disabled'] {
+        @content();
+    }
+}
+
+.appearance-focus(@content) {
+    &:focus-visible:not([data-focus='false']) {
+        @content();
+    }
+
+    &[data-focus='true'] {
+        @content();
+    }
+}

package/styles/mixins/mixins.less

@@ -0,0 +1,172 @@
+// @import 'browsers.less';
+
+.interactive(@ruleset) {
+    &:is(a, button, select, textarea, input, label):not(:disabled)  {
+        @ruleset();
+    }
+}
+
+// centering with translate
+.center-left() {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+.center-top() {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.center-all() {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.fullsize(@position: absolute, @mode: height) {
+    position: @position;
+    top: 0;
+    left: 0;
+
+    & when (@mode = height) {
+        inline-size: 100%;
+        block-size: 100%;
+    }
+
+    & when (@mode = inset) {
+        bottom: 0;
+        right: 0;
+    }
+}
+// //.fullsize
+// .fullsize(@position: absolute) {
+//     position: @position;
+//     top: 0;
+//     left: 0;
+//     inline-size: 100%;
+//     block-size: 100%;
+//     // bottom: 0;
+//     // right: 0;
+    
+// }
+
+.button-clear() {
+    appearance: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    line-height: inherit;
+    text-decoration: none;
+}
+
+.button-base() {
+    .button-clear();
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
+    max-inline-size: 100%;
+    gap: calc(var(--t-gap, ~'0rem') - 2 * var(--t-margin, 0rem));
+
+    > img,
+    > ins-svg,
+    > ins-icon,
+    > ins-avatar,
+    > ins-badge,
+    > [insBadge],
+    > [insRadio],
+    > [insSwitch],
+    > [insCheckbox],
+    &[insIcons]::before,
+    &[insIcons]::after {
+        margin: var(--t-margin);
+    }
+}
+
+// transition
+.transition(@param: all, @speed: var(--ins-duration, 300ms)) {
+    transition-property: @param;
+    transition-duration: @speed;
+    transition-timing-function: ease-in-out;
+}
+
+// gradient
+.gradient(@start-color, @end-color, @angle: 45deg) {
+    background-image: linear-gradient(@angle, @start-color 0%, @end-color 100%);
+}
+
+// typical properties for text overflow with ellipsis
+.text-overflow(@type: nowrap) {
+    white-space: @type;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.scrollbar-hidden() {
+    /* stylelint-disable*/
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    /* stylelint-enable*/
+
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-thumb {
+        display: none;
+    }
+}
+
+// hide an element visually without hiding it from screen readers
+.sr-only() {
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+}
+
+// prevent scrolling to focused element on IOS
+// .ins-prevent-ios-scroll() {
+//     .ios-only({
+//         &:focus {
+//             animation: insPreventIOSScroll 0.001s;
+//         }
+//     });
+//     @keyframes insPreventIOSScroll {
+//         0% {
+//             opacity: 0;
+//         }
+
+//         100% {
+//             opacity: 1;
+//         }
+//     }
+// }
+
+.clearinput() {
+    // .autofill(@mode);
+
+    padding: 0;
+    margin: 0;
+    border-width: 0;
+    // border-radius: inherit;
+    background: none;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    color: inherit;
+    caret-color: currentColor;
+    outline: none;
+    appearance: none;
+    word-break: keep-all;
+    -webkit-text-fill-color: currentColor; // for Safari
+}

package/styles/theme/appearance/accent.less

@@ -0,0 +1,14 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='accent'] {
+    background: var(--ins-background-accent-2);
+    color: var(--ins-text-primary-on-accent);
+
+    .appearance-hover({
+        background: var(--ins-background-accent-2-hover);
+    });
+
+    .appearance-active({
+        background: var(--ins-background-accent-2-pressed);
+    });
+}

package/styles/theme/appearance/action.less

@@ -0,0 +1,40 @@
+
+
+[insAppearance][data-appearance='action'] {
+    color: var(--ins-text-action);
+    background: transparent;
+
+    .appearance-hover({
+        color: var(--ins-text-action-hover);
+    });
+
+    .appearance-active({
+        color: var(--ins-text-action-hover);
+    });
+}
+
+[insAppearance][data-appearance='action-destructive'] {
+    color: var(--ins-text-negative);
+    background: transparent;
+
+    .appearance-hover({
+        color: var(--ins-text-negative-hover);
+    });
+
+    .appearance-active({
+        color: var(--ins-text-negative-hover);
+    });
+}
+
+[insAppearance][data-appearance='action-grayscale'] {
+    color: var(--ins-text-secondary);
+    background: transparent;
+
+    .appearance-hover({
+        color: var(--ins-text-primary);
+    });
+
+    .appearance-active({
+        color: var(--ins-text-primary);
+    });
+}

package/styles/theme/appearance/flat.less

@@ -0,0 +1,23 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='flat'],
+[insAppearance][data-appearance='flat-destructive'],
+[insAppearance][data-appearance='flat-grayscale'] {
+    .appearance-hover({
+        background: var(--ins-background-neutral-1-hover);
+    });
+
+    .appearance-active({
+        background: var(--ins-background-neutral-1-pressed);
+    });
+}
+[insAppearance][data-appearance='flat']{
+    color: var(--ins-text-action);
+}
+[insAppearance][data-appearance='flat-destructive'] {
+    color: var(--ins-text-negative);
+}
+
+[insAppearance][data-appearance='flat-grayscale'] {
+    color: var(--ins-text-primary);
+}

package/styles/theme/appearance/glass.less

@@ -0,0 +1,17 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='glass'] {
+    background: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    backdrop-filter: blur(1rem);
+
+    --ins-border-focus: rgba(255, 255, 255, 0.64);
+
+    .appearance-hover({
+        background: rgba(0, 0, 0, 0.48);
+    });
+
+    .appearance-active({
+        background: rgba(0, 0, 0, 0.6);
+    });
+}

package/styles/theme/appearance/outline.less

@@ -0,0 +1,55 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='outline'],
+[insAppearance][data-appearance='outline-destructive'],
+[insAppearance][data-appearance='outline-grayscale'] {
+    --t-bs: var(--ins-border-normal);
+
+    color: var(--ins-text-action);
+    box-shadow: inset 0 0 0 1px var(--t-bs);
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        --t-bs: var(--ins-background-accent-1);
+
+        box-shadow: inset 0 0 0 2px var(--t-bs);
+
+        .appearance-hover({
+            --t-bs: var(--ins-background-accent-1-hover);
+        });
+
+        .appearance-active({
+            --t-bs: var(--ins-background-accent-1-pressed);
+        });
+    }
+
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        box-shadow: inset 0 0 0 1px var(--ins-status-negative-pale-hover);
+    }
+
+    &:checked:invalid:not([data-mode]),
+    &[data-mode~='checked'][data-mode~='invalid'] {
+        box-shadow: inset 0 0 0 2px var(--ins-status-negative);
+    }
+
+    .appearance-hover({
+        background: var(--ins-background-neutral-1);
+        cursor: pointer;
+        --t-bs: var(--ins-border-hover);
+    });
+
+    .appearance-active({
+        background: var(--ins-background-neutral-1);
+        --t-bs: var(--ins-border-hover);
+    });
+}
+
+[insAppearance][data-appearance='outline-grayscale']{
+    color: var(--ins-text-primary);
+}
+
+
+[insAppearance][data-appearance='outline-destructive'] {
+    color: var(--ins-text-negative);
+}