@liuk123/insui 0.0.1-alpha.1

package/styles/theme/appearance/primary.less

@@ -0,0 +1,49 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='primary'] {
+    --t-bg: var(--ins-background-accent-1);
+
+    background: var(--t-bg);
+    color: var(--ins-text-primary-on-accent);
+
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        background: var(--ins-status-negative);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--ins-background-accent-1-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--ins-background-accent-1-pressed);
+    });
+}
+
+[insAppearance][data-appearance='primary-destructive'] {
+    color: #fff;
+    background: var(--ins-status-negative);
+
+    .appearance-hover({
+        filter: saturate(1) brightness(1.3);
+    });
+
+    .appearance-active({
+        filter: saturate(0.8) brightness(1);
+    });
+}
+
+[insAppearance][data-appearance='primary-grayscale'] {
+    --ins-border-focus: #979797;
+
+    background: var(--ins-background-accent-opposite);
+    color: var(--ins-background-base);
+
+    .appearance-hover({
+        background: var(--ins-background-accent-opposite-hover);
+    });
+
+    .appearance-active({
+        background: var(--ins-background-accent-opposite-pressed);
+    });
+}

package/styles/theme/appearance/secondary.less

@@ -0,0 +1,54 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='secondary'],
+[insAppearance][data-appearance='secondary-destructive'],
+[insAppearance][data-appearance='secondary-grayscale']{
+    background: var(--ins-background-neutral-1);
+    color: var(--ins-text-action);
+
+    .appearance-hover({
+        background: var(--ins-background-neutral-1-hover);
+    });
+
+    .appearance-active({
+        background: var(--ins-background-neutral-1-pressed);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked']
+    {
+        background: var(--ins-background-accent-1);
+        color: var(--ins-text-primary-on-accent);
+
+        .appearance-hover({
+            background: var(--ins-background-accent-1-hover);
+        });
+
+        .appearance-active({
+            background: var(--ins-background-accent-1-pressed);
+        });
+    }
+
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        color: var(--ins-text-negative);
+        background: var(--ins-status-negative-pale);
+
+        .appearance-hover({
+            color: var(--ins-text-negative-hover);
+            background: var(--ins-status-negative-pale-hover);
+        });
+
+        .appearance-active({
+            color: var(--ins-text-negative-hover);
+            background: var(--ins-status-negative-pale-hover);
+        });
+    }
+}
+
+[insAppearance][data-appearance='secondary-destructive'] {
+    color: var(--ins-text-negative);
+}
+[insAppearance][data-appearance='secondary-grayscale'] {
+    color: var(--ins-text-primary);
+}

package/styles/theme/appearance/status.less

@@ -0,0 +1,125 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='negative'],
+[insAppearance][data-appearance='positive'],
+[insAppearance][data-appearance='warning'],
+[insAppearance][data-appearance='info'],
+[insAppearance][data-appearance='neutral'] {
+    background: var(--t-bg);
+    color: var(--ins-text-primary);
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        color: #fff;
+    }
+}
+
+[insAppearance][data-appearance='negative'] {
+    --t-bg: var(--ins-status-negative-pale);
+
+    &::before,
+    &::after {
+        color: var(--ins-status-negative);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--ins-status-negative-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--ins-status-negative-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        background: var(--ins-status-negative);
+    }
+}
+
+[insAppearance][data-appearance='positive'] {
+    --t-bg: var(--ins-status-positive-pale);
+
+    &::before,
+    &::after {
+        color: var(--ins-status-positive);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--ins-status-positive-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--ins-status-positive-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
+        background: var(--ins-status-positive);
+    }
+}
+
+[insAppearance][data-appearance='warning'] {
+    --t-bg: var(--ins-status-warning-pale);
+
+    &::before,
+    &::after {
+        color: var(--ins-status-warning);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--ins-status-warning-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--ins-status-warning-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked']  {
+        background: var(--ins-status-warning);
+    }
+}
+
+[insAppearance][data-appearance='info'] {
+    --t-bg: var(--ins-status-info-pale);
+
+    &::before,
+    &::after {
+        color: var(--ins-status-info);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--ins-status-info-pale-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--ins-status-info-pale-hover);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked']  {
+        background: var(--ins-status-info);
+    }
+}
+
+[insAppearance][data-appearance='neutral'] {
+    --t-bg: var(--ins-background-neutral-1);
+
+    &::before,
+    &::after {
+        color: var(--ins-status-neutral);
+    }
+
+    .appearance-hover({
+        --t-bg: var(--ins-background-neutral-1-hover);
+    });
+
+    .appearance-active({
+        --t-bg: var(--ins-background-neutral-1-pressed);
+    });
+
+    &:checked:not([data-mode]),
+    &[data-mode~='checked']  {
+        background: var(--ins-status-neutral);
+    }
+}

