@harvest-profit/npk
Version:
NPK UI Design System
187 lines (158 loc) • 6.53 kB
CSS
/* color theme */
:root {
--color-green: #3f9142;
/*--color-green: #3C853C; enable this for AA contrast approval */
--color-green-90: #e9f5ea;
--color-green-80: #cae7cb;
--color-green-70: #a8d8aa;
--color-green--hover: #3C8A3F;
--color-green--active: #37803A;
--color-green--disabled: #77BA7A;
--color-orange: #F4801F;
--color-red: #d63b49;
/*--color-red: #CD2D3C; enable this for AA contrast approval */
--color-brown: #8C602C;
--color-blue: #1470e1;
--color-purple: #960eeb;
--color-neutral-100: white;
--color-neutral-99: #fefefe;
--color-neutral-98: #fbfcfc;
--color-neutral-95: #f3f4f5;
--color-neutral-92: #EEEFF0;
--color-neutral-90: #e5e7ea;
--color-neutral-85: #dee0e2;
--color-neutral-80: #c9ced3;
--color-neutral-70: #adb4bc;
--color-neutral-60: #919ba5;
--color-neutral-50: #74818e;
--color-neutral-40: #5d6873;
--color-neutral-35: #525b65;
--color-neutral-30: #464e57;
--color-neutral-25: #3b4248;
--color-neutral-20: #2f353a;
--color-neutral-15: #24282c;
--color-neutral-10: #191b1e;
--color-neutral-5: #0d0f10;
--color-neutral-0: #020202;
}
:root {
--body-bg-color: var(--color-neutral-95);
--body-fg-color: var(--color-neutral-20);
--primary-bg-color: var(--color-green);
--primary-fg-color: white;
--color-fg-muted: var(--color-neutral-35);
--color-fg-danger: var(--color-red);
--warning-bg-color: #fceca2;
--warning-fg-color: #776618;
--border-highlight-color: #000000;
--placeholder-color: #000000;
--tooltip-bg-color: var(--color-neutral-20);
--tooltip-fg-color: var(--color-neutral-95);
--menu-bg-color: var(--color-neutral-100);
--menu-fg-color: var(--color-neutral-10);
--menu-option-divider-color: var(--color-neutral-90);
--menu-border-color: var(--color-neutral-90);
--menu-section-bg-color: var(--color-neutral-92);
--menu-list-height: 350px;
--menu-min-width: 200px;
--menu-select-min-width: 225px;
--menu-menu-min-width: 150px;
}
/* Sizes */
:root {
--size-3: 0.1875rem;
--size-4: 0.25rem;
--size-6: 0.375rem;
--size-8: 0.5rem;
--size-10: 0.625rem;
--size-12: 0.75rem;
--size-13: 0.8125rem;
--size-14: 0.875rem;
--size-16: 1rem;
--size-18: 1.125rem;
--size-20: 1.25rem;
--container-radius: var(--size-8);
--shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f
}
/* controls (buttons, inputs, etc) */
:root {
--control-bg-color: var(--color-neutral-92);
--control-bg-color--hover: var(--color-neutral-90);
--control-bg-color--active: var(--color-neutral-85);
--control-bg-color--disabled: var(--color-neutral-85);
--control-fg-color--placeholder: var(--color-neutral-60);
--control-fg-color--placeholder--active: var(--color-neutral-50);
--control-fg-color--disabled: var(--color-neutral-40);
--control-fg-color: var(--color-neutral-10);
--control-focus-color: var(--color-green);
--control-focus-bg-color: var(--color-neutral-100);
/* If a control has been activated */
--control-bg-color--active-element: var(--color-green);
--control-fg-color--active-element: var(--color-neutral-100);
/* If a control is in an emphasis state (like a selected date range) or a table row */
--control-variant-emphasis-bg-color: var(--color-green-90);
--control-variant-emphasis-bg-color--hover: var(--color-green-80);
--control-variant-emphasis-bg-color--active: var(--color-green-70);
--control-variant-emphasis-fg-color: var(--color-neutral-10);
/* If a control is in an muted state (like a disabled date range) or a table row */
--control-variant-muted-bg-color: var(--color-neutral-90);
--control-variant-muted-bg-color--hover: var(--color-neutral-85);
--control-variant-muted-bg-color--active: var(--color-neutral-80);
--control-variant-muted-fg-color: var(--color-neutral-10);
--control-on-surface-bg-color: var(--color-neutral-95);
--control-on-surface-bg-color--hover: var(--color-neutral-92);
--control-on-surface-bg-color--active: var(--color-neutral-90);
--control-on-surface-bg-color--disabled: var(--color-neutral-85);
--control-icon-color: var(--color-fg-muted);
--badge-size: 1.25rem;
--badge-lg-size: 1.75rem;
--control-small-size: 1.75rem;
--control-size: 2rem;
--control-large-size: 2.5rem;
--control-radius: var(--size-6);
--control-segment-radius: var(--size-3);
--control-small-gap: var(--size-4);
--control-gap: var(--size-8);
--control-small-font-size: var(--size-12);
--control-font-size: var(--size-14);
--control-small-padding: var(--size-8);
--control-padding: var(--size-12);
--control-button-unweighted: 400;
--control-button-weight: 600;
--control-button-heavy: 700;
--control-label-font-size: var(--size-14);
--control-label-weight: 700;
--control-border-color: #00000022;
--control-border-color--disabled: #00000011;
--control-surface-color: #00000010;
--control-inset-shadow-color: #1f23280a;
--control-dark-border-color: var(--color-neutral-60);
--button-danger-fg-color: var(--color-red);
--button-primary-fg-color: white;
--button-primary-bg-color: var(--color-green);
--button-primary-bg-color--hover: var(--color-green--hover);
--button-primary-bg-color--active: var(--color-green--active);
--button-primary-bg-color--disabled: var(--color-green--disabled);
--button-invisible-bg-color--hover: #0000000A;
--button-invisible-bg-color--active: #00000015;
--button-invisible-bg-color--disabled: #14070719;
--button-white-bg-color: white;
--button-white-bg-color--hover: var(--color-neutral-98);
--button-white-bg-color--active: var(--color-neutral-95);
--button-white-bg-color--disabled: #f3f4f5aa;
--card-radius: var(--size-10);
--card-variant-normal-border-color: var(--color-neutral-90);
--card-variant-normal-bg: var(--color-neutral-100);
--card-variant-muted-bg: var(--color-neutral-90);
--card-variant-muted-border-color: var(--color-neutral-80);
--card-section-variant-muted-bg: var(--color-neutral-95);
--nav-control-size: 2.25rem;
--nav-underline-active-size: 5px;
--nav-border-color: #00000011;
--nav-active-indicator-color: var(--color-orange);
--nav-control-bg-color--active: var(--color-neutral-95);
--nav-control-bg-color-primary-variant--active: var(--color-neutral-20);
--nav-control-bg-color-primary-variant--hover: var(--color-neutral-25);
--nav-control-chip-bg-color-primary-variant--active: var(--color-neutral-30);
--nav-control-fg-color-primary-variant--active: var(--color-neutral-98);
}