@@ -55,18 +55,39 @@ module.exports = function() {
5555 } ;
5656 const defaultRadialGradientColors = { } ;
5757 const defaultRadialGradientVariants = [ 'responsive' ] ;
58+ const defaultConicGradientStartingAngles = {
59+ 'default' : '0' ,
60+ } ;
61+ const defaultConicGradientPositions = {
62+ 'default' : 'center' ,
63+ 't' : 'top' ,
64+ 'tr' : 'top right' ,
65+ 'r' : 'right' ,
66+ 'br' : 'bottom right' ,
67+ 'b' : 'bottom' ,
68+ 'bl' : 'bottom left' ,
69+ 'l' : 'left' ,
70+ 'tl' : 'top left' ,
71+ } ;
72+ const defaultConicGradientColors = { } ;
73+ const defaultConicGradientVariants = [ 'responsive' ] ;
5874 const defaultRepeatingLinearGradientDirections = defaultLinearGradientDirections ;
59- const defaultRepeatingLinearGradientColors = defaultLinearGradientColors ;
75+ const defaultRepeatingLinearGradientColors = { } ;
6076 const defaultRepeatingLinearGradientLengths = { } ;
6177 const defaultRepeatingLinearGradientVariants = [ 'responsive' ] ;
6278 const defaultRepeatingRadialGradientShapes = defaultRadialGradientShapes ;
6379 const defaultRepeatingRadialGradientSizes = {
6480 'default' : 'farthest-corner' ,
6581 } ;
6682 const defaultRepeatingRadialGradientPositions = defaultRadialGradientPositions ;
67- const defaultRepeatingRadialGradientColors = defaultRadialGradientColors ;
83+ const defaultRepeatingRadialGradientColors = { } ;
6884 const defaultRepeatingRadialGradientLengths = { } ;
6985 const defaultRepeatingRadialGradientVariants = [ 'responsive' ] ;
86+ const defaultRepeatingConicGradientStartingAngles = defaultConicGradientStartingAngles ;
87+ const defaultRepeatingConicGradientPositions = defaultConicGradientPositions ;
88+ const defaultRepeatingConicGradientColors = { } ;
89+ const defaultRepeatingConicGradientLengths = { } ;
90+ const defaultRepeatingConicGradientVariants = [ 'responsive' ] ;
7091
7192 const backgroundImageVariants = variants ( 'backgroundImage' , defaultBackgroundImageVariants ) ;
7293 const linearGradientDirections = theme ( 'linearGradients.directions' , defaultLinearGradientDirections ) ;
@@ -77,6 +98,10 @@ module.exports = function() {
7798 const radialGradientPositions = theme ( 'radialGradients.positions' , defaultRadialGradientPositions ) ;
7899 const radialGradientColors = theme ( 'radialGradients.colors' , defaultRadialGradientColors ) ;
79100 const radialGradientVariants = variants ( 'radialGradients' , defaultRadialGradientVariants ) ;
101+ const conicGradientStartingAngles = theme ( 'conicGradients.startingAngles' , defaultConicGradientStartingAngles ) ;
102+ const conicGradientPositions = theme ( 'conicGradients.positions' , defaultConicGradientPositions ) ;
103+ const conicGradientColors = theme ( 'conicGradients.colors' , defaultConicGradientColors ) ;
104+ const conicGradientVariants = variants ( 'conicGradients' , defaultConicGradientVariants ) ;
80105 const repeatingLinearGradientDirections = theme ( 'repeatingLinearGradients.directions' , defaultRepeatingLinearGradientDirections ) ;
81106 const repeatingLinearGradientColors = theme ( 'repeatingLinearGradients.colors' , defaultRepeatingLinearGradientColors ) ;
82107 const repeatingLinearGradientLengths = theme ( 'repeatingLinearGradients.lengths' , defaultRepeatingLinearGradientLengths ) ;
@@ -87,6 +112,11 @@ module.exports = function() {
87112 const repeatingRadialGradientColors = theme ( 'repeatingRadialGradients.colors' , defaultRepeatingRadialGradientColors ) ;
88113 const repeatingRadialGradientLengths = theme ( 'repeatingRadialGradients.lengths' , defaultRepeatingRadialGradientLengths ) ;
89114 const repeatingRadialGradientVariants = variants ( 'repeatingRadialGradients' , defaultRepeatingRadialGradientVariants ) ;
115+ const repeatingConicGradientStartingAngles = theme ( 'repeatingConicGradients.startingAngles' , defaultRepeatingConicGradientStartingAngles ) ;
116+ const repeatingConicGradientPositions = theme ( 'repeatingConicGradients.positions' , defaultRepeatingConicGradientPositions ) ;
117+ const repeatingConicGradientColors = theme ( 'repeatingConicGradients.colors' , defaultRepeatingConicGradientColors ) ;
118+ const repeatingConicGradientLengths = theme ( 'repeatingConicGradients.lengths' , defaultRepeatingConicGradientLengths ) ;
119+ const repeatingConicGradientVariants = variants ( 'repeatingConicGradients' , defaultRepeatingConicGradientVariants ) ;
90120
91121 const linearGradientSelector = function ( directionKey , colorKey , lengthKey ) {
92122 return `.${ e ( `bg-gradient-${ directionKey } ${ colorKey } ${ lengthKey ? `-${ lengthKey } : '' } ) } ;
@@ -105,7 +135,7 @@ module.exports = function() {
105135 const cssDefaultRadialGradientShape = 'ellipse' ;
106136 const cssDefaultRadialGradientSize = 'farthest-corner' ;
107137 const cssDefaultRadialGradientPositions = [ 'center' , 'center center' , '50%' , '50% 50%' , 'center 50%' , '50% center' ] ;
108- let firstArgumentValues = [ ] ;
138+ const firstArgumentValues = [ ] ;
109139 if ( shape !== cssDefaultRadialGradientShape ) {
110140 firstArgumentValues . push ( shape ) ;
111141 }
@@ -118,14 +148,31 @@ module.exports = function() {
118148 return `${ ! _ . isNil ( length ) ? 'repeating-' : '' } ${ firstArgumentValues . length > 0 ? `${ firstArgumentValues . join ( ' ' ) } : '' } ${ colors . join ( ', ' ) } ${ length ? ` ${ length } : '' } ;
119149 } ;
120150
151+ const conicGradientSelector = function ( startingAngleKey , positionKey , colorKey , lengthKey ) {
152+ return `.${ e ( `bg-conic${ startingAngleKey === 'default' ? '' : `-${ startingAngleKey } } ${ positionKey === 'default' ? '' : `-${ positionKey } } ${ colorKey } ${ lengthKey ? `-${ lengthKey } : '' } ) } ;
153+ } ;
154+
155+ const conicGradientValue = function ( startingAngle , position , colors , length ) {
156+ const cssDefaultConicGradientStartingAngles = [ '0' , '0deg' , '0%' , '0turn' , '0grad' , '0rad' ] ;
157+ const cssDefaultConicGradientPositions = [ 'center' , 'center center' , '50%' , '50% 50%' , 'center 50%' , '50% center' ] ;
158+ const firstArgumentValues = [ ] ;
159+ if ( ! _ . includes ( cssDefaultConicGradientStartingAngles , startingAngle ) ) {
160+ firstArgumentValues . push ( `from ${ startingAngle } ) ;
161+ }
162+ if ( ! _ . includes ( cssDefaultConicGradientPositions , position ) ) {
163+ firstArgumentValues . push ( `at ${ position } ) ;
164+ }
165+ return `${ ! _ . isNil ( length ) ? 'repeating-' : '' } ${ firstArgumentValues . length > 0 ? `${ firstArgumentValues . join ( ' ' ) } : '' } ${ colors . join ( ', ' ) } ${ length ? ` ${ length } : '' } ;
166+ } ;
167+
121168 const backgroundImageUtilities = {
122169 '.bg-none' : {
123170 backgroundImage : 'none' ,
124171 } ,
125172 } ;
126173
127174 const linearGradientUtilities = ( function ( ) {
128- let utilities = { } ;
175+ const utilities = { } ;
129176 _ . forEach ( linearGradientColors , ( colors , colorKey ) => {
130177 colors = normalizeColors ( colors , true ) ;
131178 if ( ! colors ) {
@@ -141,7 +188,7 @@ module.exports = function() {
141188 } ) ( ) ;
142189
143190 const radialGradientUtilities = ( function ( ) {
144- let utilities = { } ;
191+ const utilities = { } ;
145192 _ . forEach ( radialGradientColors , ( colors , colorKey ) => {
146193 colors = normalizeColors ( colors , false ) ;
147194 if ( ! colors ) {
@@ -160,8 +207,26 @@ module.exports = function() {
160207 return utilities ;
161208 } ) ( ) ;
162209
210+ const conicGradientUtilities = ( function ( ) {
211+ const utilities = { } ;
212+ _ . forEach ( conicGradientColors , ( colors , colorKey ) => {
213+ colors = normalizeColors ( colors , false ) ;
214+ if ( ! colors ) {
215+ return ; // continue
216+ }
217+ _ . forEach ( conicGradientPositions , ( position , positionKey ) => {
218+ _ . forEach ( conicGradientStartingAngles , ( startingAngle , startingAngleKey ) => {
219+ utilities [ conicGradientSelector ( startingAngleKey , positionKey , colorKey ) ] = {
220+ backgroundImage : conicGradientValue ( startingAngle , position , colors ) ,
221+ } ;
222+ } ) ;
223+ } ) ;
224+ } ) ;
225+ return utilities ;
226+ } ) ( ) ;
227+
163228 const repeatingLinearGradientUtilities = ( function ( ) {
164- let utilities = { } ;
229+ const utilities = { } ;
165230 _ . forEach ( repeatingLinearGradientLengths , ( length , lengthKey ) => {
166231 _ . forEach ( repeatingLinearGradientColors , ( colors , colorKey ) => {
167232 colors = normalizeColors ( colors , true ) ;
@@ -179,7 +244,7 @@ module.exports = function() {
179244 } ) ( ) ;
180245
181246 const repeatingRadialGradientUtilities = ( function ( ) {
182- let utilities = { } ;
247+ const utilities = { } ;
183248 _ . forEach ( repeatingRadialGradientLengths , ( length , lengthKey ) => {
184249 _ . forEach ( repeatingRadialGradientColors , ( colors , colorKey ) => {
185250 colors = normalizeColors ( colors , false ) ;
@@ -200,10 +265,32 @@ module.exports = function() {
200265 return utilities ;
201266 } ) ( ) ;
202267
268+ const repeatingConicGradientUtilities = ( function ( ) {
269+ const utilities = { } ;
270+ _ . forEach ( repeatingConicGradientLengths , ( length , lengthKey ) => {
271+ _ . forEach ( repeatingConicGradientColors , ( colors , colorKey ) => {
272+ colors = normalizeColors ( colors , false ) ;
273+ if ( ! colors ) {
274+ return ; // continue
275+ }
276+ _ . forEach ( repeatingConicGradientPositions , ( position , positionKey ) => {
277+ _ . forEach ( repeatingConicGradientStartingAngles , ( startingAngle , startingAngleKey ) => {
278+ utilities [ conicGradientSelector ( startingAngleKey , positionKey , colorKey , lengthKey ) ] = {
279+ backgroundImage : conicGradientValue ( startingAngle , position , colors , length ) ,
280+ } ;
281+ } ) ;
282+ } ) ;
283+ } ) ;
284+ } ) ;
285+ return utilities ;
286+ } ) ( ) ;
287+
203288 addUtilities ( backgroundImageUtilities , backgroundImageVariants ) ;
204289 addUtilities ( linearGradientUtilities , linearGradientVariants ) ;
205290 addUtilities ( radialGradientUtilities , radialGradientVariants ) ;
291+ addUtilities ( conicGradientUtilities , conicGradientVariants ) ;
206292 addUtilities ( repeatingLinearGradientUtilities , repeatingLinearGradientVariants ) ;
207293 addUtilities ( repeatingRadialGradientUtilities , repeatingRadialGradientVariants ) ;
294+ addUtilities ( repeatingConicGradientUtilities , repeatingConicGradientVariants ) ;
208295 } ;
209296} ;
0 commit comments