package/styles/theme/appearance/textfield.less

@@ -0,0 +1,48 @@
+@import '../../ui-local.less';
+
+[insAppearance][data-appearance='textfield'] {
+    .transition(~'box-shadow, background, outline-color, border-color');
+
+    --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+
+    background-color: var(--ins-background-base);
+    // background-color: inherit;
+    color: var(--ins-text-primary);
+    box-shadow: var(--t-shadow);
+    outline: 1px solid var(--ins-border-normal);
+    outline-offset: -1px;
+    border: none;
+
+    .appearance-hover({
+        --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+    });
+
+    .appearance-focus({
+        box-shadow: none;
+        outline: 0.125rem solid var(--ins-background-accent-1);
+        outline-offset: -0.125rem;
+    });
+
+    .appearance-disabled({
+        box-shadow: none;
+    });
+
+    &[data-mode~='invalid'][data-mode~='invalid'],
+    &:invalid:not([data-mode]) {
+        outline-color: var(--ins-status-negative);
+    }
+
+    &[data-mode~='readonly'],
+    input&:read-only:not([data-mode]) {
+        // box-shadow: none;
+        background: transparent !important;
+        box-shadow: none !important;
+        outline-color: var(--ins-border-normal) !important;
+    }
+
+    &:-webkit-autofill {
+        -webkit-text-fill-color: var(--ins-text-primary) !important;
+        box-shadow: 0 0 0 100rem var(--ins-service-autofill-background) inset !important;
+        transition: background-color 600000s 0s;
+    }
+}

package/styles/theme/appearance.less

@@ -0,0 +1,10 @@
+@import 'appearance/accent.less';
+@import 'appearance/action.less';
+@import 'appearance/flat.less';
+@import 'appearance/outline.less';
+@import 'appearance/primary.less';
+@import 'appearance/secondary.less';
+@import 'appearance/status.less';
+@import 'appearance/glass.less';
+// Do not add it, we need it separately in proprietary theme
+// @import 'appearance/textfield.less';

package/styles/theme/palette.less

