diff --git a/docs/technical-guide/developer/ui.md b/docs/technical-guide/developer/ui.md
index 2a6fb81102..a9bdfaa6f3 100644
--- a/docs/technical-guide/developer/ui.md
+++ b/docs/technical-guide/developer/ui.md
@@ -199,6 +199,7 @@ Remember that nesting selector increases specificity, and it's usually not neede
   fill: var(--icon-color);
 }
 ```
+
 Note: Thanks to CSS Modules, identical class names defined in different files are scoped locally and do not cause naming collisions.
 
 ### Use CSS logical properties
@@ -228,17 +229,21 @@ Note: Although `width` and `height` are physical properties, their use is allowe
 Avoid hardcoded values like `px`, `rem`, or raw SASS variables `($s-*)`. Use semantic, named variables provided by the Design System to ensure consistency and scalability.
 
 #### Spacing (margins, paddings, gaps...)
+
 Use variables from `frontend/src/app/main/ui/ds/spacing.scss`. These are predefined and approved by the design team — **do not add or modify values without design approval**.
 
 #### Fixed dimensions
+
 For fixed dimensions (e.g., modals' widths) defined by design and not layout-driven, use or define variables in `frontend/src/app/main/ui/ds/_sizes.scss`. To use them:
 
 ```scss
 @use "ds/_sizes.scss" as *;
 ```
+
 Note: Since these values haven't been semantically defined yet, we’re temporarily using SASS variables instead of named CSS custom properties.
 
 #### Border Widths
+
 Use border thickness variables from `frontend/src/app/main/ui/ds/_borders.scss`. To import:
 
 ```scss
@@ -288,16 +293,16 @@ Replace plain text tags with `text*` or `heading*` components from the Design Sy
 ```clojure
 ...
    [app.main.ui.ds.foundations.typography :as t]
-   [app.main.ui.ds.foundations.typography.heading :refer [heading*]] 
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
 ...
 
   [:> heading* {:level 2
                 :typography t/headline-medium
-                :class (stl/css :modal-title)} 
+                :class (stl/css :modal-title)}
     title]
-  [:> text* {:as "div" 
-             :typography t/body-medium  
+  [:> text* {:as "div"
+             :typography t/body-medium
              :class (stl/css :modal-content)}
     "Content"]
 ```
@@ -308,11 +313,12 @@ When applying typography in SCSS, use the proper mixin from the Design System.
 
 ```scss
 .class {
-  @include headlineLargeTypography;
+  @include headline-large-typography;
 }
 ```
 
 ✅ **DO: Use the DS mixin**
+
 ```scss
 @use "ds/typography.scss" as t;
 
@@ -320,10 +326,10 @@ When applying typography in SCSS, use the proper mixin from the Design System.
   @include t.use-typography("body-small");
 }
 ```
