@rolster/styles-foundations 1.1.8 → 1.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/rolster-styles.css +453 -331
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +453 -331
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/foundations/_colors-foundations.scss +108 -40
  7. package/scss/foundations/_themes-foundations.scss +14 -4
  8. package/scss/utilities/_helpers-utilities.scss +20 -20
  9. package/scss/utilities/_normalize-utilities.scss +6 -2
package/dist/rolster-styles.css CHANGED
@@ -24,17 +24,17 @@
24
24
  --border-light-500: rgba(255, 255, 255, 1);
25
25
  --border-light-300: rgba(185, 195, 231, 1);
26
26
  --border-light-100: rgba(128, 141, 190, 1);
27
- --color-base-900: rgba(21, 56, 101, 1);
28
- --color-base-700: rgba(17, 75, 147, 1);
29
- --color-base-500: rgba(33, 122, 214, 1);
30
- --color-base-300: rgba(136, 186, 241, 1);
31
- --color-base-100: rgba(227, 236, 251, 1);
32
- --skeleton-base-500: rgba(17, 75, 147, 0.5);
33
- --skeleton-base-300: rgba(17, 75, 147, 0.25);
34
- --skeleton-base-100: rgba(17, 75, 147, 0.1);
35
- --box-shadow-base-500: rgba(33, 122, 214, 0.24);
36
- --backdrop-base-500: rgba(18, 46, 79, 0.8);
37
- --gradient-base-500: linear-gradient(
27
+ --color-primary-900: rgba(21, 56, 101, 1);
28
+ --color-primary-700: rgba(17, 75, 147, 1);
29
+ --color-primary-500: rgba(33, 122, 214, 1);
30
+ --color-primary-300: rgba(136, 186, 241, 1);
31
+ --color-primary-100: rgba(227, 236, 251, 1);
32
+ --skeleton-primary-500: rgba(17, 75, 147, 0.5);
33
+ --skeleton-primary-300: rgba(17, 75, 147, 0.25);
34
+ --skeleton-primary-100: rgba(17, 75, 147, 0.1);
35
+ --box-shadow-primary-500: rgba(33, 122, 214, 0.24);
36
+ --backdrop-primary-500: rgba(21, 56, 101, 0.8);
37
+ --gradient-primary-500: linear-gradient(
38
38
  180deg,
39
39
  rgb(33, 122, 214) 0%,
40
40
  rgb(17, 75, 147) 100%
@@ -48,7 +48,7 @@
48
48
  --skeleton-success-300: rgba(10, 123, 104, 0.25);
49
49
  --skeleton-success-100: rgba(10, 123, 104, 0.1);
50
50
  --box-shadow-success-500: rgba(12, 192, 157, 0.24);
51
- --backdrop-success-500: rgba(14, 70, 60, 0.8);
51
+ --backdrop-success-500: rgba(16, 81, 70, 0.8);
52
52
  --gradient-success-500: linear-gradient(
53
53
  180deg,
54
54
  rgb(12, 192, 157) 0%,
@@ -63,41 +63,41 @@
63
63
  --skeleton-info-300: rgba(0, 110, 164, 0.25);
64
64
  --skeleton-info-100: rgba(0, 110, 164, 0.1);
65
65
  --box-shadow-info-500: rgba(24, 182, 246, 0.24);
66
- --backdrop-info-500: rgba(20, 77, 100, 0.8);
66
+ --backdrop-info-500: rgba(10, 77, 112, 0.8);
67
67
  --gradient-info-500: linear-gradient(
68
68
  180deg,
69
69
  rgb(24, 182, 246) 0%,
70
70
  rgb(0, 110, 164) 100%
71
71
  );
72
- --color-happy-900: rgba(60, 22, 46, 1);
73
- --color-happy-700: rgba(114, 54, 93, 1);
74
- --color-happy-500: rgba(169, 80, 142, 1);
75
- --color-happy-300: rgba(218, 152, 200, 1);
76
- --color-happy-100: rgba(243, 219, 238, 1);
77
- --skeleton-happy-500: rgba(114, 54, 93, 0.5);
78
- --skeleton-happy-300: rgba(114, 54, 93, 0.25);
79
- --skeleton-happy-100: rgba(114, 54, 93, 0.1);
80
- --box-shadow-happy-500: rgba(169, 80, 142, 0.24);
81
- --backdrop-happy-500: rgba(64, 35, 55, 0.8);
72
+ --color-happy-900: rgb(63, 3, 104, 1);
73
+ --color-happy-700: rgb(113, 27, 174, 1);
74
+ --color-happy-500: rgba(154, 43, 242, 1);
75
+ --color-happy-300: rgb(197, 127, 255, 1);
76
+ --color-happy-100: rgb(243, 219, 238, 1);
77
+ --skeleton-happy-500: rgba(113, 27, 174, 0.5);
78
+ --skeleton-happy-300: rgba(113, 27, 174, 0.25);
79
+ --skeleton-happy-100: rgba(113, 27, 174, 0.1);
80
+ --box-shadow-happy-500: rgba(154, 43, 242, 0.24);
81
+ --backdrop-happy-500: rgba(63, 3, 104, 0.8);
82
82
  --gradient-happy-500: linear-gradient(
83
83
  180deg,
84
- rgb(169, 80, 142) 0%,
85
- rgb(114, 54, 93) 100%
84
+ rgb(154, 43, 242) 0%,
85
+ rgb(113, 27, 174) 100%
86
86
  );
87
- --color-warning-900: rgba(155, 60, 17, 1);
88
- --color-warning-700: rgba(235, 101, 11, 1);
89
- --color-warning-500: rgba(252, 165, 73, 1);
90
- --color-warning-300: rgba(254, 220, 170, 1);
91
- --color-warning-100: rgba(255, 248, 237, 1);
92
- --skeleton-warning-500: rgba(235, 101, 11, 0.5);
93
- --skeleton-warning-300: rgba(235, 101, 11, 0.25);
94
- --skeleton-warning-100: rgba(235, 101, 11, 0.1);
95
- --box-shadow-warning-500: rgba(252, 165, 73, 0.24);
96
- --backdrop-warning-500: rgba(102, 71, 38, 0.8);
87
+ --color-warning-900: rgb(70, 27, 2, 1);
88
+ --color-warning-700: rgba(164, 96, 4, 1);
89
+ --color-warning-500: rgb(239, 178, 3, 1);
90
+ --color-warning-300: rgb(255, 196, 28, 1);
91
+ --color-warning-100: rgb(255, 249, 194, 1);
92
+ --skeleton-warning-500: rgba(164, 96, 4, 0.5);
93
+ --skeleton-warning-300: rgba(164, 96, 4, 0.25);
94
+ --skeleton-warning-100: rgba(164, 96, 4, 0.1);
95
+ --box-shadow-warning-500: rgba(239, 178, 3, 0.24);
96
+ --backdrop-warning-500: rgba(70, 27, 2, 0.8);
97
97
  --gradient-warning-500: linear-gradient(
98
98
  180deg,
99
- rgb(252, 165, 73) 0%,
100
- rgb(235, 101, 11) 100%
99
+ rgb(239, 178, 3) 0%,
100
+ rgb(164, 96, 4) 100%
101
101
  );
102
102
  --color-danger-900: rgba(130, 26, 26, 1);
103
103
  --color-danger-700: rgba(190, 23, 23, 1);
@@ -108,12 +108,42 @@
108
108
  --skeleton-danger-300: rgba(190, 23, 23, 0.25);
109
109
  --skeleton-danger-100: rgba(190, 23, 23, 0.1);
110
110
  --box-shadow-danger-500: rgba(244, 60, 60, 0.24);
111
- --backdrop-danger-500: rgba(99, 33, 33, 0.8);
111
+ --backdrop-danger-500: rgba(130, 26, 26, 0.8);
112
112
  --gradient-danger-500: linear-gradient(
113
113
  180deg,
114
114
  rgb(244, 60, 60) 0%,
115
115
  rgb(190, 23, 23) 100%
116
116
  );
117
+ --color-coffee-900: rgba(93, 57, 49, 1);
118
+ --color-coffee-700: rgba(140, 83, 66, 1);
119
+ --color-coffee-500: rgba(182, 121, 89, 1);
120
+ --color-coffee-300: rgba(219, 193, 172, 1);
121
+ --color-coffee-100: rgb(243, 234, 225, 1);
122
+ --skeleton-coffee-500: rgba(140, 83, 66, 0.5);
123
+ --skeleton-coffee-300: rgba(140, 83, 66, 0.25);
124
+ --skeleton-coffee-100: rgba(140, 83, 66, 0.1);
125
+ --box-shadow-coffee-500: rgba(182, 121, 89, 0.24);
126
+ --backdrop-coffee-500: rgba(93, 57, 49, 0.8);
127
+ --gradient-coffee-500: linear-gradient(
128
+ 180deg,
129
+ rgb(182, 121, 89) 0%,
130
+ rgb(140, 83, 66) 100%
131
+ );
132
+ --color-obsidian-900: rgba(58, 50, 45, 1);
133
+ --color-obsidian-700: rgba(97, 84, 71, 1);
134
+ --color-obsidian-500: rgba(141, 127, 101, 1);
135
+ --color-obsidian-300: rgb(178, 170, 146, 1);
136
+ --color-obsidian-100: rgb(230, 228, 219, 1);
137
+ --skeleton-obsidian-500: rgba(97, 84, 71, 0.5);
138
+ --skeleton-obsidian-300: rgba(97, 84, 71, 0.25);
139
+ --skeleton-obsidian-100: rgba(97, 84, 71, 0.1);
140
+ --box-shadow-obsidian-500: rgba(141, 127, 101, 0.24);
141
+ --backdrop-obsidian-500: rgba(58, 50, 45, 0.8);
142
+ --gradient-obsidian-500: linear-gradient(
143
+ 180deg,
144
+ rgb(141, 127, 101) 0%,
145
+ rgb(97, 84, 71) 100%
146
+ );
117
147
  }
118
148
 
119
149
  :root {
@@ -985,21 +1015,21 @@
985
1015
  --shadow-center-theme-16: var(--shadow-center-light-16);
986
1016
  --shadow-center-theme-24: var(--shadow-center-light-24);
987
1017
  --shadow-center-theme-32: var(--shadow-center-light-32);
988
- --border-1-base-100: var(--border-1) solid var(--color-base-100);
989
- --border-2-base-100: var(--border-2) solid var(--color-base-100);
990
- --border-4-base-100: var(--border-4) solid var(--color-base-100);
991
- --border-1-base-300: var(--border-1) solid var(--color-base-300);
992
- --border-2-base-300: var(--border-2) solid var(--color-base-300);
993
- --border-4-base-300: var(--border-4) solid var(--color-base-300);
994
- --border-1-base-500: var(--border-1) solid var(--color-base-500);
995
- --border-2-base-500: var(--border-2) solid var(--color-base-500);
996
- --border-4-base-500: var(--border-4) solid var(--color-base-500);
997
- --border-1-base-700: var(--border-1) solid var(--color-base-700);
998
- --border-2-base-700: var(--border-2) solid var(--color-base-700);
999
- --border-4-base-700: var(--border-4) solid var(--color-base-700);
1000
- --border-1-base-900: var(--border-1) solid var(--color-base-900);
1001
- --border-2-base-900: var(--border-2) solid var(--color-base-900);
1002
- --border-4-base-900: var(--border-4) solid var(--color-base-900);
1018
+ --border-1-primary-100: var(--border-1) solid var(--color-primary-100);
1019
+ --border-2-primary-100: var(--border-2) solid var(--color-primary-100);
1020
+ --border-4-primary-100: var(--border-4) solid var(--color-primary-100);
1021
+ --border-1-primary-300: var(--border-1) solid var(--color-primary-300);
1022
+ --border-2-primary-300: var(--border-2) solid var(--color-primary-300);
1023
+ --border-4-primary-300: var(--border-4) solid var(--color-primary-300);
1024
+ --border-1-primary-500: var(--border-1) solid var(--color-primary-500);
1025
+ --border-2-primary-500: var(--border-2) solid var(--color-primary-500);
1026
+ --border-4-primary-500: var(--border-4) solid var(--color-primary-500);
1027
+ --border-1-primary-700: var(--border-1) solid var(--color-primary-700);
1028
+ --border-2-primary-700: var(--border-2) solid var(--color-primary-700);
1029
+ --border-4-primary-700: var(--border-4) solid var(--color-primary-700);
1030
+ --border-1-primary-900: var(--border-1) solid var(--color-primary-900);
1031
+ --border-2-primary-900: var(--border-2) solid var(--color-primary-900);
1032
+ --border-4-primary-900: var(--border-4) solid var(--color-primary-900);
1003
1033
  --border-1-success-100: var(--border-1) solid var(--color-success-100);
1004
1034
  --border-2-success-100: var(--border-2) solid var(--color-success-100);
1005
1035
  --border-4-success-100: var(--border-4) solid var(--color-success-100);
@@ -1075,32 +1105,62 @@
1075
1105
  --border-1-danger-900: var(--border-1) solid var(--color-danger-900);
1076
1106
  --border-2-danger-900: var(--border-2) solid var(--color-danger-900);
1077
1107
  --border-4-danger-900: var(--border-4) solid var(--color-danger-900);
1078
- --color-rolster-900: var(--color-base-900);
1079
- --color-rolster-700: var(--color-base-700);
1080
- --color-rolster-500: var(--color-base-500);
1081
- --color-rolster-300: var(--color-base-300);
1082
- --color-rolster-100: var(--color-base-100);
1083
- --skeleton-rolster-500: var(--skeleton-base-500);
1084
- --skeleton-rolster-300: var(--skeleton-base-300);
1085
- --skeleton-rolster-100: var(--skeleton-base-100);
1086
- --box-shadow-rolster-500: var(--box-shadow-base-500);
1087
- --backdrop-rolster-500: var(--backdrop-base-500);
1088
- --gradient-rolster-500: var(--gradient-base-500);
1089
- --border-1-rolster-900: var(--border-1) solid var(--color-base-900);
1090
- --border-2-rolster-900: var(--border-2) solid var(--color-base-900);
1091
- --border-4-rolster-900: var(--border-4) solid var(--color-base-900);
1092
- --border-1-rolster-700: var(--border-1) solid var(--color-base-700);
1093
- --border-2-rolster-700: var(--border-2) solid var(--color-base-700);
1094
- --border-4-rolster-700: var(--border-4) solid var(--color-base-700);
1095
- --border-1-rolster-500: var(--border-1) solid var(--color-base-500);
1096
- --border-2-rolster-500: var(--border-2) solid var(--color-base-500);
1097
- --border-4-rolster-500: var(--border-4) solid var(--color-base-500);
1098
- --border-1-rolster-300: var(--border-1) solid var(--color-base-300);
1099
- --border-2-rolster-300: var(--border-2) solid var(--color-base-300);
1100
- --border-4-rolster-300: var(--border-4) solid var(--color-base-300);
1101
- --border-1-rolster-100: var(--border-1) solid var(--color-base-100);
1102
- --border-2-rolster-100: var(--border-2) solid var(--color-base-100);
1103
- --border-4-rolster-100: var(--border-4) solid var(--color-base-100);
1108
+ --border-1-coffee-100: var(--border-1) solid var(--color-coffee-100);
1109
+ --border-2-coffee-100: var(--border-2) solid var(--color-coffee-100);
1110
+ --border-4-coffee-100: var(--border-4) solid var(--color-coffee-100);
1111
+ --border-1-coffee-300: var(--border-1) solid var(--color-coffee-300);
1112
+ --border-2-coffee-300: var(--border-2) solid var(--color-coffee-300);
1113
+ --border-4-coffee-300: var(--border-4) solid var(--color-coffee-300);
1114
+ --border-1-coffee-500: var(--border-1) solid var(--color-coffee-500);
1115
+ --border-2-coffee-500: var(--border-2) solid var(--color-coffee-500);
1116
+ --border-4-coffee-500: var(--border-4) solid var(--color-coffee-500);
1117
+ --border-1-coffee-700: var(--border-1) solid var(--color-coffee-700);
1118
+ --border-2-coffee-700: var(--border-2) solid var(--color-coffee-700);
1119
+ --border-4-coffee-700: var(--border-4) solid var(--color-coffee-700);
1120
+ --border-1-coffee-900: var(--border-1) solid var(--color-coffee-900);
1121
+ --border-2-coffee-900: var(--border-2) solid var(--color-coffee-900);
1122
+ --border-4-coffee-900: var(--border-4) solid var(--color-coffee-900);
1123
+ --border-1-obsidian-100: var(--border-1) solid var(--color-obsidian-100);
1124
+ --border-2-obsidian-100: var(--border-2) solid var(--color-obsidian-100);
1125
+ --border-4-obsidian-100: var(--border-4) solid var(--color-obsidian-100);
1126
+ --border-1-obsidian-300: var(--border-1) solid var(--color-obsidian-300);
1127
+ --border-2-obsidian-300: var(--border-2) solid var(--color-obsidian-300);
1128
+ --border-4-obsidian-300: var(--border-4) solid var(--color-obsidian-300);
1129
+ --border-1-obsidian-500: var(--border-1) solid var(--color-obsidian-500);
1130
+ --border-2-obsidian-500: var(--border-2) solid var(--color-obsidian-500);
1131
+ --border-4-obsidian-500: var(--border-4) solid var(--color-obsidian-500);
1132
+ --border-1-obsidian-700: var(--border-1) solid var(--color-obsidian-700);
1133
+ --border-2-obsidian-700: var(--border-2) solid var(--color-obsidian-700);
1134
+ --border-4-obsidian-700: var(--border-4) solid var(--color-obsidian-700);
1135
+ --border-1-obsidian-900: var(--border-1) solid var(--color-obsidian-900);
1136
+ --border-2-obsidian-900: var(--border-2) solid var(--color-obsidian-900);
1137
+ --border-4-obsidian-900: var(--border-4) solid var(--color-obsidian-900);
1138
+ --color-rolster-900: var(--color-primary-900);
1139
+ --color-rolster-700: var(--color-primary-700);
1140
+ --color-rolster-500: var(--color-primary-500);
1141
+ --color-rolster-300: var(--color-primary-300);
1142
+ --color-rolster-100: var(--color-primary-100);
1143
+ --skeleton-rolster-500: var(--skeleton-primary-500);
1144
+ --skeleton-rolster-300: var(--skeleton-primary-300);
1145
+ --skeleton-rolster-100: var(--skeleton-primary-100);
1146
+ --box-shadow-rolster-500: var(--box-shadow-primary-500);
1147
+ --backdrop-rolster-500: var(--backdrop-primary-500);
1148
+ --gradient-rolster-500: var(--gradient-primary-500);
1149
+ --border-1-rolster-900: var(--border-1) solid var(--color-primary-900);
1150
+ --border-2-rolster-900: var(--border-2) solid var(--color-primary-900);
1151
+ --border-4-rolster-900: var(--border-4) solid var(--color-primary-900);
1152
+ --border-1-rolster-700: var(--border-1) solid var(--color-primary-700);
1153
+ --border-2-rolster-700: var(--border-2) solid var(--color-primary-700);
1154
+ --border-4-rolster-700: var(--border-4) solid var(--color-primary-700);
1155
+ --border-1-rolster-500: var(--border-1) solid var(--color-primary-500);
1156
+ --border-2-rolster-500: var(--border-2) solid var(--color-primary-500);
1157
+ --border-4-rolster-500: var(--border-4) solid var(--color-primary-500);
1158
+ --border-1-rolster-300: var(--border-1) solid var(--color-primary-300);
1159
+ --border-2-rolster-300: var(--border-2) solid var(--color-primary-300);
1160
+ --border-4-rolster-300: var(--border-4) solid var(--color-primary-300);
1161
+ --border-1-rolster-100: var(--border-1) solid var(--color-primary-100);
1162
+ --border-2-rolster-100: var(--border-2) solid var(--color-primary-100);
1163
+ --border-4-rolster-100: var(--border-4) solid var(--color-primary-100);
1104
1164
  }
1105
1165
 
1106
1166
  *[rls-theme='success'] {
@@ -1248,6 +1308,64 @@
1248
1308
  --border-4-rolster-100: var(--border-4) solid var(--color-danger-100);
1249
1309
  }
1250
1310
 
1311
+ *[rls-theme='coffee'] {
1312
+ --color-rolster-900: var(--color-coffee-900);
1313
+ --color-rolster-700: var(--color-coffee-700);
1314
+ --color-rolster-500: var(--color-coffee-500);
1315
+ --color-rolster-300: var(--color-coffee-300);
1316
+ --color-rolster-100: var(--color-coffee-100);
1317
+ --skeleton-rolster-500: var(--skeleton-coffee-500);
1318
+ --skeleton-rolster-300: var(--skeleton-coffee-300);
1319
+ --skeleton-rolster-100: var(--skeleton-coffee-100);
1320
+ --box-shadow-rolster-500: var(--box-shadow-coffee-500);
1321
+ --backdrop-rolster-500: var(--backdrop-coffee-500);
1322
+ --gradient-rolster-500: var(--gradient-coffee-500);
1323
+ --border-1-rolster-900: var(--border-1) solid var(--color-coffee-900);
1324
+ --border-2-rolster-900: var(--border-2) solid var(--color-coffee-900);
1325
+ --border-4-rolster-900: var(--border-4) solid var(--color-coffee-900);
1326
+ --border-1-rolster-700: var(--border-1) solid var(--color-coffee-700);
1327
+ --border-2-rolster-700: var(--border-2) solid var(--color-coffee-700);
1328
+ --border-4-rolster-700: var(--border-4) solid var(--color-coffee-700);
1329
+ --border-1-rolster-500: var(--border-1) solid var(--color-coffee-500);
1330
+ --border-2-rolster-500: var(--border-2) solid var(--color-coffee-500);
1331
+ --border-4-rolster-500: var(--border-4) solid var(--color-coffee-500);
1332
+ --border-1-rolster-300: var(--border-1) solid var(--color-coffee-300);
1333
+ --border-2-rolster-300: var(--border-2) solid var(--color-coffee-300);
1334
+ --border-4-rolster-300: var(--border-4) solid var(--color-coffee-300);
1335
+ --border-1-rolster-100: var(--border-1) solid var(--color-coffee-100);
1336
+ --border-2-rolster-100: var(--border-2) solid var(--color-coffee-100);
1337
+ --border-4-rolster-100: var(--border-4) solid var(--color-coffee-100);
1338
+ }
1339
+
1340
+ *[rls-theme='obsidian'] {
1341
+ --color-rolster-900: var(--color-obsidian-900);
1342
+ --color-rolster-700: var(--color-obsidian-700);
1343
+ --color-rolster-500: var(--color-obsidian-500);
1344
+ --color-rolster-300: var(--color-obsidian-300);
1345
+ --color-rolster-100: var(--color-obsidian-100);
1346
+ --skeleton-rolster-500: var(--skeleton-obsidian-500);
1347
+ --skeleton-rolster-300: var(--skeleton-obsidian-300);
1348
+ --skeleton-rolster-100: var(--skeleton-obsidian-100);
1349
+ --box-shadow-rolster-500: var(--box-shadow-obsidian-500);
1350
+ --backdrop-rolster-500: var(--backdrop-obsidian-500);
1351
+ --gradient-rolster-500: var(--gradient-obsidian-500);
1352
+ --border-1-rolster-900: var(--border-1) solid var(--color-obsidian-900);
1353
+ --border-2-rolster-900: var(--border-2) solid var(--color-obsidian-900);
1354
+ --border-4-rolster-900: var(--border-4) solid var(--color-obsidian-900);
1355
+ --border-1-rolster-700: var(--border-1) solid var(--color-obsidian-700);
1356
+ --border-2-rolster-700: var(--border-2) solid var(--color-obsidian-700);
1357
+ --border-4-rolster-700: var(--border-4) solid var(--color-obsidian-700);
1358
+ --border-1-rolster-500: var(--border-1) solid var(--color-obsidian-500);
1359
+ --border-2-rolster-500: var(--border-2) solid var(--color-obsidian-500);
1360
+ --border-4-rolster-500: var(--border-4) solid var(--color-obsidian-500);
1361
+ --border-1-rolster-300: var(--border-1) solid var(--color-obsidian-300);
1362
+ --border-2-rolster-300: var(--border-2) solid var(--color-obsidian-300);
1363
+ --border-4-rolster-300: var(--border-4) solid var(--color-obsidian-300);
1364
+ --border-1-rolster-100: var(--border-1) solid var(--color-obsidian-100);
1365
+ --border-2-rolster-100: var(--border-2) solid var(--color-obsidian-100);
1366
+ --border-4-rolster-100: var(--border-4) solid var(--color-obsidian-100);
1367
+ }
1368
+
1251
1369
  :root {
1252
1370
  --font-weight-thin: 100;
1253
1371
  --font-weight-extra-light: 200;
@@ -1343,6 +1461,10 @@ textarea {
1343
1461
  font-size: 8rem;
1344
1462
  }
1345
1463
 
1464
+ button {
1465
+ font-size: 8rem;
1466
+ }
1467
+
1346
1468
  a,
1347
1469
  p,
1348
1470
  span {
@@ -3028,550 +3150,550 @@ button {
3028
3150
  font-weight: var(--font-weight-bold);
3029
3151
  }
3030
3152
 
3031
- .pdg-top-4 {
3032
- padding-top: var(--sizing-4);
3153
+ .pdg-top-x4 {
3154
+ padding-top: var(--sizing-x4);
3033
3155
  }
3034
3156
 
3035
- .pdg-rgt-4 {
3036
- padding-right: var(--sizing-4);
3157
+ .pdg-rgt-x4 {
3158
+ padding-right: var(--sizing-x4);
3037
3159
  }
3038
3160
 
3039
- .pdg-bot-4 {
3040
- padding-bottom: var(--sizing-4);
3161
+ .pdg-bot-x4 {
3162
+ padding-bottom: var(--sizing-x4);
3041
3163
  }
3042
3164
 
3043
- .pdg-lft-4 {
3044
- padding-left: var(--sizing-4);
3165
+ .pdg-lft-x4 {
3166
+ padding-left: var(--sizing-x4);
3045
3167
  }
3046
3168
 
3047
- .pdg-hrz-4 {
3048
- padding: 0rem var(--sizing-4);
3169
+ .pdg-hrz-x4 {
3170
+ padding: 0rem var(--sizing-x4);
3049
3171
  }
3050
3172
 
3051
- .pdg-vrt-4 {
3052
- padding: var(--sizing-4) 0rem;
3173
+ .pdg-vrt-x4 {
3174
+ padding: var(--sizing-x4) 0rem;
3053
3175
  }
3054
3176
 
3055
- .pdg-4 {
3056
- padding: var(--sizing-4);
3177
+ .pdg-x4 {
3178
+ padding: var(--sizing-x4);
3057
3179
  }
3058
3180
 
3059
- .pdg-top-8 {
3060
- padding-top: var(--sizing-8);
3181
+ .pdg-top-x8 {
3182
+ padding-top: var(--sizing-x8);
3061
3183
  }
3062
3184
 
3063
- .pdg-rgt-8 {
3064
- padding-right: var(--sizing-8);
3185
+ .pdg-rgt-x8 {
3186
+ padding-right: var(--sizing-x8);
3065
3187
  }
3066
3188
 
3067
- .pdg-bot-8 {
3068
- padding-bottom: var(--sizing-8);
3189
+ .pdg-bot-x8 {
3190
+ padding-bottom: var(--sizing-x8);
3069
3191
  }
3070
3192
 
3071
- .pdg-lft-8 {
3072
- padding-left: var(--sizing-8);
3193
+ .pdg-lft-x8 {
3194
+ padding-left: var(--sizing-x8);
3073
3195
  }
3074
3196
 
3075
- .pdg-hrz-8 {
3076
- padding: 0rem var(--sizing-8);
3197
+ .pdg-hrz-x8 {
3198
+ padding: 0rem var(--sizing-x8);
3077
3199
  }
3078
3200
 
3079
- .pdg-vrt-8 {
3080
- padding: var(--sizing-8) 0rem;
3201
+ .pdg-vrt-x8 {
3202
+ padding: var(--sizing-x8) 0rem;
3081
3203
  }
3082
3204
 
3083
- .pdg-8 {
3084
- padding: var(--sizing-8);
3205
+ .pdg-x8 {
3206
+ padding: var(--sizing-x8);
3085
3207
  }
3086
3208
 
3087
- .pdg-top-12 {
3088
- padding-top: var(--sizing-12);
3209
+ .pdg-top-x12 {
3210
+ padding-top: var(--sizing-x12);
3089
3211
  }
3090
3212
 
3091
- .pdg-rgt-12 {
3092
- padding-right: var(--sizing-12);
3213
+ .pdg-rgt-x12 {
3214
+ padding-right: var(--sizing-x12);
3093
3215
  }
3094
3216
 
3095
- .pdg-bot-12 {
3096
- padding-bottom: var(--sizing-12);
3217
+ .pdg-bot-x12 {
3218
+ padding-bottom: var(--sizing-x12);
3097
3219
  }
3098
3220
 
3099
- .pdg-lft-12 {
3100
- padding-left: var(--sizing-12);
3221
+ .pdg-lft-x12 {
3222
+ padding-left: var(--sizing-x12);
3101
3223
  }
3102
3224
 
3103
- .pdg-hrz-12 {
3104
- padding: 0rem var(--sizing-12);
3225
+ .pdg-hrz-x12 {
3226
+ padding: 0rem var(--sizing-x12);
3105
3227
  }
3106
3228
 
3107
- .pdg-vrt-12 {
3108
- padding: var(--sizing-12) 0rem;
3229
+ .pdg-vrt-x12 {
3230
+ padding: var(--sizing-x12) 0rem;
3109
3231
  }
3110
3232
 
3111
- .pdg-12 {
3112
- padding: var(--sizing-12);
3233
+ .pdg-x12 {
3234
+ padding: var(--sizing-x12);
3113
3235
  }
3114
3236
 
3115
- .pdg-top-16 {
3116
- padding-top: var(--sizing-16);
3237
+ .pdg-top-x16 {
3238
+ padding-top: var(--sizing-x16);
3117
3239
  }
3118
3240
 
3119
- .pdg-rgt-16 {
3120
- padding-right: var(--sizing-16);
3241
+ .pdg-rgt-x16 {
3242
+ padding-right: var(--sizing-x16);
3121
3243
  }
3122
3244
 
3123
- .pdg-bot-16 {
3124
- padding-bottom: var(--sizing-16);
3245
+ .pdg-bot-x16 {
3246
+ padding-bottom: var(--sizing-x16);
3125
3247
  }
3126
3248
 
3127
- .pdg-lft-16 {
3128
- padding-left: var(--sizing-16);
3249
+ .pdg-lft-x16 {
3250
+ padding-left: var(--sizing-x16);
3129
3251
  }
3130
3252
 
3131
- .pdg-hrz-16 {
3132
- padding: 0rem var(--sizing-16);
3253
+ .pdg-hrz-x16 {
3254
+ padding: 0rem var(--sizing-x16);
3133
3255
  }
3134
3256
 
3135
- .pdg-vrt-16 {
3136
- padding: var(--sizing-16) 0rem;
3257
+ .pdg-vrt-x16 {
3258
+ padding: var(--sizing-x16) 0rem;
3137
3259
  }
3138
3260
 
3139
- .pdg-16 {
3140
- padding: var(--sizing-16);
3261
+ .pdg-x16 {
3262
+ padding: var(--sizing-x16);
3141
3263
  }
3142
3264
 
3143
- .pdg-top-24 {
3144
- padding-top: var(--sizing-24);
3265
+ .pdg-top-x24 {
3266
+ padding-top: var(--sizing-x24);
3145
3267
  }
3146
3268
 
3147
- .pdg-rgt-24 {
3148
- padding-right: var(--sizing-24);
3269
+ .pdg-rgt-x24 {
3270
+ padding-right: var(--sizing-x24);
3149
3271
  }
3150
3272
 
3151
- .pdg-bot-24 {
3152
- padding-bottom: var(--sizing-24);
3273
+ .pdg-bot-x24 {
3274
+ padding-bottom: var(--sizing-x24);
3153
3275
  }
3154
3276
 
3155
- .pdg-lft-24 {
3156
- padding-left: var(--sizing-24);
3277
+ .pdg-lft-x24 {
3278
+ padding-left: var(--sizing-x24);
3157
3279
  }
3158
3280
 
3159
- .pdg-hrz-24 {
3160
- padding: 0rem var(--sizing-24);
3281
+ .pdg-hrz-x24 {
3282
+ padding: 0rem var(--sizing-x24);
3161
3283
  }
3162
3284
 
3163
- .pdg-vrt-24 {
3164
- padding: var(--sizing-24) 0rem;
3285
+ .pdg-vrt-x24 {
3286
+ padding: var(--sizing-x24) 0rem;
3165
3287
  }
3166
3288
 
3167
- .pdg-24 {
3168
- padding: var(--sizing-24);
3289
+ .pdg-x24 {
3290
+ padding: var(--sizing-x24);
3169
3291
  }
3170
3292
 
3171
- .pdg-top-36 {
3172
- padding-top: var(--sizing-36);
3293
+ .pdg-top-x36 {
3294
+ padding-top: var(--sizing-x36);
3173
3295
  }
3174
3296
 
3175
- .pdg-rgt-36 {
3176
- padding-right: var(--sizing-36);
3297
+ .pdg-rgt-x36 {
3298
+ padding-right: var(--sizing-x36);
3177
3299
  }
3178
3300
 
3179
- .pdg-bot-36 {
3180
- padding-bottom: var(--sizing-36);
3301
+ .pdg-bot-x36 {
3302
+ padding-bottom: var(--sizing-x36);
3181
3303
  }
3182
3304
 
3183
- .pdg-lft-36 {
3184
- padding-left: var(--sizing-36);
3305
+ .pdg-lft-x36 {
3306
+ padding-left: var(--sizing-x36);
3185
3307
  }
3186
3308
 
3187
- .pdg-hrz-36 {
3188
- padding: 0rem var(--sizing-36);
3309
+ .pdg-hrz-x36 {
3310
+ padding: 0rem var(--sizing-x36);
3189
3311
  }
3190
3312
 
3191
- .pdg-vrt-36 {
3192
- padding: var(--sizing-36) 0rem;
3313
+ .pdg-vrt-x36 {
3314
+ padding: var(--sizing-x36) 0rem;
3193
3315
  }
3194
3316
 
3195
- .pdg-36 {
3196
- padding: var(--sizing-36);
3317
+ .pdg-x36 {
3318
+ padding: var(--sizing-x36);
3197
3319
  }
3198
3320
 
3199
- .pdx-top-4 {
3200
- padding-top: var(--sizing-4);
3321
+ .pdx-top-x4 {
3322
+ padding-top: var(--sizing-x4);
3201
3323
  box-sizing: border-box;
3202
3324
  }
3203
3325
 
3204
- .pdx-rgt-4 {
3205
- padding-right: var(--sizing-4);
3326
+ .pdx-rgt-x4 {
3327
+ padding-right: var(--sizing-x4);
3206
3328
  box-sizing: border-box;
3207
3329
  }
3208
3330
 
3209
- .pdx-bot-4 {
3210
- padding-bottom: var(--sizing-4);
3331
+ .pdx-bot-x4 {
3332
+ padding-bottom: var(--sizing-x4);
3211
3333
  box-sizing: border-box;
3212
3334
  }
3213
3335
 
3214
- .pdx-lft-4 {
3215
- padding-left: var(--sizing-4);
3336
+ .pdx-lft-x4 {
3337
+ padding-left: var(--sizing-x4);
3216
3338
  box-sizing: border-box;
3217
3339
  }
3218
3340
 
3219
- .pdx-hrz-4 {
3220
- padding: 0rem var(--sizing-4);
3341
+ .pdx-hrz-x4 {
3342
+ padding: 0rem var(--sizing-x4);
3221
3343
  box-sizing: border-box;
3222
3344
  }
3223
3345
 
3224
- .pdx-vrt-4 {
3225
- padding: var(--sizing-4) 0rem;
3346
+ .pdx-vrt-x4 {
3347
+ padding: var(--sizing-x4) 0rem;
3226
3348
  box-sizing: border-box;
3227
3349
  }
3228
3350
 
3229
- .pdx-4 {
3230
- padding: var(--sizing-4);
3351
+ .pdx-x4 {
3352
+ padding: var(--sizing-x4);
3231
3353
  box-sizing: border-box;
3232
3354
  }
3233
3355
 
3234
- .pdx-top-8 {
3235
- padding-top: var(--sizing-8);
3356
+ .pdx-top-x8 {
3357
+ padding-top: var(--sizing-x8);
3236
3358
  box-sizing: border-box;
3237
3359
  }
3238
3360
 
3239
- .pdx-rgt-8 {
3240
- padding-right: var(--sizing-8);
3361
+ .pdx-rgt-x8 {
3362
+ padding-right: var(--sizing-x8);
3241
3363
  box-sizing: border-box;
3242
3364
  }
3243
3365
 
3244
- .pdx-bot-8 {
3245
- padding-bottom: var(--sizing-8);
3366
+ .pdx-bot-x8 {
3367
+ padding-bottom: var(--sizing-x8);
3246
3368
  box-sizing: border-box;
3247
3369
  }
3248
3370
 
3249
- .pdx-lft-8 {
3250
- padding-left: var(--sizing-8);
3371
+ .pdx-lft-x8 {
3372
+ padding-left: var(--sizing-x8);
3251
3373
  box-sizing: border-box;
3252
3374
  }
3253
3375
 
3254
- .pdx-hrz-8 {
3255
- padding: 0rem var(--sizing-8);
3376
+ .pdx-hrz-x8 {
3377
+ padding: 0rem var(--sizing-x8);
3256
3378
  box-sizing: border-box;
3257
3379
  }
3258
3380
 
3259
- .pdx-vrt-8 {
3260
- padding: var(--sizing-8) 0rem;
3381
+ .pdx-vrt-x8 {
3382
+ padding: var(--sizing-x8) 0rem;
3261
3383
  box-sizing: border-box;
3262
3384
  }
3263
3385
 
3264
- .pdx-8 {
3265
- padding: var(--sizing-8);
3386
+ .pdx-x8 {
3387
+ padding: var(--sizing-x8);
3266
3388
  box-sizing: border-box;
3267
3389
  }
3268
3390
 
3269
- .pdx-top-12 {
3270
- padding-top: var(--sizing-12);
3391
+ .pdx-top-x12 {
3392
+ padding-top: var(--sizing-x12);
3271
3393
  box-sizing: border-box;
3272
3394
  }
3273
3395
 
3274
- .pdx-rgt-12 {
3275
- padding-right: var(--sizing-12);
3396
+ .pdx-rgt-x12 {
3397
+ padding-right: var(--sizing-x12);
3276
3398
  box-sizing: border-box;
3277
3399
  }
3278
3400
 
3279
- .pdx-bot-12 {
3280
- padding-bottom: var(--sizing-12);
3401
+ .pdx-bot-x12 {
3402
+ padding-bottom: var(--sizing-x12);
3281
3403
  box-sizing: border-box;
3282
3404
  }
3283
3405
 
3284
- .pdx-lft-12 {
3285
- padding-left: var(--sizing-12);
3406
+ .pdx-lft-x12 {
3407
+ padding-left: var(--sizing-x12);
3286
3408
  box-sizing: border-box;
3287
3409
  }
3288
3410
 
3289
- .pdx-hrz-12 {
3290
- padding: 0rem var(--sizing-12);
3411
+ .pdx-hrz-x12 {
3412
+ padding: 0rem var(--sizing-x12);
3291
3413
  box-sizing: border-box;
3292
3414
  }
3293
3415
 
3294
- .pdx-vrt-12 {
3295
- padding: var(--sizing-12) 0rem;
3416
+ .pdx-vrt-x12 {
3417
+ padding: var(--sizing-x12) 0rem;
3296
3418
  box-sizing: border-box;
3297
3419
  }
3298
3420
 
3299
- .pdx-12 {
3300
- padding: var(--sizing-12);
3421
+ .pdx-x12 {
3422
+ padding: var(--sizing-x12);
3301
3423
  box-sizing: border-box;
3302
3424
  }
3303
3425
 
3304
- .pdx-top-16 {
3305
- padding-top: var(--sizing-16);
3426
+ .pdx-top-x16 {
3427
+ padding-top: var(--sizing-x16);
3306
3428
  box-sizing: border-box;
3307
3429
  }
3308
3430
 
3309
- .pdx-rgt-16 {
3310
- padding-right: var(--sizing-16);
3431
+ .pdx-rgt-x16 {
3432
+ padding-right: var(--sizing-x16);
3311
3433
  box-sizing: border-box;
3312
3434
  }
3313
3435
 
3314
- .pdx-bot-16 {
3315
- padding-bottom: var(--sizing-16);
3436
+ .pdx-bot-x16 {
3437
+ padding-bottom: var(--sizing-x16);
3316
3438
  box-sizing: border-box;
3317
3439
  }
3318
3440
 
3319
- .pdx-lft-16 {
3320
- padding-left: var(--sizing-16);
3441
+ .pdx-lft-x16 {
3442
+ padding-left: var(--sizing-x16);
3321
3443
  box-sizing: border-box;
3322
3444
  }
3323
3445
 
3324
- .pdx-hrz-16 {
3325
- padding: 0rem var(--sizing-16);
3446
+ .pdx-hrz-x16 {
3447
+ padding: 0rem var(--sizing-x16);
3326
3448
  box-sizing: border-box;
3327
3449
  }
3328
3450
 
3329
- .pdx-vrt-16 {
3330
- padding: var(--sizing-16) 0rem;
3451
+ .pdx-vrt-x16 {
3452
+ padding: var(--sizing-x16) 0rem;
3331
3453
  box-sizing: border-box;
3332
3454
  }
3333
3455
 
3334
- .pdx-16 {
3335
- padding: var(--sizing-16);
3456
+ .pdx-x16 {
3457
+ padding: var(--sizing-x16);
3336
3458
  box-sizing: border-box;
3337
3459
  }
3338
3460
 
3339
- .pdx-top-24 {
3340
- padding-top: var(--sizing-24);
3461
+ .pdx-top-x24 {
3462
+ padding-top: var(--sizing-x24);
3341
3463
  box-sizing: border-box;
3342
3464
  }
3343
3465
 
3344
- .pdx-rgt-24 {
3345
- padding-right: var(--sizing-24);
3466
+ .pdx-rgt-x24 {
3467
+ padding-right: var(--sizing-x24);
3346
3468
  box-sizing: border-box;
3347
3469
  }
3348
3470
 
3349
- .pdx-bot-24 {
3350
- padding-bottom: var(--sizing-24);
3471
+ .pdx-bot-x24 {
3472
+ padding-bottom: var(--sizing-x24);
3351
3473
  box-sizing: border-box;
3352
3474
  }
3353
3475
 
3354
- .pdx-lft-24 {
3355
- padding-left: var(--sizing-24);
3476
+ .pdx-lft-x24 {
3477
+ padding-left: var(--sizing-x24);
3356
3478
  box-sizing: border-box;
3357
3479
  }
3358
3480
 
3359
- .pdx-hrz-24 {
3360
- padding: 0rem var(--sizing-24);
3481
+ .pdx-hrz-x24 {
3482
+ padding: 0rem var(--sizing-x24);
3361
3483
  box-sizing: border-box;
3362
3484
  }
3363
3485
 
3364
- .pdx-vrt-24 {
3365
- padding: var(--sizing-24) 0rem;
3486
+ .pdx-vrt-x24 {
3487
+ padding: var(--sizing-x24) 0rem;
3366
3488
  box-sizing: border-box;
3367
3489
  }
3368
3490
 
3369
- .pdx-24 {
3370
- padding: var(--sizing-24);
3491
+ .pdx-x24 {
3492
+ padding: var(--sizing-x24);
3371
3493
  box-sizing: border-box;
3372
3494
  }
3373
3495
 
3374
- .pdx-top-36 {
3375
- padding-top: var(--sizing-36);
3496
+ .pdx-top-x36 {
3497
+ padding-top: var(--sizing-x36);
3376
3498
  box-sizing: border-box;
3377
3499
  }
3378
3500
 
3379
- .pdx-rgt-36 {
3380
- padding-right: var(--sizing-36);
3501
+ .pdx-rgt-x36 {
3502
+ padding-right: var(--sizing-x36);
3381
3503
  box-sizing: border-box;
3382
3504
  }
3383
3505
 
3384
- .pdx-bot-36 {
3385
- padding-bottom: var(--sizing-36);
3506
+ .pdx-bot-x36 {
3507
+ padding-bottom: var(--sizing-x36);
3386
3508
  box-sizing: border-box;
3387
3509
  }
3388
3510
 
3389
- .pdx-lft-36 {
3390
- padding-left: var(--sizing-36);
3511
+ .pdx-lft-x36 {
3512
+ padding-left: var(--sizing-x36);
3391
3513
  box-sizing: border-box;
3392
3514
  }
3393
3515
 
3394
- .pdx-hrz-36 {
3395
- padding: 0rem var(--sizing-36);
3516
+ .pdx-hrz-x36 {
3517
+ padding: 0rem var(--sizing-x36);
3396
3518
  box-sizing: border-box;
3397
3519
  }
3398
3520
 
3399
- .pdx-vrt-36 {
3400
- padding: var(--sizing-36) 0rem;
3521
+ .pdx-vrt-x36 {
3522
+ padding: var(--sizing-x36) 0rem;
3401
3523
  box-sizing: border-box;
3402
3524
  }
3403
3525
 
3404
- .pdx-36 {
3405
- padding: var(--sizing-36);
3526
+ .pdx-x36 {
3527
+ padding: var(--sizing-x36);
3406
3528
  box-sizing: border-box;
3407
3529
  }
3408
3530
 
3409
- .mrg-top-4 {
3410
- margin-top: var(--sizing-4);
3531
+ .mrg-top-x4 {
3532
+ margin-top: var(--sizing-x4);
3411
3533
  }
3412
3534
 
3413
- .mrg-rgt-4 {
3414
- margin-right: var(--sizing-4);
3535
+ .mrg-rgt-x4 {
3536
+ margin-right: var(--sizing-x4);
3415
3537
  }
3416
3538
 
3417
- .mrg-bot-4 {
3418
- margin-bottom: var(--sizing-4);
3539
+ .mrg-bot-x4 {
3540
+ margin-bottom: var(--sizing-x4);
3419
3541
  }
3420
3542
 
3421
- .mrg-lft-4 {
3422
- margin-left: var(--sizing-4);
3543
+ .mrg-lft-x4 {
3544
+ margin-left: var(--sizing-x4);
3423
3545
  }
3424
3546
 
3425
- .mrg-hrz-4 {
3426
- margin: 0rem var(--sizing-4);
3547
+ .mrg-hrz-x4 {
3548
+ margin: 0rem var(--sizing-x4);
3427
3549
  }
3428
3550
 
3429
- .mrg-vrt-4 {
3430
- margin: var(--sizing-4) 0rem;
3551
+ .mrg-vrt-x4 {
3552
+ margin: var(--sizing-x4) 0rem;
3431
3553
  }
3432
3554
 
3433
- .mrg-4 {
3434
- margin: var(--sizing-4);
3555
+ .mrg-x4 {
3556
+ margin: var(--sizing-x4);
3435
3557
  }
3436
3558
 
3437
- .mrg-top-8 {
3438
- margin-top: var(--sizing-8);
3559
+ .mrg-top-x8 {
3560
+ margin-top: var(--sizing-x8);
3439
3561
  }
3440
3562
 
3441
- .mrg-rgt-8 {
3442
- margin-right: var(--sizing-8);
3563
+ .mrg-rgt-x8 {
3564
+ margin-right: var(--sizing-x8);
3443
3565
  }
3444
3566
 
3445
- .mrg-bot-8 {
3446
- margin-bottom: var(--sizing-8);
3567
+ .mrg-bot-x8 {
3568
+ margin-bottom: var(--sizing-x8);
3447
3569
  }
3448
3570
 
3449
- .mrg-lft-8 {
3450
- margin-left: var(--sizing-8);
3571
+ .mrg-lft-x8 {
3572
+ margin-left: var(--sizing-x8);
3451
3573
  }
3452
3574
 
3453
- .mrg-hrz-8 {
3454
- margin: 0rem var(--sizing-8);
3575
+ .mrg-hrz-x8 {
3576
+ margin: 0rem var(--sizing-x8);
3455
3577
  }
3456
3578
 
3457
- .mrg-vrt-8 {
3458
- margin: var(--sizing-8) 0rem;
3579
+ .mrg-vrt-x8 {
3580
+ margin: var(--sizing-x8) 0rem;
3459
3581
  }
3460
3582
 
3461
- .mrg-8 {
3462
- margin: var(--sizing-8);
3583
+ .mrg-x8 {
3584
+ margin: var(--sizing-x8);
3463
3585
  }
3464
3586
 
3465
- .mrg-top-12 {
3466
- margin-top: var(--sizing-12);
3587
+ .mrg-top-x12 {
3588
+ margin-top: var(--sizing-x12);
3467
3589
  }
3468
3590
 
3469
- .mrg-rgt-12 {
3470
- margin-right: var(--sizing-12);
3591
+ .mrg-rgt-x12 {
3592
+ margin-right: var(--sizing-x12);
3471
3593
  }
3472
3594
 
3473
- .mrg-bot-12 {
3474
- margin-bottom: var(--sizing-12);
3595
+ .mrg-bot-x12 {
3596
+ margin-bottom: var(--sizing-x12);
3475
3597
  }
3476
3598
 
3477
- .mrg-lft-12 {
3478
- margin-left: var(--sizing-12);
3599
+ .mrg-lft-x12 {
3600
+ margin-left: var(--sizing-x12);
3479
3601
  }
3480
3602
 
3481
- .mrg-hrz-12 {
3482
- margin: 0rem var(--sizing-12);
3603
+ .mrg-hrz-x12 {
3604
+ margin: 0rem var(--sizing-x12);
3483
3605
  }
3484
3606
 
3485
- .mrg-vrt-12 {
3486
- margin: var(--sizing-12) 0rem;
3607
+ .mrg-vrt-x12 {
3608
+ margin: var(--sizing-x12) 0rem;
3487
3609
  }
3488
3610
 
3489
- .mrg-12 {
3490
- margin: var(--sizing-12);
3611
+ .mrg-x12 {
3612
+ margin: var(--sizing-x12);
3491
3613
  }
3492
3614
 
3493
- .mrg-top-16 {
3494
- margin-top: var(--sizing-16);
3615
+ .mrg-top-x16 {
3616
+ margin-top: var(--sizing-x16);
3495
3617
  }
3496
3618
 
3497
- .mrg-rgt-16 {
3498
- margin-right: var(--sizing-16);
3619
+ .mrg-rgt-x16 {
3620
+ margin-right: var(--sizing-x16);
3499
3621
  }
3500
3622
 
3501
- .mrg-bot-16 {
3502
- margin-bottom: var(--sizing-16);
3623
+ .mrg-bot-x16 {
3624
+ margin-bottom: var(--sizing-x16);
3503
3625
  }
3504
3626
 
3505
- .mrg-lft-16 {
3506
- margin-left: var(--sizing-16);
3627
+ .mrg-lft-x16 {
3628
+ margin-left: var(--sizing-x16);
3507
3629
  }
3508
3630
 
3509
- .mrg-hrz-16 {
3510
- margin: 0rem var(--sizing-16);
3631
+ .mrg-hrz-x16 {
3632
+ margin: 0rem var(--sizing-x16);
3511
3633
  }
3512
3634
 
3513
- .mrg-vrt-16 {
3514
- margin: var(--sizing-16) 0rem;
3635
+ .mrg-vrt-x16 {
3636
+ margin: var(--sizing-x16) 0rem;
3515
3637
  }
3516
3638
 
3517
- .mrg-16 {
3518
- margin: var(--sizing-16);
3639
+ .mrg-x16 {
3640
+ margin: var(--sizing-x16);
3519
3641
  }
3520
3642
 
3521
- .mrg-top-24 {
3522
- margin-top: var(--sizing-24);
3643
+ .mrg-top-x24 {
3644
+ margin-top: var(--sizing-x24);
3523
3645
  }
3524
3646
 
3525
- .mrg-rgt-24 {
3526
- margin-right: var(--sizing-24);
3647
+ .mrg-rgt-x24 {
3648
+ margin-right: var(--sizing-x24);
3527
3649
  }
3528
3650
 
3529
- .mrg-bot-24 {
3530
- margin-bottom: var(--sizing-24);
3651
+ .mrg-bot-x24 {
3652
+ margin-bottom: var(--sizing-x24);
3531
3653
  }
3532
3654
 
3533
- .mrg-lft-24 {
3534
- margin-left: var(--sizing-24);
3655
+ .mrg-lft-x24 {
3656
+ margin-left: var(--sizing-x24);
3535
3657
  }
3536
3658
 
3537
- .mrg-hrz-24 {
3538
- margin: 0rem var(--sizing-24);
3659
+ .mrg-hrz-x24 {
3660
+ margin: 0rem var(--sizing-x24);
3539
3661
  }
3540
3662
 
3541
- .mrg-vrt-24 {
3542
- margin: var(--sizing-24) 0rem;
3663
+ .mrg-vrt-x24 {
3664
+ margin: var(--sizing-x24) 0rem;
3543
3665
  }
3544
3666
 
3545
- .mrg-24 {
3546
- margin: var(--sizing-24);
3667
+ .mrg-x24 {
3668
+ margin: var(--sizing-x24);
3547
3669
  }
3548
3670
 
3549
- .mrg-top-36 {
3550
- margin-top: var(--sizing-36);
3671
+ .mrg-top-x36 {
3672
+ margin-top: var(--sizing-x36);
3551
3673
  }
3552
3674
 
3553
- .mrg-rgt-36 {
3554
- margin-right: var(--sizing-36);
3675
+ .mrg-rgt-x36 {
3676
+ margin-right: var(--sizing-x36);
3555
3677
  }
3556
3678
 
3557
- .mrg-bot-36 {
3558
- margin-bottom: var(--sizing-36);
3679
+ .mrg-bot-x36 {
3680
+ margin-bottom: var(--sizing-x36);
3559
3681
  }
3560
3682
 
3561
- .mrg-lft-36 {
3562
- margin-left: var(--sizing-36);
3683
+ .mrg-lft-x36 {
3684
+ margin-left: var(--sizing-x36);
3563
3685
  }
3564
3686
 
3565
- .mrg-hrz-36 {
3566
- margin: 0rem var(--sizing-36);
3687
+ .mrg-hrz-x36 {
3688
+ margin: 0rem var(--sizing-x36);
3567
3689
  }
3568
3690
 
3569
- .mrg-vrt-36 {
3570
- margin: var(--sizing-36) 0rem;
3691
+ .mrg-vrt-x36 {
3692
+ margin: var(--sizing-x36) 0rem;
3571
3693
  }
3572
3694
 
3573
- .mrg-36 {
3574
- margin: var(--sizing-36);
3695
+ .mrg-x36 {
3696
+ margin: var(--sizing-x36);
3575
3697
  }
3576
3698
 
3577
3699
  :root {