refactor: add core tokens

Author: Yosevu Kilonzo

components/swatchgroup/index.css

@@ -10,21 +10,32 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+.spectrum-SwatchGroup {
+  --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50);
+  --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75);
+  --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100);
+}
+
 .spectrum-SwatchGroup {
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
+}
+
+/* Regular (Default) */
+.spectrum-SwatchGroup {
 
-  /* regular density is default */
-  gap: var(--spectrum-global-dimension-size-50);
+  gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular));
 }
 
+/* Compact*/
 .spectrum-SwatchGroup--compact {
-  gap: var(--spectrum-global-dimension-size-25);
+  gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular));
 }
 
+/* Spacious */
 .spectrum-SwatchGroup--spacious {
-  gap: var(--spectrum-global-dimension-size-100);
+  gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious));
 }