diff --git a/coverage/lcov.info b/coverage/lcov.info
index c7a6602f2..4b9f05996 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -71,41 +71,6 @@ DA:180,12
 LF:69
 LH:51
 end_of_record
-SF:lib/src/widgets/gap_widget.dart
-DA:9,1
-DA:13,1
-DA:15,2
-DA:18,0
-DA:20,0
-DA:27,1
-DA:30,1
-DA:31,1
-DA:33,1
-DA:34,1
-DA:38,0
-DA:39,0
-DA:40,0
-DA:41,0
-DA:42,0
-DA:45,1
-DA:47,1
-DA:48,1
-DA:52,2
-DA:53,0
-DA:54,1
-DA:55,2
-DA:56,0
-DA:57,1
-DA:58,1
-DA:59,3
-DA:60,3
-DA:63,1
-DA:68,0
-DA:70,0
-DA:71,0
-LF:31
-LH:19
-end_of_record
 SF:lib/src/attributes/border/border_dto.dart
 DA:21,9
 DA:30,5
@@ -319,43 +284,43 @@ DA:39,1
 DA:43,1
 DA:51,3
 DA:52,3
-DA:76,3
-DA:77,15
-DA:102,1
-DA:103,3
-DA:128,1
-DA:129,3
-DA:154,1
-DA:155,3
-DA:180,1
-DA:181,3
-DA:204,0
-DA:205,0
-DA:227,0
-DA:250,1
-DA:251,5
-DA:275,1
-DA:276,1
-DA:277,4
-DA:281,0
-DA:282,0
-DA:285,1
-DA:293,2
-DA:294,1
-DA:321,0
-DA:327,0
-DA:359,3
-DA:361,1
-DA:367,3
-DA:392,4
-DA:409,1
-DA:410,3
-DA:424,2
-DA:438,2
+DA:75,3
+DA:76,15
+DA:100,1
+DA:101,3
+DA:125,1
+DA:126,3
+DA:150,1
+DA:151,3
+DA:175,1
+DA:176,3
+DA:199,0
+DA:200,0
+DA:222,0
+DA:244,1
+DA:245,5
+DA:268,1
+DA:269,1
+DA:270,4
+DA:274,0
+DA:275,0
+DA:278,1
+DA:286,2
+DA:287,1
+DA:314,0
+DA:320,0
+DA:352,3
+DA:354,1
+DA:360,3
+DA:385,4
+DA:402,1
+DA:403,3
+DA:417,2
+DA:431,2
+DA:450,3
+DA:456,3
 DA:457,3
-DA:463,3
-DA:464,3
-DA:470,6
+DA:463,6
 LF:42
 LH:35
 end_of_record
@@ -374,8 +339,9 @@ LF:10
 LH:10
 end_of_record
 SF:lib/src/attributes/color/color_util.dart
-DA:14,12
-DA:16,0
+DA:13,12
+DA:15,30
+DA:17,0
 DA:18,0
 DA:19,0
 DA:20,0
@@ -444,8 +410,8 @@ DA:82,0
 DA:83,0
 DA:84,0
 DA:85,0
-DA:86,0
-DA:88,0
+DA:87,0
+DA:89,0
 DA:90,0
 DA:91,0
 DA:92,0
@@ -462,11 +428,10 @@ DA:102,0
 DA:103,0
 DA:104,0
 DA:105,0
-DA:106,0
-DA:112,0
+DA:107,12
 DA:113,0
-DA:119,0
-DA:121,0
+DA:114,0
+DA:120,0
 DA:122,0
 DA:123,0
 DA:124,0
@@ -476,210 +441,16 @@ DA:127,0
 DA:128,0
 DA:129,0
 DA:130,0
-DA:132,0
-DA:138,0
-DA:140,0
+DA:131,0
+DA:133,0
+DA:139,0
 DA:141,0
 DA:142,0
 DA:143,0
-DA:145,0
-LF:109
-LH:1
-end_of_record
-SF:lib/src/attributes/scalars/scalar_util.dart
-DA:11,30
-DA:13,19
-DA:14,19
-DA:18,376
-DA:26,20
-DA:29,10
-DA:34,15
-DA:39,30
-DA:44,13
-DA:46,0
-DA:48,12
-DA:53,6
-DA:55,3
-DA:56,6
-DA:57,3
-DA:58,6
-DA:59,12
-DA:60,6
-DA:61,3
-DA:62,3
-DA:63,3
-DA:64,1
-DA:65,1
-DA:69,3
-DA:70,3
-DA:85,4
-DA:99,1
-DA:115,0
-DA:117,0
-DA:133,1
-DA:135,0
-DA:136,0
-DA:156,2
-DA:157,3
-DA:158,6
-DA:163,2
-DA:164,3
-DA:165,3
-DA:181,6
-DA:182,3
-DA:183,3
-DA:184,9
-DA:185,9
-DA:201,1
-DA:202,3
-DA:203,3
-DA:208,0
-DA:226,2
-DA:228,3
-DA:229,2
-DA:232,6
-DA:233,3
-DA:234,3
-DA:249,2
-DA:250,6
-DA:251,6
-DA:267,2
-DA:268,3
-DA:269,6
-DA:270,3
-DA:286,3
-DA:287,3
-DA:288,9
-DA:304,2
-DA:305,6
-DA:306,3
-DA:307,3
-DA:308,0
-DA:324,1
-DA:326,4
-DA:345,2
-DA:347,4
-DA:348,4
-DA:349,4
-DA:350,4
-DA:351,1
-DA:352,3
-DA:368,2
-DA:369,3
-DA:370,3
-DA:371,3
-DA:373,3
-DA:374,3
-DA:375,3
-DA:391,2
-DA:392,3
-DA:393,3
-DA:394,3
-DA:395,3
-DA:396,3
-DA:412,2
-DA:413,3
-DA:414,6
-DA:426,1
-DA:444,1
-DA:445,3
-DA:446,3
-DA:447,3
-DA:448,3
-DA:461,1
-DA:463,4
-DA:467,1
-DA:486,1
-DA:487,3
-DA:488,3
-DA:489,3
-DA:490,3
-DA:491,3
-DA:492,3
-DA:493,3
-DA:508,1
-DA:510,3
-DA:511,3
-DA:512,3
-DA:513,3
-DA:514,3
-DA:515,3
-DA:516,3
-DA:517,3
-DA:518,3
-DA:519,3
-DA:520,3
-DA:521,3
-DA:522,3
-DA:523,0
-DA:524,0
-DA:525,0
-DA:526,0
-DA:527,0
-DA:528,0
-DA:529,0
-DA:530,0
-DA:531,0
-DA:532,0
-DA:533,0
-DA:534,0
-DA:535,0
-DA:536,0
-DA:537,0
-DA:538,0
-DA:556,2
-DA:557,6
-DA:558,3
-DA:577,3
-DA:578,6
-DA:579,3
-DA:580,3
-DA:581,3
-DA:582,3
-DA:583,3
-DA:584,3
-DA:585,3
-DA:586,3
-DA:587,3
-DA:588,3
-DA:608,2
-DA:610,6
-DA:611,3
-DA:612,3
-DA:613,3
-DA:631,3
-DA:633,6
-DA:634,3
-DA:653,2
-DA:655,3
-DA:657,4
-DA:659,8
-DA:661,0
-DA:682,2
-DA:684,3
-DA:685,3
-DA:686,3
-DA:687,6
-DA:688,3
-DA:706,3
-DA:708,6
-DA:709,6
-DA:728,1
-DA:729,3
-DA:730,3
-DA:731,3
-DA:749,1
-DA:750,3
-DA:751,3
-DA:773,1
-DA:774,3
-DA:775,3
-DA:776,3
-DA:777,3
-DA:778,3
-DA:779,3
-LF:191
-LH:167
+DA:144,0
+DA:146,0
+LF:110
+LH:3
 end_of_record
 SF:lib/src/attributes/constraints/constraints_dto.dart
 DA:8,10
@@ -1057,6 +828,205 @@ DA:25,4
 LF:6
 LH:5
 end_of_record
+SF:lib/src/attributes/scalars/scalar_util.dart
+DA:11,30
+DA:13,19
+DA:14,19
+DA:18,386
+DA:26,20
+DA:29,10
+DA:34,13
+DA:36,0
+DA:38,12
+DA:48,6
+DA:51,3
+DA:54,6
+DA:57,3
+DA:60,6
+DA:63,12
+DA:66,6
+DA:69,3
+DA:72,3
+DA:75,3
+DA:86,1
+DA:87,1
+DA:92,3
+DA:93,3
+DA:107,4
+DA:109,4
+DA:110,8
+DA:124,1
+DA:139,0
+DA:141,0
+DA:143,0
+DA:144,0
+DA:159,1
+DA:161,0
+DA:162,0
+DA:164,1
+DA:165,2
+DA:185,2
+DA:186,3
+DA:187,6
+DA:192,2
+DA:193,3
+DA:194,3
+DA:210,6
+DA:211,3
+DA:212,3
+DA:213,9
+DA:214,9
+DA:230,1
+DA:231,3
+DA:232,3
+DA:237,0
+DA:255,2
+DA:257,3
+DA:258,2
+DA:261,6
+DA:262,3
+DA:263,3
+DA:278,2
+DA:279,6
+DA:280,6
+DA:296,2
+DA:297,3
+DA:298,6
+DA:299,3
+DA:315,3
+DA:316,3
+DA:317,9
+DA:333,2
+DA:334,6
+DA:335,3
+DA:336,3
+DA:337,0
+DA:352,1
+DA:354,4
+DA:373,2
+DA:375,4
+DA:376,4
+DA:377,4
+DA:378,4
+DA:379,1
+DA:380,3
+DA:396,2
+DA:397,3
+DA:398,3
+DA:399,3
+DA:401,3
+DA:402,3
+DA:403,3
+DA:419,2
+DA:420,3
+DA:421,3
+DA:422,3
+DA:423,3
+DA:424,3
+DA:440,2
+DA:441,3
+DA:442,6
+DA:454,1
+DA:472,1
+DA:473,3
+DA:474,3
+DA:475,3
+DA:476,3
+DA:488,1
+DA:490,4
+DA:494,1
+DA:513,1
+DA:514,3
+DA:515,3
+DA:516,3
+DA:517,3
+DA:518,3
+DA:519,3
+DA:520,3
+DA:535,1
+DA:537,3
+DA:538,3
+DA:539,3
+DA:540,3
+DA:541,3
+DA:542,3
+DA:543,3
+DA:544,3
+DA:545,3
+DA:546,3
+DA:547,3
+DA:548,3
+DA:549,3
+DA:550,0
+DA:551,0
+DA:552,0
+DA:553,0
+DA:554,0
+DA:555,0
+DA:556,0
+DA:557,0
+DA:558,0
+DA:559,0
+DA:560,0
+DA:561,0
+DA:562,0
+DA:563,0
+DA:564,0
+DA:565,0
+DA:583,2
+DA:584,6
+DA:585,3
+DA:604,3
+DA:605,6
+DA:606,3
+DA:607,3
+DA:608,3
+DA:609,3
+DA:610,3
+DA:611,3
+DA:612,3
+DA:613,3
+DA:614,3
+DA:615,3
+DA:635,2
+DA:637,6
+DA:638,3
+DA:639,3
+DA:640,3
+DA:658,3
+DA:660,6
+DA:661,3
+DA:680,2
+DA:682,3
+DA:684,4
+DA:686,8
+DA:688,0
+DA:709,2
+DA:711,3
+DA:712,3
+DA:713,3
+DA:714,6
+DA:715,3
+DA:733,3
+DA:735,6
+DA:736,6
+DA:755,1
+DA:756,3
+DA:757,3
+DA:758,3
+DA:776,1
+DA:777,3
+DA:778,3
+DA:800,1
+DA:801,3
+DA:802,3
+DA:803,3
+DA:804,3
+DA:805,3
+DA:806,3
+LF:195
+LH:169
+end_of_record
 SF:lib/src/attributes/scalars/scalars_attribute.dart
 DA:10,21
 DA:12,8
@@ -1145,9 +1115,10 @@ DA:211,2
 DA:217,2
 DA:218,2
 DA:232,1
-DA:244,1
-DA:245,2
-DA:247,4
+DA:243,1
+DA:244,2
+DA:246,4
+DA:250,0
 DA:251,0
 DA:252,0
 DA:253,0
@@ -1158,7 +1129,6 @@ DA:257,0
 DA:258,0
 DA:259,0
 DA:260,0
-DA:261,0
 LF:45
 LH:33
 end_of_record
@@ -1279,7 +1249,7 @@ LF:61
 LH:45
 end_of_record
 SF:lib/src/attributes/strut_style/strut_style_dto.dart
-DA:17,5
+DA:17,7
 DA:28,2
 DA:29,2
 DA:30,2
@@ -1292,26 +1262,26 @@ DA:36,2
 DA:37,2
 DA:41,0
 DA:42,0
-DA:45,1
-DA:49,1
-DA:50,2
-DA:51,2
-DA:52,2
-DA:53,1
-DA:54,2
-DA:55,1
-DA:56,1
-DA:57,2
-DA:61,4
-DA:65,4
-DA:66,5
-DA:67,6
-DA:68,4
-DA:69,5
-DA:70,5
-DA:71,5
-DA:72,5
-DA:73,6
+DA:45,2
+DA:49,2
+DA:50,3
+DA:51,4
+DA:52,3
+DA:53,2
+DA:54,4
+DA:55,3
+DA:56,3
+DA:57,4
+DA:61,5
+DA:65,5
+DA:66,6
+DA:67,8
+DA:68,5
+DA:69,7
+DA:70,7
+DA:71,6
+DA:72,7
+DA:73,8
 DA:77,2
 DA:78,2
 DA:79,2
@@ -1350,7 +1320,7 @@ LF:20
 LH:17
 end_of_record
 SF:lib/src/attributes/text_directives_util.dart
-DA:5,76
+DA:5,78
 DA:6,1
 DA:7,2
 DA:9,2
@@ -1369,7 +1339,7 @@ LF:15
 LH:13
 end_of_record
 SF:lib/src/attributes/text_style/text_style_dto.dart
-DA:41,5
+DA:41,6
 DA:65,0
 DA:89,1
 DA:90,1
@@ -1398,64 +1368,64 @@ DA:112,1
 DA:113,1
 DA:117,0
 DA:118,0
-DA:121,8
-DA:123,1
-DA:127,2
-DA:131,1
-DA:132,2
-DA:133,2
-DA:134,1
-DA:135,2
-DA:136,1
-DA:137,1
-DA:138,1
-DA:139,2
-DA:140,2
-DA:141,1
-DA:142,1
-DA:143,1
-DA:145,2
-DA:146,1
-DA:147,1
-DA:148,1
-DA:149,2
-DA:150,1
-DA:151,1
-DA:152,1
-DA:153,2
-DA:154,1
-DA:155,1
-DA:159,4
-DA:161,4
-DA:162,4
-DA:163,8
-DA:164,5
-DA:165,4
-DA:166,4
-DA:167,4
-DA:168,4
-DA:169,4
-DA:170,4
-DA:171,4
-DA:172,4
-DA:173,4
-DA:174,4
-DA:175,8
-DA:176,4
-DA:177,4
-DA:178,6
-DA:179,4
-DA:180,4
-DA:181,4
-DA:182,4
-DA:183,4
-DA:185,0
-DA:188,2
-DA:189,2
-DA:190,2
-DA:191,2
-DA:192,2
-DA:193,2
+DA:121,10
+DA:123,2
+DA:127,4
+DA:131,2
+DA:132,4
+DA:133,4
+DA:134,3
+DA:135,4
+DA:136,3
+DA:137,3
+DA:138,3
+DA:139,4
+DA:140,3
+DA:141,2
+DA:142,2
+DA:143,2
+DA:145,4
+DA:146,2
+DA:147,3
+DA:148,2
+DA:149,4
+DA:150,3
+DA:151,3
+DA:152,3
+DA:153,4
+DA:154,3
+DA:155,3
+DA:159,5
+DA:161,5
+DA:162,5
+DA:163,9
+DA:164,6
+DA:165,5
+DA:166,5
+DA:167,5
+DA:168,5
+DA:169,5
+DA:170,5
+DA:171,5
+DA:172,5
+DA:173,5
+DA:174,5
+DA:175,9
+DA:176,5
+DA:177,5
+DA:178,7
+DA:179,5
+DA:180,5
+DA:181,5
+DA:182,5
+DA:183,5
+DA:185,0
+DA:188,2
+DA:189,2
+DA:190,2
+DA:191,2
+DA:192,2
+DA:193,2
 DA:194,2
 DA:195,2
 DA:196,2
@@ -1474,23 +1444,23 @@ DA:208,2
 DA:209,2
 DA:210,2
 DA:211,2
-DA:218,5
-DA:220,4
-DA:243,8
-DA:268,15
+DA:218,6
+DA:220,5
+DA:243,10
+DA:268,18
 DA:270,0
 DA:271,0
 DA:274,1
 DA:275,2
 DA:278,0
 DA:279,0
-DA:288,4
-DA:290,4
-DA:291,12
-DA:292,6
-DA:293,4
-DA:296,1
-DA:298,4
+DA:288,5
+DA:290,5
+DA:291,15
+DA:292,9
+DA:293,5
+DA:296,2
+DA:298,8
 DA:301,2
 DA:302,4
 LF:124
@@ -1557,64 +1527,60 @@ LF:56
 LH:30
 end_of_record
 SF:lib/src/attributes/variant_attribute.dart
-DA:15,5
-DA:17,8
-DA:19,1
-DA:21,3
-DA:23,5
-DA:26,3
-DA:27,6
-DA:29,1
-DA:30,3
+DA:13,5
+DA:15,8
+DA:17,1
+DA:19,3
+DA:21,5
+DA:24,3
+DA:25,6
+DA:27,1
+DA:28,3
+DA:38,4
 DA:40,4
-DA:42,4
-DA:43,12
-DA:45,1
-DA:47,3
-DA:49,5
+DA:41,12
+DA:43,1
+DA:45,3
+DA:47,5
+DA:51,0
+DA:52,0
 DA:53,0
-DA:54,0
-DA:55,0
-DA:64,1
+DA:62,1
+DA:65,1
+DA:66,2
 DA:67,1
-DA:68,2
+DA:68,0
 DA:69,1
 DA:70,0
-DA:71,1
-DA:72,0
-DA:75,2
-DA:78,1
-DA:79,2
-DA:81,0
+DA:73,2
+DA:76,1
+DA:77,2
+DA:79,0
+DA:80,0
 DA:82,0
 DA:84,0
 DA:86,0
-DA:88,0
-DA:94,0
-DA:96,0
-DA:98,0
-DA:100,0
-LF:37
+LF:33
 LH:23
 end_of_record
 SF:lib/src/core/attribute.dart
-DA:8,353
-DA:16,48
-DA:68,346
-DA:77,246
+DA:8,362
+DA:16,50
+DA:68,355
+DA:77,253
 DA:82,12
-DA:99,547
+DA:99,562
 LF:6
 LH:6
 end_of_record
 SF:lib/src/core/attributes_map.dart