@@ -0,0 +1,120 @@
+.dark() {
+    // Backgrounds
+    --ins-background-base: #222;
+    --ins-background-base-alt: #333;
+    --ins-background-neutral-1: rgba(255, 255, 255, 0.08);
+    --ins-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
+    --ins-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
+    --ins-background-accent-opposite: #fff;
+    --ins-background-accent-opposite-hover: #f6f6f6;
+    --ins-background-accent-opposite-pressed: #ededed;
+    --ins-background-elevation-1: #292929;
+    --ins-background-elevation-2: #333;
+    // Other
+    --ins-service-autofill-background: rgb(85, 74, 42);
+    --ins-border-normal: rgba(255, 255, 255, 0.14);
+    --ins-border-hover: rgba(255, 255, 255, 0.6);
+    --ins-border-focus: rgba(255, 255, 255, 0.64);
+    // Statuses
+    --ins-status-negative: rgba(255, 140, 103, 1);
+    --ins-status-negative-pale: rgba(244, 87, 37, 0.32);
+    --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
+    --ins-status-positive: rgb(74, 201, 155);
+    --ins-status-positive-pale: rgba(74, 201, 155, 0.32);
+    --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
+    --ins-status-warning: rgb(255, 199, 0);
+    --ins-status-warning-pale: rgba(255, 199, 0, 0.32);
+    --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
+    --ins-status-info: rgb(112, 182, 246);
+    --ins-status-info-pale: rgba(112, 182, 246, 0.32);
+    --ins-status-info-pale-hover: rgba(112, 182, 246, 0.4);
+    --ins-status-neutral: rgb(149, 155, 164);
+    // Text
+    --ins-text-primary: rgba(255, 255, 255, .95);
+    --ins-text-secondary: rgba(255, 255, 255, 0.72);
+    --ins-text-tertiary: rgba(255, 255, 255, 0.6);
+    --ins-text-action: #6788ff;
+    --ins-text-action-hover: #526ed3;
+    --ins-text-positive: #44c596;
+    --ins-text-positive-hover: #3aa981;
+    --ins-text-negative: #ff8c67;
+    --ins-text-negative-hover: #bb593a;
+}
+
+.light() {
+    // Backgrounds
+    --ins-background-base: #fafafa;
+    --ins-background-base-alt: #f6f6f6;
+    --ins-background-neutral-1: rgba(0, 0, 0, 0.06);
+    --ins-background-neutral-1-hover: rgba(0, 0, 0, 0.1);
+    --ins-background-neutral-1-pressed: rgba(0, 0, 0, 0.15);
+    --ins-background-accent-1: #526ed3;
+    --ins-background-accent-1-hover: #6c86e2;
+    --ins-background-accent-1-pressed: #314692;
+    --ins-background-accent-2: #ff7043;
+    --ins-background-accent-2-hover: #ff9a94;
+    --ins-background-accent-2-pressed: #e7716a;
+    --ins-background-accent-opposite: #000;
+    --ins-background-accent-opposite-hover: #333;
+    --ins-background-accent-opposite-pressed: #808080;
+    --ins-background-elevation-1: #fafafa; // dialog
+    --ins-background-elevation-2: #f3f3f3; // dropdown
+
+    // Other
+    --ins-service-autofill-background: #fff5c0;
+    --ins-service-backdrop: rgba(0, 0, 0, 0.45);
+    // border
+    --ins-border-normal: rgba(0, 0, 0, 0.1);
+    --ins-border-hover: rgba(0, 0, 0, 0.25);
+    --ins-border-focus: rgba(51, 51, 51, 0.64);
+    // Statuses
+    --ins-status-negative: rgba(244, 87, 37, 1);
+    --ins-status-negative-pale: rgba(244, 87, 37, 0.12);
+    --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
+    --ins-status-positive: rgba(74, 201, 155, 1);
+    --ins-status-positive-pale: rgba(74, 201, 155, 0.12);
+    --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
+    --ins-status-warning: rgba(255, 199, 0, 1);
+    --ins-status-warning-pale: rgba(255, 199, 0, 0.12);
+    --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
+    --ins-status-info: rgba(112, 182, 246, 1);
+    --ins-status-info-pale: rgba(112, 182, 246, 0.12);
+    --ins-status-info-pale-hover: rgba(112, 182, 246, 0.24);
+    --ins-status-neutral: rgb(121, 129, 140);
+    // Text
+    --ins-text-primary: rgba(27, 31, 59, 1);
+    --ins-text-secondary: rgba(27, 31, 59, 0.65);
+    --ins-text-tertiary: rgba(27, 31, 59, 0.4);
+    --ins-text-primary-on-accent: #fff;
+    --ins-text-action: #4c66c3;
+    --ins-text-action-hover: #6c86e2;
+    --ins-text-positive: #3aa981;
+    --ins-text-positive-hover: #7ac5aa;
+    --ins-text-negative: #dd4c1e;
+    --ins-text-negative-hover: #e38163;
+
+    // Shadows 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    --ins-shadow-small: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    --ins-shadow-small-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.14);
+    --ins-shadow-medium: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.12);
+    --ins-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
+}
+
+@media screen {
+    [insTheme='dark'] {
+        color-scheme: dark;
+        .dark();
+    }
+    &:root{
+        color-scheme: light;
+        .light();
+    }
+}
+
+@media print {
+    &:root,
+    [insTheme] {
+        color-scheme: light;
+        .light();
+    }
+}

package/styles/theme/variables.less

