Add preview to showcase colors

Preview/m3.typ

@@ -0,0 +1,68 @@
+// Autogenerated using https://github.com/Az-21/typst-material-you
+// Version: 1.0.0
+
+#let m3light = (
+  primary: rgb("#2C5EA7"),
+  onPrimary: rgb("#FFFFFF"),
+  primaryContainer: rgb("#D7E3FF"),
+  onPrimaryContainer: rgb("#001B3F"),
+  secondary: rgb("#565E71"),
+  onSecondary: rgb("#FFFFFF"),
+  secondaryContainer: rgb("#DAE2F9"),
+  onSecondaryContainer: rgb("#131C2B"),
+  tertiary: rgb("#705574"),
+  onTertiary: rgb("#FFFFFF"),
+  tertiaryContainer: rgb("#FAD8FD"),
+  onTertiaryContainer: rgb("#29132E"),
+  error: rgb("#BA1A1A"),
+  errorContainer: rgb("#FFDAD6"),
+  onError: rgb("#FFFFFF"),
+  onErrorContainer: rgb("#410002"),
+  background: rgb("#FDFBFF"),
+  onBackground: rgb("#1A1B1F"),
+  surface: rgb("#FDFBFF"),
+  onSurface: rgb("#1A1B1F"),
+  surfaceVariant: rgb("#E0E2EC"),
+  onSurfaceVariant: rgb("#44474E"),
+  outline: rgb("#74777F"),
+  inverseOnSurface: rgb("#F2F0F4"),
+  inverseSurface: rgb("#2F3033"),
+  inversePrimary: rgb("#ABC7FF"),
+  shadow: rgb("#000000"),
+  surfaceTint: rgb("#2C5EA7"),
+  outlineVariant: rgb("#C4C6D0"),
+  scrim: rgb("#000000"),
+)
+
+#let m3dark = (
+  primary: rgb("#ABC7FF"),
+  onPrimary: rgb("#002F65"),
+  primaryContainer: rgb("#02458E"),
+  onPrimaryContainer: rgb("#D7E3FF"),
+  secondary: rgb("#BEC6DC"),
+  onSecondary: rgb("#283041"),
+  secondaryContainer: rgb("#3E4759"),
+  onSecondaryContainer: rgb("#DAE2F9"),
+  tertiary: rgb("#DDBCE0"),
+  onTertiary: rgb("#3F2844"),
+  tertiaryContainer: rgb("#573E5C"),
+  onTertiaryContainer: rgb("#FAD8FD"),
+  error: rgb("#FFB4AB"),
+  errorContainer: rgb("#93000A"),
+  onError: rgb("#690005"),
+  onErrorContainer: rgb("#FFDAD6"),
+  background: rgb("#1A1B1F"),
+  onBackground: rgb("#E3E2E6"),
+  surface: rgb("#1A1B1F"),
+  onSurface: rgb("#E3E2E6"),
+  surfaceVariant: rgb("#44474E"),
+  onSurfaceVariant: rgb("#C4C6D0"),
+  outline: rgb("#8E9099"),
+  inverseOnSurface: rgb("#1A1B1F"),
+  inverseSurface: rgb("#E3E2E6"),
+  inversePrimary: rgb("#2C5EA7"),
+  shadow: rgb("#000000"),
+  surfaceTint: rgb("#ABC7FF"),
+  outlineVariant: rgb("#44474E"),
+  scrim: rgb("#000000"),
+)

Preview/preview.typ

@@ -0,0 +1,75 @@
+#import "m3.typ": m3light, m3dark
+#set text(size: 12pt, font: "Georgia")
+
+#let m3box(color, name) = [
+  #box(width: 32pt, height: 32pt, fill: color, stroke: 2pt, radius: 2pt, baseline: 30%)
+  #h(8pt) #text(name)
+]
+
+= Color Preview
+== Light M3 Palette
+#table(
+  columns: (1fr, 1fr),
+  stroke: 0pt,
+
+  [#m3box(m3light.primary, "Primary")],
+  [#m3box(m3light.onPrimary, "On Primary")],
+  [#m3box(m3light.primaryContainer, "Primary Container")],
+  [#m3box(m3light.onPrimaryContainer, "On Primary Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3light.secondary, "Secondary")],
+  [#m3box(m3light.onSecondary, "On Secondary")],
+  [#m3box(m3light.secondaryContainer, "Secondary Container")],
+  [#m3box(m3light.onSecondaryContainer, "On Secondary Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3light.tertiary, "Tertiary")],
+  [#m3box(m3light.onTertiary, "On Tertiary")],
+  [#m3box(m3light.tertiaryContainer, "Tertiary Container")],
+  [#m3box(m3light.onTertiaryContainer, "On Tertiary Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3light.error, "Error")],
+  [#m3box(m3light.onError, "On Error")],
+  [#m3box(m3light.errorContainer, "Error Container")],
+  [#m3box(m3light.onErrorContainer, "On Error Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3light.background, "Background")],
+  [#m3box(m3light.onBackground, "On background")],
+)
+
+#pagebreak()
+== Dark M3 Palette
+#table(
+  columns: (1fr, 1fr),
+  stroke: 0pt,
+
+  [#m3box(m3dark.primary, "Primary")],
+  [#m3box(m3dark.onPrimary, "On Primary")],
+  [#m3box(m3dark.primaryContainer, "Primary Container")],
+  [#m3box(m3dark.onPrimaryContainer, "On Primary Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3dark.secondary, "Secondary")],
+  [#m3box(m3dark.onSecondary, "On Secondary")],
+  [#m3box(m3dark.secondaryContainer, "Secondary Container")],
+  [#m3box(m3dark.onSecondaryContainer, "On Secondary Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3dark.tertiary, "Tertiary")],
+  [#m3box(m3dark.onTertiary, "On Tertiary")],
+  [#m3box(m3dark.tertiaryContainer, "Tertiary Container")],
+  [#m3box(m3dark.onTertiaryContainer, "On Tertiary Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3dark.error, "Error")],
+  [#m3box(m3dark.onError, "On Error")],
+  [#m3box(m3dark.errorContainer, "Error Container")],
+  [#m3box(m3dark.onErrorContainer, "On Error Container")],
+
+  [#v(12pt)],[],
+  [#m3box(m3dark.background, "Background")],
+  [#m3box(m3dark.onBackground, "On background")],
+)