Commits

app/astro.config.ts

@@ -50,13 +50,10 @@ export default defineConfig({
       themeCssSelector: (theme, context) =>
         `[data-code-theme="${theme.name}"]`,
       styleOverrides: {
-        borderRadius: "12px",
-        frames: {
-          editorTabsMarginInlineStart: "16px",
-          editorTabBorderRadius: "0",
-        },
-        codeFontFamily: `"Fira Code Variable", monospace`,
-        codeFontSize: `var(--text-body-large-size)`,
+        codeFontFamily: `"Fira Code Variable"`,
+        codeFontSize: `var(--text-body-medium-size)`,
+        uiFontFamily: "var(--text-body-medium-family)",
+        uiFontSize: "var(--text-body-medium-size)"
       },
       defaultProps: {
         showLineNumbers: false,

app/src/components/aside/Aside.astro

@@ -77,10 +77,15 @@ const Icon = ICONS[variant];
     &.note .content {
       color: var(--color-on-secondary-container);
     }
-
-    /* &.tip {
-      background-color: ;
-    } */
+    &.tip {
+      background-color: var(--color-success-container);
+    }
+    &.tip .title {
+      color: var(--color-success);
+    }
+    &.tip .content {
+      color: var(--color-on-success-container);
+    }
 
     &.important {
       background-color: var(--color-primary-container);
@@ -91,6 +96,15 @@ const Icon = ICONS[variant];
     &.important .content {
       color: var(--color-on-primary-container);
     }
+    &.warning {
+      background-color: var(--color-warning-container);
+    }
+    &.warning .title {
+      color: var(--color-warning);
+    }
+    &.warning .content {
+      color: var(--color-on-warning-container);
+    }
 
     &.caution {
       background-color: var(--color-error-container);

app/src/components/drawer/navigation-drawer.css.ts

@@ -1,6 +1,6 @@
 import { keyframes, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
-import { THEME } from "../../styles/theme/theme.css";
+import { THEME } from "../../styles/theme";
 import { splashTheme } from "@material/solid/components/splash";
 
 const OPEN_DURATION = "600ms";

app/src/components/header/Header.astro

@@ -138,7 +138,8 @@ interface Props {}
     background-color: var(--color-surface);
     transition: background-color 300ms var(--easing-standard);
 
-    z-index: 1;
+    z-index: 9999;
+    isolation: isolate
   }
 
   .leading {

app/src/components/markdown/Markdown.astro

@@ -134,20 +134,19 @@
     background-color: var(--sl-color-bg-inline-code);
     margin-block: -0.125rem;
     padding: 0.125rem 0.375rem;
-    font-size: var(--sl-text-code-sm);
-  }
-  .markdown code {
-    letter-spacing: 0;
   }
 
   .markdown pre {
     tab-size: 2;
   }
 
-  /* .markdown pre {
+  .markdown pre {
     all: unset;
-    font-family: var(--__sl-font-mono);
-  } */
+  }
+
+  .markdown code {
+    letter-spacing: 0;
+  }
 
   .markdown blockquote:not(:where(.not-content *)) {
     border-inline-start: 1px solid var(--sl-color-gray-5);

app/src/components/theme/theme-select.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { THEME } from "../../styles/theme/theme.css";
+import { THEME } from "../../styles/theme";
 import { splashTheme } from "@material/solid/components/splash";
 import { recipe } from "@vanilla-extract/recipes";
 

app/src/content/blog/astro-pagefind.mdx → app/src/content/blog/astro-pagefind-solidjs.mdx

@@ -1,11 +1,11 @@
 ---
-title: Integrating Pagefind into Astro with SolidJS
+title: Astro + Pagefind + Solid = 🤯
 authors:
   - id: deminearchiver
     name: deminearchiver
     avatar:
       src: ../../assets/images/avatars/deminearchiver.png
-createdAt: 2024-05-18
+createdAt: 2024-05-18 # Don't change! It's an actual creation date!
 ---
 
 import { Aside } from "../../components/aside";

app/src/layouts/Page.astro

@@ -2,7 +2,7 @@
 import { ViewTransitions } from "astro:transitions";
 import { Head } from "../components/head";
 
-import "../styles/theme/theme.css";
+import "../styles/theme/global.css";
 import "../styles/reset.css";
 import "normalize.css";
 

app/src/styles/reset.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle } from "@vanilla-extract/css";
-import { THEME } from "./theme/theme.css";
+import { THEME } from "./theme";
 
 globalStyle(
   `:root[data-theme="light"]`,

app/src/styles/theme/astro.css.ts

@@ -1,5 +1,5 @@
 import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
-import { THEME } from "./theme.css";
+import { THEME } from ".";
 
 type Theme = {
   [key: string]: string | Theme;

app/src/styles/theme/contract.css.ts

@@ -0,0 +1,47 @@
+import { globalStyle, createGlobalTheme, assignVars } from "@vanilla-extract/css";
+import { createMaterialTheme } from "@material/solid/theme";
+import { Hct } from "@material/material-color-utilities";
+import { test } from "./astro.css";
+
+const { contract, dark, light } = createMaterialTheme({
+  color: {
+    seed: Hct.fromInt(0xFF7D73FE),
+    custom: [
+      "success",
+      "warning",
+    ]
+  }
+});
+
+export const THEME = contract();
+
+/* Color seeds I used in Material Theme Builder */
+const SUCCESS_SEED = "#008425";
+const WARNING_SEED = "#D9B229";
+
+export const LIGHT_THEME = light({
+  successPaletteKeyColor: SUCCESS_SEED,
+  success: "#3b693a",
+  onSuccess: "#ffffff",
+  successContainer: "#bcf0b4",
+  onSuccessContainer: "#002204",
+
+  warningPaletteKeyColor: WARNING_SEED,
+  warning: "#725c0c",
+  onWarning: "#ffffff",
+  warningContainer: "#ffe086",
+  onWarningContainer: "#231b00",
+});
+export const DARK_THEME = dark({
+  successPaletteKeyColor: SUCCESS_SEED,
+  success: "#a1d39a",
+  onSuccess: "#09390f",
+  successContainer: "#235024",
+  onSuccessContainer: "#bcf0b4",
+
+  warningPaletteKeyColor: WARNING_SEED,
+  warning: "#e1c46d",
+  onWarning: "#3c2f00",
+  warningContainer: "#574500",
+  onWarningContainer: "#ffe086",
+});

app/src/styles/theme/theme.css.ts → app/src/styles/theme/global.css.ts

@@ -1,18 +1,7 @@
-import { globalStyle, createGlobalTheme, assignVars } from "@vanilla-extract/css";
-import { createMaterialTheme } from "@material/solid/theme";
-import { Hct } from "@material/material-color-utilities";
+import { assignVars, createGlobalTheme, globalStyle } from "@vanilla-extract/css";
+import { DARK_THEME, LIGHT_THEME, THEME } from ".";
 import { test } from "./astro.css";
 
-const { contract, dark, light } = createMaterialTheme({
-  color: {
-    seed: Hct.fromInt(0xFF7D73FE),
-  }
-});
-
-export const THEME = contract();
-export const LIGHT_THEME = light();
-export const DARK_THEME = dark();
-
 const createSelector = (theme: "light" | "dark"): string => {
   return `:root[data-theme="${theme}"], [data-theme="${theme}"] ::backdrop`;
 }
@@ -48,4 +37,4 @@ globalStyle(
   {
     vars: test(THEME),
   }
-)
+);

app/src/styles/theme/index.ts

@@ -0,0 +1 @@
+export * from "./contract.css";

packages/material/solid/package.json

@@ -13,6 +13,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
+    "@deminearchiver/utils": "workspace:^",
     "@material/material-color-utilities": "workspace:^",
     "@solid-primitives/event-listener": "^2.3.3",
     "@solid-primitives/media": "^2.2.9",

packages/material/solid/theme/index.ts

@@ -5,96 +5,73 @@ import { THEME } from "./contract.css";
 import { emphasizedAccurate } from "./emphasized";
 import { DEFAULT_DURATION, DEFAULT_EASING } from "./default/motion";
 import { DEFAULT_TYPOGRAPHY } from "./default/typography";
+import { capitalize } from "@deminearchiver/utils";
+import type { CSSVarFunction, MapLeafNodes } from "./utils";
 
+type Prefix<T extends string, S extends string> = `${S}${T}`;
+type Suffix<T extends string, S extends string> = `${T}${S}`;
 
+type On<T extends string> = `on${Capitalize<T>}`;
+type Container<T extends string> = `${T}Container`;
+type OnContainer<T extends string> = `on${Capitalize<T>}Container`;
 
-export interface CreateMaterialThemeOptions<CustomColors extends Record<string, string> = {}> {
+type ColorRoles<Roles extends string[], T> =
+& {
+  [P in Roles[number] as `${P}PaletteKeyColor`]: T;
+}
+& {
+  [P in Roles[number]]: T;
+}
+& {
+  [P in Roles[number] as On<P & string>]: T;
+}
+& {
+  [P in Roles[number] as Container<P & string>]: T;
+}
+& {
+  [P in Roles[number] as OnContainer<P & string>]: T;
+}
+
+export interface CreateMaterialThemeOptions<CustomColors extends string[]> {
   color: {
     seed: Hct;
     custom?: CustomColors;
   }
 }
 
-type MaterialThemeContract = {
-}
-
-/**
- * @example
- * ```ts
- * // theme.ts
- * export const THEME = createMaterialTheme(...);
- *
- * // theme.css.ts
- * import { THEME } from "./theme";
- *
- * export const theme = Theme.contract();
- * ```
- */
-type MaterialThemeFactory = {
-  contract: () => MaterialThemeContract;
-  light: () => MaterialThemeContract;
-  dark: () => MaterialThemeContract;
-}
 
-/**
- * Creates a new {@link MaterialThemeFactory}.
- * @example
- * ```ts
- * // theme.ts
- * import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
- * import { createMaterialTheme, Hct } from "@material/solid/theme";
- *
- * const source = Hct.fromInt(0xFFFF0000);
- * const THEME = createMaterialTheme(source);
- *
- * export const theme = THEME.contract();
- *
- * export const LIGHT_THEME = THEME.light();
- * export const DARK_THEME = THEME.dark();
- *
- * createGlobalTheme(
- *   `:root[data-theme="light"], [data-theme="light"] ::backdrop`,
- *   LIGHT_THEME,
- * );
- * createGlobalTheme(
- *   `:root[data-theme="dark"], [data-theme="dark"] ::backdrop`,
- *   DARK_THEME,
- * );
- *
- * globalStyle(
- *   `
-*    :root:not([data-theme="light"]):not([data-theme="dark"]),
-*    :not([data-theme="light"]):not([data-theme="dark"]) ::backdrop
- *   `,
- *   {
- *     "@media": {
- *       "(prefers-color-scheme: light)": {
- *         vars: LIGHT_THEME,
- *       },
- *       "(prefers-color-scheme: dark)": {
- *         vars: DARK_THEME,
- *       },
- *     },
- *   },
- * );
- * ```
- */
-export const createMaterialTheme = <CustomColors extends Record<string, string> = {}>(options: CreateMaterialThemeOptions<CustomColors>) => {
+export const createMaterialTheme = <const CustomColors extends string[]>(options: CreateMaterialThemeOptions<CustomColors>) => {
   const lightScheme = new SchemeTonalSpot(options.color.seed, false, 0);
   const darkScheme = new SchemeTonalSpot(options.color.seed, true, 0);
 
   const factory = (scheme: DynamicScheme) => {
-    return () => {
+    return (customColors?: ColorRoles<CustomColors, string>) => {
       const defaultColors = schemeToColors(scheme);
-      return {
-        color: defaultColors,
+      const data = {
+        color: {
+          ...defaultColors,
+          ...customColors as ColorRoles<CustomColors, string>,
+        },
         easing: DEFAULT_EASING,
         duration: DEFAULT_DURATION,
         text: DEFAULT_TYPOGRAPHY,
-      };
+      } as const;
+      return data;
     };
   }
 
+  const customContract = Object.fromEntries(
+    (options.color.custom ?? [])
+      .flatMap(key => [
+        `${key}PaletteKeyColor`,
+        key,
+        `on${capitalize(key)}`,
+        `${key}Container`,
+        `on${capitalize(key)}Container`,
+      ])
+      .map(key => [key, ""]),
+  ) as ColorRoles<CustomColors, CSSVarFunction>;
+
   return {
     contract: (options: ContractOptions = { global: false }) => {
       if(options.global) {
@@ -103,6 +80,7 @@ export const createMaterialTheme = <CustomColors extends Record<string, string>
       return {
         color: {
           ...THEME.color,
+          ...createThemeContract(customContract),
         },
         easing: {
           ...THEME.easing,

packages/material/solid/utils/index.ts

@@ -1 +1,3 @@
 export * from "./breakpoint";
+
+

yarn.lock

@@ -2011,6 +2011,7 @@ __metadata:
   resolution: "@material/solid@workspace:packages/material/solid"
   dependencies:
     "@deminearchiver/configs": "workspace:^"
+    "@deminearchiver/utils": "workspace:^"
     "@material/material-color-utilities": "workspace:^"
     "@solid-primitives/event-listener": "npm:^2.3.3"
     "@solid-primitives/media": "npm:^2.2.9"