💄 Update release modals to new design

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -278,7 +278,7 @@
 // INPUTS
 .input-base {
   @include removeInputStyle;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   // @include focusInput;
   height: $s-28;
@@ -313,7 +313,7 @@
 }
 
 .input-element {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include focusInput;
   display: flex;
   align-items: center;
@@ -383,7 +383,7 @@
 }
 
 .input-element-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: flex-start;
   padding: 0;
@@ -488,7 +488,7 @@
   display: flex;
   align-items: center;
   label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     gap: $s-6;
@@ -519,7 +519,7 @@
   display: flex;
   flex-direction: column;
   label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -529,7 +529,7 @@
 
   input {
     @extend .input-base;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     border-radius: $br-8;
     height: $s-32;
     min-height: $s-32;
@@ -606,7 +606,7 @@
 }
 
 .modal-hint-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
   border-top: $s-1 solid var(--modal-hint-border-color);
   border-bottom: $s-1 solid var(--modal-hint-border-color);
@@ -666,7 +666,7 @@
 }
 // UI ELEMENTS
 .asset-element {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   height: $s-32;
@@ -687,7 +687,7 @@
 }
 
 .shortcut-key-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexCenter;
   height: $s-20;
   padding: $s-2 $s-6;
@@ -697,7 +697,7 @@
 
 .user-icon {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-24;
   width: $s-24;
   border-radius: $br-circle;
@@ -709,7 +709,7 @@
 }
 
 .mixed-bar {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -785,7 +785,7 @@
   gap: $s-4;
   height: $s-32;
   :global(.attr-label) {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include twoLineTextEllipsis;
     width: $s-92;
     margin: auto 0;
@@ -797,12 +797,12 @@
     grid-area: content;
     display: flex;
     color: var(--entry-foreground-color-hover);
-    @include bodyMedTipography;
+    @include bodySmallTypography;
   }
 }
 
 .copy-button-children {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--color-foreground-primary);
   text-align: left;
   margin: 0;
@@ -816,7 +816,7 @@
 }
 
 .comment-bubbles {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexCenter;
   height: $s-32;
   width: $s-32;
@@ -851,7 +851,7 @@
 }
 
 .menu-item-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -866,7 +866,7 @@
 }
 
 .dropdown-element-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   gap: $s-8;
@@ -913,7 +913,7 @@
 }
 
 .select-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: relative;
   display: flex;
   align-items: center;

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

@@ -309,6 +309,8 @@
   --modal-link-foreground-color: var(--color-accent-primary);
   --modal-border-color: var(--color-background-quaternary);
   --modal-separator-backogrund-color: var(--color-background-quaternary);
+  --modal-navigator-foreground-color-rest: var(--color-background-quaternary);
+  --modal-navigator-foreground-color-active: var(--color-accent-primary);
 
   // ALERTS NOTIFICATION TOAST & STATUS WIDGET
   --alert-background-color-success: var(--color-success-background);
@@ -372,6 +374,9 @@
   --flow-tag-background-color-hover: var(--color-background-quaternary);
   --flow-tag-foreground-color-hover: var(--color-accent-primary);
 
+  --communication-tag-background-color: var(--color-foreground-primary);
+  --communication-tag-foreground-color: var(--color-background-tertiary);
+
   // VIEWER
   --viewer-background-color: var(--color-background-secondary);
   --viewer-paginator-background-color: var(--color-background-tertiary);

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

@@ -63,26 +63,49 @@
   line-height: 1.2;
 }
 
+@mixin headlineLargeTypography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-18;
+  line-height: 1.2;
+  text-transform: uppercase;
+  font-weight: $fw400;
+}
+
 @mixin headlineMediumTypography {
   font-family: "worksans", sans-serif;
   font-size: $fs-16;
   line-height: 1.4;
   text-transform: uppercase;
-  font-weight: normal;
+  font-weight: $fw400;
+}
+
+@mixin headlineSmallTypography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-12;
+  line-height: 1.2;
+  text-transform: uppercase;
+  font-weight: $fw500;
 }
 
 @mixin bodyLargeTypography {
   font-family: "worksans", sans-serif;
   font-size: $fs-16;
   line-height: 1.5;
-  font-weight: normal;
+  font-weight: $fw400;
 }
 