+
 You can find the full list of available typography tokens in [Storybook](https://design.penpot.app/storybook/?path=/docs/foundations-typography--docs).
 If the design you are implementing doesn't match any of them, ask a designer.
 
-
 ### Use custom properties within components
 
 Reduce the need for one-off SASS variables by leveraging [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) in your component styles. This keeps component theming flexible and composable.
@@ -664,7 +670,6 @@ We use three **levels of tokens**:
 
 We can leverage component tokens to easily implement variants as explained [here](/technical-guide/developer/ui/#use-custom-properties-within-components).
 
-
 ### Using icons and SVG assets
 
 Please refer to the Storybook [documentation for icons](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-icon--docs) and other [SVG assets](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-rawsvg--docs) (logos, illustrations, etc.).
diff --git a/frontend/package.json b/frontend/package.json
index 73218a3814..82047594c1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,7 +31,7 @@
     "fmt:scss": "prettier -c resources/styles -c src/**/*.scss -w",
     "lint:clj": "clj-kondo --parallel --lint ../common/src src/",
     "lint:js": "exit 0",
-    "lint:scss": "pnpx stylelint 'src/**/*.scss'",
+    "lint:scss": "pnpx stylelint '{src,resources}/**/*.scss'",
     "build:test": "clojure -M:dev:shadow-cljs compile test",
     "test": "pnpm run build:wasm && pnpm run build:test && node target/tests/test.js",
     "test:storybook": "vitest run --project=storybook",
diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index eea8d93655..37df67b3e8 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -30,6 +30,7 @@ body {
 
   &.cursor-drag-scrub {
     cursor: ew-resize !important;
+
     * {
       cursor: ew-resize !important;
     }
@@ -120,16 +121,15 @@ hr {
 
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
+  appearance: none;
   margin: 0;
 }
 
 input[type="number"] {
-  -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 [contenteditable] {
-  -webkit-user-select: text;
   user-select: text;
 }
 
@@ -139,15 +139,12 @@ select {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs14;
   margin-bottom: $size-4;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  appearance: none;
 }
 
 [draggable] {
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
   user-select: none;
+
   /* Required to make elements draggable in old WebKit */
   -khtml-user-drag: element;
   -webkit-user-drag: element;
diff --git a/frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss b/frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss
index ddfa3a09e7..4654c54c94 100644
--- a/frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss
+++ b/frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss
@@ -82,7 +82,7 @@
 .hljs-section {
   /* prettylights-syntax-markup-heading */
   color: #316dca;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .hljs-bullet {
@@ -99,7 +99,7 @@
 .hljs-strong {
   /* prettylights-syntax-markup-bold */
   color: #adbac7;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .hljs-addition {
diff --git a/frontend/resources/styles/common/dependencies/_hljs-light-theme.scss b/frontend/resources/styles/common/dependencies/_hljs-light-theme.scss
index ea2d601f76..78397f2cf4 100644
--- a/frontend/resources/styles/common/dependencies/_hljs-light-theme.scss
+++ b/frontend/resources/styles/common/dependencies/_hljs-light-theme.scss
@@ -11,7 +11,7 @@
 
 .hljs {
   color: #24292e;
-  background: #ffffff;
+  background: #fff;
 }
 
 .hljs-doctag,
@@ -83,7 +83,7 @@
 .hljs-section {
   /* prettylights-syntax-markup-heading */
   color: #005cc5;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .hljs-bullet {
@@ -100,7 +100,7 @@
 .hljs-strong {
   /* prettylights-syntax-markup-bold */
   color: #24292e;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .hljs-addition {
diff --git a/frontend/resources/styles/common/dependencies/animations.scss b/frontend/resources/styles/common/dependencies/animations.scss
index ea30c21e10..ac8b99d7d9 100644
--- a/frontend/resources/styles/common/dependencies/animations.scss
+++ b/frontend/resources/styles/common/dependencies/animations.scss
@@ -7,13 +7,11 @@
  */
 
 .animated {
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
 }
 
-@-webkit-keyframes fadeIn {
+@keyframes fade-in {
   0% {
     opacity: 0;
   }
@@ -23,79 +21,22 @@
   }
 }
 
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
+.fade-in {
+  animation-name: fade-in;
 }
 
-.fadeIn {
-  -webkit-animation-name: fadeIn;
-  animation-name: fadeIn;
-}
-
-@-webkit-keyframes fadeInDown {
+@keyframes fade-in-down {
   0% {
     opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
   }
 
   100% {
     opacity: 1;
-    -webkit-transform: none;
     transform: none;
   }
 }
 
-@keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInDown {
-  -webkit-animation-name: fadeInDown;
-  animation-name: fadeInDown;
-}
-
-@keyframes loaderColor {
-  0% {
-    fill: #513b56;
-  }
-
-  33% {
-    fill: #348aa7;
-  }
-
-  66% {
-    fill: #5dd39e;
-  }
-
-  100% {
-    fill: #513b56;
-  }
-}
-
-//pencil loader animation
-@keyframes linePencil {
-  0% {
-    transform: translateY(0);
-  }
-
-  100% {
-    transform: translateY(-150px);
-  }
+.fade-in-down {
+  animation-name: fade-in-down;
 }
diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss
index 146f7099fd..ed4e821f7e 100644
--- a/frontend/resources/styles/common/dependencies/fonts.scss
+++ b/frontend/resources/styles/common/dependencies/fonts.scss
@@ -10,7 +10,7 @@
   $style-name,
   $file,
   $unicode-range,
-  $weight: unquote("normal"),
+  $weight: string.unquote("normal"),
   $style: string.unquote("normal")
 ) {
   $filepath: "../fonts/" + $file;
@@ -22,6 +22,7 @@
       url($filepath + ".ttf") format("truetype");
     font-weight: string.unquote($weight);
     font-style: string.unquote($style);
+
     @if $unicode-range {
       unicode-range: $unicode-range;
     }
diff --git a/frontend/resources/styles/common/dependencies/highlight.scss b/frontend/resources/styles/common/dependencies/highlight.scss
index 9d53084cb7..a7bebe984c 100644
--- a/frontend/resources/styles/common/dependencies/highlight.scss
+++ b/frontend/resources/styles/common/dependencies/highlight.scss
@@ -7,9 +7,9 @@
 @use "sass:meta";
 
 :root {
-  @include meta.load-css("./_hljs-dark-theme.scss");
+  @include meta.load-css("./_hljs-dark-theme");
 }
 
 .light {
-  @include meta.load-css("./_hljs-light-theme.scss");
+  @include meta.load-css("./_hljs-light-theme");
 }
diff --git a/frontend/resources/styles/common/dependencies/reset.scss b/frontend/resources/styles/common/dependencies/reset.scss
index 39e198d8d7..d86c883697 100644
--- a/frontend/resources/styles/common/dependencies/reset.scss
+++ b/frontend/resources/styles/common/dependencies/reset.scss
@@ -11,12 +11,13 @@ License: none (public domain)
 div {
   vertical-align: top;
 }
+
 img {
   display: block;
 }
 
 // #Reset & Basics (Inspired by E. Meyers)
-//==================================================
+// ==================================================
 a,
 abbr,
 acronym,
@@ -100,7 +101,9 @@ var,
 video {
   border: 0;
   font: inherit;
+  /* stylelint-disable-next-line declaration-property-unit-allowed-list */
   font-size: 100%;
+
   // TODO: Changing line-height to 1 (as it should be) makes the visual tests
   //       fail with a max pixel diff ratio of 0.005.
   //       We should tackle this later.
@@ -124,6 +127,7 @@ nav,
 section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
@@ -138,10 +142,10 @@ q {
   quotes: none;
 }
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
   content: "";
 }
 
@@ -151,5 +155,5 @@ table {
 }
 
 select {
-  -webkit-appearance: none;
+  appearance: none;
 }
diff --git a/frontend/resources/styles/common/refactor/animations.scss b/frontend/resources/styles/common/refactor/animations.scss
index 44cdf2ee65..a35832ba1a 100644
--- a/frontend/resources/styles/common/refactor/animations.scss
+++ b/frontend/resources/styles/common/refactor/animations.scss
@@ -5,16 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 @mixin animation($delay, $duration, $animation) {
-  -webkit-animation-delay: $delay;
-  -webkit-animation-duration: $duration;
-  -webkit-animation-name: $animation;
-  -webkit-animation-fill-mode: both;
-
-  -moz-animation-delay: $delay;
-  -moz-animation-duration: $duration;
-  -moz-animation-name: $animation;
-  -moz-animation-fill-mode: both;
-
   animation-delay: $delay;
   animation-duration: $duration;
   animation-name: $animation;
diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 6fa5d52d8f..5cb82f6c55 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -14,9 +14,10 @@
 // SCROLLBAR
 %new-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: rgba(170, 181, 186, 0.3) transparent;
+  scrollbar-color: rgb(170 181 186 / 0.3) transparent;
+
   &:hover {
-    scrollbar-color: rgba(170, 181, 186, 0.7) transparent;
+    scrollbar-color: rgb(170 181 186 / 0.7) transparent;
   }
 
   // These rules do not apply in chrome - 121 or higher
@@ -27,18 +28,20 @@
     height: $s-12;
     width: $s-12;
   }
+
   ::-webkit-scrollbar-track,
   ::-webkit-scrollbar-corner {
     background-color: transparent;
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: rgba(170, 181, 186, 0.3);
+    background-color: rgb(170 181 186 / 0.3);
     background-clip: content-box;
     border: $s-2 solid transparent;
     border-radius: $br-8;
+
     &:hover {
-      background-color: rgba(170, 181, 186, 0.7);
+      background-color: rgb(170 181 186 / 0.7);
       outline: none;
     }
   }
@@ -48,48 +51,53 @@
     color: var(--text-editor-selection-foreground-color);
   }
 
-  ::placeholder,
-  ::-webkit-input-placeholder {
-    @include bodySmallTypography;
+  ::placeholder {
+    @include body-small-typography;
+
     color: var(--input-placeholder-color);
   }
 }
 
 // BUTTONS
 %button-primary {
-  @include buttonStyle;
-  @include flexCenter;
-  @include headlineSmallTypography;
+  @include button-style;
+  @include flex-center;
+  @include headline-small-typography;
+
   background-color: var(--button-primary-background-color-rest);
   border: $s-1 solid var(--button-primary-border-color-rest);
   color: var(--button-primary-foreground-color-rest);
   border-radius: $br-8;
   min-height: $s-32;
-  svg,
-  span svg {
+
+  svg {
     stroke: var(--button-primary-foreground-color-rest);
   }
-  @include focusPrimary;
+
+  @include focus-primary;
+
   &:hover {
     background-color: var(--button-primary-background-color-hover);
     border: $s-1 solid var(--button-primary-border-color-hover);
     color: var(--button-primary-foreground-color-hover);
     text-decoration: none;
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-primary-foreground-color-hover);
     }
   }
+
   &:active {
     background-color: var(--button-primary-background-color-active);
     border: $s-1 solid var(--button-primary-border-color-active);
     color: var(--button-primary-foreground-color-active);
     outline: none;
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-primary-foreground-color-active);
     }
   }
+
   &:global(.disabled),
   &[disabled],
   &:disabled {
@@ -101,37 +109,42 @@
 }
 
 %button-secondary {
-  @include buttonStyle;
-  @include flexCenter;
+  @include button-style;
+  @include flex-center;
+
   border-radius: $br-8;
   background-color: var(--button-secondary-background-color-rest);
   border: $s-1 solid var(--button-secondary-border-color-rest);
   color: var(--button-secondary-foreground-color-rest);
-  svg,
-  span svg {
+
+  svg {
     stroke: var(--button-secondary-foreground-color-rest);
   }
-  @include focusSecondary;
+
+  @include focus-secondary;
+
   &:hover {
     background-color: var(--button-secondary-background-color-hover);
     border: $s-1 solid var(--button-secondary-border-color-hover);
     color: var(--button-secondary-foreground-color-hover);
     text-decoration: none;
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-secondary-foreground-color-hover);
     }
   }
+
   &:active {
     outline: none;
     background-color: var(--button-secondary-background-color-active);
     border: $s-1 solid var(--button-secondary-border-color-active);
     color: var(--button-secondary-foreground-color-active);
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-secondary-foreground-color-active);
     }
   }
+
   &:global(.disabled),
   &[disabled],
   &:disabled {
@@ -143,36 +156,41 @@
 }
 
 %button-tertiary {
-  @include buttonStyle;
-  @include flexCenter;
+  @include button-style;
+  @include flex-center;
+
   --button-tertiary-border-width: #{$s-2};
+
   border-radius: $br-8;
   color: var(--button-tertiary-foreground-color-rest);
   background-color: transparent;
   border: var(--button-tertiary-border-width) solid transparent;
   display: grid;
   place-content: center;
-  svg,
-  span svg {
+
+  svg {
     stroke: var(--button-tertiary-foreground-color-rest);
   }
-  @include focusTertiary;
+
+  @include focus-tertiary;
+
   &:hover {
     background-color: var(--button-tertiary-background-color-hover);
     color: var(--button-tertiary-foreground-color-hover);
     border-color: var(--button-secondary-border-color-hover);
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-tertiary-foreground-color-hover);
     }
   }
+
   &:active {
     outline: none;
     border-color: transparent;
     background-color: var(--button-tertiary-background-color-active);
     color: var(--button-tertiary-foreground-color-active);
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-tertiary-foreground-color-active);
     }
   }
@@ -184,8 +202,7 @@
     cursor: unset;
     pointer-events: none;
 
-    svg,
-    span svg {
+    svg {
       stroke: var(--button-foreground-color-disabled);
     }
   }
@@ -196,54 +213,61 @@
   border-color: var(--button-icon-border-color-selected);
   background-color: var(--button-icon-background-color-selected);
   color: var(--button-icon-foreground-color-selected);
+
   svg {
     stroke: var(--button-icon-foreground-color-selected);
   }
 }
 
 .button-radio {
-  @include buttonStyle;
-  @include flexCenter;
+  @include button-style;
+  @include flex-center;
+
   border-radius: $br-8;
   color: var(--button-radio-foreground-color-rest);
   border-color: $s-1 solid var(--button-radio-background-color-rest);
-  svg,
-  span svg {
+
+  svg {
     stroke: var(--button-radio-foreground-color-rest);
   }
-  @include focusRadio;
+
+  @include focus-radio;
+
   &:hover {
     background-color: var(--button-radio-background-color-rest);
     color: var(--button-radio-foreground-color-hover);
     border: $s-1 solid transparent;
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-radio-foreground-color-hover);
     }
   }
+
   &:active {
     outline: none;
     border: $s-1 solid transparent;
     background-color: var(--button-radio-background-color-active);
     color: var(--button-radio-foreground-color-active);
-    svg,
-    span svg {
+
+    svg {
       stroke: var(--button-radio-foreground-color-active);
     }
   }
 }
 
 .button-warning {
-  @include buttonStyle;
-  @include flexCenter;
+  @include button-style;
+  @include flex-center;
+
   background-color: var(--button-warning-background-color-rest);
   border: $s-1 solid var(--button-warning-border-color-rest);
   color: var(--button-warning-foreground-color-rest);
 }
 
 %button-disabled {
-  @include buttonStyle;
-  @include flexCenter;
+  @include button-style;
+  @include flex-center;
+
   background-color: var(--button-background-color-disabled);
   border: $s-1 solid var(--button-border-color-disabled);
   color: var(--button-foreground-color-disabled);
@@ -251,14 +275,16 @@
 }
 
 %button-tag {
-  @include buttonStyle;
-  @include flexCenter;
+  @include button-style;
+  @include flex-center;
   @include focus;
+
   &:hover {
     svg {
       stroke: var(--title-foreground-color-hover);
     }
   }
+
   &:active {
     border: none;
     background-color: transparent;
@@ -266,7 +292,8 @@
 }
 
 %button-icon {
-  @include flexCenter;
+  @include flex-center;
+
   height: $s-16;
   width: $s-16;
   color: transparent;
@@ -276,19 +303,22 @@
 
 %button-icon-small {
   @extend %button-icon;
+
   height: $s-12;
   width: $s-12;
   stroke-width: 1.33px;
 }
 
 .button-constraint {
-  @include buttonStyle;
+  @include button-style;
+
   width: $s-32;
   height: $s-4;
   border-radius: $br-8;
   background-color: var(--button-constraint-background-color-rest);
   padding: 0;
   margin: 0;
+
   &:hover {
     outline: $s-4 solid var(--button-constraint-border-color-hover);
     background-color: var(--button-constraint-background-color-hover);
@@ -297,8 +327,9 @@
 
 // INPUTS
 %input-base {
-  @include removeInputStyle;
-  @include textEllipsis;
+  @include remove-input-style;
+  @include text-ellipsis;
+
   height: $s-28;
   width: 100%;
   flex-grow: 1;
@@ -306,6 +337,7 @@
   padding: 0 0 0 $s-6;
   border-radius: $br-8;
   color: var(--input-foreground-color-active);
+
   &[disabled] {
     opacity: 0.5;
     pointer-events: none;
@@ -313,23 +345,30 @@
 }
 
 .input-icon {
-  @include flexCenter;
+  @include flex-center;
+
   min-width: $s-12;
   height: $s-32;
+
   svg {
     @extend %button-icon-small;
   }
 }
 
-.input-label {
-  @include headlineSmallTypography;
-  @include flexCenter;
+%input-label {
+  @include headline-small-typography;
+  @include flex-center;
+
   width: $s-20;
   padding-left: $s-8;
   height: $s-32;
   color: var(--input-foreground-color);
 }
 
+.input-label {
+  @extend %input-label;
+}
+
 %input-element {
   display: flex;
   align-items: center;
@@ -338,17 +377,22 @@
   background-color: var(--input-background-color);
   border: $s-1 solid var(--input-border-color);
   color: var(--input-foreground-color);
+
   &:not(:focus-within) {
     cursor: ew-resize;
+
     input {
       cursor: ew-resize;
     }
   }
+
   span,
   label {
-    @extend .input-label;
+    @extend %input-label;
+
     svg {
       @extend %button-icon-small;
+
       stroke: var(--input-foreground-color);
     }
   }
@@ -361,43 +405,55 @@
     color: var(--input-placeholder-color);
   }
 
-  @include focusInput;
+  @include focus-input;
+
   &:hover {
     border: $s-1 solid var(--input-border-color-hover);
     background-color: var(--input-background-color-hover);
+
     span {
       color: var(--input-foreground-color-hover);
     }
+
     input {
       color: var(--input-foreground-color-hover);
     }
   }
+
   &:active {
     border: $s-1 solid var(--input-border-color-active);
     background-color: var(--input-background-color-active);
+
     span {
       color: var(--input-foreground-color-active);
     }
+
     input {
       color: var(--input-foreground-color-active);
     }
   }
+
   &:focus,
   &:focus-within {
     border: $s-1 solid var(--input-border-color-focus);
     background-color: var(--input-background-color-focus);
+
     span {
       color: var(--input-foreground-color-focus);
     }
+
     input {
       color: var(--input-foreground-color-focus);
     }
+
     &:hover {
       border: $s-1 solid var(--input-border-color-focus);
       background-color: var(--input-background-color-focus);
+
       span {
         color: var(--input-foreground-color-focus);
       }
+
       input {
         color: var(--input-foreground-color-focus);
       }
@@ -406,12 +462,15 @@
 }
 
 %input-element-label {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   display: flex;
   align-items: flex-start;
   padding: 0;
+
   input {
     @extend %input-base;
+
     padding-left: $s-8;
     display: flex;
     align-items: flex-start;
@@ -424,10 +483,13 @@
     color: var(--input-foreground-color-active);
     background-color: var(--input-background-color);
   }
+
   ::placeholder {
-    @include bodySmallTypography;
+    @include body-small-typography;
+
     color: var(--input-placeholder-color);
   }
+
   &:hover {
     input {
       color: var(--input-foreground-color-active);
@@ -449,18 +511,21 @@
   background-color: var(--input-background-color-disabled);
   border: $s-1 solid var(--input-border-color-disabled);
   color: var(--input-foreground-color-disabled);
+
   input {
     pointer-events: none;
     cursor: default;
     color: var(--input-foreground-color-disabled);
   }
-  span svg {
+
+  svg {
     stroke: var(--input-foreground-color-disabled);
   }
 }
 
 %checkbox-icon {
-  @include flexCenter;
+  @include flex-center;
+
   width: $s-16;
   height: $s-16;
   min-width: $s-16;
@@ -468,15 +533,18 @@
   background-color: var(--input-checkbox-background-color-rest);
   border: $s-1 solid var(--input-checkbox-border-color-rest);
   border-radius: $br-4;
+
   svg {
     width: $s-16;
     height: $s-16;
     display: none;
     stroke: var(--input-checkbox-inactive-foreground-color);
   }
+
   &:hover {
     border-color: var(--input-checkbox-border-color-hover);
   }
+
   &:focus {
     border-color: var(--input-checkbox-border-color-focus);
   }
@@ -484,8 +552,10 @@
   &:global(.checked) {
     border-color: var(--input-checkbox-border-color-active);
     background-color: var(--input-checkbox-background-color-active);
+
     svg {
       @extend %button-icon-small;
+
       stroke: var(--input-checkbox-foreground-color-active);
     }
   }
@@ -493,8 +563,10 @@
   &:global(.intermediate) {
     background-color: var(--input-checkbox-background-color-intermediate);
     border-color: var(--input-checkbox-border-color-intermediate);
+
     svg {
       @extend %button-icon-small;
+
       stroke: var(--input-checkbox-foreground-color-intermediate);
     }
   }
@@ -502,6 +574,7 @@
   &:global(.unchecked) {
     background-color: var(--input-checkbox-background-color-rest);
     border: $s-1 solid var(--input-checkbox-background-color-rest);
+
     svg {
       display: none;
     }
@@ -511,19 +584,24 @@
 %input-checkbox {
   display: flex;
   align-items: center;
+
   label {
-    @include bodySmallTypography;
+    @include body-small-typography;
+
     display: flex;
     align-items: center;
     gap: $s-6;
     cursor: pointer;
     color: var(--input-checkbox-text-foreground-color);
+
     span {
       @extend %checkbox-icon;
     }
+
     input {
       margin: 0;
     }
+
     &:hover {
       span {
         border-color: var(--input-checkbox-border-color-hover);
@@ -542,8 +620,10 @@
 %input-with-label {
   display: flex;
   flex-direction: column;
+
   label {
-    @include bodySmallTypography;
+    @include body-small-typography;
+
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -553,7 +633,8 @@
 
   input {
     @extend %input-base;
-    @include bodySmallTypography;
+    @include body-small-typography;
+
     border-radius: $br-8;
     height: $s-32;
     min-height: $s-32;
@@ -561,15 +642,18 @@
     background-color: var(--input-background-color);
     border: $s-1 solid var(--input-border-color);
     color: var(--input-foreground-color-active);
+
     &:focus-within,
     &:active {
       input {
         color: var(--input-foreground-color-active);
       }
+
       background-color: var(--input-background-color-active);
       border: $s-1 solid var(--input-border-color-active);
     }
   }
+
   &:global(.disabled) {
     @extend %disabled-input;
   }
@@ -581,9 +665,10 @@
   }
 }
 
-//MODALS
+// MODALS
 %modal-background {
-  @include menuShadow;
+  @include menu-shadow;
+
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -595,7 +680,8 @@
 }
 
 %modal-overlay-base {
-  @include flexCenter;
+  @include flex-center;
+
   position: fixed;
   left: 0;
   top: 0;
@@ -619,18 +705,21 @@
 
 %modal-close-btn-base {
   @extend %button-tertiary;
+
   position: absolute;
   top: $s-8;
   right: $s-6;
   height: $s-32;
   width: $s-28;
+
   svg {
     @extend %button-icon;
   }
 }
 
 .modal-hint-base {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   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);
@@ -644,7 +733,8 @@
 
 %modal-cancel-btn {
   @extend %button-secondary;
-  @include uppercaseTitleTipography;
+  @include uppercase-title-typography;
+
   padding: $s-8 $s-24;
   border-radius: $br-8;
   height: $s-32;
@@ -653,7 +743,8 @@
 
 %modal-accept-btn {
   @extend %button-primary;
-  @include uppercaseTitleTipography;
+  @include uppercase-title-typography;
+
   padding: $s-8 $s-24;
   border-radius: $br-8;
   height: $s-32;
@@ -662,7 +753,8 @@
 
 %modal-danger-btn {
   @extend %button-primary;
-  @include uppercaseTitleTipography;
+  @include uppercase-title-typography;
+
   padding: $s-8 $s-24;
   border-radius: $br-8;
   height: $s-32;
@@ -677,7 +769,8 @@
 // FIXME: This is used multiple times accross the app. We should design this in
 // the DS and create a proper component for it.
 %asset-element {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   display: flex;
   align-items: center;
   height: $s-32;
@@ -685,6 +778,7 @@
   padding: $s-8 $s-12;
   background-color: var(--assets-item-background-color);
   color: var(--assets-item-name-foreground-color-hover);
+
   &:hover {
     background-color: var(--assets-item-background-color-hover);
     color: var(--assets-item-name-foreground-color-hover);
@@ -692,14 +786,16 @@
 }
 
 %shortcut-base {
-  @include flexCenter;
+  @include flex-center;
+
   gap: $s-2;
   color: var(--menu-shortcut-foreground-color);
 }
 
 %shortcut-key-base {
-  @include bodySmallTypography;
-  @include flexCenter;
+  @include body-small-typography;
+  @include flex-center;
+
   height: $s-20;
   padding: $s-2 $s-6;
   border-radius: $br-6;
@@ -707,7 +803,8 @@
 }
 
 %mixed-bar {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -736,6 +833,7 @@
   border-radius: $br-circle;
   transform: translate(calc(-1 * $s-12), calc(-1 * $s-12));
   z-index: $z-index-1;
+
   &:hover,
   &:active {
     border-color: var(--colorpicker-details-color-selected);
@@ -747,14 +845,19 @@
     margin-left: 0;
     color: var(--entry-foreground-color-hover);
   }
+
   button {
     @extend %button-tertiary;
+
     display: none;
+
     svg {
       @extend %button-icon-small;
+
       stroke: var(--icon-foreground);
     }
   }
+
   &:hover {
     button {
       display: flex;
@@ -768,9 +871,11 @@
   grid-template-columns: 1fr 3fr;
   gap: $s-4;
   height: $s-32;
+
   :global(.attr-label) {
-    @include bodySmallTypography;
-    @include twoLineTextEllipsis;
+    @include body-small-typography;
+    @include two-line-text-ellipsis;
+
     width: $s-92;
     margin: auto 0;
     color: var(--entry-foreground-color);
@@ -781,17 +886,20 @@
     grid-area: content;
     display: flex;
     color: var(--entry-foreground-color-hover);
-    @include bodySmallTypography;
+
+    @include body-small-typography;
   }
 }
 
 %copy-button-children {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   color: var(--color-foreground-primary);
   text-align: left;
   margin: 0;
   padding: 0;
   height: fit-content;
+
   &:hover {
     div {
       color: var(--entry-foreground-color-hover);
@@ -801,8 +909,9 @@
 
 // SELECTS AND DROPDOWNS
 %menu-dropdown {
-  @include menuShadow;
-  @include flexColumn;
+  @include menu-shadow;
+  @include flex-column;
+
   position: absolute;
   padding: $s-4;
   border-radius: $br-8;
@@ -814,7 +923,8 @@
 }
 
 %menu-item-base {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -823,13 +933,15 @@
   padding: $s-6;
   border-radius: $br-8;
   cursor: pointer;
+
   &:hover {
     background-color: var(--menu-background-color-hover);
   }
 }
 
 %dropdown-element-base {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   display: flex;
   align-items: center;
   gap: $s-8;
@@ -840,24 +952,29 @@
   color: var(--menu-foreground-color-rest);
 
   span {
-    @include flexCenter;
-    @include textEllipsis;
+    @include flex-center;
+    @include text-ellipsis;
+
     svg {
       @extend %button-icon-small;
+
       stroke: var(--icon-foreground);
     }
   }
+
   &:hover {
     background-color: var(--menu-background-color-hover);
     color: var(--menu-foreground-color);
-    span svg {
+
+    svg {
       stroke: var(--menu-foreground-color-hover);
     }
   }
 }
 
 %dropdown-wrapper {
-  @include menuShadow;
+  @include menu-shadow;
+
   position: absolute;
   top: $s-32;
   left: 0;
@@ -868,15 +985,15 @@
   margin-top: $s-1;
   border-radius: $br-8;
   z-index: $z-index-4;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   background-color: var(--menu-background-color);
   color: var(--menu-foreground-color);
   border: $s-2 solid var(--panel-border-color);
 }
 
 %select-wrapper {
-  @include bodySmallTypography;
+  @include body-small-typography;
+
   position: relative;
   display: flex;
   align-items: center;
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index f3f1df5e20..47f933d991 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -11,53 +11,47 @@
   // Dark background
   --db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; // used on overlay dark mode
 
-  //Dark foreground
+  // Dark foreground
   --df-secondary: #8f9da3; // Used on button disabled background dark mode, grid metadata and some svg
   --df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // Used on button disabled foreground dark mode
 
-  //Dark accent
+  // Dark accent
   --da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)}; // selection rect dark mode
   --da-tertiary-70: #{color.change(#00d1b8, $alpha: 0.7)}; // selection rect background dark mode
 
   // LIGHT
   // Light background
-  --lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; // overlay color light mode
+  --lb-primary-60: #{color.change(#fff, $alpha: 0.6)}; // overlay color light mode
   --lb-quaternary: #eef0f2; // background disabled token
 
-  //Light foreground
+  // Light foreground
   --lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)}; // foreground disabled token
 
-  //Light accent
+  // Light accent
   --la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)}; // selection rect light mode
   --la-tertiary-70: #{color.change(#8c33eb, $alpha: 0.7)}; // selection rect background light mode
 
   // STATUS COLOR
   --status-color-success-200: #a7e8d9; // Used on Register confirmation text
   --status-color-success-500: #2d9f8f; // Used on accept icon, and status widget
-
   --status-color-warning-500: #f5a91b; // Used on status widget, some buttons and warnings icons and elements
-
   --status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget
-
   --status-color-info-500: #0e9be9; // used on pixel grid and status widget
 
   // APP COLORS
-  --app-white: #ffffff; // Used in several places
+  --app-white: #fff; // Used in several places
   --app-black: #000; // Used on interactions, measurements and editor files
 
   // SOCIAL LOGIN BUTTONS
   --google-login-background: #4285f4;
   --google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)};
   --google-login-foreground: var(--app-white);
-
   --github-login-background: #4c4c4c;
   --github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)};
   --github-login-foreground: var(--app-white);
-
   --oidc-login-background: #b3b3b3;
   --oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)};
   --oidc-login-foreground: var(--app-white);
-
   --gitlab-login-background: #fc6d26;
   --gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)};
   --gitlab-login-foreground: var(--app-white);
diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss
index 708e83eb6b..75f52ad936 100644
--- a/frontend/resources/styles/common/refactor/common-dashboard.scss
+++ b/frontend/resources/styles/common/refactor/common-dashboard.scss
@@ -29,6 +29,7 @@
   .btn-secondary {
     flex-shrink: 0;
     height: $s-32;
+
     svg {
       height: $s-16;
       width: $s-16;
@@ -57,6 +58,7 @@
         height: $s-40;
         padding: $s-4 $s-24;
         font-weight: $fw400;
+
         &:hover {
           color: var(--color-background-secondary);
           text-decoration: none;
@@ -124,10 +126,12 @@
         font-size: $s-16;
         color: var(--color-foreground-secondary);
         border-color: transparent;
+
         &:hover {
           color: var(--color-foreground-primary);
         }
       }
+
       &.active {
         a {
           color: var(--color-foreground-primary);
@@ -139,6 +143,7 @@
 
 .btn-primary {
   @extend %button-primary;
+
   text-transform: uppercase;
   font-size: $fs-14;
   font-weight: $fw400;
@@ -146,6 +151,7 @@
 
 .btn-secondary {
   @extend %button-secondary;
+
   color: var(--color-foreground-primary);
   font-size: $fs-12;
   text-transform: uppercase;
diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index a6098ee978..173fd6c7da 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -4,17 +4,17 @@
 //
 // Copyright (c) KALEIDOS INC
 
-//#################################################
+// #################################################
 // MAIN STYLES
-//#################################################
+// #################################################
 
-@forward "./fonts.scss";
-@forward "./spacing.scss";
-@forward "./borders.scss";
-@forward "./opacity.scss";
-@forward "./shadows.scss";
-@forward "./z-index.scss";
-@forward "./mixins.scss";
-@forward "./focus.scss";
-@forward "./animations.scss";
-@forward "./basic-rules.scss";
+@forward "./fonts";
+@forward "./spacing";
+@forward "./borders";
+@forward "./opacity";
+@forward "./shadows";
+@forward "./z-index";
+@forward "./mixins";
+@forward "./focus";
+@forward "./animations";
+@forward "./basic-rules";
diff --git a/frontend/resources/styles/common/refactor/focus.scss b/frontend/resources/styles/common/refactor/focus.scss
index 0ac2dde780..8e01cab247 100644
--- a/frontend/resources/styles/common/refactor/focus.scss
+++ b/frontend/resources/styles/common/refactor/focus.scss
@@ -6,44 +6,46 @@
 
 @use "./spacing.scss" as *;
 
-@mixin focusType($type) {
-  $realType: "";
+@mixin focus-type($type) {
+  $real-type: "";
+
   @if $type {
-    $realType: $type + "-";
+    $real-type: $type + "-";
   }
+
   &:focus-visible {
     outline: none;
-    background-color: var(--button-#{$realType}background-color-focus);
-    border: $s-1 solid var(--button-#{$realType}border-color-focus);
-    color: var(--button-#{$realType}foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-#{$realType}foreground-color-focus);
+    background-color: var(--button-#{$real-type}background-color-focus);
+    border: $s-1 solid var(--button-#{$real-type}border-color-focus);
+    color: var(--button-#{$real-type}foreground-color-focus);
+
+    svg {
+      stroke: var(--button-#{$real-type}foreground-color-focus);
     }
   }
 }
 
-@mixin focusPrimary {
-  @include focusType(primary);
+@mixin focus-primary {
+  @include focus-type(primary);
 }
 
-@mixin focusSecondary {
-  @include focusType(secondary);
+@mixin focus-secondary {
+  @include focus-type(secondary);
 }
 
-@mixin focusTertiary {
-  @include focusType(tertiary);
+@mixin focus-tertiary {
+  @include focus-type(tertiary);
 }
 
-@mixin focusRadio {
-  @include focusType(radio);
+@mixin focus-radio {
+  @include focus-type(radio);
 }
 
 @mixin focus {
-  @include focusType(null);
+  @include focus-type(null);
 }
 
-@mixin focusInput {
+@mixin focus-input {
   &:focus-within {
     color: var(--input-foreground-color-active);
     background-color: var(--input-background-color-active);
diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss
index 015555225a..86f95cc303 100644
--- a/frontend/resources/styles/common/refactor/fonts.scss
+++ b/frontend/resources/styles/common/refactor/fonts.scss
@@ -8,7 +8,6 @@
 
 // Typography scale
 $fs-base: 16;
-
 $fs-10: math.div(10, $fs-base) + rem;
 $fs-11: 0.688rem;
 $fs-12: math.div(12, $fs-base) + rem;
diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index 356c2ca7da..9ec8d1996b 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -7,37 +7,37 @@
 @use "./fonts.scss" as *;
 @use "./spacing.scss" as *;
 
-@mixin flexCenter {
+@mixin flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-@mixin flexColumn($gap: $s-4) {
+@mixin flex-column($gap: $s-4) {
   display: flex;
   flex-direction: column;
   gap: #{$gap};
 }
 
-@mixin flexRow {
+@mixin flex-row {
   display: flex;
   align-items: center;
   gap: $s-4;
 }
 
-@mixin buttonStyle {
+@mixin button-style {
   border: none;
   background: none;
   cursor: pointer;
 }
 
-@mixin removeInputStyle {
+@mixin remove-input-style {
   border: none;
   background: none;
   outline: none;
 }
 
-@mixin uppercaseTitleTipography {
+@mixin uppercase-title-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-11;
   font-weight: $fw500;
@@ -45,28 +45,28 @@
   text-transform: uppercase;
 }
 
-@mixin bigTitleTipography {
+@mixin big-title-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-24;
   font-weight: $fw400;
   line-height: 1.2;
 }
 
-@mixin medTitleTipography {
+@mixin med-title-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-20;
   font-weight: $fw400;
   line-height: 1.2;
 }
 
-@mixin smallTitleTipography {
+@mixin small-title-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-14;
   font-weight: $fw400;
   line-height: 1.2;
 }
 
-@mixin headlineLargeTypography {
+@mixin headline-large-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-18;
   line-height: 1.2;
@@ -74,7 +74,7 @@
   font-weight: $fw400;
 }
 
-@mixin headlineMediumTypography {
+@mixin headline-medium-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-16;
   line-height: 1.4;
@@ -82,7 +82,7 @@
   font-weight: $fw400;
 }
 
-@mixin headlineSmallTypography {
+@mixin headline-small-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-12;
   line-height: 1.2;
@@ -90,35 +90,35 @@
   font-weight: $fw500;
 }
 
-@mixin bodyLargeTypography {
+@mixin body-large-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-16;
   line-height: 1.5;
   font-weight: $fw400;
 }
 
-@mixin bodyMediumTypography {
+@mixin body-medium-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-14;
   line-height: 1.4;
   font-weight: $fw400;
 }
 
-@mixin bodySmallTypography {
+@mixin body-small-typography {
   font-family: "worksans", "vazirmatn", sans-serif;
   font-size: $fs-12;
   font-weight: $fw400;
   line-height: 1.4;
 }
 
-@mixin codeTypography {
+@mixin code-typography {
   font-family: "robotomono", monospace;
   font-size: $fs-12;
   font-weight: $fw400;
   line-height: 1.2;
 }
 
-@mixin textEllipsis {
+@mixin text-ellipsis {
   display: block;
   max-width: 99%;
   overflow: hidden;
@@ -126,7 +126,7 @@
   white-space: nowrap;
 }
 
-@mixin twoLineTextEllipsis {
+@mixin two-line-text-ellipsis {
   max-width: 99%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -135,8 +135,8 @@
   -webkit-box-orient: vertical;
 }
 
-@mixin inspectValue {
-  @include bodySmallTypography;
+@mixin inspect-value {
+  @include body-small-typography;
 
   display: inline-block;
   width: fit-content;
@@ -146,7 +146,7 @@
   color: var(--menu-foreground-color);
 }
 
-@mixin copyWrapperBase {
+@mixin copy-wrapper-base {
   position: relative;
   min-height: $s-32;
   width: $s-144;
@@ -155,7 +155,7 @@
   box-sizing: border-box;
 }
 
-@mixin hiddenElement {
+@mixin hidden-element {
   cursor: default;
   pointer-events: none;
   box-sizing: border-box;
diff --git a/frontend/resources/styles/common/refactor/shadows.scss b/frontend/resources/styles/common/refactor/shadows.scss
index c936ca115d..ee825fa4c5 100644
--- a/frontend/resources/styles/common/refactor/shadows.scss
+++ b/frontend/resources/styles/common/refactor/shadows.scss
@@ -6,10 +6,6 @@
 
 @use "./spacing.scss" as *;
 
-@mixin menuShadow {
-  box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
-}
-
-@mixin alertShadow {
-  box-shadow: 0px $s-4 $s-4 var(--menu-shadow-color);
+@mixin menu-shadow {
+  box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
 }
diff --git a/frontend/resources/styles/common/refactor/themes.scss b/frontend/resources/styles/common/refactor/themes.scss
index 9a5a9a1e64..cb4ab93a0f 100644
--- a/frontend/resources/styles/common/refactor/themes.scss
+++ b/frontend/resources/styles/common/refactor/themes.scss
@@ -4,5 +4,5 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@forward "./themes/default-theme.scss";
-@forward "./themes/light-theme.scss";
+@forward "./themes/default-theme";
+@forward "./themes/light-theme";
diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss
index f7d092338a..11ac2c8e89 100644
--- a/frontend/resources/styles/common/refactor/themes/default-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss
@@ -10,6 +10,5 @@
   --color-background-disabled: var(--df-secondary);
   --color-foreground-disabled: var(--df-secondary-40);
   --color-accent-tertiary-muted: var(--da-tertiary-10); // selection rect
-
   --overlay-color: var(--db-primary-60);
 }
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 8baec1aa94..69e6259a0a 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -10,6 +10,5 @@
   --color-background-disabled: var(--lb-quaternary);
   --color-foreground-disabled: var(--lf-secondary-40);
   --color-accent-tertiary-muted: var(--la-tertiary-10);
-
   --overlay-color: var(--lb-primary-60);
 }
diff --git a/frontend/resources/styles/debug.scss b/frontend/resources/styles/debug.scss
index be3edc5228..227b18941f 100644
--- a/frontend/resources/styles/debug.scss
+++ b/frontend/resources/styles/debug.scss
@@ -10,9 +10,9 @@
 //       debugging.
 
 body {
-  color: yellow;
+  color: rgb(255 255 0);
 }
 
 .deprecated-icon {
-  fill: red !important;
+  fill: rgb(255 0 0) !important;
 }
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 5b6c1cb247..d9048c610c 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -4,29 +4,28 @@
 //
 // Copyright (c) KALEIDOS INC
 
-//#################################################
+// #################################################
 // MAIN STYLES
-//#################################################
+// #################################################
 
 @forward "common/dependencies/reset";
-@forward "common/refactor/color-defs.scss";
+@forward "common/refactor/color-defs";
 @forward "common/dependencies/fonts";
 @forward "common/dependencies/animations";
-@forward "common/dependencies/highlight.scss";
-@forward "common/dependencies/storybook.scss";
+@forward "common/dependencies/highlight";
+@forward "common/dependencies/storybook";
+@forward "common/refactor/themes";
+@forward "common/refactor/design-tokens";
 
-@forward "common/refactor/themes.scss";
-@forward "common/refactor/design-tokens.scss";
-
-//#################################################
+// #################################################
 // Layouts
-//#################################################
+// #################################################
 
 @forward "common/base";
 
-//#################################################
+// #################################################
 // Commons
-//#################################################
+// #################################################
 
 // TODO: remove this stylesheet once the new text editor is in place
 //       https: //tree.taiga.io/project/penpot/us/8165
diff --git a/frontend/resources/styles/main/partials/texts.scss b/frontend/resources/styles/main/partials/texts.scss
index aab38a4966..ad945dc69b 100644
--- a/frontend/resources/styles/main/partials/texts.scss
+++ b/frontend/resources/styles/main/partials/texts.scss
@@ -2,7 +2,7 @@
 .rich-text {
   color: var(--app-black);
   height: 100%;
-  font-family: sourcesanspro;
+  font-family: sans-serif, "sourcesanspro";
 
   div {
     line-height: inherit;
diff --git a/frontend/src/app/main/ui/alert.scss b/frontend/src/app/main/ui/alert.scss
index 0776a29250..b3d0144fc1 100644
--- a/frontend/src/app/main/ui/alert.scss
+++ b/frontend/src/app/main/ui/alert.scss
@@ -23,7 +23,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineMediumTypography;
+  @include deprecated.headline-medium-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -33,7 +33,7 @@
 }
 
 .modal-content {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   margin-bottom: deprecated.$s-24;
 }
@@ -57,7 +57,7 @@
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-text-foreground-color);
   line-height: 1.5;
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
index 048aef58ec..dc438a1d97 100644
--- a/frontend/src/app/main/ui/auth/common.scss
+++ b/frontend/src/app/main/ui/auth/common.scss
@@ -33,19 +33,19 @@
 }
 
 .auth-title {
-  @include deprecated.bigTitleTipography;
+  @include deprecated.big-title-typography;
 
   color: var(--title-foreground-color-hover);
 }
 
 .auth-subtitle {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   color: var(--title-foreground-color);
 }
 
 .auth-tagline {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   margin: 0;
   color: var(--title-foreground-color);
@@ -65,7 +65,7 @@
 .login-button,
 .login-ldap-button {
   @extend %button-primary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   height: deprecated.$s-40;
   width: 100%;
@@ -81,7 +81,7 @@
 
 .go-back-link {
   @extend %button-secondary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   height: deprecated.$s-40;
 }
@@ -105,7 +105,7 @@
 .account-text,
 .recovery-text,
 .demo-account-text {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   text-align: right;
   color: var(--title-foreground-color);
@@ -116,7 +116,7 @@
 .recovery-link,
 .forgot-pass-link,
 .demo-account-link {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   text-align: left;
   background-color: transparent;
@@ -138,14 +138,14 @@
 .register-btn,
 .recover-btn {
   @extend %button-primary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   height: deprecated.$s-40;
   width: 100%;
 }
 
 .login-btn {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   display: flex;
   align-items: center;
diff --git a/frontend/src/app/main/ui/auth/recovery_request.scss b/frontend/src/app/main/ui/auth/recovery_request.scss
index bad82e2767..b4c053b104 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.scss
+++ b/frontend/src/app/main/ui/auth/recovery_request.scss
@@ -12,7 +12,7 @@
 }
 
 .notification-text-email {
-  @include deprecated.medTitleTipography;
+  @include deprecated.med-title-typography;
 
   font-size: deprecated.$fs-20;
   color: var(--register-confirmation-color);
diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss
index c6525ed145..47445a3633 100644
--- a/frontend/src/app/main/ui/auth/register.scss
+++ b/frontend/src/app/main/ui/auth/register.scss
@@ -27,7 +27,7 @@
   gap: deprecated.$s-24;
 
   .auth-title {
-    @include deprecated.medTitleTipography;
+    @include deprecated.med-title-typography;
   }
 }
 
@@ -44,13 +44,13 @@
 }
 
 .notification-text {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--title-foreground-color);
 }
 
 .notification-text-email {
-  @include deprecated.medTitleTipography;
+  @include deprecated.med-title-typography;
 
   font-size: deprecated.$fs-20;
   color: var(--register-confirmation-color);
@@ -75,7 +75,7 @@
 }
 
 .terms-register {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   gap: deprecated.$s-4;
diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss
index 051a6cd613..9da2078d38 100644
--- a/frontend/src/app/main/ui/comments.scss
+++ b/frontend/src/app/main/ui/comments.scss
@@ -23,7 +23,7 @@
 }
 
 .error-text {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-error);
 }
@@ -40,11 +40,11 @@
 }
 
 .location-text {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 }
 
 .author {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   align-items: center;
@@ -56,13 +56,13 @@
 }
 
 .author-fullname {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   color: var(--comment-title-color);
 }
 
 .author-timeago {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   color: var(--comment-subtitle-color);
 }
@@ -120,7 +120,7 @@
 }
 
 .cover {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   cursor: pointer;
   display: flex;
@@ -131,7 +131,7 @@
 }
 
 .item {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-primary);
   overflow-wrap: break-word;
@@ -140,7 +140,7 @@
 }
 
 .replies {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   gap: deprecated.$s-8;
@@ -245,7 +245,7 @@
 }
 
 .floating-thread-header-left {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-primary);
 }
@@ -272,11 +272,11 @@
   flex-direction: column;
   gap: deprecated.$s-8;
 
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 }
 
 .checkbox-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-16;
   height: deprecated.$s-24;
@@ -381,7 +381,7 @@
 }
 
 .comment-input {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   background: var(--input-background-color);
   border-radius: deprecated.$br-8;
diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss
index 6cab83cb79..7972780483 100644
--- a/frontend/src/app/main/ui/components/color_bullet.scss
+++ b/frontend/src/app/main/ui/components/color_bullet.scss
@@ -79,8 +79,8 @@
 }
 
 .color-text {
-  @include deprecated.twoLineTextEllipsis;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.two-line-text-ellipsis;
+  @include deprecated.body-small-typography;
 
   width: deprecated.$s-80;
   text-align: center;
@@ -89,15 +89,15 @@
   color: var(--palette-text-color);
 
   &.small-text {
-    @include deprecated.textEllipsis;
+    @include deprecated.text-ellipsis;
 
     max-height: deprecated.$s-16;
   }
 }
 
 .big-text {
-  @include deprecated.inspectValue;
-  @include deprecated.twoLineTextEllipsis;
+  @include deprecated.inspect-value;
+  @include deprecated.two-line-text-ellipsis;
 
   line-height: 1;
   color: var(--palette-text-color);
diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss
index 8f38c78277..b87754a356 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.scss
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss
@@ -24,7 +24,7 @@
   }
 
   .context-menu-items {
-    @include deprecated.menuShadow;
+    @include deprecated.menu-shadow;
 
     position: absolute;
     top: deprecated.$s-12;
@@ -50,7 +50,7 @@
       display: flex;
 
       .context-menu-action {
-        @include deprecated.bodySmallTypography;
+        @include deprecated.body-small-typography;
 
         display: flex;
         align-items: center;
diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss
index b8f8f67789..63f2f5069b 100644
--- a/frontend/src/app/main/ui/components/copy_button.scss
+++ b/frontend/src/app/main/ui/components/copy_button.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .copy-button {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   width: 100%;
   height: deprecated.$s-32;
@@ -17,7 +17,7 @@
   box-sizing: border-box;
 
   .icon-btn {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: deprecated.$s-32;
     min-width: deprecated.$s-28;
@@ -56,8 +56,8 @@
 }
 
 .copy-wrapper {
-  @include deprecated.buttonStyle;
-  @include deprecated.copyWrapperBase;
+  @include deprecated.button-style;
+  @include deprecated.copy-wrapper-base;
 
   width: 100%;
   height: fit-content;
@@ -65,7 +65,7 @@
   border: deprecated.$s-1 solid transparent;
 
   .icon-btn {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     position: absolute;
     top: 0;
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 3bd61df854..2242c66868 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -334,7 +334,7 @@
   overflow-y: hidden;
 
   .inside-input {
-    @include deprecated.removeInputStyle;
+    @include deprecated.remove-input-style;
     @include t.use-typography("body-small");
     @include text-ellipsis;
 
diff --git a/frontend/src/app/main/ui/components/progress.scss b/frontend/src/app/main/ui/components/progress.scss
index dcdf538c8a..646571f7f8 100644
--- a/frontend/src/app/main/ui/components/progress.scss
+++ b/frontend/src/app/main/ui/components/progress.scss
@@ -8,7 +8,7 @@
 
 // PROGRESS WIDGET
 .progress-widget {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-28;
   height: deprecated.$s-28;
@@ -59,7 +59,7 @@
 }
 
 .title {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   display: grid;
   grid-template-columns: auto 1fr;
@@ -72,7 +72,7 @@
 }
 
 .progress {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   padding-left: deprecated.$s-8;
   margin: 0;
@@ -81,8 +81,8 @@
 }
 
 .retry-btn {
-  @include deprecated.buttonStyle;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.button-style;
+  @include deprecated.body-small-typography;
 
   display: inline;
   text-align: left;
@@ -92,7 +92,7 @@
 }
 
 .progress-close-button {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   padding: 0;
   margin-inline-end: deprecated.$s-8;
diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss
index 51ca7a4c81..f8c06c4715 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.scss
+++ b/frontend/src/app/main/ui/components/radio_buttons.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .radio-btn-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   border-radius: deprecated.$br-8;
   height: deprecated.$s-32;
@@ -18,9 +18,9 @@
 .radio-icon {
   --radio-icon-border-color: var(--radio-btn-border-color);
 
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
-  @include deprecated.focusRadio;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
+  @include deprecated.focus-radio;
 
   height: deprecated.$s-32;
   flex-grow: 1;
@@ -39,7 +39,7 @@
   }
 
   .title-name {
-    @include deprecated.uppercaseTitleTipography;
+    @include deprecated.uppercase-title-typography;
 
     color: var(--radio-btn-foreground-color);
   }
diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss
index 4534d76345..22294f1d94 100644
--- a/frontend/src/app/main/ui/components/search_bar.scss
+++ b/frontend/src/app/main/ui/components/search_bar.scss
@@ -22,7 +22,7 @@
 }
 
 .search-input-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-32;
   width: 100%;
diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 72eae37864..e75034f6f3 100644
--- a/frontend/src/app/main/ui/components/select.scss
+++ b/frontend/src/app/main/ui/components/select.scss
@@ -13,7 +13,7 @@
   --text-color: var(--menu-foreground-color);
 
   @extend %new-scrollbar;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   position: relative;
   display: grid;
@@ -56,7 +56,7 @@
 }
 
 .dropdown-button {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   margin-inline-end: var(--sp-xxs);
 
@@ -69,7 +69,7 @@
 }
 
 .current-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-24;
   padding-right: deprecated.$s-4;
@@ -100,7 +100,7 @@
   @extend %dropdown-element-base;
 
   .icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: deprecated.$s-24;
     width: deprecated.$s-24;
@@ -119,7 +119,7 @@
   }
 
   .check-icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     svg {
       @extend %button-icon-small;
@@ -144,5 +144,5 @@
 }
 
 .current-label {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 }
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
index 71cc4371ad..89c5692c55 100644
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@@ -31,7 +31,7 @@
 }
 
 .tab-container-tab-title {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   width: 100%;
@@ -50,7 +50,7 @@
   }
 
   .content {
-    @include deprecated.headlineSmallTypography;
+    @include deprecated.headline-small-typography;
 
     text-align: center;
     white-space: nowrap;
@@ -79,8 +79,8 @@
 }
 
 .collapse-sidebar {
-  @include deprecated.flexCenter;
-  @include deprecated.buttonStyle;
+  @include deprecated.flex-center;
+  @include deprecated.button-style;
 
   height: 100%;
   width: deprecated.$s-24;
@@ -89,7 +89,7 @@
   border-radius: deprecated.$br-5;
 
   svg {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: deprecated.$s-16;
     width: deprecated.$s-16;
diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss
index 1ba37cde67..de605369bc 100644
--- a/frontend/src/app/main/ui/components/title_bar.scss
+++ b/frontend/src/app/main/ui/components/title_bar.scss
@@ -67,7 +67,7 @@
 }
 
 .icon-text-btn {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: flex;
   align-items: center;
diff --git a/frontend/src/app/main/ui/confirm.scss b/frontend/src/app/main/ui/confirm.scss
index e3106e528a..0f14a6e305 100644
--- a/frontend/src/app/main/ui/confirm.scss
+++ b/frontend/src/app/main/ui/confirm.scss
@@ -23,7 +23,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineMediumTypography;
+  @include deprecated.headline-medium-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -35,21 +35,21 @@
 }
 
 .modal-content {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 }
 
 .modal-item-element {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 }
 
 .modal-component-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   color: var(--color-foreground-secondary);
 }
 
 .modal-component-name {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--color-foreground-secondary);
 }
@@ -61,7 +61,7 @@
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-text-foreground-color);
 }
diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss
index 6fa30819ca..fe20d59db6 100644
--- a/frontend/src/app/main/ui/dashboard/change_owner.scss
+++ b/frontend/src/app/main/ui/dashboard/change_owner.scss
@@ -21,7 +21,7 @@
 }
 
 .modal-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -31,14 +31,14 @@
 }
 
 .modal-content {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin-bottom: deprecated.$s-24;
 }
 
 .input-wrapper {
   @extend %input-with-label;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 }
 
 .action-buttons {
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index 71f6fe7ebd..2d5948199c 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .dashboard-comments-section {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   position: relative;
   border-radius: deprecated.$br-8;
@@ -66,7 +66,7 @@
 }
 
 .dropdown {
-  @include deprecated.menuShadow;
+  @include deprecated.menu-shadow;
 
   background-color: var(--color-background-tertiary);
   border-radius: deprecated.$br-8;
diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss
index 133d0c8dbe..b428e4b0d7 100644
--- a/frontend/src/app/main/ui/dashboard/import.scss
+++ b/frontend/src/app/main/ui/dashboard/import.scss
@@ -22,7 +22,7 @@
 }
 
 .modal-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -32,7 +32,7 @@
 }
 
 .modal-content {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   flex: 1;
   overflow: hidden auto;
@@ -62,7 +62,7 @@
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--modal-text-foreground-color);
   line-height: 1.5;
@@ -72,10 +72,10 @@
   display: flex;
 
   .file-name {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
 
     .file-icon {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-24;
       width: deprecated.$s-16;
@@ -93,13 +93,13 @@
 
     .file-name-edit {
       @extend %input-element;
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
 
       flex-grow: 1;
     }
 
     .file-name-label {
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
 
       display: flex;
       align-items: center;
@@ -107,7 +107,7 @@
       flex-grow: 1;
 
       .icon {
-        @include deprecated.flexCenter;
+        @include deprecated.flex-center;
 
         height: deprecated.$s-16;
         width: deprecated.$s-16;
@@ -121,7 +121,7 @@
     }
 
     .edit-entry-buttons {
-      @include deprecated.flexRow;
+      @include deprecated.flex-row;
 
       button {
         @extend %button-tertiary;
@@ -153,7 +153,7 @@
     color: var(--modal-text-foreground-color);
 
     .linked-library-tag {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-24;
       width: deprecated.$s-24;
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 922f6e99e7..0fe9571e05 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -79,7 +79,7 @@
 }
 
 .current-team {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: grid;
   align-items: center;
@@ -98,7 +98,7 @@
 }
 
 .team-text {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
   @include t.use-typography("title-small");
 
   width: auto;
@@ -115,7 +115,7 @@
 
 // This icon still use the old svg
 .penpot-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   svg {
     fill: var(--icon-foreground);
@@ -125,7 +125,7 @@
 }
 
 .team-picture {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   border-radius: 50%;
   height: var(--sp-xxl);
@@ -140,8 +140,8 @@
 }
 
 .switch-options {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   max-width: var(--sp-xxl);
   min-width: deprecated.$s-28;
@@ -199,7 +199,7 @@
 }
 
 .icon-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: var(--sp-xxl);
   height: var(--sp-xxl);
@@ -301,7 +301,7 @@
 }
 
 .element-title {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   width: deprecated.$s-256;
   color: var(--color-foreground-primary);
@@ -366,8 +366,8 @@
 }
 
 .search-btn {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   position: absolute;
   right: 0;
@@ -401,7 +401,7 @@
 }
 
 .profile {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: grid;
   grid-template-columns: auto 1fr;
@@ -412,7 +412,7 @@
 
 .profile-fullname {
   @include t.use-typography("title-small");
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   align-self: center;
   max-width: var(--sp-l) 0;
@@ -454,7 +454,7 @@
 }
 
 .profile-dropdown-item .open-arrow {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 }
 
 .profile-dropdown-item .open-arrow svg {
@@ -504,7 +504,7 @@
 
 .menu-version {
   @include t.use-typography("code-font");
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   color: var(--color-foreground-secondary);
   margin-inline-start: var(--sp-s);
@@ -545,7 +545,7 @@
 }
 
 .upgrade-plan-section {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: flex;
   justify-content: space-between;
@@ -638,7 +638,7 @@
 }
 
 .current-org {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   text-transform: none;
   display: grid;
diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss
index 24f92ab331..0edb685c61 100644
--- a/frontend/src/app/main/ui/dashboard/subscription.scss
+++ b/frontend/src/app/main/ui/dashboard/subscription.scss
@@ -26,7 +26,7 @@
 }
 
 .cta-top-section {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: grid;
   color: var(--color-foreground-secondary);
@@ -44,7 +44,7 @@
 }
 
 .icon-dropdown {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   width: var(--sp-l);
@@ -70,7 +70,7 @@
 
 .cta-bottom-section .content {
   @include t.use-typography("body-medium");
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   color: var(--color-foreground-secondary);
   display: inline-block;
@@ -120,7 +120,7 @@
 }
 
 .cta-link {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   align-self: end;
   margin-inline-start: var(--sp-xs);
@@ -147,7 +147,7 @@
 }
 
 .manage-subscription-link {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
   @include t.use-typography("body-medium");
 
   color: var(--color-accent-tertiary);
diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss
index 354a177dd0..592ca7a94d 100644
--- a/frontend/src/app/main/ui/dashboard/team_form.scss
+++ b/frontend/src/app/main/ui/dashboard/team_form.scss
@@ -19,7 +19,7 @@
 }
 
 .modal-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -38,13 +38,13 @@
 
 .group-name-input {
   @extend %input-element-label;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin-bottom: deprecated.$s-8;
 
   label {
-    @include deprecated.flexColumn;
-    @include deprecated.bodySmallTypography;
+    @include deprecated.flex-column;
+    @include deprecated.body-small-typography;
 
     align-items: flex-start;
     width: 100%;
@@ -53,7 +53,7 @@
     height: 100%;
 
     input {
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
     }
   }
 }
diff --git a/frontend/src/app/main/ui/debug/icons_preview.scss b/frontend/src/app/main/ui/debug/icons_preview.scss
index 082723835e..a5a83fdf11 100644
--- a/frontend/src/app/main/ui/debug/icons_preview.scss
+++ b/frontend/src/app/main/ui/debug/icons_preview.scss
@@ -9,7 +9,7 @@
 }
 
 .title {
-  @include deprecated.bigTitleTipography;
+  @include deprecated.big-title-typography;
 
   color: var(--color-foreground-primary);
 }
@@ -32,7 +32,7 @@
   color: var(--color-foreground-primary);
   overflow-wrap: break-word;
 
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   svg {
     width: var(--cell-size);
diff --git a/frontend/src/app/main/ui/exports/assets.scss b/frontend/src/app/main/ui/exports/assets.scss
index 338daf19e7..cc690c5d3b 100644
--- a/frontend/src/app/main/ui/exports/assets.scss
+++ b/frontend/src/app/main/ui/exports/assets.scss
@@ -8,7 +8,7 @@
 
 // PROGRESS WIDGET
 .export-progress-widget {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-28;
   height: deprecated.$s-28;
@@ -59,7 +59,7 @@
 }
 
 .export-progress-title {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   display: grid;
   grid-template-columns: auto 1fr;
@@ -72,7 +72,7 @@
 }
 
 .progress {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   padding-left: deprecated.$s-8;
   margin: 0;
@@ -81,8 +81,8 @@
 }
 
 .retry-btn {
-  @include deprecated.buttonStyle;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.button-style;
+  @include deprecated.body-small-typography;
 
   display: inline;
   text-align: left;
@@ -92,7 +92,7 @@
 }
 
 .progress-close-button {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   padding: 0;
   margin-inline-end: deprecated.$s-8;
@@ -129,7 +129,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineMediumTypography;
+  @include deprecated.headline-medium-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -140,12 +140,12 @@
 
 .modal-content,
 .no-selection {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin-bottom: deprecated.$s-24;
 
   .modal-link {
-    @include deprecated.bodyLargeTypography;
+    @include deprecated.body-large-typography;
 
     text-decoration: none;
     cursor: pointer;
@@ -153,15 +153,15 @@
   }
 
   .selection-header {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
 
     height: deprecated.$s-32;
     margin-bottom: deprecated.$s-4;
 
     .selection-btn {
-      @include deprecated.buttonStyle;
+      @include deprecated.button-style;
       @extend %input-checkbox;
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-24;
       width: deprecated.$s-24;
@@ -174,7 +174,7 @@
     }
 
     .selection-title {
-      @include deprecated.bodyLargeTypography;
+      @include deprecated.body-large-typography;
 
       color: var(--modal-text-foreground-color);
     }
@@ -203,21 +203,21 @@
   }
 
   .selection-list {
-    @include deprecated.flexColumn;
+    @include deprecated.flex-column;
 
     max-height: deprecated.$s-400;
     overflow-y: auto;
     padding-bottom: deprecated.$s-12;
 
     .selection-row {
-      @include deprecated.flexRow;
+      @include deprecated.flex-row;
 
       background-color: var(--entry-background-color);
       min-height: deprecated.$s-40;
       border-radius: deprecated.$br-8;
 
       .selection-btn {
-        @include deprecated.buttonStyle;
+        @include deprecated.button-style;
 
         display: grid;
         grid-template-columns: min-content auto 1fr auto auto;
@@ -229,7 +229,7 @@
 
         .checkbox-wrapper {
           @extend %input-checkbox;
-          @include deprecated.flexCenter;
+          @include deprecated.flex-center;
 
           height: deprecated.$s-24;
           width: deprecated.$s-24;
@@ -241,8 +241,8 @@
         }
 
         .selection-name {
-          @include deprecated.bodyLargeTypography;
-          @include deprecated.textEllipsis;
+          @include deprecated.body-large-typography;
+          @include deprecated.text-ellipsis;
 
           flex-grow: 1;
           color: var(--modal-text-foreground-color);
@@ -250,8 +250,8 @@
         }
 
         .selection-scale {
-          @include deprecated.bodyLargeTypography;
-          @include deprecated.textEllipsis;
+          @include deprecated.body-large-typography;
+          @include deprecated.text-ellipsis;
 
           min-width: deprecated.$s-108;
           padding: deprecated.$s-12;
@@ -259,8 +259,8 @@
         }
 
         .selection-extension {
-          @include deprecated.bodyLargeTypography;
-          @include deprecated.textEllipsis;
+          @include deprecated.body-large-typography;
+          @include deprecated.text-ellipsis;
 
           min-width: deprecated.$s-72;
           padding: deprecated.$s-12;
@@ -269,7 +269,7 @@
       }
 
       .image-wrapper {
-        @include deprecated.flexCenter;
+        @include deprecated.flex-center;
 
         min-height: deprecated.$s-32;
         min-width: deprecated.$s-32;
@@ -306,7 +306,7 @@
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-text-foreground-color);
 }
@@ -321,7 +321,7 @@
     align-items: flex-start;
 
     .modal-subtitle {
-      @include deprecated.bodyLargeTypography;
+      @include deprecated.body-large-typography;
 
       color: var(--modal-title-foreground-color);
     }
@@ -333,16 +333,16 @@
 }
 
 .option-content {
-  @include deprecated.flexColumn;
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.flex-column;
+  @include deprecated.body-large-typography;
 }
 
 .file-entry {
   .file-name {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
 
     .file-icon {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-16;
       width: deprecated.$s-16;
@@ -355,8 +355,8 @@
     }
 
     .file-name-label {
-      @include deprecated.bodyLargeTypography;
-      @include deprecated.textEllipsis;
+      @include deprecated.body-large-typography;
+      @include deprecated.text-ellipsis;
     }
   }
 
diff --git a/frontend/src/app/main/ui/exports/files.scss b/frontend/src/app/main/ui/exports/files.scss
index ed33acb665..c3c09b3fa4 100644
--- a/frontend/src/app/main/ui/exports/files.scss
+++ b/frontend/src/app/main/ui/exports/files.scss
@@ -26,7 +26,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineMediumTypography;
+  @include deprecated.headline-medium-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -36,12 +36,12 @@
 }
 
 .modal-content {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin-bottom: deprecated.$s-24;
 
   .modal-link {
-    @include deprecated.bodyLargeTypography;
+    @include deprecated.body-large-typography;
 
     text-decoration: none;
     cursor: pointer;
@@ -49,15 +49,15 @@
   }
 
   .selection-header {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
 
     height: deprecated.$s-32;
     margin-bottom: deprecated.$s-4;
 
     .selection-btn {
-      @include deprecated.buttonStyle;
+      @include deprecated.button-style;
       @extend %input-checkbox;
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-24;
       width: deprecated.$s-24;
@@ -70,7 +70,7 @@
     }
 
     .selection-title {
-      @include deprecated.bodyLargeTypography;
+      @include deprecated.body-large-typography;
 
       color: var(--modal-text-foreground-color);
     }
@@ -99,21 +99,21 @@
   }
 
   .selection-list {
-    @include deprecated.flexColumn;
+    @include deprecated.flex-column;
 
     max-height: deprecated.$s-400;
     overflow-y: auto;
     padding-bottom: deprecated.$s-12;
 
     .selection-row {
-      @include deprecated.flexRow;
+      @include deprecated.flex-row;
 
       background-color: var(--entry-background-color);
       min-height: deprecated.$s-40;
       border-radius: deprecated.$br-8;
 
       .selection-btn {
-        @include deprecated.buttonStyle;
+        @include deprecated.button-style;
 
         display: grid;
         grid-template-columns: min-content auto 1fr auto auto;
@@ -125,7 +125,7 @@
 
         .checkbox-wrapper {
           @extend %input-checkbox;
-          @include deprecated.flexCenter;
+          @include deprecated.flex-center;
 
           height: deprecated.$s-24;
           width: deprecated.$s-24;
@@ -137,8 +137,8 @@
         }
 
         .selection-name {
-          @include deprecated.bodyLargeTypography;
-          @include deprecated.textEllipsis;
+          @include deprecated.body-large-typography;
+          @include deprecated.text-ellipsis;
 
           flex-grow: 1;
           color: var(--modal-text-foreground-color);
@@ -146,8 +146,8 @@
         }
 
         .selection-scale {
-          @include deprecated.bodyLargeTypography;
-          @include deprecated.textEllipsis;
+          @include deprecated.body-large-typography;
+          @include deprecated.text-ellipsis;
 
           min-width: deprecated.$s-108;
           padding: deprecated.$s-12;
@@ -155,8 +155,8 @@
         }
 
         .selection-extension {
-          @include deprecated.bodyLargeTypography;
-          @include deprecated.textEllipsis;
+          @include deprecated.body-large-typography;
+          @include deprecated.text-ellipsis;
 
           min-width: deprecated.$s-72;
           padding: deprecated.$s-12;
@@ -165,7 +165,7 @@
       }
 
       .image-wrapper {
-        @include deprecated.flexCenter;
+        @include deprecated.flex-center;
 
         min-height: deprecated.$s-32;
         min-width: deprecated.$s-32;
@@ -202,7 +202,7 @@
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-text-foreground-color);
 }
@@ -217,7 +217,7 @@
     align-items: flex-start;
 
     .modal-subtitle {
-      @include deprecated.bodyLargeTypography;
+      @include deprecated.body-large-typography;
 
       color: var(--modal-title-foreground-color);
       padding: 0.25rem 0;
@@ -230,16 +230,16 @@
 }
 
 .option-content {
-  @include deprecated.flexColumn;
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.flex-column;
+  @include deprecated.body-large-typography;
 }
 
 .file-entry {
   .file-name {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
 
     .file-icon {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-16;
       width: deprecated.$s-16;
@@ -252,8 +252,8 @@
     }
 
     .file-name-label {
-      @include deprecated.bodyLargeTypography;
-      @include deprecated.textEllipsis;
+      @include deprecated.body-large-typography;
+      @include deprecated.text-ellipsis;
     }
   }
 
diff --git a/frontend/src/app/main/ui/inspect/annotation.scss b/frontend/src/app/main/ui/inspect/annotation.scss
index 863d3f6ede..75054e7e3a 100644
--- a/frontend/src/app/main/ui/inspect/annotation.scss
+++ b/frontend/src/app/main/ui/inspect/annotation.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 }
 
 .title-spacing-annotation {
@@ -15,7 +15,7 @@
 }
 
 .annotation-content {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--entry-foreground-color);
 }
diff --git a/frontend/src/app/main/ui/inspect/code.scss b/frontend/src/app/main/ui/inspect/code.scss
index bf9bd04168..4f455da3a2 100644
--- a/frontend/src/app/main/ui/inspect/code.scss
+++ b/frontend/src/app/main/ui/inspect/code.scss
@@ -22,7 +22,7 @@
 
 .download-button {
   @extend %button-secondary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   height: deprecated.$s-32;
   width: 100%;
@@ -30,7 +30,7 @@
 }
 
 .code-block {
-  @include deprecated.codeTypography;
+  @include deprecated.code-typography;
 
   display: flex;
   flex-direction: column;
@@ -63,7 +63,7 @@
 }
 
 .code-lang {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   display: flex;
   align-items: center;
@@ -95,7 +95,7 @@
 }
 
 .code-lang-select {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   width: deprecated.$s-72;
   border: deprecated.$s-1 solid transparent;
@@ -104,7 +104,7 @@
 }
 
 .code-lang-option {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   width: deprecated.$s-72;
   height: deprecated.$s-32;
@@ -120,7 +120,7 @@
 }
 
 .toggle-btn {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: flex;
   align-items: center;
@@ -129,7 +129,7 @@
   stroke: var(--title-foreground-color);
 
   .collapsabled-icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: deprecated.$s-24;
     border-radius: deprecated.$br-8;
diff --git a/frontend/src/app/main/ui/inspect/exports.scss b/frontend/src/app/main/ui/inspect/exports.scss
index c3b5318d0e..690e83d06d 100644
--- a/frontend/src/app/main/ui/inspect/exports.scss
+++ b/frontend/src/app/main/ui/inspect/exports.scss
@@ -36,13 +36,13 @@
 }
 
 .element-set-content {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   margin-bottom: deprecated.$s-4;
 }
 
 .multiple-exports {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   grid-column: 1 / span 9;
 }
@@ -52,7 +52,7 @@
 }
 
 .actions {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 }
 
 .element-group {
@@ -102,14 +102,14 @@
 
 .suffix-input {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   grid-column: span 3;
 }
 
 .export-btn {
   @extend %button-secondary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   height: deprecated.$s-32;
   width: 100%;
diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.scss b/frontend/src/app/main/ui/inspect/right_sidebar.scss
index b0327b4673..1bc6a19a52 100644
--- a/frontend/src/app/main/ui/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/inspect/right_sidebar.scss
@@ -56,8 +56,8 @@
 }
 
 .layer-title {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.textEllipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.text-ellipsis;
 
   block-size: $sz-32;
   padding: var(--sp-s) 0;
@@ -70,8 +70,8 @@
 }
 
 .layer-subtitle {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.textEllipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.text-ellipsis;
 
   color: var(--assets-item-name-foreground-color-rest);
 }
diff --git a/frontend/src/app/main/ui/notifications/badge.scss b/frontend/src/app/main/ui/notifications/badge.scss
index 62fb7ee090..54f46964ce 100644
--- a/frontend/src/app/main/ui/notifications/badge.scss
+++ b/frontend/src/app/main/ui/notifications/badge.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .badge-notification {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   --badge-notification-bg-color: var(--alert-background-color-default);
   --badge-notification-fg-color: var(--alert-text-foreground-color-default);
@@ -31,7 +31,7 @@
 }
 
 .small {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   min-height: deprecated.$s-20;
   border-radius: deprecated.$br-6;
diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss
index c455fca32b..aa38cea54a 100644
--- a/frontend/src/app/main/ui/notifications/context_notification.scss
+++ b/frontend/src/app/main/ui/notifications/context_notification.scss
@@ -68,7 +68,7 @@
 }
 
 .context-text {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   align-self: center;
   color: var(--context-notification-fg-color);
@@ -81,7 +81,7 @@
 
 .link,
 .contain-html .context-text a {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   align-self: center;
   display: inline;
diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss
index 909f08b75a..24ca56f535 100644
--- a/frontend/src/app/main/ui/onboarding/questions.scss
+++ b/frontend/src/app/main/ui/onboarding/questions.scss
@@ -29,7 +29,7 @@
 
 // STEP CONTAINER
 .paginator {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   height: deprecated.$s-20;
   text-align: right;
@@ -50,7 +50,7 @@
 
 .radio-btns label,
 .select-class span {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 }
 
 // STEP 1
@@ -62,7 +62,7 @@
 }
 
 .modal-title {
-  @include deprecated.bigTitleTipography;
+  @include deprecated.big-title-typography;
 
   color: var(--modal-title-foreground-color);
   min-height: deprecated.$s-32;
@@ -70,7 +70,7 @@
 }
 
 .modal-subtitle {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
   margin: 0;
@@ -78,7 +78,7 @@
 }
 
 .modal-text {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-text-foreground-color);
   margin: 0;
@@ -137,7 +137,7 @@
 }
 
 .input-spacing input {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 }
 
 // STEP-4
diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs
index bb896e49b5..38b4afc5d7 100644
--- a/frontend/src/app/main/ui/onboarding/team_choice.cljs
+++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs
@@ -236,7 +236,7 @@
   [:div {:class (stl/css-case
                  :modal-overlay true)}
 
-   [:div.animated.fadeIn {:class (stl/css :modal-container)}
+   [:div.animated.fade-in {:class (stl/css :modal-container)}
     [:h1 {:class (stl/css :modal-title)}
      (tr "onboarding-v2.welcome.title")]
     [:div {:class (stl/css :modal-sections)}
diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss
index ade731846f..8b6487e53d 100644
--- a/frontend/src/app/main/ui/onboarding/team_choice.scss
+++ b/frontend/src/app/main/ui/onboarding/team_choice.scss
@@ -34,7 +34,7 @@
 }
 
 .paginator {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   position: absolute;
   top: deprecated.$s-40;
@@ -54,13 +54,13 @@
 }
 
 .modal-title {
-  @include deprecated.bigTitleTipography;
+  @include deprecated.big-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .modal-subtitle {
-  @include deprecated.medTitleTipography;
+  @include deprecated.med-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -70,34 +70,34 @@
 }
 
 .modal-text {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-text-foreground-color);
   margin: 0;
 }
 
 .modal-desc {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   margin: 0;
   color: var(--modal-title-foreground-color);
 }
 
 .team-features {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   gap: deprecated.$s-16;
   margin: 0;
 }
 
 .feature {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   gap: deprecated.$s-16;
 }
 
 .icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-32;
   width: deprecated.$s-32;
@@ -150,7 +150,7 @@
 
 .first-block,
 .second-block {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   gap: deprecated.$s-16;
 }
@@ -165,8 +165,8 @@
   @extend %input-element-label;
 
   label {
-    @include deprecated.flexColumn;
-    @include deprecated.bodySmallTypography;
+    @include deprecated.flex-column;
+    @include deprecated.body-small-typography;
 
     align-items: flex-start;
     width: 100%;
@@ -175,7 +175,7 @@
     height: 100%;
 
     input {
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
 
       margin-top: deprecated.$s-8;
     }
@@ -201,7 +201,7 @@
 }
 
 .role-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   margin-block-end: deprecated.$s-8;
   color: var(--modal-title-foreground-color);
@@ -213,7 +213,7 @@
 }
 
 .modal-hint {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--modal-text-foreground-color);
   text-align: right;
diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs
index a5d2f5610b..50c6634d09 100644
--- a/frontend/src/app/main/ui/releases.cljs
+++ b/frontend/src/app/main/ui/releases.cljs
@@ -53,7 +53,7 @@
   (let [slide* (mf/use-state :start)
         slide  (deref slide*)
 
-        klass* (mf/use-state "fadeInDown")
+        klass* (mf/use-state "fade-in-down")
         klass  (deref klass*)
 
         navigate
@@ -78,7 +78,7 @@
 
     (mf/with-effect [slide]
       (when (not= :start slide)
-        (reset! klass* "fadeIn"))
+        (reset! klass* "fade-in"))
       (let [sem (tm/schedule 300 #(reset! klass* nil))]
         (fn []
           (reset! klass* nil)
diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss
index 77d6a4ced1..f47c7c9043 100644
--- a/frontend/src/app/main/ui/releases/v2_0.scss
+++ b/frontend/src/app/main/ui/releases/v2_0.scss
@@ -38,8 +38,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -49,7 +49,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -68,20 +68,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_1.scss b/frontend/src/app/main/ui/releases/v2_1.scss
index ccf5348282..4b9913e040 100644
--- a/frontend/src/app/main/ui/releases/v2_1.scss
+++ b/frontend/src/app/main/ui/releases/v2_1.scss
@@ -38,8 +38,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -49,7 +49,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -62,7 +62,7 @@
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
diff --git a/frontend/src/app/main/ui/releases/v2_10.scss b/frontend/src/app/main/ui/releases/v2_10.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_10.scss
+++ b/frontend/src/app/main/ui/releases/v2_10.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_11.scss b/frontend/src/app/main/ui/releases/v2_11.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_11.scss
+++ b/frontend/src/app/main/ui/releases/v2_11.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_12.scss b/frontend/src/app/main/ui/releases/v2_12.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_12.scss
+++ b/frontend/src/app/main/ui/releases/v2_12.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_13.scss b/frontend/src/app/main/ui/releases/v2_13.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_13.scss
+++ b/frontend/src/app/main/ui/releases/v2_13.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_14.scss b/frontend/src/app/main/ui/releases/v2_14.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_14.scss
+++ b/frontend/src/app/main/ui/releases/v2_14.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_2.scss b/frontend/src/app/main/ui/releases/v2_2.scss
index ede5b103bf..beb1bdf674 100644
--- a/frontend/src/app/main/ui/releases/v2_2.scss
+++ b/frontend/src/app/main/ui/releases/v2_2.scss
@@ -38,8 +38,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -49,7 +49,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -62,7 +62,7 @@
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
diff --git a/frontend/src/app/main/ui/releases/v2_3.scss b/frontend/src/app/main/ui/releases/v2_3.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_3.scss
+++ b/frontend/src/app/main/ui/releases/v2_3.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_4.scss b/frontend/src/app/main/ui/releases/v2_4.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_4.scss
+++ b/frontend/src/app/main/ui/releases/v2_4.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_5.scss b/frontend/src/app/main/ui/releases/v2_5.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_5.scss
+++ b/frontend/src/app/main/ui/releases/v2_5.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_6.scss b/frontend/src/app/main/ui/releases/v2_6.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_6.scss
+++ b/frontend/src/app/main/ui/releases/v2_6.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_7.scss b/frontend/src/app/main/ui/releases/v2_7.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_7.scss
+++ b/frontend/src/app/main/ui/releases/v2_7.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_8.scss b/frontend/src/app/main/ui/releases/v2_8.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_8.scss
+++ b/frontend/src/app/main/ui/releases/v2_8.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/releases/v2_9.scss b/frontend/src/app/main/ui/releases/v2_9.scss
index 68603d9658..40c8f5316f 100644
--- a/frontend/src/app/main/ui/releases/v2_9.scss
+++ b/frontend/src/app/main/ui/releases/v2_9.scss
@@ -42,8 +42,8 @@
 }
 
 .version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.headline-small-typography;
 
   height: deprecated.$s-32;
   width: deprecated.$s-96;
@@ -53,7 +53,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineLargeTypography;
+  @include deprecated.headline-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -72,20 +72,20 @@
 }
 
 .feature-title {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-title-foreground-color);
 }
 
 .feature-content {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   margin: 0;
   color: var(--modal-text-foreground-color);
 }
 
 .feature-list {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--modal-text-foreground-color);
   list-style: disc;
diff --git a/frontend/src/app/main/ui/settings/change_email.scss b/frontend/src/app/main/ui/settings/change_email.scss
index dd4489d99b..60044a05a4 100644
--- a/frontend/src/app/main/ui/settings/change_email.scss
+++ b/frontend/src/app/main/ui/settings/change_email.scss
@@ -21,7 +21,7 @@
 }
 
 .modal-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -31,19 +31,19 @@
 }
 
 .modal-content {
-  @include deprecated.flexColumn;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.flex-column;
+  @include deprecated.body-small-typography;
 
   gap: deprecated.$s-24;
   margin-bottom: deprecated.$s-24;
 }
 
 .fields-row {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 }
 
 .select-title {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--modal-title-foreground-color);
 }
diff --git a/frontend/src/app/main/ui/settings/delete_account.scss b/frontend/src/app/main/ui/settings/delete_account.scss
index 3f07f30774..4b0b6408c9 100644
--- a/frontend/src/app/main/ui/settings/delete_account.scss
+++ b/frontend/src/app/main/ui/settings/delete_account.scss
@@ -21,7 +21,7 @@
 }
 
 .modal-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -31,19 +31,19 @@
 }
 
 .modal-content {
-  @include deprecated.flexColumn;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.flex-column;
+  @include deprecated.body-small-typography;
 
   gap: deprecated.$s-24;
   margin-bottom: deprecated.$s-24;
 }
 
 .fields-row {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 }
 
 .select-title {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--modal-title-foreground-color);
 }
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index 501a9dd137..e9571a7ab4 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -69,12 +69,12 @@
 }
 
 .element-title {
-  @include deprecated.textEllipsis;
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.text-ellipsis;
+  @include deprecated.body-medium-typography;
 }
 
 .back-to-dashboard {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: flex;
   align-items: center;
diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss
index e881541721..98ad84d385 100644
--- a/frontend/src/app/main/ui/settings/subscription.scss
+++ b/frontend/src/app/main/ui/settings/subscription.scss
@@ -168,7 +168,7 @@
 
 .cta-button {
   @include t.use-typography("body-medium");
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   align-items: center;
   color: var(--color-accent-primary);
diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss
index 7a5a694402..32c80dce5e 100644
--- a/frontend/src/app/main/ui/static.scss
+++ b/frontend/src/app/main/ui/static.scss
@@ -202,13 +202,13 @@
     }
 
     .project-name {
-      @include deprecated.uppercaseTitleTipography;
+      @include deprecated.uppercase-title-typography;
 
       color: var(--title-foreground-color);
     }
 
     .file-name {
-      @include deprecated.smallTitleTipography;
+      @include deprecated.small-title-typography;
 
       text-transform: none;
       color: var(--title-foreground-color-hover);
diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss
index b64ebe2b79..6fbf27ce92 100644
--- a/frontend/src/app/main/ui/viewer.scss
+++ b/frontend/src/app/main/ui/viewer.scss
@@ -24,7 +24,7 @@
 }
 
 .empty-state {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--empty-message-foreground-color);
   display: grid;
@@ -47,7 +47,7 @@
 }
 
 .thumbnails-close {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   grid-row: 1 / span 2;
   grid-column: 1 / span 1;
@@ -81,7 +81,7 @@
 .viewer-go-prev,
 .viewer-go-next {
   @extend %button-secondary;
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   position: absolute;
   right: deprecated.$s-8;
@@ -128,7 +128,7 @@
 
 .reset-button {
   @extend %button-secondary;
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-32;
   width: deprecated.$s-28;
@@ -144,8 +144,8 @@
 }
 
 .counter {
-  @include deprecated.flexCenter;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.body-small-typography;
 
   border-radius: deprecated.$br-8;
   width: deprecated.$s-64;
diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss
index f417ea86b9..a6b2882ad2 100644
--- a/frontend/src/app/main/ui/viewer/comments.scss
+++ b/frontend/src/app/main/ui/viewer/comments.scss
@@ -8,7 +8,7 @@
 
 // COMMENT DROPDOWN ON HEADER
 .view-options {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   align-items: center;
@@ -31,7 +31,7 @@
 }
 
 .dropdown-title {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   flex-grow: 1;
   color: var(--input-foreground-color-active);
@@ -44,7 +44,7 @@
 
 .icon,
 .icon-dropdown {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   width: deprecated.$s-16;
@@ -64,7 +64,7 @@
   @extend %dropdown-element-base;
 
   .icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: 100%;
     width: deprecated.$s-16;
diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss
index 091df03fde..c80da08171 100644
--- a/frontend/src/app/main/ui/viewer/header.scss
+++ b/frontend/src/app/main/ui/viewer/header.scss
@@ -45,39 +45,39 @@
 }
 
 .sitemap-zone {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   position: relative;
   width: 100%;
 }
 
 .project-name {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--title-foreground-color);
 }
 
 .sitemap-text {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 }
 
 .breadcrumb {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.flexRow;
+  @include deprecated.body-small-typography;
+  @include deprecated.flex-row;
 
   color: var(--title-foreground-color);
   cursor: pointer;
 }
 
 .breadcrumb-text {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   max-width: 12vw; // This is a fallback
   max-width: 12cqw; // This is a unit refered to container
 }
 
 .icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-16;
   width: deprecated.$s-16;
@@ -107,7 +107,7 @@
   @extend %dropdown-element-base;
 
   .icon-check {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: 100%;
     width: deprecated.$s-16;
@@ -125,8 +125,8 @@
 }
 
 .current-frame {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.flexRow;
+  @include deprecated.body-small-typography;
+  @include deprecated.flex-row;
 
   flex-grow: 1;
   color: var(--title-foreground-color-hover);
@@ -138,7 +138,7 @@
 }
 
 .frame-name {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   max-width: 17vw; // This is a fallback
   max-width: 17cqw; // This is a unit refered to container
@@ -146,14 +146,14 @@
 
 // SECTION BUTTONS
 .mode-zone {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   height: 100%;
 }
 
 .mode-zone-btn {
   @extend %button-tertiary;
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-32;
   width: deprecated.$s-28;
@@ -170,7 +170,7 @@
 
 // OPTION AREA
 .options-zone {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   position: relative;
   justify-content: flex-end;
@@ -187,7 +187,7 @@
 
 .fullscreen-btn {
   @extend %button-tertiary;
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-32;
   width: deprecated.$s-28;
@@ -209,7 +209,7 @@
 
 .edit-btn {
   @extend %button-tertiary;
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-32;
   width: deprecated.$s-28;
@@ -223,7 +223,7 @@
 
 .go-log-btn {
   @extend %button-tertiary;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   height: deprecated.$s-32;
   padding: 0 deprecated.$s-8;
@@ -233,15 +233,15 @@
 
 // ZOOM WIDGET
 .zoom-widget {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-28;
   min-width: deprecated.$s-64;
   border-radius: deprecated.$br-8;
 
   .label {
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
 
     color: var(--button-tertiary-foreground-color-rest);
   }
@@ -286,7 +286,7 @@
   border-radius: deprecated.$br-8;
 
   .zoom-icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     width: deprecated.$s-24;
     height: deprecated.$s-32;
@@ -306,7 +306,7 @@
 }
 
 .zoom-text {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   min-width: deprecated.$s-64;
diff --git a/frontend/src/app/main/ui/viewer/inspect.scss b/frontend/src/app/main/ui/viewer/inspect.scss
index 616c127985..171340752b 100644
--- a/frontend/src/app/main/ui/viewer/inspect.scss
+++ b/frontend/src/app/main/ui/viewer/inspect.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .inspect-svg-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   position: relative;
   flex-direction: column;
diff --git a/frontend/src/app/main/ui/viewer/interactions.scss b/frontend/src/app/main/ui/viewer/interactions.scss
index c7245a5910..d52fb6d933 100644
--- a/frontend/src/app/main/ui/viewer/interactions.scss
+++ b/frontend/src/app/main/ui/viewer/interactions.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .view-options {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   align-items: center;
@@ -21,7 +21,7 @@
 }
 
 .dropdown-title {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   flex-grow: 1;
   color: var(--input-foreground-color-active);
@@ -49,7 +49,7 @@
   min-height: deprecated.$s-32;
 
   .icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: 100%;
     width: deprecated.$s-16;
@@ -78,7 +78,7 @@
 
 .icon,
 .icon-dropdown {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   width: deprecated.$s-16;
diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss
index 7fd5afb70a..965a7e9ccf 100644
--- a/frontend/src/app/main/ui/viewer/login.scss
+++ b/frontend/src/app/main/ui/viewer/login.scss
@@ -21,7 +21,7 @@
 }
 
 .modal-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -31,8 +31,8 @@
 }
 
 .modal-content {
-  @include deprecated.flexColumn;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.flex-column;
+  @include deprecated.body-small-typography;
 
   gap: deprecated.$s-24;
   max-height: deprecated.$s-400;
diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss
index 1eea68ad9e..a0dc26278d 100644
--- a/frontend/src/app/main/ui/viewer/share_link.scss
+++ b/frontend/src/app/main/ui/viewer/share_link.scss
@@ -26,7 +26,7 @@
 }
 
 .share-link-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -36,20 +36,20 @@
 }
 
 .modal-content {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.flexColumn;
+  @include deprecated.body-small-typography;
+  @include deprecated.flex-column;
 
   gap: deprecated.$s-24;
 }
 
 .share-link-section {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   gap: deprecated.$s-8;
 }
 
 .hint-wrapper {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 }
 
 .hint {
@@ -58,7 +58,7 @@
 }
 
 .custon-input-wrapper {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   border-radius: deprecated.$br-8;
   height: deprecated.$s-32;
@@ -68,7 +68,7 @@
 
 .input-text {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--input-foreground-color-active);
   padding-left: deprecated.$s-8;
@@ -83,7 +83,7 @@
 
 .copy-button {
   @extend %button-secondary;
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   gap: deprecated.$s-8;
   height: deprecated.$s-32;
@@ -97,14 +97,14 @@
 }
 
 .description {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--modal-text-foreground-color);
   margin-bottom: deprecated.$s-24;
 }
 
 .actions {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   justify-content: flex-end;
 }
@@ -122,14 +122,14 @@
 }
 
 .permissions-section {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   gap: deprecated.$s-8;
 }
 
 .manage-permissions {
-  @include deprecated.buttonStyle;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.button-style;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--menu-foreground-color-rest);
   height: deprecated.$s-32;
@@ -139,7 +139,7 @@
 }
 
 .icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   margin-right: deprecated.$s-6;
 
@@ -182,7 +182,7 @@
 }
 
 .select-all-row {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   justify-content: space-between;
   height: deprecated.$s-32;
@@ -207,7 +207,7 @@
 
 .count-pages,
 .current-tag {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--input-foreground-color);
 }
diff --git a/frontend/src/app/main/ui/viewer/thumbnails.scss b/frontend/src/app/main/ui/viewer/thumbnails.scss
index 15d12a6794..10bc4e7d31 100644
--- a/frontend/src/app/main/ui/viewer/thumbnails.scss
+++ b/frontend/src/app/main/ui/viewer/thumbnails.scss
@@ -33,13 +33,13 @@
 }
 
 .counter {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--viewer-thumbnails-control-foreground-color);
 }
 
 .actions {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   width: deprecated.$s-60;
 }
@@ -77,7 +77,7 @@
 .right-scroll-handler,
 .left-scroll-handler {
   @extend %button-tertiary;
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   grid-column: 3 / span 1;
   grid-row: 1 / span 1;
@@ -121,7 +121,7 @@
 }
 
 .thumbnail-item {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: flex;
   flex-direction: column;
@@ -129,7 +129,7 @@
 }
 
 .thumbnail-preview {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-132;
   min-height: deprecated.$s-132;
@@ -153,8 +153,8 @@
 }
 
 .thumbnail-info {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.textEllipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.text-ellipsis;
 
   text-align: center;
   color: var(--viewer-thumbnails-control-foreground-color);
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index 026b57eb73..2d240b86a8 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -31,8 +31,8 @@
 
 .left-arrow,
 .right-arrow {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   position: relative;
   height: 100%;
@@ -124,14 +124,14 @@
   height: 100%;
 
   &.no-text {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     width: deprecated.$s-32;
   }
 }
 
 .color-palette-empty {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--palette-text-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
index 79e7cf868e..5aa8ee06a7 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
@@ -36,7 +36,7 @@
       width: 100%;
 
       .library-name {
-        @include deprecated.bodySmallTypography;
+        @include deprecated.body-small-typography;
 
         color: var(--context-menu-foreground-color);
         display: grid;
@@ -47,7 +47,7 @@
           max-width: deprecated.$s-400;
 
           .lib-name {
-            @include deprecated.textEllipsis;
+            @include deprecated.text-ellipsis;
 
             max-width: deprecated.$s-380;
           }
@@ -60,11 +60,11 @@
         .icon-wrapper {
           margin-left: deprecated.$s-4;
 
-          @include deprecated.flexCenter;
+          @include deprecated.flex-center;
 
           svg {
             @extend %button-icon-small;
-            @include deprecated.flexCenter;
+            @include deprecated.flex-center;
 
             stroke: var(--icon-foreground);
           }
@@ -85,10 +85,10 @@
         color: var(--context-menu-foreground-color-selected);
 
         .icon-wrapper {
-          @include deprecated.flexCenter;
+          @include deprecated.flex-center;
 
           svg {
-            @include deprecated.flexCenter;
+            @include deprecated.flex-center;
             @extend %button-icon-small;
 
             stroke: var(--context-menu-foreground-color-selected);
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
index e1e3a60acf..fe5b93d679 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .color-values {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   margin-top: deprecated.$s-8;
 
@@ -16,11 +16,11 @@
   }
 
   .colors-row {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
 
     .input-wrapper {
       @extend %input-element;
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
 
       width: deprecated.$s-84;
       display: flex;
@@ -29,11 +29,11 @@
   }
 
   .hex-alpha-wrapper {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
 
     .input-wrapper {
       @extend %input-element;
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
 
       width: deprecated.$s-84;
 
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
index b2efc2b627..af6a439328 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
@@ -141,7 +141,7 @@
 
 .offset-input-wrapper {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   width: deprecated.$s-92;
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
index c3a3cced1e..74b34eab5d 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
@@ -15,7 +15,7 @@
 }
 
 .hue-wheel-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   position: relative;
 }
@@ -39,7 +39,7 @@
 }
 
 .handlers-wrapper {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   height: deprecated.$s-200;
   width: deprecated.$s-52;
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
index e8222e902c..17e0b52fc6 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .hsva-selector {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   padding: deprecated.$s-4;
   row-gap: deprecated.$s-8;
@@ -20,7 +20,7 @@
 }
 
 .hsva-selector-label {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   display: flex;
   align-items: center;
diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss
index 0b49ea07c8..9b956523ca 100644
--- a/frontend/src/app/main/ui/workspace/comments.scss
+++ b/frontend/src/app/main/ui/workspace/comments.scss
@@ -23,7 +23,7 @@
 }
 
 .mode-dropdown-wrapper {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
   @extend %asset-element;
 
   background-color: var(--color-background-tertiary);
@@ -46,7 +46,7 @@
 }
 
 .arrow-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-24;
   width: deprecated.$s-24;
@@ -78,7 +78,7 @@
   justify-content: space-between;
 
   .icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: deprecated.$s-24;
     width: deprecated.$s-24;
@@ -91,7 +91,7 @@
   }
 
   .label {
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
   }
 
   &:hover {
diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss
index bef5f39fd9..53d1d0baf2 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/context_menu.scss
@@ -15,7 +15,7 @@
 
 .context-list,
 .workspace-context-submenu {
-  @include deprecated.menuShadow;
+  @include deprecated.menu-shadow;
 
   display: grid;
   width: deprecated.$s-240;
@@ -46,20 +46,20 @@
   cursor: pointer;
 
   .title {
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
 
     color: var(--menu-foreground-color);
   }
 
   .shortcut {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     gap: deprecated.$s-2;
     color: var(--menu-shortcut-foreground-color);
 
     .shortcut-key {
-      @include deprecated.bodySmallTypography;
-      @include deprecated.flexCenter;
+      @include deprecated.body-small-typography;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-20;
       padding: deprecated.$s-2 deprecated.$s-6;
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index 1007aeeb44..1522c0a2d5 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -14,7 +14,7 @@
 }
 
 .main-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-32;
   height: deprecated.$s-32;
@@ -38,8 +38,8 @@
 
 .project-name,
 .file-name {
-  @include deprecated.uppercaseTitleTipography;
-  @include deprecated.textEllipsis;
+  @include deprecated.uppercase-title-typography;
+  @include deprecated.text-ellipsis;
 
   height: deprecated.$s-16;
   width: 100%;
@@ -49,7 +49,7 @@
 }
 
 .file-name {
-  @include deprecated.smallTitleTipography;
+  @include deprecated.small-title-typography;
 
   text-transform: none;
   color: var(--title-foreground-color-hover);
@@ -59,11 +59,11 @@
 }
 
 .file-name-label {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 }
 
 .file-name-input {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: 100%;
   margin: 0;
@@ -82,7 +82,7 @@
 }
 
 .shared-badge {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-16;
   height: deprecated.$s-32;
diff --git a/frontend/src/app/main/ui/workspace/nudge.scss b/frontend/src/app/main/ui/workspace/nudge.scss
index 82797d3b3e..8b62ca7f10 100644
--- a/frontend/src/app/main/ui/workspace/nudge.scss
+++ b/frontend/src/app/main/ui/workspace/nudge.scss
@@ -21,7 +21,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineMediumTypography;
+  @include deprecated.headline-medium-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -31,18 +31,18 @@
 }
 
 .modal-content {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   gap: deprecated.$s-24;
 
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   margin-bottom: deprecated.$s-24;
 }
 
 .input-wrapper {
   @extend %input-with-label;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   label {
     text-transform: none;
@@ -50,7 +50,7 @@
 }
 
 .modal-msg {
-  @include deprecated.bodyLargeTypography;
+  @include deprecated.body-large-typography;
 
   color: var(--modal-text-foreground-color);
   line-height: 1.5;
diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss
index f7d77f70b6..53201a64bd 100644
--- a/frontend/src/app/main/ui/workspace/palette.scss
+++ b/frontend/src/app/main/ui/workspace/palette.scss
@@ -72,7 +72,7 @@
     }
 
     .palette-item {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       border-radius: deprecated.$br-8;
       opacity: deprecated.$op-10;
@@ -127,8 +127,8 @@
 }
 
 .handler {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-12;
   height: 100%;
diff --git a/frontend/src/app/main/ui/workspace/plugins.scss b/frontend/src/app/main/ui/workspace/plugins.scss
index d51dc2ff68..06d774ded8 100644
--- a/frontend/src/app/main/ui/workspace/plugins.scss
+++ b/frontend/src/app/main/ui/workspace/plugins.scss
@@ -52,7 +52,7 @@
 }
 
 .modal-title {
-  @include deprecated.headlineMediumTypography;
+  @include deprecated.headline-medium-typography;
 
   margin-block-end: deprecated.$s-32;
   color: var(--modal-title-foreground-color);
@@ -86,7 +86,7 @@
 
 .primary-button {
   @extend %button-primary;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.headline-small-typography;
 
   padding: deprecated.$s-0 deprecated.$s-16;
 }
@@ -98,13 +98,13 @@
 
 .cancel-button {
   @extend %button-secondary;
-  @include deprecated.headlineSmallTypography;
+  @include deprecated.headline-small-typography;
 
   padding: deprecated.$s-0 deprecated.$s-16;
 }
 
 .search-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-20;
   padding: 0 0 0 deprecated.$s-8;
@@ -163,13 +163,13 @@
 }
 
 .plugin-title {
-  @include deprecated.bodyMediumTypography;
+  @include deprecated.body-medium-typography;
 
   color: var(--color-foreground-primary);
 }
 
 .plugin-summary {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-secondary);
 }
@@ -202,7 +202,7 @@
 }
 
 .plugins-empty-text {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-primary);
 }
@@ -212,7 +212,7 @@ div.input-error {
 }
 
 .info {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin-top: deprecated.$s-4;
 
@@ -262,14 +262,14 @@ div.input-error {
 }
 
 .permissions-list-text {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin: 0;
   color: var(--color-foreground-secondary);
 }
 
 .permissions-disclaimer {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   padding: deprecated.$s-16;
   background: var(--color-background-quaternary);
@@ -283,7 +283,7 @@ div.input-error {
 }
 
 .discover {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-secondary);
   margin-top: deprecated.$s-24;
diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss
index 2f6bbbeb52..50cee33d7a 100644
--- a/frontend/src/app/main/ui/workspace/right_header.scss
+++ b/frontend/src/app/main/ui/workspace/right_header.scss
@@ -28,7 +28,7 @@
 }
 
 .zoom-widget {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: flex;
   align-items: center;
@@ -39,7 +39,7 @@
   border-radius: deprecated.$br-8;
 
   .label {
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
 
     height: 100%;
     padding: deprecated.$s-8 0;
@@ -79,7 +79,7 @@
 }
 
 .zoom-text {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   min-width: deprecated.$s-48;
@@ -181,14 +181,14 @@
 }
 
 .persistence-status-widget {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-28;
   height: deprecated.$s-28;
 }
 
 .status-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-24;
   height: deprecated.$s-24;
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index 42708ad9f6..5747dbcd19 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -102,8 +102,8 @@
 .collapse-sidebar-button {
   --collapse-icon-color: var(--color-foreground-secondary);
 
-  @include deprecated.flexCenter;
-  @include deprecated.buttonStyle;
+  @include deprecated.flex-center;
+  @include deprecated.button-style;
 
   height: 100%;
   width: deprecated.$s-24;
@@ -117,7 +117,7 @@
 }
 
 .collapsed-sidebar {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   position: absolute;
   top: deprecated.$s-48;
@@ -129,7 +129,7 @@
 }
 
 .collapsed-title {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-36;
   width: deprecated.$s-24;
@@ -138,7 +138,7 @@
 }
 
 .collapsed-button {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   height: deprecated.$s-24;
   width: deprecated.$s-16;
@@ -146,7 +146,7 @@
   border-radius: deprecated.$br-5;
 
   svg {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: deprecated.$s-16;
     width: deprecated.$s-16;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
index ebf3dc0f89..d04fac7aa2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
@@ -19,7 +19,7 @@
 
 .libraries-button {
   @extend %button-secondary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   gap: deprecated.$s-2;
   height: deprecated.$s-32;
@@ -42,7 +42,7 @@
 
 .add-library-button {
   @extend %button-primary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   gap: deprecated.$s-2;
   height: deprecated.$s-32;
@@ -52,8 +52,8 @@
 }
 
 .section-button {
-  @include deprecated.flexCenter;
-  @include deprecated.buttonStyle;
+  @include deprecated.flex-center;
+  @include deprecated.button-style;
 
   height: deprecated.$s-32;
   width: deprecated.$s-32;
@@ -106,8 +106,8 @@
 }
 
 .sections-container {
-  @include deprecated.menuShadow;
-  @include deprecated.flexColumn;
+  @include deprecated.menu-shadow;
+  @include deprecated.flex-column;
 
   position: absolute;
   top: deprecated.$s-84;
@@ -120,7 +120,7 @@
 }
 
 .section-item {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   align-items: center;
@@ -131,7 +131,7 @@
 }
 
 .section-btn {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 }
 
 .assets-header {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
index 2e44a4ba11..aaa1b09f37 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
@@ -40,9 +40,9 @@ $assets-button-width: deprecated.$s-28;
     border: deprecated.$s-1 solid var(--input-border-color-focus);
 
     input.element-name {
-      @include deprecated.textEllipsis;
-      @include deprecated.bodySmallTypography;
-      @include deprecated.removeInputStyle;
+      @include deprecated.text-ellipsis;
+      @include deprecated.body-small-typography;
+      @include deprecated.remove-input-style;
 
       flex-grow: 1;
       margin: 0;
@@ -56,7 +56,7 @@ $assets-button-width: deprecated.$s-28;
 }
 
 .bullet-block {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   justify-content: flex-start;
@@ -64,8 +64,8 @@ $assets-button-width: deprecated.$s-28;
 }
 
 .name-block {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.textEllipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.text-ellipsis;
 
   margin: 0;
   color: var(--assets-item-name-foreground-color);
@@ -81,7 +81,7 @@ $assets-button-width: deprecated.$s-28;
 }
 
 .element-name {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   color: var(--color-foreground-primary);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
index 4773f97583..2188db46a8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as deprecated;
 
 .title-name {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   display: flex;
   align-items: center;
@@ -16,7 +16,7 @@
 }
 
 .title-tokens {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   text-transform: capitalize;
 }
@@ -26,12 +26,12 @@
 }
 
 .section-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   padding-right: deprecated.$s-2;
 
   svg {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     height: deprecated.$s-16;
     width: deprecated.$s-16;
@@ -47,7 +47,7 @@
 }
 
 .num-assets {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   padding-left: deprecated.$s-8;
@@ -62,8 +62,8 @@
 }
 
 .drag-counter {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.textEllipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.text-ellipsis;
 
   position: absolute;
   bottom: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
index c4c2315d64..e8c63bb18f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
@@ -37,7 +37,7 @@
 }
 
 .special-title {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   color: var(--title-foreground-color-hover);
   margin-left: deprecated.$s-2;
@@ -75,7 +75,7 @@
 }
 
 .no-found-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   background-color: var(--not-found-background-color);
   border-radius: deprecated.$br-circle;
@@ -92,7 +92,7 @@
 }
 
 .no-found-text {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--not-found-foreground-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
index 12a50ea556..0152e5e52c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
@@ -40,7 +40,7 @@
 }
 
 .path {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   margin-left: deprecated.$s-2;
   text-transform: initial;
@@ -60,7 +60,7 @@
 }
 
 .modal-title {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   color: var(--modal-title-foreground-color);
 }
@@ -70,14 +70,14 @@
 }
 
 .modal-content {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin-bottom: deprecated.$s-24;
 }
 
 .input-wrapper {
   @extend %input-with-label;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   margin-bottom: deprecated.$s-8;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
index 290f4460e9..659444daaf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
@@ -11,8 +11,8 @@
   --element-name-comp-color: var(--context-hover-color, var(--layer-row-component-foreground-color));
   --element-name-opacity: var(--context-hover-opacity, deprecated.$op-7);
 
-  @include deprecated.textEllipsis;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.text-ellipsis;
+  @include deprecated.body-small-typography;
 
   color: var(--element-name-color);
   flex-grow: 1;
@@ -41,9 +41,9 @@
   --element-name-input-border-color: var(--input-border-color-focus);
   --element-name-input-color: var(--layer-row-foreground-color);
 
-  @include deprecated.textEllipsis;
-  @include deprecated.bodySmallTypography;
-  @include deprecated.removeInputStyle;
+  @include deprecated.text-ellipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.remove-input-style;
 
   flex-grow: 1;
   height: deprecated.$s-28;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 7fb33a72da..048aa08549 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -20,8 +20,8 @@
     gap: deprecated.$s-4;
 
     .filter-button {
-      @include deprecated.flexCenter;
-      @include deprecated.buttonStyle;
+      @include deprecated.flex-center;
+      @include deprecated.button-style;
 
       height: deprecated.$s-32;
       width: deprecated.$s-32;
@@ -65,7 +65,7 @@
 }
 
 .page-name {
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   padding: 0 deprecated.$s-12;
   color: var(--title-foreground-color);
@@ -88,7 +88,7 @@
 }
 
 .focus-title {
-  @include deprecated.buttonStyle;
+  @include deprecated.button-style;
 
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -98,7 +98,7 @@
 }
 
 .back-button {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-32;
   width: deprecated.$s-24;
@@ -113,22 +113,22 @@
 }
 
 .focus-name {
-  @include deprecated.textEllipsis;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.text-ellipsis;
+  @include deprecated.body-small-typography;
 
   padding-left: deprecated.$s-4;
   color: var(--title-foreground-color);
 }
 
 .focus-mode-tag-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   height: 100%;
   margin-right: deprecated.$s-12;
 }
 
 .active-filters {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   flex-wrap: wrap;
   margin: 0 deprecated.$s-12;
@@ -151,8 +151,8 @@
 }
 
 .layer-filter-name {
-  @include deprecated.flexCenter;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.flex-center;
+  @include deprecated.body-small-typography;
 
   color: var(--pill-foreground-color);
 }
@@ -169,7 +169,7 @@
   width: deprecated.$s-192;
 
   .filter-menu-item {
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
 
     display: flex;
     align-items: center;
@@ -285,7 +285,7 @@
 }
 
 .scope-label {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-secondary);
   cursor: pointer;
@@ -302,7 +302,7 @@
 }
 
 .replace-input-wrapper {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   flex: 1;
   height: deprecated.$s-32;
@@ -346,8 +346,8 @@
 }
 
 .replace-button {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.buttonStyle;
+  @include deprecated.body-small-typography;
+  @include deprecated.button-style;
 
   flex: 1;
   height: deprecated.$s-28;
@@ -378,14 +378,14 @@
 }
 
 .match-count {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-secondary);
   white-space: nowrap;
 }
 
 .no-matches {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--color-foreground-secondary);
   white-space: nowrap;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
index 7a89a734af..1599bcad25 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
@@ -25,7 +25,7 @@
   border-radius: deprecated.$br-8;
 
   .collapsed-icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     cursor: pointer;
 
@@ -49,7 +49,7 @@
 }
 
 .select-name {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   justify-content: flex-start;
@@ -83,7 +83,7 @@
     }
 
     .check-icon {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       svg {
         @extend %button-icon-small;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
index 7445581652..2d1c6263b7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
@@ -21,7 +21,7 @@
 }
 
 .element-set-content {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   margin-bottom: deprecated.$s-8;
 }
@@ -61,7 +61,7 @@
     }
 
     .label {
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
 
       flex-grow: 1;
       display: flex;
@@ -82,21 +82,21 @@
   }
 
   .actions {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
   }
 
   &.hidden {
     .blur-info {
-      @include deprecated.hiddenElement;
+      @include deprecated.hidden-element;
 
       .show-more {
-        @include deprecated.hiddenElement;
+        @include deprecated.hidden-element;
 
         border: deprecated.$s-1 solid var(--input-border-color-disabled);
       }
 
       .label {
-        @include deprecated.hiddenElement;
+        @include deprecated.hidden-element;
 
         border: deprecated.$s-1 solid var(--input-border-color-disabled);
       }
@@ -106,7 +106,7 @@
 
 .second-row {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   width: deprecated.$s-92;
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
index 9d8c30d5c0..d138c82ac2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
@@ -34,18 +34,18 @@
 .element-content {
   grid-column: span 8;
 
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   margin-bottom: deprecated.$s-8;
 }
 
 .selected-color-group {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 }
 
 .more-colors-btn {
   @extend %button-secondary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   height: deprecated.$s-32;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
index 5aec6eef23..e0fbb84843 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
@@ -29,7 +29,7 @@
 .constraints-center,
 .constraints-right,
 .constraints-bottom {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   grid-area: top;
 }
@@ -37,8 +37,8 @@
 .constraint-btn,
 .constraint-btn-special,
 .constraint-btn-rotated {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   width: 100%;
   height: 100%;
@@ -152,7 +152,7 @@
   }
 
   label {
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
 
     display: flex;
     align-items: center;
@@ -161,7 +161,7 @@
     color: var(--input-checkbox-text-foreground-color);
 
     .check-mark {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       width: deprecated.$s-16;
       height: deprecated.$s-16;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
index a1b4706f9a..f224403269 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
@@ -27,7 +27,7 @@
 }
 
 .multiple-exports {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   grid-column: 1 / span 9;
 
@@ -36,7 +36,7 @@
   }
 
   .actions {
-    @include deprecated.flexRow;
+    @include deprecated.flex-row;
   }
 }
 
@@ -78,12 +78,12 @@
   grid-column: span 3;
 
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 }
 
 .export-btn {
   @extend %button-secondary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   grid-column: 1 / span 9;
   height: deprecated.$s-32;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
index 52171dde2e..75b108f768 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
@@ -21,7 +21,7 @@
 }
 
 .element-set-content {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   grid-column: span 8;
   margin: deprecated.$s-4 0 deprecated.$s-8 0;
@@ -87,7 +87,7 @@
 
     .numeric-input {
       @extend %input-base;
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
     }
   }
 
@@ -108,14 +108,14 @@
 
       .numeric-input {
         @extend %input-base;
-        @include deprecated.bodySmallTypography;
+        @include deprecated.body-small-typography;
 
         margin: 0;
         padding: 0;
       }
 
       span {
-        @include deprecated.flexCenter;
+        @include deprecated.flex-center;
 
         svg {
           @extend %button-icon;
@@ -126,35 +126,35 @@
 
   &.hidden {
     .show-options {
-      @include deprecated.hiddenElement;
+      @include deprecated.hidden-element;
 
       border: deprecated.$s-1 solid var(--input-border-color-disabled);
     }
 
     .type-select-wrapper,
     .editable-select-wrapper {
-      @include deprecated.hiddenElement;
+      @include deprecated.hidden-element;
 
       .column-select,
       .grid-type-select {
-        @include deprecated.hiddenElement;
+        @include deprecated.hidden-element;
 
         border: deprecated.$s-1 solid var(--input-border-color-disabled);
       }
 
       .column-select {
-        @include deprecated.hiddenElement;
+        @include deprecated.hidden-element;
 
         border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
 
         .numeric-input {
-          @include deprecated.hiddenElement;
+          @include deprecated.hidden-element;
         }
       }
     }
 
     .grid-size {
-      @include deprecated.hiddenElement;
+      @include deprecated.hidden-element;
 
       border: deprecated.$s-1 solid var(--input-border-color-disabled);
 
@@ -181,20 +181,20 @@
 }
 
 .actions {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   grid-column: span 2;
 }
 
 .grid-advanced-options {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   margin-top: deprecated.$s-4;
 }
 
 .column-row,
 .square-row {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   position: relative;
 }
@@ -230,7 +230,7 @@
 
   .height {
     @extend %input-element;
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
 
     .icon-text {
       padding-top: deprecated.$s-1;
@@ -240,7 +240,7 @@
   .gutter,
   .margin {
     @extend %input-element;
-    @include deprecated.bodySmallTypography;
+    @include deprecated.body-small-typography;
 
     .icon {
       &.rotated svg {
@@ -250,8 +250,8 @@
   }
 
   .more-options {
-    @include deprecated.menuShadow;
-    @include deprecated.flexColumn;
+    @include deprecated.menu-shadow;
+    @include deprecated.flex-column;
 
     position: absolute;
     top: calc(deprecated.$s-2 + deprecated.$s-28);
@@ -267,7 +267,7 @@
     background-color: var(--menu-background-color);
 
     .option-btn {
-      @include deprecated.buttonStyle;
+      @include deprecated.button-style;
 
       display: flex;
       align-items: center;
@@ -292,7 +292,7 @@
   width: deprecated.$s-108;
 
   .btn-options {
-    @include deprecated.buttonStyle;
+    @include deprecated.button-style;
     @extend %dropdown-element-base;
 
     width: 100%;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
index c54da28b43..9e4aa4ca3b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
@@ -8,7 +8,7 @@
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .grid-cell-menu-container {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   margin-top: deprecated.$s-8;
   gap: deprecated.$s-16;
@@ -28,7 +28,7 @@
 }
 
 .row {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 }
 
 .cell-mode :global(label) {
@@ -37,7 +37,7 @@
 
 .edit-grid-btn {
   @extend %button-secondary;
-  @include deprecated.uppercaseTitleTipography;
+  @include deprecated.uppercase-title-typography;
 
   width: 100%;
   padding: deprecated.$s-8;
@@ -45,14 +45,14 @@
 
 .area-input {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   width: 100%;
   padding: deprecated.$s-8;
 }
 
 .grid-coord-group {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   border-radius: deprecated.$br-8;
   padding-left: deprecated.$s-4;
@@ -67,7 +67,7 @@
 
 .coord-input {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
   border-left: deprecated.$s-1 solid var(--panel-background-color);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
index e6266df974..e3605152d8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -36,7 +36,7 @@
   border-radius: deprecated.$br-8;
 
   .collapsed-icon {
-    @include deprecated.flexCenter;
+    @include deprecated.flex-center;
 
     cursor: pointer;
 
@@ -60,7 +60,7 @@
 }
 
 .select-name {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   justify-content: flex-start;
@@ -94,7 +94,7 @@
     }
 
     .check-icon {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       svg {
         @extend %button-icon-small;
@@ -150,7 +150,7 @@
 .y-position,
 .rotation {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   .icon-text {
     padding-top: deprecated.$s-1;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
index ccbb34de36..d8fabe2295 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
@@ -16,7 +16,7 @@
 }
 
 .element-set-content {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   margin: deprecated.$s-4 0 0 0;
 }
@@ -27,8 +27,8 @@
 }
 
 .attr-name {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.twoLineTextEllipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.two-line-text-ellipsis;
 
   width: deprecated.$s-88;
   margin: auto deprecated.$s-4;
@@ -39,7 +39,7 @@
 
 .attr-input {
   @extend %input-element;
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   width: deprecated.$s-124;
 }
@@ -66,7 +66,7 @@
 }
 
 .attr-title {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   font-size: deprecated.$fs-10;
   text-transform: uppercase;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
index 8805b83543..e589c4dd79 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
@@ -18,7 +18,7 @@
 }
 
 .element-content {
-  @include deprecated.flexColumn;
+  @include deprecated.flex-column;
 
   grid-column: span 8;
   margin-top: deprecated.$s-4;
@@ -29,7 +29,7 @@
 }
 
 .multiple-text {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   flex-grow: 1;
   color: var(--input-foreground-color-active);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
index 0e68e8ee26..8279a4970c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
@@ -28,7 +28,7 @@
 }
 
 .not-found {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--empty-message-foreground-color);
   margin: deprecated.$s-12;
@@ -45,7 +45,7 @@
 
   .section-title,
   .subsection-title {
-    @include deprecated.uppercaseTitleTipography;
+    @include deprecated.uppercase-title-typography;
 
     display: flex;
     align-items: center;
@@ -87,21 +87,21 @@
       background-color: var(--pill-background-color);
 
       .command-name {
-        @include deprecated.bodySmallTypography;
+        @include deprecated.body-small-typography;
 
         margin-left: deprecated.$s-2;
         color: var(--pill-foreground-color);
       }
 
       .keys {
-        @include deprecated.flexCenter;
+        @include deprecated.flex-center;
 
         gap: deprecated.$s-2;
         color: var(--pill-foreground-color);
 
         .key {
-          @include deprecated.bodySmallTypography;
-          @include deprecated.flexCenter;
+          @include deprecated.body-small-typography;
+          @include deprecated.flex-center;
 
           text-transform: capitalize;
           height: deprecated.$s-20;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index 3a7a3233ac..dd0370c5ed 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -56,7 +56,7 @@
 }
 
 .page-element {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   min-height: deprecated.$s-32;
   width: 100%;
@@ -84,14 +84,14 @@
     color: var(--layer-row-foreground-color);
 
     .page-name {
-      @include deprecated.textEllipsis;
+      @include deprecated.text-ellipsis;
 
       flex-grow: 1;
       padding-left: deprecated.$s-2;
     }
 
     .page-icon {
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       height: deprecated.$s-32;
       width: deprecated.$s-24;
@@ -112,8 +112,8 @@
       align-items: center;
 
       button {
-        @include deprecated.buttonStyle;
-        @include deprecated.flexCenter;
+        @include deprecated.button-style;
+        @include deprecated.flex-center;
 
         width: deprecated.$s-24;
         height: 100%;
@@ -130,15 +130,15 @@
     }
 
     .element-name {
-      @include deprecated.textEllipsis;
+      @include deprecated.text-ellipsis;
 
       color: var(--layer-row-foreground-color-focus);
     }
 
     input.element-name {
-      @include deprecated.textEllipsis;
-      @include deprecated.bodySmallTypography;
-      @include deprecated.removeInputStyle;
+      @include deprecated.text-ellipsis;
+      @include deprecated.body-small-typography;
+      @include deprecated.remove-input-style;
 
       flex-grow: 1;
       height: deprecated.$s-28;
diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss
index f5947604e8..8090f88e7c 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette.scss
@@ -13,8 +13,8 @@
 
 .left-arrow,
 .right-arrow {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   position: relative;
   height: 100%;
@@ -89,7 +89,7 @@
 }
 
 .typography-item {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   flex-direction: column;
@@ -106,7 +106,7 @@
   }
 
   .typography-name {
-    @include deprecated.textEllipsis;
+    @include deprecated.text-ellipsis;
 
     height: deprecated.$s-16;
     width: deprecated.$s-120;
@@ -114,7 +114,7 @@
   }
 
   .typography-font {
-    @include deprecated.textEllipsis;
+    @include deprecated.text-ellipsis;
 
     height: deprecated.$s-16;
     width: deprecated.$s-120;
@@ -122,7 +122,7 @@
   }
 
   .typography-data {
-    @include deprecated.textEllipsis;
+    @include deprecated.text-ellipsis;
 
     height: deprecated.$s-16;
     width: deprecated.$s-120;
@@ -152,7 +152,7 @@
 }
 
 .text-palette-empty {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   color: var(--palette-text-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
index 83e01b672b..0a8a3985d7 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
@@ -33,7 +33,7 @@
     }
 
     .library-name {
-      @include deprecated.bodySmallTypography;
+      @include deprecated.body-small-typography;
 
       color: var(--context-menu-foreground-color);
       display: grid;
@@ -41,7 +41,7 @@
       max-width: deprecated.$s-400;
 
       .lib-name {
-        @include deprecated.textEllipsis;
+        @include deprecated.text-ellipsis;
 
         max-width: deprecated.$s-380;
       }
@@ -54,10 +54,10 @@
     .icon-wrapper {
       margin-left: deprecated.$s-4;
 
-      @include deprecated.flexCenter;
+      @include deprecated.flex-center;
 
       svg {
-        @include deprecated.flexCenter;
+        @include deprecated.flex-center;
         @extend %button-icon-small;
 
         stroke: var(--icon-foreground);
@@ -67,10 +67,10 @@
     &.selected,
     &:hover {
       .icon-wrapper {
-        @include deprecated.flexCenter;
+        @include deprecated.flex-center;
 
         svg {
-          @include deprecated.flexCenter;
+          @include deprecated.flex-center;
           @extend %button-icon-small;
 
           stroke: var(--context-menu-foreground-color-selected);
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss
index fdbdcbe98d..284040b470 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss
@@ -22,7 +22,7 @@
 
 .context-list,
 .token-context-submenu {
-  @include deprecated.menuShadow;
+  @include deprecated.menu-shadow;
 
   display: grid;
   width: deprecated.$s-240;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 5209ff4bed..f7141b973b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -30,7 +30,7 @@
 }
 
 .set-item-container {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   align-items: center;
@@ -68,7 +68,7 @@
 }
 
 .set-name {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   flex-grow: 1;
   padding-left: deprecated.$s-2;
@@ -142,8 +142,8 @@
 }
 
 .collapsabled-icon {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-24;
   border-radius: deprecated.$br-8;
@@ -154,9 +154,9 @@
 }
 
 .editing-node {
-  @include deprecated.textEllipsis;
-  @include deprecated.bodySmallTypography;
-  @include deprecated.removeInputStyle;
+  @include deprecated.text-ellipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.remove-input-style;
 
   border: deprecated.$s-1 solid var(--input-border-color-focus);
   border-radius: deprecated.$br-8;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss
index a09d7699b1..53e6e72901 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss
@@ -13,7 +13,7 @@
 }
 
 .context-list {
-  @include deprecated.menuShadow;
+  @include deprecated.menu-shadow;
 
   display: grid;
   width: deprecated.$s-240;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss b/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss
index 5209ff4bed..f7141b973b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss
@@ -30,7 +30,7 @@
 }
 
 .set-item-container {
-  @include deprecated.bodySmallTypography;
+  @include deprecated.body-small-typography;
 
   display: flex;
   align-items: center;
@@ -68,7 +68,7 @@
 }
 
 .set-name {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   flex-grow: 1;
   padding-left: deprecated.$s-2;
@@ -142,8 +142,8 @@
 }
 
 .collapsabled-icon {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
+  @include deprecated.button-style;
+  @include deprecated.flex-center;
 
   height: deprecated.$s-24;
   border-radius: deprecated.$br-8;
@@ -154,9 +154,9 @@
 }
 
 .editing-node {
-  @include deprecated.textEllipsis;
-  @include deprecated.bodySmallTypography;
-  @include deprecated.removeInputStyle;
+  @include deprecated.text-ellipsis;
+  @include deprecated.body-small-typography;
+  @include deprecated.remove-input-style;
 
   border: deprecated.$s-1 solid var(--input-border-color-focus);
   border-radius: deprecated.$br-8;
diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss
index c252590b18..1526c63b7a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss
@@ -126,7 +126,7 @@
 .group-title-name {
   flex-grow: 1;
 
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 }
 
 .theme-group-rows-wrapper {
@@ -152,7 +152,7 @@
 }
 
 .theme-name-row {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   flex-grow: 1;
 }
diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss b/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss
index 7d7171536e..cf9a2077a4 100644
--- a/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss
@@ -43,7 +43,7 @@
 }
 
 .group {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 
   display: block;
   padding: deprecated.$s-8;
@@ -61,13 +61,13 @@
 }
 
 .dropdown-button {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   color: var(--color-foreground-secondary);
 }
 
 .current-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   width: deprecated.$s-24;
   padding-right: deprecated.$s-4;
@@ -115,7 +115,7 @@
 }
 
 .check-icon {
-  @include deprecated.flexCenter;
+  @include deprecated.flex-center;
 
   color: var(--icon-foreground-primary);
   visibility: hidden;
@@ -131,7 +131,7 @@
 }
 
 .current-label {
-  @include deprecated.textEllipsis;
+  @include deprecated.text-ellipsis;
 }
 
 .dropdown-portal {
diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss
index fe603de407..f513b7b048 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.scss
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss
@@ -84,8 +84,8 @@
 }
 
 .toolbar-handler {
-  @include deprecated.flexCenter;
-  @include deprecated.buttonStyle;
+  @include deprecated.flex-center;
+  @include deprecated.button-style;
 
   position: absolute;
   left: 0;
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
index a2f8f0b345..9009fe8d76 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
@@ -119,7 +119,7 @@
 }
 
 .grid-actions-container {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   background: var(--panel-background-color);
   border-radius: deprecated.$br-12;
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
index 484ae669d9..5ee297d756 100644
--- a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
@@ -24,7 +24,7 @@
 }
 
 .viewport-actions-container {
-  @include deprecated.flexRow;
+  @include deprecated.flex-row;
 
   background: var(--panel-background-color);
   border-radius: deprecated.$br-12;