chore(ui): make theme code ts strict

packages/ui/src/theme/createTheme.ts

@@ -38,7 +38,7 @@ export function createTheme(
   // deepExtend is an internal Style Dictionary method
   // that performs a deep merge on n objects. We could change
   // this to another 3p deep merge solution too.
-  const mergedTheme: DefaultTheme = deepExtend([{}, DefaultTheme, theme]);
+  const mergedTheme = deepExtend<DefaultTheme>([{}, DefaultTheme, theme]);
 
   // Setting up the tokens. This is similar to what Style Dictionary
   // does. At the end of this, each token should have:
@@ -56,7 +56,7 @@ export function createTheme(
   let cssText =
     `[data-amplify-theme="${name}"] {\n` +
     flattenProperties(tokens)
-      .map((token) => `${token.name}: ${token.value};`)
+      .map((token: WebDesignToken) => `${token.name}: ${token.value};`)
       .join('\n') +
     `\n}\n`;
 
@@ -74,7 +74,7 @@ export function createTheme(
         setupToken,
       });
       const customProperties = flattenProperties(tokens)
-        .map((token) => `${token.name}: ${token.value};`)
+        .map((token: WebDesignToken) => `${token.name}: ${token.value};`)
         .join('\n');
       // Overrides can have a selector, media query, breakpoint, or color mode
       // for creating the selector

packages/ui/src/theme/utils.ts

@@ -26,28 +26,29 @@ const SHADOW_PROPERTIES: ShadowPropertyKey[] = [
   'color',
 ];
 
-function referenceValue(value: string) {
+function referenceValue(value?: string) {
+  if (!value) return '';
   if (usesReference(value)) {
     const path = value.replace(/\{|\}/g, '').replace('.value', '').split('.');
     return `var(--${cssNameTransform({ path })})`;
   }
   return value;
 }
 
-export function cssValue(token: DesignToken<{ value: unknown }>) {
+export function cssValue(token: BaseDesignToken): string | number {
   const { value } = token;
   if (isString(value)) {
     return referenceValue(value);
   }
 
-  if (isObject(value)) {
-    if ('offsetX' in value) {
-      return SHADOW_PROPERTIES.map((property) =>
+  if (isShadowToken(value)) {
+    return SHADOW_PROPERTIES.map((property) => {
+      return referenceValue(
         // lookup property against `token` first for custom non-nested value, then lookup
-        // property against `value` for design token value, default to empty string
-        referenceValue(token[property] ?? value[property] ?? '')
-      ).join(' ');
-    }
+        // property against `value` for design token value
+        isShadowToken(token) ? token[property] : value[property]
+      );
+    }).join(' ');
   }
 
   return value;
@@ -72,8 +73,12 @@ export function isDesignToken(value: unknown): value is WebDesignToken {
   return isObject(value) && has(value, 'value');
 }
 
+export function isShadowToken(value: unknown): value is ShadowValue {
+  return isObject(value) && has(value, 'offsetX');
+}
+
 type SetupTokensProps = {
-  tokens: Record<string | number, any>;
+  tokens?: Record<string | number, any>;
   path?: Array<string>;
   setupToken: SetupToken;
 };
@@ -101,7 +106,7 @@ export function setupTokens({
     return setupToken({ token: tokens as BaseDesignToken, path });
   }
 
-  const output = {};
+  const output: Record<string, any> = {};
 
   for (const name in tokens) {
     if (has(tokens, name)) {