-@mixin bodyMedTipography {
+@mixin bodyMediumTypography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-14;
+  line-height: 1.4;
+  font-weight: $fw400;
+}
+
+@mixin bodySmallTypography {
   font-family: "worksans", sans-serif;
   font-size: $fs-12;
   font-weight: $fw400;
-  line-height: 1.2;
+  line-height: 1.4;
 }
 
 @mixin codeTypography {
@@ -110,7 +133,7 @@
 }
 
 @mixin inspectValue {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: inline-block;
   width: fit-content;
   padding: 0;

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

@@ -155,6 +155,7 @@ $s-712: #{0.25 * 178}rem;
 $s-736: #{0.25 * 184}rem;
 $s-744: #{0.25 * 186}rem;
 $s-800: #{0.25 * 200}rem;
+$s-888: #{0.25 * 222}rem;
 $s-908: #{0.25 * 227}rem;
 $s-960: #{0.25 * 240}rem;
 $s-968: #{0.25 * 242}rem;

frontend/src/app/main/ui/comments.scss

@@ -19,7 +19,7 @@
 }
 
 .section-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-32;
   display: flex;
   align-items: center;
@@ -55,7 +55,7 @@
 
 // Comment-thread
 .comment {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   flex-direction: column;
   gap: $s-12;
@@ -98,7 +98,7 @@
 }
 
 .content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--color-foreground-primary);
 }
 
@@ -151,7 +151,7 @@
 .comment-container {
   position: relative;
   .comment {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     .author {
       display: flex;
       gap: $s-8;
@@ -195,7 +195,7 @@
     .content {
       position: relative;
       .text {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
       }
     }
   }

frontend/src/app/main/ui/components/color_bullet_new.scss

@@ -71,7 +71,7 @@
 
 .color-text {
   @include twoLineTextEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   width: $s-80;
   text-align: center;
   margin-top: $s-2;

frontend/src/app/main/ui/components/context_menu_a11y.scss

@@ -46,7 +46,7 @@
     .context-menu-item {
       display: flex;
       .context-menu-action {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         display: flex;
         align-items: center;
         justify-content: flex-start;

frontend/src/app/main/ui/components/editable_label.scss

@@ -8,7 +8,7 @@
 
 .editable-label-input {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include removeInputStyle;
   flex-grow: 1;
   height: $s-28;

frontend/src/app/main/ui/components/forms.scss

@@ -41,7 +41,7 @@
 .input-with-label {
   @include flexColumn;
   gap: $s-8;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   justify-content: flex-start;
   align-items: flex-start;
   height: 100%;
@@ -143,7 +143,7 @@
 }
 
 .hint {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   width: 99%;
 }
@@ -151,7 +151,7 @@
 .checkbox {
   @extend .input-checkbox;
   .checkbox-label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     flex-direction: row-reverse;
@@ -186,7 +186,7 @@
     background-color: var(--input-background-color);
     .main-content {
       @include flexColumn;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       position: relative;
       justify-content: center;
       flex-grow: 1;
@@ -231,7 +231,7 @@
 
   select {
     @extend .menu-dropdown;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     box-sizing: border-box;
     position: absolute;
     top: 0;
@@ -247,7 +247,7 @@
     background-color: transparent;
     cursor: pointer;
     option {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--title-foreground-color-hover);
       background-color: var(--menu-background-color);
       appearance: none;
@@ -276,7 +276,7 @@
   overflow-y: hidden;
   .inside-input {
     @include removeInputStyle;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     width: 100%;
     max-width: calc(100% - $s-1);
@@ -315,7 +315,7 @@
         border: $s-1 solid var(--pill-background-color);
         box-sizing: border-box;
         .text {
-          @include bodyMedTipography;
+          @include bodySmallTypography;
           padding-right: $s-8;
           color: var(--pill-foreground-color);
         }
@@ -352,7 +352,7 @@
 }
 
 .radio-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexRow;
   align-items: flex-start;
   gap: $s-8;

frontend/src/app/main/ui/components/select.scss

@@ -12,7 +12,7 @@
   --icon-color: var(--icon-foreground);
   --text-color: var(--menu-foreground-color);
   @extend .new-scrollbar;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;

frontend/src/app/main/ui/dashboard/change_owner.scss

@@ -28,7 +28,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 

frontend/src/app/main/ui/dashboard/import.scss

@@ -28,7 +28,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: grid;
   grid-template-columns: 1fr;
   gap: $s-16;
@@ -52,7 +52,7 @@
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   line-height: 1.5;
 }
@@ -78,7 +78,7 @@
       flex-grow: 1;
     }
     .file-name-label {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       display: flex;
       align-items: center;
       gap: $s-12;

frontend/src/app/main/ui/dashboard/team.scss

@@ -612,7 +612,7 @@
       }
     }
     .message {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--alert-foreground-color-error);
     }
   }
@@ -636,7 +636,7 @@
       }
     }
     .message {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--alert-foreground-color-warning);
     }
   }
