Support a "default" key for object in scales

packages/css/package.json

@@ -16,6 +16,7 @@
     "access": "public"
   },
   "dependencies": {
-    "csstype": "^2.5.7"
+    "csstype": "^2.5.7",
+    "is-object": "^1.0.1"
   }
 }

packages/css/src/index.ts

@@ -1,7 +1,10 @@
+import isObject from 'is-object'
 import { CSSObject, SystemStyleObject, UseThemeFunction, Theme } from './types'
 
 export * from './types'
 
+const { hasOwnProperty } = {}
+
 export function get(
   obj: object,
   key: string | number,
@@ -13,10 +16,16 @@ export function get(
   for (p = 0; p < path.length; p++) {
     obj = obj ? (obj as any)[path[p]] : undef
   }
-  return obj === undef ? def : obj
+  if (obj === undef) return def
+
+  if (isObject(obj) && hasOwnProperty.call(obj, 'default')) {
+    return (obj as any).default
+  }
+
+  return obj
 }
 
-export const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
+export const defaultBreakpoints = [40, 52, 64].map((n) => n + 'em')
 
 const defaultTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
@@ -223,7 +232,7 @@ const responsive = (styles: Exclude<SystemStyleObject, UseThemeFunction>) => (
     (theme && (theme.breakpoints as string[])) || defaultBreakpoints
   const mediaQueries = [
     null,
-    ...breakpoints.map(n => `@media screen and (min-width: ${n})`),
+    ...breakpoints.map((n) => `@media screen and (min-width: ${n})`),
   ]
 
   for (const key in styles) {

packages/css/test/index.ts

@@ -6,6 +6,17 @@ const theme: Theme = {
     secondary: 'cyan',
     background: 'white',
     text: 'black',
+    colorScale: {
+      default: 'color500',
+      100: 'color100',
+      500: 'color500',
+      900: 'color900',
+    },
+    colorScaleNoDefault: {
+      100: 'color100',
+      500: 'color500',
+      900: 'color900',
+    },
   },
   fontSizes: [12, 14, 16, 24, 36],
   fonts: {
@@ -196,7 +207,7 @@ test('works with the css prop', () => {
 })
 
 test('works with functional arguments', () => {
-  const result = css(t => ({
+  const result = css((t) => ({
     color: t.colors.primary,
   }))(theme)
   expect(result).toEqual({
@@ -206,13 +217,44 @@ test('works with functional arguments', () => {
 
 test('supports functional values', () => {
   const result = css({
-    color: t => t.colors.primary,
+    color: (t) => t.colors.primary,
   })(theme)
   expect(result).toEqual({
     color: 'tomato',
   })
 })
 
+test('returns default key when accessing object value with default', () => {
+  const result = css({
+    color: 'colorScale',
+  })(theme)
+  expect(result).toEqual({
+    color: 'color500',
+  })
+})
+
+test('returns nested key when accessing key from object value with default', () => {
+  const result = css({
+    color: 'colorScale.100',
+  })(theme)
+  expect(result).toEqual({
+    color: 'color100',
+  })
+})
+
+test('returns object when accessing object value with no default key', () => {
+  const result = css({
+    color: 'colorScaleNoDefault',
+  })(theme)
+  expect(result).toEqual({
+    color: {
+      '100': 'color100',
+      '500': 'color500',
+      '900': 'color900',
+    },
+  })
+})
+
 test('returns variants from theme', () => {
   const result = css({
     variant: 'buttons.primary',
@@ -285,7 +327,7 @@ test('handles negative margins from scale that is an object', () => {
   const result = css({
     mt: '-s',
     mx: '-m',
-  })({...theme, space: { s: '16px', m: '32px' }})
+  })({ ...theme, space: { s: '16px', m: '32px' } })
   expect(result).toEqual({
     marginTop: '-16px',
     marginLeft: '-32px',
@@ -344,7 +386,7 @@ test('ignores array values longer than breakpoints', () => {
 
 test('functional values can return responsive arrays', () => {
   const result = css({
-    color: t => [t.colors.primary, t.colors.secondary],
+    color: (t) => [t.colors.primary, t.colors.secondary],
   })(theme)
   expect(result).toEqual({
     '@media screen and (min-width: 40em)': {