Refactor theme and use lightning css

Author: Brijesh Bittu

docs/next.config.ts

@@ -32,6 +32,7 @@ const nextConfig: NextConfig = {
   experimental: {
     esmExternals: true,
     workerThreads: false,
+    useLightningcss: true,
   },
 };
 

docs/src/theme.ts

@@ -91,8 +91,8 @@ const THEME = {
   },
   breakpoint: {
     maxLayoutWidth: '89rem',
-    showQuickNav: '84rem',
-    showSideNav: '64rem',
+    showQuickNav: BREAKPOINTS.quickNav,
+    showSideNav: BREAKPOINTS.lg,
   },
   ease: {
     out: {
@@ -113,22 +113,6 @@ const THEME = {
     '4xl': '2rem',
   },
   $$breakpoints: BREAKPOINT_UTILS,
-  $$utils: {
-    apply(key: string, value: unknown) {
-      const ctx = this as unknown as Theme;
-      // @ts-expect-error Not typing explicitly to avoid circular typing
-      const val = ctx[key][value] as Theme['text']['md'];
-      return {
-        fontSize: val.default,
-        lineHeight: val.lineHeight,
-        letterSpacing: val.letterSpacing,
-      };
-    },
-    spacing(number: string | number) {
-      const ctx = this as unknown as Theme;
-      return `calc(${ctx.spacing} * ${number})`;
-    },
-  },
 };
 
 export type Theme = typeof THEME;

docs/src/utils/theme.ts

@@ -1,9 +1,14 @@
 import type { Theme } from '@pigment-css/theme';
 
 export function applyText(theme: Theme, value: keyof Theme['text']) {
-  return theme.$$utils.apply.call(theme, 'text', value);
+  const val = theme.text[value];
+  return {
+    fontSize: val.default,
+    lineHeight: val.lineHeight,
+    letterSpacing: val.letterSpacing,
+  };
 }
 
 export function spacing(theme: Theme, space: number | string) {
-  return theme.$$utils.spacing.call(theme, space);
+  return `calc(${theme.spacing} * ${space})`;
 }