@@ -694,7 +694,7 @@
 .modal-content {
   @include flexColumn;
   gap: $s-24;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 
@@ -703,7 +703,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 

frontend/src/app/main/ui/dashboard/team_form.scss

@@ -35,7 +35,7 @@
   @extend .input-element-label;
   label {
     @include flexColumn;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     align-items: flex-start;
     width: 100%;
     border: none;
@@ -43,7 +43,7 @@
     height: 100%;
 
     input {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       margin-top: $s-8;
     }
   }

frontend/src/app/main/ui/debug/components_preview.scss

@@ -53,7 +53,7 @@
       flex-direction: column;
       border-radius: $s-8;
       h3 {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         font-size: $fs-24;
         width: 100%;
       }

frontend/src/app/main/ui/delete_shared.scss

@@ -31,7 +31,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 

frontend/src/app/main/ui/export.scss

@@ -55,7 +55,7 @@
 }
 
 .export-progress-title {
-  @include bodyMedTipography;
+  @include bodyMediumTypography;
   display: grid;
   grid-template-columns: auto 1fr;
   gap: $s-8;
@@ -67,7 +67,7 @@
 }
 
 .progress {
-  @include bodyMedTipography;
+  @include bodyMediumTypography;
   padding-left: $s-8;
   margin: 0;
   align-self: center;
@@ -76,7 +76,7 @@
 
 .retry-btn {
   @include buttonStyle;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: inline;
   text-align: left;
   color: var(--modal-link-foreground-color);
@@ -128,10 +128,10 @@
 
 .modal-content,
 .no-selection {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
   .modal-hint {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     color: var(--modal-text-foreground-color);
   }
   .modal-link {

frontend/src/app/main/ui/notifications/context_notification.scss

@@ -66,7 +66,7 @@
 }
 
 .context-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
   color: var(--context-notification-fg-color);
   margin: auto 0;
@@ -78,7 +78,7 @@
 
 .link,
 .contain-html .context-text a {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
   display: inline;
   text-align: left;

frontend/src/app/main/ui/notifications/inline_notification.scss

@@ -32,7 +32,7 @@
 }
 
 .inline-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
 }
 
@@ -41,7 +41,7 @@
 }
 
 .link {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin: 0;
   height: 100%;
   color: var(--modal-link-foreground-color);

frontend/src/app/main/ui/notifications/toast_notification.scss

@@ -69,7 +69,7 @@
 }
 
 .link {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-link-foreground-color);
   margin: 0;
 }
@@ -81,7 +81,7 @@
 }
 
 .text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
 }
 

frontend/src/app/main/ui/onboarding.scss

@@ -45,7 +45,7 @@
 }
 
 .release {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: absolute;
   top: calc(-1 * $s-28);
   right: 0;

frontend/src/app/main/ui/onboarding/team_choice.scss

@@ -26,7 +26,7 @@
 }
 
 .paginator {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: absolute;
   top: $s-40;
   right: $s-100;
@@ -140,7 +140,7 @@
   @extend .input-element-label;
   label {
     @include flexColumn;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     align-items: flex-start;
     width: 100%;
     border: none;
@@ -148,7 +148,7 @@
     height: 100%;
 
     input {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       margin-top: $s-8;
     }
   }
@@ -185,7 +185,7 @@
 }
 
 .modal-hint {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   text-align: right;
 }

frontend/src/app/main/ui/releases.cljs

@@ -26,6 +26,7 @@
    [app.main.ui.releases.v1-7]
    [app.main.ui.releases.v1-8]
    [app.main.ui.releases.v1-9]
+   [app.main.ui.releases.v2-0]
    [app.util.object :as obj]
    [app.util.timers :as tm]
    [rumext.v2 :as mf]))
