From 97b4491a27c6f2a3d7cc20833a7aa5c3675df69d Mon Sep 17 00:00:00 2001
From: Elena Torro <elenatorro@gmail.com>
Date: Wed, 17 Sep 2025 17:55:30 +0200
Subject: [PATCH] :wrench: Use two lines text ellipsis on custom font names

---
 frontend/src/app/main/ui/dashboard/fonts.scss | 163 ++++++++++--------
 frontend/src/app/main/ui/ds/_sizes.scss       |   2 +
 2 files changed, 90 insertions(+), 75 deletions(-)

diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss
index 021677146c..8a064213df 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.scss
+++ b/frontend/src/app/main/ui/dashboard/fonts.scss
@@ -4,35 +4,41 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as t;
+@use "ds/spacing.scss" as *;
+@use "ds/mixins.scss" as *;
+
 .dashboard-fonts {
-  border-top: deprecated.$s-1 solid var(--color-background-quaternary);
+  border-top: $b-1 solid var(--color-background-quaternary);
   display: flex;
   flex-direction: column;
-  padding-left: deprecated.$s-120;
+  padding-left: px2rem(120);
+  padding-bottom: px2rem(120);
   overflow-y: auto;
-  padding-bottom: deprecated.$s-120;
 
   .btn-primary {
-    font-size: deprecated.$fs-11;
-    height: deprecated.$s-32;
-    min-width: deprecated.$s-100;
+    font-size: px2rem(11);
+    height: $sz-32;
+    min-width: px2rem(100);
   }
 }
 
 .dashboard-installed-fonts {
-  max-width: deprecated.$s-1000;
+  max-width: px2rem(1000);
   width: 100%;
   display: flex;
-  margin-top: deprecated.$s-24;
+  margin-top: var(--sp-xxl);
   flex-direction: column;
 
   h3 {
-    font-size: deprecated.$fs-14;
+    @include t.use-typography("title-small");
     color: var(--color-foreground-secondary);
-    margin: deprecated.$s-4;
+    margin: var(--sp-xs);
   }
 
   .font-item {
@@ -41,21 +47,21 @@
 }
 
 .installed-fonts-header {
+  @include t.use-typography("headline-small");
   align-items: center;
   color: var(--color-foreground-secondary);
   display: flex;
-  font-size: deprecated.$fs-12;
-  height: deprecated.$s-40;
-  padding-left: deprecated.$s-24;
-  text-transform: uppercase;
+  height: $sz-40;
+  padding-left: var(--sp-xxl);
 
   > .family {
-    min-width: deprecated.$s-200;
-    width: deprecated.$s-200;
+    @include twoLineTextEllipsis;
+    min-width: $sz-200;
+    width: $sz-200;
   }
 
   > .variants {
-    padding-left: deprecated.$s-12;
+    padding-left: var(--sp-m);
   }
 }
 
@@ -65,19 +71,19 @@
   justify-content: flex-end;
 
   input {
+    @include t.use-typography("body-medium");
     background-color: var(--color-background-tertiary);
     border-color: transparent;
-    border-radius: deprecated.$br-8;
-    border: deprecated.$s-1 solid transparent;
+    border-radius: $br-8;
+    border: $b-1 solid transparent;
     color: var(--color-foreground-primary);
-    font-size: deprecated.$fs-14;
-    height: deprecated.$s-32;
+    height: $sz-32;
     margin: 0;
-    padding: 0 deprecated.$s-8;
-    width: deprecated.$s-152;
+    padding: 0 var(--sp-s);
+    width: px2rem(152);
 
     &:focus {
-      outline: deprecated.$s-1 solid var(--color-accent-primary);
+      outline: $b-1 solid var(--color-accent-primary);
     }
     &::placeholder {
       color: var(--color-foreground-secondary);
@@ -86,67 +92,72 @@
 }
 
 .font-item {
+  @include t.use-typography("body-medium");
   align-items: center;
   background-color: var(--color-background-tertiary);
-  border-radius: deprecated.$br-4;
+  border-radius: $br-4;
   color: var(--color-foreground-secondary);
   display: flex;
-  font-size: deprecated.$fs-14;
   justify-content: space-between;
-  margin-top: deprecated.$s-4;
-  max-width: deprecated.$s-1000;
-  padding: deprecated.$s-12 deprecated.$s-24;
+  margin-top: var(--sp-xs);
+  max-width: px2rem(1000);
+  padding: var(--sp-m) var(--sp-xxl);
   width: 100%;
 
   input {
-    border: deprecated.$s-1 solid transparent;
+    @include t.use-typography("body-medium");
+    @include textEllipsis;
+    border: $b-1 solid transparent;
     margin: 0;
-    padding: deprecated.$s-8;
+    padding: var(--sp-s);
 
     background-color: var(--color-background-tertiary);
-    border-radius: deprecated.$br-8;
+    border-radius: $br-8;
     color: var(--color-foreground-primary);
-    font-size: deprecated.$fs-14;
 
     &:focus {
-      outline: deprecated.$s-1 solid var(--color-accent-primary);
+      outline: $b-1 solid var(--color-accent-primary);
+      overflow: visible;
+      text-overflow: unset;
     }
   }
 
   > .family {
-    min-width: deprecated.$s-200;
-    width: deprecated.$s-200;
+    @include twoLineTextEllipsis;
+    min-width: $sz-200;
+    width: $sz-200;
   }
 
   > .filenames {
-    min-width: deprecated.$s-200;
+    @include textEllipsis;
+    min-width: $sz-200;
   }
 
   > .variants {
-    font-size: deprecated.$fs-14;
+    @include t.use-typography("body-medium");
     display: flex;
     flex-wrap: wrap;
     flex-grow: 1;
-    padding-left: deprecated.$s-16;
-    gap: deprecated.$s-6;
+    padding-left: var(--sp-l);
+    gap: $sz-6;
 
     .variant {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: deprecated.$s-8 deprecated.$s-12;
+      padding: var(--sp-s) var(--sp-m);
       cursor: pointer;
-      gap: deprecated.$s-4;
+      gap: var(--sp-xs);
       .icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        height: deprecated.$s-16;
-        width: deprecated.$s-16;
+        height: $sz-16;
+        width: $sz-16;
         svg {
           fill: none;
-          width: deprecated.$s-12;
-          height: deprecated.$s-12;
+          width: $sz-12;
+          height: $sz-12;
           transform: rotate(45deg);
         }
       }
@@ -166,37 +177,38 @@
     color: var(--color-foreground-primary);
     .variant {
       background-color: var(--color-background-quaternary);
-      border-radius: deprecated.$br-8;
+      border-radius: $br-8;
     }
   }
 
   .filenames {
-    display: flex;
-    flex-direction: column;
-    font-size: deprecated.$fs-12;
+    @include t.use-typography("body-small");
+    @include textEllipsis;
+    min-width: $sz-400;
+    padding-left: var(--sp-xxxl);
   }
 
   .options {
     display: flex;
     justify-content: flex-end;
-    min-width: deprecated.$s-180;
+    min-width: px2rem(180);
 
     .icon {
-      width: deprecated.$s-24;
+      width: $sz-24;
       cursor: pointer;
       display: flex;
-      margin-left: deprecated.$s-12;
+      margin-left: var(--sp-m);
       justify-content: center;
       align-items: center;
       svg {
-        width: deprecated.$s-16;
-        height: deprecated.$s-16;
+        width: $sz-16;
+        height: $sz-16;
         stroke: var(--color-foreground-secondary);
         fill: none;
       }
 
       &.failure {
-        margin-right: deprecated.$s-12;
+        margin-right: var(--sp-m);
         svg {
           stroke: var(--element-foreground-warning);
         }
@@ -214,46 +226,47 @@
 }
 
 .dashboard-fonts-upload {
-  max-width: deprecated.$s-1000;
+  max-width: px2rem(1000);
   width: 100%;
   display: flex;
   flex-direction: column;
 
   .upload-button {
-    width: deprecated.$s-100;
+    width: px2rem(100);
   }
 
   .btn-secondary {
-    margin-left: deprecated.$s-12;
+    margin-left: var(--sp-m);
   }
 }
 
 .dashboard-fonts-hero {
-  font-size: deprecated.$fs-14;
-  padding: deprecated.$s-32 0;
-  margin-top: deprecated.$s-80;
+  @include t.use-typography("body-medium");
+  padding: var(--sp-xxxl) 0;
+  margin-top: px2rem(80);
   display: flex;
   justify-content: space-between;
 
   .btn-primary {
-    height: deprecated.$s-40;
+    height: $sz-40;
     width: 100%;
   }
 
   .desc {
     display: flex;
     flex-direction: column;
-    gap: deprecated.$s-24;
+    gap: var(--sp-xxl);
     color: var(--color-background-secondary);
-    width: deprecated.$s-500;
+    width: $sz-500;
 
     h2 {
       color: var(--color-foreground-primary);
       font-weight: 400;
     }
+
     p {
+      @include t.use-typography("body-large");
       color: var(--color-foreground-secondary);
-      font-size: deprecated.$fs-16;
     }
   }
 
@@ -264,25 +277,25 @@
 
 .fonts-placeholder {
   align-items: center;
-  border-radius: deprecated.$br-8;
-  border: deprecated.$s-1 solid var(--color-background-quaternary);
+  border-radius: $br-8;
+  border: $b-1 solid var(--color-background-quaternary);
   display: flex;
   flex-direction: column;
-  height: deprecated.$s-160;
+  height: $sz-160;
   justify-content: center;
-  margin-top: deprecated.$s-16;
-  max-width: deprecated.$s-1000;
+  margin-top: var(--sp-l);
+  max-width: px2rem(1000);
   width: 100%;
 
   .icon svg {
     stroke: var(--color-foreground-secondary);
     fill: none;
-    width: deprecated.$s-32;
-    height: deprecated.$s-32;
+    width: $sz-32;
+    height: $sz-32;
   }
 
   .label {
+    @include t.use-typography("body-medium");
     color: var(--color-foreground-secondary);
-    font-size: deprecated.$fs-14;
   }
 }
diff --git a/frontend/src/app/main/ui/ds/_sizes.scss b/frontend/src/app/main/ui/ds/_sizes.scss
index 10490971ab..7a41fc7aa8 100644
--- a/frontend/src/app/main/ui/ds/_sizes.scss
+++ b/frontend/src/app/main/ui/ds/_sizes.scss
@@ -9,6 +9,8 @@
 // TODO: create actual tokens once we have them from design
 $sz-1: px2rem(1);
 $sz-6: px2rem(6);
+$sz-12: px2rem(12);
+$sz-14: px2rem(14);
 $sz-16: px2rem(16);
 $sz-24: px2rem(24);
 $sz-28: px2rem(28);