Merge branch 'colors-docs'

Author: oscarcarlstrom

apps/docs/app/routeTree.gen.ts

@@ -14,8 +14,9 @@ import { Route as rootRoute } from './routes/__root'
 import { Route as DocsImport } from './routes/_docs'
 import { Route as DocsIndexImport } from './routes/_docs/index'
 import { Route as StudioSplatImport } from './routes/studio/$'
-import { Route as DocsIkonerImport } from './routes/_docs/ikoner'
 import { Route as DocsKomponenterIndexImport } from './routes/_docs/komponenter/index'
+import { Route as DocsProfilIkonerImport } from './routes/_docs/profil/ikoner'
+import { Route as DocsProfilFargerImport } from './routes/_docs/profil/farger'
 import { Route as DocsKomponenterSlugImport } from './routes/_docs/komponenter/$slug'
 
 // Create/Update Routes
@@ -37,18 +38,24 @@ const StudioSplatRoute = StudioSplatImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const DocsIkonerRoute = DocsIkonerImport.update({
-  id: '/ikoner',
-  path: '/ikoner',
-  getParentRoute: () => DocsRoute,
-} as any)
-
 const DocsKomponenterIndexRoute = DocsKomponenterIndexImport.update({
   id: '/komponenter/',
   path: '/komponenter/',
   getParentRoute: () => DocsRoute,
 } as any)
 