@@ -90,4 +91,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "1.19")))
+  (rc/render-release-notes (assoc params :version "2.0")))

frontend/src/app/main/ui/releases/common.cljs

@@ -5,15 +5,16 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.releases.common
+  (:require-macros [app.main.style :as stl])
   (:require
-   [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
 (defmulti render-release-notes :version)
 
 (mf/defc navigation-bullets
   [{:keys [slide navigate total]}]
-  [:ul.step-dots
+  [:ul {:class (stl/css :step-dots)}
    (for [i (range total)]
-     [:li {:class (dom/classnames :current (= slide i))
+     [:li {:class (stl/css-case :dot true
+                                :current (= slide i))
            :on-click #(navigate i)}])])

frontend/src/app/main/ui/releases/common.scss

@@ -0,0 +1,32 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.step-dots {
+  display: grid;
+  grid-template-columns: none;
+  grid-auto-flow: column;
+  gap: $s-8;
+  height: fit-content;
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+  align-self: center;
+  justify-self: flex-start;
+}
+
+.dot {
+  height: $s-12;
+  width: $s-12;
+  border-radius: $br-circle;
+  background-color: var(--modal-navigator-foreground-color-rest);
+  cursor: pointer;
+}
+
+.current {
+  background-color: var(--modal-navigator-foreground-color-active);
+}

frontend/src/app/main/ui/releases/v2_0.cljs

@@ -0,0 +1,166 @@
+;; 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.releases.v2-0
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.releases.common :as c]
+   [rumext.v2 :as mf]))
+
+;; TODO: Review all copies and alt text
+(defmethod c/render-release-notes "2.0"
+  [{:keys [slide klass next finish navigate version]}]
+  (mf/html
+   (case slide
+     :start
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        ;; TODO: Review alt
+        [:img {:src "images/features/2.0-intro-image.png"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "What's new?"]
+
+          [:div {:class (stl/css :verstion-tag)}
+           (dm/str "Version " version)]]
+
+         [:div {:class (stl/css :features-block)}
+          [:div {:class (stl/css :feature)}
+           [:h2 {:class (stl/css :feature-title)}
+            "CSS Grid Layout"]
+           [:p  {:class (stl/css :feature-content)}
+            "Crea una estructura flexible para componer
+             los elementos de tu diseño y obten el código html/css."]]
+
+          [:div {:class (stl/css :feature)}
+           [:h2 {:class (stl/css :feature-title)}
+            "New Components"]
+           [:p  {:class (stl/css :feature-content)}
+            "Ahora tus main components estarán en un espacio
+             físico, para que los puedas ver y gestionar fácilmente."]]
+
+          [:div {:class (stl/css :feature)}
+           [:h2 {:class (stl/css :feature-title)}
+            "New User Interface"]
+           [:p  {:class (stl/css :feature-content)}
+            "Hemos hecho Penpot aún más bonito, y además
+             ahora puedes elegir entre tema oscuro y claro."]]]
+
+         [:div {:class (stl/css :navigation)}
+          [:button {:class (stl/css :next-btn)
+                    :on-click next} "Continue"]]]]]]
+
+     0
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        ;; TODO: Review alt
+        [:img {:src "images/features/2.0-css-grid.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "css grid layout"]]
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "¿Querías más flexibilidad para componer tus diseños?
+            Selecciona GridLayout para crear una estructura con los
+            márgenes y espacios que necesites. Los elementos de tu diseño
+            se adaptarán como un guante. Además tendrás en el momento el
+            código html y css con estándares web."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Elige entre FlexLayout o GridLayout en tu panel lateral derecho."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "Continue"]]]]]]
+
+     1
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.0-components.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "New components"]]
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Os hemos escuchado y ahora los main components están
+            disponibles en el archivo para gestionarlos más cómodamente."]
+          [:p {:class (stl/css :feature-content)}
+           "No te preocupes por tus archivos con main componentes v1,
+            al abrirlos con la nueva versión los encontrarás agrupados
+            en una página nueva, sanos y salvos."]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "Continue"]]]]]]
+
+     2
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.0-new-ui.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "REDISEÑO Y MEJORAS DE RENDIMIENTO"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Le hemos dado una vuelta al interface y añadido
+            pequeñas mejoras de usabilidad.
+            Además, ahora puedes elegir entre tema oscuro y tema claro,
+            dignos de Dark Vader y Luke Skywalker."]
+          [:p {:class (stl/css :feature-content)}
+           "Aunque siempre estamos puliendo el rendimiento
+            y la estabilidad, en esta versión hemos
+            conseguido grandes mejoras en ese sentido."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Que lo disfrutes!"]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click finish
+                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
+

frontend/src/app/main/ui/releases/v2_0.scss

@@ -0,0 +1,90 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-container {
+  display: grid;
+  grid-template-columns: $s-324 1fr;
+  height: $s-500;
+  width: $s-888;
+  border-radius: $br-8;
+  background-color: var(--modal-background-color);
+  border: $s-2 solid var(--modal-border-color);
+}
+
+.start-image {
+  width: $s-324;
+  border-radius: $br-8 0 0 $br-8;
+}
+
+.modal-content {
+  padding: $s-40;
+  display: grid;
+  grid-template-rows: auto 1fr $s-32;
+  gap: $s-24;
+}
+
+.modal-header {
+  display: grid;
+  gap: $s-8;
+}
+
+.verstion-tag {
+  @include flexCenter;
+  @include headlineSmallTypography;
+  height: $s-32;
+  width: $s-96;
+  background-color: var(--communication-tag-background-color);
+  color: var(--communication-tag-foreground-color);
+  border-radius: $br-8;
+}
+
+.modal-title {
+  @include headlineLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.features-block {
+  display: flex;
+  flex-direction: column;
+  gap: $s-16;
+  width: $s-440;
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  gap: $s-8;
+}
+
+.feature-title {
+  @include bodyLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.feature-content {
+  @include bodyMediumTypography;
+  margin: 0;
+  color: var(--modal-text-foreground-color);
+}
+
+.navigation {
+  width: 100%;
+  display: grid;
+  grid-template-areas: "bullets button";
+}
+
+.next-btn {
+  @extend .button-primary;
+  width: $s-100;
+  justify-self: flex-end;
+  grid-area: button;
+}

frontend/src/app/main/ui/settings/access_tokens.scss

@@ -191,7 +191,7 @@
 .modal-content {
   @include flexColumn;
   gap: $s-24;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 
@@ -200,7 +200,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 
@@ -223,7 +223,7 @@
 
 .token-value {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
 }
 

frontend/src/app/main/ui/settings/change_email.scss

@@ -30,7 +30,7 @@
 
 .modal-content {
   @include flexColumn;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   gap: $s-24;
   margin-bottom: $s-24;
 }
@@ -40,7 +40,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 

frontend/src/app/main/ui/settings/delete_account.scss

@@ -30,7 +30,7 @@
 
 .modal-content {
   @include flexColumn;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   gap: $s-24;
   margin-bottom: $s-24;
 }
@@ -40,7 +40,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 

frontend/src/app/main/ui/viewer.scss

@@ -24,7 +24,7 @@
 }
 
 .empty-state {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--empty-message-foreground-color);
   display: grid;
   place-items: center;
@@ -134,7 +134,7 @@
 
 .counter {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   border-radius: $br-8;
   width: $s-64;
   height: $s-32;

frontend/src/app/main/ui/viewer/comments.scss

@@ -8,7 +8,7 @@
 
 // COMMENT DROPDOWN ON HEADER
 .view-options {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   position: relative;
@@ -29,7 +29,7 @@
 }
 
 .dropdown-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }

frontend/src/app/main/ui/viewer/header.scss

@@ -62,7 +62,7 @@
 }
 
 .breadcrumb {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexRow;
   color: var(--title-foreground-color);
   cursor: pointer;
@@ -114,7 +114,7 @@
 }
 
 .current-frame {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexRow;
   flex-grow: 1;
   color: var(--title-foreground-color-hover);
@@ -198,7 +198,7 @@
 
 .go-log-btn {
   @extend .button-tertiary;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-32;
   padding: 0 $s-8;
   border-radius: $br-8;
@@ -213,7 +213,7 @@
   min-width: $s-64;
   border-radius: $br-8;
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     color: var(--button-tertiary-foreground-color-rest);
   }
 

frontend/src/app/main/ui/viewer/inspect/annotation.scss

@@ -15,7 +15,7 @@
 }
 
 .annotation-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--entry-foreground-color);
 }
 

frontend/src/app/main/ui/viewer/inspect/attributes/common.scss

@@ -78,7 +78,7 @@
   grid-template-rows: 1fr 1fr;
 }
 .color-name-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexColumn;
   padding: $s-8 $s-4 $s-8 $s-8;
   height: $s-32;
@@ -89,21 +89,21 @@
     max-width: $s-124;
   }
   .color-name-library {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     text-align: left;
     height: $s-16;
     color: var(--menu-foreground-color-rest);
   }
   .color-value-wrapper {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     height: $s-16;
     color: var(--menu-foreground-color);
   }
 }
 
 .opacity-info {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--menu-foreground-color);
   padding: $s-8 0;
 }

frontend/src/app/main/ui/viewer/inspect/attributes/text.scss

@@ -36,7 +36,7 @@
   border: $s-1 solid var(--menu-border-color-disabled);
   margin-top: $s-4;
   .content {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     width: 100%;
     padding: $s-4 0;
     color: var(--color-foreground-secondary);

frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss

@@ -50,7 +50,7 @@
 }
 
 .layer-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include text-ellipsis;
   height: $s-32;
   padding: $s-8 0;
@@ -79,7 +79,7 @@
 }
 
 .placeholder-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   text-align: center;
   width: $s-200;
   color: var(--empty-message-foreground-color);

frontend/src/app/main/ui/viewer/interactions.scss

@@ -7,7 +7,7 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .view-options {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   position: relative;
@@ -19,7 +19,7 @@
   cursor: pointer;
 }
 .dropdown-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }

frontend/src/app/main/ui/viewer/login.scss

@@ -29,7 +29,7 @@
 
 .modal-content {
   @include flexColumn;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   gap: $s-24;
   max-height: $s-400;
   width: $s-368;

frontend/src/app/main/ui/viewer/share_link.scss

@@ -34,7 +34,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexColumn;
   gap: $s-24;
 }
@@ -86,7 +86,7 @@
 }
 
 .description {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   margin-bottom: $s-24;
 }
