@@ -322,8 +322,8 @@ test('functions in the default theme section are lazily evaluated', () => {
322
322
magenta : 'magenta' ,
323
323
yellow : 'yellow' ,
324
324
} ,
325
- backgroundColors : ( { colors } ) => colors ,
326
- textColors : ( { colors } ) => colors ,
325
+ backgroundColors : theme => theme ( ' colors' ) ,
326
+ textColors : theme => theme ( ' colors' ) ,
327
327
} ,
328
328
variants : {
329
329
backgroundColors : [ 'responsive' , 'hover' , 'focus' ] ,
@@ -369,12 +369,12 @@ test('functions in the user theme section are lazily evaluated', () => {
369
369
green : 'green' ,
370
370
blue : 'blue' ,
371
371
} ,
372
- backgroundColors : ( { colors } ) => ( {
373
- ...colors ,
372
+ backgroundColors : theme => ( {
373
+ ...theme ( ' colors' ) ,
374
374
customBackground : '#bada55' ,
375
375
} ) ,
376
- textColors : ( { colors } ) => ( {
377
- ...colors ,
376
+ textColors : theme => ( {
377
+ ...theme ( ' colors' ) ,
378
378
customText : '#facade' ,
379
379
} ) ,
380
380
} ,
@@ -461,7 +461,7 @@ test('theme values in the extend section extend the existing theme', () => {
461
461
'50' : '.5' ,
462
462
'100' : '1' ,
463
463
} ,
464
- backgroundColors : ( { colors } ) => colors ,
464
+ backgroundColors : theme => theme ( ' colors' ) ,
465
465
} ,
466
466
variants : {
467
467
backgroundColors : [ 'responsive' , 'hover' , 'focus' ] ,
@@ -510,7 +510,7 @@ test('theme values in the extend section extend the user theme', () => {
510
510
'20' : '.2' ,
511
511
'40' : '.4' ,
512
512
} ,
513
- height : theme => theme . width ,
513
+ height : theme => theme ( ' width' ) ,
514
514
extend : {
515
515
opacity : {
516
516
'60' : '.6' ,
@@ -618,7 +618,7 @@ test('theme values in the extend section can extend values that are depended on
618
618
magenta : 'magenta' ,
619
619
yellow : 'yellow' ,
620
620
} ,
621
- backgroundColors : ( { colors } ) => colors ,
621
+ backgroundColors : theme => theme ( ' colors' ) ,
622
622
} ,
623
623
variants : {
624
624
backgroundColors : [ 'responsive' , 'hover' , 'focus' ] ,
@@ -701,3 +701,59 @@ test('theme values in the extend section are not deeply merged', () => {
701
701
} ,
702
702
} )
703
703
} )
704
+
705
+ test ( 'the theme function can use a default value if the key is missing' , ( ) => {
706
+ const userConfig = {
707
+ theme : {
708
+ colors : {
709
+ red : 'red' ,
710
+ green : 'green' ,
711
+ blue : 'blue' ,
712
+ } ,
713
+ } ,
714
+ }
715
+
716
+ const defaultConfig = {
717
+ prefix : '-' ,
718
+ important : false ,
719
+ separator : ':' ,
720
+ theme : {
721
+ colors : {
722
+ cyan : 'cyan' ,
723
+ magenta : 'magenta' ,
724
+ yellow : 'yellow' ,
725
+ } ,
726
+ borderColor : theme => ( {
727
+ default : theme ( 'colors.gray' , 'currentColor' ) ,
728
+ ...theme ( 'colors' ) ,
729
+ } ) ,
730
+ } ,
731
+ variants : {
732
+ borderColor : [ 'responsive' , 'hover' , 'focus' ] ,
733
+ } ,
734
+ }
735
+
736
+ const result = resolveConfig ( [ userConfig , defaultConfig ] )
737
+
738
+ expect ( result ) . toEqual ( {
739
+ prefix : '-' ,
740
+ important : false ,
741
+ separator : ':' ,
742
+ theme : {
743
+ colors : {
744
+ red : 'red' ,
745
+ green : 'green' ,
746
+ blue : 'blue' ,
747
+ } ,
748
+ borderColor : {
749
+ default : 'currentColor' ,
750
+ red : 'red' ,
751
+ green : 'green' ,
752
+ blue : 'blue' ,
753
+ } ,
754
+ } ,
755
+ variants : {
756
+ borderColor : [ 'responsive' , 'hover' , 'focus' ] ,
757
+ } ,
758
+ } )
759
+ } )
0 commit comments