diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 759c4c94b..4a18a5ba8 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -127,6 +127,7 @@ --layer-row-foreground-color-selected: var(--color-accent-primary); --layer-row-foreground-color-drag: var(--color-accent-tertiary); --layer-row-foreground-color-focus: var(--color-foreground-primary); + --layer-row-foreground-color-placeholder: var(--color-foreground-secondary); --layer-row-border-color-focus: var(--color-accent-primary); --layer-child-row-background-color: var(--color-background-tertiary); --layer-child-row-foreground-color: var(--color-foreground-secondary); diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 0f9e47f92..2dd0b8289 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -88,6 +88,7 @@ :on-blur on-submit-valid :on-key-down on-key-down :auto-focus true + :placeholder (tr "workspace.token.set-edit-placeholder") :default-value default-value}])) (mf/defc checkbox* diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index d87fbfd43..aa783329f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -143,20 +143,20 @@ } } -.editing-node { - @include textEllipsis; - color: var(--layer-row-foreground-color-focus); -} - .editing-node { @include textEllipsis; @include bodySmallTypography; @include removeInputStyle; + + border: $s-1 solid var(--input-border-color-focus); + border-radius: $br-8; + color: var(--layer-row-foreground-color-focus); flex-grow: 1; height: $s-28; - padding-left: $s-6; margin: 0; - border-radius: $br-8; - border: $s-1 solid var(--input-border-color-focus); - color: var(--layer-row-foreground-color); + padding-left: $s-6; + + &::placeholder { + color: var(--layer-row-foreground-color-placeholder); + } } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 46b567622..45a975c96 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6547,7 +6547,11 @@ msgstr "New theme" msgid "workspace.token.no-active-theme" msgstr "No theme active" -#: src/app/main/ui/workspace/tokens/sets.cljs:89 +#: src/app/main/ui/workspace/tokens/sets.cljs:91 +msgid "workspace.token.set-edit-placeholder" +msgstr "Enter name (use '/' for groups)" + +#: src/app/main/ui/workspace/tokens/sets.cljs:103 msgid "workspace.token.no-permisions-set" msgstr "You need to be an editor to activate / deactivate sets" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 14e900594..5803fb138 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6557,7 +6557,11 @@ msgstr "Nuevo tema" msgid "workspace.token.no-active-theme" msgstr "No hay temas activos" -#: src/app/main/ui/workspace/tokens/sets.cljs:89 +#: src/app/main/ui/workspace/tokens/sets.cljs:91 +msgid "workspace.token.set-edit-placeholder" +msgstr "AƱade un nombre - usa '/' para grupos" + +#: src/app/main/ui/workspace/tokens/sets.cljs:103 msgid "workspace.token.no-permisions-set" msgstr "Debes ser editor para activar / desactivar sets"