♻️ Add new swatch size

frontend/src/app/main/ui/ds/_sizes.scss

@@ -11,6 +11,7 @@ $sz-16: px2rem(16);
 $sz-24: px2rem(24);
 $sz-32: px2rem(32);
 $sz-36: px2rem(36);
+$sz-48: px2rem(48);
 $sz-160: px2rem(160);
 $sz-200: px2rem(200);
 $sz-224: px2rem(224);

frontend/src/app/main/ui/ds/utilities/swatch.cljs

@@ -26,7 +26,7 @@
   [:map {:title "SchemaSwatch"}
    [:background {:optional true} ct/schema:color]
    [:class {:optional true} :string]
-   [:size {:optional true} [:enum "small" "medium"]]
+   [:size {:optional true} [:enum "small" "medium" "large"]]
    [:active {:optional true} :boolean]
    [:on-click {:optional true} fn?]])
 
@@ -82,6 +82,7 @@
                                  :swatch true
                                  :small (= size "small")
                                  :medium (= size "medium")
+                                 :large (= size "large")
                                  :square (= format "square")
                                  :active (= active true)
                                  :interactive (= element-type "button")

frontend/src/app/main/ui/ds/utilities/swatch.scss

@@ -38,6 +38,13 @@
   block-size: $sz-24;
 }
 
+.large {
+  --checkerboard-size: 2rem 2rem;
+
+  inline-size: $sz-48;
+  block-size: $sz-48;
+}
+
 .rounded {
   --border-radius: #{$br-circle};
 }

frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx

@@ -19,7 +19,7 @@ export default {
     },
     size: {
       control: "select",
-      options: ["small", "medium"],
+      options: ["small", "medium", "large"],
     },
     active: {
       control: { type: "boolean" },