@@ -0,0 +1,44 @@
+@font-fallback: -apple-system, BlinkMacSystemFont, system-ui, Roboto, Segoe UI, Helvetica Neue, sans-serif;
+@font-code-fallback: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+// @font-fallback: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
+
+&:root {
+    // Fonts
+    --ins-font-heading: @font-fallback;
+    --ins-font-text: @font-fallback;
+    --ins-font-code: @font-code-fallback;
+    // Heading
+    --ins-font-heading-1: 400 2.75rem / 3.5rem var(--ins-font-heading);
+    --ins-font-heading-2: 400 2.25rem / 3rem var(--ins-font-heading);
+    --ins-font-heading-3: 400 1.75rem / 2.5rem var(--ins-font-heading);
+    --ins-font-heading-4: 400 1.5rem / 2rem var(--ins-font-heading);
+    --ins-font-heading-5: 400 1.25rem / 1.75rem var(--ins-font-heading);
+    --ins-font-heading-6: 400 1.125rem / 1.5rem var(--ins-font-heading);
+    // Body
+    --ins-font-text-xl: normal 1.5rem / 1.75rem var(--ins-font-text);
+    --ins-font-text-l: normal 1.25rem / 1.75rem var(--ins-font-text);
+    --ins-font-text-m: normal 1rem / 1.5rem var(--ins-font-text);
+    --ins-font-text-s: normal 0.875rem / 1.25rem var(--ins-font-text);
+    --ins-font-text-xs: normal 0.7875rem / 1rem var(--ins-font-text);
+
+    // Radii
+    --ins-radius-xs: 0.25rem;
+    --ins-radius-s: 0.5rem;
+    --ins-radius-m: 0.725rem;
+    --ins-radius-l: 1rem;
+    --ins-radius-xl: 1.5rem;
+    // Sizes
+    --ins-height-xs: 1.5rem;
+    --ins-height-s: 2rem;
+    --ins-height-m: 2.5rem;
+    --ins-height-l: 3.25rem;
+    // Input padding
+    --ins-padding-xs: 0.25rem;
+    --ins-padding-s: 0.625rem;
+    --ins-padding-m: 1rem;
+    --ins-padding-l: 1.5rem;
+    --ins-padding-xl: 2rem;
+    // Misc
+    --ins-duration: 0.3s;
+    --ins-disabled-opacity: 0.56;
+}

package/styles/ui-local.less

@@ -0,0 +1,4 @@
+// @import 'mixins/browsers.less';
+@import 'mixins/mixins.less';
+@import 'mixins/appearance.less';
+@import 'variables/media.less';

package/styles/ui-theme.less

@@ -0,0 +1,6 @@
+@import 'theme/variables.less';
+@import 'theme/palette.less';
+@import 'theme/appearance.less';
+
+
+@import 'theme/appearance/textfield.less';

package/styles/variables/media.less

@@ -0,0 +1,28 @@
+/*
+Every max-width of breakpoint is equal:
+next min-width - 60% from 1px (1/16 * 0.6 = 0.0375)
+*/
+
+@ins-media-retina: ~'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+@ins-media-retina-mobile: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 37.4625em), (min-resolution: 192dpi) and (max-width: 37.4625em)';
+@ins-media-retina-tablet: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 63.9625em), (min-resolution: 192dpi) and (max-width: 63.9625em)';
+@ins-media-retina-desktop: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 84.9625em), (min-resolution: 192dpi) and (max-width: 84.9625em)';
+
+@ins-mobile: ~'screen and (max-width: 47.9625em)';
+@ins-mobile-min: ~'screen and (min-width: 22.5em)';
+@ins-mobile-interval: ~'(min-width: 22.5em) and (max-width: 47.9625em)';
+
+@ins-tablet: ~'screen and (max-width: 63.9625em)';
+@ins-tablet-min: ~'screen and (min-width: 48em)';
+@ins-tablet-interval: ~'(min-width: 48em) and (max-width: 63.9625em)';
+
+@ins-desktop: ~'screen and (max-width: 79.9625em)';
+@ins-desktop-min: ~'screen and (min-width: 64em)';
+@ins-desktop-interval: ~'(min-width: 64em) and (max-width: 79.9625em)';
+
+@ins-desktop-lg-min: ~'screen and (min-width: 80em)';
+
+@ins-touch: ~'(hover: none) and (pointer: coarse)';
+@ins-stylus: ~'(hover: none) and (pointer: fine)';
+@ins-pointer: ~'(hover: hover) and (pointer: coarse)';
+@ins-mouse: ~'(hover: hover) and (pointer: fine)';