md3 but like more md3

NyaomiDEV · Aug 5, 2024 · 13c6a7d · 13c6a7d
1 parent e687884
commit 13c6a7d
Show file tree

Hide file tree

Showing 5 changed files with 277 additions and 214 deletions.
diff --git a/src/lib/theme/components.css b/src/lib/theme/components.css
@@ -11,19 +11,19 @@
 }
 
 .md.md3 ion-toolbar *[slot=start] {
-	color: var(--md3-shade-10);
+	color: rgb(var(--md3-light-on-surface));
 }
 
 .ion-palette-dark.md.md3 ion-toolbar *[slot=start] {
-	color: var(--md3-shade-90);
+	color: rgb(var(--md3-dark-on-surface));
 }
 
 .md.md3 ion-toolbar *[slot=end] {
-	color: var(--md3-shade-30);
+	color: rgb(var(--md3-light-on-surface-variant));
 }
 
 .ion-palette-dark.md.md3 ion-toolbar *[slot=end] {
-	color: var(--md3-shade-80);
+	color: rgb(var(--md3-dark-on-surface-variant));
 }
 
 .md.md3 ion-header {
@@ -149,52 +149,52 @@
 .md.md3 ion-tab-bar ion-tab-button ion-icon {
 	font-size: 24px;
 	margin: 0 0 4px;
-	padding: 4px 20px;
+	padding: 4px 4px;
 	border-radius: 16px;
-	transition: background-color .2s ease-in-out;
 }
 
 .md.md3 ion-tab-bar ion-tab-button ion-label {
 	margin: 0;
 }
 
 .md.md3 ion-tab-bar {
-	--background: rgb(var(--md3-shade-94));
-	--color: rgb(var(--md3-shade-10));
+	--color: rgb(var(--md3-light-on-surface));
 	--border: none;
 	height: 80px;
 }
 
 .ion-palette-dark.md.md3 ion-tab-bar {
-	--background: rgb(var(--md3-shade-12));
-	--color: rgb(var(--md3-shade-90));
+	--color: rgb(var(--md3-dark-on-surface));
 }
 
 .md.md3 ion-tab-bar ion-tab-button {
 	--padding-top: 12px;
 	--padding-bottom: 16px;
 	--ripple-color: transparent;
-	--color: rgb(var(--md3-shade-30));
+	--color: rgb(var(--md3-light-on-surface-variant));
 }
 
 .ion-palette-dark.md.md3 ion-tab-bar ion-tab-button {
-	--color: rgb(var(--md3-shade-80));
+	--color: rgb(var(--md3-dark-on-surface-variant));
 }
 
 .md.md3 ion-tab-bar ion-tab-button.tab-selected {
-	--color: rgb(var(--md3-shade-10));
+	--color: rgb(var(--md3-light-on-surface));
 }
 
 .ion-palette-dark.md.md3 ion-tab-bar ion-tab-button.tab-selected {
-	--color: rgb(var(--md3-shade-90));
+	--color: rgb(var(--md3-dark-on-surface));
 }
 
 .md.md3 ion-tab-bar ion-tab-button.tab-selected ion-icon {
-	background: rgb(var(--md3-shade-90));
+	padding: 4px 20px;
+	transition: background-color .2s ease-in-out,
+		padding .2s ease-in-out;
+	background: rgb(var(--md3-light-secondary-container));
 }
 
 .ion-palette-dark.md.md3 ion-tab-bar ion-tab-button.tab-selected ion-icon {
-	background: rgb(var(--md3-shade-30));
+	background: rgb(var(--md3-dark-secondary-container));
 }
 
 /* Modal handle */
@@ -207,3 +207,13 @@
 	--border-radius: 32px;
 	--box-shadow: unset;
 }