+const DocsProfilIkonerRoute = DocsProfilIkonerImport.update({
+  id: '/profil/ikoner',
+  path: '/profil/ikoner',
+  getParentRoute: () => DocsRoute,
+} as any)
+
+const DocsProfilFargerRoute = DocsProfilFargerImport.update({
+  id: '/profil/farger',
+  path: '/profil/farger',
+  getParentRoute: () => DocsRoute,
+} as any)
+
 const DocsKomponenterSlugRoute = DocsKomponenterSlugImport.update({
   id: '/komponenter/$slug',
   path: '/komponenter/$slug',
@@ -66,13 +73,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsImport
       parentRoute: typeof rootRoute
     }
-    '/_docs/ikoner': {
-      id: '/_docs/ikoner'
-      path: '/ikoner'
-      fullPath: '/ikoner'
-      preLoaderRoute: typeof DocsIkonerImport
-      parentRoute: typeof DocsImport
-    }
     '/studio/$': {
       id: '/studio/$'
       path: '/studio/$'
@@ -94,6 +94,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsKomponenterSlugImport
       parentRoute: typeof DocsImport
     }
+    '/_docs/profil/farger': {
+      id: '/_docs/profil/farger'
+      path: '/profil/farger'
+      fullPath: '/profil/farger'
+      preLoaderRoute: typeof DocsProfilFargerImport
+      parentRoute: typeof DocsImport
+    }
+    '/_docs/profil/ikoner': {
+      id: '/_docs/profil/ikoner'
+      path: '/profil/ikoner'
+      fullPath: '/profil/ikoner'
+      preLoaderRoute: typeof DocsProfilIkonerImport
+      parentRoute: typeof DocsImport
+    }
     '/_docs/komponenter/': {
       id: '/_docs/komponenter/'
       path: '/komponenter'
@@ -107,66 +121,79 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 interface DocsRouteChildren {
-  DocsIkonerRoute: typeof DocsIkonerRoute
   DocsIndexRoute: typeof DocsIndexRoute
   DocsKomponenterSlugRoute: typeof DocsKomponenterSlugRoute
+  DocsProfilFargerRoute: typeof DocsProfilFargerRoute
+  DocsProfilIkonerRoute: typeof DocsProfilIkonerRoute
   DocsKomponenterIndexRoute: typeof DocsKomponenterIndexRoute
 }
 
 const DocsRouteChildren: DocsRouteChildren = {
-  DocsIkonerRoute: DocsIkonerRoute,
   DocsIndexRoute: DocsIndexRoute,
   DocsKomponenterSlugRoute: DocsKomponenterSlugRoute,
+  DocsProfilFargerRoute: DocsProfilFargerRoute,
+  DocsProfilIkonerRoute: DocsProfilIkonerRoute,
   DocsKomponenterIndexRoute: DocsKomponenterIndexRoute,
 }
 
 const DocsRouteWithChildren = DocsRoute._addFileChildren(DocsRouteChildren)
 
 export interface FileRoutesByFullPath {
   '': typeof DocsRouteWithChildren
-  '/ikoner': typeof DocsIkonerRoute
   '/studio/$': typeof StudioSplatRoute
   '/': typeof DocsIndexRoute
   '/komponenter/$slug': typeof DocsKomponenterSlugRoute
+  '/profil/farger': typeof DocsProfilFargerRoute
+  '/profil/ikoner': typeof DocsProfilIkonerRoute
   '/komponenter': typeof DocsKomponenterIndexRoute
 }
 
 export interface FileRoutesByTo {
-  '/ikoner': typeof DocsIkonerRoute
   '/studio/$': typeof StudioSplatRoute
   '/': typeof DocsIndexRoute
   '/komponenter/$slug': typeof DocsKomponenterSlugRoute
+  '/profil/farger': typeof DocsProfilFargerRoute
+  '/profil/ikoner': typeof DocsProfilIkonerRoute
   '/komponenter': typeof DocsKomponenterIndexRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/_docs': typeof DocsRouteWithChildren
-  '/_docs/ikoner': typeof DocsIkonerRoute
   '/studio/$': typeof StudioSplatRoute
   '/_docs/': typeof DocsIndexRoute
   '/_docs/komponenter/$slug': typeof DocsKomponenterSlugRoute
+  '/_docs/profil/farger': typeof DocsProfilFargerRoute
+  '/_docs/profil/ikoner': typeof DocsProfilIkonerRoute
   '/_docs/komponenter/': typeof DocsKomponenterIndexRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | ''
-    | '/ikoner'
     | '/studio/$'
     | '/'
     | '/komponenter/$slug'
+    | '/profil/farger'
+    | '/profil/ikoner'
     | '/komponenter'
   fileRoutesByTo: FileRoutesByTo
-  to: '/ikoner' | '/studio/$' | '/' | '/komponenter/$slug' | '/komponenter'
+  to:
+    | '/studio/$'
+    | '/'
+    | '/komponenter/$slug'
+    | '/profil/farger'
+    | '/profil/ikoner'
+    | '/komponenter'
   id:
     | '__root__'
     | '/_docs'
-    | '/_docs/ikoner'
     | '/studio/$'
     | '/_docs/'
     | '/_docs/komponenter/$slug'
+    | '/_docs/profil/farger'
+    | '/_docs/profil/ikoner'
     | '/_docs/komponenter/'
   fileRoutesById: FileRoutesById
 }
@@ -198,16 +225,13 @@ export const routeTree = rootRoute
     "/_docs": {
       "filePath": "_docs.tsx",
       "children": [
-        "/_docs/ikoner",
         "/_docs/",
         "/_docs/komponenter/$slug",
+        "/_docs/profil/farger",
+        "/_docs/profil/ikoner",
         "/_docs/komponenter/"
       ]
     },
-    "/_docs/ikoner": {
-      "filePath": "_docs/ikoner.tsx",
-      "parent": "/_docs"
-    },
     "/studio/$": {
       "filePath": "studio/$.tsx"
     },
@@ -219,6 +243,14 @@ export const routeTree = rootRoute
       "filePath": "_docs/komponenter/$slug.tsx",
       "parent": "/_docs"
     },
+    "/_docs/profil/farger": {
+      "filePath": "_docs/profil/farger.tsx",
+      "parent": "/_docs"
+    },
+    "/_docs/profil/ikoner": {
+      "filePath": "_docs/profil/ikoner.tsx",
+      "parent": "/_docs"
+    },
     "/_docs/komponenter/": {
       "filePath": "_docs/komponenter/index.tsx",
       "parent": "/_docs"

apps/docs/app/routes/_docs/profil/farger.tsx

@@ -0,0 +1,83 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
+import { useLayoutEffect } from '@react-aria/utils';
+
+export const Route = createFileRoute('/_docs/profil/farger')({
+  component: RouteComponent,
+});
+
+/**
+ * Retrieves all colors from the CSS variables in the document.
+ * @returns a record of all colors
+ */
+function getAllColors() {
+  const cssVariables: Record<string, string> = {};
+
+  for (const sheet of document.styleSheets) {
+    for (const rule of sheet.cssRules ?? []) {
+      if (rule instanceof CSSStyleRule && rule.selectorText === ':root') {
+        for (const style of rule.style) {
+          const prefix = '--gm-color-';
+          if (style.startsWith('--gm-color-')) {
+            cssVariables[style.replace(prefix, '')] = rule.style
+              .getPropertyValue(style)
+              .trim();
+          }
+        }
+      }
+    }
+  }
+
+  return cssVariables;
+}
+
+function RouteComponent() {
+  const [colors, setColors] = useState<null | {
+    [key: string]: string;
+  }>(null);
+
+  // Make sure to read the colors from the custom properties when the component mounts client side
+  useLayoutEffect(() => {
+    setColors(getAllColors());
+  }, []);
+
+  if (!colors) {
+    // Return null if the colors are not loaded yet (usually this will only happen on the server)
+    return null;
+  }
+
+  return (
+    <>
+      <h1 className="heading-l mb-12 mt-9">Farger</h1>
+      <div className="prose mb-12">
+        <p>Grunnmuren har {Object.keys(colors).length} forskjellige farger.</p>
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,_130px)] content-center gap-6">
+        {Object.entries(colors).map(([name, value]) => (
+          <Color key={name} name={name} value={value} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+const Color = ({ name, value }) => {
+  const color = `rgb(${value.split(' ').join(', ')})`;
+
+  return (
+    <div
+      style={{
+        backgroundColor: color,
+        // Makes sure the text has enough contrast by calculating the color based on the background color
+        // This will yield a color that is either black or white
+        // Refer to: https://til.jakelazaroff.com/css/swap-between-black-and-white-text-based-on-background-color/
+        color: `lch(from ${color} calc((54 - l) * infinity) 0 0)`,
+        border:
+          name === 'white' ? '1px solid rgb(var(--gm-color-blue-dark))' : '',
+      }}
+      className="grid h-32 w-32 items-end"
+    >
+      <span className="block p-2 text-sm">{name}</span>
+    </div>
+  );
+};

apps/docs/app/routes/_docs/ikoner.tsx renamed to apps/docs/app/routes/_docs/profil/ikoner.tsx

@@ -3,7 +3,7 @@ import { Box, Download, Figma, Github } from '@obosbbl/grunnmuren-icons-react';
 import { Button, Card } from '@obosbbl/grunnmuren-react';
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/_docs/ikoner')({
+export const Route = createFileRoute('/_docs/profil/ikoner')({
   component: Page,
   head: () => ({
     meta: [

apps/docs/app/ui/main-nav.tsx

@@ -53,7 +53,11 @@ const mainNavItems = [
     title: 'Profil',
     subNavItems: [
       {
-        to: '/ikoner',
+        to: '/profil/farger',
+        title: 'Farger',
+      },
+      {
+        to: '/profil/ikoner',
         title: 'Ikoner',
       },
     ],

apps/docs/package.json

@@ -22,6 +22,7 @@
     "@obosbbl/grunnmuren-icons-svg": "workspace:*",
     "@obosbbl/grunnmuren-react": "workspace:*",
     "@portabletext/react": "3.2.0",
+    "@react-aria/utils": "3.25.1",
     "@sanity/client": "6.24.1",
     "@sanity/code-input": "5.1.2",
     "@sanity/vision": "3.68.3",