Add new card types and structured theme

xypnox · Feb 14, 2024 · 1cae651 · 1cae651
1 parent bcd55e8
commit 1cae651
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 63 deletions.
diff --git a/src/components/themeManager/editor.tsx b/src/components/themeManager/editor.tsx
@@ -1,7 +1,7 @@
 import { Show, createSignal, type ParentProps, createEffect, For, on, type Accessor, onMount, onCleanup, createMemo } from "solid-js";
 import { themeState } from "./themeState";
 import { styled } from "solid-styled-components";
-import { theme, type CardType, type ThemePalette } from "../../theme";
+import { theme, type CardType, type ThemePalette, CardTypes } from "../../theme";
 import { icons } from "../icons";
 import "@melloware/coloris/dist/coloris.css";
 import Coloris from "@melloware/coloris";
@@ -204,8 +204,6 @@ const SelectedFamilies = [
   'Vollkorn',
 ]
 
-const CardTypeOptions: CardType[] = ['gradient', 'solid', 'transparent']
-
 const Swatch = styled('div')`
   width: 1.25rem;
   height: 1.25rem;
@@ -355,11 +353,10 @@ export const ThemeEditor = (props: { closeEditor: () => void }) => {
         </div>
         <Input
           type="text"
-          value={themeState.theme().name}
-          disabled={themeState.theme().id.startsWith('default')}
+          value={themePalette().name}
           onInput={(e) =>
-            themeState.modifyTheme(themeState.theme().id, {
-              ...themeState.themePalette(),
+            setThemePalette({
+              ...themePalette(),
               name: e.currentTarget.value
             })
           }
@@ -404,29 +401,24 @@ export const ThemeEditor = (props: { closeEditor: () => void }) => {
         open={sectionCollapses().typography}
         toggleSection={() => toggleSection('typography')}
       >
-        <Label>
-          <Row>
-            Font Family<a href="https://fonts.google.com/" target="_blank"> Browse All <iconify-icon icon={icons.external} /></a>
-          </Row>
-          <DropSelect
-            label="Font Family"
-            value={themePalette().base.font.family}
-            options={SelectedFamilies.map((family: string) => ({ label: family, value: family }))}
-            onChange={(value) => {
-              if (!value) { return }
-              // console.log('Font Select onchange', { value })
-              updateFontLink(value)
-            }}
-            Footer={() => (
-              <Row>
-                <a href="https://fonts.google.com/" target="_blank">
-                  Browse All
-                  <iconify-icon icon={icons.external} />
-                </a>
-              </Row>
-            )}
-          />
-        </Label>
+        <DropSelect
+          label="Font Family"
+          value={themePalette().base.font.family}
+          options={SelectedFamilies.map((family: string) => ({ label: family, value: family }))}
+          onChange={(value) => {
+            if (!value) { return }
+            // console.log('Font Select onchange', { value })
+            updateFontLink(value)
+          }}
+          Footer={() => (
+            <Row>
+              <a href="https://fonts.google.com/" target="_blank">
+                Browse All
+                <iconify-icon icon={icons.external} />
+              </a>
+            </Row>
+          )}
+        />
       </ToggleSection>
 
       <ToggleSection
@@ -455,7 +447,7 @@ export const ThemeEditor = (props: { closeEditor: () => void }) => {
           label="Card Type"
           value={themePalette().card as string}
           onlyFromOptions
-          options={CardTypeOptions.map((type: string) => ({ label: type, value: type }))}
+          options={CardTypes.map((type: CardType) => ({ label: capitalize(type), value: type }))}
           onChange={(value) => {
             setThemePalette({
               ...themePalette(),

diff --git a/src/components/themeManager/guide.mdx b/src/components/themeManager/guide.mdx
@@ -61,8 +61,9 @@ You can browse all fonts at [Google Fonts](https://fonts.google.com/)
 ## Default Themes
 
 - Aster
-- Brutalist
+- Structured
 - Royal Decree
+- Brutalist
 
 > Note: default themes cannot be edited/removed, create a new theme to edit them
 

diff --git a/src/components/themeManager/themeStateDef.ts b/src/components/themeManager/themeStateDef.ts
@@ -152,6 +152,10 @@ export const createThemeState = (initTheme?: 'default_aster' | 'default_brutalis
     themesData.set(themes);
   }
 
+  /*
+   * This is the processed theme mode.
+   * If the mode is auto, it will be updated based on user preference
+   */
   const [themeMode, setThemeMode] = createSignal(initMode === 'auto' ? getUserPreferenceMode() : initMode ?? 'light');
 
   createEffect((): 'light' | 'dark' => {

diff --git a/src/pages/blag/posts/[...slug].astro b/src/pages/blag/posts/[...slug].astro
@@ -246,6 +246,9 @@ const dateFormatOption = {
       max-width: 800px;
       position: relative;
     }
+    .content {
+      font-size: 1rem;
+    }
   }
 
   @media (max-width: 390px) {

diff --git a/src/theme.ts b/src/theme.ts
@@ -54,14 +54,16 @@ const joinVariables = (vars: Record<string, any>) =>
 /**
  * Final css should be
  * :root { // Base vars }
- * .dark-mode {  // This is added to the body tag }
- * .light-mode {  // This is added to the body tag }
  * @media (prefers-color-scheme: dark) {
  *   :root { // Dark mode vars }
  * }
  * @media (prefers-color-scheme: light) {
  *   :root { // Light mode vars }
  * }
+ * .dark-mode {  // This is added to the body tag }
+ * .light-mode {  // This is added to the body tag }
+ * The class is selected last to override preference
+ * when it is set specifically by user
  */
 export const cssConverter = (theme: UITheme) => {
   const baseCssVars = flattenObject(theme.base, newKey);
@@ -150,7 +152,9 @@ const layout = {
   },
 }
 
-export type CardType = 'gradient' | 'solid' | 'transparent'
+// Create union from array
+export const CardTypes = ['gradient', 'solid', 'solid-border', 'border', 'transparent'] as const
+export type CardType = typeof CardTypes[number]
 
 const baseVars = {
   layout,
@@ -276,38 +280,36 @@ export const defaultThemePalette: ThemePalette = {
 }
 
 const brutalistPalette: ThemePalette = {
-  name: 'Brutalist',
-  id: 'default_brutalist',
-  base: {
-    border: {
-      radius: '2px',
-    },
-    font: {
-      family: 'sans-serif',
+  "name": "Brutalist",
+  "id": "default_brutalist",
+  "base": {
+    "border": {
+      "radius": "0px"
     },
+    "font": {
+      "family": "Inter"
+    }
   },
-  card: 'solid',
-
-  vars: {
-    light: {
+  "card": "border",
+  "vars": {
+    "light": {
       "primary": "#222",
-      "secondary": "#d93131",
+      "secondary": "#6e6e6e",
       "background": "#f0f0f0",
       "surface": "#b8b8b844",
-      "text": "#333333"
-    },
-    dark: {
-      primary: '#ffffff',
-      secondary: '#ff5370',
-
-      background: '#000000',
-      surface: '#ffffff10',
-      text: '#cccccc',
+      "text": "#000000"
     },
+    "dark": {
+      "primary": "#ffffff",
+      "secondary": "#999999",
+      "background": "#000000",
+      "surface": "#ffffff14",
+      "text": "#cccccc"
+    }
   }
 }
 
-const royalDecree = {
+const royalDecree: ThemePalette = {
   "name": "Royal Decree",
   "id": "default_royal_decree",
   "base": {
@@ -335,21 +337,50 @@ const royalDecree = {
       "text": "#ab9b8a"
     }
   }
-} as const;
+};
+
+const structured: ThemePalette = {
+  "name": "Structured",
+  "id": "default_structured",
+  "base": {
+    "border": {
+      "radius": "6px"
+    },
+    "font": {
+      "family": "Recursive"
+    }
+  },
+  "card": "solid",
+  "vars": {
+    "light": {
+      "primary": "#0f8a8c",
+      "secondary": "#ff5370",
+      "background": "#c5cde3",
+      "surface": "#ffffff2b",
+      "text": "#3c5266"
+    },
+    "dark": {
+      "primary": "#30a38a",
+      "secondary": "#4da6ff",
+      "background": "#1a1f29",
+      "surface": "#323f4f44",
+      "text": "#5c93ab"
+    }
+  }
+};
 
 export const defaultPalettes: ThemePalette[] = [
   defaultThemePalette,
-  brutalistPalette,
+  structured,
   royalDecree,
+  brutalistPalette,
 ]
 
 
 const getCard = (cardType: CardType) => {
   if (cardType === 'gradient') {
     return {
-      // We can use these inside new vars
       card: {
-        // The controls for the cards would be implemented later
         border: '2px dashed var(--border-color)',
         background: 'linear-gradient(-45deg, var(--background), var(--background), var(--surface))',
         backgroundHover: 'linear-gradient(-45deg, var(--background), var(--background), var(--surface))',
@@ -360,18 +391,43 @@ const getCard = (cardType: CardType) => {
       }
     }
   } else if (cardType === 'solid') {
+    return {
+      card: {
+        border: 'none',
+        background: 'var(--surface)',
+        backgroundPosition: 'initial',
+        backgroundSize: 'initial',
+        borderHover: 'none',
+        backgroundHover: 'var(--surface)',
+        backgroundPositionHover: 'initial',
+      }
+    }
+  } else if (cardType === 'solid-border') {
     return {
       card: {
         border: '1px solid var(--border-color)',
         background: 'var(--surface)',
         backgroundPosition: 'initial',
+        backgroundHover: 'initial',
+        backgroundSize: 'initial',
+        borderHover: '1px solid var(--border-color)',
+        backgroundPositionHover: 'initial',
+      }
+    }
+  } else if (cardType === 'border') {
+    return {
+      card: {
+        border: '1px solid var(--border-color)',
+        background: 'var(--background)',
+        backgroundHover: 'var(--background)',
+        backgroundPosition: 'initial',
         backgroundSize: 'initial',
         borderHover: '1px solid var(--border-color)',
-        backgroundHover: 'var(--surface)',
         backgroundPositionHover: 'initial',
       }
     }
   } else {
+    // and also if (cardType === 'transparent')
     return {
       card: {
         border: 'none',