From aa9f5fc18f43c5e8bcb7d1226310df7625961dc6 Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Mon, 13 Jan 2025 12:56:14 +0100
Subject: [PATCH] :recycle: Add new swatch size
---
frontend/src/app/main/ui/ds/_sizes.scss | 1 +
frontend/src/app/main/ui/ds/utilities/swatch.cljs | 3 ++-
frontend/src/app/main/ui/ds/utilities/swatch.scss | 7 +++++++
frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx | 2 +-
4 files changed, 11 insertions(+), 2 deletions(-)
diff --git a/frontend/src/app/main/ui/ds/_sizes.scss b/frontend/src/app/main/ui/ds/_sizes.scss
index 83f573218..aea206608 100644
--- a/frontend/src/app/main/ui/ds/_sizes.scss
+++ b/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);
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.cljs b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
index d8cbd9657..ff3e5f2e0 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.cljs
+++ b/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")
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.scss b/frontend/src/app/main/ui/ds/utilities/swatch.scss
index 938bfc732..edf3d3fb6 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.scss
+++ b/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};
}
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx b/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx
index 08f0e3d07..cd5217df6 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx
+++ b/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" },