-DA:11,45
-DA:13,76
-DA:15,45
-DA:16,90
-DA:19,45
-DA:22,45
-DA:23,66
+DA:11,46
+DA:13,78
+DA:15,46
+DA:16,92
+DA:19,46
+DA:22,46
+DA:23,67
 DA:24,21
 DA:27,21
 DA:28,9
@@ -1624,12 +1590,12 @@ DA:38,6
 DA:45,9
 DA:47,6
 DA:49,3
-DA:51,156
+DA:51,159
 DA:53,8
 DA:55,3
 DA:57,3
-DA:59,39
-DA:60,101
+DA:59,40
+DA:60,103
 DA:62,6
 DA:63,24
 DA:66,3
@@ -1639,11 +1605,11 @@ LF:27
 LH:27
 end_of_record
 SF:lib/src/core/decorator.dart
-DA:7,80
-DA:13,80
+DA:7,82
+DA:13,82
 DA:18,1
-DA:26,80
-DA:31,78
+DA:26,82
+DA:31,80
 LF:5
 LH:5
 end_of_record
@@ -1763,14 +1729,14 @@ DA:23,1
 DA:24,2
 DA:26,2
 DA:28,6
-DA:33,77
+DA:33,79
 DA:35,1
 DA:37,4
 DA:40,1
 DA:41,2
 DA:43,2
 DA:45,6
-DA:52,78
+DA:52,80
 DA:54,1
 DA:56,1
 DA:57,3
@@ -1794,7 +1760,7 @@ DA:96,1
 DA:97,2
 DA:99,2
 DA:100,6
-DA:105,78
+DA:105,80
 DA:107,1
 DA:109,4
 DA:112,1
@@ -1852,7 +1818,7 @@ DA:220,2
 DA:221,2
 DA:222,2
 DA:224,2
-DA:235,75
+DA:235,77
 DA:236,1
 DA:238,1
 DA:239,3
@@ -1919,172 +1885,172 @@ LH:25
 end_of_record
 SF:lib/src/deprecations.dart
 DA:10,0
-DA:12,0
-DA:15,0
-DA:17,0
+DA:11,0
+DA:13,0
+DA:14,0
+DA:16,0
 DA:20,0
-DA:24,0
-DA:27,0
+DA:22,0
+DA:23,0
+DA:25,0
 DA:29,0
+DA:30,0
 DA:32,0
-DA:36,0
-DA:38,0
-DA:41,0
-DA:43,0
+DA:33,0
+DA:35,0
+DA:39,0
+DA:42,0
 DA:46,0
+DA:49,0
 DA:50,0
-DA:53,0
-DA:57,0
+DA:59,0
 DA:60,0
+DA:61,0
 DA:62,0
-DA:72,0
+DA:63,0
+DA:64,0
+DA:65,0
+DA:66,0
+DA:67,0
+DA:68,0
+DA:69,0
+DA:70,0
 DA:73,0
-DA:74,0
 DA:75,0
-DA:76,0
-DA:77,0
-DA:78,0
 DA:79,0
-DA:80,0
-DA:81,0
 DA:82,0
-DA:83,0
-DA:86,0
+DA:85,0
 DA:88,0
-DA:92,0
-DA:95,0
-DA:98,0
-DA:101,0
-DA:104,0
-DA:107,0
-DA:110,0
-DA:113,0
-DA:116,0
-DA:119,0
-DA:122,0
-DA:125,0
-DA:128,0
+DA:91,0
+DA:94,0
+DA:97,0
+DA:100,0
+DA:103,0
+DA:106,0
+DA:109,0
+DA:112,0
+DA:115,0
+DA:121,0
+DA:123,0
+DA:127,0
+DA:131,0
 DA:134,0
-DA:136,0
+DA:137,0
 DA:140,0
-DA:144,0
-DA:147,0
-DA:150,0
-DA:153,0
-DA:156,0
-DA:159,0
-DA:162,0
-DA:165,0
-DA:168,0
-DA:171,0
-DA:174,0
-DA:177,0
-DA:180,0
-DA:183,0
-DA:186,0
-DA:189,0
-DA:192,0
-DA:195,0
-DA:198,0
-DA:201,0
-DA:204,0
-DA:207,0
-DA:210,0
-DA:213,0
-DA:216,0
+DA:143,0
+DA:146,0
+DA:149,0
+DA:152,0
+DA:155,0
+DA:158,0
+DA:161,0
+DA:164,0
+DA:167,0
+DA:170,0
+DA:173,0
+DA:176,0
+DA:179,0
+DA:182,0
+DA:185,0
+DA:188,0
+DA:191,0
+DA:194,0
+DA:197,0
+DA:200,0
+DA:203,0
+DA:206,0
+DA:209,0
+DA:212,0
+DA:215,0
+DA:217,0
 DA:219,0
-DA:222,0
+DA:221,0
+DA:223,0
 DA:225,0
-DA:228,0
-DA:230,0
-DA:232,0
-DA:234,0
+DA:227,0
+DA:229,0
+DA:231,0
+DA:233,0
 DA:236,0
-DA:238,0
-DA:240,0
+DA:239,0
 DA:242,0
-DA:244,0
-DA:246,0
-DA:249,0
-DA:252,0
-DA:255,0
-DA:258,0
+DA:245,0
+DA:247,0
+DA:248,0
+DA:250,0
+DA:251,0
+DA:253,0
+DA:254,0
+DA:257,0
 DA:260,0
-DA:261,0
 DA:263,0
-DA:264,0
 DA:266,0
-DA:267,0
-DA:270,0
-DA:273,0
-DA:276,0
-DA:279,0
-DA:282,0
-DA:285,0
-DA:288,0
-DA:291,0
-DA:294,0
-DA:297,0
-DA:300,0
-DA:303,0
-DA:306,0
-DA:309,0
-DA:312,0
-DA:315,0
-DA:318,0
-DA:321,0
-DA:324,0
-DA:327,0
+DA:269,0
+DA:272,0
+DA:275,0
+DA:278,0
+DA:281,0
+DA:284,0
+DA:287,0
+DA:290,0
+DA:293,0
+DA:296,0
+DA:299,0
+DA:302,0
+DA:305,0
+DA:308,0
+DA:311,0
+DA:314,0
+DA:317,0
+DA:320,0
+DA:323,0
+DA:326,0
 DA:330,0
-DA:333,0
-DA:336,0
-DA:339,0
+DA:334,0
+DA:337,0
+DA:340,0
 DA:343,0
-DA:347,0
-DA:350,0
-DA:353,0
-DA:356,0
-DA:359,0
-DA:362,0
-DA:365,0
-DA:368,0
-DA:371,0
-DA:374,0
-DA:377,0
-DA:380,0
-DA:383,0
-DA:386,0
-DA:389,0
-DA:392,0
-DA:395,0
-DA:398,0
-DA:401,0
-DA:404,0
-DA:407,0
-DA:410,0
-DA:413,0
-DA:416,0
-DA:419,0
-DA:422,0
-DA:425,0
-DA:428,0
-DA:431,0
-DA:434,0
-DA:437,0
-DA:440,0
-DA:443,0
-DA:446,0
-DA:449,0
-DA:452,0
-DA:455,0
-DA:458,0
-DA:464,0
-DA:467,0
-DA:470,0
-DA:476,0
-DA:481,0
-DA:484,0
-DA:487,0
+DA:346,0
+DA:349,0
+DA:352,0
+DA:355,0
+DA:358,0
+DA:361,0
+DA:364,0
+DA:367,0
+DA:370,0
+DA:373,0
+DA:376,0
+DA:379,0
+DA:382,0
+DA:385,0
+DA:388,0
+DA:391,0
+DA:394,0
+DA:397,0
+DA:400,0
+DA:403,0
+DA:406,0
+DA:409,0
+DA:412,0
+DA:415,0
+DA:418,0
+DA:421,0
+DA:424,0
+DA:427,0
+DA:430,0
+DA:433,0
+DA:436,0
+DA:439,0
+DA:442,0
+DA:445,0
+DA:451,0
+DA:454,0
+DA:457,0
+DA:463,0
+DA:468,0
+DA:471,0
+DA:474,0
 LF:167
 LH:0
 end_of_record
@@ -2104,11 +2070,11 @@ LF:11
 LH:5
 end_of_record
 SF:lib/src/factory/mix_provider_data.dart
-DA:25,38
-DA:31,38
-DA:32,38
-DA:34,38
-DA:36,76
+DA:25,39
+DA:31,39
+DA:32,39
+DA:34,39
+DA:36,78
 DA:42,20
 DA:47,1
 DA:48,1
@@ -2132,12 +2098,12 @@ DA:79,1
 DA:80,3
 DA:85,0
 DA:86,0
-DA:89,38
-DA:94,114
-DA:96,76
-DA:97,76
-DA:100,38
-DA:101,114
+DA:89,39
+DA:94,117
+DA:96,78
+DA:97,78
+DA:100,39
+DA:101,117
 DA:104,1
 DA:105,1
 DA:107,2
@@ -2173,16 +2139,16 @@ DA:40,0
 DA:41,0
 DA:42,0
 DA:43,0
-DA:48,215
-DA:52,44
+DA:48,220
+DA:52,45
 DA:68,20
 DA:90,20
 DA:93,20
 DA:95,20
-DA:107,44
-DA:108,44
-DA:109,44
-DA:111,64
+DA:107,45
+DA:108,45
+DA:109,45
+DA:111,65
 DA:112,20
 DA:113,20
 DA:114,4
@@ -2191,9 +2157,9 @@ DA:116,3
 DA:117,8
 DA:118,8
 DA:120,2
-DA:124,44
-DA:125,44
-DA:126,44
+DA:124,45
+DA:125,45
+DA:126,45
 DA:139,1
 DA:140,1
 DA:142,3
@@ -2204,59 +2170,59 @@ DA:164,18
 DA:167,5
 DA:170,2
 DA:175,3
-DA:202,1
-DA:203,2
-DA:214,0
-DA:215,0
-DA:220,5
-DA:224,5
-DA:225,0
-DA:226,0
-DA:236,6
-DA:239,15
-DA:240,15
-DA:242,5
-DA:271,1
-DA:273,1
-DA:278,1
-DA:279,1
-DA:283,1
-DA:288,3
-DA:289,1
-DA:290,1
+DA:205,1
+DA:206,2
+DA:217,0
+DA:218,0
+DA:223,5
+DA:227,5
+DA:228,0
+DA:229,0
+DA:239,6
+DA:242,15
+DA:243,15
+DA:245,5
+DA:274,1
+DA:276,1
+DA:281,1
+DA:282,1
+DA:286,1
+DA:291,3
 DA:292,1
-DA:297,2
+DA:293,1
+DA:295,1
 DA:300,2
-DA:301,1
-DA:303,1
-DA:308,1
-DA:309,1
-DA:310,1
-DA:314,1
-DA:320,5
-DA:323,1
+DA:303,2
+DA:304,1
+DA:306,1
+DA:311,1
+DA:312,1
+DA:313,1
+DA:317,1
+DA:323,5
 DA:326,1
-DA:352,1
-DA:356,1
-DA:360,3
-DA:361,2
-DA:362,1
-DA:365,2
-DA:369,4
-DA:371,1
-DA:397,1
-DA:398,1
-DA:400,2
+DA:329,1
+DA:355,1
+DA:359,1
+DA:363,3
+DA:364,2
+DA:365,1
+DA:368,2
+DA:372,4
+DA:374,1
+DA:400,1
 DA:401,1
-DA:402,2
-DA:406,1
-DA:409,6
-DA:410,18
-DA:423,1
-DA:426,0
-DA:428,0
+DA:403,2
+DA:404,1
+DA:405,2
+DA:409,1
+DA:412,6
+DA:413,18
+DA:426,1
 DA:429,0
 DA:431,0
+DA:432,0
+DA:434,0
 LF:89
 LH:74
 end_of_record
@@ -2327,7 +2293,7 @@ LH:34
 end_of_record
 SF:lib/src/specs/container/box_spec.dart
 DA:21,6
-DA:33,150
+DA:33,154
 DA:44,4
 DA:45,8
 DA:49,1
@@ -2342,99 +2308,98 @@ DA:69,1
 DA:70,0
 DA:71,0
 DA:75,1
-DA:77,1
-DA:78,3
-DA:79,3
-DA:80,3
-DA:81,3
-DA:82,3
-DA:83,4
-DA:84,3
-DA:85,3
-DA:86,3
-DA:90,1
-DA:91,1
-DA:92,1
-DA:93,1
-DA:94,1
-DA:95,1
-DA:96,1
-DA:97,1
-DA:98,1
-DA:99,1
-DA:100,1
-DA:105,0
-DA:107,0
-DA:109,0
-DA:110,0
-DA:113,0
-LF:42
-LH:35
-end_of_record
-SF:lib/src/specs/container/box_util.dart
-DA:18,0
-DA:19,3
-DA:20,0
-DA:21,0
-DA:22,0
-DA:23,0
-DA:24,0
-DA:25,0
-DA:26,0
-DA:27,0
-DA:28,0
-DA:29,0
-DA:30,0
-DA:31,0
-DA:34,76
-DA:36,5
-DA:47,5
-DA:60,5
-DA:61,5
-DA:62,10
-DA:66,3
-DA:67,9
-DA:127,3
-DA:128,7
-DA:188,3
-DA:189,7
-DA:193,9
-DA:195,0
-DA:197,1
-DA:198,1
-DA:200,1
-DA:201,1
-DA:202,0
-DA:206,1
-DA:207,3
-DA:210,3
-DA:211,9
-DA:215,1
-DA:216,1
-DA:217,3
-DA:221,0
-DA:223,0
-DA:226,0
-DA:228,0
-DA:230,0
-DA:232,0
-DA:234,1
-DA:235,3
-DA:237,1
-DA:238,3
-DA:240,3
-DA:251,3
-DA:253,3
-DA:254,3
-DA:255,1
-DA:256,1
-DA:267,1
-DA:269,1
-DA:270,1
-DA:271,2
-DA:275,1
-DA:276,2
-LF:62
+DA:77,1
+DA:78,3
+DA:79,3
+DA:80,3
+DA:81,3
+DA:82,3
+DA:83,4
+DA:84,3
+DA:85,3
+DA:86,3
+DA:90,1
+DA:91,1
+DA:92,1
+DA:93,1
+DA:94,1
+DA:95,1
+DA:96,1
+DA:97,1
+DA:98,1
+DA:99,1
+DA:100,1
+DA:105,0
+DA:107,0
+DA:109,0
+DA:110,0
+DA:113,0
+LF:42
+LH:35
+end_of_record
+SF:lib/src/specs/container/box_util.dart
+DA:66,0
+DA:69,3
+DA:85,0
+DA:101,0
+DA:119,0
+DA:137,0
+DA:155,0
+DA:166,0
+DA:236,0
+DA:306,0
+DA:350,0
+DA:371,0
+DA:400,0
+DA:403,78
+DA:405,5
+DA:416,5
+DA:429,5
+DA:430,5
+DA:431,10
+DA:435,3
+DA:436,9
+DA:439,3
+DA:440,7
+DA:443,3
+DA:444,7
+DA:448,9
+DA:450,0
+DA:452,1
+DA:453,1
+DA:455,1
+DA:456,1
+DA:457,0
+DA:461,1
+DA:462,3
+DA:465,3
+DA:466,9
+DA:470,1
+DA:471,1
+DA:472,3
+DA:476,0
+DA:478,0
+DA:481,0
+DA:483,0
+DA:485,0
+DA:487,0
+DA:489,1
+DA:490,3
+DA:492,1
+DA:493,3
+DA:495,3
+DA:506,3
+DA:508,3
+DA:509,3
+DA:510,1
+DA:511,1
+DA:522,1
+DA:524,1
+DA:525,1
+DA:526,2
+DA:530,1
+DA:531,2
+LF:61
 LH:41
 end_of_record
 SF:lib/src/specs/container/box_widget.dart
@@ -2486,7 +2451,7 @@ LF:44
 LH:20
 end_of_record
 SF:lib/src/specs/flex/flex_attribute.dart
-DA:18,79
+DA:18,81
 DA:30,1
 DA:31,1
 DA:34,2
@@ -2527,7 +2492,7 @@ LH:36
 end_of_record
 SF:lib/src/specs/flex/flex_spec.dart
 DA:21,3
-DA:33,75
+DA:33,77
 DA:44,2
 DA:45,3
 DA:49,1
@@ -2653,7 +2618,7 @@ LH:9
 end_of_record
 SF:lib/src/specs/icon/icon_spec.dart
 DA:11,6
-DA:13,150
+DA:13,154
 DA:17,3
 DA:18,6
 DA:22,2
@@ -2668,7 +2633,7 @@ LF:12
 LH:10
 end_of_record
 SF:lib/src/specs/icon/icon_util.dart
-DA:11,75
+DA:11,77
 DA:13,0
 DA:14,0
 DA:17,0
@@ -2717,7 +2682,7 @@ LF:34
 LH:23
 end_of_record
 SF:lib/src/specs/image/image_attribute.dart
-DA:15,77
+DA:15,79
 DA:23,2
 DA:25,2
 DA:26,2
@@ -2763,7 +2728,7 @@ LF:21
 LH:15
 end_of_record
 SF:lib/src/specs/image/image_util.dart
-DA:11,75
+DA:11,77
 DA:13,0
 DA:14,0
 DA:17,0
@@ -2778,7 +2743,7 @@ LF:11
 LH:1
 end_of_record
 SF:lib/src/specs/stack/stack_attribute.dart
-DA:12,79
+DA:12,81
 DA:22,2
 DA:23,2
 DA:26,3
@@ -2800,7 +2765,7 @@ LH:17
 end_of_record
 SF:lib/src/specs/stack/stack_spec.dart
 DA:13,4
-DA:20,75
+DA:20,77
 DA:26,1
 DA:27,2
 DA:31,1
@@ -2821,7 +2786,7 @@ LF:18
 LH:14
 end_of_record
 SF:lib/src/specs/stack/stack_util.dart
-DA:9,75
+DA:9,77
 DA:11,1
 DA:17,1
 DA:25,1
@@ -2861,31 +2826,31 @@ LF:18
 LH:18
 end_of_record
 SF:lib/src/specs/text/text_attribute.dart
-DA:21,2
-DA:34,2
-DA:36,2
-DA:37,2
-DA:38,3
-DA:39,2
-DA:40,2
-DA:41,2
-DA:42,4
-DA:43,2
-DA:44,2
-DA:45,2
-DA:46,2
-DA:50,0
-DA:54,0
-DA:55,0
-DA:56,0
-DA:57,0
-DA:58,0
-DA:59,0
-DA:60,0
-DA:61,0
-DA:62,0
-DA:63,0
-DA:64,0
+DA:21,3
+DA:34,3
+DA:36,3
+DA:37,3
+DA:38,5
+DA:39,3
+DA:40,3
+DA:41,3
+DA:42,6
+DA:43,3
+DA:44,3
+DA:45,3
+DA:46,3
+DA:50,1
+DA:54,1
+DA:55,1
+DA:56,3
+DA:57,1
+DA:58,1
+DA:59,1
+DA:60,3
+DA:61,1
+DA:62,1
+DA:63,1
+DA:64,1
 DA:68,0
 DA:69,0
 DA:70,0
