wini-web-components 2.8.2 → 2.8.5

package/src/skin/root.css

@@ -0,0 +1,294 @@
+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

@@ -0,0 +1,314 @@
+.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

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