johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

♻️ Add new swatch size

Browse Source
This commit is contained in:
Xaviju
2025-01-13 12:56:14 +01:00
committed by Xaviju
parent 9aec9fe6c5
commit aa9f5fc18f
4 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/main/ui/ds/_sizes.scss
View File

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

3
frontend/src/app/main/ui/ds/utilities/swatch.cljs
View File

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

7
frontend/src/app/main/ui/ds/utilities/swatch.scss
View File

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

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

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