@@ -2899,11 +2864,11 @@ DA:77,0
 DA:78,0
 DA:79,0
 LF:37
-LH:13
+LH:25
 end_of_record
 SF:lib/src/specs/text/text_spec.dart
-DA:22,3
-DA:36,76
+DA:22,4
+DA:36,78
 DA:48,1
 DA:49,2
 DA:52,1
@@ -2946,7 +2911,7 @@ LF:40
 LH:30
 end_of_record
 SF:lib/src/specs/text/text_util.dart
-DA:16,75
+DA:16,77
 DA:18,1
 DA:30,1
 DA:44,1
@@ -3025,8 +2990,8 @@ DA:26,1
 DA:27,2
 DA:32,0
 DA:33,0
-DA:44,74
-DA:52,62
+DA:44,75
+DA:52,63
 DA:53,0
 DA:61,12
 DA:68,12
@@ -3057,7 +3022,7 @@ DA:125,0
 DA:128,48
 DA:137,48
 DA:143,48
-DA:154,38
+DA:154,39
 DA:156,6
 DA:158,3
 DA:160,3
@@ -3072,10 +3037,10 @@ LF:51
 LH:42
 end_of_record
 SF:lib/src/theme/tokens/breakpoints_token.dart
-DA:17,151
+DA:17,155
 DA:19,2
 DA:20,12
-DA:36,75
+DA:36,77
 DA:38,0
 DA:39,0
 DA:41,1
@@ -3090,7 +3055,7 @@ LF:14
 LH:8
 end_of_record
 SF:lib/src/theme/tokens/color_token.dart
-DA:13,78
+DA:13,80
 DA:16,3
 DA:17,3
 DA:24,3
@@ -3153,8 +3118,8 @@ DA:59,5
 DA:60,5
 DA:61,5
 DA:62,5
-DA:92,75
-DA:138,75
+DA:92,77
+DA:138,77
 DA:142,3
 DA:143,3
 DA:147,0
@@ -3201,7 +3166,7 @@ LF:88
 LH:48
 end_of_record
 SF:lib/src/theme/tokens/mix_token.dart
-DA:14,306
+DA:14,314
 DA:16,0
 DA:18,0
 DA:20,0
@@ -3210,8 +3175,8 @@ DA:30,9
 DA:32,12
 DA:35,13
 DA:36,39
-DA:56,87
-DA:59,75
+DA:56,89
+DA:59,77
 DA:61,21
 DA:65,0
 DA:66,0
@@ -3225,7 +3190,7 @@ LF:20
 LH:13
 end_of_record
 SF:lib/src/theme/tokens/radius_token.dart
-DA:16,76
+DA:16,78
 DA:18,1
 DA:19,1
 DA:21,1
@@ -3255,7 +3220,7 @@ DA:12,0
 DA:15,0
 DA:16,0
 DA:19,0
-DA:48,76
+DA:48,78
 DA:50,1
 DA:51,3
 DA:53,0
@@ -3266,7 +3231,7 @@ LF:12
 LH:3
 end_of_record
 SF:lib/src/theme/tokens/text_style_token.dart
-DA:10,76
+DA:10,78
 DA:12,1
 DA:13,1
 DA:15,2
@@ -3340,15 +3305,15 @@ end_of_record
 SF:lib/src/theme/tokens/token_util.dart
 DA:7,0
 DA:18,1
-DA:23,76
+DA:23,78
 DA:24,2
 DA:25,2
 DA:26,2
 DA:27,2
 DA:28,2
 DA:29,2
-DA:33,75
-DA:37,75
+DA:33,77
+DA:37,77
 LF:11
 LH:10
 end_of_record
@@ -3362,29 +3327,23 @@ DA:29,0
 DA:31,0
 DA:33,0
 DA:34,0
-DA:35,0
 DA:36,0
-DA:38,0
-DA:48,1
+DA:45,1
+DA:46,5
+DA:47,1
 DA:49,1
-DA:50,3
 DA:51,1
-DA:52,1
-DA:54,1
-DA:56,1
-LF:19
-LH:11
+LF:15
+LH:9
 end_of_record
 SF:lib/src/utils/context_variant_util/on_brightness_util.dart
 DA:10,9
 DA:13,9
 DA:20,3
-DA:21,3
+DA:21,15
 DA:22,9
-DA:23,3
-DA:24,9
-LF:7
-LH:7
+LF:5
+LH:5
 end_of_record
 SF:lib/src/utils/context_variant_util/on_directionality_util.dart
 DA:7,3
@@ -3397,10 +3356,10 @@ LF:6
 LH:6
 end_of_record
 SF:lib/src/utils/context_variant_util/on_helper_util.dart
-DA:12,2
-DA:13,2
-DA:14,4
-DA:15,6
+DA:10,2
+DA:11,2
+DA:12,4
+DA:13,6
 LF:4
 LH:4
 end_of_record
@@ -3410,86 +3369,109 @@ DA:14,3
 DA:23,1
 DA:24,1
 DA:25,3
-DA:26,1
-DA:27,2
-LF:7
-LH:7
+DA:26,3
+LF:6
+LH:6
 end_of_record
 SF:lib/src/utils/helper_util.dart
-DA:8,76
+DA:8,78
 DA:10,1
 DA:32,3
 DA:35,2
 LF:4
 LH:4
 end_of_record
-SF:lib/src/variants/context_variant.dart
-DA:50,11
-DA:52,3
-DA:75,3
-DA:78,3
-DA:81,6
-DA:84,1
-DA:85,3
-DA:90,2
-LF:8
-LH:8
-end_of_record
-SF:lib/src/variants/multi_variant.dart
-DA:57,3
-DA:59,3
-DA:63,3
-DA:64,15
-DA:65,12
-DA:67,3
-DA:73,3
-DA:74,3
-DA:80,2
-DA:81,2
-DA:84,0
-DA:85,0
+SF:lib/src/variants/variant.dart
+DA:44,79
+DA:56,3
+DA:68,3
+DA:74,1
+DA:96,1
+DA:99,1
 DA:101,2
-DA:102,6
-DA:104,4
-DA:105,2
-DA:106,0
-DA:125,2
-DA:126,2
-DA:127,4
-DA:129,4
-DA:130,4
-DA:131,2
-DA:149,1
-DA:150,2
-DA:152,2
-DA:153,4
-DA:154,4
-DA:155,4
-DA:162,1
-DA:185,1
-DA:188,1
-DA:190,2
-DA:193,0
-DA:194,0
-LF:35
-LH:30
+DA:104,3
+DA:105,6
+DA:148,11
+DA:150,3
+DA:173,3
+DA:176,3
+DA:179,6
+DA:182,1
+DA:183,3
+DA:234,3
+DA:236,3
+DA:240,3
+DA:241,15
+DA:242,12
+DA:244,3
+DA:250,3
+DA:251,3
+DA:257,2
+DA:258,2
+DA:274,2
+DA:275,6
+DA:277,4
+DA:278,2
+DA:279,0
+DA:298,2
+DA:299,2
+DA:300,4
+DA:302,4
+DA:303,4
+DA:304,2
+DA:322,1
+DA:323,2
+DA:325,2
+DA:326,4
+DA:327,4
+DA:328,4
+DA:335,1
+DA:358,1
+DA:361,1
+DA:363,2
+DA:366,0
+DA:367,0
+LF:49
+LH:46
 end_of_record
-SF:lib/src/variants/variant.dart
-DA:45,78
-DA:57,3
-DA:69,3
-DA:75,1
-DA:97,1
-DA:100,1
-DA:102,2
-DA:105,3
-DA:106,6
-LF:9
-LH:9
+SF:lib/src/widgets/gap_widget.dart
+DA:9,1
+DA:13,1
+DA:15,2
+DA:18,0
+DA:20,0
+DA:27,1
+DA:30,1
+DA:31,1
+DA:33,1
+DA:34,1
+DA:38,0
+DA:39,0
+DA:40,0
+DA:41,0
+DA:42,0
+DA:45,1
+DA:47,1
+DA:48,1
+DA:52,2
+DA:53,0
+DA:54,1
+DA:55,2
+DA:56,0
+DA:57,1
+DA:58,1
+DA:59,3
+DA:60,3
+DA:63,1
+DA:68,0
+DA:70,0
+DA:71,0
+LF:31
+LH:19
 end_of_record
 SF:lib/src/widgets/pressable/gesture_state.notifier.dart
 DA:12,4
-DA:19,61
+DA:19,62
 DA:25,2
 DA:31,2
 DA:32,0
@@ -3508,24 +3490,25 @@ LF:16
 LH:12
 end_of_record
 SF:lib/src/widgets/pressable/gesture_util.dart
-DA:5,3
-DA:6,3
+DA:7,3
 DA:8,3
-DA:9,6
-DA:11,3
-DA:13,4
-DA:16,3
-DA:18,4
-DA:21,1
-DA:22,1
-DA:23,3
-DA:24,4
-DA:28,2
-DA:29,2
-DA:30,6
-DA:31,8
-LF:16
-LH:16
+DA:10,3
+DA:11,6
+DA:13,3
+DA:15,4
+DA:18,3
+DA:20,4
+DA:25,2
+DA:28,1
+DA:29,1
+DA:30,3
+DA:31,4
+DA:35,2
+DA:36,2
+DA:37,6
+DA:38,8
+LF:17
+LH:17
 end_of_record
 SF:lib/src/widgets/pressable/gesture_widget.dart
 DA:8,0
@@ -3669,7 +3652,7 @@ LF:16
 LH:14
 end_of_record
 SF:lib/src/helpers/deep_collection_equality.dart
-DA:2,76
+DA:2,78
 DA:3,8
 DA:4,24
 DA:5,14
