diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc index 47409130f..1e6ed51c3 100644 --- a/common/src/app/common/files/changes.cljc +++ b/common/src/app/common/files/changes.cljc @@ -425,7 +425,12 @@ [:type [:= :set-token]] [:set-name :string] [:token-name :string] - [:token [:maybe ctob/schema:token-attrs]]]]]]) + [:token [:maybe ctob/schema:token-attrs]]]] + + [:set-base-font-size + [:map {:title "ModBaseFontSize"} + [:type [:= :set-base-font-size]] + [:base-font-size :string]]]]]) (def schema:changes [:sequential {:gen/max 5 :gen/min 1} schema:change]) @@ -1068,6 +1073,13 @@ (ctob/ensure-tokens-lib) (ctob/move-set-group from-path to-path before-path before-group)))) +;; === Base font size + +(defmethod process-change :set-base-font-size + [data {:keys [base-font-size]}] + (ctf/set-base-font-size data base-font-size)) + + ;; === Operations (def ^:private decode-shape diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc index aabd8e35b..08d621aea 100644 --- a/common/src/app/common/files/changes_builder.cljc +++ b/common/src/app/common/files/changes_builder.cljc @@ -124,28 +124,41 @@ ; TODO: remove this when not needed (defn- assert-page-id! [changes] - (dm/assert! - "Give a page-id or call (with-page) before using this function" - (contains? (meta changes) ::page-id))) + (assert + (contains? (meta changes) ::page-id) + "Give a page-id or call (with-page) before using this function")) + +(defn- assert-page! + [changes] + (assert + (contains? (meta changes) ::page) + "Give a page or call (with-page) before using this function")) (defn- assert-container-id! [changes] - (dm/assert! - "Give a page-id or call (with-container) before using this function" + (assert (or (contains? (meta changes) ::page-id) - (contains? (meta changes) ::component-id)))) + (contains? (meta changes) ::component-id)) + "Give a page-id or call (with-container) before using this function")) (defn- assert-objects! [changes] - (dm/assert! - "Call (with-objects) before using this function" - (contains? (meta changes) ::file-data))) + (assert + (contains? (meta changes) ::file-data) + "Call (with-objects) before using this function")) (defn- assert-library! [changes] - (dm/assert! - "Call (with-library-data) before using this function" - (contains? (meta changes) ::library-data))) + (assert + (contains? (meta changes) ::library-data) + "Call (with-library-data) before using this function")) + +(defn- assert-file-data! + [changes] + (assert + (contains? (meta changes) ::file-data) + "Call (with-file-data) before using this function")) + (defn- lookup-objects [changes] @@ -154,9 +167,9 @@ (defn apply-changes-local [changes & {:keys [apply-to-library?]}] - (dm/assert! - "expected valid changes" - (check-changes! changes)) + (assert + (check-changes! changes) + "expected valid changes") (if-let [file-data (::file-data (meta changes))] (let [library-data (::library-data (meta changes)) @@ -195,6 +208,7 @@ (defn mod-page ([changes options] + (assert-page! changes) (let [page (::page (meta changes))] (mod-page changes page options))) @@ -225,6 +239,7 @@ ([changes type id namespace key value] (set-plugin-data changes type id nil namespace key value)) ([changes type id page-id namespace key value] + (assert-file-data! changes) (let [data (::file-data (meta changes)) old-val (case type @@ -291,6 +306,8 @@ (defn set-guide [changes id guide] + (assert-page-id! changes) + (assert-page! changes) (let [page-id (::page-id (meta changes)) page (::page (meta changes)) old-val (dm/get-in page [:guides id])] @@ -304,8 +321,11 @@ :page-id page-id :id id :params old-val})))) + (defn set-flow [changes id flow] + (assert-page-id! changes) + (assert-page! changes) (let [page-id (::page-id (meta changes)) page (::page (meta changes)) old-val (dm/get-in page [:flows id]) @@ -324,6 +344,8 @@ (defn set-comment-thread-position [changes {:keys [id frame-id position] :as thread}] + (assert-page-id! changes) + (assert-page! changes) (let [page-id (::page-id (meta changes)) page (::page (meta changes)) @@ -345,6 +367,8 @@ (defn set-default-grid [changes type params] + (assert-page-id! changes) + (assert-page! changes) (let [page-id (::page-id (meta changes)) page (::page (meta changes)) old-val (dm/get-in page [:grids type]) @@ -498,6 +522,7 @@ :or {ignore-geometry? false ignore-touched false with-objects? false}}] (assert-container-id! changes) (assert-objects! changes) + (assert-page-id! changes) (let [page-id (::page-id (meta changes)) component-id (::component-id (meta changes)) objects (lookup-objects changes) @@ -846,6 +871,7 @@ (defn set-tokens-lib [changes tokens-lib] + (assert-library! changes) (let [library-data (::library-data (meta changes)) prev-tokens-lib (get library-data :tokens-lib)] (-> changes @@ -1135,3 +1161,16 @@ (defn get-page-id [changes] (::page-id (meta changes))) + +(defn set-base-font-size + [changes new-base-font-size] + (assert-file-data! changes) + (let [file-data (::file-data (meta changes)) + previous-font-size (ctf/get-base-font-size file-data)] + (-> changes + (update :redo-changes conj {:type :set-base-font-size + :base-font-size new-base-font-size}) + + (update :undo-changes conj {:type :set-base-font-size + :base-font-size previous-font-size}) + (apply-changes-local)))) \ No newline at end of file diff --git a/common/src/app/common/logic/libraries.cljc b/common/src/app/common/logic/libraries.cljc index 944588a93..3ae105de3 100644 --- a/common/src/app/common/logic/libraries.cljc +++ b/common/src/app/common/logic/libraries.cljc @@ -2190,7 +2190,9 @@ :starting-frame frame-id}] (vswap! unames conj name) - (pcb/set-flow changes flow-id new-flow))) + (-> changes + (pcb/with-page page) + (pcb/set-flow flow-id new-flow)))) changes (->> shapes diff --git a/common/src/app/common/logic/shapes.cljc b/common/src/app/common/logic/shapes.cljc index ca64e55f3..29505b53f 100644 --- a/common/src/app/common/logic/shapes.cljc +++ b/common/src/app/common/logic/shapes.cljc @@ -151,7 +151,9 @@ changes (reduce (fn [changes {:keys [id] :as flow}] (if (contains? ids-to-delete (:starting-frame flow)) - (pcb/set-flow changes id nil) + (-> changes + (pcb/with-page page) + (pcb/set-flow id nil)) changes)) changes (:flows page)) @@ -213,7 +215,9 @@ (map :id)) changes (reduce (fn [changes guide-id] - (pcb/set-flow changes guide-id nil)) + (-> changes + (pcb/with-page page) + (pcb/set-flow guide-id nil))) changes guides-to-delete) diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc index ca3a3e94f..0c0b8b721 100644 --- a/common/src/app/common/types/file.cljc +++ b/common/src/app/common/types/file.cljc @@ -32,6 +32,13 @@ [app.common.uuid :as uuid] [cuerdas.core :as str])) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; CONSTANTS +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defonce BASE-FONT-SIZE "16px") + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; SCHEMA ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -65,7 +72,8 @@ (def schema:options [:map {:title "FileOptions"} - [:components-v2 {:optional true} ::sm/boolean]]) + [:components-v2 {:optional true} ::sm/boolean] + [:base-font-size {:optional true} :string]]) (def schema:data [:map {:title "FileData"} @@ -133,7 +141,8 @@ (ctpl/add-page page) :always - (update :options assoc :components-v2 true))))) + (update :options merge {:components-v2 true + :base-font-size BASE-FONT-SIZE}))))) (defn make-file [{:keys [id project-id name revn is-shared features migrations @@ -1028,3 +1037,14 @@ (-> file (update-in [:data :pages-index] detach-pages)))) + +;; Base font size + +(defn get-base-font-size + "Retrieve the base font size value or token reference." + [file-data] + (get-in file-data [:options :base-font-size] BASE-FONT-SIZE)) + +(defn set-base-font-size + [file-data base-font-size] + (assoc-in file-data [:options :base-font-size] base-font-size)) \ No newline at end of file diff --git a/frontend/resources/images/icons/settings.svg b/frontend/resources/images/icons/settings.svg new file mode 100644 index 000000000..9138d83fe --- /dev/null +++ b/frontend/resources/images/icons/settings.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index a587027bc..dfc5a3b4f 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -616,6 +616,7 @@ (watch [it state _] (let [page (dsh/lookup-page state id) changes (-> (pcb/empty-changes it) + (pcb/with-page page) (pcb/mod-page page {:name name}))] (rx/of (dch/commit-changes changes)))))) diff --git a/frontend/src/app/main/data/workspace/tokens/typography.cljs b/frontend/src/app/main/data/workspace/tokens/typography.cljs new file mode 100644 index 000000000..6037cf3d5 --- /dev/null +++ b/frontend/src/app/main/data/workspace/tokens/typography.cljs @@ -0,0 +1,25 @@ +;; 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.data.workspace.tokens.typography + (:require + [app.common.data.macros :as dm] + [app.common.files.changes-builder :as pcb] + [app.main.data.changes :as dch] + [beicon.v2.core :as rx] + [potok.v2.core :as ptk])) + +(defn set-base-font-size [base-font-size] + (ptk/reify ::set-base-font-size + ptk/WatchEvent + (watch [it state _] + (let [file-id (dm/get-in state [:workspace :current-file-id]) + file-data (dm/get-in state [:files file-id :data]) + changes (-> (pcb/empty-changes it) + (pcb/with-file-data file-data) + (pcb/set-base-font-size base-font-size))] + (rx/of + (dch/commit-changes changes)))))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs index 88bf48bd1..49dd60fc1 100644 --- a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs @@ -16,6 +16,7 @@ [:map [:class {:optional true} :string] [:icon-class {:optional true} :string] + [:tooltip-id {:optional true} :string] [:icon [:and :string [:fn #(contains? icon-list %)]]] [:aria-label :string] @@ -25,7 +26,7 @@ (mf/defc icon-button* {::mf/props :obj ::mf/schema schema:icon-button} - [{:keys [class icon icon-class variant aria-label children] :rest props}] + [{:keys [class icon icon-class variant aria-label children tooltip-id] :rest props}] (let [variant (or variant "primary") class (dm/str class " " (stl/css-case :icon-button true :icon-button-primary (= variant "primary") @@ -33,5 +34,10 @@ :icon-button-ghost (= variant "ghost") :icon-button-action (= variant "action") :icon-button-destructive (= variant "destructive"))) - props (mf/spread-props props {:class class :title aria-label})] - [:> "button" props [:> icon* {:icon-id icon :aria-label aria-label :class icon-class}] children])) + props (if (some? tooltip-id) + (mf/spread-props props {:class class + :aria-describedby tooltip-id}) + (mf/spread-props props {:class class + :aria-label aria-label + :title aria-label}))] + [:> "button" props [:> icon* {:icon-id icon :aria-hidden true :class icon-class}] children])) \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs index 174400d6a..13cabc34a 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs @@ -231,6 +231,7 @@ (def ^:icon-id row-reverse "row-reverse") (def ^:icon-id search "search") (def ^:icon-id separate-nodes "separate-nodes") +(def ^:icon-id settings "settings") (def ^:icon-id shown "shown") (def ^:icon-id size-horizontal "size-horizontal") (def ^:icon-id size-vertical "size-vertical") diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index ed4d94e12..35e9afc82 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -208,6 +208,7 @@ (def ^:icon row-reverse (icon-xref :row-reverse)) (def ^:icon search (icon-xref :search)) (def ^:icon separate-nodes (icon-xref :separate-nodes)) +(def ^:icon settings (icon-xref :settings)) (def ^:icon share (icon-xref :share)) (def ^:icon shown (icon-xref :shown)) (def ^:icon size-horizontal (icon-xref :size-horizontal)) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 1a86af439..31784f222 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -34,6 +34,7 @@ [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]] [app.main.ui.workspace.tokens.modals] [app.main.ui.workspace.tokens.modals.import] + [app.main.ui.workspace.tokens.modals.settings] [app.main.ui.workspace.tokens.modals.themes] [app.main.ui.workspace.viewport :refer [viewport*]] [app.util.debug :as dbg] diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 95f445be1..d6d5011ed 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -277,22 +277,21 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.close") :on-click on-close-history - :icon "close"}])] + :icon "close"}]) + tabs (mf/object + [{:label (tr "workspace.versions.tab.history") + :id "history" + :content versions-tab} + {:label (tr "workspace.versions.tab.actions") + :id "actions" + :content history-tab}])] - - (let [tabs (mf/object - [{:label (tr "workspace.versions.tab.history") - :id "history" - :content versions-tab} - {:label (tr "workspace.versions.tab.actions") - :id "actions" - :content history-tab}])] - [:> tab-switcher* - {:tabs tabs - :default-selected "history" - :class (stl/css :left-sidebar-tabs) - :action-button-position "end" - :action-button button}])) + [:> tab-switcher* + {:tabs tabs + :default-selected "history" + :class (stl/css :left-sidebar-tabs) + :action-button-position "end" + :action-button button}]) :else [:> options-toolbox* props])]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/settings.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/settings.cljs new file mode 100644 index 000000000..91cabd257 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/modals/settings.cljs @@ -0,0 +1,117 @@ +;; 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.workspace.tokens.modals.settings + (:require-macros [app.main.style :as stl]) + (:require + [app.common.types.file :as ctf] + [app.main.data.modal :as modal] + [app.main.data.workspace.tokens.typography :as wtt] + [app.main.refs :as refs] + [app.main.store :as st] + [app.main.ui.ds.buttons.button :refer [button*]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.controls.input :refer [input*]] + [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] + [app.main.ui.ds.foundations.typography :as t] + [app.main.ui.ds.foundations.typography.heading :refer [heading*]] + [app.main.ui.ds.foundations.typography.text :refer [text*]] + [app.util.dom :as dom] + [app.util.i18n :refer [tr]] + [app.util.keyboard :as k] + [cuerdas.core :as str] + [rumext.v2 :as mf])) + + +(mf/defc token-settings-modal* + {::mf/wrap-props false} + [] + (let [file-data (deref refs/workspace-data) + base-font-size* (mf/use-state #(ctf/get-base-font-size file-data)) + base-font-size (deref base-font-size*) + valid?* (mf/use-state true) + is-valid (deref valid?*) + + is-valid? + (fn [value] + (boolean (re-matches #"^\d+(\.\d+)?(px)?$" value))) + + hint-message (if is-valid + (str "1rem = " base-font-size) + (tr "workspace.token.base-font-size.error")) + + on-change-base-font-size + (mf/use-fn + (mf/deps base-font-size*) + (fn [e] + (let [value (dom/get-target-val e)] + (reset! valid?* (is-valid? value)) + (when (is-valid? value) + (let [unit-value (if (str/ends-with? value "px") + value + (str value "px"))] + (reset! base-font-size* unit-value)))))) + + on-set-font + (mf/use-fn + (mf/deps base-font-size) + (fn [] + (st/emit! (wtt/set-base-font-size base-font-size) + (modal/hide)))) + + handle-key-down + (mf/use-fn + (mf/deps base-font-size is-valid) + (fn [e] + (when (and (k/enter? e) is-valid) + (on-set-font))))] + + [:div {:class (stl/css :setting-modal-overlay) + :data-testid "token-font-settings-modal"} + [:div {:class (stl/css :setting-modal)} + [:> icon-button* {:on-click modal/hide! + :class (stl/css :close-btn) + :icon i/close + :variant "action" + :aria-label (tr "labels.close")}] + + [:div {:class (stl/css :settings-modal-layout)} + [:> heading* {:level 2 + :typography t/headline-medium + :class (stl/css :settings-modal-title)} + (tr "workspace.token.settings")] + + [:div {:class (stl/css :settings-modal-content)} + [:div {:class (stl/css :settings-modal-subtitle-wrapper)} + [:> text* {:as "span" :typography t/body-large :class (stl/css :settings-subtitle)} + (tr "workspace.token.base-font-size")] + [:> icon* {:icon-id "info"}]] + [:> text* {:as "span" :typography t/body-medium :class (stl/css :settings-modal-description)} + (tr "workspace.token.setting-description")] + + [:> input* {:type "text" + :placeholder "16" + :default-value base-font-size + :hint-message hint-message + :hint-type (if is-valid "hint" "error") + :on-key-down handle-key-down + :on-change on-change-base-font-size}] + + [:div {:class (stl/css :settings-modal-actions)} + [:> button* {:on-click modal/hide! + :variant "secondary"} + (tr "labels.cancel")] + [:> button* {:on-click on-set-font + :disabled (not is-valid) + :variant "primary"} + (tr "labels.save")]]]]]])) + + +(mf/defc base-font-size-modal + {::mf/register modal/components + ::mf/register-as :tokens/base-font-size} + [] + [:> token-settings-modal*]) \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/settings.scss b/frontend/src/app/main/ui/workspace/tokens/modals/settings.scss new file mode 100644 index 000000000..40a297621 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/modals/settings.scss @@ -0,0 +1,55 @@ +// 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 + +@use "../../../ds/spacing.scss" as *; + +@import "refactor/common-refactor.scss"; + +.setting-modal-overlay { + @extend .modal-overlay-base; +} + +.setting-modal { + @extend .modal-container-base; +} + +.close-btn { + @extend .modal-close-btn-base; +} + +.settings-modal-layout { + display: grid; + grid-template-rows: auto 1fr; + gap: var(--sp-xxl); +} + +.settings-modal-title { + color: var(--color-foreground-primary); +} + +.settings-modal-content { + display: grid; + grid-template-rows: auto 1fr auto; + gap: var(--sp-m); +} + +.settings-modal-subtitle-wrapper { + color: var(--color-foreground-primary); + display: flex; + align-items: center; + gap: var(--sp-s); +} + +.settings-modal-description, +.settings-modal-resume { + color: var(--color-foreground-secondary); +} + +.settings-modal-actions { + display: flex; + justify-content: flex-end; + gap: var(--sp-s); +} diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index db35395c6..a31546829 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -25,6 +25,7 @@ [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.foundations.typography.text :refer [text*]] + [app.main.ui.ds.tooltip.tooltip :refer [tooltip*]] [app.main.ui.hooks :as h] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.workspace.sidebar.assets.common :as cmm] @@ -384,10 +385,17 @@ (json/encode :key-fn identity))] (->> (wapi/create-blob (or tokens-json "{}") "application/json") (dom/trigger-download "tokens.json"))))) + on-modal-show (mf/use-fn (fn [] - (modal/show! :tokens/import {})))] + (modal/show! :tokens/import {}))) + + open-settings-modal + (mf/use-fn + (fn [event] + (dom/stop-propagation event) + (modal/show! :tokens/base-font-size {})))] [:div {:class (stl/css :import-export-button-wrapper)} [:> button* {:on-click open-menu @@ -404,7 +412,15 @@ [:div (tr "labels.import")]]]) [:> dropdown-menu-item* {:class (stl/css :import-export-menu-item) :on-click on-export} - (tr "labels.export")]]])) + (tr "labels.export")]] + + [:> tooltip* {:tooltip-content "Tokens settings" + :id "button-setting"} + [:> icon-button* {:variant "secondary" + :icon "settings" + :tooltip-id "button-setting" + :aria-label "Settings" + :on-click open-settings-modal}]]])) (mf/defc tokens-sidebar-tab* {::mf/wrap [mf/memo]} diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 5299cf061..275467dfb 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -5,6 +5,7 @@ // Copyright (c) KALEIDOS INC @use "../../ds/typography.scss" as *; +@use "../../ds/spacing.scss" as *; @import "refactor/common-refactor.scss"; .sidebar-wrapper { @@ -28,20 +29,20 @@ .tokens-section-wrapper { height: 100%; - padding-left: $s-12; + padding-left: var(--sp-m); overflow-y: auto; scrollbar-gutter: stable; } .sets-sidebar { position: relative; - padding-block-end: $s-16; + padding-block-end: var(--sp-l); } .themes-header, .sets-header-container { @include use-typography("headline-small"); - padding: $s-8; + padding: var(--sp-s); color: var(--title-foreground-color); word-break: break-word; } @@ -50,8 +51,8 @@ display: flex; align-items: flex-start; justify-content: space-between; - gap: $s-4; - margin-block-start: $s-8; + gap: var(--sp-xs); + margin-block-start: var(--sp-s); } .sets-header { @@ -64,7 +65,7 @@ color: var(--color-foreground-secondary); display: flex; align-items: center; - gap: $s-4; + gap: var(--sp-xs); } .sets-header-status-text { @@ -72,11 +73,11 @@ } .themes-wrapper { - padding: $s-12 0 0 $s-12; + padding: var(--sp-m) 0 0 var(--sp-m); } .empty-theme-wrapper { - padding: $s-12; + padding: var(--sp-m); color: var(--color-foreground-secondary); } @@ -84,8 +85,8 @@ display: flex; align-items: center; justify-content: space-between; - margin-left: $s-12; - padding-top: $s-12; + margin-left: var(--sp-m); + padding-top: var(--sp-m); color: var(--layer-row-foreground-color); } @@ -95,20 +96,20 @@ .token-pills-wrapper { display: flex; - gap: $s-4; + gap: var(--sp-xs); flex-wrap: wrap; } .section-text-icon { font-size: $fs-12; - width: $s-16; - height: $s-16; + width: var(--sp-l); + height: var(--sp-l); display: flex; place-content: center; } .section-icon { - margin-right: $s-4; + margin-right: var(--sp-xs); // Align better with the label translate: 0px -1px; } @@ -116,10 +117,11 @@ .import-export-button-wrapper { position: relative; display: flex; + gap: var(--sp-s); flex-direction: row; align-items: end; justify-content: end; - padding: $s-8; + padding: var(--sp-s); background-color: var(--color-background-primary); box-shadow: var(--el-shadow-dark); } @@ -129,9 +131,9 @@ display: flex; align-items: center; justify-content: end; - padding: $s-6 $s-8; + padding: $s-6 var(--sp-s); text-transform: uppercase; - gap: $s-8; + gap: var(--sp-s); background-color: var(--color-background-primary); box-shadow: var(--el-shadow-dark); diff --git a/frontend/translations/en.po b/frontend/translations/en.po index c7c9800ae..22055b34d 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -7124,6 +7124,22 @@ msgstr "The value is not valid" msgid "workspace.token.warning-name-change" msgstr "Renaming this token will break any reference to its old name." +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.settings" +msgstr "Tokens settings" + +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.base-font-size" +msgstr "Base font size" + +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.setting-description" +msgstr "Here you can configure the base font size, which defines the value of 1rem:" + +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.base-font-size.error" +msgstr "Base font size must be a value in pixels or unitless." + #: src/app/main/ui/workspace/sidebar.cljs:135, src/app/main/ui/workspace/sidebar.cljs:144 msgid "workspace.toolbar.assets" msgstr "Assets" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 6810e926f..9e23fc109 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -7103,6 +7103,22 @@ msgstr "El valor no es válido" msgid "workspace.token.warning-name-change" msgstr "Al renombrar este token se romperán las referencias al nombre anterior" +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.settings" +msgstr "Configuración de tokens" + +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.base-font-size" +msgstr "Tamaño de fuente base" + +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.setting-description" +msgstr "Aquí puedes configurar el tamaño de fuente base, que define el tamaño de 1rem:" + +#: src/app/main/ui/workspace/tokens/modals/settings.cljs +msgid "workspace.token.base-font-size.error" +msgstr "El tamaño de fuente base debe estar en px o sin unidad." + #: src/app/main/ui/workspace/sidebar.cljs:135, src/app/main/ui/workspace/sidebar.cljs:144 msgid "workspace.toolbar.assets" msgstr "Recursos"