chore: add modifier properties

Author: Yosevu Kilonzo

components/swatch/index.css

@@ -95,8 +95,8 @@ governing permissions and limitations under the License.
 
 /* Swatch styles */
 .spectrum-Swatch {
-  width: var(--spectrum-swatch-size);
-  height: var(--spectrum-swatch-size);
+  width: var(--mod-swatch-size, var(--spectrum-swatch-size));
+  height: var(--mod-swatch-size, var(--spectrum-swatch-size));
 
   display: flex;
   align-items: center;
@@ -111,20 +111,20 @@ governing permissions and limitations under the License.
   user-select: none;
 
  .spectrum-Swatch-disabledIcon {
-    width: var(--spectrum-swatch-disabled-icon-size);
-    height: var(--spectrum-swatch-disabled-icon-size);
+    width: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
+    height: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
   }
 
   &,
   &:before {
-    border-radius: var(--spectrum-swatch-border-radius);
+    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
   }
 
   &.is-selected {
     background-color: var(--spectrum-swatch-inner-border-color-selected);
     .spectrum-Swatch-fill {
-      width: calc(100% - var(--spectrum-swatch-spacing-selected));
-      height: calc(100% - var(--spectrum-swatch-spacing-selected));
+      width: calc(100% - var(--mod-swatch-spacing-selected, var(--spectrum-swatch-spacing-selected)));
+      height: calc(100% - var(--mod-swatch-spacing-selected, var(--spectrum-swatch-spacing-selected)));
 
       /* no border radius when selected */
       border-radius: 0;
@@ -158,7 +158,7 @@ governing permissions and limitations under the License.
 
       /* Slash */
       &:after {
-        height: var(--spectrum-swatch-slash-thickness);
+        height: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness));
         content: '';
         position: absolute;
         transform: rotate(-45deg);
@@ -206,8 +206,8 @@ governing permissions and limitations under the License.
 
     opacity: 0;
 
-    border: var(--spectrum-swatch-focus-ring-thickness) solid var(--spectrum-swatch-focus-ring-color);
-    border-radius: var(--spectrum-swatch-focus-ring-border-radius);
+    border: var(--mod-swatch-focus-ring-thickness, var(--spectrum-swatch-focus-ring-thickness)) solid var(--spectrum-swatch-focus-ring-color);
+    border-radius: var(--mod-swatch-focus-ring-border-radius, var(--mod-swatch-focus-ring-border-radius, var(--spectrum-swatch-focus-ring-border-radius)));
 
     transition: opacity var(--spectrum-animation-duration-100) ease-in-out;
   }
@@ -232,7 +232,7 @@ governing permissions and limitations under the License.
 
   overflow: hidden;
 
-  border-radius: var(--spectrum-swatch-border-radius);
+  border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
 
   background-color: var(--spectrum-swatch-fill-background-color);
 
@@ -243,14 +243,14 @@ governing permissions and limitations under the License.
   --spectrum-swatch-checkerboard-dark-color: rgb(217, 217, 217);
 
   background-size:
-    calc(var(--spectrum-swatch-checkerboard-size) * 2)
-    calc(var(--spectrum-swatch-checkerboard-size) * 2);
+    calc(var(--mod-swatch-checkerboard-size, var(--spectrum-swatch-checkerboard-size)) * 2)
+    calc(var(--mod-swatch-checkerboard-size, var(--spectrum-swatch-checkerboard-size)) * 2);
 
   background-position:
     var(--spectrum-swatch-checkerboard-background-offset) var(--spectrum-swatch-checkerboard-background-offset),
-    var(--spectrum-swatch-checkerboard-background-offset) calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-checkerboard-background-offset)),
-    calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-checkerboard-background-offset)) calc(-1 * var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-checkerboard-background-offset)),
-    calc(-1 * var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-checkerboard-background-offset)) var(--spectrum-swatch-checkerboard-background-offset);
+    var(--spectrum-swatch-checkerboard-background-offset) calc(var(--mod-swatch-checkerboard-size, var(--spectrum-swatch-checkerboard-size)) + var(--spectrum-swatch-checkerboard-background-offset)),
+    calc(var(--mod-swatch-checkerboard-size, var(--spectrum-swatch-checkerboard-size)) + var(--spectrum-swatch-checkerboard-background-offset)) calc(-1 * var(--mod-swatch-checkerboard-size, var(--spectrum-swatch-checkerboard-size)) + var(--spectrum-swatch-checkerboard-background-offset)),
+    calc(-1 * var(--mod-swatch-checkerboard-size, var(--spectrum-swatch-checkerboard-size)) + var(--spectrum-swatch-checkerboard-background-offset)) var(--spectrum-swatch-checkerboard-background-offset);
 
   /* Add a half-percent to fix diagonal line issue in Chrome on non-retina displays */
   background-image:
@@ -270,17 +270,17 @@ governing permissions and limitations under the License.
     background-color: var(--mod-swatch-fill-background-color, var(--spectrum-swatch-fill-background-color), transparent);
 
     /* Swatch border */
-    box-shadow: inset 0 0 0 var(--spectrum-swatch-border-thickness) var(--spectrum-swatch-border-color-regular);
+    box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--spectrum-swatch-border-color-regular);
 
-    border-radius: var(--spectrum-swatch-border-radius);
+    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
   }
 }
 
 /* Variant: Light border */
 .spectrum-Swatch--lightBorder {
   .spectrum-Swatch-fill {
     &:before {
-      box-shadow: inset 0 0 0 var(--spectrum-swatch-border-thickness) var(--spectrum-swatch-border-color-light);
+      box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--spectrum-swatch-border-color-light);
     }
   }
 }
@@ -313,21 +313,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Swatch--rectangle {
-  &.spectrum-Swatch--sizeXS {
-    width: calc(var(--spectrum-swatch-size) * 2);
-  }
-
-  &.spectrum-Swatch--sizeS {
-    width: calc(var(--spectrum-swatch-size) * 2);
-  }
-
-  &.spectrum-Swatch--sizeM {
-    width: calc(var(--spectrum-swatch-size) * 2);
-  }
-
-  &.spectrum-Swatch--sizeL {
-    width: calc(var(--spectrum-swatch-size) * 2);
-  }
+  width: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2);
 }
 
 /* Variant: Rounding - None */
@@ -364,6 +350,6 @@ governing permissions and limitations under the License.
   width: 100%;
   height: 100%;
 
-  transition: width var(--spectrum-animation-duration-100) ease-in-out,
-              height var(--spectrum-animation-duration-100) ease-in-out;
+  transition: width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
+              height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
 }