Merge pull request #536 from components-ai/theme-box-shadows

Add support for box shadows in theme

Author: johno

.changeset/cool-hounds-divide.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add support for box shadows in theme

apps/docs/data/default-theme.ts

@@ -270,7 +270,16 @@ export const defaultTheme: any = {
   },
   description: '',
   durations: [],
-  boxShadows: {},
+  boxShadows: {
+    0: '0px 3px 6px 0px rgba(0, 0, 0, 0.16), 0px 3px 6px 0px rgba(0, 0, 0, 0.23)',
+    1: '0px 14px 28px 0px rgba(0, 0, 0, 0.25), 0px 10px 10px 0px rgba(0, 0, 0, 0.22)',
+    2: '0px 1px 1px 0px rgba(0, 0, 0, 0.11), 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 4px 0px rgba(0, 0, 0, 0.11), 0px 6px 8px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.11)',
+    3: '0px 1px 1px 0px rgba(0, 0, 0, 0.15), 0px 2px 2px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15), 0px 8px 8px 0px rgba(0, 0, 0, 0.15)',
+    4: '0px 3px 6px 0px rgba(0, 0, 0, 0.16), 0px 3px 6px 0px rgba(0, 0, 0, 0.23)',
+    5: '0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.16), 0px 8px 8px 0px rgba(0, 0, 0, 0.20)',
+    6: '0px 14px 28px 0px rgba(0, 0, 0, 0.25), 0px 10px 10px 0px rgba(0, 0, 0, 0.22)',
+    7: '0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 6px 6px 0px rgba(0, 0, 0, 0.23)',
+  },
   textShadows: {},
   easingFunctions: {},
   gradients: {},

packages/gui/src/components/schemas/box-shadow.tsx

@@ -3,6 +3,7 @@ import { joinSchemas } from './joinSchemas'
 import { listSchema } from './list'
 import { objectSchema } from './object'
 import { keyword, length } from './primitives'
+import { themeRecord } from './theme'
 import { toggle } from './toggle'
 
 const singleBoxShadow = objectSchema({
@@ -22,4 +23,5 @@ export const boxShadow = joinSchemas([
     itemSchema: singleBoxShadow,
   }),
   keyword(['none']),
+  themeRecord('boxShadows'),
 ])

packages/gui/src/components/schemas/theme.tsx

@@ -43,7 +43,7 @@ export function themeScale(path: string): DataTypeSchema<ThemeValue> {
   }
 }
 
-// Theme properties for stuff represented by a string names
+// Theme properties for stuff represented by a string name
 export function themeRecord(path: string): DataTypeSchema<ThemeNamedValue> {
   return {
     type: 'theme',