mirror of
https://github.com/penpot/penpot.git
synced 2026-04-25 11:18:36 +00:00
♻️ Update icon on typography section and scss files (#9021)
* ♻️ Update icon on new buttons * ♻️ Update scss on typography section
This commit is contained in:
Eva Marco
GitHub
parent
003b54421d
commit
adea81ceee
@ -10,11 +10,9 @@
|
||||
// BASE COLORS
|
||||
--canvas-background-color: var(--color-background-primary);
|
||||
--canvas-fill-color: var(--color-canvas);
|
||||
|
||||
--scrollbar-background-color: var(--color-foreground-secondary);
|
||||
--panel-background-color: var(--color-background-primary);
|
||||
--panel-border-color: var(--color-background-quaternary);
|
||||
|
||||
--app-background: var(--color-background-primary);
|
||||
--loader-background: var(--color-background-primary);
|
||||
|
||||
@ -26,7 +24,6 @@
|
||||
--button-foreground-color-disabled: var(--color-foreground-disabled);
|
||||
--button-background-color-disabled: var(--color-background-quaternary);
|
||||
--button-border-color-disabled: var(--color-background-quaternary);
|
||||
|
||||
--button-primary-background-color-rest: var(--color-accent-primary);
|
||||
--button-primary-border-color-rest: var(--color-accent-primary);
|
||||
--button-primary-foreground-color-rest: var(--color-background-secondary);
|
||||
@ -39,7 +36,6 @@
|
||||
--button-primary-background-color-focus: var(--color-background-tertiary);
|
||||
--button-primary-border-color-focus: var(--color-accent-primary);
|
||||
--button-primary-foreground-color-focus: var(--color-foreground-secondary);
|
||||
|
||||
--button-secondary-background-color-rest: var(--color-background-tertiary);
|
||||
--button-secondary-border-color-rest: var(--color-background-tertiary);
|
||||
--button-secondary-foreground-color-rest: var(--color-foreground-secondary);
|
||||
@ -52,7 +48,6 @@
|
||||
--button-secondary-background-color-focus: var(--color-background-tertiary);
|
||||
--button-secondary-border-color-focus: var(--color-accent-primary);
|
||||
--button-secondary-foreground-color-focus: var(--color-foreground-secondary);
|
||||
|
||||
--button-tertiary-foreground-color-rest: var(--color-foreground-secondary);
|
||||
--button-tertiary-background-color-hover: var(--color-background-quaternary);
|
||||
--button-tertiary-border-color-hover: var(--color-background-quaternary);
|
||||
@ -63,16 +58,13 @@
|
||||
--button-tertiary-background-color-focus: var(--color-background-tertiary);
|
||||
--button-tertiary-border-color-focus: var(--color-accent-primary);
|
||||
--button-tertiary-foreground-color-focus: var(--color-foreground-primary);
|
||||
|
||||
--expand-button-icon-border-width: 0;
|
||||
--expand-button-icon-border-width-selected: 0;
|
||||
|
||||
--button-icon-foreground-color: var(--color-foreground-secondary);
|
||||
--button-icon-foreground-color-hover: var(--color-foreground-secondary);
|
||||
--button-icon-background-color-selected: var(--color-background-quaternary);
|
||||
--button-icon-foreground-color-selected: var(--color-accent-primary);
|
||||
--button-icon-border-color-selected: var(--color-background-quaternary);
|
||||
|
||||
--button-radio-background-color-rest: var(--color-background-tertiary);
|
||||
--button-radio-border-color-rest: var(--color-background-tertiary);
|
||||
--button-radio-foreground-color-rest: var(--color-foreground-secondary);
|
||||
@ -84,20 +76,16 @@
|
||||
--button-radio-background-color-focus: var(--color-background-tertiary);
|
||||
--button-radio-border-color-focus: var(--color-accent-primary);
|
||||
--button-radio-foreground-color-focus: var(--color-foreground-secondary);
|
||||
|
||||
--button-warning-background-color-rest: var(--status-color-warning-500);
|
||||
--button-warning-border-color-rest: var(--status-color-warning-500);
|
||||
--button-warning-foreground-color-rest: var(--color-background-secondary);
|
||||
|
||||
--button-disabled-background-color-rest: var(--color-background-disabled);
|
||||
--button-disabled-border-color-rest: var(--color-background-disabled);
|
||||
--button-disabled-foreground-color-rest: var(--color-foreground-disabled);
|
||||
|
||||
--button-constraint-background-color-rest: var(--color-foreground-secondary);
|
||||
--button-constraint-border-color-rest: var(--color-background-tertiary);
|
||||
--button-constraint-border-color-hover: var(--color-accent-primary-muted);
|
||||
--button-constraint-background-color-hover: var(--color-accent-primary);
|
||||
|
||||
--constraint-widget-background-color: var(--color-background-tertiary);
|
||||
--constraint-center-area-background-color: var(--color-background-primary);
|
||||
|
||||
@ -144,7 +132,6 @@
|
||||
--palette-button-shadow-initial: var(--color-background-primary);
|
||||
--palette-button-shadow-final: transparent;
|
||||
--palette-handler-background-color: var(--color-background-quaternary);
|
||||
|
||||
--color-bullet-background-color: var(--app-white); // We don't want this color to change with palette
|
||||
--color-bullet-border-color: var(--color-background-quaternary);
|
||||
--color-bullet-border-color-selected: var(--color-accent-primary);
|
||||
@ -183,7 +170,6 @@
|
||||
--input-border-color-error: var(--status-color-error-500);
|
||||
--input-border-color-success: var(--color-accent-primary);
|
||||
--input-details-color: var(--color-background-primary);
|
||||
|
||||
--input-checkbox-background-color-rest: var(--color-background-quaternary);
|
||||
--input-checkbox-border-color-rest: var(--color-foreground-secondary);
|
||||
--input-checkbox-border-color-active: var(--color-background-quaternary);
|
||||
@ -200,7 +186,6 @@
|
||||
--input-checkbox-background-color-active: var(--color-accent-primary);
|
||||
--input-checkbox-foreground-color-active: var(--color-background-primary);
|
||||
--input-checkbox-text-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--menu-background-color: var(--color-background-tertiary);
|
||||
--menu-foreground-color: var(--color-foreground-primary);
|
||||
--menu-icon-foreground-color: var(--color-foreground-secondary);
|
||||
@ -219,7 +204,6 @@
|
||||
--menu-background-color-disabled: var(--color-background-primary);
|
||||
--menu-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--menu-border-color-disabled: var(--color-background-quaternary);
|
||||
|
||||
--context-menu-background-color: var(--color-background-tertiary);
|
||||
--context-menu-foreground-color: var(--color-foreground-secondary);
|
||||
--context-menu-background-color-selected: var(--color-background-quaternary);
|
||||
@ -243,34 +227,27 @@
|
||||
--assets-component-border-selected: var(--color-accent-tertiary);
|
||||
--assets-component-second-border-selected: var(--color-background-primary);
|
||||
--assets-component-hightlight: var(--color-accent-secondary);
|
||||
|
||||
--radio-btns-background-color: var(--color-background-tertiary);
|
||||
--radio-btn-background-color-selected: var(--color-background-quaternary);
|
||||
--radio-btn-foreground-color: var(--color-foreground-secondary);
|
||||
--radio-btn-foreground-color-selected: var(--color-accent-primary);
|
||||
--radio-btn-border-color: var(--color-background-tertiary);
|
||||
--radio-btn-border-color-selected: var(--color-background-quaternary);
|
||||
|
||||
--library-name-foreground-color: var(--color-foreground-primary);
|
||||
--library-content-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--dropdown-background-color: var(--color-background-tertiary);
|
||||
--dropdown-separator-color: var(--color-background-primary);
|
||||
--profile-drowpdown-background-color: var(--color-background-primary);
|
||||
|
||||
--not-found-background-color: var(--color-background-tertiary);
|
||||
--not-found-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--entry-foreground-color: var(--color-foreground-secondary);
|
||||
--entry-background-color: var(--color-background-tertiary);
|
||||
--entry-background-color-disabled: var(--color-background-primary);
|
||||
--entry-border-color-disabled: var(--color-background-quaternary);
|
||||
--entry-foreground-color-hover: var(--color-foreground-primary);
|
||||
--entry-background-color-hover: var(--color-background-quaternary);
|
||||
|
||||
--empty-message-background-color: var(--color-background-tertiary);
|
||||
--empty-message-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--user-count-background-color: var(--color-accent-primary);
|
||||
--user-count-foreground-color: var(--color-background-secondary);
|
||||
|
||||
@ -323,32 +300,25 @@
|
||||
--alert-text-foreground-color-default: var(--color-foreground-primary);
|
||||
--alert-icon-foreground-color-default: var(--color-foreground-primary);
|
||||
--alert-border-color-default: var(--color-background-quaternary);
|
||||
|
||||
--alert-background-color-success: var(--color-background-success);
|
||||
--alert-text-foreground-color-success: var(--color-foreground-primary);
|
||||
--alert-icon-foreground-color-success: var(--color-accent-success);
|
||||
--alert-border-color-success: var(--color-accent-success);
|
||||
|
||||
--alert-background-color-warning: var(--color-background-warning);
|
||||
--alert-text-foreground-color-warning: var(--color-foreground-primary);
|
||||
--alert-icon-foreground-color-warning: var(--color-accent-warning);
|
||||
--alert-border-color-warning: var(--color-accent-warning);
|
||||
|
||||
--alert-background-color-error: var(--color-background-error);
|
||||
--alert-text-foreground-color-error: var(--color-foreground-primary);
|
||||
--alert-icon-foreground-color-error: var(--color-accent-error);
|
||||
--alert-border-color-error: var(--color-accent-error);
|
||||
|
||||
--alert-background-color-info: var(--color-background-info);
|
||||
--alert-text-foreground-color-info: var(--color-foreground-primary);
|
||||
--alert-icon-foreground-color-info: var(--color-accent-info);
|
||||
--alert-border-color-info: var(--color-accent-info);
|
||||
|
||||
--alert-text-foreground-color-focus: var(--color-accent-primary);
|
||||
--alert-border-color-focus: var(--color-accent-primary);
|
||||
|
||||
--notification-foreground-color-default: var(--color-foreground-secondary);
|
||||
|
||||
--element-foreground-warning: var(--status-color-warning-500);
|
||||
--element-foreground-error: var(--status-color-error-500);
|
||||
|
||||
@ -368,21 +338,16 @@
|
||||
--search-bar-foreground-color: var(--color-foreground-primary);
|
||||
--search-bar-icon-foreground-color: var(--color-foreground-secondary);
|
||||
--search-bar-icon-foreground-color-hover: var(--color-accent-primary);
|
||||
|
||||
--pill-background-color: var(--color-background-tertiary);
|
||||
--pill-foreground-color: var(--color-foreground-primary);
|
||||
|
||||
--link-foreground-color: var(--color-accent-primary);
|
||||
--register-confirmation-color: var(--status-color-success-200); //TODO: review this color
|
||||
|
||||
--register-confirmation-color: var(--status-color-success-200); // TODO: review this color
|
||||
--resize-area-background-color: var(--color-background-primary);
|
||||
--resize-area-border-color: var(--color-background-quaternary);
|
||||
|
||||
--profile-section-background-color: var(--color-background-tertiary);
|
||||
--dashboard-list-background-color: var(--color-background-tertiary);
|
||||
--dashboard-list-foreground-color: var(--color-foreground-primary);
|
||||
--dashboard-list-text-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--communication-tag-background-color: var(--color-foreground-primary);
|
||||
--communication-tag-foreground-color: var(--color-background-tertiary);
|
||||
|
||||
@ -404,7 +369,7 @@
|
||||
// TODO: we should not put these functional tokens here, but rather in the components they belong to
|
||||
--new-team-button-background-color: var(--color-background-primary);
|
||||
|
||||
//DASHBOARD
|
||||
// DASHBOARD
|
||||
--sidebar-element-foreground-color: var(--color-foreground-secondary);
|
||||
--sidebar-element-background-color-hover: var(--color-background-secondary);
|
||||
--sidebar-element-foreground-color-hover: var(--color-accent-primary);
|
||||
@ -422,21 +387,16 @@
|
||||
--tab-background-color-selected: var(--color-background-primary);
|
||||
--tab-border-color: var(--color-background-tertiary);
|
||||
--tab-border-color-selected: var(--color-background-secondary);
|
||||
|
||||
--radio-btns-background-color: var(--color-background-tertiary);
|
||||
--radio-btn-background-color-selected: var(--color-background-primary);
|
||||
--radio-btn-foreground-color: var(--color-foreground-secondary);
|
||||
--radio-btn-foreground-color-selected: var(--color-accent-primary);
|
||||
--radio-btn-border-color: var(--color-background-tertiary);
|
||||
--radio-btn-border-color-selected: var(--color-background-secondary);
|
||||
|
||||
--button-icon-background-color-selected: var(--color-background-primary);
|
||||
--button-icon-border-color-selected: var(--color-background-secondary);
|
||||
|
||||
--assets-item-name-foreground-color: var(--color-foreground-primary);
|
||||
|
||||
--text-editor-selection-background-color: var(--la-tertiary-70);
|
||||
--expand-button-icon-border-width-selected: 2px;
|
||||
|
||||
--colorpicker-background-color: var(--color-background-primary);
|
||||
}
|
||||
|
||||
@ -137,6 +137,7 @@
|
||||
|
||||
@mixin inspectValue {
|
||||
@include bodySmallTypography;
|
||||
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
@ -167,6 +168,7 @@
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
margin-bottom: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
max-inline-size: var(--options-width);
|
||||
}
|
||||
|
||||
.dragging {
|
||||
|
||||
@ -28,8 +28,9 @@
|
||||
[app.main.ui.components.search-bar :refer [search-bar*]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[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.foundations.assets.icon :refer [icon*] :as i]
|
||||
[app.main.ui.icons :as deprecated-icon]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
@ -82,8 +83,10 @@
|
||||
:on-click on-click}
|
||||
[:div {:class (stl/css-case :font-item true
|
||||
:selected is-current)}
|
||||
[:span {:class (stl/css :label)} (:name font)]
|
||||
[:span {:class (stl/css :icon)} (when is-current deprecated-icon/tick)]]]))
|
||||
[:span {:class (stl/css :font-item-label)} (:name font)]
|
||||
(when is-current
|
||||
[:> icon* {:icon-id i/tick
|
||||
:size "s"}])]]))
|
||||
|
||||
(declare row-renderer)
|
||||
|
||||
@ -191,7 +194,7 @@
|
||||
:placeholder (tr "workspace.options.search-font")}]
|
||||
(when (and recent-fonts show-recent)
|
||||
[:section {:class (stl/css :show-recent)}
|
||||
[:p {:class (stl/css :title)} (tr "workspace.options.recent-fonts")]
|
||||
[:p {:class (stl/css :header-title)} (tr "workspace.options.recent-fonts")]
|
||||
(for [[idx font] (d/enumerate recent-fonts)]
|
||||
[:> font-item* {:key (dm/str "font-" idx)
|
||||
:font font
|
||||
@ -316,10 +319,11 @@
|
||||
|
||||
(some? font)
|
||||
[:*
|
||||
[:span {:class (stl/css :name)}
|
||||
[:span {:class (stl/css :font-option-name)}
|
||||
(:name font)]
|
||||
[:span {:class (stl/css :icon)}
|
||||
deprecated-icon/arrow]]
|
||||
[:> icon* {:icon-id i/arrow-down
|
||||
:class (stl/css :dropdown-icon)
|
||||
:size "s"}]]
|
||||
|
||||
:else
|
||||
(tr "dashboard.fonts.deleted-placeholder"))]
|
||||
@ -524,15 +528,15 @@
|
||||
[:div {:class (stl/css :action-btns)}
|
||||
(when show-actions?
|
||||
[:*
|
||||
[:> icon-button* {:variant "ghost"
|
||||
[:> icon-button* {:variant "action"
|
||||
:aria-label (tr "workspace.assets.duplicate")
|
||||
:on-click on-duplicate
|
||||
:icon i/add}]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:icon i/clipboard}]
|
||||
[:> icon-button* {:variant "action"
|
||||
:aria-label (tr "workspace.assets.delete")
|
||||
:on-click on-delete
|
||||
:icon i/delete}]])
|
||||
[:> icon-button* {:variant "ghost"
|
||||
[:> icon-button* {:variant "action"
|
||||
:aria-label (tr "labels.close")
|
||||
:on-click on-close
|
||||
:icon i/tick}]]]
|
||||
@ -555,9 +559,10 @@
|
||||
(:name typography)]
|
||||
[:span {:class (stl/css :typography-font)}
|
||||
(:name font-data)]
|
||||
[:div {:class (stl/css :action-btn)
|
||||
:on-click on-close}
|
||||
deprecated-icon/menu]]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:aria-label (tr "labels.close")
|
||||
:on-click on-close
|
||||
:icon i/menu}]]
|
||||
|
||||
[:div {:class (stl/css :info-row)}
|
||||
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-style")]
|
||||
@ -580,8 +585,8 @@
|
||||
[:span {:class (stl/css :info-content)} (:text-transform typography)]]
|
||||
|
||||
(when-not local?
|
||||
[:a {:class (stl/css :link-btn)
|
||||
:on-click navigate-to-library}
|
||||
[:> button* {:variant "secondary"
|
||||
:on-click navigate-to-library}
|
||||
(tr "workspace.assets.typography.go-to-edit")])])])))
|
||||
|
||||
(mf/defc typography-entry
|
||||
@ -686,12 +691,14 @@
|
||||
(:name font-data)])])
|
||||
[:div {:class (stl/css :element-set-actions)}
|
||||
(when ^boolean on-detach
|
||||
[:button {:class (stl/css :element-set-actions-button)
|
||||
:on-click on-detach}
|
||||
deprecated-icon/detach])
|
||||
[:button {:class (stl/css :menu-btn)
|
||||
:on-click on-open}
|
||||
deprecated-icon/menu]]]
|
||||
[:> icon-button* {:variant "action"
|
||||
:aria-label (tr "settings.detach")
|
||||
:on-click on-detach
|
||||
:icon i/detach}])
|
||||
[:> icon-button* {:variant "action"
|
||||
:aria-label (tr "labels.open")
|
||||
:on-click on-open
|
||||
:icon i/menu}]]]
|
||||
|
||||
[:& typography-advanced-options
|
||||
{:visible? open?
|
||||
|
||||
@ -5,64 +5,59 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/mixins.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
|
||||
.typography-entry {
|
||||
--actions-visibility: hidden;
|
||||
--typography-entry-background-color: var(--color-background-tertiary);
|
||||
--typography-entry-foreground-color: var(--color-foreground-primary);
|
||||
--typography-entry-border-color: transparent;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
block-size: $sz-32;
|
||||
inline-size: 100%;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--typography-entry-background-color);
|
||||
color: var(--typography-entry-foreground-color);
|
||||
border: $b-1 solid var(--typography-entry-border-color);
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
--typography-entry-background-color: var(--color-background-quaternary);
|
||||
--typography-entry-foreground-color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: deprecated.$s-1 solid var(--assets-item-border-color);
|
||||
}
|
||||
|
||||
.element-set-actions {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
|
||||
.element-set-actions-button,
|
||||
.menu-btn {
|
||||
@extend %button-tertiary;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
|
||||
svg {
|
||||
@extend %button-icon;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
--typography-entry-border-color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
--typography-entry-background-color: var(--color-background-quaternary);
|
||||
|
||||
.element-set-actions {
|
||||
visibility: visible;
|
||||
--actions-visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-set-actions {
|
||||
display: flex;
|
||||
visibility: var(--actions-visibility);
|
||||
}
|
||||
|
||||
.typography-selection-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: deprecated.$s-24 auto 1fr;
|
||||
grid-template-columns: $sz-24 auto 1fr;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 deprecated.$s-12;
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
padding: 0 var(--sp-m);
|
||||
|
||||
&.is-selectable {
|
||||
cursor: pointer;
|
||||
@ -70,455 +65,333 @@
|
||||
}
|
||||
|
||||
.typography-sample {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
min-width: deprecated.$s-24;
|
||||
height: deprecated.$s-32;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-inline-size: $sz-24;
|
||||
block-size: $sz-32;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.typography-name,
|
||||
.typography-font {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include t.use-typography("body-small");
|
||||
@include text-ellipsis;
|
||||
|
||||
display: block;
|
||||
align-self: center;
|
||||
margin-left: deprecated.$s-6;
|
||||
margin-inline-start: px2rem(6);
|
||||
}
|
||||
|
||||
.typography-name {
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.typography-font {
|
||||
color: var(--assets-item-name-foreground-color-rest);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.font-name-wrapper {
|
||||
@include deprecated.bodySmallTypography;
|
||||
--font-name-wrapper-foreground-color: var(--color-foreground-primary);
|
||||
--font-name-wrapper-background-color: var(--color-background-tertiary);
|
||||
--font-name-wrapper-border-color: transparent;
|
||||
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
block-size: $sz-32;
|
||||
inline-size: 100%;
|
||||
border-radius: $br-8;
|
||||
border: $b-1 solid var(--font-name-wrapper-border-color);
|
||||
box-sizing: border-box;
|
||||
background-color: var(--assets-item-background-color);
|
||||
margin-bottom: deprecated.$s-4;
|
||||
padding: deprecated.$s-8 deprecated.$s-0 deprecated.$s-8 deprecated.$s-12;
|
||||
|
||||
.typography-sample-input {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: deprecated.$s-24;
|
||||
height: 100%;
|
||||
font-size: deprecated.$fs-16;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
|
||||
.adv-typography-name {
|
||||
@include deprecated.removeInputStyle;
|
||||
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--input-foreground-color-active);
|
||||
flex-grow: 1;
|
||||
padding-left: deprecated.$s-6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@extend %button-tertiary;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: deprecated.$s-2;
|
||||
}
|
||||
background-color: var(--font-name-wrapper-background-color);
|
||||
margin-block-end: var(--sp-s);
|
||||
padding: var(--sp-s) 0 var(--sp-s) var(--sp-m);
|
||||
|
||||
&:focus-within {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
|
||||
.adv-typography-name {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
--font-name-wrapper-border-color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
--font-name-wrapper-background-color: var(--color-background-quaternary);
|
||||
}
|
||||
}
|
||||
|
||||
.typography-sample-input {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
inline-size: $sz-24;
|
||||
block-size: 100%;
|
||||
font-size: px2rem(16);
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.adv-typography-name {
|
||||
font-size: px2rem(12);
|
||||
color: var(--font-name-wrapper-foreground-color);
|
||||
flex-grow: 1;
|
||||
padding-inline-start: px2rem(6);
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-xxs);
|
||||
}
|
||||
|
||||
.advanced-options-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--assets-title-background-color);
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
background-color: var(--color-background-primary);
|
||||
}
|
||||
|
||||
.typography-info-wrapper {
|
||||
@include deprecated.flexColumn;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xxs);
|
||||
margin-block-end: var(--sp-m);
|
||||
}
|
||||
|
||||
margin-bottom: deprecated.$s-12;
|
||||
.typography-name-wrapper {
|
||||
@extend %asset-element;
|
||||
|
||||
.typography-name-wrapper {
|
||||
@extend %asset-element;
|
||||
display: grid;
|
||||
grid-template-columns: $sz-24 auto 1fr $sz-28;
|
||||
flex: 1;
|
||||
block-size: $sz-32;
|
||||
inline-size: 100%;
|
||||
padding: 0 0 0 var(--sp-m);
|
||||
background-color: var(--color-background-quaternary);
|
||||
margin-block-end: var(--sp-xs);
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: deprecated.$s-24 auto 1fr deprecated.$s-28;
|
||||
flex: 1;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
padding: 0 0 0 deprecated.$s-12;
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
margin-bottom: deprecated.$s-4;
|
||||
.typography-sample {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-inline-size: $sz-24;
|
||||
font-size: px2rem(16);
|
||||
block-size: $sz-32;
|
||||
padding: 0;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.typography-sample {
|
||||
@include deprecated.flexCenter;
|
||||
.typography-name,
|
||||
.typography-font {
|
||||
@include t.use-typography("body-small");
|
||||
@include text-ellipsis;
|
||||
|
||||
min-width: deprecated.$s-24;
|
||||
font-size: deprecated.$fs-16;
|
||||
height: deprecated.$s-32;
|
||||
padding: 0;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-inline-start: px2rem(6);
|
||||
min-inline-size: 0;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.typography-name {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
.info-row {
|
||||
--calculated-width: calc(var(--right-sidebar-width) - $sz-48);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-left: deprecated.$s-6;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
block-size: $sz-32;
|
||||
padding-left: var(--sp-xs);
|
||||
}
|
||||
|
||||
.typography-font {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
.info-label,
|
||||
.info-content {
|
||||
@include t.use-typography("body-small");
|
||||
@include text-ellipsis;
|
||||
|
||||
margin-left: deprecated.$s-6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@extend %button-tertiary;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-32;
|
||||
|
||||
svg {
|
||||
@extend %button-icon;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
height: deprecated.$s-32;
|
||||
|
||||
--calculated-width: calc(var(--right-sidebar-width) - deprecated.$s-48);
|
||||
|
||||
padding-left: deprecated.$s-2;
|
||||
|
||||
.info-label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
width: calc(var(--calculated-width) / 2);
|
||||
padding-top: deprecated.$s-8;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
}
|
||||
|
||||
.info-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
padding-top: deprecated.$s-8;
|
||||
width: calc(var(--calculated-width) / 2);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@extend %button-secondary;
|
||||
|
||||
width: 100%;
|
||||
height: deprecated.$s-32;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-secondary-background-color-hover);
|
||||
color: var(--button-secondary-foreground-color-hover);
|
||||
border: deprecated.$s-1 solid var(--button-secondary-border-color-hover);
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--button-secondary-background-color-focus);
|
||||
color: var(--button-secondary-foreground-color-focus);
|
||||
border: deprecated.$s-1 solid var(--button-secondary-border-color-focus);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
inline-size: calc(var(--calculated-width) / 2);
|
||||
padding-block-start: var(--sp-s);
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.text-options {
|
||||
@include deprecated.flexColumn;
|
||||
|
||||
max-width: var(--options-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xs);
|
||||
max-inline-size: var(--options-width);
|
||||
|
||||
&:not(.text-options-full-size) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.font-option {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@extend %asset-element;
|
||||
.font-option {
|
||||
@include t.use-typography("body-small");
|
||||
@extend %asset-element;
|
||||
|
||||
padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-8;
|
||||
cursor: pointer;
|
||||
padding: var(--sp-s);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex-grow: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.font-option-name {
|
||||
@include text-ellipsis;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
flex-grow: 1;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
.font-modifiers {
|
||||
display: flex;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
.font-size-options {
|
||||
@extend %asset-element;
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
flex-grow: 1;
|
||||
inline-size: px2rem(60);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: $b-1 solid var(--color-background-tertiary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.font-modifiers {
|
||||
.font-variant-options {
|
||||
padding: 0;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.typography-variations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.spacing-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.line-height,
|
||||
.letter-spacing {
|
||||
@extend %input-element;
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
gap: deprecated.$s-4;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
inline-size: $sz-28;
|
||||
|
||||
.font-size-options {
|
||||
@extend %asset-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
flex-grow: 1;
|
||||
width: deprecated.$s-60;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-28;
|
||||
min-width: deprecated.$s-28;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.font-variant-options {
|
||||
padding: 0;
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.typography-variations {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
.spacing-options {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
.line-height,
|
||||
.letter-spacing {
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-transform {
|
||||
@extend %asset-element;
|
||||
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
background-color: var(--radio-btns-background-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--radio-btns-background-color);
|
||||
}
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.font-size-select {
|
||||
@include deprecated.removeInputStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
.text-transform {
|
||||
@extend %asset-element;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
inline-size: fit-content;
|
||||
padding: 0;
|
||||
background-color: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
.font-size-select {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
margin: 0;
|
||||
padding: deprecated.$s-8;
|
||||
padding: var(--sp-s);
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
|
||||
.numeric-input {
|
||||
@extend %input-base;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.font-selector {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: deprecated.$z-index-4;
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
z-index: var(--z-index-dropdown);
|
||||
}
|
||||
|
||||
.show-recent {
|
||||
border-radius: deprecated.$br-8 deprecated.$br-8 0 0;
|
||||
background: var(--dropdown-background-color);
|
||||
border: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
border-radius: $br-8 $br-8 0 0;
|
||||
background: var(--color-background-tertiary);
|
||||
border: $b-1 solid var(--color-background-quaternary);
|
||||
border-block-end: none;
|
||||
}
|
||||
|
||||
.font-selector-dropdown {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
|
||||
&:not(.font-selector-dropdown-full-size) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
row-gap: deprecated.$s-2;
|
||||
|
||||
.title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
margin: 0;
|
||||
padding: deprecated.$s-12;
|
||||
}
|
||||
block-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
row-gap: var(--sp-xxs);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin: 0;
|
||||
padding: var(--sp-m);
|
||||
}
|
||||
|
||||
.font-wrapper {
|
||||
padding-bottom: deprecated.$s-4;
|
||||
padding-bottom: var(--sp-xs);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.font-item {
|
||||
@extend %asset-element;
|
||||
|
||||
margin-bottom: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin-bottom: var(--sp-xs);
|
||||
border-radius: $br-8;
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
|
||||
.icon {
|
||||
svg {
|
||||
stroke: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.font-item-label {
|
||||
@include t.use-typography("body-small");
|
||||
@include text-ellipsis;
|
||||
|
||||
flex-grow: 1;
|
||||
min-inline-size: 0;
|
||||
}
|
||||
|
||||
.font-selector-dropdown-full-size {
|
||||
height: calc(100vh - 48px); // TODO: ugly hack :( Find a workaround for this.
|
||||
block-size: calc(100vh - 48px); // TODO: ugly hack :( Find a workaround for this.
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
padding: deprecated.$s-2 deprecated.$s-12 deprecated.$s-12 deprecated.$s-12;
|
||||
padding: var(--sp-xxs) var(--sp-m) var(--sp-m) var(--sp-m);
|
||||
}
|
||||
|
||||
.fonts-list {
|
||||
@ -526,23 +399,23 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: deprecated.$s-2;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--dropdown-background-color);
|
||||
min-block-size: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
padding: var(--sp-xxs);
|
||||
border-radius: $br-8;
|
||||
background-color: var(--color-background-tertiary);
|
||||
overflow: hidden;
|
||||
|
||||
&:not(.fonts-list-full-size) {
|
||||
margin-block-start: deprecated.$s-2;
|
||||
margin-block-start: var(--sp-xxs);
|
||||
}
|
||||
}
|
||||
|
||||
.fonts-list-full-size {
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
border: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
border: $b-1 solid var(--color-background-quaternary);
|
||||
|
||||
// TODO: this should belong to typography-entry , but atm we don't have a clear
|
||||
// way of accessing whether we are in fullsize mode or not
|
||||
@ -550,3 +423,7 @@
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -5630,7 +5630,7 @@ msgstr "Estilo de fuente"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:546
|
||||
msgid "workspace.assets.typography.go-to-edit"
|
||||
msgstr "Ir al archivo de la biblioteca del estilo para editar"
|
||||
msgstr "Editar en biblioteca de estilo"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:536
|
||||
msgid "workspace.assets.typography.letter-spacing"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user