+
+/* List */
+.md.md3 ion-list {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.md.md3 ion-list ion-item ion-icon[slot="start"] {
+	margin-inline-end: 24px;
+}
diff --git a/src/lib/theme/index.ts b/src/lib/theme/index.ts
@@ -1,6 +1,63 @@
-import { argbFromHex, blueFromArgb, greenFromArgb, redFromArgb, themeFromSourceColor } from "@material/material-color-utilities";
+import { argbFromHex, blueFromArgb, DynamicColor, greenFromArgb, Hct, MaterialDynamicColors, redFromArgb, SchemeTonalSpot, themeFromSourceColor } from "@material/material-color-utilities";
 import { accessibilityConfig } from "../config";
 
+const dynamicColorsWeWant = [
+	"primaryPaletteKeyColor",
+    "secondaryPaletteKeyColor",
+    "tertiaryPaletteKeyColor",
+    "neutralPaletteKeyColor",
+    "neutralVariantPaletteKeyColor",
+    "background",
+    "onBackground",
+    "surface",
+    "surfaceDim",
+    "surfaceBright",
+    "surfaceContainerLowest",
+    "surfaceContainerLow",
+    "surfaceContainer",
+    "surfaceContainerHigh",
+    "surfaceContainerHighest",
+    "onSurface",
+    "surfaceVariant",
+    "onSurfaceVariant",
+    "inverseSurface",
+    "inverseOnSurface",
+    "outline",
+    "outlineVariant",
+    "shadow",
+    "scrim",
+    "surfaceTint",
+    "primary",
+    "onPrimary",
+    "primaryContainer",
+    "onPrimaryContainer",
+    "inversePrimary",
+    "secondary",
+    "onSecondary",
+    "secondaryContainer",
+    "onSecondaryContainer",
+    "tertiary",
+    "onTertiary",
+    "tertiaryContainer",
+    "onTertiaryContainer",
+    "error",
+    "onError",
+    "errorContainer",
+    "onErrorContainer",
+    "primaryFixed",
+    "primaryFixedDim",
+    "onPrimaryFixed",
+    "onPrimaryFixedVariant",
+    "secondaryFixed",
+    "secondaryFixedDim",
+    "onSecondaryFixed",
+    "onSecondaryFixedVariant",
+    "tertiaryFixed",
+    "tertiaryFixedDim",
+    "onTertiaryFixed",
+    "onTertiaryFixedVariant",
+];
+
 function rgbFromArgb(argb: number){
 	return [
 		redFromArgb(argb),
@@ -35,41 +92,49 @@ export function unsetMaterialColors(target?: HTMLElement){
 
 export function addMaterialColors(hex: string, target?: HTMLElement){
 	// Generate new theme
-	const theme = themeFromSourceColor(argbFromHex(hex));
-
-	console.log(theme);
-
-	for (const [key, value] of Object.entries(theme.schemes.dark.toJSON())) {
-		const token = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-		const color = rgbFromArgb(value);
-		(target ?? document.documentElement).style.setProperty(`--md3-dark-${token}`, color);
-	}
+	const tonalSpotLight = new SchemeTonalSpot(Hct.fromInt(argbFromHex(hex)), false, 0);
+	const tonalSpotDark = new SchemeTonalSpot(Hct.fromInt(argbFromHex(hex)), true, 0);
 
-	for (const [key, value] of Object.entries(theme.schemes.light.toJSON())) {
+	for (const key of dynamicColorsWeWant) {
 		const token = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-		const color = rgbFromArgb(value);
+		const color = rgbFromArgb((MaterialDynamicColors[key] as DynamicColor).getArgb(tonalSpotLight));
 		(target ?? document.documentElement).style.setProperty(`--md3-light-${token}`, color);
 	}
 
-	const extraTones = [99, 98, 96, 94, 92, 91, 17, 12, 11, 6, 4];
-
-	for (let i = 0; i <= 100; i += 5) {
-		const color = rgbFromArgb(theme.palettes.neutral.tone(i));
-		(target ?? document.documentElement).style.setProperty(`--md3-shade-${i}`, color);
-	}
-
-	for (const i of extraTones){
-		const color = rgbFromArgb(theme.palettes.neutral.tone(i));
-		(target ?? document.documentElement).style.setProperty(`--md3-shade-${i}`, color);
+	for (const key of dynamicColorsWeWant) {
+		const token = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+		const color = rgbFromArgb((MaterialDynamicColors[key] as DynamicColor).getArgb(tonalSpotDark));
+		(target ?? document.documentElement).style.setProperty(`--md3-dark-${token}`, color);
 	}
 
-	for (let i = 0; i <= 100; i += 5) {
-		const color = rgbFromArgb(theme.palettes.neutralVariant.tone(i));
-		(target ?? document.documentElement).style.setProperty(`--md3-shade-variant-${i}`, color);
-	}
+	const tones: number[] = [];
+	for(let i = 0; i <= 100; i++) tones.push(i);
+	tones.push(99, 98, 96, 94, 92, 91, 17, 12, 11, 6, 4);
 
-	for (const i of extraTones) {
-		const color = rgbFromArgb(theme.palettes.neutralVariant.tone(i));
-		(target ?? document.documentElement).style.setProperty(`--md3-shade-variant-${i}`, color);
+	for (const i of tones){
+		(target ?? document.documentElement).style.setProperty(
+			`--md3-primary-palette-tone-${i}`,
+			rgbFromArgb(tonalSpotLight.primaryPalette.tone(i))
+		);
+		(target ?? document.documentElement).style.setProperty(
+			`--md3-secondary-palette-tone-${i}`,
+			rgbFromArgb(tonalSpotLight.secondaryPalette.tone(i))
+		);
+		(target ?? document.documentElement).style.setProperty(
+			`--md3-tertiary-palette-tone-${i}`,
+			rgbFromArgb(tonalSpotLight.tertiaryPalette.tone(i))
+		);
+		(target ?? document.documentElement).style.setProperty(
+			`--md3-neutral-palette-tone-${i}`,
+			rgbFromArgb(tonalSpotLight.neutralPalette.tone(i))
+		);
+		(target ?? document.documentElement).style.setProperty(
+			`--md3-neutral-variant-palette-tone-${i}`,
+			rgbFromArgb(tonalSpotLight.neutralVariantPalette.tone(i))
+		);
+		(target ?? document.documentElement).style.setProperty(
+			`--md3-error-palette-tone-${i}`,
+			rgbFromArgb(tonalSpotLight.errorPalette.tone(i))
+		);
 	}
 }