♻️ Update icon on typography section and scss files (#9021)

* ♻️ Update icon on new buttons

* ♻️ Update scss on typography section

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -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);
 }

frontend/resources/styles/common/refactor/mixins.scss

@@ -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);
   }

frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss

@@ -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 {

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -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 :font-item-label)} (:name font)]
-      [:span {:class (stl/css :icon)} (when is-current deprecated-icon/tick)]]]))
+      (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)}
+         [:> icon* {:icon-id i/arrow-down
-          deprecated-icon/arrow]]
+                    :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 i/clipboard}]
-               [:> icon-button* {:variant "ghost"
+               [:> 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)
+           [:> icon-button* {:variant "ghost"
-                  :on-click on-close}
+                             :aria-label (tr "labels.close")
-            deprecated-icon/menu]]
+                             :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)
+            [:> button* {:variant "secondary"
-                 :on-click navigate-to-library}
+                         :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)
+         [:> icon-button* {:variant "action"
-                   :on-click on-detach}
+                           :aria-label (tr "settings.detach")
-          deprecated-icon/detach])
+                           :on-click on-detach
-       [:button {:class (stl/css :menu-btn)
+                           :icon i/detach}])
-                 :on-click on-open}
+       [:> icon-button* {:variant "action"
-        deprecated-icon/menu]]]
+                         :aria-label (tr "labels.open")
+                         :on-click on-open
+                         :icon i/menu}]]]
 
      [:& typography-advanced-options
       {:visible? open?

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss

@@ -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;
+  block-size: $sz-32;
-  width: 100%;
+  inline-size: 100%;
-  border-radius: deprecated.$br-8;
+  border-radius: $br-8;
-  background-color: var(--assets-item-background-color);
+  background-color: var(--typography-entry-background-color);
-  color: var(--assets-item-name-foreground-color-hover);
+  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);
+    --typography-entry-background-color: var(--color-background-quaternary);
-    color: var(--assets-item-name-foreground-color-hover);
+    --typography-entry-foreground-color: var(--color-foreground-primary);
   }
 
   &.selected {
-    border: deprecated.$s-1 solid var(--assets-item-border-color);
+    --typography-entry-border-color: var(--color-accent-primary);
-  }
-
-  .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;
-      }
-    }
   }
 
   &: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%;
+  block-size: 100%;
-  width: 100%;
+  inline-size: 100%;
-  padding: 0 deprecated.$s-12;
+  padding: 0 var(--sp-m);
 
   &.is-selectable {
     cursor: pointer;
@@ -70,455 +65,333 @@
 }
 
 .typography-sample {
-  @include deprecated.flexCenter;
+  display: flex;
-
+  justify-content: center;
-  min-width: deprecated.$s-24;
+  align-items: center;
-  height: deprecated.$s-32;
+  min-inline-size: $sz-24;
-  color: var(--assets-item-name-foreground-color);
+  block-size: $sz-32;
+  color: var(--color-foreground-secondary);
 }
 
 .typography-name,
 .typography-font {
-  @include deprecated.bodySmallTypography;
+  @include t.use-typography("body-small");
-  @include deprecated.textEllipsis;
+  @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;
+  block-size: $sz-32;
-  width: 100%;
+  inline-size: 100%;
-  border-radius: deprecated.$br-8;
+  border-radius: $br-8;
-  border: deprecated.$s-1 solid transparent;
+  border: $b-1 solid var(--font-name-wrapper-border-color);
   box-sizing: border-box;
-  background-color: var(--assets-item-background-color);
+  background-color: var(--font-name-wrapper-background-color);
-  margin-bottom: deprecated.$s-4;
+  margin-block-end: var(--sp-s);
-  padding: deprecated.$s-8 deprecated.$s-0 deprecated.$s-8 deprecated.$s-12;
+  padding: var(--sp-s) 0 var(--sp-s) var(--sp-m);
-
-  .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;
-  }
 
   &:focus-within {
-    border: deprecated.$s-1 solid var(--input-border-color-active);
+    --font-name-wrapper-border-color: var(--color-accent-primary);
-
-    .adv-typography-name {
-      color: var(--input-foreground-color-active);
-    }
   }
 
   &: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%;
