Fix color-docs (#1090)

* Fix color-docs

* Delete old file

* Organize imports

* Fix formatting

Author: oscarcarlstrom

apps/docs/app/routeTree.gen.ts

@@ -14,8 +14,10 @@ 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 DocsProfilIndexImport } from './routes/_docs/profil/index'
 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,9 +39,9 @@ const StudioSplatRoute = StudioSplatImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const DocsIkonerRoute = DocsIkonerImport.update({
-  id: '/ikoner',
-  path: '/ikoner',
+const DocsProfilIndexRoute = DocsProfilIndexImport.update({
+  id: '/profil/',
+  path: '/profil/',
   getParentRoute: () => DocsRoute,
 } as any)
 
@@ -49,6 +51,18 @@ const DocsKomponenterIndexRoute = DocsKomponenterIndexImport.update({
   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 +80,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,80 +101,122 @@ 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'
       fullPath: '/komponenter'
       preLoaderRoute: typeof DocsKomponenterIndexImport
       parentRoute: typeof DocsImport
     }
+    '/_docs/profil/': {
+      id: '/_docs/profil/'
+      path: '/profil'
+      fullPath: '/profil'
+      preLoaderRoute: typeof DocsProfilIndexImport
+      parentRoute: typeof DocsImport
+    }
   }
 }
 
 // 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
+  DocsProfilIndexRoute: typeof DocsProfilIndexRoute
 }
 
 const DocsRouteChildren: DocsRouteChildren = {
-  DocsIkonerRoute: DocsIkonerRoute,
   DocsIndexRoute: DocsIndexRoute,
   DocsKomponenterSlugRoute: DocsKomponenterSlugRoute,
+  DocsProfilFargerRoute: DocsProfilFargerRoute,
+  DocsProfilIkonerRoute: DocsProfilIkonerRoute,
   DocsKomponenterIndexRoute: DocsKomponenterIndexRoute,
+  DocsProfilIndexRoute: DocsProfilIndexRoute,
 }
 
 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
+  '/profil': typeof DocsProfilIndexRoute
 }
 
 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
+  '/profil': typeof DocsProfilIndexRoute
 }
 
 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
+  '/_docs/profil/': typeof DocsProfilIndexRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | ''
-    | '/ikoner'
     | '/studio/$'
     | '/'
     | '/komponenter/$slug'
+    | '/profil/farger'
+    | '/profil/ikoner'
     | '/komponenter'
+    | '/profil'
   fileRoutesByTo: FileRoutesByTo
-  to: '/ikoner' | '/studio/$' | '/' | '/komponenter/$slug' | '/komponenter'
+  to:
+    | '/studio/$'
+    | '/'
+    | '/komponenter/$slug'
+    | '/profil/farger'
+    | '/profil/ikoner'
+    | '/komponenter'
+    | '/profil'
   id:
     | '__root__'
     | '/_docs'
-    | '/_docs/ikoner'
     | '/studio/$'
     | '/_docs/'
     | '/_docs/komponenter/$slug'
+    | '/_docs/profil/farger'
+    | '/_docs/profil/ikoner'
     | '/_docs/komponenter/'
+    | '/_docs/profil/'
   fileRoutesById: FileRoutesById
 }
 
@@ -198,16 +247,14 @@ export const routeTree = rootRoute
     "/_docs": {
       "filePath": "_docs.tsx",
       "children": [
-        "/_docs/ikoner",
         "/_docs/",
         "/_docs/komponenter/$slug",
-        "/_docs/komponenter/"
+        "/_docs/profil/farger",
+        "/_docs/profil/ikoner",
+        "/_docs/komponenter/",
+        "/_docs/profil/"
       ]
     },
-    "/_docs/ikoner": {
-      "filePath": "_docs/ikoner.tsx",
-      "parent": "/_docs"
-    },
     "/studio/$": {
       "filePath": "studio/$.tsx"
     },
@@ -219,9 +266,21 @@ 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"
+    },
+    "/_docs/profil/": {
+      "filePath": "_docs/profil/index.tsx",
+      "parent": "/_docs"
     }
   }
 }

apps/docs/app/routes/_docs/index.tsx

@@ -18,9 +18,9 @@ function Home() {
         </Card>
         <Card variant="outlined">
           <Heading level={2}>
-            <CardLink href="/ikoner">Ikoner</CardLink>
+            <CardLink href="/profil">Profil</CardLink>
           </Heading>
-          Utforsk ikonsettet vårt
+          Utforsk profilen vår
         </Card>
       </div>
     </>

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

@@ -0,0 +1,83 @@
+import { useLayoutEffect } from '@react-aria/utils';
+import { createFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
+
+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/routes/_docs/profil/index.tsx

@@ -0,0 +1,42 @@
+import { sanityFetch } from '@/lib/sanity';
+import { Card, CardLink, Heading } from '@obosbbl/grunnmuren-react';
+import { createFileRoute } from '@tanstack/react-router';
+import { defineQuery } from 'groq';
+
+const COMPONENTS_INDEX_QUERY = defineQuery(
+  // make sure the slug is always a string so we don't have add fallback value in code just to make TypeScript happy
+  `*[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)`,
+);
+
+export const Route = createFileRoute('/_docs/profil/')({
+  component: Page,
+  head: () => ({
+    meta: [
+      { title: 'Profil - Grunnmuren' },
+      { name: 'description', content: 'Grunnmuren sin grafiske profil' },
+    ],
+  }),
+  loader: () => sanityFetch({ query: COMPONENTS_INDEX_QUERY }),
+});
+
+function Page() {
+  return (
+    <>
+      <h1 className="heading-l mb-12 mt-9">Profil</h1>
+      <div className="grid grid-cols-2 gap-4">
+        <Card variant="outlined">
+          <Heading level={2}>
+            <CardLink href="/profil/farger">Farger</CardLink>
+          </Heading>
+          Se alle fargene våre
+        </Card>
+        <Card variant="outlined">
+          <Heading level={2}>
+            <CardLink href="/profil/ikoner">Ikoner</CardLink>
+          </Heading>
+          Utforsk ikonsettet vårt
+        </Card>
+      </div>
+    </>
+  );
+}

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',
       },
     ],