@ioca/react 1.5.19 → 1.5.21

package/lib/css/colors.css

@@ -1,792 +0,0 @@
-:root {
-    --white: white;
-    --white-0: white;
-    --white-1: #fafafa;
-    --black: black;
-    --black-0: #dbdbdb;
-    --black-1: #1a1a1a;
-    --red: #dc143c;
-    --red-0: #fcdfe4;
-    --red-1: #ec002f;
-    --blue: #1e90ff;
-    --blue-0: #d6ebff;
-    --blue-1: #007cf4;
-    --green: #3cb371;
-    --green-0: #e7fff2;
-    --green-1: #37a467;
-    --yellow: #ffc549;
-    --yellow-0: #fff5c9;
-    --yellow-1: #ffb820;
-    --brown: #95410c;
-    --brown-0: #fbece2;
-    --brown-1: #8b3a07;
-    --grey: #d7d7d7;
-    --grey-0: #f6f6f6;
-    --grey-1: #b1b1b1;
-    --pink: #ff69b4;
-    --pink-0: #ffe3f1;
-    --pink-1: #ff55aa;
-    --purple: #8a2be2;
-    --purple-0: #eddefb;
-    --purple-1: #751bc9;
-    --aqua: aqua;
-    --aqua-0: #e8ffff;
-    --aqua-1: #1efdfd;
-    --orange: #fb812a;
-    --orange-0: #fff1e8;
-    --orange-1: #eb7521;
-    --warning: #ffb01f;
-    --warning-0: #fff0bf;
-    --warning-1: #f0a313;
-    --error: #ff4545;
-    --error-0: #ffdbdb;
-    --error-1: #f13636;
-    --success: #a3ff8c;
-    --success-0: #acf899;
-    --success-1: #8dfa72;
-
-    --color-0: #020202;
-    --color-1: #1b1b1b;
-    --color-2: #363636;
-    --color-3: #505050;
-    --color-4: #6b6b6b;
-    --color-5: #868686;
-    --color-6: #a1a1a1;
-    --color-7: #bbbbbb;
-    --color-8: #d6d6d6;
-    --color-9: #f1f1f1;
-
-    --background: #fff;
-    --background-1: #f1f1f1;
-    --background-hover: transparent;
-    --background-opacity: rgba(255, 255, 255, 0.4);
-    --background-opacity-1: rgba(211, 211, 211, 0.4);
-    --background-opacity-2: rgba(188, 188, 188, 0.15);
-    --color-backdrop: rgba(255, 255, 255, 0.4);
-
-    --color: var(--color-2);
-    --color-main: var(--color-2);
-    --color-main-1: var(--color-0);
-    --color-main-0: var(--color-9);
-    --color-main-reverse: var(--white);
-
-    --shadow: 0 0 8px rgba(0, 0, 0, 0.15);
-
-    [class^="bg-"],
-    [class*=" bg-"] {
-        background-color: var(--background);
-        color: var(--color);
-    }
-
-    .white {
-        --color: var(--white);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --color: var(--white);
-        }
-    }
-
-    .white-0 {
-        --color: var(--white-0);
-        --color-hover: var(--white);
-        color: var(--color);
-    }
-
-    .black {
-        --color: var(--black);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --color: var(--black);
-        }
-    }
-
-    .black-0 {
-        --color: var(--black-0);
-        --color-hover: var(--black);
-        color: var(--color);
-    }
-
-    .red {
-        --color: var(--red);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --color: var(--red);
-        }
-    }
-
-    .red-0 {
-        --color: var(--red-0);
-        --color-hover: var(--red);
-        color: var(--color);
-    }
-
-    .blue {
-        --color: var(--blue);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --color: var(--blue);
-        }
-    }
-
-    .blue-0 {
-        --color: var(--blue-0);
-        --color-hover: var(--blue);
-        color: var(--color);
-    }
-
-    .green {
-        --color: var(--green);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--green-0);
-            --color: var(--green);
-        }
-    }
-
-    .green-0 {
-        --color: var(--green-0);
-        --color-hover: var(--green);
-        color: var(--color);
-    }
-
-    .yellow {
-        --color: var(--yellow);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--yellow-0);
-            --color: var(--yellow);
-        }
-    }
-
-    .yellow-0 {
-        --color: var(--yellow-0);
-        --color-hover: var(--yellow);
-        color: var(--color);
-    }
-
-    .brown {
-        --color: var(--brown);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--brown-0);
-            --color: var(--brown);
-        }
-    }
-
-    .brown-0 {
-        --color: var(--brown-0);
-        --color-hover: var(--brown);
-        color: var(--color);
-    }
-
-    .grey {
-        --color: var(--grey);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--grey-0);
-            --color: var(--grey);
-        }
-    }
-
-    .grey-0 {
-        --color: var(--grey-0);
-        --color-hover: var(--grey);
-        color: var(--color);
-    }
-
-    .pink {
-        --color: var(--pink);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--pink-0);
-            --color: var(--pink);
-        }
-    }
-
-    .pink-0 {
-        --color: var(--pink-0);
-        --color-hover: var(--pink);
-        color: var(--color);
-    }
-
-    .purple {
-        --color: var(--purple);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--purple-0);
-            --color: var(--purple);
-        }
-    }
-
-    .purple-0 {
-        --color: var(--purple-0);
-        --color-hover: var(--purple);
-        color: var(--color);
-    }
-
-    .aqua {
-        --color: var(--aqua);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--aqua-0);
-            --color: var(--aqua);
-        }
-    }
-
-    .aqua-0 {
-        --color: var(--aqua-0);
-        --color-hover: var(--aqua);
-        color: var(--color);
-    }
-
-    .orange {
-        --color: var(--orange);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--orange-0);
-            --color: var(--orange);
-        }
-    }
-
-    .orange-0 {
-        --color: var(--orange-0);
-        --color-hover: var(--orange);
-        color: var(--color);
-    }
-
-    .warning {
-        --color: var(--warning);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--warning-0);
-            --color: var(--warning);
-        }
-    }
-
-    .warning-0 {
-        --color: var(--warning-0);
-        --color-hover: var(--warning);
-        color: var(--color);
-    }
-
-    .error {
-        --color: var(--error);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--error-0);
-            --color: var(--error);
-        }
-    }
-
-    .error-0 {
-        --color: var(--error-0);
-        --color-hover: var(--error);
-        color: var(--color);
-    }
-
-    .success {
-        --color: var(--success);
-        color: var(--color);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--success-0);
-            --color: var(--success);
-        }
-    }
-
-    .success-0 {
-        --color: var(--success-0);
-        --color-hover: var(--success);
-        color: var(--color);
-    }
-
-    .color-0 {
-        --color: var(--color-0);
-        color: var(--color-0);
-    }
-
-    .color-1 {
-        --color: var(--color-1);
-        color: var(--color-1);
-    }
-
-    .color-2 {
-        --color: var(--color-2);
-        color: var(--color-2);
-    }
-
-    .color-3 {
-        --color: var(--color-3);
-        color: var(--color-3);
-    }
-
-    .color-4 {
-        --color: var(--color-4);
-        color: var(--color-4);
-    }
-
-    .color-5 {
-        --color: var(--color-5);
-        color: var(--color-5);
-    }
-
-    .color-6 {
-        --color: var(--color-6);
-        color: var(--color-6);
-    }
-
-    .color-7 {
-        --color: var(--color-7);
-        color: var(--color-7);
-    }
-
-    .color-8 {
-        --color: var(--color-8);
-        color: var(--color-8);
-    }
-
-    .color-9 {
-        --color: var(--color-9);
-        color: var(--color-9);
-    }
-
-    .bg-white {
-        --background: var(--white);
-        --color: var(--black);
-    }
-
-    .bg-white-0 {
-        --background: var(--white-0);
-        --background-hover: var(--white-1);
-        --color: var(--black);
-        --color-hover: var(--black);
-    }
-
-    .bg-black {
-        --background: var(--black);
-        --background-hover: var(--black-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--black-1);
-        }
-    }
-
-    .bg-black-0 {
-        --background: var(--black-0);
-        --background-hover: var(--black-1);
-        --color: var(--black);
-        --color-hover: var(--white);
-    }
-
-    .bg-red {
-        --background: var(--red);
-        --background-hover: var(--red-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--red-1);
-        }
-    }
-
-    .bg-red-0 {
-        --background: var(--red-0);
-        --background-hover: var(--red-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-blue {
-        --background: var(--blue);
-        --background-hover: var(--blue-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--blue-1);
-        }
-    }
-
-    .bg-blue-0 {
-        --background: var(--blue-0);
-        --background-hover: var(--blue-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-green {
-        --background: var(--green);
-        --background-hover: var(--green-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--green-1);
-        }
-    }
-
-    .bg-green-0 {
-        --background: var(--green-0);
-        --background-hover: var(--green-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-yellow {
-        --background: var(--yellow);
-        --background-hover: var(--yellow-1);
-        --color: var(--black);
-        --color-hover: var(--black);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--yellow-1);
-        }
-    }
-
-    .bg-yellow-0 {
-        --background: var(--yellow-0);
-        --background-hover: var(--yellow-1);
-        --color-hover: var(--black);
-    }
-
-    .bg-brown {
-        --background: var(--brown);
-        --background-hover: var(--brown-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--brown-1);
-        }
-    }
-
-    .bg-brown-0 {
-        --background: var(--brown-0);
-        --background-hover: var(--brown-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-grey {
-        --background: var(--grey);
-        --background-hover: var(--grey-1);
-        --color: var(--black);
-        --color-hover: var(--black);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--grey-1);
-        }
-    }
-
-    .bg-grey-0 {
-        --background: var(--grey-0);
-        --background-hover: var(--grey-1);
-        --color-hover: var(--black);
-    }
-
-    .bg-pink {
-        --background: var(--pink);
-        --background-hover: var(--pink-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--pink-1);
-        }
-    }
-
-    .bg-pink-0 {
-        --background: var(--pink-0);
-        --background-hover: var(--pink-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-purple {
-        --background: var(--purple);
-        --background-hover: var(--purple-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--purple-1);
-        }
-    }
-
-    .bg-purple-0 {
-        --background: var(--purple-0);
-        --background-hover: var(--purple-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-aqua {
-        --background: var(--aqua);
-        --background-hover: var(--aqua-1);
-        --color: var(--black);
-        --color-hover: var(--black);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--aqua-1);
-        }
-    }
-
-    .bg-aqua-0 {
-        --background: var(--aqua-0);
-        --background-hover: var(--aqua-1);
-        --color-hover: var(--black);
-    }
-
-    .bg-orange {
-        --background: var(--orange);
-        --background-hover: var(--orange-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--orange-1);
-        }
-    }
-
-    .bg-orange-0 {
-        --background: var(--orange-0);
-        --background-hover: var(--orange-1);
-        --color-hover: var(--black);
-    }
-
-    .bg-warning {
-        --background: var(--warning);
-        --background-hover: var(--warning-1);
-        --color: var(--black);
-        --color-hover: var(--black);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--warning-1);
-        }
-    }
-
-    .bg-warning-0 {
-        --background: var(--warning-0);
-        --background-hover: var(--warning-1);
-        --color-hover: var(--black);
-    }
-
-    .bg-error {
-        --background: var(--error);
-        --background-hover: var(--error-1);
-        --color: var(--white);
-        --color-hover: var(--white);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--error-1);
-        }
-    }
-
-    .bg-error-0 {
-        --background: var(--error-0);
-        --background-hover: var(--error-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-success {
-        --background: var(--success);
-        --background-hover: var(--success-1);
-        --color: var(--black);
-        --color-hover: var(--black);
-
-        &.i-btn,
-        &.i-tag {
-            --background-hover: var(--success-1);
-        }
-    }
-
-    .bg-success-0 {
-        --background: var(--success-0);
-        --background-hover: var(--success-1);
-        --color-hover: var(--white);
-    }
-
-    .bg-0 {
-        --background: var(--color-0);
-        --color: var(--color-9);
-    }
-
-    .bg-1 {
-        --background: var(--color-1);
-        --color: var(--color-9);
-    }
-
-    .bg-2 {
-        --background: var(--color-2);
-        --color: var(--color-9);
-    }
-
-    .bg-3 {
-        --background: var(--color-3);
-        --color: var(--color-9);
-    }
-
-    .bg-4 {
-        --background: var(--color-4);
-        --color: var(--color-9);
-    }
-
-    .bg-5 {
-        --background: var(--color-5);
-        --color: var(--color-0);
-    }
-
-    .bg-6 {
-        --background: var(--color-6);
-        --color: var(--color-0);
-    }
-
-    .bg-7 {
-        --background: var(--color-7);
-        --color: var(--color-0);
-    }
-
-    .bg-8 {
-        --background: var(--color-8);
-        --color: var(--color-0);
-    }
-
-    .bg-9 {
-        --background: var(--color-9);
-        --color: var(--color-0);
-    }
-}
-
-.theme-dark {
-    --color-0: #fff;
-    --color-1: #e6e6e6;
-    --color-2: #cecece;
-    --color-3: #b5b5b5;
-    --color-4: #9c9c9c;
-    --color-5: #848484;
-    --color-6: #6b6b6b;
-    --color-7: #525252;
-    --color-8: #3a3a3a;
-    --color-9: #212121;
-
-    --background: #1a1a1a;
-    --background-1: #2a2a2a;
-    --background-hover: transparent;
-    --background-opacity: #1a1a1a66;
-    --background-opacity-1: rgba(0, 0, 0, 0.4);
-    --background-opacity-2: rgba(66, 66, 66, 0.4);
-    --color-backdrop: rgba(0, 0, 0, 0.4);
-
-    --color: var(--color-0);
-    --color-main: #fff;
-    --color-main-1: #fafafa;
-    --color-main-0: #f1f1f133;
-    --color-main-reverse: var(--black);
-
-    --black-0: #00000040;
-    --white-0: #ffffff40;
-    --red-0: #ed130040;
-    --blue-0: #0060ff40;
-    --green-0: #00ff4832;
-    --yellow-0: #ffca0032;
-    --orange-0: #ff920054;
-    --purple-0: #b800d740;
-    --aqua-0: #00d1d140;
-    --pink-0: #b5005a60;
-    --grey-0: #ffffff17;
-    --brown-0: #9d3d0040;
-
-    --warning-0: #ffd74040;
-    --error-0: #ff525240;
-    --success-0: #69f0ae40;
-
-    background: var(--background);
-}
-
-@media (prefers-color-scheme: dark) {
-    .theme-auto {
-        --color-0: #fff;
-        --color-1: #e6e6e6;
-        --color-2: #cecece;
-        --color-3: #b5b5b5;
-        --color-4: #9c9c9c;
-        --color-5: #848484;
-        --color-6: #6b6b6b;
-        --color-7: #525252;
-        --color-8: #3a3a3a;
-        --color-9: #212121;
-
-        --background: #1a1a1a;
-        --background-1: #2a2a2a;
-        --background-hover: transparent;
-        --background-opacity: #1a1a1a66;
-        --background-opacity-1: rgba(0, 0, 0, 0.4);
-        --background-opacity-2: rgba(66, 66, 66, 0.4);
-        --color-backdrop: rgba(0, 0, 0, 0.6);
-
-        --color: var(--color-0);
-        --color-main: #fff;
-        --color-main-1: #fafafa;
-        --color-main-0: #f1f1f133;
-        --color-main-reverse: var(--black);
-
-        --shadow: 0 0 12px rgba(0, 0, 0, 0.4);
-
-        --black-0: #00000040;
-        --white-0: #ffffff40;
-        --red-0: #ed130040;
-        --blue-0: #0060ff40;
-        --green-0: #00ff4832;
-        --yellow-0: #ffca0032;
-        --orange-0: #ff920054;
-        --purple-0: #b800d740;
-        --aqua-0: #00d1d140;
-        --pink-0: #b5005a60;
-        --grey-0: #ffffff17;
-        --brown-0: #9d3d0040;
-
-        --warning-0: #ffd74040;
-        --error-0: #ff525240;
-        --success-0: #69f0ae40;
-
-        background: var(--background);
-    }
-}