3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-19 05:56:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Add new exceptions for light theme

Browse source
This commit is contained in:
Eva 2024-01-30 10:40:28 +01:00 • committed by Alonso Torres
parent a882d0bf6d
commit 153bb752a4
28 changed files with 131 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/components/editable_label.scss
View file

@ -15,9 +15,9 @@
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
margin: 0;
padding-left: $s-6;
border-radius: $br-8;
border: $s-1 solid var(--input-border-color-focus);
color: var(--layer-row-foreground-color);
border-radius: $br-4;
border: $s-1 solid var(--input-border-color-active);
color: var(--input-foreground-color-active);
}
.editable-label {

18
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -12,13 +12,16 @@
height: $s-32;
background-color: var(--input-background-color);
}
.radio-icon {
@extend .button-radio;
@include buttonStyle;
@include flexCenter;
@include focusRadio;
height: $s-32;
flex-grow: 1;
border-radius: $s-8;
box-sizing: content-box;
border: none;
box-sizing: border-box;
border: $s-2 solid var(--radio-btn-border-color);
input {
display: none;
}
@ -31,16 +34,14 @@
color: var(--radio-btn-foreground-color);
}
&:hover {
border: none;
svg {
color: var(--radio-btn-foreground-color-selected);
stroke: var(--radio-btn-foreground-color-selected);
}
}
&.checked {
border: none;
background-color: var(--radio-btn-background-color-selected);
box-shadow: var(--radio-button-box-shadow);
border-color: var(--radio-btn-border-color-selected);
svg {
stroke: var(--radio-btn-foreground-color-selected);
}
@ -52,6 +53,7 @@
&.disabled {
cursor: default;
background-color: transparent;
border: $s-2 solid transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}
@ -59,8 +61,8 @@
color: var(--button-foreground-color-disabled);
}
&:hover {
border: none;
background-color: transparent;
border: $s-2 solid transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}

8
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -17,8 +17,7 @@
flex-direction: row;
gap: $s-2;
border-radius: $br-8;
background: var(--color-background-secondary);
padding: $s-2;
background: var(--tabs-background-color);
cursor: pointer;
font-size: $fs-12;
height: 100%;
@ -27,7 +26,6 @@
flex-direction: row;
height: 100%;
width: 100%;
gap: $s-2;
.tab-container-tab-title {
@include flexCenter;
@include tabTitleTipography;
@ -35,10 +33,11 @@
width: 100%;
padding: 0 $s-8;
margin: 0;
border-radius: $br-5;
border-radius: $br-8;
background-color: transparent;
color: var(--tab-foreground-color);
white-space: nowrap;
border: $s-2 solid var(--tab-border-color);
svg {
@extend .button-icon;
stroke: var(--tab-foreground-color);
@ -47,6 +46,7 @@
&.current,
&.current:hover {
background: var(--tab-background-color-selected);
border-color: var(--tab-border-color-selected);
color: var(--tab-foreground-color-selected);
svg {
stroke: var(--tab-foreground-color-selected);

53
frontend/src/app/main/ui/components/tabs_container.cljs
View file

@ -1,53 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.tabs-container
(:require
[app.common.data :as d]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc tabs-element
{::mf/wrap-props false}
[props]
(let [children (unchecked-get props "children")]
[:div.tab-element
[:div.tab-element-content children]]))
(mf/defc tabs-container
{::mf/wrap-props false}
[props]
(let [children (->>
(unchecked-get props "children")
(filter some?))
selected (unchecked-get props "selected")
on-change (unchecked-get props "on-change-tab")
state (mf/use-state #(or selected (-> children first .-props .-id)))
selected (or selected @state)
select-fn
(mf/use-fn
(mf/deps on-change)
(fn [event]
(let [id (d/read-string (.. event -target -dataset -id))]
(reset! state id)
(when (fn? on-change) (on-change id)))))]
[:div.tab-container
[:div.tab-container-tabs
(for [tab children]
(let [props (.-props tab)
id (.-id props)
title (.-title props)]
[:div.tab-container-tab-title
{:key (str/concat "tab-" (d/name id))
:data-id (pr-str id)
:on-click select-fn
:class (when (= selected id) "current")}
title]))]
[:div.tab-container-content
(d/seek #(= selected (-> % .-props .-id)) children)]]))