+  block-size: 100%;
-  width: 100%;
+  inline-size: 100%;
-  background-color: var(--assets-title-background-color);
+  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 {
+  display: grid;
-    @extend %asset-element;
+  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;
+.typography-sample {
-    grid-template-columns: deprecated.$s-24 auto 1fr deprecated.$s-28;
+  display: flex;
-    flex: 1;
+  justify-content: center;
-    height: deprecated.$s-32;
+  align-items: center;
-    width: 100%;
+  min-inline-size: $sz-24;
-    padding: 0 0 0 deprecated.$s-12;
+  font-size: px2rem(16);
-    background-color: var(--assets-item-background-color-hover);
+  block-size: $sz-32;
-    margin-bottom: deprecated.$s-4;
+  padding: 0;
+  color: var(--color-foreground-primary);
+}
 
-    .typography-sample {
+.typography-name,
-      @include deprecated.flexCenter;
+.typography-font {
+  @include t.use-typography("body-small");
+  @include text-ellipsis;
 
-      min-width: deprecated.$s-24;
+  display: flex;
-      font-size: deprecated.$fs-16;
+  align-items: center;
-      height: deprecated.$s-32;
+  justify-content: flex-start;
-      padding: 0;
+  margin-inline-start: px2rem(6);
-      color: var(--assets-item-name-foreground-color-hover);
+  min-inline-size: 0;
-    }
+  color: var(--color-foreground-primary);
+}
 
-    .typography-name {
+.info-row {
-      @include deprecated.bodySmallTypography;
+  --calculated-width: calc(var(--right-sidebar-width) - $sz-48);
-      @include deprecated.textEllipsis;
 
-      display: flex;
+  display: grid;
-      align-items: center;
+  grid-template-columns: 50% 50%;
-      justify-content: flex-start;
+  block-size: $sz-32;
-      margin-left: deprecated.$s-6;
+  padding-left: var(--sp-xs);
-      color: var(--assets-item-name-foreground-color-hover);
+}
-    }
 
-    .typography-font {
+.info-label,
-      @include deprecated.bodySmallTypography;
+.info-content {
-      @include deprecated.textEllipsis;
+  @include t.use-typography("body-small");
+  @include text-ellipsis;
 
-      margin-left: deprecated.$s-6;
+  inline-size: calc(var(--calculated-width) / 2);
-      display: flex;
+  padding-block-start: var(--sp-s);
-      align-items: center;
+  color: var(--color-foreground-primary);
-      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);
-      }
-    }
-  }
 }
 
 .text-options {
-  @include deprecated.flexColumn;
+  display: flex;
-
+  flex-direction: column;
-  max-width: var(--options-width);
+  gap: var(--sp-xs);
+  max-inline-size: var(--options-width);
 
   &:not(.text-options-full-size) {
     position: relative;
   }
+}
 
-  .font-option {
+.font-option {
-    @include deprecated.bodySmallTypography;
+  @include t.use-typography("body-small");
-    @extend %asset-element;
+  @extend %asset-element;
 
-    padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-8;
+  padding: var(--sp-s);
-    cursor: pointer;
+  cursor: pointer;
+}
 
-    .name {
+.font-option-name {
-      flex-grow: 1;
+  @include text-ellipsis;
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
-    }
 
-    .icon {
+  flex-grow: 1;
-      @include deprecated.flexCenter;
+  inline-size: 100%;
+}
 
-      height: deprecated.$s-28;
+.font-modifiers {
-      width: deprecated.$s-28;
+  display: flex;
+  gap: var(--sp-xs);
+}
 
-      svg {
+.font-size-options {
-        @extend %button-icon-small;
+  @extend %asset-element;
+  @include t.use-typography("body-small");
 
-        stroke: var(--icon-foreground);
+  flex-grow: 1;
-        transform: rotate(90deg);
+  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 {
+    svg {
-      @extend %asset-element;
+      @extend %button-icon-small;
-      @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);
-      }
     }
   }
 }
 
-.font-size-select {
+.text-transform {
-  @include deprecated.removeInputStyle;
+  @extend %asset-element;
-  @include deprecated.bodySmallTypography;
 
-  height: deprecated.$s-32;
+  inline-size: fit-content;
-  height: 100%;
+  padding: 0;
-  width: 100%;
+  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%;
+  block-size: 100%;
-  width: 100%;
+  inline-size: 100%;
-  z-index: deprecated.$z-index-4;
+  z-index: var(--z-index-dropdown);
 }
 
 .show-recent {
-  border-radius: deprecated.$br-8 deprecated.$br-8 0 0;
+  border-radius: $br-8 $br-8 0 0;
-  background: var(--dropdown-background-color);
+  background: var(--color-background-tertiary);
-  border: deprecated.$s-1 solid var(--color-background-quaternary);
+  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%;
+    block-size: 100%;
-  }
-
-  .header {
-    display: grid;
-    row-gap: deprecated.$s-2;
-
-    .title {
-      @include deprecated.uppercaseTitleTipography;
-
-      color: var(--title-foreground-color);
-      margin: 0;
-      padding: deprecated.$s-12;
-    }
   }
 }
 
+.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;
+  margin-bottom: var(--sp-xs);
-  border-radius: deprecated.$br-8;
+  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);
+    color: var(--color-foreground-primary);
-
-    .icon {
-      svg {
-        stroke: var(--assets-item-name-foreground-color-hover);
-      }
-    }
-  }
-
-  .label {
-    @include deprecated.bodySmallTypography;
-    @include deprecated.textEllipsis;
-
-    flex-grow: 1;
-    min-width: 0;
   }
 }
 
+.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%;
+  min-block-size: 100%;
-  width: 100%;
+  inline-size: 100%;
-  height: 100%;
+  block-size: 100%;
-  padding: deprecated.$s-2;
+  padding: var(--sp-xxs);
-  border-radius: deprecated.$br-8;
+  border-radius: $br-8;
-  background-color: var(--dropdown-background-color);
+  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);
+}

frontend/translations/es.po

@@ -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"