@fileverse/ui 5.3.3 → 5.4.0-unstable-styles-2

package/dist/base.css

@@ -0,0 +1,744 @@
+:root {
+  --focused: 260, 100%, 52%, 1; /* Blue-700 */
+  --radius: 0.5rem;
+
+  /* Button */
+  --color-button-default: 0, 0%, 0%, 1; /* Black */
+  --color-button-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
+  --color-button-secondary: 0, 0%, 100%, 1; /* White */
+  --color-button-secondary-hover: 200, 13%, 95%, 1; /* Gray-100 */
+  --color-button-disabled: 195, 10%, 92%, 1; /* Gray-200 */
+  --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
+  --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
+  --color-button-floating: 0, 0%, 100%, 1; /* White */
+  --color-button-floating-hover: 200, 13%, 95%, 1; /* Gray-100 */
+
+  /* Text */
+  --color-text-default: 207, 8%, 23%, 1; /* Gray-950 */
+  --color-text-secondary: 208, 8%, 50%, 1; /* Gray-700 */
+  --color-text-disabled: 206, 9%, 66%, 1; /* Gray-500 */
+  --color-text-danger: 354, 96%, 59%, 1; /* Red-500 */
+  --color-text-success: 127, 69%, 29%, 1; /* Green-700 */
+  --color-text-inverse: 0, 0%, 100%, 1; /* White */
+  --color-text-link: 260, 100%, 52%, 1; /* Blue-700 */
+  --color-text-on-brand: 207, 8%, 23%, 1; /* Gray-950 */
+
+  /* Background */
+  --color-bg-default: 0, 0%, 100%, 1; /* White */
+  --color-bg-default-hover: 200, 13%, 95%, 1; /* Gray-100 */
+  --color-bg-default-active: 52, 100%, 52%, 1; /* Yellow-400 */
+  --color-bg-default-selected: 210, 17%, 98%, 1; /* Gray-50 */
+  --color-bg-secondary: 210, 17%, 98%, 1; /* Gray-50 */
+  --color-bg-secondary-hover: 195, 10%, 92%, 1; /* Gray-200 */
+  --color-bg-disabled: 195, 10%, 92%, 1; /* Gray-200 */
+  --color-bg-brand: 52, 100%, 52%, 1; /* Yellow-400 */
+  --color-bg-brand-hover: 50, 98%, 47%, 1; /* Yellow-500 */
+  --color-bg-brand-light: 53, 100%, 90%, 1; /* Yellow-100 */
+  --color-bg-danger: 354, 96%, 59%, 1; /* Red-500 */
+  --color-bg-danger-light: 354, 100%, 94%, 1; /* Red-100 */
+  --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
+  --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
+  --color-bg-success: 126, 73%, 39%, 1;
+  --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
+  --color-bg-info-light: 248, 100%, 97%, 1;
+
+  /* Border */
+  --color-border-default: 195, 10%, 92%, 1; /* Gray-200 */
+  --color-border-hover: 203, 10%, 76%, 1;
+  --color-border-light: 0, 0%, 100%, 1; /* White */
+  --color-border-active: 0, 0%, 0%, 1; /* Black */
+  --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
+  --color-border-warning: 18, 88%, 55%, 1; /* Red-500 */
+  --color-border-danger: 354, 96%, 59%, 1; /* Red-500 */
+  --color-border-success: 127, 69%, 29%, 1;
+  --color-border-info: 260, 100%, 52%, 1;
+  --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
+
+  /* Icon */
+  --color-icon-default: 0, 0%, 100%, 1; /* White */
+  --color-icon-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
+  --color-icon-brand: 52, 100%, 52%, 1; /* Yellow-400 */
+  --color-icon-secondary: 208, 8%, 50%, 1; /* Gray-700 */
+  --color-icon-disabled: 206, 9%, 66%, 1; /* Gray-500 */
+  --color-icon-inverse: 0, 0%, 100%, 1; /* White */
+  --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
+  --color-icon-warning: 18, 88%, 55%, 1;
+  --color-icon-info: 260, 100%, 52%, 1;
+  --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
+  --color-icon-on-brand: 207, 8%, 23%, 1; /* Gray-900 */
+
+  /* Tooltip */
+  --color-bg-tooltip: 0, 0%, 0%, 1; /* Black */
+  --color-text-tooltip: 0, 0%, 100%, 1; /* White */
+
+  /* Inline Comment */
+  --color-inline-comment: 124, 79%, 93%, 1; /* #DDFBDF */
+  --color-inline-comment-active: 126, 74%, 73%, 1; /* #88ED92 */
+
+  /* Utility */
+  --color-bg-transparent: 0, 0%, 0%, 0.04; /* Black 4% */
+  --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+
+  /* Elevation */
+  --shadow-elevation-1: 0px 1px 2px rgba (0,  0,  0,  0.15);
+  --shadow-elevation-2: 0px 2px 4px rgba (0,  0,  0,  0.15);
+  --shadow-elevation-3: 0px 4px 16px rgba (0,  0,  0,  0.15);
+  --shadow-elevation-4: 0px 8px 32px rgba (0,  0,  0,  0.15);
+}
+
+.dark {
+  /* Button */
+  --color-button-default: 0, 0%, 31%, 1; /* Gray-700 */
+  --color-button-default-hover: 0, 0%, 36%, 1; /* Gray-600 */
+  --color-button-secondary: 0, 0%, 12%, 1; /* Gray-950 */
+  --color-button-secondary-hover: 0, 0%, 25%, 1; /* Gray-800 */
+  --color-button-disabled: 0, 0%, 25%, 1; /* Gray-800 */
+  --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
+  --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
+  --color-button-floating: 0, 0%, 31%, 1; /* Gray-700 */
+  --color-button-floating-hover: 0, 0%, 25%, 1; /* Gray-800 */
+
+  /* Text */
+  --color-text-default: 0, 0%, 91%, 1; /* Gray-100 */
+  --color-text-secondary: 0, 0%, 53%, 1; /* Gray-400 */
+  --color-text-disabled: 0, 0%, 43%, 1; /* Gray-500 */
+  --color-text-danger: 354, 100%, 70%, 1; /* Red-400 */
+  --color-text-success: 126, 67%, 45%, 1; /* Green-500 */
+  --color-text-inverse: 0, 0%, 91%, 1; /* Gray-100 */
+  --color-text-link: 251, 100%, 83%, 1; /* Blue-700 */
+  --color-text-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
+
+  /* Background */
+  --color-bg-default: 0, 0%, 18%, 1; /* Gray-900 */
+  --color-bg-default-hover: 0, 0%, 25%, 1; /* Gray-800 */
+  --color-bg-default-active: 50, 74%, 54%, 1; /* Yellow-400 */
+  --color-bg-default-selected: 0, 0%, 25%, 1; /* Gray-800 */
+  --color-bg-secondary: 0, 0%, 12%, 1; /* Gray-950 */
+  --color-bg-secondary-hover: 0, 0%, 18%, 1; /* Gray-900 */
+  --color-bg-disabled: 0, 0%, 53%, 1; /* Gray-400 */
+  --color-bg-brand: 50, 74%, 54%, 1; /* Yellow-400 */
+  --color-bg-brand-hover: 50, 60%, 45%, 1; /* Yellow-500 */
+  --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
+  --color-bg-danger: 354, 84%, 42%, 1; /* Red-200 */
+  --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
+  --color-bg-default-inverse: 0, 0%, 0%, 1; /* White */
+  --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
+  --color-bg-success: 128, 59%, 20%, 1;
+  --color-bg-success-light: 128, 59%, 20%, 1; /* Green-900 */
+  --color-bg-info-light: 254, 100%, 73%, 0.16;
+
+  /* Border */
+  --color-border-default: 0, 0%, 25%, 1; /* Gray-800 */
+  --color-border-hover: 0, 0%, 36%, 1; /* Gray-600 */
+  --color-border-light: 0, 0%, 100%, 1; /* White */
+  --color-border-active: 0, 0%, 91%, 1; /* Gray-200 */
+  --color-border-focused: 254, 100%, 73%, 1; /* Blue-400 */
+  --color-border-danger: 354, 100%, 70%, 1; /* Red-400 */
+  --color-border-warning: 22, 89%, 62%, 1; /* Red-500 */
+  --color-border-success: 126, 74%, 73%, 1;
+  --color-border-info: 254, 100%, 73%, 1;
+  --color-border-disabled: 0, 0%, 53%, 1; /* Gray-400  */
+
+  /* Icon */
+  --color-icon-default: 0, 0%, 100%, 1; /* White */
+  --color-icon-default-hover: 0, 0%, 12%, 1; /* Gray-900 */
+  --color-icon-brand: 50, 74%, 54%, 1; /* Yellow-400 */
+  --color-icon-secondary: 0, 0%, 53%, 1; /* Gray-400 */
+  --color-icon-disabled: 0, 0%, 25%, 1; /* Gray-800 */
+  --color-icon-inverse: 207, 8%, 23%, 1; /* Gray-100 */
+  --color-icon-danger: 354, 100%, 70%, 1;
+  --color-icon-warning: 22, 89%, 62%, 1;
+  --color-icon-info: 254, 100%, 73%, 1;
+  --color-icon-success: 126, 74%, 73%, 1;
+  --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
+
+  /* Tooltip */
+  --color-bg-tooltip: 0, 0%, 100%, 1; /* White */
+  --color-text-tooltip: 0, 0%, 0%, 1; /* Black */
+
+  /* Inline Comment */
+  --color-inline-comment: 128, 59%, 20%, 1; /* #15521D */
+  --color-inline-comment-active: 127, 69%, 29%, 1; /* #177E23 */
+
+  /* Utility */
+  --color-bg-transparent: 0, 0%, 100%, 0.04; /* White 4% */
+  --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+}
+
+.theme-sepia {
+  /* Button */
+  --color-button-default: 28, 16%, 21%, 1; /* #3E352D */
+  --color-button-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+  --color-button-secondary: 41, 61%, 84%, 1; /* #EFDFBD */
+  --color-button-secondary-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+  --color-button-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+  --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
+  --color-button-floating: 41, 61%, 84%, 1; /* #EFDFBD */
+  --color-button-floating-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+
+  /* Text */
+  --color-text-default: 28, 16%, 21%, 1; /* #3E352D */
+  --color-text-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+  --color-text-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+  --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-text-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+  --color-text-link: 199, 100%, 29%, 1; /* #006494 */
+  --color-text-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+  /* Background */
+  --color-bg-default: 41, 61%, 84%, 1; /* #EFDFBD */
+  --color-bg-default-hover: 28, 16%, 21%, 0.08; /* #3E352D 8% */
+  --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-bg-default-selected: 28, 16%, 21%, 0.1; /* #3E352D 10% */
+  --color-bg-secondary: 41, 61%, 80%, 1; /* #EBD7AD */
+  --color-bg-secondary-hover: 28, 16%, 21%, 0.12; /* #3E352D 12% */
+  --color-bg-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+  --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
+  --color-bg-brand-light: 47, 87%, 88%, 1; /* #FBEFC5 */
+  --color-bg-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-bg-danger-light: 0, 71%, 42%, 0.06; /* #B71F1F 6% */
+  --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
+  --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
+  --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
+  --color-bg-info-light: 199, 45%, 87%, 1;
+
+  /* Border */
+  --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
+  --color-border-hover: 41, 50%, 68%, 1; /* #D6BC85 */
+  --color-border-light: 41, 61%, 84%, 1; /* #EFDFBD */
+  --color-border-active: 28, 16%, 21%, 1; /* #3E352D */
+  --color-border-focused: 199, 100%, 29%, 1; /* #006494 */
+  --color-border-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-border-warning: 12, 85%, 60%, 1; /* #F06543 */
+  --color-border-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-border-info: 199, 100%, 29%, 1; /* #006494 */
+  --color-border-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+
+  /* Icon */
+  --color-icon-default: 28, 16%, 21%, 1; /* #3E352D */
+  --color-icon-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+  --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-icon-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+  --color-icon-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+  --color-icon-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+  --color-icon-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-icon-warning: 12, 85%, 60%, 1; /* #F06543 */
+  --color-icon-info: 199, 100%, 29%, 1; /* #006494 */
+  --color-icon-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-icon-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+  /* Tooltip */
+  --color-bg-tooltip: 28, 16%, 21%, 1; /* #3E352D */
+  --color-text-tooltip: 41, 61%, 84%, 1; /* #EFDFBD */
+
+  /* Inline Comment */
+  --color-inline-comment: 76, 23%, 72%, 1; /* #BFC8A7 */
+  --color-inline-comment-active: 75, 23%, 62%, 1; /* #A9B488 */
+
+  /* Utility */
+  --color-bg-transparent: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+  --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+}
+
+.theme-pink {
+  /* Button */
+  --color-button-default: 349, 25%, 13%, 1; /* #2A191C */
+  --color-button-default-hover: 349, 25%, 22%, 1; /* #462A2F */
+  --color-button-secondary: 346, 100%, 95%, 1; /* #FFE6EC */
+  --color-button-secondary-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
+  --color-button-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
+  --color-button-danger: 2, 79%, 56%, 1; /* #E73D36 */
+  --color-button-danger-hover: 2, 79%, 48%, 1; /* #DB221A */
+  --color-button-floating: 346, 100%, 95%, 1; /* #FFE6EC */
+  --color-button-floating-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
+
+  /* Text */
+  --color-text-default: 3, 88%, 26%, 1; /* #7C0E08 */
+  --color-text-secondary: 3, 39%, 59%, 1; /* #C0736F */
+  --color-text-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+  --color-text-danger: 2, 79%, 56%, 1; /* #E73D36 */
+  --color-text-success: 139, 35%, 42%, 1; /* #46905E */
+  --color-text-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
+  --color-text-link: 209, 89%, 39%, 1; /* #0B67BD */
+  --color-text-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
+
+  /* Background */
+  --color-bg-default: 346, 100%, 95%, 1; /* #FFE6EC */
+  --color-bg-default-hover: 3, 88%, 26%, 0.08; /* #7C0E08 8% */
+  --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
+  --color-bg-default-selected: 3, 88%, 26%, 0.06; /* #7C0E08 6% */
+  --color-bg-secondary: 346, 100%, 92%, 1; /* #FFD6E0 */
+  --color-bg-secondary-hover: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
+  --color-bg-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
+  --color-bg-brand: 45, 100%, 65%, 1; /* #FFD24D */
+  --color-bg-brand-hover: 45, 100%, 56%, 1; /* #FFC61F */
+  --color-bg-brand-light: 45, 100%, 90%, 1; /* #FFF2CC */
+  --color-bg-danger: 2, 79%, 56%, 1; /* #E73D36 */
+  --color-bg-danger-light: 2, 79%, 56%, 0.14; /* #E73D36 14% */
+  --color-bg-default-inverse: 3, 88%, 26%, 1;
+  --color-bg-tertiary: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
+  --color-bg-success: 139, 35%, 42%, 1; /* #46905E */
+  --color-bg-success-light: 140, 34%, 88%, 1; /* #D6EBDD */
+  --color-bg-info-light: 209, 89%, 88%, 1;
+
+  /* Border */
+  --color-border-default: 346, 100%, 90%, 1; /* #FFCCD8 */
+  --color-border-hover: 346, 100%, 86%, 1; /* #FFB8C9 */
+  --color-border-light: 348, 100%, 96%, 1; /* #FFEBEF */
+  --color-border-active: 3, 88%, 26%, 1; /* #7C0E08 */
+  --color-border-focused: 209, 89%, 39%, 1; /* #0B67BD */
+  --color-border-danger: 2, 79%, 56%, 1; /* #E73D36 */
+  --color-border-warning: 19, 83%, 53%, 1; /* #EB6424 */
+  --color-border-success: 139, 35%, 42%, 1; /* #46905E */
+  --color-border-info: 209, 89%, 39%, 1; /* #0B67BD */
+  --color-border-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+
+  /* Icon */
+  --color-icon-default: 3, 88%, 26%, 1; /* #7C0E08 */
+  --color-icon-default-hover: 3, 88%, 32%, 1; /* #99110A */
+  --color-icon-brand: 45, 100%, 65%, 1; /* #FFD24D */
+  --color-icon-secondary: 3, 39%, 59%, 1; /* #C0736F */
+  --color-icon-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+  --color-icon-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
+  --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
+  --color-icon-warning: 19, 83%, 53%, 1; /* #EB6424 */
+  --color-icon-info: 209, 89%, 39%, 1; /* #0B67BD */
+  --color-icon-success: 140, 35%, 45%, 1; /* #4B9B65 */
+  --color-icon-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
+
+  /* Tooltip */
+  --color-bg-tooltip: 3, 88%, 26%, 1; /* #7C0E08 */
+  --color-text-tooltip: 346, 100%, 95%, 1; /* #FFE6EC */
+
+  /* Inline Comment */
+  --color-inline-comment: 139, 35%, 86%, 1; /* #CFE8D7 */
+  --color-inline-comment-active: 139, 36%, 78%, 1; /* #B3DBC0 */
+
+  /* Utility */
+  --color-bg-transparent: 3, 88%, 26%, 0.04; /* #7C0E08 4% */
+  --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+}
+
+.theme-green {
+  /* Button */
+  --color-button-default: 63, 15%, 74%, 1; /* #C6C7B3 */
+  --color-button-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
+  --color-button-secondary: 120, 9%, 24%, 1; /* #384338 */
+  --color-button-secondary-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
+  --color-button-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
+  --color-button-danger: 2, 99%, 68%, 1; /* #FE625D */
+  --color-button-danger-hover: 2, 99%, 72%, 1; /* #FE7571 */
+  --color-button-floating: 120, 9%, 24%, 1; /* #384338 */
+  --color-button-floating-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
+
+  /* Text */
+  --color-text-default: 63, 27%, 83%, 1; /* #DFE0C9 */
+  --color-text-secondary: 84, 5%, 56%, 1; /* #909688 */
+  --color-text-disabled: 104, 7%, 42%, 1; /* #687364 */
+  --color-text-danger: 2, 99%, 68%, 1; /* #FE625D */
+  --color-text-success: 120, 46%, 55%, 1; /* #59C259 */
+  --color-text-inverse: 120, 6%, 16%, 1; /* #262B26 */
+  --color-text-link: 197, 78%, 64%, 1; /* #5BC3EB */
+  --color-text-on-brand: 120, 6%, 16%, 1; /* #262B26 */
+
+  /* Background */
+  --color-bg-default: 120, 9%, 24%, 1; /* #384338 */
+  --color-bg-default-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
+  --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
+  --color-bg-default-selected: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
+  --color-bg-secondary: 120, 6%, 16%, 1; /* #262B26 */
+  --color-bg-secondary-hover: 63, 15%, 74%, 0.08; /* #C6C7B3 8% */
+  --color-bg-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
+  --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
+  --color-bg-brand-light: 50, 89%, 89%, 1; /* #FCF4C9 */
+  --color-bg-danger: 2, 99%, 68%, 1; /* #FE625D */
+  --color-bg-danger-light: 2, 99%, 68%, 0.12; /* #FE625D 12% */
+  --color-bg-default-inverse: 120, 9%, 76%, 1; /* #BCC7BC */
+  --color-bg-tertiary: 63, 15%, 74%, 0.12; /* #C6C7B3 12% */
+  --color-bg-success: 120, 46%, 55%, 1; /* #59C259 */
+  --color-bg-success-light: 120, 46%, 55%, 0.16; /* #59C259 16% */
+  --color-bg-info-light: 197, 78%, 64%, 0.16;
+
+  /* Border */
+  --color-border-default: 120, 8%, 30%, 1; /* #465346 */
+  --color-border-hover: 120, 8%, 36%, 1; /* #546354 */
+  --color-border-light: 120, 8%, 44%, 1; /* #677A67 */
+  --color-border-active: 62, 27%, 83%, 1; /* #DFE0C9 */
+  --color-border-focused: 197, 78%, 64%, 1; /* #5BC3EB */
+  --color-border-danger: 2, 99%, 68%, 1; /* #FE625D */
+  --color-border-warning: 10, 85%, 61%, 1; /* #F06449 */
+  --color-border-success: 120, 46%, 55%, 1; /* #59C259 */
+  --color-border-info: 197, 78%, 64%, 1; /* #5BC3EB */
+  --color-border-disabled: 104, 7%, 42%, 1; /* #687364 */
+
+  /* Icon */
+  --color-icon-default: 62, 27%, 83%, 1; /* #DFE0C9 */
+  --color-icon-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
+  --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-icon-secondary: 84, 5%, 56%, 1; /* #909688 */
+  --color-icon-disabled: 104, 7%, 42%, 1; /* #687364 */
+  --color-icon-inverse: 120, 6%, 16%, 1; /* #262B26 */
+  --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
+  --color-icon-warning: 10, 85%, 61%, 1; /* #F06449 */
+  --color-icon-info: 197, 78%, 64%, 1; /* #5BC3EB */
+  --color-icon-success: 120, 46%, 55%, 1; /* #59C259 */
+  --color-icon-on-brand: 120, 6%, 16%, 1; /* #262B26 */
+
+  /* Tooltip */
+  --color-bg-tooltip: 120, 9%, 76%, 1; /* #BCC7BC */
+  --color-text-tooltip: 120, 9%, 24%, 1; /* #384338 */
+
+  /* Inline Comment */
+  --color-inline-comment: 120, 47%, 20%, 1; /* #1B4B1B */
+  --color-inline-comment-active: 120, 47%, 28%, 1; /* #266826 */
+
+  /* Utility */
+  --color-bg-transparent: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
+  --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+}
+
+*,
+::before,
+::after {
+  border-color: hsl(var(--color-border-default));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  background-color: hsl(var(--color-bg-default));
+  color: hsl(var(--color-text-default));
+}
+
+#selected-value > div > div > p {
+  display: none;
+}
+
+#storybook-root {
+  padding: 0 !important;
+}
+
+input:is(:-webkit-autofill, :-webkit-autofill), textarea:is(:-webkit-autofill, :-webkit-autofill) {
+  -webkit-transition:
+    background-color 0s 600000s,
+    color 0s 600000s !important;
+  transition:
+    background-color 0s 600000s,
+    color 0s 600000s !important;
+}
+
+input:is(:-webkit-autofill, :autofill),
+textarea:is(:-webkit-autofill, :autofill) {
+  -webkit-transition:
+    background-color 0s 600000s,
+    color 0s 600000s !important;
+  transition:
+    background-color 0s 600000s,
+    color 0s 600000s !important;
+}
+
+.epr-emoji-category-label {
+  font-family: system-ui !important;
+  font-size: 14px !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 20px !important;
+}
+
+.epr-search-container > input {
+  display: flex;
+  height: 2.25rem; /* h-9 */
+  width: 100%; /* w-full */
+  border-radius: 4px; /* rounded-md */
+  border: 1px solid hsl(214.3, 31.8%, 91.4%); /* border border-input */
+  background-color: transparent !important; /* bg-transparent */
+  font-size: 14px; /* text-sm */
+  transition: colors 0.15s ease-in-out;
+  color: #000;
+  font-family: system-ui, "Roboto";
+}
+
+/* For hover state */
+
+.epr-search-container > input:hover {
+  border-color: #000; /* hover:border-border-hover */
+}
+
+/* For focus-visible state */
+
+.epr-search-container > input:focus-visible {
+  outline: none; /* focus-visible:outline-none */
+  border-color: #000; /* focus-visible:border-border-hover */
+}
+
+/* For placeholder text */
+
+.epr-search-container > input::-moz-placeholder {
+  color: hsl(var(--color-text-disabled));
+  font-family: system-ui, "Roboto";
+  font-size: 14px;
+}
+
+.epr-search-container > input::placeholder {
+  color: hsl(var(--color-text-disabled));
+  font-family: system-ui, "Roboto";
+  font-size: 14px;
+}
+
+.epr_-bbny0t > button {
+  border-radius: 50% !important;
+}
+
+.epr_-6kfaby.epr-active {
+  background-color: #ffdf0a !important;
+  color: #000 !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+
+.epr_-f1jbax:focus:before {
+  border: none !important;
+  border-radius: 4px !important;
+}
+
+.epr_-8ygbw8 {
+  padding: 0.5rem 1rem !important;
+}
+
+.epr-body {
+  margin: 0 0.5rem !important;
+}
+
+.toast-mini {
+  padding: 8px 12px !important;
+  gap: 8px !important;
+  width: -moz-fit-content !important;
+  width: fit-content !important;
+  border-radius: 8px !important;
+  place-self: end !important;
+}
+
+.toast-mini > * + * {
+  margin-left: 0;
+}
+
+.space-lg {
+  padding: 20px !important;
+}
+
+.space-y-lg {
+  padding-top: 20px !important;
+  padding-bottom: 20px !important;
+}
+
+.space-x-lg {
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}
+
+.top-space-lg {
+  padding-top: 20px !important;
+}
+
+.bottom-space-lg {
+  padding-bottom: 20px !important;
+}
+
+.left-space-lg {
+  padding-left: 20px !important;
+}
+
+.right-space-lg {
+  padding-right: 20px !important;
+}
+
+.bottom-space-xlg {
+  padding-bottom: 24px !important;
+}
+
+.space-sm {
+  padding: 12px !important;
+}
+
+.space-y-sm {
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
+}
+
+.space-x-sm {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+.top-space-sm {
+  padding-top: 12px !important;
+}
+
+.bottom-space-sm {
+  padding-bottom: 12px !important;
+}
+
+.left-space-sm {
+  padding-left: 12px !important;
+}
+
+.right-space-sm {
+  padding-right: 12px !important;
+}
+
+.space-xsm {
+  padding: 8px !important;
+}
+
+.space-y-xsm {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.space-x-xsm {
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+}
+
+.space-x-3xlg {
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+}
+
+.space-y-3xlg {
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+}
+
+.top-space-xsm {
+  padding-top: 8px !important;
+}
+
+.bottom-space-xsm {
+  padding-bottom: 8px !important;
+}
+
+.left-space-xsm {
+  padding-left: 8px !important;
+}
+
+.right-space-xsm {
+  padding-right: 8px !important;
+}
+
+.right-space-2xsm {
+  padding-right: 4px !important;
+}
+
+.bottom-space-2xsm {
+  padding-bottom: 4px !important;
+}
+
+.bottom-space-2xlg {
+  padding-bottom: 32px !important;
+}
+
+.space-2xsm {
+  padding: 4px !important;
+}
+
+.space-md {
+  padding: 16px !important;
+}
+
+.space-y-md {
+  padding-top: 16px !important;
+  padding-bottom: 16px !important;
+}
+
+.space-x-md {
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+
+.top-space-md {
+  padding-top: 16px !important;
+}
+
+.bottom-space-md {
+  padding-bottom: 16px !important;
+}
+
+.left-space-md {
+  padding-left: 16px !important;
+}
+
+.right-space-md {
+  padding-right: 16px !important;
+}
+
+.top-space-xlg {
+  padding-top: 32px !important;
+}
+
+.gap-xsm {
+  gap: 8px !important;
+}
+
+.gap-2xsm {
+  gap: 4px !important;
+}
+
+.gap-3xsm {
+  gap: 2px !important;
+}
+
+.gap-md {
+  gap: 16px !important;
+}
+
+.gap-sm {
+  gap: 12px !important;
+}
+
+.border-radius-sm {
+  border-radius: 4px !important;
+}
+
+.border-width-md {
+  border-width: 1px !important;
+}
+
+.border-radius-lg {
+  border-radius: 12px !important;
+}
+
+.top-left-border-radius-xlg {
+  border-top-left-radius: 16px !important;
+}
+
+.top-right-border-radius-xlg {
+  border-top-right-radius: 16px !important;
+}
+
+.bottom-left-border-radius-xlg {
+  border-bottom-left-radius: 16px !important;
+}
+
+.bottom-right-border-radius-xlg {
+  border-bottom-right-radius: 16px !important;
+}
+
+.border-radius-xlg {
+  border-radius: 16px !important;
+}
+
+.border-radius-md {
+  border-radius: 8px !important;
+}
+
+.space-x-xlg {
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}