mirror of
https://github.com/penpot/penpot.git
synced 2026-08-12 15:58:38 +00:00
♻️ Update colorpicker scss file (#11208)
This commit is contained in:
Eva Marco
GitHub
parent
4a1d6e6d57
commit
044d7ac15f
@ -28,6 +28,8 @@
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.ds.buttons.button :refer [button*]]
|
||||
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
|
||||
[app.main.ui.ds.foundations.assets.icon :as i]
|
||||
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
@ -433,10 +435,12 @@
|
||||
|
||||
(when (and (not= selected-mode :image)
|
||||
(= color-style :direct-color))
|
||||
[:button {:class (stl/css-case :picker-btn true
|
||||
:selected picking-color?)
|
||||
:on-click handle-click-picker}
|
||||
deprecated-icon/picker])
|
||||
[:> icon-button* {:icon i/picker
|
||||
:variant "ghost"
|
||||
:aria-label (tr "workspace.colorpicker.color-picker")
|
||||
:aria-pressed picking-color?
|
||||
:class (stl/css :picker-btn)
|
||||
:on-click handle-click-picker}])
|
||||
|
||||
(when (= color-style :token-color)
|
||||
[:div {:class (stl/css :token-color-title)}
|
||||
@ -467,7 +471,8 @@
|
||||
[:div {:class (stl/css :select-image)}
|
||||
[:div {:class (stl/css :content)}
|
||||
(when (:image current-color)
|
||||
[:img {:src uri}])]
|
||||
[:img {:src uri
|
||||
:class (stl/css :content-image)}])]
|
||||
|
||||
(when (some? (:image current-color))
|
||||
[:div {:class (stl/css :checkbox-option)}
|
||||
@ -481,11 +486,10 @@
|
||||
:id "keep-aspect-ratio"
|
||||
:checked keep-aspect-ratio?
|
||||
:on-change handle-change-keep-aspect-ratio}]]])
|
||||
[:button
|
||||
{:class (stl/css :choose-image)
|
||||
:title (tr "media.choose-image")
|
||||
:aria-label (tr "media.choose-image")
|
||||
:on-click on-fill-image-click}
|
||||
|
||||
[:> button* {:class (stl/css :choose-image)
|
||||
:variant "secondary"
|
||||
:on-click on-fill-image-click}
|
||||
(tr "media.choose-image")
|
||||
[:& file-uploader
|
||||
{:input-id "fill-image-upload"
|
||||
@ -554,11 +558,10 @@
|
||||
:color-origin color-origin}])]
|
||||
(when (fn? on-accept)
|
||||
[:div {:class (stl/css :actions)}
|
||||
[:button {:class (stl/css-case
|
||||
:accept-color true
|
||||
:btn-disabled disabled-color-accept?)
|
||||
:on-click on-color-accept
|
||||
:disabled disabled-color-accept?}
|
||||
[:> button* {:class (stl/css :accept-color)
|
||||
:variant "primary"
|
||||
:on-click on-color-accept
|
||||
:disabled disabled-color-accept?}
|
||||
(tr "workspace.libraries.colors.save-color")]])]))
|
||||
|
||||
(defn calculate-position
|
||||
|
||||
@ -5,23 +5,25 @@
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/spacing";
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "refactor/basic-rules.scss" as *;
|
||||
|
||||
.colorpicker-tooltip {
|
||||
@extend %modal-background;
|
||||
|
||||
--colorpicker-width: #{$sz-284};
|
||||
|
||||
left: calc(10 * px2rem(140));
|
||||
padding: var(--sp-m);
|
||||
width: var(--colorpicker-width);
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
inset-inline-start: calc(10 * px2rem(140));
|
||||
inline-size: var(--colorpicker-width);
|
||||
padding: var(--sp-m);
|
||||
border-radius: $br-8;
|
||||
box-shadow: 0 0 12px 0 var(--color-shadow-dark);
|
||||
color: var(--color-foreground-primary);
|
||||
background-color: var(--color-background-primary);
|
||||
z-index: var(--z-index-set);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.colorpicker {
|
||||
@ -34,7 +36,7 @@
|
||||
align-items: flex-start;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
height: $sz-40;
|
||||
block-size: $sz-40;
|
||||
}
|
||||
|
||||
.top-actions-right {
|
||||
@ -42,114 +44,14 @@
|
||||
gap: var(--sp-s);
|
||||
}
|
||||
|
||||
.opacity-input-wrapper {
|
||||
@extend %input-element;
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
width: px2rem(68);
|
||||
}
|
||||
|
||||
// TODO: change to DS button component
|
||||
.picker-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: $b-1 solid transparent;
|
||||
height: var(--sp-xl);
|
||||
width: var(--sp-xl);
|
||||
border-radius: $br-4;
|
||||
padding: 0;
|
||||
margin-top: var(--sp-xs);
|
||||
|
||||
svg {
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
border: $b-1 solid transparent;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-s);
|
||||
}
|
||||
|
||||
.gradient-btn {
|
||||
@extend %button-tertiary;
|
||||
|
||||
height: var(--sp-xl);
|
||||
width: var(--sp-xl);
|
||||
border-radius: $br-4;
|
||||
border: $b-2 solid transparent;
|
||||
|
||||
&:hover {
|
||||
border: $b-2 solid var(--colorpicker-details-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.linear-gradient-btn {
|
||||
background: linear-gradient(180deg, var(--color-foreground-secondary), transparent);
|
||||
|
||||
&.selected {
|
||||
background: linear-gradient(to bottom, rgb(126 255 245 / 1) 0%, rgb(126 255 245 / 0.2) 100%);
|
||||
border: $b-2 solid var(--colorpicker-details-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.radial-gradient-btn {
|
||||
background: radial-gradient(transparent, var(--color-foreground-secondary));
|
||||
|
||||
&.selected {
|
||||
background: radial-gradient(rgb(126 255 245 / 1) 0%, rgb(126 255 245 / 0.2) 100%);
|
||||
border: $b-2 solid var(--colorpicker-details-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.accept-color {
|
||||
@include t.use-typography("headline-small");
|
||||
@extend %button-primary;
|
||||
|
||||
width: 100%;
|
||||
height: var(--sp-xxxl);
|
||||
margin-top: var(--sp-s);
|
||||
justify-content: center;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.picker-detail-wrapper {
|
||||
@ -157,17 +59,18 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: var(--sp-m) 0 var(--sp-s) 0;
|
||||
margin-block: var(--sp-m) var(--sp-s);
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.center-circle {
|
||||
width: var(--sp-xxl);
|
||||
height: var(--sp-xxl);
|
||||
border: $b-2 solid var(--colorpicker-details-color);
|
||||
border-radius: $br-circle;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: 50%;
|
||||
inline-size: var(--sp-xxl);
|
||||
block-size: var(--sp-xxl);
|
||||
border: $b-2 solid var(--color-background-quaternary);
|
||||
border-radius: $br-circle;
|
||||
transform: translate(calc(-1 * var(--sp-m)), calc(-1 * var(--sp-m)));
|
||||
}
|
||||
|
||||
@ -177,46 +80,137 @@
|
||||
}
|
||||
|
||||
.select {
|
||||
width: px2rem(116);
|
||||
inline-size: px2rem(116);
|
||||
}
|
||||
|
||||
.select-image {
|
||||
margin-top: var(--sp-xs);
|
||||
margin-block-start: var(--sp-xs);
|
||||
}
|
||||
|
||||
.content {
|
||||
border-radius: $br-8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: $br-8;
|
||||
block-size: px2rem(140);
|
||||
margin-block-end: px2rem(6);
|
||||
margin-inline-end: px2rem(1);
|
||||
background-image: url("/images/colorpicker-no-image.png");
|
||||
background-position: center;
|
||||
background-size: auto px2rem(140);
|
||||
height: px2rem(140);
|
||||
margin-bottom: $sz-6;
|
||||
margin-right: $sz-1;
|
||||
}
|
||||
|
||||
img {
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.content-image {
|
||||
max-inline-size: 100%;
|
||||
max-block-size: 100%;
|
||||
inline-size: fit-content;
|
||||
block-size: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.choose-image {
|
||||
@extend %button-secondary;
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
width: 100%;
|
||||
margin-top: var(--sp-m);
|
||||
height: var(--sp-xxxl);
|
||||
justify-content: center;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
// TODO: Use a DS checkbox component
|
||||
.checkbox-option {
|
||||
@extend %input-checkbox;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-block: var(--sp-l) 0;
|
||||
margin-inline: 0;
|
||||
|
||||
margin: var(--sp-l) 0 0 0;
|
||||
// The native checkbox markup (label, span, input, svg) has no dedicated
|
||||
// classes; styling these elements directly is unavoidable.
|
||||
label {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: px2rem(6);
|
||||
cursor: pointer;
|
||||
color: var(--color-foreground-secondary);
|
||||
|
||||
span {
|
||||
--checkbox-icon-background-color: var(--color-background-quaternary);
|
||||
--checkbox-icon-border-color: var(--color-foreground-secondary);
|
||||
--checkbox-icon-foreground-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
inline-size: $sz-16;
|
||||
block-size: $sz-16;
|
||||
min-inline-size: $sz-16;
|
||||
min-block-size: $sz-16;
|
||||
border-radius: $br-4;
|
||||
background-color: var(--checkbox-icon-background-color);
|
||||
border: $b-1 solid var(--checkbox-icon-border-color);
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
inline-size: $sz-16;
|
||||
block-size: $sz-16;
|
||||
stroke: var(--checkbox-icon-foreground-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
--checkbox-icon-border-color: var(--color-accent-primary-muted);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--checkbox-icon-border-color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
&:global(.checked) {
|
||||
--checkbox-icon-background-color: var(--color-accent-primary);
|
||||
--checkbox-icon-border-color: var(--color-background-quaternary);
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
inline-size: $sz-12;
|
||||
block-size: $sz-12;
|
||||
stroke-width: 1.33px;
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.intermediate) {
|
||||
--checkbox-icon-background-color: var(--color-foreground-secondary);
|
||||
--checkbox-icon-foreground-color: var(--color-background-secondary);
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
inline-size: $sz-12;
|
||||
block-size: $sz-12;
|
||||
stroke-width: 1.33px;
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.unchecked) {
|
||||
--checkbox-icon-border-color: var(--color-background-quaternary);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
--checkbox-icon-border-color: var(--color-accent-primary-muted);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
span {
|
||||
--checkbox-icon-border-color: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.token-color-title {
|
||||
@ -225,5 +219,5 @@
|
||||
color: var(--color-foreground-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--sp-xxxl);
|
||||
block-size: var(--sp-xxxl);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user