@helpwave/hightide
Version:
helpwave's component and theming library
163 lines (140 loc) • 6.37 kB
CSS
@import './variants.css';
@import './colors-semantic.css';
/*
* default light-theme component colors
*/
@theme {
/* Icon */
--color-icon-primary: var(--color-text-primary);
--color-icon-secondary: var(--color-text-secondary);
--color-icon-highlight: var(--color-highlight);
/* Button Outline */
--color-button-outline-primary-outline: var(--color-primary);
--color-button-outline-primary-icon: var(--color-primary);
--color-button-outline-primary-text: var(--color-primary);
/* Button Solid */
--color-button-solid-primary-background: var(--color-primary);
--color-button-solid-primary-text: var(--color-on-primary);
--color-button-solid-primary-icon: var(--color-on-primary);
--color-button-solid-secondary-background: var(--color-purple-50);
--color-button-solid-secondary-text: var(--color-primary);
--color-button-solid-secondary-icon: var(--color-primary);
--color-button-solid-tertiary-background: var(--color-gray-50);
--color-button-solid-tertiary-icon: var(--color-gray-500);
--color-button-solid-tertiary-text: var(--color-gray-500);
--color-button-solid-neutral-background: var(--color-gray-150);
--color-button-solid-neutral-icon: var(--color-text-primary);
--color-button-solid-neutral-text: var(--color-text-primary);
--color-button-solid-positive-background: var(--color-positive);
--color-button-solid-positive-icon: var(--color-on-positive);
--color-button-solid-positive-text: var(--color-on-positive);
--color-button-solid-warning-background: var(--color-warning);
--color-button-solid-warning-icon: var(--color-on-warning);
--color-button-solid-warning-text: var(--color-on-warning);
--color-button-solid-negative-background: var(--color-negative);
--color-button-solid-negative-icon: var(--color-on-negative);
--color-button-solid-negative-text: var(--color-on-negative);
/* Button Text */
--color-button-text-hover-background: #77777733;
--color-button-text-neutral-text: var(--color-gray-800);
--color-button-text-neutral-icon: var(--color-gray-800);
--color-button-text-negative-text: var(--color-negative);
--color-button-text-negative-icon: var(--color-negative);
--color-button-text-primary-text: var(--color-primary);
--color-button-text-primary-icon: var(--color-primary);
/* Carousel */
--color-carousel-dot-active: var(--color-primary);
--color-carousel-dot-disabled: var(--color-disabled-background);
/* Input */
--color-input-background: var(--color-surface);
--color-input-text: var(--color-on-surface);
/* Menu */
--color-menu-background: var(--color-surface-variant);
--color-menu-text: var(--color-on-surface);
--color-menu-border: var(--color-border);
/* Overlay, Dialog, Modal */
--color-overlay-background: var(--color-surface);
--color-overlay-text: var(--color-on-surface);
--color-overlay-shadow: #00000039;
/* ProgressIndicator */
--color-progress-indicator-fill: var(--color-primary);
--color-progress-indicator-background: var(--color-gray-300);
/* Property */
--color-property-title-background: var(--color-gray-100);
--color-property-title-text: var(--color-text-secondary);
/* Stepper Bar */
--color-stepperbar-dot-active: var(--color-primary);
--color-stepperbar-dot-normal: var(--color-purple-100);
--color-stepperbar-dot-disabled: var(--color-description);
/* Table */
--color-table-background: var(--color-surface);
--color-table-text: var(--color-on-surface);
--color-table-header-background: color-mix(in srgb, var(--color-blue-500) 15%, var(--color-surface));
--color-table-row-hover-background: color-mix(in srgb, var(--color-purple-500) 15%, var(--color-surface));
/* Tag */
--color-tag-dark-background: var(--color-gray-800);
--color-tag-dark-text: var(--color-gray-100);
--color-tag-dark-icon: var(--color-gray-100);
--color-tag-default-background: #50687C;
--color-tag-default-text: var(--color-gray-100);
--color-tag-default-icon: var(--color-gray-100);
--color-tag-green-background: #E2E9DB;
--color-tag-green-text: #7A977E;
--color-tag-green-icon: #7A977E;
--color-tag-yellow-background: #FEEACB;
--color-tag-yellow-text: #C79345;
--color-tag-yellow-icon: #C79345;
--color-tag-red-background: #FEE0DD;
--color-tag-red-text: #D67268;
--color-tag-red-icon: #D67268;
--color-tag-blue-background: var(--color-blue-50);
--color-tag-blue-text: var(--color-blue-800);
--color-tag-blue-icon: var(--color-blue-800);
--color-tag-pink-background: #CEA3B8;
--color-tag-pink-text: #CE75A0;
--color-tag-pink-icon: #CE75A0;
/* TextImage */
--color-text-image-primary-background: var(--color-primary);
--color-text-image-primary-text: var(--color-white);
--color-text-image-secondary-background: var(--color-blue-500);
--color-text-image-secondary-text: var(--color-white);
--color-text-image-dark-background: var(--color-blue-900);
--color-text-image-dark-text: var(--color-white);
/* Tooltip */
--color-tooltip-background: var(--color-menu-background);
--color-tooltip-text: var(--color-description);
/* Other */
--color-border: var(--color-gray-200);
--color-divider: var(--color-gray-100);
--color-focus: var(--color-purple-400);
--color-outline: var(--color-gray-100);
--color-outline-variant: var(--color-gray-200);
}
/* non light-theme overrides */
@layer base {
/* dark theme */
@variant dark {
/* Button Solid */
--color-button-solid-neutral-background: var(--color-gray-750);
--color-button-solid-neutral-icon: var(--color-gray-100);
--color-button-solid-neutral-text: var(--color-gray-100);
/* Button Text */
--color-button-text-hover-background: #3F3F3F33;
--color-button-text-neutral-text: var(--color-gray-100);
--color-button-text-neutral-icon: var(--color-gray-100);
/* Property */
--color-property-title-background: var(--color-gray-750);
/* ProgressIndicator */
--color-progress-indicator-background: var(--color-gray-700);
/* Overlay, Dialog, Modal */
--color-overlay-shadow: #00000060;
/* Tag */
--color-tag-dark-background: var(--color-gray-900);
/* Other */
--color-border: var(--color-gray-600);
--color-divider: var(--color-gray-700);
--color-focus: var(--color-purple-500);
--color-outline: var(--color-gray-700);
--color-outline-variant: var(--color-gray-600);
}
}