@@ -181,7 +181,7 @@
 }
 .count-pages,
 .current-tag {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--input-foreground-color);
 }
 

frontend/src/app/main/ui/viewer/thumbnails.scss

@@ -33,7 +33,7 @@
 }
 
 .counter {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--viewer-thumbnails-control-foreground-color);
 }
 
@@ -142,7 +142,7 @@
 }
 
 .thumbnail-info {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   text-align: center;
   color: var(--viewer-thumbnails-control-foreground-color);

frontend/src/app/main/ui/workspace/color_palette.scss

@@ -97,6 +97,6 @@
 }
 
 .color-palette-empty {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--palette-text-color);
 }

frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss

@@ -33,7 +33,7 @@
     .option-wrapper {
       width: 100%;
       .library-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         color: var(--context-menu-foreground-color);
         display: grid;
         grid-template-columns: 1fr $s-24;

frontend/src/app/main/ui/workspace/comments.scss

@@ -110,7 +110,7 @@
     }
   }
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
   }
   &:hover {
     .icon svg {
@@ -164,7 +164,7 @@
 }
 
 .placeholder-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   text-align: center;
   width: $s-184;
   color: var(--empty-message-foreground-color);

frontend/src/app/main/ui/workspace/context_menu.scss

@@ -37,7 +37,7 @@
   cursor: pointer;
 
   .title {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     color: var(--menu-foreground-color);
   }
   .shortcut {
@@ -45,7 +45,7 @@
     gap: $s-2;
     color: var(--menu-shortcut-foreground-color);
     .shortcut-key {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include flexCenter;
       height: $s-20;
       padding: $s-2 $s-6;

frontend/src/app/main/ui/workspace/right_header.scss

@@ -36,7 +36,7 @@
   width: $s-48;
   border-radius: $br-8;
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     height: 100%;
     padding: $s-8 0;
     color: var(--button-tertiary-foreground-color-rest);

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

@@ -113,7 +113,7 @@
 }
 
 .section-item {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   justify-content: space-between;

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

@@ -45,7 +45,7 @@
     border: $s-1 solid var(--input-border-color-focus);
     input.element-name {
       @include textEllipsis;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include removeInputStyle;
       flex-grow: 1;
       height: $s-28;
@@ -67,7 +67,7 @@
 }
 
 .name-block {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: grid;
   grid-template-columns: auto 1fr;
   margin: 0;

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

@@ -29,7 +29,7 @@
   cursor: pointer;
 
   .cell-name {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     display: none;
     position: absolute;
@@ -44,7 +44,7 @@
     color: var(--assets-item-name-foreground-color);
     input {
       @include textEllipsis;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include removeInputStyle;
       height: auto;
       padding: 0;
@@ -132,13 +132,13 @@
 }
 
 .item-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   order: 2;
   color: var(--assets-item-name-foreground-color);
   input {
     @include textEllipsis;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include removeInputStyle;
     height: $s-32;
     padding: $s-4;

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

@@ -14,7 +14,7 @@
 }
 
 .file-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -71,6 +71,6 @@
 }
 
 .no-found-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--not-found-foreground-color);
 }

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

@@ -36,7 +36,7 @@
         height: 10vh;
       }
       .cell-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         @include textEllipsis;
         display: none;
         position: absolute;
@@ -110,7 +110,7 @@
       }
 
       .item-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         @include textEllipsis;
         padding-left: $s-8;
         color: var(--assets-item-name-foreground-color);

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