diff --git a/demo/lib/views/button_example.dart b/demo/lib/views/button_example.dart
index 1cc1be9c9..1d00b1113 100644
--- a/demo/lib/views/button_example.dart
+++ b/demo/lib/views/button_example.dart
@@ -120,9 +120,8 @@ abstract class Button extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final mergedStyle = _baseStyle
-        .selectVariant(size ?? ButtonSizeVariants.medium)
-        .merge(style);
+    final mergedStyle =
+        _baseStyle.variant(size ?? ButtonSizeVariants.medium).merge(style);
 
     return Pressable(
       onPressed: onPressed,
diff --git a/lib/exports.dart b/lib/exports.dart
index 0b6c37dd2..28a46559c 100644
--- a/lib/exports.dart
+++ b/lib/exports.dart
@@ -78,8 +78,6 @@ export 'src/utils/context_variant_util/on_directionality_util.dart';
 export 'src/utils/context_variant_util/on_helper_util.dart';
 export 'src/utils/context_variant_util/on_orientation_util.dart';
 export 'src/utils/helper_util.dart';
-export 'src/variants/context_variant.dart';
-export 'src/variants/multi_variant.dart';
 export 'src/variants/variant.dart';
 export 'src/widgets/gap_widget.dart';
 export 'src/widgets/pressable/gesture_state.dart';
diff --git a/lib/src/attributes/border/border_util.dart b/lib/src/attributes/border/border_util.dart
index 62ee2d614..2220ea9c2 100644
--- a/lib/src/attributes/border/border_util.dart
+++ b/lib/src/attributes/border/border_util.dart
@@ -61,7 +61,6 @@ class BoxBorderUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final border = BorderUtility<StyleAttribute>(builder);
   /// final attribute = border.all(
   ///   color: Colors.red,
   ///   width: 2.0,
@@ -86,7 +85,6 @@ class BoxBorderUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final border = BorderUtility<StyleAttribute>(builder);
   /// final attribute = border.bottom(
   ///   color: Colors.blue,
   ///   width: 3.0,
@@ -112,7 +110,6 @@ class BoxBorderUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final border = BorderUtility<StyleAttribute>(builder);
   /// final attribute = border.top(
   ///   color: Colors.blue,
   ///   width: 3.0,
@@ -138,7 +135,6 @@ class BoxBorderUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final border = BorderUtility<StyleAttribute>(builder);
   /// final attribute = border.left(
   ///   color: Colors.blue,
   ///   width: 3.0,
@@ -164,7 +160,6 @@ class BoxBorderUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final border = BorderUtility<StyleAttribute>(builder);
   /// final attribute = border.right(
   ///   color: Colors.blue,
   ///   width: 3.0,
@@ -234,7 +229,6 @@ class BoxBorderUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final border = BorderUtility<StyleAttribute>(builder);
   /// final attribute = border.vertical(
   ///   color: Colors.indigo,
   ///   width: 1.5,
@@ -259,7 +253,6 @@ class BoxBorderUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final border = BorderUtility<StyleAttribute>(builder);
   /// final attribute = border.horizontal(
   ///   color: Colors.teal,
   ///   width: 1.0,
diff --git a/lib/src/attributes/color/color_util.dart b/lib/src/attributes/color/color_util.dart
index 2b4715720..7798cdee1 100644
--- a/lib/src/attributes/color/color_util.dart
+++ b/lib/src/attributes/color/color_util.dart
@@ -9,8 +9,7 @@ import 'color_dto.dart';
 
 @immutable
 class ColorUtility<T extends StyleAttribute>
-    extends DtoUtility<T, ColorDto, Color>
-    with CallableDtoUtilityMixin<T, ColorDto, Color> {
+    extends DtoUtility<T, ColorDto, Color> {
   const ColorUtility(super.builder) : super(valueToDto: ColorDto.new);
 
   T _buildColor(Color color) => builder(valueToDto(color));
@@ -87,7 +86,7 @@ class ColorUtility<T extends StyleAttribute>
 
   T of(ColorToken ref) => _buildColor(ref());
 
-  T transparent() => _buildColor(const Color(0x00000000));
+  T transparent() => _buildColor(Colors.transparent);
   T black() => _buildColor(const Color(0xFF000000));
   T black87() => _buildColor(const Color(0xDD000000));
   T black54() => _buildColor(const Color(0x8A000000));
@@ -104,6 +103,8 @@ class ColorUtility<T extends StyleAttribute>
   T white24() => _buildColor(const Color(0x3DFFFFFF));
   T white12() => _buildColor(const Color(0x1FFFFFFF));
   T white10() => _buildColor(const Color(0x1AFFFFFF));
+
+  T call(Color color) => _buildColor(color);
 }
 
 abstract class ColorSwatchUtility<T extends StyleAttribute>
diff --git a/lib/src/attributes/constraints/constraints_util.dart b/lib/src/attributes/constraints/constraints_util.dart
index 6ebd96cd8..a915cccd6 100644
--- a/lib/src/attributes/constraints/constraints_util.dart
+++ b/lib/src/attributes/constraints/constraints_util.dart
@@ -6,7 +6,7 @@ import 'constraints_dto.dart';
 
 /// Utility class for building box constraints-related style attributes.
 ///
-/// Accepts a builder function that returns [T] and takes a [BoxConstraintsAttribute] as a parameter.
+/// Accepts a builder function that returns [T] and takes a [BoxConstraintsDto] as a parameter.
 ///
 /// This utility allows for detailed configuration of box constraints,
 /// supporting attributes like `minWidth`, `maxWidth`, `minHeight`, and `maxHeight`.
@@ -19,7 +19,7 @@ class BoxConstraintsUtility<T extends StyleAttribute>
     extends DtoUtility<T, BoxConstraintsDto, BoxConstraints> {
   /// Creates a [BoxConstraintsUtility] with a builder function.
   ///
-  /// The builder function takes a [BoxConstraintsAttribute] as a parameter and returns [T].
+  /// The builder function takes a [BoxConstraintsDto] as a parameter and returns [T].
   ///
   /// Example:
   /// ```dart
@@ -39,7 +39,7 @@ class BoxConstraintsUtility<T extends StyleAttribute>
   /// final attribute = boxConstraints.maxWidth(100);
   /// ```
   ///
-  /// Attribute now holds a [T] with a [BoxConstraintsAttribute] that has a maxWidth value of `100`.
+  /// Attribute now holds a [T] with a [BoxConstraintsDto] that has a maxWidth value of `100`.
   DoubleUtility<T> get maxWidth {
     return DoubleUtility<T>((value) => call(maxWidth: value));
   }
@@ -54,7 +54,7 @@ class BoxConstraintsUtility<T extends StyleAttribute>
   /// final attribute = boxConstraints.minWidth(100);
   /// ```
   ///
-  /// Attribute now holds a [T] with a [BoxConstraintsAttribute] that has a minWidth value of `100`.
+  /// Attribute now holds a [T] with a [BoxConstraintsDto] that has a minWidth value of `100`.
   DoubleUtility<T> get minWidth {
     return DoubleUtility<T>((value) => call(minWidth: value));
   }
@@ -70,7 +70,7 @@ class BoxConstraintsUtility<T extends StyleAttribute>
   /// final attribute = boxConstraints.minHeight(100);
   /// ```
   ///
-  /// Attribute now holds a [T] with a [BoxConstraintsAttribute] that has a minHeight value of `100`.
+  /// Attribute now holds a [T] with a [BoxConstraintsDto] that has a minHeight value of `100`.
   DoubleUtility<T> get minHeight {
     return DoubleUtility<T>((value) => call(minHeight: value));
   }
@@ -86,7 +86,7 @@ class BoxConstraintsUtility<T extends StyleAttribute>
   /// final attribute = boxConstraints.maxHeight(100);
   /// ```
   ///
-  /// Attribute now holds a [T] with a [BoxConstraintsAttribute] that has a maxHeight value of `100`.
+  /// Attribute now holds a [T] with a [BoxConstraintsDto] that has a maxHeight value of `100`.
   DoubleUtility<T> get maxHeight {
     return DoubleUtility<T>((value) => call(maxHeight: value));
   }
diff --git a/lib/src/attributes/scalars/scalar_util.dart b/lib/src/attributes/scalars/scalar_util.dart
index f8b2f981c..628d8b819 100644
--- a/lib/src/attributes/scalars/scalar_util.dart
+++ b/lib/src/attributes/scalars/scalar_util.dart
@@ -29,16 +29,6 @@ abstract class DtoUtility<Attr extends StyleAttribute, D extends Dto<Value>,
   Attr as(Value value) => _builder(valueToDto(value));
 }
 
-mixin CallableUtilityMixin<Attr extends StyleAttribute, Value>
-    on MixUtility<Attr, Value> {
-  Attr call(Value value) => _builder(value);
-}
-
-mixin CallableDtoUtilityMixin<Attr extends StyleAttribute, D extends Dto<Value>,
-    Value> on DtoUtility<Attr, D, Value> {
-  Attr call(Value value) => _builder(valueToDto(value));
-}
-
 abstract class ScalarUtility<Return extends StyleAttribute, Param>
     extends MixUtility<Return, Param> {
   const ScalarUtility(super.builder);
@@ -48,23 +38,56 @@ abstract class ScalarUtility<Return extends StyleAttribute, Param>
   Return call(Param value) => _builder(value);
 }
 
+/// AlignmentUtility - A utility class for defining alignment attributes for widgets.
+///
+/// This class extends `ScalarUtility<T, AlignmentGeometry>`, allowing it to handle alignment attributes
+/// using generic types. It provides methods to set various predefined alignments as well as custom alignments.
 class AlignmentUtility<T extends StyleAttribute>
     extends ScalarUtility<T, AlignmentGeometry> {
+  // Constructor accepting a builder function to create instances of T.
   const AlignmentUtility(super.builder);
 
+  /// Sets the alignment to top left.
   T topLeft() => builder(Alignment.topLeft);
+
+  /// Sets the alignment to top center.
   T topCenter() => builder(Alignment.topCenter);
+
+  /// Sets the alignment to top right.
   T topRight() => builder(Alignment.topRight);
+
+  /// Sets the alignment to center left.
   T centerLeft() => builder(Alignment.centerLeft);
+
+  /// Sets the alignment to center.
   T center() => builder(Alignment.center);
+
+  /// Sets the alignment to center right.
   T centerRight() => builder(Alignment.centerRight);
+
+  /// Sets the alignment to bottom left.
   T bottomLeft() => builder(Alignment.bottomLeft);
+
+  /// Sets the alignment to bottom center.
   T bottomCenter() => builder(Alignment.bottomCenter);
+
+  /// Sets the alignment to bottom right.
   T bottomRight() => builder(Alignment.bottomRight);
+
+  /// Sets a custom alignment based on the provided x, y, or start values.
+  ///
+  /// The `x` and `start` parameters are mutually exclusive to avoid conflicts.
+  /// The `x` parameter sets a specific horizontal alignment, while `start` aligns based on text direction (LTR/RTL).
+  /// The `y` parameter sets the vertical alignment.
+  ///
+  /// - `x`: Horizontal alignment value, ignored if `start` is provided.
+  /// - `y`: Vertical alignment value.
+  /// - `start`: Horizontal alignment based on text direction, overrides `x` if provided.
   T only({double? x, double? y, double? start}) {
     assert(x == null || start == null,
         'Cannot provide both an x and a start parameter.');
 
+    // If `start` is provided, it creates an AlignmentDirectional, otherwise a regular Alignment.
     return start == null
         ? builder(Alignment(x ?? 0, y ?? 0))
         : builder(AlignmentDirectional(start, y ?? 0));
@@ -80,9 +103,11 @@ class AlignmentUtility<T extends StyleAttribute>
 /// final utility = DoubleUtility(builder);
 /// final tenValue = utility(10);
 /// ```
-class DoubleUtility<T extends StyleAttribute> extends ScalarUtility<T, double>
-    with CallableUtilityMixin<T, double> {
+class DoubleUtility<T extends StyleAttribute> extends ScalarUtility<T, double> {
   const DoubleUtility(super.builder);
+
+  @override
+  T call(double value) => builder(value);
 }
 
 /// Utility for Size values. Includes predefined values such as zero and infinity.
@@ -110,11 +135,13 @@ abstract class SizingUtility<T extends StyleAttribute>
 /// final tenValue = utility(10);
 /// // zeroValue is 0
 /// ```
-class IntUtility<T extends StyleAttribute> extends ScalarUtility<T, int>
-    with CallableUtilityMixin<T, int> {
+class IntUtility<T extends StyleAttribute> extends ScalarUtility<T, int> {
   const IntUtility(super.builder);
 
   T zero() => builder(0);
+
+  @override
+  T call(int value) => builder(value);
 }
 
 /// Utility for creating `bool` values.
@@ -128,12 +155,14 @@ class IntUtility<T extends StyleAttribute> extends ScalarUtility<T, int>
 /// final disabled = boolUtility.off();
 /// final boolValue = boolUtility(true);
 /// ```
-class BoolUtility<T extends StyleAttribute> extends ScalarUtility<T, bool>
-    with CallableUtilityMixin<T, bool> {
+class BoolUtility<T extends StyleAttribute> extends ScalarUtility<T, bool> {
   const BoolUtility(super.builder);
 
   T on() => builder(true);
   T off() => builder(false);
+
+  @override
+  T call(bool value) => builder(value);
 }
 
 /// Utility for setting `VerticalDirection` values.
@@ -318,7 +347,6 @@ class TileModeUtility<T extends StyleAttribute>
 /// final rotate90 = gradientTransform.rotate(90);
 /// ```
 /// See [GradientTransform] for more information.
-
 class GradientTransformUtility<T extends StyleAttribute>
     extends ScalarUtility<T, GradientTransform> {
   const GradientTransformUtility(super.builder);
@@ -456,7 +484,6 @@ class ImageRepeatUtility<T extends StyleAttribute>
 /// final offset = OffsetUtility(builder);
 /// final offsetValue = offset(10, 10);
 /// ```
-
 class OffsetUtility<T extends StyleAttribute> extends MixUtility<T, Offset> {
   const OffsetUtility(super.builder);
 
diff --git a/lib/src/attributes/shadow/shadow_util.dart b/lib/src/attributes/shadow/shadow_util.dart
index 5689208c4..5c36a652e 100644
--- a/lib/src/attributes/shadow/shadow_util.dart
+++ b/lib/src/attributes/shadow/shadow_util.dart
@@ -236,11 +236,10 @@ class ElevationUtility<T extends StyleAttribute>
   /// Example usage:
   ///
   /// ```dart
-  /// final elevation = ElevationUtility<StyleAttribute>(builder);
   /// final attribute = elevation.two();
   /// ```
   ///
-  /// Attribute now holds a list of [BoxShadowAttribute] corresponding to a material elevation of `2`.
+  /// Attribute now holds a list of [BoxShadowDto] corresponding to a material elevation of `2`.
   T call(int value) {
     assert(kElevationToShadow.containsKey(value), 'Invalid elevation value');
 
diff --git a/lib/src/attributes/variant_attribute.dart b/lib/src/attributes/variant_attribute.dart
index 9fcc34619..91f1c0681 100644
--- a/lib/src/attributes/variant_attribute.dart
+++ b/lib/src/attributes/variant_attribute.dart
@@ -2,8 +2,6 @@ import 'package:flutter/material.dart';
 
 import '../core/attribute.dart';
 import '../factory/style_mix.dart';
-import '../variants/context_variant.dart';
-import '../variants/multi_variant.dart';
 import '../variants/variant.dart';
 
 @immutable
@@ -88,15 +86,3 @@ class MultiVariantAttribute extends VariantAttribute<MultiVariant>
     return MultiVariantAttribute(variant, _style.merge(other._style));
   }
 }
-
-@immutable
-class GestureContextVariantAttribute extends ContextVariantAttribute {
-  const GestureContextVariantAttribute(super.variant, super.style);
-
-  @override
-  GestureContextVariantAttribute merge(GestureContextVariantAttribute other) {
-    if (other.variant != variant) throw throwArgumentError(other);
-
-    return GestureContextVariantAttribute(variant, _style.merge(other._style));
-  }
-}
diff --git a/lib/src/deprecations.dart b/lib/src/deprecations.dart
index 9db47bcab..0de62d136 100644
--- a/lib/src/deprecations.dart
+++ b/lib/src/deprecations.dart
@@ -8,40 +8,29 @@ const kShortAliasDeprecation =
 extension DeprecatedMixExtension<T extends Attribute> on Style {
   /// Adds an Attribute to a Mix.
   @Deprecated('Simplifying the mix API to avoid confusion. Use apply instead')
-  SpreadFunctionParams<T, Style> get mix {
-    return SpreadFunctionParams(addAttributes);
-  }
+  SpreadFunctionParams<T, Style> get mix => SpreadFunctionParams(addAttributes);
 
   @Deprecated('Use selectVariants now')
-  Style withVariants(List<Variant> variants) {
-    return withManyVariants(variants);
-  }
+  Style withVariants(List<Variant> variants) => withManyVariants(variants);
 
   @Deprecated(
     'Use merge() or mergeMany() now. You might have to turn into a Mix first. firstMixFactory.merge(secondMix)',
   )
-  Style addAttributes(Iterable<Attribute> attributes) {
-    return merge(Style.create(attributes));
-  }
+  Style addAttributes(Iterable<Attribute> attributes) =>
+      merge(Style.create(attributes));
 
   @Deprecated('Use selectVariants now')
-  Style withManyVariants(Iterable<Variant> variants) {
-    return selectVariantList(variants);
-  }
+  Style withManyVariants(Iterable<Variant> variants) => variantList(variants);
 
   @Deprecated('Use merge() or mergeMany() instead')
   SpreadFunctionParams<Style, Style> get apply =>
       const SpreadFunctionParams(Style.combine);
 
   @Deprecated('Use selectVariant now')
-  Style withVariant(Variant variant) {
-    return selectVariant(variant);
-  }
+  Style withVariant(Variant value) => variant(value);
 
   @Deprecated('Use combine now')
-  Style combineAll(List<Style> mixes) {
-    return Style.combine(mixes);
-  }
+  Style combineAll(List<Style> mixes) => Style.combine(mixes);
 
   @Deprecated('Use selectVariant now')
   Style withMaybeVariant(Variant? variant) {
@@ -58,9 +47,7 @@ extension DeprecatedMixExtension<T extends Attribute> on Style {
   }
 
   @Deprecated('Use applyNullable instead')
-  Style applyMaybe(Style? mix) {
-    return maybeApply(mix);
-  }
+  Style applyMaybe(Style? mix) => maybeApply(mix);
 }
 
 /// This refers to the deprecated class MixData and it's here for the purpose of maintaining compatibility.
diff --git a/lib/src/factory/mix_provider_data.dart b/lib/src/factory/mix_provider_data.dart
index 13a2c5427..27a18b44d 100644
--- a/lib/src/factory/mix_provider_data.dart
+++ b/lib/src/factory/mix_provider_data.dart
@@ -6,7 +6,7 @@ import '../core/attributes_map.dart';
 import '../core/decorator.dart';
 import '../helpers/compare_mixin.dart';
 import '../theme/mix_theme.dart';
-import '../variants/context_variant.dart';
+import '../widgets/pressable/gesture_util.dart';
 import 'style_mix.dart';
 
 /// This class is used for encapsulating all [MixData] related operations.
@@ -113,7 +113,7 @@ List<StyleAttribute> applyContextToVisualAttributes(
   }
 
   for (MultiVariantAttribute attr in multiVariants) {
-    if (attr.variant.hasGestureVariant) {
+    if (attr.variant.variants.any((variant) => variant is GestureVariant)) {
       gestureVariantTypes.add(attr);
     } else {
       contextVariantTypes.add(attr);
diff --git a/lib/src/factory/style_mix.dart b/lib/src/factory/style_mix.dart
index ebfe56305..143e3efbf 100644
--- a/lib/src/factory/style_mix.dart
+++ b/lib/src/factory/style_mix.dart
@@ -27,7 +27,7 @@ typedef Mix = Style;
 /// Example:
 /// ```dart
 /// final style = Style(attribute1, attribute2, attribute3);
-/// final updatedStyle = style.selectVariant(myVariant);
+/// final updatedStyle = style.variant(myVariant);
 /// ```
 class Style with Comparable {
   /// Visual attributes contained in this mix.
@@ -181,26 +181,29 @@ class Style with Comparable {
   ///
   /// Example:
   /// ```dart
-  /// final outlined = Variant('outlined-button');
+  /// final outlined = Variant('outlined');
   /// final style = Style(
   ///   attr1,
   ///   attr2,
-  ///   outlined(attr4, attr5),
+  ///   outlined(
+  ///     attr4,
+  ///     attr5,
+  ///   ),
   /// );
-  /// final updatedStyle = style.selectVariant(outlined);
+  /// final updatedStyle = style.variant(outlined);
   /// ```
   ///
   /// In this example:
   /// - An `outlined` instance `outlined` is created to represent an outlined button styling.
   /// - An initial `Style` instance `style` is created with `attr1` and `attr2`, along with the `outlined`.
-  /// - The `selectVariant` method is called on the `Style` instance with `outlined` as the argument.
-  /// - The `selectVariant` method returns a new `Style` instance `updatedStyle` with the attributes of the selected variant merged.
+  /// - The `variant` method is called on the `Style` instance with `outlined` as the argument.
+  /// - The `variant` method returns a new `Style` instance `updatedStyle` with the attributes of the selected variant merged.
   /// - The resulting `updatedStyle` is equivalent to `Style(attr1, attr2, attr4, attr5)`.
   ///
   /// Note:
-  /// The attributes from the selected variant (`attr4` and `attr5`) are not applied to the `Style` instance until the `selectVariant` method is called.
-  SpreadFunctionParams<Variant, Style> get selectVariant {
-    return SpreadFunctionParams(selectVariantList);
+  /// The attributes from the selected variant (`attr4` and `attr5`) are not applied to the `Style` instance until the `variant` method is called.
+  SpreadFunctionParams<Variant, Style> get variant {
+    return SpreadFunctionParams(variantList);
   }
 
   /// Allows to create a new `Style` by using this mix as a base and adding additional attributes.
@@ -244,7 +247,7 @@ class Style with Comparable {
 
   /// Selects multiple [Variant] instances and returns a new `Style` with the selected variants.
   ///
-  /// If the [selectVariantList] list is empty, returns this mix without any changes.
+  /// If the [variantList] list is empty, returns this mix without any changes.
   /// Otherwise, the method merges the attributes of the selected variants into a new `Style` instance.
   ///
   /// Example:
@@ -256,19 +259,19 @@ class Style with Comparable {
   ///   outlinedVariant(attr3, attr4),
   ///   smallVariant(attr5),
   /// );
-  /// final outlinedSmallMix = style.selectVariants([outlinedVariant, smallVariant]);
+  /// final outlinedSmallMix = style.variantList([outlinedVariant, smallVariant]);
   /// ```
   ///
   /// In this example:
   /// - Two `Variant` instances `outlinedVariant` and `smallVariant` are created.
   /// - An initial `Style` instance `style` is created with `attr1` and `attr2`, along with the two variants.
-  /// - The `selectVariants` method is called on the `Style` instance with a list of `outlinedVariant` and `smallVariant` as the argument.
-  /// - The `selectVariants` method returns a new `Style` instance `outlinedSmallMix` with the attributes of the selected variants merged.
+  /// - The `variantList` method is called on the `Style` instance with a list of `outlinedVariant` and `smallVariant` as the argument.
+  /// - The `variantList` method returns a new `Style` instance `outlinedSmallMix` with the attributes of the selected variants merged.
   /// - The resulting `outlinedSmallMix` is equivalent to `Style(attr1, attr2, attr3, attr4, attr5)`.
   ///
   /// Note:
-  /// The attributes from the selected variants (`attr3`, `attr4`, and `attr5`) are not applied to the `Style` instance until the `selectVariants` method is called.
-  Style selectVariantList(Iterable<Variant> selectedVariants) {
+  /// The attributes from the selected variants (`attr3`, `attr4`, and `attr5`) are not applied to the `Style` instance until the `variantList` method is called.
+  Style variantList(Iterable<Variant> selectedVariants) {
     /// Return the original Style if no variants were selected
     if (selectedVariants.isEmpty) {
       return this;
@@ -323,12 +326,12 @@ class Style with Comparable {
     final mergedStyle = updatedStyle.merge(styleToApply);
 
     /// Apply all variants and return the final Style.
-    return mergedStyle.selectVariantList(selectedVariants);
+    return mergedStyle.variantList(selectedVariants);
   }
 
   /// Picks and applies only the attributes within the specified [Variant] instances, and returns a new `Style`.
   ///
-  /// Unlike `selectVariants`, `pickVariants` ignores all other attributes initially present in the `Style`.
+  /// Unlike `variantList`, `pickVariants` ignores all other attributes initially present in the `Style`.
   ///
   /// If the list of [pickVariants] is empty, returns a new empty `Style`.
   ///
@@ -403,7 +406,7 @@ class Style with Comparable {
       }
     }
 
-    return selectVariantList(variantsToApply);
+    return variantList(variantsToApply);
   }
 
   @override
diff --git a/lib/src/specs/container/box_util.dart b/lib/src/specs/container/box_util.dart
index d5c71acae..839a5e92c 100644
--- a/lib/src/specs/container/box_util.dart
+++ b/lib/src/specs/container/box_util.dart
@@ -15,19 +15,388 @@ import '../../core/extensions/values_ext.dart';
 import 'box_attribute.dart';
 
 const box = BoxSpecUtility();
+
+/// 'border' - A Utility for defining border values for a [Box] widget
+///
+/// An instance of `BoxSpecBorderUtility<BoxSpecAttribute>`, to define border
+/// values for box widgets. It provides a structured approach to applying border, enhancing
+/// the layout composition with clarity and precision.
+///
+/// BoxSpecBorderUtility provides a set of methods to define border values for a [Box] widget,
+/// and combines [BoxBorderUtility] and [BorderRadiusGeometryUtility] to allow for a more semantic consistent API.
+///
+/// Examples:
+///
+/// Uniform border:
+///
+/// ```dart
+/// final uniform = border(
+///   color: Colors.red,
+///   width: 2,
+///   style: BorderStyle.solid,
+///   strokeAlign: 0.5,
+/// );
+/// ```
+///
+/// Individual side border:
+///
+/// ```dart
+/// final topBorder = border.top(
+///   color: Colors.red,
+///   width: 2,
+///   style: BorderStyle.solid,
+///   strokeAlign: 0.5,
+/// );
+///
+/// final bottomBorder = border.bottom(...);
+/// final leftBorder = border.left(...);
+/// final rightBorder = border.right(...);
+///
+/// ```
+///
+/// Horizontal and vertical borders:
+///
+/// ```dart
+/// final horizontal = border.horizontal(...); // Applies border on the left and right.
+/// final vertical = border.vertical(...); // Applies border on the top and bottom.
+/// ```
+///
+/// You can do the same for `vertical` borders.
+///
 final border = box.border;
+
+/// `backgroundColor` - A Utility for defining [BoxDecoration] color value for a [Box] widget
 final backgroundColor = box.color;
-final borderRadius = box.border.radius;
+
+/// 'width' - A Utility for defining the width value of a [Box] widget
+///
+/// An instance of `DoubleUtility<BoxSpecAttribute>`, to define width
+///
+/// Examples:
+///
+/// ```dart
+/// final width = width(100); // Sets width to 100.
+/// ```
+///
+/// See also:
+/// - [DoubleUtility]
+/// - [BoxSpecAttribute]
+/// - [Box]
 final width = box.width;
+
+/// 'height' - A Utility for defining the height value of a [Box] widget
+///
+/// An instance of `DoubleUtility<BoxSpecAttribute>`, to define height
+///
+/// Examples:
+///
+/// ```dart
+/// final height = height(100); // Sets height to 100.
+/// ```
+///
+/// See also:
+/// - [DoubleUtility]
+/// - [BoxSpecAttribute]
+/// - [Box]
 final height = box.height;
-final maxWidth = box.maxWidth;
+
+/// 'minHeight' - A Utility for Defining minHeight Values for a [BoxConstraints] of a Box widget
+///
+/// An instance of `DoubleUtility<BoxSpecAttribute>`, utilized in Flutter to define minHeight
+///
+/// Examples:
+///
+/// ```dart
+/// final minHeight = minHeight(100); // Sets minHeight to 100.
+/// ```
+///
+/// See also:
+/// - [DoubleUtility]
+/// - [BoxSpecAttribute]
+/// - [BoxConstraintsDto]
+/// - [BoxConstraints]
+/// - [BoxConstraintsUtility]
+final minHeight = box.minHeight;
+
+/// 'maxHeight' - A Utility for Defining maxHeight Values for a [BoxConstraints] of a Box widget
+///
+/// An instance of `DoubleUtility<BoxSpecAttribute>`, utilized in Flutter to define maxHeight
+///
+/// Examples:
+///
+/// ```dart
+/// final maxHeight = maxHeight(100); // Sets maxHeight to 100.
+/// ```
+///
+/// See also:
+/// - [DoubleUtility]
+/// - [BoxSpecAttribute]
+/// - [BoxConstraintsDto]
+/// - [BoxConstraints]
+/// - [BoxConstraintsUtility]
 final maxHeight = box.maxHeight;
+
+/// 'minWidth' - A Utility for defining minWidth Values for a [BoxConstraints] of a Box widget
+///
+/// An instance of `DoubleUtility<BoxSpecAttribute>`, utilized in Flutter to define minWidth
+///
+/// Examples:
+///
+/// ```dart
+/// final minWidth = minWidth(100); // Sets minWidth to 100.
+/// ```
+///
+/// See also:
+/// - [DoubleUtility]
+/// - [BoxSpecAttribute]
+/// - [BoxConstraintsDto]
+/// - [BoxConstraints]
+/// - [BoxConstraintsUtility]
 final minWidth = box.minWidth;
-final minHeight = box.minHeight;
+
+/// 'maxWidth' - A Utility for defining maxWidth for a `BoxConstraints` on a Box widget
+///
+/// An instance of `DoubleUtility<BoxSpecAttribute>`, utilized in Flutter to define maxWidth
+///
+/// Examples:
+///
+/// ```dart
+/// final maxWidth = maxWidth(100); // Sets maxWidth to 100.
+/// ```
+final maxWidth = box.maxWidth;
+
+/// `padding` - A Utility for Defining Padding Values for Box widgets
+///
+/// An instance of `SpacingUtility<BoxSpecAttribute>`, utilized in Flutter to define padding
+/// values for box widgets. It provides a structured approach to applying padding, enhancing
+/// the layout composition with clarity and precision.
+///
+/// Examples:
+///
+/// Uniform padding:
+///
+/// ```dart
+/// final uniform = padding.all(10); // Applies 10 units of padding on all sides.
+/// ```
+///
+/// Horizontal padding:
+///
+/// ```dart
+/// final horizontal = padding.horizontal(15); // Applies 15 units of padding on the left and right.
+/// ```
+///
+/// Vertical padding:
+///
+/// ```dart
+/// final vertical = padding.vertical(20); // Applies 20 units of padding on the top and bottom.
+/// ```
+///
+/// Individual side padding:
+///
+/// ```dart
+/// final custom = padding.only(top: 10, bottom: 20, left: 30, right: 40);
+/// // Applies 10 units on top, 20 units on bottom, 30 units on left, and 40 units on right.
+/// ```
+///
+/// Padding to a specific side:
+///
+/// ```dart
+/// final top = padding.top(5); // Applies 5 units of padding at the top.
+/// final bottom = padding.bottom(5); // Applies 5 units of padding at the bottom.
+/// final left = padding.left(8); // Applies 8 units of padding on the left side.
+/// final right = padding.right(8); // Applies 8 units of padding on the right side.
+/// ```
+///
+/// Directional padding in RTL (Right-to-Left) layouts:
+///
+/// ```dart
+/// final start = padding.start(10); // Applies 10 units of padding at the start side (considering text direction).
+/// final end = padding.end(10); // Applies 10 units of padding at the end side (considering text direction).
+/// ```
+///
+/// Flexible Padding with Callable Method
+/// 1 parameter: Uniform padding.
+/// 2 parameters: Vertical and horizontal padding.
+/// 3 parameters: Top, horizontal, and bottom padding.
+/// 4 parameters: Top, right, bottom, left padding.
+///
+/// Examples:
+/// - `padding(10)`: 10 units uniformly.
+/// - `padding(10, 20)`: 10 units top and bottom, 20 units left and right.
+/// - `padding(10, 20, 30)`: 10 units top, 20 units left and right, 30 units bottom.
+/// - `padding(10, 20, 30, 40)`: 10 units top, 20 units right, 30 units bottom, 40 units left.
+///
+/// `padding` effectively leverages `SpacingUtility<T>` to create a versatile and readable way of applying padding,
+/// making it easier to manage spacing in Flutter's layout system.
+///
+/// See also:
+/// - [SpacingUtility]
+/// - [SpacingDto]
+/// - [BoxSpecAttribute]
 final padding = box.padding;
+
+/// `margin` - A Utility for Defining Padding Values for Box widgets
+///
+/// An instance of `SpacingUtility<BoxSpecAttribute>`, utilized in Flutter to define margin
+/// values for box widgets. It provides a structured approach to applying margin, enhancing
+/// the layout composition with clarity and precision.
+///
+/// Examples:
+///
+/// Uniform margin:
+///
+/// ```dart
+/// final uniform = margin.all(10); // Applies 10 units of margin on all sides.
+/// ```
+///
+/// Horizontal margin:
+///
+/// ```dart
+/// final horizontal = margin.horizontal(15); // Applies 15 units of margin on the left and right.
+/// ```
+///
+/// Vertical margin:
+///
+/// ```dart
+/// final vertical = margin.vertical(20); // Applies 20 units of margin on the top and bottom.
+/// ```
+///
+/// Individual side margin:
+///
+/// ```dart
+/// final custom = margin.only(top: 10, bottom: 20, left: 30, right: 40);
+/// // Applies 10 units on top, 20 units on bottom, 30 units on left, and 40 units on right.
+/// ```
+///
+/// Padding to a specific side:
+///
+/// ```dart
+/// final top = margin.top(5); // Applies 5 units of margin at the top.
+/// final bottom = margin.bottom(5); // Applies 5 units of margin at the bottom.
+/// final left = margin.left(8); // Applies 8 units of margin on the left side.
+/// final right = margin.right(8); // Applies 8 units of margin on the right side.
+/// ```
+///
+/// Directional margin in RTL (Right-to-Left) layouts:
+///
+/// ```dart
+/// final start = margin.start(10); // Applies 10 units of margin at the start side (considering text direction).
+/// final end = margin.end(10); // Applies 10 units of margin at the end side (considering text direction).
+/// ```
+///
+/// Flexible Padding with Callable Method
+/// 1 parameter: Uniform margin.
+/// 2 parameters: Vertical and horizontal margin.
+/// 3 parameters: Top, horizontal, and bottom margin.
+/// 4 parameters: Top, right, bottom, left margin.
+///
+/// Examples:
+/// - `margin(10)`: 10 units uniformly.
+/// - `margin(10, 20)`: 10 units top and bottom, 20 units left and right.
+/// - `margin(10, 20, 30)`: 10 units top, 20 units left and right, 30 units bottom.
+/// - `margin(10, 20, 30, 40)`: 10 units top, 20 units right, 30 units bottom, 40 units left.
+///
+/// `margin` effectively leverages `SpacingUtility<T>` to create a versatile and readable way of applying padding,
+/// making it easier to manage spacing in Flutter's layout system.
+///
+/// See also:
+/// - [SpacingUtility]
+/// - [SpacingDto]
+/// - [BoxSpecAttribute]
 final margin = box.margin;
+
+/// `alignment` - A Utility for Defining Alignment Values for Box widgets
+///
+/// An instance of `AlignmentUtility<BoxSpecAttribute>`, utilized in Flutter to define alignment
+/// values for box widgets. It provides a structured approach to applying alignment, enhancing
+/// the layout composition with clarity and precision.
+///
+/// Examples:
+///
+/// ```dart
+/// final center = alignment.center(); // Aligns the box to the center of the parent.
+/// final topLeft = alignment.topLeft(); // Aligns the box to the top left of the parent.
+/// final bottomRight = alignment.bottomRight(); // Aligns the box to the bottom right of the parent.
+/// ```
+///
+/// Sets a custom alignment based on the provided x, y, or start values.
+///
+/// The `x` and `start` parameters are mutually exclusive to avoid conflicts.
+/// The `x` parameter sets a specific horizontal alignment, while `start` aligns based on text direction (LTR/RTL).
+/// The `y` parameter sets the vertical alignment.
+///
+/// - `x`: Horizontal alignment value, ignored if `start` is provided.
+/// - `y`: Vertical alignment value.
+/// - `start`: Horizontal alignment based on text direction, overrides `x` if provided.
+///
+/// ```dart
+/// final custom = alignment.only(x: 0.5, y: 0.5); // Aligns the box to the center of the parent.
+/// final custom = alignment.only(start: 0.5, y: 0.5); // Aligns the box to the center of the parent considering text direction.
+/// ```
+///
+/// Helper methods that are similar to methods on [Alignment] and [AlignmentDirectional].
+///
+/// ```dart
+/// final topCenter = alignment.topCenter(); // Aligns the box to the top center of the parent.
+/// final bottomCenter = alignment.bottomCenter(); // Aligns the box to the bottom center of the parent.
+/// final centerLeft = alignment.centerLeft(); // Aligns the box to the center left of the parent.
+/// final centerRight = alignment.centerRight(); // Aligns the box to the center right of the parent.
+/// ```
+/// See also:
+/// - [Alignment]
+/// - [AlignmentDirectional]
+/// - [AlignmentUtility]
+/// - [BoxSpecAttribute]
 final alignment = box.alignment;
+
+/// `clipBehavior` - A Utility for Defining Clip Behavior Values for Box widgets
+///
+/// An instance of `ClipUtility<BoxSpecAttribute>`, utilized in Flutter to define clip behavior
+/// values for box widgets. It provides a structured approach to applying clip behavior, enhancing
+/// the layout composition with clarity and precision.
+///
+/// Examples:
+///
+/// ```dart
+/// final antiAlias = clipBehavior.antiAlias(); // Clips the box with anti-aliasing.
+/// final antiAliasWithSaveLayer = clipBehavior.antiAliasWithSaveLayer(); // Clips the box with anti-aliasing and save layer.
+/// final hardEdge = clipBehavior.hardEdge(); // Clips the box with hard edges.
+/// final none = clipBehavior.none(); // Does not clip the box.
+/// ```
+///
+/// See also:
+/// - [Clip]
+/// - [ClipUtility]
+/// - [BoxSpecAttribute]
 final clipBehavior = box.clipBehavior;
+
+/// `elevation` - A Utility for Defining Elevation Values for Box widgets
+///
+/// An instance of `ElevationUtility<BoxSpecAttribute>` for setting elevation using predefined shadows.
+///
+/// This utility simplifies the process of applying consistent elevation effects
+/// across the application.
+///
+/// Examples:
+///
+/// ```dart
+/// final none = elevation.none(); // No elevation.
+/// final two = elevation.two(); // Elevation of 2.
+/// final three = elevation.three(); // Elevation of 3.
+/// final four = elevation.four(); // Elevation of 4.
+/// final six = elevation.six(); // Elevation of 6.
+/// final eight = elevation.eight(); // Elevation of 8.
+/// final nine = elevation.nine(); // Elevation of 9.
+/// final twelve = elevation.twelve(); // Elevation of 12.
+/// final sixteen = elevation.sixteen(); // Elevation of 16.
+/// final twentyFour = elevation.twentyFour(); // Elevation of 24.
+/// ```
+///
+/// See also:
+/// - [ElevationUtility]
+/// - [BoxSpecAttribute]
+/// - [BoxShadowDto]
+/// - [BoxShadow]
 final elevation = box.elevation;
 
 class BoxSpecUtility extends SpecUtility<BoxSpecAttribute> {
@@ -67,124 +436,10 @@ class BoxSpecUtility extends SpecUtility<BoxSpecAttribute> {
     return AlignmentUtility((alignment) => call(alignment: alignment));
   }
 
-  /// `padding` - Provides a comprehensive utility for defining padding attribute
-  ///
-  /// `padding` is an instance of `SpacingUtility<T>`, offering a range of methods to apply custom padding
-  /// to various sides of a widget. Each method returns an object that can be used to construct a widget with
-  /// the specified padding attributes.
-  ///
-  /// Examples:
-  ///
-  /// Applying uniform padding:
-  /// ```dart
-  /// final uniform = padding.all(10); // Applies 10 units of padding on all sides.
-  /// ```
-  ///
-  /// Applying horizontal padding:
-  /// ```dart
-  /// final horizontal = padding.horizontal(15); // Applies 15 units of padding on the left and right.
-  /// ```
-  ///
-  /// Applying vertical padding:
-  /// ```dart
-  /// final vertical = padding.vertical(20); // Applies 20 units of padding on the top and bottom.
-  /// ```
-  ///
-  /// Applying different padding values for each side:
-  /// ```dart
-  /// final custom = padding.only(top: 10, bottom: 20, left: 30, right: 40);
-  /// // Applies 10 units on top, 20 units on bottom, 30 units on left, and 40 units on right.
-  /// ```
-  ///
-  /// Applying padding to a specific side:
-  /// ```dart
-  /// final top = padding.top(5); // Applies 5 units of padding at the top.
-  /// final bottom = padding.bottom(5); // Applies 5 units of padding at the bottom.
-  /// final left = padding.left(8); // Applies 8 units of padding on the left side.
-  /// final right = padding.right(8); // Applies 8 units of padding on the right side.
-  /// ```
-  ///
-  /// Applying directional padding in RTL (Right-to-Left) layouts:
-  /// ```dart
-  /// final start = padding.start(10); // Applies 10 units of padding at the start side (considering text direction).
-  /// final end = padding.end(10); // Applies 10 units of padding at the end side (considering text direction).
-  /// ```
-  ///
-  /// Using `SpacingUtility` callable method for flexible padding:
-  /// - 1 parameter: uniform spacing on all sides.
-  /// - 2 parameters: first for top and bottom, second for left and right.
-  /// - 3 parameters: first for top, second for left and right, third for bottom.
-  /// - 4 parameters: applied to top, right, bottom, and left respectively.
-  ///
-  /// Examples:
-  /// - `padding(10)`: uniform padding of 10 units on all sides.
-  /// - `padding(10, 20)`: top and bottom padding of 10 units, left and right padding of 20 units.
-  /// - `padding(10, 20, 30)`: top padding of 10 units, left and right padding of 20 units, bottom padding of 30 units.
-  /// - `padding(10, 20, 30, 40)`: top padding of 10 units, right padding of 20 units, bottom padding of 30 units, left padding of 40 units.
-  ///
-  /// `padding` effectively leverages `SpacingUtility<T>` to create a versatile and readable way of applying padding,
-  /// making it easier to manage spacing in Flutter's layout system.
   SpacingUtility<BoxSpecAttribute> get padding {
     return SpacingUtility((padding) => _only(padding: padding));
   }
 
-  /// `margin` - Provides a comprehensive utility for defining margin attribute
-  ///
-  /// `margin` is an instance of `SpacingUtility<T>`, offering a range of methods to apply custom margin
-  /// to various sides of a widget. Each method returns an object that can be used to construct a widget with
-  /// the specified margin attributes.
-  ///
-  /// Examples:
-  ///
-  /// Applying uniform margin:
-  /// ```dart
-  /// final uniform = margin.all(10); // Applies 10 units of margin on all sides.
-  /// ```
-  ///
-  /// Applying horizontal margin:
-  /// ```dart
-  /// final horizontal = margin.horizontal(15); // Applies 15 units of margin on the left and right.
-  /// ```
-  ///
-  /// Applying vertical margin:
-  /// ```dart
-  /// final vertical = margin.vertical(20); // Applies 20 units of margin on the top and bottom.
-  /// ```
-  ///
-  /// Applying different margin values for each side:
-  /// ```dart
-  /// final custom = margin.only(top: 10, bottom: 20, left: 30, right: 40);
-  /// // Applies 10 units on top, 20 units on bottom, 30 units on left, and 40 units on right.
-  /// ```
-  ///
-  /// Applying margin to a specific side:
-  /// ```dart
-  /// final top = margin.top(5); // Applies 5 units of margin at the top.
-  /// final bottom = margin.bottom(5); // Applies 5 units of margin at the bottom.
-  /// final left = margin.left(8); // Applies 8 units of margin on the left side.
-  /// final right = margin.right(8); // Applies 8 units of margin on the right side.
-  /// ```
-  ///
-  /// Applying directional margin in RTL (Right-to-Left) layouts:
-  /// ```dart
-  /// final start = margin.start(10); // Applies 10 units of margin at the start side (considering text direction).
-  /// final end = margin.end(10); // Applies 10 units of margin at the end side (considering text direction).
-  /// ```
-  ///
-  /// Using `SpacingUtility` callable method for flexible margin:
-  /// - 1 parameter: uniform spacing on all sides.
-  /// - 2 parameters: first for top and bottom, second for left and right.
-  /// - 3 parameters: first for top, second for left and right, third for bottom.
-  /// - 4 parameters: applied to top, right, bottom, and left respectively.
-  ///
-  /// Examples:
-  /// - `margin(10)`: uniform margin of 10 units on all sides.
-  /// - `margin(10, 20)`: top and bottom margin of 10 units, left and right margin of 20 units.
-  /// - `margin(10, 20, 30)`: top margin of 10 units, left and right margin of 20 units, bottom margin of 30 units.
-  /// - `margin(10, 20, 30, 40)`: top margin of 10 units, right margin of 20 units, bottom margin of 30 units, left margin of 40 units.
-  ///
-  /// `margin` effectively leverages `SpacingUtility<T>` to create a versatile and readable way of applying margin,
-  /// making it easier to manage spacing in Flutter's layout system.
   SpacingUtility<BoxSpecAttribute> get margin {
     return SpacingUtility((margin) => _only(margin: margin));
   }
diff --git a/lib/src/specs/text/text_attribute.dart b/lib/src/specs/text/text_attribute.dart
index b12cbb5df..7d2fb973e 100644
--- a/lib/src/specs/text/text_attribute.dart
+++ b/lib/src/specs/text/text_attribute.dart
@@ -49,20 +49,20 @@ class TextSpecAttribute extends SpecAttribute<TextSpecAttribute, TextSpec> {
 
   @override
   TextSpecAttribute merge(TextSpecAttribute? other) {
-    if (other == null) return this;
-
-    return TextSpecAttribute(
-      overflow: other.overflow ?? overflow,
-      strutStyle: strutStyle?.merge(other.strutStyle) ?? other.strutStyle,
-      textAlign: other.textAlign ?? textAlign,
-      textScaleFactor: other.textScaleFactor ?? textScaleFactor,
-      maxLines: other.maxLines ?? maxLines,
-      style: style?.merge(other.style) ?? other.style,
-      textWidthBasis: other.textWidthBasis ?? textWidthBasis,
-      textHeightBehavior: other.textHeightBehavior ?? textHeightBehavior,
-      textDirection: other.textDirection ?? textDirection,
-      softWrap: other.softWrap ?? softWrap,
-    );
+    return other == null
+        ? this
+        : TextSpecAttribute(
+            overflow: other.overflow ?? overflow,
+            strutStyle: strutStyle?.merge(other.strutStyle) ?? other.strutStyle,
+            textAlign: other.textAlign ?? textAlign,
+            textScaleFactor: other.textScaleFactor ?? textScaleFactor,
+            maxLines: other.maxLines ?? maxLines,
+            style: style?.merge(other.style) ?? other.style,
+            textWidthBasis: other.textWidthBasis ?? textWidthBasis,
+            textHeightBehavior: other.textHeightBehavior ?? textHeightBehavior,
+            textDirection: other.textDirection ?? textDirection,
+            softWrap: other.softWrap ?? softWrap,
+          );
   }
 
   @override
diff --git a/lib/src/utils/context_variant_util/on_breakpoint_util.dart b/lib/src/utils/context_variant_util/on_breakpoint_util.dart
index 96cfb4f5d..c63665aa8 100644
--- a/lib/src/utils/context_variant_util/on_breakpoint_util.dart
+++ b/lib/src/utils/context_variant_util/on_breakpoint_util.dart
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import '../../helpers/string_ext.dart';
 import '../../theme/mix_theme.dart';
 import '../../theme/tokens/breakpoints_token.dart';
-import '../../variants/context_variant.dart';
+import '../../variants/variant.dart';
 
 /// Global breakpoint context variants based on predefined screen sizes.
 /// These can be used to apply styles or layouts conditionally depending on the screen size.
@@ -30,14 +30,11 @@ ContextVariant onBreakpoint({minWidth = 0, maxWidth = double.infinity}) {
   final constraintName =
       'minWidth-${constraints.minWidth}-maxWidth-${constraints.maxWidth}';
 
-  return ContextVariant(
-    'on-$constraintName',
-    when: (BuildContext context) {
-      final size = MediaQuery.sizeOf(context);
+  return ContextVariant('on-$constraintName', (context) {
+    final size = MediaQuery.sizeOf(context);
 
-      return constraints.matches(size);
-    },
-  );
+    return constraints.matches(size);
+  });
 }
 
 /// Creates a [ContextVariant] based on a specific [token].
@@ -46,14 +43,11 @@ ContextVariant onBreakpoint({minWidth = 0, maxWidth = double.infinity}) {
 /// and returns a [ContextVariant] that applies when the current screen size matches
 /// the specified breakpoint.
 ContextVariant onBreakpointToken(BreakpointToken token) {
-  return ContextVariant(
-    'on-${token.name.paramCase}',
-    when: (BuildContext context) {
-      final size = MediaQuery.sizeOf(context);
+  return ContextVariant('on-${token.name.paramCase}', (context) {
+    final size = MediaQuery.sizeOf(context);
 
-      final selectedbreakpoint = token.resolve(context);
+    final selectedbreakpoint = token.resolve(context);
 
-      return selectedbreakpoint.matches(size);
-    },
-  );
+    return selectedbreakpoint.matches(size);
+  });
 }
diff --git a/lib/src/utils/context_variant_util/on_brightness_util.dart b/lib/src/utils/context_variant_util/on_brightness_util.dart
index b34e3cb9f..f680075eb 100644
--- a/lib/src/utils/context_variant_util/on_brightness_util.dart
+++ b/lib/src/utils/context_variant_util/on_brightness_util.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../../helpers/string_ext.dart';
-import '../../variants/context_variant.dart';
+import '../../variants/variant.dart';
 
 /// Global brightness context variants.
 /// These variants are used to apply styles or behaviors conditionally based on the theme's brightness setting.
@@ -18,10 +18,7 @@ final onLight = onBrightness(Brightness.light);
 /// brightness matches the specified [brightness]. It is useful for defining
 /// brightness-specific styles or behaviors in the application.
 ContextVariant onBrightness(Brightness brightness) {
-  return ContextVariant(
-    'on-${brightness.name.paramCase}',
-    when: (BuildContext context) {
-      return Theme.of(context).brightness == brightness;
-    },
-  );
+  return ContextVariant('on-${brightness.name.paramCase}', (context) {
+    return Theme.of(context).brightness == brightness;
+  });
 }
diff --git a/lib/src/utils/context_variant_util/on_directionality_util.dart b/lib/src/utils/context_variant_util/on_directionality_util.dart
index 7b54ed51d..2f8c2316f 100644
--- a/lib/src/utils/context_variant_util/on_directionality_util.dart
+++ b/lib/src/utils/context_variant_util/on_directionality_util.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../../helpers/string_ext.dart';
-import '../../variants/context_variant.dart';
+import '../../variants/variant.dart';
 
 /// Variant for Right-To-Left (RTL) text direction.
 final onRTL = onDirectionality(TextDirection.rtl);
@@ -19,6 +19,6 @@ final onLTR = onDirectionality(TextDirection.ltr);
 ContextVariant onDirectionality(TextDirection direction) {
   return ContextVariant(
     'on-${direction.name.paramCase}',
-    when: (BuildContext context) => Directionality.of(context) == direction,
+    (context) => Directionality.of(context) == direction,
   );
 }
diff --git a/lib/src/utils/context_variant_util/on_helper_util.dart b/lib/src/utils/context_variant_util/on_helper_util.dart
index 956898953..0f50b4489 100644
--- a/lib/src/utils/context_variant_util/on_helper_util.dart
+++ b/lib/src/utils/context_variant_util/on_helper_util.dart
@@ -1,6 +1,4 @@
-import 'package:flutter/material.dart';
-
-import '../../variants/context_variant.dart';
+import '../../variants/variant.dart';
 
 /// Creates a [ContextVariant] that negates the condition of another [ContextVariant].
 ///
@@ -12,6 +10,6 @@ import '../../variants/context_variant.dart';
 ContextVariant onNot(ContextVariant variant) {
   return ContextVariant(
     'not(${variant.name})',
-    when: (BuildContext context) => !variant.when(context),
+    (context) => !variant.when(context),
   );
 }
diff --git a/lib/src/utils/context_variant_util/on_orientation_util.dart b/lib/src/utils/context_variant_util/on_orientation_util.dart
index ef0d5a628..9564ec7f2 100644
--- a/lib/src/utils/context_variant_util/on_orientation_util.dart
+++ b/lib/src/utils/context_variant_util/on_orientation_util.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../../helpers/string_ext.dart';
-import '../../variants/context_variant.dart';
+import '../../variants/variant.dart';
 
 /// Variant for portrait orientation.
 ///
@@ -23,7 +23,6 @@ final onLandscape = onOrientation(Orientation.landscape);
 ContextVariant onOrientation(Orientation orientation) {
   return ContextVariant(
     'on-${orientation.name.paramCase}',
-    when: (BuildContext context) =>
-        MediaQuery.orientationOf(context) == orientation,
+    (context) => MediaQuery.orientationOf(context) == orientation,
   );
 }
diff --git a/lib/src/variants/context_variant.dart b/lib/src/variants/context_variant.dart
deleted file mode 100644
index 1358cc091..000000000
--- a/lib/src/variants/context_variant.dart
+++ /dev/null
@@ -1,91 +0,0 @@
-import 'dart:core';
-
-import 'package:flutter/material.dart';
-
-import '../attributes/variant_attribute.dart';
-import '../core/attribute.dart';
-import '../factory/style_mix.dart';
-import 'variant.dart';
-
-/// A typedef for a function that determines if a specific context condition is met.
-typedef WhenContextFunction = bool Function(BuildContext context);
-
-/// A variant of styling that is applied based on specific context conditions.
-///
-/// `ContextVariant` extends the functionality of the `Variant` class by introducing
-/// context-sensitive styling. It uses a condition function to determine if the variant's
-/// styles should be applied, based on the current build context.
-///
-/// Example:
-/// Creating an `onDark` variant that applies styles when the app's theme is in dark mode:
-/// ```dart
-/// final onDark = ContextVariant(
-///   'on-dark',
-///   when: (BuildContext context) => Theme.of(context).brightness == Brightness.dark,
-/// )
-///
-/// final style = Style(
-///   text.style(fontSize: 16),
-///   onDark(
-///     text.style(color: Colors.white),
-///   ),
-/// );
-/// ```
-///
-/// This example defines a `ContextVariant` onDark, which checks if the current
-/// theme brightness is dark. If true, the associated styles are applied.
-@immutable
-class ContextVariant extends Variant {
-  /// A function that defines the condition under which this variant should be applied.
-  ///
-  /// The [when] function takes a [BuildContext] and returns a boolean indicating whether
-  /// the condition for this variant is met in the given context. This allows for dynamic
-  /// styling changes based on runtime context conditions, such as theme brightness or screen size.
-  final WhenContextFunction when;
-
-  /// Constructs a `ContextVariant` with a given [name] and a context condition function [when].
-  ///
-  /// The [name] uniquely identifies the variant and is used in style resolution, while the
-  /// [when] function determines the applicability of the variant based on the given context.
-  const ContextVariant(super.name, {required this.when});
-
-  @override
-  ContextVariantAttribute call([
-    Attribute? p1,
-    Attribute? p2,
-    Attribute? p3,
-    Attribute? p4,
-    Attribute? p5,
-    Attribute? p6,
-    Attribute? p7,
-    Attribute? p8,
-    Attribute? p9,
-    Attribute? p10,
-    Attribute? p11,
-    Attribute? p12,
-    Attribute? p13,
-    Attribute? p14,
-    Attribute? p15,
-    Attribute? p16,
-    Attribute? p17,
-    Attribute? p18,
-    Attribute? p19,
-    Attribute? p20,
-  ]) {
-    final params = [
-      p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, //
-      p11, p12, p13, p14, p15, p16, p17, p18, p19, p20,
-    ].whereType<Attribute>();
-
-    // Create a ContextVariantAttribute using the collected parameters.
-    return ContextVariantAttribute(this, Style.create(params));
-  }
-
-  @override
-  get props => [name, when];
-}
-
-@immutable
-class GestureVariant extends ContextVariant {
-  const GestureVariant(super.name, {required super.when});
-}
diff --git a/lib/src/variants/multi_variant.dart b/lib/src/variants/multi_variant.dart
deleted file mode 100644
index 6f34067ce..000000000
--- a/lib/src/variants/multi_variant.dart
+++ /dev/null
@@ -1,195 +0,0 @@
-import 'package:flutter/material.dart';
-
-import '../attributes/variant_attribute.dart';
-import '../core/attribute.dart';
-import '../factory/style_mix.dart';
-import 'context_variant.dart';
-import 'variant.dart';
-
-enum MultiVariantOperator { and, or }
-
-/// `MultiVariant` is a specialized form of `Variant` that allows combining multiple
-/// variants together, using logical operations. This enables complex style definitions
-/// that depend on multiple conditions.
-///
-/// The class supports two types of combinations:
-/// - `MultiVariantType.and`: Applies styles when all included variants are active.
-/// - `MultiVariantType.or`: Applies styles when any of the included variants are active.
-///
-/// `MultiVariant` also incorporates context-aware variants, allowing styles to adapt
-/// based on the build context. This feature is especially useful for responsive
-/// design or theming.
-///
-/// Example Usage:
-/// ```dart
-/// final variantA = Variant('A');
-/// final variantB = Variant('B');
-/// final combinedAndVariant = MultiVariant.and([variantA, variantB]);
-/// final combinedOrVariant = MultiVariant.or([variantA, variantB]);
-///
-/// final style = Style(
-///   text.style(fontSize: 16),
-///   combinedAndVariant(
-///     text.style(color: Colors.blue),
-///   ),
-///   combinedOrVariant(
-///     text.style(color: Colors.green),
-///   ),
-/// );
-/// ```
-///
-/// In this example, `combinedAndVariant` applies its styles only when both `variantA`
-/// and `variantB` are active, while `combinedOrVariant` applies its styles if either
-/// `variantA` or `variantB` is active. This allows for flexible and dynamic styling
-/// based on multiple conditions.
-
-@immutable
-class MultiVariant extends Variant {
-  /// A list of [Variant] instances contained within this `MultiVariant`.
-  final List<Variant> variants;
-
-  /// The type operator of this `MultiVariant`, defining its category or specific behavior.
-  ///
-  /// This field is crucial in differentiating various `MultiVariant` instances and
-  /// understanding and applying their behavior.
-  final MultiVariantOperator operatorType;
-
-  const MultiVariant._(super.name, this.variants, {required this.operatorType});
-
-  factory MultiVariant(
-    Iterable<Variant> variants, {
-    required MultiVariantOperator type,
-  }) {
-    final sortedVariants = variants.toList()
-      ..sort(((a, b) => a.name.compareTo(b.name)));
-    final combinedName = sortedVariants.map((e) => e.name).join('-');
-
-    return MultiVariant._(combinedName, sortedVariants, operatorType: type);
-  }
-
-  /// Factory constructor to create a `MultiVariant` where all provided variants need to be active (`MultiVariantType.and`).
-  ///
-  /// It initializes a `MultiVariant` with the given [variants] and sets the type to `MultiVariantType.and`.
-  factory MultiVariant.and(Iterable<Variant> variants) {
-    return MultiVariant(variants, type: MultiVariantOperator.and);
-  }
-
-  /// Factory constructor to create a `MultiVariant` where any one of the provided variants needs to be active (`MultiVariantType.or`).
-  ///
-  /// It initializes a `MultiVariant` with the given [variants] and sets the type to `MultiVariantType.or`.
-  factory MultiVariant.or(Iterable<Variant> variants) {
-    return MultiVariant(variants, type: MultiVariantOperator.or);
-  }
-
-  bool get hasGestureVariant {
-    return variants.any((variant) => variant is GestureVariant);
-  }
-
-  /// Removes specified variants from this `MultiVariant`.
-  ///
-  /// This method returns a new variant after removing the specified [variantsToRemove].
-  /// If only one variant remains after removal, it returns that single variant instead of a `MultiVariant`.
-  /// This is useful for dynamically adjusting styles by excluding certain variants.
-  ///
-  /// Example:
-  /// ```dart
-  /// final combinedVariant = MultiVariant.and([variantA, variantB, variantC]);
-  /// final updatedVariant = combinedVariant.remove([variantA]);
-  /// ```
-  /// In this example, `updatedVariant` will be a combination of `variantB` and `variantC`.
-  /// This is useful for procedurally applying variants based on runtime conditions.
-  Variant remove(Iterable<Variant> variantsToRemove) {
-    final updatedVariants = variants..removeWhere(variantsToRemove.contains);
-
-    return updatedVariants.length == 1
-        ? updatedVariants.first
-        : MultiVariant(updatedVariants, type: operatorType);
-  }
-
-  /// Determines if the current `MultiVariant` matches a set of provided variants.
-  ///
-  /// This method evaluates whether the variants within this `MultiVariant` align with the given [matchVariants] based on its `type`:
-  /// - `MultiVariantType.and`: Returns true if every variant in this `MultiVariant` is present in [matchVariants].
-  /// - `MultiVariantType.or`: Returns true if at least one of the variants in this `MultiVariant` is present in [matchVariants].
-  ///
-  /// This method is particularly useful for checking if a composite style, represented by this `MultiVariant`,
-  /// should be applied based on a specific set of active variants.
-  ///
-  /// Example:
-  /// ```dart
-  /// final combinedVariant = MultiVariant.and([variantA, variantB]);
-  /// bool isMatched = combinedVariant.matches([variantA, variantB, variantC]);
-  /// ```
-  /// Here, `isMatched` will be true for `MultiVariantType.and` if both `variantA` and `variantB` are included in the provided list.
-  /// For `MultiVariantType.or`, `isMatched` would be true if either `variantA` or `variantB` is in the list.
-  bool matches(Iterable<Variant> matchVariants) {
-    final matchSet = matchVariants.toSet();
-    final variantSet = variants.toSet();
-
-    return operatorType == MultiVariantOperator.and
-        ? variantSet.difference(matchSet).isEmpty
-        : variantSet.intersection(matchSet).isNotEmpty;
-  }
-
-  /// Evaluates if the `MultiVariant` should be applied based on the build context.
-  ///
-  /// For `MultiVariantType.or`, it returns true if any of the context-aware variants (`ContextVariant`)
-  /// evaluates true in the given [context]. For `MultiVariantType.and`, it returns true only if all context-aware
-  /// variants evaluate true, and if all variants in the `MultiVariant` are context-aware.
-  ///
-  /// This method enables context-sensitive styling, allowing the application of styles based on runtime
-  /// conditions like screen size, orientation, or theme.
-  ///
-  /// Example:
-  /// ```dart
-  /// final combinedVariant = MultiVariant.or([contextVariantA, contextVariantB]);
-  /// bool isApplicable = combinedVariant.when(context);
-  /// ```
-  /// `isApplicable` will be true if either `contextVariantA` or `contextVariantB` is applicable in the given context.
-  bool when(BuildContext context) {
-    final contextVariants = variants.whereType<ContextVariant>();
-
-    return operatorType == MultiVariantOperator.or
-        ? contextVariants.any((variant) => variant.when(context))
-        : contextVariants.length == variants.length &&
-            contextVariants.every((variant) => variant.when(context));
-  }
-
-  /// A method for creating a new `MultiVariantAttribute` instance.
-  ///
-  /// It takes up to 20 optional [Attribute] parameters and creates a new `MultiVariantAttribute` using these attributes.
-  /// This method allows for easy creation of a `MultiVariantAttribute` with custom attributes.
-  @override
-  MultiVariantAttribute call([
-    Attribute? p1,
-    Attribute? p2,
-    Attribute? p3,
-    Attribute? p4,
-    Attribute? p5,
-    Attribute? p6,
-    Attribute? p7,
-    Attribute? p8,
-    Attribute? p9,
-    Attribute? p10,
-    Attribute? p11,
-    Attribute? p12,
-    Attribute? p13,
-    Attribute? p14,
-    Attribute? p15,
-    Attribute? p16,
-    Attribute? p17,
-    Attribute? p18,
-    Attribute? p19,
-    Attribute? p20,
-  ]) {
-    final params = [
-      p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, //
-      p11, p12, p13, p14, p15, p16, p17, p18, p19, p20,
-    ].whereType<Attribute>();
-
-    return MultiVariantAttribute(this, Style.create(params));
-  }
-
-  @override
-  get props => [name, variants];
-}
diff --git a/lib/src/variants/variant.dart b/lib/src/variants/variant.dart
index 08376e68c..048e76ce3 100644
--- a/lib/src/variants/variant.dart
+++ b/lib/src/variants/variant.dart
@@ -4,7 +4,6 @@ import '../attributes/variant_attribute.dart';
 import '../core/attribute.dart';
 import '../factory/style_mix.dart';
 import '../helpers/compare_mixin.dart';
-import 'multi_variant.dart';
 
 /// An immutable class representing a styling variant.
 ///
@@ -105,3 +104,265 @@ class Variant with Comparable {
   @override
   get props => [name];
 }
+
+/// A typedef for a function that determines if a specific context condition is met.
+typedef WhenContextFunction = bool Function(BuildContext context);
+
+/// A variant of styling that is applied based on specific context conditions.
+///
+/// `ContextVariant` extends the functionality of the `Variant` class by introducing
+/// context-sensitive styling. It uses a condition function to determine if the variant's
+/// styles should be applied, based on the current build context.
+///
+/// Example:
+/// Creating an `onDark` variant that applies styles when the app's theme is in dark mode:
+/// ```dart
+/// final onDark = ContextVariant(
+///   'on-dark',
+///   ( context) => Theme.of(context).brightness == Brightness.dark,
+/// )
+///
+/// final style = Style(
+///   text.style(fontSize: 16),
+///   onDark(
+///     text.style(color: Colors.white),
+///   ),
+/// );
+/// ```
+///
+/// This example defines a `ContextVariant` onDark, which checks if the current
+/// theme brightness is dark. If true, the associated styles are applied.
+@immutable
+class ContextVariant extends Variant {
+  /// A function that defines the condition under which this variant should be applied.
+  ///
+  /// The [when] function takes a [BuildContext] and returns a boolean indicating whether
+  /// the condition for this variant is met in the given context. This allows for dynamic
+  /// styling changes based on runtime context conditions, such as theme brightness or screen size.
+  final WhenContextFunction when;
+
+  /// Constructs a `ContextVariant` with a given [name] and a context condition function [when].
+  ///
+  /// The [name] uniquely identifies the variant and is used in style resolution, while the
+  /// [when] function determines the applicability of the variant based on the given context.
+  const ContextVariant(super.name, this.when);
+
+  @override
+  ContextVariantAttribute call([
+    Attribute? p1,
+    Attribute? p2,
+    Attribute? p3,
+    Attribute? p4,
+    Attribute? p5,
+    Attribute? p6,
+    Attribute? p7,
+    Attribute? p8,
+    Attribute? p9,
+    Attribute? p10,
+    Attribute? p11,
+    Attribute? p12,
+    Attribute? p13,
+    Attribute? p14,
+    Attribute? p15,
+    Attribute? p16,
+    Attribute? p17,
+    Attribute? p18,
+    Attribute? p19,
+    Attribute? p20,
+  ]) {
+    final params = [
+      p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, //
+      p11, p12, p13, p14, p15, p16, p17, p18, p19, p20,
+    ].whereType<Attribute>();
+
+    // Create a ContextVariantAttribute using the collected parameters.
+    return ContextVariantAttribute(this, Style.create(params));
+  }
+
+  @override
+  get props => [name, when];
+}
+
+enum MultiVariantOperator { and, or }
+
+/// `MultiVariant` is a specialized form of `Variant` that allows combining multiple
+/// variants together, using logical operations. This enables complex style definitions
+/// that depend on multiple conditions.
+///
+/// The class supports two types of combinations:
+/// - `MultiVariantType.and`: Applies styles when all included variants are active.
+/// - `MultiVariantType.or`: Applies styles when any of the included variants are active.
+///
+/// `MultiVariant` also incorporates context-aware variants, allowing styles to adapt
+/// based on the build context. This feature is especially useful for responsive
+/// design or theming.
+///
+/// Example Usage:
+/// ```dart
+/// final variantA = Variant('A');
+/// final variantB = Variant('B');
+/// final combinedAndVariant = MultiVariant.and([variantA, variantB]);
+/// final combinedOrVariant = MultiVariant.or([variantA, variantB]);
+///
+/// final style = Style(
+///   text.style(fontSize: 16),
+///   combinedAndVariant(
+///     text.style(color: Colors.blue),
+///   ),
+///   combinedOrVariant(
+///     text.style(color: Colors.green),
+///   ),
+/// );
+/// ```
+///
+/// In this example, `combinedAndVariant` applies its styles only when both `variantA`
+/// and `variantB` are active, while `combinedOrVariant` applies its styles if either
+/// `variantA` or `variantB` is active. This allows for flexible and dynamic styling
+/// based on multiple conditions.
+
+@immutable
+class MultiVariant extends Variant {
+  /// A list of [Variant] instances contained within this `MultiVariant`.
+  final List<Variant> variants;
+
+  /// The type operator of this `MultiVariant`, defining its category or specific behavior.
+  ///
+  /// This field is crucial in differentiating various `MultiVariant` instances and
+  /// understanding and applying their behavior.
+  final MultiVariantOperator operatorType;
+
+  const MultiVariant._(super.name, this.variants, {required this.operatorType});
+
+  factory MultiVariant(
+    Iterable<Variant> variants, {
+    required MultiVariantOperator type,
+  }) {
+    final sortedVariants = variants.toList()
+      ..sort(((a, b) => a.name.compareTo(b.name)));
+    final combinedName = sortedVariants.map((e) => e.name).join('-');
+
+    return MultiVariant._(combinedName, sortedVariants, operatorType: type);
+  }
+
+  /// Factory constructor to create a `MultiVariant` where all provided variants need to be active (`MultiVariantType.and`).
+  ///
+  /// It initializes a `MultiVariant` with the given [variants] and sets the type to `MultiVariantType.and`.
+  factory MultiVariant.and(Iterable<Variant> variants) {
+    return MultiVariant(variants, type: MultiVariantOperator.and);
+  }
+
+  /// Factory constructor to create a `MultiVariant` where any one of the provided variants needs to be active (`MultiVariantType.or`).
+  ///
+  /// It initializes a `MultiVariant` with the given [variants] and sets the type to `MultiVariantType.or`.
+  factory MultiVariant.or(Iterable<Variant> variants) {
+    return MultiVariant(variants, type: MultiVariantOperator.or);
+  }
+
+  /// Removes specified variants from this `MultiVariant`.
+  ///
+  /// This method returns a new variant after removing the specified [variantsToRemove].
+  /// If only one variant remains after removal, it returns that single variant instead of a `MultiVariant`.
+  /// This is useful for dynamically adjusting styles by excluding certain variants.
+  ///
+  /// Example:
+  /// ```dart
+  /// final combinedVariant = MultiVariant.and([variantA, variantB, variantC]);
+  /// final updatedVariant = combinedVariant.remove([variantA]);
+  /// ```
+  /// In this example, `updatedVariant` will be a combination of `variantB` and `variantC`.
+  /// This is useful for procedurally applying variants based on runtime conditions.
+  Variant remove(Iterable<Variant> variantsToRemove) {
+    final updatedVariants = variants..removeWhere(variantsToRemove.contains);
+
+    return updatedVariants.length == 1
+        ? updatedVariants.first
+        : MultiVariant(updatedVariants, type: operatorType);
+  }
+
+  /// Determines if the current `MultiVariant` matches a set of provided variants.
+  ///
+  /// This method evaluates whether the variants within this `MultiVariant` align with the given [matchVariants] based on its `type`:
+  /// - `MultiVariantType.and`: Returns true if every variant in this `MultiVariant` is present in [matchVariants].
+  /// - `MultiVariantType.or`: Returns true if at least one of the variants in this `MultiVariant` is present in [matchVariants].
+  ///
+  /// This method is particularly useful for checking if a composite style, represented by this `MultiVariant`,
+  /// should be applied based on a specific set of active variants.
+  ///
+  /// Example:
+  /// ```dart
+  /// final combinedVariant = MultiVariant.and([variantA, variantB]);
+  /// bool isMatched = combinedVariant.matches([variantA, variantB, variantC]);
+  /// ```
+  /// Here, `isMatched` will be true for `MultiVariantType.and` if both `variantA` and `variantB` are included in the provided list.
+  /// For `MultiVariantType.or`, `isMatched` would be true if either `variantA` or `variantB` is in the list.
+  bool matches(Iterable<Variant> matchVariants) {
+    final matchSet = matchVariants.toSet();
+    final variantSet = variants.toSet();
+
+    return operatorType == MultiVariantOperator.and
+        ? variantSet.difference(matchSet).isEmpty
+        : variantSet.intersection(matchSet).isNotEmpty;
+  }
+
+  /// Evaluates if the `MultiVariant` should be applied based on the build context.
+  ///
+  /// For `MultiVariantType.or`, it returns true if any of the context-aware variants (`ContextVariant`)
+  /// evaluates true in the given [context]. For `MultiVariantType.and`, it returns true only if all context-aware
+  /// variants evaluate true, and if all variants in the `MultiVariant` are context-aware.
+  ///
+  /// This method enables context-sensitive styling, allowing the application of styles based on runtime
+  /// conditions like screen size, orientation, or theme.
+  ///
+  /// Example:
+  /// ```dart
+  /// final combinedVariant = MultiVariant.or([contextVariantA, contextVariantB]);
+  /// bool isApplicable = combinedVariant.when(context);
+  /// ```
+  /// `isApplicable` will be true if either `contextVariantA` or `contextVariantB` is applicable in the given context.
+  bool when(BuildContext context) {
+    final contextVariants = variants.whereType<ContextVariant>();
+
+    return operatorType == MultiVariantOperator.or
+        ? contextVariants.any((variant) => variant.when(context))
+        : contextVariants.length == variants.length &&
+            contextVariants.every((variant) => variant.when(context));
+  }
+
+  /// A method for creating a new `MultiVariantAttribute` instance.
+  ///
+  /// It takes up to 20 optional [Attribute] parameters and creates a new `MultiVariantAttribute` using these attributes.
+  /// This method allows for easy creation of a `MultiVariantAttribute` with custom attributes.
+  @override
+  MultiVariantAttribute call([
+    Attribute? p1,
+    Attribute? p2,
+    Attribute? p3,
+    Attribute? p4,
+    Attribute? p5,
+    Attribute? p6,
+    Attribute? p7,
+    Attribute? p8,
+    Attribute? p9,
+    Attribute? p10,
+    Attribute? p11,
+    Attribute? p12,
+    Attribute? p13,
+    Attribute? p14,
+    Attribute? p15,
+    Attribute? p16,
+    Attribute? p17,
+    Attribute? p18,
+    Attribute? p19,
+    Attribute? p20,
+  ]) {
+    final params = [
+      p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, //
+      p11, p12, p13, p14, p15, p16, p17, p18, p19, p20,
+    ].whereType<Attribute>();
+
+    return MultiVariantAttribute(this, Style.create(params));
+  }
+
+  @override
+  get props => [name, variants];
+}
diff --git a/lib/src/widgets/pressable/gesture_util.dart b/lib/src/widgets/pressable/gesture_util.dart
index ad6add268..83a776b22 100644
--- a/lib/src/widgets/pressable/gesture_util.dart
+++ b/lib/src/widgets/pressable/gesture_util.dart
@@ -1,5 +1,7 @@
+import 'package:flutter/material.dart';
+
 import '../../helpers/string_ext.dart';
-import '../../variants/context_variant.dart';
+import '../../variants/variant.dart';
 import 'gesture_state.notifier.dart';
 
 final onPress = _onState(GestureState.pressed);
@@ -10,24 +12,29 @@ final onEnabled = _onStatus(GestureStatus.enabled);
 
 final onFocus = ContextVariant(
   'on-focus',
-  when: (context) => GestureStateNotifier.of(context)?.focus == true,
+  (context) => GestureStateNotifier.of(context)?.focus == true,
 );
 
 final onHover = ContextVariant(
   'on-hover',
-  when: (context) => GestureStateNotifier.of(context)?.hover == true,
+  (context) => GestureStateNotifier.of(context)?.hover == true,
 );
 
+@immutable
+class GestureVariant extends ContextVariant {
+  const GestureVariant(super.name, super.when);
+}
+
 GestureVariant _onState(GestureState state) {
   return GestureVariant(
     'on-${state.name.paramCase}',
-    when: (context) => GestureStateNotifier.of(context)?.state == state,
+    (context) => GestureStateNotifier.of(context)?.state == state,
   );
 }
 
 GestureVariant _onStatus(GestureStatus status) {
   return GestureVariant(
     'on-${status.name.paramCase}',
-    when: (context) => GestureStateNotifier.of(context)?.status == status,
+    (context) => GestureStateNotifier.of(context)?.status == status,
   );
 }
diff --git a/test/src/attributes/variant_attribute_test.dart b/test/src/attributes/variant_attribute_test.dart
index 762d90db0..82bbb82d9 100644
--- a/test/src/attributes/variant_attribute_test.dart
+++ b/test/src/attributes/variant_attribute_test.dart
@@ -63,7 +63,7 @@ void main() {
 
   // ContextVariantAttribute
   group('ContextVariantAttribute', () {
-    final variant = ContextVariant('custom_variant', when: (_) => true);
+    final variant = ContextVariant('custom_variant', (_) => true);
 
     final style = Style(const MockIntScalarAttribute(8));
     test('Constructor assigns correct properties', () {
diff --git a/test/src/factory/mix_provider_data_test.dart b/test/src/factory/mix_provider_data_test.dart
index c2311e928..bf39c31a3 100644
--- a/test/src/factory/mix_provider_data_test.dart
+++ b/test/src/factory/mix_provider_data_test.dart
@@ -3,12 +3,12 @@ import 'package:mix/src/core/attributes_map.dart';
 import 'package:mix/src/factory/mix_provider_data.dart';
 import 'package:mix/src/factory/style_mix.dart';
 import 'package:mix/src/theme/mix_theme.dart';
-import 'package:mix/src/variants/context_variant.dart';
+import 'package:mix/src/variants/variant.dart';
 
 import '../../helpers/testing_utils.dart';
 
 void main() {
-  final autoApplyVariant = ContextVariant('mock', when: (context) => true);
+  final autoApplyVariant = ContextVariant('mock', (context) => true);
   test('MixData create', () {
     final mixData = MixData.create(
         MockBuildContext(),
diff --git a/test/src/factory/style_mix_test.dart b/test/src/factory/style_mix_test.dart
index c41dd2b6f..936c883e7 100644
--- a/test/src/factory/style_mix_test.dart
+++ b/test/src/factory/style_mix_test.dart
@@ -176,7 +176,7 @@ void main() {
 
     test('with a Matched Variant', () {
       final style = Style(attr1, attr2, variantAttr1(attr3));
-      final updatedStyle = style.selectVariant(variantAttr1);
+      final updatedStyle = style.variant(variantAttr1);
 
       expect(updatedStyle.styles.length, 3);
       expect(style.styles.length, 2);
@@ -187,9 +187,9 @@ void main() {
     test('with matching multi variant', () {
       final multiVariant = MultiVariant.and(const [variantAttr1, variantAttr2]);
       final style = Style(attr1, attr2, multiVariant(attr3));
-      final firstStyle = style.selectVariant(variantAttr1);
-      final secondStyle = firstStyle.selectVariant(variantAttr2);
-      final thirdStyle = style.selectVariant(variantAttr1, variantAttr2);
+      final firstStyle = style.variant(variantAttr1);
+      final secondStyle = firstStyle.variant(variantAttr2);
+      final thirdStyle = style.variant(variantAttr1, variantAttr2);
 
       expect(firstStyle.styles.length, 2);
       expect(firstStyle.variants.length, 1);
@@ -205,7 +205,7 @@ void main() {
 
     test('with an Unmatched Variant', () {
       final style = Style(attr1, attr2);
-      final updatedStyle = style.selectVariant(variantAttr1);
+      final updatedStyle = style.variant(variantAttr1);
 
       expect(updatedStyle, style);
     });
@@ -221,8 +221,7 @@ void main() {
 
     test('with Matched Variants', () {
       final style = Style(attr1, variantAttr1(attr2), variantAttr2(attr3));
-      final updatedStyle =
-          style.selectVariantList([variantAttr1, variantAttr2]);
+      final updatedStyle = style.variantList([variantAttr1, variantAttr2]);
 
       expect(style.styles.length, 1);
       expect(style.variants.length, 2);
@@ -233,7 +232,7 @@ void main() {
     test('with matching multi variant', () {
       final multiVariant = MultiVariant.and(const [variantAttr1, variantAttr2]);
       final style = Style(attr1, attr2, multiVariant(attr3));
-      final thirdStyle = style.selectVariantList([variantAttr1, variantAttr2]);
+      final thirdStyle = style.variantList([variantAttr1, variantAttr2]);
 
       expect(thirdStyle.styles.length, 3);
       expect(thirdStyle.variants.length, 0);
@@ -241,14 +240,14 @@ void main() {
 
     test('with Unmatched Variants', () {
       final mix = Style(attr1);
-      final updatedMix = mix.selectVariantList([variantAttr1, variantAttr2]);
+      final updatedMix = mix.variantList([variantAttr1, variantAttr2]);
 
       expect(updatedMix, mix);
     });
 
     test('with Empty List', () {
       final mix = Style(attr1, attr2);
-      final updatedMix = mix.selectVariantList([]);
+      final updatedMix = mix.variantList([]);
 
       expect(updatedMix, mix);
     });
diff --git a/test/src/specs/container/box_spec_test.dart b/test/src/specs/container/box_spec_test.dart
index 34a34adf9..83aa588c1 100644
--- a/test/src/specs/container/box_spec_test.dart
+++ b/test/src/specs/container/box_spec_test.dart
@@ -15,7 +15,7 @@ void main() {
           // const AlignmentGeometryAttribute(Alignment.center),
           // const PaddingAttribute(SpacingDto.only(top: 8, bottom: 16)),
           // const MarginAttribute(SpacingDto.only(top: 10.0, bottom: 12.0)),
-          // const BoxConstraintsAttribute(
+          // const BoxConstraintsDto(
           //   BoxConstraintsDto(maxWidth: 300.0, minHeight: 200.0),
           // ),
           // const DecorationAttribute(
diff --git a/test/src/specs/text/text_attribute_test.dart b/test/src/specs/text/text_attribute_test.dart
index 7e26b1ac7..2f0cca386 100644
--- a/test/src/specs/text/text_attribute_test.dart
+++ b/test/src/specs/text/text_attribute_test.dart
@@ -1,15 +1,113 @@
-import 'package:test/test.dart'; 
-import 'package:mix/src/specs/text/text_attribute.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mix/mix.dart';
+
+import '../../../helpers/testing_utils.dart';
 
 void main() {
-	group(
-		text_attribute_test, 
-		() {
-			test(
-				'',
-				() async {
-				},
-			);
-		},
-	);
-}
\ No newline at end of file
+  group('TextSpecAttribute', () {
+    final textSpecAttribute = TextSpecAttribute(
+      overflow: TextOverflow.ellipsis,
+      strutStyle: const StrutStyleDto(
+        fontFamily: 'Roboto',
+        fontSize: 12,
+        fontWeight: FontWeight.w500,
+      ),
+      textAlign: TextAlign.center,
+      textScaleFactor: 1.5,
+      maxLines: 2,
+      style: TextStyleDto.only(
+        fontFamily: 'Roboto',
+        fontSize: 12,
+        fontWeight: FontWeight.w500,
+      ),
+      textWidthBasis: TextWidthBasis.longestLine,
+      textHeightBehavior: const TextHeightBehavior(
+        applyHeightToFirstAscent: true,
+        applyHeightToLastDescent: true,
+      ),
+      textDirection: TextDirection.rtl,
+      softWrap: true,
+    );
+
+    // Constructor
+    test('constructor', () {
+      expect(textSpecAttribute.overflow, TextOverflow.ellipsis);
+      expect(textSpecAttribute.strutStyle, isA<StrutStyleDto>());
+      expect(textSpecAttribute.textAlign, TextAlign.center);
+      expect(textSpecAttribute.textScaleFactor, 1.5);
+      expect(textSpecAttribute.maxLines, 2);
+      expect(textSpecAttribute.style, isA<TextStyleDto>());
+      expect(textSpecAttribute.textWidthBasis, TextWidthBasis.longestLine);
+      expect(textSpecAttribute.textHeightBehavior, isA<TextHeightBehavior>());
+      expect(textSpecAttribute.textDirection, TextDirection.rtl);
+      expect(textSpecAttribute.softWrap, true);
+    });
+
+    //  merge
+    test('merge', () {
+      final other = TextSpecAttribute(
+        overflow: TextOverflow.clip,
+        strutStyle: const StrutStyleDto(
+          fontFamily: 'Helvetica',
+          fontSize: 14,
+          fontWeight: FontWeight.w500,
+        ),
+        textAlign: TextAlign.center,
+        textScaleFactor: 1.5,
+        maxLines: 2,
+        style: TextStyleDto.only(
+          fontFamily: 'Helvetica',
+          fontSize: 16,
+          fontWeight: FontWeight.w200,
+        ),
+        textWidthBasis: TextWidthBasis.longestLine,
+        textHeightBehavior: const TextHeightBehavior(
+          applyHeightToFirstAscent: false,
+          applyHeightToLastDescent: false,
+        ),
+        textDirection: TextDirection.ltr,
+        softWrap: false,
+      );
+
+      final merged = textSpecAttribute.merge(other);
+
+      expect(merged.overflow, TextOverflow.clip);
+      expect(merged.strutStyle!.fontFamily, 'Helvetica');
+      expect(merged.strutStyle!.fontSize, 14);
+      expect(merged.strutStyle!.fontWeight, FontWeight.w500);
+      expect(merged.textAlign, TextAlign.center);
+      expect(merged.textScaleFactor, 1.5);
+      expect(merged.maxLines, 2);
+      expect(merged.style!.resolve(EmptyMixData).fontFamily, 'Helvetica');
+      expect(merged.style!.resolve(EmptyMixData).fontSize, 16);
+      expect(merged.style!.resolve(EmptyMixData).fontWeight, FontWeight.w200);
+      expect(merged.textWidthBasis, TextWidthBasis.longestLine);
+      expect(merged.textHeightBehavior!.applyHeightToFirstAscent, false);
+      expect(merged.textHeightBehavior!.applyHeightToLastDescent, false);
+      expect(merged.textDirection, TextDirection.ltr);
+      expect(merged.softWrap, false);
+    });
+
+    // resolve
+    test('resolve', () {
+      final resolved = textSpecAttribute.resolve(EmptyMixData);
+
+      expect(resolved.overflow, TextOverflow.ellipsis);
+      expect(resolved.strutStyle!.fontFamily, 'Roboto');
+      expect(resolved.strutStyle!.fontSize, 12);
+      expect(resolved.strutStyle!.fontWeight, FontWeight.w500);
+      expect(resolved.textAlign, TextAlign.center);
+      expect(resolved.textScaleFactor, 1.5);
+      expect(resolved.maxLines, 2);
+      expect(resolved.style!.fontFamily, 'Roboto');
+      expect(resolved.style!.fontSize, 12);
+      expect(resolved.style!.fontWeight, FontWeight.w500);
+      expect(resolved.textWidthBasis, TextWidthBasis.longestLine);
+      expect(resolved.textHeightBehavior!.applyHeightToFirstAscent, true);
+      expect(resolved.textHeightBehavior!.applyHeightToLastDescent, true);
+      expect(resolved.textDirection, TextDirection.rtl);
+      expect(resolved.softWrap, true);
+    });
+  });
+}
diff --git a/test/src/utils/context_variant_util_test.dart b/test/src/utils/context_variant_util_test.dart
index e331cbacb..15714e853 100644
--- a/test/src/utils/context_variant_util_test.dart
+++ b/test/src/utils/context_variant_util_test.dart
@@ -8,13 +8,13 @@ void main() {
   group('ContextVariant', () {
     test('Equality holds when all properties are the same', () {
       bool contextFunction(BuildContext context) => true;
-      final variant1 = ContextVariant('variant1', when: contextFunction);
-      final variant2 = ContextVariant('variant1', when: contextFunction);
+      final variant1 = ContextVariant('variant1', contextFunction);
+      final variant2 = ContextVariant('variant1', contextFunction);
       expect(variant1, variant2);
     });
     test('Equality fails when properties are different', () {
-      final variant1 = ContextVariant('variant1', when: (context) => true);
-      final variant2 = ContextVariant('variant2', when: (context) => true);
+      final variant1 = ContextVariant('variant1', (context) => true);
+      final variant2 = ContextVariant('variant2', (context) => true);
       expect(variant1, isNot(variant2));
     });
   });
diff --git a/test/src/variants/multi_variant_test.dart b/test/src/variants/variant_test.dart
similarity index 90%
rename from test/src/variants/multi_variant_test.dart
rename to test/src/variants/variant_test.dart
index de5f5d54b..cc5c037fc 100644
--- a/test/src/variants/multi_variant_test.dart
+++ b/test/src/variants/variant_test.dart
@@ -1,6 +1,5 @@
 import 'package:flutter_test/flutter_test.dart';
-import 'package:mix/mix.dart';
-import 'package:mix/src/variants/multi_variant.dart';
+import 'package:mix/src/variants/variant.dart';
 
 import '../../helpers/testing_utils.dart';
 
@@ -34,8 +33,8 @@ void main() {
     });
 
     test('when should correctly match context variants', () {
-      final variant1 = ContextVariant('variant1', when: (context) => true);
-      final variant2 = ContextVariant('variant2', when: (context) => false);
+      final variant1 = ContextVariant('variant1', (context) => true);
+      final variant2 = ContextVariant('variant2', (context) => false);
       final multiAndVariant = MultiVariant.and([variant1, variant2]);
       final multiOrVariant = MultiVariant.or([variant1, variant2]);
 
diff --git a/website/pages/docs/concepts/meta.json b/website/pages/docs/concepts/_meta.json
similarity index 86%
rename from website/pages/docs/concepts/meta.json
rename to website/pages/docs/concepts/_meta.json
index 711387d61..6c4a7b128 100644
--- a/website/pages/docs/concepts/meta.json
+++ b/website/pages/docs/concepts/_meta.json
@@ -1,7 +1,7 @@
 {
+  "styling": "Styling",
+  "variants": "Variants",
   "attributes-and-utilities": "Attributes and Utilities",
-  "mixing": "Mixing",
   "mixable-widgets": "Mixable widgets",
-  "variants": "Variants",
   "decorators": "Decorators"
 }
diff --git a/website/pages/docs/concepts/attributes-and-utilities.mdx b/website/pages/docs/concepts/attributes-and-utilities.mdx
index a544d8ebe..ed3434487 100644
--- a/website/pages/docs/concepts/attributes-and-utilities.mdx
+++ b/website/pages/docs/concepts/attributes-and-utilities.mdx
@@ -2,7 +2,6 @@
 title: "Attributes and Utilities"
 ---
 
-import { Callout } from "nextra-theme-docs";
 import { Callout } from "nextra-theme-docs";
 
 # Attributes
diff --git a/website/pages/docs/concepts/styling.mdx b/website/pages/docs/concepts/styling.mdx
index e81b79946..021734c75 100644
--- a/website/pages/docs/concepts/styling.mdx
+++ b/website/pages/docs/concepts/styling.mdx
@@ -5,7 +5,7 @@ title: "Styling"
 
 import { Callout } from "nextra-theme-docs";
 
-# Styling
+# Styling with Mix
 
 Mix introduces a functional and intuitive approach to styling in Flutter, empowering developers to create UIs that are both visually appealing and maintainable. By embracing the functional style syntax, Mix allows you to define styles in a more declarative and expressive manner, fostering clarity and consistency in your code.
 
@@ -13,13 +13,11 @@ This functional approach enables direct and readable style declarations, resulti
 
 By leveraging Mix's functional syntax, you can craft elegant widgets efficiently, ensuring a cohesive and dynamic user experience.
 
-## Style Class
+## Overview
 
 The Style class in Mix serves as a foundational utility for managing and applying styles. It encapsulates a collection of styling attributes and variants, offering a powerful and flexible way to define and manipulate styles for widgets. This concept page will guide you through the key features and usage of Style.
 
-**Overview**
-
-- **Purpose**: Style is designed to manage collections of styling attributes and variants, making it easier to apply consistent and reusable styles across your Flutter app.
+- **Purpose**: Style is designed to manage, and reuse collections of styling attributes and variants, making it easier to apply consistent and reusable styles across your Flutter app.
 - **Composition**: It combines multiple styling attributes, such as colors, fonts, sizes, and more, into a single entity that can be applied to widgets.
 - **Variants**: Besides standard styling attributes, Style also supports variants, allowing for more dynamic and context-sensitive styling.
 
diff --git a/website/pages/docs/concepts/variants.mdx b/website/pages/docs/concepts/variants.mdx
index 6e2e0408f..fb81a93d5 100644
--- a/website/pages/docs/concepts/variants.mdx
+++ b/website/pages/docs/concepts/variants.mdx
@@ -3,55 +3,139 @@ id: variants
 title: "Variants"
 ---
 
-import Code from "../../../components/Code.js";
+import { Callout } from "nextra-theme-docs";
 
-# Variants
+# Style Variants
+
+Variants are powerful tools in Mix, designed to streamline the styling process in Flutter applications. They allow for the grouping and conditional application of styling attributes, enhancing efficiency and adaptability in UI design.
 
 ## Overview
 
-Variants in Mix are a foundational concept for creating dynamic and modular style definitions. They enable developers to encapsulate and manage groups of styling attributes, which can be applied to various aspects of a Flutter application's UI.
+The `Variant` API is designed to be simple and intuitive. There are two types of variants.
+
+- **Named variants** are applied manually, and can be used to create custom variants.
+- **Context variants** are applied automatically, and can be used to create responsive variants.
+
+Variants usage can be broken down in two main parts. The definition of a `Variant`, and the application of the variant within a `Style`.
+
+## Named Variants
+
+Named variants are important when you want to have a very clear control of when a variant can be used, and want to control the over the variant usage and type.
+
+### Defining a Variant
 
-- Variants could be also use-cases for Design Systems
+To define a variant, you can use the `Variant` constructor.
 
-## The Role of Variants
+```dart
+const outlined = Variant('outlined');
+```
 
-Variants allow for the efficient organization of style attributes, facilitating the easy application and switching between different style sets. This approach provides a streamlined method for handling diverse styling requirements across different components, contributing to a more maintainable and consistent design system within your applications. By using Variants, developers can craft adaptable and cohesive UI components, enhancing both the functionality and aesthetic of their Flutter projects.
+### Using a Variant in a Style
+
+To use a variant in a style, you can call it as a function on a `Style` passing the attributes.
+
+```dart {1, 8-12}
+const outlined = Variant('outlined');
 
-```dart highlight="10-13"
 final style = Style(
-  backgroundColor(MaterialTokens.colorScheme.primary),
-  text.style(color: $onPrimary),
-  onHover(
-    backgroundColor(MaterialTokens.colorScheme.primary),
-    text.style(color: $onPrimary),
+  padding(20),
+  border.radius(10),
+  backgroundColor.black(),
+  text.style.color.white(),
+  outlined(
+    backgroundColor.transparent(),
+    border.color.black(),
+    text.style.color.black(),
   ),
 );
+```
+
+### Applying a Variant
+
+To apply a variant, you can use the `variant` method on a `Style`.
+
+```dart {1, 8-12, 15}
+const outlined = Variant('outlined');
 
-Pressable(
-  style: style,
-  child: const TextMix('Button'),
+final style = Style(
+  padding(20),
+  border.radius(10),
+  backgroundColor.black(),
+  text.style.color.white(),
+  outlined(
+    backgroundColor.transparent(),
+    border.color.black(),
+    text.style.color.black(),
+  ),
 );
+
+final outlinedStyle = style.variant(outlined);
 ```
 
-Variants can be extremely powerful, and allow you to create consistent variations of your
-Widgets.
+`outlinedStyle` will now have the attributes defined in the `outlined` variant, and will be equivalent to the following:
+
+```dart highlight="2-4"
+final outlinedStyle = Style(
+  padding(20),
+  border.radius(10),
+  backgroundColor.transparent(),
+  border.color.black(),
+  text.style.color.black(),
+);
+```
 
-## Usage
+## Context Variants
 
-To use a variant, call it on a _Mix_
+Context variants are variants that are applied automatically based on the BuildContext. They are useful when you want to create responsive variants that are applied automatically based on the context.
+
+### Defining a Context Variant
+
+To define a context variant, you can use the `ContextVariant` constructor and pass a `when` function.
 
 ```dart
+final onDark = ContextVariant(
+  'on-dark',
+  (context) => Theme.of(context).brightness == Brightness.dark;
+);
+```
+
+<Callout type="info">
+  Defining the name of a context variant with `on` is a convention, but not a
+  requirement. That helps identify that this is a `ContextVariant`.
+</Callout>
+
+### Using a Context Variant in a Style
+
+To use a context variant in a style, you can call it as a function on a `Style` passing the attributes.
+
+```dart {7-10}
+
 final style = Style(
+  padding(20),
+  border.radius(10),
+  backgroundColor.black(),
+  text.style.color.white(),
   onDark(
-    text.style(color: Colors.white),
-  ),
-  onLight(
-    text.style(color: Colors.black),
+    backgroundColor.white(),
+    text.style.color.black(),
   ),
 );
 ```
 
-### Conditional operators
+### Applying a Context Variant
+
+`ContextVariants` are applied automatically based on the `BuildContext`. Once it is called on a style it will be equivalent to have defined the following:
+
+```dart highlight="2-4"
+final onDarkStyle = Style(
+  padding(20),
+  border.radius(10),
+  backgroundColor.white(),
+  text.style.color.black(),
+);
+```
+
+## Conditional operators
 
 The operators `|` and `&` can be used to add conditions to your mix:
 
@@ -84,7 +168,7 @@ The `onNot` operator can also be called to execute the variant content only when
 variant is not called. For example:
 
 ```dart highlight="2-4"
-final mix = Style(
+final style = Style(
   onNot(disabled)(
     scale(1.2),
   ),
@@ -101,129 +185,30 @@ Widgets.
 These are `Variants` that will change based on different _gestures_ and state of the
 `Pressable` Widget.
 
-- `hover()`: Applies attributes on hover.
-- `focus()`: Applies attributes on focus.
-- `press()`: Applies attributes when pressing.
-- `disabled()`: Applies attributes when disabled.
+- `onHover()`: Applies attributes on hover.
+- `onFocus()`: Applies attributes on focus.
+- `onPress()`: Applies attributes when pressing.
+- `onDisabled()`: Applies attributes when disabled.
 
 ### Breakpoints
 
-- `small()`: Applies attributes when the screen is at least `small` breakpoint.
-- `medium()`: Applies attributes when the screen is at least `medium` breakpoint.
-- `large()`: Applies attributes when the screen is at least `large` breakpoint.
+- `onSmall()`: Applies attributes when the screen is at least `small` breakpoint.
+- `onMedium()`: Applies attributes when the screen is at least `medium` breakpoint.
+- `onLarge()`: Applies attributes when the screen is at least `large` breakpoint.
 
 Breakpoints for these sizes can be configured in the `MixTheme`:
 
-```dart
-MixTheme(
-  data: MixThemeData(
-    breakpoints: MixThemeBreakpoints(
-      small: 600, // cellphone
-      medium: 1240, // tablet
-      large: 1440, // desktop
-    ),
-  ),
-  child: ...,
-),
-```
-
 ### Orientation
 
-- `portrait()`: Applies attributes when the screen is in portrait orientation.
-- `landscape()`: Applies attributes when the screen is in landscape orientation.
+- `onPortrait()`: Applies attributes when the screen is in portrait orientation.
+- `onLandscape()`: Applies attributes when the screen is in landscape orientation.
 
 ### Dark Mode
 
-- `dark()`: Applies attributes when the theme is in dark mode.
-- `light()`: Applies attributes when the theme is in light mode.
+- `onDark()`: Applies attributes when the theme is in dark mode.
+- `onLight()`: Applies attributes when the theme is in light mode.
 
 ### State Holding
 
-- `active()`: Applies attributes when the widget state is marked as active
-- `inactive()`: Applies attributes when the widget state is marked as inactive
-
-### Text Styling
-
-For widgets such as Dialogs, Cards and Modals, it's good to have titles and content.
-
-- `title()`: Applies attributes when the `TextMix` is marked as title
-- `paragraph()`: Applies attributes when the `TextMix` is marked as paragraph
-
-```dart highlight="2-7"
-final mix = Style(
-  title(
-    titleCase(), // Makes the title uppercase
-    font(
-      weight: FontWeight.bold, // Makes the title bold
-    ),
-  ),
-);
-```
-
-All other texts that are not marked as `title` will not be touched.
-
-## Custom Variants
-
-Mix gives you complete control of how to define your own `Variants` and when they are
-applied.
-
-There are two types of `Variants` that you are able to define: callable and context
-variants.
-
-### Callable Variants
-
-Can be called manually when they need to be applied. You can define a variant the following
-way.
-
-```dart highlight="6-10"
-const outlined = Variant('outlined');
-
-final mix = Style(
-  backgroundColor(Colors.black),
-  text.style(color: Colors.white),
-  outlined(
-    backgroundColor(Colors.transparent),
-    borderColor(Colors.black),
-    text.style(color: Colors.black),
-  ),
-);
-```
-
-You are then able to choose when to apply the variant based on your own logic.
-
-```dart highlight="2"
-Pressable(
-  style: mix.withVariant(outlined),
-  onPressed: () {},
-  child: const TextMix('Outlined Button'),
-);
-```
-
-You are also able to pass the variant through the `variant` parameter on the
-`MixableWidget` constructor
-
-```dart highlight="3"
-Pressable(
-  style: mix,
-  variant: outlined,
-  onPressed: () {},
-  child: const TextMix('Outlined Button'),
-);
-
-```
-
-### Context Variants
-
-These are `Variants` that have a method that defines when they should be applied based on
-the `BuildContext`. These will be applied automatically.
-
-Here is an example implementation of the `dark()` to understand how it works.
-
-```dart highlight="3-5"
-final dark = Variant(
-  'dark',
-  shouldApply: (BuildContext context) {
-    return Theme.of(context).brightness == Brightness.dark;
-  },
-);
-```
+- `onActive()`: Applies attributes when the widget state is marked as active
+- `onInactive()`: Applies attributes when the widget state is marked as inactive
diff --git a/website/pages/docs/theme/meta.json b/website/pages/docs/theme/_meta.json
similarity index 100%
rename from website/pages/docs/theme/meta.json
rename to website/pages/docs/theme/_meta.json