noph-ui/dist/themes/defaultTheme.css

Noph UI is a modern, powerful UI library for Svelte 5, fully aligned with the Material 3 guidelines. Build stunning, consistent user interfaces with the efficiency and flexibility of Svelte and Google’s Material Design framework.

:root {
	color-scheme: light dark;
	--np-color-background: light-dark(#f7fafe, #0b0f12);
	--np-color-error: light-dark(#bb1b1b, #ff7164);
	--np-color-error-container: light-dark(#fe4e44, #ac0c12);
	--np-color-inverse-on-surface: light-dark(#9a9da1, #515559);
	--np-color-inverse-primary: light-dark(#75ceff, #00668c);
	--np-color-inverse-surface: light-dark(#0b0f12, #f7fafe);
	--np-color-neutral-palette-key-color: light-dark(#73777b, #73777b);
	--np-color-neutral-variant-palette-key-color: light-dark(#6f787f, #6f787f);
	--np-color-on-background: light-dark(#2f3336, #e3e6ea);
	--np-color-on-error: light-dark(#fff7f6, #4a0002);
	--np-color-on-error-container: light-dark(#570003, #ffb8b0);
	--np-color-on-primary: light-dark(#f4f9ff, #00435d);
	--np-color-on-primary-container: light-dark(#00435d, #002637);
	--np-color-on-primary-fixed: light-dark(#002e41, #002e41);
	--np-color-on-primary-fixed-variant: light-dark(#004d6a, #004d6a);
	--np-color-on-secondary: light-dark(#f4f9ff, #254455);
	--np-color-on-secondary-container: light-dark(#375567, #a4c4d9);
	--np-color-on-secondary-fixed: light-dark(#244354, #244354);
	--np-color-on-secondary-fixed-variant: light-dark(#415f71, #415f71);
	--np-color-on-surface: light-dark(#2f3336, #e3e6ea);
	--np-color-on-surface-variant: light-dark(#5b5f63, #a8abaf);
	--np-color-on-tertiary: light-dark(#fff7fc, #623378);
	--np-color-on-tertiary-container: light-dark(#582a6e, #582a6e);
	--np-color-on-tertiary-fixed: light-dark(#421358, #421358);
	--np-color-on-tertiary-fixed-variant: light-dark(#623378, #623378);
	--np-color-outline: light-dark(#777b7f, #727679);
	--np-color-outline-variant: light-dark(#afb2b6, #44484c);
	--np-color-primary: light-dark(#00668c, #75ceff);
	--np-color-primary-container: light-dark(#75ceff, #4eaad9);
	--np-color-primary-fixed: light-dark(#75ceff, #75ceff);
	--np-color-primary-fixed-dim: light-dark(#66c0f0, #66c0f0);
	--np-color-primary-palette-key-color: light-dark(#0980ad, #0980ad);
	--np-color-scrim: light-dark(#000000, #000000);
	--np-color-secondary: light-dark(#456375, #abcbe0);
	--np-color-secondary-container: light-dark(#c7e7fd, #203f50);
	--np-color-secondary-fixed: light-dark(#c7e7fd, #c7e7fd);
	--np-color-secondary-fixed-dim: light-dark(#b9d9ee, #b9d9ee);
	--np-color-secondary-palette-key-color: light-dark(#5d7b8e, #5d7b8e);
	--np-color-shadow: light-dark(#000000, #000000);
	--np-color-surface: light-dark(#f7fafe, #0b0f12);
	--np-color-surface-bright: light-dark(#f7fafe, #282d30);
	--np-color-surface-container: light-dark(#ebeef2, #161a1d);
	--np-color-surface-container-high: light-dark(#e5e8ec, #1c2023);
	--np-color-surface-container-highest: light-dark(#e0e3e7, #222629);
	--np-color-surface-container-low: light-dark(#f1f4f8, #101417);
	--np-color-surface-container-lowest: light-dark(#ffffff, #000000);
	--np-color-surface-dim: light-dark(#d7dade, #0b0f12);
	--np-color-surface-tint: light-dark(#00668c, #75ceff);
	--np-color-surface-variant: light-dark(#e0e3e7, #222629);
	--np-color-tertiary: light-dark(#7c4b92, #efc2ff);
	--np-color-tertiary-container: light-dark(#e8affe, #e8affe);
	--np-color-tertiary-fixed: light-dark(#e8affe, #e8affe);
	--np-color-tertiary-fixed-dim: light-dark(#d9a2ef, #d9a2ef);
	--np-color-tertiary-palette-key-color: light-dark(#d29be8, #d29be8);
	--np-elevation-1:
		rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
		rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
	--np-elevation-2:
		rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px,
		rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
	--np-elevation-3:
		rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
		rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	--np-shape-corner-full: 9999px;
	--np-shape-corner-extra-small: 0.25rem;
	--np-shape-corner-small: 0.5rem;
	--np-shape-corner-medium: 0.75rem;
	--np-shape-corner-large: 1rem;
	--np-shape-corner-extra-large: 1.75rem;
	--np-shape-corner-none: 0;
}

[data-theme='light'] {
	color-scheme: light;
}

[data-theme='dark'] {
	color-scheme: dark;
}