@@ -45,7 +45,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 .input-wrapper {

frontend/src/app/main/ui/workspace/sidebar/history.scss

@@ -59,7 +59,7 @@
 }
 
 .history-entry-empty-msg {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--empty-message-foreground-color);
 }
 

frontend/src/app/main/ui/workspace/sidebar/layer_name.scss

@@ -8,7 +8,7 @@
 
 .element-name {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--context-hover-color, var(--layer-row-foreground-color));
   &.selected {
@@ -27,7 +27,7 @@
 }
 .element-name-input {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include removeInputStyle;
   flex-grow: 1;
   height: $s-28;

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -108,7 +108,7 @@
 }
 
 .focus-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   height: 100%;
@@ -124,7 +124,7 @@
 
 .focus-mode-tag {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-20;
   padding: $s-4 $s-6;
   border: $s-1 solid var(--tag-background-color);
@@ -160,7 +160,7 @@
 
 .layer-filter-name {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--pill-foreground-color);
 }
 
@@ -174,7 +174,7 @@
   left: $s-20;
   width: $s-192;
   .filter-menu-item {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     justify-content: space-between;

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

@@ -57,7 +57,7 @@
       }
     }
     .label {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       flex-grow: 1;
       display: flex;
       align-items: center;

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

@@ -96,7 +96,7 @@
 }
 
 .component-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   direction: rtl;
   text-align: left;
