wini-web-components 2.8.5 → 2.8.8

package/src/skin/root.css

@@ -1,294 +0,0 @@
-html {
-    /* primary */
-    --primary-bolder-color: #0F62D7;
-    --primary-main-color: #287CF0;
-    --primary-lighter-color: #5899F3;
-    --primary-tag-color: #B7D3FA;
-    --primary-border-color: #B7D3FA;
-    --primary-background: #ECF3FE;
-    /* secondary 1 */
-    --secondary1-bolder-color: #22C3AE;
-    --secondary1-main-color: #3CDDC7;
-    --secondary1-lighter-color: #67E4D4;
-    --secondary1-tag-color: #BEF4EC;
-    --secondary1-border-color: #BEF4EC;
-    --secondary1-background: #EEFCFA;
-    /* secondary 2 */
-    --secondary2-bolder-color: #2D8655;
-    --secondary2-main-color: #3AAC6D;
-    --secondary2-lighter-color: #53C586;
-    --secondary2-tag-color: #C6ECD7;
-    --secondary2-border-color: #C6ECD7;
-    --secondary2-background: #E8F7EF;
-    /* secondary 3 */
-    --secondary3-bolder-color: #E19405;
-    --secondary3-main-color: #FAAD1E;
-    --secondary3-lighter-color: #FBBF50;
-    --secondary3-tag-color: #FDE4B4;
-    --secondary3-border-color: #FDE4B4;
-    --secondary3-background: #FFF8EB;
-    /* secondary 4 */
-    --secondary4-bolder-color: #E36003;
-    --secondary4-main-color: #FC7A1C;
-    --secondary4-lighter-color: #FD974F;
-    --secondary4-tag-color: #FED3B3;
-    --secondary4-border-color: #FED3B3;
-    --secondary4-background: #FFF3EB;
-    /* secondary 5 */
-    --secondary5-bolder-color: #7B22C3;
-    --secondary5-main-color: #943CDD;
-    --secondary5-lighter-color: #AC67E4;
-    --secondary5-tag-color: #DBBEF4;
-    --secondary5-border-color: #DBBEF4;
-    --secondary5-background: #F6EEFC;
-    /* secondary 6 */
-    --secondary6-bolder-color: #C8291E;
-    --secondary6-main-color: #E14337;
-    --secondary6-lighter-color: #E86D64;
-    --secondary6-tag-color: #F5C0BC;
-    --secondary6-border-color: #F5C0BC;
-    --secondary6-background: #FCEEED;
-    /* success */
-    --success-bolder-color: #2D8655;
-    --success-main-color: #3AAC6D;
-    --success-lighter-color: #53C586;
-    --success-tag-color: #C6ECD7;
-    --success-border-color: #C6ECD7;
-    --success-background: #E8F7EF;
-    /* info */
-    --infor-bolder-color: #0F62D7;
-    --infor-main-color: #287CF0;
-    --infor-lighter-color: #5899F3;
-    --infor-tag-color: #B7D3FA;
-    --infor-border-color: #B7D3FA;
-    --infor-background: #ECF3FE;
-    /* warning */
-    --warning-bolder-color: #E36003;
-    --warning-main-color: #FC7A1C;
-    --warning-lighter-color: #FD974F;
-    --warning-tag-color: #FED3B3;
-    --warning-border-color: #FED3B3;
-    --warning-background: #FFF3EB;
-    /* error */
-    --error-bolder-color: #C8291E;
-    --error-main-color: #E14337;
-    --error-lighter-color: #E86D64;
-    --error-tag-color: #F5C0BC;
-    --error-border-color: #F5C0BC;
-    --error-background: #FCEEED;
-    /* neutral-background */
-    --neutral-bolder-background-color: #EAEAEC;
-    --neutral-absolute-background-color: #FFFFFF;
-    --neutral-main-background-color: #EFEFF0;
-    --neutral-lighter-background-color: #F4F4F5;
-    --neutral-overlay-background-color: #000000B3;
-    --neutral-disable-background-color: #F4F4F5;
-    --neutral-selected-background-color: #18181B14;
-    --neutral-hover-background-color: #18181B0A;
-    /* reverse */
-    --neutral-absolute-reverse-background-color: #000000;
-    --neutral-bolder-reverse-background-color: #18181B;
-    --neutral-main-reverse-background-color: #242428;
-    --neutral-lighter-reverse-background-color: #313135;
-    --neutral-disable-reverse-background-color: #313135;
-    /* neutral-text */
-    --neutral-text-title-color: #18181B;
-    --neutral-text-subtitle-color: #61616B;
-    --neutral-text-body-color: #313135;
-    --neutral-text-label-color: #313135;
-    --neutral-text-placeholder-color: #878792;
-    --neutral-text-disabled-color: #A2A2AA;
-    --neutral-text-stable-color: #FFFFFF;
-    /* reverse */
-    --neutral-text-title-reverse-color: #F4F4F5;
-    --neutral-text-subtitle-reverse-color: #A2A2AA;
-    --neutral-text-body-reverse-color: #EAEAEC;
-    --neutral-text-label-reverse-color: #EAEAEC;
-    --neutral-text-placeholder-reverse-color: #A2A2AA;
-    --neutral-text-disabled-reverse-color: #878792;
-    --neutral-text-stable-reverse-color: #000000;
-    /* neutral-border-color */
-    --neutral-bolder-border-color: #D7D7DB;
-    --neutral-main-border-color: #EAEAEC;
-    --neutral-lighter-border-color: #F4F4F5;
-    /* neutral-border */
-    --neutral-bolder-border: 1px solid #D7D7DB;
-    --neutral-main-border: 1px solid #EAEAEC;
-    --neutral-lighter-border: 1px solid #F4F4F5;
-    /* neutral-border-color reverse */
-    --neutral-bolder-reverse-border-color: #242428;
-    --neutral-main-reverse-border-color: #313135;
-    --neutral-lighter-reverse-border-color: #494950;
-    /* neutral-border reverse */
-    --neutral-bolder-reverse-border: 1px solid #242428;
-    --neutral-main-reverse-border: 1px solid #313135;
-    --neutral-lighter-reverse-border: 1px solid #494950;
-
-    --shadow-top: 0px -1px 6px 0px #2D32390F;
-    --shadow-bottom: 0px 1px 6px 0px #2D32390F;
-    --shadow-right: 1px 0px 6px 0px #2D32390F;
-    --shadow-left: -1px 0px 6px 0px #2D32390F;
-    --shadow-dropdown: 2px 0px 16px 0px #0000000A;
-}
-
-html.dark {
-    /* primary */
-    --primary-bolder-color: #5899F3;
-    --primary-main-color: #287CF0;
-    --primary-lighter-color: #0F62D7;
-    --primary-tag-color: #5899F3;
-    --primary-border-color: #072C5F;
-    --primary-background: #031630;
-    /* secondary 1 */
-    --secondary1-bolder-color: #67E4D4;
-    --secondary1-main-color: #3CDDC7;
-    --secondary1-lighter-color: #22C3AE;
-    --secondary1-tag-color: #67E4D4;
-    --secondary1-border-color: #0F574D;
-    --secondary1-background: #082B27;
-    /* secondary 2 */
-    --secondary2-bolder-color: #53C586;
-    --secondary2-main-color: #3AAC6D;
-    --secondary2-lighter-color: #2D8655;
-    --secondary2-tag-color: #53C586;
-    --secondary2-border-color: #1A4C30;
-    --secondary2-background: #0D2618;
-    /* secondary 3 */
-    --secondary3-bolder-color: #FBBF50;
-    --secondary3-main-color: #FAAD1E;
-    --secondary3-lighter-color: #E19405;
-    --secondary3-tag-color: #FD974F;
-    --secondary3-border-color: #652B01;
-    --secondary3-background: #321501;
-    /* secondary 4 */
-    --secondary4-bolder-color: #FD974F;
-    --secondary4-main-color: #FC7A1C;
-    --secondary4-lighter-color: #E36003;
-    --secondary4-tag-color: #FD974F;
-    --secondary4-border-color: #652B01;
-    --secondary4-background: #321501;
-    /* secondary 5 */
-    --secondary5-bolder-color: #AC67E4;
-    --secondary5-main-color: #943CDD;
-    --secondary5-lighter-color: #7B22C3;
-    --secondary5-tag-color: #AC67E4;
-    --secondary5-border-color: #1F085E;
-    --secondary5-background: #0F042F;
-    /* secondary 6 */
-    --secondary6-bolder-color: #E86D64;
-    --secondary6-main-color: #E14337;
-    --secondary6-lighter-color: #C8291E;
-    --secondary6-tag-color: #E86D64;
-    --secondary6-border-color: #59120D;
-    --secondary6-background: #2C0907;
-    /* success */
-    --success-bolder-color: #53C586;
-    --success-main-color: #3AAC6D;
-    --success-lighter-color: #3AAC6D;
-    --success-tag-color: #53C586;
-    --success-border-color: #1A4C30;
-    --success-background: #0D2618;
-    /* info */
-    --infor-bolder-color: #5899F3;
-    --infor-main-color: #287CF0;
-    --infor-lighter-color: #0F62D7;
-    --infor-tag-color: #5899F3;
-    --infor-border-color: #072C5F;
-    --infor-background: #031630;
-    /* warning */
-    --warning-bolder-color: #FD974F;
-    --warning-main-color: #FC7A1C;
-    --warning-lighter-color: #E36003;
-    --warning-tag-color: #FD974F;
-    --warning-border-color: #652B01;
-    --warning-background: #321501;
-    /* error */
-    --error-bolder-color: #E86D64;
-    --error-main-color: #E14337;
-    --error-lighter-color: #C8291E;
-    --error-tag-color: #E86D64;
-    --error-border-color: #59120D;
-    --error-background: #2C0907;
-    /* neutral-background */
-    --neutral-bolder-background-color: #242428;
-    --neutral-absolute-background-color: #14181b;
-    --neutral-main-background-color: #313135;
-    --neutral-lighter-background-color: #494950;
-    --neutral-overlay-background-color: #FFFFFFB3;
-    --neutral-disable-background-color: #494950;
-    --neutral-selected-background-color: #FFFFFF14;
-    --neutral-hover-background-color: #FFFFFF0A;
-    /* reverse */
-    --neutral-absolute-reverse-background-color: #000000;
-    --neutral-bolder-reverse-background-color: #18181B;
-    --neutral-main-reverse-background-color: #242428;
-    --neutral-lighter-reverse-background-color: #313135;
-    --neutral-disable-reverse-background-color: #313135;
-    /* neutral-text */
-    --neutral-text-title-color: #F4F4F5;
-    --neutral-text-subtitle-color: #D7D7DB;
-    --neutral-text-body-color: #EAEAEC;
-    --neutral-text-label-color: #D7D7DB;
-    --neutral-text-placeholder-color: #A2A2AA;
-    --neutral-text-disabled-color: #878792;
-    --neutral-text-stable-color: #FFFFFF;
-    /* reverse */
-    --neutral-text-title-reverse-color: #F4F4F5;
-    --neutral-text-subtitle-reverse-color: #A2A2AA;
-    --neutral-text-body-reverse-color: #EAEAEC;
-    --neutral-text-label-reverse-color: #EAEAEC;
-    --neutral-text-placeholder-reverse-color: #A2A2AA;
-    --neutral-text-disabled-reverse-color: #878792;
-    --neutral-text-stable-reverse-color: #000000;
-    /* neutral-border-color */
-    --neutral-bolder-border-color: #494950;
-    --neutral-main-border-color: #313135;
-    --neutral-lighter-border-color: #242428;
-    /* neutral-border */
-    --neutral-bolder-border: 1px solid #494950;
-    --neutral-main-border: 1px solid #313135;
-    --neutral-lighter-border: 1px solid #242428;
-    /* neutral-border-color reverse */
-    --neutral-bolder-reverse-border-color: #242428;
-    --neutral-main-reverse-border-color: #313135;
-    --neutral-lighter-reverse-border-color: #494950;
-    /* neutral-border reverse */
-    --neutral-bolder-reverse-border: 1px solid #242428;
-    --neutral-main-reverse-border: 1px solid #313135;
-    --neutral-lighter-reverse-border: 1px solid #494950;
-
-
-    --shadow-top: 0px -1px 6px 0px #2D32390F;
-    --shadow-bottom: 0px 1px 6px 0px #2D32390F;
-    --shadow-right: 1px 0px 6px 0px #2D32390F;
-    --shadow-left: -1px 0px 6px 0px #2D32390F;
-    --shadow-dropdown: 2px 0px 16px 0px #0000000A;
-}
-
-@keyframes skeleton-animation {
-    0% {
-        background-position: -1000px 0
-    }
-
-    100% {
-        background-position: 1000px 0
-    }
-}
-
-.skeleton-loading {
-    pointer-events: none;
-    animation: skeleton-animation 8s linear infinite forwards;
-    background: linear-gradient(to right, #D7D7DB 8%, #F4F4F5 18%, #D7D7DB 33%);
-}
-
-input::placeholder, textarea::placeholder {
-    color: var(--neutral-text-placeholder-color);
-}
-
-.default-hover:hover {
-    background-color: var(--neutral-hover-background-color);
-}
-
-.opacity-hover:hover {
-    opacity: 0.86;
-}

package/src/skin/typography.css

@@ -1,314 +0,0 @@
-.regular0,
-.subtitle-5 {
-    line-height: 1.4rem;
-    font-size: 1rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular1,
-.subtitle-4,
-.button-text-6,
-.label-5 {
-    line-height: 1.6rem;
-    font-size: 1.2rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular2,
-.subtitle-3,
-.body-3,
-.button-text-4,
-.label-4,
-.placeholder-2 {
-    line-height: 2.2rem;
-    font-size: 1.4rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular3,
-.subtitle-2,
-.body-2,
-.label-2,
-.placeholder-1 {
-    line-height: 2.4rem;
-    font-size: 1.6rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular4,
-.subtitle-1,
-.body-1 {
-    line-height: 2.8rem;
-    font-size: 2rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular5 {
-    line-height: 3.2rem;
-    font-size: 2.4rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular6 {
-    line-height: 3.8rem;
-    font-size: 3rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular7 {
-    line-height: 4.6rem;
-    font-size: 3.8rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular8 {
-    line-height: 5.6rem;
-    font-size: 4.6rem;
-    color: var(--neutral-text-title-color);
-}
-
-.regular9 {
-    line-height: 6.8rem;
-    font-size: 5.6rem;
-    color: var(--neutral-text-title-color);
-}
-
-.medium1,
-.heading-9,
-.button-text-5 {
-    line-height: 1.6rem;
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium2,
-.heading-8,
-.button-text-3,
-.label-3 {
-    line-height: 2.2rem;
-    font-size: 1.4rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium3,
-.heading-7,
-.button-text-2,
-.label-1 {
-    line-height: 2.4rem;
-    font-size: 1.6rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium4,
-.heading-6,
-.highlight-6 {
-    line-height: 2.8rem;
-    font-size: 2rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium5,
-.heading-5,
-.highlight-5 {
-    line-height: 3.2rem;
-    font-size: 2.4rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium6,
-.heading-4,
-.highlight-4 {
-    line-height: 3.8rem;
-    font-size: 3rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium7,
-.heading-3,
-.highlight-3 {
-    line-height: 4.6rem;
-    font-size: 3.8rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium8,
-.heading-2,
-.highlight-2 {
-    line-height: 5.6rem;
-    font-size: 4.6rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.medium9,
-.highlight-1 {
-    line-height: 6.8rem;
-    font-size: 5.6rem;
-    font-weight: 500;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold1 {
-    line-height: 2rem;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold2 {
-    line-height: 2.2rem;
-    font-size: 1.4rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold3,
-.button-text-1 {
-    line-height: 2.4rem;
-    font-size: 1.6rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold4 {
-    line-height: 2.8rem;
-    font-size: 2rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold5 {
-    line-height: 3.2rem;
-    font-size: 2.4rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold6 {
-    line-height: 3.8rem;
-    font-size: 3rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold7 {
-    line-height: 4.6rem;
-    font-size: 3.8rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold8 {
-    line-height: 5.6rem;
-    font-size: 4.6rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.semibold9,
-.heading-1 {
-    line-height: 6.8rem;
-    font-size: 5.6rem;
-    font-weight: 600;
-    color: var(--neutral-text-title-color);
-}
-
-.highlight-1,
-.highlight-2,
-.highlight-3,
-.highlight-4,
-.highlight-5,
-.highlight-6 {
-    font-weight: 700;
-}
-
-.subtitle-1 {
-    color: var(--neutral-text-subtitle-color);
-}
-
-.subtitle-2 {
-    color: var(--neutral-text-subtitle-color);
-}
-
-.subtitle-3 {
-    color: var(--neutral-text-subtitle-color);
-}
-
-.subtitle-4 {
-    color: var(--neutral-text-subtitle-color);
-}
-
-.subtitle-5 {
-    color: var(--neutral-text-subtitle-color);
-}
-
-.body-1 {
-    color: var(--neutral-text-body-color);
-}
-
-.body-2 {
-    color: var(--neutral-text-body-color);
-}
-
-.body-3 {
-    color: var(--neutral-text-body-color);
-}
-
-.button-text-1 {
-    color: var(--primary-main-color);
-}
-
-.button-text-2 {
-    color: var(--primary-main-color);
-}
-
-.button-text-3 {
-    color: var(--primary-main-color);
-}
-
-.button-text-4 {
-    color: var(--primary-main-color);
-}
-
-.button-text-5 {
-    color: var(--primary-main-color);
-}
-
-.button-text-6 {
-    color: var(--primary-main-color);
-}
-
-.label-1 {
-    color: var(--neutral-text-label-color);
-}
-
-.label-2 {
-    color: var(--neutral-text-label-color);
-}
-
-.label-3 {
-    color: var(--neutral-text-label-color);
-}
-
-.label-4 {
-    color: var(--neutral-text-label-color);
-}
-
-.label-5 {
-    color: var(--neutral-text-label-color);
-}
-
-.placeholder-1 {
-    color: var(--neutral-text-placeholder-color);
-}
-
-.placeholder-2 {
-    color: var(--neutral-text-placeholder-color);
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />