refactor(theme): make specifying scales mandatory

BREAKING CHANGE: No action is required when extending `defaultTokens`. Otherwise, each scale must be specified, as seen in `StaticTheme`.
kripod · Apr 6, 2020 · 870d040 · 870d040
1 parent efd2ded
commit 870d040
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/packages/glaze/src/theme.ts b/packages/glaze/src/theme.ts
@@ -25,20 +25,20 @@ export interface RuntimeTheme extends CommonTheme {
 
 export interface StaticTheme extends CommonTheme {
   scales: {
-    spacing?: ScaleTokens<'margin'>;
-    size?: ScaleTokens<'width'>;
-    fontFamily?: ScaleTokens<'fontFamily'>;
-    fontSize?: ScaleTokens<'fontSize'>;
-    fontWeight?: ScaleTokens<'fontWeight'>;
-    lineHeight?: ScaleTokens<'lineHeight'>;
-    color?: ScaleTokens<'color'>;
-    letterSpacing?: ScaleTokens<'letterSpacing'>;
-    border?: ScaleTokens<'border'>;
-    borderWidth?: ScaleTokens<'borderWidth'>;
-    radius?: ScaleTokens<'borderRadius'>;
-    shadow?: ScaleTokens<'boxShadow'>;
-    opacity?: ScaleTokens<'opacity'>;
-    zIndex?: ScaleTokens<'zIndex'>;
+    spacing: ScaleTokens<'margin'>;
+    size: ScaleTokens<'width'>;
+    fontFamily: ScaleTokens<'fontFamily'>;
+    fontSize: ScaleTokens<'fontSize'>;
+    fontWeight: ScaleTokens<'fontWeight'>;
+    lineHeight: ScaleTokens<'lineHeight'>;
+    color: ScaleTokens<'color'>;
+    letterSpacing: ScaleTokens<'letterSpacing'>;
+    border: ScaleTokens<'border'>;
+    borderWidth: ScaleTokens<'borderWidth'>;
+    radius: ScaleTokens<'borderRadius'>;
+    shadow: ScaleTokens<'boxShadow'>;
+    opacity: ScaleTokens<'opacity'>;
+    zIndex: ScaleTokens<'zIndex'>;
   };
   resolvers: {
     [key in keyof CSSProperties]:
@@ -94,7 +94,9 @@ export const defaultTokens =
         auto: 'auto',
         '100%': '100%',
       },
+      fontFamily: {},
       fontSize: modularScale(1.333),
+      fontWeight: {},
       lineHeight: {
         1: 1,
         tight: 1.25,
@@ -103,9 +105,11 @@ export const defaultTokens =
         relaxed: 1.625,
         loose: 2,
       },
+      color: {},
       letterSpacing: {
         wide: '.025em',
       },
+      border: {},
       borderWidth: { 1: 1, 2: 2, 4: 4, 8: 8 },
       radius: {
         sm: '.125rem',
@@ -124,6 +128,8 @@ export const defaultTokens =
         inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
         outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
       },
+      opacity: {},
+      zIndex: {},
     },
 
     shorthands: {

diff --git a/packages/glaze/src/useStyling.treat.ts b/packages/glaze/src/useStyling.treat.ts
@@ -1,20 +1,12 @@
-import { CSSProperties } from 'react';
 import { Style, styleMap } from 'treat';
 
-import { ScaleTokens } from './theme';
-
 export default styleMap((theme) => {
   const result: { [key: string]: Style } = {};
 
   Object.entries(theme.resolvers).forEach(([property, scale]) => {
     const tokens = Object.entries(
-      // TODO: Improve typings
-      // Allow specifying resolvers without a corresponding scale
-      ((theme.scales as unknown) as ScaleTokens<keyof CSSProperties>)[
-        scale as string
-      ] || {},
+      theme.scales[scale as keyof typeof theme.scales],
     );
-
     tokens.forEach(([key, value]) => {
       result[`${property}-${key}`] = { [property]: value };
     });

diff --git a/packages/glaze/src/useStyling.ts b/packages/glaze/src/useStyling.ts
@@ -1,7 +1,7 @@
 /* Prefer performance over elegance, as this code is critical for the runtime */
 
 import hash from '@emotion/hash';
-import { CSSProperties, useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { useStyles } from 'react-treat';
 import { Style } from 'treat';
 
@@ -19,8 +19,13 @@ function getClassName(identName: string): string {
 }
 
 export type ThemedStyle = Style & {
-  // TODO: Add more precise styles for aliases and shorthands
-  [key: string]: CSSProperties[keyof CSSProperties];
+  // TODO: Autocomplete for themed values
+  /*
+    [key in keyof CSSProperties]: key extends keyof ThemeOrAny['resolvers']
+      ? ThemeOrAny['scales'][ThemeOrAny['resolvers'][key]] // CSSProperties[ThemeOrAny['resolvers'][key]]
+      : CSSProperties[key];
+    */
+  // TODO: Autocomplete for aliases and shorthands
 };
 
 export function useStyling(): (themedStyle: ThemedStyle) => string {
@@ -48,7 +53,8 @@ export function useStyling(): (themedStyle: ThemedStyle) => string {
 
     // eslint-disable-next-line guard-for-in, no-restricted-syntax
     for (const alias in themedStyle) {
-      const value = themedStyle[alias];
+      // TODO: Remove type assertion if possible
+      const value = themedStyle[alias as keyof ThemedStyle];
       const shorthand = theme.aliases[alias] || alias;
 
       // eslint-disable-next-line no-loop-func