@@ -104,7 +104,7 @@
 }
 
 .component-parent-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   direction: rtl;
   text-align: left;
@@ -143,7 +143,7 @@
 }
 
 .copy-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: 100%;
   display: flex;
   align-items: center;
@@ -244,7 +244,7 @@
 }
 
 .path-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   direction: rtl;
   height: $s-32;
@@ -252,7 +252,7 @@
 }
 
 .path-name-last {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   height: $s-32;
   padding: $s-8 0 $s-8 $s-2;
@@ -260,7 +260,7 @@
 }
 
 .component-list-empty {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin: 0 $s-4 0 $s-8;
   color: $df-secondary;
 }
@@ -346,7 +346,7 @@
     object-fit: contain;
   }
   .component-name {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     display: none;
     position: absolute;
@@ -431,7 +431,7 @@
 }
 
 .library-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   color: var(--title-foreground-color);
   padding: $s-8 0 $s-8 $s-2;
@@ -452,7 +452,7 @@
 }
 
 .component-group {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: grid;
   grid-template-columns: 1fr $s-12;
   height: $s-32;
@@ -495,7 +495,7 @@
 // Component annotation
 
 .component-annotation {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--entry-foreground-color);
   border-radius: $br-8;
 
@@ -613,7 +613,7 @@
   }
 
   .counter {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     text-align: right;
     color: var(--entry-foreground-color);
     margin: 0 $s-8 $s-8 0;

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

@@ -134,7 +134,7 @@
   }
 
   label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     gap: $s-2;

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

@@ -55,12 +55,12 @@
 }
 
 .after {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-top: $s-1;
 }
 
 .interactions-help {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   text-align: center;
   color: var(--title-foreground-color);
 }
@@ -120,7 +120,7 @@
   }
   .interaction-name {
     @include twoLineTextEllipsis;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     padding-left: $s-4;
     width: $s-92;
     margin: auto 0;
@@ -287,7 +287,7 @@
 }
 
 .flow-name-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include focusInput;
   display: flex;
   align-items: center;
