Update typography

buildheadless · Jan 7, 2024 · 6b0b62e · 6b0b62e
1 parent 64e98c2
commit 6b0b62e
Show file tree

Hide file tree

Showing 9 changed files with 429 additions and 240 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/templates/hydrogen-theme/app/components/Fonts.tsx b/templates/hydrogen-theme/app/components/Fonts.tsx
@@ -30,22 +30,22 @@ export function Fonts() {
 
 export function getFonts({fontsData}: {fontsData: FontsQuery}) {
   const headingFonts =
-    fontsData?.heading &&
-    fontsData.heading.length > 0 &&
-    fontsData.heading[0].fontAssets?.length > 0
-      ? fontsData.heading[0].fontAssets
+    fontsData?.heading?.font &&
+    fontsData.heading.font.length > 0 &&
+    fontsData.heading.font[0].fontAssets?.length > 0
+      ? fontsData.heading.font[0].fontAssets
       : [];
   const bodyFonts =
-    fontsData?.body &&
-    fontsData.body?.length > 0 &&
-    fontsData.body[0].fontAssets?.length > 0
-      ? fontsData.body[0].fontAssets
+    fontsData?.body.font &&
+    fontsData.body?.font.length > 0 &&
+    fontsData.body.font[0].fontAssets?.length > 0
+      ? fontsData.body.font[0].fontAssets
       : [];
   const extraFonts =
-    fontsData?.extra &&
-    fontsData.extra?.length > 0 &&
-    fontsData.extra[0]?.fontAssets?.length > 0
-      ? fontsData.extra[0]?.fontAssets
+    fontsData?.extra.font &&
+    fontsData.extra.font?.length > 0 &&
+    fontsData.extra.font[0]?.fontAssets?.length > 0
+      ? fontsData.extra.font[0]?.fontAssets
       : [];
 
   return [...headingFonts, ...bodyFonts, ...extraFonts];
@@ -86,28 +86,44 @@ function resolveFontAssetUrls(font: FontAssetsFragment[0]) {
 function generateCssFontVariables({fontsData}: {fontsData: FontsQuery}) {
   const fontCategories: Array<{
     antialiased: boolean | null;
+    baseSize: null | number;
+    capitalize: boolean | null;
     categoryName: string;
     fontName: string;
     fontType: string;
+    letterSpacing: null | number;
+    lineHeight: null | number;
   }> = [];
 
-  fontsData?.heading &&
-    fontsData.heading?.length > 0 &&
+  fontsData?.heading.font &&
+    fontsData.heading.font?.length > 0 &&
     fontCategories.push({
+      baseSize: fontsData.heading.baseSize,
+      capitalize: fontsData.heading.capitalize,
       categoryName: 'heading',
-      ...fontsData.heading[0],
+      letterSpacing: fontsData.heading.letterSpacing,
+      lineHeight: fontsData.heading.lineHeight,
+      ...fontsData.heading.font[0],
     });
-  fontsData?.body &&
-    fontsData.body?.length > 0 &&
+  fontsData?.body.font &&
+    fontsData.body.font?.length > 0 &&
     fontCategories.push({
+      baseSize: fontsData.body.baseSize,
+      capitalize: fontsData.body.capitalize,
       categoryName: 'body',
-      ...fontsData.body[0],
+      letterSpacing: fontsData.body.letterSpacing,
+      lineHeight: fontsData.body.lineHeight,
+      ...fontsData.body.font[0],
     });
-  fontsData?.extra &&
-    fontsData.extra?.length > 0 &&
+  fontsData?.extra.font &&
+    fontsData.extra.font?.length > 0 &&
     fontCategories.push({
+      baseSize: fontsData.extra.baseSize,
+      capitalize: fontsData.extra.capitalize,
       categoryName: 'extra',
-      ...fontsData.extra[0],
+      letterSpacing: fontsData.extra.letterSpacing,
+      lineHeight: fontsData.extra.lineHeight,
+      ...fontsData.extra.font[0],
     });
 
   if (fontCategories?.length > 0) {
@@ -124,6 +140,18 @@ function generateCssFontVariables({fontsData}: {fontsData: FontsQuery}) {
         return `
         --${fontCategory.categoryName}-font-family: "${fontCategory.fontName}";
         --${fontCategory.categoryName}-font-type: ${fontCategory.fontType};
+        --${fontCategory.categoryName}-line-height: ${
+          fontCategory.lineHeight ? fontCategory.lineHeight : 'unset'
+        };
+        --${fontCategory.categoryName}-letter-spacing: ${
+          fontCategory.letterSpacing ? fontCategory.letterSpacing : 'unset'
+        };
+        --${fontCategory.categoryName}-base-size: ${
+          fontCategory.baseSize ? fontCategory.baseSize : 'unset'
+        };
+        --${fontCategory.categoryName}-capitalize: ${
+          fontCategory.capitalize ? 'uppercase' : 'none'
+        };
         --${fontCategory.categoryName}-font-webkit-font-smoothing: ${
           fontCategory.antialiased ? 'antialiased' : 'unset'
         };

diff --git a/templates/hydrogen-theme/app/qroq/fragments.ts b/templates/hydrogen-theme/app/qroq/fragments.ts
@@ -114,3 +114,11 @@ export const FONT_CATEGORY_FRAGMENT = {
   fontName: q.string(),
   fontType: q.string(),
 } satisfies Selection;
+
+export const FONT_FRAGMENT = {
+  baseSize: q.number().nullable(),
+  capitalize: q.boolean().nullable(),
+  font: q('font[]', {isArray: true}).grab(FONT_CATEGORY_FRAGMENT).nullable(),
+  letterSpacing: q.number().nullable(),
+  lineHeight: q.number().nullable(),
+} satisfies Selection;
diff --git a/templates/hydrogen-theme/app/qroq/queries.ts b/templates/hydrogen-theme/app/qroq/queries.ts
@@ -3,7 +3,7 @@ import {q} from 'groqd';
 import {FOOTERS_FRAGMENT} from './footers';
 import {
   COLOR_SCHEME_FRAGMENT,
-  FONT_CATEGORY_FRAGMENT,
+  FONT_FRAGMENT,
   MENU_FRAGMENT,
   SETTINGS_FRAGMENT,
 } from './fragments';
@@ -58,13 +58,9 @@ export const PRODUCT_QUERY = q('*')
 export const FONTS_QUERY = q('*')
   .filter("_type == 'typography'")
   .grab({
-    body: q('body[]', {isArray: true}).grab(FONT_CATEGORY_FRAGMENT).nullable(),
-    extra: q('extra[]', {isArray: true})
-      .grab(FONT_CATEGORY_FRAGMENT)
-      .nullable(),
-    heading: q('heading[]', {isArray: true})
-      .grab(FONT_CATEGORY_FRAGMENT)
-      .nullable(),
+    body: q('body').grab(FONT_FRAGMENT),
+    extra: q('extra').grab(FONT_FRAGMENT),
+    heading: q('heading').grab(FONT_FRAGMENT),
   })
   .order('_createdAt asc')
   .slice(0)

diff --git a/templates/hydrogen-theme/app/styles/tailwind.css b/templates/hydrogen-theme/app/styles/tailwind.css
@@ -5,6 +5,9 @@
 @layer base {
   body {
     font-family: var(--body-font-family), var(--body-font-type);
+    font-size: calc(var(--body-base-size) * 1px);
+    line-height: var(--body-line-height);
+    letter-spacing: calc(var(--body-letter-spacing) * 1px);
     -webkit-font-smoothing: var(--body-font-webkit-font-smoothing);
     -moz-osx-font-smoothing: var(--body-font-moz-osx-font-smoothing);
   }
@@ -16,9 +19,34 @@
   h5,
   h6 {
     font-family: var(--heading-font-family), var(--heading-font-type);
-    font-size: theme('fontSize.6xl');
-    font-weight: theme('fontWeight.black');
+    letter-spacing: calc(var(--heading-letter-spacing) * 1px);
+    line-height: var(--heading-line-height);
+    text-transform: var(--heading-capitalize);
     -webkit-font-smoothing: var(--heading-font-webkit-font-smoothing);
     -moz-osx-font-smoothing: var(--heading-font-moz-osx-font-smoothing);
   }
+
+  h1 {
+    font-size: calc(var(--heading-base-size) * 1px);
+  }
+
+  h2 {
+    font-size: calc(var(--heading-base-size) * 0.75 * 1px);
+  }
+
+  h3 {
+    font-size: calc(var(--heading-base-size) * 0.65 * 1px);
+  }
+
+  h4 {
+    font-size: calc(var(--heading-base-size) * 0.5 * 1px);
+  }
+
+  h5 {
+    font-size: calc(var(--heading-base-size) * 0.45 * 1px);
+  }
+
+  h6 {
+    font-size: calc(var(--heading-base-size) * 0.375 * 1px);
+  }
 }
diff --git a/templates/hydrogen-theme/package.json b/templates/hydrogen-theme/package.json
@@ -55,7 +55,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/eslint": "^8.56.1",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "eslint": "^8.56.0",
     "eslint-plugin-hydrogen": "^0.12.3",

diff --git a/templates/hydrogen-theme/studio/desk/singletons.ts b/templates/hydrogen-theme/studio/desk/singletons.ts
@@ -1,15 +1,22 @@
-import {CogIcon, EarthGlobeIcon, HomeIcon, InsertAboveIcon, InsertBelowIcon} from '@sanity/icons'
-import {StructureBuilder} from 'sanity/desk'
+import {
+  CogIcon,
+  EarthGlobeIcon,
+  HomeIcon,
+  InsertAboveIcon,
+  InsertBelowIcon,
+} from '@sanity/icons';
+import {StructureBuilder} from 'sanity/desk';
 
 type Singleton = {
-  id: string
-  _type: string
-  title: string
-  icon?: any
-}
+  id: string;
+  _type: string;
+  title: string;
+  icon?: any;
+  initialValue?: any;
+};
 
 export const SINGLETONS: {
-  [key: string]: Singleton
+  [key: string]: Singleton;
 } = {
   home: {
     id: 'home',
@@ -39,20 +46,41 @@ export const SINGLETONS: {
     id: 'typography',
     _type: 'typography',
     title: 'Typography',
+    initialValue: {
+      heading: {
+        baseSize: 50,
+        lineHeight: 1.2,
+        letterSpacing: 0,
+      },
+      body: {
+        baseSize: 16,
+        lineHeight: 1.2,
+        letterSpacing: 0,
+      },
+      extra: {
+        baseSize: 16,
+        lineHeight: 1.2,
+        letterSpacing: 0,
+      },
+    },
   },
   settings: {
     id: 'settings',
     _type: 'settings',
     title: 'Settings',
     icon: CogIcon,
   },
-}
+};
 
 export const singletonsTypes = new Set(
-  Object.values(SINGLETONS).map((singleton) => singleton._type)
-)
+  Object.values(SINGLETONS).map((singleton) => singleton._type),
+);
 // Define the actions that should be available for singleton documents
-export const singletonActions = new Set(['publish', 'discardChanges', 'restore'])
+export const singletonActions = new Set([
+  'publish',
+  'discardChanges',
+  'restore',
+]);
 
 export const singleton = (S: StructureBuilder, singleton: Singleton) =>
   S.documentTypeListItem(singleton._type)
@@ -62,5 +90,5 @@ export const singleton = (S: StructureBuilder, singleton: Singleton) =>
         .title(singleton.title)
         .schemaType(singleton._type)
         .documentId(singleton._type)
-        .views([S.view.form()])
-    )
+        .views([S.view.form()]),
+    );
diff --git a/templates/hydrogen-theme/studio/package.json b/templates/hydrogen-theme/studio/package.json
@@ -17,12 +17,12 @@
   ],
   "dependencies": {
     "@headless.build/sanity-color-picker": "^1.1.0",
-    "@headless.build/sanity-font-picker": "^2.2.3",
-    "@headless.build/sanity-plugin-range-slider": "^1.1.0",
+    "@headless.build/sanity-font-picker": "^3.0.0",
+    "@headless.build/sanity-plugin-range-slider": "^1.1.1",
     "@sanity/code-input": "^4.1.2",
     "@sanity/icons": "^2.8.0",
     "@sanity/language-filter": "^3.2.1",
-    "@sanity/presentation": "^1.4.2",
+    "@sanity/presentation": "^1.4.3",
     "@sanity/ui": "2.0.0-beta.15",
     "@sanity/util": "^3.23.4",
     "@sanity/uuid": "^3.0.2",
@@ -47,7 +47,7 @@
     "@sanity/eslint-config-studio": "^3.0.1",
     "@types/lodash": "^4.14.202",
     "@types/lodash.get": "^4.4.9",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.47",
     "@types/styled-components": "^5.1.34",
     "eslint": "^8.56.0",
     "npm-run-all": "^4.1.5",

diff --git a/templates/hydrogen-theme/studio/scripts/createSingletons.ts b/templates/hydrogen-theme/studio/scripts/createSingletons.ts
@@ -1,6 +1,6 @@
-import {getCliClient} from 'sanity/cli'
-import {SINGLETONS} from '../desk/singletons'
-import fs from 'fs'
+import {getCliClient} from 'sanity/cli';
+import {SINGLETONS} from '../desk/singletons';
+import fs from 'fs';
 
 /**
  * This script will create one or many "singleton" documents for each language
@@ -20,49 +20,50 @@ import fs from 'fs'
  * 5. Update your desk structure to use the new documents
  */
 
-const FLAG_FILE_PATH = './scripts/flag.txt'
+const FLAG_FILE_PATH = './scripts/flag.txt';
 
 // Check if the flag file exists
 if (fs.existsSync(FLAG_FILE_PATH)) {
-  console.log('✔ Singletons already created. Exiting...')
-  process.exit(0)
+  console.log('✔ Singletons already created. Exiting...');
+  process.exit(0);
 }
 
 // Create the flag file to indicate that the script has run
-fs.writeFileSync(FLAG_FILE_PATH, 'Singletons created: true')
+fs.writeFileSync(FLAG_FILE_PATH, 'Singletons created: true');
 
 // This will use the client configured in ./sanity.cli.ts
-const client = getCliClient()
+const client = getCliClient();
 
 async function createSingletons() {
-  const singletonsArray = Object.values(SINGLETONS)
+  const singletonsArray = Object.values(SINGLETONS);
 
   const documents = singletonsArray
     .map((singleton) => {
       return [
         {
           _id: `${singleton.id}`,
           _type: singleton._type,
+          ...singleton.initialValue,
         },
-      ]
+      ];
     })
-    .flat()
+    .flat();
 
-  const transaction = client.transaction()
+  const transaction = client.transaction();
 
   documents.forEach((doc: any) => {
-    transaction.createIfNotExists(doc)
-  })
+    transaction.createIfNotExists(doc);
+  });
 
   await transaction
     .commit()
     .then((res) => {
       // eslint-disable-next-line no-console
-      console.log('✔ Singletons created or updated successfully!')
+      console.log('✔ Singletons created or updated successfully!');
     })
     .catch((err) => {
-      console.error(err)
-    })
+      console.error(err);
+    });
 }
 
-createSingletons()
+createSingletons();