@plone/components
Version:
ReactJS components for Plone
124 lines (117 loc) • 4.98 kB
CSS
@import '../quanta/colors.css';
/* color themes for dark and light modes, generated with Leonardo.
* Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
:root {
--background-color: #fff;
--gray-50: #ffffff;
--gray-100: #d0d0d0;
--gray-200: #afafaf;
--gray-300: #8f8f8f;
--gray-400: #717171;
--gray-500: #555555;
--gray-600: #393939;
--purple-100: #d5c9fa;
--purple-200: #b8a3f6;
--purple-300: #997cf2;
--purple-400: #7a54ef;
--purple-500: #582ddc;
--purple-600: #3c1e95;
--red-100: #f7c4ba;
--red-200: #f29887;
--red-300: #eb664d;
--red-400: #de2300;
--red-500: #a81b00;
--red-600: #731200;
--highlight-hover: rgb(0 0 0 / 0.07);
--highlight-pressed: rgb(0 0 0 / 0.15);
}
/* ShadCN slate theme */
:root {
--basic-50: #fff; /* was #f8fafc */
--basic-100: #f1f5f9;
--basic-200: #e2e8f0;
--basic-300: #cbd5e1;
--basic-400: #94a3b8;
--basic-500: #64748b;
--basic-600: #475569;
--basic-700: #334155;
--basic-800: #1e293b;
--basic-900: #0f172a;
--basic-950: #020617;
}
/* Semantic colors */
:root {
/* Text */
--text-color: var(--basic-950); /* --gray-600 */
--text-color-base: var(--basic-600); /* --gray-500 */
--text-color-hover: var(--basic-950); /* --gray-600 */
--text-color-disabled: var(--basic-500); /* --gray-200 */
--text-color-placeholder: var(--gray-400);
/* Link */
--link-color: var(--quanta-sapphire);
--link-color-secondary: var(--quanta-royal);
--link-color-pressed: var(--quanta-cobalt);
/* Border */
--border-color: var(--basic-400); /* --gray-300 */
--border-color-hover: var(--basic-500); /* --gray-400 */
--border-color-pressed: var(--basic-500); /* --gray-400 */
--border-color-disabled: var(--basic-300); /* --gray-100 */
/* Input */
--focus-ring-color: var(--basic-400); /* --purple-400 */
--field-background: var(--basic-50); /* --purple-400 */
--field-text-color: var(--basic-950); /* --purple-600 */
/* Button */
--button-background: var(--basic-50); /* --gray-50 */
--button-background-pressed: var(--background-color); /* --background-color */
--overlay-background: var(--basic-50); /* --gray-50 */
/* these colors are the same between light and dark themes
* to ensure contrast with the foreground color */
--highlight-background: var(--basic-600); /* #6f46ed purple-300 */
--highlight-background-pressed: var(--basic-800); /* #522acd purple-200 */
--highlight-background-invalid: var(
--quanta-candy
); /* red-300 from dark theme */
--highlight-background-hover: var(--basic-400); /* #6f46ed purple-300 */
--highlight-foreground: var(--basic-50); /* white */
--highlight-foreground-pressed: var(--basic-200); /* #ddd */
--highlight-overlay: var(--basic-400); /* rgb(from #6f46ed r g b / 15%) */
--color-invalid: var(--red-400); /* Renamed */
--color-pressed-invalid: var(--red-500); /* Renamed */
}
/* Layout properties */
:root {
--layout-container-width: 1440px;
--default-container-width: 940px;
--narrow-container-width: 620px;
}
/* Windows high contrast mode overrides */
@media (forced-colors: active) {
:root {
--background-color: Canvas;
--focus-ring-color: Highlight;
--text-color: ButtonText;
--text-color-base: ButtonText;
--text-color-hover: ButtonText;
--text-color-disabled: GrayText;
--text-color-placeholder: ButtonText;
--link-color: LinkText;
--link-color-secondary: LinkText;
--link-color-pressed: LinkText;
--border-color: ButtonBorder;
--border-color-hover: ButtonBorder;
--border-color-pressed: ButtonBorder;
--border-color-disabled: GrayText;
--field-background: Field;
--field-text-color: FieldText;
--overlay-background: Canvas;
--button-background: ButtonFace;
--button-background-pressed: ButtonFace;
--highlight-background: Highlight;
--highlight-background-pressed: Highlight;
--highlight-background-invalid: LinkText;
--highlight-foreground: HighlightText;
--highlight-foreground-pressed: HighlightText;
--color-invalid: LinkText;
--color-pressed-invalid: LinkText;
}
}