@@ -324,7 +324,7 @@
   }
 
   .flow-input-wrapper {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     height: $s-28;

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

@@ -44,7 +44,7 @@
 }
 
 .select-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   justify-content: flex-start;
   align-items: center;

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

@@ -26,7 +26,7 @@
 }
 
 .attr-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include twoLineTextEllipsis;
   width: $s-88;
   margin: auto $s-4;
@@ -60,7 +60,7 @@
 }
 
 .attr-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   font-size: $fs-10;
   text-transform: uppercase;
   margin-inline-start: $s-4;

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

@@ -33,7 +33,7 @@
 }
 
 .multiple-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }

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

@@ -72,7 +72,7 @@
 
 .typography-name,
 .typography-font {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   display: flex;
   align-items: center;
@@ -90,7 +90,7 @@
 }
 
 .font-name-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   height: $s-32;
@@ -169,7 +169,7 @@
       color: var(--assets-item-name-foreground-color-hover);
     }
     .typography-name {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       display: flex;
       align-items: center;
@@ -178,7 +178,7 @@
       color: var(--assets-item-name-foreground-color-hover);
     }
     .typography-font {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       margin-left: $s-6;
       display: flex;
@@ -207,14 +207,14 @@
     --calcualted-width: calc(var(--width) - $s-48);
     padding-left: $s-2;
     .info-label {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       width: calc(var(--calcualted-width) / 2);
       padding-top: $s-8;
       color: var(--assets-item-name-foreground-color);
     }
     .info-content {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       padding-top: $s-8;
       width: calc(var(--calcualted-width) / 2);
@@ -254,7 +254,7 @@
     position: relative;
   }
   .font-option {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @extend .asset-element;
     padding: $s-8 0 $s-8 $s-8;
     cursor: pointer;
@@ -277,7 +277,7 @@
     gap: $s-4;
     .font-size-options {
       @extend .asset-element;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       flex-grow: 1;
       width: $s-60;
       margin: 0;
@@ -331,7 +331,7 @@
 
 .font-size-select {
   @include removeInputStyle;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-32;
   height: 100%;
   width: 100%;
@@ -410,7 +410,7 @@
   }
 
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     flex-grow: 1;
   }
 }

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss

@@ -67,7 +67,7 @@
     }
   }
   .color-name {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     padding-inline: $s-6;
     border-radius: $br-8;
@@ -86,7 +86,7 @@
     stroke: var(--detach-icon-foreground-color);
   }
   .color-input-wrapper {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     height: $s-28;

frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss

@@ -112,7 +112,7 @@
 }
 
 .not-found {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--empty-message-foreground-color);
   margin: $s-12;
 }
@@ -181,7 +181,7 @@
       background-color: var(--pill-background-color);
 
       .command-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         margin-left: $s-2;
         color: var(--pill-foreground-color);
       }
@@ -191,7 +191,7 @@
         color: var(--pill-foreground-color);
 
         .key {
-          @include bodyMedTipography;
+          @include bodySmallTypography;
           @include flexCenter;
           text-transform: capitalize;
           height: $s-20;

frontend/src/app/main/ui/workspace/sidebar/sitemap.scss

@@ -35,7 +35,7 @@
 
 .view-only-mode {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-20;
   padding: $s-4 $s-6;
   margin-right: $s-12;
@@ -75,7 +75,7 @@
 }
 
 .page-element {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
@@ -139,7 +139,7 @@
     }
     input.element-name {
       @include textEllipsis;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include removeInputStyle;
       flex-grow: 1;
       height: $s-28;

frontend/src/app/main/ui/workspace/text_palette.scss

@@ -80,7 +80,7 @@
 }
 
 .typography-item {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -135,6 +135,6 @@
 }
 
 .text-palette-empty {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--palette-text-color);
 }

frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss

@@ -32,7 +32,7 @@
       margin-bottom: 0;
     }
     .library-name {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--context-menu-foreground-color);
       display: grid;
       grid-template-columns: 1fr $s-24;

frontend/src/app/main/ui/workspace/viewport/widgets.scss

@@ -26,7 +26,7 @@
   cursor: pointer;
   display: flex;
   .content {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     height: $s-24;