Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 14:12:36 -05:00
Code Issues Activity

Add form styling

Browse source
This commit is contained in:
Florian Schroedl 2024-06-21 17:00:00 +02:00
parent 8db47b5877
commit 941fb041b6
2 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -117,8 +117,15 @@
[:& tokens.common/labeled-input {:label "Value" [:& tokens.common/labeled-input {:label "Value"
:input-props {:default-value @value :input-props {:default-value @value
:on-change on-update-value}}] :on-change on-update-value}}]
[:div {:class (stl/css :resolved-value)} [:div {:class (stl/css-case :resolved-value true
[:p @resolved-value]] :resolved-value-placeholder (nil? @token-resolve-result)
:resolved-value-error (when (keyword? @token-resolve-result)
(= (namespace @token-resolve-result) "error")))}
(case @token-resolve-result
:error/token-self-reference "Token has self reference"
:error/token-missing-reference "Token has missing reference"
nil "Enter token value"
[:p @token-resolve-result])]
[:& tokens.common/labeled-input {:label "Description" [:& tokens.common/labeled-input {:label "Description"
:input-props {:default-value (:description state) :input-props {:default-value (:description state)
#_#_:on-change #(on-update-description %)}}] #_#_:on-change #(on-update-description %)}}]

9
frontend/src/app/main/ui/workspace/tokens/form.scss
View file

@ -30,6 +30,7 @@
@include bodySmallTypography; @include bodySmallTypography;
padding: $s-4 $s-6; padding: $s-4 $s-6;
font-weight: medium; font-weight: medium;
height: $s-24;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
@ -39,3 +40,11 @@
margin: 0; margin: 0;
} }
} }
.resolved-value-placeholder {
color: var(--color-foreground-secondary);
}
.resolved-value-error {
color: var(--status-color-error-500);
}